@transitrix/diagrams 1.4.0 → 1.6.0

package/dist/goals/__tests__/GoalTreeView.test.js

@@ -0,0 +1,296 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _MockResizeObserver_callback;
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, cleanup, waitFor } from '@testing-library/react';
+import { GoalTreeView, computeDragOutcome } from '../GoalTreeView.js';
+// jsdom has no ResizeObserver / layout engine. reactflow keeps a node's DOM
+// wrapper `visibility: hidden` and excludes it from drag/intersection logic
+// until it has been "measured" via ResizeObserver — so the mock must
+// actually invoke its callback (with the mocked getBoundingClientRect below)
+// for nodes to become interactive, not just satisfy the constructor call.
+class MockResizeObserver {
+    constructor(callback) {
+        _MockResizeObserver_callback.set(this, void 0);
+        __classPrivateFieldSet(this, _MockResizeObserver_callback, callback, "f");
+    }
+    observe(target) {
+        queueMicrotask(() => {
+            const rect = target.getBoundingClientRect();
+            __classPrivateFieldGet(this, _MockResizeObserver_callback, "f").call(this, [{ target, contentRect: rect }], this);
+        });
+    }
+    unobserve() { }
+    disconnect() { }
+}
+_MockResizeObserver_callback = new WeakMap();
+// jsdom also has no DOMMatrixReadOnly, which reactflow's dimension-tracking
+// uses to read the translateX/Y out of a node's computed transform. Only
+// translate() (no scale/rotate) ever appears in this component's own CSS, so
+// a minimal shim covering that one case is enough.
+class MockDOMMatrixReadOnly {
+    constructor(transform) {
+        this.m41 = 0;
+        this.m42 = 0;
+        if (!transform || transform === 'none')
+            return;
+        const t = /translate\((-?[\d.]+)px,\s*(-?[\d.]+)px\)/.exec(transform);
+        if (t) {
+            this.m41 = Number(t[1]);
+            this.m42 = Number(t[2]);
+            return;
+        }
+        const m = /matrix\(([^)]+)\)/.exec(transform);
+        if (m) {
+            const parts = m[1].split(',').map((p) => Number(p.trim()));
+            this.m41 = parts[4] ?? 0;
+            this.m42 = parts[5] ?? 0;
+        }
+    }
+}
+function makeTree() {
+    return {
+        goal_types: [
+            { name: 'Strategy', level: 0 },
+            { name: 'Business Goal', level: 1 },
+        ],
+        goals: [
+            { id: 1, name: 'Triple revenue', type: 'Strategy', level: 0, parent_id: 0 },
+            { id: 2, name: 'Launch in EU', type: 'Business Goal', level: 1, parent_id: 1 },
+            {
+                id: 3,
+                name: 'Cut churn',
+                type: 'Business Goal',
+                level: 1,
+                parent_id: 1,
+                factors: [
+                    { id: 10, name: 'Support backlog', impact_type: 'risk' },
+                    { id: 11, name: 'New pricing', impact_type: 'opportunity' },
+                ],
+            },
+        ],
+    };
+}
+beforeEach(() => {
+    global.ResizeObserver = MockResizeObserver;
+    window.DOMMatrixReadOnly = MockDOMMatrixReadOnly;
+    vi.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(function () {
+        // Individual goal cards report their real 250x80 footprint (matters for
+        // reactflow's own drag/measurement bookkeeping); the flow container and
+        // everything else gets a generously large rect so viewport fitting has
+        // room to work with.
+        const isNode = this.classList?.contains('react-flow__node');
+        const width = isNode ? 250 : 1000;
+        const height = isNode ? 80 : 800;
+        return {
+            width, height, top: 0, left: 0, right: width, bottom: height, x: 0, y: 0,
+            toJSON() { return this; },
+        };
+    });
+});
+afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+});
+describe('GoalTreeView', () => {
+    it('renders without crashing and shows every canvas goal', async () => {
+        render(_jsx(GoalTreeView, { tree: makeTree() }));
+        await waitFor(() => {
+            expect(screen.getByText('Triple revenue')).toBeTruthy();
+            expect(screen.getByText('Launch in EU')).toBeTruthy();
+            expect(screen.getByText('Cut churn')).toBeTruthy();
+        });
+    });
+    it('renders factor indicators from goal.factors', async () => {
+        render(_jsx(GoalTreeView, { tree: makeTree() }));
+        await waitFor(() => {
+            expect(screen.getByText('Triple revenue')).toBeTruthy();
+        });
+        // One up-caret (opportunity) and one down-caret (risk) on "Cut churn".
+        expect(screen.getByLabelText('1 positive factor')).toBeTruthy();
+        expect(screen.getByLabelText('1 negative factor')).toBeTruthy();
+    });
+    it('puts a goal with a broken parent_id in the backlog, not on canvas', async () => {
+        const tree = {
+            goal_types: [
+                { name: 'Strategy', level: 0 },
+                { name: 'Business Goal', level: 1 },
+            ],
+            goals: [
+                { id: 1, name: 'Root goal', type: 'Strategy', level: 0, parent_id: 0 },
+                // level 1 + a parent_id that resolves to nothing — not a root by
+                // either "Roots: level === 0 || parent_id === 0" clause, and
+                // unreachable from goal 1 — must land in the backlog.
+                { id: 2, name: 'Orphaned goal', type: 'Business Goal', level: 1, parent_id: 999 },
+            ],
+        };
+        render(_jsx(GoalTreeView, { tree: tree, showBacklog: true }));
+        await waitFor(() => {
+            expect(screen.getByText('Root goal')).toBeTruthy();
+        });
+        expect(screen.getByText('Orphaned goal')).toBeTruthy();
+        expect(screen.queryByText('Backlog')).toBeTruthy();
+    });
+    it('does not render add/delete affordances when readOnly', async () => {
+        render(_jsx(GoalTreeView, { tree: makeTree(), readOnly: true }));
+        await waitFor(() => {
+            expect(screen.getByText('Triple revenue')).toBeTruthy();
+        });
+        expect(screen.queryByLabelText('Add child goal')).toBeNull();
+        expect(screen.queryByLabelText('Delete goal')).toBeNull();
+    });
+    it('fires onChange with kind "addChild" when the add-child button is clicked', async () => {
+        const onChange = vi.fn();
+        render(_jsx(GoalTreeView, { tree: makeTree(), onChange: onChange }));
+        await waitFor(() => {
+            expect(screen.getByText('Triple revenue')).toBeTruthy();
+        });
+        // Target the root (id 1, level 0) specifically — makeTree()'s goal_types
+        // only go up to level 1, so clicking "add child" on an existing level-1
+        // goal would be correctly refused (would exceed max level) and never
+        // fire onChange at all.
+        const rootNode = document.querySelector('.react-flow__node[data-id="1"]');
+        const addButton = rootNode.querySelector('[aria-label="Add child goal"]');
+        addButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+        await waitFor(() => expect(onChange).toHaveBeenCalledTimes(1));
+        const event = onChange.mock.calls[0][0];
+        expect(event.kind).toBe('addChild');
+        if (event.kind === 'addChild') {
+            expect(event.result.goals.length).toBe(4);
+        }
+    });
+    it('fires onChange with kind "delete" when the delete button is clicked', async () => {
+        const onChange = vi.fn();
+        render(_jsx(GoalTreeView, { tree: makeTree(), onChange: onChange }));
+        await waitFor(() => {
+            expect(screen.getByText('Cut churn')).toBeTruthy();
+        });
+        const deleteButtons = screen.getAllByLabelText('Delete goal');
+        deleteButtons[deleteButtons.length - 1].dispatchEvent(new MouseEvent('click', { bubbles: true }));
+        await waitFor(() => expect(onChange).toHaveBeenCalledTimes(1));
+        const event = onChange.mock.calls[0][0];
+        expect(event.kind).toBe('delete');
+    });
+    it('fires onChange with kind "restoreFromBacklog" when a backlog card is dropped onto a canvas card', async () => {
+        const tree = {
+            goal_types: [
+                { name: 'Strategy', level: 0 },
+                { name: 'Business Goal', level: 1 },
+            ],
+            goals: [
+                { id: 1, name: 'Root goal', type: 'Strategy', level: 0, parent_id: 0 },
+                { id: 2, name: 'Orphaned goal', type: 'Business Goal', level: 1, parent_id: 999 },
+            ],
+        };
+        const onChange = vi.fn();
+        render(_jsx(GoalTreeView, { tree: tree, onChange: onChange, showBacklog: true }));
+        await waitFor(() => {
+            expect(screen.getByText('Orphaned goal')).toBeTruthy();
+        });
+        // jsdom has no native DataTransfer; stub the minimal setData/getData
+        // surface this component's native (non-reactflow) HTML5 drag path uses
+        // and attach it directly to the dispatched events.
+        const store = new Map();
+        const dataTransfer = {
+            setData: (k, v) => store.set(k, v),
+            getData: (k) => store.get(k) ?? '',
+            effectAllowed: 'move',
+        };
+        function fireDnd(el, type, coords) {
+            const event = new Event(type, { bubbles: true, cancelable: true });
+            Object.defineProperty(event, 'dataTransfer', { value: dataTransfer });
+            Object.assign(event, coords);
+            el.dispatchEvent(event);
+        }
+        const backlogItem = screen.getByText('Orphaned goal').closest('div[draggable]');
+        const rootNode = document.querySelector('.react-flow__node[data-id="1"]');
+        // jsdom doesn't implement elementFromPoint at all (not just "returns null").
+        document.elementFromPoint = vi.fn().mockReturnValue(rootNode);
+        fireDnd(backlogItem, 'dragstart', { clientX: 0, clientY: 0 });
+        fireDnd(rootNode, 'drop', { clientX: 10, clientY: 10 });
+        await waitFor(() => expect(onChange).toHaveBeenCalledTimes(1));
+        const event = onChange.mock.calls[0][0];
+        expect(event.kind).toBe('restoreFromBacklog');
+        if (event.kind === 'restoreFromBacklog') {
+            expect(event.id).toBe(2);
+            expect(event.newParentId).toBe(1);
+            expect(event.result.goals.find((g) => g.id === 2)?.parent_id).toBe(1);
+        }
+    });
+    // Dragging a card is choreographed by reactflow's own pointer/DOM-measurement
+    // machinery (ResizeObserver-gated node "readiness", d3-drag pointer capture,
+    // viewport transform math) — faithfully simulating that in jsdom means
+    // re-implementing reactflow's internals rather than testing this component.
+    // computeDragOutcome() is the pure decision GoalTreeView's onNodeDragStop
+    // calls once reactflow reports a drag: given where a card was dropped, which
+    // mutation fires and what onChange payload it produces. Testing it directly
+    // covers the actual reparent/moveToBacklog logic without that DOM coupling.
+    describe('computeDragOutcome (reparent / moveToBacklog decision logic)', () => {
+        const tree = {
+            goal_types: [
+                { name: 'Strategy', level: 0 },
+                { name: 'Business Goal', level: 1 },
+            ],
+            goals: [
+                { id: 1, name: 'Goal A', type: 'Strategy', level: 0, parent_id: 0 },
+                { id: 2, name: 'Goal C', type: 'Strategy', level: 0, parent_id: 0 },
+                { id: 3, name: 'Goal B', type: 'Business Goal', level: 1, parent_id: 1 },
+            ],
+        };
+        it('fires a "reparent" change when dropped onto another card', () => {
+            const change = computeDragOutcome(tree, 3, { kind: 'node', id: 2 });
+            expect(change?.kind).toBe('reparent');
+            if (change?.kind === 'reparent') {
+                expect(change.sourceId).toBe(3);
+                expect(change.targetId).toBe(2);
+                expect(change.result.goals.find((g) => g.id === 3)?.parent_id).toBe(2);
+            }
+        });
+        it('fires a "moveToBacklog" change when dropped on the backlog zone', () => {
+            const change = computeDragOutcome(tree, 3, { kind: 'backlog' });
+            expect(change?.kind).toBe('moveToBacklog');
+            if (change?.kind === 'moveToBacklog') {
+                expect(change.id).toBe(3);
+                expect(change.result.goals.find((g) => g.id === 3)?.parent_id).toBe(0);
+            }
+        });
+        it('is a no-op when dropped nowhere in particular', () => {
+            expect(computeDragOutcome(tree, 3, null)).toBeNull();
+        });
+        it('is a no-op when dropped on itself', () => {
+            expect(computeDragOutcome(tree, 3, { kind: 'node', id: 3 })).toBeNull();
+        });
+        it('is a no-op when the reparent would exceed the schema max level', () => {
+            // Goal 3 is already level 1 (max); reparenting it under itself-sibling
+            // level-1 goal would push it to level 2.
+            const deeper = {
+                ...tree,
+                goals: [...tree.goals, { id: 4, name: 'Goal D', type: 'Business Goal', level: 1, parent_id: 1 }],
+            };
+            expect(computeDragOutcome(deeper, 3, { kind: 'node', id: 4 })).toBeNull();
+        });
+    });
+    it('fires onEditRequest on double-click', async () => {
+        const onEditRequest = vi.fn();
+        render(_jsx(GoalTreeView, { tree: makeTree(), onEditRequest: onEditRequest }));
+        await waitFor(() => {
+            expect(screen.getByText('Triple revenue')).toBeTruthy();
+        });
+        const nodeEl = document.querySelector('.react-flow__node[data-id="1"]');
+        expect(nodeEl).toBeTruthy();
+        nodeEl.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }));
+        await waitFor(() => expect(onEditRequest).toHaveBeenCalledTimes(1));
+        expect(onEditRequest.mock.calls[0][0]).toMatchObject({ id: 1, name: 'Triple revenue' });
+    });
+});

