@peter.prib/renderengine 0.15.1 → 0.15.2

package/dist/renderengine-workspace.umd.js

@@ -38083,6 +38083,67 @@
         }
     }
 
+    /**
+     * AddGroupToViewCommand — add a view-specific group to a view: its layout entry
+     * is stored in view.folderLayout. Undo removes it.
+     */
+    class AddGroupToViewCommand extends Command {
+        /**
+         * @param {ArchimateView} view
+         * @param {Object} [options]
+         * @param {string} [options.id]
+         * @param {string} [options.name]
+         * @param {number} [options.x]
+         * @param {number} [options.y]
+         * @param {number} [options.width]
+         * @param {number} [options.height]
+         * @param {number} [options.zIndex]
+         * @param {Object} [options.appearance]
+         * @param {string} [options.parentId]
+         */
+        constructor(view, { id = `group-${Date.now().toString(36)}`, name = 'Group', x = 100, y = 100, width = 400, height = 140, zIndex = 0, appearance = {}, parentId = undefined } = {}) {
+            super('Add group to view');
+            this.view = view;
+            this.groupId = id;
+            this.entry = { x, y, width, height, name, zIndex, appearance, parentId };
+        }
+
+        execute() {
+            this.view.folderLayout[this.groupId] = { ...this.entry };
+        }
+
+        undo() {
+            delete this.view.folderLayout[this.groupId];
+        }
+    }
+
+    /**
+     * RemoveGroupFromViewCommand — take a group off a view: its layout entry
+     * goes, and what was drawn in it stays where it is (on the view, or in the
+     * group around it). The model folder stays. Undo puts the same entry back.
+     */
+    class RemoveGroupFromViewCommand extends Command {
+        /**
+         * @param {ArchimateView} view
+         * @param {string} folderId - The folder the group draws
+         */
+        constructor(view, folderId) {
+            super('Remove group from view');
+            this.view = view;
+            this.folderId = folderId;
+            this._entry = null;
+        }
+
+        execute() {
+            this._entry = this.view.folderLayout[this.folderId] ?? null;
+            delete this.view.folderLayout[this.folderId];
+        }
+
+        undo() {
+            if (this._entry) this.view.folderLayout[this.folderId] = this._entry;
+        }
+    }
+
     /**
      * Canonical, id-indexed home for ArchiMate model data (elements, relationships, views).
      * Replaces ad-hoc flat-array handling and fixes multi-view import flattening.
@@ -39236,27 +39297,65 @@
         }
 
         /**
-         * The folders drawn on this view as groups: those with bounds in its
-         * `folderLayout`, bounds applied, each after its parent. `parentId` is the
-         * nearest ancestor that is also drawn here (a group inside an undrawn
-         * folder sits on the view itself).
+         * The folders drawn on this view as groups: both model repository folders
+         * and view-specific groups with bounds in `folderLayout`, bounds applied,
+         * each after its parent. `parentId` is the nearest ancestor also drawn here.
          */
         get placedFolders() {
-            const placed = this.model.allFolders().filter(f => this.folderLayout[f.id]);
-            const drawn = new Set(placed.map(f => f.id));
-            return placed.map(folder => ({
-                ...folder,
-                ...this.folderLayout[folder.id],
-                parentId: this._nearestPlaced(folder.parentId, drawn),
-            }));
+            const drawn = new Set(Object.keys(this.folderLayout));
+            const modelFolders = this.model.allFolders();
+            const modelFolderIds = new Set(modelFolders.map(f => f.id));
+
+            const result = [];
+            for (const folder of modelFolders.filter(f => this.folderLayout[f.id])) {
+                result.push({
+                    ...folder,
+                    ...this.folderLayout[folder.id],
+                    name: this.folderLayout[folder.id].name ?? folder.name,
+                    parentId: this._nearestPlaced(folder.parentId, drawn),
+                });
+            }
+            for (const [id, layout] of Object.entries(this.folderLayout)) {
+                if (!modelFolderIds.has(id)) {
+                    result.push({
+                        id,
+                        name: layout.name || 'Group',
+                        ...layout,
+                        parentId: layout.parentId && drawn.has(layout.parentId) ? layout.parentId : undefined,
+                    });
+                }
+            }
+            return result;
         }
 
-        /** The group on this view an element is drawn in: its folder, or that folder's nearest drawn ancestor. */
+        /** The group on this view an element is drawn in: its explicit view parent group, or its model folder's nearest drawn ancestor. */
         placedFolderOf(elementId) {
-            const drawn = new Set(this.model.allFolders().filter(f => this.folderLayout[f.id]).map(f => f.id));
+            const inst = this.elementInstancesFor(elementId)[0];
+            if (inst?.archi?.parent && this.folderLayout[inst.archi.parent]) {
+                return inst.archi.parent;
+            }
+            if (inst?.parentId && this.folderLayout[inst.parentId]) {
+                return inst.parentId;
+            }
+            const drawn = new Set(Object.keys(this.folderLayout));
             return this._nearestPlaced(this.model.getElementFolder(elementId), drawn);
         }
 
