@transitrix/diagrams 1.7.6 → 1.8.2

package/dist/webview/render-process-blueprint.js

@@ -10,45 +10,24 @@
  * self-contained. No `vscode`, no `node:*`, no host APIs.
  */
 import { layoutProcessBlueprint } from '../process-blueprint/layout.js';
+import { parseNodeSizePreset, resolveProcessBlueprintSize, } from '../node-size-presets.js';
 import { generateSvgEmbedCss } from '../theme/index.js';
+import { layoutCenteredPillText, layoutLeftCellLines, maxCharsForInnerWidth, truncateLine, } from './entity-text-layout.js';
 import { escXml } from './render-util.js';
 const PAD = 24;
-// Blueprint-specific rules not carried by the shared theme CSS. The outer
-// border is drawn last on top of the clipped inner content; the row
-// backgrounds are transparent (pills/chips carry the colour). Mirrors
-// `BLUEPRINT_CSS` from the VS Code preview so the self-contained JCEF output
-// matches the editor.
 const BP_EMBED_CSS = `
 .bp-row-bg { fill: none; }
 .bp-border { fill: none; stroke: var(--ts-border, #cbd5e1); stroke-width: 1; }`;
-function truncate(text, maxChars) {
-    if (text.length <= maxChars)
-        return text;
-    return text.slice(0, Math.max(0, maxChars - 1)) + '…';
-}
-/**
- * Render a left-anchored, vertically centred multi-line text cell. `lines` are
- * pre-wrapped by the layout; the block is centred within the cell height.
- */
 function textCellSvg(lines, cls, x, cellTop, cellHeight, lineHeight) {
+    const specs = layoutLeftCellLines(lines, x, cellTop, cellHeight, lineHeight, cls);
     const ls = lines.length > 0 ? lines : [''];
     const first = cellTop + cellHeight / 2 - ((ls.length - 1) / 2) * lineHeight;
     const tspans = ls
         .map((ln, i) => `<tspan x="${x}" y="${first + i * lineHeight}">${escXml(ln)}</tspan>`)
         .join('');
+    void specs;
     return `<text class="${cls}" dominant-baseline="central">${tspans}</text>`;
 }
