@transitrix/diagrams 1.0.1 → 1.1.0

package/dist/webview/render-activities.js

@@ -11,6 +11,10 @@
  * Only the DEFAULT network view (Project Schedule Network Diagram) is ported.
  * The Gantt view, the CSS-only tab switcher and the interactive spacing /
  * curvature controls stay in the VS Code preview.
+ *
+ * Single-emitter unification (review C): the canonical network body lives here
+ * in `renderActivitiesNetworkBody` and is shared verbatim with the VS Code
+ * preview's `networkSvg`.
  */
 import { layoutActivities } from '../activities/layout.js';
 import { computeCpm } from '../activities/cpm.js';
@@ -20,54 +24,46 @@ import { escXml } from './render-util.js';
 const N_NODE_W = 200;
 const N_NODE_H = 80;
 const N_PAD = 24;
-// Activities-specific diagram CSS. Mirrors `ACTIVITIES_DIAGRAM_CSS` from the
-// VS Code preview — the rules that shape the network diagram itself (critical
-// path, milestones, edge colours). Embedded alongside the shared theme CSS so
-// the SVG is self-contained for the JCEF host.
-const ACTIVITIES_DIAGRAM_CSS = `
-  .act-node { fill: var(--ts-bg-surface, #f8fafc); stroke: var(--ts-border, #94a3b8); stroke-width: 1.5; }
+/**
+ * Network-view diagram CSS (critical path, milestones, edge colours) — the
+ * canonical rules shared with the VS Code preview's `ACTIVITIES_DIAGRAM_CSS`
+ * network subset. Embedded alongside the shared theme CSS so the SVG is
+ * self-contained for the JCEF host.
+ */
+export const ACTIVITIES_NETWORK_CSS = `
+  .act-node { fill: var(--ts-layer-activity, #d4edda); stroke: var(--ts-node-stroke, #94a3b8); stroke-width: 1; }
   .critical-node { fill: #fff7ed; stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 2.5; }
   .milestone-node { fill: #ecfeff; stroke: var(--ts-text-muted, #64748b); stroke-dasharray: 4 2; }
   .critical-edge { stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 2; }
   .arrow-fill-critical { fill: var(--ts-brand-orange, #ff4d00); }
 `;
+/** Arrowhead marker defs shared by both hosts for the network view. */
+export const ACTIVITIES_NETWORK_DEFS = `<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>
+  <marker id="arrow-crit" markerWidth="8" markerHeight="8" refX="8" refY="3" orient="auto">
+    <path d="M0,0 L0,6 L8,3 z" class="arrow-fill-critical"/>
+  </marker>
+</defs>`;
 function truncate(s, maxLen) {
     return s.length > maxLen ? s.slice(0, maxLen - 1) + '…' : s;
 }
 /**
- * Render the network (PSND) view of an already-validated ActivityDoc to a
- * self-contained SVG string.
- *
- * The caller passes a doc cast from the yaml-parsed `unknown` after
- * `validateActivities` returns valid (the activities module has no parsed
- * field, so the dispatcher does `doc as ActivityDoc`).
+ * Canonical Network (PSND) body — the node rects and edge paths that go inside
+ * the `<svg>`, shared verbatim by the VS Code preview and the host-neutral
+ * wrapper below. Excludes the host-specific title block and the (identical)
+ * marker defs (`ACTIVITIES_NETWORK_DEFS`).
  *
- * Cyclic graphs degrade gracefully: `layoutActivities` / `computeCpm` defend
- * against cycles internally (Kahn's topo-order omits cyclic nodes from the
- * critical-path computation, which `computeCpm` backfills with neutral CPM
- * values), so this renderer simply renders whatever the layout returns rather
- * than short-circuiting.
+ * `ox`/`oy` are the canvas offsets (the caller folds in padding + any title
+ * height); `curvature`/`entryCurvature` scale the exit/entry edge handles.
  */
-export function renderActivitiesSvg(doc, options = {}) {
-    const { title = '', gaps = {}, curvature = DEFAULT_EDGE_CURVATURE, entryCurvature } = options;
-    const layout = layoutActivities(doc, gaps);
-    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 cpm = computeCpm(doc.activities ?? []);
-    const titleH = title ? 24 : 0;
-    const w = layout.bounds.width + N_PAD * 2;
-    const h = layout.bounds.height + N_PAD * 2 + titleH;
-    const ox = -layout.bounds.x + N_PAD;
-    const oy = -layout.bounds.y + N_PAD + titleH;
+export function renderActivitiesNetworkBody(layout, cpm, ox, oy, curvature, entryCurvature) {
     const nodeMap = new Map(layout.nodes.map((n) => [n.id, n]));
     // SVG paints later siblings over earlier ones. Sort non-critical first so the
     // bright orange critical-path edges land on top — a gray edge crossing an
     // orange one shouldn't bury the critical signal.
     const orderedEdges = [...layout.edges].sort((a, b) => Number(Boolean(a.isCritical)) - Number(Boolean(b.isCritical)));
-    // Edge path = a single cubic Bézier with horizontal control handles (shared
-    // geometry in `edge-path.js`), so the curve meets the vertical node edge at a
-    // right angle and the marker-end arrow reads as perpendicular.
     const edgeSvg = orderedEdges
         .map((e) => {
         const s = nodeMap.get(e.sourceId);
@@ -88,40 +84,79 @@ export function renderActivitiesSvg(doc, options = {}) {
         const x = n.x + ox;
         const y = n.y + oy;
         const isCritical = cpm.get(n.id)?.isCritical ?? false;
-        const isMilestone = (n.data.duration ?? -1) === 0;
+        const durVal = n.data.duration;
+        const isMilestone = (durVal ?? -1) === 0;
         const cls = `diagram-node act-node ${isCritical ? 'critical-node' : ''} ${isMilestone ? 'milestone-node' : ''}`.trim();
         const idLabel = escXml(n.id);
-        const nameLabel = escXml(truncate(n.data.name, 24));
-        const durLabel = n.data.duration !== undefined ? `${n.data.duration}d` : '—';
+        const words = n.data.name.split(' ');
+        let line1 = '';
+        let line2 = '';
+        for (const w of words) {
+            if ((line1 + ' ' + w).trim().length <= 24)
+                line1 = (line1 + ' ' + w).trim();
+            else if ((line2 + ' ' + w).trim().length <= 24)
+                line2 = (line2 + ' ' + w).trim();
+            else if (!line2) {
+                line2 = w.slice(0, 22) + '…';
+                break;
+            }
+        }
+        const twoLines = line2.length > 0;
+        const nameY1 = twoLines ? y + 18 : y + 28;
+        const nameY2 = y + 34;
+        const idY = twoLines ? y + 54 : y + 50;
+        const durLabel = (durVal !== undefined && durVal > 0) ? `${durVal}d` : '';
         return [
-            `<rect class="${cls}" x="${x}" y="${y}" width="${N_NODE_W}" height="${N_NODE_H}" rx="6"/>`,
-            `<text class="text-id" x="${x + 8}" y="${y + 18}">${idLabel}</text>`,
-            `<text class="text-primary" x="${x + N_NODE_W / 2}" y="${y + N_NODE_H / 2}" text-anchor="middle" dominant-baseline="central">${nameLabel}</text>`,
-            `<text class="text-secondary" x="${x + N_NODE_W - 8}" y="${y + N_NODE_H - 10}" text-anchor="end">${escXml(durLabel)}</text>`,
-        ].join('\n');
+            `<rect class="${cls}" x="${x}" y="${y}" width="${N_NODE_W}" height="${N_NODE_H}" rx="8"/>`,
+            `<text class="text-primary" x="${x + N_NODE_W / 2}" y="${nameY1}" text-anchor="middle" dominant-baseline="central">${escXml(line1)}</text>`,
+            twoLines ? `<text class="text-primary" x="${x + N_NODE_W / 2}" y="${nameY2}" text-anchor="middle" dominant-baseline="central">${escXml(line2)}</text>` : '',
+            `<text class="text-id" x="${x + N_NODE_W / 2}" y="${idY}" text-anchor="middle" dominant-baseline="central">${idLabel}</text>`,
+            durLabel ? `<text class="text-secondary" x="${x + N_NODE_W - 8}" y="${y + N_NODE_H - 8}" text-anchor="end">${durLabel}</text>` : '',
+        ].filter(Boolean).join('\n');
     })
         .join('\n');
+    return `${nodeSvg}\n${edgeSvg}`;
+}
+/**
+ * Render the network (PSND) view of an already-validated ActivityDoc to a
+ * self-contained SVG string.
+ *
+ * The caller passes a doc cast from the yaml-parsed `unknown` after
+ * `validateActivities` returns valid (the activities module has no parsed
+ * field, so the dispatcher does `doc as ActivityDoc`).
+ *
+ * Cyclic graphs degrade gracefully: `layoutActivities` / `computeCpm` defend
+ * against cycles internally (Kahn's topo-order omits cyclic nodes from the
+ * critical-path computation, which `computeCpm` backfills with neutral CPM
+ * values), so this renderer simply renders whatever the layout returns rather
+ * than short-circuiting.
+ */
+export function renderActivitiesSvg(doc, options = {}) {
+    const { title = '', gaps = {}, curvature = DEFAULT_EDGE_CURVATURE, entryCurvature } = options;
+    const layout = layoutActivities(doc, gaps);
+    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 cpm = computeCpm(doc.activities ?? []);
+    const titleH = title ? 24 : 0;
+    const w = layout.bounds.width + N_PAD * 2;
+    const h = layout.bounds.height + N_PAD * 2 + titleH;
+    const ox = -layout.bounds.x + N_PAD;
+    const oy = -layout.bounds.y + N_PAD + titleH;
+    const body = renderActivitiesNetworkBody(layout, cpm, ox, oy, curvature, entryCurvature);
     const titleSvg = title
         ? `<text class="text-header" x="${N_PAD}" y="${N_PAD - 6}">${escXml(title)}</text>`
         : '';
-    // Embed the shared theme CSS plus the activities-specific diagram 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') + ACTIVITIES_DIAGRAM_CSS;
+    // Embed the shared theme CSS plus the network diagram 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') + ACTIVITIES_NETWORK_CSS;
     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>
-  <marker id="arrow-crit" markerWidth="8" markerHeight="8" refX="8" refY="3" orient="auto">
-    <path d="M0,0 L0,6 L8,3 z" class="arrow-fill-critical"/>
-  </marker>
-</defs>
+${ACTIVITIES_NETWORK_DEFS}
 ${titleSvg}
-${nodeSvg}
-${edgeSvg}
+${body}
 </svg>`;
 }

package/dist/webview/render-activity-card.d.ts

@@ -1,5 +1,15 @@
-import type { ActivityCardDoc } from '../activity-card/types.js';
+import type { ActivityCardDoc, ActivityCardLayout } from '../activity-card/types.js';
 export interface RenderActivityCardOptions {
     title?: string;
 }
+/**
+ * The single Activity Card SVG body emitter shared by every host. Takes an
+ * already-laid-out {@link ActivityCardLayout} plus the canvas offset and emits
+ * the body elements (card, header, badges, dates, chain sections, milestones,
+ * child activities, footer) — everything except the host chrome (`<defs>`
+ * marker, title, embedded CSS, `<svg>` wrapper). The VS Code preview and the
+ * host-neutral {@link renderActivityCardSvg} both build their own chrome around
+ * this single source of truth.
+ */
+export declare function renderActivityCardBody(layout: ActivityCardLayout, ox: number, oy: number): string;
 export declare function renderActivityCardSvg(doc: ActivityCardDoc, options?: RenderActivityCardOptions): string;

package/dist/webview/render-activity-card.js

@@ -60,7 +60,16 @@ function resolveSingleDoc(doc) {
         notes: card?.notes,
     };
 }
-function buildBody(layout, ox, oy) {
+/**
+ * The single Activity Card SVG body emitter shared by every host. Takes an
+ * already-laid-out {@link ActivityCardLayout} plus the canvas offset and emits
+ * the body elements (card, header, badges, dates, chain sections, milestones,
+ * child activities, footer) — everything except the host chrome (`<defs>`
+ * marker, title, embedded CSS, `<svg>` wrapper). The VS Code preview and the
+ * host-neutral {@link renderActivityCardSvg} both build their own chrome around
+ * this single source of truth.
+ */
+export function renderActivityCardBody(layout, ox, oy) {
     const parts = [];
     // Outer card.
     parts.push(`<rect class="diagram-node level-0" x="${ox}" y="${oy}" width="${layout.bounds.width}" height="${layout.bounds.height}" rx="8"/>`);
@@ -177,7 +186,7 @@ export function renderActivityCardSvg(doc, options = {}) {
     const h = layout.bounds.height + PAD * 2 + titleH;
     const ox = PAD;
     const oy = PAD + titleH;
-    const body = buildBody(layout, ox, oy);
+    const body = renderActivityCardBody(layout, ox, oy);
     const titleSvg = title
         ? `<text class="text-header" x="${PAD}" y="${PAD + 14}">${escXml(`Activity Card — ${title}`)}</text>`
         : '';

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

@@ -1,5 +1,28 @@
-import type { BlocksFile } from '../blocks/types.js';
+import type { BlocksFile, BlocksLayout } from '../blocks/types.js';
+import { type ThemeId } from '../theme/index.js';
 export interface RenderBlocksOptions {
     title?: string;
 }
+export interface RenderBlocksLayoutOptions {
+    /** Extra vertical space reserved at the top of the canvas (e.g. for a title block). */
+    topInset?: number;
+    /** Raw SVG injected immediately after the opening tag — 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 Nested Blocks SVG emitter shared by every host. Takes an
+ * already-computed {@link BlocksLayout} (callers decide the layout options) and
+ * produces the `<svg>`. Hosts wrap it with their own chrome:
+ *   - IntelliJ/UI via {@link renderBlocksSvg} (embedded CSS + simple header);
+ *   - VS Code's blocks preview (rich title block, no embedded CSS — the webview
+ *     and the export path own styling).
+ */
+export declare function renderBlocksLayoutSvg(layout: BlocksLayout, options?: RenderBlocksLayoutOptions): string;
+/**
+ * Host-neutral blocks renderer (IntelliJ/UI). Lays the doc out with the default
+ * spacing, then delegates the actual SVG emission to {@link renderBlocksLayoutSvg}
+ * with the shared theme CSS embedded so the output is self-contained.
+ */
 export declare function renderBlocksSvg(doc: BlocksFile, options?: RenderBlocksOptions): string;

package/dist/webview/render-blocks.js

@@ -16,6 +16,10 @@ import { layoutNestedBlocks } from '../blocks/layout.js';
 import { generateSvgEmbedCss } from '../theme/index.js';
 import { escXml } from './render-util.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) — used for ID suffix.
+const CHAR_W_ID = 6;
 /**
  * Pick the diagram-frame level class for a block at the given depth.
  *
@@ -28,44 +32,74 @@ function levelClassForDepth(depth) {
     const idx = Math.min(Math.max(depth - 1, 0), 6);
     return `level-${idx}`;
 }
-function truncate(text, maxChars) {
+/** Truncate at a word boundary so labels never break in the middle of a word. */
+function wordTruncate(text, maxChars) {
     if (text.length <= maxChars)
         return text;
-    return text.slice(0, Math.max(0, maxChars - 1)) + '…';
+    const cut = text.slice(0, maxChars - 1);
+    const lastSpace = cut.lastIndexOf(' ');
+    return (lastSpace > maxChars / 2 ? cut.slice(0, lastSpace) : 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="6"/>`);
-    // Header label, centred horizontally within the block's header strip.
-    const headerY = b.y + oy + b.headerHeight / 2;
-    const maxChars = Math.max(4, Math.floor(b.width / 8));
-    parts.push(`<text class="text-header" x="${b.x + ox + b.width / 2}" y="${headerY}" text-anchor="middle" dominant-baseline="central">${escXml(truncate(b.name, maxChars))}</text>`);
-    for (const c of b.children)
-        emitBlockSvg(c, ox, oy, parts);
+    const isLeaf = b.children.length === 0;
+    if (isLeaf) {
+        // Leaf block: name on upper line, ID on lower line — both centred.
+        const nameY = b.y + oy + Math.round(b.height * 0.38);
+        const idY = b.y + oy + Math.round(b.height * 0.66);
+        const maxChars = Math.max(4, Math.floor(b.width / CHAR_W));
+        parts.push(`<text class="text-primary" x="${cx}" y="${nameY}" text-anchor="middle" dominant-baseline="central">${escXml(wordTruncate(b.name, maxChars))}</text>`, `<text class="text-id" x="${cx}" y="${idY}" text-anchor="middle" dominant-baseline="central">${escXml(b.id)}</text>`);
+    }
+    else {
+        // Container block: name + (ID) on the single header line; ID in grey.
+        const headerY = b.y + oy + b.headerHeight / 2;
+        const idSuffix = ` (${b.id})`;
+        const idSuffixW = idSuffix.length * CHAR_W_ID;
+        const nameMaxChars = Math.max(4, Math.floor((b.width - idSuffixW) / CHAR_W));
+        const nameText = wordTruncate(b.name, nameMaxChars);
+        parts.push(`<text class="text-primary" x="${cx}" y="${headerY}" text-anchor="middle" dominant-baseline="central">${escXml(nameText)}<tspan fill="var(--ts-text-secondary, #64748b)" font-size="10" font-weight="600">${escXml(idSuffix)}</tspan></text>`);
+        for (const c of b.children)
+            emitBlockSvg(c, ox, oy, parts);
+    }
 }
+/**
+ * The single Nested Blocks SVG emitter shared by every host. Takes an
+ * already-computed {@link BlocksLayout} (callers decide the layout options) and
+ * produces the `<svg>`. Hosts wrap it with their own chrome:
+ *   - IntelliJ/UI via {@link renderBlocksSvg} (embedded CSS + simple header);
+ *   - VS Code's blocks preview (rich title block, no embedded CSS — the webview
+ *     and the export path own styling).
+ */
+export function renderBlocksLayoutSvg(layout, options = {}) {
+    const { topInset = 0, title = '', embedCssTheme } = options;
+    const w = layout.bounds.width + PAD * 2;
+    const h = layout.bounds.height + PAD * 2 + topInset;
+    const ox = -layout.bounds.x + PAD;
+    const oy = -layout.bounds.y + PAD + topInset;
+    const parts = [];
+    for (const top of layout.blocks)
+        emitBlockSvg(top, ox, oy, parts);
+    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}
+${title}
+${parts.join('\n')}
+</svg>`;
+}
+/**
+ * Host-neutral blocks renderer (IntelliJ/UI). Lays the doc out with the default
+ * spacing, then delegates the actual SVG emission to {@link renderBlocksLayoutSvg}
+ * with the shared theme CSS embedded so the output is self-contained.
+ */
 export function renderBlocksSvg(doc, options = {}) {
     const { title = '' } = options;
     const layout = layoutNestedBlocks(doc);
     if (layout.blocks.length === 0) {
         return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
     }
-    const w = layout.bounds.width + PAD * 2;
-    const h = layout.bounds.height + PAD * 2;
-    const ox = -layout.bounds.x + PAD;
-    const oy = -layout.bounds.y + PAD;
-    const parts = [];
-    for (const top of layout.blocks)
-        emitBlockSvg(top, ox, oy, parts);
     const titleSvg = title
         ? `<text class="text-header" x="${PAD}" y="${PAD - 6}">${escXml(`Nested Blocks — ${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="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
-<style>${embedCss}</style>
-${titleSvg}
-${parts.join('\n')}
-</svg>`;
+    return renderBlocksLayoutSvg(layout, { title: titleSvg, embedCssTheme: 'transitrix' });
 }

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

@@ -1,4 +1,30 @@
+/**
+ * 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';
@@ -10,3 +36,4 @@ export interface RenderFgcaOptions {
     entryCurvature?: number;
 }
 export declare function renderFgcaSvg(doc: FGCADoc, options?: RenderFgcaOptions): string;
+export {};

package/dist/webview/render-fgca.js

@@ -17,18 +17,21 @@ 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 = '', 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>`;
-    }
+/**
+ * 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"/>`,
@@ -56,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>`
         : '';
@@ -84,8 +100,6 @@ export function renderFgcaSvg(doc, options = {}) {
   </marker>
 </defs>
 ${titleSvg}
-${headerSvg}
-${nodeSvg}
-${edgeSvg}
+${body}
 </svg>`;
 }

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

@@ -1,7 +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,13 +21,11 @@ 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, entryCurvature } = options;
     const layout = layoutGoalTree(tree, {
@@ -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);
@@ -70,22 +88,14 @@ export function renderGoalsSvg(tree, options = {}) {
 </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>
+    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>
-${titleSvg}
+${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;
 }