package/dist/goals/index.d.ts

@@ -4,3 +4,6 @@ export { parseCanonicalGoals } from './parse-canonical.js';
 export type { CanonicalGoalsResult } from './parse-canonical.js';
 export { layoutGoalTree, selectScopedGoals } from './layout.js';
 export { reparent, addChild, deleteWithDescendants, moveToBacklog, restoreFromBacklog } from './mutations.js';
+export { GoalTreeView } from './GoalTreeView.js';
+export type { GoalTreeViewProps, GoalTreeChange } from './GoalTreeView.js';
+export type { ThemeTokens } from './theme.js';

package/dist/goals/index.js

@@ -2,3 +2,4 @@ export { validateGoalTree } from './validate.js';
 export { parseCanonicalGoals } from './parse-canonical.js';
 export { layoutGoalTree, selectScopedGoals } from './layout.js';
 export { reparent, addChild, deleteWithDescendants, moveToBacklog, restoreFromBacklog } from './mutations.js';
+export { GoalTreeView } from './GoalTreeView.js';

package/dist/goals/theme.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Theme tokens for GoalTreeView — replaces DSM's Redux selectors
+ * (selectDiagramParams, selectGoalLevelColors) with a plain prop. Hosts
+ * that already carry Transitrix's --ts-* CSS custom properties (Studio)
+ * can pass those through; hosts with their own theme store (DSM) map
+ * their own values onto this shape.
+ */
+export interface ThemeTokens {
+    /** Card fill colour per goal level (0..7). Falls back to DEFAULT_GOAL_LEVEL_COLORS for missing levels. */
+    goalLevelColors?: Record<number, string>;
+    cardBorderColor?: string;
+    cardBorderWidth?: number;
+    cardTextColor?: string;
+    cardMetaColor?: string;
+    edgeColor?: string;
+    edgeWidth?: number;
+    /** Border colour a card takes on while it's a highlighted drop target during drag. */
+    dropTargetBorderColor?: string;
+}
+export declare const DEFAULT_GOAL_LEVEL_COLORS: Record<number, string>;
+export declare const DEFAULT_THEME: Required<ThemeTokens>;
+export declare function resolveTheme(theme?: ThemeTokens): Required<ThemeTokens>;

