@transitrix/diagrams 1.4.0 → 1.5.0

package/dist/activities/__tests__/gantt.test.js

@@ -222,3 +222,42 @@ describe('computeGanttLayout — pinned mode', () => {
         expect(r.links[0].targetId).toBe('B');
     });
 });
+describe('computeGanttLayout — project-type activity suppression (regression for follow-up to #421)', () => {
+    // A project-type container activity is classified as a phase and rolls up into
+    // a bar spanning the full timeline. buildActivityViews filters project-type
+    // activities before calling computeGanttLayout so this bar never reaches the
+    // rendered Gantt. These tests confirm: (a) the container bar exists when NOT
+    // filtered, and (b) filtering it out still yields correct leaf/phase bars.
+    const docWithProjectContainer = {
+        notation: 'action',
+        title: 'Platform Launch Action',
+        project: { start_date: '2026-06-01' },
+        activities: [
+            { id: 'PROJ-1', name: 'Platform Launch', activity_type: 'project' },
+            { id: 'TASK-1', name: 'Design', activity_type: 'task', duration: 3, parent: 'PROJ-1' },
+            { id: 'TASK-2', name: 'Implement', activity_type: 'task', duration: 5, parent: 'PROJ-1', predecessors: ['TASK-1'] },
+        ],
+    };
+    it('includes the project container as a phase bar when not pre-filtered', () => {
+        const r = assertRenders(computeGanttLayout(docWithProjectContainer));
+        const projBar = r.bars.find(b => b.id === 'PROJ-1');
+        expect(projBar).toBeDefined();
+        expect(projBar.kind).toBe('phase');
+    });
+    it('still renders leaf tasks correctly when project-type activity is pre-filtered', () => {
+        const filteredDoc = {
+            ...docWithProjectContainer,
+            activities: docWithProjectContainer.activities.filter((a) => a.activity_type?.toLowerCase() !== 'project'),
+        };
+        const r = assertRenders(computeGanttLayout(filteredDoc));
+        // Project container bar must not appear.
+        expect(r.bars.find(b => b.id === 'PROJ-1')).toBeUndefined();
+        // Leaf tasks must still render with correct dates.
+        const t1 = r.bars.find(b => b.id === 'TASK-1');
+        const t2 = r.bars.find(b => b.id === 'TASK-2');
+        expect(t1).toBeDefined();
+        expect(t2).toBeDefined();
+        expect(t1.startDate).toBe('2026-06-01');
+        expect(t2.startDate).toBe('2026-06-04'); // ES = 3 (after TASK-1)
+    });
+});

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

@@ -52,6 +52,15 @@ function extractLabels(svg) {
         out.push({ cls: m[1], text: m[2] });
     return out;
 }
