@transitrix/diagrams 1.0.0 → 1.1.0

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

@@ -1,8 +1,39 @@
+/**
+ * Browser-safe SVG renderer for the canonical FGCA and FGA 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
+ * 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
+ * `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';
+type FgcaLayout = ReturnType<typeof layoutFGCAPreview>;
+/**
+ * Canonical FGCA/FGA 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
+ * layout's own); the VS Code path wraps this in a `translate(0, titleH)` group
+ * 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 interface RenderFgcaOptions {
     /** `'fga'` hides the Changes column; defaults to `'fgca'`. */
     variant?: 'fgca' | 'fga';
     /** 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;
 }
 export declare function renderFgcaSvg(doc: FGCADoc, options?: RenderFgcaOptions): string;
+export {};

package/dist/webview/render-fgca.js

@@ -17,29 +17,29 @@ import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js
 import { generateSvgEmbedCss } from '../theme/index.js';
 import { escXml } from './render-util.js';
 const COL_LABELS = {
-    factor: 'Factors (F)',
+    driver: 'Drivers (D)',
     goal: 'Goals (G)',
     change: 'Changes (C)',
     activity: 'Activities (A)',
 };
-export function renderFgcaSvg(doc, options = {}) {
-    const { variant = 'fgca', title = '' } = options;
-    const hideChanges = variant === 'fga';
-    const { nodes, edges, columns, width, height } = layoutFGCAPreview(doc, { hideChanges });
-    if (nodes.length === 0) {
-        return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
-    }
+/**
+ * Canonical FGCA/FGA 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
+ * layout's own); the VS Code path wraps this in a `translate(0, titleH)` group
+ * to make room for its title block, while the host-neutral wrapper renders it
+ * untranslated.
+ */
+export function renderFgcaBody(columns, nodes, edges, curvature, entryCurvature) {
     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>`,
     ].join('\n'))
         .join('\n');
-    // Cubic bezier with horizontal control handles (shared geometry in
-    // @transitrix/diagrams). Uses the package default curvature — the
-    // interactive curvature control is a VS Code-only concern.
     const edgeSvg = edges
-        .map((e) => `<path d="${horizontalCubicEdgePath(e.sx, e.sy, e.tx, e.ty, DEFAULT_EDGE_CURVATURE)}" class="diagram-edge" marker-end="url(#arrow)"/>`)
+        .map((e) => `<path d="${horizontalCubicEdgePath(e.sx, e.sy, e.tx, e.ty, curvature, entryCurvature)}" class="diagram-edge" marker-end="url(#arrow)"/>`)
         .join('\n');
     const nodeSvg = nodes
         .map((n) => {
@@ -59,19 +59,32 @@ export function renderFgcaSvg(doc, options = {}) {
             }
         }
         const twoLines = line2.length > 0;
-        const y1 = twoLines ? n.y + NODE_H / 2 - 8 : n.y + NODE_H / 2 + 5;
-        const y2 = y1 + 18;
+        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);
         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">${escXml(line1)}</text>`,
+            `<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-secondary" x="${n.x + NODE_W / 2}" y="${y2}" text-anchor="middle">${escXml(line2)}</text>`
+                ? `<text class="text-secondary" 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');
     })
         .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 });
+    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 titleSvg = title
         ? `<text class="text-header" x="${PAD}" y="${PAD - 6}">${escXml(title)}</text>`
         : '';
@@ -87,8 +100,6 @@ export function renderFgcaSvg(doc, options = {}) {
   </marker>
 </defs>
 ${titleSvg}
-${headerSvg}
-${nodeSvg}
-${edgeSvg}
+${body}
 </svg>`;
 }

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

@@ -1,6 +1,32 @@
-import type { GoalTree } from '../goals/types.js';
+import type { GoalTree, GoalTreeLayout } from '../goals/types.js';
+import { type ThemeId } from '../theme/index.js';
 export interface RenderGoalsOptions {
     treeName?: string;
     curvature?: number;
+    entryCurvature?: number;
 }
