@transitrix/diagrams 1.0.0

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

@@ -0,0 +1,168 @@
+/**
+ * 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 { 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>`;
+function truncate(text, maxChars) {
+    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) {
+    const card = doc.activity_card;
+    const rawMilestones = Array.isArray(card?.milestones) ? card.milestones : [];
+    const milestones = rawMilestones
+        .filter((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, 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.
+    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();
+    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>`);
+        }
+    }
+    // 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, options = {}) {
+    // `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/dist/webview/render-applications.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 { ApplicationsCatalogueHeader } from '../applications/types.js';
+export declare function renderApplicationsHtml(catalogue: ApplicationsCatalogueHeader): string;

package/dist/webview/render-applications.js

@@ -0,0 +1,105 @@
+import { escHtml } from './render-util.js';
+const TYPE_LABEL = {
+    application: 'Application',
+    integration: 'Integration',
+    platform: 'Platform',
+    data_store: 'Data Store',
+};
+const STATUS_BADGE = {
+    Active: 'badge-active',
+    Draft: 'badge-draft',
+    Deprecated: 'badge-deprecated',
+    Decommissioning: 'badge-decommissioning',
+};
+function maturityDots(m) {
+    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, items) {
+    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) {
+    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) {
+    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) {
+    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/dist/webview/render-blocks.d.ts

@@ -0,0 +1,5 @@
+import type { BlocksFile } from '../blocks/types.js';
+export interface RenderBlocksOptions {
+    title?: string;
+}
+export declare function renderBlocksSvg(doc: BlocksFile, options?: RenderBlocksOptions): string;

package/dist/webview/render-blocks.js

@@ -0,0 +1,71 @@
+/**
+ * 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 { generateSvgEmbedCss } from '../theme/index.js';
+import { escXml } from './render-util.js';
+const PAD = 24;
+/**
+ * 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) {
+    const idx = Math.min(Math.max(depth - 1, 0), 6);
+    return `level-${idx}`;
+}
+function truncate(text, maxChars) {
+    if (text.length <= maxChars)
+        return text;
+    return text.slice(0, Math.max(0, maxChars - 1)) + '…';
+}
+function emitBlockSvg(b, ox, oy, parts) {
+    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, 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>`;
+}

package/dist/webview/render-capability-map.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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 } from '../capability-map/types.js';
+export declare function renderCapabilityMapHtml(map: CapabilityMapHeader): string;

package/dist/webview/render-capability-map.js

@@ -0,0 +1,88 @@
+import { escHtml } from './render-util.js';
+const MATURITY_LABEL = {
+    1: 'Initial',
+    2: 'Managed',
+    3: 'Defined',
+    4: 'Quantitatively Managed',
+    5: 'Optimising',
+};
+function maturityBadge(level, kind) {
+    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) {
+    return id.startsWith('H');
+}
+function renderCapabilityCard(node, depth) {
+    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 = [];
+    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) {
+    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/dist/webview/render-fgca.d.ts

@@ -0,0 +1,8 @@
+import type { FGCADoc } from '../fgca/validate.js';
+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 declare function renderFgcaSvg(doc: FGCADoc, options?: RenderFgcaOptions): string;

package/dist/webview/render-fgca.js

@@ -0,0 +1,94 @@
+/**
+ * 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, } from '../fgca/preview-layout.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 = {
+    factor: 'Factors (F)',
+    goal: 'Goals (G)',
+    change: 'Changes (C)',
+    activity: 'Activities (A)',
+};
+export function renderFgcaSvg(doc, options = {}) {
+    const { variant = 'fgca', title = '' } = options;
+    const hideChanges = variant === 'fga';
+    const { nodes, edges, columns, width, height } = layoutFGCAPreview(doc, { hideChanges });
+    if (nodes.length === 0) {
+        return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
+    }
+    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>`;
+}

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

@@ -0,0 +1,6 @@
+import type { GoalTree } from '../goals/types.js';
+export interface RenderGoalsOptions {
+    treeName?: string;
+    curvature?: number;
+}
+export declare function renderGoalsSvg(tree: GoalTree, options?: RenderGoalsOptions): string;