@transitrix/diagrams 1.0.1 → 1.1.0

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

@@ -1,18 +1,26 @@
 /**
  * Host-neutral SVG renderer for the Process Blueprint notation.
  *
- * Step 4 of the IntelliJ epic (ADR 0001): ported from the pure SVG core of
- * `extension/src/process-blueprint-preview.ts` (`layoutToSvg`). The VS Code
- * title block (`svg-title-block.ts`) is intentionally dropped — JCEF has no
- * VS Code APIs — and replaced with `render-goals.ts`' simple optional
- * `<text class="text-header">` heading. No `vscode`, no `node:*`, no host APIs;
- * the shared theme CSS is embedded inside the `<svg>` so the output is
- * self-contained.
+ * Single-emitter unification (review C): the canonical blueprint body lives
+ * here in `renderProcessBlueprintBody` and is shared by both hosts. The VS Code
+ * preview (`extension/src/process-blueprint-preview.ts`) wraps it with the VS
+ * Code title block; this module wraps it with `render-goals.ts`' simple
+ * optional `<text class="text-header">` heading and embeds the shared theme CSS
+ * (plus the blueprint-specific `bp-*` rules) so the JCEF output is
+ * self-contained. No `vscode`, no `node:*`, no host APIs.
  */
 import { layoutProcessBlueprint } from '../process-blueprint/layout.js';
 import { generateSvgEmbedCss } from '../theme/index.js';
 import { escXml } from './render-util.js';
 const PAD = 24;
