@transitrix/diagrams 1.0.0

package/src/webview/render-activity-card.ts

@@ -0,0 +1,234 @@
+/**
+ * Host-neutral SVG renderer for the Activity Card notation.
+ *
+ * Step 4 of the IntelliJ epic (ADR 0001): the webview bundle must turn a
+ * validated Activity Card document into renderable SVG so JCEF can drop it into
+ * the preview panel. The VS Code path lives in
+ * `extension/src/activity-card-preview.ts` and pulls in VS Code-specific
+ * concerns (themes, title block, save dialogs, sibling-document discovery on
+ * the filesystem); this module is the host-neutral subset — pure layout → SVG
+ * with no VS Code APIs, no `node:fs`, no `node:path`.
+ *
+ * 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/**`,
+ * `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.
+ */
+import { layoutActivityCard, ARCHIMATE_CLASS } from '../activity-card/layout.js';
+import type {
+  ActivityCardDoc,
+  ActivityCardLayout,
+  ResolvedActivityCard,
+  ResolvedMilestone,
+} from '../activity-card/types.js';
+import { generateSvgEmbedCss } from '../theme/index.js';
+import { escXml } from './render-util.js';
+
+const PAD = 24;
+
+const EMPTY_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
+
+export interface RenderActivityCardOptions {
+  title?: string;
+}
+
+function truncate(text: string, maxChars: number): string {
+  if (text.length <= 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: ActivityCardDoc): ResolvedActivityCard {
+  const card = doc.activity_card;
+  const rawMilestones = Array.isArray(card?.milestones) ? card.milestones : [];
+
+  const milestones: ResolvedMilestone[] = rawMilestones
+    .filter((m): m is NonNullable<typeof m> => !!m && typeof m === 'object')
+    .map((m) => ({
+      id: m.id,
+      name: m.name,
+      date: m.date,
+      description: m.description,
+      deliversChanges: Array.isArray(m.delivers_changes) ? m.delivers_changes : [],
+    }))
+    .sort((a, b) => (a.date < b.date ? -1 : a.date > b.date ? 1 : 0));
+
+  return {
+    cardId: card?.id ?? '',
+    cardDescription: card?.description,
+    // No sibling docs in the host-neutral path: the project resolves to its id
+    // only. The layout falls back to '—' for the unknown date fields.
+    project: { id: card?.project ?? '', name: card?.project ?? '' },
+    milestones,
+    motivation: { factors: [], goals: [], changes: [] },
+    childActivities: [],
+  };
+}
+
+function buildBody(layout: ActivityCardLayout, ox: number, oy: number): string {
+  const parts: string[] = [];
+
+  // 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.
+  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>`,
+    );
+  }
+
+  // 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>`,
+    );
+  }
+
+  // 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<string, { x: number; y: number; width: number; height: number }>();
+  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: Array<[typeof layout.chainColumns.factors, number]> = [
+    [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>`,
+      );
+    }
+  }
+
+  // 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>`,
+    );
+    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>`,
+      );
+    }
+  }
+
+  return parts.join('\n');
+}
+
+export function renderActivityCardSvg(
+  doc: ActivityCardDoc,
+  options: RenderActivityCardOptions = {},
+): string {
+  // `ARCHIMATE_CLASS` is referenced so the host-neutral module pins the same
+  // §5.1 class convention the layout applies; keeps the import meaningful.
+  void ARCHIMATE_CLASS;
+
+  const { title = '' } = options;
+
+  const resolved = resolveSingleDoc(doc);
+  const layout = layoutActivityCard(resolved);
+
+  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 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}
+</svg>`;
+}

package/src/webview/render-applications.ts