+/**
+ * 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 declare function renderGoalsSvg(tree: GoalTree, options?: RenderGoalsOptions): string;
+export interface RenderGoalsLayoutOptions {
+    curvature?: number;
+    entryCurvature?: number;
+    /** Extra vertical space reserved at the top of the canvas (e.g. for a title block). */
+    topInset?: number;
+    /** Raw SVG injected immediately after `<defs>` — a header line or a full title block. */
+    title?: string;
+    /** When set, the theme CSS is embedded as `<style>` so the SVG is self-contained. */
+    embedCssTheme?: ThemeId;
+}
+/**
+ * The single goals SVG emitter shared by every host. Takes an already-computed
+ * {@link GoalTreeLayout} (callers decide spacing/scope) and produces the `<svg>`.
+ * Hosts wrap it with their own chrome:
+ *   - IntelliJ/UI via {@link renderGoalsSvg} (embedded CSS + simple header);
+ *   - VS Code's goals preview (rich title block, no embedded CSS — the webview
+ *     and the export path own styling).
+ */
+export declare function renderGoalsLayoutSvg(layout: GoalTreeLayout, options?: RenderGoalsLayoutOptions): string;

package/dist/webview/render-goals.js

@@ -13,6 +13,7 @@
 import { layoutGoalTree } from '../goals/layout.js';
 import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
 import { generateSvgEmbedCss } from '../theme/index.js';
+import { escXml } from './render-util.js';
 const NODE_W = 250;
 const NODE_H = 60;
 const RANK_SEP = 100;
@@ -20,15 +21,13 @@ const NODE_SEP = 24;
 const PAD = 24;
 const LABEL_MAX = 36;
 const LABEL_TRIM = 34;
