@transitrix/diagrams 1.0.0 → 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 } = 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);
@@ -80,7 +76,7 @@ export function renderActivitiesSvg(doc, options = {}) {
         const ty = t.y + oy + t.height / 2;
         const cls = e.isCritical ? 'diagram-edge critical-edge' : 'diagram-edge';
         const marker = `url(#${e.isCritical ? 'arrow-crit' : 'arrow'})`;
-        return `<path d="${horizontalCubicEdgePath(sx, sy, tx, ty, curvature)}" class="${cls}" marker-end="${marker}"/>`;
+        return `<path d="${horizontalCubicEdgePath(sx, sy, tx, ty, curvature, entryCurvature)}" class="${cls}" marker-end="${marker}"/>`;
     })
         .join('\n');
     const nodeSvg = layout.nodes
@@ -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

@@ -12,18 +12,17 @@
  * CROSS-DOCUMENT RESOLUTION CAVEAT
  * The Activity Card is the only MULTI-DOCUMENT Studio notation: the card YAML
  * names a project Activity, and the project's name, dates, motivation chain
- * (Factors → Goals → Changes) and child activities are pulled BY REFERENCE from
- * the canonical element + relation store (`canon/elements/**`,
+ * (Drivers → Assessments → Goals → Changes) and child activities are pulled BY
+ * REFERENCE from the canonical element + relation store (`canon/elements/**`,
  * `canon/relations/**`; see `../activity-card/resolver.ts`). That resolution
  * requires reading those files from disk, which is NOT available inside the
  * JCEF host. We therefore resolve from the single in-memory card document
- * ONLY: we synthesise
- * a minimal `ResolvedActivityCard` whose project carries just the referenced
- * project id (no resolved name/dates), whose milestones come straight from the
- * card's own `milestones[]`, and whose motivation chain + child activities are
- * empty (those cannot resolve without the siblings). The SVG layout is shared
- * with the VS Code path via `layoutActivityCard`, so a single-document card
- * still renders its title, dates band and milestone timeline.
+ * ONLY: we synthesise a minimal `ResolvedActivityCard` whose project carries
+ * just the referenced project id (no resolved name/dates), whose milestones
+ * come straight from the card's own `milestones[]`, and whose chain sections
+ * and child activities are empty. The SVG layout is shared with the VS Code
+ * path via `layoutActivityCard`, so a single-document card still renders its
+ * title, dates band and milestone section.
  */
 import { layoutActivityCard, ARCHIMATE_CLASS } from '../activity-card/layout.js';
 import { generateSvgEmbedCss } from '../theme/index.js';
@@ -35,13 +34,6 @@ function truncate(text, maxChars) {
         return text;
     return text.slice(0, Math.max(0, maxChars - 1)) + '…';
 }
-/**
- * Build a single-document resolution of the card: everything that can be read
- * straight off the card YAML, with the cross-document fields left empty. This
- * mirrors what `resolveActivityCard` produces, minus the parts that need the
- * canon element + relation store (project name/dates, motivation chain, child
- * activities).
- */
 function resolveSingleDoc(doc) {
     const card = doc.activity_card;
     const rawMilestones = Array.isArray(card?.milestones) ? card.milestones : [];
@@ -62,74 +54,122 @@ function resolveSingleDoc(doc) {
         // only. The layout falls back to '—' for the unknown date fields.
         project: { id: card?.project ?? '', name: card?.project ?? '' },
         milestones,
-        motivation: { factors: [], goals: [], changes: [] },
+        motivation: { drivers: [], goals: [], changes: [] },
+        assessments: [],
         childActivities: [],
+        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"/>`);
-    // Title (project name / id).
-    parts.push(`<text class="text-header" x="${layout.title.x + ox}" y="${layout.title.y + oy}" dominant-baseline="central" font-size="18">${escXml(truncate(layout.title.name, 70))}</text>`);
-    // Dates band.
+    // Title row.
+    parts.push(`<text class="text-header" x="${layout.titleRow.x + ox}" y="${layout.titleRow.y + oy}" style="dominant-baseline:central" font-size="18">${escXml(truncate(layout.titleRow.name, 60))}</text>`);
+    // Activity type badge.
+    if (layout.activityTypeBadge) {
+        const b = layout.activityTypeBadge;
+        parts.push(`<rect class="diagram-node level-2" x="${b.x + ox}" y="${b.y + oy}" width="${b.width}" height="${b.height}" rx="4"/>`);
+        parts.push(`<text class="text-secondary" style="dominant-baseline:central;text-anchor:middle" x="${b.x + ox + b.width / 2}" y="${b.y + oy + b.height / 2}">${escXml(b.label)}</text>`);
+    }
+    // Status badge.
+    if (layout.statusBadge) {
+        const b = layout.statusBadge;
+        parts.push(`<rect class="diagram-node level-3" x="${b.x + ox}" y="${b.y + oy}" width="${b.width}" height="${b.height}" rx="4"/>`);
+        parts.push(`<text class="text-secondary" style="dominant-baseline:central;text-anchor:middle" x="${b.x + ox + b.width / 2}" y="${b.y + oy + b.height / 2}">${escXml(b.label)}</text>`);
+    }
+    // Date fields.
     for (const d of layout.dateFields) {
         parts.push(`<rect class="diagram-node level-2" x="${d.x + ox}" y="${d.y + oy}" width="${d.width}" height="${d.height}" rx="6"/>`);
-        parts.push(`<text class="text-secondary" x="${d.x + ox + 12}" y="${d.y + oy + 18}" dominant-baseline="central">${escXml(d.label)}</text>`);
-        parts.push(`<text class="text-primary" x="${d.x + ox + 12}" y="${d.y + oy + 40}" dominant-baseline="central">${escXml(d.value)}</text>`);
+        parts.push(`<text class="text-secondary" x="${d.x + ox + 12}" y="${d.y + oy + 18}" style="dominant-baseline:central">${escXml(d.label)}</text>`);
+        parts.push(`<text class="text-primary" x="${d.x + ox + 12}" y="${d.y + oy + 40}" style="dominant-baseline:central">${escXml(d.value)}</text>`);
+    }
+    // Stakeholder role slots (2-column grid).
+    for (const s of layout.stakeholderRoleSlots) {
+        parts.push(`<rect class="diagram-node level-2" x="${s.x + ox}" y="${s.y + oy}" width="${s.width}" height="${s.height}" rx="6"/>`);
+        parts.push(`<text class="text-secondary" x="${s.x + ox + 10}" y="${s.y + oy + 16}" style="dominant-baseline:central">${escXml(s.role)}</text>`);
+        parts.push(`<text class="text-primary" x="${s.x + ox + 10}" y="${s.y + oy + 36}" style="dominant-baseline:central">${escXml(truncate(s.name, 40))}</text>`);
     }
-    // Section headers.
-    for (const s of layout.sectionHeaders) {
-        parts.push(`<text class="text-header" x="${s.x + ox}" y="${s.y + oy + s.height / 2}" dominant-baseline="central">${escXml(s.label)}</text>`);
+    // Description row.
+    if (layout.descriptionRow) {
+        const r = layout.descriptionRow;
+        parts.push(`<rect class="diagram-node level-2" x="${r.x + ox}" y="${r.y + oy}" width="${r.width}" height="${r.height}" rx="6"/>`);
+        parts.push(`<text class="text-secondary" x="${r.x + ox + 12}" y="${r.y + oy + 22}" style="dominant-baseline:central">${escXml(r.label)}</text>`);
+        r.valueLines.forEach((line, i) => {
+            parts.push(`<text class="text-primary" x="${r.x + ox + 12}" y="${r.y + oy + 44 + i * 18}" style="dominant-baseline:central">${escXml(line)}</text>`);
+        });
+    }
+    // Chain sections (Drivers → Assessments → Goals → Changes).
+    const SECTION_LEVEL = {
+        drivers: 4,
+        assessments: 5,
+        goals: 5,
+        changes: 6,
+    };
+    for (let si = 0; si < layout.chainSections.length; si++) {
+        const section = layout.chainSections[si];
+        const level = SECTION_LEVEL[section.type] ?? 5;
+        // Section outer box.
+        parts.push(`<rect class="diagram-node level-1" x="${section.x + ox}" y="${section.y + oy}" width="${section.width}" height="${section.height}" rx="6"/>`);
+        // Section header label + subtitle.
+        parts.push(`<text class="text-header" x="${section.x + ox + 12}" y="${section.y + oy + 14}" style="dominant-baseline:central">${escXml(section.label)}<tspan class="text-secondary" font-size="11"> (${escXml(section.subtitle)})</tspan></text>`);
+        if (section.isEmpty) {
+            // Gap indicator.
+            parts.push(`<text class="text-secondary" x="${section.x + ox + 12}" y="${section.y + oy + 24 + 8 + 16}" style="dominant-baseline:central">— not on file</text>`);
+        }
+        else {
+            for (const n of section.nodes) {
+                parts.push(`<rect class="diagram-node level-${level}" x="${n.x + ox}" y="${n.y + oy}" width="${n.width}" height="${n.height}" rx="4"/>`);
+                parts.push(`<text class="text-primary" x="${n.x + ox + 10}" y="${n.y + oy + (n.meta ? 16 : n.height / 2)}" style="dominant-baseline:central">${escXml(truncate(n.name, 80))}</text>`);
+                if (n.meta) {
+                    parts.push(`<text class="text-secondary" x="${n.x + ox + 10}" y="${n.y + oy + 30}" style="dominant-baseline:central">${escXml(n.meta)}</text>`);
+                }
+            }
+        }
+        // Connector arrow to next section.
+        if (si < layout.chainSections.length - 1) {
+            const nextSection = layout.chainSections[si + 1];
+            const arrowX = section.x + ox + section.width / 2;
+            const arrowTopY = section.y + oy + section.height;
+            const arrowBotY = nextSection.y + oy;
+            const midY = (arrowTopY + arrowBotY) / 2;
+            parts.push(`<path class="diagram-edge" d="M${arrowX},${arrowTopY} L${arrowX},${arrowBotY}" fill="none" marker-end="url(#ac-arrow)"/>`);
+            void midY; // midpoint available for future label placement
+        }
     }
     // Milestones.
     for (const m of layout.milestones) {
         parts.push(`<rect class="diagram-node level-3" x="${m.x + ox}" y="${m.y + oy}" width="${m.width}" height="${m.height}" rx="6"/>`);
-        parts.push(`<text class="text-secondary" x="${m.x + ox + 10}" y="${m.y + oy + 16}" dominant-baseline="central">${escXml(m.date)}</text>`);
-        parts.push(`<text class="text-primary" x="${m.x + ox + 10}" y="${m.y + oy + 36}" dominant-baseline="central">${escXml(truncate(m.name, 22))}</text>`);
-        parts.push(`<text class="text-secondary" x="${m.x + ox + 10}" y="${m.y + oy + 52}" dominant-baseline="central" font-style="italic">(${escXml(m.archimateClass)})</text>`);
-    }
-    // Motivation chain — edges first (under nodes).
-    const nodeById = new Map();
-    for (const col of [
-        layout.chainColumns.factors,
-        layout.chainColumns.goals,
-        layout.chainColumns.changes,
-    ]) {
-        for (const n of col)
-            nodeById.set(n.id, n);
-    }
-    for (const e of layout.chainEdges) {
-        const s = nodeById.get(e.sourceId);
-        const t = nodeById.get(e.targetId);
-        if (!s || !t)
-            continue;
-        const x1 = s.x + s.width + ox;
-        const y1 = s.y + s.height / 2 + oy;
-        const x2 = t.x + ox;
-        const y2 = t.y + t.height / 2 + oy;
-        const mx = (x1 + x2) / 2;
-        parts.push(`<path class="diagram-edge" d="M${x1},${y1} C${mx},${y1} ${mx},${y2} ${x2},${y2}" fill="none" marker-end="url(#ac-arrow)"/>`);
-    }
-    const chainLevels = [
-        [layout.chainColumns.factors, 4],
-        [layout.chainColumns.goals, 5],
-        [layout.chainColumns.changes, 6],
-    ];
-    for (const [col, level] of chainLevels) {
-        for (const n of col) {
-            parts.push(`<rect class="diagram-node level-${level}" x="${n.x + ox}" y="${n.y + oy}" width="${n.width}" height="${n.height}" rx="6"/>`);
-            parts.push(`<text class="text-pill" x="${n.x + ox + n.width / 2}" y="${n.y + oy + n.height / 2}" text-anchor="middle" dominant-baseline="central">${escXml(truncate(n.name, Math.floor(n.width / 7)))}</text>`);
-        }
+        parts.push(`<text class="text-secondary" x="${m.x + ox + 10}" y="${m.y + oy + 16}" style="dominant-baseline:central">${escXml(m.date)}</text>`);
+        parts.push(`<text class="text-primary" x="${m.x + ox + 10}" y="${m.y + oy + 36}" style="dominant-baseline:central">${escXml(truncate(m.name, 22))}</text>`);
+        parts.push(`<text class="text-secondary" x="${m.x + ox + 10}" y="${m.y + oy + 52}" style="dominant-baseline:central">(${escXml(m.archimateClass)})</text>`);
     }
     // Child activities.
     for (const a of layout.childActivities) {
         parts.push(`<rect class="diagram-node level-1" x="${a.x + ox}" y="${a.y + oy}" width="${a.width}" height="${a.height}" rx="6"/>`);
-        parts.push(`<text class="text-primary" x="${a.x + ox + 12}" y="${a.y + oy + a.height / 2}" dominant-baseline="central">${escXml(truncate(a.name, 48))} <tspan class="text-secondary" font-style="italic">(${escXml(a.archimateClass)})</tspan></text>`);
+        parts.push(`<text class="text-primary" x="${a.x + ox + 12}" y="${a.y + oy + a.height / 2}" style="dominant-baseline:central">${escXml(truncate(a.name, 48))} <tspan class="text-secondary">(${escXml(a.archimateClass)})</tspan></text>`);
         if (a.meta) {
-            parts.push(`<text class="text-secondary" x="${a.x + a.width + ox - 12}" y="${a.y + oy + a.height / 2}" text-anchor="end" dominant-baseline="central">${escXml(truncate(a.meta, 40))}</text>`);
+            parts.push(`<text class="text-secondary" x="${a.x + a.width + ox - 12}" y="${a.y + oy + a.height / 2}" style="dominant-baseline:central;text-anchor:end">${escXml(truncate(a.meta, 40))}</text>`);
         }
     }
+    // Footer — notes.
+    if (layout.footerRow) {
+        const r = layout.footerRow;
+        parts.push(`<rect class="diagram-node level-2" x="${r.x + ox}" y="${r.y + oy}" width="${r.width}" height="${r.height}" rx="6"/>`);
+        parts.push(`<text class="text-secondary" x="${r.x + ox + 12}" y="${r.y + oy + 22}" style="dominant-baseline:central">${escXml(r.label)}</text>`);
+        r.valueLines.forEach((line, i) => {
+            parts.push(`<text class="text-primary" x="${r.x + ox + 12}" y="${r.y + oy + 44 + i * 18}" style="dominant-baseline:central">${escXml(line)}</text>`);
+        });
+    }
     return parts.join('\n');
 }
 export function renderActivityCardSvg(doc, options = {}) {
@@ -139,30 +179,26 @@ export function renderActivityCardSvg(doc, options = {}) {
     const { title = '' } = options;
     const resolved = resolveSingleDoc(doc);
     const layout = layoutActivityCard(resolved);
-    if (layout.bounds.width <= 0 || layout.bounds.height <= 0) {
+    if (layout.bounds.width <= 0 || layout.bounds.height <= 0)
         return EMPTY_SVG;
-    }
     const titleH = title ? 28 : 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 = 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>`
         : '';
-    // 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>
-<defs>
-  <marker id="ac-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}
-${body}
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
+<style>${embedCss}</style>
+<defs>
+  <marker id="ac-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}
+${body}
 </svg>`;
 }

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' });
 }