@peter.prib/renderengine 0.2.6 → 0.2.7

package/src/bian.js

@@ -0,0 +1,182 @@
+/**
+ * BIAN vocabulary — the Banking Industry Architecture Network's service
+ * domain terms, as one registry (as src/archimate.js and src/datamodel.js are)
+ * that pickers, dialogs and service domains read rather than restate.
+ *
+ * Sources: the BIAN Semantic API Practitioner Guide V8.1 (December 2024) for the
+ * functional patterns' descriptions and the action terms in their four groups;
+ * BIAN's v14 model as its service landscape portal publishes it
+ * (bian.org/servicelandscape-14-0-0) for each pattern's generic artifact, its
+ * behaviour qualifier type (the type the artifact aggregates) and the creating
+ * action term it aggregates; BIAN's release 14.0.0 semantic APIs
+ * (github.com/bian-official/public, Apache-2.0) for the names control records
+ * have and, where a pattern aggregates two creating terms (Monitor: evaluate
+ * and initiate), the one its APIs use. Every value is BIAN's; `inferred` is
+ * kept for a value that is not. See BIAN_ALIGNMENT.md.
+ */
+
+/** One way a service domain behaves: what it does to its asset, and the record it keeps of it. */
+export class BianFunctionalPattern {
+    /**
+     * @param {string} name - 'Fulfill'
+     * @param {Object} spec
+     * @param {string} spec.artifact - The generic artifact a control record is ('Facility')
+     * @param {string} spec.description
+     * @param {string} spec.creates - The action term that makes a new control record ('initiate')
+     * @param {string} spec.qualifierType - How the control record is broken down ('Fulfillment')
+     * @param {string[]} [spec.inferred] - Which of creates/qualifierType are inferred, not confirmed
+     * @param {string[]} [spec.formerArtifacts] - Names the artifact had before ('Arrangement' for Fulfill's)
+     */
+    constructor(name, { artifact, description, creates, qualifierType, inferred = [], formerArtifacts = [] }) {
+        this.name = name;
+        this.artifact = artifact;
+        this.formerArtifacts = Object.freeze([...formerArtifacts]);
+        this.description = description;
+        this.creates = creates;
+        this.qualifierType = qualifierType;
+        this.inferred = Object.freeze([...inferred]);
+    }
+
+    /** The control record's name for an asset: 'Current Account' gives 'Current Account Facility'. */
+    controlRecordName(asset) {
+        return [asset, this.artifact].filter(Boolean).join(' ');
+    }
+}
+
+/** An action term: what a service operation does, and to what. */
+export class BianActionTerm {
+    /**
+     * @param {string} name - 'initiate'
+     * @param {'service-domain'|'create'|'instance'|'read'} group
+     * @param {string} description
+     */
+    constructor(name, group, description) {
+        this.name = name;
+        this.group = group;
+        this.description = description;
+    }
+}
+
+const fp = (name, artifact, description, creates, qualifierType, inferred = [], formerArtifacts = []) =>
+    [name, new BianFunctionalPattern(name, { artifact, description, creates, qualifierType, inferred, formerArtifacts })];
+
+/**
+ * The nineteen functional patterns, each with its artifact, creating action term
+ * and behaviour qualifier type as BIAN's v14 model has them.
+ */
+const FUNCTIONAL_PATTERNS = new Map([
+    fp('Direct', 'Strategy', 'Define the policies, goals and objectives and strategies for an organizational entity or unit.', 'create', 'Goal'),
+    fp('Manage', 'Management Plan', 'Oversee the working of a business unit, assign work, manage against a plan and troubleshoot issues.', 'create', 'Duty'),
+    fp('Administer', 'Administrative Plan', 'Handle and assign the day to day activities, capture time worked, costs and income for an operational unit.', 'create', 'Routine'),
+    fp('Design', 'Specification', 'Create and maintain a design for a procedure, product/service model or other such entity.', 'create', 'Aspect'),
+    fp('Develop', 'Development', 'Build or enhance something, typically an IT production system: development, assessment and deployment.', 'create', 'Deliverable'),
+    fp('Process', 'Procedure', 'Complete work tasks following a procedure in support of general office activities and product and service delivery.', 'initiate', 'Workstep'),
+    fp('Operate', 'Operating Session', 'Operate equipment and/or a largely automated facility.', 'initiate', 'Function'),
+    fp('Maintain', 'Maintenance Arrangement', 'Provide a maintenance service and repair devices/equipment as necessary.', 'initiate', 'Item'),
+    fp('Fulfill', 'Facility', 'Fulfill scheduled and ad-hoc obligations under a service arrangement, most typically for a financial product or facility.', 'initiate', 'Fulfillment', [], ['Arrangement']),
+    fp('Transact', 'Transaction', 'Execute a well bounded financial transaction/task, typically largely automated, structured fulfillment processing.', 'initiate', 'Task'),
+    fp('Agree Terms', 'Agreement', 'Maintain the terms and conditions that apply to a commercial relationship.', 'evaluate', 'Term'),
+    fp('Assess', 'Assessment', 'Test or assess an entity, possibly against some formal qualification or certification requirement.', 'evaluate', 'Test'),
+    fp('Analyze', 'Analysis', 'Analyze the performance or behavior of some on-going activity or entity.', 'evaluate', 'Algorithm'),
+    fp('Monitor', 'State', 'Monitor and define the state/rating of some entity.', 'initiate', 'Indicator'),
+    fp('Track', 'Log', 'Maintain a log of transactions or activity, typically a financial account/journal or a log of activity.', 'initiate', 'Event', [], ['Log Record']),
+    fp('Catalog', 'Directory Entry', 'Capture and maintain reference information about some type of entity.', 'register', 'Property'),
+    fp('Enroll', 'Membership', 'Maintain a membership for some group or related collection of parties.', 'register', 'Clause'),
+    fp('Allocate', 'Allocation', 'Maintain an inventory or holding of some resource and make assignments/allocations as requested.', 'provide', 'Criteria'),
+    fp('Advise', 'Advice', 'Provide specialist advice and/or support as an ongoing service or for a specific task/event.', 'initiate', 'Topic'),
+]);
+
+/** Names a pattern has had ('Analyse', the guide's; BIAN's model has 'Analyze'). */
+const PATTERN_ALIASES = new Map([['Analyse', 'Analyze']]);
+
+const at = (name, group, description) => [name, new BianActionTerm(name, group, description)];
+
+/** The seventeen action terms in their four groups (Practitioner Guide V8.1, Figure 14 and after). */
+const ACTION_TERMS = new Map([
+    at('activate', 'service-domain', 'Start the service domain operating as a service center.'),
+    at('configure', 'service-domain', 'Change how the service domain operates.'),
+    at('feedback', 'service-domain', 'Give feedback on how the service domain operates.'),
+    at('create', 'create', 'Make a new control record (a plan, a design, a solution).'),
+    at('initiate', 'create', 'Create and start a new control record, or a behaviour qualifier of one.'),
+    at('register', 'create', 'Add a new entry: catalogue or enroll.'),
+    at('evaluate', 'create', 'Start a test, check or analysis.'),
+    at('provide', 'create', 'Provide a new instance (an allocation, a log record).'),
+    at('update', 'instance', 'Change the values of an active control record.'),
+    at('control', 'instance', 'Change the state of an active control record (suspend, resume, terminate).'),
+    at('exchange', 'instance', 'Accept, reject, verify or otherwise exchange about an active control record.'),
+    at('capture', 'instance', 'Take in information about an active control record from outside.'),
+    at('execute', 'instance', 'Run an automated task on an active control record or one of its behaviour qualifiers.'),
+    at('request', 'instance', 'Ask for a task on an active control record that needs a decision or manual work.'),
+    at('grant', 'instance', 'Give an authorization or permission against an active control record.'),
+    at('retrieve', 'read', 'Get details of one or more control records, without changing them.'),
+    at('notify', 'read', 'Subscribe to changes of control records, without changing them.'),
+]);
+
+/** The behaviour qualifier types, as BIAN v14.0 rationalised them (release notes, section 7.2). */
+const QUALIFIER_TYPES = Object.freeze([
+    'Fulfillment', 'Term', 'Duty', 'Aspect', 'Clause', 'Algorithm', 'Task', 'Property', 'Routine', 'Criteria',
+    'Deliverable', 'Indicator', 'Topic', 'Workstep', 'Event', 'Goal', 'Function', 'Test', 'Item',
+]);
+
+/** The action terms that act on an existing control record or behaviour qualifier, or read one. */
+const ON_INSTANCE = Object.freeze(['instance', 'read']);
+
+export const BianNotation = {
+    /** Every functional pattern, in the guide's order. */
+    functionalPatterns() { return [...FUNCTIONAL_PATTERNS.values()]; },
+    /** A functional pattern by name, or null. */
+    functionalPattern(name) { return FUNCTIONAL_PATTERNS.get(name) ?? FUNCTIONAL_PATTERNS.get(PATTERN_ALIASES.get(name)) ?? null; },
+    /** A pattern by its name as written anywhere: any case, extra spaces, a former name ('analyse'); null for none. */
+    findPattern(text) {
+        const word = String(text ?? '').trim().replace(/\s+/g, ' ').toLowerCase();
+        if (!word) return null;
+        const alias = [...PATTERN_ALIASES].find(([old]) => old.toLowerCase() === word)?.[1];
+        return [...FUNCTIONAL_PATTERNS.values()].find(p => p.name.toLowerCase() === word || p.name === alias) ?? null;
+    },
+    /**
+     * The pattern a control record's name says it has, by the artifact it ends
+     * with ('CurrentAccountFacility' or 'Current Account Facility': Fulfill;
+     * a former artifact name too), the longest match first; null for none.
+     */
+    patternOfControlRecord(name) {
+        const words = String(name ?? '').replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2').toLowerCase().split(/\s+/).filter(Boolean).join(' ');
+        const ends = [...FUNCTIONAL_PATTERNS.values()]
+            .flatMap(p => [p.artifact, ...p.formerArtifacts].map(a => [a.toLowerCase(), p]))
+            .sort(([a], [b]) => b.length - a.length);
+        return ends.find(([a]) => words === a || words.endsWith(` ${a}`))?.[1] ?? null;
+    },
+    /** Every action term. */
+    actionTerms() { return [...ACTION_TERMS.values()]; },
+    actionTerm(name) { return ACTION_TERMS.get(name) ?? null; },
+    /** The behaviour qualifier types. */
+    qualifierTypes() { return [...QUALIFIER_TYPES]; },
+    isQualifierType(type) { return QUALIFIER_TYPES.includes(type); },
+
+    /**
+     * A service domain's default service operations for a functional pattern
+     * (the starting point BIAN gives; a deployment may drop or add some): the
+     * service-domain-wide terms on the service domain; the pattern's creating
+     * term on the control record and on each behaviour qualifier; and each
+     * instance and read term on the control record and each behaviour qualifier.
+     * @param {string} patternName
+     * @param {{serviceDomain: string, controlRecord: string, qualifiers?: string[]}} names
+     *   'Current Account', 'Current Account Arrangement', ['Interest', 'Payments']
+     * @returns {Array<{actionTerm: string, target: string, qualifier: string|null, name: string}>}
+     */
+    serviceOperations(patternName, { serviceDomain, controlRecord, qualifiers = [] }) {
+        const pattern = FUNCTIONAL_PATTERNS.get(patternName);
+        if (!pattern) return [];
+        const op = (term, target, qualifier = null) => ({
+            actionTerm: term, target, qualifier,
+            name: `${term} ${target}${qualifier ? ` | ${qualifier}` : ''}`,
+        });
+        const terms = (group) => [...ACTION_TERMS.values()].filter(t => group(t.group)).map(t => t.name);
+        const onInstance = terms(g => ON_INSTANCE.includes(g));
+        return [
+            ...terms(g => g === 'service-domain').map(t => op(t, serviceDomain)),
+            op(pattern.creates, controlRecord),
+            ...onInstance.map(t => op(t, controlRecord)),
+            ...qualifiers.flatMap(q => [op(pattern.creates, controlRecord, q), ...onInstance.map(t => op(t, controlRecord, q))]),
+        ];
+    },
+};

