@transitrix/diagrams 1.0.1 → 1.1.0

package/dist/webview/__tests__/render-process.test.js

@@ -0,0 +1,463 @@
+import { describe, it, expect } from 'vitest';
+import { renderProcessLayoutSvg, renderProcessBody, } from '../render-process.js';
+// ---------------------------------------------------------------------------
+// Test fixture helpers
+// ---------------------------------------------------------------------------
+function makeLayout(overrides = {}) {
+    const elements = new Map([
+        ['start', { x: 160, y: 72, width: 36, height: 36 }],
+        ['task1', { x: 250, y: 60, width: 100, height: 80 }],
+        ['end', { x: 410, y: 72, width: 36, height: 36 }],
+    ]);
+    const laneBounds = new Map([
+        ['lane1', { x: 88, y: 40, width: 400, height: 200 }],
+    ]);
+    const poolBounds = { x: 12, y: 12, width: 500, height: 280 };
+    const process = {
+        id: 'proc1',
+        name: 'Test Process',
+        poolId: 'pool1',
+        poolName: 'Test Pool',
+        lanes: [
+            {
+                id: 'lane1',
+                name: 'Lane One',
+                elements: [
+                    { id: 'start', type: 'startEvent', name: 'Start' },
+                    { id: 'task1', type: 'task', name: 'Do Work' },
+                    { id: 'end', type: 'endEvent', name: 'End' },
+                ],
+            },
+        ],
+    };
+    const flows = [
+        {
+            id: 'f1',
+            from: 'start',
+            to: 'task1',
+            waypoints: [
+                { x: 196, y: 90 },
+                { x: 250, y: 100 },
+            ],
+        },
+        {
+            id: 'f2',
+            from: 'task1',
+            to: 'end',
+            waypoints: [
+                { x: 350, y: 100 },
+                { x: 410, y: 90 },
+            ],
+        },
+    ];
+    return { process, elements, laneBounds, poolBounds, flows, associations: [], ...overrides };
+}
+function addElement(layout, el, bounds) {
+    layout.process.lanes[0].elements.push(el);
+    layout.elements.set(el.id, bounds);
+    return layout;
+}
+// ---------------------------------------------------------------------------
+// SVG root and structure
+// ---------------------------------------------------------------------------
+describe('renderProcessLayoutSvg — root', () => {
+    it('opens and closes an SVG element', () => {
+        const svg = renderProcessLayoutSvg(makeLayout());
+        expect(svg).toMatch(/^<svg xmlns="http:\/\/www\.w3\.org\/2000\/svg"/);
+        expect(svg.trimEnd().endsWith('</svg>')).toBe(true);
+    });
+    it('sets width and height from pool bounds plus padding', () => {
+        const layout = makeLayout();
+        const svg = renderProcessLayoutSvg(layout);
+        // poolBounds x=12, width=500 → svgW = 12+500+16 = 528
+        expect(svg).toContain('width="528"');
+    });
+    it('expands height for topInset', () => {
+        const svg = renderProcessLayoutSvg(makeLayout(), { title: '<text>T</text>', topInset: 32 });
+        // poolBounds y=12, height=280 + padding 16 + inset 32 = 340
+        expect(svg).toContain('height="340"');
+    });
+    it('injects title markup when provided', () => {
+        const svg = renderProcessLayoutSvg(makeLayout(), {
+            title: '<text class="text-header" x="16" y="20">My Title</text>',
+        });
+        expect(svg).toContain('My Title');
+        expect(svg).toContain('text-header');
+    });
+});
+// ---------------------------------------------------------------------------
+// CSS embedding
+// ---------------------------------------------------------------------------
+describe('renderProcessLayoutSvg — CSS', () => {
+    it('embeds a <style> block', () => {
+        const svg = renderProcessLayoutSvg(makeLayout());
+        expect(svg).toContain('<style>');
+        expect(svg).toContain('</style>');
+    });
+    it('includes shared theme CSS custom properties', () => {
+        const svg = renderProcessLayoutSvg(makeLayout());
+        expect(svg).toContain('--ts-');
+    });
+    it('includes BPMN-specific CSS classes', () => {
+        const svg = renderProcessLayoutSvg(makeLayout());
+        expect(svg).toContain('bpmn-pool');
+        expect(svg).toContain('bpmn-lane');
+        expect(svg).toContain('bpmn-task');
+        expect(svg).toContain('bpmn-event');
+        expect(svg).toContain('bpmn-gateway');
+        expect(svg).toContain('bpmn-seq-flow');
+    });
+    it('has no font-style italic', () => {
+        const svg = renderProcessLayoutSvg(makeLayout());
+        expect(svg.toLowerCase()).not.toContain('font-style');
+        expect(svg.toLowerCase()).not.toContain('italic');
+    });
+});
+// ---------------------------------------------------------------------------
+// Pool and lane structure
+// ---------------------------------------------------------------------------
+describe('renderProcessLayoutSvg — pool / lanes', () => {
+    it('renders pool background rect', () => {
+        const svg = renderProcessLayoutSvg(makeLayout());
+        expect(svg).toContain('class="bpmn-pool"');
+    });
+    it('renders pool name band rect', () => {
+        const svg = renderProcessLayoutSvg(makeLayout());
+        expect(svg).toContain('class="bpmn-pool-name"');
+    });
+    it('renders pool name text', () => {
+        const svg = renderProcessLayoutSvg(makeLayout());
+        expect(svg).toContain('Test Pool');
+        expect(svg).toContain('bpmn-pool-label');
+    });
+    it('renders pool name rotated -90 degrees', () => {
+        const svg = renderProcessLayoutSvg(makeLayout());
+        expect(svg).toContain('rotate(-90,');
+    });
+    it('renders lane background rect', () => {
+        const svg = renderProcessLayoutSvg(makeLayout());
+        expect(svg).toContain('class="bpmn-lane"');
+    });
+    it('renders lane header rect', () => {
+        const svg = renderProcessLayoutSvg(makeLayout());
+        expect(svg).toContain('class="bpmn-lane-header"');
+    });
+    it('renders lane name text', () => {
+        const svg = renderProcessLayoutSvg(makeLayout());
+        expect(svg).toContain('Lane One');
+        expect(svg).toContain('bpmn-lane-label');
+    });
+    it('XML-escapes special characters in pool and lane names', () => {
+        const layout = makeLayout();
+        layout.process.poolName = 'Pool & <Co>';
+        layout.process.lanes[0].name = 'Lane "A"';
+        const svg = renderProcessLayoutSvg(layout);
+        expect(svg).not.toContain('<Co>');
+        expect(svg).toContain('&lt;Co&gt;');
+        expect(svg).toContain('&amp;');
+        expect(svg).toContain('&quot;');
+    });
+});
+// ---------------------------------------------------------------------------
+// Flow elements
+// ---------------------------------------------------------------------------
+describe('renderProcessLayoutSvg — start / end events', () => {
+    it('renders start event as circle with bpmn-event-start class', () => {
+        const svg = renderProcessLayoutSvg(makeLayout());
+        expect(svg).toMatch(/<circle[^>]+class="bpmn-event bpmn-event-start"/);
+    });
+    it('renders end event as circle with bpmn-event-end class', () => {
+        const svg = renderProcessLayoutSvg(makeLayout());
+        expect(svg).toMatch(/<circle[^>]+class="bpmn-event bpmn-event-end"/);
+    });
+    it('renders event labels below the shape', () => {
+        const svg = renderProcessLayoutSvg(makeLayout());
+        expect(svg).toContain('class="bpmn-event-label"');
+        expect(svg).toContain('>Start<');
+        expect(svg).toContain('>End<');
+    });
+});
+describe('renderProcessLayoutSvg — tasks', () => {
+    it('renders task as rect with bpmn-task class', () => {
+        const svg = renderProcessLayoutSvg(makeLayout());
+        expect(svg).toContain('class="diagram-node bpmn-task"');
+    });
+    it('renders task with rounded corners', () => {
+        const svg = renderProcessLayoutSvg(makeLayout());
+        expect(svg).toContain('rx="4"');
+    });
+    it('renders task name text', () => {
+        const svg = renderProcessLayoutSvg(makeLayout());
+        expect(svg).toContain('Do Work');
+        expect(svg).toContain('bpmn-task-name');
+    });
+    it('renders userTask and serviceTask the same as task', () => {
+        const layout = makeLayout();
+        addElement(layout, { id: 'ut', type: 'userTask', name: 'User Step' }, { x: 200, y: 60, width: 100, height: 80 });
+        addElement(layout, { id: 'st', type: 'serviceTask', name: 'Service Step' }, { x: 320, y: 60, width: 100, height: 80 });
+        const svg = renderProcessLayoutSvg(layout);
+        expect(svg).toContain('User Step');
+        expect(svg).toContain('Service Step');
+    });
+    it('wraps long task names across multiple tspans', () => {
+        const layout = makeLayout();
+        layout.process.lanes[0].elements[1].name = 'A Very Long Task Name Here';
+        const svg = renderProcessLayoutSvg(layout);
+        expect(svg).toContain('<tspan');
+    });
+    it('XML-escapes special characters in task names', () => {
+        const layout = makeLayout();
+        layout.process.lanes[0].elements[1].name = 'Send <email> & notify';
+        const svg = renderProcessLayoutSvg(layout);
+        expect(svg).not.toContain('<email>');
+        expect(svg).toContain('&lt;email&gt;');
+        expect(svg).toContain('&amp;');
+    });
+});
+describe('renderProcessLayoutSvg — gateways', () => {
+    it('renders XOR gateway as diamond path', () => {
+        const layout = makeLayout();
+        addElement(layout, { id: 'gw1', type: 'exclusiveGateway', name: 'Choice?' }, {
+            x: 180, y: 75, width: 50, height: 50,
+        });
+        const svg = renderProcessLayoutSvg(layout);
+        expect(svg).toContain('class="bpmn-gateway"');
+    });
+    it('renders XOR gateway with × marker lines', () => {
+        const layout = makeLayout();
+        addElement(layout, { id: 'gw1', type: 'exclusiveGateway' }, {
+            x: 180, y: 75, width: 50, height: 50,
+        });
+        const svg = renderProcessLayoutSvg(layout);
+        expect(svg).toContain('class="bpmn-gateway-marker"');
+        // The × marker has two crossing diagonals — check for the double-M path
+        const markerSection = svg.match(/class="bpmn-gateway-marker"[^>]*d="([^"]+)"/)?.[1] ?? '';
+        expect(markerSection.match(/M/g)?.length).toBe(2);
+    });
+    it('renders AND gateway as diamond path', () => {
+        const layout = makeLayout();
+        addElement(layout, { id: 'gw2', type: 'parallelGateway' }, {
+            x: 180, y: 75, width: 50, height: 50,
+        });
+        const svg = renderProcessLayoutSvg(layout);
+        expect(svg).toContain('class="bpmn-gateway"');
+        expect(svg).toContain('class="bpmn-gateway-marker"');
+    });
+    it('renders inclusive gateway as diamond with circle marker', () => {
+        const layout = makeLayout();
+        addElement(layout, { id: 'gw3', type: 'inclusiveGateway', name: 'Any?' }, {
+            x: 180, y: 75, width: 50, height: 50,
+        });
+        const svg = renderProcessLayoutSvg(layout);
+        expect(svg).toContain('class="bpmn-gateway"');
+        expect(svg).toMatch(/<circle[^>]+class="bpmn-gateway-marker"/);
+    });
+    it('inclusive gateway circle marker uses gateway-marker class (no fill)', () => {
+        const layout = makeLayout();
+        addElement(layout, { id: 'gw3', type: 'inclusiveGateway' }, {
+            x: 180, y: 75, width: 50, height: 50,
+        });
+        const svg = renderProcessLayoutSvg(layout);
+        // CSS class bpmn-gateway-marker has fill:none — no inline fill on the element
+        const circle = svg.match(/<circle[^>]+bpmn-gateway-marker[^>]*/)?.[0] ?? '';
+        expect(circle).not.toContain('fill=');
+    });
+    it('inclusive gateway renders label below shape', () => {
+        const layout = makeLayout();
+        addElement(layout, { id: 'gw3', type: 'inclusiveGateway', name: 'Any path?' }, {
+            x: 180, y: 75, width: 50, height: 50,
+        });
+        const svg = renderProcessLayoutSvg(layout);
+        expect(svg).toContain('Any path?');
+        expect(svg).toContain('bpmn-gateway-label');
+    });
+});
+describe('renderProcessLayoutSvg — data objects', () => {
+    it('renders data object with fold-corner path', () => {
+        const layout = makeLayout();
+        addElement(layout, { id: 'do1', type: 'dataObject', name: 'Invoice' }, {
+            x: 160, y: 50, width: 36, height: 50,
+        });
+        const svg = renderProcessLayoutSvg(layout);
+        expect(svg).toContain('class="bpmn-data-obj"');
+    });
+    it('renders data object name below shape', () => {
+        const layout = makeLayout();
+        addElement(layout, { id: 'do1', type: 'dataObject', name: 'Invoice' }, {
+            x: 160, y: 50, width: 36, height: 50,
+        });
+        const svg = renderProcessLayoutSvg(layout);
+        expect(svg).toContain('Invoice');
+        expect(svg).toContain('bpmn-data-obj-label');
+    });
+});
+// ---------------------------------------------------------------------------
+// Intermediate events (P2)
+// ---------------------------------------------------------------------------
+describe('renderProcessLayoutSvg — intermediate message event', () => {
+    it('renders outer ring with bpmn-event-start class', () => {
+        const layout = makeLayout();
+        addElement(layout, { id: 'me1', type: 'intermediateMessageEvent', name: 'Receive' }, {
+            x: 200, y: 72, width: 36, height: 36,
+        });
+        const svg = renderProcessLayoutSvg(layout);
+        // Outer ring reuses the start-event circle
+        expect(svg).toMatch(/<circle[^>]+class="bpmn-event bpmn-event-start"/);
+    });
+    it('renders inner ring with bpmn-event-intermediate class', () => {
+        const layout = makeLayout();
+        addElement(layout, { id: 'me1', type: 'intermediateMessageEvent' }, {
+            x: 200, y: 72, width: 36, height: 36,
+        });
+        const svg = renderProcessLayoutSvg(layout);
+        expect(svg).toContain('class="bpmn-event-intermediate"');
+    });
+    it('renders envelope rect and fold path as bpmn-event-icon', () => {
+        const layout = makeLayout();
+        addElement(layout, { id: 'me1', type: 'intermediateMessageEvent' }, {
+            x: 200, y: 72, width: 36, height: 36,
+        });
+        const svg = renderProcessLayoutSvg(layout);
+        expect(svg).toContain('class="bpmn-event-icon"');
+        // Envelope body is a rect
+        expect(svg).toMatch(/<rect[^>]+bpmn-event-icon/);
+        // Envelope flap is a path with at least 2 M/L points
+        const iconPath = svg.match(/class="bpmn-event-icon"[^>]*d="([^"]+)"/)?.[1] ?? '';
+        expect(iconPath).toBeTruthy();
+    });
+    it('renders label below the shape', () => {
+        const layout = makeLayout();
+        addElement(layout, { id: 'me1', type: 'intermediateMessageEvent', name: 'Order Received' }, {
+            x: 200, y: 72, width: 36, height: 36,
+        });
+        const svg = renderProcessLayoutSvg(layout);
+        expect(svg).toContain('Order Received');
+        expect(svg).toContain('bpmn-event-label');
+    });
+    it('no font-style italic in intermediate message event output', () => {
+        const layout = makeLayout();
+        addElement(layout, { id: 'me1', type: 'intermediateMessageEvent', name: 'Wait' }, {
+            x: 200, y: 72, width: 36, height: 36,
+        });
+        const svg = renderProcessLayoutSvg(layout);
+        expect(svg).not.toContain('font-style');
+    });
+});
+describe('renderProcessLayoutSvg — intermediate timer event', () => {
+    it('renders outer ring with bpmn-event-start class', () => {
+        const layout = makeLayout();
+        addElement(layout, { id: 'te1', type: 'intermediateTimerEvent', name: 'Wait 1h' }, {
+            x: 200, y: 72, width: 36, height: 36,
+        });
+        const svg = renderProcessLayoutSvg(layout);
+        expect(svg).toMatch(/<circle[^>]+class="bpmn-event bpmn-event-start"/);
+    });
+    it('renders inner ring with bpmn-event-intermediate class', () => {
+        const layout = makeLayout();
+        addElement(layout, { id: 'te1', type: 'intermediateTimerEvent' }, {
+            x: 200, y: 72, width: 36, height: 36,
+        });
+        const svg = renderProcessLayoutSvg(layout);
+        expect(svg).toContain('class="bpmn-event-intermediate"');
+    });
+    it('renders clock face circle and two hand lines', () => {
+        const layout = makeLayout();
+        addElement(layout, { id: 'te1', type: 'intermediateTimerEvent' }, {
+            x: 200, y: 72, width: 36, height: 36,
+        });
+        const svg = renderProcessLayoutSvg(layout);
+        // Clock face circle
+        expect(svg).toMatch(/<circle[^>]+class="bpmn-event-icon"/);
+        // Two hand lines
+        const lines = svg.match(/<line[^>]+class="bpmn-event-icon"/g) ?? [];
+        expect(lines.length).toBe(2);
+    });
+    it('renders label below the shape', () => {
+        const layout = makeLayout();
+        addElement(layout, { id: 'te1', type: 'intermediateTimerEvent', name: 'Delay' }, {
+            x: 200, y: 72, width: 36, height: 36,
+        });
+        const svg = renderProcessLayoutSvg(layout);
+        expect(svg).toContain('Delay');
+        expect(svg).toContain('bpmn-event-label');
+    });
+    it('no font-style italic in intermediate timer event output', () => {
+        const layout = makeLayout();
+        addElement(layout, { id: 'te1', type: 'intermediateTimerEvent', name: 'Wait' }, {
+            x: 200, y: 72, width: 36, height: 36,
+        });
+        const svg = renderProcessLayoutSvg(layout);
+        expect(svg).not.toContain('font-style');
+    });
+});
+// ---------------------------------------------------------------------------
+// Sequence flows
+// ---------------------------------------------------------------------------
+describe('renderProcessLayoutSvg — sequence flows', () => {
+    it('renders flows as polylines with arrow marker', () => {
+        const svg = renderProcessLayoutSvg(makeLayout());
+        expect(svg).toContain('class="bpmn-seq-flow"');
+        expect(svg).toContain('marker-end="url(#bpmn-arrow)"');
+    });
+    it('defines the bpmn-arrow marker', () => {
+        const svg = renderProcessLayoutSvg(makeLayout());
+        expect(svg).toContain('id="bpmn-arrow"');
+        expect(svg).toContain('class="arrow-fill"');
+    });
+    it('renders conditional flows as solid lines (BPMN 2.0 — no dashes on seq-flow)', () => {
+        const layout = makeLayout();
+        layout.flows[0] = { ...layout.flows[0], condition: 'approved == true' };
+        const svg = renderProcessLayoutSvg(layout);
+        // Conditional flows are solid per BPMN 2.0; the marker-only default-flow convention applies instead.
+        expect(svg).not.toContain('bpmn-seq-cond');
+        expect(svg).toContain('bpmn-seq-flow');
+    });
+    it('skips flows with fewer than 2 waypoints', () => {
+        const layout = makeLayout();
+        layout.flows.push({ id: 'bad', from: 'start', to: 'end', waypoints: [{ x: 100, y: 100 }] });
+        expect(() => renderProcessLayoutSvg(layout)).not.toThrow();
+        const svg = renderProcessLayoutSvg(layout);
+        // Should still render the 2 valid flows
+        const matches = svg.match(/class="bpmn-seq-flow"/g);
+        expect(matches?.length).toBe(2);
+    });
+});
+// ---------------------------------------------------------------------------
+// Associations
+// ---------------------------------------------------------------------------
+describe('renderProcessLayoutSvg — associations', () => {
+    it('renders associations as dashed polylines without arrowhead', () => {
+        const layout = makeLayout();
+        addElement(layout, { id: 'do1', type: 'dataObject' }, { x: 160, y: 50, width: 36, height: 50 });
+        layout.associations.push({
+            id: 'a1',
+            from: 'task1',
+            to: 'do1',
+            waypoints: [{ x: 300, y: 100 }, { x: 178, y: 75 }],
+        });
+        const svg = renderProcessLayoutSvg(layout);
+        expect(svg).toContain('class="bpmn-assoc"');
+        // Associations must NOT have arrowheads
+        const assocLine = svg.match(/class="bpmn-assoc"[^/]*/)?.[0] ?? '';
+        expect(assocLine).not.toContain('marker-end');
+    });
+});
+// ---------------------------------------------------------------------------
+// renderProcessBody offset
+// ---------------------------------------------------------------------------
+describe('renderProcessBody', () => {
+    it('shifts all coordinates by ox/oy', () => {
+        const layout = makeLayout();
+        const bodyAt0 = renderProcessBody(layout, 0, 0);
+        const bodyAt50 = renderProcessBody(layout, 50, 0);
+        // Pool at ox=0 has x=12; at ox=50 should be x=62
+        expect(bodyAt0).toContain('x="12"');
+        expect(bodyAt50).toContain('x="62"');
+        expect(bodyAt50).not.toContain('x="12"');
+    });
+    it('includes defs block with arrow marker', () => {
+        const body = renderProcessBody(makeLayout(), 0, 0);
+        expect(body).toContain('<defs>');
+        expect(body).toContain('id="bpmn-arrow"');
+    });
+});