@@ -0,0 +1,123 @@
+/**
+ * Host-neutral renderer for the Applications catalogue notation.
+ *
+ * Mirrors the VS Code preview (`extension/src/applications-preview.ts`) but
+ * strips the VS Code-specific concerns (theme lookup, command URIs, fix-prompt
+ * scaffolding). The output is a self-contained HTML fragment — a `<section>`
+ * carrying its own `<style>` block — that the JCEF host can drop into
+ * `#transitrix-root` exactly the way it drops the goals SVG (Step 3 contract).
+ */
+import type {
+  Application,
+  ApplicationIntegration,
+  ApplicationsCatalogueHeader,
+} from '../applications/types.js';
+import { escHtml } from './render-util.js';
+
+const TYPE_LABEL: Record<string, string> = {
+  application: 'Application',
+  integration: 'Integration',
+  platform: 'Platform',
+  data_store: 'Data Store',
+};
+
+const STATUS_BADGE: Record<string, string> = {
+  Active: 'badge-active',
+  Draft: 'badge-draft',
+  Deprecated: 'badge-deprecated',
+  Decommissioning: 'badge-decommissioning',
+};
+
+function maturityDots(m: number | undefined): string {
+  if (m === undefined) return '<span class="cell-empty">—</span>';
+  const filled = '●'.repeat(Math.max(0, Math.min(5, m)));
+  const empty = '○'.repeat(5 - Math.max(0, Math.min(5, m)));
+  return `<span class="maturity-dots">${filled}${empty}</span>`;
+}
+
+function disclosureList(label: string, items: string[] | undefined): string {
+  if (!items || items.length === 0) return '';
+  const lis = items.map((i) => `<li>${escHtml(i)}</li>`).join('');
+  return `<details><summary>${escHtml(label)} (${items.length})</summary><ul>${lis}</ul></details>`;
+}
+
+function renderIntegrations(integrations: ApplicationIntegration[] | undefined): string {
+  if (!integrations || integrations.length === 0) return '';
+  const items = integrations
+    .map((intg) => {
+      const parts = [
+        intg.target ? escHtml(intg.target) : '?',
+        intg.direction ? `<span class="intg-dir">${escHtml(intg.direction)}</span>` : '',
+        intg.protocol ? `<span class="intg-proto">${escHtml(intg.protocol)}</span>` : '',
+      ]
+        .filter(Boolean)
+        .join(' ');
+      const desc = intg.description ? `<span class="intg-desc">${escHtml(intg.description)}</span>` : '';
+      return `<li>${parts}${desc ? ' — ' + desc : ''}</li>`;
+    })
+    .join('');
+  return `<details><summary>Integrations (${integrations.length})</summary><ul>${items}</ul></details>`;
+}
+
+function renderRow(a: Application): string {
+  const extras = [
+    renderIntegrations(a.integrations),
+    disclosureList('Capabilities', a.capabilities),
+    disclosureList('Products', a.products),
+  ]
+    .filter(Boolean)
+    .join('');
+  const vendorCell = a.vendor
+    ? `<span class="${a.vendor === 'Internal' ? 'vendor-internal' : 'vendor-external'}">${escHtml(a.vendor)}</span>`
+    : '<span class="cell-empty">—</span>';
+  return `<tr>
+  <td class="col-name">
+    <div class="catalogue-name">${escHtml(a.name)}</div>
+    <div class="catalogue-id">${escHtml(a.app_id)}</div>
+    ${a.description ? `<div class="catalogue-desc">${escHtml(a.description)}</div>` : ''}
+    ${extras}
+  </td>
+  <td class="col-type"><span class="type-tag">${escHtml(TYPE_LABEL[a.type] ?? a.type)}</span></td>
+  <td class="col-status"><span class="tx-badge ${escHtml(STATUS_BADGE[a.status] ?? '')}">${escHtml(a.status)}</span></td>
+  <td class="col-maturity">${maturityDots(a.maturity)}</td>
+  <td class="col-domain">${a.domain ? escHtml(a.domain) : '<span class="cell-empty">—</span>'}</td>
+  <td class="col-vendor">${vendorCell}</td>
+  <td class="col-owner">${a.owner_role ? escHtml(a.owner_role) : '<span class="cell-empty">—</span>'}</td>
+</tr>`;
+}
+
+export function renderApplicationsHtml(catalogue: ApplicationsCatalogueHeader): string {
+  const rows = catalogue.applications.map(renderRow).join('\n');
+  const emptyRow = catalogue.applications.length === 0
+    ? `<tr><td colspan="7" class="empty-catalogue">No applications defined.</td></tr>`
+    : '';
+  const header = `<header class="catalogue-header">
+    <div class="catalogue-title">${escHtml(catalogue.name)}</div>
+    <div class="catalogue-meta">
+      <span class="catalogue-id-tag">${escHtml(catalogue.id)}</span>
+      <span class="catalogue-updated">Updated ${escHtml(catalogue.updated_at)}</span>
+      ${catalogue.version ? `<span class="catalogue-version">v${escHtml(catalogue.version)}</span>` : ''}
+    </div>
+    ${catalogue.description ? `<div class="catalogue-subtitle">${escHtml(catalogue.description)}</div>` : ''}
+  </header>`;
+  return `<section class="tx-catalogue tx-applications">
+${header}
+<table class="catalogue-table">
+  <thead>
+    <tr>
+      <th>Name / ID</th>
+      <th>Type</th>
+      <th>Status</th>
+      <th>Maturity</th>
+      <th>Domain</th>
+      <th>Vendor</th>
+      <th>Owner Role</th>
+    </tr>
+  </thead>
+  <tbody>
+    ${rows}
+    ${emptyRow}
+  </tbody>
+</table>
+</section>`;
+}

