@transitrix/diagrams 1.7.6 → 1.8.1

package/dist/webview/render-blocks.js

@@ -13,63 +13,12 @@
  * title `<text>`.
  */
 import { layoutNestedBlocks } from '../blocks/layout.js';
+import { parseNodeSizePreset, resolveBlocksLeafSize } from '../node-size-presets.js';
 import { generateSvgEmbedCss } from '../theme/index.js';
+import { emitCenteredTextSvg, layoutHeaderBlockText, layoutLeafBlockText, } from './entity-text-layout.js';
 import { escXml } from './render-util.js';
 import { ENTITY_NODE_RX } from './notation-style.js';
 const PAD = 24;
-// Approximate character width (px) at text-primary size (12px/600).
-const CHAR_W = 7;
-// Approximate character width (px) at text-id size (10px/600).
-const CHAR_W_ID = 6;
-// Vertical spacing between line centres.
-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, maxChars, maxLines) {
-    const safeMax = Math.max(2, maxChars);
-    const words = text.split(' ');
-    const lines = [];
-    let cur = '';
-    for (let i = 0; i < words.length; i++) {
-        const w = words[i];
-        const next = cur ? `${cur} ${w}` : w;
-        if (next.length <= safeMax) {
-            cur = next;
-        }
-        else {
-            if (cur)
-                lines.push(cur);
-            cur = '';
-            if (lines.length >= maxLines)
-                break;
-            if (lines.length === maxLines - 1) {
-                const rest = words.slice(i).join(' ');
-                lines.push(rest.length <= safeMax ? rest : rest.slice(0, safeMax - 1) + '…');
-                return lines;
-            }
-            cur = w.length <= safeMax ? w : w.slice(0, safeMax - 1) + '…';
-        }
-    }
-    if (cur && lines.length < maxLines)
-        lines.push(cur);
-    return lines.length ? lines : [text.slice(0, safeMax - 1) + '…'];
-}
-/** Split an ID (no spaces) across at most 2 lines, breaking at `_` or `-`. */
-function wrapId(id, maxChars) {
-    if (id.length <= maxChars)
-        return [id];
-    const seg = id.slice(0, maxChars);
-    const sepIdx = Math.max(seg.lastIndexOf('_'), seg.lastIndexOf('-'));
-    const cut = sepIdx > Math.floor(maxChars / 3) ? sepIdx : maxChars - 1;
-    const isSep = id[cut] === '_' || id[cut] === '-';
-    const line1 = id.slice(0, cut);
-    const rest = id.slice(cut + (isSep ? 1 : 0));
-    return [line1, rest.length <= maxChars ? rest : rest.slice(0, maxChars - 1) + '…'];
-}
 /**
  * Pick the diagram-frame level class for a block at the given depth.
  *
@@ -82,67 +31,32 @@ function levelClassForDepth(depth) {
     const idx = Math.min(Math.max(depth - 1, 0), 6);
     return `level-${idx}`;
 }
-// Reserve a small horizontal margin so text never abuts the rounded corners.
-const TEXT_MARGIN_X = 8;
-/** Truncate `text` to at most `maxChars` characters, at a word boundary when possible. */
-function truncateLine(text, maxChars) {
-    const safeMax = Math.max(2, maxChars);
-    if (text.length <= safeMax)
-        return text;
-    const cut = text.slice(0, safeMax - 1);
-    const lastSpace = cut.lastIndexOf(' ');
-    return (lastSpace > safeMax / 2 ? cut.slice(0, lastSpace) : cut) + '…';
-}
-/** Single-line ID truncation that prefers `_`/`-` separators before falling back to a hard cut. */
-function truncateId(id, maxChars) {
-    const safeMax = Math.max(2, maxChars);
-    if (id.length <= safeMax)
-        return id;
-    const cut = id.slice(0, safeMax - 1);
-    const sepIdx = Math.max(cut.lastIndexOf('_'), cut.lastIndexOf('-'));
-    return (sepIdx > safeMax / 3 ? cut.slice(0, sepIdx) : cut) + '…';
-}
 function emitBlockSvg(b, ox, oy, parts) {
     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="${ENTITY_NODE_RX}"/>`);
-    const innerW = Math.max(0, b.width - TEXT_MARGIN_X * 2);
     const isLeaf = b.children.length === 0;
     if (isLeaf) {
-        // Leaf block: name (up to 3 lines) then ID (up to 2 lines), centred vertically.
-        const maxCharsName = Math.max(4, Math.floor(innerW / CHAR_W));
-        const maxCharsId = Math.max(4, Math.floor(innerW / CHAR_W_ID));
-        const nameLines = wrapWords(b.name, maxCharsName, 3);
-        const idLines = wrapId(b.id, maxCharsId);
-        const nameTotalSpan = (nameLines.length - 1) * LINE_H;
-        const idTotalSpan = (idLines.length - 1) * LINE_H_ID;
-        const totalSpan = nameTotalSpan + NAME_ID_GAP + idTotalSpan;
-        const firstY = Math.round(b.y + oy + (b.height - totalSpan) / 2);
-        for (let i = 0; i < nameLines.length; i++) {
-            parts.push(`<text class="text-primary" x="${cx}" y="${firstY + i * LINE_H}" text-anchor="middle" dominant-baseline="central">${escXml(nameLines[i])}</text>`);
-        }
-        const idFirstY = firstY + nameTotalSpan + NAME_ID_GAP;
-        for (let i = 0; i < idLines.length; i++) {
-            parts.push(`<text class="text-id" x="${cx}" y="${idFirstY + i * LINE_H_ID}" text-anchor="middle" dominant-baseline="central">${escXml(idLines[i])}</text>`);
-        }
+        const specs = layoutLeafBlockText({
+            boxX: b.x + ox,
+            boxY: b.y + oy,
+            boxWidth: b.width,
+            boxHeight: b.height,
+            name: b.name,
+            id: b.id,
+        });
+        parts.push(emitCenteredTextSvg(specs, cx, escXml));
     }
     else {
-        // Container block: name (text-primary) above, ID (text-id, grey) below — both
-        // single-line, truncated with `…` to fit within `b.width`. The header strip is
-        // only `headerHeight` tall (default 28px), which is enough for one line each at
-        // the configured text sizes. Stacking the ID as its own text-id element keeps
-        // the wrapping/truncation rule consistent with leaves and guarantees no overflow
-        // for any combination of name/ID length.
-        const maxCharsName = Math.max(4, Math.floor(innerW / CHAR_W));
-        const maxCharsId = Math.max(4, Math.floor(innerW / CHAR_W_ID));
-        const nameText = truncateLine(b.name, maxCharsName);
-        const idText = truncateId(b.id, maxCharsId);
-        const headerMid = b.y + oy + b.headerHeight / 2;
-        const halfSpan = (LINE_H + LINE_H_ID) / 4;
-        const nameY = Math.round(headerMid - halfSpan);
-        const idY = Math.round(headerMid + halfSpan);
-        parts.push(`<text class="text-primary" x="${cx}" y="${nameY}" text-anchor="middle" dominant-baseline="central">${escXml(nameText)}</text>`);
-        parts.push(`<text class="text-id" x="${cx}" y="${idY}" text-anchor="middle" dominant-baseline="central">${escXml(idText)}</text>`);
+        const specs = layoutHeaderBlockText({
+            boxX: b.x + ox,
+            boxY: b.y + oy,
+            boxWidth: b.width,
+            headerHeight: b.headerHeight,
+            name: b.name,
+            id: b.id,
+        });
+        parts.push(emitCenteredTextSvg(specs, cx, escXml));
         for (const c of b.children)
             emitBlockSvg(c, ox, oy, parts);
     }
@@ -176,8 +90,13 @@ ${parts.join('\n')}
  * with the shared theme CSS embedded so the output is self-contained.
  */
 export function renderBlocksSvg(doc, options = {}) {
-    const { title = '' } = options;
-    const layout = layoutNestedBlocks(doc);
+    const { title = '', nodeSizePreset = 'normal', layoutOptions } = options;
+    const leaf = resolveBlocksLeafSize(parseNodeSizePreset(nodeSizePreset));
+    const layout = layoutNestedBlocks(doc, {
+        leafWidth: leaf.width,
+        leafHeight: leaf.height,
+        ...layoutOptions,
+    });
     if (layout.blocks.length === 0) {
         return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
     }

package/dist/webview/render-fgca.d.ts

@@ -1,22 +1,27 @@
 /**
- * Browser-safe SVG renderer for the canonical FGCA and FGA notations.
+ * Browser-safe SVG renderer for the canonical DGCA and DGA notations.
  *
  * Step 4 of the IntelliJ epic (ADR 0001): the webview bundle must turn a
- * validated FGCA/FGA document into renderable SVG so JCEF can drop it into the
- * preview panel. The VS Code path lives in `extension/src/fgca-preview.ts` and
+ * validated DGCA/DGA document into renderable SVG so JCEF can drop it into the
+ * preview panel. The VS Code path lives in `extension/src/dgca-preview.ts` and
  * pulls in VS Code-specific concerns (themes, title block, save dialogs,
  * spacing/scope controls); this module is the host-neutral subset — pure
  * column layout → SVG with no VS Code APIs, no `node:fs`, no `node:path`.
  *
- * FGCA and FGA share the same renderer; FGA only differs by hiding the
+ * DGCA and DGA share the same renderer; DGA only differs by hiding the
  * `change` column (`hideChanges` / the layout's Goal → Activity collapse),
  * exactly as the extension preview does.
  */
 import { layoutFGCAPreview } from '../fgca/preview-layout.js';
 import type { FGCADoc } from '../fgca/validate.js';
+import { type NodeSizePreset } from '../node-size-presets.js';
 type FgcaLayout = ReturnType<typeof layoutFGCAPreview>;
+export interface RenderFgcaBodyOptions {
+    nodeWidth?: number;
+    nodeHeight?: number;
+}
 /**
- * Canonical FGCA/FGA body — the column headers, node rects and edge paths that
+ * Canonical DGCA/DGA body — the column headers, node rects and edge paths that
  * go inside the `<svg>`, shared verbatim by the VS Code preview (`buildSvg`)
  * and the host-neutral wrapper below. Excludes the host-specific title block
  * and the (identical) `<defs>` arrow marker. Coordinates are absolute (the
@@ -24,16 +29,18 @@ type FgcaLayout = ReturnType<typeof layoutFGCAPreview>;
  * to make room for its title block, while the host-neutral wrapper renders it
  * untranslated.
  */
-export declare function renderFgcaBody(columns: FgcaLayout['columns'], nodes: FgcaLayout['nodes'], edges: FgcaLayout['edges'], curvature: number, entryCurvature: number | undefined): string;
+export declare function renderFgcaBody(columns: FgcaLayout['columns'], nodes: FgcaLayout['nodes'], edges: FgcaLayout['edges'], curvature: number, entryCurvature: number | undefined, bodyOptions?: RenderFgcaBodyOptions): string;
 export interface RenderFgcaOptions {
-    /** `'fga'` hides the Changes column; defaults to `'fgca'`. */
-    variant?: 'fgca' | 'fga';
+    /** `'dga'` hides the Changes column; defaults to `'dgca'`. */
+    variant?: 'dgca' | 'dga';
     /** Optional heading rendered as a left-anchored `text-header` line. */
     title?: string;
     /** Exit edge curvature; 1 = default, 0 = straight, higher = stronger arc. */
     curvature?: number;
     /** Entry curvature at the target node; defaults to `curvature` when omitted. */
     entryCurvature?: number;
+    nodeSizePreset?: NodeSizePreset;
+    layoutOptions?: Parameters<typeof layoutFGCAPreview>[1];
 }
 export declare function renderFgcaSvg(doc: FGCADoc, options?: RenderFgcaOptions): string;
 export {};

package/dist/webview/render-fgca.js

@@ -1,20 +1,22 @@
 /**
- * Browser-safe SVG renderer for the canonical FGCA and FGA notations.
+ * Browser-safe SVG renderer for the canonical DGCA and DGA notations.
  *
  * Step 4 of the IntelliJ epic (ADR 0001): the webview bundle must turn a
- * validated FGCA/FGA document into renderable SVG so JCEF can drop it into the
- * preview panel. The VS Code path lives in `extension/src/fgca-preview.ts` and
+ * validated DGCA/DGA document into renderable SVG so JCEF can drop it into the
+ * preview panel. The VS Code path lives in `extension/src/dgca-preview.ts` and
  * pulls in VS Code-specific concerns (themes, title block, save dialogs,
  * spacing/scope controls); this module is the host-neutral subset — pure
  * column layout → SVG with no VS Code APIs, no `node:fs`, no `node:path`.
  *
- * FGCA and FGA share the same renderer; FGA only differs by hiding the
+ * DGCA and DGA share the same renderer; DGA only differs by hiding the
  * `change` column (`hideChanges` / the layout's Goal → Activity collapse),
  * exactly as the extension preview does.
  */
-import { layoutFGCAPreview, FGCA_NODE_W as NODE_W, FGCA_NODE_H as NODE_H, FGCA_HEADER_H as HEADER_H, FGCA_PAD as PAD, } from '../fgca/preview-layout.js';
+import { layoutFGCAPreview, FGCA_NODE_W, FGCA_NODE_H, FGCA_HEADER_H as HEADER_H, FGCA_PAD as PAD, } from '../fgca/preview-layout.js';
 import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
+import { parseNodeSizePreset, resolveDgcaNodeSize } from '../node-size-presets.js';
 import { generateSvgEmbedCss } from '../theme/index.js';
+import { emitCenteredTextSvg, layoutCenteredEntityText, truncateLine } from './entity-text-layout.js';
 import { escXml } from './render-util.js';
 const COL_LABELS = {
     driver: 'Drivers (D)',
@@ -23,7 +25,7 @@ const COL_LABELS = {
     activity: 'Actions (A)',
 };
 /**
- * Canonical FGCA/FGA body — the column headers, node rects and edge paths that
+ * Canonical DGCA/DGA body — the column headers, node rects and edge paths that
  * go inside the `<svg>`, shared verbatim by the VS Code preview (`buildSvg`)
  * and the host-neutral wrapper below. Excludes the host-specific title block
  * and the (identical) `<defs>` arrow marker. Coordinates are absolute (the
@@ -31,11 +33,14 @@ const COL_LABELS = {
  * to make room for its title block, while the host-neutral wrapper renders it
  * untranslated.
  */
-export function renderFgcaBody(columns, nodes, edges, curvature, entryCurvature) {
+export function renderFgcaBody(columns, nodes, edges, curvature, entryCurvature, bodyOptions = {}) {
+    const nodeWidth = bodyOptions.nodeWidth ?? FGCA_NODE_W;
+    const nodeHeight = bodyOptions.nodeHeight ?? FGCA_NODE_H;
+    const headerTruncate = Math.max(8, Math.floor((nodeWidth - 16) / 7));
     const headerSvg = columns
         .map(({ col, x }) => [
-        `<rect class="diagram-node layer-${col}" x="${x}" y="${PAD}" width="${NODE_W}" height="${HEADER_H}" rx="6"/>`,
-        `<text class="text-header" x="${x + NODE_W / 2}" y="${PAD + HEADER_H / 2}" text-anchor="middle" dominant-baseline="central">${escXml(COL_LABELS[col])}</text>`,
+        `<rect class="diagram-node layer-${col}" x="${x}" y="${PAD}" width="${nodeWidth}" height="${HEADER_H}" rx="6"/>`,
+        `<text class="text-header" x="${x + nodeWidth / 2}" y="${PAD + HEADER_H / 2}" text-anchor="middle" dominant-baseline="central">${escXml(truncateLine(COL_LABELS[col], headerTruncate))}</text>`,
     ].join('\n'))
         .join('\n');
     const edgeSvg = edges
@@ -43,54 +48,46 @@ export function renderFgcaBody(columns, nodes, edges, curvature, entryCurvature)
         .join('\n');
     const nodeSvg = nodes
         .map((n) => {
-        const words = n.label.split(' ');
-        let line1 = '';
-        let line2 = '';
-        for (const w of words) {
-            if ((line1 + ' ' + w).trim().length <= 26) {
-                line1 = (line1 + ' ' + w).trim();
-            }
-            else if ((line2 + ' ' + w).trim().length <= 26) {
-                line2 = (line2 + ' ' + w).trim();
-            }
-            else if (!line2) {
-                line2 = w.slice(0, 24) + '…';
-                break;
-            }
-        }
-        const twoLines = line2.length > 0;
-        const y1 = twoLines ? n.y + 16 : n.y + 26;
-        const y2 = n.y + 32;
-        const idY = twoLines ? n.y + 54 : n.y + 50;
         const entityId = n.id.slice(n.id.indexOf('_') + 1);
+        const specs = layoutCenteredEntityText({
+            boxX: n.x,
+            boxY: n.y,
+            boxWidth: nodeWidth,
+            boxHeight: nodeHeight,
+            name: n.label,
+            id: entityId,
+            nameMaxLines: 2,
+            idMaxLines: 1,
+        });
+        const textSvg = emitCenteredTextSvg(specs, n.x + nodeWidth / 2, escXml);
         return [
-            `<rect class="diagram-node layer-${n.col}" x="${n.x}" y="${n.y}" width="${NODE_W}" height="${NODE_H}" rx="8"/>`,
-            `<text class="text-primary" x="${n.x + NODE_W / 2}" y="${y1}" text-anchor="middle" dominant-baseline="central">${escXml(line1)}</text>`,
-            twoLines
-                ? `<text class="text-primary" x="${n.x + NODE_W / 2}" y="${y2}" text-anchor="middle" dominant-baseline="central">${escXml(line2)}</text>`
-                : '',
-            `<text class="text-id" x="${n.x + NODE_W / 2}" y="${idY}" text-anchor="middle" dominant-baseline="central">${escXml(entityId)}</text>`,
-        ]
-            .filter(Boolean)
-            .join('\n');
+            `<rect class="diagram-node layer-${n.col}" x="${n.x}" y="${n.y}" width="${nodeWidth}" height="${nodeHeight}" rx="8"/>`,
+            textSvg,
+        ].join('\n');
     })
         .join('\n');
     return `${headerSvg}\n${nodeSvg}\n${edgeSvg}`;
 }
 export function renderFgcaSvg(doc, options = {}) {
-    const { variant = 'fgca', title = '', curvature = DEFAULT_EDGE_CURVATURE, entryCurvature } = options;
-    const hideChanges = variant === 'fga';
-    const { nodes, edges, columns, width, height } = layoutFGCAPreview(doc, { hideChanges });
+    const { variant = 'dgca', title = '', curvature = DEFAULT_EDGE_CURVATURE, entryCurvature, nodeSizePreset = 'normal', layoutOptions, } = options;
+    const hideChanges = variant === 'dga';
+    const nodeSize = resolveDgcaNodeSize(parseNodeSizePreset(nodeSizePreset));
+    const { nodes, edges, columns, width, height } = layoutFGCAPreview(doc, {
+        hideChanges,
+        nodeWidth: nodeSize.width,
+        nodeHeight: nodeSize.height,
+        ...layoutOptions,
+    });
     if (nodes.length === 0) {
         return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
     }
-    const body = renderFgcaBody(columns, nodes, edges, curvature, entryCurvature);
+    const body = renderFgcaBody(columns, nodes, edges, curvature, entryCurvature, {
+        nodeWidth: nodeSize.width,
+        nodeHeight: nodeSize.height,
+    });
     const titleSvg = title
         ? `<text class="text-header" x="${PAD}" y="${PAD - 6}">${escXml(title)}</text>`
         : '';
-    // Embed the shared theme CSS inside the SVG so the rendered output is
-    // self-contained — the JCEF host page only needs to drop the SVG into the
-    // DOM and styling resolves without any cooperation from the host stylesheet.
     const embedCss = generateSvgEmbedCss('transitrix');
     return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
 <style>${embedCss}</style>

package/dist/webview/render-goals.d.ts

@@ -1,9 +1,11 @@
 import type { GoalTree, GoalTreeLayout } from '../goals/types.js';
+import { type NodeSizePreset } from '../node-size-presets.js';
 import { type ThemeId } from '../theme/index.js';
 export interface RenderGoalsOptions {
     treeName?: string;
     curvature?: number;
     entryCurvature?: number;
+    nodeSizePreset?: NodeSizePreset;
 }
 /**
  * Host-neutral goals renderer (IntelliJ/UI). Lays the tree out with the default

package/dist/webview/render-goals.js

@@ -2,8 +2,8 @@
  * Browser-safe SVG renderer for the canonical Goals notation.
  *
  * Step 3 of the IntelliJ epic (ADR 0001): the webview bundle must turn a
- * validated GoalTree into renderable SVG so JCEF can drop it into the preview
- * panel. The VS Code path lives in `extension/src/goals-preview.ts` and pulls
+ * validated GoalTree into renderable SVG so JCEF can drop it into the
+ * preview panel. The VS Code path lives in `extension/src/goals-preview.ts` and pulls
  * in VS Code-specific concerns (themes, title block, save dialogs); this
  * module is the host-neutral subset — pure layout → SVG with no VS Code APIs,
  * no `node:fs`, no `node:path`.
@@ -13,25 +13,25 @@
 import { layoutGoalTree } from '../goals/layout.js';
 import { displayGoalId } from '../goals/parse-canonical.js';
 import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
+import { parseNodeSizePreset, resolveGoalsNodeSize } from '../node-size-presets.js';
 import { generateSvgEmbedCss } from '../theme/index.js';
+import { emitCenteredTextSvg, layoutCenteredEntityText } from './entity-text-layout.js';
 import { escXml } from './render-util.js';
 import { ENTITY_NODE_RX } from './notation-style.js';
-const NODE_W = 250;
-const NODE_H = 72;
 const RANK_SEP = 100;
 const NODE_SEP = 24;
 const PAD = 24;
-const LABEL_CHARS = 30;
 /**
  * Host-neutral goals renderer (IntelliJ/UI). Lays the tree out with the default
  * spacing, then delegates the actual SVG emission to {@link renderGoalsLayoutSvg}
  * with the shared theme CSS embedded so the output is self-contained.
  */
 export function renderGoalsSvg(tree, options = {}) {
-    const { treeName = '', curvature = DEFAULT_EDGE_CURVATURE, entryCurvature } = options;
+    const { treeName = '', curvature = DEFAULT_EDGE_CURVATURE, entryCurvature, nodeSizePreset = 'normal' } = options;
+    const nodeSize = resolveGoalsNodeSize(parseNodeSizePreset(nodeSizePreset));
     const layout = layoutGoalTree(tree, {
-        nodeWidth: NODE_W,
-        nodeHeight: NODE_H,
+        nodeWidth: nodeSize.width,
+        nodeHeight: nodeSize.height,
         rankSep: RANK_SEP,
         nodeSep: NODE_SEP,
     });
@@ -41,10 +41,6 @@ export function renderGoalsSvg(tree, options = {}) {
     const title = treeName
         ? `<text class="text-header" x="${PAD}" y="${PAD - 6}">${escXml(`Goal tree — ${treeName}`)}</text>`
         : '';
-    // Embed the shared theme CSS so the JCEF host page only needs to drop the SVG
-    // into the DOM — styling resolves without help from the host stylesheet. The
-    // VS Code preview omits this (its webview supplies the CSS) and embeds it only
-    // on export via `prepareSvgForExport`.
     return renderGoalsLayoutSvg(layout, { curvature, entryCurvature, title, embedCssTheme: 'transitrix' });
 }
 /**
@@ -82,34 +78,23 @@ export function renderGoalsLayoutSvg(layout, options = {}) {
         const y = n.y + oy;
         const level = n.data.level % 8;
         const labelText = n.data.name ?? String(n.id);
-        const words = labelText.split(' ');
-        let line1 = '';
-        let line2 = '';
-        for (const w of words) {
-            if ((line1 + ' ' + w).trim().length <= LABEL_CHARS) {
-                line1 = (line1 + ' ' + w).trim();
-            }
-            else if ((line2 + ' ' + w).trim().length <= LABEL_CHARS) {
-                line2 = (line2 + ' ' + w).trim();
-            }
-            else if (!line2) {
-                line2 = w.slice(0, LABEL_CHARS - 2) + '…';
-                break;
-            }
-        }
-        const twoLines = line2.length > 0;
-        const nameY1 = twoLines ? y + 12 : y + 16;
-        const nameY2 = y + 26;
-        const typeY = twoLines ? y + 43 : y + 35;
-        const idY = twoLines ? y + 59 : y + 55;
         const typeLabel = n.data.type ?? '';
         const idText = displayGoalId(n.data);
+        const specs = layoutCenteredEntityText({
+            boxX: x,
+            boxY: y,
+            boxWidth: n.width,
+            boxHeight: n.height,
+            name: labelText,
+            type: typeLabel || undefined,
+            id: idText,
+            nameMaxLines: 2,
+            idMaxLines: 1,
+        });
+        const textSvg = emitCenteredTextSvg(specs, x + n.width / 2, escXml);
         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 ? `
-  <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>` : ''}
-  <text class="text-id" x="${x + n.width / 2}" y="${idY}" text-anchor="middle" dominant-baseline="central">${escXml(idText)}</text>
+  ${textSvg}
 </g>`;
     })
         .join('\n');

package/dist/webview/render-process-blueprint.d.ts

@@ -1,15 +1,9 @@
-import type { ProcessBlueprintFile, ProcessBlueprintLayout } from '../process-blueprint/types.js';
-/**
- * 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.
- */
+import type { ProcessBlueprintFile, ProcessBlueprintLayout, ProcessBlueprintLayoutOptions } from '../process-blueprint/types.js';
+import { type NodeSizePreset } from '../node-size-presets.js';
 export declare function renderProcessBlueprintBody(layout: ProcessBlueprintLayout, ox: number, oy: number, clipId?: string): string;
 export interface RenderProcessBlueprintOptions {
     title?: string;
+    nodeSizePreset?: NodeSizePreset;
+    layoutOptions?: ProcessBlueprintLayoutOptions;
 }
 export declare function renderProcessBlueprintSvg(doc: ProcessBlueprintFile, options?: RenderProcessBlueprintOptions): string;