@transitrix/diagrams 1.8.1 → 1.8.3

package/dist/__tests__/node-size-presets.test.d.ts

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

package/dist/__tests__/node-size-presets.test.js

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest';
+import { ACTION_NODE_SIZE, BLOCKS_LEAF_SIZE, CAPABILITY_MAP_NODE_SIZE, DGCA_NODE_SIZE, ENTITY_NODE_HEIGHT, ENTITY_NODE_SIZE, ENTITY_NODE_WIDTH, GOALS_NODE_SIZE, PROCESS_BLUEPRINT_SIZE, resolveGoalsNodeSize, } from '../node-size-presets.js';
+describe('node-size-presets', () => {
+    it('uses shared width and height tiers for entity nodes', () => {
+        expect(ENTITY_NODE_WIDTH).toEqual({ compact: 200, normal: 250, wide: 320 });
+        expect(ENTITY_NODE_HEIGHT).toEqual({ compact: 72, normal: 80, wide: 96 });
+        expect(ENTITY_NODE_SIZE.normal).toEqual({ width: 250, height: 80 });
+        expect(ENTITY_NODE_SIZE.compact).toEqual({ width: 200, height: 72 });
+        expect(ENTITY_NODE_SIZE.wide).toEqual({ width: 320, height: 96 });
+    });
+    it('exposes the same entity sizes for every box-based notation', () => {
+        for (const table of [GOALS_NODE_SIZE, DGCA_NODE_SIZE, BLOCKS_LEAF_SIZE, ACTION_NODE_SIZE]) {
+            expect(table).toBe(ENTITY_NODE_SIZE);
+            expect(table.normal).toEqual(ENTITY_NODE_SIZE.normal);
+        }
+        expect(CAPABILITY_MAP_NODE_SIZE.normal).toEqual({
+            nodeWidth: ENTITY_NODE_WIDTH.normal,
+            nodeHeight: ENTITY_NODE_HEIGHT.normal,
+        });
+    });
+    it('scales wide above normal and compact below', () => {
+        expect(resolveGoalsNodeSize('wide').height).toBeGreaterThan(resolveGoalsNodeSize('normal').height);
+        expect(resolveGoalsNodeSize('compact').height).toBeLessThan(resolveGoalsNodeSize('normal').height);
+        expect(resolveGoalsNodeSize('wide').width).toBeGreaterThan(resolveGoalsNodeSize('normal').width);
+    });
+    it('scales process blueprint from the same tier ratios', () => {
+        expect(PROCESS_BLUEPRINT_SIZE.wide.stageColumnWidth).toBeGreaterThan(PROCESS_BLUEPRINT_SIZE.normal.stageColumnWidth);
+        expect(PROCESS_BLUEPRINT_SIZE.compact.goalRowHeight).toBeLessThan(PROCESS_BLUEPRINT_SIZE.normal.goalRowHeight);
+    });
+});

package/dist/activities/layout.js

@@ -1,5 +1,5 @@
 import { computeCpm } from './cpm.js';
-const DEFAULT_NODE_W = 200;
+const DEFAULT_NODE_W = 250;
 const DEFAULT_NODE_H = 80;
 const H_GAP = 80;
 const V_GAP = 24;

package/dist/blocks/__tests__/layout.test.js

@@ -108,8 +108,8 @@ describe('layoutNestedBlocks', () => {
             },
         });
         const a = layout.blocks[0];