package/src/webview/render-blocks.ts

@@ -0,0 +1,91 @@
+/**
+ * Browser-safe SVG renderer for the Nested Blocks notation.
+ *
+ * Step 4 of the IntelliJ epic (ADR 0001): the webview bundle must turn a
+ * validated BlocksFile into renderable SVG so JCEF can drop it into the
+ * preview panel. The VS Code path lives in `extension/src/blocks-preview.ts`
+ * and pulls in VS Code-specific concerns (themes, title block, save dialogs);
+ * this module is the host-neutral subset — pure `layoutNestedBlocks` → SVG
+ * with no VS Code APIs, no `node:*`, and no svgbob subprocess.
+ *
+ * Follows the same shape as `render-goals.ts`: a self-contained `<svg>` with
+ * the shared theme CSS embedded in a `<style>` element and a simple optional
+ * title `<text>`.
+ */
+import { layoutNestedBlocks } from '../blocks/layout.js';
+import type { BlocksFile, BlocksLayout, LaidOutBlock } from '../blocks/types.js';
+import { generateSvgEmbedCss } from '../theme/index.js';
+import { escXml } from './render-util.js';
+
+const PAD = 24;
+
+export interface RenderBlocksOptions {
+  title?: string;
+}
+
+/**
+ * Pick the diagram-frame level class for a block at the given depth.
+ *
+ * `level-0` is the lightest fill in the brand colour ramp; deeper levels are
+ * progressively darker. The methodology spec mandates "outermost lightest"
+ * (08-blocks.md §7), so depth 1 (top-level) maps to `level-0`. The theme CSS
+ * defines `level-0` … `level-6`; deeper blocks reuse `level-6`.
+ */
+function levelClassForDepth(depth: number): string {
+  const idx = Math.min(Math.max(depth - 1, 0), 6);
+  return `level-${idx}`;
+}
+
+function truncate(text: string, maxChars: number): string {
+  if (text.length <= maxChars) return text;
+  return text.slice(0, Math.max(0, maxChars - 1)) + '…';
+}
+
+function emitBlockSvg(b: LaidOutBlock, ox: number, oy: number, parts: string[]): void {
+  const cls = levelClassForDepth(b.depth);
+  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);
+}
+
+export function renderBlocksSvg(doc: BlocksFile, options: RenderBlocksOptions = {}): string {
+  const { title = '' } = options;
+
+  const layout: BlocksLayout = 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: string[] = [];
+  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>`;
+}

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

@@ -0,0 +1,98 @@
+/**
+ * Host-neutral renderer for the Capability Map notation.
+ * Mirrors `extension/src/capability-map-preview.ts`; emits a self-contained
+ * HTML fragment for the JCEF host (Step 4 of ADR 0001).
+ */
+import type { CapabilityMapHeader, CapabilityNode } from '../capability-map/types.js';
+import { escHtml } from './render-util.js';
+
+const MATURITY_LABEL: Record<number, string> = {
+  1: 'Initial',
+  2: 'Managed',
+  3: 'Defined',
+  4: 'Quantitatively Managed',
+  5: 'Optimising',
+};
+
+function maturityBadge(level: number, kind: 'current' | 'target'): string {
+  const safe = Math.max(1, Math.min(5, level | 0));
+  const label = kind === 'current' ? 'Current' : 'Target';
+  return `<span class="maturity-pill maturity-${safe}" title="${label}: Level ${safe} — ${escHtml(MATURITY_LABEL[safe] ?? '')}">L${safe}</span>`;
+}
+
+function isHorizontal(id: string): boolean {
+  return id.startsWith('H');
+}
+
+function renderCapabilityCard(node: CapabilityNode, depth: number): string {
+  const cls = ['capability-card', `depth-${Math.min(depth, 3)}`];
+  if (node.type) cls.push(`cap-type-${node.type}`);
+  if (isHorizontal(node.id)) cls.push('cap-horizontal');
+
+  const current = maturityBadge(node.current_maturity, 'current');
+  const target = node.target_maturity !== undefined ? maturityBadge(node.target_maturity, 'target') : '';
+  const arrow = target ? '<span class="maturity-arrow">→</span>' : '';
+
+  const meta: string[] = [];
+  if (node.type) meta.push(`<span class="cap-tag cap-tag-${escHtml(node.type)}">${escHtml(node.type)}</span>`);
+  if (node.owner_role) meta.push(`<span class="cap-meta">Owner: ${escHtml(node.owner_role)}</span>`);
+  if (node.business_process) meta.push(`<span class="cap-meta">Process: ${escHtml(node.business_process)}</span>`);
+  if (node.target_date) meta.push(`<span class="cap-meta">By ${escHtml(node.target_date)}</span>`);
+
+  const apps = node.applications && node.applications.length > 0
+    ? `<div class="cap-apps"><span class="cap-apps-label">Apps:</span> ${node.applications.map((a) => `<code>${escHtml(a)}</code>`).join(' ')}</div>`
+    : '';
+
+  const childBlock = node.children && node.children.length > 0
+    ? `<div class="cap-children">${node.children.map((c) => renderCapabilityCard(c, depth + 1)).join('')}</div>`
+    : '';
+
+  return `<div class="${cls.join(' ')}">
+  <div class="capability-head">
+    <div class="capability-maturity">${current}${arrow}${target}</div>
+    <div class="capability-titles">
+      <div class="capability-name">${escHtml(node.name)}</div>
+      <div class="capability-id">${escHtml(node.id)}</div>
+    </div>
+  </div>
+  ${meta.length > 0 ? `<div class="cap-meta-row">${meta.join('')}</div>` : ''}
+  ${node.description ? `<div class="cap-desc">${escHtml(node.description)}</div>` : ''}
+  ${apps}
+  ${childBlock}
+</div>`;
+}
+
+export function renderCapabilityMapHtml(map: CapabilityMapHeader): string {
+  const header = `<header class="catalogue-header">
+    <div class="catalogue-title">${escHtml(map.name)}</div>
+    <div class="catalogue-meta">
+      <span class="catalogue-id-tag">${escHtml(map.id)}</span>
+      <span class="catalogue-updated">Assessed ${escHtml(map.assessment_date)}</span>
+    </div>
+    ${map.description ? `<div class="catalogue-subtitle">${escHtml(map.description)}</div>` : ''}
+  </header>`;
+  if (map.capabilities.length === 0) {
+    return `<section class="tx-catalogue tx-capability-map">
+${header}
+<div class="empty-map">No capabilities defined.</div>
+</section>`;
+  }
+  const verticals = map.capabilities.filter((c) => !isHorizontal(c.id));
+  const horizontals = map.capabilities.filter((c) => isHorizontal(c.id));
+  const vBlock = verticals.length > 0
+    ? `<section class="cap-axis cap-axis-v">
+  <h2 class="cap-axis-title">Vertical capabilities (domains)</h2>
+  <div class="cap-axis-list">${verticals.map((c) => renderCapabilityCard(c, 0)).join('')}</div>
+</section>`
+    : '';
+  const hBlock = horizontals.length > 0
+    ? `<section class="cap-axis cap-axis-h">
+  <h2 class="cap-axis-title">Horizontal capabilities (cross-cutting)</h2>
+  <div class="cap-axis-list">${horizontals.map((c) => renderCapabilityCard(c, 0)).join('')}</div>
+</section>`
+    : '';
+  return `<section class="tx-catalogue tx-capability-map">
+${header}
+${vBlock}${hBlock}
+</section>`;
+}

package/src/webview/render-fgca.ts

@@ -0,0 +1,122 @@
+/**
+ * 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,
+  FGCA_NODE_W as NODE_W,
+  FGCA_NODE_H as NODE_H,
+  FGCA_HEADER_H as HEADER_H,
+  FGCA_PAD as PAD,
+  type FGCAPreviewColumn,
+} from '../fgca/preview-layout.js';
+import type { FGCADoc } from '../fgca/validate.js';
+import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
+import { generateSvgEmbedCss } from '../theme/index.js';
+import { escXml } from './render-util.js';
+
+const COL_LABELS: Record<FGCAPreviewColumn, string> = {
+  factor: 'Factors (F)',
+  goal: 'Goals (G)',
+  change: 'Changes (C)',
+  activity: 'Activities (A)',
+};
+
+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;
+}
+
+export function renderFgcaSvg(doc: FGCADoc, options: RenderFgcaOptions = {}): string {
+  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>`;
+  }
+
+  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)"/>`,
+    )
+    .join('\n');
+
+  const nodeSvg = nodes
+    .map((n) => {
+      const words = n.label.split(' ');
+      let line1 = '';
+      let line2 = '';
+      for (const w of words) {
+        if ((line1 + ' ' + w).trim().length <= 26) {
+          line1 = (line1 + ' ' + w).trim();
+        } else if ((line2 + ' ' + w).trim().length <= 26) {
+          line2 = (line2 + ' ' + w).trim();
+        } else if (!line2) {
+          line2 = w.slice(0, 24) + '…';
+          break;
+        }
+      }
+      const twoLines = line2.length > 0;
+      const y1 = twoLines ? n.y + NODE_H / 2 - 8 : n.y + NODE_H / 2 + 5;
+      const y2 = y1 + 18;
+      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>`,
+        twoLines
+          ? `<text class="text-secondary" x="${n.x + NODE_W / 2}" y="${y2}" text-anchor="middle">${escXml(line2)}</text>`
+          : '',
+      ]
+        .filter(Boolean)
+        .join('\n');
+    })
+    .join('\n');
+
+  const titleSvg = title
+    ? `<text class="text-header" x="${PAD}" y="${PAD - 6}">${escXml(title)}</text>`
+    : '';
+
+  // Embed the shared theme CSS inside the SVG so the rendered output is
+  // self-contained — the JCEF host page only needs to drop the SVG into the
+  // DOM and styling resolves without any cooperation from the host stylesheet.
+  const embedCss = generateSvgEmbedCss('transitrix');
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
+<style>${embedCss}</style>
+<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}
+${headerSvg}
+${nodeSvg}
+${edgeSvg}
+</svg>`;
+}