@graph-artifact/core 0.1.0

package/dist/layout/edges/paths.js

@@ -0,0 +1,279 @@
+/**
+ * paths.ts — Pure path math utilities.
+ *
+ * Functions for path generation, shortening, deviation detection,
+ * and label placement. No side effects, no DOM, no React — just geometry.
+ */
+// ─── Waypoint Deviation Check ────────────────────────────────────────────────
+/**
+ * Checks whether any waypoint deviates from the straight line between the
+ * first and last point by more than `threshold` pixels.
+ *
+ * Used to distinguish simple straight edges (where dagre's waypoints are
+ * essentially collinear) from routed edges (where dagre bent the path
+ * around obstacles). Back-edges and lateral edges skip this check entirely.
+ */
+export function waypointsDeviate(points, threshold) {
+    if (points.length <= 2)
+        return false;
+    const first = points[0];
+    const last = points[points.length - 1];
+    const dx = last.x - first.x;
+    const dy = last.y - first.y;
+    const len = Math.hypot(dx, dy);
+    if (len < 1e-6)
+        return false; // coincident endpoints
+    // Check perpendicular distance of each inner point from the first→last line
+    for (let i = 1; i < points.length - 1; i++) {
+        const px = points[i].x - first.x;
+        const py = points[i].y - first.y;
+        const dist = Math.abs(px * dy - py * dx) / len;
+        if (dist > threshold)
+            return true;
+    }
+    return false;
+}
+// ─── Path Shortening for Arrow Markers ──────────────────────────────────────
+/**
+ * Shortens a path by moving the last point `distance` pixels back along
+ * the direction from the second-to-last point to the last point.
+ * This prevents the arrowhead marker from overshooting the node boundary.
+ */
+export function shortenPathEnd(points, distance) {
+    if (points.length < 2 || distance <= 0)
+        return points;
+    const result = points.slice();
+    let remaining = distance;
+    while (remaining > 0 && result.length >= 2) {
+        const last = result[result.length - 1];
+        const prev = result[result.length - 2];
+        const dx = last.x - prev.x;
+        const dy = last.y - prev.y;
+        const len = Math.hypot(dx, dy);
+        if (len < 1e-6) {
+            result.pop();
+            continue;
+        }
+        if (len <= remaining) {
+            if (result.length <= 2) {
+                // Can't shorten further without collapsing the path.
+                result[result.length - 1] = { ...prev };
+                break;
+            }
+            result.pop();
+            remaining -= len;
+            continue;
+        }
+        result[result.length - 1] = {
+            x: last.x - (dx / len) * remaining,
+            y: last.y - (dy / len) * remaining,
+        };
+        remaining = 0;
+    }
+    return result.length >= 2 ? result : points;
+}
+/**
+ * Shortens a path by moving the first point `distance` pixels forward along
+ * the direction from the first point to the second point.
+ * Used for ER start markers so they don't overflow into the source node.
+ */
+export function shortenPathStart(points, distance) {
+    if (points.length < 2 || distance <= 0)
+        return points;
+    const result = points.slice();
+    let remaining = distance;
+    while (remaining > 0 && result.length >= 2) {
+        const first = result[0];
+        const next = result[1];
+        const dx = next.x - first.x;
+        const dy = next.y - first.y;
+        const len = Math.hypot(dx, dy);
+        if (len < 1e-6) {
+            result.shift();
+            continue;
+        }
+        if (len <= remaining) {
+            if (result.length <= 2) {
+                // Can't shorten further without collapsing the path.
+                result[0] = { ...next };
+                break;
+            }
+            result.shift();
+            remaining -= len;
+            continue;
+        }
+        result[0] = {
+            x: first.x + (dx / len) * remaining,
+            y: first.y + (dy / len) * remaining,
+        };
+        remaining = 0;
+    }
+    return result.length >= 2 ? result : points;
+}
+// ─── Smooth Path Generation ─────────────────────────────────────────────────
+/**
+ * Generates an SVG path using Catmull-Rom interpolation through all points.
+ *
+ * Unlike B-splines (which approximate), Catmull-Rom passes THROUGH every
+ * control point while producing smooth curves between them. This gives us
+ * the flowing look of Mermaid's curveBasis without the overshoot problem.
+ *
+ * For edges with only 2 points (straight lines), produces a simple L command.
+ * For edges with bends, produces smooth cubic bezier curves that naturally
+ * flow through dagre's computed waypoints.
+ *
+ * When `straightEnds` is true, the first and last segments use straight lines
+ * instead of curves. This ensures markers at path endpoints align perfectly
+ * with the node boundary (used for ER cardinality markers).
+ *
+ * Alpha = 0.5 (centripetal) prevents cusps and self-intersections.
+ */
+export function generateSmoothPath(points, straightEnds = false) {
+    if (points.length < 2)
+        return '';
+    if (points.length === 2) {
+        return `M${points[0].x},${points[0].y}L${points[1].x},${points[1].y}`;
+    }
+    // If straightEnds and only 3 points, just use line segments
+    if (straightEnds && points.length === 3) {
+        return `M${points[0].x},${points[0].y}L${points[1].x},${points[1].y}L${points[2].x},${points[2].y}`;
+    }
+    const alpha = 0.5; // centripetal Catmull-Rom
+    let path = `M${points[0].x},${points[0].y}`;
+    for (let i = 0; i < points.length - 1; i++) {
+        const isFirstSegment = i === 0;
+        const isLastSegment = i === points.length - 2;
+        // Straight line for first/last segments when requested (ER markers)
+        if (straightEnds && (isFirstSegment || isLastSegment)) {
+            path += `L${points[i + 1].x},${points[i + 1].y}`;
+            continue;
+        }
+        const p0 = points[Math.max(0, i - 1)];
+        const p1 = points[i];
+        const p2 = points[i + 1];
+        const p3 = points[Math.min(points.length - 1, i + 2)];
+        // Knot parameterization
+        const d1 = Math.hypot(p1.x - p0.x, p1.y - p0.y);
+        const d2 = Math.hypot(p2.x - p1.x, p2.y - p1.y);
+        const d3 = Math.hypot(p3.x - p2.x, p3.y - p2.y);
+        const d1a = Math.pow(d1, alpha);
+        const d2a = Math.pow(d2, alpha);
+        const d3a = Math.pow(d3, alpha);
+        // Avoid division by zero for coincident points
+        const eps = 1e-6;
+        const d1a2 = Math.pow(d1, 2 * alpha) || eps;
+        const d2a2 = Math.pow(d2, 2 * alpha) || eps;
+        const d3a2 = Math.pow(d3, 2 * alpha) || eps;
+        // Control points
+        const b1x = (d1a2 * p2.x - d2a2 * p0.x + (2 * d1a2 + 3 * d1a * d2a + d2a2) * p1.x) /
+            (3 * d1a * (d1a + d2a));
+        const b1y = (d1a2 * p2.y - d2a2 * p0.y + (2 * d1a2 + 3 * d1a * d2a + d2a2) * p1.y) /
+            (3 * d1a * (d1a + d2a));
+        const b2x = (d3a2 * p1.x - d2a2 * p3.x + (2 * d3a2 + 3 * d3a * d2a + d2a2) * p2.x) /
+            (3 * d3a * (d3a + d2a));
+        const b2y = (d3a2 * p1.y - d2a2 * p3.y + (2 * d3a2 + 3 * d3a * d2a + d2a2) * p2.y) /
+            (3 * d3a * (d3a + d2a));
+        // Handle edge cases where control points are NaN (coincident points)
+        const cp1x = isFinite(b1x) ? b1x : p1.x;
+        const cp1y = isFinite(b1y) ? b1y : p1.y;
+        const cp2x = isFinite(b2x) ? b2x : p2.x;
+        const cp2y = isFinite(b2y) ? b2y : p2.y;
+        path += `C${cp1x},${cp1y},${cp2x},${cp2y},${p2.x},${p2.y}`;
+    }
+    return path;
+}
+/**
+ * Basis spline path (d3 curveBasis style): smoother than Catmull-Rom and
+ * naturally reduces sharp elbows in orthogonal-ish routes.
+ */
+export function generateBasisPath(points) {
+    if (points.length < 2)
+        return '';
+    if (points.length === 2) {
+        return `M${points[0].x},${points[0].y}L${points[1].x},${points[1].y}`;
+    }
+    // Repeat endpoints to mirror open basis behavior.
+    const p = [points[0], points[0], ...points, points[points.length - 1], points[points.length - 1]];
+    let path = '';
+    let started = false;
+    for (let i = 0; i <= p.length - 4; i++) {
+        const p0 = p[i];
+        const p1 = p[i + 1];
+        const p2 = p[i + 2];
+        const p3 = p[i + 3];
+        // Cubic Bézier equivalent of uniform cubic B-spline segment.
+        const b0 = { x: (p0.x + 4 * p1.x + p2.x) / 6, y: (p0.y + 4 * p1.y + p2.y) / 6 };
+        const b1 = { x: (4 * p1.x + 2 * p2.x) / 6, y: (4 * p1.y + 2 * p2.y) / 6 };
+        const b2 = { x: (2 * p1.x + 4 * p2.x) / 6, y: (2 * p1.y + 4 * p2.y) / 6 };
+        const b3 = { x: (p1.x + 4 * p2.x + p3.x) / 6, y: (p1.y + 4 * p2.y + p3.y) / 6 };
+        if (!started) {
+            path = `M${b0.x},${b0.y}`;
+            started = true;
+        }
+        path += `C${b1.x},${b1.y},${b2.x},${b2.y},${b3.x},${b3.y}`;
+    }
+    return path;
+}
+// ─── Rounded Polyline Path (for orthogonal-ish ER routes) ──────────────────
+/**
+ * Generates a polyline path with rounded corners using quadratic curves.
+ * End segments stay straight; only interior corners are rounded.
+ */
+export function generateRoundedPath(points, radius = 12) {
+    if (points.length < 2)
+        return '';
+    if (points.length === 2) {
+        return `M${points[0].x},${points[0].y}L${points[1].x},${points[1].y}`;
+    }
+    const safeRadius = Math.max(0, radius);
+    let path = `M${points[0].x},${points[0].y}`;
+    for (let i = 1; i < points.length - 1; i++) {
+        const prev = points[i - 1];
+        const curr = points[i];
+        const next = points[i + 1];
+        const inDx = curr.x - prev.x;
+        const inDy = curr.y - prev.y;
+        const outDx = next.x - curr.x;
+        const outDy = next.y - curr.y;
+        const inLen = Math.hypot(inDx, inDy);
+        const outLen = Math.hypot(outDx, outDy);
+        if (inLen < 1e-6 || outLen < 1e-6) {
+            path += `L${curr.x},${curr.y}`;
+            continue;
+        }
+        const uxIn = inDx / inLen;
+        const uyIn = inDy / inLen;
+        const uxOut = outDx / outLen;
+        const uyOut = outDy / outLen;
+        // Collinear segments: keep as a straight join.
+        const cross = uxIn * uyOut - uyIn * uxOut;
+        if (Math.abs(cross) < 1e-3 || safeRadius === 0) {
+            path += `L${curr.x},${curr.y}`;
+            continue;
+        }
+        const corner = Math.min(safeRadius, inLen / 2, outLen / 2);
+        const inX = curr.x - uxIn * corner;
+        const inY = curr.y - uyIn * corner;
+        const outX = curr.x + uxOut * corner;
+        const outY = curr.y + uyOut * corner;
+        path += `L${inX},${inY}Q${curr.x},${curr.y},${outX},${outY}`;
+    }
+    const last = points[points.length - 1];
+    path += `L${last.x},${last.y}`;
+    return path;
+}
+// ─── Label Placement ────────────────────────────────────────────────────────
+export function computeLabelPosition(points) {
+    if (points.length === 0)
+        return { x: 0, y: 0 };
+    if (points.length === 1)
+        return points[0];
+    const mid = (points.length - 1) / 2;
+    const lo = Math.floor(mid);
+    const hi = Math.ceil(mid);
+    const t = mid - lo;
+    return {
+        x: points[lo].x + (points[hi].x - points[lo].x) * t,
+        y: points[lo].y + (points[hi].y - points[lo].y) * t,
+    };
+}