package/dist/webview/__tests__/render-util.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/webview/__tests__/render-util.test.js

@@ -0,0 +1,54 @@
+/**
+ * Unit tests for the host-neutral metadata reader shared by the VS Code preview
+ * chrome and the IntelliJ JCEF webview bundle (review E — single metadata
+ * reader). Locks the CONTRACT §1.1 precedence: `name` over legacy `title`, and
+ * `generated_at` over legacy `date`.
+ */
+import { describe, expect, it } from 'vitest';
+import { escHtml, escXml, extractDiagramMeta } from '../render-util.js';
+describe('escXml / escHtml', () => {
+    it('escapes XML-significant characters and aliases escHtml', () => {
+        expect(escXml('a & b < c > d "e"')).toBe('a &amp; b &lt; c &gt; d &quot;e&quot;');
+        expect(escHtml).toBe(escXml);
+    });
+});
+describe('extractDiagramMeta', () => {
+    it('reads canonical name/generated_at and version/description', () => {
+        expect(extractDiagramMeta({
+            name: 'Quarterly goals',
+            description: 'Q3 plan',
+            generated_at: '2026-06-22',
+            version: 3,
+        })).toEqual({
+            title: 'Quarterly goals',
+            subtitle: 'Q3 plan',
+            date: '2026-06-22',
+            version: '3',
+        });
+    });
+    it('prefers name over legacy title and generated_at over legacy date', () => {
+        expect(extractDiagramMeta({
+            name: 'Canonical',
+            title: 'Legacy title',
+            generated_at: '2026-01-01',
+            date: '2020-12-31',
+        })).toMatchObject({ title: 'Canonical', date: '2026-01-01' });
+    });
+    it('falls back to legacy title/date when canonical keys are absent', () => {
+        expect(extractDiagramMeta({ title: 'Legacy title', date: '2020-12-31' })).toMatchObject({ title: 'Legacy title', date: '2020-12-31' });
+    });
+    it('returns all-undefined for non-object input', () => {
+        expect(extractDiagramMeta(null)).toEqual({
+            title: undefined,
+            subtitle: undefined,
+            date: undefined,
+            version: undefined,
+        });
+        expect(extractDiagramMeta('not a doc')).toEqual({
+            title: undefined,
+            subtitle: undefined,
+            date: undefined,
+            version: undefined,
+        });
+    });
+});