-function escXml(s) {
-    return s
-        .replace(/&/g, '&')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;');
-}
+/**
+ * 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 } = options;
+    const { treeName = '', curvature = DEFAULT_EDGE_CURVATURE, entryCurvature } = options;
     const layout = layoutGoalTree(tree, {
         nodeWidth: NODE_W,
         nodeHeight: NODE_H,
@@ -38,10 +37,29 @@ export function renderGoalsSvg(tree, options = {}) {
     if (layout.nodes.length === 0) {
         return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
     }
+    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' });
+}
+/**
+ * The single goals SVG emitter shared by every host. Takes an already-computed
+ * {@link GoalTreeLayout} (callers decide spacing/scope) and produces the `<svg>`.
+ * Hosts wrap it with their own chrome:
+ *   - IntelliJ/UI via {@link renderGoalsSvg} (embedded CSS + simple header);
+ *   - VS Code's goals preview (rich title block, no embedded CSS — the webview
+ *     and the export path own styling).
+ */
+export function renderGoalsLayoutSvg(layout, options = {}) {
+    const { curvature = DEFAULT_EDGE_CURVATURE, entryCurvature, topInset = 0, title = '', embedCssTheme } = options;
     const w = layout.bounds.width + PAD * 2;
-    const h = layout.bounds.height + PAD * 2;
+    const h = layout.bounds.height + PAD * 2 + topInset;
     const ox = -layout.bounds.x + PAD;
-    const oy = -layout.bounds.y + PAD;
+    const oy = -layout.bounds.y + PAD + topInset;
     const nodeMap = new Map(layout.nodes.map((n) => [n.id, n]));
     function edgePath(e) {
         const s = nodeMap.get(e.source);
@@ -52,7 +70,7 @@ export function renderGoalsSvg(tree, options = {}) {
         const sy = s.y + oy + s.height / 2;
         const tx = t.x + ox;
         const ty = t.y + oy + t.height / 2;
-        return horizontalCubicEdgePath(sx, sy, tx, ty, curvature);
+        return horizontalCubicEdgePath(sx, sy, tx, ty, curvature, entryCurvature);
     }
     const edgeSvg = layout.edges
         .map((e) => `<path d="${edgePath(e)}" class="diagram-edge" marker-end="url(#arrow)"/>`)
@@ -64,29 +82,21 @@ export function renderGoalsSvg(tree, options = {}) {
         const level = n.data.level % 8;
         const labelText = n.data.name ?? String(n.id);
         const label = labelText.length > LABEL_MAX ? labelText.slice(0, LABEL_TRIM) + '…' : labelText;
-        return `<g>
-  <rect class="diagram-node level-${level}" x="${x}" y="${y}" width="${n.width}" height="${n.height}" rx="8"/>
-  <text class="text-primary" x="${x + n.width / 2}" y="${y + n.height / 2}" text-anchor="middle" dominant-baseline="central">${escXml(label)}</text>
+        return `<g>
+  <rect class="diagram-node level-${level}" x="${x}" y="${y}" width="${n.width}" height="${n.height}" rx="8"/>
+  <text class="text-primary" x="${x + n.width / 2}" y="${y + n.height / 2}" text-anchor="middle" dominant-baseline="central">${escXml(label)}</text>
 </g>`;
     })
         .join('\n');
-    const titleSvg = treeName
-        ? `<text class="text-header" x="${PAD}" y="${PAD - 6}">${escXml(`Goal tree — ${treeName}`)}</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.
-    // Matches what the VS Code path produces via `prepareSvgForExport`.
-    const embedCss = generateSvgEmbedCss('transitrix');
-    return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
-<style>${embedCss}</style>
-<defs>
-  <marker id="arrow" markerWidth="8" markerHeight="8" refX="8" refY="3" orient="auto">
-    <path d="M0,0 L0,6 L8,3 z" class="arrow-fill"/>
-  </marker>
-</defs>
-${titleSvg}
-${nodeSvg}
-${edgeSvg}
+    const styleLine = embedCssTheme ? `\n<style>${generateSvgEmbedCss(embedCssTheme)}</style>` : '';
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">${styleLine}
+<defs>
+  <marker id="arrow" markerWidth="8" markerHeight="8" refX="8" refY="3" orient="auto">
+    <path d="M0,0 L0,6 L8,3 z" class="arrow-fill"/>
+  </marker>
+</defs>
+${title}
+${nodeSvg}
+${edgeSvg}
 </svg>`;
 }

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

@@ -1,4 +1,14 @@
-import type { ProcessBlueprintFile } from '../process-blueprint/types.js';
+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.
+ */
+export declare function renderProcessBlueprintBody(layout: ProcessBlueprintLayout, ox: number, oy: number, clipId?: string): string;
 export interface RenderProcessBlueprintOptions {
     title?: string;
 }

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

@@ -1,18 +1,26 @@
 /**
  * Host-neutral SVG renderer for the Process Blueprint notation.
  *
- * Step 4 of the IntelliJ epic (ADR 0001): ported from the pure SVG core of
- * `extension/src/process-blueprint-preview.ts` (`layoutToSvg`). The VS Code
- * title block (`svg-title-block.ts`) is intentionally dropped — JCEF has no
- * VS Code APIs — and replaced with `render-goals.ts`' simple optional
- * `<text class="text-header">` heading. No `vscode`, no `node:*`, no host APIs;
- * the shared theme CSS is embedded inside the `<svg>` so the output is
- * self-contained.
+ * Single-emitter unification (review C): the canonical blueprint body lives
+ * here in `renderProcessBlueprintBody` and is shared by both hosts. The VS Code
+ * preview (`extension/src/process-blueprint-preview.ts`) wraps it with the VS
+ * Code title block; this module wraps it with `render-goals.ts`' simple
+ * optional `<text class="text-header">` heading and embeds the shared theme CSS
+ * (plus the blueprint-specific `bp-*` rules) so the JCEF output is
+ * self-contained. No `vscode`, no `node:*`, no host APIs.
  */
 import { layoutProcessBlueprint } from '../process-blueprint/layout.js';
 import { generateSvgEmbedCss } from '../theme/index.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;
@@ -31,7 +39,9 @@ function textCellSvg(lines, cls, x, cellTop, cellHeight, lineHeight) {
     return `<text class="${cls}" dominant-baseline="central">${tspans}</text>`;
 }
 /**
- * Render a single compliance law chip.
+ * 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"`)
@@ -39,11 +49,10 @@ function textCellSvg(lines, cls, x, cellTop, cellHeight, lineHeight) {
  * - `deadline` — urgent fill override  (`class="…compliance-deadline"`) + a small
  *                badge circle in the top-right corner
  */
-function complianceChipSvg(chip, ox, oy) {
+function complianceChipSvg(chip, ox, oy, stageId) {
     const { x, y, width, height, lawId, decorations } = chip;
     const ax = x + ox;
     const ay = y + oy;
-    const rx = 6;
     const hasNew = decorations.includes('new');
     const hasGap = decorations.includes('gap');
     const hasDeadline = decorations.includes('deadline');
@@ -54,7 +63,7 @@ function complianceChipSvg(chip, ox, oy) {
         rectClass += ' compliance-gap';
     const strokeDash = hasNew ? ' stroke-dasharray="4 2"' : '';
     const parts = [];
-    parts.push(`<rect class="${rectClass}" x="${ax}" y="${ay}" width="${width}" height="${height}" rx="${rx}"${strokeDash}/>`);
+    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>`);
     if (hasDeadline) {
         const br = 5;
@@ -63,73 +72,129 @@ function complianceChipSvg(chip, ox, oy) {
         parts.push(`<circle class="compliance-badge" cx="${bx}" cy="${by}" r="${br}"/>`);
         parts.push(`<text class="compliance-badge-text" x="${bx}" y="${by}" text-anchor="middle" dominant-baseline="central">!</text>`);
     }
-    return parts.join('\n');
+    return `<g data-chip-law="${escXml(lawId)}" data-chip-stage="${escXml(stageId)}">\n${parts.join('\n')}\n</g>`;
 }
-export function renderProcessBlueprintSvg(doc, options = {}) {
-    const { title = '' } = options;
-    const layout = layoutProcessBlueprint(doc);
-    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>`;
-    }
-    const titleH = title ? PAD : 0;
-    const w = layout.bounds.width + PAD * 2;
-    const h = layout.bounds.height + PAD * 2 + titleH;
-    const ox = PAD;
-    const oy = PAD + titleH;
+/**
+ * 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 = [];
-    parts.push(`<rect class="diagram-node level-0" x="${ox}" y="${oy}" width="${layout.bounds.width}" height="${layout.bounds.height}" rx="6"/>`);
+    // 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).
     for (const s of layout.stageHeaders) {
-        parts.push(`<rect class="diagram-node level-1" x="${s.x + ox}" y="${s.y + oy}" width="${s.width}" height="${s.height}"/>`);
-        parts.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(`<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>`);
     }
+    // Legend column (row labels).
     for (const l of layout.legend) {
-        parts.push(`<rect class="diagram-node level-2" x="${ox}" y="${l.y + oy}" width="${layout.legendColumnWidth}" height="${l.height}"/>`);
-        parts.push(`<text class="text-primary" x="${ox + 12}" y="${l.y + oy + l.height / 2}" dominant-baseline="central">${escXml(l.label)}</text>`);
+        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) {
-        parts.push(`<rect class="diagram-node level-3" x="${c.x + ox}" y="${c.y + oy}" width="${c.width}" height="${c.height}"/>`);
-        parts.push(textCellSvg(c.lines, 'text-secondary', c.x + ox + textX, c.y + oy, c.height, layout.textLineHeight));
+        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"/>`);
+        inner.push(textCellSvg(c.lines, 'text-secondary', c.x + ox + textX, c.y + oy, c.height, layout.textLineHeight));
     }
     for (const c of layout.resultCells) {
-        parts.push(`<rect class="diagram-node level-4" x="${c.x + ox}" y="${c.y + oy}" width="${c.width}" height="${c.height}"/>`);
-        parts.push(textCellSvg(c.lines, 'text-secondary', c.x + ox + textX, c.y + oy, c.height, layout.textLineHeight));
+        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);
-        parts.push(`<rect class="diagram-node level-${level}" x="${layout.legendColumnWidth + ox}" y="${row.y + oy}" width="${layout.bounds.width - layout.legendColumnWidth}" height="${row.height}" opacity="0.15"/>`);
-        for (let i = 1; i < layout.stageHeaders.length; i++) {
-            const x = layout.legendColumnWidth + i * layout.stageColumnWidth + ox;
-            parts.push(`<line class="diagram-edge" x1="${x}" y1="${row.y + oy}" x2="${x}" y2="${row.y + row.height + oy}" opacity="0.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) {
-            parts.push(`<rect class="diagram-node level-${level}" x="${p.x + ox}" y="${p.y + oy}" width="${p.width}" height="${p.height}" rx="6"/>`);
-            const label = p.id ? `${p.name} · ${p.id}` : p.name;
-            parts.push(`<text class="text-pill" x="${p.x + ox + p.width / 2}" y="${p.y + oy + p.height / 2}" text-anchor="middle" dominant-baseline="central">${escXml(truncate(label, Math.floor(p.width / 8)))}</text>`);
+            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;
+            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>`);
+            }
         }
     }
     // Compliance row (optional).
     if (layout.complianceRow) {
         const row = layout.complianceRow;
-        parts.push(`<rect class="diagram-node level-5" x="${layout.legendColumnWidth + ox}" y="${row.y + oy}" width="${layout.bounds.width - layout.legendColumnWidth}" height="${row.height}" opacity="0.10"/>`);
-        for (let i = 1; i < layout.stageHeaders.length; i++) {
-            const x = layout.legendColumnWidth + i * layout.stageColumnWidth + ox;
-            parts.push(`<line class="diagram-edge" x1="${x}" y1="${row.y + oy}" x2="${x}" y2="${row.y + row.height + oy}" opacity="0.3"/>`);
-        }
+        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"/>`);
         for (const chip of row.chips) {
-            parts.push(complianceChipSvg(chip, ox, oy));
+            const stageId = layout.stageHeaders[chip.stageIndex]?.id ?? '';
+            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;
+    const gridY2 = oy + th;
+    if (layout.legend.length > 0) {
+        const headerBottomY = oy + layout.legend[0].y;
+        inner.push(`<line class="diagram-edge" x1="${gridX1}" y1="${headerBottomY}" x2="${gridX2}" y2="${headerBottomY}"/>`);
+        for (let i = 0; i < layout.legend.length - 1; i++) {
+            const rowBottomY = oy + layout.legend[i].y + layout.legend[i].height;
+            inner.push(`<line class="diagram-edge" x1="${gridX1}" y1="${rowBottomY}" x2="${gridX2}" y2="${rowBottomY}"/>`);
+        }
+    }
+    const legLineX = ox + layout.legendColumnWidth;
+    inner.push(`<line class="diagram-edge" x1="${legLineX}" y1="${gridY1}" x2="${legLineX}" y2="${gridY2}"/>`);
+    for (let i = 1; i < layout.stageHeaders.length; i++) {
+        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);
+    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>`;
+    }
+    const titleH = title ? PAD : 0;
+    const w = layout.bounds.width + PAD * 2;
+    const h = layout.bounds.height + PAD * 2 + titleH;
+    const ox = PAD;
+    const oy = PAD + titleH;
+    const body = renderProcessBlueprintBody(layout, ox, oy);
     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 for the JCEF host — matches render-goals.ts.
-    const embedCss = generateSvgEmbedCss('transitrix');
-    return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
-<style>${embedCss}</style>
-${titleSvg}
-${parts.join('\n')}
+    // 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>
+${titleSvg}
+${body}
 </svg>`;
 }

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

@@ -0,0 +1,95 @@
+/**
+ * Host-neutral SVG emitter for the BPMN process notation.
+ *
+ * Part of the custom process renderer programme (ADR 2026-06-22).
+ * P1: skeleton emitter — current DSL element subset: tasks, user/service tasks,
+ * XOR/AND gateways, start/end events, data objects, sequence flows (with
+ * default-flow markers), and association edges.
+ *
+ * Single-emitter unification (review C): `renderProcessBody` is the canonical
+ * body shared by every host. Callers wrap it with a host-specific title block
+ * or a standalone SVG shell.
+ *
+ * No VS Code APIs. No Node.js built-ins. Browser-safe.
+ */
+export interface ProcessBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface ProcessFlowElement {
+    id: string;
+    type: string;
+    name?: string;
+}
+export interface ProcessLane {
+    id: string;
+    name: string;
+    elements: ProcessFlowElement[];
+}
+export interface ProcessInfo {
+    id: string;
+    name: string;
+    poolId: string;
+    poolName: string;
+    lanes: ProcessLane[];
+}
+export interface ProcessFlow {
+    id: string;
+    from: string;
+    to: string;
+    condition?: string;
+    default?: boolean;
+    name?: string;
+    waypoints: {
+        x: number;
+        y: number;
+    }[];
+}
+export interface ProcessAssociation {
+    id: string;
+    from: string;
+    to: string;
+    waypoints: {
+        x: number;
+        y: number;
+    }[];
+}
+export interface ProcessDiagramLayout {
+    process: ProcessInfo;
+    elements: Map<string, ProcessBounds>;
+    laneBounds: Map<string, ProcessBounds>;
+    poolBounds: ProcessBounds;
+    flows: ProcessFlow[];
+    associations: ProcessAssociation[];
+}
+export interface RenderProcessOptions {
+    /** Raw SVG injected after `<style>` — a title line or full title block. */
+    title?: string;
+    /** Extra vertical space (px) reserved above the pool for a title block. */
+    topInset?: number;
+}
+export declare const BPMN_PROCESS_CSS = "\n.bpmn-pool { fill: var(--ts-bg-surface,#f8fafc); stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 1.5; }\n.bpmn-pool-name { fill: var(--ts-bg-elevated,#f1f5f9); stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 0.75; }\n.bpmn-lane { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 0.75; }\n.bpmn-lane-header { fill: var(--ts-bg-elevated,#f1f5f9); stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 0.75; }\n.bpmn-pool-label { fill: var(--ts-text-primary,#1e293b); font-size: 11px; font-weight: 700; }\n.bpmn-lane-label { fill: var(--ts-text-primary,#1e293b); font-size: 11px; font-weight: 600; }\n.bpmn-task { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 1.5; }\n.bpmn-task-name { fill: var(--ts-text-primary,#1e293b); font-size: 11px; text-anchor: middle; }\n.bpmn-event { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#94a3b8); }\n.bpmn-event-start { stroke-width: 1.5; }\n.bpmn-event-end { stroke-width: 4; }\n.bpmn-event-label { fill: var(--ts-text-secondary,#64748b); font-size: 10px; text-anchor: middle; }\n.bpmn-gateway { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 1.5; }\n.bpmn-gateway-marker { stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 2.5; stroke-linecap: round; fill: none; }\n.bpmn-gateway-label { fill: var(--ts-text-secondary,#64748b); font-size: 10px; text-anchor: middle; }\n.bpmn-seq-flow { fill: none; stroke: var(--ts-edge-stroke,#64748b); stroke-width: 1.5; }\n.bpmn-default-mark { stroke: var(--ts-edge-stroke,#64748b); stroke-width: 1.5; stroke-linecap: round; }\n.bpmn-assoc { fill: none; stroke: var(--ts-edge-stroke,#64748b); stroke-width: 1; stroke-dasharray: 4 2; }\n.bpmn-data-obj { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 1; }\n.bpmn-data-obj-label { fill: var(--ts-text-secondary,#64748b); font-size: 10px; text-anchor: middle; }\n.bpmn-event-intermediate { fill: none; stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 1; }\n.bpmn-event-icon { fill: none; stroke: var(--ts-node-stroke,#94a3b8); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }\n";
+/**
+ * Canonical body emitter, shared by every host (VS Code, JCEF, static export).
+ *
+ * Renders: pool + lane structure, all flow elements, sequence flows (with
+ * default-flow markers), and association edges. The `<defs>` block
+ * containing the arrowhead marker is included so the body is self-contained.
+ *
+ * @param layout - Positioned process layout (output of `layoutProcess`).
+ * @param ox - Horizontal canvas offset (px) applied to all coordinates.
+ * @param oy - Vertical canvas offset (px) applied to all coordinates.
+ */
+export declare function renderProcessBody(layout: ProcessDiagramLayout, ox: number, oy: number): string;
+/**
+ * Self-contained SVG for the BPMN process notation.
+ *
+ * Embeds the shared Transitrix theme CSS plus BPMN-specific rules so the
+ * output can be dropped into a static webview panel or saved as an `.svg`
+ * file. VS Code's dynamic preview (which supplies CSS separately via a
+ * webview stylesheet) should call `renderProcessBody` directly and wrap it
+ * with its own HTML shell.
+ */
+export declare function renderProcessLayoutSvg(layout: ProcessDiagramLayout, options?: RenderProcessOptions): string;