@peter.prib/renderengine 0.2.11 → 0.4.0

package/dist/renderengine-workspace.umd.js

@@ -1626,319 +1626,327 @@
      */
     const SYSTEM_THEME = 'system';
 
-    /** Bump when the serialized shape changes; `deserialize` migrates on the way in. */
-    const WORKSPACE_SCHEMA_VERSION = 1;
-
-    /**
-     * Workspace — the `<ws-workspace>` custom element and the shell's public API.
-     *
-     * Renders into **light DOM**: parts routinely carry their own stylesheets, and a
-     * consumer stylesheet cannot cross a shadow boundary. All shell markup is
-     * `ws-`-prefixed and themed through CSS custom properties instead.
-     *
-     * Typical wiring:
-     *
-     *   const ws = document.querySelector('ws-workspace');
-     *   ws.registerParts([ListPart, DetailPart, ChartPart]);
-     *   ws.addPart({ id: 'nav', type: 'list', title: 'Tables', items: [...] });
-     *   ws.registerPerspective('default', { type: 'split', dir: 'row', children: [...] });
-     *   ws.activatePerspective('default');
-     */
-    class Workspace extends HTMLElement {
-        constructor() {
-            super();
-            this.bus = new ContextBus();
-            this.registry = new PartRegistry();
-            /** @type {Map<string, object>} name → layout JSON */
-            this.perspectives = new Map();
-            this.activePerspective = null;
-            /** @type {import('./layout/LayoutNode.js').LayoutNode|null} */
-            this.tree = null;
-            /** @type {Map<string, object>} theme name → CSS custom-property map */
-            this.themes = new Map(Object.entries(BUILTIN_THEMES));
-            /** The *selection* — may be `system`, which resolves at apply time. */
-            this.theme = 'light';
-            /** Custom properties currently written onto the host, so they can be
-             *  cleared before a different theme is applied. */
-            this._appliedVars = [];
-            this._built = false;
-        }
-
-        /* ── Element lifecycle ──────────────────────────────────────────────── */
-
-        connectedCallback() {
-            if (this._built) return;
-            this._built = true;
-            ensureStyles(this.ownerDocument ?? document);
-            this.classList.add('ws-workspace');
-
-            // Chrome is built from element specs rather than an HTML string, and
-            // `ref` captures the nodes directly — no querySelector round-trip.
-            // `label`, not `title` — `title` is a global HTML attribute and would
-            // also render a browser tooltip over the whole workspace.
-            render(this, [
-                { cls: 'ws-toolbar', children: [
-                    { tag: 'span', cls: 'ws-toolbar-title', text: this.getAttribute('label') ?? '' },
-                    { tag: 'span', cls: 'ws-toolbar-spacer' },
-                    { tag: 'span', cls: 'ws-theme-picker', ref: n => { this._themePickerEl = n; } },
-                    { tag: 'span', cls: 'ws-perspectives', ref: n => { this._perspectivesEl = n; } },
-                ]},
-                { cls: 'ws-root', ref: n => { this._rootEl = n; } },
-            ]);
-
-            this.applyTheme(this.getAttribute('theme') ?? 'light');
-            this._renderThemePicker();
-
-            // A perspective registered before the element was connected renders now.
-            if (this.activePerspective) this._renderTree();
-            else if (this.perspectives.size) this.activatePerspective([...this.perspectives.keys()][0]);
-        }
-
-        disconnectedCallback() {
-            this.tree?.dispose();
-            this.tree = null;
-            this._watchSystemTheme(false); // a live matchMedia listener would outlive the element
-        }
-
-        /* ── Parts ──────────────────────────────────────────────────────────── */
-
-        registerPart(PartClass) { this.registry.register(PartClass); return this; }
-        registerParts(classes) { this.registry.registerAll(classes); return this; }
-
-        /** Create a pooled part instance from a spec. */
-        addPart(spec) { return this.registry.add(spec); }
-        addParts(specs) { return specs.map(s => this.addPart(s)); }
-        getPart(id) { return this.registry.get(id); }
-        removePart(id) { return this.registry.remove(id); }
-
-        /* ── Perspectives ───────────────────────────────────────────────────── */
-
-        registerPerspective(name, layoutJson) {
-            this.perspectives.set(name, layoutJson);
-            this._renderPerspectiveButtons();
-            return this;
-        }
-
-        /**
-         * Switch to a named perspective.
-         *
-         * Parts are pooled by id and live for the workspace's lifetime, so a part
-         * the incoming perspective also references is re-parented rather than
-         * rebuilt — it keeps its scroll position, unsaved input and subscriptions.
-         * Parts the incoming perspective doesn't reference are detached, not
-         * destroyed, so switching back restores them intact.
-         *
-         * There is deliberately no legal-transition table: a framework cannot know
-         * a consumer's perspectives. Pass `guard` to veto a switch if you need one.
-         */
-        activatePerspective(name) {
-            const layout = this.perspectives.get(name);
-            if (!layout) throw new Error(`Unknown perspective "${name}"`);
-            const from = this.activePerspective;
-            if (from === name) return true;
-            if (this.guard && this.guard(from, name) === false) return false;
-
-            this.tree?.dispose();
-            this.activePerspective = name;
-            this._renderTree();
-
-            this.dispatchEvent(new CustomEvent('ws-perspective-change', {
-                detail: { from, to: name }, bubbles: true,
-            }));
-            return true;
-        }
-
-        _renderTree() {
-            if (!this._rootEl) return;
-            const layout = this.perspectives.get(this.activePerspective);
-            this._rootEl.textContent = '';
-            this.tree = createLayout(layout);
-            this.tree.render(this._rootEl, this._ctx());
-            this.tree.activate?.();
-            // Parts the new tree doesn't reference are deliberately NOT disposed —
-            // they are merely detached (PartNode.dispose), keeping their DOM and
-            // state. Disposing them would delete them from the pool, so switching
-            // back to the perspective that used them would find them gone. Part
-            // lifetime ends only at removePart()/deserialize().
-            this._renderPerspectiveButtons();
-        }
-
-        _ctx() {
-            return {
-                bus: this.bus,
-                registry: this.registry,
-                workspace: this,
-                onLayoutChange: () => this._onLayoutChange(),
-                ...(this.services ?? {}),
-            };
-        }
-
-        _onLayoutChange() {
-            if (this.activePerspective) {
-                this.perspectives.set(this.activePerspective, this.tree.serialize());
-            }
-            this.dispatchEvent(new CustomEvent('ws-layout-change', {
-                detail: { perspective: this.activePerspective }, bubbles: true,
-            }));
-        }
-
-        _renderPerspectiveButtons() {
-            if (!this._perspectivesEl) return;
-            render(this._perspectivesEl, [...this.perspectives.keys()].map(name => ({
-                tag: 'button',
-                cls: ['ws-perspective-btn', name === this.activePerspective && 'ws-active'],
-                text: name,
-                attrs: { type: 'button' },
-                on: { click: () => this.activatePerspective(name) },
-            })));
-        }
-
-        /* ── Theming ────────────────────────────────────────────────────────── */
-
-        /**
-         * Register a custom-property set under a name. It appears in the toolbar's
-         * theme picker immediately — the picker is built from the registry, so a
-         * consumer theme needs no CSS and no picker change.
-         */
-        registerTheme(name, vars) {
-            this.themes.set(name, vars);
-            this._renderThemePicker();
-            return this;
-        }
-
-        /** Registered theme names, plus the reserved `system` option. */
-        themeNames() { return [SYSTEM_THEME, ...this.themes.keys()]; }
-
-        /**
-         * Apply a theme by name, or `system` to follow the OS setting.
-         *
-         * The previous theme's properties are removed before the new ones are set:
-         * a custom theme may define only some of the vars, and leftovers from the
-         * outgoing theme would otherwise show through as a mismatched palette.
-         */
-        applyTheme(name) {
-            const resolved = name === SYSTEM_THEME ? this._systemTheme() : name;
-            const vars = this.themes.get(resolved);
-            if (!vars && name !== SYSTEM_THEME) return this;
-
-            for (const key of this._appliedVars) this.style.removeProperty(key);
-            this._appliedVars = [];
-            for (const [k, v] of Object.entries(vars ?? {})) {
-                this.style.setProperty(k, v);
-                this._appliedVars.push(k);
-            }
-
-            const previous = this.theme;
-            this.theme = name;                          // the selection ('system' stays 'system')
-            this.setAttribute('data-theme', resolved);  // the resolved name, for consumer CSS hooks
-            this._watchSystemTheme(name === SYSTEM_THEME);
-            if (this._themeSelect) this._themeSelect.value = name;
-
-            if (previous !== name) {
-                this.dispatchEvent(new CustomEvent('ws-theme-change', {
-                    detail: { theme: name, resolved }, bubbles: true,
-                }));
-            }
-            return this;
-        }
-
-        _systemTheme() {
-            return globalThis.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-        }
-
-        /** Keep `system` live: re-apply when the OS flips between light and dark. */
-        _watchSystemTheme(enabled) {
-            if (enabled && !this._systemThemeQuery) {
-                this._systemThemeQuery = globalThis.matchMedia?.('(prefers-color-scheme: dark)');
-                this._onSystemThemeChange = () => { if (this.theme === SYSTEM_THEME) this.applyTheme(SYSTEM_THEME); };
-                this._systemThemeQuery?.addEventListener('change', this._onSystemThemeChange);
-            } else if (!enabled && this._systemThemeQuery) {
-                this._systemThemeQuery.removeEventListener('change', this._onSystemThemeChange);
-                this._systemThemeQuery = null;
-            }
-        }
-
-        _renderThemePicker() {
-            if (!this._themePickerEl) return;
-            if (this.getAttribute('theme-picker') === 'hidden') {
-                this._themePickerEl.textContent = '';
-                return;
-            }
-            render(this._themePickerEl, [
-                { tag: 'label', text: 'Theme', attrs: { for: 'ws-theme-select' } },
-                {
-                    tag: 'select',
-                    cls: 'ws-theme-select',
-                    attrs: { id: 'ws-theme-select', title: 'Colour theme' },
-                    on: { change: e => this.applyTheme(e.target.value) },
-                    ref: n => { this._themeSelect = n; n.value = this.theme; },
-                    children: this.themeNames().map(name => ({
-                        tag: 'option',
-                        text: name === SYSTEM_THEME ? 'System' : name[0].toUpperCase() + name.slice(1),
-                        attrs: { value: name, selected: name === this.theme },
-                    })),
-                },
-            ]);
-        }
-
-        /* ── Persistence ────────────────────────────────────────────────────── */
-
-        serialize() {
-            if (this.tree && this.activePerspective) {
-                this.perspectives.set(this.activePerspective, this.tree.serialize());
-            }
-            return {
-                version: WORKSPACE_SCHEMA_VERSION,
-                theme: this.theme,
-                activePerspective: this.activePerspective,
-                perspectives: Object.fromEntries(this.perspectives),
-                parts: this.registry.serialize(),
-            };
-        }
-
-        /**
-         * Restore a serialized workspace. Part *types* must already be registered —
-         * a saved document carries specs, not code.
-         *
-         * `version` is honoured from day one on purpose: layout schemas change, and
-         * sqlengine's dashboard already had to retrofit exactly this migration once.
-         */
-        deserialize(json, { migrate } = {}) {
-            const doc = migrate ? migrate(json) : json;
-            if (doc.version > WORKSPACE_SCHEMA_VERSION) {
-                throw new Error(`Workspace document version ${doc.version} is newer than this build (${WORKSPACE_SCHEMA_VERSION})`);
-            }
-            this.registry.disposeAll();
-            for (const spec of doc.parts ?? []) {
-                if (spec.adapter) continue; // AdapterPart's mount fn cannot round-trip — re-add it in code
-                this.addPart(spec);
-            }
-            // Only a theme this build actually knows — a document naming one the
-            // consumer no longer registers must not leave the shell unstyled.
-            if (doc.theme && (doc.theme === SYSTEM_THEME || this.themes.has(doc.theme))) {
-                this.applyTheme(doc.theme);
-            }
-            this.perspectives = new Map(Object.entries(doc.perspectives ?? {}));
-            this.activePerspective = null;
-            if (doc.activePerspective && this.perspectives.has(doc.activePerspective)) {
-                this.activatePerspective(doc.activePerspective);
-            }
-            return this;
-        }
-    }
-
-    const WORKSPACE_TAG = 'ws-workspace';
-
-    /**
-     * Register the element. Custom element names must contain a hyphen, so
-     * `workspace` is not a legal name — `define()` throws SyntaxError on it.
-     * Guarded so importing this module twice does not throw on re-definition.
-     */
-    function defineWorkspace(tag = WORKSPACE_TAG) {
-        if (typeof customElements === 'undefined') return false;
-        if (customElements.get(tag)) return false;
-        customElements.define(tag, Workspace);
-        return true;
+    /** Bump when the serialized shape changes; `deserialize` migrates on the way in. */
+    const WORKSPACE_SCHEMA_VERSION = 1;
+
+    /**
+     * Workspace — the `<ws-workspace>` custom element and the shell's public API.
+     *
+     * Renders into **light DOM**: parts routinely carry their own stylesheets, and a
+     * consumer stylesheet cannot cross a shadow boundary. All shell markup is
+     * `ws-`-prefixed and themed through CSS custom properties instead.
+     *
+     * Typical wiring:
+     *
+     *   const ws = document.querySelector('ws-workspace');
+     *   ws.registerParts([ListPart, DetailPart, ChartPart]);
+     *   ws.addPart({ id: 'nav', type: 'list', title: 'Tables', items: [...] });
+     *   ws.registerPerspective('default', { type: 'split', dir: 'row', children: [...] });
+     *   ws.activatePerspective('default');
+     */
+    class Workspace extends HTMLElement {
+        constructor() {
+            super();
+            this.bus = new ContextBus();
+            this.registry = new PartRegistry();
+            /** @type {Map<string, object>} name → layout JSON */
+            this.perspectives = new Map();
+            this.activePerspective = null;
+            /** @type {import('./layout/LayoutNode.js').LayoutNode|null} */
+            this.tree = null;
+            /** @type {Map<string, object>} theme name → CSS custom-property map */
+            this.themes = new Map(Object.entries(BUILTIN_THEMES));
+            /** The *selection* — may be `system`, which resolves at apply time. */
+            this.theme = 'light';
+            /** Custom properties currently written onto the host, so they can be
+             *  cleared before a different theme is applied. */
+            this._appliedVars = [];
+            this._built = false;
+        }
+
+        /* ── Element lifecycle ──────────────────────────────────────────────── */
+
+        connectedCallback() {
+            // Moved, not new (a host re-parents it: a tab dragged to another
+            // group): its layout was disposed when it left (disconnectedCallback),
+            // so it is drawn again — the parts are still in the registry, as they
+            // were. Without this a workspace moved in the page came back empty.
+            if (this._built) {
+                if (!this.tree && this.activePerspective) this._renderTree();
+                this._watchSystemTheme(this.theme === SYSTEM_THEME);
+                return;
+            }
+            this._built = true;
+            ensureStyles(this.ownerDocument ?? document);
+            this.classList.add('ws-workspace');
+
+            // Chrome is built from element specs rather than an HTML string, and
+            // `ref` captures the nodes directly — no querySelector round-trip.
+            // `label`, not `title` — `title` is a global HTML attribute and would
+            // also render a browser tooltip over the whole workspace.
+            render(this, [
+                { cls: 'ws-toolbar', children: [
+                    { tag: 'span', cls: 'ws-toolbar-title', text: this.getAttribute('label') ?? '' },
+                    { tag: 'span', cls: 'ws-toolbar-spacer' },
+                    { tag: 'span', cls: 'ws-theme-picker', ref: n => { this._themePickerEl = n; } },
+                    { tag: 'span', cls: 'ws-perspectives', ref: n => { this._perspectivesEl = n; } },
+                ]},
+                { cls: 'ws-root', ref: n => { this._rootEl = n; } },
+            ]);
+
+            this.applyTheme(this.getAttribute('theme') ?? 'light');
+            this._renderThemePicker();
+
+            // A perspective registered before the element was connected renders now.
+            if (this.activePerspective) this._renderTree();
+            else if (this.perspectives.size) this.activatePerspective([...this.perspectives.keys()][0]);
+        }
+
+        disconnectedCallback() {
+            this.tree?.dispose();
+            this.tree = null;
+            this._watchSystemTheme(false); // a live matchMedia listener would outlive the element
+        }
+
+        /* ── Parts ──────────────────────────────────────────────────────────── */
+
+        registerPart(PartClass) { this.registry.register(PartClass); return this; }
+        registerParts(classes) { this.registry.registerAll(classes); return this; }
+
+        /** Create a pooled part instance from a spec. */
+        addPart(spec) { return this.registry.add(spec); }
+        addParts(specs) { return specs.map(s => this.addPart(s)); }
+        getPart(id) { return this.registry.get(id); }
+        removePart(id) { return this.registry.remove(id); }
+
+        /* ── Perspectives ───────────────────────────────────────────────────── */
+
+        registerPerspective(name, layoutJson) {
+            this.perspectives.set(name, layoutJson);
+            this._renderPerspectiveButtons();
+            return this;
+        }
+
+        /**
+         * Switch to a named perspective.
+         *
+         * Parts are pooled by id and live for the workspace's lifetime, so a part
+         * the incoming perspective also references is re-parented rather than
+         * rebuilt — it keeps its scroll position, unsaved input and subscriptions.
+         * Parts the incoming perspective doesn't reference are detached, not
+         * destroyed, so switching back restores them intact.
+         *
+         * There is deliberately no legal-transition table: a framework cannot know
+         * a consumer's perspectives. Pass `guard` to veto a switch if you need one.
+         */
+        activatePerspective(name) {
+            const layout = this.perspectives.get(name);
+            if (!layout) throw new Error(`Unknown perspective "${name}"`);
+            const from = this.activePerspective;
+            if (from === name) return true;
+            if (this.guard && this.guard(from, name) === false) return false;
+
+            this.tree?.dispose();
+            this.activePerspective = name;
+            this._renderTree();
+
+            this.dispatchEvent(new CustomEvent('ws-perspective-change', {
+                detail: { from, to: name }, bubbles: true,
+            }));
+            return true;
+        }
+
+        _renderTree() {
+            if (!this._rootEl) return;
+            const layout = this.perspectives.get(this.activePerspective);
+            this._rootEl.textContent = '';
+            this.tree = createLayout(layout);
+            this.tree.render(this._rootEl, this._ctx());
+            this.tree.activate?.();
+            // Parts the new tree doesn't reference are deliberately NOT disposed —
+            // they are merely detached (PartNode.dispose), keeping their DOM and
+            // state. Disposing them would delete them from the pool, so switching
+            // back to the perspective that used them would find them gone. Part
+            // lifetime ends only at removePart()/deserialize().
+            this._renderPerspectiveButtons();
+        }
+
+        _ctx() {
+            return {
+                bus: this.bus,
+                registry: this.registry,
+                workspace: this,
+                onLayoutChange: () => this._onLayoutChange(),
+                ...(this.services ?? {}),
+            };
+        }
+
+        _onLayoutChange() {
+            if (this.activePerspective) {
+                this.perspectives.set(this.activePerspective, this.tree.serialize());
+            }
+            this.dispatchEvent(new CustomEvent('ws-layout-change', {
+                detail: { perspective: this.activePerspective }, bubbles: true,
+            }));
+        }
+
+        _renderPerspectiveButtons() {
+            if (!this._perspectivesEl) return;
+            render(this._perspectivesEl, [...this.perspectives.keys()].map(name => ({
+                tag: 'button',
+                cls: ['ws-perspective-btn', name === this.activePerspective && 'ws-active'],
+                text: name,
+                attrs: { type: 'button' },
+                on: { click: () => this.activatePerspective(name) },
+            })));
+        }
+
+        /* ── Theming ────────────────────────────────────────────────────────── */
+
+        /**
+         * Register a custom-property set under a name. It appears in the toolbar's
+         * theme picker immediately — the picker is built from the registry, so a
+         * consumer theme needs no CSS and no picker change.
+         */
+        registerTheme(name, vars) {
+            this.themes.set(name, vars);
+            this._renderThemePicker();
+            return this;
+        }
+
+        /** Registered theme names, plus the reserved `system` option. */
+        themeNames() { return [SYSTEM_THEME, ...this.themes.keys()]; }
+
+        /**
+         * Apply a theme by name, or `system` to follow the OS setting.
+         *
+         * The previous theme's properties are removed before the new ones are set:
+         * a custom theme may define only some of the vars, and leftovers from the
+         * outgoing theme would otherwise show through as a mismatched palette.
+         */
+        applyTheme(name) {
+            const resolved = name === SYSTEM_THEME ? this._systemTheme() : name;
+            const vars = this.themes.get(resolved);
+            if (!vars && name !== SYSTEM_THEME) return this;
+
+            for (const key of this._appliedVars) this.style.removeProperty(key);
+            this._appliedVars = [];
+            for (const [k, v] of Object.entries(vars ?? {})) {
+                this.style.setProperty(k, v);
+                this._appliedVars.push(k);
+            }
+
+            const previous = this.theme;
+            this.theme = name;                          // the selection ('system' stays 'system')
+            this.setAttribute('data-theme', resolved);  // the resolved name, for consumer CSS hooks
+            this._watchSystemTheme(name === SYSTEM_THEME);
+            if (this._themeSelect) this._themeSelect.value = name;
+
+            if (previous !== name) {
+                this.dispatchEvent(new CustomEvent('ws-theme-change', {
+                    detail: { theme: name, resolved }, bubbles: true,
+                }));
+            }
+            return this;
+        }
+
+        _systemTheme() {
+            return globalThis.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+
+        /** Keep `system` live: re-apply when the OS flips between light and dark. */
+        _watchSystemTheme(enabled) {
+            if (enabled && !this._systemThemeQuery) {
+                this._systemThemeQuery = globalThis.matchMedia?.('(prefers-color-scheme: dark)');
+                this._onSystemThemeChange = () => { if (this.theme === SYSTEM_THEME) this.applyTheme(SYSTEM_THEME); };
+                this._systemThemeQuery?.addEventListener('change', this._onSystemThemeChange);
+            } else if (!enabled && this._systemThemeQuery) {
+                this._systemThemeQuery.removeEventListener('change', this._onSystemThemeChange);
+                this._systemThemeQuery = null;
+            }
+        }
+
+        _renderThemePicker() {
+            if (!this._themePickerEl) return;
+            if (this.getAttribute('theme-picker') === 'hidden') {
+                this._themePickerEl.textContent = '';
+                return;
+            }
+            render(this._themePickerEl, [
+                { tag: 'label', text: 'Theme', attrs: { for: 'ws-theme-select' } },
+                {
+                    tag: 'select',
+                    cls: 'ws-theme-select',
+                    attrs: { id: 'ws-theme-select', title: 'Colour theme' },
+                    on: { change: e => this.applyTheme(e.target.value) },
+                    ref: n => { this._themeSelect = n; n.value = this.theme; },
+                    children: this.themeNames().map(name => ({
+                        tag: 'option',
+                        text: name === SYSTEM_THEME ? 'System' : name[0].toUpperCase() + name.slice(1),
+                        attrs: { value: name, selected: name === this.theme },
+                    })),
+                },
+            ]);
+        }
+
+        /* ── Persistence ────────────────────────────────────────────────────── */
+
+        serialize() {
+            if (this.tree && this.activePerspective) {
+                this.perspectives.set(this.activePerspective, this.tree.serialize());
+            }
+            return {
+                version: WORKSPACE_SCHEMA_VERSION,
+                theme: this.theme,
+                activePerspective: this.activePerspective,
+                perspectives: Object.fromEntries(this.perspectives),
+                parts: this.registry.serialize(),
+            };
+        }
+
+        /**
+         * Restore a serialized workspace. Part *types* must already be registered —
+         * a saved document carries specs, not code.
+         *
+         * `version` is honoured from day one on purpose: layout schemas change, and
+         * sqlengine's dashboard already had to retrofit exactly this migration once.
+         */
+        deserialize(json, { migrate } = {}) {
+            const doc = migrate ? migrate(json) : json;
+            if (doc.version > WORKSPACE_SCHEMA_VERSION) {
+                throw new Error(`Workspace document version ${doc.version} is newer than this build (${WORKSPACE_SCHEMA_VERSION})`);
+            }
+            this.registry.disposeAll();
+            for (const spec of doc.parts ?? []) {
+                if (spec.adapter) continue; // AdapterPart's mount fn cannot round-trip — re-add it in code
+                this.addPart(spec);
+            }
+            // Only a theme this build actually knows — a document naming one the
+            // consumer no longer registers must not leave the shell unstyled.
+            if (doc.theme && (doc.theme === SYSTEM_THEME || this.themes.has(doc.theme))) {
+                this.applyTheme(doc.theme);
+            }
+            this.perspectives = new Map(Object.entries(doc.perspectives ?? {}));
+            this.activePerspective = null;
+            if (doc.activePerspective && this.perspectives.has(doc.activePerspective)) {
+                this.activatePerspective(doc.activePerspective);
+            }
+            return this;
+        }
+    }
+
+    const WORKSPACE_TAG = 'ws-workspace';
+
+    /**
+     * Register the element. Custom element names must contain a hyphen, so
+     * `workspace` is not a legal name — `define()` throws SyntaxError on it.
+     * Guarded so importing this module twice does not throw on re-definition.
+     */
+    function defineWorkspace(tag = WORKSPACE_TAG) {
+        if (typeof customElements === 'undefined') return false;
+        if (customElements.get(tag)) return false;
+        customElements.define(tag, Workspace);
+        return true;
     }
 
     /**
@@ -3393,16 +3401,23 @@
          * @param {string} options.mineName - What the model compared is called
          * @param {string} options.theirsName - What the other is called
          * @param {() => void} [options.onMerge] - Merge from the other (offered when there is something to merge)
+         * @param {string} [options.note] - Said above the differences: why the other is offered (a proposal's rationale)
          * @param {Document} [options.document]
          */
-        constructor({ comparison, mineName, theirsName, onMerge = null, document: doc = globalThis.document }) {
+        constructor({ comparison, mineName, theirsName, onMerge = null, note = '', document: doc = globalThis.document }) {
             this.comparison = comparison;
             this.mineName = mineName;
             this.theirsName = theirsName;
             this.onMerge = onMerge;
+            this.note = note;
             this.document = doc;
         }
 
+        /** The dialog's description: the note, then `text`. */
+        described(text) {
+            return this.note ? `${this.note}\n\n${text}` : text;
+        }
+
         get title() {
             return `Compare "${this.mineName}" with "${this.theirsName}"`;
         }
@@ -3441,7 +3456,7 @@
             const canMerge = !!this.onMerge && this.comparison.mergeable().length > 0;
             return new FormDialog({
                 title: this.title,
-                description: this.summaryText(),
+                description: this.described(this.summaryText()),
                 fields: this.fields(),
                 submitLabel: canMerge ? 'Merge…' : 'Close',
                 cancelLabel: 'Close',
@@ -3474,7 +3489,7 @@
             const nothing = !this.comparison.mergeable().length;
             return new FormDialog({
                 title: this.title,
-                description: nothing ? `"${this.mineName}" has everything "${this.theirsName}" has.` : `${this.summaryText()}\n\nWhat the chosen need (a view's elements, a relationship's ends) comes too.`,
+                description: this.described(nothing ? `"${this.mineName}" has everything "${this.theirsName}" has.` : `${this.summaryText()}\n\nWhat the chosen need (a view's elements, a relationship's ends) comes too.`),
                 fields: this.fields(),
                 submitLabel: nothing ? 'Close' : 'Merge',
                 idPrefix: 'model-merge-',
@@ -3968,9 +3983,15 @@
         /** The key prefix of a kept model. */
         static PREFIX = 'model:';
 
-        /** @param {KeyValueStore} store */
-        constructor(store) {
+        /**
+         * @param {KeyValueStore} store
+         * @param {Object} [options]
+         * @param {string} [options.label] - Where it keeps models, as its menu names it
+         */
+        constructor(store, { label = 'This browser' } = {}) {
             this.store = store;
+            /** Where it keeps models, as the File menu names it ('This browser'). */
+            this.label = label;
         }
 
         /** A new id for a model to keep. */
@@ -4167,6 +4188,66 @@
         }
     }
 
+    /**
+     * Benchmark — what a model is measured by, so a change to it (a proposal, a
+     * merge) says whether it made the model better. Each measure:
+     * `{ key, label, value, better: 'lower'|'higher', format?: 'count'|'share'|'score' }`
+     * (a share is 0..1; a value of null is not measured yet).
+     *
+     * Every model with a checker is measured by its findings — warnings counted
+     * apart (`Benchmark.findings`); a model with more to say gives its own
+     * `benchmark()` (a data model its Scorecard, a requirements model how many
+     * stories say when they are done and trace to something), starting from those.
+     */
+    class Benchmark {
+        /** A model's measures: its own benchmark(), else its checker's findings, else none. */
+        static of(model) {
+            if (typeof model?.benchmark === 'function') return model.benchmark();
+            return Benchmark.findings(model);
+        }
+
+        /** The check's warnings and all its findings, each fewer the better. */
+        static findings(model) {
+            if (typeof model?.checker !== 'function') return [];
+            const found = model.checker().run();
+            return [
+                { key: 'warnings', label: 'Check warnings', value: found.filter(f => f.severity === 'warning').length, better: 'lower', format: 'count' },
+                { key: 'findings', label: 'Check findings', value: found.length, better: 'lower', format: 'count' },
+            ];
+        }
+
+        /**
+         * Two models' measures side by side, matched by key: `{key, label, format,
+         * before, after, change}` — change 'better', 'worse', 'same', or null when
+         * either is not measured.
+         */
+        static compare(before, after) {
+            const then = new Map(before.map(m => [m.key, m]));
+            return after.filter(m => then.has(m.key)).map(m => {
+                const was = then.get(m.key).value, now = m.value;
+                const change = was == null || now == null ? null
+                    : was === now ? 'same'
+                        : (now < was) === (m.better === 'lower') ? 'better' : 'worse';
+                return { key: m.key, label: m.label, format: m.format ?? 'count', before: was, after: now, change };
+            });
+        }
+
+        /** A measure's value as it reads ('3', '50%', '72 of 100', '—'). */
+        static format(value, format = 'count') {
+            if (value == null) return '—';
+            if (format === 'share') return `${Math.round(value * 100)}%`;
+            if (format === 'score') return `${value} of 100`;
+            return String(value);
+        }
+
+        /** A comparison in a line: "Check findings 7 → 3 (better); …" — what did not change left out unless nothing did. */
+        static text(rows) {
+            const moved = rows.filter(r => r.change !== 'same');
+            const shown = moved.length ? moved : rows;
+            return shown.map(r => `${r.label} ${Benchmark.format(r.before, r.format)} → ${Benchmark.format(r.after, r.format)}${r.change && r.change !== 'same' ? ` (${r.change})` : ''}`).join('; ');
+        }
+    }
+
     /**
      * ModelsPart — several models open at once (as Archi's model tree holds
      * several): one editor part per model (any EditorPart type, `editorType`),
@@ -4199,6 +4280,23 @@
      * closed open again next time. File ▸ This browser opens a kept model, stops
      * keeping one, backs them all up (BackupFolder: a folder chosen once, such as
      * one OneDrive or Google Drive syncs, else downloads) and chooses that folder.
+     *
+     * Where models are kept is the host's to say: a `modelLibrary` among the
+     * workspace's services (`workspace.services`, reaching this part as
+     * `ctx.modelLibrary`) is used in place of the browser's — anything with
+     * ModelLibrary's methods (keep, load, list, openOnes, setOpen, remove) and a
+     * `label` for the menu ('The engine'). An entry is the model in its editor's
+     * file format, so a host stores it as it likes: a database row, a file, a
+     * graph built from it. The backup folder stays in the browser.
+     *
+     * Proposals: a model offered as a change to the one in front — by an agent,
+     * a colleague, an import — with why (`propose`). Tools ▸ Proposals lists them;
+     * each is reviewed as a merge (ModelMergeDialog, its rationale shown), so what
+     * is taken is chosen and is one undo step. Taking or dismissing one removes it.
+     *
+     * A host adds tools of its own for the model in front — an agent to run on
+     * it, say — as `modelTools(part, models)` among the workspace's services: its
+     * items end the Tools menu.
      */
     class ModelsPart extends Part {
         static type = 'models';
@@ -4216,6 +4314,9 @@
             this.backups = null;
             /** Edits waiting to be kept, by part id. @private */
             this._pending = new Map();
+            /** Changes offered, not yet taken or dismissed (propose). */
+            this.proposals = [];
+            this._proposalSeq = 0;
         }
 
         /** What a copy's name ends with (copyName). */
@@ -4262,8 +4363,8 @@
          * @param {Array<EditorPart>} starting - The models the spec opened
          */
         async startKeeping(starting = []) {
-            const store = await this.openStore();
-            this.library = new ModelLibrary(store);
+            const store = await this.openStore();   // the backup folder's, whoever keeps the models
+            this.library = this.ctx?.modelLibrary ?? new ModelLibrary(store);
             const win = this.container?.ownerDocument?.defaultView ?? globalThis;
             this.backups = new BackupFolder({
                 store, window: win,
@@ -4353,7 +4454,7 @@
         async askOpenKept() {
             const open = new Set(this.models().map(p => p.keepId));
             const entries = this.ownKept(await this.library.list()).filter(e => !open.has(e.id));
-            if (!entries.length) { this.tell('Every model kept in this browser is open.'); return null; }
+            if (!entries.length) { this.tell(`Every model kept (${this.keptWhere}) is open.`); return null; }
             return new FormDialog({
                 title: 'Open a kept model',
                 fields: [{
@@ -4392,7 +4493,7 @@
         async backUpAndTell() {
             for (const part of this.models()) await this.keep(part);
             const files = await this.backupFiles();
-            if (!files.length) { this.tell('Nothing is kept in this browser yet.'); return null; }
+            if (!files.length) { this.tell(`Nothing is kept (${this.keptWhere}) yet.`); return null; }
             const { location, names } = await this.backups.backUp(files);
             this.tell(`Backed up ${names.length} model${names.length === 1 ? '' : 's'} to the ${location}:\n\n${names.join('\n')}`);
             return { location, names };
@@ -4405,6 +4506,83 @@
             return dir;
         }
 
+        /** Where models are kept, as the File menu names it: the library's label. */
+        get keptWhere() {
+            return this.library?.label ?? 'This browser';
+        }
+
+        // ===== Proposals =====
+
+        /**
+         * Offer a change: the model proposed — `spec`, a model as this workbench's
+         * editor takes it (as a base is given), or `entry`, a model in one of the
+         * editor's file formats (`{format, data}`, as a kept one is) — with a
+         * `title` and why (`rationale`), from `source` (who or what proposed it).
+         * `onSettle(outcome, {bench})` hears whether it was 'taken' or
+         * 'dismissed' and, taken, how what was taken moved the bench. Returns the proposal.
+         * @param {{title: string, rationale?: string, source?: string, spec?: Object, entry?: {format: string, data: *}, onSettle?: Function}} proposal
+         */
+        propose({ title, rationale = '', source = '', spec = null, entry = null, onSettle = null }) {
+            if (!spec && !entry) throw new TypeError('A proposal needs a model spec');
+            const id = `${this.id}-proposal-${++this._proposalSeq}`;
+            const part = this.registry.create({ ...ModelsPart.copySpec(spec ?? {}), id, type: this.editorType });
+            if (entry) {
+                const format = part.fileFormats().find(f => f.label === entry.format);
+                if (!format) { part.dispose?.(); throw new Error(`No ${entry.format} format here to read the proposal in`); }
+                part.replaceModel(format.import(entry.data));
+            }
+            const proposal = { id, title: title || part.model?.name || 'Proposal', rationale, source, part, onSettle };
+            this.proposals.push(proposal);
+            return proposal;
+        }
+
+        /**
+         * How the proposal would move the model's measures (Benchmark), were it
+         * taken whole: `[{label, before, after, change, …}]`.
+         */
+        proposalBench(part, proposal) {
+            return Benchmark.compare(Benchmark.of(part.model), Benchmark.of(proposal.part.model));
+        }
+
+        /** Forget a proposal: not wanted (`outcome` 'dismissed'), or taken. Its proposer hears which. */
+        dismissProposal(proposal, outcome = 'dismissed', note = {}) {
+            if (!this.proposals.includes(proposal)) return;
+            this.proposals = this.proposals.filter(p => p !== proposal);
+            proposal.onSettle?.(outcome, note);
+            proposal.part?.dispose?.();
+        }
+
+        /**
+         * Review a proposal against `part`'s model: its differences, chosen as a
+         * merge (ModelMergeDialog), its rationale above them. Merging takes it.
+         */
+        reviewProposal(part, proposal) {
+            const bench = this.proposalBench(part, proposal);
+            return new ModelMergeDialog({
+                ...this._comparing(part, proposal.part),
+                theirsName: proposal.title,
+                note: [proposal.source && `Proposed by ${proposal.source}.`, proposal.rationale, bench.length && `Taken whole: ${Benchmark.text(bench)}.`].filter(Boolean).join(' '),
+                onMerge: (command) => {
+                    // What was taken (the parts chosen), measured: the model before the merge and after.
+                    const before = Benchmark.of(part.model);
+                    part.runModelEdit(command);
+                    this.dismissProposal(proposal, 'taken', { bench: Benchmark.text(Benchmark.compare(before, Benchmark.of(part.model))) });
+                },
+            }).open();
+        }
+
+        /** Tools ▸ Proposals: each, to review or dismiss. */
+        proposalItems(part) {
+            if (!this.proposals.length) return [{ label: 'None waiting', disabled: true }];
+            return this.proposals.map(p => ({
+                label: p.source ? `${p.title} — ${p.source}` : p.title,
+                items: [
+                    { label: 'Review and merge…', action: () => this.reviewProposal(part, p) },
+                    { label: 'Dismiss', action: () => this.dismissProposal(p) },
+                ],
+            }));
+        }
+
         /** Tell the user (the page's alert). @protected */
         tell(message) {
             const win = this.container?.ownerDocument?.defaultView ?? globalThis;
@@ -4459,6 +4637,19 @@
                 this.registry.create({ ...ModelsPart.copySpec(spec), id: `${this.id}-base-${i + 1}`, type: this.editorType })));
         }
 
+        /**
+         * Replace the bases: a host whose reference models change (a live
+         * database after its schema changed) gives them afresh. The parts made
+         * for the old ones are disposed; nothing open is touched.
+         * @param {Array<Object>} specs - Editor part specs, as `bases` in the spec
+         */
+        setBases(specs = []) {
+            for (const base of this._bases ?? []) base.dispose?.();
+            this._bases = null;
+            this.spec.bases = specs;
+            return this.bases();
+        }
+
         /** What a copy of a model is called: " (copy)" after its name, once (a copy of a copy is not "… (copy) (copy)"). */
         static copyName(name) {
             const plain = String(name || 'Untitled');
@@ -4485,9 +4676,33 @@
             return part;
         }
 
-        /** File ▸ New ▸'s items from bases: From base: <name>, one a base. */
+        /**
+         * Open a base to look at (by its place in `bases`): a tab of its own copy,
+         * named as the base is with " (view)", that can be laid out and moved
+         * about but is never kept — a live database seen as it is, without making a
+         * design of it. Returns the part.
+         */
+        viewBase(index) {
+            const spec = this.bases()[index]?.spec;
+            if (!spec) return null;
+            const { id, keepId, ...copy } = ModelsPart.copySpec(spec);
+            const part = this.newModel({ ...copy, name: `${copy.name ?? this.baseLabel(this.bases()[index], index)}${ModelsPart.VIEW_SUFFIX}` });
+            part.keepOff = true;
+            this.work.focus(part.id);
+            return part;
+        }
+
+        /** What a base viewed is called: " (view)" after its name. */
+        static VIEW_SUFFIX = ' (view)';
+
+        /** File ▸ New ▸'s items from bases: From base: <name>, a design from one; View base: <name>, one to look at. */
         baseItems() {
-            return this.bases().map((base, i) => ({ label: `From base: ${this.baseLabel(base, i)}`, action: () => this.newFromBase(i) }));
+            const bases = this.bases();
+            return [
+                ...bases.map((base, i) => ({ label: `From base: ${this.baseLabel(base, i)}`, action: () => this.newFromBase(i) })),
+                ...(bases.length ? [{ separator: true }] : []),
+                ...bases.map((base, i) => ({ label: `View base: ${this.baseLabel(base, i)}`, action: () => this.viewBase(i) })),
+            ];
         }
 
         /**
@@ -4520,6 +4735,10 @@
             return [
                 { label: 'Compare with', items: each((a, b) => this.compare(a, b)) },
                 { label: 'Merge from', items: each((a, b) => this.merge(a, b)) },
+                { separator: true },
+                { label: `Proposals (${this.proposals.length})`, items: this.proposalItems(part) },
+                // The host's own tools for the model in front (`services.modelTools(part, models)`: agents, say).
+                ...(typeof this.ctx?.modelTools === 'function' ? [{ separator: true }, ...this.ctx.modelTools(part, this)] : []),
             ];
         }
 
@@ -4604,7 +4823,7 @@
             return [
                 ...(saves ? [save, saveAs, { separator: true }, { label: 'Duplicate model', action: () => this.duplicate(part) }] : []),
                 ...(compare ? [compare, merge] : []),
-                ...(keeping.length ? [{ label: 'This browser', items: keeping }] : []),
+                ...(keeping.length ? [{ label: this.keptWhere, items: keeping }] : []),
                 { separator: true },
                 { label: 'Close model', action: () => this.closeModel(part.id) },
                 { label: 'Close other models', disabled: !others.length || undefined, action: () => { for (const id of others) this.closeModel(id); } },
@@ -23539,14 +23758,19 @@
 
     /**
      * Fruchterman–Reingold: lines pull their ends together, every pair of boxes
-     * pushes apart, cooling over the iterations. Deterministic: it starts from
-     * where the boxes are (boxes on one spot are spread round it first).
+     * pushes apart, cooling over the iterations, all within a frame — a square
+     * round where the boxes were, room for them a grid's worth — so a box with no
+     * lines is not pushed away for ever. Deterministic: it starts from where the
+     * boxes are (boxes on one spot are spread round it first).
      */
     function forceDirected(boxes, edges, gap) {
         const size = Math.max(...boxes.map(b => Math.max(b.width, b.height))) + gap;
         const k = size * 1.2;
         const pos = boxes.map((b, i) => ({ x: b.left + b.width / 2 + (i % 3) * 0.5, y: b.top + b.height / 2 + Math.floor(i / 3) * 0.5 }));
         const index = new Map(boxes.map((b, i) => [b.id, i]));
+        const centre = { x: pos.reduce((t, p) => t + p.x, 0) / pos.length, y: pos.reduce((t, p) => t + p.y, 0) / pos.length };
+        const half = (k * (Math.ceil(Math.sqrt(boxes.length)) + 1)) / 2;
+        const inFrame = (v, c) => Math.min(c + half, Math.max(c - half, v));
         let temperature = size * 2;
         for (let iteration = 0; iteration < 120; iteration++) {
             const shift = pos.map(() => ({ x: 0, y: 0 }));
@@ -23571,8 +23795,8 @@
             for (let i = 0; i < pos.length; i++) {
                 const d = Math.max(1e-9, Math.hypot(shift[i].x, shift[i].y));
                 const step = Math.min(d, temperature);
-                pos[i].x += (shift[i].x / d) * step;
-                pos[i].y += (shift[i].y / d) * step;
+                pos[i].x = inFrame(pos[i].x + (shift[i].x / d) * step, centre.x);
+                pos[i].y = inFrame(pos[i].y + (shift[i].y / d) * step, centre.y);
             }
             temperature *= 0.95;
         }
@@ -28422,6 +28646,8 @@
             this.instance = instance;
             this.model = model;
             this.nodeOptions = nodeOptions;
+            /** A host's live status, `{text, color}` (the editor's elementStatus), or null: drawn as a pill. */
+            this.status = null;
         }
 
         /** State lives on the instance and the model element, not here. @protected */
@@ -28537,6 +28763,27 @@
          * gets no glyph badge (buildNode leaves iconShape unset) but keeps an icon the element sets.
          */
         decorations(ctx) {
+            return [...this._badge(ctx), ...this.statusPill(ctx)];
+        }
+
+        /**
+         * The host's status (`status`), as a small pill inside the box's bottom
+         * right corner: its text, on its colour. Nothing without one.
+         */
+        statusPill({ w, h }) {
+            const text = this.status?.text;
+            if (!text) return [];
+            const label = String(text);
+            const ph = 12, pw = Math.min(w - 6, label.length * 5.5 + 10);
+            const x = w / 2 - pw - 3, y = h / 2 - ph - 3;
+            return [Glyph.group([
+                Glyph.rect(x, y, pw, ph, this.status.color || '#455a64', null, { rx: 6, ry: 6 }),
+                Glyph.text(label, x + pw / 2, y + ph / 2, { fill: '#ffffff', textAnchor: 'middle', verticalAlign: 'middle', fontSize: '8px' }),
+            ], { 'pointer-events': 'none', class: 'element-status' })];
+        }
+
+        /** The type badge (decorations). @private */
+        _badge(ctx) {
             const node = this.node;
             const { w, h } = ctx;
             const fixed = ArchimateElementTemplate.badgeSize(w, h);
@@ -32006,7 +32253,9 @@
      * ModelCheckDialog — a model check's findings (ModelChecker#run), listed:
      * each a button (⚠ a warning, ℹ for a look) that shows what it names
      * (`onReveal`), with what can be done about it beside (`actionsFor`), or
-     * "nothing found". Any editor or part that checks a model shows it this way.
+     * "nothing found". Any editor or part that checks a model shows it this way;
+     * anything else listed to be opened (search results) too, with its own
+     * `title` and `empty` text.
      */
     class ModelCheckDialog {
         /**
@@ -32015,9 +32264,13 @@
          * @param {(finding: Object) => void} [options.onReveal] - Show what a finding names
          * @param {(finding: Object) => Array<{label: string, action: Function}>} [options.actionsFor]
          * @param {Document} [options.document]
+         * @param {string} [options.title] - In place of "Model check: n findings"
+         * @param {string} [options.empty] - What an empty list says
          */
-        constructor({ findings, onReveal = () => {}, actionsFor = () => [], document: doc = globalThis.document }) {
+        constructor({ findings, onReveal = () => {}, actionsFor = () => [], document: doc = globalThis.document, title = null, empty = 'Nothing found: the model passes every check.' }) {
             this.findings = findings;
+            this._title = title;
+            this.empty = empty;
             this.onReveal = onReveal;
             this.actionsFor = actionsFor;
             this.document = doc;
@@ -32025,6 +32278,7 @@
 
         /** The dialog's title: how many findings. */
         get title() {
+            if (this._title) return this._title;
             const n = this.findings.length;
             return `Model check: ${n} finding${n === 1 ? '' : 's'}`;
         }
@@ -32050,7 +32304,7 @@
                             on: { click: () => { dialog?.close(); act.action(); } },
                         })),
                     ],
-                })) : [{ text: 'Nothing found: the model passes every check.' }],
+                })) : [{ text: this.empty }],
             }, this.document);
             dialog = new FormDialog({
                 title: this.title,
@@ -36733,8 +36987,12 @@
          *   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, ...options }) {
+        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;
@@ -36747,6 +37005,9 @@
             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),
@@ -36784,6 +37045,7 @@
                 ...(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) ?? [] : []),
             ];
         }
 
@@ -37008,7 +37270,11 @@
                 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;
+            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);
@@ -37507,6 +37773,9 @@
         /** Whether files in this format can be imported (opened) as well as exported. A subclass that only exports says no. */
         get imports() { return true; }
 
