@transitrix/diagrams 1.5.0 → 1.7.6

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/theme.d.ts

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

package/dist/goals/theme.js

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

package/dist/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/index.d.ts

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

package/dist/index.js

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

package/dist/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

package/dist/webview/__tests__/render-goals.test.js

@@ -58,8 +58,22 @@ describe('renderGoalsSvg', () => {
         expect(svg).toContain('width="0"');
         expect(svg).toContain('height="0"');
     });
-    it('omits the title block when treeName is missing', () => {
-        const svg = renderGoalsSvg(SIMPLE_TREE);
-        expect(svg).not.toContain('Goal tree —');
+    it('shows canonical goal ids in node labels when present', () => {
+        const tree = {
+            goal_types: [{ name: 'Strategy', level: 0 }],
+            goals: [
+                {
+                    id: 1,
+                    canonical_id: 'GOAL-REVENUE-1',
+                    name: 'Triple revenue',
+                    type: 'Strategy',
+                    level: 0,
+                    parent_id: 0,
+                },
+            ],
+        };
+        const svg = renderGoalsSvg(tree);
+        expect(svg).toContain('GOAL-REVENUE-1');
+        expect(svg).not.toMatch(/>\s*1\s*</);
     });
 });

package/dist/webview/render-goals.js

@@ -11,6 +11,7 @@
  * Step 4 will follow the same shape for the remaining ten notations.
  */
 import { layoutGoalTree } from '../goals/layout.js';
+import { displayGoalId } from '../goals/parse-canonical.js';
 import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
 import { generateSvgEmbedCss } from '../theme/index.js';
 import { escXml } from './render-util.js';
@@ -102,7 +103,7 @@ export function renderGoalsLayoutSvg(layout, options = {}) {
         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);
+        const idText = displayGoalId(n.data);
         return `<g>
   <rect class="diagram-node level-${level}" x="${x}" y="${y}" width="${n.width}" height="${n.height}" rx="${ENTITY_NODE_RX}"/>
   <text class="text-primary" x="${x + n.width / 2}" y="${nameY1}" text-anchor="middle" dominant-baseline="central">${escXml(line1)}</text>${twoLines ? `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transitrix/diagrams",
-  "version": "1.5.0",
+  "version": "1.7.6",
   "type": "module",
   "description": "Shared rendering, validation, and pure mutations for Transitrix custom diagram formats.",
   "license": "MIT",
@@ -43,8 +43,11 @@
     "reactflow": "^11.0.0"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
     "@types/react": "^18.3.28",
     "@types/react-dom": "^19.2.3",
+    "jsdom": "^29.1.1",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "reactflow": "^11.11.4",

package/src/capability-map/CapabilityCardNode.tsx

