@transitrix/diagrams 1.1.0 → 1.3.0

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

@@ -0,0 +1,108 @@
+import { layoutCapabilityTree, TREE_NODE_WIDTH, TREE_NODE_HEIGHT, TREE_NODE_SEP } from './layout-tree.js';
+import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
+import { escXml } from '../webview/render-util.js';
+const PAD = 24;
+const BTN_R = 8;
+const LEGEND_H = 40;
+const LABEL_MAX_CHARS = 28;
+const LABEL_TRIM_CHARS = 26;
+const BAND_LABELS = ['Levels 0–2', 'Levels 3–4', 'Levels 5+'];
+function depthBand(depth) {
+    if (depth <= 2)
+        return 0;
+    if (depth <= 4)
+        return 1;
+    return 2;
+}
+function truncate(s, max, trim) {
+    return s.length > max ? s.slice(0, trim) + '…' : s;
+}
+/**
+ * Renders a capability-map as a left-to-right SVG node tree with DSM-matching
+ * visual design: depth-banded fills, maturity badges, and +/− collapse buttons.
+ *
+ * The SVG uses CSS classes (`tree-level-N`, `tree-maturity-N`, `tree-collapse-btn`)
+ * that must be resolved by the host's stylesheet (injected via `diagramClassCss()`
+ * in themes.ts). Collapse buttons carry `data-node-id` / `data-collapsed` attributes
+ * for the webview click handler.
+ */
+export function renderCapabilityTreeSvg(map, opts = {}) {
+    const { collapsedIds = new Set(), curvature = DEFAULT_EDGE_CURVATURE } = opts;
+    const layout = layoutCapabilityTree(map, collapsedIds);
+    if (layout.nodes.length === 0) {
+        return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
+    }
+    const ox = -layout.bounds.x + PAD;
+    const oy = -layout.bounds.y + PAD;
+    const svgW = layout.bounds.width + PAD * 2 + BTN_R;
+    const svgH = layout.bounds.height + PAD * 2 + LEGEND_H + TREE_NODE_SEP;
+    const nodeMap = new Map(layout.nodes.map(n => [n.id, n]));
+    const edgeSvg = layout.edges.map(e => {
+        const s = nodeMap.get(e.source);
+        const t = nodeMap.get(e.target);
+        if (!s || !t)
+            return '';
+        const sx = s.x + ox + s.width;
+        const sy = s.y + oy + s.height / 2;
+        const tx = t.x + ox;
+        const ty = t.y + oy + t.height / 2;
+        return `<path d="${horizontalCubicEdgePath(sx, sy, tx, ty, curvature)}" class="diagram-edge"/>`;
+    }).filter(Boolean).join('\n');
+    const nodeSvg = layout.nodes.map(n => {
+        const x = n.x + ox;
+        const y = n.y + oy;
+        const band = depthBand(n.depth);
+        const mat = Math.max(1, Math.min(5, n.data.current_maturity | 0));
+        const nameText = truncate(n.data.name, LABEL_MAX_CHARS, LABEL_TRIM_CHARS);
+        const nameTitle = n.data.name.length > LABEL_MAX_CHARS ? escXml(n.data.name) : '';
+        // Maturity badge: left side of node
+        const badgeW = 28;
+        const badgeH = 18;
+        const badgeX = x + 10;
+        const badgeY = y + (TREE_NODE_HEIGHT - badgeH) / 2;
+        // Text area: right of badge
+        const textX = badgeX + badgeW + 8;
+        const nameY = y + TREE_NODE_HEIGHT / 2 - 8;
+        const idY = y + TREE_NODE_HEIGHT / 2 + 9;
+        // Collapse button: centered on right edge of node
+        const btnCx = x + TREE_NODE_WIDTH;
+        const btnCy = y + TREE_NODE_HEIGHT / 2;
+        const collapseBtn = n.hasChildren
+            ? `<circle class="tree-collapse-btn" cx="${btnCx}" cy="${btnCy}" r="${BTN_R}" data-node-id="${escXml(n.id)}" data-collapsed="${n.isCollapsed}"/>
+  <text class="tree-collapse-lbl" x="${btnCx}" y="${btnCy}" text-anchor="middle">${n.isCollapsed ? '+' : '−'}</text>`
+            : '';
+        return `<g${nameTitle ? ` title="${nameTitle}"` : ''}>
+  <rect class="tree-level-${band}" x="${x}" y="${y}" width="${TREE_NODE_WIDTH}" height="${TREE_NODE_HEIGHT}" rx="11" stroke="var(--ts-node-stroke,#94a3b8)" stroke-width="3"/>
+  <rect class="tree-maturity-${mat}" x="${badgeX}" y="${badgeY}" width="${badgeW}" height="${badgeH}" rx="4"/>
+  <text class="text-pill" x="${badgeX + badgeW / 2}" y="${badgeY + badgeH / 2}" text-anchor="middle" fill="white">L${mat}</text>
+  <text class="text-primary" x="${textX}" y="${nameY}" dominant-baseline="central">${escXml(nameText)}</text>
+  <text class="text-id" x="${textX}" y="${idY}" dominant-baseline="central">${escXml(n.id)}</text>
+  ${collapseBtn}
+</g>`;
+    }).join('\n');
+    // Legend band: proportional coloured blocks per level-count band
+    const legendY = layout.bounds.height + PAD * 2 + TREE_NODE_SEP / 2;
+    const legendW = svgW - PAD * 2;
+    const totalNodes = layout.nodes.length || 1;
+    const bandCounts = [layout.levelCounts.band0, layout.levelCounts.band1, layout.levelCounts.band2];
+    let legendX = PAD;
+    const legendSvg = bandCounts.map((count, i) => {
+        const bw = Math.max(1, Math.round(legendW * count / totalNodes));
+        const bx = legendX;
+        legendX += bw;
+        if (count === 0)
+            return '';
+        return `<rect class="tree-level-${i}" x="${bx}" y="${legendY}" width="${bw}" height="24" rx="4" stroke="var(--ts-node-stroke,#94a3b8)" stroke-width="1"/>
+  <text class="text-id" x="${bx + bw / 2}" y="${legendY + 12}" text-anchor="middle" dominant-baseline="central">${escXml(BAND_LABELS[i])}</text>`;
+    }).filter(Boolean).join('\n');
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${svgW}" height="${svgH}" viewBox="0 0 ${svgW} ${svgH}">
+<defs>
+  <marker id="cap-tree-arrow" markerWidth="8" markerHeight="8" refX="8" refY="3" orient="auto">
+    <path d="M0,0 L0,6 L8,3 z" class="arrow-fill"/>
+  </marker>
+</defs>
+${edgeSvg}
+${nodeSvg}
+${legendSvg}
+</svg>`;
+}

package/dist/capability-map/types.d.ts

@@ -22,5 +22,7 @@ export interface CapabilityMapHeader {
 export interface CapabilityMapFile {
     notation: string;
     spec_version?: string;
+    /** Render mode for Studio previews. Defaults to 'cards'. */
+    view?: 'cards' | 'tree';
     capability_map: CapabilityMapHeader;
 }

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

@@ -143,9 +143,22 @@ describe('parseCanonicalFGCA — edge-driving fields populated', () => {
         expect(parsed.goals[0].factor).toHaveLength(1);
         // goal → change edge
         expect(parsed.changes[0].goal_id).not.toBe(0);
+        expect(parsed.changes[0].goal_id).not.toBe('');
         // change → activity edge
         expect(parsed.changes[0].activity_ids).toHaveLength(1);
     });
+    it('preserves canonical string IDs — not converted to sequential numbers', () => {
+        const r = parseCanonicalFGCA(VALID);
+        expect(r.valid).toBe(true);
+        const parsed = r.parsed;
+        expect(parsed.factors[0].id).toBe('FACTOR-1');
+        expect(parsed.goals[0].id).toBe('GOAL-1');
+        expect(parsed.goals[0].factor[0].id).toBe('FACTOR-1');
+        expect(parsed.changes[0].id).toBe('CHANGE-1');
+        expect(parsed.changes[0].goal_id).toBe('GOAL-1');
+        expect(parsed.changes[0].activity_ids[0]).toBe('ACTIVITY-1');
+        expect(parsed.activities[0].id).toBe('ACTIVITY-1');
+    });
 });
 describe('parseCanonicalFGA', () => {
     const VALID_FGA = {
@@ -218,7 +231,7 @@ describe('parseCanonicalFGA — example file regression', () => {
             expect(r.errors).toEqual([]);
             expect(r.valid).toBe(true);
             // Every activity must carry a goal_id, or the FGA preview draws no edges.
-            expect(r.parsed.activities.every((a) => a.goal_id != null && a.goal_id !== 0)).toBe(true);
+            expect(r.parsed.activities.every((a) => a.goal_id != null && a.goal_id !== 0 && a.goal_id !== '')).toBe(true);
         });
     }
 });

package/dist/fgca/__tests__/validate.test.js

@@ -47,11 +47,11 @@ describe('validateFGCADoc', () => {
         expect(result.valid).toBe(false);
         expect(result.errors.some(e => e.path === 'changes')).toBe(true);
     });
-    it('errors when activities array is missing', () => {
+    it('errors when actions array is missing', () => {
         const { activities: _, ...without } = VALID_DOC;
         const result = validateFGCADoc({ ...without, notation: 'fgca' });
         expect(result.valid).toBe(false);
-        expect(result.errors.some(e => e.path === 'activities')).toBe(true);
+        expect(result.errors.some(e => e.path === 'actions')).toBe(true);
     });
     it('errors on empty factor name', () => {
         const result = validateFGCADoc({ ...VALID_DOC, factors: [{ id: 1, name: '' }] });

package/dist/fgca/parse-canonical.js

@@ -91,7 +91,11 @@ export function parseCanonicalFGCA(input) {
     const factorsRaw = asObjectArray(raw['factors']);
     const goalsRaw = asObjectArray(raw['goals']);
     const changesRaw = asObjectArray(raw['changes']);
-    const activitiesRaw = asObjectArray(raw['activities']);
+    // Accept canonical `actions:` or deprecated `activities:`; warn on the latter.
+    const activitiesRaw = asObjectArray(raw['actions']) ?? asObjectArray(raw['activities']);
+    if ('activities' in raw && !('actions' in raw)) {
+        warnings.push({ code: 'FGCA-001', message: '"activities" key is deprecated — rename to "actions"' });
+    }
     if (factorsRaw === null)
         errors.push({ code: 'FGCA-004', message: 'factors must be an array', path: 'factors' });
     if (goalsRaw === null)
@@ -99,7 +103,7 @@ export function parseCanonicalFGCA(input) {
     if (changesRaw === null)
         errors.push({ code: 'FGCA-004', message: 'changes must be an array', path: 'changes' });
     if (activitiesRaw === null)
-        errors.push({ code: 'FGCA-004', message: 'activities must be an array', path: 'activities' });
+        errors.push({ code: 'FGCA-004', message: 'actions must be an array', path: 'actions' });
     if (errors.length > 0)
         return { valid: false, errors, warnings };
     // From here we know all four arrays exist.
@@ -175,29 +179,19 @@ export function parseCanonicalFGCA(input) {
         }
         return out;
     }
-    // Build internal id-maps (canonical string ID → internal sequential number).
-    const idMap = { toInternal: new Map() };
-    const allCanonicalIds = [...factorIds, ...goalIds, ...changeIds, ...activityIds];
-    allCanonicalIds.forEach((id, i) => idMap.toInternal.set(id, i + 1));
-    function intId(canonical) {
-        const n = idMap.toInternal.get(canonical);
-        if (n === undefined) {
-            // Shouldn't happen — we built the map from the same sets.
-            throw new Error(`internal: canonical id "${canonical}" not mapped`);
-        }
-        return n;
-    }
-    // Layer entries (internal form).
+    // Layer entries (internal form). Canonical string IDs are passed through
+    // directly — no conversion to sequential numbers. The layout and renderer
+    // treat IDs as opaque keys and also display them verbatim to the user.
     const internalFactors = factors.map((el) => ({
-        id: intId(String(el['id'])),
+        id: String(el['id']),
         name: String(el['name'] ?? ''),
     }));
     const internalGoals = goals.map((el, i) => {
         const refIds = checkRefArray(el, 'factors', factorIds, FACTOR_OR_DRIVER_ID_RE, 'FGCA-008', `goals[${i}]`);
         return {
-            id: intId(String(el['id'])),
+            id: String(el['id']),
             name: String(el['name'] ?? ''),
-            factor: refIds.map((r) => ({ id: intId(r) })),
+            factor: refIds.map((r) => ({ id: r })),
         };
     });
     // Build a reverse mapping: which changes does each activity reference (via
@@ -230,18 +224,20 @@ export function parseCanonicalFGCA(input) {
         const canonicalChangeId = String(el['id']);
         const linkedActivityIds = activitiesForChange.get(canonicalChangeId) ?? [];
         return {
-            id: intId(canonicalChangeId),
+            id: canonicalChangeId,
             name: String(el['name'] ?? ''),
-            goal_id: goalRefs.length > 0 ? intId(goalRefs[0]) : 0,
-            activity_ids: linkedActivityIds.map((aid) => intId(aid)),
+            goal_id: goalRefs.length > 0 ? goalRefs[0] : '',
+            activity_ids: linkedActivityIds,
         };
     });
     const internalActivities = activities.map((el, i) => {
-        const goalRefs = checkRefArray(el, 'goals', goalIds, GOAL_ID_RE, 'FGCA-011', `activities[${i}]`);
+        const goalRefs = checkRefArray(el, 'goals', goalIds, GOAL_ID_RE, 'FGCA-011', `actions[${i}]`);
+        const typeVal = typeof el['type'] === 'string' ? el['type'] : undefined;
         return {
-            id: intId(String(el['id'])),
+            id: String(el['id']),
             name: String(el['name'] ?? ''),
-            goal_id: goalRefs.length > 0 ? intId(goalRefs[0]) : null,
+            goal_id: goalRefs.length > 0 ? goalRefs[0] : null,
+            ...(typeVal !== undefined ? { type: typeVal } : {}),
         };
     });
     // FACTOR.references_constraint grammar check (FGCA-015).

package/dist/fgca/preview-layout.js

@@ -61,18 +61,67 @@ export function layoutFGCAPreview(inputDoc, options = {}) {
         change: changes.map(c => ({ id: `change_${c.id}`, label: c.name })),
         activity: doc.activities.map(a => ({ id: `activity_${a.id}`, label: a.name })),
     };
+    // Build predecessor map: for each node, which node IDs in the previous column
+    // connect to it from the left. Used for barycenter crossing minimization.
+    const predecessors = new Map();
+    for (const g of doc.goals) {
+        predecessors.set(`goal_${g.id}`, (g.factor ?? []).map(f => `driver_${f.id}`));
+    }
+    if (!hideChanges) {
+        for (const c of changes) {
+            predecessors.set(`change_${c.id}`, [`goal_${c.goal_id}`]);
+        }
+        const coveredActs = new Set(changes.flatMap(c => c.activity_ids.map(String)));
+        for (const a of doc.activities) {
+            const preds = changes
+                .filter(c => c.activity_ids.map(String).includes(String(a.id)))
+                .map(c => `change_${c.id}`);
+            if (a.goal_id != null && !coveredActs.has(String(a.id)))
+                preds.push(`goal_${a.goal_id}`);
+            predecessors.set(`activity_${a.id}`, preds);
+        }
+    }
+    else {
+        const connectedViaChange = new Set();
+        for (const c of changes) {
+            for (const aid of c.activity_ids) {
+                predecessors.set(`activity_${aid}`, [`goal_${c.goal_id}`]);
+                connectedViaChange.add(String(aid));
+            }
+        }
+        for (const a of doc.activities) {
+            if (a.goal_id != null && !connectedViaChange.has(String(a.id))) {
+                predecessors.set(`activity_${a.id}`, [`goal_${a.goal_id}`]);
+            }
+        }
+    }
+    // Sort a column's items by the barycenter of their predecessors' y-centres.
+    // Nodes with no predecessors sort last (Infinity barycenter) so they don't
+    // displace connected nodes.
+    function barycentricSort(items, yCenters) {
+        return [...items].sort((a, b) => {
+            const pA = (predecessors.get(a.id) ?? []).map(p => yCenters.get(p) ?? 0).filter(v => v > 0);
+            const pB = (predecessors.get(b.id) ?? []).map(p => yCenters.get(p) ?? 0).filter(v => v > 0);
+            const bcA = pA.length > 0 ? pA.reduce((s, v) => s + v, 0) / pA.length : Infinity;
+            const bcB = pB.length > 0 ? pB.reduce((s, v) => s + v, 0) / pB.length : Infinity;
+            return bcA - bcB;
+        });
+    }
     const nodeMap = new Map();
     const nodes = [];
     const columns = [];
+    const yCenters = new Map(); // nodeId → y + FGCA_NODE_H / 2
     for (let ci = 0; ci < cols.length; ci++) {
         const col = cols[ci];
         const x = FGCA_PAD + ci * colStride;
         columns.push({ col, x });
+        const items = ci === 0 ? colItems[col] : barycentricSort(colItems[col], yCenters);
         let y = FGCA_PAD + FGCA_HEADER_H + rowGap;
-        for (const item of colItems[col]) {
+        for (const item of items) {
             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;
         }
     }

package/dist/fgca/types.d.ts

@@ -22,6 +22,8 @@ export interface ActivityItem {
     name: string;
     goal_id?: number | string | null;
     activity_type_id?: number;
+    /** Canonical values: initiative | programme | project | work_package. Unknown values pass through without error. */
+    type?: string;
 }
 export interface ActivityTypeItem {
     id: number | string;

package/dist/fgca/validate.js

@@ -22,10 +22,18 @@ export function validateFGCADoc(input) {
         errors.push({ code: 'SCHEMA_INVALID', message: 'goals must be an array', path: 'goals' });
     if (!Array.isArray(raw.changes))
         errors.push({ code: 'SCHEMA_INVALID', message: 'changes must be an array', path: 'changes' });
-    if (!Array.isArray(raw.activities))
-        errors.push({ code: 'SCHEMA_INVALID', message: 'activities must be an array', path: 'activities' });
+    // Accept canonical `actions:` or deprecated `activities:`; warn on the latter.
+    const hasActions = Array.isArray(raw.actions);
+    const hasActivities = Array.isArray(raw.activities);
+    if (!hasActions && !hasActivities) {
+        errors.push({ code: 'SCHEMA_INVALID', message: 'actions must be an array', path: 'actions' });
+    }
+    else if ('activities' in raw) {
+        warnings.push({ code: 'DEPRECATED_NOTATION', message: '"activities" key is deprecated — rename to "actions"' });
+    }
     if (errors.length > 0)
         return { valid: false, errors, warnings };
+    const actionsArr = (hasActions ? raw.actions : raw.activities);
     const doc = raw;
     const collectIds = (arr) => {
         const out = new Set();
@@ -40,7 +48,7 @@ export function validateFGCADoc(input) {
     };
     const factorIds = collectIds(doc.factors);
     const goalIds = collectIds(doc.goals);
-    const activityIds = collectIds(doc.activities);
+    const activityIds = collectIds(actionsArr);
     for (let i = 0; i < doc.factors.length; i++) {
         const f = doc.factors[i];
         if (!f || typeof f !== 'object') {
@@ -95,17 +103,17 @@ export function validateFGCADoc(input) {
             }
         }
     }
-    for (let i = 0; i < doc.activities.length; i++) {
-        const a = doc.activities[i];
+    for (let i = 0; i < actionsArr.length; i++) {
+        const a = actionsArr[i];
         if (!a || typeof a !== 'object') {
-            errors.push({ code: 'SCHEMA_INVALID', message: 'activity entry must be an object', path: `activities[${i}]` });
+            errors.push({ code: 'SCHEMA_INVALID', message: 'action entry must be an object', path: `actions[${i}]` });
             continue;
         }
-        const activity = a;
-        if (typeof activity.id !== 'number' && typeof activity.id !== 'string')
-            errors.push({ code: 'SCHEMA_INVALID', message: 'activity id must be a number or string', path: `activities[${i}]` });
-        if (typeof activity.name !== 'string' || !activity.name.trim())
-            errors.push({ code: 'EMPTY_NAME', message: `Activity ${String(activity.id)} has empty name`, path: `activities[${i}]` });
+        const action = a;
+        if (typeof action.id !== 'number' && typeof action.id !== 'string')
+            errors.push({ code: 'SCHEMA_INVALID', message: 'action id must be a number or string', path: `actions[${i}]` });
+        if (typeof action.name !== 'string' || !action.name.trim())
+            errors.push({ code: 'EMPTY_NAME', message: `Action ${String(action.id)} has empty name`, path: `actions[${i}]` });
     }
     return { valid: errors.length === 0, errors, warnings };
 }

package/dist/theme/index.d.ts

@@ -1,4 +1,4 @@
 export type { AdaptiveTokens } from './tokens.js';
-export { BRAND, FUNCTIONAL, LAYER_COLORS, LEVEL_COLORS, MATURITY_COLORS, STRUCTURAL, TYPOGRAPHY, CSS_VAR, getBaseResetCss } from './tokens.js';
+export { BRAND, FUNCTIONAL, LAYER_COLORS, LEVEL_COLORS, MATURITY_COLORS, TREE_LEVEL_COLORS, TREE_MATURITY_COLORS, STRUCTURAL, TYPOGRAPHY, CSS_VAR, getBaseResetCss } from './tokens.js';
 export type { ThemeId } from './themes.js';
 export { generateWebviewCss, generateSvgEmbedCss } from './themes.js';

package/dist/theme/index.js

@@ -1,2 +1,2 @@
-export { BRAND, FUNCTIONAL, LAYER_COLORS, LEVEL_COLORS, MATURITY_COLORS, STRUCTURAL, TYPOGRAPHY, CSS_VAR, getBaseResetCss } from './tokens.js';
+export { BRAND, FUNCTIONAL, LAYER_COLORS, LEVEL_COLORS, MATURITY_COLORS, TREE_LEVEL_COLORS, TREE_MATURITY_COLORS, STRUCTURAL, TYPOGRAPHY, CSS_VAR, getBaseResetCss } from './tokens.js';
 export { generateWebviewCss, generateSvgEmbedCss } from './themes.js';

package/dist/theme/themes.js

@@ -1,4 +1,4 @@
-import { LAYER_COLORS, LEVEL_COLORS, MATURITY_COLORS, STRUCTURAL, TYPOGRAPHY, CSS_VAR, getBaseResetCss, } from './tokens.js';
+import { LAYER_COLORS, LEVEL_COLORS, MATURITY_COLORS, TREE_LEVEL_COLORS, TREE_MATURITY_COLORS, STRUCTURAL, TYPOGRAPHY, CSS_VAR, getBaseResetCss, } from './tokens.js';
 const TRANSITRIX_LIGHT = {
     bg: '#ffffff',
     bgSurface: '#f8fafc',
@@ -60,7 +60,19 @@ function diagramVars(variant) {
     const sc = STRUCTURAL;
     const lv = LEVEL_COLORS[variant];
     const mat = MATURITY_COLORS[variant];
+    const treeLevel = TREE_LEVEL_COLORS;
+    const treeMat = TREE_MATURITY_COLORS[variant];
     const levelVars = lv.map((c, i) => `--ts-level-${i}:${c}`).join(';') + ';';
+    const treeVars = [
+        `${CSS_VAR.treeLevel0}:${treeLevel.band0[variant]}`,
+        `${CSS_VAR.treeLevel1}:${treeLevel.band1[variant]}`,
+        `${CSS_VAR.treeLevel2}:${treeLevel.band2[variant]}`,
+        `${CSS_VAR.treeMaturity1}:${treeMat[0]}`,
+        `${CSS_VAR.treeMaturity2}:${treeMat[1]}`,
+        `${CSS_VAR.treeMaturity3}:${treeMat[2]}`,
+        `${CSS_VAR.treeMaturity4}:${treeMat[3]}`,
+        `${CSS_VAR.treeMaturity5}:${treeMat[4]}`,
+    ].join(';') + ';';
     return [
         `${CSS_VAR.layerDriver}:${lc.driver[variant]}`,
         `${CSS_VAR.layerFactor}:${lc.factor[variant]}`,
@@ -77,7 +89,7 @@ function diagramVars(variant) {
         `${CSS_VAR.maturity3}:${mat[2]}`,
         `${CSS_VAR.maturity4}:${mat[3]}`,
         `${CSS_VAR.maturity5}:${mat[4]}`,
-    ].join(';') + ';' + levelVars;
+    ].join(';') + ';' + levelVars + treeVars;
 }
 /** CSS for the webview shell (toolbar, canvas). */
 function shellCss() {
@@ -136,7 +148,18 @@ ${levelRules}
 .compliance-deadline{fill:var(${cv.statusErrorBg});stroke:var(${cv.statusErrorFg});}
 .compliance-deadline text{fill:var(${cv.statusErrorFg});}
 .compliance-badge{fill:var(${cv.statusErrorFg});}
-.compliance-badge-text{fill:var(${cv.textInverse});font-family:${t.fontFamily};font-size:8px;font-weight:700;}`;
+.compliance-badge-text{fill:var(${cv.textInverse});font-family:${t.fontFamily};font-size:8px;font-weight:700;}
+.tree-level-0{fill:var(${cv.treeLevel0});}
+.tree-level-1{fill:var(${cv.treeLevel1});}
+.tree-level-2{fill:var(${cv.treeLevel2});}
+.tree-maturity-1{fill:var(${cv.treeMaturity1});}
+.tree-maturity-2{fill:var(${cv.treeMaturity2});}
+.tree-maturity-3{fill:var(${cv.treeMaturity3});}
+.tree-maturity-4{fill:var(${cv.treeMaturity4});}
+.tree-maturity-5{fill:var(${cv.treeMaturity5});}
+.tree-collapse-btn{cursor:pointer;fill:white;stroke:var(${cv.nodeStroke});stroke-width:1.5;}
+.tree-collapse-btn:hover{fill:var(${cv.bgElevated});}
+.tree-collapse-lbl{fill:var(${cv.textSecondary});font-family:${t.fontFamily};font-size:12px;font-weight:700;dominant-baseline:central;pointer-events:none;}`;
 }
 /**
  * Generates a self-contained CSS block for embedding inside a standalone SVG file.

package/dist/theme/tokens.d.ts

@@ -82,6 +82,38 @@ export declare const MATURITY_COLORS: {
     readonly dark: readonly ["#7f1d1d", "#92400e", "#854d0e", "#3f6212", "#14532d"];
     readonly hc: readonly ["#f87171", "#fb923c", "#facc15", "#a3e635", "#4ade80"];
 };
+/**
+ * DSM-matching capability tree node fill colors, grouped by depth band.
+ *   band0: depth 0–2 (pink)
+ *   band1: depth 3–4 (yellow)
+ *   band2: depth 5+  (blue)
+ */
+export declare const TREE_LEVEL_COLORS: {
+    readonly band0: {
+        readonly light: "#fee0e0";
+        readonly dark: "#3d0f0f";
+        readonly hc: "#ff9999";
+    };
+    readonly band1: {
+        readonly light: "#ffffcb";
+        readonly dark: "#3a3500";
+        readonly hc: "#ffff88";
+    };
+    readonly band2: {
+        readonly light: "#c2f0ff";
+        readonly dark: "#003d4d";
+        readonly hc: "#66ccff";
+    };
+};
+/**
+ * DSM-matching maturity badge fills for the capability tree (L1–L5).
+ * Distinct from MATURITY_COLORS which drives the cards / compliance views.
+ */
+export declare const TREE_MATURITY_COLORS: {
+    readonly light: readonly ["#c1c1c1", "#ff3d67", "#ff9a59", "#fdef59", "#83cca3"];
+    readonly dark: readonly ["#555555", "#cc1040", "#d06020", "#c8c000", "#4d9970"];
+    readonly hc: readonly ["#cccccc", "#ff6699", "#ffbb77", "#ffff44", "#88ddaa"];
+};
 /**
  * Typography hierarchy. All previews resolve text styling from these roles
  * — never from inline font-* attributes on individual <text> elements.
@@ -160,5 +192,13 @@ export declare const CSS_VAR: {
     readonly maturity3: "--ts-maturity-3";
     readonly maturity4: "--ts-maturity-4";
     readonly maturity5: "--ts-maturity-5";
+    readonly treeLevel0: "--ts-tree-level-0";
+    readonly treeLevel1: "--ts-tree-level-1";
+    readonly treeLevel2: "--ts-tree-level-2";
+    readonly treeMaturity1: "--ts-tree-maturity-1";
+    readonly treeMaturity2: "--ts-tree-maturity-2";
+    readonly treeMaturity3: "--ts-tree-maturity-3";
+    readonly treeMaturity4: "--ts-tree-maturity-4";
+    readonly treeMaturity5: "--ts-tree-maturity-5";
 };
 export declare function getBaseResetCss(): string;

package/dist/theme/tokens.js

@@ -42,6 +42,26 @@ export const MATURITY_COLORS = {
     dark: ['#7f1d1d', '#92400e', '#854d0e', '#3f6212', '#14532d'],
     hc: ['#f87171', '#fb923c', '#facc15', '#a3e635', '#4ade80'],
 };
+/**
+ * DSM-matching capability tree node fill colors, grouped by depth band.
+ *   band0: depth 0–2 (pink)
+ *   band1: depth 3–4 (yellow)
+ *   band2: depth 5+  (blue)
+ */
+export const TREE_LEVEL_COLORS = {
+    band0: { light: '#fee0e0', dark: '#3d0f0f', hc: '#ff9999' },
+    band1: { light: '#ffffcb', dark: '#3a3500', hc: '#ffff88' },
+    band2: { light: '#c2f0ff', dark: '#003d4d', hc: '#66ccff' },
+};
+/**
+ * DSM-matching maturity badge fills for the capability tree (L1–L5).
+ * Distinct from MATURITY_COLORS which drives the cards / compliance views.
+ */
+export const TREE_MATURITY_COLORS = {
+    light: ['#c1c1c1', '#ff3d67', '#ff9a59', '#fdef59', '#83cca3'],
+    dark: ['#555555', '#cc1040', '#d06020', '#c8c000', '#4d9970'],
+    hc: ['#cccccc', '#ff6699', '#ffbb77', '#ffff44', '#88ddaa'],
+};
 /**
  * Typography hierarchy. All previews resolve text styling from these roles
  * — never from inline font-* attributes on individual <text> elements.
@@ -101,6 +121,14 @@ export const CSS_VAR = {
     maturity3: '--ts-maturity-3',
     maturity4: '--ts-maturity-4',
     maturity5: '--ts-maturity-5',
+    treeLevel0: '--ts-tree-level-0',
+    treeLevel1: '--ts-tree-level-1',
+    treeLevel2: '--ts-tree-level-2',
+    treeMaturity1: '--ts-tree-maturity-1',
+    treeMaturity2: '--ts-tree-maturity-2',
+    treeMaturity3: '--ts-tree-maturity-3',
+    treeMaturity4: '--ts-tree-maturity-4',
+    treeMaturity5: '--ts-tree-maturity-5',
 };
 export function getBaseResetCss() {
     return `*,*:before,*:after{box-sizing:border-box;}html,body{margin:0;padding:0;}`;

package/dist/webview/render-activity-card.js

@@ -12,7 +12,7 @@
  * CROSS-DOCUMENT RESOLUTION CAVEAT
  * The Activity Card is the only MULTI-DOCUMENT Studio notation: the card YAML
  * names a project Activity, and the project's name, dates, motivation chain
- * (Drivers → Assessments → Goals → Changes) and child activities are pulled BY
+ * (Drivers → Goals → Changes) and child activities are pulled BY
  * REFERENCE from the canonical element + relation store (`canon/elements/**`,
  * `canon/relations/**`; see `../activity-card/resolver.ts`). That resolution
  * requires reading those files from disk, which is NOT available inside the
@@ -108,10 +108,9 @@ export function renderActivityCardBody(layout, ox, oy) {
             parts.push(`<text class="text-primary" x="${r.x + ox + 12}" y="${r.y + oy + 44 + i * 18}" style="dominant-baseline:central">${escXml(line)}</text>`);
         });
     }
-    // Chain sections (Drivers → Assessments → Goals → Changes).
+    // Chain sections (Drivers → Goals → Changes).
     const SECTION_LEVEL = {
         drivers: 4,
-        assessments: 5,
         goals: 5,
         changes: 6,
     };

package/dist/webview/render-fgca.js

@@ -20,7 +20,7 @@ const COL_LABELS = {
     driver: 'Drivers (D)',
     goal: 'Goals (G)',
     change: 'Changes (C)',
-    activity: 'Activities (A)',
+    activity: 'Actions (A)',
 };
 /**
  * Canonical FGCA/FGA body — the column headers, node rects and edge paths that
@@ -67,7 +67,7 @@ export function renderFgcaBody(columns, nodes, edges, curvature, entryCurvature)
             `<rect class="diagram-node layer-${n.col}" x="${n.x}" y="${n.y}" width="${NODE_W}" height="${NODE_H}" rx="8"/>`,
             `<text class="text-primary" x="${n.x + NODE_W / 2}" y="${y1}" text-anchor="middle" dominant-baseline="central">${escXml(line1)}</text>`,
             twoLines
-                ? `<text class="text-secondary" x="${n.x + NODE_W / 2}" y="${y2}" text-anchor="middle" dominant-baseline="central">${escXml(line2)}</text>`
+                ? `<text class="text-primary" x="${n.x + NODE_W / 2}" y="${y2}" text-anchor="middle" dominant-baseline="central">${escXml(line2)}</text>`
                 : '',
             `<text class="text-id" x="${n.x + NODE_W / 2}" y="${idY}" text-anchor="middle" dominant-baseline="central">${escXml(entityId)}</text>`,
         ]

package/dist/webview/render-goals.js

@@ -15,12 +15,11 @@ import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js
 import { generateSvgEmbedCss } from '../theme/index.js';
 import { escXml } from './render-util.js';
 const NODE_W = 250;
-const NODE_H = 60;
+const NODE_H = 72;
 const RANK_SEP = 100;
 const NODE_SEP = 24;
 const PAD = 24;
-const LABEL_MAX = 36;
-const LABEL_TRIM = 34;
+const LABEL_CHARS = 30;
 /**
  * Host-neutral goals renderer (IntelliJ/UI). Lays the tree out with the default
  * spacing, then delegates the actual SVG emission to {@link renderGoalsLayoutSvg}
@@ -81,10 +80,34 @@ export function renderGoalsLayoutSvg(layout, options = {}) {
         const y = n.y + oy;
         const level = n.data.level % 8;
         const labelText = n.data.name ?? String(n.id);
-        const label = labelText.length > LABEL_MAX ? labelText.slice(0, LABEL_TRIM) + '…' : labelText;
+        const words = labelText.split(' ');
+        let line1 = '';
+        let line2 = '';
+        for (const w of words) {
+            if ((line1 + ' ' + w).trim().length <= LABEL_CHARS) {
+                line1 = (line1 + ' ' + w).trim();
+            }
+            else if ((line2 + ' ' + w).trim().length <= LABEL_CHARS) {
+                line2 = (line2 + ' ' + w).trim();
+            }
+            else if (!line2) {
+                line2 = w.slice(0, LABEL_CHARS - 2) + '…';
+                break;
+            }
+        }
+        const twoLines = line2.length > 0;
+        const nameY1 = twoLines ? y + 12 : y + 16;
+        const nameY2 = y + 26;
+        const typeY = twoLines ? y + 43 : y + 35;
+        const idY = twoLines ? y + 59 : y + 55;
+        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"/>
-  <text class="text-primary" x="${x + n.width / 2}" y="${y + n.height / 2}" text-anchor="middle" dominant-baseline="central">${escXml(label)}</text>
+  <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>` : ''}
+  <text class="text-id" x="${x + n.width / 2}" y="${idY}" text-anchor="middle" dominant-baseline="central">${escXml(idText)}</text>
 </g>`;
     })
         .join('\n');