@peter.prib/renderengine 0.2.4 → 0.2.6

package/src/charting/DiagramTypeRegistry.js

@@ -1,326 +1,365 @@
-/**
- * DiagramTypeRegistry — palette categories: which shapes each kind of diagram offers.
- *
- * Each category is pure data: `{ name, group, description, templates }`, where a
- * template entry is `{ id, name, factory(id, x, y) }`. `group` drives the
- * grouped category picker. The 'generic' key is the fallback for unknown types.
- */
-import {
-    RectangleTemplate, RoundedRectangleTemplate, StadiumTemplate, PredefinedProcessTemplate,
-    ClassTemplate, ComponentTemplate, SwimlaneTemplate, CircleTemplate, FinalStateTemplate,
-    EllipseTemplate, DiamondTemplate, TriangleTemplate, PentagonTemplate, HexagonTemplate,
-    OctagonTemplate, StarTemplate, ParallelogramTemplate, TrapezoidTemplate, ManualInputTemplate,
-    CylinderTemplate, DocumentTemplate, NoteTemplate, CloudTemplate, ActorTemplate,
-    PackageTemplate, BoxTemplate, DataStoreTemplate, LifelineTemplate,
-} from './templates/index.js';
-
-const C = {
-    blue: '#dbeafe', green: '#dcfce7', yellow: '#fef9c3', red: '#fee2e2', purple: '#ede9fe',
-    orange: '#ffedd5', teal: '#ccfbf1', grey: '#f1f5f9', white: '#ffffff', dark: '#334155',
-};
-
-/** Palette entry whose instances are `TemplateClass` created with `options` and named `name`. */
-function shape(id, name, TemplateClass, options = {}) {
-    return { id, name, factory: (instanceId, x, y) => new TemplateClass(instanceId, name, { ...options, x, y }) };
-}
-
-const note = shape('note', 'Note', NoteTemplate);
-
-export const DIAGRAM_TYPES = {
-    'generic': {
-        name: 'Basic Shapes',
-        group: 'General',
-        description: 'General-purpose geometric shapes',
-        templates: [
-            shape('rectangle', 'Rectangle', RectangleTemplate, { fillColor: C.blue }),
-            shape('rounded-rectangle', 'Rounded', RoundedRectangleTemplate, { fillColor: C.blue }),
-            shape('circle', 'Circle', CircleTemplate, { fillColor: C.red }),
-            shape('ellipse', 'Ellipse', EllipseTemplate, { fillColor: C.purple }),
-            shape('diamond', 'Diamond', DiamondTemplate, { fillColor: C.yellow }),
-            shape('triangle', 'Triangle', TriangleTemplate, { fillColor: C.green }),
-            shape('pentagon', 'Pentagon', PentagonTemplate, { fillColor: C.teal }),
-            shape('hexagon', 'Hexagon', HexagonTemplate, { fillColor: C.orange }),
-            shape('octagon', 'Octagon', OctagonTemplate, { fillColor: C.red }),
-            shape('star', 'Star', StarTemplate, { fillColor: C.yellow }),
-            shape('parallelogram', 'Parallelogram', ParallelogramTemplate, { fillColor: C.green }),
-            shape('trapezoid', 'Trapezoid', TrapezoidTemplate, { fillColor: C.purple }),
-            shape('cylinder', 'Cylinder', CylinderTemplate, { fillColor: C.grey }),
-            shape('document', 'Document', DocumentTemplate, { fillColor: C.white }),
-            shape('cloud', 'Cloud', CloudTemplate, { fillColor: C.blue }),
-            note,
-        ],
-    },
-
-    'flowchart': {
-        name: 'Flowchart',
-        group: 'Process',
-        description: 'Steps, decisions and data in a process or algorithm',
-        templates: [
-            shape('terminator', 'Start / End', StadiumTemplate, { fillColor: C.green }),
-            shape('process', 'Process', RectangleTemplate, { fillColor: C.blue }),
-            shape('decision', 'Decision', DiamondTemplate, { fillColor: C.yellow }),
-            shape('data', 'Data (I/O)', ParallelogramTemplate, { fillColor: C.purple }),
-            shape('predefined-process', 'Subroutine', PredefinedProcessTemplate, { fillColor: C.blue }),
-            shape('document', 'Document', DocumentTemplate, { fillColor: C.white }),
-            shape('database', 'Database', CylinderTemplate, { fillColor: C.grey }),
-            shape('manual-input', 'Manual Input', ManualInputTemplate, { fillColor: C.orange }),
-            shape('manual-operation', 'Manual Op', TrapezoidTemplate, { fillColor: C.orange }),
-            shape('preparation', 'Preparation', HexagonTemplate, { fillColor: C.teal }),
-            shape('connector', 'Connector', CircleTemplate, { width: 30, height: 30, fillColor: C.white }),
-            note,
-        ],
-    },
-
-    'bpmn': {
-        name: 'BPMN Process',
-        group: 'Process',
-        description: 'Business process: events, tasks, gateways and lanes',
-        templates: [
-            shape('start-event', 'Start Event', CircleTemplate, { width: 40, height: 40, fillColor: C.green }),
-            shape('end-event', 'End Event', CircleTemplate, { width: 40, height: 40, fillColor: C.red, strokeWidth: 4 }),
-            shape('task', 'Task', RoundedRectangleTemplate, { fillColor: C.blue }),
-            shape('subprocess', 'Sub-Process', PredefinedProcessTemplate, { fillColor: C.blue }),
-            shape('gateway', 'Gateway', DiamondTemplate, { width: 50, height: 50, fillColor: C.yellow }),
-            shape('data-object', 'Data Object', NoteTemplate, { width: 50, height: 64, fillColor: C.white }),
-            shape('data-store', 'Data Store', CylinderTemplate, { width: 60, height: 60, fillColor: C.grey }),
-            shape('lane', 'Lane', SwimlaneTemplate, { zIndex: -1 }),
-            note,
-        ],
-    },
-
-    'swimlane-diagram': {
-        name: 'Swimlane',
-        group: 'Process',
-        description: 'Flow steps divided into lanes by actor or department',
-        templates: [
-            shape('lane', 'Lane', SwimlaneTemplate, { zIndex: -1 }),
-            shape('start', 'Start / End', StadiumTemplate, { fillColor: C.green }),
-            shape('task', 'Task', RoundedRectangleTemplate, { width: 110, height: 50, fillColor: C.blue }),
-            shape('decision', 'Decision', DiamondTemplate, { width: 80, height: 80, fillColor: C.yellow }),
-            shape('document', 'Document', DocumentTemplate, { fillColor: C.white }),
-            note,
-        ],
-    },
-
-    'class-diagram': {
-        name: 'Class',
-        group: 'UML',
-        description: 'Classes, interfaces and their relationships',
-        templates: [
-            shape('class', 'Class', ClassTemplate, { fillColor: C.white }),
-            shape('abstract-class', 'Abstract Class', ClassTemplate, { fillColor: C.grey }),
-            shape('interface', '«interface»', ClassTemplate, { height: 80, fillColor: C.green }),
-            shape('enumeration', '«enumeration»', ClassTemplate, { height: 90, fillColor: C.yellow }),
-            shape('package', 'Package', PackageTemplate, { fillColor: C.grey, zIndex: -1 }),
-            note,
-        ],
-    },
-
-    'sequence-diagram': {
-        name: 'Sequence',
-        group: 'UML',
-        description: 'Messages exchanged between participants over time',
-        templates: [
-            shape('actor', 'Actor', ActorTemplate),
-            shape('lifeline', 'Participant', LifelineTemplate, { fillColor: C.blue }),
-            shape('activation', 'Activation', RectangleTemplate, { width: 14, height: 80, fillColor: C.white }),
-            shape('fragment', 'Fragment', SwimlaneTemplate, { width: 300, height: 140, fillColor: C.white, fillOpacity: 0.3, zIndex: -1 }),
-            note,
-        ],
-    },
-
-    'activity-diagram': {
-        name: 'Activity',
-        group: 'UML',
-        description: 'Actions, control flow, forks and joins',
-        templates: [
-            shape('initial', 'Initial', CircleTemplate, { width: 28, height: 28, fillColor: C.dark }),
-            shape('action', 'Action', RoundedRectangleTemplate, { fillColor: C.blue }),
-            shape('decision', 'Decision / Merge', DiamondTemplate, { width: 44, height: 44, fillColor: C.yellow }),
-            shape('fork-join', 'Fork / Join', RectangleTemplate, { width: 120, height: 8, fillColor: C.dark }),
-            shape('object', 'Object', RectangleTemplate, { fillColor: C.white }),
-            shape('final', 'Final', FinalStateTemplate),
-            shape('partition', 'Partition', SwimlaneTemplate, { zIndex: -1 }),
-            note,
-        ],
-    },
-
-    'state-machine': {
-        name: 'State Machine',
-        group: 'UML',
-        description: 'States and the transitions between them',
-        templates: [
-            shape('initial', 'Initial', CircleTemplate, { width: 28, height: 28, fillColor: C.dark }),
-            shape('state', 'State', RoundedRectangleTemplate, { fillColor: C.blue }),
-            shape('composite-state', 'Composite State', RoundedRectangleTemplate, { width: 260, height: 160, fillColor: C.grey, zIndex: -1 }),
-            shape('choice', 'Choice', DiamondTemplate, { width: 40, height: 40, fillColor: C.yellow }),
-            shape('final', 'Final', FinalStateTemplate),
-            note,
-        ],
-    },
-
-    'use-case-diagram': {
-        name: 'Use Case',
-        group: 'UML',
-        description: 'Actors and the system functions they use',
-        templates: [
-            shape('actor', 'Actor', ActorTemplate),
-            shape('use-case', 'Use Case', EllipseTemplate, { width: 140, height: 60, fillColor: C.blue }),
-            shape('system', 'System Boundary', RectangleTemplate, { width: 300, height: 360, fillColor: C.white, zIndex: -1 }),
-            note,
-        ],
-    },
-
-    'component-diagram': {
-        name: 'Component',
-        group: 'UML',
-        description: 'Software components and the interfaces that wire them',
-        templates: [
-            shape('component', 'Component', ComponentTemplate, { fillColor: C.blue }),
-            shape('interface', 'Interface', CircleTemplate, { width: 24, height: 24, fillColor: C.white }),
-            shape('package', 'Package', PackageTemplate, { fillColor: C.grey, zIndex: -1 }),
-            shape('database', 'Database', CylinderTemplate, { fillColor: C.grey }),
-            note,
-        ],
-    },
-
-    'deployment-diagram': {
-        name: 'Deployment',
-        group: 'UML',
-        description: 'Hardware nodes and the artifacts deployed to them',
-        templates: [
-            shape('node', 'Node', BoxTemplate, { fillColor: C.grey }),
-            shape('device', '«device»', BoxTemplate, { fillColor: C.blue }),
-            shape('execution-environment', '«exec env»', BoxTemplate, { fillColor: C.green }),
-            shape('artifact', '«artifact»', NoteTemplate, { fillColor: C.white }),
-            shape('database', 'Database', CylinderTemplate, { fillColor: C.grey }),
-            note,
-        ],
-    },
-
-    'er-diagram': {
-        name: 'Entity-Relationship',
-        group: 'Data',
-        description: 'Entities, attributes and relationships (Chen notation)',
-        templates: [
-            shape('entity', 'Entity', RectangleTemplate, { width: 140, height: 60, fillColor: C.blue }),
-            shape('relationship', 'Relationship', DiamondTemplate, { width: 120, height: 70, fillColor: C.yellow }),
-            shape('attribute', 'Attribute', EllipseTemplate, { width: 110, height: 50, fillColor: C.green }),
-            shape('table', 'Table', ClassTemplate, { fillColor: C.white }),
-            note,
-        ],
-    },
-
-    'data-flow-diagram': {
-        name: 'Data Flow',
-        group: 'Data',
-        description: 'How data moves between processes, stores and external entities',
-        templates: [
-            shape('process', 'Process', CircleTemplate, { width: 100, height: 100, fillColor: C.blue }),
-            shape('external-entity', 'External Entity', RectangleTemplate, { fillColor: C.grey }),
-            shape('data-store', 'Data Store', DataStoreTemplate, { fillColor: C.yellow }),
-            note,
-        ],
-    },
-
-    'network-diagram': {
-        name: 'Network',
-        group: 'Infrastructure',
-        description: 'Servers, clients and the connections between them',
-        templates: [
-            shape('server', 'Server', BoxTemplate, { width: 100, height: 110, fillColor: C.grey }),
-            shape('client', 'Client', RectangleTemplate, { width: 100, height: 70, fillColor: C.blue }),
-            shape('database', 'Database', CylinderTemplate, { fillColor: C.grey }),
-            shape('cloud', 'Cloud', CloudTemplate, { fillColor: C.blue }),
-            shape('router', 'Router', CircleTemplate, { width: 60, height: 60, fillColor: C.green }),
-            shape('firewall', 'Firewall', RectangleTemplate, { width: 40, height: 100, fillColor: C.red }),
-            shape('load-balancer', 'Load Balancer', HexagonTemplate, { fillColor: C.orange }),
-            shape('zone', 'Zone', SwimlaneTemplate, { fillColor: C.grey, fillOpacity: 0.5, zIndex: -1 }),
-            note,
-        ],
-    },
-
-    'organizational-chart': {
-        name: 'Org Chart',
-        group: 'Business',
-        description: 'Reporting lines and departments',
-        templates: [
-            shape('executive', 'Executive', RoundedRectangleTemplate, { width: 140, height: 60, fillColor: C.purple }),
-            shape('manager', 'Manager', RoundedRectangleTemplate, { width: 130, height: 56, fillColor: C.blue }),
-            shape('staff', 'Staff', RoundedRectangleTemplate, { width: 120, height: 50, fillColor: C.white }),
-            shape('vacancy', 'Vacancy', RoundedRectangleTemplate, { width: 120, height: 50, fillColor: C.grey }),
-            shape('department', 'Department', SwimlaneTemplate, { width: 320, height: 200, zIndex: -1 }),
-            note,
-        ],
-    },
-
-    'mind-map': {
-        name: 'Mind Map',
-        group: 'Ideas',
-        description: 'Topics radiating from a central idea',
-        templates: [
-            shape('central-topic', 'Central Topic', EllipseTemplate, { width: 170, height: 80, fillColor: C.orange, strokeWidth: 3 }),
-            shape('main-topic', 'Main Topic', StadiumTemplate, { width: 130, height: 44, fillColor: C.blue }),
-            shape('subtopic', 'Subtopic', RoundedRectangleTemplate, { width: 110, height: 34, fillColor: C.white }),
-            shape('idea', 'Idea', CloudTemplate, { width: 120, height: 72, fillColor: C.yellow }),
-            note,
-        ],
-    },
-
-    'concept-map': {
-        name: 'Concept Map',
-        group: 'Ideas',
-        description: 'Concepts joined by labelled relationships',
-        templates: [
-            shape('concept', 'Concept', RoundedRectangleTemplate, { fillColor: C.blue }),
-            shape('key-concept', 'Key Concept', EllipseTemplate, { width: 140, height: 70, fillColor: C.orange }),
-            shape('linking-phrase', 'Linking Phrase', RectangleTemplate, { width: 100, height: 30, fillColor: C.white, strokeWidth: 1 }),
-            note,
-        ],
-    },
-
-    'decision-tree': {
-        name: 'Decision Tree',
-        group: 'Ideas',
-        description: 'Decisions, chance events and outcomes',
-        templates: [
-            shape('decision', 'Decision', RectangleTemplate, { width: 60, height: 60, fillColor: C.blue }),
-            shape('chance', 'Chance', CircleTemplate, { width: 60, height: 60, fillColor: C.yellow }),
-            shape('outcome', 'Outcome', TriangleTemplate, { width: 60, height: 54, fillColor: C.green }),
-            shape('label', 'Label', RectangleTemplate, { width: 110, height: 30, fillColor: C.white, strokeWidth: 1 }),
-            note,
-        ],
-    },
-
-    'venn-diagram': {
-        name: 'Venn',
-        group: 'Ideas',
-        description: 'Overlapping sets',
-        templates: [
-            shape('set-a', 'Set A', CircleTemplate, { width: 180, height: 180, fillColor: '#60a5fa', fillOpacity: 0.35 }),
-            shape('set-b', 'Set B', CircleTemplate, { width: 180, height: 180, fillColor: '#f87171', fillOpacity: 0.35 }),
-            shape('set-c', 'Set C', CircleTemplate, { width: 180, height: 180, fillColor: '#4ade80', fillOpacity: 0.35 }),
-            shape('universe', 'Universe', RectangleTemplate, { width: 420, height: 320, fillColor: C.white, zIndex: -1 }),
-            note,
-        ],
-    },
-};
-
-/** Template entries for a category, falling back to 'generic' for unknown keys. */
-export function getTemplatesForDiagramType(diagramType) {
-    return (DIAGRAM_TYPES[diagramType] ?? DIAGRAM_TYPES.generic).templates;
-}
-
-export function getAllDiagramTypes() {
-    return Object.keys(DIAGRAM_TYPES);
-}
-
-/** Categories grouped for a picker, in registry order: [{ group, types: [{ key, name, description }] }]. */
-export function getDiagramTypesByGroup(types = DIAGRAM_TYPES) {
-    const groups = new Map();
-    for (const [key, { name, group = 'Other', description }] of Object.entries(types)) {
-        if (!groups.has(group)) groups.set(group, []);
-        groups.get(group).push({ key, name, description });
-    }
-    return [...groups].map(([group, entries]) => ({ group, types: entries }));
-}
+/**
+ * DiagramTypeRegistry — palette categories: which shapes each kind of diagram offers.
+ *
+ * Each category is pure data: `{ name, group, description, templates }`, where a
+ * template entry is `{ id, name, factory(id, x, y), description? }` (what the
+ * palette says of it on hover). `group` drives the
+ * grouped category picker. The 'generic' key is the fallback for unknown types.
+ */
+import {
+    RectangleTemplate, RoundedRectangleTemplate, StadiumTemplate, PredefinedProcessTemplate,
+    ClassTemplate, ComponentTemplate, SwimlaneTemplate, CircleTemplate, FinalStateTemplate,
+    EllipseTemplate, DiamondTemplate, TriangleTemplate, PentagonTemplate, HexagonTemplate,
+    OctagonTemplate, StarTemplate, ParallelogramTemplate, TrapezoidTemplate, ManualInputTemplate,
+    CylinderTemplate, DocumentTemplate, NoteTemplate, CloudTemplate, ActorTemplate,
+    PackageTemplate, BoxTemplate, DataStoreTemplate, LifelineTemplate,
+} from './templates/index.js';
+
+const C = {
+    blue: '#dbeafe', green: '#dcfce7', yellow: '#fef9c3', red: '#fee2e2', purple: '#ede9fe',
+    orange: '#ffedd5', teal: '#ccfbf1', grey: '#f1f5f9', white: '#ffffff', dark: '#334155',
+};
+
+/** Palette entry whose instances are `TemplateClass` created with `options` and named `name`; `description` says what it is. */
+function shape(id, name, TemplateClass, options = {}, description = undefined) {
+    return {
+        id, name, factory: (instanceId, x, y) => new TemplateClass(instanceId, name, { ...options, x, y }),
+        ...(description && { description }),
+    };
+}
+
+const note = shape('note', 'Note', NoteTemplate);
+
+export const DIAGRAM_TYPES = {
+    'generic': {
+        name: 'Basic Shapes',
+        group: 'General',
+        description: 'General-purpose geometric shapes',
+        templates: [
+            shape('rectangle', 'Rectangle', RectangleTemplate, { fillColor: C.blue }),
+            shape('rounded-rectangle', 'Rounded', RoundedRectangleTemplate, { fillColor: C.blue }),
+            shape('circle', 'Circle', CircleTemplate, { fillColor: C.red }),
+            shape('ellipse', 'Ellipse', EllipseTemplate, { fillColor: C.purple }),
+            shape('diamond', 'Diamond', DiamondTemplate, { fillColor: C.yellow }),
+            shape('triangle', 'Triangle', TriangleTemplate, { fillColor: C.green }),
+            shape('pentagon', 'Pentagon', PentagonTemplate, { fillColor: C.teal }),
+            shape('hexagon', 'Hexagon', HexagonTemplate, { fillColor: C.orange }),
+            shape('octagon', 'Octagon', OctagonTemplate, { fillColor: C.red }),
+            shape('star', 'Star', StarTemplate, { fillColor: C.yellow }),
+            shape('parallelogram', 'Parallelogram', ParallelogramTemplate, { fillColor: C.green }),
+            shape('trapezoid', 'Trapezoid', TrapezoidTemplate, { fillColor: C.purple }),
+            shape('cylinder', 'Cylinder', CylinderTemplate, { fillColor: C.grey }),
+            shape('document', 'Document', DocumentTemplate, { fillColor: C.white }),
+            shape('cloud', 'Cloud', CloudTemplate, { fillColor: C.blue }),
+            note,
+        ],
+    },
+
+    'flowchart': {
+        name: 'Flowchart',
+        group: 'Process',
+        description: 'Steps, decisions and data in a process or algorithm',
+        templates: [
+            shape('terminator', 'Start / End', StadiumTemplate, { fillColor: C.green }),
+            shape('process', 'Process', RectangleTemplate, { fillColor: C.blue }),
+            shape('decision', 'Decision', DiamondTemplate, { fillColor: C.yellow }),
+            shape('data', 'Data (I/O)', ParallelogramTemplate, { fillColor: C.purple }),
+            shape('predefined-process', 'Subroutine', PredefinedProcessTemplate, { fillColor: C.blue }),
+            shape('document', 'Document', DocumentTemplate, { fillColor: C.white }),
+            shape('database', 'Database', CylinderTemplate, { fillColor: C.grey }),
+            shape('manual-input', 'Manual Input', ManualInputTemplate, { fillColor: C.orange }),
+            shape('manual-operation', 'Manual Op', TrapezoidTemplate, { fillColor: C.orange }),
+            shape('preparation', 'Preparation', HexagonTemplate, { fillColor: C.teal }),
+            shape('connector', 'Connector', CircleTemplate, { width: 30, height: 30, fillColor: C.white }),
+            note,
+        ],
+    },
+
+    'bpmn': {
+        name: 'BPMN Process',
+        group: 'Process',
+        description: 'Business process: events, tasks, gateways and lanes',
+        templates: [
+            shape('start-event', 'Start Event', CircleTemplate, { width: 40, height: 40, fillColor: C.green }),
+            shape('end-event', 'End Event', CircleTemplate, { width: 40, height: 40, fillColor: C.red, strokeWidth: 4 }),
+            shape('task', 'Task', RoundedRectangleTemplate, { fillColor: C.blue }),
+            shape('subprocess', 'Sub-Process', PredefinedProcessTemplate, { fillColor: C.blue }),
+            shape('gateway', 'Gateway', DiamondTemplate, { width: 50, height: 50, fillColor: C.yellow }),
+            shape('data-object', 'Data Object', NoteTemplate, { width: 50, height: 64, fillColor: C.white }),
+            shape('data-store', 'Data Store', CylinderTemplate, { width: 60, height: 60, fillColor: C.grey }),
+            shape('lane', 'Lane', SwimlaneTemplate, { zIndex: -1 }),
+            note,
+        ],
+    },
+
+    'swimlane-diagram': {
+        name: 'Swimlane',
+        group: 'Process',
+        description: 'Flow steps divided into lanes by actor or department',
+        templates: [
+            shape('lane', 'Lane', SwimlaneTemplate, { zIndex: -1 }),
+            shape('start', 'Start / End', StadiumTemplate, { fillColor: C.green }),
+            shape('task', 'Task', RoundedRectangleTemplate, { width: 110, height: 50, fillColor: C.blue }),
+            shape('decision', 'Decision', DiamondTemplate, { width: 80, height: 80, fillColor: C.yellow }),
+            shape('document', 'Document', DocumentTemplate, { fillColor: C.white }),
+            note,
+        ],
+    },
+
+    'class-diagram': {
+        name: 'Class',
+        group: 'UML',
+        description: 'Classes, interfaces and their relationships',
+        templates: [
+            shape('class', 'Class', ClassTemplate, { fillColor: C.white }),
+            shape('abstract-class', 'Abstract Class', ClassTemplate, { fillColor: C.grey }),
+            shape('interface', '«interface»', ClassTemplate, { height: 80, fillColor: C.green }),
+            shape('enumeration', '«enumeration»', ClassTemplate, { height: 90, fillColor: C.yellow }),
+            shape('package', 'Package', PackageTemplate, { fillColor: C.grey, zIndex: -1 }),
+            note,
+        ],
+    },
+
+    'sequence-diagram': {
+        name: 'Sequence',
+        group: 'UML',
+        description: 'Messages exchanged between participants over time',
+        templates: [
+            shape('actor', 'Actor', ActorTemplate),
+            shape('lifeline', 'Participant', LifelineTemplate, { fillColor: C.blue }),
+            shape('activation', 'Activation', RectangleTemplate, { width: 14, height: 80, fillColor: C.white }),
+            shape('fragment', 'Fragment', SwimlaneTemplate, { width: 300, height: 140, fillColor: C.white, fillOpacity: 0.3, zIndex: -1 }),
+            note,
+        ],
+    },
+
+    'activity-diagram': {
+        name: 'Activity',
+        group: 'UML',
+        description: 'Actions, control flow, forks and joins',
+        templates: [
+            shape('initial', 'Initial', CircleTemplate, { width: 28, height: 28, fillColor: C.dark }),
+            shape('action', 'Action', RoundedRectangleTemplate, { fillColor: C.blue }),
+            shape('decision', 'Decision / Merge', DiamondTemplate, { width: 44, height: 44, fillColor: C.yellow }),
+            shape('fork-join', 'Fork / Join', RectangleTemplate, { width: 120, height: 8, fillColor: C.dark }),
+            shape('object', 'Object', RectangleTemplate, { fillColor: C.white }),
+            shape('final', 'Final', FinalStateTemplate),
+            shape('partition', 'Partition', SwimlaneTemplate, { zIndex: -1 }),
+            note,
+        ],
+    },
+
+    'state-machine': {
+        name: 'State Machine',
+        group: 'UML',
+        description: 'States and the transitions between them',
+        templates: [
+            shape('initial', 'Initial', CircleTemplate, { width: 28, height: 28, fillColor: C.dark }),
+            shape('state', 'State', RoundedRectangleTemplate, { fillColor: C.blue }),
+            shape('composite-state', 'Composite State', RoundedRectangleTemplate, { width: 260, height: 160, fillColor: C.grey, zIndex: -1 }),
+            shape('choice', 'Choice', DiamondTemplate, { width: 40, height: 40, fillColor: C.yellow }),
+            shape('final', 'Final', FinalStateTemplate),
+            note,
+        ],
+    },
+
+    'use-case-diagram': {
+        name: 'Use Case',
+        group: 'UML',
+        description: 'Actors and the system functions they use',
+        templates: [
+            shape('actor', 'Actor', ActorTemplate),
+            shape('use-case', 'Use Case', EllipseTemplate, { width: 140, height: 60, fillColor: C.blue }),
+            shape('system', 'System Boundary', RectangleTemplate, { width: 300, height: 360, fillColor: C.white, zIndex: -1 }),
+            note,
+        ],
+    },
+
+    'component-diagram': {
+        name: 'Component',
+        group: 'UML',
+        description: 'Software components and the interfaces that wire them',
+        templates: [
+            shape('component', 'Component', ComponentTemplate, { fillColor: C.blue }),
+            shape('interface', 'Interface', CircleTemplate, { width: 24, height: 24, fillColor: C.white }),
+            shape('package', 'Package', PackageTemplate, { fillColor: C.grey, zIndex: -1 }),
+            shape('database', 'Database', CylinderTemplate, { fillColor: C.grey }),
+            note,
+        ],
+    },
+
+    'deployment-diagram': {
+        name: 'Deployment',
+        group: 'UML',
+        description: 'Hardware nodes and the artifacts deployed to them',
+        templates: [
+            shape('node', 'Node', BoxTemplate, { fillColor: C.grey }),
+            shape('device', '«device»', BoxTemplate, { fillColor: C.blue }),
+            shape('execution-environment', '«exec env»', BoxTemplate, { fillColor: C.green }),
+            shape('artifact', '«artifact»', NoteTemplate, { fillColor: C.white }),
+            shape('database', 'Database', CylinderTemplate, { fillColor: C.grey }),
+            note,
+        ],
+    },
+
+    'er-diagram': {
+        name: 'Entity-Relationship',
+        group: 'Data',
+        description: 'Entities, attributes and relationships (Chen notation)',
+        templates: [
+            shape('entity', 'Entity', RectangleTemplate, { width: 140, height: 60, fillColor: C.blue }),
+            shape('relationship', 'Relationship', DiamondTemplate, { width: 120, height: 70, fillColor: C.yellow }),
+            shape('attribute', 'Attribute', EllipseTemplate, { width: 110, height: 50, fillColor: C.green }),
+            shape('table', 'Table', ClassTemplate, { fillColor: C.white }),
+            note,
+        ],
+    },
+
+    'enterprise-ontology': {
+        name: 'Enterprise Ontology',
+        group: 'Data',
+        description: 'The universal concepts enterprise data models are built from (after IBM IFW\'s data concepts): parties in roles enter arrangements for products and resources; events change them, ledgers record their value; business direction steers them; classification, place, time, measure and rule describe them',
+        templates: [
+            shape('party', 'Party', ActorTemplate, {},
+                '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('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('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 },
+                'A change of state the business cares about: order placed, payment made, shipment dispatched, sensor reading. Events drive processes, workflows and ledgers.'),
+            shape('ledger', 'Account / Ledger', CylinderTemplate, { width: 100, height: 80, fillColor: C.grey },
+                'A record of value, obligations or state over time: financial account, inventory ledger, entitlement balance, audit log. It records the quantitative impact of events.'),
+            shape('classification', 'Classification', PentagonTemplate, { width: 110, height: 80, fillColor: C.teal },
+                'A scheme for categorising parties, resources, events and arrangements: product category, risk rating, asset class, industry code, status.'),
+            shape('place', 'Place', HexagonTemplate, { width: 110, height: 70, fillColor: C.orange },
+                'Where things happen or exist, physical or logical: building, room, coordinate, cloud region, network zone.'),
+            shape('time', 'Time', CircleTemplate, { width: 70, height: 70, fillColor: C.white },
+                'A point or interval in time: effective date, validity period, contract term, timestamp, posting date.'),
+            shape('measure', 'Measure', RectangleTemplate, { width: 110, height: 40, fillColor: C.white },
+                'A quantity with its unit: weight, price, balance, temperature, risk score, count. The basis of metrics, KPIs and ledgers.'),
+            shape('direction', 'Business Direction', StarTemplate, { width: 100, height: 90, fillColor: C.yellow },
+                'Where the business means to go: goal, objective, strategy, plan, policy, and the targets that measure them. It shapes products, arrangements and rules.'),
+            shape('rule', 'Rule', DiamondTemplate, { width: 100, height: 70, fillColor: C.red },
+                'A condition that governs arrangements, events or resources: business rule, policy, validation, regulatory requirement, eligibility.'),
+            note,
+        ],
+    },
+
+    'data-flow-diagram': {
+        name: 'Data Flow',
+        group: 'Data',
+        description: 'How data moves between processes, stores and external entities',
+        templates: [
+            shape('process', 'Process', CircleTemplate, { width: 100, height: 100, fillColor: C.blue }),
+            shape('external-entity', 'External Entity', RectangleTemplate, { fillColor: C.grey }),
+            shape('data-store', 'Data Store', DataStoreTemplate, { fillColor: C.yellow }),
+            note,
+        ],
+    },
+
+    'network-diagram': {
+        name: 'Network',
+        group: 'Infrastructure',
+        description: 'Servers, clients and the connections between them',
+        templates: [
+            shape('server', 'Server', BoxTemplate, { width: 100, height: 110, fillColor: C.grey }),
+            shape('client', 'Client', RectangleTemplate, { width: 100, height: 70, fillColor: C.blue }),
+            shape('database', 'Database', CylinderTemplate, { fillColor: C.grey }),
+            shape('cloud', 'Cloud', CloudTemplate, { fillColor: C.blue }),
+            shape('router', 'Router', CircleTemplate, { width: 60, height: 60, fillColor: C.green }),
+            shape('firewall', 'Firewall', RectangleTemplate, { width: 40, height: 100, fillColor: C.red }),
+            shape('load-balancer', 'Load Balancer', HexagonTemplate, { fillColor: C.orange }),
+            shape('zone', 'Zone', SwimlaneTemplate, { fillColor: C.grey, fillOpacity: 0.5, zIndex: -1 }),
+            note,
+        ],
+    },
+
+    'organizational-chart': {
+        name: 'Org Chart',
+        group: 'Business',
+        description: 'Reporting lines and departments',
+        templates: [
+            shape('executive', 'Executive', RoundedRectangleTemplate, { width: 140, height: 60, fillColor: C.purple }),
+            shape('manager', 'Manager', RoundedRectangleTemplate, { width: 130, height: 56, fillColor: C.blue }),
+            shape('staff', 'Staff', RoundedRectangleTemplate, { width: 120, height: 50, fillColor: C.white }),
+            shape('vacancy', 'Vacancy', RoundedRectangleTemplate, { width: 120, height: 50, fillColor: C.grey }),
+            shape('department', 'Department', SwimlaneTemplate, { width: 320, height: 200, zIndex: -1 }),
+            note,
+        ],
+    },
+
+    'mind-map': {
+        name: 'Mind Map',
+        group: 'Ideas',
+        description: 'Topics radiating from a central idea',
+        templates: [
+            shape('central-topic', 'Central Topic', EllipseTemplate, { width: 170, height: 80, fillColor: C.orange, strokeWidth: 3 }),
+            shape('main-topic', 'Main Topic', StadiumTemplate, { width: 130, height: 44, fillColor: C.blue }),
+            shape('subtopic', 'Subtopic', RoundedRectangleTemplate, { width: 110, height: 34, fillColor: C.white }),
+            shape('idea', 'Idea', CloudTemplate, { width: 120, height: 72, fillColor: C.yellow }),
+            note,
+        ],
+    },
+
+    'concept-map': {
+        name: 'Concept Map',
+        group: 'Ideas',
+        description: 'Concepts joined by labelled relationships',
+        templates: [
+            shape('concept', 'Concept', RoundedRectangleTemplate, { fillColor: C.blue }),
+            shape('key-concept', 'Key Concept', EllipseTemplate, { width: 140, height: 70, fillColor: C.orange }),
+            shape('linking-phrase', 'Linking Phrase', RectangleTemplate, { width: 100, height: 30, fillColor: C.white, strokeWidth: 1 }),
+            note,
+        ],
+    },
+
+    'decision-tree': {
+        name: 'Decision Tree',
+        group: 'Ideas',
+        description: 'Decisions, chance events and outcomes',
+        templates: [
+            shape('decision', 'Decision', RectangleTemplate, { width: 60, height: 60, fillColor: C.blue }),
+            shape('chance', 'Chance', CircleTemplate, { width: 60, height: 60, fillColor: C.yellow }),
+            shape('outcome', 'Outcome', TriangleTemplate, { width: 60, height: 54, fillColor: C.green }),
+            shape('label', 'Label', RectangleTemplate, { width: 110, height: 30, fillColor: C.white, strokeWidth: 1 }),
+            note,
+        ],
+    },
+
+    'venn-diagram': {
+        name: 'Venn',
+        group: 'Ideas',
+        description: 'Overlapping sets',
+        templates: [
+            shape('set-a', 'Set A', CircleTemplate, { width: 180, height: 180, fillColor: '#60a5fa', fillOpacity: 0.35 }),
+            shape('set-b', 'Set B', CircleTemplate, { width: 180, height: 180, fillColor: '#f87171', fillOpacity: 0.35 }),
+            shape('set-c', 'Set C', CircleTemplate, { width: 180, height: 180, fillColor: '#4ade80', fillOpacity: 0.35 }),
+            shape('universe', 'Universe', RectangleTemplate, { width: 420, height: 320, fillColor: C.white, zIndex: -1 }),
+            note,
+        ],
+    },
+};
+
+/** Template entries for a category, falling back to 'generic' for unknown keys. */
+export function getTemplatesForDiagramType(diagramType) {
+    return (DIAGRAM_TYPES[diagramType] ?? DIAGRAM_TYPES.generic).templates;
+}
+
+export function getAllDiagramTypes() {
+    return Object.keys(DIAGRAM_TYPES);
+}
+
+/** Categories grouped for a picker, in registry order: [{ group, types: [{ key, name, description }] }]. */
+export function getDiagramTypesByGroup(types = DIAGRAM_TYPES) {
+    const groups = new Map();
+    for (const [key, { name, group = 'Other', description }] of Object.entries(types)) {
+        if (!groups.has(group)) groups.set(group, []);
+        groups.get(group).push({ key, name, description });
+    }
+    return [...groups].map(([group, entries]) => ({ group, types: entries }));
+}