@peter.prib/renderengine 0.4.0 → 0.7.0

package/src/workspace/parts/ModelsPart.js

@@ -1,622 +1,765 @@
-import { Part } from '../Part.js';
-import { WorkArea } from '../workArea.js';
-import { el } from '../dom.js';
-import { ModelCompareDialog, ModelMergeDialog } from '../../charting/ModelComparisonDialog.js';
-import { FormDialog } from '../../charting/FormDialog.js';
-import { PopupMenu } from '../../charting/PopupMenu.js';
-import { downloadBlob } from '../../exportImage.js';
-import { IndexedDbStore } from '../storage/KeyValueStore.js';
-import { ModelLibrary } from '../storage/ModelLibrary.js';
-import { BackupFolder } from '../storage/BackupFolder.js';
-import { Benchmark } from '../../charting/model/Benchmark.js';
-
-/**
- * ModelsPart — several models open at once (as Archi's model tree holds
- * several): one editor part per model (any EditorPart type, `editorType`),
- * each a tab in a work area, so each keeps its own file, unsaved state and
- * undo history, and two can sit side by side. Copy and paste go between
- * them as between any two editors.
- *
- * The editor parts it hosts find it as `ctx.models` and offer, in their File
- * menu, New model, Open… in a new tab and Close model; a model imported from
- * a file opens in a tab of its own. Their Tools menu works across the open
- * models (toolItems): compare one with another, and merge from another into
- * it (ModelComparison). A tab shows its file's
- * name and • while it has unsaved changes, and right-clicked, the menu of
- * what can be done with that model (tabMenuItems); closing one with unsaved changes
- * asks first; the page title follows the model in front. The last model
- * closed leaves a new, empty one.
- *
- * Spec: `{ id, type: 'models', editorType, models?: [editor part spec], newModel?: editor part spec, bases?: [editor part spec], keep? }`:
- * `models` are opened at the start (one empty one without), `newModel` is what New model makes.
- *
- * `bases` are reference models kept as given (never opened, edited or kept):
- * File ▸ New ▸ From base makes a model as a copy of one, and Tools ▸ Compare
- * with and Merge from offer them beside the other open models. File ▸
- * Duplicate model opens a copy of the model in front, read back through its
- * own file format.
- *
- * With `keep`, every model is kept in this browser (ModelLibrary over an
- * IndexedDB store) a moment after each edit, in its editor's file format, so
- * work outlives the page without saving a file; those open when the page
- * 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.
- */
-export class ModelsPart extends Part {
-    static type = 'models';
-
-    constructor(spec = {}) {
-        super(spec);
-        if (!spec.editorType) throw new TypeError('ModelsPart needs an editorType (the editor part type, e.g. "archimate-canvas")');
-        this.editorType = spec.editorType;
-        /** The ids of the editor parts open here, in the order opened. */
-        this.modelIds = [];
-        this.work = null;
-        this._next = 1;
-        /** With `keep`: the kept models and where backups go (set once the store is open). */
-        this.library = null;
-        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). */
-    static COPY_SUFFIX = ' (copy)';
-
-    /** How long after an edit a model is kept (an edit's bursts make one write). */
-    static KEEP_DELAY = 800;
-
-    get registry() {
-        return this.ctx?.registry ?? null;
-    }
-
-    render() {
-        Object.assign(this.container.style, { display: 'flex', flexDirection: 'column', height: '100%' });
-        const host = this.container.appendChild(el({ style: { flex: '1 1 auto', minHeight: '0' } }));
-        this.work = new WorkArea({
-            placeholder: { cls: 'ws-workarea-empty', text: 'No model open' },
-            // A tab's × asks first when its model has unsaved changes (closeModel closes it).
-            beforeClose: (id) => { this.closeModel(id); return false; },
-            // A tab right-clicked: what can be done with its model.
-            tabMenu: (id, event) => this.showTabMenu(id, event),
-            onChange: () => this.activeModel()?.file?.showState?.(),
-        });
-        this.work.render(host, { ...this.ctx, models: this });
-        this.bases();   // copied now, before an open model (which may share the spec's data) is edited
-        const specs = this.spec.models?.length ? this.spec.models : [this.spec.newModel ?? {}];
-        const parts = specs.map(spec => this.newModel(spec));
-        if (parts[0]) this.work.focus(parts[0].id);
-        /** Resolves once kept models are reopened (with `keep`). */
-        this.ready = this.spec.keep ? this.startKeeping(parts) : Promise.resolve();
-    }
-
-    // ===== Kept in this browser =====
-
-    /** The store models and the backup folder are kept in: the browser's IndexedDB. A test gives its own. */
-    openStore() {
-        return IndexedDbStore.open('renderengine-models');
-    }
-
-    /**
-     * Open the store, reopen the models open when the page last closed (in
-     * place of the starting ones, unless those were changed meanwhile), and keep
-     * what is open now.
-     * @param {Array<EditorPart>} starting - The models the spec opened
-     */
-    async startKeeping(starting = []) {
-        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,
-            download: (name, data, mimeType) => downloadBlob(new (win.Blob ?? Blob)([data], { type: mimeType }), name),
-        });
-        await this.backups.restore();
-        const kept = this.ownKept(await this.library.openOnes());
-        for (const { id } of kept) {
-            const entry = await this.library.load(id);   // the list has no data; the entry has
-            if (entry) this.openKept(entry);
-        }
-        if (kept.length) for (const part of starting) if (!part.model?.isDirty?.()) this.closeModel(part.id);
-        for (const part of this.models()) if (part.keepId) await this.keep(part);
-    }
-
-    /** Keep a model in this browser now (its editor's keepEntry), as open. */
-    async keep(part) {
-        if (!this.library || part.keepOff) return null;
-        const entry = part.keepEntry?.();
-        if (!entry) return null;
-        part.keepId ??= ModelLibrary.newId();
-        return this.library.keep({ ...entry, id: part.keepId, editorType: this.editorType, open: this.modelIds.includes(part.id) });
-    }
-
-    /** A model was edited: keep it a moment later (a burst of edits, one write). */
-    modelEdited(part) {
-        if (!this.library) return;
-        clearTimeout(this._pending.get(part.id));
-        this._pending.set(part.id, setTimeout(() => { this._pending.delete(part.id); this.keep(part); }, ModelsPart.KEEP_DELAY));
-    }
-
-    /**
-     * The kept models that are this workbench's: kept by its kind of editor
-     * (`editorType`), or (kept before that was recorded) in one of its formats.
-     * Pages of other editors keep theirs in the same browser; those are not read here.
-     */
-    ownKept(entries) {
-        const labels = new Set(this.formatLabels());
-        return entries.filter(e => (e.editorType ? e.editorType === this.editorType : labels.has(e.format)));
-    }
-
-    /** The labels of this workbench's editors' file formats. */
-    formatLabels() {
-        const sample = this.models()[0] ?? this.bases()[0];
-        return (sample?.fileFormats?.() ?? []).map(f => f.label);
-    }
-
-    /** Open a kept model in a new tab, read in its format. Returns the part, or null when it is not one this editor reads. */
-    openKept(entry) {
-        if (!this.ownKept([entry]).length) {
-            this.tell(`"${entry.name}" was kept by another editor (${entry.editorType ?? entry.format}); open it there.`);
-            return null;
-        }
-        const part = this.newModel();
-        const format = part.fileFormats().find(f => f.label === entry.format);
-        try {
-            part.replaceModel(format.import(entry.data));
-        } catch (err) {
-            this.closeModel(part.id);
-            this.tell(`"${entry.name}" could not be read back: ${err.message}`);
-            return null;
-        }
-        part.keepId = entry.id;
-        part.file.name = entry.fileName ?? null;
-        part.file.showState();
-        this.work.focus(part.id);
-        return part;
-    }
-
-    /**
-     * File ▸ This browser, with `keep`: open a kept model, stop keeping this
-     * one, back up every kept model, choose where backups go.
-     */
-    keepItems(part) {
-        if (!this.library) return [];
-        return [
-            { label: 'Open a kept model…', action: () => this.askOpenKept() },
-            { label: 'Stop keeping this model', disabled: !part.keepId || undefined, action: () => this.stopKeeping(part) },
-            { separator: true },
-            { label: 'Back up kept models now', action: () => this.backUpAndTell() },
-            { label: `Backup folder: ${this.backups.location}…`, disabled: !this.backups.supported || undefined, action: () => this.chooseBackupFolder() },
-            ...(this.backups.dir ? [{ label: 'Back up to downloads instead', action: () => this.backups.forget() }] : []),
-        ];
-    }
-
-    /** Choose a kept model not open now, and open it. */
-    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 (${this.keptWhere}) is open.`); return null; }
-        return new FormDialog({
-            title: 'Open a kept model',
-            fields: [{
-                key: 'id', label: 'Model', type: 'select', value: entries[0].id,
-                choices: entries.map(e => [e.id, `${e.name} (kept ${new Date(e.keptAt).toLocaleString()})`]),
-            }],
-            submitLabel: 'Open', idPrefix: 'kept-',
-            document: this.container?.ownerDocument ?? globalThis.document,
-            onApply: async ({ id }) => { const entry = await this.library.load(id); if (entry) this.openKept(entry); },
-        }).open();
-    }
-
-    /** Forget a model in this browser, and keep it no more. */
-    async stopKeeping(part) {
-        if (part.keepId) await this.library.remove(part.keepId);
-        part.keepId = null;
-        part.keepOff = true;
-    }
-
-    /** Every kept model as a backup file: its name, in its format's extension. */
-    async backupFiles() {
-        const sample = this.models()[0];
-        const formats = sample?.fileFormats?.() ?? [];
-        const files = [];
-        for (const meta of this.ownKept(await this.library.list())) {
-            const entry = await this.library.load(meta.id);
-            const format = formats.find(f => f.label === entry.format);
-            const ext = (format?.accept ?? '').split(',')[0].trim() || '';
-            const base = String(entry.fileName ?? entry.name ?? 'model').replace(/\.[^.]+$/, '').replace(/[^A-Za-z0-9._-]+/g, '-') || 'model';
-            files.push({ name: `${base}${ext}`, data: entry.data, mimeType: 'application/octet-stream' });
-        }
-        return files;
-    }
-
-    /** Back up every kept model (what is open is kept first), and say where. */
-    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 (${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 };
-    }
-
-    /** Choose the backup folder (a click); one OneDrive, Google Drive or Dropbox syncs takes the backups to the cloud. */
-    async chooseBackupFolder() {
-        const dir = await this.backups.choose();
-        if (dir) this.tell(`Backups go into "${dir.name}" from now on, each named with the date and time.\n\nA folder that OneDrive, Google Drive or Dropbox syncs takes them to the cloud.`);
-        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;
-        win.alert?.(message);
-    }
-
-    /** The editor parts open here, in order. */
-    models() {
-        return this.modelIds.map(id => this.registry?.get(id)).filter(Boolean);
-    }
-
-    /** The editor part of the model in front (the selected tab of the active group). */
-    activeModel() {
-        const id = this.work?.activePart();
-        return id ? this.registry?.get(id) ?? null : null;
-    }
-
-    /**
-     * Open a new model in a tab: an editor part of `editorType` made from `spec`
-     * (default the spec's `newModel`, an empty model). Returns the part.
-     */
-    newModel(spec = this.spec.newModel ?? {}) {
-        const id = spec.id && !this.registry.has(spec.id) ? spec.id : this._freshId();
-        const part = this.registry.add({ ...spec, id, type: this.editorType });
-        this.modelIds.push(id);
-        this.work.open(id);
-        this.fileStateChanged(part);
-        return part;
-    }
-
-    /**
-     * Open a model made elsewhere (one imported from a file) in a new tab,
-     * as it is: nothing to undo, not yet saved to a file. Returns the part.
-     */
-    openModel(model) {
-        const part = this.newModel();
-        part.replaceModel(model);
-        this.work.focus(part.id);
-        this.fileStateChanged(part);
-        this.keep(part);   // an import is kept straight away
-        return part;
-    }
-
-    // ===== Bases, and copies =====
-
-    /**
-     * The base models (spec `bases`): a part each, made from a copy of its spec
-     * and never added to the workbench, so nothing done to an open model reaches it.
-     */
-    bases() {
-        return (this._bases ??= (this.spec.bases ?? []).map((spec, i) =>
-            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');
-        return plain.endsWith(ModelsPart.COPY_SUFFIX) ? plain : `${plain}${ModelsPart.COPY_SUFFIX}`;
-    }
-
-    /** A spec's own copy: its data apart from the spec's (a spec is JSON). */
-    static copySpec(spec) {
-        return JSON.parse(JSON.stringify(spec ?? {}));
-    }
-
-    /** What a base is called in menus. */
-    baseLabel(base, i) {
-        return base.model?.name || base.spec.name || `Base ${i + 1}`;
-    }
-
-    /** Open a new model as a copy of a base (by its place in `bases`), named as a copy (copyName). Returns the part. */
-    newFromBase(index) {
-        const spec = this.bases()[index]?.spec;   // the base's own copy, as given
-        if (!spec) return null;
-        const { id, keepId, ...copy } = ModelsPart.copySpec(spec);
-        const part = this.newModel({ ...copy, name: ModelsPart.copyName(copy.name ?? this.baseLabel(this.bases()[index], index)) });
-        this.work.focus(part.id);
-        return part;
-    }
-
-    /**
-     * 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() {
-        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) })),
-        ];
-    }
-
-    /**
-     * Open a copy of a model in a new tab: written and read back in its own
-     * file format (keepEntry), named as a copy (copyName). Null when it has no format.
-     */
-    duplicate(part) {
-        const entry = part.keepEntry?.();
-        if (!entry) return null;
-        const format = part.fileFormats().find(f => f.label === entry.format);
-        const model = format.import(entry.data);
-        model.name = ModelsPart.copyName(model.name || entry.name);
-        return this.openModel(model);
-    }
-
-    /**
-     * The Tools menu's items for one open model (`part`): Compare with and
-     * Merge from, each a submenu of the other open models, then the bases.
-     */
-    toolItems(part) {
-        const others = this.models().filter(m => m !== part);
-        const bases = this.bases().map((base, i) => ({ base, label: `${this.baseLabel(base, i)} (base)` }));
-        const each = (act) => (others.length || bases.length
-            ? [
-                ...others.map(other => ({ label: this.labelOf(other), action: () => act(part, other) })),
-                ...(others.length && bases.length ? [{ separator: true }] : []),
-                ...bases.map(({ base, label }) => ({ label, action: () => act(part, base) })),
-            ]
-            : [{ label: 'Open another model first', disabled: true }]);
-        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)] : []),
-        ];
-    }
-
-    /** How `part`'s model differs from `other`'s, shown (ModelCompareDialog); its Merge… goes on to merge. */
-    compare(part, other) {
-        return new ModelCompareDialog({
-            ...this._comparing(part, other),
-            onMerge: () => this.merge(part, other),
-        }).open();
-    }
-
-    /** Choose what to bring from `other`'s model into `part`'s, then bring it: one undo step there. */
-    merge(part, other) {
-        return new ModelMergeDialog({
-            ...this._comparing(part, other),
-            onMerge: (command) => part.runModelEdit(command),
-        }).open();
-    }
-
-    /** @private */
-    _comparing(part, other) {
-        return {
-            comparison: part.model.compareWith(other.model),
-            mineName: part.model.name || this.labelOf(part),
-            theirsName: other.model.name || this.labelOf(other),
-            document: this.container?.ownerDocument ?? globalThis.document,
-        };
-    }
-
-    /**
-     * Ask for a file (as `from`'s Open… does) and open it in a new tab,
-     * leaving `from`'s model as it is. Returns the new part, or null.
-     */
-    async openInNewTab(from) {
-        const chosen = await from.file.choose();
-        if (!chosen) return null;
-        const part = this.newModel();
-        part.file.adopt(chosen);
-        return part;
-    }
-
-    /**
-     * Close a model's tab; with unsaved changes, only once confirmed. The last
-     * one closed leaves a new, empty model. Returns whether it closed.
-     */
-    closeModel(id) {
-        const part = this.registry?.get(id);
-        if (!part || !this.modelIds.includes(id)) return false;
-        if (part.model?.isDirty?.() && !this.confirm(`"${this.labelOf(part)}" has unsaved changes. Close it anyway?`)) return false;
-        this.work.close(id);
-        this.modelIds = this.modelIds.filter(m => m !== id);
-        if (part.keepId) this.library?.setOpen(part.keepId, false);   // kept, not reopened next time
-        this.registry.remove(id);
-        if (!this.modelIds.length) this.newModel();
-        else this.activeModel()?.file?.showState?.();
-        return true;
-    }
-
-    /** A model's tab label: what its toolbar and the page title call it (ModelFile#label). */
-    labelOf(part) {
-        return part.fileLabel;
-    }
-
-    /** An editor part's file or saved state changed: its tab says so. */
-    fileStateChanged(part) {
-        part.title = this.labelOf(part);
-        this.work?.refreshLabels();
-    }
-
-    /**
-     * What can be done with one open model, for its tab's right-click menu:
-     * Save and Save As… (when it saves files), Duplicate model, Compare with ▸
-     * and Merge from ▸ (the other open models, then the bases), This browser ▸
-     * (with `keep`), Close model and Close other models.
-     */
-    tabMenuItems(part) {
-        const saves = !!part.fileFormats?.().length;
-        const [, save, saveAs] = saves ? part.file.menuItems() : [];
-        const [compare, merge] = part.model?.compareWith ? this.toolItems(part) : [];
-        const keeping = this.keepItems(part);
-        const others = this.modelIds.filter(id => id !== part.id);
-        return [
-            ...(saves ? [save, saveAs, { separator: true }, { label: 'Duplicate model', action: () => this.duplicate(part) }] : []),
-            ...(compare ? [compare, merge] : []),
-            ...(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); } },
-        ];
-    }
-
-    /** Show a model's tab menu at a right-click; true when there was a model to show it for. */
-    showTabMenu(id, event) {
-        const part = this.modelIds.includes(id) ? this.registry?.get(id) : null;
-        if (!part) return false;
-        PopupMenu.show(event?.clientX ?? 0, event?.clientY ?? 0, this.tabMenuItems(part), this.container?.ownerDocument ?? globalThis.document);
-        return true;
-    }
-
-    /** Ask the user (the page's confirm). @protected */
-    confirm(message) {
-        const win = this.container?.ownerDocument?.defaultView ?? globalThis;
-        return typeof win.confirm === 'function' ? win.confirm(message) : true;
-    }
-
-    /** @private */
-    _freshId() {
-        let id;
-        do { id = `${this.id}-model-${this._next++}`; } while (this.registry.has(id));
-        return id;
-    }
-
-    dispose() {
-        this.work?.dispose();
-        for (const id of this.modelIds) this.registry?.remove(id);
-        this.modelIds = [];
-        super.dispose();
-    }
-}
+import { Part } from '../Part.js';
+import { WorkArea } from '../workArea.js';
+import { el } from '../dom.js';
+import { ModelCompareDialog, ModelMergeDialog } from '../../charting/ModelComparisonDialog.js';
+import { FormDialog } from '../../charting/FormDialog.js';
+import { PopupMenu } from '../../charting/PopupMenu.js';
+import { downloadBlob } from '../../exportImage.js';
+import { IndexedDbStore } from '../storage/KeyValueStore.js';
+import { ModelLibrary } from '../storage/ModelLibrary.js';
+import { BackupFolder } from '../storage/BackupFolder.js';
+import { Benchmark } from '../../charting/model/Benchmark.js';
+import { ContentSource } from '../../charting/content/ContentSource.js';
+import { ContentSources } from '../../charting/content/ContentSources.js';
+
+/**
+ * ModelsPart — several models open at once (as Archi's model tree holds
+ * several): one editor part per model (any EditorPart type, `editorType`),
+ * each a tab in a work area, so each keeps its own file, unsaved state and
+ * undo history, and two can sit side by side. Copy and paste go between
+ * them as between any two editors.
+ *
+ * The editor parts it hosts find it as `ctx.models` and offer, in their File
+ * menu, New model, Open… in a new tab and Close model; a model imported from
+ * a file opens in a tab of its own. Their Tools menu works across the open
+ * models (toolItems): compare one with another, and merge from another into
+ * it (ModelComparison). A tab shows its file's
+ * name and • while it has unsaved changes, and right-clicked, the menu of
+ * what can be done with that model (tabMenuItems); closing one with unsaved changes
+ * asks first; the page title follows the model in front. The last model
+ * closed leaves a new, empty one.
+ *
+ * Spec: `{ id, type: 'models', editorType, models?: [editor part spec], newModel?: editor part spec, bases?: [editor part spec], keep?, content?: [{label?, url}], openContent? }`:
+ * `models` are opened at the start (one empty one without), `newModel` is what New model makes.
+ *
+ * `bases` are reference models kept as given (never opened, edited or kept):
+ * File ▸ New ▸ From base makes a model as a copy of one, and Tools ▸ Compare
+ * with and Merge from offer them beside the other open models. File ▸
+ * Duplicate model opens a copy of the model in front, read back through its
+ * own file format.
+ *
+ * With `keep`, every model is kept in this browser (ModelLibrary over an
+ * IndexedDB store) a moment after each edit, in its editor's file format, so
+ * work outlives the page without saving a file; those open when the page
+ * 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.
+ *
+ * Content: models kept apart from the tools, by domain (modelengine, or any
+ * collection with its manifest; ContentSource). The sources are the bundle
+ * the page loaded (dist/modelengine.js), the spec's `content` (`[{label?, url}]`),
+ * the host's `contentSources` service, and those added from the menu (kept
+ * in this browser). File ▸ Open from ▸ lists, by source then domain, the items
+ * this editor's file formats read, worked out from their files; one chosen
+ * opens in a tab of its own, remembering where it came from, so its tab menu
+ * and Tools offer **Update from …**: the item read again, its changes
+ * reviewed as a merge (one undo step), so what was changed here is kept.
+ * With `openContent` ('first' or an item's id) a first visit opens that item.
+ */
+export class ModelsPart extends Part {
+    static type = 'models';
+
+    constructor(spec = {}) {
+        super(spec);
+        if (!spec.editorType) throw new TypeError('ModelsPart needs an editorType (the editor part type, e.g. "archimate-canvas")');
+        this.editorType = spec.editorType;
+        /** The ids of the editor parts open here, in the order opened. */
+        this.modelIds = [];
+        this.work = null;
+        this._next = 1;
+        /** With `keep`: the kept models and where backups go (set once the store is open). */
+        this.library = null;
+        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;
+        /** Where content comes from (made on render, when the host's services are known). */
+        this.content = null;
+    }
+
+    /** What a copy's name ends with (copyName). */
+    static COPY_SUFFIX = ' (copy)';
+
+    /** How long after an edit a model is kept (an edit's bursts make one write). */
+    static KEEP_DELAY = 800;
+
+    get registry() {
+        return this.ctx?.registry ?? null;
+    }
+
+    render() {
+        Object.assign(this.container.style, { display: 'flex', flexDirection: 'column', height: '100%' });
+        const host = this.container.appendChild(el({ style: { flex: '1 1 auto', minHeight: '0' } }));
+        this.work = new WorkArea({
+            placeholder: { cls: 'ws-workarea-empty', text: 'No model open' },
+            // A tab's × asks first when its model has unsaved changes (closeModel closes it).
+            beforeClose: (id) => { this.closeModel(id); return false; },
+            // A tab right-clicked: what can be done with its model.
+            tabMenu: (id, event) => this.showTabMenu(id, event),
+            onChange: () => this.activeModel()?.file?.showState?.(),
+        });
+        this.work.render(host, { ...this.ctx, models: this });
+        this.bases();   // copied now, before an open model (which may share the spec's data) is edited
+        const specs = this.spec.models?.length ? this.spec.models : [this.spec.newModel ?? {}];
+        const parts = specs.map(spec => this.newModel(spec));
+        if (parts[0]) this.work.focus(parts[0].id);
+        /** Resolves once kept models are reopened (with `keep`). */
+        this.ready = this.spec.keep ? this.startKeeping(parts) : Promise.resolve();
+        this.content ??= new ContentSources({ sources: [...(this.spec.content ?? []), ...(this.ctx?.contentSources ?? [])] });
+        /** Resolves once the content sources' manifests are read. */
+        this.contentReady = this.content.load();
+        /** Resolves once the spec's `openContent` item is open (or there was none to open). */
+        this.started = this.openStartContent();
+    }
+
+    /**
+     * The spec's `openContent` ('first', or an item's id): on a first visit
+     * (only the starting, untouched model open, nothing kept reopened) that
+     * item, from the first source with one this editor reads, opens in the
+     * empty model's place. Resolves to its part, or null.
+     */
+    async openStartContent() {
+        const wanted = this.spec.openContent;
+        if (!wanted) return null;
+        await this.ready;
+        await this.contentReady;
+        const [only, ...more] = this.models();
+        if (!only || more.length || only.keepId || only.contentOrigin || only.model?.isDirty?.()) return null;
+        const formats = this.readers();
+        for (const { source, items } of this.content.catalog) {
+            const item = items.find(i => (wanted === 'first' || i.id === wanted) && ContentSource.formatFor(i, formats));
+            if (!item) continue;
+            const part = await this.openContent(source, item);
+            if (part) this.closeModel(only.id);
+            return part;
+        }
+        return null;
+    }
+
+    // ===== Content: models kept apart from the tools =====
+
+    /** The file formats this workbench's editors read (a model's, else a base's). */
+    readers() {
+        const sample = this.models()[0] ?? this.bases()[0];
+        return sample?.fileFormats?.() ?? [];
+    }
+
+    /**
+     * File ▸ Open from ▸: each source, its items this editor reads by domain
+     * (a source that could not be read says why), Read again, then Add a
+     * source… and Remove ▸ for those added here.
+     */
+    contentItems() {
+        const formats = this.readers();
+        const sources = (this.content?.catalog ?? []).map(({ source, items, error }) => {
+            if (error) return { label: source.label, items: [{ label: `Could not read it: ${error}`, disabled: true }] };
+            const readable = items.filter(item => ContentSource.formatFor(item, formats));
+            const domains = [...new Set(readable.map(i => i.domainName))];
+            const entry = (item) => ({ label: item.name || item.id, title: item.description, action: () => this.openContent(source, item) });
+            return {
+                label: source.label,
+                items: readable.length
+                    ? domains.map(d => ({ label: d || 'Other', items: readable.filter(i => i.domainName === d).map(entry) }))
+                    : [{ label: 'Nothing this editor reads', disabled: true }],
+            };
+        });
+        const added = this.content?.added() ?? [];
+        return [
+            ...sources,
+            ...(sources.length ? [{ separator: true }, { label: 'Read them again', action: () => this.content.load() }] : []),
+            { label: 'Add a source…', action: () => this.askContentSource() },
+            ...(added.length ? [{ label: 'Remove a source', items: added.map(s => ({ label: s.label || s.url, action: () => this.content.remove(s.url) })) }] : []),
+        ];
+    }
+
+    /** Open a content item in a tab of its own, remembering where it came from. Resolves to the part, or null. */
+    async openContent(source, item) {
+        try {
+            const { model } = await source.open(item, this.readers());
+            const part = this.openModel(model);
+            part.contentOrigin = { source, itemId: item.id, version: item.version ?? null, name: item.name || item.id };
+            return part;
+        } catch (err) {
+            this.tell(`Could not open "${item.name || item.id}" from ${source.label}: ${err.message}`);
+            return null;
+        }
+    }
+
+    /**
+     * Update from …: the item this model was opened from, read again, its
+     * changes reviewed as a merge into this one (ModelMergeDialog; one undo
+     * step), so what was changed here stays. Resolves to the dialog, or null.
+     */
+    async updateFromContent(part) {
+        const origin = part.contentOrigin;
+        if (!origin) return null;
+        try {
+            await origin.source.manifest({ refresh: true });
+            const item = await origin.source.item(origin.itemId);
+            if (!item) throw new Error(`it no longer has "${origin.name}"`);
+            const { model } = await origin.source.open(item, this.readers());
+            const label = `${item.name || item.id} (${origin.source.label}${item.version ? `, version ${item.version}` : ''})`;
+            return this.merge(part, { model, fileLabel: label, compareLabel: label });
+        } catch (err) {
+            this.tell(`Could not update from ${origin.source.label}: ${err.message}`);
+            return null;
+        }
+    }
+
+    /** The model's Update from … item, when it was opened from content. */
+    contentUpdateItems(part) {
+        return part?.contentOrigin ? [{ label: `Update from ${part.contentOrigin.source.label}…`, action: () => this.updateFromContent(part) }] : [];
+    }
+
+    /** Add a source… : a manifest's url (a folder holding manifest.json, or the file) and what to call it. */
+    askContentSource() {
+        return new FormDialog({
+            title: 'Add a content source',
+            description: 'A collection of models with a manifest.json (modelengine, or one laid out like it): a folder\'s address, or the manifest\'s.',
+            fields: [
+                { key: 'url', label: 'Address', type: 'text', value: '', placeholder: 'https://…/modelengine/' },
+                { key: 'label', label: 'Called', type: 'text', value: '', placeholder: 'its name, from its manifest' },
+            ],
+            submitLabel: 'Add',
+            validate: ({ url }) => (String(url ?? '').trim() ? null : 'Give its address'),
+            document: this.container?.ownerDocument ?? globalThis.document,
+            onApply: ({ url, label }) => this.content.add({ url, label }),
+        }).open();
+    }
+
+    // ===== Kept in this browser =====
+
+    /** The store models and the backup folder are kept in: the browser's IndexedDB. A test gives its own. */
+    openStore() {
+        return IndexedDbStore.open('renderengine-models');
+    }
+
+    /**
+     * Open the store, reopen the models open when the page last closed (in
+     * place of the starting ones, unless those were changed meanwhile), and keep
+     * what is open now.
+     * @param {Array<EditorPart>} starting - The models the spec opened
+     */
+    async startKeeping(starting = []) {
+        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,
+            download: (name, data, mimeType) => downloadBlob(new (win.Blob ?? Blob)([data], { type: mimeType }), name),
+        });
+        await this.backups.restore();
+        const kept = this.ownKept(await this.library.openOnes());
+        for (const { id } of kept) {
+            const entry = await this.library.load(id);   // the list has no data; the entry has
+            if (entry) this.openKept(entry);
+        }
+        if (kept.length) for (const part of starting) if (!part.model?.isDirty?.()) this.closeModel(part.id);
+        for (const part of this.models()) if (part.keepId) await this.keep(part);
+    }
+
+    /** Keep a model in this browser now (its editor's keepEntry), as open. */
+    async keep(part) {
+        if (!this.library || part.keepOff) return null;
+        const entry = part.keepEntry?.();
+        if (!entry) return null;
+        part.keepId ??= ModelLibrary.newId();
+        return this.library.keep({ ...entry, id: part.keepId, editorType: this.editorType, open: this.modelIds.includes(part.id) });
+    }
+
+    /** A model was edited: keep it a moment later (a burst of edits, one write). */
+    modelEdited(part) {
+        if (!this.library) return;
+        clearTimeout(this._pending.get(part.id));
+        this._pending.set(part.id, setTimeout(() => { this._pending.delete(part.id); this.keep(part); }, ModelsPart.KEEP_DELAY));
+    }
+
+    /**
+     * The kept models that are this workbench's: kept by its kind of editor
+     * (`editorType`), or (kept before that was recorded) in one of its formats.
+     * Pages of other editors keep theirs in the same browser; those are not read here.
+     */
+    ownKept(entries) {
+        const labels = new Set(this.formatLabels());
+        return entries.filter(e => (e.editorType ? e.editorType === this.editorType : labels.has(e.format)));
+    }
+
+    /** The labels of this workbench's editors' file formats. */
+    formatLabels() {
+        const sample = this.models()[0] ?? this.bases()[0];
+        return (sample?.fileFormats?.() ?? []).map(f => f.label);
+    }
+
+    /** Open a kept model in a new tab, read in its format. Returns the part, or null when it is not one this editor reads. */
+    openKept(entry) {
+        if (!this.ownKept([entry]).length) {
+            this.tell(`"${entry.name}" was kept by another editor (${entry.editorType ?? entry.format}); open it there.`);
+            return null;
+        }
+        const part = this.newModel();
+        const format = part.fileFormats().find(f => f.label === entry.format);
+        try {
+            part.replaceModel(format.import(entry.data));
+        } catch (err) {
+            this.closeModel(part.id);
+            this.tell(`"${entry.name}" could not be read back: ${err.message}`);
+            return null;
+        }
+        part.keepId = entry.id;
+        part.file.name = entry.fileName ?? null;
+        part.file.showState();
+        this.work.focus(part.id);
+        return part;
+    }
+
+    /**
+     * File ▸ This browser, with `keep`: open a kept model, stop keeping this
+     * one, back up every kept model, choose where backups go.
+     */
+    keepItems(part) {
+        if (!this.library) return [];
+        return [
+            { label: 'Open a kept model…', action: () => this.askOpenKept() },
+            { label: 'Stop keeping this model', disabled: !part.keepId || undefined, action: () => this.stopKeeping(part) },
+            { separator: true },
+            { label: 'Back up kept models now', action: () => this.backUpAndTell() },
+            { label: `Backup folder: ${this.backups.location}…`, disabled: !this.backups.supported || undefined, action: () => this.chooseBackupFolder() },
+            ...(this.backups.dir ? [{ label: 'Back up to downloads instead', action: () => this.backups.forget() }] : []),
+        ];
+    }
+
+    /** Choose a kept model not open now, and open it. */
+    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 (${this.keptWhere}) is open.`); return null; }
+        return new FormDialog({
+            title: 'Open a kept model',
+            fields: [{
+                key: 'id', label: 'Model', type: 'select', value: entries[0].id,
+                choices: entries.map(e => [e.id, `${e.name} (kept ${new Date(e.keptAt).toLocaleString()})`]),
+            }],
+            submitLabel: 'Open', idPrefix: 'kept-',
+            document: this.container?.ownerDocument ?? globalThis.document,
+            onApply: async ({ id }) => { const entry = await this.library.load(id); if (entry) this.openKept(entry); },
+        }).open();
+    }
+
+    /** Forget a model in this browser, and keep it no more. */
+    async stopKeeping(part) {
+        if (part.keepId) await this.library.remove(part.keepId);
+        part.keepId = null;
+        part.keepOff = true;
+    }
+
+    /** Every kept model as a backup file: its name, in its format's extension. */
+    async backupFiles() {
+        const sample = this.models()[0];
+        const formats = sample?.fileFormats?.() ?? [];
+        const files = [];
+        for (const meta of this.ownKept(await this.library.list())) {
+            const entry = await this.library.load(meta.id);
+            const format = formats.find(f => f.label === entry.format);
+            const ext = (format?.accept ?? '').split(',')[0].trim() || '';
+            const base = String(entry.fileName ?? entry.name ?? 'model').replace(/\.[^.]+$/, '').replace(/[^A-Za-z0-9._-]+/g, '-') || 'model';
+            files.push({ name: `${base}${ext}`, data: entry.data, mimeType: 'application/octet-stream' });
+        }
+        return files;
+    }
+
+    /** Back up every kept model (what is open is kept first), and say where. */
+    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 (${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 };
+    }
+
+    /** Choose the backup folder (a click); one OneDrive, Google Drive or Dropbox syncs takes the backups to the cloud. */
+    async chooseBackupFolder() {
+        const dir = await this.backups.choose();
+        if (dir) this.tell(`Backups go into "${dir.name}" from now on, each named with the date and time.\n\nA folder that OneDrive, Google Drive or Dropbox syncs takes them to the cloud.`);
+        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;
+        win.alert?.(message);
+    }
+
+    /** The editor parts open here, in order. */
+    models() {
+        return this.modelIds.map(id => this.registry?.get(id)).filter(Boolean);
+    }
+
+    /** The editor part of the model in front (the selected tab of the active group). */
+    activeModel() {
+        const id = this.work?.activePart();
+        return id ? this.registry?.get(id) ?? null : null;
+    }
+
+    /**
+     * Open a new model in a tab: an editor part of `editorType` made from `spec`
+     * (default the spec's `newModel`, an empty model). Returns the part.
+     */
+    newModel(spec = this.spec.newModel ?? {}) {
+        const id = spec.id && !this.registry.has(spec.id) ? spec.id : this._freshId();
+        const part = this.registry.add({ ...spec, id, type: this.editorType });
+        this.modelIds.push(id);
+        this.work.open(id);
+        this.fileStateChanged(part);
+        return part;
+    }
+
+    /**
+     * Open a model made elsewhere (one imported from a file) in a new tab,
+     * as it is: nothing to undo, not yet saved to a file. Returns the part.
+     */
+    openModel(model) {
+        const part = this.newModel();
+        part.replaceModel(model);
+        this.work.focus(part.id);
+        this.fileStateChanged(part);
+        this.keep(part);   // an import is kept straight away
+        return part;
+    }
+
+    // ===== Bases, and copies =====
+
+    /**
+     * The base models (spec `bases`): a part each, made from a copy of its spec
+     * and never added to the workbench, so nothing done to an open model reaches it.
+     */
+    bases() {
+        return (this._bases ??= (this.spec.bases ?? []).map((spec, i) =>
+            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');
+        return plain.endsWith(ModelsPart.COPY_SUFFIX) ? plain : `${plain}${ModelsPart.COPY_SUFFIX}`;
+    }
+
+    /** A spec's own copy: its data apart from the spec's (a spec is JSON). */
+    static copySpec(spec) {
+        return JSON.parse(JSON.stringify(spec ?? {}));
+    }
+
+    /** What a base is called in menus. */
+    baseLabel(base, i) {
+        return base.model?.name || base.spec.name || `Base ${i + 1}`;
+    }
+
+    /** Open a new model as a copy of a base (by its place in `bases`), named as a copy (copyName). Returns the part. */
+    newFromBase(index) {
+        const spec = this.bases()[index]?.spec;   // the base's own copy, as given
+        if (!spec) return null;
+        const { id, keepId, ...copy } = ModelsPart.copySpec(spec);
+        const part = this.newModel({ ...copy, name: ModelsPart.copyName(copy.name ?? this.baseLabel(this.bases()[index], index)) });
+        this.work.focus(part.id);
+        return part;
+    }
+
+    /**
+     * 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() {
+        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) })),
+        ];
+    }
+
+    /**
+     * Open a copy of a model in a new tab: written and read back in its own
+     * file format (keepEntry), named as a copy (copyName). Null when it has no format.
+     */
+    duplicate(part) {
+        const entry = part.keepEntry?.();
+        if (!entry) return null;
+        const format = part.fileFormats().find(f => f.label === entry.format);
+        const model = format.import(entry.data);
+        model.name = ModelsPart.copyName(model.name || entry.name);
+        return this.openModel(model);
+    }
+
+    /**
+     * The Tools menu's items for one open model (`part`): Compare with and
+     * Merge from, each a submenu of the other open models, then the bases.
+     */
+    toolItems(part) {
+        const others = this.models().filter(m => m !== part);
+        const bases = this.bases().map((base, i) => ({ base, label: `${this.baseLabel(base, i)} (base)` }));
+        const each = (act) => (others.length || bases.length
+            ? [
+                ...others.map(other => ({ label: this.labelOf(other), action: () => act(part, other) })),
+                ...(others.length && bases.length ? [{ separator: true }] : []),
+                ...bases.map(({ base, label }) => ({ label, action: () => act(part, base) })),
+            ]
+            : [{ label: 'Open another model first', disabled: true }]);
+        const own = part.modelMenuItems?.() ?? [];
+        return [
+            { label: 'Compare with', items: each((a, b) => this.compare(a, b)) },
+            { label: 'Merge from', items: each((a, b) => this.merge(a, b)) },
+            ...this.contentUpdateItems(part),
+            // The model's own tools (Find likely duplicates…).
+            ...(own.length ? [{ separator: true }, ...own] : []),
+            { 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)] : []),
+        ];
+    }
+
+    /** How `part`'s model differs from `other`'s, shown (ModelCompareDialog); its Merge… goes on to merge. */
+    compare(part, other) {
+        return new ModelCompareDialog({
+            ...this._comparing(part, other),
+            onMerge: () => this.merge(part, other),
+        }).open();
+    }
+
+    /** Choose what to bring from `other`'s model into `part`'s, then bring it: one undo step there. */
+    merge(part, other) {
+        return new ModelMergeDialog({
+            ...this._comparing(part, other),
+            onMerge: (command) => part.runModelEdit(command),
+        }).open();
+    }
+
+    /** @private */
+    _comparing(part, other) {
+        return {
+            comparison: part.model.compareWith(other.model),
+            mineName: part.model.name || this.labelOf(part),
+            theirsName: other.compareLabel ?? (other.model.name || this.labelOf(other)),
+            document: this.container?.ownerDocument ?? globalThis.document,
+        };
+    }
+
+    /**
+     * Ask for a file (as `from`'s Open… does) and open it in a new tab,
+     * leaving `from`'s model as it is. Returns the new part, or null.
+     */
+    async openInNewTab(from) {
+        const chosen = await from.file.choose();
+        if (!chosen) return null;
+        const part = this.newModel();
+        part.file.adopt(chosen);
+        return part;
+    }
+
+    /**
+     * Close a model's tab; with unsaved changes, only once confirmed. The last
+     * one closed leaves a new, empty model. Returns whether it closed.
+     */
+    closeModel(id) {
+        const part = this.registry?.get(id);
+        if (!part || !this.modelIds.includes(id)) return false;
+        if (part.model?.isDirty?.() && !this.confirm(`"${this.labelOf(part)}" has unsaved changes. Close it anyway?`)) return false;
+        this.work.close(id);
+        this.modelIds = this.modelIds.filter(m => m !== id);
+        if (part.keepId) this.library?.setOpen(part.keepId, false);   // kept, not reopened next time
+        this.registry.remove(id);
+        if (!this.modelIds.length) this.newModel();
+        else this.activeModel()?.file?.showState?.();
+        return true;
+    }
+
+    /** A model's tab label: what its toolbar and the page title call it (ModelFile#label). */
+    labelOf(part) {
+        return part.fileLabel;
+    }
+
+    /** An editor part's file or saved state changed: its tab says so. */
+    fileStateChanged(part) {
+        part.title = this.labelOf(part);
+        this.work?.refreshLabels();
+    }
+
+    /**
+     * What can be done with one open model, for its tab's right-click menu:
+     * Save and Save As… (when it saves files), Duplicate model, Compare with ▸
+     * and Merge from ▸ (the other open models, then the bases), the model's own
+     * tools (Find likely duplicates…: `part.modelMenuItems()`), This browser ▸
+     * (with `keep`), Close model and Close other models.
+     */
+    tabMenuItems(part) {
+        const saves = !!part.fileFormats?.().length;
+        const [, save, saveAs] = saves ? part.file.menuItems() : [];
+        const [compare, merge] = part.model?.compareWith ? this.toolItems(part) : [];
+        const keeping = this.keepItems(part);
+        const others = this.modelIds.filter(id => id !== part.id);
+        const own = part.modelMenuItems?.() ?? [];
+        return [
+            ...(saves ? [save, saveAs, { separator: true }, { label: 'Duplicate model', action: () => this.duplicate(part) }] : []),
+            ...(compare ? [compare, merge] : []),
+            ...this.contentUpdateItems(part),
+            ...own,
+            ...(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); } },
+        ];
+    }
+
+    /** Show a model's tab menu at a right-click; true when there was a model to show it for. */
+    showTabMenu(id, event) {
+        const part = this.modelIds.includes(id) ? this.registry?.get(id) : null;
+        if (!part) return false;
+        PopupMenu.show(event?.clientX ?? 0, event?.clientY ?? 0, this.tabMenuItems(part), this.container?.ownerDocument ?? globalThis.document);
+        return true;
+    }
+
+    /** Ask the user (the page's confirm). @protected */
+    confirm(message) {
+        const win = this.container?.ownerDocument?.defaultView ?? globalThis;
+        return typeof win.confirm === 'function' ? win.confirm(message) : true;
+    }
+
+    /** @private */
+    _freshId() {
+        let id;
+        do { id = `${this.id}-model-${this._next++}`; } while (this.registry.has(id));
+        return id;
+    }
+
+    dispose() {
+        this.work?.dispose();
+        for (const id of this.modelIds) this.registry?.remove(id);
+        this.modelIds = [];
+        super.dispose();
+    }
+}