+// Blueprint-specific rules not carried by the shared theme CSS. The outer
+// border is drawn last on top of the clipped inner content; the row
+// backgrounds are transparent (pills/chips carry the colour). Mirrors
+// `BLUEPRINT_CSS` from the VS Code preview so the self-contained JCEF output
+// matches the editor.
+const BP_EMBED_CSS = `
+.bp-row-bg { fill: none; }
+.bp-border { fill: none; stroke: var(--ts-border, #cbd5e1); stroke-width: 1; }`;
 function truncate(text, maxChars) {
     if (text.length <= maxChars)
         return text;
@@ -28,10 +36,12 @@ function textCellSvg(lines, cls, x, cellTop, cellHeight, lineHeight) {
     const tspans = ls
         .map((ln, i) => `<tspan x="${x}" y="${first + i * lineHeight}">${escXml(ln)}</tspan>`)
         .join('');
-    return `<text class="${cls}" style="dominant-baseline:central">${tspans}</text>`;
+    return `<text class="${cls}" dominant-baseline="central">${tspans}</text>`;
 }
 /**
- * Render a single compliance law chip.
+ * Render a single compliance law chip wrapped in a `<g data-chip-law…>` so the
+ * VS Code host can wire click-to-drill-down. Other hosts (JCEF) simply ignore
+ * the data attributes.
  *
  * Three orthogonal decorations are expressed as SVG overrides:
  * - `new`      — dashed stroke border  (`stroke-dasharray="4 2"`)
@@ -39,11 +49,10 @@ function textCellSvg(lines, cls, x, cellTop, cellHeight, lineHeight) {
  * - `deadline` — urgent fill override  (`class="…compliance-deadline"`) + a small
  *                badge circle in the top-right corner
  */
-function complianceChipSvg(chip, ox, oy) {
+function complianceChipSvg(chip, ox, oy, stageId) {
     const { x, y, width, height, lawId, decorations } = chip;
     const ax = x + ox;
     const ay = y + oy;
-    const rx = 6;
     const hasNew = decorations.includes('new');
     const hasGap = decorations.includes('gap');
     const hasDeadline = decorations.includes('deadline');
@@ -54,82 +63,138 @@ function complianceChipSvg(chip, ox, oy) {
         rectClass += ' compliance-gap';
     const strokeDash = hasNew ? ' stroke-dasharray="4 2"' : '';
     const parts = [];
-    parts.push(`<rect class="${rectClass}" x="${ax}" y="${ay}" width="${width}" height="${height}" rx="${rx}"${strokeDash}/>`);
-    parts.push(`<text class="text-pill" x="${ax + width / 2}" y="${ay + height / 2}" text-anchor="middle" style="dominant-baseline:central">${escXml(truncate(lawId, Math.floor(width / 8)))}</text>`);
+    parts.push(`<rect class="${rectClass}" x="${ax}" y="${ay}" width="${width}" height="${height}" rx="6"${strokeDash}/>`);
+    parts.push(`<text class="text-pill" x="${ax + width / 2}" y="${ay + height / 2}" text-anchor="middle" dominant-baseline="central">${escXml(truncate(lawId, Math.floor(width / 8)))}</text>`);
     if (hasDeadline) {
         const br = 5;
         const bx = ax + width - br - 3;
         const by = ay + br + 3;
         parts.push(`<circle class="compliance-badge" cx="${bx}" cy="${by}" r="${br}"/>`);
-        parts.push(`<text class="compliance-badge-text" x="${bx}" y="${by}" text-anchor="middle" style="dominant-baseline:central">!</text>`);
+        parts.push(`<text class="compliance-badge-text" x="${bx}" y="${by}" text-anchor="middle" dominant-baseline="central">!</text>`);
     }
-    return parts.join('\n');
+    return `<g data-chip-law="${escXml(lawId)}" data-chip-stage="${escXml(stageId)}">\n${parts.join('\n')}\n</g>`;
 }
-export function renderProcessBlueprintSvg(doc, options = {}) {
-    const { title = '' } = options;
-    const layout = layoutProcessBlueprint(doc);
-    if (layout.bounds.width === 0 || layout.bounds.height === 0) {
-        return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
-    }
-    const titleH = title ? PAD : 0;
-    const w = layout.bounds.width + PAD * 2;
-    const h = layout.bounds.height + PAD * 2 + titleH;
-    const ox = PAD;
-    const oy = PAD + titleH;
+/**
+ * Canonical Process Blueprint body — everything inside the `<svg>` except the
+ * host-specific title block. Shared verbatim by the VS Code preview and the
+ * host-neutral wrapper below so both surfaces stay pixel-identical.
+ *
+ * Layering: a clipped group holds the row fills and grid lines; pills and
+ * compliance chips render on top (so grid lines sit under pill content); the
+ * outer rounded border is drawn last so corner cells never overflow it.
+ */
+export function renderProcessBlueprintBody(layout, ox, oy, clipId = 'bp-clip') {
+    const tw = layout.bounds.width;
+    const th = layout.bounds.height;
     const parts = [];
-    parts.push(`<rect class="diagram-node level-0" x="${ox}" y="${oy}" width="${layout.bounds.width}" height="${layout.bounds.height}" rx="6"/>`);
+    // Pills and chips collected separately so they render after (on top of) grid lines.
+    const topParts = [];
+    // Outer background (fill only; border drawn last on top).
+    parts.push(`<rect class="diagram-node level-0 bp-row-bg" x="${ox}" y="${oy}" width="${tw}" height="${th}" rx="6" stroke="none"/>`);
+    // ClipPath — clips all inner content to the outer rounded rect so corner cells
+    // don't visually overflow the rx=6 boundary.
+    parts.push(`<defs><clipPath id="${clipId}"><rect x="${ox}" y="${oy}" width="${tw}" height="${th}" rx="6"/></clipPath></defs>`);
+    const inner = [];
+    // Stage headers (top row).
     for (const s of layout.stageHeaders) {
-        parts.push(`<rect class="diagram-node level-1" x="${s.x + ox}" y="${s.y + oy}" width="${s.width}" height="${s.height}"/>`);
-        parts.push(`<text class="text-header" x="${s.x + ox + s.width / 2}" y="${s.y + oy + s.height / 2}" text-anchor="middle" style="dominant-baseline:central">${escXml(truncate(s.name, 28))}</text>`);
+        inner.push(`<rect class="diagram-node level-1" x="${s.x + ox}" y="${s.y + oy}" width="${s.width}" height="${s.height}" stroke="none"/>`);
+        inner.push(`<text class="text-header" x="${s.x + ox + s.width / 2}" y="${s.y + oy + s.height / 2}" text-anchor="middle" dominant-baseline="central">${escXml(truncate(s.name, 28))}</text>`);
     }
+    // Legend column (row labels).
     for (const l of layout.legend) {
-        parts.push(`<rect class="diagram-node level-2" x="${ox}" y="${l.y + oy}" width="${layout.legendColumnWidth}" height="${l.height}"/>`);
-        parts.push(`<text class="text-primary" x="${ox + 12}" y="${l.y + oy + l.height / 2}" style="dominant-baseline:central">${escXml(l.label)}</text>`);
+        inner.push(`<rect class="diagram-node level-2 bp-row-bg" x="${ox}" y="${l.y + oy}" width="${layout.legendColumnWidth}" height="${l.height}" stroke="none"/>`);
+        inner.push(`<text class="text-primary" x="${ox + 12}" y="${l.y + oy + l.height / 2}" dominant-baseline="central">${escXml(l.label)}</text>`);
     }
+    // Goal and result cells.
     const textX = layout.cellTextPadX;
     for (const c of layout.goalCells) {
-        parts.push(`<rect class="diagram-node level-3" x="${c.x + ox}" y="${c.y + oy}" width="${c.width}" height="${c.height}"/>`);
-        parts.push(textCellSvg(c.lines, 'text-secondary', c.x + ox + textX, c.y + oy, c.height, layout.textLineHeight));
+        inner.push(`<rect class="diagram-node level-3 bp-row-bg" x="${c.x + ox}" y="${c.y + oy}" width="${c.width}" height="${c.height}" stroke="none"/>`);
+        inner.push(textCellSvg(c.lines, 'text-secondary', c.x + ox + textX, c.y + oy, c.height, layout.textLineHeight));
     }
     for (const c of layout.resultCells) {
-        parts.push(`<rect class="diagram-node level-4" x="${c.x + ox}" y="${c.y + oy}" width="${c.width}" height="${c.height}"/>`);
-        parts.push(textCellSvg(c.lines, 'text-secondary', c.x + ox + textX, c.y + oy, c.height, layout.textLineHeight));
+        inner.push(`<rect class="diagram-node level-4 bp-row-bg" x="${c.x + ox}" y="${c.y + oy}" width="${c.width}" height="${c.height}" stroke="none"/>`);
+        inner.push(textCellSvg(c.lines, 'text-secondary', c.x + ox + textX, c.y + oy, c.height, layout.textLineHeight));
     }
+    // Aspect rows — transparent background; pills carry the colour.
     for (let r = 0; r < layout.aspectRows.length; r++) {
         const row = layout.aspectRows[r];
         const level = 5 + (r % 3);
-        parts.push(`<rect class="diagram-node level-${level}" x="${layout.legendColumnWidth + ox}" y="${row.y + oy}" width="${layout.bounds.width - layout.legendColumnWidth}" height="${row.height}" opacity="0.15"/>`);
-        for (let i = 1; i < layout.stageHeaders.length; i++) {
-            const x = layout.legendColumnWidth + i * layout.stageColumnWidth + ox;
-            parts.push(`<line class="diagram-edge" x1="${x}" y1="${row.y + oy}" x2="${x}" y2="${row.y + row.height + oy}" opacity="0.3"/>`);
-        }
+        inner.push(`<rect class="diagram-node level-${level} bp-row-bg" x="${layout.legendColumnWidth + ox}" y="${row.y + oy}" width="${tw - layout.legendColumnWidth}" height="${row.height}" stroke="none"/>`);
         for (const p of row.pills) {
-            parts.push(`<rect class="diagram-node level-${level}" x="${p.x + ox}" y="${p.y + oy}" width="${p.width}" height="${p.height}" rx="6"/>`);
-            const label = p.id ? `${p.name} · ${p.id}` : p.name;
-            parts.push(`<text class="text-pill" x="${p.x + ox + p.width / 2}" y="${p.y + oy + p.height / 2}" text-anchor="middle" style="dominant-baseline:central">${escXml(truncate(label, Math.floor(p.width / 8)))}</text>`);
+            const cx = p.x + ox + p.width / 2;
+            const pillLH = 15;
+            // p.lines: name lines (possibly wrapped), optionally with id as last line.
+            const hasIdLine = !!(p.id && p.lines.length > 0 && p.lines[p.lines.length - 1] === p.id);
+            const nameLines = hasIdLine ? p.lines.slice(0, -1) : p.lines;
+            const idLine = hasIdLine ? p.id : undefined;
+            const pillFirstY = p.y + oy + p.height / 2 - ((p.lines.length - 1) / 2) * pillLH;
+            topParts.push(`<rect class="diagram-node level-${level}" x="${p.x + ox}" y="${p.y + oy}" width="${p.width}" height="${p.height}" rx="6"/>`);
+            if (nameLines.length > 0) {
+                const tspans = nameLines
+                    .map((ln, i) => `<tspan x="${cx}" y="${pillFirstY + i * pillLH}">${escXml(ln)}</tspan>`)
+                    .join('');
+                topParts.push(`<text class="text-pill" text-anchor="middle" dominant-baseline="central">${tspans}</text>`);
+            }
+            if (idLine) {
+                topParts.push(`<text class="text-secondary" x="${cx}" y="${pillFirstY + nameLines.length * pillLH}" text-anchor="middle" dominant-baseline="central">${escXml(idLine)}</text>`);
+            }
         }
     }
     // Compliance row (optional).
     if (layout.complianceRow) {
         const row = layout.complianceRow;
-        parts.push(`<rect class="diagram-node level-5" x="${layout.legendColumnWidth + ox}" y="${row.y + oy}" width="${layout.bounds.width - layout.legendColumnWidth}" height="${row.height}" opacity="0.10"/>`);
-        for (let i = 1; i < layout.stageHeaders.length; i++) {
-            const x = layout.legendColumnWidth + i * layout.stageColumnWidth + ox;
-            parts.push(`<line class="diagram-edge" x1="${x}" y1="${row.y + oy}" x2="${x}" y2="${row.y + row.height + oy}" opacity="0.3"/>`);
-        }
+        inner.push(`<rect class="diagram-node level-5 bp-row-bg" x="${layout.legendColumnWidth + ox}" y="${row.y + oy}" width="${tw - layout.legendColumnWidth}" height="${row.height}" stroke="none"/>`);
         for (const chip of row.chips) {
-            parts.push(complianceChipSvg(chip, ox, oy));
+            const stageId = layout.stageHeaders[chip.stageIndex]?.id ?? '';
+            topParts.push(complianceChipSvg(chip, ox, oy, stageId));
         }
     }
+    // Grid lines — drawn before pills so they appear under pill content.
+    const gridX1 = ox;
+    const gridX2 = ox + tw;
+    const gridY1 = oy;
+    const gridY2 = oy + th;
+    if (layout.legend.length > 0) {
+        const headerBottomY = oy + layout.legend[0].y;
+        inner.push(`<line class="diagram-edge" x1="${gridX1}" y1="${headerBottomY}" x2="${gridX2}" y2="${headerBottomY}"/>`);
+        for (let i = 0; i < layout.legend.length - 1; i++) {
+            const rowBottomY = oy + layout.legend[i].y + layout.legend[i].height;
+            inner.push(`<line class="diagram-edge" x1="${gridX1}" y1="${rowBottomY}" x2="${gridX2}" y2="${rowBottomY}"/>`);
+        }
+    }
+    const legLineX = ox + layout.legendColumnWidth;
+    inner.push(`<line class="diagram-edge" x1="${legLineX}" y1="${gridY1}" x2="${legLineX}" y2="${gridY2}"/>`);
+    for (let i = 1; i < layout.stageHeaders.length; i++) {
+        const stageLineX = ox + layout.legendColumnWidth + i * layout.stageColumnWidth;
+        inner.push(`<line class="diagram-edge" x1="${stageLineX}" y1="${gridY1}" x2="${stageLineX}" y2="${gridY2}"/>`);
+    }
+    // Inner content (fills + grid lines) clipped to rounded outer rect.
+    parts.push(`<g clip-path="url(#${clipId})">${inner.join('\n')}${topParts.join('\n')}</g>`);
+    // Outer border on top — fill="none" as attribute so PNG export (no external CSS) never shows black.
+    parts.push(`<rect class="bp-border" x="${ox}" y="${oy}" width="${tw}" height="${th}" rx="6" fill="none"/>`);
+    return parts.join('\n');
+}
+export function renderProcessBlueprintSvg(doc, options = {}) {
+    const { title = '' } = options;
+    const layout = layoutProcessBlueprint(doc);
+    if (layout.bounds.width === 0 || layout.bounds.height === 0) {
+        return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
+    }
+    const titleH = title ? PAD : 0;
+    const w = layout.bounds.width + PAD * 2;
+    const h = layout.bounds.height + PAD * 2 + titleH;
+    const ox = PAD;
+    const oy = PAD + titleH;
+    const body = renderProcessBlueprintBody(layout, ox, oy);
     const titleSvg = title
         ? `<text class="text-header" x="${PAD}" y="${PAD - 6}">${escXml(title)}</text>`
         : '';
-    // Embed the shared theme CSS inside the SVG so the rendered output is
-    // self-contained for the JCEF host — matches render-goals.ts.
-    const embedCss = generateSvgEmbedCss('transitrix');
+    // Embed the shared theme CSS plus the blueprint-specific rules inside the SVG
+    // so the rendered output is self-contained for the JCEF host.
+    const embedCss = generateSvgEmbedCss('transitrix') + BP_EMBED_CSS;
     return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
 <style>${embedCss}</style>
 ${titleSvg}
-${parts.join('\n')}
+${body}
 </svg>`;
 }

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

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