+        /** Add a view-specific group to this view. One undo step (AddGroupToViewCommand). */
+        addGroup(spec = {}) {
+            const id = spec.id || `group-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`;
+            const cmd = new AddGroupToViewCommand(this, { id, ...spec });
+            this.history.execute(cmd);
+            return this.folderLayout[id];
+        }
+
+        /** Remove a group (view-specific or placed model folder) from this view. One undo step (RemoveGroupFromViewCommand). */
+        removeGroup(groupId) {
+            if (!this.folderLayout[groupId]) return false;
+            this.history.execute(new RemoveGroupFromViewCommand(this, groupId));
+            return true;
+        }
+
         /** @private */
         _nearestPlaced(folderId, drawn) {
             for (let id = folderId; id; id = this.model.getFolder(id)?.parentId) {
@@ -40390,6 +40489,28 @@
         clearWaypoints() {
             this.waypoints = [];
         }
+
+        /** The edge as plain JSON: its endpoints, label, waypoints, side pins and style overrides. */
+        toJSON() {
+            return {
+                id: this.id,
+                sourceId: this.sourceId,
+                targetId: this.targetId,
+                label: this.label,
+                waypoints: this.waypoints.map(w => ({ x: w.x, y: w.y })),
+                sourceSide: this.sourceSide,
+                targetSide: this.targetSide,
+                visible: this.visible,
+                ...this.styleOverrides(),
+            };
+        }
+
+        /** Reconstruct an Edge from plain JSON. */
+        static fromJSON(json) {
+            if (!json) throw new TypeError('Edge.fromJSON requires a JSON object');
+            const { id, sourceId, targetId, ...rest } = json;
+            return new Edge(id, sourceId, targetId, rest);
+        }
     }
 
     /** Style keys the line's Archi type bits decide (dashes, arrows). */
@@ -48490,7 +48611,8 @@
         execute() {
             const { instance, parent } = this;
             const { parent: _was, ...rest } = instance.archi ?? {};
-            instance.archi = parent ? { ...rest, parent: parent.visualId } : (Object.keys(rest).length ? rest : null);
+            const parentId = parent ? (parent.visualId ?? parent.id) : null;
+            instance.archi = parentId ? { ...rest, parent: parentId } : (Object.keys(rest).length ? rest : null);
             if (parent && (instance.zIndex ?? 0) <= (parent.zIndex ?? 0)) instance.zIndex = (parent.zIndex ?? 0) + 1;
         }
 
@@ -48615,8 +48737,11 @@
             return this.view.model.getFolder(this.id);
         }
 
-        get name() { return this.folder?.name ?? 'Group'; }
-        set name(value) { if (this.folder) this.folder.name = value || 'Group'; }
+        get name() { return this.folder?.name ?? this.layout?.name ?? 'Group'; }
+        set name(value) {
+            if (this.folder) this.folder.name = value || 'Group';
+            if (this.layout) this.layout.name = value || 'Group';
+        }
 
         // The layout keeps the top-left corner; a template is placed by its centre.
         get x() { return this.layout.x + this.width / 2; }
@@ -48704,33 +48829,6 @@
         }
     }
 
-    /**
-     * RemoveGroupFromViewCommand — take a group off a view: its layout entry
-     * goes, and what was drawn in it stays where it is (on the view, or in the
-     * group around it). The model folder stays. Undo puts the same entry back.
-     */
-    class RemoveGroupFromViewCommand extends Command {
-        /**
-         * @param {ArchimateView} view
-         * @param {string} folderId - The folder the group draws
-         */
-        constructor(view, folderId) {
-            super('Remove group from view');
-            this.view = view;
-            this.folderId = folderId;
-            this._entry = null;
-        }
-
-        execute() {
-            this._entry = this.view.folderLayout[this.folderId] ?? null;
-            delete this.view.folderLayout[this.folderId];
-        }
-
-        undo() {
-            if (this._entry) this.view.folderLayout[this.folderId] = this._entry;
-        }
-    }
-
     /**
      * ElementFilterRule — a filter's result on an ArchiMate view: shapes of the
      * model elements it kept are drawn as usual, every other element dimmed.
@@ -50343,15 +50441,28 @@
             return element ? treeLayerOf(element) : 'other';
         }
 
-        /** An element's box holds any box but a group; on a canvas, a block holds boxes. */
+        /** An element's box holds any box; a group holds any box or nested group; on a canvas, a block holds boxes. */
         canHold(parentId, childId) {
+            if (!parentId || !childId || parentId === childId) return false;
             const parent = this.templates.get(parentId), child = this.templates.get(childId);
-            if (!parent?.instance || !child?.instance || parent instanceof ViewGroupTemplate || child instanceof ViewGroupTemplate) return false;
+            if (!parent || !child) return false;
+            if (child instanceof ViewGroupTemplate && parent instanceof ViewGroupTemplate) {
+                return !this.isAncestor(childId, parentId);
+            }
+            if (parent instanceof ViewGroupTemplate) {
+                return !this.isAncestor(childId, parentId);
+            }
+            if (child instanceof ViewGroupTemplate) return false;
+            if (!parent.instance || !child.instance) return false;
             return !!this._elementOf(parentId) || parent.instance.content?.archiVisualType === 'canvas-model-block';
         }
 