+        /** Whether a model can be exported in this format. A subclass that only reads (another tool's export) says no. */
+        get exports() { return true; }
+
         /** True when import takes the file's bytes (a zip archive), else its text. */
         get readsBytes() { return false; }
 
@@ -37566,7 +37835,7 @@
         const choose = chooseFile ?? ((accept) => pickFile(accept, doc()));
         const tell = report ?? ((message) => (doc().defaultView ?? globalThis).alert(message));
         const groups = formats.map(format => [
-            only !== 'import' && enabled(format, 'export') && { label: only ? format.label : `Export ${format.label}`, action: () => save(format.export(model()), format.fileName) },
+            only !== 'import' && format.exports !== false && enabled(format, 'export') && { label: only ? format.label : `Export ${format.label}`, action: () => save(format.export(model()), format.fileName) },
             only !== 'export' && format.imports && enabled(format, 'import') && {
                 label: only ? `${format.label}…` : `Import ${format.label}…`,
                 action: () => importFile(format, { choose, onImport, report: tell }),
@@ -45628,50 +45897,151 @@
         }
     }
 
-    /**
-     * DataModelEditCommand — one edit of a DataModel (an entity, an attribute, a
-     * relationship, a delete) as one undo step: run, it makes the change and keeps
-     * the model as it was before and after (DataModel#toJSON); undone or redone, it
-     * puts the model back as it was (DataModel#restore). Any change to a model is
-     * undoable this way, whatever it touches.
-     */
-    class DataModelEditCommand extends Command {
-        /** A model edit is no edit on one view: undoing it shows no other. */
-        viewId = null;
-
-        /**
-         * @param {DataModel} model
-         * @param {string} label - What the undo menu calls it ('Edit Customer')
-         * @param {(model: DataModel) => *} change - Makes the change
-         */
-        constructor(model, label, change) {
-            super(label);
-            this.model = model;
-            this.change = change;
-            this.before = null;
-            this.after = null;
-        }
-
-        execute() {
-            if (this.after) {
-                this.model.restore(this.after);
-            } else {
-                this.before = DataModelEditCommand.snapshot(this.model);
-                this.result = this.change(this.model);
-                this.after = DataModelEditCommand.snapshot(this.model);
-            }
-            this.model.edited();
-        }
-
-        undo() {
-            this.model.restore(this.before);
-            this.model.edited();
-        }
-
-        /** The model as it is, a copy nothing later changes (its toJSON shares some arrays). */
-        static snapshot(model) {
-            return JSON.parse(JSON.stringify(model.toJSON()));
-        }
+    /**
+     * ModelEditCommand — one edit of an EditableModel (a data model's entity, a
+     * requirements model's story, a delete) as one undo step: run, it makes the
+     * change and keeps the model as it was before and after (its toJSON); undone
+     * or redone, it puts the model back as it was (its restore). Any change to a
+     * model is undoable this way, whatever it touches.
+     */
+    class ModelEditCommand extends Command {
+        /** A model edit is no edit on one view: undoing it shows no other. */
+        viewId = null;
+
+        /**
+         * @param {EditableModel} model
+         * @param {string} label - What the undo menu calls it ('Edit Customer')
+         * @param {(model: EditableModel) => *} change - Makes the change
+         */
+        constructor(model, label, change) {
+            super(label);
+            this.model = model;
+            this.change = change;
+            this.before = null;
+            this.after = null;
+        }
+
+        execute() {
+            if (this.after) {
+                this.model.restore(this.after);
+            } else {
+                this.before = ModelEditCommand.snapshot(this.model);
+                this.result = this.change(this.model);
+                this.after = ModelEditCommand.snapshot(this.model);
+            }
+            this.model.edited();
+        }
+
+        undo() {
+            this.model.restore(this.before);
+            this.model.edited();
+        }
+
+        /** The model as it is, a copy nothing later changes (its toJSON may share arrays). */
+        static snapshot(model) {
+            return JSON.parse(JSON.stringify(model.toJSON()));
+        }
+    }
+
+    /**
+     * EditableModel — base of a model edited as a whole rather than view by view
+     * (DataModel, RequirementsModel; a ViewSetModel keeps its views' histories
+     * its own way). What a part needs of any model it edits, keeps and merges:
+     *
+     * - a name;
+     * - whether it changed since it was saved (`edited()`, `markSaved()`,
+     *   `isDirty()`, `onEdit(fn)`), so a part shows it, keeps it and asks before
+     *   it is lost;
+     * - an undo history, every edit one step on it (`editCommand(label, change)`:
+     *   the model before and after, as its toJSON, put back by `restore`);
+     * - how it differs from another of its kind (`compareWith`, over the
+     *   subclass's `comparedKinds()`), which merges the other's into it.
+     *
+     * A subclass gives `toJSON()`, its constructor reading that back, and
+     * `static STATE`: the fields `restore` puts back.
+     */
+    class EditableModel {
+        /** The fields a snapshot puts back (restore). A subclass lists its own, `name` among them. */
+        static STATE = Object.freeze(['name']);
+
+        /** @param {{name?: string}} [spec] */
+        constructor(spec = {}) {
+            if (new.target === EditableModel) throw new TypeError('EditableModel is abstract — subclass it');
+            /** What the model is called. */
+            this.name = spec.name ?? '';
+            this._version = 0;
+            this._saved = 0;
+            this._editListeners = [];
+        }
+
+        /** The kinds it is compared on and merged by (ComparedKind), in the order a merge brings them. None here. */
+        comparedKinds() {
+            return [];
+        }
+
+        /** How this model differs from another (ModelComparison), which can merge the other's into it. */
+        compareWith(other) {
+            return new ModelComparison(this, other);
+        }
+
+        /** Its undo history: a merge is one step on it. */
+        get history() {
+            return (this._history ??= new CommandHistory());
+        }
+
+        /** A change made as one undo step (ModelEditCommand), not yet run. */
+        editCommand(label, change) {
+            return new ModelEditCommand(this, label, change);
+        }
+
+        /** Put the model back as a snapshot (its toJSON) says: the fields its class lists (STATE). */
+        restore(json) {
+            const back = new this.constructor(JSON.parse(JSON.stringify(json)));
+            for (const key of this.constructor.STATE) this[key] = back[key];
+        }
+
+        // ===== Changed since saved =====
+
+        /** Something changed: listeners hear of it. */
+        edited() {
+            this._version++;
+            this._emitEdit();
+        }
+
+        /** This state is the saved one (a file opened or saved). */
+        markSaved() {
+            this._saved = this._version;
+            this._emitEdit();
+        }
+
+        /** Whether it changed since markSaved. */
+        isDirty() {
+            return this._version !== this._saved;
+        }
+
+        /** Call `fn(model)` after every change (and markSaved). Returns an unsubscribe function. */
+        onEdit(fn) {
+            this._editListeners.push(fn);
+            return () => { this._editListeners = this._editListeners.filter(l => l !== fn); };
+        }
+
+        /** @private */
+        _emitEdit() {
+            for (const fn of this._editListeners) fn(this);
+        }
+
+        /** An id made from `name`, unlike any of `taken`'s ids ('customer', 'customer-2'). */
+        _freshId(name, taken) {
+            const base = String(name ?? 'item').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'item';
+            let id = base;
+            for (let n = 2; taken.some(t => t.id === id); n++) id = `${base}-${n}`;
+            return id;
+        }
+
+        /** The model as plain JSON, read back by its constructor. @abstract */
+        toJSON() {
+            throw new Error(`${this.constructor.name} must implement toJSON()`);
+        }
     }
 
     /** Words that stay small inside a title. */
@@ -46325,8 +46695,42 @@
         }
     }
 
