@transitrix/diagrams 1.0.1 → 1.2.0

package/dist/fgca/validate.js

@@ -9,27 +9,38 @@ export function validateFGCADoc(input) {
         errors.push({ code: 'MISSING_NOTATION', message: 'notation field is required' });
         return { valid: false, errors, warnings };
     }
-    if (raw.notation !== 'fgca') {
-        errors.push({ code: 'WRONG_NOTATION', message: `notation must be "fgca", got "${String(raw.notation)}"` });
+    if (raw.notation !== 'fgca' && raw.notation !== 'dgca') {
+        errors.push({ code: 'WRONG_NOTATION', message: `notation must be "dgca" (or legacy "fgca"), got "${String(raw.notation)}"` });
         return { valid: false, errors, warnings };
     }
+    if (raw.notation === 'fgca') {
+        warnings.push({ code: 'DEPRECATED_NOTATION', message: 'notation "fgca" is deprecated — rename to "dgca"' });
+    }
     if (!Array.isArray(raw.factors))
         errors.push({ code: 'SCHEMA_INVALID', message: 'factors must be an array', path: 'factors' });
     if (!Array.isArray(raw.goals))
         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();
         for (const el of arr) {
             if (el && typeof el === 'object') {
                 const id = el.id;
-                if (typeof id === 'number')
+                if (typeof id === 'number' || typeof id === 'string')
                     out.add(id);
             }
         }
@@ -37,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') {
@@ -45,8 +56,8 @@ export function validateFGCADoc(input) {
             continue;
         }
         const factor = f;
-        if (typeof factor.id !== 'number')
-            errors.push({ code: 'SCHEMA_INVALID', message: 'factor id must be a number', path: `factors[${i}]` });
+        if (typeof factor.id !== 'number' && typeof factor.id !== 'string')
+            errors.push({ code: 'SCHEMA_INVALID', message: 'factor id must be a number or string', path: `factors[${i}]` });
         if (typeof factor.name !== 'string' || !factor.name.trim())
             errors.push({ code: 'EMPTY_NAME', message: `Factor ${String(factor.id)} has empty name`, path: `factors[${i}]` });
     }
@@ -57,8 +68,8 @@ export function validateFGCADoc(input) {
             continue;
         }
         const goal = g;
-        if (typeof goal.id !== 'number')
-            errors.push({ code: 'SCHEMA_INVALID', message: 'goal id must be a number', path: `goals[${i}]` });
+        if (typeof goal.id !== 'number' && typeof goal.id !== 'string')
+            errors.push({ code: 'SCHEMA_INVALID', message: 'goal id must be a number or string', path: `goals[${i}]` });
         if (typeof goal.name !== 'string' || !goal.name.trim())
             errors.push({ code: 'EMPTY_NAME', message: `Goal ${String(goal.id)} has empty name`, path: `goals[${i}]` });
         const factorRefs = Array.isArray(goal.factor) ? goal.factor : [];
