@peter.prib/renderengine 0.2.6 → 0.2.10

package/src/workspace/parts/ModelsPart.js

@@ -1,192 +1,483 @@
-import { Part } from '../Part.js';
-import { WorkArea } from '../workArea.js';
-import { el } from '../dom.js';
-import { ModelCompareDialog, ModelMergeDialog } from '../../charting/ModelComparisonDialog.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; 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 }`:
- * `models` are opened at the start (one empty one without), `newModel` is what New model makes.
- */
-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;
-    }
-
-    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; },
-            onChange: () => this.activeModel()?.file?.showState?.(),
-        });
-        this.work.render(host, { ...this.ctx, models: this });
-        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);
-    }
-
-    /** 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);
-        return part;
-    }
-
-    /**
-     * The Tools menu's items for one open model (`part`): Compare with and
-     * Merge from, each a submenu of the other open models.
-     */
-    toolItems(part) {
-        const others = this.models().filter(m => m !== part);
-        const each = (act) => (others.length
-            ? others.map(other => ({ label: this.labelOf(other), action: () => act(part, other) }))
-            : [{ 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)) },
-        ];
-    }
-
-    /** 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);
-        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();
-    }
-
-    /** 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';
+
+/**
+ * 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.
+ */
+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();
+    }
+
+    /** 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();
+        this.library = 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 in this browser 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 in this browser 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;
+    }
+
+    /** 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 })));
+    }
+
+    /** 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;
+    }
+
+    /** File ▸ New ▸'s items from bases: From base: <name>, one a base. */
+    baseItems() {
+        return this.bases().map((base, i) => ({ label: `From base: ${this.baseLabel(base, i)}`, action: () => this.newFromBase(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)) },
+        ];
+    }
+
+    /** 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 browser', 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();
+    }
+}