@transitrix/diagrams 1.6.0 → 1.8.1

package/dist/fgca/preview-layout.js

@@ -1,15 +1,15 @@
-// Pure column-layout geometry for the static FGCA / FGA previews.
+// Pure column-layout geometry for the static DGCA / DGA previews.
 //
-// This is the layout the Studio extension's `fgca-preview.ts` renders to SVG
+// This is the layout the Studio extension's `dgca-preview.ts` renders to SVG
 // (NOT the ReactFlow `buildFGCALayout` in `./layout.ts`, which targets the
 // interactive web UI). It lives here — rather than inline in the extension —
 // 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.
 /**
- * Trims an FGCA/FGA doc to a scope (vkgeorgia/strategy#77).
+ * Trims a DGCA/DGA doc to a scope.
  *
- * FGCA/FGA goals are flat (no parent_id), so:
+ * DGCA/DGA goals are flat (no parent_id), so:
  *   - 'level' → goals with `(level ?? 0) <= maxLevel`.
  *   - 'root'  → the single goal whose id matches `rootGoalId` (empty when absent).
  *
@@ -38,8 +38,8 @@ export function selectScopedFGCA(doc, scope) {
         activities: visibleActivities,
     };
 }
-// Fixed node + frame geometry. Only the inter-node gaps are user-configurable
-// (vkgeorgia/strategy#75); node size and padding stay constant.
+// 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_HEADER_H = 32;
@@ -47,10 +47,10 @@ export const FGCA_PAD = 20;
 export const FGCA_DEFAULT_COL_GAP = 160;
 export const FGCA_DEFAULT_ROW_GAP = 20;
 export function layoutFGCAPreview(inputDoc, options = {}) {
-    const { hideChanges = false, colGap = FGCA_DEFAULT_COL_GAP, rowGap = FGCA_DEFAULT_ROW_GAP, scope = { mode: 'all' }, } = options;
+    const { hideChanges = false, colGap = FGCA_DEFAULT_COL_GAP, rowGap = FGCA_DEFAULT_ROW_GAP, scope = { mode: 'all' }, nodeWidth = FGCA_NODE_W, nodeHeight = FGCA_NODE_H, } = options;
     // Trim to scope first; everything below lays out the visible subset only.
     const doc = selectScopedFGCA(inputDoc, scope);
-    const colStride = FGCA_NODE_W + colGap;
+    const colStride = nodeWidth + colGap;
     const cols = hideChanges
         ? ['driver', 'goal', 'activity']
         : ['driver', 'goal', 'change', 'activity'];
@@ -110,7 +110,7 @@ export function layoutFGCAPreview(inputDoc, options = {}) {
     const nodeMap = new Map();
     const nodes = [];
     const columns = [];
-    const yCenters = new Map(); // nodeId → y + FGCA_NODE_H / 2
+    const yCenters = new Map(); // nodeId → y + nodeHeight / 2
     for (let ci = 0; ci < cols.length; ci++) {
         const col = cols[ci];
         const x = FGCA_PAD + ci * colStride;
@@ -121,8 +121,8 @@ export function layoutFGCAPreview(inputDoc, options = {}) {
             const node = { id: item.id, x, y, label: item.label, col };
             nodes.push(node);
             nodeMap.set(item.id, node);
-            yCenters.set(item.id, y + FGCA_NODE_H / 2);
-            y += FGCA_NODE_H + rowGap;
+            yCenters.set(item.id, y + nodeHeight / 2);
+            y += nodeHeight + rowGap;
         }
     }
     const edges = [];
@@ -131,7 +131,7 @@ export function layoutFGCAPreview(inputDoc, options = {}) {
         const t = nodeMap.get(targetId);
         if (!s || !t)
             return;
-        edges.push({ sx: s.x + FGCA_NODE_W, sy: s.y + FGCA_NODE_H / 2, tx: t.x, ty: t.y + FGCA_NODE_H / 2 });
+        edges.push({ sx: s.x + nodeWidth, sy: s.y + nodeHeight / 2, tx: t.x, ty: t.y + nodeHeight / 2 });
     }
     for (const g of doc.goals) {
         for (const f of (g.factor ?? []))
@@ -164,7 +164,7 @@ export function layoutFGCAPreview(inputDoc, options = {}) {
             }
         }
     }
-    const maxNodeBottom = nodes.reduce((m, n) => Math.max(m, n.y + FGCA_NODE_H), FGCA_PAD + FGCA_HEADER_H + rowGap + FGCA_NODE_H);
+    const maxNodeBottom = nodes.reduce((m, n) => Math.max(m, n.y + nodeHeight), FGCA_PAD + FGCA_HEADER_H + rowGap + nodeHeight);
     const width = FGCA_PAD * 2 + cols.length * colStride - colGap;
     const height = maxNodeBottom + FGCA_PAD;
     return { nodes, edges, columns, width, height };

package/dist/goals/GoalNode.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Goal } from './types.js';
+import type { Factor, Goal } from './types.js';
 import type { ThemeTokens } from './theme.js';
 export interface GoalNodeData {
     goal: Goal;
@@ -11,6 +11,7 @@ export interface GoalNodeData {
     onAddChild: (parentId: number, parentLevel: number) => void;
     onDelete: (id: number) => void;
     onToggleCollapse: (id: number) => void;
+    onFactorClick?: (factor: Factor) => void;
 }
 declare const GoalNode: React.MemoExoticComponent<({ data }: {
     data: GoalNodeData;

package/dist/goals/GoalNode.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useState } from 'react';
 import { Handle, Position } from 'reactflow';
+import { displayGoalId } from './parse-canonical.js';
 const NODE_WIDTH = 250;
 const NODE_HEIGHT = 80;
 function impactSign(f) {
@@ -44,7 +45,7 @@ const GoalNode = memo(({ data }) => {
                             WebkitLineClamp: 2,
                             WebkitBoxOrient: 'vertical',
                             wordBreak: 'break-word',
-                        }, children: goal.name }), _jsxs("div", { style: { fontSize: 10, color: theme.cardMetaColor, marginTop: 2 }, children: ["ID: ", goal.id, " | Lvl: ", goal.level, goal.tag ? ` | #${goal.tag}` : ''] })] }), _jsx("div", { style: { flexShrink: 0, display: 'flex', alignItems: 'center', width: 16, justifyContent: 'flex-end' }, children: negative.length > 0 && (_jsxs("span", { role: "button", "aria-label": `${negative.length} negative factor${negative.length > 1 ? 's' : ''}`, title: `${negative.length} negative factor${negative.length > 1 ? 's' : ''}`, onClick: (e) => {
+                        }, children: goal.name }), _jsxs("div", { style: { fontSize: 10, color: theme.cardMetaColor, marginTop: 2 }, children: ["ID: ", displayGoalId(goal), " | Lvl: ", goal.level, goal.tag ? ` | #${goal.tag}` : ''] })] }), _jsx("div", { style: { flexShrink: 0, display: 'flex', alignItems: 'center', width: 16, justifyContent: 'flex-end' }, children: negative.length > 0 && (_jsxs("span", { role: "button", "aria-label": `${negative.length} negative factor${negative.length > 1 ? 's' : ''}`, title: `${negative.length} negative factor${negative.length > 1 ? 's' : ''}`, onClick: (e) => {
                         e.stopPropagation();
                         setOpenPanel(openPanel === 'negative' ? null : 'negative');
                     }, style: { cursor: 'pointer', color: '#dc2626', fontSize: 14, lineHeight: 1, userSelect: 'none' }, children: ["\u25BC", negative.length > 1 && _jsx("span", { style: { fontSize: 9, fontWeight: 700, marginLeft: 2 }, children: negative.length })] })) }), openPanel && (_jsx("div", { style: {
@@ -56,7 +57,10 @@ const GoalNode = memo(({ data }) => {
                     flexDirection: 'column',
                     gap: 4,
                     ...(openPanel === 'positive' ? { bottom: 'calc(100% + 8px)' } : { top: 'calc(100% + 8px)' }),
-                }, children: (openPanel === 'positive' ? positive : negative).map((f) => (_jsxs("div", { style: {
+                }, children: (openPanel === 'positive' ? positive : negative).map((f) => (_jsxs("div", { onClick: (e) => {
+                        e.stopPropagation();
+                        data.onFactorClick?.(f);
+                    }, style: {
                         background: openPanel === 'positive' ? '#f0fdf4' : '#fef2f2',
                         border: `1px solid ${openPanel === 'positive' ? '#bbf7d0' : '#fecaca'}`,
                         color: openPanel === 'positive' ? '#166534' : '#991b1b',
@@ -64,6 +68,7 @@ const GoalNode = memo(({ data }) => {
                         padding: '4px 6px',
                         fontSize: 10,
                         textAlign: 'left',
+                        cursor: data.onFactorClick ? 'pointer' : 'default',
                     }, children: [_jsx("div", { style: { fontWeight: 700 }, children: f.name }), f.description && _jsx("div", { style: { opacity: 0.85 }, children: f.description })] }, f.id))) })), !readOnly && (_jsx("button", { type: "button", "aria-label": "Add child goal", title: "Add child goal", onClick: (e) => {
                     e.stopPropagation();
                     data.onAddChild(goal.id, goal.level);

package/dist/goals/GoalTreeView.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import 'reactflow/dist/style.css';
-import type { Goal, GoalTree, GoalTreeLayout, LayoutOptions } from './types.js';
+import type { Factor, Goal, GoalTree, GoalTreeLayout, LayoutOptions } from './types.js';
 import type { ThemeTokens } from './theme.js';
 export type { ThemeTokens } from './theme.js';
 export interface GoalTreeViewProps {
@@ -10,9 +10,11 @@ export interface GoalTreeViewProps {
     theme?: ThemeTokens;
     readOnly?: boolean;
     showBacklog?: boolean;
+    defaultBacklogOpen?: boolean;
     showMiniMap?: boolean;
     onChange?: (event: GoalTreeChange) => void;
     onEditRequest?: (goal: Goal) => void;
+    onFactorClick?: (factor: Factor) => void;
 }
 export type GoalTreeChange = {
     kind: 'reparent';

package/dist/goals/GoalTreeView.js

@@ -61,10 +61,11 @@ function partitionCanvasAndBacklog(goals) {
     }
     return { canvas, backlog };
 }
-function GoalTreeViewInner({ tree, layout: layoutProp, layoutOptions, theme: themeProp, readOnly = false, showBacklog = false, showMiniMap = false, onChange, onEditRequest, }) {
+function GoalTreeViewInner({ tree, layout: layoutProp, layoutOptions, theme: themeProp, readOnly = false, showBacklog = false, defaultBacklogOpen = true, showMiniMap = false, onChange, onEditRequest, onFactorClick, }) {
     const theme = useMemo(() => resolveTheme(themeProp), [themeProp]);
     const [collapsedIds, setCollapsedIds] = useState(new Set());
     const [hoveredId, setHoveredId] = useState(null);
+    const [isBacklogOpen, setIsBacklogOpen] = useState(defaultBacklogOpen);
     const { canvas: canvasGoals, backlog: backlogGoals } = useMemo(() => partitionCanvasAndBacklog(tree.goals), [tree.goals]);
     const layout = useMemo(() => {
         if (layoutProp)
@@ -126,9 +127,10 @@ function GoalTreeViewInner({ tree, layout: layoutProp, layoutOptions, theme: the
                 onAddChild,
                 onDelete: onDeleteNode,
                 onToggleCollapse,
+                onFactorClick,
             },
         }));
-    }, [layout.nodes, theme, readOnly, hoveredId, collapsedIds, onAddChild, onDeleteNode, onToggleCollapse]);
+    }, [layout.nodes, theme, readOnly, hoveredId, collapsedIds, onAddChild, onDeleteNode, onToggleCollapse, onFactorClick]);
     const buildEdges = useCallback(() => {
         return layout.edges.map((e) => ({
             id: `e${e.source}-${e.target}`,
@@ -206,22 +208,37 @@ function GoalTreeViewInner({ tree, layout: layoutProp, layoutOptions, theme: the
         onRestoreFromBacklog(goalId, Number(targetIdAttr));
     }, [readOnly, onRestoreFromBacklog]);
     const showBacklogPanel = showBacklog && backlogGoals.length > 0;
-    return (_jsxs("div", { style: { display: 'flex', width: '100%', height: '100%' }, children: [showBacklogPanel && (_jsxs("div", { "data-goaltree-backlog-zone": true, style: {
-                    width: 220,
+    return (_jsxs("div", { style: { display: 'flex', width: '100%', height: '100%' }, children: [showBacklogPanel && (_jsxs("div", { ...(isBacklogOpen ? { 'data-goaltree-backlog-zone': true } : {}), style: {
+                    width: isBacklogOpen ? 220 : 28,
                     flexShrink: 0,
                     borderRight: '1px solid #e2e8f0',
-                    padding: 10,
-                    overflowY: 'auto',
                     background: '#f8fafc',
-                }, children: [_jsx("div", { style: { fontWeight: 700, fontSize: 12, color: '#334155', marginBottom: 8 }, children: "Backlog" }), backlogGoals.map((goal) => (_jsxs("div", { draggable: !readOnly, onDragStart: (e) => onBacklogItemDragStart(e, goal.id), onDoubleClick: () => onEditRequest?.(goal), title: "Drag onto a canvas card to set its parent", style: {
-                            padding: 8,
-                            marginBottom: 6,
-                            background: '#ffffff',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    position: 'relative',
+                }, children: [_jsx("button", { type: "button", "aria-label": isBacklogOpen ? 'Collapse backlog' : 'Expand backlog', title: isBacklogOpen ? 'Collapse backlog' : 'Expand backlog', onClick: () => setIsBacklogOpen((v) => !v), style: {
+                            alignSelf: 'flex-end',
+                            margin: '6px 6px 0 6px',
+                            width: 16,
+                            height: 16,
                             border: '1px solid #cbd5e1',
-                            borderRadius: 6,
-                            fontSize: 11,
-                            cursor: readOnly ? 'default' : 'grab',
-                        }, children: [_jsx("div", { style: { fontWeight: 600 }, children: goal.name }), _jsxs("div", { style: { color: '#64748b' }, children: ["Level: ", goal.level] })] }, goal.id)))] })), _jsx("div", { style: { flex: 1, position: 'relative' }, onDragOver: onCanvasDragOver, onDrop: onCanvasDrop, children: _jsxs(ReactFlow, { nodes: nodes, edges: edges, onNodesChange: readOnly ? undefined : onNodesChange, onEdgesChange: readOnly ? undefined : onEdgesChange, nodeTypes: nodeTypes, nodesDraggable: !readOnly, nodesConnectable: false, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onNodeDoubleClick: onNodeDoubleClick, connectionLineType: ConnectionLineType.Bezier, fitView: true, children: [_jsx(Background, {}), _jsx(Controls, {}), showMiniMap && _jsx(MiniMap, { pannable: true, zoomable: true })] }) })] }));
+                            borderRadius: 4,
+                            background: '#ffffff',
+                            color: '#64748b',
+                            fontSize: 10,
+                            lineHeight: '14px',
+                            padding: 0,
+                            cursor: 'pointer',
+                            flexShrink: 0,
+                        }, children: isBacklogOpen ? '◀' : '▶' }), isBacklogOpen && (_jsxs("div", { style: { padding: '4px 10px 10px', overflowY: 'auto', flex: 1 }, children: [_jsx("div", { style: { fontWeight: 700, fontSize: 12, color: '#334155', marginBottom: 8 }, children: "Backlog" }), backlogGoals.map((goal) => (_jsxs("div", { draggable: !readOnly, onDragStart: (e) => onBacklogItemDragStart(e, goal.id), onDoubleClick: () => onEditRequest?.(goal), title: "Drag onto a canvas card to set its parent", style: {
+                                    padding: 8,
+                                    marginBottom: 6,
+                                    background: '#ffffff',
+                                    border: '1px solid #cbd5e1',
+                                    borderRadius: 6,
+                                    fontSize: 11,
+                                    cursor: readOnly ? 'default' : 'grab',
+                                }, children: [_jsx("div", { style: { fontWeight: 600 }, children: goal.name }), _jsxs("div", { style: { color: '#64748b' }, children: ["Level: ", goal.level] })] }, goal.id)))] }))] })), _jsx("div", { style: { flex: 1, position: 'relative' }, onDragOver: onCanvasDragOver, onDrop: onCanvasDrop, children: _jsxs(ReactFlow, { nodes: nodes, edges: edges, onNodesChange: readOnly ? undefined : onNodesChange, onEdgesChange: readOnly ? undefined : onEdgesChange, nodeTypes: nodeTypes, nodesDraggable: !readOnly, nodesConnectable: false, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onNodeDoubleClick: onNodeDoubleClick, connectionLineType: ConnectionLineType.Bezier, fitView: true, children: [_jsx(Background, {}), _jsx(Controls, {}), showMiniMap && _jsx(MiniMap, { pannable: true, zoomable: true })] }) })] }));
 }
 export function GoalTreeView(props) {
     return _jsx(GoalTreeViewInner, { ...props });

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

@@ -281,6 +281,47 @@ describe('GoalTreeView', () => {
             expect(computeDragOutcome(deeper, 3, { kind: 'node', id: 4 })).toBeNull();
         });
     });
+    it('fires onFactorClick with the clicked factor when a popover item is clicked', async () => {
+        const onFactorClick = vi.fn();
+        render(_jsx(GoalTreeView, { tree: makeTree(), onFactorClick: onFactorClick }));
+        await waitFor(() => {
+            expect(screen.getByText('Cut churn')).toBeTruthy();
+        });
+        // Open the negative-factor panel on "Cut churn" (id=3, has risk factor "Support backlog")
+        const negativeBadge = screen.getByLabelText('1 negative factor');
+        negativeBadge.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+        // The popover item for the risk factor should now be in the DOM
+        const factorItem = await waitFor(() => screen.getByText('Support backlog'));
+        factorItem.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+        await waitFor(() => expect(onFactorClick).toHaveBeenCalledTimes(1));
+        expect(onFactorClick.mock.calls[0][0]).toMatchObject({ id: 10, name: 'Support backlog', impact_type: 'risk' });
+    });
+    it('backlog panel is collapsible — toggle hides and restores content', 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 },
+            ],
+        };
+        render(_jsx(GoalTreeView, { tree: tree, showBacklog: true }));
+        await waitFor(() => {
+            expect(screen.getByText('Backlog')).toBeTruthy();
+        });
+        // Collapse
+        screen.getByLabelText('Collapse backlog').dispatchEvent(new MouseEvent('click', { bubbles: true }));
+        await waitFor(() => {
+            expect(screen.queryByText('Backlog')).toBeNull();
+        });
+        // Expand again
+        screen.getByLabelText('Expand backlog').dispatchEvent(new MouseEvent('click', { bubbles: true }));
+        await waitFor(() => {
+            expect(screen.getByText('Backlog')).toBeTruthy();
+        });
+    });
     it('fires onEditRequest on double-click', async () => {
         const onEditRequest = vi.fn();
         render(_jsx(GoalTreeView, { tree: makeTree(), onEditRequest: onEditRequest }));

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

@@ -93,3 +93,42 @@ describe('restoreFromBacklog', () => {
         expect(r.result.goals.find(g => g.id === 3).parent_id).toBe(1);
     });
 });
+describe('reparent — descendant type relabeling and level cap', () => {
+    const DEEP = {
+        goal_types: [
+            { name: 'Strategy', level: 0 },
+            { name: 'Business Goal', level: 1 },
+            { name: 'Project', level: 2 },
+            { name: 'Task', level: 3 },
+        ],
+        goals: [
+            { id: 1, name: 'Root', type: 'Strategy', level: 0, parent_id: 0 },
+            { id: 2, name: 'BG1', type: 'Business Goal', level: 1, parent_id: 1 },
+            { id: 3, name: 'Proj1', type: 'Project', level: 2, parent_id: 2 },
+            { id: 4, name: 'Task1', type: 'Task', level: 3, parent_id: 3 },
+        ],
+    };
+    it('relabels descendant types via getTypeForLevel when reparenting shifts levels', () => {
+        // Move Proj1 (id=3, level=2) directly under Root (id=1, level=0); delta = -1
+        // Task1 (child of Proj1, level=3): new level = 2, type should be 'Project'
+        const r = reparent(DEEP, 3, 1);
+        expect(r.ok).toBe(true);
+        const proj = r.result.goals.find(g => g.id === 3);
+        const task = r.result.goals.find(g => g.id === 4);
+        expect(proj.level).toBe(1);
+        expect(proj.type).toBe('Business Goal');
+        expect(task.level).toBe(2);
+        expect(task.type).toBe('Project');
+    });
+    it('caps descendant level at maxLevel and refuses when that violates GOALS-012', () => {
+        // Move Root (id=1, level=0) under Root2 (id=5, level=0); delta = +1
+        // BG1: 1→2, Proj1: 2→3 (maxLevel), Task1: 3→4, capped at 3
+        // Task1 (capped level=3) under Proj1 (level=3) violates GOALS-012 → refused
+        const tree = {
+            ...DEEP,
+            goals: [...DEEP.goals, { id: 5, name: 'Root2', type: 'Strategy', level: 0, parent_id: 0 }],
+        };
+        const r = reparent(tree, 1, 5);
+        expect(r.ok).toBe(false);
+    });
+});

package/dist/goals/__tests__/parse-canonical.test.js

@@ -107,8 +107,10 @@ describe('parseCanonicalGoals', () => {
     it('maps canonical IDs to internal numeric ids; parent_id is the parent\'s mapped id', () => {
         const r = parseCanonicalGoals(VALID);
         expect(r.parsed?.goals[0].id).toBe(1);
+        expect(r.parsed?.goals[0].canonical_id).toBe('GOAL-1');
         expect(r.parsed?.goals[0].parent_id).toBe(0);
         expect(r.parsed?.goals[1].id).toBe(2);
+        expect(r.parsed?.goals[1].canonical_id).toBe('GOAL-2');
         expect(r.parsed?.goals[1].parent_id).toBe(1);
     });
 });

package/dist/goals/layout.js

@@ -1,3 +1,4 @@
+import { displayGoalId } from './parse-canonical.js';
 const DEFAULT_NODE_WIDTH = 250;
 const DEFAULT_NODE_HEIGHT = 80;
 const DEFAULT_RANK_SEP = 80;
@@ -21,7 +22,7 @@ export function selectScopedGoals(goals, scope) {
             children.set(g.parent_id, []);
         children.get(g.parent_id).push(g.id);
     }
-    const root = goals.find(g => String(g.id) === scope.rootGoalId);
+    const root = goals.find(g => displayGoalId(g) === scope.rootGoalId);
     if (!root)
         return [];
     const keep = new Set();

package/dist/goals/mutations.js

@@ -16,12 +16,12 @@ function getTypeForLevel(tree, level) {
     const gt = tree.goal_types.find(t => t.level === level);
     return gt?.name ?? '';
 }
-function updateDescendantLevels(goals, id, levelDelta) {
-    for (const g of goals) {
+function updateDescendantLevels(clone, id, levelDelta, maxLevel) {
+    for (const g of clone.goals) {
         if (g.parent_id === id) {
-            g.level += levelDelta;
-            g.type = '';
-            updateDescendantLevels(goals, g.id, levelDelta);
+            g.level = Math.min(g.level + levelDelta, maxLevel);
+            g.type = getTypeForLevel(clone, g.level);
+            updateDescendantLevels(clone, g.id, levelDelta, maxLevel);
         }
     }
 }
@@ -67,7 +67,7 @@ export function reparent(tree, sourceId, targetId) {
     source.level = newLevel;
     source.type = getTypeForLevel(clone, newLevel);
     if (levelDelta !== 0)
-        updateDescendantLevels(clone.goals, sourceId, levelDelta);
+        updateDescendantLevels(clone, sourceId, levelDelta, maxLevel);
     const v = validateGoalTree(clone);
     if (!v.valid)
         return refusalError(v.errors[0]?.message ?? 'Validation failed after reparent');

package/dist/goals/parse-canonical.d.ts

@@ -26,4 +26,9 @@ export interface CanonicalGoalsResult extends ValidationResult {
     /** On success, the internal-form GoalTree derived from the canonical input. */
     parsed?: GoalTree;
 }