package/src/charting/DiagramEditor.js

@@ -8,6 +8,7 @@ import { getEdgeMarker } from './edgeMarkers/index.js';
 import { PopupMenu } from './PopupMenu.js';
 import { TextStyle, TEXT_STYLE_KEYS } from './TextStyle.js';
 import { FormDialog } from './FormDialog.js';
+import { ModelCheckDialog } from './ModelCheckDialog.js';
 import { NoteTemplate } from './templates/NoteTemplate.js';
 import { parseShapeText, placeShapes } from './textToShapes.js';
 import { ViewFit } from './ViewFit.js';
@@ -914,33 +915,11 @@ export class DiagramEditor {
         const checker = this.model?.checker?.(this.checkerOptions());
         if (!checker) return [];
         const findings = checker.run();
-        let dialog = null;
-        const list = el({
-            style: { gridColumn: '1 / -1', display: 'flex', flexDirection: 'column', gap: '4px', minWidth: '420px' },
-            children: findings.length ? 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.revealFinding(finding); } },
-                    },
-                    ...this.findingActions(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: `Model check: ${findings.length} finding${findings.length === 1 ? '' : 's'}`,
-            fields: [{ key: 'findings', label: '', type: 'custom', element: list, read: () => null }],
-            submitLabel: 'Close',
+        new ModelCheckDialog({
+            findings,
+            onReveal: (finding) => this.revealFinding(finding),
+            actionsFor: (finding) => this.findingActions(finding),
             document: this.document ?? document,
-            onApply: () => {},
         }).open();
         return findings;
     }

