@peter.prib/renderengine 0.15.2 → 0.16.0

package/documentation/REFERENCE.md

@@ -2907,6 +2907,7 @@ new RectangleTemplate('r1', 'Billing', { fontFamily: 'Georgia', fontSize: '14pt'
 | Boxes | `RectangleTemplate`, `RoundedRectangleTemplate`, `StadiumTemplate`, `PredefinedProcessTemplate`, `ClassTemplate`, `ComponentTemplate`, `SwimlaneTemplate`, `PackageTemplate`, `BoxTemplate` (3D) |
 | Round | `CircleTemplate`, `EllipseTemplate`, `FinalStateTemplate`, `CloudTemplate` |
 | Polygons | `DiamondTemplate`, `TriangleTemplate`, `PentagonTemplate`, `HexagonTemplate`, `OctagonTemplate`, `StarTemplate`, `ParallelogramTemplate`, `TrapezoidTemplate`, `ManualInputTemplate` |
+| C4 Architecture | `C4PersonTemplate`, `C4SystemTemplate`, `C4ContainerTemplate`, `C4ComponentTemplate`, `C4BoundaryTemplate` |
 | Other | `CylinderTemplate`, `DocumentTemplate`, `NoteTemplate`, `DataStoreTemplate`, `ActorTemplate`, `LifelineTemplate` |
 
 A template draws its outline in `shapeElements(doc)`, or in `points()` when it extends
@@ -2939,6 +2940,19 @@ empty canvas, or on the shape at the other end, cancels. This is one undo step
 
 **Container nesting and hierarchy.** Shapes such as `PackageTemplate`, `SwimlaneTemplate`, and `BoxTemplate` are containers (`isContainer = true`). When an element is dropped inside a container (`nestsOnDrop(parentId, childId)`), it is parented via `NestElementCommand` (setting `child.parentId`). Moving a container recursively moves all nested descendants (`moversFor(templateId)`). Containers can automatically expand their bounds to fit their contents via `fitNesting(changes, { padding })`. Ancestor loops are prevented (`isAncestor(childId, parentId)`).
 
+**C4 Model notation & architecture diagrams.** The `'c4-architecture'` category in `DIAGRAM_TYPES` (and `editor.setPaletteCategory('c4-architecture')`) provides first-class support for Simon Brown's C4 model across Context, Container, Component, and Code levels:
+- `C4PersonTemplate`: A human user, actor, persona, or stakeholder (`#08427b`, white text) with an integrated person silhouette badge and `[Person]` tagline.
+- `C4SystemTemplate`: Software system in focus (`#1168bd`, white text, `[Software System]`) or external software systems (`external: true`, `#999999`, `[Software System: External]`).
+- `C4ContainerTemplate`: Applications, web services, or microservices (`#438dd5`, white text, `[Container: <technology>]`), and database datastores (`containerType: 'database'`, cylinder icon).
+- `C4ComponentTemplate`: Modular components, controllers, and services (`#85bbf0`, dark text, `[Component: <technology>]`) with the UML component glyph.
+- `C4BoundaryTemplate`: Enterprise, system, or container scope boundaries (`isContainer = true`, dashed border `#707070`, bracketed header `[<boundaryType> Boundary]`) that enclose nested child elements.
+
+```javascript
+const person = new C4PersonTemplate('p1', 'Customer', { description: 'Personal banking customer' });
+const system = new C4SystemTemplate('s1', 'Internet Banking System', { description: 'Allows customers to view accounts and make payments' });
+const boundary = new C4BoundaryTemplate('b1', 'Big Bank plc', { boundaryType: 'Enterprise' });
+```
+
 **Line style levels.** A line's style resolves through `EdgeStyleCascade`: the line itself,
 then each level in `editor.edgeStyleLevels` (most specific first, `[{ key, label, style }]`),
 then the schema default. A value a level doesn't set is inherited. `EDGE_STYLE_PROPERTIES` is the
@@ -3506,7 +3520,7 @@ drawn with this library's charts. It reads decisionengine's JSON, not decisionen
 document
 
 ```js
-{ kind: 'sadis-workbench', report, plan?, before? }   // report.toJSON(), plan.toJSON(), an earlier report.toJSON()
+{ kind: 'sadis-workbench', report, plan?, before?, graph? }   // report.toJSON(), plan.toJSON(), an earlier report.toJSON(), the scored graph
 ```
 
 which decisionengine's SADIS Explorer downloads ("Download for the Decision Workbench").
@@ -3525,6 +3539,7 @@ for (const view of workbench.views()) {
 |---|---|---|
 | Executive | a report | `kpi-tile` (what to build next; half the value delivered by), `stackedBar` (score part by part), `line` (value delivered by period) |
 | Architecture | a report | `scatter` (visible rating against basin position: foundations sit high and left), `lollipop` (share each frees) |
+| Explore | the scored graph | `graph` diagram of the first candidate's neighbourhood: its ways up to each objective it reaches (shortest, along contributions) and what waits on it (depends on it, or is blocked by it); notes spell each way out. Walked with `NavigatorModel.forGraph` |
 | Delivery | a plan | `gantt` (the plan on a calendar), `stackedBar` (capacity used per period, per team when planned by team) |
 | Portfolio | a report with perspectives | `heatmap` (rank by perspective), `dumbbell` (best and worst rank, most contested first) |
 | Replay | an earlier report | `slopegraph` (rank then → now); notes say what entered, left (and why) and moved |
@@ -3682,7 +3697,7 @@ nav.back();        // returns to 'billing-app'
 const paths = nav.findPaths('billing-app', 'ledger-db', 5);
 
 // Trace transitive downstream or upstream impact:
-const impact = nav.findImpact('billing-app', { maxDepth: 4, direction: 'outgoing' });
+const impact = nav.traceImpact('billing-app', { maxDepth: 4, direction: 'outgoing' });
 
 // 2. Build or render the Navigator UI panel:
 const panel = new NavigatorPanel({
@@ -3697,7 +3712,26 @@ const panel = new NavigatorPanel({
 - **Cycle detection and path tracking:** Tracks visited nodes along active branches to prevent infinite recursion in cyclic relationship graphs, annotating cycles in tree outputs.
 - **Directional filters:** Traversal can follow outgoing relationships, incoming relationships, or bidirectional connections (`setDirection('outgoing' | 'incoming' | 'both')`).
 - **History stack:** Maintains full forward and backward navigation stacks (`focus(id)`, `back()`, `forward()`, `canGoBack`, `canGoForward`).
-- **Impact and path finding:** Built-in BFS/DFS algorithms find connecting pathways (`findPaths(fromId, toId, maxDepth)`) and downstream dependency cascades (`findImpact(elementId, { maxDepth, direction })`).
+- **Impact and path finding:** Built-in BFS/DFS algorithms find connecting pathways (`findPaths(fromId, toId, maxDepth)`) and downstream dependency cascades (`traceImpact(elementId, { maxDepth, direction })`).
+
+
+**Any graph, not only ArchiMate.** `NavigatorModel` reads its graph only through four questions —
+`getElement(id)`, `relationshipsFor(id)` (`{ incoming, outgoing }`, each `{ id, source, target, kind }`),
+`viewsContaining(id)` and `layerOf(element)` — the `GraphSource` interface
+(`src/charting/graph/GraphSource.js`). `ArchimateModel` answers them already (its layers from
+`treeLayerOf`); `DocumentGraph` answers them for a graph document, `{ nodes: [{ id, labels, props }],
+edges: [{ from, to, type, props }] }` — sqlengine's graphs and decisionengine's portfolios — a node's type its
+first label, its layer its type:
+
+```javascript
+import { NavigatorModel, DocumentGraph } from '@peter.prib/renderengine';
+const nav = NavigatorModel.forGraph(graphDocument, { rootId: 'cap-semantic-registry' });
+nav.findPaths('cap-semantic-registry', 'obj-trusted-data', { direction: 'outgoing', allowedKinds: ['ENABLES', 'SUPPORTS'] });
+nav.traceImpact('cap-semantic-registry', { direction: 'incoming', allowedKinds: ['DEPENDS_ON'] });
+```
+
+Why an interface rather than a second walker: traversal is the same for every graph; only these reads
+differ, so each kind of graph answers them and the one walker (paths, impact, history, the tree) serves all.
 
 ## Templated Reports (`TemplatedReport`)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peter.prib/renderengine",
-  "version": "0.15.2",
+  "version": "0.16.0",
   "description": "ArchiMate modeller, data modeller, diagram editor, OLAP cube & pivot chart studio, and 50+ type chart library for the browser, with no runtime dependencies.",
   "type": "module",
   "main": "src/index.js",

package/src/archimateArchiFormat.js

@@ -1,6 +1,7 @@
 import { ArchimateNotation } from './archimate.js';
 import { archiElementType, typeProfileId, typeDisplayName, ARCHI_TYPE_FEATURE, ARCHI_TYPE_PROFILE_PREFIX } from './archimateArchiTypes.js';
-import { ArchimateModel } from './charting/diagrams/ArchimateModel.js';
+import { ArchimateModel } from './charting/diagrams/ArchimateModel.js';
+import { ArchimateSpecializationRegistry } from './archimateSpecializations.js';
 import './charting/diagrams/CanvasView.js';   // registers the canvas view type
 import './charting/diagrams/SketchView.js';   // registers the sketch view type
 import { ElementInstance } from './charting/diagrams/ElementInstance.js';
@@ -720,7 +721,39 @@ function _childText(el, tagName) {
  *  @param {Object} archiModel - parsed Archi XML model
  *  @returns {ArchimateModel} with one view per original view (elementIds track which elements appear in each view)
  *  Now applies visual bounds/waypoints per view. */
-export function toArchimateModel(archiModel) {
+/** Register any model-level Archi specializations (<profile>) with ArchimateSpecializationRegistry. @private */
+function _registerModelProfiles(archiModel) {
+    const profilesById = new Map();
+    for (const e of archiModel?.archi?.elements || []) {
+        if (e.tag === 'profile' && !String(e.attributes?.id ?? '').startsWith(ARCHI_TYPE_PROFILE_PREFIX)) {
+            const id = e.attributes?.id || e.attributes?.name;
+            const name = e.attributes?.name || e.attributes?.id;
+            const conceptType = e.attributes?.conceptType;
+            const imagePath = e.attributes?.imagePath;
+            const archiImagePath = e.attributes?.archiImagePath;
+            const profileDef = {
+                id,
+                name,
+                conceptType,
+                baseTypes: conceptType ? [_toKebabType(conceptType)] : [],
+                iconUrl: imagePath || undefined,
+                archiImagePath,
+            };
+            if (id) profilesById.set(id, profileDef);
+            if (name) profilesById.set(name, profileDef);
+            ArchimateSpecializationRegistry.register({
+                id,
+                name,
+                baseTypes: profileDef.baseTypes,
+                iconUrl: profileDef.iconUrl,
+            });
+        }
+    }
+    return profilesById;
+}
+
+export function toArchimateModel(archiModel) {
+    const profilesById = _registerModelProfiles(archiModel);
     const elements = [];
     const relationships = [];
     const folders = [];
@@ -731,7 +764,7 @@ export function toArchimateModel(archiModel) {
 
     // Map all elements first
     for (const el of archiModel.elements || []) {
-        const mapped = _mapElement(el);
+        const mapped = _mapElement(el, profilesById);
         elementById.set(el.id, mapped);
         elements.push(mapped);
     }
@@ -978,7 +1011,8 @@ function _viewInstances(archiView, { elementById, relationshipById }) {
  *  Returns `{ elements, relationships, options }` ready for `archimateDiagram()`.
  *  If `viewId` is omitted, the first view is used.
  *  Kept as original for backward compatibility: applies visual bounds/features and handles all view visuals. */
-export function toRenderEngineModel(archiModel, viewId) {
+export function toRenderEngineModel(archiModel, viewId) {
+    const profilesById = _registerModelProfiles(archiModel);
     const view = viewId
         ? archiModel.views.find(v => v.id === viewId)
         : archiModel.views[0];
@@ -990,7 +1024,7 @@ export function toRenderEngineModel(archiModel, viewId) {
     const relationshipById = new Map();
 
     for (const el of archiModel.elements || []) {
-        const mapped = _mapElement(el);
+        const mapped = _mapElement(el, profilesById);
         elementById.set(el.id, mapped);
         elements.push(mapped);
     }
@@ -1020,7 +1054,7 @@ export function toRenderEngineModel(archiModel, viewId) {
     return { elements, relationships, folders, folderLayout, elementFolders, options };
 }
 
-function _mapElement(el) {
+function _mapElement(el, profilesById = null) {
     const archiType = _toKebabType(el.type);
     const layer = ArchimateNotation.elementLayer({ type: archiType });
     // A type Archi has no class for was written as the nearest one, with its own kept as a feature.
@@ -1032,6 +1066,21 @@ function _mapElement(el) {
         layer: layer !== 'other' ? layer : undefined,
         documentation: el.documentation || undefined,
     };
+    const profileAttr = el.archi?.attributes?.profiles || el.attributes?.profiles;
+    if (profileAttr && !profileAttr.startsWith(ARCHI_TYPE_PROFILE_PREFIX)) {
+        const firstId = profileAttr.trim().split(/\s+/)[0];
+        const profileDef = profilesById?.get(firstId) || ArchimateSpecializationRegistry.resolve(firstId);
+        mapped.specialization = profileDef?.name || firstId;
+        if (profileDef?.iconUrl && !mapped.iconUrl) {
+            mapped.iconUrl = profileDef.iconUrl;
+        }
+    } else if (el.specialization) {
+        mapped.specialization = el.specialization;
+        const spec = ArchimateSpecializationRegistry.resolve(el.specialization);
+        if (spec?.iconUrl && !mapped.iconUrl) {
+            mapped.iconUrl = spec.iconUrl;
+        }
+    }
     const props = _propertiesToTypedArray(el.properties);
     if (props) mapped.properties = props;
     if (el.archiFolder) mapped.archiFolder = el.archiFolder;
@@ -1388,15 +1437,56 @@ export function toArchiExport(model) {
         archi: view.archi,
         children: fromArchimateView(view),
     }));
+    const archiElements = [...(model.archi?.elements ?? [])];
+    const elements = model.elements().map(el => {
+        if (!el.specialization) return el;
+        const spec = ArchimateSpecializationRegistry.resolve(el.specialization);
+        if (!spec) return el;
+        const specId = spec.id.startsWith('id-') ? spec.id : `id-prof-${spec.id}`;
+        const existing = archiElements.find(e => e.tag === 'profile' && (e.attributes?.id === specId || e.attributes?.name === spec.name));
+        if (!existing) {
+            archiElements.push({
+                tag: 'profile',
+                attributes: {
+                    id: specId,
+                    name: spec.name,
+                    conceptType: _toPascalType(el.type),
+                    ...(spec.iconUrl && { imagePath: spec.iconUrl }),
+                },
+            });
+        } else if (spec.iconUrl && !existing.attributes?.imagePath) {
+            existing.attributes = { ...existing.attributes, imagePath: spec.iconUrl };
+        }
+        if (!el.archi?.attributes?.profiles) {
+            return {
+                ...el,
+                archi: {
+                    ...(el.archi ?? {}),
+                    attributes: {
+                        ...(el.archi?.attributes ?? {}),
+                        profiles: specId,
+                    },
+                },
+            };
+        }
+        return el;
+    });
+
+    const archi = (model.archi || archiElements.length) ? {
+        ...(model.archi ?? {}),
+        attributes: { ...(model.archi?.attributes ?? {}) },
+        elements: archiElements,
+    } : null;
+
     return [{
         id: model.id || 'model-1',
         name: model.name || 'ArchiMate Model',
         version: '5.0.0',
         documentation: model.documentation,
         properties: model.properties,
-        archi: model.archi,
+        archi,
         emptyViewFolders: model.emptyViewFolders ?? [],
-        elements: model.elements(),
+        elements,
         relationships: model.relationships(),
     }, views];
 }
@@ -1510,6 +1600,20 @@ export function toArchiXML(model, views) {
         if (original && !el.archi?.attributes?.profiles) {
             profile = typeProfileId(original);
             typeProfiles.set(profile, { name: typeDisplayName(original), conceptType: _toPascalType(type) });
+        } else if (el.specialization && !el.archi?.attributes?.profiles) {
+            const spec = ArchimateSpecializationRegistry.resolve(el.specialization);
+            if (spec) {
+                const specId = spec.id.startsWith('id-') ? spec.id : ('id-prof-' + spec.id);
+                profile = specId;
+                const existing = (model.archi?.elements ?? []).find(e => e.tag === 'profile' && (e.attributes?.id === specId || e.attributes?.name === spec.name));
+                if (!existing && !typeProfiles.has(specId)) {
+                    typeProfiles.set(specId, {
+                        name: spec.name,
+                        conceptType: _toPascalType(type),
+                        ...(spec.iconUrl && { imagePath: spec.iconUrl }),
+                    });
+                }
+            }
         }
         byFolder.get(folder.type).push({ el, type, original, profile });
     }
@@ -1540,8 +1644,8 @@ export function toArchiXML(model, views) {
 
     // What else the model carried (profiles, ...), its own properties, then its documentation (Archi's "purpose").
     lines.push(..._extraElementLines(model.archi?.elements, '  '));
-    for (const [id, { name, conceptType }] of typeProfiles) {
-        lines.push(`  <profile name="${_escapeAttr(name)}" id="${id}" conceptType="${conceptType}"/>`);
+    for (const [id, { name, conceptType, imagePath }] of typeProfiles) {
+        lines.push(`  <profile name="${_escapeAttr(name)}" id="${id}" conceptType="${conceptType}"${imagePath ? ` imagePath="${_escapeAttr(imagePath)}"` : ''}/>`);
     }
     lines.push(..._propertyLines(model.properties, '  '));
     if (model.documentation) lines.push(`  <purpose>${_escapeXml(model.documentation)}</purpose>`);

package/src/archimateArchive.js

@@ -1,4 +1,5 @@
-import { parseArchiModel, toArchiXML } from './archimateArchiFormat.js';
+import { parseArchiModel, toArchiXML, toPascalType } from './archimateArchiFormat.js';
+import { ArchimateSpecializationRegistry } from './archimateSpecializations.js';
 import { ZipArchive } from './zip/ZipArchive.js';
 
 /**
@@ -95,15 +96,37 @@ export function toArchiFile(model, views) {
     _eachVisual(copies, (visual) => registerPicture(visual));
 
     let modelForXml = model;
-    if (model?.archi?.elements?.some(e => e.attributes?.imagePath?.startsWith('data:'))) {
+    let archiElements = [...(model?.archi?.elements || [])];
+    for (const el of model?.elements || []) {
+        if (el.specialization) {
+            const spec = ArchimateSpecializationRegistry.resolve(el.specialization);
+            if (spec?.iconUrl?.startsWith('data:')) {
+                const specId = spec.id.startsWith('id-') ? spec.id : ('id-prof-' + spec.id);
+                if (!archiElements.some(e => e.tag === 'profile' && (e.attributes?.id === specId || e.attributes?.name === spec.name))) {
+                    archiElements.push({
+                        tag: 'profile',
+                        attributes: {
+                            id: specId,
+                            name: spec.name,
+                            conceptType: toPascalType(el.type),
+                            imagePath: spec.iconUrl,
+                        },
+                    });
+                }
+            }
+        }
+    }
+    if (archiElements.some(e => e.attributes?.imagePath?.startsWith('data:'))) {
         modelForXml = {
             ...model,
             archi: {
-                ...model.archi,
-                elements: model.archi.elements.map(e => {
+                ...(model?.archi ?? {}),
+                attributes: { ...(model?.archi?.attributes ?? {}) },
+                elements: archiElements.map(e => {
                     if (!e.attributes?.imagePath?.startsWith('data:')) return e;
                     const clonedAttr = { ...e.attributes };
                     registerPicture(clonedAttr);
+                    delete clonedAttr.archiImagePath;
                     return { ...e, attributes: clonedAttr };
                 }),
             },

package/src/archimateExchangeFormat.js

@@ -144,12 +144,20 @@ function _organizationPaths(root) {
     return { paths, emptyViewFolders };
 }
 
+function _asPropertyPairs(pairs) {
+    const list = pairs.map(p => ({ ...p }));
+    for (const { key, value } of pairs) {
+        if (!(key in list)) list[key] = value;
+    }
+    return list;
+}
+
 /** An element as parseArchiModel gives it (type: Archi's class name). @private */
 function _parseElement(el, propertyPairs) {
     const xsiType = _xsiType(el);
-    const properties = Object.fromEntries(propertyPairs.map(({ key, value }) => [key, value]));
-    const ownType = properties[EXCHANGE_TYPE_PROPERTY];
-    delete properties[EXCHANGE_TYPE_PROPERTY];
+    const ownType = propertyPairs.find(p => p.key === EXCHANGE_TYPE_PROPERTY)?.value;
+    const filteredPairs = propertyPairs.filter(p => p.key !== EXCHANGE_TYPE_PROPERTY);
+    const properties = _asPropertyPairs(filteredPairs);
     const attributes = {};
     const elements = [];
     if (JUNCTION_TYPES[xsiType]) attributes.type = 'or';
@@ -180,7 +188,7 @@ function _parseRelationship(el, propertyPairs) {
         target: el.getAttribute('target'),
         ...(el.getAttribute('isDirected') === 'true' && { directed: true }),
         documentation: _text(el, 'documentation'),
-        properties: Object.fromEntries(propertyPairs.map(({ key, value }) => [key, value])),
+        properties: _asPropertyPairs(propertyPairs),
         ...(Object.keys(attributes).length && { archi: { attributes, elements: [] } }),
     };
 }

package/src/archimateSpecializations.js

@@ -99,6 +99,12 @@ export class ArchimateSpecializationRegistry {
     /** Register or replace a specialization. */
     static register(spec) {
         const s = new ArchimateSpecialization(spec);
+        const existingByName = this.list().find(e => e.name === s.name && e.id !== s.id);
+        if (existingByName) {
+            if (s.iconUrl && !existingByName.iconUrl) existingByName.iconUrl = s.iconUrl;
+            if (s.icon && !existingByName.icon) existingByName.icon = s.icon;
+            if (s.color && !existingByName.color) existingByName.color = s.color;
+        }
         this._store.set(s.id, s);
         return s;
     }
@@ -116,7 +122,11 @@ export class ArchimateSpecializationRegistry {
     /** Look up by id or by exact name. */
     static resolve(idOrName) {
         if (!idOrName) return undefined;
-        return this._store.get(idOrName) || this.list().find(s => s.name === idOrName);
+        const byId = this._store.get(idOrName);
+        if (byId) return byId;
+        const matches = this.list().filter(s => s.name === idOrName);
+        if (!matches.length) return undefined;
+        return matches.find(s => s.iconUrl || s.icon) || matches[0];
     }
 
     /** All registered specializations. */

package/src/chartCatalog.js

@@ -91,12 +91,13 @@ export const CAMERA_MODE = {
 export const CHART_CATALOG = [
   {
     key: 'bar', label: 'Bar', method: 'barChart', category: '2d',
-    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: true, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.NONE,
+    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: true, colorMode: COLOR_MODE.GROUPED_FIELD, camera: CAMERA_MODE.NONE,
     axes: [
       { role: 'category', kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.POSITION_X, required: true },
       { role: 'value',    kind: AXIS_KIND.NUMERIC,      channel: ENCODING_CHANNEL.POSITION_Y_LENGTH, required: true },
+      { role: 'group',    kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.COLOR,       required: false },
     ],
-    dataShape: 'Array<{label, value}>',
+    dataShape: 'Array<{label, value}> — optional `colorCol` (field name or compiled formula) colors bars by group',
     streamShape: 'flat',
   },
   {
@@ -609,14 +610,15 @@ export const CHART_CATALOG = [
   },
   {
     key: 'lollipop', label: 'Lollipop', method: 'lollipopChart', category: '2d',
-    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: true, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.NONE,
+    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: true, colorMode: COLOR_MODE.GROUPED_FIELD, camera: CAMERA_MODE.NONE,
     seriesCapable: true,
     axes: [
       { role: 'category', kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.POSITION_X, required: true },
       { role: 'value',    kind: AXIS_KIND.NUMERIC,      channel: ENCODING_CHANNEL.POSITION_Y, required: true },
       { role: 'series',   kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.COLOR,      required: false },
+      { role: 'group',    kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.COLOR,      required: false },
     ],
-    dataShape: 'Array<{label, value}> or multi-series Array<{name, values:Array<{label,value}>}> — stem-and-dot alternative to bars',
+    dataShape: 'Array<{label, value}> or multi-series Array<{name, values:Array<{label,value}>}> — stem-and-dot alternative to bars; `colorCol` supported on 1D data',
     streamShape: 'flat',
   },
   {

package/src/charting/ArchimateDiagramEditor.js

@@ -141,11 +141,6 @@ export class ArchimateDiagramEditor extends DiagramEditor {
 
         // Enable tree drag-drop (delayed to allow DOM to be ready)
         setTimeout(() => this.enableTreeDragDrop(), 100);
-
-        // Wire controls if not using auto-toolbar
-        if (!this.features) {
-            this.wireControls();
-        }
     }
 
     /**
@@ -1366,19 +1361,10 @@ export class ArchimateDiagramEditor extends DiagramEditor {
     }
 
     /**
-     * Get a control value from the DOM.
+     * Get a control value.
      */
     getOption(controlId, defaultValue) {
-        if (this._options?.has(controlId)) return super.getOption(controlId, defaultValue);
-        // Hosts that bring their own controls (wireControls) keep them in the DOM.
-        try {
-            const el = this.document.getElementById(controlId);
-            if (!el) return defaultValue;
-            if (el.type === 'checkbox') return el.checked;
-            return el.value || defaultValue;
-        } catch {
-            return defaultValue;
-        }
+        return super.getOption(controlId, defaultValue);
     }
 
     /** Save specializations to localStorage. */
@@ -1572,98 +1558,9 @@ export class ArchimateDiagramEditor extends DiagramEditor {
     }
 
     /**
-     * Wire up all control event listeners (version, viewpoint, distinct shapes, etc.).
-     * Triggers render on change. Optional: provide custom handler functions.
+     * @deprecated Legacy control wiring. Controls are now auto-rendered into the toolbar via `features`.
      */
-    wireControls(options = {}) {
-        const {
-            onVersionChange,
-            onViewpointChange,
-            onViewpointModeChange,
-            onDistinctShapesChange,
-            onShowDerivedChange,
-            onManageViewpoints,
-            onManageSpecializations,
-            populateViewpointSelect,
-        } = options;
-
-        // Version selector
-        const versionEl = this.document.getElementById('archimate-version');
-        if (versionEl) {
-            versionEl.addEventListener('change', () => {
-                if (onVersionChange) onVersionChange();
-                this.render();
-            });
-        }
-
-        // Viewpoint selector and mode
-        const viewpointEl = this.document.getElementById('archimate-viewpoint');
-        const viewpointModeEl = this.document.getElementById('archimate-viewpoint-mode');
-        if (viewpointEl) {
-            viewpointEl.addEventListener('change', () => {
-                if (onViewpointChange) onViewpointChange();
-                this.render();
-            });
-        }
-        if (viewpointModeEl) {
-            viewpointModeEl.addEventListener('change', () => {
-                if (onViewpointModeChange) onViewpointModeChange();
-                this.render();
-            });
-        }
-
-        // Distinct shapes checkbox
-        const distinctShapesEl = this.document.getElementById('archimate-distinct-shapes');
-        if (distinctShapesEl) {
-            distinctShapesEl.addEventListener('change', () => {
-                if (onDistinctShapesChange) onDistinctShapesChange();
-                this.render();
-            });
-        }
-
-        // Show derived relationships checkbox
-        const showDerivedEl = this.document.getElementById('archimate-show-derived');
-        if (showDerivedEl) {
-            showDerivedEl.addEventListener('change', () => {
-                if (onShowDerivedChange) onShowDerivedChange();
-                this.render();
-            });
-        }
-
-        // Manage viewpoints dialog
-        const manageVpEl = this.document.getElementById('archimate-manage-viewpoints');
-        if (manageVpEl && onManageViewpoints) {
-            manageVpEl.addEventListener('click', onManageViewpoints);
-        }
-
-        // Manage specializations dialog
-        const manageSpecEl = this.document.getElementById('archimate-manage-specializations');
-        if (manageSpecEl && onManageSpecializations) {
-            manageSpecEl.addEventListener('click', onManageSpecializations);
-        }
-
-        // Settings dialog
-        const settingsEl = this.document.getElementById('archimate-settings');
-        if (settingsEl) {
-            settingsEl.addEventListener('click', () => {
-                this.workspace.showGlobalSettingsDialog(this.document, this.settingsManager, 'default');
-            });
-        }
-
-        // Filter controls
-        const filterInput = this.document.getElementById('archimate-filter');
-        const filterClearEl = this.document.getElementById('archimate-filter-clear');
-        if (filterInput && this.currentEngine) {
-            const applyFilter = () => {
-                this.currentEngine.filterGraphNodes(filterInput.value);
-            };
-            filterInput.addEventListener('input', applyFilter);
-            if (filterClearEl) {
-                filterClearEl.addEventListener('click', () => {
-                    filterInput.value = '';
-                    applyFilter();
-                });
-            }
-        }
+    wireControls(_options = {}) {
+        // No-op: toolbar and controls are managed via features and MenuBar
     }
 }

package/src/charting/DiagramTypeRegistry.js

@@ -12,7 +12,8 @@ import {
     EllipseTemplate, DiamondTemplate, TriangleTemplate, PentagonTemplate, HexagonTemplate,
     OctagonTemplate, StarTemplate, ParallelogramTemplate, TrapezoidTemplate, ManualInputTemplate,
     CylinderTemplate, DocumentTemplate, NoteTemplate, CloudTemplate, ActorTemplate,
-    PackageTemplate, BoxTemplate, DataStoreTemplate, LifelineTemplate,
+    PackageTemplate, BoxTemplate, DataStoreTemplate, LifelineTemplate,
+    C4PersonTemplate, C4SystemTemplate, C4ContainerTemplate, C4ComponentTemplate, C4BoundaryTemplate,
 } from './templates/index.js';
 
 const C = {
@@ -202,6 +203,24 @@ export const DIAGRAM_TYPES = {
         ],
     },
 
+    'c4-architecture': {
+        name: 'C4 Architecture',
+        group: 'Architecture',
+        description: 'Hierarchical software architecture: Person, System, Container, Component, and Boundaries',
+        templates: [
+            shape('c4-person', 'Person', C4PersonTemplate, { fillColor: '#08427b', textColor: '#ffffff' }, 'A human user, actor, persona, or stakeholder interacting with systems'),
+            shape('c4-system', 'Software System', C4SystemTemplate, { fillColor: '#1168bd', textColor: '#ffffff' }, 'The software system in focus delivering business value'),
+            shape('c4-system-external', 'External System', C4SystemTemplate, { external: true, fillColor: '#999999', textColor: '#ffffff' }, 'An external software system outside the boundary of change'),
+            shape('c4-container', 'Container', C4ContainerTemplate, { fillColor: '#438dd5', textColor: '#ffffff' }, 'An application, web service, mobile app, or microservice'),
+            shape('c4-database', 'Database Container', C4ContainerTemplate, { containerType: 'database', fillColor: '#438dd5', textColor: '#ffffff' }, 'A database, persistence store, cache, or datastore container'),
+            shape('c4-component', 'Component', C4ComponentTemplate, { fillColor: '#85bbf0', textColor: '#000000' }, 'A modular component, controller, or service within a container'),
+            shape('c4-system-boundary', 'System Boundary', C4BoundaryTemplate, { boundaryType: 'System', zIndex: -1 }, 'Boundary box enclosing containers belonging to a Software System'),
+            shape('c4-enterprise-boundary', 'Enterprise Boundary', C4BoundaryTemplate, { boundaryType: 'Enterprise', zIndex: -2 }, 'Boundary box enclosing all systems belonging to an enterprise'),
+            shape('c4-container-boundary', 'Container Boundary', C4BoundaryTemplate, { boundaryType: 'Container', zIndex: -1 }, 'Boundary box enclosing components belonging to a Container'),
+            note,
+        ],
+    },
+
     'er-diagram': {
         name: 'Entity-Relationship',
         group: 'Data',