package/dist/goals/theme.js

@@ -0,0 +1,32 @@
+export const DEFAULT_GOAL_LEVEL_COLORS = {
+    0: '#e0e7ff',
+    1: '#c7d2fe',
+    2: '#a5b4fc',
+    3: '#93c5fd',
+    4: '#bae6fd',
+    5: '#bbf7d0',
+    6: '#fef08a',
+    7: '#fed7aa',
+};
+export const DEFAULT_THEME = {
+    goalLevelColors: DEFAULT_GOAL_LEVEL_COLORS,
+    cardBorderColor: '#94a3b8',
+    cardBorderWidth: 1,
+    cardTextColor: '#0f172a',
+    cardMetaColor: '#64748b',
+    edgeColor: '#94a3b8',
+    edgeWidth: 1.5,
+    dropTargetBorderColor: '#2563eb',
+};
+export function resolveTheme(theme) {
+    return {
+        goalLevelColors: theme?.goalLevelColors ?? DEFAULT_THEME.goalLevelColors,
+        cardBorderColor: theme?.cardBorderColor ?? DEFAULT_THEME.cardBorderColor,
+        cardBorderWidth: theme?.cardBorderWidth ?? DEFAULT_THEME.cardBorderWidth,
+        cardTextColor: theme?.cardTextColor ?? DEFAULT_THEME.cardTextColor,
+        cardMetaColor: theme?.cardMetaColor ?? DEFAULT_THEME.cardMetaColor,
+        edgeColor: theme?.edgeColor ?? DEFAULT_THEME.edgeColor,
+        edgeWidth: theme?.edgeWidth ?? DEFAULT_THEME.edgeWidth,
+        dropTargetBorderColor: theme?.dropTargetBorderColor ?? DEFAULT_THEME.dropTargetBorderColor,
+    };
+}

