@transitrix/diagrams 1.7.6 → 1.8.2

package/dist/process-blueprint/layout.js

@@ -1,3 +1,4 @@
+import { wrapTextLines } from '../webview/entity-text-layout.js';
 const ASPECT_CATEGORIES = ['systems', 'actors', 'equipment', 'information_entities'];
 const ASPECT_LABEL = {
     systems: 'Systems',
@@ -30,55 +31,11 @@ function resolveOptions(options) {
     return { ...DEFAULTS, ...(options ?? {}) };
 }
 /**
- * Greedy word-wrap to a max characters-per-line budget. Words longer than the
- * budget are hard-split; if the result exceeds `maxLines`, the last kept line
- * is truncated with an ellipsis so a single pathological cell can't grow the
- * whole row unbounded.
+ * Greedy word-wrap to a max characters-per-line budget. Delegates to the shared
+ * shared text-layout module.
  */
 function wrapText(text, maxChars, maxLines) {
-    const trimmed = (text ?? '').trim();
-    if (trimmed.length === 0)
-        return [];
-    const budget = Math.max(1, maxChars);
-    const words = trimmed.split(/\s+/);
-    const lines = [];
-    let cur = '';
-    const flush = () => {
-        if (cur.length > 0) {
-            lines.push(cur);
-            cur = '';
-        }
-    };
-    for (const word of words) {
-        if (word.length > budget) {
-            // Token wider than the cell: hard-break it across lines.
-            flush();
-            let rest = word;
-            while (rest.length > budget) {
-                lines.push(rest.slice(0, budget));
-                rest = rest.slice(budget);
-            }
-            cur = rest;
-            continue;
-        }
-        const candidate = cur.length > 0 ? `${cur} ${word}` : word;
-        if (candidate.length > budget) {
-            flush();
-            cur = word;
-        }
-        else {
-            cur = candidate;
-        }
-    }
-    flush();
-    if (lines.length > maxLines) {
-        const capped = lines.slice(0, maxLines);
-        const last = capped[maxLines - 1];
-        const clipped = last.length > budget - 1 ? last.slice(0, budget - 1) : last;
-        capped[maxLines - 1] = `${clipped.replace(/…$/, '')}…`;
-        return capped;
-    }
-    return lines;
+    return wrapTextLines(text, maxChars, maxLines);
 }
 function buildStageIndex(stages) {
     const idx = new Map();

package/dist/webview/__tests__/entity-text-layout.test.d.ts

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

package/dist/webview/__tests__/entity-text-layout.test.js

@@ -0,0 +1,60 @@
+import { describe, expect, it } from 'vitest';
+import { layoutCenteredEntityText, LINE_H_PRIMARY, LINE_H_SECONDARY, maxCharsForInnerWidth, ROW_GROUP_GAP, wrapWords, wrapTextLines, } from '../entity-text-layout.js';
+describe('entity-text-layout', () => {
+    it('wrapWords respects max lines and truncates with ellipsis', () => {
+        const long = 'one two three four five six seven eight nine ten eleven twelve';
+        const lines = wrapWords(long, 12, 2);
+        expect(lines.length).toBeLessThanOrEqual(2);
+        expect(lines[lines.length - 1]).toMatch(/…$/);
+    });
+    it('maxCharsForInnerWidth scales with inner width', () => {
+        expect(maxCharsForInnerWidth(160, 7)).toBeGreaterThan(maxCharsForInnerWidth(120, 7));
+    });
+    it('layoutCenteredEntityText keeps name and type labels separated', () => {
+        const specs = layoutCenteredEntityText({
+            boxX: 0,
+            boxY: 0,
+            boxWidth: 250,
+            boxHeight: 80,
+            name: 'Grow enterprise value',
+            type: 'Strategic',
+            id: 'GOAL-VALUE-1',
+            nameMaxLines: 2,
+            idMaxLines: 1,
+        });
+        const nameY = specs.find((l) => l.cls === 'text-primary').y;
+        const typeY = specs.find((l) => l.cls === 'text-secondary').y;
+        const minGap = typeY - nameY - LINE_H_PRIMARY / 2 - LINE_H_SECONDARY / 2;
+        expect(minGap).toBeGreaterThanOrEqual(ROW_GROUP_GAP - 1);
+    });
+    it('layoutCenteredEntityText emits more name capacity on wide boxes', () => {
+        const narrow = layoutCenteredEntityText({
+            boxX: 0,
+            boxY: 0,
+            boxWidth: 200,
+            boxHeight: 80,
+            name: 'Improve customer onboarding experience across regions',
+            id: 'GOAL-001',
+            nameMaxLines: 2,
+            idMaxLines: 1,
+        });
+        const wide = layoutCenteredEntityText({
+            boxX: 0,
+            boxY: 0,
+            boxWidth: 320,
+            boxHeight: 80,
+            name: 'Improve customer onboarding experience across regions',
+            id: 'GOAL-001',
+            nameMaxLines: 2,
+            idMaxLines: 1,
+        });
+        const narrowPrimary = narrow.filter((l) => l.cls === 'text-primary').map((l) => l.text).join(' ');
+        const widePrimary = wide.filter((l) => l.cls === 'text-primary').map((l) => l.text).join(' ');
+        expect(widePrimary.replace(/…/g, '').length).toBeGreaterThanOrEqual(narrowPrimary.replace(/…/g, '').length);
+    });
+    it('wrapTextLines hard-breaks oversized tokens (blueprint cells)', () => {
+        const lines = wrapTextLines('supercalifragilisticexpialidocious word', 10, 3);
+        expect(lines.length).toBeGreaterThan(1);
+        expect(lines.every((l) => l.length <= 10)).toBe(true);
+    });
+});

package/dist/webview/__tests__/entry.test.js

@@ -40,9 +40,9 @@ describe('webview/entry — Step 2 host API', () => {
     });
     it('routes non-goals kinds to their validator after Step 4 (no NOTATION-NOT-WIRED)', () => {
         // Every supported kind is now wired to its validator + renderer. A
-        // malformed fgca document must surface a structured validation error from
-        // the fgca validator — never the Step-2/3 "not wired" placeholder.
-        const r = render('fgca', 'changes: []\n');
+        // malformed dgca document must surface a structured validation error from
+        // the dgca validator — never the Step-2/3 "not wired" placeholder.
+        const r = render('dgca', 'changes: []\n');
         expect(r.status).toBe('error');
         expect(r.errors.length).toBeGreaterThan(0);
         expect(r.errors.every((e) => e.code !== 'NOTATION-NOT-WIRED')).toBe(true);

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

@@ -8,13 +8,10 @@
  */
 import { describe, expect, it } from 'vitest';
 import { renderBlocksSvg } from '../render-blocks.js';
-// Approximate character widths used by the renderer when sizing labels.
-// Kept in sync with `CHAR_W` / `CHAR_W_ID` in render-blocks.ts so the test
-// can compute the same overflow bounds the renderer uses.
-const CHAR_W = 7;
-const CHAR_W_ID = 6;
-// Same horizontal margin the renderer reserves so text never abuts the rect.
-const TEXT_MARGIN_X = 8;
+import { CHAR_W_PRIMARY as CHAR_W, CHAR_W_ID, TEXT_MARGIN_X } from '../entity-text-layout.js';
+import { ENTITY_NODE_SIZE } from '../../node-size-presets.js';
+const LEAF_W = ENTITY_NODE_SIZE.normal.width;
+const LEAF_H = ENTITY_NODE_SIZE.normal.height;
 function leafDoc(name, id) {
     return {
         notation: 'blocks',
@@ -75,7 +72,7 @@ describe('renderBlocksSvg — leaf labels', () => {
         }
     });
     it('wraps a long ID to at most 2 lines and truncates with …', () => {
-        const longId = 'VERY_LONG_BLOCK_IDENTIFIER_WITH_MANY_SEGMENTS_AND_MORE_AND_MORE';
+        const longId = 'VERY_LONG_BLOCK_IDENTIFIER_WITH_MANY_SEGMENTS_AND_MORE_AND_MORE_EXTRA_TAIL_TO_FORCE_TRUNCATION';
         const svg = renderBlocksSvg(leafDoc('Short name', longId));
         const idLines = extractLabels(svg).filter((l) => l.cls === 'text-id');
         expect(idLines.length).toBeGreaterThan(0);
@@ -84,10 +81,10 @@ describe('renderBlocksSvg — leaf labels', () => {
             expect(idLines[1].text.endsWith('…')).toBe(true);
         }
     });
-    it('keeps every label inside the 160px leaf width (approximated by CHAR_W * length)', () => {
+    it(`keeps every label inside the ${LEAF_W}px leaf width (approximated by CHAR_W * length)`, () => {
         const svg = renderBlocksSvg(leafDoc('Personal data records that linger after consent withdrawal across many systems', 'PII_RECORDS_WITH_A_FAIRLY_LONG_IDENTIFIER_HERE'));
         const labels = extractLabels(svg);
-        const inner = 160 - TEXT_MARGIN_X * 2;
+        const inner = LEAF_W - TEXT_MARGIN_X * 2;
         for (const l of labels) {
             const cw = l.cls === 'text-primary' ? CHAR_W : CHAR_W_ID;
             expect(l.text.length * cw).toBeLessThanOrEqual(inner);
@@ -111,8 +108,8 @@ describe('renderBlocksSvg — container headers', () => {
     it('truncates a long container ID so it does not overflow the block width', () => {
         const svg = renderBlocksSvg(containerDoc('Short name', 'VERY_LONG_CONTAINER_IDENTIFIER_THAT_WOULD_OTHERWISE_OVERFLOW', 'CHILD', 'Child'));
         const labels = extractLabels(svg);
-        // The container width derives from its single 160px child: 160 + 2*12 (padding) = 184.
-        const containerW = 160 + 24;
+        // Container width derives from its single leaf child: leafW + 2×padding.
+        const containerW = LEAF_W + 24;
         const inner = containerW - TEXT_MARGIN_X * 2;
         for (const l of labels) {
             const cw = l.cls === 'text-primary' ? CHAR_W : CHAR_W_ID;
@@ -127,7 +124,7 @@ describe('renderBlocksSvg — container headers', () => {
         const longName = 'Active systems that are erasure-reachable within the standard 30-day operational window';
         const svg = renderBlocksSvg(containerDoc(longName, 'ACTIVE'));
         const labels = extractLabels(svg);
-        const containerW = 160 + 24;
+        const containerW = LEAF_W + 24;
         const inner = containerW - TEXT_MARGIN_X * 2;
         const primaries = labels.filter((l) => l.cls === 'text-primary');
         for (const l of primaries) {

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

@@ -58,6 +58,47 @@ describe('renderGoalsSvg', () => {
         expect(svg).toContain('width="0"');
         expect(svg).toContain('height="0"');
     });
+    it('renders name, type, and id on separate lines without overlap', () => {
+        const tree = {
+            goal_types: [
+                { name: 'Strategic', level: 0 },
+                { name: 'Objective', level: 1 },
+            ],
+            goals: [
+                {
+                    id: 1,
+                    canonical_id: 'GOAL-VALUE-1',
+                    name: 'Grow enterprise value',
+                    type: 'Strategic',
+                    level: 0,
+                    parent_id: 0,
+                },
+                {
+                    id: 2,
+                    canonical_id: 'GOAL-COST-1',
+                    name: 'Reduce run cost 20%',
+                    type: 'Objective',
+                    level: 1,
+                    parent_id: 1,
+                },
+            ],
+        };
+        const svg = renderGoalsSvg(tree);
+        expect(svg).toContain('Grow enterprise value');
+        expect(svg).toContain('Strategic');
+        expect(svg).toContain('GOAL-VALUE-1');
+        const typeMatches = [...svg.matchAll(/class="text-secondary"[^>]*y="(\d+)"/g)];
+        const nameMatches = [...svg.matchAll(/class="text-primary"[^>]*y="(\d+)"/g)];
+        expect(typeMatches.length).toBeGreaterThan(0);
+        for (const type of typeMatches) {
+            const typeY = Number(type[1]);
+            const nearestName = nameMatches
+                .map((m) => Number(m[1]))
+                .filter((y) => y < typeY)
+                .sort((a, b) => b - a)[0];
+            expect(typeY - nearestName).toBeGreaterThanOrEqual(18);
+        }
+    });
     it('shows canonical goal ids in node labels when present', () => {
         const tree = {
             goal_types: [{ name: 'Strategy', level: 0 }],

package/dist/webview/entity-text-layout.d.ts

@@ -0,0 +1,95 @@
+/**
+ * Shared text-in-block layout for Transitrix diagram renderers.
+ *
+ * Consolidates wrapping, truncation, and vertical placement patterns previously
+ * duplicated across Blocks, Goals, DGCA/DGA, Activities, Process Blueprint, and
+ * Capability Map renderers.
+ */
+export declare const TEXT_MARGIN_X = 8;
+/** Approximate character width (px) at text-primary size (12px/600). */
+export declare const CHAR_W_PRIMARY = 7;
+/** Approximate character width (px) at text-id size (10px/600). */
+export declare const CHAR_W_ID = 6;
+/** Approximate character width (px) at text-secondary size. */
+export declare const CHAR_W_SECONDARY = 7;
+/** Vertical advance between name line centres (text-primary). */
+export declare const LINE_H_PRIMARY = 14;
+/** Vertical advance between secondary line centres. */
+export declare const LINE_H_SECONDARY = 14;
+/** Vertical advance between id line centres (text-id). */
+export declare const LINE_H_ID = 12;
+/** Gap between the name block and the id block in leaf-style layouts. */
+export declare const NAME_ID_GAP = 14;
+/** Gap between stacked row groups (name → type → id). */
+export declare const ROW_GROUP_GAP = 9;
+export declare function maxCharsForInnerWidth(innerWidth: number, charWidth: number): number;
+/** Word-wrap `text` to at most `maxLines` lines of `maxChars` each. */
+export declare function wrapWords(text: string, maxChars: number, maxLines: number): string[];
+/**
+ * Greedy word-wrap with hard-break for tokens wider than the budget. When the
+ * result exceeds `maxLines`, the last kept line is truncated with an ellipsis.
+ * Used by Process Blueprint goal/result cells and aspect pill names.
+ */
+export declare function wrapTextLines(text: string, maxChars: number, maxLines: number): string[];
+/** Split an ID (no spaces) across lines, breaking at `_` or `-`. */
+export declare function wrapId(id: string, maxChars: number, maxLines?: number): string[];
+/** Truncate `text` to at most `maxChars` characters, at a word boundary when possible. */
+export declare function truncateLine(text: string, maxChars: number): string;
+/** Single-line ID truncation that prefers `_`/`-` separators before a hard cut. */
+export declare function truncateId(id: string, maxChars: number): string;
+export interface TextLineSpec {
+    cls: string;
+    text: string;
+    y: number;
+    /** When set, use this x; otherwise callers supply a shared anchor (e.g. box centre). */
+    x?: number;
+}
+export interface LayoutCenteredEntityOptions {
+    boxX: number;
+    boxY: number;
+    boxWidth: number;
+    boxHeight: number;
+    name: string;
+    type?: string;
+    id: string;
+    nameMaxLines?: number;
+    idMaxLines?: number;
+    marginX?: number;
+}
+/**
+ * Layout centred entity text (name → optional type → id) inside a fixed box.
+ * Returns absolute SVG y-positions (line centres) for each rendered row.
+ */
+export declare function layoutCenteredEntityText(opts: LayoutCenteredEntityOptions): TextLineSpec[];
+/** Emit centred `<text>` elements from {@link layoutCenteredEntityText} specs. */
+export declare function emitCenteredTextSvg(specs: TextLineSpec[], centerX: number, esc: (s: string) => string): string;
+export interface LayoutLeafBlockTextOptions {
+    boxX: number;
+    boxY: number;
+    boxWidth: number;
+    boxHeight: number;
+    name: string;
+    id: string;
+    nameMaxLines?: number;
+    marginX?: number;
+}
+/** Leaf nested-block layout: name (up to 3 lines) + id (up to 2 lines), centred. */
+export declare function layoutLeafBlockText(opts: LayoutLeafBlockTextOptions): TextLineSpec[];
+export interface LayoutHeaderBlockTextOptions {
+    boxX: number;
+    boxY: number;
+    boxWidth: number;
+    headerHeight: number;
+    name: string;
+    id: string;
+    marginX?: number;
+}
+/** Container header: single-line name + id stacked in the header strip. */
+export declare function layoutHeaderBlockText(opts: LayoutHeaderBlockTextOptions): TextLineSpec[];
+/**
+ * Left-anchored multi-line cell text, vertically centred (Process Blueprint cells).
+ * Returns one spec per line with absolute x baked into caller via anchorX.
+ */
+export declare function layoutLeftCellLines(lines: string[], anchorX: number, cellTop: number, cellHeight: number, lineHeight: number, cls: string): TextLineSpec[];
+/** Centred pill text: name lines + optional id line below. */
+export declare function layoutCenteredPillText(pillX: number, pillY: number, pillWidth: number, pillHeight: number, nameLines: string[], idLine: string | undefined, nameLineHeight?: number): TextLineSpec[];

package/dist/webview/entity-text-layout.js

@@ -0,0 +1,277 @@
+/**
+ * Shared text-in-block layout for Transitrix diagram renderers.
+ *
+ * Consolidates wrapping, truncation, and vertical placement patterns previously
+ * duplicated across Blocks, Goals, DGCA/DGA, Activities, Process Blueprint, and
+ * Capability Map renderers.
+ */
+export const TEXT_MARGIN_X = 8;
+/** Approximate character width (px) at text-primary size (12px/600). */
+export const CHAR_W_PRIMARY = 7;
+/** Approximate character width (px) at text-id size (10px/600). */
+export const CHAR_W_ID = 6;
+/** Approximate character width (px) at text-secondary size. */
+export const CHAR_W_SECONDARY = 7;
+/** Vertical advance between name line centres (text-primary). */
+export const LINE_H_PRIMARY = 14;
+/** Vertical advance between secondary line centres. */
+export const LINE_H_SECONDARY = 14;
+/** Vertical advance between id line centres (text-id). */
+export const LINE_H_ID = 12;
+/** Gap between the name block and the id block in leaf-style layouts. */
+export const NAME_ID_GAP = 14;
+/** Gap between stacked row groups (name → type → id). */
+export const ROW_GROUP_GAP = 9;
+export function maxCharsForInnerWidth(innerWidth, charWidth) {
+    return Math.max(4, Math.floor(Math.max(0, innerWidth) / charWidth));
+}
+/** Word-wrap `text` to at most `maxLines` lines of `maxChars` each. */
+export function wrapWords(text, maxChars, maxLines) {
+    const safeMax = Math.max(2, maxChars);
+    const words = text.split(' ');
+    const lines = [];
+    let cur = '';
+    for (let i = 0; i < words.length; i++) {
+        const w = words[i];
+        const next = cur ? `${cur} ${w}` : w;
+        if (next.length <= safeMax) {
+            cur = next;
+        }
+        else {
+            if (cur)
+                lines.push(cur);
+            cur = '';
+            if (lines.length >= maxLines)
+                break;
+            if (lines.length === maxLines - 1) {
+                const rest = words.slice(i).join(' ');
+                lines.push(rest.length <= safeMax ? rest : `${rest.slice(0, safeMax - 1)}…`);
+                return lines;
+            }
+            cur = w.length <= safeMax ? w : `${w.slice(0, safeMax - 1)}…`;
+        }
+    }
+    if (cur && lines.length < maxLines)
+        lines.push(cur);
+    return lines.length ? lines : [`${text.slice(0, safeMax - 1)}…`];
+}
+/**
+ * Greedy word-wrap with hard-break for tokens wider than the budget. When the
+ * result exceeds `maxLines`, the last kept line is truncated with an ellipsis.
+ * Used by Process Blueprint goal/result cells and aspect pill names.
+ */
+export function wrapTextLines(text, maxChars, maxLines) {
+    const trimmed = (text ?? '').trim();
+    if (trimmed.length === 0)
+        return [];
+    const budget = Math.max(1, maxChars);
+    const words = trimmed.split(/\s+/);
+    const lines = [];
+    let cur = '';
+    const flush = () => {
+        if (cur.length > 0) {
+            lines.push(cur);
+            cur = '';
+        }
+    };
+    for (const word of words) {
+        if (word.length > budget) {
+            flush();
+            let rest = word;
+            while (rest.length > budget) {
+                lines.push(rest.slice(0, budget));
+                rest = rest.slice(budget);
+            }
+            cur = rest;
+            continue;
+        }
+        const candidate = cur.length > 0 ? `${cur} ${word}` : word;
+        if (candidate.length > budget) {
+            flush();
+            cur = word;
+        }
+        else {
+            cur = candidate;
+        }
+    }
+    flush();
+    if (lines.length > maxLines) {
+        const capped = lines.slice(0, maxLines);
+        const last = capped[maxLines - 1];
+        const clipped = last.length > budget - 1 ? last.slice(0, budget - 1) : last;
+        capped[maxLines - 1] = `${clipped.replace(/…$/, '')}…`;
+        return capped;
+    }
+    return lines;
+}
+/** Split an ID (no spaces) across lines, breaking at `_` or `-`. */
+export function wrapId(id, maxChars, maxLines = 2) {
+    if (maxLines <= 1)
+        return [truncateId(id, maxChars)];
+    if (id.length <= maxChars)
+        return [id];
+    const seg = id.slice(0, maxChars);
+    const sepIdx = Math.max(seg.lastIndexOf('_'), seg.lastIndexOf('-'));
+    const cut = sepIdx > Math.floor(maxChars / 3) ? sepIdx : maxChars - 1;
+    const isSep = id[cut] === '_' || id[cut] === '-';
+    const line1 = id.slice(0, cut);
+    const rest = id.slice(cut + (isSep ? 1 : 0));
+    return [line1, rest.length <= maxChars ? rest : `${rest.slice(0, maxChars - 1)}…`];
+}
+/** Truncate `text` to at most `maxChars` characters, at a word boundary when possible. */
+export function truncateLine(text, maxChars) {
+    const safeMax = Math.max(2, maxChars);
+    if (text.length <= safeMax)
+        return text;
+    const cut = text.slice(0, safeMax - 1);
+    const lastSpace = cut.lastIndexOf(' ');
+    return `${lastSpace > safeMax / 2 ? cut.slice(0, lastSpace) : cut}…`;
+}
+/** Single-line ID truncation that prefers `_`/`-` separators before a hard cut. */
+export function truncateId(id, maxChars) {
+    const safeMax = Math.max(2, maxChars);
+    if (id.length <= safeMax)
+        return id;
+    const cut = id.slice(0, safeMax - 1);
+    const sepIdx = Math.max(cut.lastIndexOf('_'), cut.lastIndexOf('-'));
+    return `${sepIdx > safeMax / 3 ? cut.slice(0, sepIdx) : cut}…`;
+}
+function totalVerticalSpan(groups) {
+    let span = 0;
+    for (let i = 0; i < groups.length; i++) {
+        const g = groups[i];
+        span += g.lines.length * g.lineHeight;
+        if (i < groups.length - 1)
+            span += g.gapAfter;
+    }
+    return span;
+}
+/**
+ * Layout centred entity text (name → optional type → id) inside a fixed box.
+ * Returns absolute SVG y-positions (line centres) for each rendered row.
+ */
+export function layoutCenteredEntityText(opts) {
+    const marginX = opts.marginX ?? TEXT_MARGIN_X;
+    const innerW = Math.max(0, opts.boxWidth - marginX * 2);
+    const cx = opts.boxX + opts.boxWidth / 2;
+    const maxCharsName = maxCharsForInnerWidth(innerW, CHAR_W_PRIMARY);
+    const maxCharsType = maxCharsForInnerWidth(innerW, CHAR_W_SECONDARY);
+    const maxCharsId = maxCharsForInnerWidth(innerW, CHAR_W_ID);
+    const nameLines = wrapWords(opts.name, maxCharsName, opts.nameMaxLines ?? 2);
+    const typeLine = opts.type?.trim() ? truncateLine(opts.type, maxCharsType) : undefined;
+    const idMaxLines = opts.idMaxLines ?? 1;
+    const idLines = idMaxLines <= 1 ? [truncateId(opts.id, maxCharsId)] : wrapId(opts.id, maxCharsId, idMaxLines);
+    const groups = [
+        {
+            cls: 'text-primary',
+            lines: nameLines,
+            lineHeight: LINE_H_PRIMARY,
+            gapAfter: typeLine ? ROW_GROUP_GAP : NAME_ID_GAP,
+        },
+    ];
+    if (typeLine) {
+        groups.push({
+            cls: 'text-secondary',
+            lines: [typeLine],
+            lineHeight: LINE_H_SECONDARY,
+            gapAfter: NAME_ID_GAP,
+        });
+    }
+    groups.push({
+        cls: 'text-id',
+        lines: idLines,
+        lineHeight: LINE_H_ID,
+        gapAfter: 0,
+    });
+    const span = totalVerticalSpan(groups);
+    const firstY = Math.round(opts.boxY + (opts.boxHeight - span) / 2);
+    const out = [];
+    let y = firstY;
+    for (let gi = 0; gi < groups.length; gi++) {
+        const g = groups[gi];
+        for (let li = 0; li < g.lines.length; li++) {
+            out.push({ cls: g.cls, text: g.lines[li], y });
+            y += g.lineHeight;
+        }
+        if (gi < groups.length - 1)
+            y += g.gapAfter;
+    }
+    return out;
+}
+/** Emit centred `<text>` elements from {@link layoutCenteredEntityText} specs. */
+export function emitCenteredTextSvg(specs, centerX, esc) {
+    return specs
+        .map((spec) => {
+        const x = spec.x ?? centerX;
+        const anchor = spec.x != null && spec.cls === 'text-pill' ? ' text-anchor="middle"' : ' text-anchor="middle"';
+        return `<text class="${spec.cls}" x="${x}" y="${spec.y}"${anchor} dominant-baseline="central">${esc(spec.text)}</text>`;
+    })
+        .join('\n');
+}
+/** Leaf nested-block layout: name (up to 3 lines) + id (up to 2 lines), centred. */
+export function layoutLeafBlockText(opts) {
+    const marginX = opts.marginX ?? TEXT_MARGIN_X;
+    const innerW = Math.max(0, opts.boxWidth - marginX * 2);
+    const maxCharsName = maxCharsForInnerWidth(innerW, CHAR_W_PRIMARY);
+    const maxCharsId = maxCharsForInnerWidth(innerW, CHAR_W_ID);
+    const nameLines = wrapWords(opts.name, maxCharsName, opts.nameMaxLines ?? 3);
+    const idLines = wrapId(opts.id, maxCharsId, 2);
+    const nameSpan = (nameLines.length - 1) * LINE_H_PRIMARY;
+    const idSpan = (idLines.length - 1) * LINE_H_ID;
+    const totalSpan = nameSpan + NAME_ID_GAP + idSpan;
+    const firstY = Math.round(opts.boxY + (opts.boxHeight - totalSpan) / 2);
+    const out = [];
+    for (let i = 0; i < nameLines.length; i++) {
+        out.push({ cls: 'text-primary', text: nameLines[i], y: firstY + i * LINE_H_PRIMARY });
+    }
+    const idFirstY = firstY + nameSpan + NAME_ID_GAP;
+    for (let i = 0; i < idLines.length; i++) {
+        out.push({ cls: 'text-id', text: idLines[i], y: idFirstY + i * LINE_H_ID });
+    }
+    return out;
+}
+/** Container header: single-line name + id stacked in the header strip. */
+export function layoutHeaderBlockText(opts) {
+    const marginX = opts.marginX ?? TEXT_MARGIN_X;
+    const innerW = Math.max(0, opts.boxWidth - marginX * 2);
+    const maxCharsName = maxCharsForInnerWidth(innerW, CHAR_W_PRIMARY);
+    const maxCharsId = maxCharsForInnerWidth(innerW, CHAR_W_ID);
+    const nameText = truncateLine(opts.name, maxCharsName);
+    const idText = truncateId(opts.id, maxCharsId);
+    const headerMid = opts.boxY + opts.headerHeight / 2;
+    const halfSpan = (LINE_H_PRIMARY + LINE_H_ID) / 4;
+    return [
+        { cls: 'text-primary', text: nameText, y: Math.round(headerMid - halfSpan) },
+        { cls: 'text-id', text: idText, y: Math.round(headerMid + halfSpan) },
+    ];
+}
+/**
+ * Left-anchored multi-line cell text, vertically centred (Process Blueprint cells).
+ * Returns one spec per line with absolute x baked into caller via anchorX.
+ */
+export function layoutLeftCellLines(lines, anchorX, cellTop, cellHeight, lineHeight, cls) {
+    const ls = lines.length > 0 ? lines : [''];
+    const firstY = cellTop + cellHeight / 2 - ((ls.length - 1) / 2) * lineHeight;
+    return ls.map((text, i) => ({ cls, text, y: firstY + i * lineHeight, x: anchorX }));
+}
+/** Centred pill text: name lines + optional id line below. */
+export function layoutCenteredPillText(pillX, pillY, pillWidth, pillHeight, nameLines, idLine, nameLineHeight = 15) {
+    const cx = pillX + pillWidth / 2;
+    const lineCount = nameLines.length + (idLine ? 1 : 0);
+    const firstY = pillY + pillHeight / 2 - ((lineCount - 1) / 2) * nameLineHeight;
+    const out = nameLines.map((text, i) => ({
+        cls: 'text-pill',
+        text,
+        y: firstY + i * nameLineHeight,
+        x: cx,
+    }));
+    if (idLine) {
+        out.push({
+            cls: 'text-secondary',
+            text: idLine,
+            y: firstY + nameLines.length * nameLineHeight,
+            x: cx,
+        });
+    }
+    return out;
+}

package/dist/webview/entry.js

@@ -19,13 +19,17 @@
  * (SVG for the diagram notations, an HTML fragment for the catalogue
  * notations). The JVM host drops whatever `svg` carries into the DOM, so the
  * field name is historical — it transports any self-contained markup.
+ *
+ * Import validators/types from leaf modules (e.g. `capability-map/validate.js`),
+ * never from package `index.ts` barrels that also re-export React views —
+ * esbuild cannot tree-shake those and the JCEF bundle would pull in React.
  */
 import yaml from 'js-yaml';
 import { validateActivities } from '../activities/index.js';
 import { validateActivityCard } from '../activity-card/index.js';
 import { validateApplicationsCatalogue } from '../applications/index.js';
 import { validateNestedBlocks } from '../blocks/index.js';
-import { validateCapabilityMap } from '../capability-map/index.js';
+import { validateCapabilityMap } from '../capability-map/validate.js';
 import { parseCanonicalFGCA, parseCanonicalFGA } from '../fgca/parse-canonical.js';
 import { parseCanonicalGoals } from '../goals/parse-canonical.js';
 import { validateProcessBlueprint } from '../process-blueprint/index.js';
@@ -114,7 +118,7 @@ function dispatchValidate(kind, doc) {
             r.errors.push(...v.errors);
             r.warnings.push(...v.warnings);
             if (v.valid && v.parsed) {
-                r.svg = renderFgcaSvg(v.parsed, { variant: 'fgca' });
+                r.svg = renderFgcaSvg(v.parsed, { variant: 'dgca' });
             }
             return r;
         }
@@ -124,7 +128,7 @@ function dispatchValidate(kind, doc) {
             r.errors.push(...v.errors);
             r.warnings.push(...v.warnings);
             if (v.valid && v.parsed) {
-                r.svg = renderFgcaSvg(v.parsed, { variant: 'fga' });
+                r.svg = renderFgcaSvg(v.parsed, { variant: 'dga' });
             }
             return r;
         }

package/dist/webview/notation-style.d.ts

@@ -1,7 +1,7 @@
 /**
  * Shared visual constants for entity-box (block-style) notation renderers.
  *
- * Goals, Nested Blocks, FGCA/DGCA, and any future notation using the same
+ * Goals, Nested Blocks, DGCA/DGA, and any future notation using the same
  * entity-box visual language import their shared style tokens from here.
  * Centralising them prevents the per-renderer drift that caused the Goals/Blocks
  * style mismatch (border radius diverged to rx=6 in Blocks vs rx=8 everywhere