@transitrix/diagrams 1.0.0 → 1.0.1

package/dist/webview/render-fgca.js

@@ -23,7 +23,7 @@ const COL_LABELS = {
     activity: 'Activities (A)',
 };
 export function renderFgcaSvg(doc, options = {}) {
-    const { variant = 'fgca', title = '' } = options;
+    const { variant = 'fgca', title = '', curvature = DEFAULT_EDGE_CURVATURE, entryCurvature } = options;
     const hideChanges = variant === 'fga';
     const { nodes, edges, columns, width, height } = layoutFGCAPreview(doc, { hideChanges });
     if (nodes.length === 0) {
@@ -35,11 +35,8 @@ export function renderFgcaSvg(doc, options = {}) {
         `<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)"/>`)
+        .map((e) => `<path d="${horizontalCubicEdgePath(e.sx, e.sy, e.tx, e.ty, curvature, entryCurvature)}" class="diagram-edge" marker-end="url(#arrow)"/>`)
         .join('\n');
     const nodeSvg = nodes
         .map((n) => {

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

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

package/dist/webview/render-goals.js

@@ -28,7 +28,7 @@ function escXml(s) {
         .replace(/"/g, '"');
 }
 export function renderGoalsSvg(tree, options = {}) {
-    const { treeName = '', curvature = DEFAULT_EDGE_CURVATURE } = options;
+    const { treeName = '', curvature = DEFAULT_EDGE_CURVATURE, entryCurvature } = options;
     const layout = layoutGoalTree(tree, {
         nodeWidth: NODE_W,
         nodeHeight: NODE_H,
@@ -52,7 +52,7 @@ export function renderGoalsSvg(tree, options = {}) {
         const sy = s.y + oy + s.height / 2;
         const tx = t.x + ox;
         const ty = t.y + oy + t.height / 2;
-        return horizontalCubicEdgePath(sx, sy, tx, ty, curvature);
+        return horizontalCubicEdgePath(sx, sy, tx, ty, curvature, entryCurvature);
     }
     const edgeSvg = layout.edges
         .map((e) => `<path d="${edgePath(e)}" class="diagram-edge" marker-end="url(#arrow)"/>`)
@@ -64,9 +64,9 @@ export function renderGoalsSvg(tree, options = {}) {
         const level = n.data.level % 8;
         const labelText = n.data.name ?? String(n.id);
         const label = labelText.length > LABEL_MAX ? labelText.slice(0, LABEL_TRIM) + '…' : labelText;
-        return `<g>
-  <rect class="diagram-node level-${level}" x="${x}" y="${y}" width="${n.width}" height="${n.height}" rx="8"/>
-  <text class="text-primary" x="${x + n.width / 2}" y="${y + n.height / 2}" text-anchor="middle" dominant-baseline="central">${escXml(label)}</text>
+        return `<g>
+  <rect class="diagram-node level-${level}" x="${x}" y="${y}" width="${n.width}" height="${n.height}" rx="8"/>
+  <text class="text-primary" x="${x + n.width / 2}" y="${y + n.height / 2}" text-anchor="middle" dominant-baseline="central">${escXml(label)}</text>
 </g>`;
     })
         .join('\n');
@@ -78,15 +78,15 @@ export function renderGoalsSvg(tree, options = {}) {
     // DOM and styling resolves without any cooperation from the host stylesheet.
     // Matches what the VS Code path produces via `prepareSvgForExport`.
     const embedCss = generateSvgEmbedCss('transitrix');
-    return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
-<style>${embedCss}</style>
-<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}
-${nodeSvg}
-${edgeSvg}
+    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>
+</defs>
+${titleSvg}
+${nodeSvg}
+${edgeSvg}
 </svg>`;
 }

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

@@ -28,7 +28,7 @@ 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}" dominant-baseline="central">${tspans}</text>`;
+    return `<text class="${cls}" style="dominant-baseline:central">${tspans}</text>`;
 }
 /**
  * Render a single compliance law chip.
@@ -55,13 +55,13 @@ function complianceChipSvg(chip, ox, oy) {
     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" dominant-baseline="central">${escXml(truncate(lawId, Math.floor(width / 8)))}</text>`);
+    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>`);
     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" dominant-baseline="central">!</text>`);
+        parts.push(`<text class="compliance-badge-text" x="${bx}" y="${by}" text-anchor="middle" style="dominant-baseline:central">!</text>`);
     }
     return parts.join('\n');
 }
@@ -80,11 +80,11 @@ export function renderProcessBlueprintSvg(doc, options = {}) {
     parts.push(`<rect class="diagram-node level-0" x="${ox}" y="${oy}" width="${layout.bounds.width}" height="${layout.bounds.height}" rx="6"/>`);
     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" dominant-baseline="central">${escXml(truncate(s.name, 28))}</text>`);
+        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>`);
     }
     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}" dominant-baseline="central">${escXml(l.label)}</text>`);
+        parts.push(`<text class="text-primary" x="${ox + 12}" y="${l.y + oy + l.height / 2}" style="dominant-baseline:central">${escXml(l.label)}</text>`);
     }
     const textX = layout.cellTextPadX;
     for (const c of layout.goalCells) {
@@ -106,7 +106,7 @@ export function renderProcessBlueprintSvg(doc, options = {}) {
         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" dominant-baseline="central">${escXml(truncate(label, Math.floor(p.width / 8)))}</text>`);
+            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>`);
         }
     }
     // Compliance row (optional).
@@ -127,9 +127,9 @@ export function renderProcessBlueprintSvg(doc, options = {}) {
     // 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');
-    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')}
+    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/package.json

@@ -1,40 +1,40 @@
-{
-  "name": "@transitrix/diagrams",
-  "version": "1.0.0",
-  "type": "module",
-  "description": "Shared rendering, validation, and pure mutations for Transitrix custom diagram formats.",
-  "license": "MIT",
-  "homepage": "https://github.com/transitrix/transitrix-studio/tree/main/packages/diagrams#readme",
-  "bugs": {
-    "url": "https://github.com/transitrix/transitrix-studio/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/transitrix/transitrix-studio.git",
-    "directory": "packages/diagrams"
-  },
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "src"
-  ],
-  "scripts": {
-    "build": "tsc -p .",
-    "test": "vitest run",
-    "test:watch": "vitest"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "reactflow": "^11.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.3.28",
-    "@types/react-dom": "^19.2.3",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
-    "reactflow": "^11.11.4",
-    "typescript": "^5.0.0",
-    "vitest": "^3.0.0"
-  }
-}
+{
+  "name": "@transitrix/diagrams",
+  "version": "1.0.1",
+  "type": "module",
+  "description": "Shared rendering, validation, and pure mutations for Transitrix custom diagram formats.",
+  "license": "MIT",
+  "homepage": "https://github.com/transitrix/transitrix-studio/tree/main/packages/diagrams#readme",
+  "bugs": {
+    "url": "https://github.com/transitrix/transitrix-studio/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/transitrix/transitrix-studio.git",
+    "directory": "packages/diagrams"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc -p .",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "reactflow": "^11.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "reactflow": "^11.11.4",
+    "typescript": "^5.0.0",
+    "vitest": "^3.0.0"
+  }
+}

package/src/__tests__/edge-path.test.ts

@@ -1,46 +1,58 @@
-import { describe, it, expect } from 'vitest';
-import { horizontalCubicEdgePath, EDGE_MIN_HANDLE } from '../edge-path.js';
-
-describe('horizontalCubicEdgePath', () => {
-  // A short horizontal edge: |dx|=40 < EDGE_MIN_HANDLE*2, |dy|=0, so the
-  // base handle is the floor (64).
-  const sx = 0, sy = 0, tx = 40, ty = 0;
-
-  it('curvature 1 uses the floor handle (historical appearance)', () => {
-    const d = horizontalCubicEdgePath(sx, sy, tx, ty, 1);
-    // handle = max(64, 20, 0) = 64
-    expect(d).toBe(`M0,0 C${EDGE_MIN_HANDLE},0 ${40 - EDGE_MIN_HANDLE},0 40,0`);
-  });
-
-  it('default curvature equals explicit curvature 1', () => {
-    expect(horizontalCubicEdgePath(sx, sy, tx, ty)).toBe(horizontalCubicEdgePath(sx, sy, tx, ty, 1));
-  });
-
-  it('curvature 0 collapses control points onto the endpoints (straight line)', () => {
-    const d = horizontalCubicEdgePath(sx, sy, tx, ty, 0);
-    expect(d).toBe('M0,0 C0,0 40,0 40,0');
-  });
-
-  it('changing curvature changes the path output (AC#6)', () => {
-    const a = horizontalCubicEdgePath(sx, sy, tx, ty, 1);
-    const b = horizontalCubicEdgePath(sx, sy, tx, ty, 2);
-    expect(b).not.toBe(a);
-  });
-
-  it('larger curvature pushes the control handles further out', () => {
-    const handleOf = (curv: number) => {
-      // First control point x is `sx + handle`; parse it back out.
-      const m = horizontalCubicEdgePath(0, 0, 40, 0, curv).match(/^M0,0 C(-?\d+(?:\.\d+)?),0/);
-      return Number(m![1]);
-    };
-    expect(handleOf(2)).toBeGreaterThan(handleOf(1));
-    expect(handleOf(0.5)).toBeLessThan(handleOf(1));
-    expect(handleOf(2)).toBe(2 * EDGE_MIN_HANDLE);
-  });
-
-  it('handle scales with the vertical span for stacked nodes', () => {
-    // |dy|=200 ⇒ base handle = max(64, 0, 160) = 160; ×1 = 160.
-    const d = horizontalCubicEdgePath(0, 0, 0, 200, 1);
-    expect(d).toBe('M0,0 C160,0 -160,200 0,200');
-  });
-});
+import { describe, it, expect } from 'vitest';
+import { horizontalCubicEdgePath, EDGE_MIN_HANDLE } from '../edge-path.js';
+
+describe('horizontalCubicEdgePath', () => {
+  // A short horizontal edge: |dx|=40 < EDGE_MIN_HANDLE*2, |dy|=0, so the
+  // base handle is the floor (64).
+  const sx = 0, sy = 0, tx = 40, ty = 0;
+
+  it('curvature 1 uses the floor handle (historical appearance)', () => {
+    const d = horizontalCubicEdgePath(sx, sy, tx, ty, 1);
+    // handle = max(64, 20, 0) = 64
+    expect(d).toBe(`M0,0 C${EDGE_MIN_HANDLE},0 ${40 - EDGE_MIN_HANDLE},0 40,0`);
+  });
+
+  it('default curvature equals explicit curvature 1', () => {
+    expect(horizontalCubicEdgePath(sx, sy, tx, ty)).toBe(horizontalCubicEdgePath(sx, sy, tx, ty, 1));
+  });
+
+  it('curvature 0 collapses control points onto the endpoints (straight line)', () => {
+    const d = horizontalCubicEdgePath(sx, sy, tx, ty, 0);
+    expect(d).toBe('M0,0 C0,0 40,0 40,0');
+  });
+
+  it('changing curvature changes the path output (AC#6)', () => {
+    const a = horizontalCubicEdgePath(sx, sy, tx, ty, 1);
+    const b = horizontalCubicEdgePath(sx, sy, tx, ty, 2);
+    expect(b).not.toBe(a);
+  });
+
+  it('larger curvature pushes the control handles further out', () => {
+    const handleOf = (curv: number) => {
+      // First control point x is `sx + handle`; parse it back out.
+      const m = horizontalCubicEdgePath(0, 0, 40, 0, curv).match(/^M0,0 C(-?\d+(?:\.\d+)?),0/);
+      return Number(m![1]);
+    };
+    expect(handleOf(2)).toBeGreaterThan(handleOf(1));
+    expect(handleOf(0.5)).toBeLessThan(handleOf(1));
+    expect(handleOf(2)).toBe(2 * EDGE_MIN_HANDLE);
+  });
+
+  it('handle scales with the vertical span for stacked nodes', () => {
+    // |dy|=200 ⇒ base handle = max(64, 0, 160) = 160; ×1 = 160.
+    const d = horizontalCubicEdgePath(0, 0, 0, 200, 1);
+    expect(d).toBe('M0,0 C160,0 -160,200 0,200');
+  });
+
+  it('entryCurvature independently scales the arrival handle', () => {
+    // exit handle = max(64,20,0)*1 = 64; entry handle = max(64,20,0)*2 = 128.
+    const d = horizontalCubicEdgePath(0, 0, 40, 0, 1, 2);
+    expect(d).toBe(`M0,0 C${EDGE_MIN_HANDLE},0 ${40 - EDGE_MIN_HANDLE * 2},0 40,0`);
+  });
+
+  it('omitting entryCurvature gives symmetric handles (historical behaviour)', () => {
+    expect(horizontalCubicEdgePath(0, 0, 40, 0, 0.5)).toBe(
+      horizontalCubicEdgePath(0, 0, 40, 0, 0.5, 0.5),
+    );
+  });
+});

package/src/__tests__/scope.test.ts

@@ -1,27 +1,27 @@
-import { describe, it, expect } from 'vitest';
-import { checkScopeRoot, SCOPE_MISSING_ROOT_CODE, type Scope } from '../scope.js';
-
-describe('checkScopeRoot', () => {
-  it('returns null for non-root scopes', () => {
-    expect(checkScopeRoot({ mode: 'all' }, [1, 2])).toBeNull();
-    expect(checkScopeRoot({ mode: 'level', maxLevel: 1 }, [1, 2])).toBeNull();
-  });
-
-  it('returns null when the root id is present (numeric ids compared as strings)', () => {
-    const scope: Scope = { mode: 'root', rootGoalId: '2' };
-    expect(checkScopeRoot(scope, [1, 2, 3])).toBeNull();
-  });
-
-  it('returns a SCOPE-001 warning when the root id is absent', () => {
-    const scope: Scope = { mode: 'root', rootGoalId: '99' };
-    const w = checkScopeRoot(scope, [1, 2, 3]);
-    expect(w).not.toBeNull();
-    expect(w!.code).toBe(SCOPE_MISSING_ROOT_CODE);
-    expect(w!.message).toContain('99');
-  });
-
-  it('handles string goal ids', () => {
-    expect(checkScopeRoot({ mode: 'root', rootGoalId: 'g1' }, ['g1', 'g2'])).toBeNull();
-    expect(checkScopeRoot({ mode: 'root', rootGoalId: 'gX' }, ['g1', 'g2'])).not.toBeNull();
-  });
-});
+import { describe, it, expect } from 'vitest';
+import { checkScopeRoot, SCOPE_MISSING_ROOT_CODE, type Scope } from '../scope.js';
+
+describe('checkScopeRoot', () => {
+  it('returns null for non-root scopes', () => {
+    expect(checkScopeRoot({ mode: 'all' }, [1, 2])).toBeNull();
+    expect(checkScopeRoot({ mode: 'level', maxLevel: 1 }, [1, 2])).toBeNull();
+  });
+
+  it('returns null when the root id is present (numeric ids compared as strings)', () => {
+    const scope: Scope = { mode: 'root', rootGoalId: '2' };
+    expect(checkScopeRoot(scope, [1, 2, 3])).toBeNull();
+  });
+
+  it('returns a SCOPE-001 warning when the root id is absent', () => {
+    const scope: Scope = { mode: 'root', rootGoalId: '99' };
+    const w = checkScopeRoot(scope, [1, 2, 3]);
+    expect(w).not.toBeNull();
+    expect(w!.code).toBe(SCOPE_MISSING_ROOT_CODE);
+    expect(w!.message).toContain('99');
+  });
+
+  it('handles string goal ids', () => {
+    expect(checkScopeRoot({ mode: 'root', rootGoalId: 'g1' }, ['g1', 'g2'])).toBeNull();
+    expect(checkScopeRoot({ mode: 'root', rootGoalId: 'gX' }, ['g1', 'g2'])).not.toBeNull();
+  });
+});