package/dist/layout/index.d.ts

@@ -0,0 +1,59 @@
+/**
+ * layout/index.ts — Entry point for the layout engine.
+ *
+ * Two-phase architecture:
+ *   Phase 1 (layoutNodes): Run dagre for node positions. Return nodes + a
+ *     LayoutContext that holds everything needed to build edges later.
+ *   Phase 2 (buildLayoutEdges): Build edges using actual measured dimensions
+ *     from React Flow, so edge paths match the real node boundaries.
+ *
+ * GraphCanvas calls Phase 1 first, renders nodes, waits for React Flow to
+ * measure them, then calls Phase 2 with actual dimensions. This eliminates
+ * height estimation drift for card-based nodes (ER, Class).
+ *
+ * `layoutParsedGraph()` is a backward-compatible wrapper that does both
+ * phases in one call (using dagre-estimated dimensions for edges).
+ */
+import type { Node, Edge } from '@xyflow/react';
+import type { ParsedDiagram, ParsedGraph, ParsedEdge, ParsedCustomDiagram, NodeMetadata } from '../types.js';
+import type { Theme } from '../ThemeContext.js';
+import type { NodePosition, HandlePositions, EdgeWaypoints } from './types.js';
+export interface LayoutOptions {
+    theme: Theme;
+    metadata?: Record<string, NodeMetadata>;
+}
+export interface LayoutContext {
+    parsedEdges: ParsedEdge[];
+    estimatedPositions: Map<string, NodePosition>;
+    handles: HandlePositions;
+    direction: ParsedGraph['direction'];
+    diamondEdgeHandles: Map<number, string>;
+    edgeWaypoints: EdgeWaypoints[];
+    nodeShapes: Map<string, string>;
+}
+export interface GraphLayoutResult {
+    kind: 'graph';
+    nodes: Node[];
+    edges: Edge[];
+    context?: LayoutContext;
+}
+export interface CustomLayoutResult {
+    kind: 'custom';
+    diagramType: ParsedCustomDiagram['diagramType'];
+    data: ParsedCustomDiagram['data'];
+}
+export type LayoutResult = GraphLayoutResult | CustomLayoutResult;
+export declare function layoutNodes(parsed: ParsedGraph, options: LayoutOptions): {
+    nodes: Node[];
+    context: LayoutContext;
+} | {
+    nodes: Node[];
+    edges: Edge[];
+    context?: undefined;
+};
+export declare function layoutDiagram(parsed: ParsedDiagram, options: LayoutOptions): LayoutResult;
+export declare function buildLayoutEdges(context: LayoutContext, theme: Theme, measuredPositions?: Map<string, NodePosition>): Edge[];
+export declare function layoutParsedGraph(parsed: ParsedGraph, options: LayoutOptions): {
+    nodes: Node[];
+    edges: Edge[];
+};