+/** Display id for previews — canonical `GOAL-…` when present, else internal numeric id. */
+export declare function displayGoalId(goal: {
+    id: number;
+    canonical_id?: string;
+}): string;
 export declare function parseCanonicalGoals(input: unknown): CanonicalGoalsResult;

package/dist/goals/parse-canonical.js

@@ -22,6 +22,10 @@
  */
 const GOAL_ID_RE = /^GOAL(-[A-Z0-9][A-Z0-9_]*)*-\d+$/;
 const GOALS_DOC_ID_RE = /^GOALS(-[A-Z0-9][A-Z0-9_]*)*-\d+$/;
+/** Display id for previews — canonical `GOAL-…` when present, else internal numeric id. */
+export function displayGoalId(goal) {
+    return goal.canonical_id ?? String(goal.id);
+}
 function isNonEmptyString(v) {
     return typeof v === 'string' && v.trim().length > 0;
 }
@@ -240,6 +244,7 @@ export function parseCanonicalGoals(input) {
         const parentId = isNonEmptyString(parent) && idToInternal.has(parent) ? idToInternal.get(parent) : 0;
         return {
             id: idToInternal.get(o['id']),
+            canonical_id: o['id'],
             name: o['name'],
             type: o['type'],
             level: o['level'],

package/dist/goals/types.d.ts

@@ -8,6 +8,8 @@ export interface Factor {
 }
 export interface Goal {
     id: number;
+    /** Canonical typed id from the YAML (`GOAL-…`) when parsed from canonical form. */
+    canonical_id?: string;
     name: string;
     type: string;
     level: number;

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

@@ -0,0 +1,50 @@
+/**
+ * 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.
+ */
+export type NodeSizePreset = 'compact' | 'normal' | 'wide';
+export declare const NODE_SIZE_PRESET_VALUES: readonly NodeSizePreset[];
+export interface BoxDimensions {
+    width: number;
+    height: number;
+}
+export interface BlocksLeafDimensions extends BoxDimensions {
+}
+export interface ProcessBlueprintDimensions {
+    legendColumnWidth: number;
+    stageColumnWidth: number;
+    stageHeaderHeight: number;
+    goalRowHeight: number;
+    resultRowHeight: number;
+    aspectRowMinHeight: number;
+    pillHeight: number;
+    pillGap: number;
+    cellPadding: number;
+    textLineHeight: number;
+    textCharWidth: number;
+    cellTextPadX: number;
+    cellTextPadY: number;
+}
+export interface CapabilityMapDimensions {
+    nodeWidth: number;
+    nodeHeight: number;
+}
+type PresetTable<T> = Record<NodeSizePreset, T>;
+export declare const GOALS_NODE_SIZE: PresetTable<BoxDimensions>;
+export declare const DGCA_NODE_SIZE: PresetTable<BoxDimensions>;
+export declare const BLOCKS_LEAF_SIZE: PresetTable<BlocksLeafDimensions>;
+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 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;
+export declare function resolveGoalsNodeSize(preset: NodeSizePreset): BoxDimensions;
+export declare function resolveDgcaNodeSize(preset: NodeSizePreset): BoxDimensions;
+export declare function resolveBlocksLeafSize(preset: NodeSizePreset): BlocksLeafDimensions;
+export declare function resolveActionNodeSize(preset: NodeSizePreset): BoxDimensions;
+export declare function resolveProcessBlueprintSize(preset: NodeSizePreset): ProcessBlueprintDimensions;
+export declare function resolveCapabilityMapNodeSize(preset: NodeSizePreset): CapabilityMapDimensions;
+export {};

package/dist/node-size-presets.js

@@ -0,0 +1,103 @@
+/**
+ * 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.
+ */
+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 },
+};
+export const DGCA_NODE_SIZE = {
+    compact: { width: 200, height: 72 },
+    normal: { width: 220, height: 72 },
+    wide: { width: 280, height: 72 },
+};
+export const BLOCKS_LEAF_SIZE = {
+    compact: { width: 140, height: 72 },
+    normal: { width: 160, height: 72 },
+    wide: { width: 200, height: 72 },
+};
+export const ACTION_NODE_SIZE = {
+    compact: { width: 180, height: 72 },
+    normal: { width: 200, height: 80 },
+    wide: { width: 260, height: 80 },
+};
+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,
+    },
+};
+export const CAPABILITY_MAP_NODE_SIZE = {
+    compact: { nodeWidth: 200, nodeHeight: 56 },
+    normal: { nodeWidth: 240, nodeHeight: 60 },
+    wide: { nodeWidth: 300, nodeHeight: 64 },
+};
+/** Parse a VS Code setting value into a preset id (defaults to `normal`). */
+export function parseNodeSizePreset(value) {
+    if (value === 'compact' || value === 'wide')
+        return value;
+    return 'normal';
+}
+export function resolveGoalsNodeSize(preset) {
+    return GOALS_NODE_SIZE[preset];
+}
+export function resolveDgcaNodeSize(preset) {
+    return DGCA_NODE_SIZE[preset];
+}
+export function resolveBlocksLeafSize(preset) {
+    return BLOCKS_LEAF_SIZE[preset];
+}
+export function resolveActionNodeSize(preset) {
+    return ACTION_NODE_SIZE[preset];
+}
+export function resolveProcessBlueprintSize(preset) {
+    return PROCESS_BLUEPRINT_SIZE[preset];
+}
+export function resolveCapabilityMapNodeSize(preset) {
+    return CAPABILITY_MAP_NODE_SIZE[preset];
+}

package/dist/process-blueprint/layout.js

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

package/dist/repo-validate/types.js

@@ -4,9 +4,8 @@
 // referential integrity, atomicity, ID uniqueness, policy — the checks that the
 // methodology's Python `.validators/lint.py` owns today. This converges those
 // checks onto the shared TypeScript model so there is a single validation
-// runtime (methodology ADR
-// `2026-06-11-validation-two-axis-model.md`; Studio referencing ADR
-// `docs/decisions/2026-06-11-validation-runtime-convergence.md`).
+// runtime (methodology ADR "Validation Two-Axis Model"; Studio decision
+// "Validation Runtime Convergence").
 //
 // The finding shape is deliberately minimal — `{ scope, id, message }`. The
 // richer `target` / `category` reporting taxonomy is explicitly DEFERRED per the