-        /** An element dropped on another nests there when a relationship a nesting stands for (NESTING_KINDS) is allowed between them. */
+        /** An element dropped on another nests there when a relationship a nesting stands for (NESTING_KINDS) is allowed between them, or when dropped into a group. */
         nestsOnDrop(parentId, childId) {
+            const parent = this.templates.get(parentId);
+            if (parent instanceof ViewGroupTemplate) {
+                return this.canHold(parentId, childId);
+            }
             if (!this._elementOf(parentId) || !this._elementOf(childId)) return false;
             return this.allowedKinds(parentId, childId).some(kind => NESTING_KINDS.includes(kind));
         }
@@ -50359,13 +50470,16 @@
         nestCommand(childId, parentId) {
             const child = this.templates.get(childId)?.instance;
             if (!child) return null;
-            return new NestInstanceCommand(child, parentId ? this.templates.get(parentId)?.instance ?? null : null);
+            const parentTemplate = parentId ? this.templates.get(parentId) : null;
+            const parentTarget = parentTemplate?.instance ?? (parentTemplate instanceof ViewGroupTemplate ? parentTemplate : null);
+            return new NestInstanceCommand(child, parentTarget);
         }
 
-        /** After nesting an element in another: offer the relationship the nesting stands for (nestingKinds). */
+        /** After nesting an element in another: offer the relationship the nesting stands for (nestingKinds). Groups have no relationship. */
         nested(changes) {
             let chain = Promise.resolve();
             for (const { childId, parentId } of changes) {
+                if (this.templates.get(parentId) instanceof ViewGroupTemplate) continue;
                 chain = chain.then(() => this.offerNestingRelationship(parentId, childId));   // taken out: nothing to offer
             }
             return chain;
@@ -54004,64 +54118,159 @@
         new DrawioFileFormat(),
     ]);
 