@@ -66,7 +77,7 @@ export function validateFGCADoc(input) {
             if (!fr || typeof fr !== 'object')
                 continue;
             const fid = fr.id;
-            if (typeof fid === 'number' && !factorIds.has(fid)) {
+            if ((typeof fid === 'number' || typeof fid === 'string') && !factorIds.has(fid)) {
                 warnings.push({ code: 'BROKEN_REF', message: `Goal ${String(goal.id)} references missing factor ${fid}`, path: `goals[${i}].factor` });
             }
         }
@@ -78,31 +89,31 @@ export function validateFGCADoc(input) {
             continue;
         }
         const change = c;
-        if (typeof change.id !== 'number')
-            errors.push({ code: 'SCHEMA_INVALID', message: 'change id must be a number', path: `changes[${i}]` });
+        if (typeof change.id !== 'number' && typeof change.id !== 'string')
+            errors.push({ code: 'SCHEMA_INVALID', message: 'change id must be a number or string', path: `changes[${i}]` });
         if (typeof change.name !== 'string' || !change.name.trim())
             errors.push({ code: 'EMPTY_NAME', message: `Change ${String(change.id)} has empty name`, path: `changes[${i}]` });
-        if (typeof change.goal_id === 'number' && !goalIds.has(change.goal_id)) {
+        if ((typeof change.goal_id === 'number' || typeof change.goal_id === 'string') && !goalIds.has(change.goal_id)) {
             warnings.push({ code: 'BROKEN_REF', message: `Change ${String(change.id)} references missing goal ${change.goal_id}`, path: `changes[${i}].goal_id` });
         }
         const aids = Array.isArray(change.activity_ids) ? change.activity_ids : [];
         for (const aid of aids) {
-            if (typeof aid === 'number' && !activityIds.has(aid)) {
+            if ((typeof aid === 'number' || typeof aid === 'string') && !activityIds.has(aid)) {
                 warnings.push({ code: 'BROKEN_REF', message: `Change ${String(change.id)} references missing activity ${aid}`, path: `changes[${i}].activity_ids` });
             }
         }
     }
-    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')
-            errors.push({ code: 'SCHEMA_INVALID', message: 'activity id must be a number', 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/process-blueprint/index.d.ts

@@ -1,4 +1,4 @@
-export type { AspectCategory, Stage, AspectEntry, LaneConfig, ProcessBlueprintHeader, ProcessBlueprintFile, ProcessBlueprintLayoutOptions, LegendCell, StageHeaderCell, StageTextCell, AspectPill, AspectRow, ProcessBlueprintLayout, ComplianceDecoration, ComplianceChip, ComplianceRow, ComplianceLaneConfig, ComplianceLaneAssertion, ComplianceLaneRequirement, ComplianceLaneInput, } from './types.js';
+export type { AspectCategory, RowId, Stage, AspectEntry, LaneConfig, ProcessBlueprintHeader, ProcessBlueprintFile, ProcessBlueprintLayoutOptions, LegendCell, StageHeaderCell, StageTextCell, AspectPill, AspectRow, ProcessBlueprintLayout, ComplianceDecoration, ComplianceChip, ComplianceRow, ComplianceLaneConfig, ComplianceLaneAssertion, ComplianceLaneRequirement, ComplianceLaneInput, } from './types.js';
 export { validateProcessBlueprint } from './validate.js';
 export type { ValidationError as ProcessBlueprintValidationError, ValidationWarning as ProcessBlueprintValidationWarning, ValidationResult as ProcessBlueprintValidationResult, } from './validate.js';
 export { layoutProcessBlueprint } from './layout.js';

package/dist/process-blueprint/layout.js

@@ -12,14 +12,19 @@ const DEFAULTS = {
     goalRowHeight: 56,
     resultRowHeight: 56,
     aspectRowMinHeight: 60,
-    pillHeight: 28,
+    pillHeight: 40,
     pillGap: 4,
     cellPadding: 8,
-    textLineHeight: 15,
-    textCharWidth: 6.2,
+    // 17px gives comfortable breathing room between wrapped lines at typical
+    // webview font sizes (VS Code uses ~13–14px body, SVG text-secondary ≈ same).
+    textLineHeight: 17,
+    // 7.5px per char is a conservative estimate that causes wrap to trigger
+    // before text visually overflows the cell border.
+    textCharWidth: 7.5,
     cellTextPadX: 10,
     cellTextPadY: 10,
-    maxTextLines: 6,
+    // No hard truncation: rows grow to fit all wrapped lines.
+    maxTextLines: 100,
 };
 function resolveOptions(options) {
     return { ...DEFAULTS, ...(options ?? {}) };
@@ -285,8 +290,21 @@ function deriveComplianceRow(stages, stageIndexById, input, opts, yStart) {
 export function layoutProcessBlueprint(file, options) {
     const opts = resolveOptions(options);
     const pb = file.process_blueprint;
-    const stages = Array.isArray(pb?.stages) ? pb.stages : [];
+    // Filter stages by visibleStages if set
+    const allStages = Array.isArray(pb?.stages) ? pb.stages : [];
+    const stages = opts.visibleStages
+        ? allStages.filter(s => s?.id != null && opts.visibleStages.includes(s.id))
+        : allStages;
     const stageIndexById = buildStageIndex(stages);
+    // Row visibility from visibleRows
+    const visRows = opts.visibleRows;
+    const showGoal = !visRows || visRows.includes('goal');
+    const showResult = !visRows || visRows.includes('result');
+    const effectiveVisibleAspects = visRows
+        ? ASPECT_CATEGORIES.filter(c => visRows.includes(c))
+        : opts.visibleAspects;
+    const effectiveComplianceEnabled = opts.complianceLane?.enabled === true &&
+        (!visRows || visRows.includes('compliance'));
     // Stage headers
     const stageHeaders = stages.map((s, i) => ({
         stageIndex: i,
@@ -307,33 +325,36 @@ export function layoutProcessBlueprint(file, options) {
     };
     const goalLines = stages.map(s => wrap(s?.goal ?? ''));
     const resultLines = stages.map(s => wrap(s?.result ?? ''));
-    const goalRowY = opts.stageHeaderHeight;
-    const goalRowHeight = rowHeightFor(goalLines.map(l => l.length), opts.goalRowHeight);
-    const resultRowY = goalRowY + goalRowHeight;
-    const resultRowHeight = rowHeightFor(resultLines.map(l => l.length), opts.resultRowHeight);
-    const goalCells = stages.map((s, i) => ({
-        stageIndex: i,
-        text: s?.goal ?? '',
-        lines: goalLines[i],
-        x: opts.legendColumnWidth + i * opts.stageColumnWidth,
-        y: goalRowY,
-        width: opts.stageColumnWidth,
-        height: goalRowHeight,
-    }));
-    const resultCells = stages.map((s, i) => ({
-        stageIndex: i,
-        text: s?.result ?? '',
-        lines: resultLines[i],
-        x: opts.legendColumnWidth + i * opts.stageColumnWidth,
-        y: resultRowY,
-        width: opts.stageColumnWidth,
-        height: resultRowHeight,
-    }));
-    const aspectsStartY = resultRowY + resultRowHeight;
+    let cursorY = opts.stageHeaderHeight;
+    let goalRowY = 0, goalRowHeight = 0;
+    let resultRowY = 0, resultRowHeight = 0;
+    const goalCells = [];
+    const resultCells = [];
+    if (showGoal) {
+        goalRowY = cursorY;
+        goalRowHeight = rowHeightFor(goalLines.map(l => l.length), opts.goalRowHeight);
+        goalCells.push(...stages.map((s, i) => ({
+            stageIndex: i, text: s?.goal ?? '', lines: goalLines[i],
+            x: opts.legendColumnWidth + i * opts.stageColumnWidth, y: goalRowY,
+            width: opts.stageColumnWidth, height: goalRowHeight,
+        })));
+        cursorY += goalRowHeight;
+    }
+    if (showResult) {
+        resultRowY = cursorY;
+        resultRowHeight = rowHeightFor(resultLines.map(l => l.length), opts.resultRowHeight);
+        resultCells.push(...stages.map((s, i) => ({
+            stageIndex: i, text: s?.result ?? '', lines: resultLines[i],
+            x: opts.legendColumnWidth + i * opts.stageColumnWidth, y: resultRowY,
+            width: opts.stageColumnWidth, height: resultRowHeight,
+        })));
+        cursorY += resultRowHeight;
+    }
+    const aspectsStartY = cursorY;
     // Aspect rows: only categories with at least one entry, in fixed order.
-    // When visibleAspects is set, skip categories not in the list.
-    const aspectCategoriesToRender = opts.visibleAspects !== undefined
-        ? ASPECT_CATEGORIES.filter(c => opts.visibleAspects.includes(c))
+    // When effectiveVisibleAspects is set, skip categories not in the list.
+    const aspectCategoriesToRender = effectiveVisibleAspects !== undefined
+        ? ASPECT_CATEGORIES.filter(c => effectiveVisibleAspects.includes(c))
         : ASPECT_CATEGORIES;
     const aspectRows = [];
     let aspectCursorY = aspectsStartY;
@@ -358,6 +379,13 @@ export function layoutProcessBlueprint(file, options) {
             const x = opts.legendColumnWidth + p.startStageIndex * opts.stageColumnWidth + opts.cellPadding;
             const width = (p.endStageIndex - p.startStageIndex + 1) * opts.stageColumnWidth - 2 * opts.cellPadding;
             const y = aspectCursorY + opts.cellPadding + slot[i] * (opts.pillHeight + opts.pillGap);
+            const pillMaxChars = Math.max(4, Math.floor((width - 2 * opts.cellPadding) / opts.textCharWidth));
+            const nameWrapped = wrapText(p.name, pillMaxChars, 2);
+            // Show id as second line only when the name fits on one line; otherwise
+            // use both lines for the name so it isn't truncated.
+            const lines = p.id && nameWrapped.length <= 1
+                ? [...nameWrapped, p.id].slice(0, 2)
+                : nameWrapped;
             return {
                 category: p.category,
                 entryIndex: p.entryIndex,
@@ -369,6 +397,7 @@ export function layoutProcessBlueprint(file, options) {
                 y,
                 width,
                 height: opts.pillHeight,
+                lines,
             };
         });
         aspectRows.push({
@@ -381,7 +410,7 @@ export function layoutProcessBlueprint(file, options) {
     }
     // Compliance lane — derived from assertions/requirements, rendered after aspect rows.
     let complianceRow;
-    if (opts.complianceLane?.enabled && opts.complianceInput) {
+    if (effectiveComplianceEnabled && opts.complianceInput) {
         complianceRow = deriveComplianceRow(stages, stageIndexById, opts.complianceInput, opts, aspectCursorY);
         if (complianceRow) {
             aspectCursorY += complianceRow.height;
@@ -389,8 +418,8 @@ export function layoutProcessBlueprint(file, options) {
     }
     // Legend (left column labels): one entry per row.
     const legend = [
-        { kind: 'goal', label: 'Goal', y: goalRowY, height: goalRowHeight },
-        { kind: 'result', label: 'Result', y: resultRowY, height: resultRowHeight },
+        ...(showGoal ? [{ kind: 'goal', label: 'Goal', y: goalRowY, height: goalRowHeight }] : []),
+        ...(showResult ? [{ kind: 'result', label: 'Result', y: resultRowY, height: resultRowHeight }] : []),
         ...aspectRows.map(row => ({
             kind: 'aspect',
             category: row.category,
@@ -398,9 +427,7 @@ export function layoutProcessBlueprint(file, options) {
             y: row.y,
             height: row.height,
         })),
-        ...(complianceRow
-            ? [{ kind: 'compliance', label: 'Compliance', y: complianceRow.y, height: complianceRow.height }]
-            : []),
+        ...(complianceRow ? [{ kind: 'compliance', label: 'Compliance', y: complianceRow.y, height: complianceRow.height }] : []),
     ];
     const totalWidth = opts.legendColumnWidth + stages.length * opts.stageColumnWidth;
     const totalHeight = aspectCursorY;

package/dist/process-blueprint/types.d.ts

@@ -1,4 +1,5 @@
 export type AspectCategory = 'systems' | 'actors' | 'equipment' | 'information_entities';
+export type RowId = 'goal' | 'result' | 'systems' | 'actors' | 'equipment' | 'information_entities' | 'compliance';
 /**
  * One of the three orthogonal decoration signals that can appear on a compliance
  * law chip (ADR 2026-06-09-compliance-impact-as-blueprint-lane §3):
@@ -176,6 +177,17 @@ export interface ProcessBlueprintLayoutOptions {
      * Pass an empty array to suppress all aspect rows.
      */
     visibleAspects?: AspectCategory[];
+    /**
+     * Restrict which rows are rendered. When absent, all rows with data are shown.
+     * When set, takes precedence over `visibleAspects` for aspect categories and
+     * overrides `complianceLane.enabled` for the compliance row.
+     */
+    visibleRows?: RowId[];
+    /**
+     * Restrict which stages (columns) are rendered by their stage ID.
+     * When absent, all stages are shown.
+     */
+    visibleStages?: string[];
 }
 import type { LayoutBounds } from '../geometry.js';
 export type { LayoutBounds };
@@ -216,6 +228,8 @@ export interface AspectPill {
     y: number;
     width: number;
     height: number;
+    /** Word-wrapped lines of `name`, pre-fitted to the pill width by the layout. */
+    lines: string[];
 }
 export interface AspectRow {
     category: AspectCategory;

package/dist/scenarios/index.d.ts

@@ -1,2 +1,2 @@
-export type { ScenarioStatus, FactorRelevance, FactorView, GoalRef, CapabilityRef, ActivityRef, ProductRef, ProcessRef, ApplicationRef, ScenarioHeader, ScenarioFile, } from './types.js';
+export type { ScenarioStatus, DriverRelevance, DriverView, GoalRef, CapabilityRef, ActivityRef, ProductRef, ProcessRef, ApplicationRef, ScenarioHeader, ScenarioFile, } from './types.js';
 export { validateScenario } from './validate.js';

package/dist/scenarios/types.d.ts

@@ -1,8 +1,8 @@
 export type ScenarioStatus = 'Draft' | 'Active' | 'Archived';
-export type FactorRelevance = 'High' | 'Medium' | 'Low';
-export interface FactorView {
+export type DriverRelevance = 'High' | 'Medium' | 'Low';
+export interface DriverView {
     factor_id: string;
-    relevance?: FactorRelevance;
+    relevance?: DriverRelevance;
     impact?: string;
 }
 export interface GoalRef {
@@ -30,7 +30,7 @@ export interface ScenarioHeader {
     status: ScenarioStatus;
     created_at?: string;
     vision?: string;
-    factors_view?: FactorView[];
+    factors_view?: DriverView[];
     goals?: GoalRef[];
     capabilities?: CapabilityRef[];
     activities?: ActivityRef[];

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,8 +60,21 @@ 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]}`,
         `${CSS_VAR.layerGoal}:${lc.goal[variant]}`,
         `${CSS_VAR.layerChange}:${lc.change[variant]}`,
@@ -76,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() {
@@ -112,6 +125,7 @@ function diagramClassCss() {
     // contract every notation preview honours so the catalogue reads as one
     // visual family.
     return `.diagram-node{stroke:var(${cv.nodeStroke});stroke-width:1;}
+.layer-driver{fill:var(${cv.layerDriver});}
 .layer-factor{fill:var(${cv.layerFactor});}
 .layer-goal{fill:var(${cv.layerGoal});}
 .layer-change{fill:var(${cv.layerChange});}
@@ -134,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

@@ -11,8 +11,13 @@ export declare const FUNCTIONAL: {
     readonly error: "#b91c1c";
     readonly info: "#1d6fa8";
 };
-/** Fill colors for FGCA notation columns. */
+/** Fill colors for FGCA/DGCA notation columns. */
 export declare const LAYER_COLORS: {
+    readonly driver: {
+        readonly light: "#fef3c7";
+        readonly dark: "#292108";
+        readonly hc: "#f59e0b";
+    };
     readonly factor: {
         readonly light: "#fef3c7";
         readonly dark: "#292108";
@@ -77,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.
@@ -140,6 +177,7 @@ export declare const CSS_VAR: {
     readonly statusInfoFg: "--ts-status-info-fg";
     readonly statusErrorBg: "--ts-status-error-bg";
     readonly statusErrorFg: "--ts-status-error-fg";
+    readonly layerDriver: "--ts-layer-driver";
     readonly layerFactor: "--ts-layer-factor";
     readonly layerGoal: "--ts-layer-goal";
     readonly layerChange: "--ts-layer-change";
@@ -154,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

@@ -11,8 +11,9 @@ export const FUNCTIONAL = {
     error: '#b91c1c',
     info: '#1d6fa8',
 };
-/** Fill colors for FGCA notation columns. */
+/** Fill colors for FGCA/DGCA notation columns. */
 export const LAYER_COLORS = {
+    driver: { light: '#fef3c7', dark: '#292108', hc: '#f59e0b' },
     factor: { light: '#fef3c7', dark: '#292108', hc: '#f59e0b' },
     goal: { light: '#e0e7ff', dark: '#1e1b4b', hc: '#818cf8' },
     change: { light: '#dbeafe', dark: '#0c2042', hc: '#60a5fa' },
@@ -41,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.
@@ -85,6 +106,7 @@ export const CSS_VAR = {
     statusInfoFg: '--ts-status-info-fg',
     statusErrorBg: '--ts-status-error-bg',
     statusErrorFg: '--ts-status-error-fg',
+    layerDriver: '--ts-layer-driver',
     layerFactor: '--ts-layer-factor',
     layerGoal: '--ts-layer-goal',
     layerChange: '--ts-layer-change',
@@ -99,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/__tests__/entry-notations.test.js

@@ -15,6 +15,8 @@ const EXAMPLES = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../
 // example per notation is enough to prove the dispatch + renderer wiring.
 const FIXTURES = [
     { kind: 'goals', file: 'goals/strategy-2026.goals.transitrix.yaml', markup: 'svg' },
+    { kind: 'dgca', file: 'dgca/strategy-2026.dgca.transitrix.yaml', markup: 'svg' },
+    { kind: 'dga', file: 'dga/strategy-2026.dga.transitrix.yaml', markup: 'svg' },
     { kind: 'fgca', file: 'fgca/strategy-2026.fgca.transitrix.yaml', markup: 'svg' },
     { kind: 'fga', file: 'fga/strategy-2026.fga.transitrix.yaml', markup: 'svg' },
     { kind: 'activities', file: 'activities/platform-launch.activities.transitrix.yaml', markup: 'svg' },

package/dist/webview/__tests__/render-process.test.d.ts

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