@peter.prib/renderengine 0.2.6 → 0.2.10

package/src/charting/ModelCheckDialog.js

@@ -0,0 +1,63 @@
+import { el } from '../workspace/dom.js';
+import { FormDialog } from './FormDialog.js';
+
+/**
+ * ModelCheckDialog — a model check's findings (ModelChecker#run), listed:
+ * each a button (⚠ a warning, ℹ for a look) that shows what it names
+ * (`onReveal`), with what can be done about it beside (`actionsFor`), or
+ * "nothing found". Any editor or part that checks a model shows it this way.
+ */
+export class ModelCheckDialog {
+    /**
+     * @param {Object} options
+     * @param {Array<Object>} options.findings
+     * @param {(finding: Object) => void} [options.onReveal] - Show what a finding names
+     * @param {(finding: Object) => Array<{label: string, action: Function}>} [options.actionsFor]
+     * @param {Document} [options.document]
+     */
+    constructor({ findings, onReveal = () => {}, actionsFor = () => [], document: doc = globalThis.document }) {
+        this.findings = findings;
+        this.onReveal = onReveal;
+        this.actionsFor = actionsFor;
+        this.document = doc;
+    }
+
+    /** The dialog's title: how many findings. */
+    get title() {
+        const n = this.findings.length;
+        return `Model check: ${n} finding${n === 1 ? '' : 's'}`;
+    }
+
+    /** Open it; returns the FormDialog. */
+    open() {
+        let dialog = null;
+        const list = el({
+            style: { gridColumn: '1 / -1', display: 'flex', flexDirection: 'column', gap: '4px', minWidth: '420px' },
+            children: this.findings.length ? this.findings.map(finding => ({
+                style: { display: 'flex', gap: '4px', alignItems: 'stretch' },
+                children: [
+                    {
+                        tag: 'button',
+                        attrs: { type: 'button', title: 'Show it', 'data-code': finding.code },
+                        style: { flex: '1', textAlign: 'left', padding: '4px 6px', border: '1px solid #ddd', borderRadius: '3px', background: finding.severity === 'warning' ? '#fff6e5' : '#f5f8fc', cursor: 'pointer' },
+                        text: `${finding.severity === 'warning' ? '⚠' : 'ℹ'} ${finding.message}`,
+                        on: { click: () => { dialog?.close(); this.onReveal(finding); } },
+                    },
+                    ...this.actionsFor(finding).map(act => ({
+                        tag: 'button', attrs: { type: 'button', 'data-action': act.label }, text: act.label,
+                        style: { padding: '4px 8px', cursor: 'pointer' },
+                        on: { click: () => { dialog?.close(); act.action(); } },
+                    })),
+                ],
+            })) : [{ text: 'Nothing found: the model passes every check.' }],
+        }, this.document);
+        dialog = new FormDialog({
+            title: this.title,
+            fields: [{ key: 'findings', label: '', type: 'custom', element: list, read: () => null }],
+            submitLabel: 'Close',
+            document: this.document,
+            onApply: () => {},
+        });
+        return dialog.open();
+    }
+}

package/src/charting/ModelChecker.js

@@ -0,0 +1,26 @@
+/**
+ * ModelChecker — checks over a model: what is wrong or worth a look in it.
+ * Each check is a method listed by `checks()`, run in that order, so a
+ * subclass adds, drops or reorders them; `run()` gives every finding. The
+ * base of ViewSetChecker (models of views) and DataModelChecker (data
+ * models). DOM-free and advisory: findings are shown, never enforced.
+ *
+ * Each finding: `{ code, severity: 'warning'|'info', message, kind, ids }`,
+ * `kind` saying what the ids name (a view, an entity, ...).
+ */
+export class ModelChecker {
+    /** @param {Object} model */
+    constructor(model) {
+        this.model = model;
+    }
+
+    /** The checks to run, in the order their findings are listed. None here. */
+    checks() {
+        return [];
+    }
+
+    /** Every finding. @returns {Array<Object>} */
+    run() {
+        return this.checks().flatMap(check => check.call(this));
+    }
+}

package/src/charting/RowsField.js