package/dist/index.d.ts

@@ -6,7 +6,8 @@ export * from "./geometry";
 export * from "./applications/index";
 export * from "./assertion/index";
 export * from "./blocks/index";
-export * from "./capability-map/index";
+export type { CapabilityType, CapabilityNode, CapabilityMapHeader, CapabilityMapFile, CapabilityTreeNode, CapabilityTreeEdge, CapabilityTreeLevelCounts, CapabilityTreeLayout, RenderCapabilityTreeOptions, } from "./capability-map/index";
+export { validateCapabilityMap, layoutCapabilityTree, TREE_NODE_WIDTH, TREE_NODE_HEIGHT, TREE_RANK_SEP, TREE_NODE_SEP, renderCapabilityTreeSvg, } from "./capability-map/index";
 export * from "./change/index";
 export * from "./compliance/index";
 export * from "./compliance-matrix/index";

package/dist/index.js

@@ -6,7 +6,7 @@ export * from "./geometry";
 export * from "./applications/index";
 export * from "./assertion/index";
 export * from "./blocks/index";
-export * from "./capability-map/index";
+export { validateCapabilityMap, layoutCapabilityTree, TREE_NODE_WIDTH, TREE_NODE_HEIGHT, TREE_RANK_SEP, TREE_NODE_SEP, renderCapabilityTreeSvg, } from "./capability-map/index";
 export * from "./change/index";
 export * from "./compliance/index";
 export * from "./compliance-matrix/index";

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.6.0",
   "type": "module",
   "description": "Shared rendering, validation, and pure mutations for Transitrix custom diagram formats.",
   "license": "MIT",
@@ -43,8 +43,11 @@
     "reactflow": "^11.0.0"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
     "@types/react": "^18.3.28",
     "@types/react-dom": "^19.2.3",
+    "jsdom": "^29.1.1",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "reactflow": "^11.11.4",

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)
+  });
+});