@transitrix/diagrams 1.4.0 → 1.6.0

package/src/goals/theme.ts

@@ -0,0 +1,54 @@
+/**
+ * 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 const DEFAULT_GOAL_LEVEL_COLORS: Record<number, string> = {
+  0: '#e0e7ff',
+  1: '#c7d2fe',
+  2: '#a5b4fc',
+  3: '#93c5fd',
+  4: '#bae6fd',
+  5: '#bbf7d0',
+  6: '#fef08a',
+  7: '#fed7aa',
+};
+
+export const DEFAULT_THEME: Required<ThemeTokens> = {
+  goalLevelColors: DEFAULT_GOAL_LEVEL_COLORS,
+  cardBorderColor: '#94a3b8',
+  cardBorderWidth: 1,
+  cardTextColor: '#0f172a',
+  cardMetaColor: '#64748b',
+  edgeColor: '#94a3b8',
+  edgeWidth: 1.5,
+  dropTargetBorderColor: '#2563eb',
+};
+
+export function resolveTheme(theme?: ThemeTokens): Required<ThemeTokens> {
+  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/src/index.ts

@@ -6,7 +6,35 @@ export * from "./geometry";
 export * from "./applications/index";
 export * from "./assertion/index";
 export * from "./blocks/index";
-export * from "./capability-map/index";
+// capability-map/index.js also exports a set of DSM-migration symbols
+// (Capability, reparent, addChild, LayoutOptions, ThemeTokens, ...) that
+// reuse the goals module's exact generic Layer-A/B naming convention by
+// design (both follow the same extraction-spec template) — the wildcard
+// re-export below would collide with goals' identically-named symbols.
+// Neither spec's acceptance criteria asks for root-barrel access (only
+// `@transitrix/diagrams/goals` / `@transitrix/diagrams/capability-map`
+// subpath imports), so the colliding names are simply left off the root
+// barrel; they're still importable via the capability-map subpath.
+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/src/webview/__tests__/render-blocks.test.ts

@@ -59,6 +59,15 @@ function extractLabels(svg: string): Array<{ cls: string; text: string }> {
   return out;
 }
 
+/** Extract {class, y} for each text element in SVG document order. */
+function extractTextY(svg: string): Array<{ cls: string; y: number }> {
+  const re = /<text class="(text-(?:primary|id))"[^>]*\by="([^"]+)"/g;
+  const out: Array<{ cls: string; y: number }> = [];
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(svg))) out.push({ cls: m[1], y: parseFloat(m[2]) });
+  return out;
+}
+
 describe('renderBlocksSvg — leaf labels', () => {
   it('wraps a long name to at most 3 lines and truncates with …', () => {
     const longName =
@@ -153,3 +162,48 @@ describe('renderBlocksSvg — container headers', () => {
     expect(primaries.some((l) => l.text.endsWith('…'))).toBe(true);
   });
 });
+
+describe('renderBlocksSvg — name/ID vertical overlap regression (follows-up on #419)', () => {
+  // Root cause: NAME_ID_GAP was 6 px. text-primary is 12 px tall (±6 px around
+  // centre) and text-id is 10 px tall (±5 px around centre). The minimum gap
+  // between centres to avoid overlap is 11 px; a gap of 6 caused 5 px of overlap.
+  // Fix: NAME_ID_GAP = 14 (3 px visual buffer, matching the gap between name lines).
+
+  const NAME_HALF_H = 6;  // half of text-primary font size (12 px)
+  const ID_HALF_H = 5;    // half of text-id font size (10 px)
+
+  it('leaf node: last name line bottom does not overlap first ID line top (1 name + 1 ID)', () => {
+    const svg = renderBlocksSvg(leafDoc('Short', 'BLK-1'));
+    const positions = extractTextY(svg);
+    const nameY = positions.filter(p => p.cls === 'text-primary').map(p => p.y);
+    const idY = positions.filter(p => p.cls === 'text-id').map(p => p.y);
+    expect(nameY.length).toBeGreaterThan(0);
+    expect(idY.length).toBeGreaterThan(0);
+    const lastNameBottom = Math.max(...nameY) + NAME_HALF_H;
+    const firstIdTop = Math.min(...idY) - ID_HALF_H;
+    expect(firstIdTop).toBeGreaterThan(lastNameBottom);
+  });
+
+  it('leaf node: no overlap with a 3-word name (2 name lines + 1 ID)', () => {
+    const svg = renderBlocksSvg(leafDoc('Three Word Name', 'BLK-001'));
+    const positions = extractTextY(svg);
+    const nameY = positions.filter(p => p.cls === 'text-primary').map(p => p.y);
+    const idY = positions.filter(p => p.cls === 'text-id').map(p => p.y);
+    const lastNameBottom = Math.max(...nameY) + NAME_HALF_H;
+    const firstIdTop = Math.min(...idY) - ID_HALF_H;
+    expect(firstIdTop).toBeGreaterThan(lastNameBottom);
+  });
+
+  it('leaf node: no overlap with a long name (3 name lines) and wrapped ID (2 lines)', () => {
+    const longName =
+      'Personal data records that linger after consent withdrawal across many systems and archives';
+    const longId = 'VERY_LONG_BLOCK_IDENTIFIER_WITH_MANY_SEGMENTS_AND_MORE';
+    const svg = renderBlocksSvg(leafDoc(longName, longId));
+    const positions = extractTextY(svg);
+    const nameY = positions.filter(p => p.cls === 'text-primary').map(p => p.y);
+    const idY = positions.filter(p => p.cls === 'text-id').map(p => p.y);
+    const lastNameBottom = Math.max(...nameY) + NAME_HALF_H;
+    const firstIdTop = Math.min(...idY) - ID_HALF_H;
+    expect(firstIdTop).toBeGreaterThan(lastNameBottom);
+  });
+});

package/src/webview/notation-style.ts

@@ -0,0 +1,12 @@
+/**
+ * Shared visual constants for entity-box (block-style) notation renderers.
+ *
+ * Goals, Nested Blocks, FGCA/DGCA, and any future notation using the same
+ * entity-box visual language import their shared style tokens from here.
+ * Centralising them prevents the per-renderer drift that caused the Goals/Blocks
+ * style mismatch (border radius diverged to rx=6 in Blocks vs rx=8 everywhere
+ * else). Change here and every notation updates together.
+ */
+
+/** Border-radius (px) for entity and leaf-block node rectangles. */
+export const ENTITY_NODE_RX = 8;

package/src/webview/render-blocks.ts

@@ -16,6 +16,7 @@ import { layoutNestedBlocks } from '../blocks/layout.js';
 import type { BlocksFile, BlocksLayout, LaidOutBlock } from '../blocks/types.js';
 import { generateSvgEmbedCss, type ThemeId } from '../theme/index.js';
 import { escXml } from './render-util.js';
+import { ENTITY_NODE_RX } from './notation-style.js';
 
 const PAD = 24;
 
@@ -25,9 +26,12 @@ const CHAR_W = 7;
 const CHAR_W_ID = 6;
 
 // Vertical spacing between line centres.
-const LINE_H = 14;    // name lines (text-primary)
-const LINE_H_ID = 12; // id lines (text-id)
-const NAME_ID_GAP = 6; // gap between last name centre and first ID centre
+const LINE_H = 14;     // name lines (text-primary, 12 px font)
+const LINE_H_ID = 12;  // id lines (text-id, 10 px font)
+// Minimum gap to avoid overlap: half of name text height (6 px) + half of id
+// text height (5 px) = 11 px. Use 14 px to match the name-line separation and
+// leave a 3 px visual buffer — same as the gap between consecutive name lines.
+const NAME_ID_GAP = 14;
 
 /** Word-wrap `text` to at most `maxLines` lines of `maxChars` each. */
 function wrapWords(text: string, maxChars: number, maxLines: number): string[] {
@@ -110,7 +114,7 @@ function emitBlockSvg(b: LaidOutBlock, ox: number, oy: number, parts: string[]):
   const cls = levelClassForDepth(b.depth);
   const cx = b.x + ox + b.width / 2;
   parts.push(
-    `<rect class="diagram-node ${cls}" x="${b.x + ox}" y="${b.y + oy}" width="${b.width}" height="${b.height}" rx="6"/>`,
+    `<rect class="diagram-node ${cls}" x="${b.x + ox}" y="${b.y + oy}" width="${b.width}" height="${b.height}" rx="${ENTITY_NODE_RX}"/>`,
   );
 
   const innerW = Math.max(0, b.width - TEXT_MARGIN_X * 2);

package/src/webview/render-goals.ts

@@ -15,6 +15,7 @@ import type { GoalTree, GoalTreeLayout, LaidOutEdge } from '../goals/types.js';
 import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
 import { generateSvgEmbedCss, type ThemeId } from '../theme/index.js';
 import { escXml } from './render-util.js';
+import { ENTITY_NODE_RX } from './notation-style.js';
 
 const NODE_W = 250;
 const NODE_H = 72;
@@ -130,7 +131,7 @@ export function renderGoalsLayoutSvg(layout: GoalTreeLayout, options: RenderGoal
       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"/>
+  <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 ? `
   <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>` : ''}