@transitrix/diagrams 1.0.1 → 1.2.0

package/src/process-blueprint/layout.ts

@@ -13,6 +13,7 @@ import type {
   LegendCell,
   ProcessBlueprintFile,
   ProcessBlueprintLayout,
+  RowId,
   Stage,
   StageHeaderCell,
   StageTextCell,
@@ -31,7 +32,7 @@ const ASPECT_LABEL: Record<AspectCategory, string> = {
 // (absent = feature disabled) and must stay optional in the resolved type.
 type SizingOptionKeys = Exclude<
   keyof ProcessBlueprintLayoutOptions,
-  'complianceLane' | 'complianceInput' | 'visibleAspects'
+  'complianceLane' | 'complianceInput' | 'visibleAspects' | 'visibleRows' | 'visibleStages'
 >;
 
 /**
@@ -39,7 +40,7 @@ type SizingOptionKeys = Exclude<
  * the opt-in feature fields stay optional (undefined = feature disabled).
  */
 type ResolvedLayoutOptions = Required<Pick<ProcessBlueprintLayoutOptions, SizingOptionKeys>> &
-  Pick<ProcessBlueprintLayoutOptions, 'complianceLane' | 'complianceInput' | 'visibleAspects'>;
+  Pick<ProcessBlueprintLayoutOptions, 'complianceLane' | 'complianceInput' | 'visibleAspects' | 'visibleRows' | 'visibleStages'>;
 
 const DEFAULTS = {
   legendColumnWidth: 140,
@@ -48,14 +49,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,
 } satisfies Required<Pick<ProcessBlueprintLayoutOptions, SizingOptionKeys>>;
 
 interface RawPill {
@@ -369,9 +375,25 @@ export function layoutProcessBlueprint(
   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 as string[]).includes('goal');
+  const showResult = !visRows || (visRows as string[]).includes('result');
+  const effectiveVisibleAspects: AspectCategory[] | undefined = visRows
+    ? (ASPECT_CATEGORIES.filter(c => (visRows as string[]).includes(c)) as AspectCategory[])
+    : opts.visibleAspects;
+  const effectiveComplianceEnabled =
+    opts.complianceLane?.enabled === true &&
+    (!visRows || (visRows as string[]).includes('compliance'));
+
   // Stage headers
   const stageHeaders: StageHeaderCell[] = stages.map((s, i) => ({
     stageIndex: i,
@@ -398,38 +420,39 @@ export function layoutProcessBlueprint(
   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: StageTextCell[] = 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: StageTextCell[] = 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: StageTextCell[] = [];
+  const resultCells: StageTextCell[] = [];
+
+  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.
+  // When effectiveVisibleAspects is set, skip categories not in the list.
   const aspectCategoriesToRender =
-    opts.visibleAspects !== undefined
-      ? ASPECT_CATEGORIES.filter(c => opts.visibleAspects!.includes(c))
+    effectiveVisibleAspects !== undefined
+      ? ASPECT_CATEGORIES.filter(c => effectiveVisibleAspects.includes(c))
       : ASPECT_CATEGORIES;
 
   const aspectRows: AspectRow[] = [];
@@ -461,6 +484,13 @@ export function layoutProcessBlueprint(
       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: string[] = p.id && nameWrapped.length <= 1
+        ? [...nameWrapped, p.id].slice(0, 2)
+        : nameWrapped;
       return {
         category: p.category,
         entryIndex: p.entryIndex,
@@ -472,6 +502,7 @@ export function layoutProcessBlueprint(
         y,
         width,
         height: opts.pillHeight,
+        lines,
       };
     });
 
@@ -487,7 +518,7 @@ export function layoutProcessBlueprint(
 
   // Compliance lane — derived from assertions/requirements, rendered after aspect rows.
   let complianceRow: import('./types.js').ComplianceRow | undefined;
-  if (opts.complianceLane?.enabled && opts.complianceInput) {
+  if (effectiveComplianceEnabled && opts.complianceInput) {
     complianceRow = deriveComplianceRow(
       stages,
       stageIndexById,
@@ -502,8 +533,8 @@ export function layoutProcessBlueprint(
 
   // Legend (left column labels): one entry per row.
   const legend: LegendCell[] = [
-    { kind: 'goal', label: 'Goal', y: goalRowY, height: goalRowHeight },
-    { kind: 'result', label: 'Result', y: resultRowY, height: resultRowHeight },
+    ...(showGoal ? [{ kind: 'goal' as const, label: 'Goal', y: goalRowY, height: goalRowHeight }] : []),
+    ...(showResult ? [{ kind: 'result' as const, label: 'Result', y: resultRowY, height: resultRowHeight }] : []),
     ...aspectRows.map<LegendCell>(row => ({
       kind: 'aspect',
       category: row.category,
@@ -511,9 +542,7 @@ export function layoutProcessBlueprint(
       y: row.y,
       height: row.height,
     })),
-    ...(complianceRow
-      ? [{ kind: 'compliance' as const, label: 'Compliance', y: complianceRow.y, height: complianceRow.height }]
-      : []),
+    ...(complianceRow ? [{ kind: 'compliance' as const, label: 'Compliance', y: complianceRow.y, height: complianceRow.height }] : []),
   ];
 
   const totalWidth = opts.legendColumnWidth + stages.length * opts.stageColumnWidth;

package/src/process-blueprint/types.ts

@@ -1,5 +1,7 @@
 export type AspectCategory = 'systems' | 'actors' | 'equipment' | 'information_entities';
 
+export type RowId = 'goal' | 'result' | 'systems' | 'actors' | 'equipment' | 'information_entities' | 'compliance';
+
 // ── Compliance lane types ────────────────────────────────────────────────────
 
 /**
@@ -191,6 +193,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';
@@ -236,6 +249,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 {

package/src/scenarios/index.ts

@@ -1,7 +1,7 @@
 export type {
   ScenarioStatus,
-  FactorRelevance,
-  FactorView,
+  DriverRelevance,
+  DriverView,
   GoalRef,
   CapabilityRef,
   ActivityRef,

package/src/scenarios/types.ts

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

package/src/scenarios/validate.ts

@@ -1,10 +1,10 @@
-import type { ScenarioStatus, FactorRelevance } from './types.js';
+import type { ScenarioStatus, DriverRelevance } from './types.js';
 import type { ValidationError, ValidationWarning, ValidationResult } from '../validation-types.js';
 
 export type { ValidationError, ValidationWarning, ValidationResult };
 
 const VALID_STATUSES = new Set<ScenarioStatus>(['Draft', 'Active', 'Archived']);
-const VALID_RELEVANCE = new Set<FactorRelevance>(['High', 'Medium', 'Low']);
+const VALID_RELEVANCE = new Set<DriverRelevance>(['High', 'Medium', 'Low']);
 const DATE_RE = /^\d{4}-\d{2}-\d{2}$/;
 
 interface RefSpec {
@@ -84,7 +84,7 @@ export function validateScenario(input: unknown): ValidationResult {
           if (seen.has(fid)) errors.push({ code: 'SCN-013', message: `Duplicate factor_id: "${fid}"` });
           seen.add(fid);
         }
-        if (f['relevance'] !== undefined && !VALID_RELEVANCE.has(f['relevance'] as FactorRelevance)) {
+        if (f['relevance'] !== undefined && !VALID_RELEVANCE.has(f['relevance'] as DriverRelevance)) {
           errors.push({ code: 'SCN-006', message: `${idx}: relevance "${f['relevance']}" must be one of: High, Medium, Low` });
         }
       }

package/src/theme/index.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/src/theme/themes.ts

@@ -2,6 +2,8 @@ import {
   LAYER_COLORS,
   LEVEL_COLORS,
   MATURITY_COLORS,
+  TREE_LEVEL_COLORS,
+  TREE_MATURITY_COLORS,
   STRUCTURAL,
   TYPOGRAPHY,
   CSS_VAR,
@@ -75,8 +77,21 @@ function diagramVars(variant: 'light' | 'dark' | 'hc'): string {
   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]}`,
@@ -91,7 +106,7 @@ function diagramVars(variant: 'light' | 'dark' | 'hc'): string {
     `${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). */
@@ -131,6 +146,7 @@ function diagramClassCss(): string {
   // 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});}
@@ -153,7 +169,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;}`;
 }
 
 /**

package/src/theme/tokens.ts

@@ -13,8 +13,9 @@ export const FUNCTIONAL = {
   info:    '#1d6fa8',
 } as const;
 
-/** 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' },
@@ -47,6 +48,28 @@ export const MATURITY_COLORS = {
   hc:    ['#f87171', '#fb923c', '#facc15', '#a3e635', '#4ade80'],
 } as const;
 
+/**
+ * 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' },
+} as const;
+
+/**
+ * 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'],
+} as const;
+
 /**
  * Typography hierarchy. All previews resolve text styling from these roles
  * — never from inline font-* attributes on individual <text> elements.
@@ -112,6 +135,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',
@@ -126,6 +150,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',
 } as const;
 
 export function getBaseResetCss(): string {

package/src/webview/__tests__/entry-notations.test.ts

@@ -26,6 +26,8 @@ interface Fixture {
 // example per notation is enough to prove the dispatch + renderer wiring.
 const FIXTURES: Fixture[] = [
   { 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' },