+/** Extract {class, y} for each text element in SVG document order. */
+function extractTextY(svg) {
+    const re = /<text class="(text-(?:primary|id))"[^>]*\by="([^"]+)"/g;
+    const out = [];
+    let m;
+    while ((m = re.exec(svg)))
+        out.push({ cls: m[1], y: parseFloat(m[2]) });
+    return out;
+}
 describe('renderBlocksSvg — leaf labels', () => {
     it('wraps a long name to at most 3 lines and truncates with …', () => {
         const longName = 'Personal data records that linger after consent withdrawal across many systems and ' +
@@ -128,3 +137,42 @@ describe('renderBlocksSvg — container headers', () => {
         expect(primaries.some((l) => l.text.endsWith('…'))).toBe(true);
     });
 });
+describe('renderBlocksSvg — name/ID vertical overlap regression (follows-up on #419)', () => {
+    // Root cause: NAME_ID_GAP was 6 px. text-primary is 12 px tall (±6 px around
+    // centre) and text-id is 10 px tall (±5 px around centre). The minimum gap
+    // between centres to avoid overlap is 11 px; a gap of 6 caused 5 px of overlap.
+    // Fix: NAME_ID_GAP = 14 (3 px visual buffer, matching the gap between name lines).
+    const NAME_HALF_H = 6; // half of text-primary font size (12 px)
+    const ID_HALF_H = 5; // half of text-id font size (10 px)
+    it('leaf node: last name line bottom does not overlap first ID line top (1 name + 1 ID)', () => {
+        const svg = renderBlocksSvg(leafDoc('Short', 'BLK-1'));
+        const positions = extractTextY(svg);
+        const nameY = positions.filter(p => p.cls === 'text-primary').map(p => p.y);
+        const idY = positions.filter(p => p.cls === 'text-id').map(p => p.y);
+        expect(nameY.length).toBeGreaterThan(0);
+        expect(idY.length).toBeGreaterThan(0);
+        const lastNameBottom = Math.max(...nameY) + NAME_HALF_H;
+        const firstIdTop = Math.min(...idY) - ID_HALF_H;
+        expect(firstIdTop).toBeGreaterThan(lastNameBottom);
+    });
+    it('leaf node: no overlap with a 3-word name (2 name lines + 1 ID)', () => {
+        const svg = renderBlocksSvg(leafDoc('Three Word Name', 'BLK-001'));
+        const positions = extractTextY(svg);
+        const nameY = positions.filter(p => p.cls === 'text-primary').map(p => p.y);
+        const idY = positions.filter(p => p.cls === 'text-id').map(p => p.y);
+        const lastNameBottom = Math.max(...nameY) + NAME_HALF_H;
+        const firstIdTop = Math.min(...idY) - ID_HALF_H;
+        expect(firstIdTop).toBeGreaterThan(lastNameBottom);
+    });
+    it('leaf node: no overlap with a long name (3 name lines) and wrapped ID (2 lines)', () => {
+        const longName = 'Personal data records that linger after consent withdrawal across many systems and archives';
+        const longId = 'VERY_LONG_BLOCK_IDENTIFIER_WITH_MANY_SEGMENTS_AND_MORE';
+        const svg = renderBlocksSvg(leafDoc(longName, longId));
+        const positions = extractTextY(svg);
+        const nameY = positions.filter(p => p.cls === 'text-primary').map(p => p.y);
+        const idY = positions.filter(p => p.cls === 'text-id').map(p => p.y);
+        const lastNameBottom = Math.max(...nameY) + NAME_HALF_H;
+        const firstIdTop = Math.min(...idY) - ID_HALF_H;
+        expect(firstIdTop).toBeGreaterThan(lastNameBottom);
+    });
+});

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

@@ -0,0 +1,11 @@
+/**
+ * Shared visual constants for entity-box (block-style) notation renderers.
+ *
+ * Goals, Nested Blocks, FGCA/DGCA, 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
+ * else). Change here and every notation updates together.
+ */
+/** Border-radius (px) for entity and leaf-block node rectangles. */
+export declare const ENTITY_NODE_RX = 8;

package/dist/webview/notation-style.js

@@ -0,0 +1,11 @@
+/**
+ * Shared visual constants for entity-box (block-style) notation renderers.
+ *
+ * Goals, Nested Blocks, FGCA/DGCA, 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
+ * else). Change here and every notation updates together.
+ */
+/** Border-radius (px) for entity and leaf-block node rectangles. */
+export const ENTITY_NODE_RX = 8;

package/dist/webview/render-blocks.js

@@ -15,15 +15,19 @@
 import { layoutNestedBlocks } from '../blocks/layout.js';
 import { generateSvgEmbedCss } from '../theme/index.js';
 import { escXml } from './render-util.js';
+import { ENTITY_NODE_RX } from './notation-style.js';
 const PAD = 24;
 // Approximate character width (px) at text-primary size (12px/600).
 const CHAR_W = 7;
 // Approximate character width (px) at text-id size (10px/600).
 const CHAR_W_ID = 6;
 // Vertical spacing between line centres.
-const LINE_H = 14; // name lines (text-primary)
-const LINE_H_ID = 12; // id lines (text-id)
-const NAME_ID_GAP = 6; // gap between last name centre and first ID centre
+const LINE_H = 14; // name lines (text-primary, 12 px font)
+const LINE_H_ID = 12; // id lines (text-id, 10 px font)
+// Minimum gap to avoid overlap: half of name text height (6 px) + half of id
+// text height (5 px) = 11 px. Use 14 px to match the name-line separation and
+// leave a 3 px visual buffer — same as the gap between consecutive name lines.
+const NAME_ID_GAP = 14;
 /** Word-wrap `text` to at most `maxLines` lines of `maxChars` each. */
 function wrapWords(text, maxChars, maxLines) {
     const safeMax = Math.max(2, maxChars);
@@ -101,7 +105,7 @@ function truncateId(id, maxChars) {
 function emitBlockSvg(b, ox, oy, parts) {
     const cls = levelClassForDepth(b.depth);
     const cx = b.x + ox + b.width / 2;
-    parts.push(`<rect class="diagram-node ${cls}" x="${b.x + ox}" y="${b.y + oy}" width="${b.width}" height="${b.height}" rx="6"/>`);
+    parts.push(`<rect class="diagram-node ${cls}" x="${b.x + ox}" y="${b.y + oy}" width="${b.width}" height="${b.height}" rx="${ENTITY_NODE_RX}"/>`);
     const innerW = Math.max(0, b.width - TEXT_MARGIN_X * 2);
     const isLeaf = b.children.length === 0;
     if (isLeaf) {

package/dist/webview/render-goals.js

@@ -14,6 +14,7 @@ import { layoutGoalTree } from '../goals/layout.js';
 import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
 import { generateSvgEmbedCss } from '../theme/index.js';
 import { escXml } from './render-util.js';
+import { ENTITY_NODE_RX } from './notation-style.js';
 const NODE_W = 250;
 const NODE_H = 72;
 const RANK_SEP = 100;
@@ -103,7 +104,7 @@ export function renderGoalsLayoutSvg(layout, options = {}) {
         const typeLabel = n.data.type ?? '';
         const idText = String(n.data.id);
         return `<g>
-  <rect class="diagram-node level-${level}" x="${x}" y="${y}" width="${n.width}" height="${n.height}" rx="8"/>
+  <rect class="diagram-node level-${level}" x="${x}" y="${y}" width="${n.width}" height="${n.height}" rx="${ENTITY_NODE_RX}"/>
   <text class="text-primary" x="${x + n.width / 2}" y="${nameY1}" text-anchor="middle" dominant-baseline="central">${escXml(line1)}</text>${twoLines ? `
   <text class="text-primary" x="${x + n.width / 2}" y="${nameY2}" text-anchor="middle" dominant-baseline="central">${escXml(line2)}</text>` : ''}${typeLabel ? `
   <text class="text-secondary" x="${x + n.width / 2}" y="${typeY}" text-anchor="middle" dominant-baseline="central">${escXml(typeLabel)}</text>` : ''}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transitrix/diagrams",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "type": "module",
   "description": "Shared rendering, validation, and pure mutations for Transitrix custom diagram formats.",
   "license": "MIT",

package/src/activities/__tests__/gantt.test.ts

@@ -243,3 +243,48 @@ describe('computeGanttLayout — pinned mode', () => {
     expect(r.links[0].targetId).toBe('B');
   });
 });
+
+describe('computeGanttLayout — project-type activity suppression (regression for follow-up to #421)', () => {
+  // A project-type container activity is classified as a phase and rolls up into
+  // a bar spanning the full timeline. buildActivityViews filters project-type
+  // activities before calling computeGanttLayout so this bar never reaches the
+  // rendered Gantt. These tests confirm: (a) the container bar exists when NOT
+  // filtered, and (b) filtering it out still yields correct leaf/phase bars.
+
+  const docWithProjectContainer: ActivityDoc = {
+    notation: 'action',
+    title: 'Platform Launch Action',
+    project: { start_date: '2026-06-01' },
+    activities: [
+      { id: 'PROJ-1', name: 'Platform Launch', activity_type: 'project' },
+      { id: 'TASK-1', name: 'Design', activity_type: 'task', duration: 3, parent: 'PROJ-1' },
+      { id: 'TASK-2', name: 'Implement', activity_type: 'task', duration: 5, parent: 'PROJ-1', predecessors: ['TASK-1'] },
+    ],
+  };
+
+  it('includes the project container as a phase bar when not pre-filtered', () => {
+    const r = assertRenders(computeGanttLayout(docWithProjectContainer));
+    const projBar = r.bars.find(b => b.id === 'PROJ-1');
+    expect(projBar).toBeDefined();
+    expect(projBar!.kind).toBe('phase');
+  });
+
+  it('still renders leaf tasks correctly when project-type activity is pre-filtered', () => {
+    const filteredDoc: ActivityDoc = {
+      ...docWithProjectContainer,
+      activities: docWithProjectContainer.activities.filter(
+        (a) => a.activity_type?.toLowerCase() !== 'project',
+      ),
+    };
+    const r = assertRenders(computeGanttLayout(filteredDoc));
+    // Project container bar must not appear.
+    expect(r.bars.find(b => b.id === 'PROJ-1')).toBeUndefined();
+    // Leaf tasks must still render with correct dates.
+    const t1 = r.bars.find(b => b.id === 'TASK-1')!;
+    const t2 = r.bars.find(b => b.id === 'TASK-2')!;
+    expect(t1).toBeDefined();
+    expect(t2).toBeDefined();
+    expect(t1.startDate).toBe('2026-06-01');
+    expect(t2.startDate).toBe('2026-06-04'); // ES = 3 (after TASK-1)
+  });
+});

package/src/webview/__tests__/render-blocks.test.ts

@@ -59,6 +59,15 @@ function extractLabels(svg: string): Array<{ cls: string; text: string }> {
   return out;
 }
 
+/** Extract {class, y} for each text element in SVG document order. */
+function extractTextY(svg: string): Array<{ cls: string; y: number }> {
+  const re = /<text class="(text-(?:primary|id))"[^>]*\by="([^"]+)"/g;
+  const out: Array<{ cls: string; y: number }> = [];
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(svg))) out.push({ cls: m[1], y: parseFloat(m[2]) });
+  return out;
+}
+
 describe('renderBlocksSvg — leaf labels', () => {
   it('wraps a long name to at most 3 lines and truncates with …', () => {
     const longName =
@@ -153,3 +162,48 @@ describe('renderBlocksSvg — container headers', () => {
     expect(primaries.some((l) => l.text.endsWith('…'))).toBe(true);
   });
 });
+
+describe('renderBlocksSvg — name/ID vertical overlap regression (follows-up on #419)', () => {
+  // Root cause: NAME_ID_GAP was 6 px. text-primary is 12 px tall (±6 px around
+  // centre) and text-id is 10 px tall (±5 px around centre). The minimum gap
+  // between centres to avoid overlap is 11 px; a gap of 6 caused 5 px of overlap.
+  // Fix: NAME_ID_GAP = 14 (3 px visual buffer, matching the gap between name lines).
+
+  const NAME_HALF_H = 6;  // half of text-primary font size (12 px)
+  const ID_HALF_H = 5;    // half of text-id font size (10 px)
+
+  it('leaf node: last name line bottom does not overlap first ID line top (1 name + 1 ID)', () => {
+    const svg = renderBlocksSvg(leafDoc('Short', 'BLK-1'));
+    const positions = extractTextY(svg);
+    const nameY = positions.filter(p => p.cls === 'text-primary').map(p => p.y);
+    const idY = positions.filter(p => p.cls === 'text-id').map(p => p.y);
+    expect(nameY.length).toBeGreaterThan(0);
+    expect(idY.length).toBeGreaterThan(0);
+    const lastNameBottom = Math.max(...nameY) + NAME_HALF_H;
+    const firstIdTop = Math.min(...idY) - ID_HALF_H;
+    expect(firstIdTop).toBeGreaterThan(lastNameBottom);
+  });
+
+  it('leaf node: no overlap with a 3-word name (2 name lines + 1 ID)', () => {
+    const svg = renderBlocksSvg(leafDoc('Three Word Name', 'BLK-001'));
+    const positions = extractTextY(svg);
+    const nameY = positions.filter(p => p.cls === 'text-primary').map(p => p.y);
+    const idY = positions.filter(p => p.cls === 'text-id').map(p => p.y);
+    const lastNameBottom = Math.max(...nameY) + NAME_HALF_H;
+    const firstIdTop = Math.min(...idY) - ID_HALF_H;
+    expect(firstIdTop).toBeGreaterThan(lastNameBottom);
+  });
+
+  it('leaf node: no overlap with a long name (3 name lines) and wrapped ID (2 lines)', () => {
+    const longName =
+      'Personal data records that linger after consent withdrawal across many systems and archives';
+    const longId = 'VERY_LONG_BLOCK_IDENTIFIER_WITH_MANY_SEGMENTS_AND_MORE';
+    const svg = renderBlocksSvg(leafDoc(longName, longId));
+    const positions = extractTextY(svg);
+    const nameY = positions.filter(p => p.cls === 'text-primary').map(p => p.y);
+    const idY = positions.filter(p => p.cls === 'text-id').map(p => p.y);
+    const lastNameBottom = Math.max(...nameY) + NAME_HALF_H;
+    const firstIdTop = Math.min(...idY) - ID_HALF_H;
+    expect(firstIdTop).toBeGreaterThan(lastNameBottom);
+  });
+});

package/src/webview/notation-style.ts

@@ -0,0 +1,12 @@
+/**
+ * Shared visual constants for entity-box (block-style) notation renderers.
+ *
+ * Goals, Nested Blocks, FGCA/DGCA, 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
+ * else). Change here and every notation updates together.
+ */
+
+/** Border-radius (px) for entity and leaf-block node rectangles. */
+export const ENTITY_NODE_RX = 8;

package/src/webview/render-blocks.ts

@@ -16,6 +16,7 @@ import { layoutNestedBlocks } from '../blocks/layout.js';
 import type { BlocksFile, BlocksLayout, LaidOutBlock } from '../blocks/types.js';
 import { generateSvgEmbedCss, type ThemeId } from '../theme/index.js';
 import { escXml } from './render-util.js';
+import { ENTITY_NODE_RX } from './notation-style.js';
 
 const PAD = 24;
 
@@ -25,9 +26,12 @@ const CHAR_W = 7;
 const CHAR_W_ID = 6;
 
 // Vertical spacing between line centres.
-const LINE_H = 14;    // name lines (text-primary)
-const LINE_H_ID = 12; // id lines (text-id)
-const NAME_ID_GAP = 6; // gap between last name centre and first ID centre
+const LINE_H = 14;     // name lines (text-primary, 12 px font)
+const LINE_H_ID = 12;  // id lines (text-id, 10 px font)
+// Minimum gap to avoid overlap: half of name text height (6 px) + half of id
+// text height (5 px) = 11 px. Use 14 px to match the name-line separation and
+// leave a 3 px visual buffer — same as the gap between consecutive name lines.
+const NAME_ID_GAP = 14;
 
 /** Word-wrap `text` to at most `maxLines` lines of `maxChars` each. */
 function wrapWords(text: string, maxChars: number, maxLines: number): string[] {
@@ -110,7 +114,7 @@ function emitBlockSvg(b: LaidOutBlock, ox: number, oy: number, parts: string[]):
   const cls = levelClassForDepth(b.depth);
   const cx = b.x + ox + b.width / 2;
   parts.push(
-    `<rect class="diagram-node ${cls}" x="${b.x + ox}" y="${b.y + oy}" width="${b.width}" height="${b.height}" rx="6"/>`,
+    `<rect class="diagram-node ${cls}" x="${b.x + ox}" y="${b.y + oy}" width="${b.width}" height="${b.height}" rx="${ENTITY_NODE_RX}"/>`,
   );
 
   const innerW = Math.max(0, b.width - TEXT_MARGIN_X * 2);

package/src/webview/render-goals.ts

@@ -15,6 +15,7 @@ import type { GoalTree, GoalTreeLayout, LaidOutEdge } from '../goals/types.js';
 import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
 import { generateSvgEmbedCss, type ThemeId } from '../theme/index.js';
 import { escXml } from './render-util.js';
+import { ENTITY_NODE_RX } from './notation-style.js';
 
 const NODE_W = 250;
 const NODE_H = 72;
@@ -130,7 +131,7 @@ export function renderGoalsLayoutSvg(layout: GoalTreeLayout, options: RenderGoal
       const typeLabel = n.data.type ?? '';
       const idText = String(n.data.id);
       return `<g>
-  <rect class="diagram-node level-${level}" x="${x}" y="${y}" width="${n.width}" height="${n.height}" rx="8"/>
+  <rect class="diagram-node level-${level}" x="${x}" y="${y}" width="${n.width}" height="${n.height}" rx="${ENTITY_NODE_RX}"/>
   <text class="text-primary" x="${x + n.width / 2}" y="${nameY1}" text-anchor="middle" dominant-baseline="central">${escXml(line1)}</text>${twoLines ? `
   <text class="text-primary" x="${x + n.width / 2}" y="${nameY2}" text-anchor="middle" dominant-baseline="central">${escXml(line2)}</text>` : ''}${typeLabel ? `
   <text class="text-secondary" x="${x + n.width / 2}" y="${typeY}" text-anchor="middle" dominant-baseline="central">${escXml(typeLabel)}</text>` : ''}