@@ -0,0 +1,127 @@
+import { el } from '../workspace/dom.js';
+
+/**
+ * RowsField — the control a FormDialog shows for a `rows` field: a list of
+ * items edited as a table, a row each, its columns from the field
+ * (`columns: [{ key, label, type?: 'text'|'checkbox'|'select', choices?,
+ * suggestions?, placeholder?, width? }]`), each row movable up and down and
+ * removable, and **Add** for a new one (`addLabel`). It reads back as the rows
+ * in their order, each the item it was made from with what the columns say
+ * laid over it, so what a dialog does not show (an attribute's ISO 20022
+ * type, say) is kept: an empty text or an unticked box leaves its key out. A
+ * new row left empty is no row.
+ */
+export class RowsField {
+    /**
+     * @param {Object} field - The FormDialog field (`columns`, `value`: the items, `addLabel`)
+     * @param {Document} doc
+     * @param {string} [id] - The table's element id
+     */
+    constructor(field, doc, id = '') {
+        this.field = field;
+        this.doc = doc;
+        this.id = id;
+        /** Each row's element and how to read it, in display order. */
+        this.rows = [];
+    }
+
+    /** The control: the table, its rows, and Add. */
+    element() {
+        const { columns, value = [], addLabel = 'Add' } = this.field;
+        const lists = columns.filter(c => c.suggestions).map(c => ({
+            tag: 'datalist', attrs: { id: this._listId(c) }, children: c.suggestions.map(v => ({ tag: 'option', attrs: { value: v } })),
+        }));
+        this.root = el({
+            attrs: { id: this.id }, style: { display: 'flex', flexDirection: 'column', gap: '4px' },
+            children: [
+                {
+                    tag: 'table', style: { borderCollapse: 'collapse', fontSize: '12px' },
+                    children: [
+                        { tag: 'thead', children: [{ tag: 'tr', children: [...columns.map(c => ({ tag: 'th', text: c.label, style: { textAlign: 'left', fontWeight: 'normal', color: '#666', padding: '0 4px' } })), { tag: 'th' }] }] },
+                        { tag: 'tbody', ref: (n) => { this.body = n; } },
+                    ],
+                },
+                ...lists,
+                { tag: 'button', attrs: { type: 'button', 'data-action': 'add' }, text: `+ ${addLabel}`, style: { alignSelf: 'flex-start' }, on: { click: () => this.add() } },
+            ],
+        }, this.doc);
+        for (const item of value) this.add(item);
+        return this.root;
+    }
+
+    /** Add a row for an item (none: an empty one). Returns its element. */
+    add(item = null) {
+        const readers = [];
+        const cell = (c) => {
+            const current = item?.[c.key];
+            const width = c.width ?? (c.type === 'checkbox' ? '40px' : undefined);
+            let control;
+            if (c.type === 'checkbox') {
+                control = { tag: 'input', attrs: { type: 'checkbox', checked: !!current, 'data-key': c.key }, ref: (n) => { n.checked = !!current; readers.push([c, () => n.checked]); } };
+            } else if (c.type === 'select') {
+                const choices = c.choices.some(([v]) => v === String(current ?? '')) || current == null ? c.choices : [[String(current), String(current)], ...c.choices];
+                control = {
+                    // The value set as well as the option marked: a parent's ref runs after its children are in.
+                    tag: 'select', attrs: { 'data-key': c.key }, ref: (n) => { n.value = String(current ?? choices[0]?.[0] ?? ''); readers.push([c, () => n.value]); },
+                    children: choices.map(([v, text]) => ({ tag: 'option', attrs: { value: v, selected: v === String(current ?? '') }, text })),
+                };
+            } else {
+                control = {
+                    tag: 'input', attrs: { type: 'text', value: current == null ? '' : String(current), placeholder: c.placeholder, list: c.suggestions ? this._listId(c) : undefined, 'data-key': c.key },
+                    style: { width: '100%', boxSizing: 'border-box' }, ref: (n) => { n.value = current == null ? '' : String(current); readers.push([c, () => String(n.value ?? '').trim()]); },
+                };
+            }
+            return { tag: 'td', style: { padding: '1px 2px', ...(width && { width }) }, children: [control] };
+        };
+        const button = (text, title, action) => ({ tag: 'button', attrs: { type: 'button', title, 'data-action': action }, text, style: { padding: '0 4px' } });
+        let row;
+        const node = el({
+            tag: 'tr',
+            children: [
+                ...this.field.columns.map(cell),
+                {
+                    tag: 'td', style: { whiteSpace: 'nowrap' },
+                    children: [
+                        { ...button('↑', 'Move up', 'up'), on: { click: () => this.move(row, -1) } },
+                        { ...button('↓', 'Move down', 'down'), on: { click: () => this.move(row, 1) } },
+                        { ...button('✕', 'Remove', 'remove'), on: { click: () => this.remove(row) } },
+                    ],
+                },
+            ],
+        }, this.doc);
+        row = { node, item, readers };
+        this.rows.push(row);
+        this.body.appendChild(node);
+        return node;
+    }
+
+    /** Move a row up (-1) or down (1). */
+    move(row, by) {
+        const i = this.rows.indexOf(row), j = i + by;
+        if (i < 0 || j < 0 || j >= this.rows.length) return;
+        [this.rows[i], this.rows[j]] = [this.rows[j], this.rows[i]];
+        for (const r of this.rows) this.body.appendChild(r.node);
+    }
+
+    remove(row) {
+        this.rows = this.rows.filter(r => r !== row);
+        row.node.remove();
+    }
+
+    /** The rows as items, in order (see the class). */
+    read() {
+        return this.rows.map(({ item, readers }) => {
+            const out = { ...(item ?? {}) };
+            for (const [c, read] of readers) {
+                const v = read();
+                if (v === '' || v === false) delete out[c.key];
+                else out[c.key] = v;
+            }
+            return out;
+        }).filter((out, i) => this.rows[i].item || this.field.columns.some(c => out[c.key] !== undefined));
+    }
+
+    _listId(column) {
+        return `${this.id || 'rows'}-${column.key}-suggestions`;
+    }
+}