package/dist/layout/index.js

@@ -0,0 +1,131 @@
+/**
+ * layout/index.ts — Entry point for the layout engine.
+ *
+ * Two-phase architecture:
+ *   Phase 1 (layoutNodes): Run dagre for node positions. Return nodes + a
+ *     LayoutContext that holds everything needed to build edges later.
+ *   Phase 2 (buildLayoutEdges): Build edges using actual measured dimensions
+ *     from React Flow, so edge paths match the real node boundaries.
+ *
+ * GraphCanvas calls Phase 1 first, renders nodes, waits for React Flow to
+ * measure them, then calls Phase 2 with actual dimensions. This eliminates
+ * height estimation drift for card-based nodes (ER, Class).
+ *
+ * `layoutParsedGraph()` is a backward-compatible wrapper that does both
+ * phases in one call (using dagre-estimated dimensions for edges).
+ */
+import { getConfig, getLayoutMapping } from '../config.js';
+import { createDagreGraph, extractPositions, extractEdgeWaypoints, directionToHandles } from './dagre/index.js';
+import { buildEdges, computeForwardEdgeCounts, computeDiamondAssignments } from './edges/index.js';
+import { computeSubgraphBounds, buildSubgraphNode } from './subgraph.js';
+import { layoutSequenceDiagram } from './sequenceLayout.js';
+import { layoutMindmapGraph } from './mindmapLayout.js';
+// ─── Phase 1: Layout Nodes ──────────────────────────────────────────────────
+export function layoutNodes(parsed, options) {
+    const { theme, metadata } = options;
+    // Mindmap uses dedicated radial layout (not dagre).
+    if (parsed.diagramType === 'mindmap') {
+        const mm = layoutMindmapGraph(parsed, theme, metadata);
+        const mindmapEdges = parsed.edges.map((e) => ({ ...e, noArrow: true }));
+        return {
+            nodes: mm.nodes,
+            context: {
+                parsedEdges: mindmapEdges,
+                estimatedPositions: mm.positions,
+                handles: mm.handles,
+                direction: 'LR',
+                diamondEdgeHandles: mm.diamondEdgeHandles,
+                edgeWaypoints: mm.edgeWaypoints,
+                nodeShapes: new Map(mm.nodes.map((n) => [n.id, String(n.data?.shape ?? 'rect')])),
+            },
+        };
+    }
+    // Sequence diagrams use their own grid-based layout (no dagre, no two-phase)
+    if (parsed.diagramType === 'sequence' && parsed.sequence) {
+        return layoutSequenceDiagram(parsed.sequence, theme, metadata);
+    }
+    const { layout } = getConfig();
+    // 1. Build dagre graph and run layout
+    const graph = createDagreGraph(parsed, layout);
+    // 2. Extract positioned coordinates and edge waypoints
+    const positions = extractPositions(graph, parsed.nodes);
+    const edgeWaypoints = extractEdgeWaypoints(graph, parsed);
+    // 3. Compute forward edge counts per node (for handle spreading)
+    const fwCounts = computeForwardEdgeCounts(parsed.edges, positions, parsed.direction);
+    // 3.5 Compute diamond handle assignments (position-aware)
+    const diamondAssignments = computeDiamondAssignments(parsed.nodes, parsed.edges, positions, parsed.direction);
+    // 4. Build React Flow nodes
+    const rfNodeType = getLayoutMapping(parsed.diagramType);
+    const handles = directionToHandles(parsed.direction);
+    const nodes = parsed.nodes.map((node) => {
+        const pos = positions.get(node.id);
+        return {
+            id: node.id,
+            position: { x: pos.x, y: pos.y },
+            data: {
+                label: node.label,
+                shape: node.shape,
+                attributes: node.attributes,
+                properties: node.properties,
+                methods: node.methods,
+                meta: metadata?.[node.id],
+                handles,
+                fwIn: fwCounts.incoming.get(node.id) ?? 0,
+                fwOut: fwCounts.outgoing.get(node.id) ?? 0,
+                diamondHandleConfig: diamondAssignments.handleConfigs.get(node.id),
+                layoutWidth: pos.width,
+                layoutHeight: pos.height,
+            },
+            type: rfNodeType,
+        };
+    });
+    // 5. Build subgraph container nodes (inserted at front so they render behind)
+    if (parsed.subgraphs && parsed.subgraphs.length > 0) {
+        for (const subgraph of parsed.subgraphs) {
+            const bounds = computeSubgraphBounds(subgraph, positions, layout.subgraphPadding, theme.nodeStyles.subgraph.labelOffset, graph);
+            if (!bounds)
+                continue;
+            nodes.unshift(buildSubgraphNode(subgraph, bounds, theme));
+        }
+    }
+    const nodeShapes = new Map(parsed.nodes.map(n => [n.id, n.shape]));
+    return {
+        nodes,
+        context: {
+            parsedEdges: parsed.edges,
+            estimatedPositions: positions,
+            handles,
+            direction: parsed.direction,
+            diamondEdgeHandles: diamondAssignments.edgeHandles,
+            edgeWaypoints,
+            nodeShapes,
+        },
+    };
+}
+export function layoutDiagram(parsed, options) {
+    if (parsed.kind === 'custom') {
+        return {
+            kind: 'custom',
+            diagramType: parsed.diagramType,
+            data: parsed.data,
+        };
+    }
+    const graphResult = layoutParsedGraph(parsed, options);
+    return { kind: 'graph', nodes: graphResult.nodes, edges: graphResult.edges };
+}
+// ─── Phase 2: Build Edges with Actual Dimensions ────────────────────────────
+export function buildLayoutEdges(context, theme, measuredPositions) {
+    // Use measured positions if available, fall back to dagre estimates
+    const positions = measuredPositions ?? context.estimatedPositions;
+    return buildEdges(context.parsedEdges, positions, context.handles, context.direction, theme, context.diamondEdgeHandles, context.edgeWaypoints, context.nodeShapes);
+}
+// ─── Backward-Compatible Wrapper ────────────────────────────────────────────
+export function layoutParsedGraph(parsed, options) {
+    const result = layoutNodes(parsed, options);
+    // Sequence diagrams return edges directly (no two-phase)
+    if (!result.context) {
+        return result;
+    }
+    const edges = buildLayoutEdges(result.context, options.theme);
+    return { nodes: result.nodes, edges };
+}