package/src/charting/DiagramTypeRegistry.js

@@ -224,10 +224,16 @@ export const DIAGRAM_TYPES = {
                 'A person or legal actor that can act or hold rights: person, organisation, government body. Every business process involves actors.'),
             shape('role', 'Role', StadiumTemplate, { width: 120, height: 44, fillColor: C.purple },
                 'The part a party (or resource) plays in a context: customer, supplier, employee, owner, custodian. A party has many roles, and they change over time.'),
-            shape('arrangement', 'Arrangement', DocumentTemplate, { width: 130, height: 70, fillColor: C.yellow },
-                'A formalised relationship between parties, or parties and resources: contract, agreement, subscription, membership, policy, lease. Business interactions are structured by agreements.'),
+            shape('agreement', 'Agreement', DocumentTemplate, { width: 130, height: 70, fillColor: C.yellow },
+                'The contract parties sign: the promises they agree on as one unit. It governs the arrangements made under it (BIAN keeps the two apart).'),
+            shape('arrangement', 'Arrangement', RoundedRectangleTemplate, { width: 130, height: 60, fillColor: C.orange },
+                'The terms a product or service is provided on, under an agreement: a subscription, an account, a loan, a lease, a membership.'),
             shape('product', 'Product', PackageTemplate, { width: 120, height: 70, fillColor: C.green },
                 'What the business offers and sells, under terms: a plan, a policy, a loan, a service bundle. Not the things it holds (resources), but the offer made of them.'),
+            shape('feature', 'Product Feature', ParallelogramTemplate, { width: 130, height: 50, fillColor: C.green },
+                'A feature a product is made up of and can be offered with: interest, payments, an overdraft, a reward scheme.'),
+            shape('condition', 'Condition', TrapezoidTemplate, { width: 120, height: 55, fillColor: C.red },
+                'A fee, rate, limit or eligibility rule a product or an arrangement is subject to.'),
             shape('resource', 'Resource', BoxTemplate, { width: 110, height: 80, fillColor: C.blue },
                 'A physical or digital thing of value or use: product, asset, document, file, device. Businesses manage things.'),
             shape('event', 'Event', EllipseTemplate, { width: 120, height: 60, fillColor: C.green },

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/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),
+        };
+    }
+}