package/src/charting/ViewTabStrip.js

@@ -1,81 +1,94 @@
-import { el } from '../workspace/dom.js';
-import { PopupMenu } from './PopupMenu.js';
-
-/**
- * ViewTabStrip — a row (or column) of tabs, one per view, with an optional
- * close button and a right-click menu per tab. Stateless: render() builds the
- * strip from the items given.
- */
-export class ViewTabStrip {
-    /**
-     * @param {Object} options
-     * @param {'horizontal'|'vertical'} [options.orientation]
-     * @param {(id: string) => void} options.onSelect
-     * @param {(id: string) => void} [options.onClose] - Shows a × on each tab
-     * @param {(id: string) => Array} [options.menuItems] - PopupMenu items for a tab
-     * @param {Document} [options.document]
-     */
-    constructor({ orientation = 'horizontal', onSelect, onClose = null, menuItems = () => [], document: doc = document }) {
-        this.orientation = orientation;
-        this.onSelect = onSelect;
-        this.onClose = onClose;
-        this.menuItems = menuItems;
-        this.doc = doc;
-    }
-
-    /**
-     * @param {Array<{id: string, title: string}>} items
-     * @param {string} activeId
-     * @returns {HTMLElement}
-     */
-    render(items, activeId) {
-        const vertical = this.orientation === 'vertical';
-        return el({
-            attrs: { role: 'tablist', 'aria-orientation': this.orientation },
-            style: {
-                flex: vertical ? '0 0 150px' : '0 0 auto', display: 'flex', flexDirection: vertical ? 'column' : 'row',
-                gap: '2px', background: '#f0f0f0', padding: '4px 8px', fontSize: '12px',
-                borderRight: vertical ? '1px solid #ccc' : 'none', borderBottom: vertical ? 'none' : '1px solid #ccc',
-                overflowX: vertical ? 'visible' : 'auto', overflowY: vertical ? 'auto' : 'visible',
-            },
-            children: items.map(({ id, title }) => this._tab(id, title, id === activeId, vertical)),
-        }, this.doc);
-    }
-
-    _tab(id, title, active, vertical) {
-        const menuItems = this.menuItems(id);
-        return {
-            attrs: { role: 'tab', tabindex: '0', 'aria-selected': String(active), 'data-view-id': id },
-            style: {
-                display: 'flex', alignItems: 'center', gap: '6px', padding: '4px 12px', border: '1px solid #ccc',
-                cursor: 'pointer', fontSize: '12px', whiteSpace: 'nowrap', userSelect: 'none',
-                borderRadius: vertical ? '3px' : '3px 3px 0 0',
-                background: active ? '#fff' : '#e8e8e8', fontWeight: active ? 'bold' : 'normal',
-            },
-            on: {
-                click: () => this.onSelect(id),
-                keydown: (e) => {
-                    if (e.key === 'Enter' || e.key === ' ') {
-                        e.preventDefault();
-                        this.onSelect(id);
-                    }
-                },
-                contextmenu: (e) => {
-                    if (!menuItems.length) return;
-                    e.preventDefault();
-                    PopupMenu.show(e.clientX, e.clientY, menuItems, this.doc);
-                },
-            },
-            children: [
-                { tag: 'span', text: title },
-                this.onClose && {
-                    tag: 'button',
-                    text: '×',
-                    attrs: { type: 'button', 'aria-label': `Close ${title}`, title: 'Close tab' },
-                    style: { border: 'none', background: 'none', padding: '0', cursor: 'pointer', fontSize: '14px', lineHeight: '1', color: '#888' },
-                    on: { click: (e) => { e.stopPropagation(); this.onClose(id); } },
-                },
-            ].filter(Boolean),
-        };
-    }
-}
+import { el } from '../workspace/dom.js';
+import { PopupMenu } from './PopupMenu.js';
+
+/**
+ * ViewTabStrip — a row (or column) of tabs, one per open view, as a browser
+ * has them: an optional × to close a tab (`onClose`; `canClose` says which may
+ * be), a + after them to add one (`onAdd`), and a right-click menu per tab.
+ * Stateless: render() builds the strip from the items given.
+ */
+export class ViewTabStrip {
+    /**
+     * @param {Object} options
+     * @param {'horizontal'|'vertical'} [options.orientation]
+     * @param {(id: string) => void} options.onSelect
+     * @param {(id: string) => void} [options.onClose] - Shows a × on each tab
+     * @param {(id: string) => boolean} [options.canClose] - Which tabs get the × (default all)
+     * @param {(event: Event) => void} [options.onAdd] - Shows a + after the tabs
+     * @param {(id: string) => Array} [options.menuItems] - PopupMenu items for a tab
+     * @param {Document} [options.document]
+     */
+    constructor({ orientation = 'horizontal', onSelect, onClose = null, canClose = () => true, onAdd = null, menuItems = () => [], document: doc = document }) {
+        this.orientation = orientation;
+        this.onSelect = onSelect;
+        this.onClose = onClose;
+        this.canClose = canClose;
+        this.onAdd = onAdd;
+        this.menuItems = menuItems;
+        this.doc = doc;
+    }
+
+    /**
+     * @param {Array<{id: string, title: string}>} items
+     * @param {string} activeId
+     * @returns {HTMLElement}
+     */
+    render(items, activeId) {
+        const vertical = this.orientation === 'vertical';
+        return el({
+            attrs: { role: 'tablist', 'aria-orientation': this.orientation },
+            style: {
+                flex: vertical ? '0 0 150px' : '0 0 auto', display: 'flex', flexDirection: vertical ? 'column' : 'row',
+                gap: '2px', background: '#f0f0f0', padding: '4px 8px', fontSize: '12px',
+                borderRight: vertical ? '1px solid #ccc' : 'none', borderBottom: vertical ? 'none' : '1px solid #ccc',
+                overflowX: vertical ? 'visible' : 'auto', overflowY: vertical ? 'auto' : 'visible',
+            },
+            children: [
+                ...items.map(({ id, title }) => this._tab(id, title, id === activeId, vertical)),
+                this.onAdd && {
+                    tag: 'button', text: '+',
+                    attrs: { type: 'button', 'aria-label': 'New view', title: 'New view', 'data-tab-add': '' },
+                    style: { border: '1px solid transparent', background: 'none', cursor: 'pointer', fontSize: '15px', lineHeight: '1', color: '#555', padding: '2px 8px' },
+                    on: { click: (e) => this.onAdd(e) },
+                },
+            ].filter(Boolean),
+        }, this.doc);
+    }
+
+    _tab(id, title, active, vertical) {
+        const menuItems = this.menuItems(id);
+        return {
+            attrs: { role: 'tab', tabindex: '0', 'aria-selected': String(active), 'data-view-id': id },
+            style: {
+                display: 'flex', alignItems: 'center', gap: '6px', padding: '4px 12px', border: '1px solid #ccc',
+                cursor: 'pointer', fontSize: '12px', whiteSpace: 'nowrap', userSelect: 'none',
+                borderRadius: vertical ? '3px' : '3px 3px 0 0',
+                background: active ? '#fff' : '#e8e8e8', fontWeight: active ? 'bold' : 'normal',
+            },
+            on: {
+                click: () => this.onSelect(id),
+                keydown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        this.onSelect(id);
+                    }
+                },
+                contextmenu: (e) => {
+                    if (!menuItems.length) return;
+                    e.preventDefault();
+                    PopupMenu.show(e.clientX, e.clientY, menuItems, this.doc);
+                },
+            },
+            children: [
+                { tag: 'span', text: title },
+                this.onClose && this.canClose(id) && {
+                    tag: 'button',
+                    text: '×',
+                    attrs: { type: 'button', 'aria-label': `Close ${title}`, title: 'Close tab' },
+                    style: { border: 'none', background: 'none', padding: '0', cursor: 'pointer', fontSize: '14px', lineHeight: '1', color: '#888' },
+                    on: { click: (e) => { e.stopPropagation(); this.onClose(id); } },
+                },
+            ].filter(Boolean),
+        };
+    }
+}