package/dist/layout/intersect/circle.d.ts

@@ -0,0 +1,2 @@
+import type { NodeBounds, Point } from '../types.js';
+export declare function intersectCircle(node: NodeBounds, point: Point): Point;

package/dist/layout/intersect/circle.js

@@ -0,0 +1,14 @@
+export function intersectCircle(node, point) {
+    const cx = node.x;
+    const cy = node.y;
+    const dx = point.x - cx;
+    const dy = point.y - cy;
+    const r = Math.min(node.width, node.height) / 2;
+    const len = Math.hypot(dx, dy);
+    if (len < 1e-6)
+        return { x: cx, y: cy };
+    return {
+        x: cx + (dx / len) * r,
+        y: cy + (dy / len) * r,
+    };
+}

package/dist/layout/intersect/diamond.d.ts

@@ -0,0 +1,9 @@
+/**
+ * diamond.ts — Diamond (rhombus) boundary intersection.
+ *
+ * A diamond with center (cx, cy) and half-widths (w, h) has its vertices at
+ * (cx, cy-h), (cx+w, cy), (cx, cy+h), (cx-w, cy). The boundary follows
+ * |dx/w| + |dy/h| = 1.
+ */
+import type { NodeBounds, Point } from '../types.js';
+export declare function intersectDiamond(node: NodeBounds, point: Point): Point;