+    /** A plain copy of JSON-shaped data. */
+    const copy$2 = (value) => (value === undefined ? undefined : JSON.parse(JSON.stringify(value)));
+
+    /** A list of a model's held in an array (`list(model)`), each by an id; bring puts a copy in place or adds it. */
+    class ListCompared extends ComparedKind {
+        constructor() {
+            super();
+            if (new.target === ListCompared) throw new TypeError('ListCompared is abstract — subclass it');
+        }
+
+        /** The array the model holds them in. @abstract */
+        list(model) { throw new Error(`${this.constructor.name} must implement list()`); }
+
+        items(model) { return this.list(model); }
+        get(model, id) { return this.items(model).find(item => this.idOf(item) === id) ?? null; }
+
+        /** Put a copy of `item` at its place (in place of the one with its id, else last); undone, as it was. */
+        bring(model, item) {
+            const list = this.list(model);
+            const twin = this.copyOf(item);
+            const at = list.findIndex(x => this.idOf(x) === this.idOf(item));
+            if (at < 0) {
+                list.push(twin);
+                return () => { const i = list.indexOf(twin); if (i >= 0) list.splice(i, 1); };
+            }
+            const old = list[at];
+            list[at] = twin;
+            return () => { const i = list.indexOf(twin); if (i >= 0) list[i] = old; };
+        }
+
+        /** A copy to put in the other model. */
+        copyOf(item) { return copy$2(item); }
+    }
+
     /** A plain copy of JSON-shaped data. */
-    const copy = (value) => (value === undefined ? undefined : JSON.parse(JSON.stringify(value)));
+    const copy$1 = (value) => (value === undefined ? undefined : JSON.parse(JSON.stringify(value)));
 
     /**
      * The kinds two DataModels are compared on and merged by (ModelComparison,
@@ -46336,37 +46740,6 @@
      * two models alike but for where their boxes are, are alike.
      */
 
-    /** A list of a model's held in an array (`list(model)`), each by an id; bring puts a copy in place or adds it. */
-    class ListCompared extends ComparedKind {
-        constructor() {
-            super();
-            if (new.target === ListCompared) throw new TypeError('ListCompared is abstract — subclass it');
-        }
-
-        /** The array the model holds them in. @abstract */
-        list(model) { throw new Error(`${this.constructor.name} must implement list()`); }
-
-        items(model) { return this.list(model); }
-        get(model, id) { return this.items(model).find(item => this.idOf(item) === id) ?? null; }
-
-        /** Put a copy of `item` at its place (in place of the one with its id, else last); undone, as it was. */
-        bring(model, item) {
-            const list = this.list(model);
-            const twin = this.copyOf(item);
-            const at = list.findIndex(x => this.idOf(x) === this.idOf(item));
-            if (at < 0) {
-                list.push(twin);
-                return () => { const i = list.indexOf(twin); if (i >= 0) list.splice(i, 1); };
-            }
-            const old = list[at];
-            list[at] = twin;
-            return () => { const i = list.indexOf(twin); if (i >= 0) list[i] = old; };
-        }
-
-        /** A copy to put in the other model. */
-        copyOf(item) { return copy(item); }
-    }
-
     /** One level's entities: compared on all but where they are drawn. */
     class LevelEntitiesCompared extends ListCompared {
         constructor(level) {
@@ -46380,7 +46753,7 @@
 
         content(entity) {
             const { x, y, ...rest } = entity;
-            return copy(rest);
+            return copy$1(rest);
         }
     }
 
@@ -46399,7 +46772,7 @@
         list(model) { return model.level(this.level).relationships; }
         idOf(r) { return r.id ?? `${r.source}->${r.target}${r.name ? `:${r.name}` : ''}`; }
         nameOf(r) { return `${r.source} ${r.name || '→'} ${r.target}`; }
-        content(r) { return copy(r); }
+        content(r) { return copy$1(r); }
         requires(r) { return [[`${this.level}-entity`, r.source], [`${this.level}-entity`, r.target]]; }
     }
 