package/dist/webview/entry.d.ts

@@ -27,7 +27,7 @@ export interface RenderResult {
  * convention used by the VS Code extension's `activationEvents`. All twelve
  * are wired to their validator + renderer as of Step 4.
  */
-export type NotationKind = 'goals' | 'fgca' | 'fga' | 'activities' | 'activity-card' | 'applications' | 'products' | 'process-map' | 'process-blueprint' | 'scenarios' | 'capability-map' | 'blocks';
+export type NotationKind = 'goals' | 'dgca' | 'dga' | 'fgca' | 'fga' | 'activities' | 'activity-card' | 'applications' | 'products' | 'process-map' | 'process-blueprint' | 'scenarios' | 'capability-map' | 'blocks';
 export declare function render(notationKind: string, source: string): RenderResult;
 export declare const api: {
     version: string;

package/dist/webview/entry.js

@@ -46,6 +46,8 @@ import { renderProductsHtml } from './render-products.js';
 import { renderScenarioHtml } from './render-scenarios.js';
 const SUPPORTED_KINDS = [
     'goals',
+    'dgca',
+    'dga',
     'fgca',
     'fga',
     'activities',
@@ -108,12 +110,13 @@ function dispatchValidate(kind, doc) {
             }
             return r;
         }
-        // FGCA and FGA share the canonical parse + renderer; only the layer
-        // visibility differs (FGA collapses the Change column). Both carry the
-        // parsed `FGCADoc` on the result's `parsed` field when valid.
+        // DGCA and DGA are the canonical new names; FGCA/FGA are accepted as
+        // deprecated aliases. All four share the same parse + renderer; only the
+        // Change column visibility differs (DGA/FGA collapse it).
+        case 'dgca':
         case 'fgca': {
             const v = parseCanonicalFGCA(doc);
-            const r = emptyResult('fgca', v.valid ? 'ok' : 'error');
+            const r = emptyResult(kind, v.valid ? 'ok' : 'error');
             r.errors.push(...v.errors);
             r.warnings.push(...v.warnings);
             if (v.valid && v.parsed) {
@@ -121,9 +124,10 @@ function dispatchValidate(kind, doc) {
             }
             return r;
         }
+        case 'dga':
         case 'fga': {
             const v = parseCanonicalFGA(doc);
-            const r = emptyResult('fga', v.valid ? 'ok' : 'error');
+            const r = emptyResult(kind, v.valid ? 'ok' : 'error');
             r.errors.push(...v.errors);
             r.warnings.push(...v.warnings);
             if (v.valid && v.parsed) {

package/dist/webview/render-activities.d.ts

@@ -1,4 +1,24 @@
-import type { ActivityDoc, ActivitiesLayoutOptions } from '../activities/types.js';
+import { computeCpm } from '../activities/cpm.js';
+import type { ActivityDoc, ActivitiesLayout, ActivitiesLayoutOptions } from '../activities/types.js';
+/**
+ * Network-view diagram CSS (critical path, milestones, edge colours) — the
+ * canonical rules shared with the VS Code preview's `ACTIVITIES_DIAGRAM_CSS`
+ * network subset. Embedded alongside the shared theme CSS so the SVG is
+ * self-contained for the JCEF host.
+ */
+export declare const ACTIVITIES_NETWORK_CSS = "\n  .act-node { fill: var(--ts-layer-activity, #d4edda); stroke: var(--ts-node-stroke, #94a3b8); stroke-width: 1; }\n  .critical-node { fill: #fff7ed; stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 2.5; }\n  .milestone-node { fill: #ecfeff; stroke: var(--ts-text-muted, #64748b); stroke-dasharray: 4 2; }\n  .critical-edge { stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 2; }\n  .arrow-fill-critical { fill: var(--ts-brand-orange, #ff4d00); }\n";
+/** Arrowhead marker defs shared by both hosts for the network view. */
+export declare const ACTIVITIES_NETWORK_DEFS = "<defs>\n  <marker id=\"arrow\" markerWidth=\"8\" markerHeight=\"8\" refX=\"8\" refY=\"3\" orient=\"auto\">\n    <path d=\"M0,0 L0,6 L8,3 z\" class=\"arrow-fill\"/>\n  </marker>\n  <marker id=\"arrow-crit\" markerWidth=\"8\" markerHeight=\"8\" refX=\"8\" refY=\"3\" orient=\"auto\">\n    <path d=\"M0,0 L0,6 L8,3 z\" class=\"arrow-fill-critical\"/>\n  </marker>\n</defs>";
+/**
+ * Canonical Network (PSND) body — the node rects and edge paths that go inside
+ * the `<svg>`, shared verbatim by the VS Code preview and the host-neutral
+ * wrapper below. Excludes the host-specific title block and the (identical)
+ * marker defs (`ACTIVITIES_NETWORK_DEFS`).
+ *
+ * `ox`/`oy` are the canvas offsets (the caller folds in padding + any title
+ * height); `curvature`/`entryCurvature` scale the exit/entry edge handles.
+ */
+export declare function renderActivitiesNetworkBody(layout: ActivitiesLayout, cpm: ReturnType<typeof computeCpm>, ox: number, oy: number, curvature: number, entryCurvature: number | undefined): string;
 export interface RenderActivitiesOptions {
     /** Optional heading rendered as a `text-header` above the diagram. */
     title?: string;