package/src/charting/datamodel/BianLandscapeReader.js

@@ -0,0 +1,185 @@
+import { BianNotation } from '../../bian.js';
+import { ServiceDomain } from './ServiceDomain.js';
+import { parseArchiFile } from '../../archimateArchive.js';
+import { parseExchangeModel } from '../../archimateExchangeFormat.js';
+import { ZipArchive } from '../../zip/ZipArchive.js';
+
+/** A stereotype as compared: no case, no spaces ('Service Domain' is 'servicedomain'). */
+const plainWord = (text) => String(text ?? '').toLowerCase().replace(/[\s_-]+/g, '');
+
+/**
+ * BianLandscapeReader — service domains from BIAN's published service
+ * landscape, an ArchiMate model (an Archi file or the Exchange Format, as
+ * parseArchiFile / parseExchangeModel give it), rather than retyped.
+ *
+ * BIAN's own model (its v14 landscape) marks each element with a stereotype:
+ * a business area is a Grouping marked BusinessArea, composed of business
+ * domains (Capabilities marked BusinessDomain), each composed of service
+ * domains (Capabilities marked ServiceDomain); other Groupings aggregate
+ * service domains as overlays (a value chain, a release wave). Where the file
+ * keeps the stereotypes (an Archi specialization, or a "Stereotype" property:
+ * `stereotypeKeys`), they say which element is which: a service domain's
+ * business domain is the container marked so, its area the one that holds that.
+ * Without them it goes by structure: a service domain is a service-domain-type
+ * element nothing of those types sits inside, its nearest container its
+ * business domain and the outermost its area.
+ *
+ * What contains what: a composition from the container to what it holds before
+ * an aggregation (an overlay's), and failing both, a box drawn inside another's
+ * in a view. A service domain's functional pattern is the one realizing it (an
+ * element named as a BIAN pattern, as BIAN's model has them), else a property
+ * (`patternKeys`); its asset a property (`assetKeys`). A pattern BIAN lacks is
+ * left for the model check to report.
+ */
+export class BianLandscapeReader {
+    /**
+     * @param {Object} [options]
+     * @param {string[]} [options.serviceDomainTypes] - Element types a service domain may be
+     * @param {string[]} [options.containerTypes] - Element types a business area or domain may be
+     * @param {string[]} [options.containmentTypes] - Relationship types from a container to what it holds, the first preferred
+     * @param {{serviceDomain: string, businessDomain: string, businessArea: string}} [options.stereotypes] - BIAN's stereotypes for each
+     * @param {string[]} [options.stereotypeKeys] - Property keys a stereotype may be under
+     * @param {string[]} [options.patternKeys] - Property keys naming its functional pattern
+     * @param {string[]} [options.assetKeys] - Property keys naming the asset it manages
+     */
+    constructor({
+        serviceDomainTypes = ['Capability'],
+        containerTypes = ['Grouping', 'Capability'],
+        containmentTypes = ['CompositionRelationship', 'AggregationRelationship'],
+        stereotypes = { serviceDomain: 'ServiceDomain', businessDomain: 'BusinessDomain', businessArea: 'BusinessArea' },
+        stereotypeKeys = ['Stereotype', 'Stereotypes', 'stereotype', 'stereotypes'],
+        patternKeys = ['Functional Pattern', 'functional pattern', 'FunctionalPattern', 'pattern'],
+        assetKeys = ['Asset Type', 'asset type', 'Asset', 'asset'],
+    } = {}) {
+        Object.assign(this, { serviceDomainTypes, containerTypes, containmentTypes, stereotypes, stereotypeKeys, patternKeys, assetKeys });
+    }
+
+    /**
+     * An ArchiMate model from a file: an Archi file (XML or an archive) or the
+     * Exchange Format, as parseArchiFile / parseExchangeModel give it.
+     * @param {string|Uint8Array|ArrayBuffer} data
+     */
+    static parse(data) {
+        const bytes = data instanceof ArrayBuffer ? new Uint8Array(data) : data;
+        if (typeof bytes !== 'string' && ZipArchive.isZip(bytes)) return parseArchiFile(bytes);
+        const text = typeof bytes === 'string' ? bytes : new TextDecoder().decode(bytes);
+        return /opengroup\.org\/xsd\/archimate/.test(text.slice(0, 2000)) ? parseExchangeModel(text) : parseArchiFile(text);
+    }
+
+    /**
+     * Service domain specs (ServiceDomain's), one per service domain in the landscape.
+     * @param {{elements: Array, relationships?: Array, views?: Array}} parsed
+     * @returns {Array<Object>}
+     */
+    read(parsed) {
+        const elements = new Map((parsed.elements ?? []).map(e => [e.id, e]));
+        const containers = this.containers(parsed, elements);
+        const stereotypeOf = this._stereotypes(parsed);
+        const is = (id, which) => stereotypeOf(elements.get(id)).includes(plainWord(this.stereotypes[which]));
+        const name = (id) => elements.get(id)?.name ?? '';
+        const marked = [...elements.keys()].some(id => is(id, 'serviceDomain'));
+        let found;
+        if (marked) {
+            // Marked so, or (as some in BIAN's own model are not) a service-domain-type element in a business domain.
+            const isServiceDomain = (e) => is(e.id, 'serviceDomain') || (this.serviceDomainTypes.includes(e.type)
+                && !is(e.id, 'businessDomain') && !is(e.id, 'businessArea') && (containers.get(e.id) ?? []).some(c => is(c, 'businessDomain')));
+            found = [...elements.values()].filter(isServiceDomain).map(e => {
+                const domain = (containers.get(e.id) ?? []).find(c => is(c, 'businessDomain'));
+                const area = [...(containers.get(domain) ?? []), ...(containers.get(e.id) ?? [])].find(c => is(c, 'businessArea'));
+                return [e, area ? name(area) : '', domain ? name(domain) : ''];
+            });
+        } else {
+            const holdsAny = new Set([...containers.values()].flat());
+            found = [...elements.values()].filter(e => this.serviceDomainTypes.includes(e.type) && !holdsAny.has(e.id)).map(e => {
+                const chain = [];
+                for (let at = containers.get(e.id)?.[0]; at && !chain.includes(at); at = containers.get(at)?.[0]) chain.push(at);
+                return [e, chain.length ? name(chain[chain.length - 1]) : '', chain.length > 1 ? name(chain[0]) : ''];
+            });
+        }
+        // A model may hold copies of one service domain (BIAN's has some, for other diagrams): the placed one is it.
+        const placed = new Set(found.filter(([, , domain]) => domain).map(([e]) => plainWord(e.name)));
+        const seen = new Set();
+        found = found.filter(([e, , domain]) => {
+            const key = plainWord(e.name);
+            if (seen.has(key) || (!domain && placed.has(key))) return false;
+            if (domain || !placed.has(key)) seen.add(key);
+            return true;
+        });
+        const realizedBy = this._patternsRealizing(parsed, elements);
+        return found.map(([e, businessArea, businessDomain]) => {
+            const pattern = realizedBy.get(e.id) ?? this._property(e, this.patternKeys);
+            return {
+                kind: ServiceDomain.kind,
+                id: e.id,
+                name: e.name ?? '',
+                ...(e.documentation && { description: e.documentation }),
+                businessArea, businessDomain,
+                asset: this._property(e, this.assetKeys) ?? '',
+                pattern: BianNotation.findPattern(pattern)?.name ?? pattern ?? '',
+            };
+        });
+    }
+
+    /**
+     * What each element sits in (child id -> its containers, the likeliest
+     * first): by the containment relationships, a type's before the next's
+     * (composition before aggregation), then by being drawn inside a container
+     * in a view.
+     */
+    containers(parsed, elements = new Map((parsed.elements ?? []).map(e => [e.id, e]))) {
+        const isContainer = (id) => this.containerTypes.includes(elements.get(id)?.type);
+        const of = new Map();
+        const add = (child, container) => {
+            if (!elements.has(child) || child === container) return;
+            const list = of.get(child) ?? [];
+            if (!list.includes(container)) of.set(child, [...list, container]);
+        };
+        for (const type of this.containmentTypes) {
+            for (const r of parsed.relationships ?? []) if (r.type === type && isContainer(r.source)) add(r.target, r.source);
+        }
+        const walk = (visuals, container) => {
+            for (const v of visuals ?? []) {
+                const id = v.archimateElement;
+                if (id && container) add(id, container);
+                walk(v.children, id && isContainer(id) ? id : container);
+            }
+        };
+        for (const view of parsed.views ?? []) walk(view.children, null);
+        return of;
+    }
+
+    /** An element's stereotypes (compared plainly): its Archi specialization's name, and any stereotype property. @private */
+    _stereotypes(parsed) {
+        const profiles = new Map((parsed.archi?.elements ?? []).filter(e => e.tag === 'profile').map(p => [p.attributes?.id, p.attributes?.name]));
+        return (element) => {
+            if (!element) return [];
+            const profile = element.archi?.attributes?.profiles;
+            return [
+                ...(profile ? String(profile).split(/\s+/).map(id => profiles.get(id)).filter(Boolean) : []),
+                ...String(this._property(element, this.stereotypeKeys) ?? '').split(/[,;|]/),
+            ].map(plainWord).filter(Boolean);
+        };
+    }
+
+    /** Each service domain's pattern by what realizes it: an element named as a BIAN functional pattern. @private */
+    _patternsRealizing(parsed, elements) {
+        const patternOf = new Map();
+        for (const r of parsed.relationships ?? []) {
+            if (r.type !== 'RealizationRelationship' || patternOf.has(r.target)) continue;
+            const pattern = BianNotation.findPattern(elements.get(r.source)?.name);
+            if (pattern) patternOf.set(r.target, pattern.name);
+        }
+        return patternOf;
+    }
+
+    /** The first of some property keys an element has a value for. @private */
+    _property(element, keys) {
+        const props = element.properties ?? {};
+        const pairs = Array.isArray(props) ? props.map(p => [p.key, p.value]) : Object.entries(props);
+        for (const key of keys) {
+            const hit = pairs.find(([k, v]) => k === key && v);
+            if (hit) return String(hit[1]).trim();
+        }
+        return null;
+    }
+}