@transitrix/diagrams 1.8.18 → 1.8.20

package/dist/blocks/validate.d.ts

@@ -21,6 +21,22 @@ export interface ValidateGridOptions {
     /** Extra template-level rules to run once the base grid is well-formed. */
     rules?: GridRule[];
 }
+/**
+ * Element-level TYPE registry — IDS_AND_REFERENCES.md §3.1, plus
+ * `VERIFICATION` (§3.7): block diagrams cross-reference the full
+ * hazard → risk-control → requirement → verification chain, and
+ * `VERIFICATION` is the terminal link in that chain.
+ *
+ * `FACTOR` and `ACTIVITY` are kept alongside their canonical replacements
+ * `DRIVER` and `ACTION` — both still-valid grandfathered/deprecated aliases
+ * per §3.1 and §6, not yet forced to migrate.
+ *
+ * `UNIT`/`EMPLOYEE` (replaced by `ACTOR`, removed from canon 2026-05-29) and
+ * `ISSUE` (retired 2026-06-07, no replacement TYPE — see methodology
+ * `docs/decisions/2026-06-07-retire-model-issue-type.md`) are deliberately
+ * not carried forward. `STAGE` was never a canonical TYPE.
+ */
+export declare const REGISTERED_ELEMENT_TYPES: Set<string>;
 export declare function validateNestedBlocks(input: unknown): ValidationResult;
 /** Matrix subset (§4a): validate a `grid:` root document — BL-021..BL-025. */
 export declare function validateGrid(input: unknown, options?: ValidateGridOptions): ValidationResult;

package/dist/blocks/validate.js

@@ -18,23 +18,55 @@ const CANONICAL_ID_RE = /^[A-Z][A-Z0-9_]*(-[A-Z0-9][A-Z0-9_]*)+-\d+$/;
  * dot, so we recognise it separately.
  */
 const CAPABILITY_ID_RE = /^CAPABILITY-[VH]\d+(\.\d+){0,2}$/;