-    /**
-     * DiagramView — one diagram (tab) of a DiagramModel: its shapes, lines,
-     * diagram-level line style and its own undo history (from DiagramEditorState).
-     *
-     * A DiagramEditor is bound directly to `templates`/`edges`, so edits land here
-     * with nothing to save back, and the history survives the editor being rebuilt.
-     */
-    class DiagramView extends DiagramEditorState {
-        /**
-         * @param {Object} options
-         * @param {string} options.id
-         * @param {string} options.title
-         * @param {Map<string, Template>} [options.templates]
-         * @param {Map<string, Edge>} [options.edges]
-         * @param {Object} [options.edgeStyle] - Diagram-level line style defaults
-         * @param {Object} [options.historyOptions] - Passed to CommandHistory (e.g. onChange)
-         * @param {string} [options.documentation]
-         */
-        constructor({ id, title, templates = new Map(), edges = new Map(), edgeStyle = {}, historyOptions = {}, documentation = undefined, arrangement = null }) {
-            super({ historyOptions, arrangement });
-            this.historyOptions = historyOptions;
-            this.id = id;
-            this.title = title;
-            this.documentation = documentation;
-            this.templates = templates;
-            this.edges = edges;
-            this.edgeStyle = edgeStyle;
-        }
-
-        /** The shapes are what stack. */
-        layerItems() {
-            return [...this.templates.values()];
-        }
-
-        /** The diagram as plain JSON: its shapes (by id), lines, line style and documentation. */
-        toJSON() {
-            return {
-                title: this.title,
-                documentation: this.documentation,
-                templates: [...this.templates].map(([id, t]) => ({ id, type: t.constructor.name, name: t.name, data: t.serialize() })),
-                edges: [...this.edges.values()].map(e => JSON.parse(JSON.stringify(e))),
-                edgeStyle: JSON.parse(JSON.stringify(this.edgeStyle ?? {})),
-            };
-        }
-
-        /** An independent copy: shapes, lines, style and documentation are copied; history starts empty (same options). */
-        copy(id, title, historyOptions = this.historyOptions) {
-            return new DiagramView({
-                id,
-                title,
-                templates: new Map([...this.templates].map(([tid, t]) => [tid, new t.constructor(tid, t.name, t.serialize())])),
-                edges: new Map([...this.edges].map(([eid, e]) => [eid, e.clone()])),
-                edgeStyle: { ...this.edgeStyle },
-                documentation: this.documentation,
-                historyOptions,
-                arrangement: this.arrangement.copy(),   // template ids are kept
-            });
-        }
+    const TEMPLATE_CLASSES = Object.freeze({
+        'rectangle': RectangleTemplate,
+        'rounded-rectangle': RoundedRectangleTemplate,
+        'stadium': StadiumTemplate,
+        'predefined-process': PredefinedProcessTemplate,
+        'class': ClassTemplate,
+        'component': ComponentTemplate,
+        'swimlane': SwimlaneTemplate,
+        'circle': CircleTemplate,
+        'final-state': FinalStateTemplate,
+        'ellipse': EllipseTemplate,
+        'diamond': DiamondTemplate,
+        'triangle': TriangleTemplate,
+        'pentagon': PentagonTemplate,
+        'hexagon': HexagonTemplate,
+        'octagon': OctagonTemplate,
+        'star': StarTemplate,
+        'parallelogram': ParallelogramTemplate,
+        'trapezoid': TrapezoidTemplate,
+        'manual-input': ManualInputTemplate,
+        'cylinder': CylinderTemplate,
+        'document': DocumentTemplate,
+        'note': NoteTemplate,
+        'cloud': CloudTemplate,
+        'actor': ActorTemplate,
+        'package': PackageTemplate,
+        'box': BoxTemplate,
+        'data-store': DataStoreTemplate,
+        'lifeline': LifelineTemplate,
+    });
+
+    const CLASS_TO_KEY = new Map(Object.entries(TEMPLATE_CLASSES).map(([k, c]) => [c, k]));
+
+    // Assign static templateType to each class
+    for (const [type, cls] of Object.entries(TEMPLATE_CLASSES)) {
+        cls.templateType = type;
+    }
+
+    /** Returns the stable serialized type key for a template instance or template class. */
+    function templateTypeKey(templateOrClass) {
+        if (!templateOrClass) return 'rectangle';
+        const c = typeof templateOrClass === 'function' ? templateOrClass : templateOrClass.constructor;
+        if (CLASS_TO_KEY.has(c)) return CLASS_TO_KEY.get(c);
+        if (Object.hasOwn(c, 'templateType')) return c.templateType;
+        const name = c.name || '';
+        const withoutSuffix = name.replace(/Template$/, '');
+        const kebab = withoutSuffix.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+        return TEMPLATE_CLASSES[kebab] ? kebab : 'rectangle';
+    }
+
+    /** Resolves a template class by its stable type key or class name, defaulting to RectangleTemplate. */
+    function templateClassFor(key) {
+        if (!key) return RectangleTemplate;
+        if (TEMPLATE_CLASSES[key]) return TEMPLATE_CLASSES[key];
+        const lower = String(key).toLowerCase();
+        if (TEMPLATE_CLASSES[lower]) return TEMPLATE_CLASSES[lower];
+        for (const [k, c] of Object.entries(TEMPLATE_CLASSES)) {
+            if (c.name === key || c.name?.toLowerCase() === lower) return c;
+        }
+        return RectangleTemplate;
+    }
+
+    /**
+     * DiagramView — one diagram (tab) of a DiagramModel: its shapes, lines,
+     * diagram-level line style and its own undo history (from DiagramEditorState).
+     *
+     * A DiagramEditor is bound directly to `templates`/`edges`, so edits land here
+     * with nothing to save back, and the history survives the editor being rebuilt.
+     */
+    class DiagramView extends DiagramEditorState {
+        /**
+         * @param {Object} options
+         * @param {string} options.id
+         * @param {string} options.title
+         * @param {Map<string, Template>} [options.templates]
+         * @param {Map<string, Edge>} [options.edges]
+         * @param {Object} [options.edgeStyle] - Diagram-level line style defaults
+         * @param {Object} [options.historyOptions] - Passed to CommandHistory (e.g. onChange)
+         * @param {string} [options.documentation]
+         * @param {Arrangement} [options.arrangement]
+         */
+        constructor({ id, title, templates = new Map(), edges = new Map(), edgeStyle = {}, historyOptions = {}, documentation = undefined, arrangement = null }) {
+            super({ historyOptions, arrangement });
+            this.historyOptions = historyOptions;
+            this.id = id;
+            this.title = title;
+            this.documentation = documentation;
+            this.templates = templates;
+            this.edges = edges;
+            this.edgeStyle = edgeStyle;
+        }
+
+        /** The shapes are what stack. */
+        layerItems() {
+            return [...this.templates.values()];
+        }
+
+        /** The diagram as plain JSON: its shapes (by id and stable type), lines, line style and documentation. */
+        toJSON() {
+            return {
+                id: this.id,
+                title: this.title,
+                documentation: this.documentation,
+                templates: [...this.templates].map(([id, t]) => ({
+                    id,
+                    type: templateTypeKey(t),
+                    name: t.name,
+                    data: t.serialize(),
+                })),
+                edges: [...this.edges.values()].map(e => (typeof e.toJSON === 'function' ? e.toJSON() : JSON.parse(JSON.stringify(e)))),
+                edgeStyle: JSON.parse(JSON.stringify(this.edgeStyle ?? {})),
+                ...(this.arrangement && { arrangement: this.arrangement.toJSON() }),
+            };
+        }
+
+        /** Reconstruct a DiagramView from plain JSON. */
+        static fromJSON(json, historyOptions = {}) {
+            if (!json) throw new TypeError('DiagramView.fromJSON requires a JSON object');
+            const templates = new Map();
+            for (const t of (json.templates ?? [])) {
+                const Class = templateClassFor(t.type);
+                templates.set(t.id, new Class(t.id, t.name, t.data ?? {}));
+            }
+            const edges = new Map();
+            for (const e of (json.edges ?? [])) {
+                edges.set(e.id, Edge.fromJSON(e));
+            }
+            const arrangement = json.arrangement ? Arrangement.fromJSON(json.arrangement) : null;
+            return new DiagramView({
+                id: json.id,
+                title: json.title,
+                templates,
+                edges,
+                edgeStyle: json.edgeStyle ?? {},
+                documentation: json.documentation,
+                historyOptions,
+                arrangement,
+            });
+        }
+
+        /** An independent copy: shapes, lines, style and documentation are copied; history starts empty (same options). */
+        copy(id, title, historyOptions = this.historyOptions) {
+            return new DiagramView({
+                id,
+                title,
+                templates: new Map([...this.templates].map(([tid, t]) => [tid, new t.constructor(tid, t.name, t.serialize())])),
+                edges: new Map([...this.edges].map(([eid, e]) => [eid, e.clone()])),
+                edgeStyle: { ...this.edgeStyle },
+                documentation: this.documentation,
+                historyOptions,
+                arrangement: this.arrangement.copy(),   // template ids are kept
+            });
+        }
     }
 
     /**
@@ -54119,6 +54328,75 @@
         setTemplateType(templateType) {
             this.templateType = templateType;
         }
+
+        /** The diagram model as plain JSON: its name, templateType, line style defaults, active view and views. */
+        toJSON() {
+            return {
+                version: 1,
+                name: this.name,
+                templateType: this.templateType,
+                edgeStyle: JSON.parse(JSON.stringify(this.edgeStyle ?? {})),
+                currentViewId: this.currentViewId,
+                views: this.views().map(v => v.toJSON()),
+            };
+        }
+
+        /** Reconstruct a DiagramModel from plain JSON. */
+        static fromJSON(json, historyOptions = {}) {
+            if (!json) throw new TypeError('DiagramModel.fromJSON requires a JSON object');
+            const model = new DiagramModel({
+                name: json.name ?? '',
+                templateType: json.templateType ?? 'generic',
+                edgeStyle: json.edgeStyle ?? {},
+                historyOptions,
+            });
+            const views = (json.views ?? []).map(vData => DiagramView.fromJSON(vData, model.historyOptions));
+            for (const view of views) {
+                model._insertView(model._adopt(view), { current: view.id === json.currentViewId });
+            }
+            if (json.currentViewId && model._views.has(json.currentViewId)) {
+                model.currentViewId = json.currentViewId;
+            } else if (model._views.size > 0 && !model.currentViewId) {
+                model.currentViewId = model._views.keys().next().value;
+            }
+            const maxNum = Math.max(0, ...model.views().map(v => {
+                const m = String(v.id).match(/\d+$/);
+                return m ? parseInt(m[0], 10) : 0;
+            }));
+            model._nextId = maxNum + 1;
+            model.markSaved();
+            return model;
+        }
+    }
+
+    /**
+     * DiagramJsonFileFormat — a diagram model as a file (`.diagram.json` or `.json`):
+     * its name, palette category, line style defaults, views with templates, edges,
+     * waypoints and arrangements (DiagramModel#toJSON), read back by DiagramModel.fromJSON.
+     */
+    class DiagramJsonFileFormat extends ModelFileFormat {
+        get label() { return '.diagram.json'; }
+        get accept() { return '.diagram.json,.json'; }
+        get fileName() { return 'diagrams.diagram.json'; }
+        get featureName() { return 'DiagramJson'; }
+
+        /** JSON with a diagram model's shape: templateType and views array, or views array of diagrams. */
+        recognizes(text) {
+            try {
+                const json = JSON.parse(text);
+                return !!json && typeof json === 'object' && (Array.isArray(json.views) || typeof json.templateType === 'string');
+            } catch {
+                return false;
+            }
+        }
+
+        export(model) {
+            return { data: JSON.stringify(model.toJSON(), null, 2), mimeType: 'application/json' };
+        }
+
+        import(text) {
+            return DiagramModel.fromJSON(JSON.parse(text));
+        }
     }
 
     /**
@@ -55548,7 +55826,8 @@
     }
 
     /**
-     * ArchimateDiagramEditor — ArchiMate-specific diagram editor extending DiagramEditor base.
+     * ArchimateDiagramEditor — legacy GraphDiagram-based ArchiMate editor extending DiagramEditor.
+     * @deprecated Use ArchimateCanvasEditor (or ArchimateCanvasPart) for ArchiMate editing. RenderEngine.archimateDiagram() remains for read-only charts.
      *
      * Encapsulates: ArchiMate model, tree navigator, diagram tabs, rendering, controls wiring.
      * Inherits: common rendering, drag/drop, toolbar, tree, filtering from DiagramEditor.
@@ -72008,126 +72287,139 @@ ${cells.map(c => `     <Cell${isHeader ? ' ss:StyleID="Header"' : ''}><Data ss:T
         }
     }
 
-    const SVG_NS$1 = 'http://www.w3.org/2000/svg';
-
-    /**
-     * DiagramEditorPart — a complete diagram editor as a workspace part: menu bar,
-     * palette, one tab per diagram and the canvas, over a DiagramModel.
-     *
-     * Spec (JSON): `templateType` (palette category), `tabOrientation`
-     * ('horizontal'|'vertical'), `diagramTitle` (first diagram), `toolStyleKey`
-     * (localStorage key for the tool-level line style; `null` keeps it in memory).
-     *
-     * Line styles cascade line → diagram (`view.edgeStyle`) → model
-     * (`model.edgeStyle`) → tool. Each diagram keeps its own undo history, so undo
-     * survives switching tabs. The diagrams' menu (new, duplicate, rename, delete)
-     * comes from EditorPart. Like ChartPart it needs the engine, so it is not in
-     * BUILTIN_PARTS: register it explicitly.
-     */
-    class DiagramEditorPart extends EditorPart {
-        static type = 'diagram-editor';
-        static viewNoun = 'diagram';
-
-        constructor(spec = {}) {
-            super(spec);
-            this.tabOrientation = spec.tabOrientation ?? 'horizontal';
-            // The editor is rebuilt with the canvas on every render, which follows every model change.
-            this._unsubscribe = this.model.onChange(() => { if (this.mounted) this.render(); });
-        }
-
-        createModel(spec) {
-            const store = spec.toolStyleKey === null ? null
-                : new LocalJsonStore(spec.toolStyleKey ?? 'renderengine.diagramEditor.toolEdgeStyle');
-            this.toolEdgeStyle = store?.load({}) ?? {};
-            const model = new DiagramModel({
-                name: spec.name ?? '',
-                templateType: spec.templateType ?? 'generic',
-                // Tool-level style edits go through the diagram's undo history; persist whenever it moves.
-                historyOptions: { onChange: () => store?.save(this.toolEdgeStyle) },
-            });
-            model.createView(spec.diagramTitle ?? 'Diagram 1');
-            return model;
-        }
-
-        render() {
-            const model = this.model;
-            const view = model.currentView;
-            const doc = this.document;
-            const canvasId = `diagram-canvas-${this.id}`;
-
-            const canvas = doc.createElementNS(SVG_NS$1, 'svg');
-            canvas.id = canvasId;
-            canvas.setAttribute('viewBox', '0 0 800 600');
-            canvas.style.cssText = 'flex: 1; width: 100%; height: 100%; display: block; background: #fff; border: 2px solid #333; box-sizing: border-box;';
-            const elements = doc.createElementNS(SVG_NS$1, 'g');
-            elements.id = 'elements';
-            canvas.appendChild(elements);
-
-            const tabs = this.viewTabs({ orientation: this.tabOrientation });
-
-            // The shared workbench layout: toolbar, palette at the side, tabs + canvas in the main area.
-            const { toolbar: menuBarEl, side: palette, main } = new EditorShell({ document: doc, sideWidth: '200px', layout: this.layout, labels: { side: 'Palette' } }).mount(this.container);
-            palette.classList.add('ws-diagram-palette');
-            Object.assign(palette.style, { padding: '8px', fontSize: '12px', display: 'flex', flexDirection: 'column', overflowY: 'hidden' });
-            main.style.flexDirection = this.tabOrientation === 'vertical' ? 'row' : 'column';
-            render(main, [tabs, { style: { flex: '1', display: 'flex', flexDirection: 'column', minHeight: '0' }, children: [canvas] }], doc);
-
-            // The editor is bound to the view's own maps and history: nothing to save back on switch.
-            const previous = this.editor;
-            previous?.dispose();
-            this.editor = new DiagramEditor({
-                diagramContainerId: canvasId,
-                model,
-                templateType: model.templateType,
-                onTemplateTypeChange: (type) => model.setTemplateType(type),
-                templates: view.templates,
-                edges: view.edges,
-                history: view.history,
-                arrangement: view.arrangement,
-                edgeStyleLevels: this.edgeStyleLevels(view),
-            });
-            if (previous) {
-                this.editor.showGrid = previous.showGrid;
-                this.editor.gridSize = previous.gridSize;
-                this.editor.showExportArea = previous.showExportArea;
-                this.editor.exportOptions = previous.exportOptions;
-            }
-            this.editor.initPaletteForDiagramType(palette, model.templateType);
-            this.menuBar?.dispose();
-            this.menuBar = new MenuBar({
-                container: menuBarEl,
-                editor: this.editor,
-                items: [this.fileMenu(), this.editMenu(), ...this.hostMenus(), ...this.editor.menuBarItems()],
-            }).render();
-            this.editor.render();
-        }
-
-        /** A diagram's line-style levels, most specific first: the diagram, the model, the tool. */
-        edgeStyleLevels(view) {
-            return [
-                { key: 'view', label: 'Diagram', style: view.edgeStyle },
-                { key: 'model', label: 'Model', style: this.model.edgeStyle },
-                { key: 'tool', label: 'Tool', style: this.toolEdgeStyle },
-            ];
-        }
-
-        /** A diagram's properties: name, documentation and its line-style defaults. */
-        showViewProperties(view) {
-            return new DiagramViewPropertiesDialog({
-                model: this.model,
-                view,
-                document: this.document,
-                cascade: new EdgeStyleCascade(this.edgeStyleLevels(view)),
-                // The editor shows the current diagram; a style change there needs a redraw.
-                onStyleChange: () => { if (view === this.model.currentView) this.editor?.render(); },
-            }).open();
-        }
-
-        dispose() {
-            this.menuBar?.dispose();
-            this._unsubscribe();
-            super.dispose();
-        }
+    const SVG_NS$1 = 'http://www.w3.org/2000/svg';
+
+    /**
+     * DiagramEditorPart — a complete diagram editor as a workspace part: menu bar,
+     * palette, one tab per diagram and the canvas, over a DiagramModel.
+     *
+     * Spec (JSON): `templateType` (palette category), `tabOrientation`
+     * ('horizontal'|'vertical'), `diagramTitle` (first diagram), `toolStyleKey`
+     * (localStorage key for the tool-level line style; `null` keeps it in memory).
+     *
+     * Line styles cascade line → diagram (`view.edgeStyle`) → model
+     * (`model.edgeStyle`) → tool. Each diagram keeps its own undo history, so undo
+     * survives switching tabs. The diagrams' menu (new, duplicate, rename, delete)
+     * comes from EditorPart. Like ChartPart it needs the engine, so it is not in
+     * BUILTIN_PARTS: register it explicitly.
+     */
+    class DiagramEditorPart extends EditorPart {
+        static type = 'diagram-editor';
+        static viewNoun = 'diagram';
+
+        constructor(spec = {}) {
+            super(spec);
+            this.tabOrientation = spec.tabOrientation ?? 'horizontal';
+            // The editor is rebuilt with the canvas on every render, which follows every model change.
+            this._unsubscribe = this.model.onChange(() => { if (this.mounted) this.render(); });
+        }
+
+        createModel(spec) {
+            if (spec.model instanceof DiagramModel) return spec.model;
+            const store = spec.toolStyleKey === null ? null
+                : new LocalJsonStore(spec.toolStyleKey ?? 'renderengine.diagramEditor.toolEdgeStyle');
+            this.toolEdgeStyle = store?.load({}) ?? {};
+            const historyOptions = { onChange: () => store?.save(this.toolEdgeStyle) };
+            if (spec.views) {
+                return DiagramModel.fromJSON(spec, historyOptions);
+            }
+            const model = new DiagramModel({
+                name: spec.name ?? '',
+                templateType: spec.templateType ?? 'generic',
+                // Tool-level style edits go through the diagram's undo history; persist whenever it moves.
+                historyOptions,
+            });
+            model.createView(spec.diagramTitle ?? 'Diagram 1');
+            return model;
+        }
+
+        fileFormats() {
+            return this.spec.fileFormats ? [new DiagramJsonFileFormat()] : [];
+        }
+
+        saveFormat() {
+            return this.fileFormats()[0];
+        }
+
+        render() {
+            const model = this.model;
+            const view = model.currentView;
+            const doc = this.document;
+            const canvasId = `diagram-canvas-${this.id}`;
+
+            const canvas = doc.createElementNS(SVG_NS$1, 'svg');
+            canvas.id = canvasId;
+            canvas.setAttribute('viewBox', '0 0 800 600');
+            canvas.style.cssText = 'flex: 1; width: 100%; height: 100%; display: block; background: #fff; border: 2px solid #333; box-sizing: border-box;';
+            const elements = doc.createElementNS(SVG_NS$1, 'g');
+            elements.id = 'elements';
+            canvas.appendChild(elements);
+
+            const tabs = this.viewTabs({ orientation: this.tabOrientation });
+
+            // The shared workbench layout: toolbar, palette at the side, tabs + canvas in the main area.
+            const { toolbar: menuBarEl, side: palette, main } = new EditorShell({ document: doc, sideWidth: '200px', layout: this.layout, labels: { side: 'Palette' } }).mount(this.container);
+            palette.classList.add('ws-diagram-palette');
+            Object.assign(palette.style, { padding: '8px', fontSize: '12px', display: 'flex', flexDirection: 'column', overflowY: 'hidden' });
+            main.style.flexDirection = this.tabOrientation === 'vertical' ? 'row' : 'column';
+            render(main, [tabs, { style: { flex: '1', display: 'flex', flexDirection: 'column', minHeight: '0' }, children: [canvas] }], doc);
+
+            // The editor is bound to the view's own maps and history: nothing to save back on switch.
+            const previous = this.editor;
+            previous?.dispose();
+            this.editor = new DiagramEditor({
+                diagramContainerId: canvasId,
+                model,
+                templateType: model.templateType,
+                onTemplateTypeChange: (type) => model.setTemplateType(type),
+                templates: view.templates,
+                edges: view.edges,
+                history: view.history,
+                arrangement: view.arrangement,
+                edgeStyleLevels: this.edgeStyleLevels(view),
+            });
+            if (previous) {
+                this.editor.showGrid = previous.showGrid;
+                this.editor.gridSize = previous.gridSize;
+                this.editor.showExportArea = previous.showExportArea;
+                this.editor.exportOptions = previous.exportOptions;
+            }
+            this.editor.initPaletteForDiagramType(palette, model.templateType);
+            this.menuBar?.dispose();
+            this.menuBar = new MenuBar({
+                container: menuBarEl,
+                editor: this.editor,
+                items: [this.fileMenu(), this.editMenu(), ...this.hostMenus(), ...this.editor.menuBarItems()],
+            }).render();
+            this.editor.render();
+        }
+
+        /** A diagram's line-style levels, most specific first: the diagram, the model, the tool. */
+        edgeStyleLevels(view) {
+            return [
+                { key: 'view', label: 'Diagram', style: view.edgeStyle },
+                { key: 'model', label: 'Model', style: this.model.edgeStyle },
+                { key: 'tool', label: 'Tool', style: this.toolEdgeStyle },
+            ];
+        }
+
+        /** A diagram's properties: name, documentation and its line-style defaults. */
+        showViewProperties(view) {
+            return new DiagramViewPropertiesDialog({
+                model: this.model,
+                view,
+                document: this.document,
+                cascade: new EdgeStyleCascade(this.edgeStyleLevels(view)),
+                // The editor shows the current diagram; a style change there needs a redraw.
+                onStyleChange: () => { if (view === this.model.currentView) this.editor?.render(); },
+            }).open();
+        }
+
+        dispose() {
+            this.menuBar?.dispose();
+            this._unsubscribe();
+            super.dispose();
+        }
     }
 
     /**
@@ -72168,8 +72460,8 @@ ${cells.map(c => `     <Cell${isHeader ? ' ss:StyleID="Header"' : ''}><Data ss:T
     });
 
     /**
-     * ArchimateEditorPart — the ArchiMate modeller as a workbench part: toolbar,
-     * model tree, one tab per open view and the canvas, filling its pane.
+     * ArchimateEditorPart — legacy GraphDiagram-based ArchiMate editor part.
+     * @deprecated Use ArchimateCanvasPart for ArchiMate editing.
      *
      * Spec (JSON): `elements`, `relationships`, `views` (as ArchimateModel takes
      * them), `features` (toolbar controls, see DEFAULT_FEATURES), `analysis`
@@ -73023,6 +73315,7 @@ ${cells.map(c => `     <Cell${isHeader ? ' ss:StyleID="Header"' : ''}><Data ss:T
     exports.DiagramEditor = DiagramEditor;
     exports.DiagramEditorPart = DiagramEditorPart;
     exports.DiagramEditorState = DiagramEditorState;
+    exports.DiagramJsonFileFormat = DiagramJsonFileFormat;
     exports.DiagramModel = DiagramModel;
     exports.DiagramTabs = DiagramTabs;
     exports.DiagramView = DiagramView;
@@ -73222,6 +73515,7 @@ ${cells.map(c => `     <Cell${isHeader ? ' ss:StyleID="Header"' : ''}><Data ss:T
     exports.StructuredType = StructuredType;
     exports.SurfaceChart3D = SurfaceChart3D;
     exports.SwimlaneTemplate = SwimlaneTemplate;
+    exports.TEMPLATE_CLASSES = TEMPLATE_CLASSES;
     exports.THEME_VARS = THEME_VARS;
     exports.TRACKERS = TRACKERS;
     exports.TRACKER_APIS = TRACKER_APIS;
@@ -73375,6 +73669,8 @@ ${cells.map(c => `     <Cell${isHeader ? ' ss:StyleID="Header"' : ''}><Data ss:T
     exports.stackingOrder = stackingOrder;
     exports.strongerEmphasis = strongerEmphasis;
     exports.svgMarkupToPngBlob = svgMarkupToPngBlob;
+    exports.templateClassFor = templateClassFor;
+    exports.templateTypeKey = templateTypeKey;
     exports.toArchiExport = toArchiExport;
     exports.toArchiFile = toArchiFile;
     exports.toArchimateModel = toArchimateModel;