-        expect(a.width).toBe(160);
-        expect(a.height).toBe(72);
+        expect(a.width).toBe(250);
+        expect(a.height).toBe(80);
     });
     it('honours custom layout options', () => {
         const layout = layoutNestedBlocks({

package/dist/blocks/layout.js

@@ -1,8 +1,9 @@
+import { ENTITY_NODE_SIZE } from '../node-size-presets.js';
 const DEFAULTS = {
-    leafWidth: 160,
-    leafHeight: 72,
+    leafWidth: ENTITY_NODE_SIZE.normal.width,
+    leafHeight: ENTITY_NODE_SIZE.normal.height,
     padding: 12,
-    headerHeight: 28,
+    headerHeight: 32,
     childGap: 12,
     topLevelGap: 24,
 };

package/dist/capability-map/dsm-layout.js

@@ -1,6 +1,6 @@
 import { getLevel, getParentAddress } from './address.js';
 const DEFAULT_NODE_WIDTH = 250;
-const DEFAULT_NODE_HEIGHT = 64;
+const DEFAULT_NODE_HEIGHT = 80;
 const DEFAULT_RANK_SEP = 80;
 const DEFAULT_NODE_SEP = 24;
 /** Width of the virtual organisation-root node — narrower than a capability

package/dist/capability-map/layout-tree.d.ts

@@ -1,6 +1,6 @@
 import type { CapabilityNode, CapabilityMapHeader } from './types.js';
 export declare const TREE_NODE_WIDTH = 250;
-export declare const TREE_NODE_HEIGHT = 64;
+export declare const TREE_NODE_HEIGHT = 80;
 /** Gap between sibling columns (node width + rank sep = 330px, matching DSM). */
 export declare const TREE_RANK_SEP = 80;
 /** Vertical gap between sibling nodes. */

package/dist/capability-map/layout-tree.js

@@ -1,5 +1,5 @@
 export const TREE_NODE_WIDTH = 250;
-export const TREE_NODE_HEIGHT = 64;
+export const TREE_NODE_HEIGHT = 80;
 /** Gap between sibling columns (node width + rank sep = 330px, matching DSM). */
 export const TREE_RANK_SEP = 80;
 /** Vertical gap between sibling nodes. */

package/dist/fgca/preview-layout.d.ts

@@ -82,8 +82,8 @@ export interface FGCAPreviewLayout {
     width: number;
     height: number;
 }
-export declare const FGCA_NODE_W = 220;
-export declare const FGCA_NODE_H = 72;
+export declare const FGCA_NODE_W: number;
+export declare const FGCA_NODE_H: number;
 export declare const FGCA_HEADER_H = 32;
 export declare const FGCA_PAD = 20;
 export declare const FGCA_DEFAULT_COL_GAP = 160;

package/dist/fgca/preview-layout.js

@@ -6,6 +6,7 @@
 // so the gap geometry is unit-testable: the extension has no test harness.
 //
 // No React, no DOM, no vscode. Safe to call in Node.js or a test environment.
+import { ENTITY_NODE_SIZE } from '../node-size-presets.js';
 /**
  * Trims a DGCA/DGA doc to a scope.
  *
@@ -40,8 +41,8 @@ export function selectScopedFGCA(doc, scope) {
 }
 // Default node + frame geometry. Inter-node gaps are user-configurable via
 // Inter-node gaps are user-configurable via spacing settings; node size uses presets.
-export const FGCA_NODE_W = 220;
-export const FGCA_NODE_H = 72;
+export const FGCA_NODE_W = ENTITY_NODE_SIZE.normal.width;
+export const FGCA_NODE_H = ENTITY_NODE_SIZE.normal.height;
 export const FGCA_HEADER_H = 32;
 export const FGCA_PAD = 20;
 export const FGCA_DEFAULT_COL_GAP = 160;

package/dist/node-size-presets.d.ts

@@ -1,8 +1,11 @@
 /**
  * Block/cell size presets for diagram renderers.
  *
- * Presets drive both layout geometry and shared text-layout char budgets.
- * Smooth per-pixel sliders are intentionally deferred.
+ * Entity nodes (Goals, DGCA/DGA, Blocks leaves, Activities, Capability Map)
+ * share one width × height ladder. Heights use fixed tiers (72 / 80 / 96 px)
+ * so name + type + id never collide; widths scale independently (200 / 250 / 320).
+ *
+ * Process Blueprint uses a separate cell grid, scaled from the same tiers.
  */
 export type NodeSizePreset = 'compact' | 'normal' | 'wide';
 export declare const NODE_SIZE_PRESET_VALUES: readonly NodeSizePreset[];
@@ -32,12 +35,22 @@ export interface CapabilityMapDimensions {
     nodeHeight: number;
 }
 type PresetTable<T> = Record<NodeSizePreset, T>;
+/** Shared entity-node width tiers (px). */
+export declare const ENTITY_NODE_WIDTH: Record<NodeSizePreset, number>;
+/** Shared entity-node height tiers (px) — room for name + type + id. */
+export declare const ENTITY_NODE_HEIGHT: Record<NodeSizePreset, number>;
+/** Canonical entity-node sizes — used by every box-based notation preview. */
+export declare const ENTITY_NODE_SIZE: PresetTable<BoxDimensions>;
+/** @deprecated alias — use {@link ENTITY_NODE_SIZE} */
 export declare const GOALS_NODE_SIZE: PresetTable<BoxDimensions>;
+/** @deprecated alias — use {@link ENTITY_NODE_SIZE} */
 export declare const DGCA_NODE_SIZE: PresetTable<BoxDimensions>;
-export declare const BLOCKS_LEAF_SIZE: PresetTable<BlocksLeafDimensions>;
+/** @deprecated alias — use {@link ENTITY_NODE_SIZE} */
+export declare const BLOCKS_LEAF_SIZE: PresetTable<BoxDimensions>;
+/** @deprecated alias — use {@link ENTITY_NODE_SIZE} */
 export declare const ACTION_NODE_SIZE: PresetTable<BoxDimensions>;
-export declare const PROCESS_BLUEPRINT_SIZE: PresetTable<ProcessBlueprintDimensions>;
 export declare const CAPABILITY_MAP_NODE_SIZE: PresetTable<CapabilityMapDimensions>;
+export declare const PROCESS_BLUEPRINT_SIZE: PresetTable<ProcessBlueprintDimensions>;
 export type NodeSizeNotation = 'goals' | 'dgca' | 'dga' | 'blocks' | 'action' | 'processBlueprint' | 'capabilityMap';
 /** Parse a VS Code setting value into a preset id (defaults to `normal`). */
 export declare function parseNodeSizePreset(value: string | undefined): NodeSizePreset;

package/dist/node-size-presets.js

@@ -1,81 +1,95 @@
 /**
  * Block/cell size presets for diagram renderers.
  *
- * Presets drive both layout geometry and shared text-layout char budgets.
- * Smooth per-pixel sliders are intentionally deferred.
+ * Entity nodes (Goals, DGCA/DGA, Blocks leaves, Activities, Capability Map)
+ * share one width × height ladder. Heights use fixed tiers (72 / 80 / 96 px)
+ * so name + type + id never collide; widths scale independently (200 / 250 / 320).
+ *
+ * Process Blueprint uses a separate cell grid, scaled from the same tiers.
  */
 export const NODE_SIZE_PRESET_VALUES = ['compact', 'normal', 'wide'];
-export const GOALS_NODE_SIZE = {
-    compact: { width: 200, height: 72 },
-    normal: { width: 250, height: 72 },
-    wide: { width: 320, height: 72 },
+/** Shared entity-node width tiers (px). */
+export const ENTITY_NODE_WIDTH = {
+    compact: 200,
+    normal: 250,
+    wide: 320,
 };
-export const DGCA_NODE_SIZE = {
-    compact: { width: 200, height: 72 },
-    normal: { width: 220, height: 72 },
-    wide: { width: 280, height: 72 },
+/** Shared entity-node height tiers (px) — room for name + type + id. */
+export const ENTITY_NODE_HEIGHT = {
+    compact: 72,
+    normal: 80,
+    wide: 96,
 };
-export const BLOCKS_LEAF_SIZE = {
-    compact: { width: 140, height: 72 },
-    normal: { width: 160, height: 72 },
-    wide: { width: 200, height: 72 },
+function entityNodeSize(preset) {
+    return { width: ENTITY_NODE_WIDTH[preset], height: ENTITY_NODE_HEIGHT[preset] };
+}
+/** Canonical entity-node sizes — used by every box-based notation preview. */
+export const ENTITY_NODE_SIZE = {
+    compact: entityNodeSize('compact'),
+    normal: entityNodeSize('normal'),
+    wide: entityNodeSize('wide'),
 };
-export const ACTION_NODE_SIZE = {
-    compact: { width: 180, height: 72 },
-    normal: { width: 200, height: 80 },
-    wide: { width: 260, height: 80 },
+/** @deprecated alias — use {@link ENTITY_NODE_SIZE} */
+export const GOALS_NODE_SIZE = ENTITY_NODE_SIZE;
+/** @deprecated alias — use {@link ENTITY_NODE_SIZE} */
+export const DGCA_NODE_SIZE = ENTITY_NODE_SIZE;
+/** @deprecated alias — use {@link ENTITY_NODE_SIZE} */
+export const BLOCKS_LEAF_SIZE = ENTITY_NODE_SIZE;
+/** @deprecated alias — use {@link ENTITY_NODE_SIZE} */
+export const ACTION_NODE_SIZE = ENTITY_NODE_SIZE;
+export const CAPABILITY_MAP_NODE_SIZE = {
+    compact: { nodeWidth: ENTITY_NODE_WIDTH.compact, nodeHeight: ENTITY_NODE_HEIGHT.compact },
+    normal: { nodeWidth: ENTITY_NODE_WIDTH.normal, nodeHeight: ENTITY_NODE_HEIGHT.normal },
+    wide: { nodeWidth: ENTITY_NODE_WIDTH.wide, nodeHeight: ENTITY_NODE_HEIGHT.wide },
 };
-export const PROCESS_BLUEPRINT_SIZE = {
-    compact: {
-        legendColumnWidth: 120,
-        stageColumnWidth: 180,
-        stageHeaderHeight: 36,
-        goalRowHeight: 52,
-        resultRowHeight: 52,
-        aspectRowMinHeight: 56,
-        pillHeight: 36,
-        pillGap: 4,
-        cellPadding: 8,
-        textLineHeight: 16,
-        textCharWidth: 7.5,
-        cellTextPadX: 10,
-        cellTextPadY: 10,
-    },
-    normal: {
-        legendColumnWidth: 140,
-        stageColumnWidth: 220,
-        stageHeaderHeight: 40,
-        goalRowHeight: 56,
-        resultRowHeight: 56,
-        aspectRowMinHeight: 60,
-        pillHeight: 40,
-        pillGap: 4,
-        cellPadding: 8,
-        textLineHeight: 17,
-        textCharWidth: 7.5,
-        cellTextPadX: 10,
-        cellTextPadY: 10,
-    },
-    wide: {
-        legendColumnWidth: 160,
-        stageColumnWidth: 280,
-        stageHeaderHeight: 44,
-        goalRowHeight: 60,
-        resultRowHeight: 60,
-        aspectRowMinHeight: 64,
-        pillHeight: 44,
-        pillGap: 4,
-        cellPadding: 8,
-        textLineHeight: 18,
-        textCharWidth: 7.5,
-        cellTextPadX: 10,
-        cellTextPadY: 10,
-    },
+const PROCESS_BLUEPRINT_NORMAL = {
+    legendColumnWidth: 140,
+    stageColumnWidth: 220,
+    stageHeaderHeight: 40,
+    goalRowHeight: 56,
+    resultRowHeight: 56,
+    aspectRowMinHeight: 60,
+    pillHeight: 40,
+    pillGap: 4,
+    cellPadding: 8,
+    textLineHeight: 17,
+    textCharWidth: 7.5,
+    cellTextPadX: 10,
+    cellTextPadY: 10,
 };
-export const CAPABILITY_MAP_NODE_SIZE = {
-    compact: { nodeWidth: 200, nodeHeight: 56 },
-    normal: { nodeWidth: 240, nodeHeight: 60 },
-    wide: { nodeWidth: 300, nodeHeight: 64 },
+function scaleBlueprint(base, widthScale, heightScale) {
+    const w = (n) => Math.round(n * widthScale);
+    const h = (n) => Math.round(n * heightScale);
+    return {
+        legendColumnWidth: w(base.legendColumnWidth),
+        stageColumnWidth: w(base.stageColumnWidth),
+        stageHeaderHeight: h(base.stageHeaderHeight),
+        goalRowHeight: h(base.goalRowHeight),
+        resultRowHeight: h(base.resultRowHeight),
+        aspectRowMinHeight: h(base.aspectRowMinHeight),
+        pillHeight: h(base.pillHeight),
+        pillGap: base.pillGap,
+        cellPadding: base.cellPadding,
+        textLineHeight: h(base.textLineHeight),
+        textCharWidth: base.textCharWidth,
+        cellTextPadX: base.cellTextPadX,
+        cellTextPadY: base.cellTextPadY,
+    };
+}
+const PB_WIDTH_SCALE = {
+    compact: ENTITY_NODE_WIDTH.compact / ENTITY_NODE_WIDTH.normal,
+    normal: 1,
+    wide: ENTITY_NODE_WIDTH.wide / ENTITY_NODE_WIDTH.normal,
+};
+const PB_HEIGHT_SCALE = {
+    compact: ENTITY_NODE_HEIGHT.compact / ENTITY_NODE_HEIGHT.normal,
+    normal: 1,
+    wide: ENTITY_NODE_HEIGHT.wide / ENTITY_NODE_HEIGHT.normal,
+};
+export const PROCESS_BLUEPRINT_SIZE = {
+    compact: scaleBlueprint(PROCESS_BLUEPRINT_NORMAL, PB_WIDTH_SCALE.compact, PB_HEIGHT_SCALE.compact),
+    normal: PROCESS_BLUEPRINT_NORMAL,
+    wide: scaleBlueprint(PROCESS_BLUEPRINT_NORMAL, PB_WIDTH_SCALE.wide, PB_HEIGHT_SCALE.wide),
 };
 /** Parse a VS Code setting value into a preset id (defaults to `normal`). */
 export function parseNodeSizePreset(value) {
@@ -84,16 +98,16 @@ export function parseNodeSizePreset(value) {
     return 'normal';
 }
 export function resolveGoalsNodeSize(preset) {
-    return GOALS_NODE_SIZE[preset];
+    return ENTITY_NODE_SIZE[preset];
 }
 export function resolveDgcaNodeSize(preset) {
-    return DGCA_NODE_SIZE[preset];
+    return ENTITY_NODE_SIZE[preset];
 }
 export function resolveBlocksLeafSize(preset) {
-    return BLOCKS_LEAF_SIZE[preset];
+    return ENTITY_NODE_SIZE[preset];
 }
 export function resolveActionNodeSize(preset) {
-    return ACTION_NODE_SIZE[preset];
+    return ENTITY_NODE_SIZE[preset];
 }
 export function resolveProcessBlueprintSize(preset) {
     return PROCESS_BLUEPRINT_SIZE[preset];

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

@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest';
-import { layoutCenteredEntityText, maxCharsForInnerWidth, wrapWords, wrapTextLines, } from '../entity-text-layout.js';
+import { layoutCenteredEntityText, layoutLeafBlockText, layoutHeaderBlockText, LINE_H_PRIMARY, LINE_H_SECONDARY, TEXT_MARGIN_Y, maxCharsForInnerWidth, ROW_GROUP_GAP, wrapWords, wrapTextLines, } from '../entity-text-layout.js';
+import { ENTITY_NODE_SIZE } from '../../node-size-presets.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';
@@ -10,12 +11,29 @@ describe('entity-text-layout', () => {
     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: 72,
+            boxHeight: 80,
             name: 'Improve customer onboarding experience across regions',
             id: 'GOAL-001',
             nameMaxLines: 2,
@@ -25,7 +43,7 @@ describe('entity-text-layout', () => {
             boxX: 0,
             boxY: 0,
             boxWidth: 320,
-            boxHeight: 72,
+            boxHeight: 80,
             name: 'Improve customer onboarding experience across regions',
             id: 'GOAL-001',
             nameMaxLines: 2,
@@ -41,3 +59,97 @@ describe('entity-text-layout', () => {
         expect(lines.every((l) => l.length <= 10)).toBe(true);
     });
 });
+// Approximate half-extent (px) of each text class's glyphs around its centre
+// y — font-size / 2, the same heuristic the render-blocks overlap regression
+// test (#419) uses. Used below to assert text never visually crosses the box
+// border, not just that the *nominal* line-height budget fits.
+const HALF_EXTENT = {
+    'text-primary': 6, // 12px font
+    'text-secondary': 6, // 11px font, rounded up
+    'text-id': 5, // 10px font
+};
+describe('entity text layout — never overflows the box, always keeps padding', () => {
+    const PRESETS = Object.entries(ENTITY_NODE_SIZE); // compact/normal/wide
+    const NAMES = [
+        'Short',
+        'Achieve full GDPR & NIS2 compliance',
+        'A name so long it would need three or more lines to render in full without any height limit at all',
+    ];
+    function assertNoOverflowAndPadded(specs, boxTop, boxBottom) {
+        for (const s of specs) {
+            const half = HALF_EXTENT[s.cls] ?? 6;
+            expect(s.y - half).toBeGreaterThanOrEqual(boxTop);
+            expect(s.y + half).toBeLessThanOrEqual(boxBottom);
+        }
+    }
+    for (const [presetName, size] of PRESETS) {
+        for (const withType of [false, true]) {
+            for (const name of NAMES) {
+                it(`layoutCenteredEntityText: ${presetName} preset, type=${withType}, name="${name.slice(0, 20)}…" stays inside the box`, () => {
+                    const boxY = 0;
+                    const specs = layoutCenteredEntityText({
+                        boxX: 0,
+                        boxY,
+                        boxWidth: size.width,
+                        boxHeight: size.height,
+                        name,
+                        type: withType ? 'Strategic Goal' : undefined,
+                        id: 'GOAL-EU-COMPLIANCE-1',
+                        nameMaxLines: 2,
+                        idMaxLines: 1,
+                    });
+                    assertNoOverflowAndPadded(specs, boxY, boxY + size.height);
+                });
+            }
+        }
+    }
+    it('reproduces the reported case (wide preset, 2-line name + type + long id) with real padding on all sides', () => {
+        const size = ENTITY_NODE_SIZE.normal;
+        const boxY = 100;
+        const specs = layoutCenteredEntityText({
+            boxX: 0,
+            boxY,
+            boxWidth: size.width,
+            boxHeight: size.height,
+            name: 'Achieve full GDPR & NIS2 compliance',
+            type: 'Project Goal',
+            id: 'GOAL-EU-COMPLIANCE-1',
+            nameMaxLines: 2,
+            idMaxLines: 1,
+        });
+        const nameLines = specs.filter((s) => s.cls === 'text-primary');
+        expect(nameLines.length).toBe(2); // normal preset is tall enough to keep both lines
+        assertNoOverflowAndPadded(specs, boxY, boxY + size.height);
+        // Explicit padding, not just "doesn't cross the border".
+        const firstTop = Math.min(...specs.map((s) => s.y - (HALF_EXTENT[s.cls] ?? 6)));
+        const lastBottom = Math.max(...specs.map((s) => s.y + (HALF_EXTENT[s.cls] ?? 6)));
+        expect(firstTop - boxY).toBeGreaterThanOrEqual(TEXT_MARGIN_Y);
+        expect(boxY + size.height - lastBottom).toBeGreaterThanOrEqual(TEXT_MARGIN_Y);
+    });
+    it('layoutLeafBlockText stays inside the box for compact preset with a long name and id', () => {
+        const size = ENTITY_NODE_SIZE.compact;
+        const boxY = 0;
+        const specs = layoutLeafBlockText({
+            boxX: 0,
+            boxY,
+            boxWidth: size.width,
+            boxHeight: size.height,
+            name: 'Personal data records that linger after consent withdrawal across many systems and archives',
+            id: 'VERY_LONG_BLOCK_IDENTIFIER_WITH_MANY_SEGMENTS_AND_MORE',
+        });
+        assertNoOverflowAndPadded(specs, boxY, boxY + size.height);
+    });
+    it('layoutHeaderBlockText stays inside a short header strip', () => {
+        const boxY = 0;
+        const headerHeight = 28;
+        const specs = layoutHeaderBlockText({
+            boxX: 0,
+            boxY,
+            boxWidth: 250,
+            headerHeight,
+            name: 'A fairly long container name here',
+            id: 'VERY_LONG_CONTAINER_IDENTIFIER',
+        });
+        assertNoOverflowAndPadded(specs, boxY, boxY + headerHeight);
+    });
+});

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

@@ -9,6 +9,9 @@
 import { describe, expect, it } from 'vitest';
 import { renderBlocksSvg } from '../render-blocks.js';
 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',
@@ -69,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);
@@ -78,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);
@@ -105,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;
@@ -121,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 }],