-/** Element-level TYPE registry — IDS_AND_REFERENCES.md §3.1. */
-const REGISTERED_ELEMENT_TYPES = new Set([
+/**
+ * Element-level TYPE registry — IDS_AND_REFERENCES.md §3.1, plus
+ * `VERIFICATION` (§3.7): block diagrams cross-reference the full
+ * hazard → risk-control → requirement → verification chain, and
+ * `VERIFICATION` is the terminal link in that chain.
+ *
+ * `FACTOR` and `ACTIVITY` are kept alongside their canonical replacements
+ * `DRIVER` and `ACTION` — both still-valid grandfathered/deprecated aliases
+ * per §3.1 and §6, not yet forced to migrate.
+ *
+ * `UNIT`/`EMPLOYEE` (replaced by `ACTOR`, removed from canon 2026-05-29) and
+ * `ISSUE` (retired 2026-06-07, no replacement TYPE — see methodology
+ * `docs/decisions/2026-06-07-retire-model-issue-type.md`) are deliberately
+ * not carried forward. `STAGE` was never a canonical TYPE.
+ */
+export const REGISTERED_ELEMENT_TYPES = new Set([
+    'DRIVER',
     'FACTOR',
     'GOAL',
     'CHANGE',
+    'ACTION',
     'ACTIVITY',
     'CAPABILITY',
     'PROCESS',
+    'STEP',
     'PRODUCT',
     'APPLICATION',
     'INTEGRATION',
     'ROLE',
-    'UNIT',
-    'EMPLOYEE',
+    'ACTOR',
+    'LOCATION',
+    'BUSINESS_SERVICE',
     'SCENARIO',
-    'ISSUE',
-    'STAGE',
+    'EQUIPMENT',
+    'NODE',
+    'TECHNOLOGY_SERVICE',
+    'BUSINESS_OBJECT',
+    'RULE',
+    'REGISTRY',
+    'CONSTRAINT',
+    'REQUIREMENT',
+    'STAKEHOLDER',
+    'ASSESSMENT',
+    'HAZARD',
+    'RISK_CONTROL',
+    'TARGET_STATE',
+    'REL',
+    'MILESTONE',
+    'VERIFICATION',
 ]);
 /**
  * Recommended maximum nesting depth (1-indexed). The spec warns at depth 6+;

package/dist/edge-path.d.ts

@@ -20,3 +20,18 @@ export declare const DEFAULT_EDGE_CURVATURE = 1;
  *   - >1  → progressively stronger arc at that end.
  */
 export declare function horizontalCubicEdgePath(sx: number, sy: number, tx: number, ty: number, curvature?: number, entryCurvature?: number): string;
+/**
+ * Builds the SVG `d` for a "skip" edge that must arc over an intermediate
+ * node sitting on the direct (sx,sy)→(tx,ty) line — e.g. a Network/PSND view
+ * where a multi-predecessor activity's nearer predecessor shares a row with
+ * one of the columns in between, so the direct line would be drawn straight
+ * through that node. Both control points target `bowY` instead of each
+ * endpoint's own Y, producing a hump that departs/arrives at an angle rather
+ * than the flat horizontal tangent of `horizontalCubicEdgePath`.
+ *
+ * A cubic's actual apex only reaches part-way from an endpoint Y to the
+ * control-point Y (75% at the midpoint for a fully symmetric sy=ty curve),
+ * so callers must pick `bowY` well past the obstacle for the apex to clear
+ * it — see `render-activities.ts`'s `blockingNodes`/`bowY` for the margin.
+ */
+export declare function bowedCubicEdgePath(sx: number, sy: number, tx: number, ty: number, bowY: number, curvature?: number): string;

package/dist/edge-path.js

@@ -47,3 +47,22 @@ export function horizontalCubicEdgePath(sx, sy, tx, ty, curvature = DEFAULT_EDGE
     const entryHandle = baseHandle * (entryCurvature ?? curvature);
     return `M${sx},${sy} C${sx + exitHandle},${sy} ${tx - entryHandle},${ty} ${tx},${ty}`;
 }
+/**
+ * Builds the SVG `d` for a "skip" edge that must arc over an intermediate
+ * node sitting on the direct (sx,sy)→(tx,ty) line — e.g. a Network/PSND view
+ * where a multi-predecessor activity's nearer predecessor shares a row with
+ * one of the columns in between, so the direct line would be drawn straight
+ * through that node. Both control points target `bowY` instead of each
+ * endpoint's own Y, producing a hump that departs/arrives at an angle rather
+ * than the flat horizontal tangent of `horizontalCubicEdgePath`.
+ *
+ * A cubic's actual apex only reaches part-way from an endpoint Y to the
+ * control-point Y (75% at the midpoint for a fully symmetric sy=ty curve),
+ * so callers must pick `bowY` well past the obstacle for the apex to clear
+ * it — see `render-activities.ts`'s `blockingNodes`/`bowY` for the margin.
+ */
+export function bowedCubicEdgePath(sx, sy, tx, ty, bowY, curvature = DEFAULT_EDGE_CURVATURE) {
+    const dx = tx - sx;
+    const handle = Math.max(EDGE_MIN_HANDLE, Math.min(Math.abs(dx) * DX_FACTOR, MAX_HANDLE)) * curvature;
+    return `M${sx},${sy} C${sx + handle},${bowY} ${tx - handle},${bowY} ${tx},${ty}`;
+}

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

@@ -10,6 +10,18 @@ import { type NodeSizePreset } from '../node-size-presets.js';
 export declare const ACTIVITIES_NETWORK_CSS = "\n  .act-node { fill: var(--ts-layer-activity, #d4edda); stroke: var(--ts-node-stroke, #004d67); stroke-width: 1; }\n  .critical-node { fill: var(--ts-brand-orange-tint, #ffeee5); stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 1; }\n  .milestone-node { fill: #ecfeff; stroke: var(--ts-text-muted, #64748b); stroke-dasharray: 4 2; }\n  .critical-edge { stroke: var(--ts-brand-orange, #ff4d00); stroke-width: 1.5; }\n  .arrow-fill-critical { fill: var(--ts-brand-orange, #ff4d00); }\n";
 /** Arrowhead marker defs shared by both hosts for the network view. */
 export declare const ACTIVITIES_NETWORK_DEFS = "<defs>\n  <marker id=\"arrow\" markerWidth=\"8\" markerHeight=\"8\" refX=\"8\" refY=\"3\" orient=\"auto\">\n    <path d=\"M0,0 L0,6 L8,3 z\" class=\"arrow-fill\"/>\n  </marker>\n  <marker id=\"arrow-crit\" markerWidth=\"8\" markerHeight=\"8\" refX=\"8\" refY=\"3\" orient=\"auto\">\n    <path d=\"M0,0 L0,6 L8,3 z\" class=\"arrow-fill-critical\"/>\n  </marker>\n</defs>";
+/**
+ * Extra top padding (px) a network-view canvas must add so skip-edge bows
+ * (see `blockingNodes`/`bowY` above) never rise above the diagram's own node
+ * bounds (`layout.bounds.y`). Node rows shift down by the returned amount to
+ * make room for the bow within the diagram area; the title block — drawn
+ * separately, above that area, at a fixed position independent of this pad —
+ * is left undisturbed, so the bow can never climb into the reserved title
+ * zone (the earlier version floored against the canvas's literal y=0, which
+ * let a tall bow draw straight through the title text sitting between 0 and
+ * the diagram's un-padded top).
+ */
+export declare function computeNetworkTopPad(layout: ActivitiesLayout): number;
 /**
  * Canonical Network (PSND) body — the node rects and edge paths that go inside
  * the `<svg>`, shared verbatim by the VS Code preview and the host-neutral

package/dist/webview/render-activities.js

@@ -18,7 +18,7 @@
  */
 import { layoutActivities } from '../activities/layout.js';
 import { computeCpm } from '../activities/cpm.js';
-import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
+import { horizontalCubicEdgePath, bowedCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
 import { parseNodeSizePreset, resolveActionNodeSize } from '../node-size-presets.js';
 import { generateSvgEmbedCss } from '../theme/index.js';
 import { emitCenteredTextSvg, layoutCenteredEntityText } from './entity-text-layout.js';
@@ -46,6 +46,71 @@ export const ACTIVITIES_NETWORK_DEFS = `<defs>
     <path d="M0,0 L0,6 L8,3 z" class="arrow-fill-critical"/>
   </marker>
 </defs>`;
+/**
+ * Nodes horizontally between `source` and `target` (a "skip" edge passes over
+ * their column) whose vertical span overlaps the edge's Y band. A
+ * straight-tangent cubic (`horizontalCubicEdgePath`) stays within
+ * [min(sourceCenterY,targetCenterY), max(...)] by convex hull, so any such
+ * node sits directly on the edge's path — the "arrow goes straight through
+ * the node" bug reported against a linear PSND chain where a multi-predecessor
+ * activity's nearer predecessor shares a row with an intermediate column.
+ */
+function blockingNodes(nodes, source, target) {
+    const sCenterY = source.y + source.height / 2;
+    const tCenterY = target.y + target.height / 2;
+    const loY = Math.min(sCenterY, tCenterY);
+    const hiY = Math.max(sCenterY, tCenterY);
+    const sRight = source.x + source.width;
+    const tLeft = target.x;
+    return nodes.filter((n) => {
+        if (n.id === source.id || n.id === target.id)
+            return false;
+        if (n.x + n.width <= sRight || n.x >= tLeft)
+            return false; // not between the two columns
+        return n.y < hiY && n.y + n.height > loY; // vertical overlap with the edge's band
+    });
+}
+/**
+ * Pre-offset bow-control-point Y for a skip edge arcing over `blockers`: one
+ * full node-height of clearance above the topmost blocker's top edge. A
+ * cubic's apex only reaches part-way toward its control point (see
+ * `bowedCubicEdgePath` doc), so this generous margin is what actually keeps
+ * the visible curve clear of the box — verified numerically in
+ * `render-activities.test.ts`.
+ */
+function bowY(blockers) {
+    const topY = Math.min(...blockers.map((n) => n.y));
+    const clearance = Math.max(...blockers.map((n) => n.height));
+    return topY - clearance;
+}
+/**
+ * Extra top padding (px) a network-view canvas must add so skip-edge bows
+ * (see `blockingNodes`/`bowY` above) never rise above the diagram's own node
+ * bounds (`layout.bounds.y`). Node rows shift down by the returned amount to
+ * make room for the bow within the diagram area; the title block — drawn
+ * separately, above that area, at a fixed position independent of this pad —
+ * is left undisturbed, so the bow can never climb into the reserved title
+ * zone (the earlier version floored against the canvas's literal y=0, which
+ * let a tall bow draw straight through the title text sitting between 0 and
+ * the diagram's un-padded top).
+ */
+export function computeNetworkTopPad(layout) {
+    const nodeMap = new Map(layout.nodes.map((n) => [n.id, n]));
+    let pad = 0;
+    for (const e of layout.edges) {
+        const s = nodeMap.get(e.sourceId);
+        const t = nodeMap.get(e.targetId);
+        if (!s || !t)
+            continue;
+        const blockers = blockingNodes(layout.nodes, s, t);
+        if (blockers.length === 0)
+            continue;
+        const shortfall = layout.bounds.y - bowY(blockers);
+        if (shortfall > pad)
+            pad = shortfall;
+    }
+    return pad;
+}
 function activityNodeSvg(n, x, y, isCritical, isMilestone, durLabel) {
     const cls = `diagram-node act-node ${isCritical ? 'critical-node' : ''} ${isMilestone ? 'milestone-node' : ''}`.trim();
     const specs = layoutCenteredEntityText({
@@ -92,7 +157,11 @@ export function renderActivitiesNetworkBody(layout, cpm, ox, oy, curvature, entr
         const ty = t.y + oy + t.height / 2;
         const cls = e.isCritical ? 'diagram-edge critical-edge' : 'diagram-edge';
         const marker = `url(#${e.isCritical ? 'arrow-crit' : 'arrow'})`;
-        return `<path d="${horizontalCubicEdgePath(sx, sy, tx, ty, curvature, entryCurvature)}" class="${cls}" marker-end="${marker}"/>`;
+        const blockers = blockingNodes(layout.nodes, s, t);
+        const d = blockers.length > 0
+            ? bowedCubicEdgePath(sx, sy, tx, ty, bowY(blockers) + oy, curvature)
+            : horizontalCubicEdgePath(sx, sy, tx, ty, curvature, entryCurvature);
+        return `<path d="${d}" class="${cls}" marker-end="${marker}"/>`;
     })
         .join('\n');
     const nodeSvg = layout.nodes
@@ -142,10 +211,12 @@ export function renderActivitiesSvg(doc, options = {}) {
     }
     const cpm = computeCpm(renderDoc.activities ?? []);
     const titleH = title ? 24 : 0;
+    const oyBase = -layout.bounds.y + N_PAD + titleH;
+    const topPad = computeNetworkTopPad(layout);
     const w = layout.bounds.width + N_PAD * 2;
-    const h = layout.bounds.height + N_PAD * 2 + titleH;
+    const h = layout.bounds.height + N_PAD * 2 + titleH + topPad;
     const ox = -layout.bounds.x + N_PAD;
-    const oy = -layout.bounds.y + N_PAD + titleH;
+    const oy = oyBase + topPad;
     const body = renderActivitiesNetworkBody(layout, cpm, ox, oy, curvature, entryCurvature);
     const titleSvg = title
         ? `<text class="text-header" x="${N_PAD}" y="${N_PAD - 6}">${escXml(title)}</text>`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transitrix/diagrams",
-  "version": "1.8.18",
+  "version": "1.8.20",
   "type": "module",
   "description": "Shared rendering, validation, and pure mutations for Transitrix custom diagram formats.",
   "license": "MIT",

package/src/blocks/validate.ts

@@ -45,23 +45,55 @@ const CANONICAL_ID_RE = /^[A-Z][A-Z0-9_]*(-[A-Z0-9][A-Z0-9_]*)+-\d+$/;
  */
 const CAPABILITY_ID_RE = /^CAPABILITY-[VH]\d+(\.\d+){0,2}$/;
 
-/** Element-level TYPE registry — IDS_AND_REFERENCES.md §3.1. */
-const REGISTERED_ELEMENT_TYPES = new Set<string>([
+/**
+ * Element-level TYPE registry — IDS_AND_REFERENCES.md §3.1, plus
+ * `VERIFICATION` (§3.7): block diagrams cross-reference the full
+ * hazard → risk-control → requirement → verification chain, and
+ * `VERIFICATION` is the terminal link in that chain.
+ *
+ * `FACTOR` and `ACTIVITY` are kept alongside their canonical replacements
+ * `DRIVER` and `ACTION` — both still-valid grandfathered/deprecated aliases
+ * per §3.1 and §6, not yet forced to migrate.
+ *
+ * `UNIT`/`EMPLOYEE` (replaced by `ACTOR`, removed from canon 2026-05-29) and
+ * `ISSUE` (retired 2026-06-07, no replacement TYPE — see methodology
+ * `docs/decisions/2026-06-07-retire-model-issue-type.md`) are deliberately
+ * not carried forward. `STAGE` was never a canonical TYPE.
+ */
+export const REGISTERED_ELEMENT_TYPES = new Set<string>([
+  'DRIVER',
   'FACTOR',
   'GOAL',
   'CHANGE',
+  'ACTION',
   'ACTIVITY',
   'CAPABILITY',
   'PROCESS',
+  'STEP',
   'PRODUCT',
   'APPLICATION',
   'INTEGRATION',
   'ROLE',
-  'UNIT',
-  'EMPLOYEE',
+  'ACTOR',
+  'LOCATION',
+  'BUSINESS_SERVICE',
   'SCENARIO',
-  'ISSUE',
-  'STAGE',
+  'EQUIPMENT',
+  'NODE',
+  'TECHNOLOGY_SERVICE',
+  'BUSINESS_OBJECT',
+  'RULE',
+  'REGISTRY',
+  'CONSTRAINT',
+  'REQUIREMENT',
+  'STAKEHOLDER',
+  'ASSESSMENT',
+  'HAZARD',
+  'RISK_CONTROL',
+  'TARGET_STATE',
+  'REL',
+  'MILESTONE',
+  'VERIFICATION',
 ]);
 
 /**

package/src/edge-path.ts

@@ -62,3 +62,30 @@ export function horizontalCubicEdgePath(
   const entryHandle = baseHandle * (entryCurvature ?? curvature);
   return `M${sx},${sy} C${sx + exitHandle},${sy} ${tx - entryHandle},${ty} ${tx},${ty}`;
 }
+
+/**
+ * Builds the SVG `d` for a "skip" edge that must arc over an intermediate
+ * node sitting on the direct (sx,sy)→(tx,ty) line — e.g. a Network/PSND view
+ * where a multi-predecessor activity's nearer predecessor shares a row with
+ * one of the columns in between, so the direct line would be drawn straight
+ * through that node. Both control points target `bowY` instead of each
+ * endpoint's own Y, producing a hump that departs/arrives at an angle rather
+ * than the flat horizontal tangent of `horizontalCubicEdgePath`.
+ *
+ * A cubic's actual apex only reaches part-way from an endpoint Y to the
+ * control-point Y (75% at the midpoint for a fully symmetric sy=ty curve),
+ * so callers must pick `bowY` well past the obstacle for the apex to clear
+ * it — see `render-activities.ts`'s `blockingNodes`/`bowY` for the margin.
+ */
+export function bowedCubicEdgePath(
+  sx: number,
+  sy: number,
+  tx: number,
+  ty: number,
+  bowY: number,
+  curvature: number = DEFAULT_EDGE_CURVATURE,
+): string {
+  const dx = tx - sx;
+  const handle = Math.max(EDGE_MIN_HANDLE, Math.min(Math.abs(dx) * DX_FACTOR, MAX_HANDLE)) * curvature;
+  return `M${sx},${sy} C${sx + handle},${bowY} ${tx - handle},${bowY} ${tx},${ty}`;
+}

package/src/webview/render-activities.ts

@@ -23,7 +23,7 @@ import type {
   ActivitiesLayout,
   ActivitiesLayoutOptions,
 } from '../activities/types.js';
-import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
+import { horizontalCubicEdgePath, bowedCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
 import { parseNodeSizePreset, resolveActionNodeSize, type NodeSizePreset } from '../node-size-presets.js';
 import { generateSvgEmbedCss } from '../theme/index.js';
 import { emitCenteredTextSvg, layoutCenteredEntityText } from './entity-text-layout.js';
@@ -55,6 +55,75 @@ export const ACTIVITIES_NETWORK_DEFS = `<defs>
   </marker>
 </defs>`;
 
+type ActivityLayoutNode = ActivitiesLayout['nodes'][number];
+
+/**
+ * Nodes horizontally between `source` and `target` (a "skip" edge passes over
+ * their column) whose vertical span overlaps the edge's Y band. A
+ * straight-tangent cubic (`horizontalCubicEdgePath`) stays within
+ * [min(sourceCenterY,targetCenterY), max(...)] by convex hull, so any such
+ * node sits directly on the edge's path — the "arrow goes straight through
+ * the node" bug reported against a linear PSND chain where a multi-predecessor
+ * activity's nearer predecessor shares a row with an intermediate column.
+ */
+function blockingNodes(
+  nodes: ActivityLayoutNode[],
+  source: ActivityLayoutNode,
+  target: ActivityLayoutNode,
+): ActivityLayoutNode[] {
+  const sCenterY = source.y + source.height / 2;
+  const tCenterY = target.y + target.height / 2;
+  const loY = Math.min(sCenterY, tCenterY);
+  const hiY = Math.max(sCenterY, tCenterY);
+  const sRight = source.x + source.width;
+  const tLeft = target.x;
+  return nodes.filter((n) => {
+    if (n.id === source.id || n.id === target.id) return false;
+    if (n.x + n.width <= sRight || n.x >= tLeft) return false; // not between the two columns
+    return n.y < hiY && n.y + n.height > loY; // vertical overlap with the edge's band
+  });
+}
+
+/**
+ * Pre-offset bow-control-point Y for a skip edge arcing over `blockers`: one
+ * full node-height of clearance above the topmost blocker's top edge. A
+ * cubic's apex only reaches part-way toward its control point (see
+ * `bowedCubicEdgePath` doc), so this generous margin is what actually keeps
+ * the visible curve clear of the box — verified numerically in
+ * `render-activities.test.ts`.
+ */
+function bowY(blockers: ActivityLayoutNode[]): number {
+  const topY = Math.min(...blockers.map((n) => n.y));
+  const clearance = Math.max(...blockers.map((n) => n.height));
+  return topY - clearance;
+}
+
+/**
+ * Extra top padding (px) a network-view canvas must add so skip-edge bows
+ * (see `blockingNodes`/`bowY` above) never rise above the diagram's own node
+ * bounds (`layout.bounds.y`). Node rows shift down by the returned amount to
+ * make room for the bow within the diagram area; the title block — drawn
+ * separately, above that area, at a fixed position independent of this pad —
+ * is left undisturbed, so the bow can never climb into the reserved title
+ * zone (the earlier version floored against the canvas's literal y=0, which
+ * let a tall bow draw straight through the title text sitting between 0 and
+ * the diagram's un-padded top).
+ */
+export function computeNetworkTopPad(layout: ActivitiesLayout): number {
+  const nodeMap = new Map(layout.nodes.map((n) => [n.id, n]));
+  let pad = 0;
+  for (const e of layout.edges) {
+    const s = nodeMap.get(e.sourceId);
+    const t = nodeMap.get(e.targetId);
+    if (!s || !t) continue;
+    const blockers = blockingNodes(layout.nodes, s, t);
+    if (blockers.length === 0) continue;
+    const shortfall = layout.bounds.y - bowY(blockers);
+    if (shortfall > pad) pad = shortfall;
+  }
+  return pad;
+}
+
 function activityNodeSvg(
   n: ActivitiesLayout['nodes'][number],
   x: number,
@@ -119,7 +188,11 @@ export function renderActivitiesNetworkBody(
       const ty = t.y + oy + t.height / 2;
       const cls = e.isCritical ? 'diagram-edge critical-edge' : 'diagram-edge';
       const marker = `url(#${e.isCritical ? 'arrow-crit' : 'arrow'})`;
-      return `<path d="${horizontalCubicEdgePath(sx, sy, tx, ty, curvature, entryCurvature)}" class="${cls}" marker-end="${marker}"/>`;
+      const blockers = blockingNodes(layout.nodes, s, t);
+      const d = blockers.length > 0
+        ? bowedCubicEdgePath(sx, sy, tx, ty, bowY(blockers) + oy, curvature)
+        : horizontalCubicEdgePath(sx, sy, tx, ty, curvature, entryCurvature);
+      return `<path d="${d}" class="${cls}" marker-end="${marker}"/>`;
     })
     .join('\n');
 
@@ -207,10 +280,12 @@ export function renderActivitiesSvg(doc: ActivityDoc, options: RenderActivitiesO
 
   const cpm = computeCpm(renderDoc.activities ?? []);
   const titleH = title ? 24 : 0;
+  const oyBase = -layout.bounds.y + N_PAD + titleH;
+  const topPad = computeNetworkTopPad(layout);
   const w = layout.bounds.width + N_PAD * 2;
-  const h = layout.bounds.height + N_PAD * 2 + titleH;
+  const h = layout.bounds.height + N_PAD * 2 + titleH + topPad;
   const ox = -layout.bounds.x + N_PAD;
-  const oy = -layout.bounds.y + N_PAD + titleH;
+  const oy = oyBase + topPad;
 
   const body = renderActivitiesNetworkBody(layout, cpm, ox, oy, curvature, entryCurvature);