@@ -46426,8 +46799,8 @@
 
     /** Perspectives and contexts are classes; their JSON is what counts, and a copy is one made from it. */
     class ModelPartsCompared extends ListCompared {
-        content(item) { return copy(item.toJSON()); }
-        copyOf(item) { return new item.constructor(copy(item.toJSON())); }
+        content(item) { return copy$1(item.toJSON()); }
+        copyOf(item) { return new item.constructor(copy$1(item.toJSON())); }
     }
 
     class ContextsCompared extends ModelPartsCompared {
@@ -46469,11 +46842,13 @@
      * (`{ entities, relationships }`, as dataModelDiagram takes them), is read as
      * three levels mapped one to one.
      *
-     * It knows whether it changed since it was saved (`edited()`, `markSaved()`,
-     * `isDirty()`, `onEdit(fn)`), as a ViewSetModel does, so a part can show it,
-     * keep it and ask before it is lost.
+     * What any model a part edits has — whether it changed since saved, its undo
+     * history, compare and merge — is EditableModel's.
      */
-    class DataModel {
+    class DataModel extends EditableModel {
+        /** What a snapshot puts back (EditableModel#restore). */
+        static STATE = Object.freeze(['name', 'levels', 'mappings', 'mappingLayout', 'noteLayout', 'perspectives', 'contexts', 'dataTypes', 'namingStandard', 'classificationScheme', 'scorecard']);
+
         /** The levels, outermost first. */
         static LEVELS = LEVELS;
 
@@ -46557,11 +46932,7 @@
          * @param {string} [spec.name] - What the model is called
          */
         constructor(spec = {}) {
-            /** What the model is called. */
-            this.name = spec.name ?? '';
-            this._version = 0;
-            this._saved = 0;
-            this._editListeners = [];
+            super(spec);
             const { levels, mappings = [], mappingLayout = {}, noteLayout = {} } = spec.levels ? spec : DataModel.levelsFromCombined(spec);
             this.levels = Object.fromEntries(LEVELS.map(level => [level, new LevelSchema(level, levels?.[level] ?? {})]));
             this.mappings = LEVELS.slice(1).map((to, i) => {
@@ -46588,6 +46959,14 @@
             return new ModelScorecard(this);
         }
 
+        /** What it is measured by (Benchmark): its check's findings, and its Scorecard total. */
+        benchmark() {
+            return [
+                ...Benchmark.findings(this),
+                { key: 'scorecard', label: 'Scorecard', value: this.scored().total().score, better: 'higher', format: 'score' },
+            ];
+        }
+
         /** Keep a reviewer's scores and the weights (ModelScorecard.specFrom's), as one undo step. */
         scorecardCommand(spec) {
             return this.editCommand('Score the model', (model) => {
@@ -46635,46 +47014,6 @@
             ];
         }
 
-        /** How this model differs from another (ModelComparison), which can merge the other's into it. */
-        compareWith(other) {
-            return new ModelComparison(this, other);
-        }
-
-        /** Its undo history: a merge is one step on it. */
-        get history() {
-            return (this._history ??= new CommandHistory());
-        }
-
-        // ===== Changed since saved =====
-
-        /** Something changed (a perspective or context, a box or note moved): listeners hear of it. */
-        edited() {
-            this._version++;
-            this._emitEdit();
-        }
-
-        /** This state is the saved one (a file opened or saved). */
-        markSaved() {
-            this._saved = this._version;
-            this._emitEdit();
-        }
-
-        /** Whether it changed since markSaved. */
-        isDirty() {
-            return this._version !== this._saved;
-        }
-
-        /** Call `fn(model)` after every change (and markSaved). Returns an unsubscribe function. */
-        onEdit(fn) {
-            this._editListeners.push(fn);
-            return () => { this._editListeners = this._editListeners.filter(l => l !== fn); };
-        }
-
-        /** @private */
-        _emitEdit() {
-            for (const fn of this._editListeners) fn(this);
-        }
-
         /** A level's schema (LevelSchema). */
         level(name) {
             const schema = this.levels[name];
@@ -46890,13 +47229,7 @@
 
         // ===== Perspectives and contexts of one's own =====
 
-        // ===== Editing what a level holds (each a DataModelEditCommand: one undo step) =====
-
-        /** Put the model back as a snapshot says (DataModelEditCommand): its levels, mappings, layout, perspectives, contexts, data types. */
-        restore(json) {
-            const back = new DataModel(JSON.parse(JSON.stringify(json)));
-            for (const key of ['name', 'levels', 'mappings', 'mappingLayout', 'noteLayout', 'perspectives', 'contexts', 'dataTypes', 'namingStandard', 'classificationScheme', 'scorecard']) this[key] = back[key];
-        }
+        // ===== Editing what a level holds (each an editCommand: one undo step) =====
 
         /** Set how its data is classified (a ClassificationScheme spec), as one undo step. */
         classificationSchemeCommand(spec) {
@@ -46912,11 +47245,6 @@
             });
         }
 
-        /** A change made as one undo step. */
-        editCommand(label, change) {
-            return new DataModelEditCommand(this, label, change);
-        }
-
         /**
          * Add an entity at a level (`id` null: one made from its name) or change
          * one (what the spec leaves out, where it is drawn among it, kept).
@@ -47268,13 +47596,6 @@
         }
 
         /** An id from a name, not yet among `taken`. @private */
-        _freshId(name, taken) {
-            const base = String(name ?? 'item').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'item';
-            let id = base;
-            for (let n = 2; taken.some(t => t.id === id); n++) id = `${base}-${n}`;
-            return id;
-        }
-
         toJSON() {
             return {
                 name: this.name,
@@ -48374,6 +48695,853 @@
         }
     }
 
+    /**
+     * The kinds two RequirementsModels are compared on and merged by
+     * (ModelComparison): epics, releases, then stories, in the order a merge
+     * brings them — a story needs its epic and its release.
+     */
+
+    class EpicsCompared extends ListCompared {
+        get key() { return 'epic'; }
+        get label() { return 'Epics'; }
+        list(model) { return model.epics; }
+        content(epic) { return { ...epic }; }
+    }
+
+    class ReleasesCompared extends ListCompared {
+        get key() { return 'release'; }
+        get label() { return 'Releases'; }
+        list(model) { return model.releases; }
+        content(release) { return { ...release }; }
+    }
+
+    /** Stories: compared on everything, where they sit in the list aside. */
+    class StoriesCompared extends ListCompared {
+        get key() { return 'story'; }
+        get label() { return 'Stories'; }
+        list(model) { return model.stories; }
+        content(story) { return JSON.parse(JSON.stringify(story)); }
+
+        requires(story) {
+            return [...(story.epic ? [['epic', story.epic]] : []), ...(story.release ? [['release', story.release]] : [])];
+        }
+    }
+
+    /**
+     * RequirementsChecker — what a requirements model is missing, as a team
+     * reviewing a backlog would say it: a story with no acceptance criteria
+     * (nothing to say when it is done), one that says neither who wants it nor
+     * what (no "As a … I want …"), one that traces to nothing (nothing realises
+     * it), one under no epic, an epic with no stories, two stories of one name.
+     *
+     * With `resolve(trace)` — the host's way to find what a trace names in its
+     * other models (true, false, or undefined when it cannot tell) — a trace to
+     * something that is not there is found too.
+     *
+     * Findings name a story or an epic (`kind`), as ModelChecker's do.
+     */
+    class RequirementsChecker extends ModelChecker {
+        /**
+         * @param {RequirementsModel} model
+         * @param {{resolve?: (trace: Object) => (boolean|undefined)}} [options]
+         */
+        constructor(model, { resolve = null } = {}) {
+            super(model);
+            this.resolve = resolve;
+        }
+
+        checks() {
+            return [this.noCriteria, this.noNarrative, this.untraced, this.brokenTraces, this.noEpic, this.emptyEpics, this.sameNames];
+        }
+
+        /** @private */
+        _story(story, code, severity, message) {
+            return { code, severity, kind: 'story', ids: [story.id], message };
+        }
+
+        noCriteria() {
+            return this.model.stories.filter(s => !s.criteria.length)
+                .map(s => this._story(s, 'story-no-criteria', 'warning', `"${s.name}" has no acceptance criteria: nothing says when it is done`));
+        }
+
+        noNarrative() {
+            return this.model.stories.filter(s => !s.want && !s.description)
+                .map(s => this._story(s, 'story-no-narrative', 'info', `"${s.name}" says neither who wants it nor what (As a … I want … so that …)`));
+        }
+
+        untraced() {
+            return this.model.stories.filter(s => !s.traces.length)
+                .map(s => this._story(s, 'story-untraced', 'info', `"${s.name}" traces to nothing that realises it`));
+        }
+
+        brokenTraces() {
+            if (!this.resolve) return [];
+            return this.model.stories.flatMap(s => s.traces.filter(t => this.resolve(t) === false)
+                .map(t => this._story(s, 'trace-missing', 'warning', `"${s.name}" traces to ${t.kind} "${t.name || t.ref}", which is not there`)));
+        }
+
+        noEpic() {
+            if (!this.model.epics.length) return [];
+            return this.model.stories.filter(s => !this.model.epic(s.epic))
+                .map(s => this._story(s, 'story-no-epic', 'info', `"${s.name}" is under no epic`));
+        }
+
+        emptyEpics() {
+            return this.model.epics.filter(e => !this.model.storiesOf(e.id).length)
+                .map(e => ({ code: 'epic-empty', severity: 'info', kind: 'epic', ids: [e.id], message: `Epic "${e.name}" has no stories` }));
+        }
+
+        sameNames() {
+            const byName = new Map();
+            for (const s of this.model.stories) {
+                const key = s.name.trim().toLowerCase();
+                if (key) byName.set(key, [...(byName.get(key) ?? []), s]);
+            }
+            return [...byName.values()].filter(list => list.length > 1)
+                .map(list => ({ code: 'story-duplicate', severity: 'warning', kind: 'story', ids: list.map(s => s.id), message: `${list.length} stories are called "${list[0].name}"` }));
+        }
+    }
+
+    /** A plain copy of JSON-shaped data. */
+    const copy = (value) => JSON.parse(JSON.stringify(value));
+
+    /**
+     * What a story can trace to, and what its trace is called: ArchiMate's
+     * motivation and implementation elements, any other element of an
+     * architecture, and a data model's concepts, entities and tables — so a trace
+     * runs epic → story → requirement → component → entity → table. A trace's
+     * `kind` is any string; these are the ones offered.
+     */
+    const TRACE_KINDS = Object.freeze([
+        ['requirement', 'Requirement (ArchiMate)'],
+        ['work-package', 'Work package (ArchiMate)'],
+        ['element', 'Architecture element'],
+        ['concept', 'Data concept'],
+        ['entity', 'Data entity'],
+        ['table', 'Table'],
+    ]);
+
+    /** Where a story is in its life, in order; a status is any string, these are offered. */
+    const STATUSES = Object.freeze(['To do', 'In progress', 'Done']);
+
+    /**
+     * RequirementsModel — what a system is to do, as an agile team writes it:
+     * **epics** (large outcomes), the **stories** that deliver them ("As a … I
+     * want … so that …"), each with its **acceptance criteria**, sliced into
+     * **releases**; and **traces** from a story to what realises it in the other
+     * models (TRACE_KINDS: an ArchiMate requirement or work package, an element,
+     * a data concept, entity or table — `{kind, ref, name?, model?}`, `ref` that
+     * model's id).
+     *
+     * Read as a **story map** (`storyMap()`): epics across in order, releases
+     * down, each cell the stories of that epic in that release; stories with no
+     * epic or no release have a column and a row of their own. `coverage()` and
+     * the checker (RequirementsChecker) say what is missing — a story with no
+     * acceptance criteria, nothing realising it — the numbers a bench measures.
+     *
+     * Spec (its toJSON): `{ name?, epics: [{id, name, description?}], releases:
+     * [{id, name}], stories: [{id, name, epic?, release?, as?, want?, soThat?,
+     * description?, criteria: [{id, text}], status?, priority?, points?, labels?,
+     * source?: {system, key, url?}, traces: [{kind, ref, name?, model?}]}] }`.
+     * Ids are made from names when not given. Every edit is a command (one undo
+     * step); compare and merge, and changed-since-saved, are EditableModel's.
+     */
+    class RequirementsModel extends EditableModel {
+        static STATE = Object.freeze(['name', 'epics', 'releases', 'stories']);
+
+        static TRACE_KINDS = TRACE_KINDS;
+
+        static STATUSES = STATUSES;
+
+        /** A story map's column for stories with no epic, and its row for those in no release. */
+        static NO_EPIC = '';
+        static NO_RELEASE = '';
+
+        constructor(spec = {}) {
+            super(spec);
+            this.epics = [];
+            this.releases = [];
+            this.stories = [];
+            for (const e of spec.epics ?? []) this.epics.push(this._epic(e));
+            for (const r of spec.releases ?? []) this.releases.push(this._release(r));
+            for (const s of spec.stories ?? []) this.stories.push(this._story(s));
+        }
+
+        // ===== Reading =====
+
+        epic(id) { return this.epics.find(e => e.id === id) ?? null; }
+        release(id) { return this.releases.find(r => r.id === id) ?? null; }
+        story(id) { return this.stories.find(s => s.id === id) ?? null; }
+
+        /** The stories of an epic (NO_EPIC: of none), in order; with `release`, only those in it (NO_RELEASE: in none). */
+        storiesOf(epicId, release) {
+            return this.stories.filter(s => (s.epic || '') === (epicId || '')
+                && (release === undefined || (s.release || '') === (release || '')));
+        }
+
+        /** The story's sentence: "As a … I want … so that …", from what it has. */
+        static narrative(story) {
+            return [story.as && `As ${/^(a|an|the)\b/i.test(story.as) ? '' : 'a '}${story.as}`, story.want && `I want ${story.want}`, story.soThat && `so that ${story.soThat}`]
+                .filter(Boolean).join(', ');
+        }
+
+        /**
+         * The story map: `columns` the epics in order (then NO_EPIC, if any story
+         * has none), `rows` the releases in order (then NO_RELEASE, if any story is
+         * in none, or there are no releases), and `cell(epicId, releaseId)` the
+         * stories there, in order.
+         */
+        storyMap() {
+            const columns = [...this.epics.map(e => ({ id: e.id, name: e.name, epic: e }))];
+            if (this.stories.some(s => !this.epic(s.epic))) columns.push({ id: RequirementsModel.NO_EPIC, name: 'No epic', epic: null });
+            const rows = this.releases.map(r => ({ id: r.id, name: r.name, release: r }));
+            if (!rows.length || this.stories.some(s => !this.release(s.release))) rows.push({ id: RequirementsModel.NO_RELEASE, name: this.releases.length ? 'Not planned' : 'Stories', release: null });
+            const epicOf = (s) => (this.epic(s.epic) ? s.epic : RequirementsModel.NO_EPIC);
+            const releaseOf = (s) => (this.release(s.release) ? s.release : RequirementsModel.NO_RELEASE);
+            return {
+                columns, rows,
+                cell: (epicId, releaseId) => this.stories.filter(s => epicOf(s) === epicId && releaseOf(s) === releaseId),
+            };
+        }
+
+        /** The stories that trace to `ref` (with `kind`, only traces of that kind): what a change to it touches. */
+        tracingTo(ref, kind) {
+            return this.stories.filter(s => s.traces.some(t => t.ref === ref && (!kind || t.kind === kind)));
+        }
+
+        /**
+         * How complete it is, as numbers to measure by: stories, how many have
+         * acceptance criteria, how many trace to something, epics with no stories,
+         * and each as a share (0..1; 1 with nothing to count).
+         */
+        coverage() {
+            const stories = this.stories.length;
+            const withCriteria = this.stories.filter(s => s.criteria.length).length;
+            const traced = this.stories.filter(s => s.traces.length).length;
+            const emptyEpics = this.epics.filter(e => !this.storiesOf(e.id).length).length;
+            const share = (n, of) => (of ? n / of : 1);
+            return {
+                stories, withCriteria, traced, epics: this.epics.length, emptyEpics,
+                criteriaShare: share(withCriteria, stories), traceShare: share(traced, stories),
+            };
+        }
+
+        /** What it is measured by (Benchmark): its check's findings, and how many stories say when they are done and trace to something. */
+        benchmark() {
+            const c = this.coverage();
+            return [
+                ...Benchmark.findings(this),
+                { key: 'criteria', label: 'Stories with acceptance criteria', value: c.criteriaShare, better: 'higher', format: 'share' },
+                { key: 'traced', label: 'Stories traced', value: c.traceShare, better: 'higher', format: 'share' },
+            ];
+        }
+
+        /** Its checks (RequirementsChecker). */
+        checker(options) {
+            return new RequirementsChecker(this, options);
+        }
+
+        comparedKinds() {
+            return [new EpicsCompared(), new ReleasesCompared(), new StoriesCompared()];
+        }
+
+        // ===== Editing (each an editCommand: one undo step) =====
+
+        /** Add an epic (`id` null) or change one. The command's result is the epic. */
+        saveEpicCommand(id, spec) {
+            return this.editCommand(id ? `Edit epic ${spec.name ?? id}` : `New epic ${spec.name ?? ''}`.trim(), (model) => {
+                if (!id) { const epic = model._epic(spec); model.epics.push(epic); return epic; }
+                const epic = model.epic(id);
+                if (epic) Object.assign(epic, model._epic({ ...epic, ...spec, id }));
+                return epic;
+            });
+        }
+
+        /** Remove an epic; its stories stay, with no epic. */
+        removeEpicCommand(id) {
+            return this.editCommand(`Remove epic ${this.epic(id)?.name ?? id}`, (model) => {
+                model.epics = model.epics.filter(e => e.id !== id);
+                for (const s of model.stories) if (s.epic === id) s.epic = '';
+            });
+        }
+
+        /** Add a release (`id` null) or rename one. */
+        saveReleaseCommand(id, spec) {
+            return this.editCommand(id ? `Edit release ${spec.name ?? id}` : `New release ${spec.name ?? ''}`.trim(), (model) => {
+                if (!id) { const release = model._release(spec); model.releases.push(release); return release; }
+                const release = model.release(id);
+                if (release) Object.assign(release, model._release({ ...release, ...spec, id }));
+                return release;
+            });
+        }
+
+        /** Remove a release; its stories stay, planned in none. */
+        removeReleaseCommand(id) {
+            return this.editCommand(`Remove release ${this.release(id)?.name ?? id}`, (model) => {
+                model.releases = model.releases.filter(r => r.id !== id);
+                for (const s of model.stories) if (s.release === id) s.release = '';
+            });
+        }
+
+        /** Add a story (`id` null) or change one — what the spec leaves out kept. The command's result is the story. */
+        saveStoryCommand(id, spec) {
+            return this.editCommand(id ? `Edit ${spec.name ?? this.story(id)?.name ?? id}` : `New story ${spec.name ?? ''}`.trim(), (model) => {
+                if (!id) { const story = model._story(spec); model.stories.push(story); return story; }
+                const at = model.stories.findIndex(s => s.id === id);
+                if (at < 0) return null;
+                model.stories[at] = model._story({ ...model.stories[at], ...spec, id });
+                return model.stories[at];
+            });
+        }
+
+        removeStoryCommand(id) {
+            return this.editCommand(`Remove ${this.story(id)?.name ?? id}`, (model) => {
+                model.stories = model.stories.filter(s => s.id !== id);
+            });
+        }
+
+        /**
+         * Move a story on the map: to an epic and a release (NO_EPIC, NO_RELEASE:
+         * none), before another story there (`before`; none: last).
+         */
+        moveStoryCommand(id, { epic, release, before = null }) {
+            return this.editCommand(`Move ${this.story(id)?.name ?? id}`, (model) => {
+                const story = model.story(id);
+                if (!story || before === id) return;
+                if (epic !== undefined) story.epic = epic || '';
+                if (release !== undefined) story.release = release || '';
+                model.stories.splice(model.stories.indexOf(story), 1);
+                const at = before ? model.stories.findIndex(s => s.id === before) : -1;
+                model.stories.splice(at < 0 ? model.stories.length : at, 0, story);
+            });
+        }
+
+        /** Trace a story to something that realises it (`{kind, ref, name?, model?}`); once per kind and ref. */
+        traceCommand(storyId, trace) {
+            return this.editCommand(`Trace ${this.story(storyId)?.name ?? storyId} to ${trace.name || trace.ref}`, (model) => {
+                const story = model.story(storyId);
+                if (!story || story.traces.some(t => t.kind === trace.kind && t.ref === trace.ref)) return;
+                story.traces.push(RequirementsModel._trace(trace));
+            });
+        }
+
+        /** Remove a story's trace to `ref` (of `kind`, if given). */
+        untraceCommand(storyId, ref, kind) {
+            return this.editCommand(`Remove the trace of ${this.story(storyId)?.name ?? storyId}`, (model) => {
+                const story = model.story(storyId);
+                if (story) story.traces = story.traces.filter(t => !(t.ref === ref && (!kind || t.kind === kind)));
+            });
+        }
+
+        /**
+         * Bring epics, releases and stories in (an import): one undo step. One with
+         * the id of one there replaces it; the rest are added.
+         */
+        bringCommand({ epics = [], releases = [], stories = [] }, label = 'Import') {
+            return this.editCommand(label, (model) => {
+                const put = (list, item) => {
+                    const at = list.findIndex(x => x.id === item.id);
+                    if (at < 0) list.push(item); else list[at] = item;
+                };
+                for (const e of epics) put(model.epics, model._epic(e));
+                for (const r of releases) put(model.releases, model._release(r));
+                for (const s of stories) put(model.stories, model._story(s));
+            });
+        }
+
+        // ===== Its parts, read from a spec =====
+
+        /** @private */
+        _epic({ id, name = '', description = '', source } = {}) {
+            return {
+                id: id ?? this._freshId(name || 'epic', this.epics), name, description,
+                ...(source && { source: copy(source) }),
+            };
+        }
+
+        /** @private */
+        _release({ id, name = '' } = {}) {
+            return { id: id ?? this._freshId(name || 'release', this.releases), name };
+        }
+
+        /** @private */
+        _story(spec = {}) {
+            const { id, name = '', epic = '', release = '', as = '', want = '', soThat = '', description = '', status = '', priority = '', points = null, labels = [], source, criteria = [], traces = [] } = spec;
+            const story = {
+                id: id ?? this._freshId(name || 'story', this.stories), name, epic: epic ?? '', release: release ?? '',
+                as, want, soThat, description, status, priority,
+                points: Number.isFinite(Number(points)) && points !== null && points !== '' ? Number(points) : null,
+                labels: [...labels],
+                criteria: [],
+                traces: traces.map(t => RequirementsModel._trace(t)),
+                ...(source && { source: copy(source) }),
+            };
+            // A new criterion is numbered past every id the story's criteria have, so none is given twice.
+            const given = new Set(criteria.map(c => (typeof c === 'object' && c?.id) || null).filter(Boolean));
+            let n = 0;
+            const fresh = () => { let id; do id = `${story.id}-ac${++n}`; while (given.has(id)); given.add(id); return id; };
+            for (const c of criteria) {
+                const text = typeof c === 'string' ? c : c?.text;
+                if (!String(text ?? '').trim()) continue;
+                story.criteria.push({ id: (typeof c === 'object' && c.id) || fresh(), text: String(text).trim() });
+            }
+            return story;
+        }
+
+        /** @private */
+        static _trace({ kind = 'element', ref, name = '', model = '' } = {}) {
+            return { kind, ref: String(ref ?? ''), ...(name && { name }), ...(model && { model }) };
+        }
+
+        toJSON() {
+            return {
+                name: this.name,
+                epics: copy(this.epics),
+                releases: copy(this.releases),
+                stories: copy(this.stories),
+            };
+        }
+    }
+
+    /**
+     * RequirementsFileFormat — a requirements model as a file
+     * (`.requirements.json`): its epics, releases and stories
+     * (RequirementsModel#toJSON), read back by `new RequirementsModel(json)`.
+     */
+    class RequirementsFileFormat extends ModelFileFormat {
+        get label() { return '.requirements.json'; }
+        get accept() { return '.requirements.json,.json'; }
+        get fileName() { return 'model.requirements.json'; }
+        get featureName() { return 'Requirements'; }
+
+        /** JSON with a requirements model's shape: stories, or epics. */
+        recognizes(text) {
+            try {
+                const json = JSON.parse(text);
+                return !!json && typeof json === 'object' && (Array.isArray(json.stories) || Array.isArray(json.epics));
+            } catch {
+                return false;
+            }
+        }
+
+        export(model) {
+            return { data: JSON.stringify(model.toJSON(), null, 2), mimeType: 'application/json' };
+        }
+
+        import(text) {
+            return new RequirementsModel(JSON.parse(text));
+        }
+    }
+
+    /**
+     * Where each tracker's export keeps what a story needs: per tracker, the
+     * column names (CSV) each field may be under, first found wins; which issue
+     * types are epics; how its list fields are separated. One definition per
+     * tracker — the CSV and the JSON readers both map onto these fields. A host
+     * gives its own (a custom field's column) through `new TrackerExport({ columns })`.
+     */
+    const TRACKERS = Object.freeze({
+        jira: {
+            label: 'Jira',
+            // Columns only its exports have, to tell it by.
+            marks: ['Issue key', 'Issue Type'],
+            columns: {
+                key: ['Issue key', 'Key'], id: ['Issue id'], type: ['Issue Type'], title: ['Summary'],
+                description: ['Description'], parent: ['Parent', 'Parent id', 'Parent key', 'Custom field (Epic Link)', 'Epic Link'],
+                status: ['Status'], priority: ['Priority'],
+                points: ['Custom field (Story Points)', 'Story Points', 'Custom field (Story point estimate)', 'Story point estimate'],
+                release: ['Fix Version/s', 'Fix versions', 'Sprint'], labels: ['Labels'],
+                criteria: ['Custom field (Acceptance Criteria)', 'Acceptance Criteria'], url: [],
+            },
+            epicTypes: ['Epic'], skipTypes: ['Sub-task', 'Subtask'], labelSeparator: /[\s,]+/,
+        },
+        azure: {
+            label: 'Azure DevOps',
+            marks: ['Work Item Type'],
+            columns: {
+                key: ['ID'], id: ['ID'], type: ['Work Item Type'], title: ['Title', 'Title 1', 'Title 2', 'Title 3'],
+                description: ['Description'], parent: ['Parent'], status: ['State'], priority: ['Priority'],
+                points: ['Story Points', 'Effort', 'Size'], release: ['Iteration Path'], labels: ['Tags'],
+                criteria: ['Acceptance Criteria'], url: [],
+            },
+            epicTypes: ['Epic', 'Feature'], skipTypes: ['Task'], labelSeparator: /\s*;\s*/,
+        },
+        gitlab: {
+            label: 'GitLab',
+            marks: ['Issue ID', 'URL'],
+            columns: {
+                key: ['Issue ID', 'IID'], id: ['Issue ID', 'IID'], type: [], title: ['Title'], description: ['Description'],
+                parent: ['Epic ID'], parentName: ['Epic Title'], status: ['State'], priority: [], points: ['Weight'],
+                release: ['Milestone'], labels: ['Labels'], criteria: [], url: ['URL'],
+            },
+            epicTypes: [], skipTypes: [], labelSeparator: /\s*,\s*/,
+        },
+    });
+
+    /**
+     * Where Jira's JSON keeps what has no field of its own: custom fields, by key.
+     * Jira Cloud's "Story point estimate" is customfield_10016 unless a site
+     * changed it; a host names its own (`columns: { points: ['customfield_10026'] }`).
+     */
+    const JIRA_FIELDS = Object.freeze({
+        points: ['story_points', 'storyPoints', 'customfield_10016'],
+        criteria: ['acceptanceCriteria'],
+    });
+
+    /** Text with HTML in it (Azure DevOps keeps descriptions as HTML) as lines of plain text. */
+    function plainText(value) {
+        if (value == null) return '';
+        if (typeof value === 'object') return documentText(value);
+        return String(value)
+            .replace(/<\s*(br|\/p|\/div|\/li|\/h\d)\s*\/?>/gi, '\n').replace(/<\s*li[^>]*>/gi, '- ')
+            .replace(/<[^>]+>/g, '')
+            .replace(/&nbsp;/g, ' ').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&amp;/g, '&')
+            .replace(/\r\n?/g, '\n').replace(/\n{3,}/g, '\n\n').trim();
+    }
+
+    /** Jira Cloud's description, a document of nodes, as text: each paragraph and list item a line. */
+    function documentText(node) {
+        if (!node || typeof node !== 'object') return '';
+        if (node.type === 'text') return node.text ?? '';
+        const inner = (node.content ?? []).map(documentText).join('');
+        return ['paragraph', 'heading', 'listItem', 'codeBlock'].includes(node.type) ? `${node.type === 'listItem' ? '- ' : ''}${inner.trim()}\n` : inner;
+    }
+
+    /** The lines of a list: "- x", "* x", "1. x", "• x", "[ ] x" — each item a line, its marker gone. */
+    function listItems(text) {
+        return String(text ?? '').split('\n')
+            .map(line => line.replace(/^\s*(?:[-*•+]|\d+[.)]|\[[ xX]?\])\s+/, '').trim())
+            .filter(Boolean);
+    }
+
+    /**
+     * Acceptance criteria in a story's text: the lines under an "Acceptance
+     * criteria" heading, else its Given/When/Then scenarios (one each), else none.
+     * @returns {{criteria: Array<string>, rest: string}} - and the text without them
+     */
+    function criteriaFrom(text) {
+        const s = plainText(text);
+        const heading = /^\s*(?:#+\s*|\*\*)?acceptance criteria\b[^\n]*\n/im.exec(s);
+        if (heading) {
+            const after = s.slice(heading.index + heading[0].length);
+            const end = after.search(/\n\s*\n\s*(?:#+\s|\*\*|[A-Z][^\n:]{0,40}:\s*\n)/);
+            const block = end < 0 ? after : after.slice(0, end);
+            return { criteria: listItems(block), rest: (s.slice(0, heading.index) + (end < 0 ? '' : after.slice(end))).replace(/\n{3,}/g, '\n\n').trim() };
+        }
+        const scenarios = [];
+        let current = null;
+        for (const line of s.split('\n')) {
+            const t = line.replace(/^\s*(?:[-*•]\s+)?/, '').trim();
+            if (/^given\b/i.test(t)) { current = [t]; scenarios.push(current); } else if (current && /^(when|then|and|but)\b/i.test(t)) current.push(t); else current = null;
+        }
+        if (scenarios.length) return { criteria: scenarios.map(lines => lines.join(' ')), rest: s.split('\n').filter(l => !/^\s*(?:[-*•]\s+)?(given|when|then|and|but)\b/i.test(l)).join('\n').trim() };
+        return { criteria: [], rest: s };
+    }
+
+    /** A field that holds only acceptance criteria: as criteriaFrom reads them, else each of its lines one. */
+    function criteriaField(text) {
+        const found = criteriaFrom(text).criteria;
+        return found.length ? found : listItems(plainText(text));
+    }
+
+    /** "As a <who>, I want <what> so that <why>" in a text: its three parts (empty where it says nothing). */
+    function narrativeFrom(text) {
+        const m = /\bas an?\s+([^,\n]+?)\s*,?\s+i\s+(?:want|need|would like)\s+([^\n]+?)(?:\s*,?\s+so\s+that\s+([^\n]+?))?\s*(?:[.\n]|$)/i.exec(plainText(text));
+        return m ? { as: m[1].trim(), want: m[2].trim(), soThat: (m[3] ?? '').trim() } : { as: '', want: '', soThat: '' };
+    }
+
+    /** A text without its "As a … I want …" line: what is left to describe the story, once its sentence is read (narrativeFrom). */
+    function withoutNarrative(text) {
+        return String(text ?? '').replace(/^\s*\**\s*as an?\s[^\n]*\bi\s+(want|need|would like)\b[^\n]*\n?/im, '').trim();
+    }
+
+    /**
+     * TrackerExport — epics and stories from what an issue tracker exports: Jira,
+     * Azure DevOps or GitLab (TRACKERS), as CSV or as their API's JSON. An issue
+     * of an epic type becomes an epic (GitLab's epics are named by their issues'
+     * Epic ID and title); the rest become stories under their parent epic, with
+     * their status, priority, points, labels and release (fix version, iteration
+     * or milestone). Acceptance criteria come from their own field, else from
+     * the description (criteriaFrom); "As a … I want … so that …" from the
+     * description or the title (narrativeFrom). Each keeps where it came from
+     * (`source: {system, key, url?}`), and its id is the tracker's key, so
+     * reading a newer export over a model replaces what it had.
+     *
+     * `read(text)` gives a RequirementsModel spec (`{epics, releases, stories}`).
+     */
+    class TrackerExport {
+        /**
+         * @param {Object} [options]
+         * @param {string} [options.tracker] - 'jira', 'azure', 'gitlab' (default: told from the export)
+         * @param {Object<string, Array<string>>} [options.columns] - Column names to look in first, by field (in Jira's JSON, field keys)
+         */
+        constructor({ tracker = null, columns = {} } = {}) {
+            this.tracker = tracker;
+            this.columns = columns;
+        }
+
+        /** What a tracker is called ('Jira'). */
+        static label(tracker) {
+            return TRACKERS[tracker]?.label ?? 'Tracker';
+        }
+
+        /** Which tracker an export's columns (or JSON) are from, or null. */
+        static detect(text) {
+            const json = TrackerExport._json(text);
+            if (json) {
+                if (Array.isArray(json.issues) && json.issues[0]?.fields) return 'jira';
+                if (Array.isArray(json.value ?? json.workItems) && (json.value ?? json.workItems)[0]?.fields) return 'azure';
+                if (Array.isArray(json) && json[0] && 'iid' in json[0]) return 'gitlab';
+                return null;
+            }
+            const { columns } = parseCsvTable(text);
+            const has = new Set(columns.map(c => c.toLowerCase()));
+            const found = Object.entries(TRACKERS).find(([, t]) => t.marks.every(m => has.has(m.toLowerCase())));
+            return found?.[0] ?? null;
+        }
+
+        /** @private */
+        static _json(text) {
+            const s = String(text ?? '').trim();
+            if (!s.startsWith('{') && !s.startsWith('[')) return null;
+            try { return JSON.parse(s); } catch { return null; }
+        }
+
+        /**
+         * The export as a requirements model's spec.
+         * @returns {{epics: Array, releases: Array, stories: Array, tracker: string|null}}
+         */
+        read(text) {
+            const tracker = this.tracker ?? TrackerExport.detect(text) ?? 'jira';
+            const def = TRACKERS[tracker];
+            if (!def) throw new Error(`Unknown tracker: "${tracker}"`);
+            const json = TrackerExport._json(text);
+            const issues = json ? this._fromJson(tracker, json) : this._fromCsv(def, text);
+            return { ...this._model(tracker, def, issues), tracker };
+        }
+
+        /** CSV rows as issues: each field from the first of its columns there. @private */
+        _fromCsv(def, text) {
+            const { columns, rows } = parseCsvTable(text);
+            const lower = new Map(columns.map(c => [c.toLowerCase(), c]));
+            const columnOf = (field) => [...(this.columns[field] ?? []), ...(def.columns[field] ?? [])].map(c => lower.get(c.toLowerCase())).find(Boolean);
+            const fields = Object.keys({ ...def.columns, ...this.columns, parentName: [] });
+            const at = Object.fromEntries(fields.map(f => [f, columnOf(f)]));
+            return rows.map(row => Object.fromEntries(fields.map(f => [f, at[f] ? row[at[f]] : ''])));
+        }
+
+        /** An API's JSON as issues, in the CSV's fields. @private */
+        _fromJson(tracker, json) {
+            if (tracker === 'jira') {
+                return (json.issues ?? []).map(({ key, id, fields: f = {} }) => {
+                    const custom = (names) => Object.entries(f).find(([k]) => names.some(n => k.toLowerCase().includes(n)))?.[1];
+                    // A field the host named (its custom field's key), else Jira Cloud's usual one.
+                    const field = (name) => [...(this.columns[name] ?? []), ...(JIRA_FIELDS[name] ?? [])].map(k => f[k]).find(v => v != null && v !== '');
+                    return {
+                        key, id: String(id ?? ''), type: f.issuetype?.name ?? '', title: f.summary ?? '', description: f.description ?? '',
+                        parent: f.parent?.key ?? f.parent?.id ?? '', status: f.status?.name ?? '', priority: f.priority?.name ?? '',
+                        points: field('points') ?? custom(['storypoint', 'story_point']) ?? '',
+                        release: (f.fixVersions ?? [])[0]?.name ?? '', labels: (f.labels ?? []).join(' '),
+                        criteria: field('criteria') ?? custom(['acceptance']) ?? '', url: '',
+                    };
+                });
+            }
+            if (tracker === 'azure') {
+                return (json.value ?? json.workItems ?? []).map(({ id, fields: f = {}, url }) => ({
+                    key: String(id), id: String(id), type: f['System.WorkItemType'] ?? '', title: f['System.Title'] ?? '',
+                    description: f['System.Description'] ?? '', parent: String(f['System.Parent'] ?? ''), status: f['System.State'] ?? '',
+                    priority: String(f['Microsoft.VSTS.Common.Priority'] ?? ''),
+                    points: f['Microsoft.VSTS.Scheduling.StoryPoints'] ?? f['Microsoft.VSTS.Scheduling.Effort'] ?? '',
+                    release: f['System.IterationPath'] ?? '', labels: f['System.Tags'] ?? '',
+                    criteria: f['Microsoft.VSTS.Common.AcceptanceCriteria'] ?? '', url: url ?? '',
+                }));
+            }
+            return (Array.isArray(json) ? json : []).map(i => ({
+                key: String(i.iid ?? i.id), id: String(i.iid ?? i.id), type: '', title: i.title ?? '', description: i.description ?? '',
+                parent: String(i.epic?.id ?? i.epic_iid ?? ''), parentName: i.epic?.title ?? '', status: i.state ?? '', priority: '',
+                points: i.weight ?? '', release: i.milestone?.title ?? '', labels: (i.labels ?? []).map(l => l.name ?? l).join(','),
+                criteria: '', url: i.web_url ?? '',
+            }));
+        }
+
+        /** Issues as epics, releases and stories. @private */
+        _model(tracker, def, issues) {
+            const is = (list, type) => list.some(t => t.toLowerCase() === String(type ?? '').trim().toLowerCase());
+            const keyOf = new Map();   // an issue's id or key → its key (Jira's CSV names a parent by its id)
+            for (const i of issues) for (const k of [i.key, i.id]) if (k) keyOf.set(String(k), String(i.key || i.id));
+            const source = (i, key) => ({ system: tracker, key, ...(i.url && { url: i.url }) });
+
+            const epics = new Map();
+            for (const i of issues) {
+                if (!is(def.epicTypes, i.type)) continue;
+                const key = String(i.key || i.id);
+                epics.set(key, { id: key, name: plainText(i.title), description: plainText(i.description), source: source(i, key) });
+            }
+            const releases = new Map();
+            const stories = [];
+            for (const i of issues) {
+                if (is(def.epicTypes, i.type) || is(def.skipTypes, i.type) || !String(i.title ?? '').trim()) continue;
+                const key = String(i.key || i.id);
+                const parent = i.parent ? keyOf.get(String(i.parent)) ?? String(i.parent) : '';
+                if (parent && !epics.has(parent) && i.parentName) epics.set(parent, { id: parent, name: plainText(i.parentName), description: '', source: { system: tracker, key: parent } });
+                const release = plainText(i.release);
+                if (release && !releases.has(release)) releases.set(release, { id: release, name: release.split(/[\\/]/).pop() });
+                const own = criteriaField(i.criteria);
+                const inText = own.length ? { criteria: [], rest: plainText(i.description) } : criteriaFrom(i.description);
+                const said = narrativeFrom(i.description);
+                const { as, want, soThat } = said.want ? said : narrativeFrom(i.title);
+                stories.push({
+                    id: key, name: plainText(i.title), epic: parent, release,
+                    as, want, soThat, description: said.want ? withoutNarrative(inText.rest) : inText.rest,
+                    criteria: own.length ? own : inText.criteria,
+                    status: plainText(i.status), priority: plainText(i.priority), points: i.points === '' ? null : i.points,
+                    labels: String(i.labels ?? '').split(def.labelSeparator).map(l => l.trim()).filter(Boolean),
+                    source: source(i, key), traces: [],
+                });
+            }
+            // A story whose parent is no epic here (a story's sub-item, an epic not exported) is under none.
+            for (const s of stories) if (s.epic && !epics.has(s.epic)) s.epic = '';
+            return { epics: [...epics.values()], releases: [...releases.values()], stories };
+        }
+    }
+
+    /**
+     * Storyboard — epics and stories from a storyboard or requirements document
+     * written in Markdown (or plain text with Markdown headings), as teams keep
+     * them beside or before a tracker:
+     *
+     * - a heading that says "Epic" (`## Epic: Checkout`) is an epic, one that says
+     *   "Story" (`### Story: Pay by card`) a story; otherwise the document's one
+     *   title (`#`) is its name, the next level down are epics and the level
+     *   below that stories;
+     * - under an epic, a list item that reads "As a … I want …" is a story too;
+     * - under a story, "As a … I want … so that …" is its narrative, the list
+     *   under "Acceptance criteria" (or its Given/When/Then lines) its criteria,
+     *   and the rest its description — a picture (`![caption](file)`) kept there
+     *   by its caption.
+     *
+     * `read(text)` gives a RequirementsModel spec (`{name, epics, stories}`); ids
+     * are made from names (prefix: `prefix`, so two storyboards read into one
+     * model stay apart).
+     */
+    class Storyboard {
+        /** @param {{prefix?: string}} [options] */
+        constructor({ prefix = '' } = {}) {
+            this.prefix = prefix;
+        }
+
+        read(text) {
+            const lines = String(text ?? '').replace(/\r\n?/g, '\n').split('\n');
+            const headings = lines.map((line, at) => ({ at, m: /^(#{1,6})\s+(.*?)\s*#*\s*$/.exec(line) })).filter(h => h.m)
+                .map(({ at, m }) => ({ at, level: m[1].length, text: m[2].trim() }));
+            const kindOf = (h) => (/^epic\b/i.test(h.text) ? 'epic' : /^(user\s+)?story\b/i.test(h.text) || /\bas an?\s+\S/i.test(h.text) ? 'story' : null);
+            const top = Math.min(...headings.map(h => h.level));
+            const tops = headings.filter(h => h.level === top);
+            // One top heading, a title (#), names the document; its children are the epics.
+            const named = top === 1 && tops.length === 1 && !kindOf(tops[0]) && headings.length > 1;
+            const epicLevel = named ? top + 1 : top;
+            const strip = (t) => t.replace(/^(epic|(user\s+)?story)\s*[:\-–—]?\s*/i, '').trim();
+
+            const epics = [], stories = [];
+            const ids = new Set();
+            const idFor = (name, kind) => {
+                const base = `${this.prefix}${String(name).toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || kind}`;
+                let id = base;
+                for (let n = 2; ids.has(id); n++) id = `${base}-${n}`;
+                ids.add(id);
+                return id;
+            };
+            const bodyOf = (h, i) => lines.slice(h.at + 1, headings[i + 1]?.at ?? lines.length).join('\n');
+            let epic = null;
+            headings.forEach((h, i) => {
+                if (named && h === tops[0]) return;
+                const kind = kindOf(h) ?? (h.level === epicLevel ? 'epic' : h.level === epicLevel + 1 ? 'story' : null);
+                const body = bodyOf(h, i);
+                if (kind === 'epic') {
+                    epic = { id: idFor(strip(h.text), 'epic'), name: strip(h.text), description: '' };
+                    epics.push(epic);
+                    const listed = this._listedStories(body);
+                    epic.description = listed.rest;
+                    for (const s of listed.stories) stories.push({ ...s, id: idFor(s.name, 'story'), epic: epic.id });
+                } else if (kind === 'story') {
+                    stories.push({ ...this._story(strip(h.text), body), id: idFor(strip(h.text), 'story'), epic: epic?.id ?? '' });
+                }
+            });
+            if (!headings.length || (!epics.length && !stories.length)) {
+                for (const s of this._listedStories(lines.join('\n')).stories) stories.push({ ...s, id: idFor(s.name, 'story') });
+            }
+            return { name: named ? tops[0].text : '', epics, stories };
+        }
+
+        /** A story from its heading and what is under it. @private */
+        _story(name, body) {
+            const pictures = [...body.matchAll(/!\[([^\]]*)\]\([^)]*\)/g)].map(m => m[1]).filter(Boolean);
+            const text = body.replace(/!\[([^\]]*)\]\([^)]*\)/g, '').trim();
+            const said = narrativeFrom(text);
+            const { as, want, soThat } = said.want ? said : narrativeFrom(name);
+            const { criteria, rest } = criteriaFrom(text);
+            const description = [withoutNarrative(rest), ...pictures.map(c => `Picture: ${c}`)].filter(Boolean).join('\n');
+            return { name, as, want, soThat, description, criteria };
+        }
+
+        /** "As a … I want …" list items: stories; the rest of the text, kept. @private */
+        _listedStories(body) {
+            const stories = [];
+            const rest = [];
+            for (const line of body.split('\n')) {
+                const item = /^\s*(?:[-*•+]|\d+[.)])\s+(.*)$/.exec(line);
+                const said = item && narrativeFrom(item[1]);
+                if (said?.want) stories.push({ name: said.want.replace(/^to\s+/i, '').replace(/^./, c => c.toUpperCase()), ...said, description: '', criteria: [] });
+                else rest.push(line);
+            }
+            return { stories, rest: rest.join('\n').trim() };
+        }
+    }
+
+    /**
+     * The files a requirements model is read from that another tool wrote — they
+     * import only: a tracker's export (TrackerExport: Jira, Azure DevOps,
+     * GitLab, CSV or JSON) and a storyboard (Storyboard: Markdown). Each reads
+     * the file as a new model; `spec(text)` is what it holds, for a part that
+     * brings it into the model open (RequirementsModel#bringCommand).
+     */
+    class RequirementsImportFormat extends ModelFileFormat {
+        get exports() { return false; }
+
+        /** What the file holds, as a RequirementsModel spec. @abstract */
+        spec(text) { throw new Error(`${this.constructor.name} must implement spec()`); }
+
+        import(text) {
+            return new RequirementsModel(this.spec(text));
+        }
+    }
+
+    class TrackerExportFileFormat extends RequirementsImportFormat {
+        get label() { return 'Tracker export (Jira, Azure DevOps, GitLab)'; }
+        get accept() { return '.csv,.json'; }
+        get featureName() { return 'TrackerExport'; }
+
+        /** A CSV or JSON export one of the trackers wrote. */
+        recognizes(text) {
+            return !!TrackerExport.detect(text);
+        }
+
+        spec(text) {
+            const { tracker, ...spec } = new TrackerExport().read(text);
+            return { name: `${TrackerExport.label(tracker)} export`, ...spec };
+        }
+    }
+
+    class StoryboardFileFormat extends RequirementsImportFormat {
+        get label() { return 'Storyboard (Markdown)'; }
+        get accept() { return '.md,.markdown,.txt'; }
+        get featureName() { return 'Storyboard'; }
+
+        spec(text) {
+            return new Storyboard().read(text);
+        }
+    }
+
     /**
      * propertiesDialog — the "Show/Edit Properties" dialog, as a shipped feature.
      *
@@ -51504,7 +52672,9 @@
         /** Open what `choose()` read: the part edits its model, from that file. Returns the model. */
         adopt({ model, name, format, handle = null }) {
             this.part.replaceModel(model);
-            Object.assign(this, { name, format, handle });
+            // Read from another tool's export (a format that only reads): a new model, saved in the part's own format.
+            if (format && format.exports === false) Object.assign(this, { name: null, format: null, handle: null });
+            else Object.assign(this, { name, format, handle });
             this.showState();
             return model;
         }
@@ -52288,7 +53458,7 @@ th { color: #555; font-weight: 500; }
                 ...EditorPart.menuGroup('New', some(...this.newItems(), models['New model'], ...(this.modelsHost?.baseItems?.() ?? []))),
                 { separator: true },
                 ...some(open, models['Open… in a new tab'], ...saving, models['Duplicate model'], models['Close model']),
-                ...EditorPart.menuGroup('This browser', this.modelsHost?.keepItems?.(this) ?? []),
+                ...EditorPart.menuGroup(this.modelsHost?.keptWhere ?? 'This browser', this.modelsHost?.keepItems?.(this) ?? []),
                 { separator: true },
                 ...EditorPart.menuGroup('Import', this.importItems(), { prefix: true }),
                 ...EditorPart.menuGroup('Export', this.exportItems(), { prefix: true }),
@@ -52444,723 +53614,1280 @@ th { color: #555; font-weight: 500; }
         }
     }
 
-    /**
-     * DataModelPart — a data model (DataModel, drawn by dataModelDiagram) in a
-     * pane: its conceptual, logical and physical levels, each its own schema, and
-     * how they map; seen through a perspective (whose concepts, under whose names)
-     * read in a context (what they mean here, the rules that hold, where and
-     * when), in a notation (Chen, Crow's Foot, UML). Its toolbar switches each
-     * of them, Level offering the views that are no level (DataModel.OTHER_VIEWS:
-     * Mapping, the levels side by side joined where they map; Service landscape,
-     * the service domains in their business areas and domains, a double-click
-     * seeing the model through one), and its Model menu makes, changes and removes
-     * perspectives and contexts and reads service domains from a BIAN landscape. Boxes and notes stay where they were dragged. Export ▸ saves the
-     * picture (PNG, SVG). The drawing, its sizing and redrawing on resize are
-     * ChartPart's.
-     *
-     * It is saved as a file (DataModelFileFormat, `.datamodel.json`) as an
-     * editor's model is (ModelFile): File ▸ Open…, Save, Save As… (Ctrl+O, Ctrl+S),
-     * • while changed since, and asking before the page is left with changes
-     * unsaved. Hosted by a ModelsPart (`editorType: 'data-model'`) it is one of
-     * several models open, a tab each, and with that part's `keep` it is kept in
-     * this browser and backed up (File ▸ This browser), as the modeller's are.
-     *
-     * Spec: `{ id, type: 'data-model', title?, levels?, mappings?, mappingLayout?,
-     * perspectives?, contexts?, perspective?, context?, level?, notation?, options? }`
-     * — the model as DataModel takes it (or `entities`/`relationships` in the older
-     * one-entity form); `perspective`/`context` the ids chosen; `level` default
-     * 'logical' ('mapping' for the mapping view), `notation` default 'crowsfoot';
-     * `options` anything else dataModelDiagram takes (editable, resizable by default).
-     */
-    class DataModelPart extends ChartPart {
-        static type = 'data-model';
-
-        constructor(spec = {}) {
-            const { perspective = null, context = null, level = 'logical', notation = 'crowsfoot', options = {} } = spec;
-            super({ ...spec, chartType: 'dataModel', options: { editable: true, resizable: true, ...options, level, notation } });
-            /** The file it is open from and saved to. */
-            this.file = new ModelFile(this);
-            /** Its id among the models kept in this browser, or null. */
-            this.keepId = spec.keepId ?? null;
-            this._adoptModel(new DataModel(spec));
-            /** The ids chosen, or null. */
-            this.perspectiveId = perspective;
-            this.contextId = context ?? this.model.perspective(perspective)?.context ?? null;
-            /** The level the drawing on screen is of (where a drag is kept). */
-            this._drawnLevel = level;
-        }
-
-        // ===== A model saved as a file, kept, backed up =====
-
-        /** Its file formats: the data model's own. */
-        fileFormats() {
-            return [DataModelFileFormat.instance ??= new DataModelFileFormat()];
-        }
-
-        saveFormat() {
-            return this.fileFormats()[0];
-        }
-
-        /** The ModelsPart it is a tab of, or null. */
-        get modelsHost() {
-            return this.ctx?.models ?? null;
-        }
-
-        /** The page it is in. */
-        get document() {
-            return this.container?.ownerDocument ?? globalThis.document;
-        }
-
-        /** What its tab and the page title show: the file's name (or the model's), and • while changed. */
-        get fileLabel() {
-            return this.file.label;
-        }
-
-        /** The model as kept in this browser (ModelFile#keepEntry). */
-        keepEntry() {
-            return this.file.keepEntry();
-        }
-
-        /** Edit another model (one opened, imported or kept), from scratch: nothing chosen, nothing changed. */
-        replaceModel(model) {
-            this._adoptModel(model);
-            this.perspectiveId = null;
-            this.contextId = null;
-            if (!this.mounted) return;
-            // Not rendered again (that would add a second toolbar and canvas): the toolbar
-            // shows the new model's choices, and it is drawn. What was on screen is the
-            // other model's, so where its boxes were is not kept into this one.
-            this._drawnLevel = null;
-            this._changed();
-            this._redraw();
-        }
-
-        /** A model opened from a file in a host's new tab (as EditorPart does). */
-        onImported(model) {
-            return EditorPart.prototype.onImported.call(this, model);
-        }
-
-        /** The file or its saved state changed: a ModelsPart's tab follows it. */
-        onFileState() {
-            this.modelsHost?.fileStateChanged?.(this);
-        }
-
-        /** Edit `model`: every change of it shows (• and the title) and is kept. @private */
-        _adoptModel(model) {
-            this._unsubscribeEdits?.();
-            this.model = model;
-            model.markSaved();
-            this._unsubscribeEdits = model.onEdit(() => {
-                this.file.showState();
-                this.modelsHost?.modelEdited?.(this);
-            });
-        }
-
-        mount(host, ctx) {
-            const first = !this.mounted;
-            super.mount(host, ctx);
-            if (first) {
-                this.file.listen();
-                this.file.showState();
-            }
-        }
-
-        /**
-         * File ▸: Open…, Save, Save As…, then with a ModelsPart New model and Close
-         * model, and This browser ▸ (keeping and backups).
-         */
-        fileItems() {
-            const host = this.modelsHost;
-            return EditorPart.tidyMenu([
-                ...this.file.menuItems(),
-                ...(host ? [
-                    { separator: true },
-                    ...EditorPart.menuGroup('New', [{ label: 'New model', action: () => host.newModel() }, ...(host.baseItems?.() ?? [])]),
-                    { label: 'Duplicate model', action: () => host.duplicate(this) },
-                    { label: 'Close model', action: () => host.closeModel(this.id) },
-                    ...EditorPart.menuGroup('This browser', host.keepItems?.(this) ?? []),
-                ] : []),
-            ]);
-        }
-
-        /** Edit ▸: undo and redo (a merge is one step). */
-        editItems() {
-            const history = this.model.history;
-            return [
-                { label: history.canUndo ? `Undo ${history.undoLabel}` : 'Undo', disabled: !history.canUndo || undefined, action: () => { history.undo(); this._redraw(); } },
-                { label: history.canRedo ? `Redo ${history.redoLabel}` : 'Redo', disabled: !history.canRedo || undefined, action: () => { history.redo(); this._redraw(); } },
-            ];
-        }
-
-        /** Run a model-wide edit (a merge) as one undo step, then redraw. */
-        runModelEdit(command) {
-            if (!command) return null;
-            this.model.history.execute(command);
-            this._changed();
-            this._redraw();
-            return command;
-        }
-
-        /** The entities at the level shown (the concepts in the mapping view). */
-        get entities() {
-            return this.model.level(DataModel.otherView(this.level) ? 'conceptual' : this.level).entities;
-        }
-        get level() { return this.chartOptions.level; }
-        get notation() { return this.chartOptions.notation; }
-        /** The perspective chosen (DataModelPerspective), or null. */
-        get perspective() { return this.model.perspective(this.perspectiveId); }
-        /** The context chosen (DataModelContext), or null. */
-        get context() { return this.model.context(this.contextId); }
-
-        /** Show another level ('conceptual', 'logical', 'physical'), or how they map ('mapping'). */
-        setLevel(level) {
-            this.chartOptions.level = level;
-            this._redraw();
-        }
-
-        /** Draw the model in another notation ('chen', 'crowsfoot', 'uml'). */
-        setNotation(notation) {
-            this.chartOptions.notation = notation;
-            this._redraw();
-        }
-
-        /** See the model through a perspective (an id; null: the whole schema), in the context it is read in, if it names one. */
-        setPerspective(id) {
-            this.perspectiveId = id || null;
-            const own = this.perspective?.context;
-            if (own) this.contextId = own;
-            this._redraw();
-        }
-
-        /** Read the model in a context (an id; null: the schema's own descriptions). */
-        setContext(id) {
-            this.contextId = id || null;
-            this._redraw();
-        }
-
-        /** What is drawn: the perspective's view of the level (or the mapping) in the context (DataModel#view), in the notation. */
-        drawOptions() {
-            return {
-                ...this.chartOptions,
-                ...this.model.view({ perspective: this.perspectiveId, context: this.contextId, level: this.level }),
-                ...(this.level === DataModel.LANDSCAPE && { onNodeDoubleClick: (node) => this.openServiceDomain(ServiceLandscape.serviceDomainOf(node.id)) }),
-                ...(this.editsLevel && this.editingOptions()),
-                ...(this.level === DataModel.MAPPING && this.lineageOptions()),
-            };
-        }
-
-        /**
-         * Show an entity's lineage: the mapping view, what it realises and what
-         * realises it (DataModel#lineage) as they are, the rest greyed.
-         */
-        showLineage(level, id) {
-            this.lineageFocus = { level, id };
-            this.setLevel(DataModel.MAPPING);
-        }
-
-        /**
-         * In the mapping view: an entity's lineage picked out (`lineageFocus`), and
-         * its menus to show another's or show all again.
-         */
-        lineageOptions() {
-            const view = {};
-            const focus = this.lineageFocus;
-            if (focus) {
-                const { up, down } = this.model.lineage(focus.level, focus.id);
-                const on = new Set([`${focus.level}:${focus.id}`, ...[...up, ...down].map(({ level, entity }) => `${level}:${entity.id}`)]);
-                const drawn = this.model.view({ perspective: this.perspectiveId, context: this.contextId, level: DataModel.MAPPING });
-                view.entities = drawn.entities.map(e => (on.has(e.id) ? e : { ...e, color: '#f3f4f6' }));
-                view.links = drawn.links.map(l => (on.has(l.source) && on.has(l.target) ? l : { ...l, color: '#e5e7eb' }));
-            }
-            const split = (nodeId) => { const i = String(nodeId).indexOf(':'); return [nodeId.slice(0, i), nodeId.slice(i + 1)]; };
-            return {
-                ...view,
-                contextMenuItems: [{ label: 'Show lineage', action: (node) => { const [level, id] = split(node.id); this.showLineage(level, id); } }],
-                canvasContextMenuItems: [{ label: 'Show all', action: () => { this.lineageFocus = null; this._redraw(); } }],
-            };
-        }
-
-        /** Whether what is shown is a level of the schema (so its entities and relationships can be edited here). */
-        get editsLevel() {
-            return !DataModel.otherView(this.level);
-        }
-
-        /**
-         * At a level of the schema: double-click an entity or a relationship to
-         * edit it; right-click one to edit or delete it, or the canvas for a new
-         * entity there or a new relationship. (These stand in for graphDiagram's
-         * own, which change only the drawing.)
-         */
-        editingOptions() {
-            const relationshipOf = (drawn) => this.model.relationshipIndex(this.level, drawn);
-            const isEntity = (node) => !!this.model.level(this.level).entity(node.id);
-            return {
-                onNodeDoubleClick: (node) => (isEntity(node) ? this.editEntity(node.id) : this.editRelationship(relationshipOf(node))),
-                onEdgeDoubleClick: (edge) => this.editRelationship(relationshipOf(edge)),
-                contextMenuItems: [
-                    { label: 'Edit…', action: (node) => (isEntity(node) ? this.editEntity(node.id) : this.editRelationship(relationshipOf(node))) },
-                    { label: 'Delete', action: (node) => (isEntity(node) ? this.removeEntity(node.id) : this.removeRelationship(relationshipOf(node))) },
-                    { label: 'Show lineage', action: (node) => { if (isEntity(node)) this.showLineage(this.level, node.id); } },
-                ],
-                edgeContextMenuItems: [
-                    { label: 'Edit relationship…', action: (edge) => this.editRelationship(relationshipOf(edge)) },
-                    { label: 'Delete relationship', action: (edge) => this.removeRelationship(relationshipOf(edge)) },
-                ],
-                canvasContextMenuItems: [
-                    { label: `New ${this.levelInfo.entityNoun.toLowerCase()} here…`, action: (subject, engine, point) => this.editEntity(null, point) },
-                    { label: 'New relationship…', action: () => this.editRelationship(null) },
-                ],
-            };
-        }
-
-        /** The level shown, as DataModelNotation has it (its nouns, its dialogs' fields). */
-        get levelInfo() {
-            return DataModelNotation.level(this.level);
-        }
-
-        /**
-         * An entity's dialog at the level shown (none: a new one, placed at
-         * `point` or below the others): its level's fields (name, definition, and
-         * at the logical and physical levels its attributes as a table). Saved, it
-         * is one undo step.
-         */
-        editEntity(id, point = null) {
-            if (!this.editsLevel) return null;
-            const info = this.levelInfo;
-            const schema = this.model.level(this.level);
-            const entity = id ? schema.entity(id) : null;
-            if (id && !entity) return null;
-            const scheme = this.model.classificationScheme;
-            const context = { typeNames: this.model.dataTypes.map(t => t.name), sensitivities: scheme.levels.map(l => l.name), categories: scheme.categories };
-            const title = entity ? `${info.entityNoun}: ${entity.name}` : `New ${info.entityNoun.toLowerCase()}`;
-            return this._dialog(title, info.entityFields(entity, context), (values) => {
-                const spec = info.entitySpecFrom(values, entity);
-                if (!entity) Object.assign(spec, point ?? this._freeSpot(schema));
-                this.runModelEdit(this.model.saveEntityCommand(this.level, id, spec));
-            });
-        }
-
-        /** Where a new entity goes with no point given: below what is there. @private */
-        _freeSpot(schema) {
-            const ys = schema.entities.map(e => e.y).filter(Number.isFinite);
-            return { x: 160, y: (ys.length ? Math.max(...ys) : 0) + 160 };
-        }
-
-        removeEntity(id) {
-            if (!this.editsLevel || !this.model.level(this.level).entity(id)) return null;
-            return this.runModelEdit(this.model.removeEntityCommand(this.level, id));
-        }
-
-        /** A relationship's dialog at the level shown (`index` null or -1: a new one); saved, one undo step. */
-        editRelationship(index) {
-            if (!this.editsLevel) return null;
-            const info = this.levelInfo;
-            const schema = this.model.level(this.level);
-            const relationship = index == null || index < 0 ? null : schema.relationships[index];
-            if (!schema.entities.length) return null;
-            const title = relationship ? `Relationship: ${relationship.name || `${relationship.source} – ${relationship.target}`}` : 'New relationship';
-            return this._dialog(title, info.relationshipFields(schema.entities, relationship), (values) => {
-                this.runModelEdit(this.model.saveRelationshipCommand(this.level, relationship ? index : null, info.relationshipSpecFrom(values, relationship)));
-            }, ({ source, target }) => (source && target ? null : 'Choose both ends'));
-        }
-
-        removeRelationship(index) {
-            if (!this.editsLevel || index == null || index < 0) return null;
-            return this.runModelEdit(this.model.removeRelationshipCommand(this.level, index));
-        }
-
-        /** See the model through a service domain (an id), at the logical level, where its business objects are. */
-        openServiceDomain(id) {
-            if (!this.model.perspective(id)) return;
-            this.chartOptions.level = 'logical';
-            this.setPerspective(id);
-        }
-
-        render() {
-            Object.assign(this.container.style, { display: 'flex', flexDirection: 'column', height: '100%' });
-            const toolbar = this.container.appendChild(el({}));
-            super.render();
-            Object.assign(this.canvasHost.style, { flex: '1 1 auto', minHeight: '0', height: 'auto' });
-            this.menuBar = new MenuBar({ container: toolbar, items: this.menuBarItems(), document: this.container.ownerDocument }).render();
-        }
-
-        /**
-         * Model ▸ (perspectives and contexts of one's own), Perspective and Context
-         * (when the model has any; the context's scope beside them), Level (each
-         * level from DataModelNotation, then Mapping) and Notation, and Export ▸.
-         */
-        menuBarItems() {
-            const { perspectives, contexts } = this.model;
-            const host = this.modelsHost;
-            return [
-                new ToolbarMenu('File', () => this.fileItems()),
-                new ToolbarMenu('Edit', () => this.editItems()),
-                ...(host ? [new ToolbarMenu('Tools', () => host.toolItems(this))] : []),
-                new ToolbarMenu('Model', () => this.modelItems()),
-                ...(perspectives.length ? [new ToolbarSelect('Perspective',
-                    () => [['', 'Whole schema'], ...this.model.perspectives.map(p => [p.id, p.constructor === DataModelPerspective ? p.name : `${p.name} (${p.constructor.kindLabel.toLowerCase()})`, p.description])],
-                    () => this.perspectiveId ?? '', (v) => this.setPerspective(v))] : []),
-                ...(contexts.length ? [
-                    new ToolbarSelect('Context',
-                        () => [['', 'None'], ...this.model.contexts.map(c => [c.id, c.name, c.description])],
-                        () => this.contextId ?? '', (v) => this.setContext(v)),
-                    new ToolbarText(() => this.context?.scope ?? ''),
-                ] : []),
-                new ToolbarSelect('Level', () => [
-                    ...DataModelNotation.levels().map(l => [l.name, l.label, l.description]),
-                    ...DataModel.OTHER_VIEWS.filter(v => v.offered(this.model) || v.name === this.level).map(v => [v.name, v.label, v.description]),
-                ], () => this.level, (v) => this.setLevel(v)),
-                new ToolbarSelect('Notation', () => DataModelNotation.notations().map(n => [n.name, n.label]), () => this.notation, (v) => this.setNotation(v)),
-                new ToolbarMenu('Export', () => this.exportItems()),
-            ];
-        }
-
-        /** Model ▸: make, change or remove a perspective or a context (the one chosen). */
-        modelItems() {
-            return [
-                { label: `New ${this.editsLevel ? this.levelInfo.entityNoun.toLowerCase() : 'entity'}…`, disabled: !this.editsLevel || undefined, action: () => this.editEntity(null) },
-                { label: 'New relationship…', disabled: !this.editsLevel || !this.model.level(this.level).entities.length || undefined, action: () => this.editRelationship(null) },
-                { separator: true },
-                { label: 'New perspective…', action: () => this.editPerspective(null) },
-                { label: 'New service domain…', action: () => this.editPerspective(null, ServiceDomain) },
-                { label: 'New classification lens…', action: () => this.editPerspective(null, ClassificationLens) },
-                { label: 'Read service domains from a BIAN landscape…', action: () => this.readLandscape() },
-                { label: 'Read a BIAN service domain (semantic API)…', action: () => this.readSemanticApi() },
-                { label: 'Edit perspective…', disabled: !this.perspective || undefined, action: () => this.editPerspective(this.perspective) },
-                { label: 'Delete perspective', disabled: !this.perspective || undefined, action: () => this.removePerspective(this.perspectiveId) },
-                { separator: true },
-                ...EditorPart.menuGroup('Data types', this.dataTypeItems()),
-                { separator: true },
-                { label: 'New context…', action: () => this.editContext(null) },
-                { label: 'Edit context…', disabled: !this.context || undefined, action: () => this.editContext(this.context) },
-                { label: 'Delete context', disabled: !this.context || undefined, action: () => this.removeContext(this.contextId) },
-                { separator: true },
-                { label: 'Check model…', action: () => this.checkModel() },
-                { label: 'Scorecard…', action: () => this.scoreModel() },
-                ...EditorPart.menuGroup('Naming standard', this.namingItems()),
-                { label: 'Classification scheme…', action: () => this.editClassificationScheme() },
-            ];
-        }
-
-        /**
-         * Service domains from BIAN's published service landscape (an ArchiMate
-         * model: an Archi file or the Exchange Format; BianLandscapeReader), as one
-         * undo step (DataModel#serviceDomainsCommand); then the landscape is shown.
-         * @param {Object} [options] - As readInto's, and `reader` (a BianLandscapeReader)
-         * @returns {Promise<Command|null>}
-         */
-        readLandscape({ reader = new BianLandscapeReader(), ...options } = {}) {
-            let found = 0;
-            return this.readInto({
-                ...options, accept: '.archimate,.xml', what: 'the landscape',
-                command: (bytes, name) => {
-                    const specs = reader.read(BianLandscapeReader.parse(bytes));
-                    found = specs.length;
-                    return this.model.serviceDomainsCommand(specs, `"${name}"`);
-                },
-                nothing: (name) => (found
-                    ? `"${name}" brings nothing new: its ${found} service domain${found === 1 ? ' is' : 's are'} here as ${found === 1 ? 'it is' : 'they are'}.`
-                    : `"${name}" has no service domains (Capabilities with none inside them).`),
-                then: () => { this.chartOptions.level = DataModel.LANDSCAPE; this.perspectiveId = null; },
-            });
-        }
-
-        /**
-         * A service domain from one of BIAN's semantic APIs (an OpenAPI file, YAML
-         * or JSON; BianSemanticApiReader): its control record and behaviour
-         * qualifiers as logical entities, the schemas they use as data types, and
-         * the service domain, as one undo step (DataModel#bringCommand); then the
-         * model is seen through it at the logical level. An entity the model has
-         * by name stays as it is and is used.
-         * @param {Object} [options] - As readInto's, and `depth` (BianSemanticApiReader's)
-         * @returns {Promise<Command|null>}
-         */
-        readSemanticApi({ depth = 1, ...options } = {}) {
-            let read = null;
-            return this.readInto({
-                ...options, accept: '.yaml,.yml,.json', what: 'the semantic API',
-                command: (bytes, name) => {
-                    const reader = new BianSemanticApiReader({ depth, entityNames: this.model.level('logical').entities.map(e => e.name) });
-                    read = reader.read(BianSemanticApiReader.parse(new TextDecoder().decode(bytes)));
-                    const [sd] = read.serviceDomains;
-                    return this.model.bringCommand(read, `Read ${sd.name} from "${name}"`);
-                },
-                nothing: (name) => `"${name}" brings nothing the model does not have.`,
-                then: () => {
-                    // The service domain is the one here of its id or name (bringCommand keeps it), else the new one.
-                    const [sd] = read.serviceDomains;
-                    const here = this.model.perspective(sd.id) ?? this.model.perspectives.find(p => p.name.toLowerCase() === sd.name.toLowerCase());
-                    this.chartOptions.level = 'logical';
-                    this.perspectiveId = here?.id ?? sd.id;
-                },
-            });
-        }
-
-        /**
-         * Ask for a file, make a command from its bytes, and run it as one undo
-         * step; a file that cannot be read, or brings nothing, is reported.
-         * @param {Object} how
-         * @param {string} how.accept - The file chooser's filter
-         * @param {string} how.what - What is read, for the report ('the landscape')
-         * @param {(bytes: Uint8Array, name: string) => Command|null} how.command
-         * @param {(name: string) => string} how.nothing - The report when the command is null
-         * @param {() => void} [how.then] - What to show once it is run (before the redraw)
-         * @param {(accept: string) => Promise<File|null>} [how.chooseFile]
-         * @param {(message: string) => void} [how.report]
-         * @returns {Promise<Command|null>}
-         */
-        async readInto({ accept, what, command: make, nothing, then = () => {}, chooseFile = null, report = null }) {
-            const doc = this.container?.ownerDocument ?? globalThis.document;
-            const tell = report ?? ((message) => (doc.defaultView ?? globalThis).alert(message));
-            const file = await (chooseFile ?? ((filter) => pickFile(filter, doc)))(accept);
-            if (!file) return null;
-            let command;
-            try {
-                command = make(new Uint8Array(await file.arrayBuffer()), file.name);
-            } catch (err) {
-                tell(`Could not read ${what}: ${err.message}`);
-                return null;
-            }
-            if (!command) {
-                tell(nothing(file.name));
-                return null;
-            }
-            then();
-            this.runModelEdit(command);
-            return command;
-        }
-
-        /**
-         * The Data Model Scorecard (ModelScorecard): each category as the model
-         * measures it, a reviewer's score and note, its weight; the total in the
-         * title. Saved, the reviews and weights are kept (one undo step).
-         */
-        scoreModel() {
-            const card = this.model.scored();
-            const results = card.results();
-            const { score, coverage } = card.total(results);
-            const title = score == null ? 'Scorecard: nothing scored yet' : `Scorecard: ${score} of 100 (${coverage}% of the weight scored)`;
-            return this._dialog(title, card.fields(results), (values) => {
-                this.runModelEdit(this.model.scorecardCommand(ModelScorecard.specFrom(values)));
-            }, () => null);
-        }
-
-        /** The classification scheme's dialog (its sensitivity levels in order, its categories); saved, one undo step. */
-        editClassificationScheme() {
-            return this._dialog('Classification scheme', ClassificationScheme.fields(this.model.classificationScheme), (values) => {
-                this.runModelEdit(this.model.classificationSchemeCommand(ClassificationScheme.specFrom(values)));
-            }, (values) => (ClassificationScheme.specFrom(values).levels.length ? null : 'Give it at least one level'));
-        }
-
-        /** Model ▸ Naming standard ▸: edit it, start from the conventional one, or remove it (Check model… checks names against it). */
-        namingItems() {
-            const has = !!this.model.namingStandard;
-            return [
-                { label: has ? 'Edit…' : 'Set…', action: () => this.editNamingStandard() },
-                ...(has ? [] : [{ label: 'Use the conventional one', action: () => this.runModelEdit(this.model.namingStandardCommand(NamingStandard.CONVENTIONAL)) }]),
-                ...(has ? [{ label: 'Remove', action: () => this.runModelEdit(this.model.namingStandardCommand(null)) }] : []),
-            ];
-        }
-
-        /**
-         * The naming standard's dialog (NamingStandard.fields: a rule per level for
-         * entities and attributes); saved, one undo step. A standard that asks
-         * nothing is none.
-         */
-        editNamingStandard() {
-            return this._dialog('Naming standard', NamingStandard.fields(this.model.namingStandard), (values) => {
-                const spec = NamingStandard.specFrom(values);
-                const asks = Object.values(spec).some(kinds => Object.values(kinds).some(r => r.style || r.classWords.length || r.maxLength || Object.keys(r.abbreviations).length));
-                this.runModelEdit(this.model.namingStandardCommand(asks ? spec : null));
-            }, () => null);
-        }
-
-        /** Model ▸ Data types ▸: a new one of each kind, then each to change or remove. */
-        dataTypeItems() {
-            const types = this.model.dataTypes;
-            return [
-                ...[EnumerationType, StructuredType, DataType].map(Kind => ({ label: `New ${Kind.kindLabel.toLowerCase()}…`, action: () => this.editDataType(null, Kind) })),
-                ...(types.length ? [
-                    { separator: true },
-                    { label: 'Show data types', action: () => this.setLevel(DataModel.DATA_TYPES) },
-                    { label: 'Edit', items: types.map(t => ({ label: `${t.name} (${t.constructor.kindLabel.toLowerCase()})…`, action: () => this.editDataType(t) })) },
-                    { label: 'Delete', items: types.map(t => ({ label: t.name, action: () => this.removeDataType(t.id) })) },
-                ] : []),
-            ];
-        }
-
-        /** A dialog making a data type of a kind (none given) or changing one (its kind's fields); applied, the data types are shown. */
-        editDataType(type, Kind = type?.constructor ?? DataType) {
-            const title = type ? `${Kind.kindLabel}: ${type.name}` : `New ${Kind.kindLabel.toLowerCase()}`;
-            return this._dialog(title, Kind.fields(this.model, type), (values) => {
-                const spec = Kind.specFrom(values, this.model, type);
-                if (type) this.model.updateDataType(type.id, spec); else this.model.addDataType(spec);
-                this.chartOptions.level = DataModel.DATA_TYPES;
-                this._changed();
-                this._redraw();
-            });
-        }
-
-        removeDataType(id) {
-            this.model.removeDataType(id);
-            if (this.level === DataModel.DATA_TYPES && !this.model.dataTypes.length) this.chartOptions.level = 'logical';
-            this._changed();
-            this._redraw();
-        }
-
-        /** Check the model (DataModelChecker) and list the findings; choosing one shows it (revealFinding). Returns the findings. */
-        checkModel() {
-            const findings = this.model.checker().run();
-            new ModelCheckDialog({ findings, onReveal: (finding) => this.revealFinding(finding), document: this.document }).open();
-            return findings;
-        }
-
-        /** 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') {
-                this.chartOptions.level = 'logical';
-                this.setPerspective(finding.ids[0]);
-            } else if (finding.kind === 'mapping') {
-                this.setLevel(DataModel.MAPPING);
-            } else if (finding.kind === 'data-type') {
-                this.setLevel(DataModel.DATA_TYPES);
-            } else if (finding.level) {
-                this.setLevel(finding.level);
-            }
-            this.menuBar?.render?.();
-        }
-
-        /** A dialog making a perspective (none given) or changing one (DataModelPerspective.fields); applied, it is the one seen through. */
-        editPerspective(perspective, Kind = perspective?.constructor ?? DataModelPerspective) {
-            const title = perspective ? `${Kind.kindLabel}: ${perspective.name}` : `New ${Kind.kindLabel.toLowerCase()}`;
-            return this._dialog(title, Kind.fields(this.model, perspective), (values) => {
-                const spec = Kind.specFrom(values, this.model, perspective);
-                const saved = perspective ? this.model.updatePerspective(perspective.id, spec) : this.model.addPerspective(spec);
-                this._changed();
-                this.setPerspective(saved.id);
-            });
-        }
-
-        /** A dialog making a context (none given) or changing one (DataModelContext.fields); applied, it is the one read in. */
-        editContext(context) {
-            return this._dialog(context ? `Context: ${context.name}` : 'New context', DataModelContext.fields(this.model, context), (values) => {
-                const spec = DataModelContext.specFrom(values, this.model, context);
-                const saved = context ? this.model.updateContext(context.id, spec) : this.model.addContext(spec);
-                this._changed();
-                this.setContext(saved.id);
-            });
-        }
-
-        removePerspective(id) {
-            this.model.removePerspective(id);
-            this._changed();
-            this.setPerspective(null);
-        }
-
-        removeContext(id) {
-            this.model.removeContext(id);
-            this._changed();
-            this.setContext(null);
-        }
-
-        /** Open a form (a name is needed). @private */
-        _dialog(title, fields, apply, validate = ({ name }) => ((name ?? '').trim() ? null : 'Give it a name')) {
-            return new FormDialog({
-                title, fields, submitLabel: 'Save', idPrefix: 'data-model-',
-                document: this.container?.ownerDocument ?? globalThis.document,
-                validate, onApply: apply,
-            }).open();
-        }
-
-        /** The perspectives or contexts changed: the toolbar shows them anew. @private */
-        _changed() {
-            if (this.menuBar) this.menuBar.items = this.menuBarItems();
-            this.menuBar?.render?.();
-        }
-
-        /** Export ▸: the picture, as PNG or SVG, named after the model. */
-        exportItems() {
-            const name = this.model.name || this.title || 'data-model';
-            return [
-                { label: 'Image (PNG)', action: () => downloadPng(this.canvasHost, { name }) },
-                { label: 'Image (SVG)', action: () => downloadSvg(this.canvasHost, { name }) },
-                { separator: true },
-                { label: 'SQL DDL (physical level)', action: () => this.exportDdl() },
-            ];
-        }
-
-        /** The physical level as SQL DDL (SqlDdlFileFormat), downloaded as the model's name. Returns the file. */
-        exportDdl({ download = (file, fileName) => downloadBlob(new (this.document.defaultView ?? globalThis).Blob([file.data], { type: file.mimeType }), fileName) } = {}) {
-            const file = new SqlDdlFileFormat().export(this.model);
-            download(file, `${String(this.model.name || this.title || 'model').replace(/[^A-Za-z0-9._-]+/g, '-')}.sql`);
-            return file;
-        }
-
-        /** Redraw now (a choice made), when there is somewhere to draw. @private */
-        _redraw() {
-            if (this.canvasHost) this._draw();
-            // Its toolbar shows what is drawn, however it was chosen (a finding, a lineage, a service domain opened).
-            this.menuBar?.refresh?.();
-        }
-
-        /**
-         * Keep where the boxes and notes were dragged (the drawing is made anew each
-         * time): on the level shown, or in the mapping view's own layout. Then draw.
-         */
-        _draw() {
-            if (this._keepPlaces()) this.model.edited();   // a box or note moved is a change, kept and saved
-            this._drawnLevel = this.level;
-            super._draw();
-        }
-
-        /**
-         * Keep where the drawing on screen has its boxes and notes: on the level
-         * it shows, or in the mapping view's layout. Returns whether any moved. @private
-         */
-        _keepPlaces() {
-            const pos = this.engine?._graph?.pos;
-            if (!pos || !this._drawnLevel) return false;
-            let moved = false;
-            const place = (p, before, put) => {
-                if (!p || (before && before.x === p.x && before.y === p.y)) return;
-                put({ x: p.x, y: p.y });
-                moved = true;
-            };
-            const other = DataModel.otherView(this._drawnLevel);
-            if (other && !other.keepsPlaces) return false;   // laid out by its structure, anew each time
-            if (other) {
-                for (const [id, p] of pos) {
-                    if (id.includes(':')) place(p, this.model.mappingLayout[id], (at) => { this.model.mappingLayout[id] = at; });
-                }
-                return moved;
-            }
-            for (const entity of this.model.level(this._drawnLevel).entities) {
-                place(pos.get(entity.id), entity, (at) => Object.assign(entity, at));
-            }
-            for (const rule of this.model.contexts.flatMap(c => c.constraints)) {
-                const p = pos.get(rule.id);
-                const before = this.model.notePlace(this._drawnLevel, rule);
-                place(p, Number.isFinite(before.x) ? before : null, (at) => this.model.placeNote(this._drawnLevel, rule, at));
-            }
-            return moved;
-        }
-
-        dispose() {
-            this._unsubscribeEdits?.();
-            this.file.restoreTitle();
-            this.menuBar?.dispose?.();
-            super.dispose();
-        }
-
-        /** The spec again: the model (with where its boxes are), what is chosen, and the other options. */
-        serialize() {
-            const { options, chartType, ...base } = super.serialize();
-            const { level, notation, ...rest } = options;
-            return {
-                ...base, ...this.model.toJSON(),
-                perspective: this.perspectiveId, context: this.contextId, level, notation, options: rest,
-            };
-        }
+    /**
+     * ModelHosted — what a part that edits one model as a whole (an
+     * EditableModel: DataModelPart, RequirementsPart) needs to be one of a
+     * ModelsPart's models, as an EditorPart is: its file (ModelFile: Open…, Save,
+     * Save As…, • while changed, asking before the page is left), kept by the
+     * host (`keepId`, `keepEntry`), its File menu (New, Duplicate, Close model,
+     * where models are kept, Import of what other tools wrote), Undo and Redo,
+     * running a model-wide edit (a merge, a proposal taken) as one undo step,
+     * and reading a file into the model as one (readInto).
+     *
+     * A mixin, for parts on different bases (a ChartPart, a plain Part):
+     * `class DataModelPart extends ModelHosted(ChartPart)`. The part gives
+     * `fileFormats()` (its own first: what it saves as), and `afterModelEdit()`
+     * to show an edit (redraw).
+     */
+    const ModelHosted = (Base) => class extends Base {
+        constructor(spec = {}) {
+            super(spec);
+            /** The file it is open from and saved to. */
+            this.file = new ModelFile(this);
+            /** Its id among the models kept by its host, or null. */
+            this.keepId = spec.keepId ?? null;
+        }
+
+        /** Its file formats: none here. @abstract */
+        fileFormats() {
+            return [];
+        }
+
+        /** What a new file is saved as: its first format. */
+        saveFormat() {
+            return this.fileFormats()[0];
+        }
+
+        /** The ModelsPart it is a tab of, or null. */
+        get modelsHost() {
+            return this.ctx?.models ?? null;
+        }
+
+        /** The page it is in. */
+        get document() {
+            return this.container?.ownerDocument ?? globalThis.document;
+        }
+
+        /** What its tab and the page title show: the file's name (or the model's), and • while changed. */
+        get fileLabel() {
+            return this.file.label;
+        }
+
+        /** The model as kept by its host (ModelFile#keepEntry). */
+        keepEntry() {
+            return this.file.keepEntry();
+        }
+
+        /** A model opened from a file: in a host's new tab, else in place of this one (as EditorPart does). */
+        onImported(model) {
+            return EditorPart.prototype.onImported.call(this, model);
+        }
+
+        /** The file or its saved state changed: a ModelsPart's tab follows it. */
+        onFileState() {
+            this.modelsHost?.fileStateChanged?.(this);
+        }
+
+        /** Edit `model`: as saved, and every change of it shows (• and the title) and is kept. @protected */
+        _adoptModel(model) {
+            this._unsubscribeEdits?.();
+            this.model = model;
+            model.markSaved();
+            this._unsubscribeEdits = model.onEdit(() => {
+                this.file.showState();
+                this.modelsHost?.modelEdited?.(this);
+            });
+        }
+
+        mount(host, ctx) {
+            const first = !this.mounted;
+            super.mount(host, ctx);
+            if (first) {
+                this.file.listen();
+                this.file.showState();
+            }
+        }
+
+        /** Show an edit of the model (a redraw): a subclass's. */
+        afterModelEdit() {}
+
+        /** Run a model-wide edit (a merge) as one undo step, then show it. */
+        runModelEdit(command) {
+            if (!command) return null;
+            this.model.history.execute(command);
+            this.afterModelEdit();
+            return command;
+        }
+
+        /**
+         * File ▸: Open…, Save, Save As…, Import of what other tools wrote (its
+         * formats that only read), then with a ModelsPart New model, Duplicate,
+         * Close model, and where models are kept ▸.
+         */
+        fileItems() {
+            const host = this.modelsHost;
+            return EditorPart.tidyMenu([
+                ...this.file.menuItems(),
+                ...EditorPart.menuGroup('Import', this.importItems(), { prefix: true }),
+                ...(host ? [
+                    { separator: true },
+                    ...EditorPart.menuGroup('New', [{ label: 'New model', action: () => host.newModel() }, ...(host.baseItems?.() ?? [])]),
+                    { label: 'Duplicate model', action: () => host.duplicate(this) },
+                    { label: 'Close model', action: () => host.closeModel(this.id) },
+                    ...EditorPart.menuGroup(host.keptWhere ?? 'This browser', host.keepItems?.(this) ?? []),
+                ] : []),
+            ]);
+        }
+
+        /** 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,
+            });
+        }
+
+        /**
+         * Ask for a file, make a command from its bytes, and run it as one undo
+         * step; a file that cannot be read, or brings nothing, is reported.
+         * @param {Object} how
+         * @param {string} how.accept - The file chooser's filter
+         * @param {string} how.what - What is read, for the report ('the landscape')
+         * @param {(bytes: Uint8Array, name: string) => Command|null} how.command
+         * @param {(name: string) => string} how.nothing - The report when the command is null
+         * @param {() => void} [how.then] - What to show once it is run (before the redraw)
+         * @param {(accept: string) => Promise<File|null>} [how.chooseFile]
+         * @param {(message: string) => void} [how.report]
+         * @returns {Promise<Command|null>}
+         */
+        async readInto({ accept, what, command: make, nothing, then = () => {}, chooseFile = null, report = null }) {
+            const doc = this.container?.ownerDocument ?? globalThis.document;
+            const tell = report ?? ((message) => (doc.defaultView ?? globalThis).alert(message));
+            const file = await (chooseFile ?? ((filter) => pickFile(filter, doc)))(accept);
+            if (!file) return null;
+            let command;
+            try {
+                command = make(new Uint8Array(await file.arrayBuffer()), file.name);
+            } catch (err) {
+                tell(`Could not read ${what}: ${err.message}`);
+                return null;
+            }
+            if (!command) {
+                tell(nothing(file.name));
+                return null;
+            }
+            then();
+            this.runModelEdit(command);
+            return command;
+        }
+
+        /** Undo and Redo, each named by what it undoes (a merge is one step). */
+        undoItems() {
+            const history = this.model.history;
+            return [
+                { label: history.canUndo ? `Undo ${history.undoLabel}` : 'Undo', disabled: !history.canUndo || undefined, action: () => { history.undo(); this.afterModelEdit(); } },
+                { label: history.canRedo ? `Redo ${history.redoLabel}` : 'Redo', disabled: !history.canRedo || undefined, action: () => { history.redo(); this.afterModelEdit(); } },
+            ];
+        }
+
+        dispose() {
+            this._unsubscribeEdits?.();
+            this.file.restoreTitle();
+            super.dispose();
+        }
+    };
+
+    /**
+     * DataModelPart — a data model (DataModel, drawn by dataModelDiagram) in a
+     * pane: its conceptual, logical and physical levels, each its own schema, and
+     * how they map; seen through a perspective (whose concepts, under whose names)
+     * read in a context (what they mean here, the rules that hold, where and
+     * when), in a notation (Chen, Crow's Foot, UML). Its toolbar switches each
+     * of them, Level offering the views that are no level (DataModel.OTHER_VIEWS:
+     * Mapping, the levels side by side joined where they map; Service landscape,
+     * the service domains in their business areas and domains, a double-click
+     * seeing the model through one), and its Model menu makes, changes and removes
+     * perspectives and contexts and reads service domains from a BIAN landscape. Boxes and notes stay where they were dragged. Export ▸ saves the
+     * picture (PNG, SVG). The drawing, its sizing and redrawing on resize are
+     * ChartPart's.
+     *
+     * It is saved as a file (DataModelFileFormat, `.datamodel.json`) as an
+     * editor's model is (ModelHosted: ModelFile): File ▸ Open…, Save, Save As… (Ctrl+O, Ctrl+S),
+     * • while changed since, and asking before the page is left with changes
+     * unsaved. Hosted by a ModelsPart (`editorType: 'data-model'`) it is one of
+     * several models open, a tab each, and with that part's `keep` it is kept in
+     * this browser and backed up (File ▸ This browser), as the modeller's are.
+     *
+     * Spec: `{ id, type: 'data-model', title?, levels?, mappings?, mappingLayout?,
+     * perspectives?, contexts?, perspective?, context?, level?, notation?, options? }`
+     * — the model as DataModel takes it (or `entities`/`relationships` in the older
+     * one-entity form); `perspective`/`context` the ids chosen; `level` default
+     * 'logical' ('mapping' for the mapping view), `notation` default 'crowsfoot';
+     * `options` anything else dataModelDiagram takes (editable, resizable by default).
+     */
+    class DataModelPart extends ModelHosted(ChartPart) {
+        static type = 'data-model';
+
+        constructor(spec = {}) {
+            const { perspective = null, context = null, level = 'logical', notation = 'crowsfoot', options = {} } = spec;
+            super({ ...spec, chartType: 'dataModel', options: { editable: true, resizable: true, ...options, level, notation } });
+            this._adoptModel(new DataModel(spec));
+            /** The ids chosen, or null. */
+            this.perspectiveId = perspective;
+            this.contextId = context ?? this.model.perspective(perspective)?.context ?? null;
+            /** The level the drawing on screen is of (where a drag is kept). */
+            this._drawnLevel = level;
+        }
+
+        // ===== A model saved as a file, kept, backed up =====
+
+        /** Its file formats: the data model's own. */
+        fileFormats() {
+            return [DataModelFileFormat.instance ??= new DataModelFileFormat()];
+        }
+
+        /** Edit another model (one opened, imported or kept), from scratch: nothing chosen, nothing changed. */
+        replaceModel(model) {
+            this._adoptModel(model);
+            this.perspectiveId = null;
+            this.contextId = null;
+            if (!this.mounted) return;
+            // Not rendered again (that would add a second toolbar and canvas): the toolbar
+            // shows the new model's choices, and it is drawn. What was on screen is the
+            // other model's, so where its boxes were is not kept into this one.
+            this._drawnLevel = null;
+            this._drawnPlaces = null;
+            this._changed();
+            this._redraw();
+        }
+
+        /** Edit ▸: undo and redo (a merge is one step), and laying the level shown out again. */
+        editItems() {
+            return [
+                ...this.undoItems(),
+                ...(this.editsLevel ? [
+                    { separator: true },
+                    { label: 'Lay out', items: LAYOUTS.map(([kind, label]) => ({ label, action: () => this.runModelEdit(this.layoutCommand(kind)) })) },
+                ] : []),
+            ];
+        }
+
+        /**
+         * Lay the boxes of the level shown out again — what is drawn there (the
+         * perspective's), by one of the arrangement's layouts (LAYOUTS: grid,
+         * circle, trees, force-directed, by kind), its lines guiding the trees and
+         * the force. Where each box goes is kept in the model as a drag would be.
+         * One undo step; null on a view that is no level of the schema.
+         * @param {string} kind - A LAYOUTS key
+         */
+        layoutCommand(kind) {
+            if (!this.editsLevel) return null;
+            const level = this.level;
+            const view = this.model.view({ perspective: this.perspectiveId, context: this.contextId, level });
+            const notation = DataModelNotation.notation(this.notation);
+            const boxes = view.entities.map(e => {
+                const node = DataModelDiagram.buildNode({ ...e, x: Number.isFinite(e.x) ? e.x : 0, y: Number.isFinite(e.y) ? e.y : 0 }, { level, notation });
+                const b = DataModelDiagram.boxOf(node);
+                return { id: e.id, left: b.x0, top: b.y0, width: b.x1 - b.x0, height: b.y1 - b.y0, kind: e.role ?? e.kind ?? '' };
+            });
+            const placed = layout(kind, boxes, {
+                edges: (view.relationships ?? []).map(r => ({ source: r.source, target: r.target })),
+                categoryOf: (box) => box.kind,
+            });
+            const sizes = new Map(boxes.map(b => [b.id, b]));
+            const label = LAYOUTS.find(([k]) => k === kind)?.[1] ?? kind;
+            return this.model.editCommand(`Lay out: ${label}`, (model) => {
+                for (const p of placed) {
+                    const entity = model.level(level).entity(p.id), b = sizes.get(p.id);
+                    if (entity) Object.assign(entity, { x: Math.round(p.left + b.width / 2), y: Math.round(p.top + b.height / 2) });
+                }
+            });
+        }
+
+        /** An edit shown: the toolbar's choices anew, and drawn. */
+        afterModelEdit() {
+            this._changed();
+            this._redraw();
+        }
+
+        /** The entities at the level shown (the concepts in the mapping view). */
+        get entities() {
+            return this.model.level(DataModel.otherView(this.level) ? 'conceptual' : this.level).entities;
+        }
+        get level() { return this.chartOptions.level; }
+        get notation() { return this.chartOptions.notation; }
+        /** The perspective chosen (DataModelPerspective), or null. */
+        get perspective() { return this.model.perspective(this.perspectiveId); }
+        /** The context chosen (DataModelContext), or null. */
+        get context() { return this.model.context(this.contextId); }
+
+        /** Show another level ('conceptual', 'logical', 'physical'), or how they map ('mapping'). */
+        setLevel(level) {
+            this.chartOptions.level = level;
+            this._redraw();
+        }
+
+        /** Draw the model in another notation ('chen', 'crowsfoot', 'uml'). */
+        setNotation(notation) {
+            this.chartOptions.notation = notation;
+            this._redraw();
+        }
+
+        /** See the model through a perspective (an id; null: the whole schema), in the context it is read in, if it names one. */
+        setPerspective(id) {
+            this.perspectiveId = id || null;
+            const own = this.perspective?.context;
+            if (own) this.contextId = own;
+            this._redraw();
+        }
+
+        /** Read the model in a context (an id; null: the schema's own descriptions). */
+        setContext(id) {
+            this.contextId = id || null;
+            this._redraw();
+        }
+
+        /** What is drawn: the perspective's view of the level (or the mapping) in the context (DataModel#view), in the notation. */
+        drawOptions() {
+            return {
+                ...this.chartOptions,
+                ...this.model.view({ perspective: this.perspectiveId, context: this.contextId, level: this.level }),
+                ...(this.level === DataModel.LANDSCAPE && { onNodeDoubleClick: (node) => this.openServiceDomain(ServiceLandscape.serviceDomainOf(node.id)) }),
+                ...(this.editsLevel && this.editingOptions()),
+                ...(this.level === DataModel.MAPPING && this.lineageOptions()),
+            };
+        }
+
+        /**
+         * Show an entity's lineage: the mapping view, what it realises and what
+         * realises it (DataModel#lineage) as they are, the rest greyed.
+         */
+        showLineage(level, id) {
+            this.lineageFocus = { level, id };
+            this.setLevel(DataModel.MAPPING);
+        }
+
+        /**
+         * In the mapping view: an entity's lineage picked out (`lineageFocus`), and
+         * its menus to show another's or show all again.
+         */
+        lineageOptions() {
+            const view = {};
+            const focus = this.lineageFocus;
+            if (focus) {
+                const { up, down } = this.model.lineage(focus.level, focus.id);
+                const on = new Set([`${focus.level}:${focus.id}`, ...[...up, ...down].map(({ level, entity }) => `${level}:${entity.id}`)]);
+                const drawn = this.model.view({ perspective: this.perspectiveId, context: this.contextId, level: DataModel.MAPPING });
+                view.entities = drawn.entities.map(e => (on.has(e.id) ? e : { ...e, color: '#f3f4f6' }));
+                view.links = drawn.links.map(l => (on.has(l.source) && on.has(l.target) ? l : { ...l, color: '#e5e7eb' }));
+            }
+            const split = (nodeId) => { const i = String(nodeId).indexOf(':'); return [nodeId.slice(0, i), nodeId.slice(i + 1)]; };
+            return {
+                ...view,
+                contextMenuItems: [{ label: 'Show lineage', action: (node) => { const [level, id] = split(node.id); this.showLineage(level, id); } }],
+                canvasContextMenuItems: [{ label: 'Show all', action: () => { this.lineageFocus = null; this._redraw(); } }],
+            };
+        }
+
+        /** Whether what is shown is a level of the schema (so its entities and relationships can be edited here). */
+        get editsLevel() {
+            return !DataModel.otherView(this.level);
+        }
+
+        /**
+         * At a level of the schema: double-click an entity or a relationship to
+         * edit it; right-click one to edit or delete it, or the canvas for a new
+         * entity there or a new relationship. (These stand in for graphDiagram's
+         * own, which change only the drawing.)
+         */
+        editingOptions() {
+            const relationshipOf = (drawn) => this.model.relationshipIndex(this.level, drawn);
+            const isEntity = (node) => !!this.model.level(this.level).entity(node.id);
+            return {
+                onNodeDoubleClick: (node) => (isEntity(node) ? this.editEntity(node.id) : this.editRelationship(relationshipOf(node))),
+                onEdgeDoubleClick: (edge) => this.editRelationship(relationshipOf(edge)),
+                contextMenuItems: [
+                    { label: 'Edit…', action: (node) => (isEntity(node) ? this.editEntity(node.id) : this.editRelationship(relationshipOf(node))) },
+                    { label: 'Delete', action: (node) => (isEntity(node) ? this.removeEntity(node.id) : this.removeRelationship(relationshipOf(node))) },
+                    { label: 'Show lineage', action: (node) => { if (isEntity(node)) this.showLineage(this.level, node.id); } },
+                ],
+                edgeContextMenuItems: [
+                    { label: 'Edit relationship…', action: (edge) => this.editRelationship(relationshipOf(edge)) },
+                    { label: 'Delete relationship', action: (edge) => this.removeRelationship(relationshipOf(edge)) },
+                ],
+                canvasContextMenuItems: [
+                    { label: `New ${this.levelInfo.entityNoun.toLowerCase()} here…`, action: (subject, engine, point) => this.editEntity(null, point) },
+                    { label: 'New relationship…', action: () => this.editRelationship(null) },
+                ],
+            };
+        }
+
+        /** The level shown, as DataModelNotation has it (its nouns, its dialogs' fields). */
+        get levelInfo() {
+            return DataModelNotation.level(this.level);
+        }
+
+        /**
+         * An entity's dialog at the level shown (none: a new one, placed at
+         * `point` or below the others): its level's fields (name, definition, and
+         * at the logical and physical levels its attributes as a table). Saved, it
+         * is one undo step.
+         */
+        editEntity(id, point = null) {
+            if (!this.editsLevel) return null;
+            const info = this.levelInfo;
+            const schema = this.model.level(this.level);
+            const entity = id ? schema.entity(id) : null;
+            if (id && !entity) return null;
+            const scheme = this.model.classificationScheme;
+            const context = { typeNames: this.model.dataTypes.map(t => t.name), sensitivities: scheme.levels.map(l => l.name), categories: scheme.categories };
+            const title = entity ? `${info.entityNoun}: ${entity.name}` : `New ${info.entityNoun.toLowerCase()}`;
+            return this._dialog(title, info.entityFields(entity, context), (values) => {
+                const spec = info.entitySpecFrom(values, entity);
+                if (!entity) Object.assign(spec, point ?? this._freeSpot(schema));
+                this.runModelEdit(this.model.saveEntityCommand(this.level, id, spec));
+            });
+        }
+
+        /** Where a new entity goes with no point given: below what is there. @private */
+        _freeSpot(schema) {
+            const ys = schema.entities.map(e => e.y).filter(Number.isFinite);
+            return { x: 160, y: (ys.length ? Math.max(...ys) : 0) + 160 };
+        }
+
+        removeEntity(id) {
+            if (!this.editsLevel || !this.model.level(this.level).entity(id)) return null;
+            return this.runModelEdit(this.model.removeEntityCommand(this.level, id));
+        }
+
+        /** A relationship's dialog at the level shown (`index` null or -1: a new one); saved, one undo step. */
+        editRelationship(index) {
+            if (!this.editsLevel) return null;
+            const info = this.levelInfo;
+            const schema = this.model.level(this.level);
+            const relationship = index == null || index < 0 ? null : schema.relationships[index];
+            if (!schema.entities.length) return null;
+            const title = relationship ? `Relationship: ${relationship.name || `${relationship.source} – ${relationship.target}`}` : 'New relationship';
+            return this._dialog(title, info.relationshipFields(schema.entities, relationship), (values) => {
+                this.runModelEdit(this.model.saveRelationshipCommand(this.level, relationship ? index : null, info.relationshipSpecFrom(values, relationship)));
+            }, ({ source, target }) => (source && target ? null : 'Choose both ends'));
+        }
+
+        removeRelationship(index) {
+            if (!this.editsLevel || index == null || index < 0) return null;
+            return this.runModelEdit(this.model.removeRelationshipCommand(this.level, index));
+        }
+
+        /** See the model through a service domain (an id), at the logical level, where its business objects are. */
+        openServiceDomain(id) {
+            if (!this.model.perspective(id)) return;
+            this.chartOptions.level = 'logical';
+            this.setPerspective(id);
+        }
+
+        render() {
+            Object.assign(this.container.style, { display: 'flex', flexDirection: 'column', height: '100%' });
+            const toolbar = this.container.appendChild(el({}));
+            super.render();
+            Object.assign(this.canvasHost.style, { flex: '1 1 auto', minHeight: '0', height: 'auto' });
+            this.menuBar = new MenuBar({ container: toolbar, items: this.menuBarItems(), document: this.container.ownerDocument }).render();
+        }
+
+        /**
+         * Model ▸ (perspectives and contexts of one's own), Perspective and Context
+         * (when the model has any; the context's scope beside them), Level (each
+         * level from DataModelNotation, then Mapping) and Notation, and Export ▸.
+         */
+        menuBarItems() {
+            const { perspectives, contexts } = this.model;
+            const host = this.modelsHost;
+            return [
+                new ToolbarMenu('File', () => this.fileItems()),
+                new ToolbarMenu('Edit', () => this.editItems()),
+                ...(host ? [new ToolbarMenu('Tools', () => host.toolItems(this))] : []),
+                new ToolbarMenu('Model', () => this.modelItems()),
+                ...(perspectives.length ? [new ToolbarSelect('Perspective',
+                    () => [['', 'Whole schema'], ...this.model.perspectives.map(p => [p.id, p.constructor === DataModelPerspective ? p.name : `${p.name} (${p.constructor.kindLabel.toLowerCase()})`, p.description])],
+                    () => this.perspectiveId ?? '', (v) => this.setPerspective(v))] : []),
+                ...(contexts.length ? [
+                    new ToolbarSelect('Context',
+                        () => [['', 'None'], ...this.model.contexts.map(c => [c.id, c.name, c.description])],
+                        () => this.contextId ?? '', (v) => this.setContext(v)),
+                    new ToolbarText(() => this.context?.scope ?? ''),
+                ] : []),
+                new ToolbarSelect('Level', () => [
+                    ...DataModelNotation.levels().map(l => [l.name, l.label, l.description]),
+                    ...DataModel.OTHER_VIEWS.filter(v => v.offered(this.model) || v.name === this.level).map(v => [v.name, v.label, v.description]),
+                ], () => this.level, (v) => this.setLevel(v)),
+                new ToolbarSelect('Notation', () => DataModelNotation.notations().map(n => [n.name, n.label]), () => this.notation, (v) => this.setNotation(v)),
+                new ToolbarMenu('Export', () => this.exportItems()),
+            ];
+        }
+
+        /** Model ▸: make, change or remove a perspective or a context (the one chosen). */
+        modelItems() {
+            return [
+                { label: `New ${this.editsLevel ? this.levelInfo.entityNoun.toLowerCase() : 'entity'}…`, disabled: !this.editsLevel || undefined, action: () => this.editEntity(null) },
+                { label: 'New relationship…', disabled: !this.editsLevel || !this.model.level(this.level).entities.length || undefined, action: () => this.editRelationship(null) },
+                { separator: true },
+                { label: 'New perspective…', action: () => this.editPerspective(null) },
+                { label: 'New service domain…', action: () => this.editPerspective(null, ServiceDomain) },
+                { label: 'New classification lens…', action: () => this.editPerspective(null, ClassificationLens) },
+                { label: 'Read service domains from a BIAN landscape…', action: () => this.readLandscape() },
+                { label: 'Read a BIAN service domain (semantic API)…', action: () => this.readSemanticApi() },
+                { label: 'Edit perspective…', disabled: !this.perspective || undefined, action: () => this.editPerspective(this.perspective) },
+                { label: 'Delete perspective', disabled: !this.perspective || undefined, action: () => this.removePerspective(this.perspectiveId) },
+                { separator: true },
+                ...EditorPart.menuGroup('Data types', this.dataTypeItems()),
+                { separator: true },
+                { label: 'New context…', action: () => this.editContext(null) },
+                { label: 'Edit context…', disabled: !this.context || undefined, action: () => this.editContext(this.context) },
+                { label: 'Delete context', disabled: !this.context || undefined, action: () => this.removeContext(this.contextId) },
+                { separator: true },
+                { label: 'Check model…', action: () => this.checkModel() },
+                { label: 'Scorecard…', action: () => this.scoreModel() },
+                ...EditorPart.menuGroup('Naming standard', this.namingItems()),
+                { label: 'Classification scheme…', action: () => this.editClassificationScheme() },
+            ];
+        }
+
+        /**
+         * Service domains from BIAN's published service landscape (an ArchiMate
+         * model: an Archi file or the Exchange Format; BianLandscapeReader), as one
+         * undo step (DataModel#serviceDomainsCommand); then the landscape is shown.
+         * @param {Object} [options] - As readInto's, and `reader` (a BianLandscapeReader)
+         * @returns {Promise<Command|null>}
+         */
+        readLandscape({ reader = new BianLandscapeReader(), ...options } = {}) {
+            let found = 0;
+            return this.readInto({
+                ...options, accept: '.archimate,.xml', what: 'the landscape',
+                command: (bytes, name) => {
+                    const specs = reader.read(BianLandscapeReader.parse(bytes));
+                    found = specs.length;
+                    return this.model.serviceDomainsCommand(specs, `"${name}"`);
+                },
+                nothing: (name) => (found
+                    ? `"${name}" brings nothing new: its ${found} service domain${found === 1 ? ' is' : 's are'} here as ${found === 1 ? 'it is' : 'they are'}.`
+                    : `"${name}" has no service domains (Capabilities with none inside them).`),
+                then: () => { this.chartOptions.level = DataModel.LANDSCAPE; this.perspectiveId = null; },
+            });
+        }
+
+        /**
+         * A service domain from one of BIAN's semantic APIs (an OpenAPI file, YAML
+         * or JSON; BianSemanticApiReader): its control record and behaviour
+         * qualifiers as logical entities, the schemas they use as data types, and
+         * the service domain, as one undo step (DataModel#bringCommand); then the
+         * model is seen through it at the logical level. An entity the model has
+         * by name stays as it is and is used.
+         * @param {Object} [options] - As readInto's, and `depth` (BianSemanticApiReader's)
+         * @returns {Promise<Command|null>}
+         */
+        readSemanticApi({ depth = 1, ...options } = {}) {
+            let read = null;
+            return this.readInto({
+                ...options, accept: '.yaml,.yml,.json', what: 'the semantic API',
+                command: (bytes, name) => {
+                    const reader = new BianSemanticApiReader({ depth, entityNames: this.model.level('logical').entities.map(e => e.name) });
+                    read = reader.read(BianSemanticApiReader.parse(new TextDecoder().decode(bytes)));
+                    const [sd] = read.serviceDomains;
+                    return this.model.bringCommand(read, `Read ${sd.name} from "${name}"`);
+                },
+                nothing: (name) => `"${name}" brings nothing the model does not have.`,
+                then: () => {
+                    // The service domain is the one here of its id or name (bringCommand keeps it), else the new one.
+                    const [sd] = read.serviceDomains;
+                    const here = this.model.perspective(sd.id) ?? this.model.perspectives.find(p => p.name.toLowerCase() === sd.name.toLowerCase());
+                    this.chartOptions.level = 'logical';
+                    this.perspectiveId = here?.id ?? sd.id;
+                },
+            });
+        }
+
+        /**
+         * The Data Model Scorecard (ModelScorecard): each category as the model
+         * measures it, a reviewer's score and note, its weight; the total in the
+         * title. Saved, the reviews and weights are kept (one undo step).
+         */
+        scoreModel() {
+            const card = this.model.scored();
+            const results = card.results();
+            const { score, coverage } = card.total(results);
+            const title = score == null ? 'Scorecard: nothing scored yet' : `Scorecard: ${score} of 100 (${coverage}% of the weight scored)`;
+            return this._dialog(title, card.fields(results), (values) => {
+                this.runModelEdit(this.model.scorecardCommand(ModelScorecard.specFrom(values)));
+            }, () => null);
+        }
+
+        /** The classification scheme's dialog (its sensitivity levels in order, its categories); saved, one undo step. */
+        editClassificationScheme() {
+            return this._dialog('Classification scheme', ClassificationScheme.fields(this.model.classificationScheme), (values) => {
+                this.runModelEdit(this.model.classificationSchemeCommand(ClassificationScheme.specFrom(values)));
+            }, (values) => (ClassificationScheme.specFrom(values).levels.length ? null : 'Give it at least one level'));
+        }
+
+        /** Model ▸ Naming standard ▸: edit it, start from the conventional one, or remove it (Check model… checks names against it). */
+        namingItems() {
+            const has = !!this.model.namingStandard;
+            return [
+                { label: has ? 'Edit…' : 'Set…', action: () => this.editNamingStandard() },
+                ...(has ? [] : [{ label: 'Use the conventional one', action: () => this.runModelEdit(this.model.namingStandardCommand(NamingStandard.CONVENTIONAL)) }]),
+                ...(has ? [{ label: 'Remove', action: () => this.runModelEdit(this.model.namingStandardCommand(null)) }] : []),
+            ];
+        }
+
+        /**
+         * The naming standard's dialog (NamingStandard.fields: a rule per level for
+         * entities and attributes); saved, one undo step. A standard that asks
+         * nothing is none.
+         */
+        editNamingStandard() {
+            return this._dialog('Naming standard', NamingStandard.fields(this.model.namingStandard), (values) => {
+                const spec = NamingStandard.specFrom(values);
+                const asks = Object.values(spec).some(kinds => Object.values(kinds).some(r => r.style || r.classWords.length || r.maxLength || Object.keys(r.abbreviations).length));
+                this.runModelEdit(this.model.namingStandardCommand(asks ? spec : null));
+            }, () => null);
+        }
+
+        /** Model ▸ Data types ▸: a new one of each kind, then each to change or remove. */
+        dataTypeItems() {
+            const types = this.model.dataTypes;
+            return [
+                ...[EnumerationType, StructuredType, DataType].map(Kind => ({ label: `New ${Kind.kindLabel.toLowerCase()}…`, action: () => this.editDataType(null, Kind) })),
+                ...(types.length ? [
+                    { separator: true },
+                    { label: 'Show data types', action: () => this.setLevel(DataModel.DATA_TYPES) },
+                    { label: 'Edit', items: types.map(t => ({ label: `${t.name} (${t.constructor.kindLabel.toLowerCase()})…`, action: () => this.editDataType(t) })) },
+                    { label: 'Delete', items: types.map(t => ({ label: t.name, action: () => this.removeDataType(t.id) })) },
+                ] : []),
+            ];
+        }
+
+        /** A dialog making a data type of a kind (none given) or changing one (its kind's fields); applied, the data types are shown. */
+        editDataType(type, Kind = type?.constructor ?? DataType) {
+            const title = type ? `${Kind.kindLabel}: ${type.name}` : `New ${Kind.kindLabel.toLowerCase()}`;
+            return this._dialog(title, Kind.fields(this.model, type), (values) => {
+                const spec = Kind.specFrom(values, this.model, type);
+                if (type) this.model.updateDataType(type.id, spec); else this.model.addDataType(spec);
+                this.chartOptions.level = DataModel.DATA_TYPES;
+                this._changed();
+                this._redraw();
+            });
+        }
+
+        removeDataType(id) {
+            this.model.removeDataType(id);
+            if (this.level === DataModel.DATA_TYPES && !this.model.dataTypes.length) this.chartOptions.level = 'logical';
+            this._changed();
+            this._redraw();
+        }
+
+        /** Check the model (DataModelChecker) and list the findings; choosing one shows it (revealFinding). Returns the findings. */
+        checkModel() {
+            const findings = this.model.checker().run();
+            new ModelCheckDialog({ findings, onReveal: (finding) => this.revealFinding(finding), document: this.document }).open();
+            return findings;
+        }
+
+        /** 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') {
+                this.chartOptions.level = 'logical';
+                this.setPerspective(finding.ids[0]);
+            } else if (finding.kind === 'mapping') {
+                this.setLevel(DataModel.MAPPING);
+            } else if (finding.kind === 'data-type') {
+                this.setLevel(DataModel.DATA_TYPES);
+            } else if (finding.level) {
+                this.setLevel(finding.level);
+            }
+            this.menuBar?.render?.();
+        }
+
+        /** A dialog making a perspective (none given) or changing one (DataModelPerspective.fields); applied, it is the one seen through. */
+        editPerspective(perspective, Kind = perspective?.constructor ?? DataModelPerspective) {
+            const title = perspective ? `${Kind.kindLabel}: ${perspective.name}` : `New ${Kind.kindLabel.toLowerCase()}`;
+            return this._dialog(title, Kind.fields(this.model, perspective), (values) => {
+                const spec = Kind.specFrom(values, this.model, perspective);
+                const saved = perspective ? this.model.updatePerspective(perspective.id, spec) : this.model.addPerspective(spec);
+                this._changed();
+                this.setPerspective(saved.id);
+            });
+        }
+
+        /** A dialog making a context (none given) or changing one (DataModelContext.fields); applied, it is the one read in. */
+        editContext(context) {
+            return this._dialog(context ? `Context: ${context.name}` : 'New context', DataModelContext.fields(this.model, context), (values) => {
+                const spec = DataModelContext.specFrom(values, this.model, context);
+                const saved = context ? this.model.updateContext(context.id, spec) : this.model.addContext(spec);
+                this._changed();
+                this.setContext(saved.id);
+            });
+        }
+
+        removePerspective(id) {
+            this.model.removePerspective(id);
+            this._changed();
+            this.setPerspective(null);
+        }
+
+        removeContext(id) {
+            this.model.removeContext(id);
+            this._changed();
+            this.setContext(null);
+        }
+
+        /** Open a form (a name is needed). @private */
+        _dialog(title, fields, apply, validate = ({ name }) => ((name ?? '').trim() ? null : 'Give it a name')) {
+            return new FormDialog({
+                title, fields, submitLabel: 'Save', idPrefix: 'data-model-',
+                document: this.container?.ownerDocument ?? globalThis.document,
+                validate, onApply: apply,
+            }).open();
+        }
+
+        /** The perspectives or contexts changed: the toolbar shows them anew. @private */
+        _changed() {
+            if (this.menuBar) this.menuBar.items = this.menuBarItems();
+            this.menuBar?.render?.();
+        }
+
+        /** Export ▸: the picture, as PNG or SVG, named after the model. */
+        exportItems() {
+            const name = this.model.name || this.title || 'data-model';
+            return [
+                { label: 'Image (PNG)', action: () => downloadPng(this.canvasHost, { name }) },
+                { label: 'Image (SVG)', action: () => downloadSvg(this.canvasHost, { name }) },
+                { separator: true },
+                { label: 'SQL DDL (physical level)', action: () => this.exportDdl() },
+            ];
+        }
+
+        /** The physical level as SQL DDL (SqlDdlFileFormat), downloaded as the model's name. Returns the file. */
+        exportDdl({ download = (file, fileName) => downloadBlob(new (this.document.defaultView ?? globalThis).Blob([file.data], { type: file.mimeType }), fileName) } = {}) {
+            const file = new SqlDdlFileFormat().export(this.model);
+            download(file, `${String(this.model.name || this.title || 'model').replace(/[^A-Za-z0-9._-]+/g, '-')}.sql`);
+            return file;
+        }
+
+        /** Redraw now (a choice made), when there is somewhere to draw. @private */
+        _redraw() {
+            if (this.canvasHost) this._draw();
+            // Its toolbar shows what is drawn, however it was chosen (a finding, a lineage, a service domain opened).
+            this.menuBar?.refresh?.();
+        }
+
+        /**
+         * Keep where the boxes and notes were dragged (the drawing is made anew each
+         * time): on the level shown, or in the mapping view's own layout. Then draw.
+         */
+        _draw() {
+            if (this._keepPlaces()) this.model.edited();   // a box or note moved is a change, kept and saved
+            this._drawnLevel = this.level;
+            super._draw();
+            this._drawnPlaces = this._placesOnScreen();
+        }
+
+        /** Where the drawing has each box and note now, a copy a drag does not change. @private */
+        _placesOnScreen() {
+            const pos = this.engine?._graph?.pos;
+            return pos ? new Map([...pos].map(([id, p]) => [id, { x: p.x, y: p.y }])) : null;
+        }
+
+        /**
+         * Keep where the drawing on screen has its boxes and notes: on the level
+         * it shows, or in the mapping view's layout. Returns whether any moved.
+         * A box the model has a place for and that was not moved on screen since
+         * it was drawn keeps the model's place — the model may have moved it
+         * since (laid out, an undo), and the screen still shows where it was. @private
+         */
+        _keepPlaces() {
+            const pos = this.engine?._graph?.pos;
+            if (!pos || !this._drawnLevel) return false;
+            let moved = false;
+            const place = (p, before, put, id) => {
+                if (!p || (before && before.x === p.x && before.y === p.y)) return;
+                const drawn = this._drawnPlaces?.get(id);
+                if (drawn && drawn.x === p.x && drawn.y === p.y && Number.isFinite(before?.x) && Number.isFinite(before?.y)) return;
+                put({ x: p.x, y: p.y });
+                moved = true;
+            };
+            const other = DataModel.otherView(this._drawnLevel);
+            if (other && !other.keepsPlaces) return false;   // laid out by its structure, anew each time
+            if (other) {
+                for (const [id, p] of pos) {
+                    if (id.includes(':')) place(p, this.model.mappingLayout[id], (at) => { this.model.mappingLayout[id] = at; }, id);
+                }
+                return moved;
+            }
+            for (const entity of this.model.level(this._drawnLevel).entities) {
+                place(pos.get(entity.id), entity, (at) => Object.assign(entity, at), entity.id);
+            }
+            for (const rule of this.model.contexts.flatMap(c => c.constraints)) {
+                const p = pos.get(rule.id);
+                const before = this.model.notePlace(this._drawnLevel, rule);
+                place(p, Number.isFinite(before.x) ? before : null, (at) => this.model.placeNote(this._drawnLevel, rule, at), rule.id);
+            }
+            return moved;
+        }
+
+        dispose() {
+            this.menuBar?.dispose?.();
+            super.dispose();
+        }
+
+        /** The spec again: the model (with where its boxes are), what is chosen, and the other options. */
+        serialize() {
+            const { options, chartType, ...base } = super.serialize();
+            const { level, notation, ...rest } = options;
+            return {
+                ...base, ...this.model.toJSON(),
+                perspective: this.perspectiveId, context: this.contextId, level, notation, options: rest,
+            };
+        }
+    }
+
+    /** The ways the model is shown: [id, label]. */
+    const VIEWS = Object.freeze([['map', 'Story map'], ['backlog', 'Backlog']]);
+
+    /** How a story card and the map's headers look, from the workspace theme. */
+    const CARD = {
+        background: 'var(--ws-panel-bg, #fff)', color: 'var(--ws-fg, #222)', border: '1px solid var(--ws-border, #ccc)',
+        borderLeft: '4px solid #f0c040', borderRadius: '4px', padding: '6px 8px', margin: '0 0 6px', fontSize: '12px', cursor: 'pointer',
+    };
+    const HEAD = { padding: '6px 8px', fontWeight: '600', fontSize: '12px', textAlign: 'left', verticalAlign: 'top', cursor: 'pointer' };
+    const CELL = { padding: '6px', verticalAlign: 'top', minWidth: '180px', borderTop: '1px solid var(--ws-border, #ddd)', borderLeft: '1px solid var(--ws-border, #ddd)' };
+    const BADGE = { display: 'inline-block', marginRight: '6px', color: 'var(--ws-muted, #777)', fontSize: '11px' };
+
+    /**
+     * RequirementsPart — a requirements model (RequirementsModel) in a pane, as an
+     * agile team works with it: a **story map** (epics across, releases down,
+     * each story a card — dragged to another epic or release, or among its
+     * neighbours) or the **backlog** (every story in order, a row each). A card
+     * or a row opened edits the story: its narrative ("As a … I want … so that
+     * …"), acceptance criteria, status, priority, points, labels and traces to
+     * what realises it in the other models. Model ▸ adds epics, releases and
+     * stories, brings stories in from a tracker's export or a storyboard, and
+     * checks the model (RequirementsChecker); the toolbar shows how complete it
+     * is (coverage: criteria, traces).
+     *
+     * A model of a ModelsPart (`editorType: 'requirements'`) as the other
+     * modellers' are (ModelHosted): saved as `.requirements.json`, opened from a
+     * tracker's export or a storyboard too, kept, compared and merged, a proposal
+     * reviewed.
+     *
+     * A host extends it by subclass: `traceTargets()` — what a story can be traced
+     * to (the elements of its other models); `resolveTrace(trace)` — whether a
+     * trace's target is there (for the check); `storyStatus(story)` — a live state
+     * shown on the card (a work item's), `{label, color?, title?}` or null;
+     * `searchByMeaning(query)` — the stories nearest a question (a vector
+     * store's), which puts Model ▸ Find by meaning… in the menu.
+     *
+     * Spec: `{ id, type: 'requirements', title?, view?: 'map'|'backlog', ...the
+     * model as RequirementsModel takes it }`.
+     */
+    class RequirementsPart extends ModelHosted(Part) {
+        static type = 'requirements';
+
+        static VIEWS = VIEWS;
+
+        constructor(spec = {}) {
+            super(spec);
+            this._adoptModel(new RequirementsModel(spec));
+            /** The view shown: 'map' or 'backlog'. */
+            this.view = VIEWS.some(([id]) => id === spec.view) ? spec.view : 'map';
+            this.menuBar = null;
+            this.body = null;
+        }
+
+        // ===== A model saved as a file, kept, backed up =====
+
+        /** Its own format first (what it saves as), then what other tools wrote (import only). */
+        fileFormats() {
+            return [
+                RequirementsFileFormat.instance ??= new RequirementsFileFormat(),
+                TrackerExportFileFormat.instance ??= new TrackerExportFileFormat(),
+                StoryboardFileFormat.instance ??= new StoryboardFileFormat(),
+            ];
+        }
+
+        /** Edit another model (one opened, imported or kept). */
+        replaceModel(model) {
+            this._adoptModel(model);
+            this.afterModelEdit();
+        }
+
+        afterModelEdit() {
+            if (this.menuBar) { this.menuBar.items = this.menuBarItems(); this.menuBar.render?.(); }
+            this._draw();
+        }
+
+        // ===== What a host adds =====
+
+        /** What a story can be traced to: `[{kind, ref, name, model?}]`. None here; a host gives its models' elements. */
+        traceTargets() {
+            return [];
+        }
+
+        /** Whether a trace's target is there: true, false, or undefined (cannot tell). */
+        resolveTrace(trace) {
+            return undefined;
+        }
+
+        /** A live state shown on a story's card: `{label, color?, title?}`, or null. */
+        storyStatus(story) {
+            return null;
+        }
+
+        /**
+         * The stories nearest a question by meaning, best first: a promise of
+         * `[{id, score}]` (score 0..1). None here; a host with a vector store gives
+         * them, and Model ▸ Find by meaning… is offered.
+         */
+        searchByMeaning(query) {
+            return null;
+        }
+
+        /** Whether stories can be found by meaning here (a host gives searchByMeaning). */
+        get searchable() {
+            return this.searchByMeaning !== RequirementsPart.prototype.searchByMeaning;
+        }
+
+        // ===== Shown =====
+
+        render() {
+            Object.assign(this.container.style, { display: 'flex', flexDirection: 'column', height: '100%' });
+            const toolbar = this.container.appendChild(el({}, this.document));
+            this.body = this.container.appendChild(el({ style: { flex: '1 1 auto', minHeight: '0', overflow: 'auto', padding: '8px', background: 'var(--ws-bg, #fafafa)' } }, this.document));
+            this.menuBar = new MenuBar({ container: toolbar, items: this.menuBarItems(), document: this.document }).render();
+            this._draw();
+        }
+
+        /** Draw the view shown. @private */
+        _draw() {
+            if (!this.body) return;
+            this.body.replaceChildren(el(this.view === 'backlog' ? this.backlogSpec() : this.storyMapSpec(), this.document));
+        }
+
+        /** Show the story map or the backlog. */
+        setView(view) {
+            if (!VIEWS.some(([id]) => id === view)) return;
+            this.view = view;
+            this._draw();
+            this.menuBar?.refresh?.();
+        }
+
+        menuBarItems() {
+            const host = this.modelsHost;
+            return [
+                new ToolbarMenu('File', () => this.fileItems()),
+                new ToolbarMenu('Edit', () => this.undoItems()),
+                ...(host ? [new ToolbarMenu('Tools', () => host.toolItems(this))] : []),
+                new ToolbarMenu('Model', () => this.modelItems()),
+                new ToolbarSelect('View', () => VIEWS.map(([id, label]) => [id, label]), () => this.view, (v) => this.setView(v)),
+                new ToolbarText(() => this.coverageText()),
+            ];
+        }
+
+        /** How complete it is, in a line: stories, with criteria, traced. */
+        coverageText() {
+            const c = this.model.coverage();
+            if (!c.stories) return 'No stories yet';
+            const pct = (share) => `${Math.round(share * 100)}%`;
+            return `${c.stories} stor${c.stories === 1 ? 'y' : 'ies'} · ${pct(c.criteriaShare)} with acceptance criteria · ${pct(c.traceShare)} traced`;
+        }
+
+        /** Model ▸: new epic, release and story; stories brought in; the check. */
+        modelItems() {
+            return [
+                { label: 'New story…', action: () => this.editStory(null) },
+                { label: 'New epic…', action: () => this.editEpic(null) },
+                { label: 'New release…', action: () => this.editRelease(null) },
+                { separator: true },
+                ...EditorPart.menuGroup('Bring in stories', [
+                    { label: 'From a tracker\'s export (Jira, Azure DevOps, GitLab)…', action: () => this.bringFrom(this.fileFormats()[1]) },
+                    { label: 'From a storyboard (Markdown)…', action: () => this.bringFrom(this.fileFormats()[2]) },
+                ]),
+                { separator: true },
+                ...(this.searchable ? [{ label: 'Find by meaning…', action: () => this.findByMeaning() }] : []),
+                { label: 'Check model…', action: () => this.checkModel() },
+            ];
+        }
+
+        /** Ask what to look for, then list the stories nearest it by meaning; one chosen is opened. */
+        findByMeaning() {
+            return new FormDialog({
+                title: 'Find stories by meaning', document: this.document, submitLabel: 'Find',
+                description: 'Describe what you are looking for in your own words: stories that mean the same are found, whatever their words.',
+                fields: [{ key: 'query', label: 'Looking for', value: '' }],
+                validate: (v) => (String(v.query ?? '').trim() ? null : 'Say what to look for'),
+                onApply: ({ query }) => this.showFound(query),
+            }).open();
+        }
+
+        /** The stories nearest `query` (searchByMeaning), listed to open; a failure said. */
+        async showFound(query) {
+            let results;
+            try {
+                results = (await this.searchByMeaning(query)) ?? [];
+            } catch (err) {
+                (this.document.defaultView ?? globalThis).alert?.(`Could not search: ${err.message}`);
+                return null;
+            }
+            const found = results.filter(r => this.model.story(r.id)).map(r => ({
+                code: 'found', severity: 'info', kind: 'story', ids: [r.id],
+                message: `${Math.round((r.score ?? 0) * 100)}% — ${this.model.story(r.id).name}`,
+            }));
+            new ModelCheckDialog({
+                findings: found, title: `Stories like "${query}"`, empty: 'No story found: index the model for search, or ask another way.',
+                onReveal: (f) => this.revealFinding(f), document: this.document,
+            }).open();
+            return found;
+        }
+
+        /**
+         * Bring a file's epics, releases and stories into this model (an import
+         * format's spec), as one undo step: one with the id of one here replaces it.
+         */
+        bringFrom(format, options = {}) {
+            return this.readInto({
+                ...options, accept: format.accept, what: 'the file',
+                command: (bytes, name) => {
+                    const spec = format.spec(new TextDecoder().decode(bytes));
+                    if (!spec.stories.length && !spec.epics.length) return null;
+                    return this.model.bringCommand(spec, `Bring in "${name}"`);
+                },
+                nothing: (name) => `"${name}" has no epics or stories.`,
+            });
+        }
+
+        /** The findings (RequirementsChecker, traces resolved by the host); one opened edits its story or epic. */
+        checkModel() {
+            const findings = this.model.checker({ resolve: (trace) => this.resolveTrace(trace) }).run();
+            new ModelCheckDialog({ findings, onReveal: (f) => this.revealFinding(f), document: this.document }).open();
+            return findings;
+        }
+
+        /** Open what a finding is about. */
+        revealFinding(finding) {
+            const [id] = finding.ids ?? [];
+            if (finding.kind === 'epic') return this.editEpic(id);
+            if (finding.kind === 'story') return this.editStory(id);
+            return null;
+        }
+
+        // ===== The views, as element specs =====
+
+        /** A story as a card: its name, its sentence, and badges (criteria, traces, points, status). */
+        cardSpec(story) {
+            const live = this.storyStatus(story);
+            const badges = [
+                story.criteria.length ? `✓ ${story.criteria.length}` : '✓ none',
+                story.traces.length ? `→ ${story.traces.length}` : null,
+                story.points != null ? `${story.points} pt` : null,
+                story.status || null,
+            ].filter(Boolean);
+            return {
+                cls: 'rq-card', dataset: { storyId: story.id }, attrs: { draggable: 'true', title: RequirementsModel.narrative(story) || story.description || story.name },
+                style: { ...CARD, ...(story.criteria.length ? {} : { borderLeftColor: '#e08a3c' }) },
+                on: {
+                    click: () => this.editStory(story.id),
+                    contextmenu: (e) => { e.preventDefault(); PopupMenu.show(e.clientX, e.clientY, this.storyMenuItems(story.id), this.document); },
+                    dragstart: (e) => { e.dataTransfer?.setData('text/plain', story.id); },
+                    dragover: (e) => e.preventDefault(),
+                    drop: (e) => { e.preventDefault(); e.stopPropagation(); this.dropStory(e.dataTransfer?.getData('text/plain'), { before: story.id, epic: story.epic, release: story.release }); },
+                },
+                children: [
+                    { text: story.name, style: { fontWeight: '600' } },
+                    ...(story.want ? [{ text: RequirementsModel.narrative(story), style: { color: 'var(--ws-muted, #666)', margin: '2px 0' } }] : []),
+                    {
+                        style: { marginTop: '4px' },
+                        children: [
+                            ...badges.map(text => ({ tag: 'span', text, style: BADGE })),
+                            ...(live ? [{ tag: 'span', text: live.label, attrs: { title: live.title ?? '' }, style: { ...BADGE, color: '#fff', background: live.color ?? '#557', borderRadius: '8px', padding: '0 6px' } }] : []),
+                        ],
+                    },
+                ],
+            };
+        }
+
+        /** The story map: a table, epics across, releases down; a cell takes a card dropped on it, and + adds one there. */
+        storyMapSpec() {
+            const map = this.model.storyMap();
+            const drop = (epic, release) => ({
+                dragover: (e) => e.preventDefault(),
+                drop: (e) => { e.preventDefault(); this.dropStory(e.dataTransfer?.getData('text/plain'), { epic, release }); },
+            });
+            return {
+                tag: 'table', cls: 'rq-map', style: { borderCollapse: 'collapse', color: 'var(--ws-fg, #222)' },
+                children: [
+                    {
+                        tag: 'thead', children: [{
+                            tag: 'tr', children: [
+                                { tag: 'th', style: HEAD },
+                                ...map.columns.map(c => ({
+                                    tag: 'th', text: c.name, dataset: { epicId: c.id }, style: { ...HEAD, background: 'var(--ws-panel-bg, #fff)', borderBottom: '3px solid #6b8fd6' },
+                                    attrs: { title: c.epic?.description ?? '' },
+                                    on: c.epic ? { click: () => this.editEpic(c.id) } : {},
+                                })),
+                            ],
+                        }],
+                    },
+                    {
+                        tag: 'tbody', children: map.rows.map(r => ({
+                            tag: 'tr', dataset: { releaseId: r.id }, children: [
+                                { tag: 'th', text: r.name, style: { ...HEAD, color: 'var(--ws-muted, #666)' }, on: r.release ? { click: () => this.editRelease(r.id) } : {} },
+                                ...map.columns.map(c => ({
+                                    tag: 'td', cls: 'rq-cell', dataset: { epicId: c.id, releaseId: r.id }, style: CELL, on: drop(c.id, r.id),
+                                    children: [
+                                        ...map.cell(c.id, r.id).map(s => this.cardSpec(s)),
+                                        { tag: 'button', text: '+', attrs: { title: 'New story here' }, style: { border: 'none', background: 'none', color: 'var(--ws-muted, #888)', cursor: 'pointer' }, on: { click: () => this.editStory(null, { epic: c.id, release: r.id }) } },
+                                    ],
+                                })),
+                            ],
+                        })),
+                    },
+                ],
+            };
+        }
+
+        /** The backlog: every story in order, a row each. */
+        backlogSpec() {
+            const epicName = (id) => this.model.epic(id)?.name ?? '';
+            const releaseName = (id) => this.model.release(id)?.name ?? '';
+            const columns = ['Story', 'Epic', 'Release', 'Status', 'Priority', 'Points', 'Criteria', 'Traces'];
+            return {
+                tag: 'table', cls: 'rq-backlog', style: { borderCollapse: 'collapse', width: '100%', fontSize: '12px', color: 'var(--ws-fg, #222)' },
+                children: [
+                    { tag: 'thead', children: [{ tag: 'tr', children: columns.map(c => ({ tag: 'th', text: c, style: { ...HEAD, borderBottom: '1px solid var(--ws-border, #ccc)' } })) }] },
+                    {
+                        tag: 'tbody', children: this.model.stories.map(s => ({
+                            tag: 'tr', dataset: { storyId: s.id }, style: { cursor: 'pointer' },
+                            on: { click: () => this.editStory(s.id), contextmenu: (e) => { e.preventDefault(); PopupMenu.show(e.clientX, e.clientY, this.storyMenuItems(s.id), this.document); } },
+                            children: [s.name, epicName(s.epic), releaseName(s.release), s.status, s.priority, s.points ?? '', s.criteria.length, s.traces.length]
+                                .map(text => ({ tag: 'td', text, style: { padding: '4px 8px', borderBottom: '1px solid var(--ws-border, #eee)' } })),
+                        })),
+                    },
+                ],
+            };
+        }
+
+        /** A card dropped: the story moved there (before the card it fell on). */
+        dropStory(id, { epic, release, before = null }) {
+            if (!id || !this.model.story(id) || id === before) return null;
+            return this.runModelEdit(this.model.moveStoryCommand(id, { epic, release, before }));
+        }
+
+        /** A story's right-click menu. */
+        storyMenuItems(id) {
+            return [
+                { label: 'Edit story…', action: () => this.editStory(id) },
+                { label: 'Trace to…', action: () => this.editTraces(id) },
+                { separator: true },
+                { label: 'Remove story', action: () => this.runModelEdit(this.model.removeStoryCommand(id)) },
+            ];
+        }
+
+        // ===== Dialogs =====
+
+        /** The fields a story is edited in (one definition: the dialog shows them, saveStory reads them). */
+        storyFields(story = {}) {
+            const choices = (list, none) => [['', none], ...list.map(x => [x.id, x.name])];
+            const statuses = [...new Set([...RequirementsModel.STATUSES, ...(story.status ? [story.status] : [])])];
+            return [
+                { key: 'name', label: 'Story', value: story.name ?? '' },
+                { key: 'epic', label: 'Epic', type: 'select', value: story.epic ?? '', choices: choices(this.model.epics, 'No epic') },
+                { key: 'release', label: 'Release', type: 'select', value: story.release ?? '', choices: choices(this.model.releases, 'Not planned') },
+                { type: 'heading', label: 'As a … I want … so that …' },
+                { key: 'as', label: 'As a', value: story.as ?? '' },
+                { key: 'want', label: 'I want', value: story.want ?? '' },
+                { key: 'soThat', label: 'So that', value: story.soThat ?? '' },
+                { key: 'description', label: 'Description', type: 'textarea', rows: 3, value: story.description ?? '' },
+                { key: 'criteria', label: 'Acceptance criteria (one a line)', type: 'textarea', rows: 4, value: (story.criteria ?? []).map(c => c.text).join('\n') },
+                { key: 'status', label: 'Status', type: 'select', value: story.status ?? '', choices: [['', '—'], ...statuses.map(s => [s, s])] },
+                { key: 'priority', label: 'Priority', value: story.priority ?? '' },
+                { key: 'points', label: 'Points', type: 'number', value: story.points ?? '' },
+                { key: 'labels', label: 'Labels (comma between)', value: (story.labels ?? []).join(', ') },
+            ];
+        }
+
+        /**
+         * A story's values from its dialog, as RequirementsModel takes them; a
+         * criterion whose text is unchanged keeps its id.
+         */
+        storyFromValues(values, story = null) {
+            const old = new Map((story?.criteria ?? []).map(c => [c.text, c.id]));
+            return {
+                name: String(values.name ?? '').trim(), epic: values.epic ?? '', release: values.release ?? '',
+                as: values.as ?? '', want: values.want ?? '', soThat: values.soThat ?? '', description: values.description ?? '',
+                criteria: String(values.criteria ?? '').split('\n').map(t => t.trim()).filter(Boolean).map(text => (old.has(text) ? { id: old.get(text), text } : text)),
+                status: values.status ?? '', priority: values.priority ?? '',
+                points: values.points === '' || values.points == null || Number.isNaN(Number(values.points)) ? null : Number(values.points),
+                labels: String(values.labels ?? '').split(',').map(l => l.trim()).filter(Boolean),
+            };
+        }
+
+        /** Edit a story (`id` null: a new one, where `at` says). */
+        editStory(id, at = {}) {
+            const story = id ? this.model.story(id) : null;
+            if (id && !story) return null;
+            return new FormDialog({
+                title: story ? `Story: ${story.name}` : 'New story', document: this.document, submitLabel: story ? 'Save' : 'Add',
+                fields: this.storyFields(story ?? { epic: at.epic ?? '', release: at.release ?? '' }),
+                validate: (v) => (String(v.name ?? '').trim() ? null : 'A story needs a name'),
+                onApply: (values) => this.runModelEdit(this.model.saveStoryCommand(id, this.storyFromValues(values, story))),
+            }).open();
+        }
+
+        /** Edit a story's traces: each a row (kind, what, its name), what the host offers suggested. */
+        editTraces(id) {
+            const story = this.model.story(id);
+            if (!story) return null;
+            const targets = this.traceTargets();
+            return new FormDialog({
+                title: `Traces: ${story.name}`, document: this.document,
+                description: 'What realises this story: an ArchiMate requirement or work package, an element, a data concept, entity or table.',
+                fields: [{
+                    key: 'traces', label: '', type: 'rows', addLabel: 'Add trace', value: story.traces,
+                    columns: [
+                        { key: 'kind', label: 'Kind', type: 'select', choices: RequirementsModel.TRACE_KINDS },
+                        { key: 'ref', label: 'What (its id)', suggestions: targets.map(t => t.ref) },
+                        { key: 'name', label: 'Name', suggestions: targets.map(t => t.name).filter(Boolean) },
+                    ],
+                }],
+                onApply: ({ traces = [] }) => {
+                    // A ref the host knows names itself, and says which model it is in.
+                    const known = new Map(targets.map(t => [t.ref, t]));
+                    const rows = traces.filter(t => t.ref).map(t => ({ ...known.get(t.ref), ...t, name: t.name || known.get(t.ref)?.name || '' }));
+                    return this.runModelEdit(this.model.saveStoryCommand(id, { traces: rows }));
+                },
+            }).open();
+        }
+
+        editEpic(id) {
+            const epic = id ? this.model.epic(id) : null;
+            if (id && !epic) return null;
+            return new FormDialog({
+                title: epic ? `Epic: ${epic.name}` : 'New epic', document: this.document, submitLabel: epic ? 'Save' : 'Add',
+                fields: [
+                    { key: 'name', label: 'Epic', value: epic?.name ?? '' },
+                    { key: 'description', label: 'Outcome', type: 'textarea', rows: 3, value: epic?.description ?? '' },
+                ],
+                validate: (v) => (String(v.name ?? '').trim() ? null : 'An epic needs a name'),
+                onApply: (v) => this.runModelEdit(this.model.saveEpicCommand(id, { name: v.name.trim(), description: v.description ?? '' })),
+            }).open();
+        }
+
+        editRelease(id) {
+            const release = id ? this.model.release(id) : null;
+            if (id && !release) return null;
+            return new FormDialog({
+                title: release ? `Release: ${release.name}` : 'New release', document: this.document, submitLabel: release ? 'Save' : 'Add',
+                fields: [{ key: 'name', label: 'Release', value: release?.name ?? '' }],
+                validate: (v) => (String(v.name ?? '').trim() ? null : 'A release needs a name'),
+                onApply: (v) => this.runModelEdit(this.model.saveReleaseCommand(id, { name: v.name.trim() })),
+            }).open();
+        }
+
+        dispose() {
+            this.menuBar?.dispose?.();
+            super.dispose();
+        }
+
+        /** The spec again: the model, and the view shown. */
+        serialize() {
+            return { ...super.serialize(), ...this.model.toJSON(), view: this.view };
+        }
     }
 
     const SVG_NS$1 = 'http://www.w3.org/2000/svg';
@@ -53872,6 +55599,7 @@ th { color: #555; font-weight: 500; }
                 customViewpoints,
                 // Canvas templates: placed on a canvas, saved from its shapes (the browser's library).
                 templateMenu: this.templateMenu,
+                ...this.editorHooks(),
                 // Version and distinct shapes (⚙ Settings) change the palette too.
                 onNodeOptionsChange: ({ archimateVersion, useDistinctShapes, viewpoint, viewpointMode, showDerived, showNestedLines }) => {
                     this.showDerived = !!showDerived;
@@ -53938,11 +55666,40 @@ th { color: #555; font-weight: 500; }
             this.editor.render();
         }
 
+        /**
+         * A host's live status for an element — `{ text, color }`, drawn as a pill
+         * on its boxes — or null. None here: a host subclass says (the workbench:
+         * a component's lifecycle state). Asked whenever the view is drawn.
+         */
+        elementStatus(_element) {
+            return null;
+        }
+
+        /** A host's menu items for an element, after the editor's own on a box and in the tree. None here. */
+        elementMenuExtras(_element) {
+            return [];
+        }
+
+        /** What the editor asks this part per element: its live status and its menu items (a host's). */
+        editorHooks() {
+            return {
+                elementStatus: (element) => this.elementStatus(element),
+                elementMenuExtras: (element) => this.elementMenuExtras(element),
+            };
+        }
+
         /**
          * A model element's menu in the tree (elementMenuItems): its properties,
-         * the views it is on, adding it to this one, a view generated for it.
+         * the views it is on, adding it to this one, a view generated for it; then
+         * the host's (elementMenuExtras).
          */
         elementMenu(element) {
+            const extras = this.elementMenuExtras(element) ?? [];
+            return [...this._ownElementMenu(element), ...(extras.length ? [{ separator: true }, ...extras] : [])];
+        }
+
+        /** @private */
+        _ownElementMenu(element) {
             const model = this.model;
             return elementMenuItems(element, {
                 model, view: model.currentView,
@@ -54048,6 +55805,7 @@ th { color: #555; font-weight: 500; }
     exports.BUILTIN_THEMES = BUILTIN_THEMES;
     exports.BackgroundCommand = BackgroundCommand;
     exports.BackgroundGroup = BackgroundGroup;
+    exports.Benchmark = Benchmark;
     exports.BianActionTerm = BianActionTerm;
     exports.BianFunctionalPattern = BianFunctionalPattern;
     exports.BianLandscapeReader = BianLandscapeReader;
@@ -54134,6 +55892,7 @@ th { color: #555; font-weight: 500; }
     exports.EditHintCommand = EditHintCommand;
     exports.EditPropertyCommand = EditPropertyCommand;
     exports.EditViewItemCommand = EditViewItemCommand;
+    exports.EditableModel = EditableModel;
     exports.EditorPart = EditorPart;
     exports.EditorShell = EditorShell;
     exports.ElementFilterRule = ElementFilterRule;
@@ -54189,7 +55948,9 @@ th { color: #555; font-weight: 500; }
     exports.Mat4 = Mat4;
     exports.MeasuredCategory = MeasuredCategory;
     exports.MenuBar = MenuBar;
+    exports.ModelEditCommand = ModelEditCommand;
     exports.ModelFileFormat = ModelFileFormat;
+    exports.ModelHosted = ModelHosted;
     exports.ModelScorecard = ModelScorecard;
     exports.ModelTree = ModelTree;
     exports.ModelsPart = ModelsPart;
@@ -54229,6 +55990,10 @@ th { color: #555; font-weight: 500; }
     exports.RemoveLineCommand = RemoveLineCommand;
     exports.RenderEngine = RenderEngine;
     exports.ReorderCommand = ReorderCommand;
+    exports.RequirementsChecker = RequirementsChecker;
+    exports.RequirementsFileFormat = RequirementsFileFormat;
+    exports.RequirementsModel = RequirementsModel;
+    exports.RequirementsPart = RequirementsPart;
     exports.ResizeCommand = ResizeCommand;
     exports.RotateCommand = RotateCommand;
     exports.RoundedRectangleTemplate = RoundedRectangleTemplate;
@@ -54248,9 +56013,12 @@ th { color: #555; font-weight: 500; }
     exports.SqlDdlFileFormat = SqlDdlFileFormat;
     exports.StadiumTemplate = StadiumTemplate;
     exports.StarTemplate = StarTemplate;
+    exports.Storyboard = Storyboard;
+    exports.StoryboardFileFormat = StoryboardFileFormat;
     exports.StructuredType = StructuredType;
     exports.SwimlaneTemplate = SwimlaneTemplate;
     exports.THEME_VARS = THEME_VARS;
+    exports.TRACKERS = TRACKERS;
     exports.TREE_LAYERS = TREE_LAYERS;
     exports.TREE_MODE_CATALOG = TREE_MODE_CATALOG;
     exports.TabsNode = TabsNode;
@@ -54265,6 +56033,8 @@ th { color: #555; font-weight: 500; }
     exports.ToolbarSelect = ToolbarSelect;
     exports.ToolbarSeparator = ToolbarSeparator;
     exports.ToolbarText = ToolbarText;
+    exports.TrackerExport = TrackerExport;
+    exports.TrackerExportFileFormat = TrackerExportFileFormat;
     exports.TrapezoidTemplate = TrapezoidTemplate;
     exports.TreeModeRegistry = TreeModeRegistry;
     exports.TriangleTemplate = TriangleTemplate;