package/dist/layout/intersect/diamond.js

@@ -0,0 +1,21 @@
+/**
+ * diamond.ts — Diamond (rhombus) boundary intersection.
+ *
+ * A diamond with center (cx, cy) and half-widths (w, h) has its vertices at
+ * (cx, cy-h), (cx+w, cy), (cx, cy+h), (cx-w, cy). The boundary follows
+ * |dx/w| + |dy/h| = 1.
+ */
+export function intersectDiamond(node, point) {
+    const cx = node.x;
+    const cy = node.y;
+    const dx = point.x - cx;
+    const dy = point.y - cy;
+    const w = node.width / 2;
+    const h = node.height / 2;
+    if (dx === 0 && dy === 0)
+        return { x: cx, y: cy - h };
+    // Scale factor: the diamond boundary is |dx/w| + |dy/h| = 1
+    // A point (t*dx, t*dy) is on the boundary when t * (|dx|/w + |dy|/h) = 1
+    const t = 1 / (Math.abs(dx) / w + Math.abs(dy) / h);
+    return { x: cx + t * dx, y: cy + t * dy };
+}

package/dist/layout/intersect/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * intersect/ — Node-boundary intersection math.
+ *
+ * One file per geometric shape, following Mermaid's intersect/ pattern.
+ * The dispatcher `intersectNode` selects the correct function based on shape.
+ */
+import type { NodeBounds, Point } from '../types.js';
+export { intersectRect } from './rect.js';
+export { intersectRectRounded } from './rectRounded.js';
+export { intersectDiamond } from './diamond.js';
+export { intersectCircle } from './circle.js';
+/**
+ * Dispatches to the correct intersection function based on node shape.
+ * When `borderRadius` is provided (> 0), uses the rounded-corner
+ * compensation to push intersection points flush with the visual boundary.
+ */
+export declare function intersectNode(node: NodeBounds, point: Point, shape: string, borderRadius?: number): Point;