@@ -0,0 +1,146 @@
+import React, { memo } from 'react';
+import { Handle, Position } from 'reactflow';
+import type { Capability } from './dsm-schema.js';
+import type { ThemeTokens } from './dsm-theme.js';
+
+const CARD_WIDTH = 250;
+const CARD_HEIGHT = 64;
+
+function latestMaturityLevel(cap: Capability): number | undefined {
+  if (!cap.maturity || cap.maturity.length === 0) return undefined;
+  return [...cap.maturity].sort((a, b) => b.date.localeCompare(a.date))[0].level;
+}
+
+export interface CapabilityCardNodeData {
+  capability: Capability;
+  theme: Required<ThemeTokens>;
+  maturityColours: Record<number, string>;
+  readOnly: boolean;
+  isDropTarget: boolean;
+  hasHiddenChildren: boolean;
+  isCollapsed: boolean;
+  onAddChild: (parentId: number) => void;
+  onDelete: (id: number) => void;
+  onToggleCollapse: (id: number) => void;
+}
+
+const CapabilityCardNode = memo(({ data }: { data: CapabilityCardNodeData }) => {
+  const { capability, theme, maturityColours, readOnly, isDropTarget, hasHiddenChildren, isCollapsed } = data;
+  const maturity = latestMaturityLevel(capability);
+  const dotColour = maturity !== undefined ? maturityColours[maturity] : undefined;
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        width: CARD_WIDTH,
+        height: CARD_HEIGHT,
+        background: theme.cardFill,
+        borderRadius: 8,
+        borderStyle: 'solid',
+        borderWidth: isDropTarget ? 2 : theme.cardBorderWidth,
+        borderColor: isDropTarget ? theme.dropTargetBorderColor : theme.cardBorderColor,
+        boxShadow: '0 1px 4px rgba(0,0,0,0.12)',
+        padding: '6px 10px',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+      }}
+    >
+      <Handle type="target" position={Position.Left} style={{ opacity: 0 }} />
+      <Handle type="source" position={Position.Right} style={{ opacity: 0 }} />
+
+      {dotColour && (
+        <span
+          title={`Maturity ${maturity}`}
+          aria-label={`Maturity ${maturity}`}
+          style={{
+            position: 'absolute', top: 6, left: 6, width: 8, height: 8, borderRadius: '50%', background: dotColour,
+          }}
+        />
+      )}
+
+      <div
+        title={capability.name}
+        style={{
+          fontWeight: 600,
+          fontSize: 12,
+          color: theme.cardTextColor,
+          marginLeft: dotColour ? 12 : 0,
+          overflow: 'hidden',
+          display: '-webkit-box',
+          WebkitLineClamp: 2,
+          WebkitBoxOrient: 'vertical',
+          wordBreak: 'break-word',
+          lineHeight: 1.2,
+        }}
+      >
+        {capability.name}
+      </div>
+      <div style={{ fontSize: 10, color: theme.cardMetaColor, marginTop: 2, marginLeft: dotColour ? 12 : 0 }}>
+        {capability.address}
+      </div>
+
+      {!readOnly && (
+        <button
+          type="button"
+          aria-label="Add child capability"
+          title="Add child capability"
+          onClick={(e) => {
+            e.stopPropagation();
+            data.onAddChild(capability.id);
+          }}
+          style={{
+            position: 'absolute', top: -8, right: -8, width: 16, height: 16,
+            borderRadius: '50%', border: '1px solid #86efac', background: '#ffffff',
+            color: '#16a34a', fontSize: 11, lineHeight: '14px', padding: 0, cursor: 'pointer',
+          }}
+        >
+          +
+        </button>
+      )}
+
+      {!readOnly && (
+        <button
+          type="button"
+          aria-label="Delete capability"
+          title="Delete capability and descendants"
+          onClick={(e) => {
+            e.stopPropagation();
+            data.onDelete(capability.id);
+          }}
+          style={{
+            position: 'absolute', bottom: -8, right: -8, width: 16, height: 16,
+            borderRadius: '50%', border: '1px solid #fca5a5', background: '#ffffff',
+            color: '#dc2626', fontSize: 11, lineHeight: '14px', padding: 0, cursor: 'pointer',
+          }}
+        >
+          &times;
+        </button>
+      )}
+
+      {hasHiddenChildren && (
+        <button
+          type="button"
+          aria-label={isCollapsed ? 'Expand branch' : 'Collapse branch'}
+          title={isCollapsed ? 'Expand branch' : 'Collapse branch'}
+          onClick={(e) => {
+            e.stopPropagation();
+            data.onToggleCollapse(capability.id);
+          }}
+          style={{
+            position: 'absolute', top: '50%', right: -8, transform: 'translateY(-50%)',
+            width: 16, height: 16, borderRadius: '50%', border: `1px solid ${theme.cardBorderColor}`,
+            background: '#ffffff', color: theme.cardBorderColor, fontSize: 11, lineHeight: '14px', padding: 0, cursor: 'pointer',
+          }}
+        >
+          {isCollapsed ? '+' : '−'}
+        </button>
+      )}
+    </div>
+  );
+});
+
+CapabilityCardNode.displayName = 'CapabilityCardNode';
+
+export default CapabilityCardNode;