@knowvah/dot-engine 0.1.0

package/src/render/public.ts

@@ -0,0 +1,131 @@
+// SPDX-License-Identifier: EPL-2.0
+
+/**
+ * Multi-format public render entry point.
+ *
+ * Wraps the low-level `gvc/device.ts:render` with context lifecycle
+ * management (layout → render → freeLayout) and structured-error handling,
+ * mirroring `src/index.ts:renderSvg` exactly.
+ *
+ * @see lib/gvc/gvc.c:gvRender
+ */
+
+import type { Graph } from '../model/graph.js';
+import { createDefaultContext } from '../gvc/default-context.js';
+import { render as deviceRender } from '../gvc/device.js';
+import { RenderError } from '../errors.js';
+import type { GvError } from '../errors.js';
+import type { EngineName } from '../gvc/context.js';
+
+// ---------------------------------------------------------------------------
+// Public types
+// ---------------------------------------------------------------------------
+
+/**
+ * Supported output formats. Closed string union matching the built-in
+ * renderers registered by `createDefaultContext`.
+ */
+export type OutputFormat =
+  | 'svg'
+  | 'dot'
+  | 'xdot'
+  | 'json'
+  | 'plain'
+  | 'plain-ext'
+  | 'imap'
+  | 'cmapx';
+
+/**
+ * Options for {@link render}.
+ */
+export interface RenderOptions {
+  /**
+   * Layout engine to use. Defaults to `'dot'`.
+   *
+   * yAxis is intentionally absent: coordinate orientation is a `getLayout`
+   * concern (ADR-5). The raw format strings produced here carry native
+   * y-up coordinates; callers that need y-down must flip in post-processing.
+   */
+  engine?: EngineName;
+
+  /**
+   * Inline external images as `data:` URIs (AD-1, additive). Defaults to
+   * `false` — unset reproduces the pre-AD-1 raw `xlink:href="src"`
+   * passthrough byte-for-byte. When `true`, the SVG emitter consults the
+   * process-global resolver registered via `setImageResolver` (from
+   * `graphviz-ts`) for each `image=`/HTML `<IMG>` source; a hit is inlined
+   * as `data:<mime>;base64,<...>`, a miss (or no resolver registered) falls
+   * back to the raw src passthrough. Has no effect on non-SVG formats.
+   */
+  inlineImages?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Private helpers (mirrors index.ts)
+// ---------------------------------------------------------------------------
+
+/**
+ * Duck-type a thrown value as a {@link GvError}: object with string `type`
+ * and string `code`. Re-implemented here (not imported) so this module has
+ * no circular dependency on `src/index.ts`.
+ */
+function isGvErrorLike(err: unknown): err is GvError {
+  return (
+    typeof err === 'object' &&
+    err !== null &&
+    typeof (err as { type?: unknown }).type === 'string' &&
+    typeof (err as { code?: unknown }).code === 'string'
+  );
+}
+
+/* v8 ignore next -- defensive normalizer; unreachable via public API */
+function messageOf(err: unknown): string {
+  return err instanceof Error ? err.message : String(err);
+}
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/**
+ * Render a (parsed or built) graph to the requested format string.
+ *
+ * Lifecycle: createDefaultContext → layout → deviceRender → freeLayout.
+ * Error handling mirrors `renderSvg`: GvError-like throws re-surface
+ * unchanged; unknown throws become `RenderError('RENDER_ERROR')`.
+ *
+ * @remarks
+ * Security: for the markup formats (`svg`, `cmapx`, `imap`), treat the output
+ * as attacker-controlled when the source graph came from untrusted DOT.
+ * Attribute values are XML-escaped, but URL schemes and resource origins
+ * (`href`/`URL`/`image`/`stylesheet`) are passed through unfiltered, matching
+ * native Graphviz. Apply a Content-Security-Policy or sanitize before embedding
+ * — see the README "Security" section.
+ *
+ * @param g      - graph produced by `parse(...)` or the builder API
+ * @param format - target output format
+ * @param opts   - optional engine override (default: `'dot'`)
+ * @returns rendered string in the requested format
+ * @throws RenderError on layout or render failure
+ *
+ * @see lib/gvc/gvc.c:gvRender
+ */
+export function render(
+  g: Graph,
+  format: OutputFormat,
+  opts?: RenderOptions,
+): string {
+  const engine: EngineName = opts?.engine ?? 'dot';
+  const inlineImages = opts?.inlineImages ?? false;
+  const ctx = createDefaultContext();
+  try {
+    ctx.layout(g, engine);
+    const result = deviceRender(ctx, g, format, inlineImages);
+    ctx.freeLayout(g, engine);
+    return result;
+  } catch (err: unknown) {
+    /* v8 ignore next -- current engines don't throw a GvError-like value here */
+    if (isGvErrorLike(err)) throw err;
+    throw new RenderError(messageOf(err), 'RENDER_ERROR');
+  }
+}

package/src/render/svg-arrow-ops.ts

@@ -0,0 +1,113 @@
+// SPDX-License-Identifier: EPL-2.0
+
+/**
+ * SVG emission for typed arrowhead draw-ops (ADR-1). Each {@link ArrowDrawOp}
+ * becomes the matching SVG primitive with the edge pen color: filled polygons
+ * and ellipses use the pen color for both fill and stroke; open shapes,
+ * polylines, and Bézier arms use `fill="none"`. Geometry is transformed from
+ * layout space to device space via `transformPoint`, matching the existing
+ * arrow-polygon emitter.
+ *
+ * @see plugin/core/gvrender_core_svg.c:svg_polygon / svg_ellipse / svg_polyline
+ * @see lib/common/arrows.c:arrow_gen (emit sequence)
+ */
+
+import type { Point } from '../model/geom.js';
+import type { RenderJob } from '../gvc/job.js';
+import type { ArrowDrawOp } from '../common/arrows-types.js';
+import { transformPoint } from '../gvc/device.js';
+import { emitPoints, emitBezierPath, emitPenWidth } from './svg-helpers.js';
+
+const PENWIDTH_NORMAL = 1.0;
+const PENWIDTH_THRESHOLD = 0.005;
+
+/** Emit ` stroke-width` only when the pen width differs from the SVG default. */
+function emitArrowPenWidth(job: RenderJob, pw: number): void {
+  if (Math.abs(pw - PENWIDTH_NORMAL) >= PENWIDTH_THRESHOLD) emitPenWidth(job, pw);
+}
+
+/** Emit ` <attr>="<opacity>"` when the pen color carries partial alpha. */
+function emitArrowOpacity(job: RenderJob, attr: string, opacity: string | null): void {
+  if (opacity !== null) job.write(' ' + attr + '="' + opacity + '"');
+}
+
+/** `<polygon>` with Adobe first-point repetition (matches svg_polygon). */
+function emitPolygonOp(points: Point[], filled: boolean, penColor: string, job: RenderJob, pw: number, opacity: string | null): void {
+  const pts = points.map((p) => transformPoint(p, job));
+  job.write('<polygon fill="' + (filled ? penColor : 'none') + '"');
+  if (filled) emitArrowOpacity(job, 'fill-opacity', opacity);
+  job.write(' stroke="' + penColor + '"');
+  emitArrowPenWidth(job, pw);
+  emitArrowOpacity(job, 'stroke-opacity', opacity);
+  job.write(' points="');
+  emitPoints(job, pts);
+  if (pts.length > 0) {
+    const p0 = pts[0]!;
+    job.write(' ');
+    job.printDouble(p0.x);
+    job.write(',');
+    job.printDouble(p0.y);
+  }
+  job.write('"/>\n');
+}
+
+/** Ellipse op shape (dot/odot). */
+interface EllipseOp { center: Point; rx: number; ry: number; filled: boolean }
+
+/** `<ellipse>` (dot/odot). rx/ry are emitted in layout units (device scale 1). */
+function emitEllipseOp(op: EllipseOp, penColor: string, job: RenderJob, pw: number, opacity: string | null): void {
+  const c = transformPoint(op.center, job);
+  job.write('<ellipse fill="' + (op.filled ? penColor : 'none') + '"');
+  if (op.filled) emitArrowOpacity(job, 'fill-opacity', opacity);
+  job.write(' stroke="' + penColor + '"');
+  emitArrowPenWidth(job, pw);
+  emitArrowOpacity(job, 'stroke-opacity', opacity);
+  job.write(' cx="');
+  job.printDouble(c.x);
+  job.write('" cy="');
+  job.printDouble(c.y);
+  job.write('" rx="');
+  job.printDouble(op.rx);
+  job.write('" ry="');
+  job.printDouble(op.ry);
+  job.write('"/>\n');
+}
+
+/** `<polyline>` (tee/box/gap/curve shaft) — never filled. */
+function emitPolylineOp(points: Point[], penColor: string, job: RenderJob, pw: number, opacity: string | null): void {
+  const pts = points.map((p) => transformPoint(p, job));
+  job.write('<polyline fill="none" stroke="' + penColor + '"');
+  emitArrowPenWidth(job, pw);
+  emitArrowOpacity(job, 'stroke-opacity', opacity);
+  job.write(' points="');
+  emitPoints(job, pts);
+  job.write('"/>\n');
+}
+
+/** `<path>` cubic Bézier (curve/icurve arms) — never filled. */
+function emitBezierOp(points: Point[], penColor: string, job: RenderJob, pw: number, opacity: string | null): void {
+  const pts = points.map((p) => transformPoint(p, job));
+  job.write('<path fill="none" stroke="' + penColor + '"');
+  emitArrowPenWidth(job, pw);
+  emitArrowOpacity(job, 'stroke-opacity', opacity);
+  job.write(' d="');
+  emitBezierPath(job, pts);
+  job.write('"/>\n');
+}
+
+/**
+ * Emit one edge end's arrowhead draw-ops, in order, with the given pen color.
+ * `opacity` is the stringified alpha (`colorOpacity`) or null when the pen color
+ * is opaque; it drives the SVG fill/stroke-opacity attributes (e.g. an edge
+ * color="#rrggbbaa"). @see lib/common/arrows.c:arrow_gen
+ */
+export function emitArrowOps(ops: ArrowDrawOp[], penColor: string, job: RenderJob, pw: number, opacity: string | null = null): void {
+  for (const op of ops) {
+    switch (op.kind) {
+      case 'polygon': emitPolygonOp(op.points, op.filled, penColor, job, pw, opacity); break;
+      case 'ellipse': emitEllipseOp(op, penColor, job, pw, opacity); break;
+      case 'polyline': emitPolylineOp(op.points, penColor, job, pw, opacity); break;
+      case 'bezier': emitBezierOp(op.points, penColor, job, pw, opacity); break;
+    }
+  }
+}

package/src/render/svg-cluster.ts

@@ -0,0 +1,24 @@
+// SPDX-License-Identifier: EPL-2.0
+
+/**
+ * SVG cluster group helpers.
+ * @see plugin/core/gvrender_core_svg.c:svg_begin_cluster / svg_end_cluster
+ */
+
+import type { Graph } from '../model/graph.js';
+import type { RenderJob } from '../gvc/job.js';
+import { escapeXmlTitle } from './svg-helpers.js';
+import { svgClusterId, svgClusterClass } from './svg-id.js';
+
+export function svgBeginCluster(sg: Graph, job: RenderJob): void {
+  // Id from getObjId (DOT `id` attr / gid prefix / clust<seq>); layer prefix
+  // only (no per-object suffix for graph/cluster ids). DOT `class` is appended.
+  // @see lib/common/emit.c:getObjId; plugin/core/gvrender_core_svg.c:svg_print_id_class
+  job.write('<g id="' + escapeXmlTitle(job.idLayerPrefix() + svgClusterId(sg, job))
+    + '" ' + svgClusterClass(sg) + '>\n');
+  job.write('<title>' + escapeXmlTitle(sg.name) + '</title>\n');
+}
+
+export function svgEndCluster(job: RenderJob): void {
+  job.write('</g>\n');
+}

package/src/render/svg-edge-ortho-radius.ts

@@ -0,0 +1,228 @@
+// SPDX-License-Identifier: EPL-2.0
+//
+// Rounded orthogonal edge corners — faithful port of the corner half of
+// lib/common/emit.c's splines=ortho + radius/style=rounded path (emit.c
+// 2130-2249). Given an edge's spline control points (graphviz-internal y-up),
+// finds each orthogonal corner and computes its truncation points (inset by
+// `radius` along each incident segment) and arc-wedge parameters.
+//
+// The emit half (segment + arc polylines) is added in T3. Coordinates are the
+// internal y-up frame the spline is stored in; the SVG renderer negates y.
+
+import type { Point } from '../model/geom.js';
+import { ellipticWedge } from '../common/ellipse-wedge.js';
+
+/** Per-corner geometry, mirroring emit.c:corner_info_t. */
+export interface CornerInfo {
+  /** Index of the corner point in the spline list. */
+  idx: number;
+  /** Truncation point toward the previous segment (curr − dir1·radius). */
+  truncPrev: Point;
+  /** Truncation point toward the next segment (curr + dir2·radius). */
+  truncNext: Point;
+  /** Center of the arc wedge. */
+  wedgeCenter: Point;
+  /** Arc start/end angles. */
+  angle1: number;
+  angle2: number;
+}
+
+/** @see lib/common/emit.c:find_prev_distinct (TOLERANCE 0.01) */
+function findPrevDistinct(pts: Point[], i: number): number {
+  const TOL = 0.01;
+  for (let j = i - 1; j >= 0; j--) {
+    if (Math.hypot(pts[j].x - pts[i].x, pts[j].y - pts[i].y) > TOL) return j;
+  }
+  return -1;
+}
+
+/** @see lib/common/emit.c:find_next_distinct (TOLERANCE 0.01) */
+function findNextDistinct(pts: Point[], i: number, n: number): number {
+  const TOL = 0.01;
+  for (let j = i + 1; j < n; j++) {
+    if (Math.hypot(pts[j].x - pts[i].x, pts[j].y - pts[i].y) > TOL) return j;
+  }
+  return -1;
+}
+
+/** Wedge center + arc angles for an orthogonal corner (8 orientation cases).
+ *  @see lib/common/emit.c:calculate_wedge_parameters */
+function calculateWedgeParameters(
+  ci: CornerInfo, curr: Point, dx1: number, dy1: number, dx2: number, dy2: number,
+  radius: number, seg1Horiz: boolean, seg2Vert: boolean,
+): void {
+  if (seg1Horiz && seg2Vert) {
+    if (dx1 > 0 && dy2 < 0) {            // right then down
+      ci.wedgeCenter = { x: curr.x - radius, y: curr.y - radius };
+      ci.angle1 = 0; ci.angle2 = Math.PI / 2;
+    } else if (dx1 > 0 && dy2 > 0) {     // right then up
+      ci.wedgeCenter = { x: curr.x - radius, y: curr.y + radius };
+      ci.angle1 = -Math.PI / 2; ci.angle2 = 0;
+    } else if (dx1 < 0 && dy2 < 0) {     // left then down
+      ci.wedgeCenter = { x: curr.x + radius, y: curr.y - radius };
+      ci.angle1 = Math.PI / 2; ci.angle2 = Math.PI;
+    } else {                             // left then up
+      ci.wedgeCenter = { x: curr.x + radius, y: curr.y + radius };
+      ci.angle1 = Math.PI; ci.angle2 = (3 * Math.PI) / 2;
+    }
+  } else {
+    if (dy1 < 0 && dx2 > 0) {            // down then right
+      ci.wedgeCenter = { x: curr.x + radius, y: curr.y + radius };
+      ci.angle1 = Math.PI; ci.angle2 = (3 * Math.PI) / 2;
+    } else if (dy1 < 0 && dx2 < 0) {     // down then left
+      ci.wedgeCenter = { x: curr.x - radius, y: curr.y + radius };
+      ci.angle1 = (3 * Math.PI) / 2; ci.angle2 = 2 * Math.PI;
+    } else if (dy1 > 0 && dx2 > 0) {     // up then right
+      ci.wedgeCenter = { x: curr.x + radius, y: curr.y - radius };
+      ci.angle1 = Math.PI / 2; ci.angle2 = Math.PI;
+    } else {                             // up then left
+      ci.wedgeCenter = { x: curr.x - radius, y: curr.y - radius };
+      ci.angle1 = 0; ci.angle2 = Math.PI / 2;
+    }
+  }
+}
+
+/** Process a detected orthogonal corner, appending it unless it duplicates one
+ *  already found (DUP_TOL 0.01). @see lib/common/emit.c:process_corner */
+function processCorner(
+  corners: CornerInfo[], pts: Point[], i: number, curr: Point,
+  dx1: number, dy1: number, dx2: number, dy2: number, radius: number,
+  seg1Horiz: boolean, seg2Vert: boolean,
+): void {
+  const DUP_TOL = 0.01;
+  for (const ci of corners) {
+    const existing = pts[ci.idx];
+    if (Math.hypot(curr.x - existing.x, curr.y - existing.y) < DUP_TOL) return;
+  }
+
+  const ci: CornerInfo = {
+    idx: i, truncPrev: { x: 0, y: 0 }, truncNext: { x: 0, y: 0 },
+    wedgeCenter: { x: 0, y: 0 }, angle1: 0, angle2: 0,
+  };
+
+  // Normalize direction vectors.
+  const len1 = Math.hypot(dx1, dy1);
+  const len2 = Math.hypot(dx2, dy2);
+  const ndx1 = dx1 / len1, ndy1 = dy1 / len1;
+  const ndx2 = dx2 / len2, ndy2 = dy2 / len2;
+
+  // Truncation points (move radius distance away from the corner).
+  ci.truncPrev = { x: curr.x - ndx1 * radius, y: curr.y - ndy1 * radius };
+  ci.truncNext = { x: curr.x + ndx2 * radius, y: curr.y + ndy2 * radius };
+
+  calculateWedgeParameters(ci, curr, dx1, dy1, dx2, dy2, radius, seg1Horiz, seg2Vert);
+  corners.push(ci);
+}
+
+/**
+ * Find every orthogonal corner in the spline point list and compute its
+ * truncation + wedge parameters. A corner is a horizontal→vertical or
+ * vertical→horizontal bend (TOL 0.1). @see lib/common/emit.c:find_ortho_corners
+ */
+export function findOrthoCorners(pts: Point[], radius: number): CornerInfo[] {
+  const TOL = 0.1;
+  const n = pts.length;
+  const corners: CornerInfo[] = [];
+
+  for (let i = 0; i < n; i++) {
+    const prevIdx = findPrevDistinct(pts, i);
+    const nextIdx = findNextDistinct(pts, i, n);
+    if (prevIdx === -1 || nextIdx === -1) continue;
+
+    const prev = pts[prevIdx], curr = pts[i], next = pts[nextIdx];
+    const dx1 = curr.x - prev.x, dy1 = curr.y - prev.y;
+    const dx2 = next.x - curr.x, dy2 = next.y - curr.y;
+
+    const seg1Horiz = Math.abs(dy1) < TOL && Math.abs(dx1) > TOL;
+    const seg1Vert = Math.abs(dx1) < TOL && Math.abs(dy1) > TOL;
+    const seg2Horiz = Math.abs(dy2) < TOL && Math.abs(dx2) > TOL;
+    const seg2Vert = Math.abs(dx2) < TOL && Math.abs(dy2) > TOL;
+
+    const isCorner = (seg1Horiz && seg2Vert) || (seg1Vert && seg2Horiz);
+    if (isCorner) {
+      processCorner(corners, pts, i, curr, dx1, dy1, dx2, dy2, radius, seg1Horiz, seg2Vert);
+    }
+  }
+
+  // Sort by corner index (emit.c sorts the list before segment rendering).
+  corners.sort((a, b) => a.idx - b.idx);
+  return corners;
+}
+
+/** True when `p` is within CORNER_TOL of any corner point. */
+function atAnyCorner(p: Point, pts: Point[], corners: CornerInfo[], tol: number): boolean {
+  for (const c of corners) {
+    const cp = pts[c.idx];
+    if (Math.hypot(p.x - cp.x, p.y - cp.y) < tol) return true;
+  }
+  return false;
+}
+
+/** Straight polyline segments between truncated corners.
+ *  @see lib/common/emit.c:2593-2654 (segment loop) */
+function segmentPolylines(pts: Point[], corners: CornerInfo[]): Point[][] {
+  const CORNER_TOL = 0.01;
+  const n = pts.length;
+  const out: Point[][] = [];
+
+  let segStartIdx = 0;
+  let segStartPt = pts[0];
+
+  for (let c = 0; c <= corners.length; c++) {
+    let segEndIdx: number;
+    let segEndPt: Point;
+    if (c < corners.length) {
+      segEndIdx = corners[c].idx;
+      segEndPt = corners[c].truncPrev;
+    } else {
+      segEndIdx = n - 1;
+      segEndPt = pts[n - 1];
+    }
+
+    const seg: Point[] = [segStartPt];
+    for (let pt = segStartIdx + 1; pt < segEndIdx; pt++) {
+      if (!atAnyCorner(pts[pt], pts, corners, CORNER_TOL)) seg.push(pts[pt]);
+    }
+    seg.push(segEndPt);
+    out.push(seg);
+
+    if (c < corners.length) {
+      // Skip all duplicates of this corner, then resume at its trunc_next.
+      let nextIdx = corners[c].idx + 1;
+      while (nextIdx < n && atAnyCorner(pts[nextIdx], pts, corners, CORNER_TOL)) nextIdx++;
+      segStartIdx = nextIdx;
+      segStartPt = corners[c].truncNext;
+    }
+  }
+  return out;
+}
+
+/** Arc polyline per corner: the wedge slice [3 .. pn-4].
+ *  @see lib/common/emit.c:draw_ortho_corner_markers / render_corner_arc */
+function cornerArcPolylines(corners: CornerInfo[], radius: number): Point[][] {
+  const out: Point[][] = [];
+  for (const ci of corners) {
+    const wedge = ellipticWedge(ci.wedgeCenter, radius, radius, ci.angle1, ci.angle2);
+    if (wedge.length > 4) {
+      const arcStart = 3;            // skip center, first arc point, AND duplicate
+      const arcEnd = wedge.length - 4; // skip duplicate endpoint, last arc point, AND center
+      const count = arcEnd >= arcStart ? arcEnd - arcStart + 1 : 0;
+      if (count >= 2) out.push(wedge.slice(arcStart, arcEnd + 1));
+    }
+  }
+  return out;
+}
+
+/**
+ * The full list of `<polyline>` point-arrays native emits for an ortho edge with
+ * rounded corners: straight segments between truncated corners first, then one
+ * arc polyline per corner — matching emit.c's order (segment loop, then
+ * draw_ortho_corner_markers). Returns `[]` when no orthogonal corner is found,
+ * so the caller falls back to the bezier `<path>`.
+ * @see lib/common/emit.c:2583-2662
+ */
+export function orthoRoundedPolylines(pts: Point[], radius: number): Point[][] {
+  const corners = findOrthoCorners(pts, radius);
+  if (corners.length === 0) return [];
+  return [...segmentPolylines(pts, corners), ...cornerArcPolylines(corners, radius)];
+}

package/src/render/svg-edge-split.ts

@@ -0,0 +1,180 @@
+// SPDX-License-Identifier: EPL-2.0
+
+/**
+ * Split-along-length multi-color edges: a `color="c1;f1:c2;f2"` (semicolon)
+ * spec draws each routed spline split along its ARC LENGTH, one sub-curve per
+ * color segment. This is C's `multicolor()` path, reached when the color has
+ * both ';' and ':' (numsemi && numc); the plain ':' syntax is the parallel
+ * branch (svg-parallel-edge.ts).
+ *
+ * Arrow rule (note: inverse of the parallel branch): tail arrow = FIRST color,
+ * head arrow = endcolor (LAST drawn color).
+ *
+ * @see lib/common/emit.c:1975 multicolor
+ * @see lib/common/emit.c:1921 splitBSpline
+ * @see lib/common/emit.c:1908 approxLen
+ * @see lib/common/utils.c:175 Bezier (de Casteljau split)
+ */
+
+import type { Edge } from '../model/edge.js';
+import type { RenderJob } from '../gvc/job.js';
+import type { Point, Bezier } from '../model/geom.js';
+import { parseSegs } from '../common/multicolor.js';
+import { transformPoint } from '../gvc/device.js';
+import { emitBezierPath, emitDash, emitPenWidth } from './svg-helpers.js';
+import { resolveRenderColor, colorPaint } from './color-resolve.js';
+
+const DEFAULT_COLOR = 'black';
+const PENWIDTH_NORMAL = 1.0;
+const PENWIDTH_THRESHOLD = 0.005;
+/** AEQ0 tolerance for fraction comparisons. */
+const EPS = 1e-5;
+
+function dist(a: Point, b: Point): number {
+  return Math.hypot(a.x - b.x, a.y - b.y);
+}
+
+/** Chord length of one cubic (control points at off..off+3). @see emit.c:1908 */
+function approxLen(list: Point[], off: number): number {
+  return dist(list[off]!, list[off + 1]!) +
+    dist(list[off + 1]!, list[off + 2]!) +
+    dist(list[off + 2]!, list[off + 3]!);
+}
+
+/**
+ * de Casteljau split of a single cubic (control points v[0..3]) at parameter t,
+ * returning the left and right 4-point sub-curves. Ports C's Bezier().
+ */
+function splitCubic(v: Point[], t: number): { left: Point[]; right: Point[] } {
+  const u = 1 - t;
+  const row = [v[0]!, v[1]!, v[2]!, v[3]!];
+  const left: Point[] = [row[0]!];
+  const right: Point[] = new Array<Point>(4);
+  right[3] = row[3]!;
+  for (let i = 1; i <= 3; i++) {
+    for (let j = 0; j <= 3 - i; j++) {
+      row[j] = { x: u * row[j]!.x + t * row[j + 1]!.x, y: u * row[j]!.y + t * row[j + 1]!.y };
+    }
+    left.push(row[0]!);
+    right[3 - i] = row[3 - i]!;
+  }
+  return { left, right };
+}
+
+/**
+ * Split a B-spline (control points, length 3*cnt+1) at arc-length fraction t.
+ * @see lib/common/emit.c:1921 splitBSpline
+ */
+function splitBSpline(list: Point[], t: number): { left: Point[]; right: Point[] } {
+  const cnt = (list.length - 1) / 3;
+  if (cnt === 1) return splitCubic(list, t);
+  const lens: number[] = [];
+  let sum = 0;
+  for (let i = 0; i < cnt; i++) { lens.push(approxLen(list, 3 * i)); sum += lens[i]!; }
+  const target = t * sum;
+  sum = 0;
+  let i = 0;
+  for (; i < cnt; i++) { sum += lens[i]!; if (sum >= target) break; }
+  const last = lens[i]!;
+  const r = (target - (sum - last)) / last;
+  const seg = splitCubic(list.slice(3 * i, 3 * i + 4), r);
+  return {
+    left: list.slice(0, 3 * i).concat(seg.left),
+    right: seg.right.concat(list.slice(3 * i + 4)),
+  };
+}
+
+/** Emit one sub-curve as an SVG path in the given color (style from obj). */
+function emitCurve(list: Point[], color: string, job: RenderJob): void {
+  const obj = job.obj;
+  const pts = list.map((p) => transformPoint(p, job));
+  // Resolve the segment color through the SVG known-color gate (C's
+  // gvrender_set_pencolor per multicolor segment) before it reaches stroke=".
+  job.write('<path fill="none" stroke="' + colorPaint(resolveRenderColor(color)) + '"');
+  if (obj !== null && Math.abs(obj.penWidth - PENWIDTH_NORMAL) >= PENWIDTH_THRESHOLD) {
+    emitPenWidth(job, obj.penWidth);
+  }
+  if (obj !== null) emitDash(job, obj.pen);
+  job.write(' d="');
+  emitBezierPath(job, pts);
+  job.write('"/>\n');
+}
+
+interface ColorSeg { color: string | null; t: number; }
+
+/** One color segment of a split spline: the sub-curve control points + its color. */
+export interface ColoredSubCurve { color: string; points: Point[]; }
+
+/** Running state for one spline's length-split walk. */
+interface SplitState { left: number; first: boolean; bzR: Point[]; done: boolean; endColor: string; }
+
+/** Apply one color segment: split off its length share, append the sub-curve. */
+function stepSegment(list: Point[], s: ColorSeg, st: SplitState, out: ColoredSubCurve[]): void {
+  if (Math.abs(s.t) < EPS) return;
+  const color = s.color ?? DEFAULT_COLOR;
+  st.left -= s.t;
+  st.endColor = color;
+  if (st.first) {
+    st.first = false;
+    const sp = splitBSpline(list, s.t);
+    out.push({ color, points: sp.left });
+    st.bzR = sp.right;
+    if (Math.abs(st.left) < EPS) st.done = true;
+  } else if (Math.abs(st.left) < EPS) {
+    out.push({ color, points: st.bzR });
+    st.done = true;
+  } else {
+    const sp = splitBSpline(st.bzR, s.t / (st.left + s.t));
+    out.push({ color, points: sp.left });
+    st.bzR = sp.right;
+  }
+}
+
+/**
+ * Split one routed spline along its arc length into colored sub-curves per the
+ * color segments (C's multicolor() walk), returning the sub-curves and the end
+ * color. Pure geometry — no emission — so both the SVG and xdot renderers can
+ * share it. @see lib/common/emit.c:1975 multicolor
+ */
+export function splitSplineByColor(
+  list: Point[],
+  segs: ColorSeg[],
+): { curves: ColoredSubCurve[]; endColor: string } {
+  const st: SplitState = { left: 1, first: true, bzR: list, done: false, endColor: DEFAULT_COLOR };
+  const curves: ColoredSubCurve[] = [];
+  for (const s of segs) {
+    stepSegment(list, s, st, curves);
+    if (st.done) break;
+  }
+  return { curves, endColor: st.endColor };
+}
+
+/** Draw one spline split along its length per the color segments; return endcolor. */
+function drawSplitSpline(list: Point[], segs: ColorSeg[], job: RenderJob): string {
+  const { curves, endColor } = splitSplineByColor(list, segs);
+  for (const c of curves) emitCurve(c.points, c.color, job);
+  return endColor;
+}
+
+/**
+ * Emit a split-along-length multi-color edge. Returns the first and end colors
+ * for arrow drawing (tail = first, head = end).
+ * @see lib/common/emit.c:1975 multicolor
+ */
+export function emitSplitEdgePaths(
+  e: Edge,
+  job: RenderJob,
+  colorList: string,
+): { firstColor: string; endColor: string } {
+  const segs = parseSegs(colorList).segs;
+  const firstColor = segs[0]?.color ?? DEFAULT_COLOR;
+  const spl = e.info.spl;
+  let endColor = firstColor;
+  if (spl === undefined) return { firstColor, endColor };
+  for (let si = 0; si < spl.size; si++) {
+    const bz = spl.list[si] as Bezier | undefined;
+    if (bz === undefined || bz.size < 4) continue;
+    endColor = drawSplitSpline(bz.list, segs, job);
+  }
+  return { firstColor, endColor };
+}