package/dist/layout/intersect/index.js

@@ -0,0 +1,28 @@
+/**
+ * intersect/ — Node-boundary intersection math.
+ *
+ * One file per geometric shape, following Mermaid's intersect/ pattern.
+ * The dispatcher `intersectNode` selects the correct function based on shape.
+ */
+import { intersectRect } from './rect.js';
+import { intersectRectRounded } from './rectRounded.js';
+import { intersectDiamond } from './diamond.js';
+import { intersectCircle } from './circle.js';
+export { intersectRect } from './rect.js';
+export { intersectRectRounded } from './rectRounded.js';
+export { intersectDiamond } from './diamond.js';
+export { intersectCircle } from './circle.js';
+/**
+ * Dispatches to the correct intersection function based on node shape.
+ * When `borderRadius` is provided (> 0), uses the rounded-corner
+ * compensation to push intersection points flush with the visual boundary.
+ */
+export function intersectNode(node, point, shape, borderRadius = 0) {
+    if (shape === 'diamond')
+        return intersectDiamond(node, point);
+    if (shape === 'circle' || shape === 'doublecircle')
+        return intersectCircle(node, point);
+    if (borderRadius > 0)
+        return intersectRectRounded(node, point, borderRadius);
+    return intersectRect(node, point);
+}