-/**
- * Render a single compliance law chip wrapped in a `<g data-chip-law…>` so the
- * VS Code host can wire click-to-drill-down. Other hosts (JCEF) simply ignore
- * the data attributes.
- *
- * Three orthogonal decorations are expressed as SVG overrides:
- * - `new`      — dashed stroke border  (`stroke-dasharray="4 2"`)
- * - `gap`      — warning-level fill    (`class="…compliance-gap"`)
- * - `deadline` — urgent fill override  (`class="…compliance-deadline"`) + a small
- *                badge circle in the top-right corner
- */
 function complianceChipSvg(chip, ox, oy, stageId) {
     const { x, y, width, height, lawId, decorations } = chip;
     const ax = x + ox;
@@ -62,9 +41,10 @@ function complianceChipSvg(chip, ox, oy, stageId) {
     else if (hasGap)
         rectClass += ' compliance-gap';
     const strokeDash = hasNew ? ' stroke-dasharray="4 2"' : '';
+    const maxChars = maxCharsForInnerWidth(Math.max(0, width - 8), 8);
     const parts = [];
     parts.push(`<rect class="${rectClass}" x="${ax}" y="${ay}" width="${width}" height="${height}" rx="6"${strokeDash}/>`);
-    parts.push(`<text class="text-pill" x="${ax + width / 2}" y="${ay + height / 2}" text-anchor="middle" dominant-baseline="central">${escXml(truncate(lawId, Math.floor(width / 8)))}</text>`);
+    parts.push(`<text class="text-pill" x="${ax + width / 2}" y="${ay + height / 2}" text-anchor="middle" dominant-baseline="central">${escXml(truncateLine(lawId, maxChars))}</text>`);
     if (hasDeadline) {
         const br = 5;
         const bx = ax + width - br - 3;
@@ -74,38 +54,23 @@ function complianceChipSvg(chip, ox, oy, stageId) {
     }
     return `<g data-chip-law="${escXml(lawId)}" data-chip-stage="${escXml(stageId)}">\n${parts.join('\n')}\n</g>`;
 }
-/**
- * Canonical Process Blueprint body — everything inside the `<svg>` except the
- * host-specific title block. Shared verbatim by the VS Code preview and the
- * host-neutral wrapper below so both surfaces stay pixel-identical.
- *
- * Layering: a clipped group holds the row fills and grid lines; pills and
- * compliance chips render on top (so grid lines sit under pill content); the
- * outer rounded border is drawn last so corner cells never overflow it.
- */
 export function renderProcessBlueprintBody(layout, ox, oy, clipId = 'bp-clip') {
     const tw = layout.bounds.width;
     const th = layout.bounds.height;
     const parts = [];
-    // Pills and chips collected separately so they render after (on top of) grid lines.
     const topParts = [];
-    // Outer background (fill only; border drawn last on top).
     parts.push(`<rect class="diagram-node level-0 bp-row-bg" x="${ox}" y="${oy}" width="${tw}" height="${th}" rx="6" stroke="none"/>`);
-    // ClipPath — clips all inner content to the outer rounded rect so corner cells
-    // don't visually overflow the rx=6 boundary.
     parts.push(`<defs><clipPath id="${clipId}"><rect x="${ox}" y="${oy}" width="${tw}" height="${th}" rx="6"/></clipPath></defs>`);
     const inner = [];
-    // Stage headers (top row).
+    const headerMaxChars = Math.max(8, Math.floor((layout.stageColumnWidth - 16) / 7));
     for (const s of layout.stageHeaders) {
         inner.push(`<rect class="diagram-node level-1" x="${s.x + ox}" y="${s.y + oy}" width="${s.width}" height="${s.height}" stroke="none"/>`);
-        inner.push(`<text class="text-header" x="${s.x + ox + s.width / 2}" y="${s.y + oy + s.height / 2}" text-anchor="middle" dominant-baseline="central">${escXml(truncate(s.name, 28))}</text>`);
+        inner.push(`<text class="text-header" x="${s.x + ox + s.width / 2}" y="${s.y + oy + s.height / 2}" text-anchor="middle" dominant-baseline="central">${escXml(truncateLine(s.name, headerMaxChars))}</text>`);
     }
-    // Legend column (row labels).
     for (const l of layout.legend) {
         inner.push(`<rect class="diagram-node level-2 bp-row-bg" x="${ox}" y="${l.y + oy}" width="${layout.legendColumnWidth}" height="${l.height}" stroke="none"/>`);
         inner.push(`<text class="text-primary" x="${ox + 12}" y="${l.y + oy + l.height / 2}" dominant-baseline="central">${escXml(l.label)}</text>`);
     }
-    // Goal and result cells.
     const textX = layout.cellTextPadX;
     for (const c of layout.goalCells) {
         inner.push(`<rect class="diagram-node level-3 bp-row-bg" x="${c.x + ox}" y="${c.y + oy}" width="${c.width}" height="${c.height}" stroke="none"/>`);
@@ -115,32 +80,22 @@ export function renderProcessBlueprintBody(layout, ox, oy, clipId = 'bp-clip') {
         inner.push(`<rect class="diagram-node level-4 bp-row-bg" x="${c.x + ox}" y="${c.y + oy}" width="${c.width}" height="${c.height}" stroke="none"/>`);
         inner.push(textCellSvg(c.lines, 'text-secondary', c.x + ox + textX, c.y + oy, c.height, layout.textLineHeight));
     }
-    // Aspect rows — transparent background; pills carry the colour.
     for (let r = 0; r < layout.aspectRows.length; r++) {
         const row = layout.aspectRows[r];
         const level = 5 + (r % 3);
         inner.push(`<rect class="diagram-node level-${level} bp-row-bg" x="${layout.legendColumnWidth + ox}" y="${row.y + oy}" width="${tw - layout.legendColumnWidth}" height="${row.height}" stroke="none"/>`);
         for (const p of row.pills) {
-            const cx = p.x + ox + p.width / 2;
-            const pillLH = 15;
-            // p.lines: name lines (possibly wrapped), optionally with id as last line.
             const hasIdLine = !!(p.id && p.lines.length > 0 && p.lines[p.lines.length - 1] === p.id);
             const nameLines = hasIdLine ? p.lines.slice(0, -1) : p.lines;
             const idLine = hasIdLine ? p.id : undefined;
-            const pillFirstY = p.y + oy + p.height / 2 - ((p.lines.length - 1) / 2) * pillLH;
+            const pillSpecs = layoutCenteredPillText(p.x + ox, p.y + oy, p.width, p.height, nameLines, idLine);
             topParts.push(`<rect class="diagram-node level-${level}" x="${p.x + ox}" y="${p.y + oy}" width="${p.width}" height="${p.height}" rx="6"/>`);
-            if (nameLines.length > 0) {
-                const tspans = nameLines
-                    .map((ln, i) => `<tspan x="${cx}" y="${pillFirstY + i * pillLH}">${escXml(ln)}</tspan>`)
-                    .join('');
-                topParts.push(`<text class="text-pill" text-anchor="middle" dominant-baseline="central">${tspans}</text>`);
-            }
-            if (idLine) {
-                topParts.push(`<text class="text-secondary" x="${cx}" y="${pillFirstY + nameLines.length * pillLH}" text-anchor="middle" dominant-baseline="central">${escXml(idLine)}</text>`);
+            for (const spec of pillSpecs) {
+                const anchor = spec.cls === 'text-pill' || spec.cls === 'text-secondary' ? ' text-anchor="middle"' : '';
+                topParts.push(`<text class="${spec.cls}" x="${spec.x}" y="${spec.y}"${anchor} dominant-baseline="central">${escXml(spec.text)}</text>`);
             }
         }
     }
-    // Compliance row (optional).
     if (layout.complianceRow) {
         const row = layout.complianceRow;
         inner.push(`<rect class="diagram-node level-5 bp-row-bg" x="${layout.legendColumnWidth + ox}" y="${row.y + oy}" width="${tw - layout.legendColumnWidth}" height="${row.height}" stroke="none"/>`);
@@ -149,7 +104,6 @@ export function renderProcessBlueprintBody(layout, ox, oy, clipId = 'bp-clip') {
             topParts.push(complianceChipSvg(chip, ox, oy, stageId));
         }
     }
-    // Grid lines — drawn before pills so they appear under pill content.
     const gridX1 = ox;
     const gridX2 = ox + tw;
     const gridY1 = oy;
@@ -168,15 +122,17 @@ export function renderProcessBlueprintBody(layout, ox, oy, clipId = 'bp-clip') {
         const stageLineX = ox + layout.legendColumnWidth + i * layout.stageColumnWidth;
         inner.push(`<line class="diagram-edge" x1="${stageLineX}" y1="${gridY1}" x2="${stageLineX}" y2="${gridY2}"/>`);
     }
-    // Inner content (fills + grid lines) clipped to rounded outer rect.
     parts.push(`<g clip-path="url(#${clipId})">${inner.join('\n')}${topParts.join('\n')}</g>`);
-    // Outer border on top — fill="none" as attribute so PNG export (no external CSS) never shows black.
     parts.push(`<rect class="bp-border" x="${ox}" y="${oy}" width="${tw}" height="${th}" rx="6" fill="none"/>`);
     return parts.join('\n');
 }
 export function renderProcessBlueprintSvg(doc, options = {}) {
-    const { title = '' } = options;
-    const layout = layoutProcessBlueprint(doc);
+    const { title = '', nodeSizePreset = 'normal', layoutOptions } = options;
+    const sizing = resolveProcessBlueprintSize(parseNodeSizePreset(nodeSizePreset));
+    const layout = layoutProcessBlueprint(doc, {
+        ...sizing,
+        ...layoutOptions,
+    });
     if (layout.bounds.width === 0 || layout.bounds.height === 0) {
         return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
     }
@@ -189,8 +145,6 @@ export function renderProcessBlueprintSvg(doc, options = {}) {
     const titleSvg = title
         ? `<text class="text-header" x="${PAD}" y="${PAD - 6}">${escXml(title)}</text>`
         : '';
-    // Embed the shared theme CSS plus the blueprint-specific rules inside the SVG
-    // so the rendered output is self-contained for the JCEF host.
     const embedCss = generateSvgEmbedCss('transitrix') + BP_EMBED_CSS;
     return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
 <style>${embedCss}</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transitrix/diagrams",
-  "version": "1.7.6",
+  "version": "1.8.2",
   "type": "module",
   "description": "Shared rendering, validation, and pure mutations for Transitrix custom diagram formats.",
   "license": "MIT",

package/src/__tests__/node-size-presets.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  ACTION_NODE_SIZE,
+  BLOCKS_LEAF_SIZE,
+  CAPABILITY_MAP_NODE_SIZE,
+  DGCA_NODE_SIZE,
+  ENTITY_NODE_HEIGHT,
+  ENTITY_NODE_SIZE,
+  ENTITY_NODE_WIDTH,
+  GOALS_NODE_SIZE,
+  PROCESS_BLUEPRINT_SIZE,
+  resolveGoalsNodeSize,
+} from '../node-size-presets.js';
+
+describe('node-size-presets', () => {
+  it('uses shared width and height tiers for entity nodes', () => {
+    expect(ENTITY_NODE_WIDTH).toEqual({ compact: 200, normal: 250, wide: 320 });
+    expect(ENTITY_NODE_HEIGHT).toEqual({ compact: 72, normal: 80, wide: 96 });
+    expect(ENTITY_NODE_SIZE.normal).toEqual({ width: 250, height: 80 });
+    expect(ENTITY_NODE_SIZE.compact).toEqual({ width: 200, height: 72 });
+    expect(ENTITY_NODE_SIZE.wide).toEqual({ width: 320, height: 96 });
+  });
+
+  it('exposes the same entity sizes for every box-based notation', () => {
+    for (const table of [GOALS_NODE_SIZE, DGCA_NODE_SIZE, BLOCKS_LEAF_SIZE, ACTION_NODE_SIZE]) {
+      expect(table).toBe(ENTITY_NODE_SIZE);
+      expect(table.normal).toEqual(ENTITY_NODE_SIZE.normal);
+    }
+    expect(CAPABILITY_MAP_NODE_SIZE.normal).toEqual({
+      nodeWidth: ENTITY_NODE_WIDTH.normal,
+      nodeHeight: ENTITY_NODE_HEIGHT.normal,
+    });
+  });
+
+  it('scales wide above normal and compact below', () => {
+    expect(resolveGoalsNodeSize('wide').height).toBeGreaterThan(resolveGoalsNodeSize('normal').height);
+    expect(resolveGoalsNodeSize('compact').height).toBeLessThan(resolveGoalsNodeSize('normal').height);
+    expect(resolveGoalsNodeSize('wide').width).toBeGreaterThan(resolveGoalsNodeSize('normal').width);
+  });
+
+  it('scales process blueprint from the same tier ratios', () => {
+    expect(PROCESS_BLUEPRINT_SIZE.wide.stageColumnWidth).toBeGreaterThan(
+      PROCESS_BLUEPRINT_SIZE.normal.stageColumnWidth,
+    );
+    expect(PROCESS_BLUEPRINT_SIZE.compact.goalRowHeight).toBeLessThan(
+      PROCESS_BLUEPRINT_SIZE.normal.goalRowHeight,
+    );
+  });
+});

package/src/activities/layout.ts

@@ -1,13 +1,18 @@
 import type { ActivityDoc, Activity, ActivitiesLayout, ActivitiesLayoutOptions, LayoutNode, LayoutEdge } from './types.js';
 import { computeCpm } from './cpm.js';
 
-const NODE_W = 200;
-const NODE_H = 80;
+const DEFAULT_NODE_W = 250;
+const DEFAULT_NODE_H = 80;
 const H_GAP = 80;
 const V_GAP = 24;
 
 export function layoutActivities(doc: ActivityDoc, options: ActivitiesLayoutOptions = {}): ActivitiesLayout {
-  const { horizontalGap = H_GAP, verticalGap = V_GAP } = options;
+  const {
+    horizontalGap = H_GAP,
+    verticalGap = V_GAP,
+    nodeWidth = DEFAULT_NODE_W,
+    nodeHeight = DEFAULT_NODE_H,
+  } = options;
   const activities = doc.activities;
   if (activities.length === 0) {
     return { nodes: [], edges: [], bounds: { x: 0, y: 0, width: 0, height: 0 } };
@@ -70,21 +75,21 @@ export function layoutActivities(doc: ActivityDoc, options: ActivitiesLayoutOpti
 
   for (let c = 0; c < colCount; c++) {
     const list = cols.get(c) ?? [];
-    const x = c * (NODE_W + horizontalGap);
+    const x = c * (nodeWidth + horizontalGap);
     let y = 0;
     for (const a of list) {
       const node: LayoutNode = {
         id: a.id,
         x,
         y,
-        width: NODE_W,
-        height: NODE_H,
+        width: nodeWidth,
+        height: nodeHeight,
         data: a,
         cpm: cpm.get(a.id),
       };
       nodes.push(node);
       nodeMap.set(a.id, node);
-      y += NODE_H + verticalGap;
+      y += nodeHeight + verticalGap;
     }
   }
 

package/src/activities/types.ts

@@ -100,6 +100,10 @@ export interface ActivitiesLayoutOptions {
   horizontalGap?: number;
   /** Vertical gap (px) between stacked activity nodes. Default matches the historical hardcoded value. */
   verticalGap?: number;
+  /** Activity node width (px). Default 200. */
+  nodeWidth?: number;
+  /** Activity node height (px). Default 80. */
+  nodeHeight?: number;
 }
 
 // ── Gantt view (spec §9) ─────────────────────────────────────────────────────

package/src/blocks/__tests__/layout.test.ts

@@ -118,8 +118,8 @@ describe('layoutNestedBlocks', () => {
       },
     });
     const a = layout.blocks[0];
-    expect(a.width).toBe(160);
-    expect(a.height).toBe(72);
+    expect(a.width).toBe(250);
+    expect(a.height).toBe(80);
   });
 
   it('honours custom layout options', () => {

package/src/blocks/layout.ts

@@ -5,10 +5,11 @@ import type {
   BlocksLayoutOptions,
   LaidOutBlock,
 } from './types.js';
+import { ENTITY_NODE_SIZE } from '../node-size-presets.js';
 
 const DEFAULTS: Required<BlocksLayoutOptions> = {
-  leafWidth: 160,
-  leafHeight: 72,
+  leafWidth: ENTITY_NODE_SIZE.normal.width,
+  leafHeight: ENTITY_NODE_SIZE.normal.height,
   padding: 12,
   headerHeight: 28,
   childGap: 12,

package/src/capability-map/dsm-layout.ts

@@ -2,7 +2,7 @@ import type { CapabilityMap, LayoutOptions, CapabilityMapLayout, LaidOutNode, La
 import { getLevel, getParentAddress } from './address.js';
 
 const DEFAULT_NODE_WIDTH = 250;
-const DEFAULT_NODE_HEIGHT = 64;
+const DEFAULT_NODE_HEIGHT = 80;
 const DEFAULT_RANK_SEP = 80;
 const DEFAULT_NODE_SEP = 24;
 /** Width of the virtual organisation-root node — narrower than a capability

package/src/capability-map/dsm-schema.ts

@@ -1,5 +1,5 @@
 /**
- * Types for the DSM-migration capability map (docs/extraction/capability-map.md).
+// Types for the DSM-migration capability map (docs/internal/extraction/capability-map.md).
  *
  * Distinct from `./types.ts` (`CapabilityNode`/`CapabilityMapFile`), which is
  * Transitrix's own native `*.capability-map.transitrix.yaml` notation — a

package/src/capability-map/index.ts

@@ -18,7 +18,7 @@ export { layoutCapabilityTree, TREE_NODE_WIDTH, TREE_NODE_HEIGHT, TREE_RANK_SEP,
 export type { RenderCapabilityTreeOptions } from './render-capability-tree.js';
 export { renderCapabilityTreeSvg } from './render-capability-tree.js';
 
-// ── DSM-migration capability map (docs/extraction/capability-map.md) ───────
+// ── DSM-migration capability map (docs/internal/extraction/capability-map.md) ───────
 // A separate, flat, address-triple data model from CapabilityNode above —
 // see dsm-schema.ts for why the two coexist in this folder. Named
 // `validateCapabilityMapData` rather than `validateCapabilityMap` because

package/src/capability-map/layout-tree.ts

@@ -1,7 +1,7 @@
 import type { CapabilityNode, CapabilityMapHeader } from './types.js';
 
 export const TREE_NODE_WIDTH = 250;
-export const TREE_NODE_HEIGHT = 64;
+export const TREE_NODE_HEIGHT = 80;
 /** Gap between sibling columns (node width + rank sep = 330px, matching DSM). */
 export const TREE_RANK_SEP = 80;
 /** Vertical gap between sibling nodes. */
@@ -40,10 +40,18 @@ export interface CapabilityTreeLayout {
   levelCounts: CapabilityTreeLevelCounts;
 }
 
+export interface CapabilityTreeLayoutOptions {
+  nodeWidth?: number;
+  nodeHeight?: number;
+}
+
 export function layoutCapabilityTree(
   map: CapabilityMapHeader,
   collapsedIds: Set<string> = new Set(),
+  options: CapabilityTreeLayoutOptions = {},
 ): CapabilityTreeLayout {
+  const nodeWidth = options.nodeWidth ?? TREE_NODE_WIDTH;
+  const nodeHeight = options.nodeHeight ?? TREE_NODE_HEIGHT;
   const nodes: CapabilityTreeNode[] = [];
   const edges: CapabilityTreeEdge[] = [];
 
@@ -60,13 +68,13 @@ export function layoutCapabilityTree(
     const hasChildren = Boolean(node.children?.length);
     const visibleChildren = !isCollapsed && node.children?.length ? node.children : [];
 
-    const x = depth * (TREE_NODE_WIDTH + TREE_RANK_SEP);
+    const x = depth * (nodeWidth + TREE_RANK_SEP);
 
     if (visibleChildren.length === 0) {
       const y = getNextY(depth);
-      advanceY(depth, TREE_NODE_HEIGHT + TREE_NODE_SEP);
-      nodes.push({ id: node.id, x, y, width: TREE_NODE_WIDTH, height: TREE_NODE_HEIGHT, data: node, depth, hasChildren, isCollapsed });
-      return { top: y, bottom: y + TREE_NODE_HEIGHT };
+      advanceY(depth, nodeHeight + TREE_NODE_SEP);
+      nodes.push({ id: node.id, x, y, width: nodeWidth, height: nodeHeight, data: node, depth, hasChildren, isCollapsed });
+      return { top: y, bottom: y + nodeHeight };
     }
 
     const childSpans: Array<{ top: number; bottom: number }> = [];
@@ -77,14 +85,14 @@ export function layoutCapabilityTree(
 
     const spanTop = Math.min(...childSpans.map(s => s.top));
     const spanBottom = Math.max(...childSpans.map(s => s.bottom));
-    const parentY = spanTop + (spanBottom - spanTop) / 2 - TREE_NODE_HEIGHT / 2;
+    const parentY = spanTop + (spanBottom - spanTop) / 2 - nodeHeight / 2;
 
     const curColY = getNextY(depth);
     const finalY = Math.max(parentY, curColY);
-    advanceY(depth, finalY - curColY + TREE_NODE_HEIGHT + TREE_NODE_SEP);
+    advanceY(depth, finalY - curColY + nodeHeight + TREE_NODE_SEP);
 
-    nodes.push({ id: node.id, x, y: finalY, width: TREE_NODE_WIDTH, height: TREE_NODE_HEIGHT, data: node, depth, hasChildren, isCollapsed });
-    return { top: Math.min(finalY, spanTop), bottom: Math.max(finalY + TREE_NODE_HEIGHT, spanBottom) };
+    nodes.push({ id: node.id, x, y: finalY, width: nodeWidth, height: nodeHeight, data: node, depth, hasChildren, isCollapsed });
+    return { top: Math.min(finalY, spanTop), bottom: Math.max(finalY + nodeHeight, spanBottom) };
   }
 
   for (const root of map.capabilities) {

package/src/capability-map/render-capability-tree.ts

@@ -1,13 +1,13 @@
 import type { CapabilityMapHeader } from './types.js';
-import { layoutCapabilityTree, TREE_NODE_WIDTH, TREE_NODE_HEIGHT, TREE_NODE_SEP } from './layout-tree.js';
+import { layoutCapabilityTree, TREE_NODE_SEP } from './layout-tree.js';
 import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
+import { parseNodeSizePreset, resolveCapabilityMapNodeSize, type NodeSizePreset } from '../node-size-presets.js';
+import { maxCharsForInnerWidth, truncateLine } from '../webview/entity-text-layout.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+'] as const;
 
@@ -17,30 +17,19 @@ function depthBand(depth: number): 0 | 1 | 2 {
   return 2;
 }
 
-function truncate(s: string, max: number, trim: number): string {
-  return s.length > max ? s.slice(0, trim) + '…' : s;
-}
-
 export interface RenderCapabilityTreeOptions {
   collapsedIds?: Set<string>;
   curvature?: number;
+  nodeSizePreset?: NodeSizePreset;
 }
 
-/**
- * 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: CapabilityMapHeader,
   opts: RenderCapabilityTreeOptions = {},
 ): string {
-  const { collapsedIds = new Set(), curvature = DEFAULT_EDGE_CURVATURE } = opts;
-  const layout = layoutCapabilityTree(map, collapsedIds);
+  const { collapsedIds = new Set(), curvature = DEFAULT_EDGE_CURVATURE, nodeSizePreset = 'normal' } = opts;
+  const nodeSize = resolveCapabilityMapNodeSize(parseNodeSizePreset(nodeSizePreset));
+  const layout = layoutCapabilityTree(map, collapsedIds, nodeSize);
 
   if (layout.nodes.length === 0) {
     return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
@@ -70,23 +59,22 @@ export function renderCapabilityTreeSvg(
     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 textAreaW = Math.max(0, n.width - badgeW - 26);
+    const maxChars = maxCharsForInnerWidth(textAreaW, 7);
+    const nameText = truncateLine(n.data.name, maxChars);
+    const nameTitle = n.data.name.length > maxChars ? escXml(n.data.name) : '';
+
     const badgeX = x + 10;
-    const badgeY = y + (TREE_NODE_HEIGHT - badgeH) / 2;
+    const badgeY = y + (n.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;
+    const nameY = y + n.height / 2 - 8;
+    const idY = y + n.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 btnCx = x + n.width;
+    const btnCy = y + n.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}"/>
@@ -94,7 +82,7 @@ export function renderCapabilityTreeSvg(
       : '';
 
     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-level-${band}" x="${x}" y="${y}" width="${n.width}" height="${n.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>

package/src/fgca/preview-layout.ts

@@ -1,6 +1,6 @@
-// Pure column-layout geometry for the static FGCA / FGA previews.
+// Pure column-layout geometry for the static DGCA / DGA previews.
 //
-// This is the layout the Studio extension's `fgca-preview.ts` renders to SVG
+// This is the layout the Studio extension's `dgca-preview.ts` renders to SVG
 // (NOT the ReactFlow `buildFGCALayout` in `./layout.ts`, which targets the
 // interactive web UI). It lives here — rather than inline in the extension —
 // so the gap geometry is unit-testable: the extension has no test harness.
@@ -8,6 +8,7 @@
 // No React, no DOM, no vscode. Safe to call in Node.js or a test environment.
 
 import type { Scope } from '../scope.js';
+import { ENTITY_NODE_SIZE } from '../node-size-presets.js';
 
 export type FGCAPreviewColumn = 'driver' | 'goal' | 'change' | 'activity';
 
@@ -33,7 +34,7 @@ export interface FGCAPreviewActivity {
   goal_id?: number | string | null;
 }
 
-/** Structural input the preview layout needs — a subset of the parsed FGCA/FGA doc. */
+/** Structural input the preview layout needs — a subset of the parsed DGCA/DGA doc. */
 export interface FGCAPreviewDoc {
   factors: FGCAPreviewFactor[];
   goals: FGCAPreviewGoal[];
@@ -42,7 +43,7 @@ export interface FGCAPreviewDoc {
 }
 
 export interface FGCAPreviewLayoutOptions {
-  /** FGA hides the Changes column and links Goal → Activity directly. */
+  /** DGA hides the Changes column and links Goal → Activity directly. */
   hideChanges?: boolean;
   /** Horizontal gap (px) between columns. Default matches the historical hardcoded value. */
   colGap?: number;
@@ -50,12 +51,16 @@ export interface FGCAPreviewLayoutOptions {
   rowGap?: number;
   /** Trim to a level cap or a single root goal (vkgeorgia/strategy#77). Defaults to 'all'. */
   scope?: Scope;
+  /** Entity node width (px). Default {@link FGCA_NODE_W}. */
+  nodeWidth?: number;
+  /** Entity node height (px). Default {@link FGCA_NODE_H}. */
+  nodeHeight?: number;
 }
 
 /**
- * Trims an FGCA/FGA doc to a scope (vkgeorgia/strategy#77).
+ * Trims a DGCA/DGA doc to a scope.
  *
- * FGCA/FGA goals are flat (no parent_id), so:
+ * DGCA/DGA goals are flat (no parent_id), so:
  *   - 'level' → goals with `(level ?? 0) <= maxLevel`.
  *   - 'root'  → the single goal whose id matches `rootGoalId` (empty when absent).
  *
@@ -119,10 +124,10 @@ export interface FGCAPreviewLayout {
   height: number;
 }
 
-// Fixed node + frame geometry. Only the inter-node gaps are user-configurable
-// (vkgeorgia/strategy#75); node size and padding stay constant.
-export const FGCA_NODE_W = 220;
-export const FGCA_NODE_H = 72;
+// Default node + frame geometry. Inter-node gaps are user-configurable via
+// Inter-node gaps are user-configurable via spacing settings; node size uses presets.
+export const FGCA_NODE_W = ENTITY_NODE_SIZE.normal.width;
+export const FGCA_NODE_H = ENTITY_NODE_SIZE.normal.height;
 export const FGCA_HEADER_H = 32;
 export const FGCA_PAD = 20;
 export const FGCA_DEFAULT_COL_GAP = 160;
@@ -137,12 +142,14 @@ export function layoutFGCAPreview(
     colGap = FGCA_DEFAULT_COL_GAP,
     rowGap = FGCA_DEFAULT_ROW_GAP,
     scope = { mode: 'all' },
+    nodeWidth = FGCA_NODE_W,
+    nodeHeight = FGCA_NODE_H,
   } = options;
 
   // Trim to scope first; everything below lays out the visible subset only.
   const doc = selectScopedFGCA(inputDoc, scope);
 
-  const colStride = FGCA_NODE_W + colGap;
+  const colStride = nodeWidth + colGap;
   const cols: FGCAPreviewColumn[] = hideChanges
     ? ['driver', 'goal', 'activity']
     : ['driver', 'goal', 'change', 'activity'];
@@ -206,7 +213,7 @@ export function layoutFGCAPreview(
   const nodeMap = new Map<string, FGCAPreviewNode>();
   const nodes: FGCAPreviewNode[] = [];
   const columns: FGCAPreviewColumnPos[] = [];
-  const yCenters = new Map<string, number>(); // nodeId → y + FGCA_NODE_H / 2
+  const yCenters = new Map<string, number>(); // nodeId → y + nodeHeight / 2
 
   for (let ci = 0; ci < cols.length; ci++) {
     const col = cols[ci];
@@ -218,8 +225,8 @@ export function layoutFGCAPreview(
       const node: FGCAPreviewNode = { 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;
+      yCenters.set(item.id, y + nodeHeight / 2);
+      y += nodeHeight + rowGap;
     }
   }
 
@@ -228,7 +235,7 @@ export function layoutFGCAPreview(
     const s = nodeMap.get(sourceId);
     const t = nodeMap.get(targetId);
     if (!s || !t) return;
-    edges.push({ sx: s.x + FGCA_NODE_W, sy: s.y + FGCA_NODE_H / 2, tx: t.x, ty: t.y + FGCA_NODE_H / 2 });
+    edges.push({ sx: s.x + nodeWidth, sy: s.y + nodeHeight / 2, tx: t.x, ty: t.y + nodeHeight / 2 });
   }
 
   for (const g of doc.goals) {
@@ -259,8 +266,8 @@ export function layoutFGCAPreview(
   }
 
   const maxNodeBottom = nodes.reduce(
-    (m, n) => Math.max(m, n.y + FGCA_NODE_H),
-    FGCA_PAD + FGCA_HEADER_H + rowGap + FGCA_NODE_H,
+    (m, n) => Math.max(m, n.y + nodeHeight),
+    FGCA_PAD + FGCA_HEADER_H + rowGap + nodeHeight,
   );
   const width = FGCA_PAD * 2 + cols.length * colStride - colGap;
   const height = maxNodeBottom + FGCA_PAD;