@transitrix/diagrams 1.6.0 → 1.8.1

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,43 @@
+import { describe, expect, it } from 'vitest';
+import { layoutCenteredEntityText, maxCharsForInnerWidth, 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 emits more name capacity on wide boxes', () => {
+        const narrow = layoutCenteredEntityText({
+            boxX: 0,
+            boxY: 0,
+            boxWidth: 200,
+            boxHeight: 72,
+            name: 'Improve customer onboarding experience across regions',
+            id: 'GOAL-001',
+            nameMaxLines: 2,
+            idMaxLines: 1,
+        });
+        const wide = layoutCenteredEntityText({
+            boxX: 0,
+            boxY: 0,
+            boxWidth: 320,
+            boxHeight: 72,
+            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,7 @@
  */
 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';
 function leafDoc(name, id) {
     return {
         notation: 'blocks',

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

@@ -58,8 +58,22 @@ describe('renderGoalsSvg', () => {
         expect(svg).toContain('width="0"');
         expect(svg).toContain('height="0"');
     });
-    it('omits the title block when treeName is missing', () => {
-        const svg = renderGoalsSvg(SIMPLE_TREE);
-        expect(svg).not.toContain('Goal tree —');
+    it('shows canonical goal ids in node labels when present', () => {
+        const tree = {
+            goal_types: [{ name: 'Strategy', level: 0 }],
+            goals: [
+                {
+                    id: 1,
+                    canonical_id: 'GOAL-REVENUE-1',
+                    name: 'Triple revenue',
+                    type: 'Strategy',
+                    level: 0,
+                    parent_id: 0,
+                },
+            ],
+        };
+        const svg = renderGoalsSvg(tree);
+        expect(svg).toContain('GOAL-REVENUE-1');
+        expect(svg).not.toMatch(/>\s*1\s*</);
     });
 });

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,279 @@
+/**
+ * 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];
+        if (g.lines.length > 1)
+            span += (g.lines.length - 1) * 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 });
+            if (li < g.lines.length - 1)
+                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

package/dist/webview/notation-style.js

@@ -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

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

@@ -1,5 +1,6 @@
 import { computeCpm } from '../activities/cpm.js';
 import type { ActivityDoc, ActivitiesLayout, ActivitiesLayoutOptions } from '../activities/types.js';
+import { type NodeSizePreset } from '../node-size-presets.js';
 /**
  * Network-view diagram CSS (critical path, milestones, edge colours) — the
  * canonical rules shared with the VS Code preview's `ACTIVITIES_DIAGRAM_CSS`
@@ -22,8 +23,9 @@ export declare function renderActivitiesNetworkBody(layout: ActivitiesLayout, cp
 export interface RenderActivitiesOptions {
     /** Optional heading rendered as a `text-header` above the diagram. */
     title?: string;
-    /** Network column / row gaps. Defaults match `layoutActivities`. */
+    /** Network column / row gaps and node size. Defaults match `layoutActivities`. */
     gaps?: ActivitiesLayoutOptions;
+    nodeSizePreset?: NodeSizePreset;
     /** Exit edge curvature; 1 = default, 0 = straight, higher = stronger arc. */
     curvature?: number;
     /** Entry curvature at the target node; defaults to `curvature` when omitted. */

package/dist/webview/render-activities.js

@@ -19,10 +19,10 @@
 import { layoutActivities } from '../activities/layout.js';
 import { computeCpm } from '../activities/cpm.js';
 import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
+import { parseNodeSizePreset, resolveActionNodeSize } from '../node-size-presets.js';
 import { generateSvgEmbedCss } from '../theme/index.js';
+import { emitCenteredTextSvg, layoutCenteredEntityText } from './entity-text-layout.js';
 import { escXml } from './render-util.js';
-const N_NODE_W = 200;
-const N_NODE_H = 80;
 const N_PAD = 24;
 /**
  * Network-view diagram CSS (critical path, milestones, edge colours) — the
@@ -46,8 +46,24 @@ export const ACTIVITIES_NETWORK_DEFS = `<defs>
     <path d="M0,0 L0,6 L8,3 z" class="arrow-fill-critical"/>
   </marker>
 </defs>`;
-function truncate(s, maxLen) {
-    return s.length > maxLen ? s.slice(0, maxLen - 1) + '…' : s;
+function activityNodeSvg(n, x, y, isCritical, isMilestone, durLabel) {
+    const cls = `diagram-node act-node ${isCritical ? 'critical-node' : ''} ${isMilestone ? 'milestone-node' : ''}`.trim();
+    const specs = layoutCenteredEntityText({
+        boxX: x,
+        boxY: y,
+        boxWidth: n.width,
+        boxHeight: n.height,
+        name: n.data.name,
+        id: n.id,
+        nameMaxLines: 2,
+        idMaxLines: 1,
+    });
+    const textSvg = emitCenteredTextSvg(specs, x + n.width / 2, escXml);
+    return [
+        `<rect class="${cls}" x="${x}" y="${y}" width="${n.width}" height="${n.height}" rx="8"/>`,
+        textSvg,
+        durLabel ? `<text class="text-secondary" x="${x + n.width - 8}" y="${y + n.height - 8}" text-anchor="end">${durLabel}</text>` : '',
+    ].filter(Boolean).join('\n');
 }
 /**
  * Canonical Network (PSND) body — the node rects and edge paths that go inside
@@ -86,33 +102,8 @@ export function renderActivitiesNetworkBody(layout, cpm, ox, oy, curvature, entr
         const isCritical = cpm.get(n.id)?.isCritical ?? false;
         const durVal = n.data.duration;
         const isMilestone = (durVal ?? -1) === 0;
-        const cls = `diagram-node act-node ${isCritical ? 'critical-node' : ''} ${isMilestone ? 'milestone-node' : ''}`.trim();
-        const idLabel = escXml(n.id);
-        const words = n.data.name.split(' ');
-        let line1 = '';
-        let line2 = '';
-        for (const w of words) {
-            if ((line1 + ' ' + w).trim().length <= 24)
-                line1 = (line1 + ' ' + w).trim();
-            else if ((line2 + ' ' + w).trim().length <= 24)
-                line2 = (line2 + ' ' + w).trim();
-            else if (!line2) {
-                line2 = w.slice(0, 22) + '…';
-                break;
-            }
-        }
-        const twoLines = line2.length > 0;
-        const nameY1 = twoLines ? y + 18 : y + 28;
-        const nameY2 = y + 34;
-        const idY = twoLines ? y + 54 : y + 50;
         const durLabel = (durVal !== undefined && durVal > 0) ? `${durVal}d` : '';
-        return [
-            `<rect class="${cls}" x="${x}" y="${y}" width="${N_NODE_W}" height="${N_NODE_H}" rx="8"/>`,
-            `<text class="text-primary" x="${x + N_NODE_W / 2}" y="${nameY1}" text-anchor="middle" dominant-baseline="central">${escXml(line1)}</text>`,
-            twoLines ? `<text class="text-primary" x="${x + N_NODE_W / 2}" y="${nameY2}" text-anchor="middle" dominant-baseline="central">${escXml(line2)}</text>` : '',
-            `<text class="text-id" x="${x + N_NODE_W / 2}" y="${idY}" text-anchor="middle" dominant-baseline="central">${idLabel}</text>`,
-            durLabel ? `<text class="text-secondary" x="${x + N_NODE_W - 8}" y="${y + N_NODE_H - 8}" text-anchor="end">${durLabel}</text>` : '',
-        ].filter(Boolean).join('\n');
+        return activityNodeSvg(n, x, y, isCritical, isMilestone, durLabel);
     })
         .join('\n');
     return `${nodeSvg}\n${edgeSvg}`;
@@ -132,14 +123,20 @@ export function renderActivitiesNetworkBody(layout, cpm, ox, oy, curvature, entr
  * than short-circuiting.
  */
 export function renderActivitiesSvg(doc, options = {}) {
-    const { title = '', gaps = {}, curvature = DEFAULT_EDGE_CURVATURE, entryCurvature, suppressProjectNodes = true, } = options;
+    const { title = '', gaps = {}, nodeSizePreset = 'normal', curvature = DEFAULT_EDGE_CURVATURE, entryCurvature, suppressProjectNodes = true, } = options;
+    const nodeSize = resolveActionNodeSize(parseNodeSizePreset(nodeSizePreset));
+    const layoutGaps = {
+        ...gaps,
+        nodeWidth: gaps.nodeWidth ?? nodeSize.width,
+        nodeHeight: gaps.nodeHeight ?? nodeSize.height,
+    };
     // #421: Suppress project-type container nodes in the network layout by
     // default (see suppressProjectNodes JSDoc). A shallow copy avoids mutating
     // the caller's doc.
     const renderDoc = suppressProjectNodes
         ? { ...doc, activities: (doc.activities ?? []).filter((a) => a.activity_type?.toLowerCase() !== 'project') }
         : doc;
-    const layout = layoutActivities(renderDoc, gaps);
+    const layout = layoutActivities(renderDoc, layoutGaps);
     if (layout.nodes.length === 0) {
         return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
     }

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

@@ -1,7 +1,10 @@
-import type { BlocksFile, BlocksLayout } from '../blocks/types.js';
+import type { BlocksFile, BlocksLayout, BlocksLayoutOptions } from '../blocks/types.js';
+import { type NodeSizePreset } from '../node-size-presets.js';
 import { type ThemeId } from '../theme/index.js';
 export interface RenderBlocksOptions {
     title?: string;
+    nodeSizePreset?: NodeSizePreset;
+    layoutOptions?: BlocksLayoutOptions;
 }
 export interface RenderBlocksLayoutOptions {
     /** Extra vertical space reserved at the top of the canvas (e.g. for a title block). */