package/dist/layout/intersect/rect.d.ts

@@ -0,0 +1,10 @@
+/**
+ * rect.ts — Rectangle boundary intersection.
+ *
+ * Computes where a line from the node center toward a point
+ * intersects the rectangular boundary of the node.
+ *
+ * Adapted from Mermaid's intersect-rect.js.
+ */
+import type { NodeBounds, Point } from '../types.js';
+export declare function intersectRect(node: NodeBounds, point: Point): Point;

package/dist/layout/intersect/rect.js

@@ -0,0 +1,31 @@
+/**
+ * rect.ts — Rectangle boundary intersection.
+ *
+ * Computes where a line from the node center toward a point
+ * intersects the rectangular boundary of the node.
+ *
+ * Adapted from Mermaid's intersect-rect.js.
+ */
+export function intersectRect(node, point) {
+    const cx = node.x;
+    const cy = node.y;
+    const dx = point.x - cx;
+    const dy = point.y - cy;
+    const w = node.width / 2;
+    const h = node.height / 2;
+    if (dx === 0 && dy === 0)
+        return { x: cx, y: cy };
+    let sx;
+    let sy;
+    if (Math.abs(dy) * w > Math.abs(dx) * h) {
+        const hSign = dy < 0 ? -h : h;
+        sx = dy === 0 ? 0 : (hSign * dx) / dy;
+        sy = hSign;
+    }
+    else {
+        const wSign = dx < 0 ? -w : w;
+        sx = wSign;
+        sy = dx === 0 ? 0 : (wSign * dy) / dx;
+    }
+    return { x: cx + sx, y: cy + sy };
+}

package/dist/layout/intersect/rectRounded.d.ts

@@ -0,0 +1,20 @@
+/**
+ * rectRounded.ts — Rectangle intersection with border-radius compensation.
+ *
+ * The standard intersectRect returns the point where a line from center
+ * hits the sharp rectangle boundary. But when the rendered node has
+ * rounded corners (border-radius), the actual visual boundary at diagonal
+ * angles is INSIDE that sharp corner — creating a gap.
+ *
+ * This function pushes the intersection point outward along the line
+ * from center → point, proportional to how close the intersection is
+ * to a corner. At a flat edge (top/bottom/side center), compensation
+ * is zero. At a 45° corner, it's maximal.
+ *
+ * The compensation formula: at corners, the rounded boundary is inset
+ * by r - r*cos(θ) where θ is the angle from the corner axis. We
+ * approximate this by measuring how "cornery" the intersection is
+ * (both x and y are close to their maximums) and pushing outward.
+ */
+import type { NodeBounds, Point } from '../types.js';
+export declare function intersectRectRounded(node: NodeBounds, point: Point, borderRadius: number): Point;