sketchmark 1.3.7 → 1.4.1

package/dist/index.d.ts

@@ -12,7 +12,7 @@ export { AnimationController, ANIMATION_CSS } from "./animation";
 export type { AnimationEvent, AnimationEventType } from "./animation";
 export { exportSVG, exportPNG, exportCanvasPNG, exportHTML, exportGIF, exportMP4, getSVGBlob, svgToPNGDataURL, } from "./export";
 export type { ExportFormat, ExportOptions } from "./export";
-export type { NodeShape, EdgeConnector, EdgeAnchor, LayoutType, AlignItems, JustifyContent, AnimationAction, AnimationTrigger, StyleProps, StepPace, ASTNode, ASTEdge, ASTGroup, ASTStep, ASTBeat, ASTStepItem, ASTChart, ASTTable, GroupChildRef, RootItemRef, ASTMarkdown, } from "./ast/types";
+export type { NodeShape, EdgeConnector, EdgeAnchor, EdgeRoute, EdgePoint, LayoutType, AlignItems, JustifyContent, AnimationAction, AnimationTrigger, StyleProps, StepPace, ASTNode, ASTEdge, ASTGroup, ASTStep, ASTBeat, ASTStepItem, ASTChart, ASTTable, GroupChildRef, RootItemRef, ASTMarkdown, } from "./ast/types";
 export { hashStr, clamp, lerp, parseHex, sleep, throttle, debounce, EventEmitter, } from "./utils";
 export { render } from "./render";
 export type { RenderOptions, DiagramInstance } from "./render";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC7C,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC1E,YAAY,EACV,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,aAAa,GACd,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAG7C,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC1D,YAAY,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EACL,cAAc,EACd,eAAe,EACf,kBAAkB,GACnB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAG/D,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjE,YAAY,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGtE,OAAO,EACL,SAAS,EACT,SAAS,EACT,eAAe,EACf,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,eAAe,GAChB,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG5D,YAAY,EACV,SAAS,EACT,aAAa,EACb,UAAU,EACV,UAAU,EACV,UAAU,EACV,cAAc,EACd,eAAe,EACf,gBAAgB,EAChB,UAAU,EACV,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,EACP,OAAO,EACP,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,WAAW,EACX,WAAW,GACZ,MAAM,aAAa,CAAC;AAGrB,OAAO,EACL,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,YAAY,GACb,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,YAAY,EACV,uBAAuB,EACvB,sBAAsB,EACtB,iCAAiC,GAClC,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,YAAY,EACV,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,YAAY,EACV,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,YAAY,CAAC;AAGpB,OAAO,EACL,QAAQ,EACR,cAAc,EACd,gBAAgB,EAChB,UAAU,EACV,WAAW,GACZ,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC7C,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC1E,YAAY,EACV,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,aAAa,GACd,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAG7C,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC1D,YAAY,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EACL,cAAc,EACd,eAAe,EACf,kBAAkB,GACnB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAG/D,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjE,YAAY,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGtE,OAAO,EACL,SAAS,EACT,SAAS,EACT,eAAe,EACf,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,eAAe,GAChB,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG5D,YAAY,EACV,SAAS,EACT,aAAa,EACb,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,UAAU,EACV,cAAc,EACd,eAAe,EACf,gBAAgB,EAChB,UAAU,EACV,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,EACP,OAAO,EACP,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,WAAW,EACX,WAAW,GACZ,MAAM,aAAa,CAAC;AAGrB,OAAO,EACL,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,YAAY,GACb,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,YAAY,EACV,uBAAuB,EACvB,sBAAsB,EACtB,iCAAiC,GAClC,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,YAAY,EACV,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,YAAY,EACV,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,YAAY,CAAC;AAGpB,OAAO,EACL,QAAQ,EACR,cAAc,EACd,gBAAgB,EAChB,UAAU,EACV,WAAW,GACZ,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -357,6 +357,39 @@ function isValueToken(t) {
 function isPropKeyToken(t) {
     return !!t && (t.type === "IDENT" || t.type === "KEYWORD");
 }
+const NUMBER_RE = /[-+]?(?:\d*\.\d+|\d+)(?:[eE][-+]?\d+)?/g;
+function parseEdgeWaypoints(value, token) {
+    if (!value)
+        return undefined;
+    const numbers = (value.match(NUMBER_RE) ?? []).map((part) => Number(part));
+    if (!numbers.length)
+        return undefined;
+    if (numbers.length % 2 !== 0) {
+        throw new ParseError(`Edge via must contain x,y coordinate pairs`, token.line, token.col);
+    }
+    const points = [];
+    for (let index = 0; index < numbers.length; index += 2) {
+        const x = numbers[index];
+        const y = numbers[index + 1];
+        if (!Number.isFinite(x) || !Number.isFinite(y)) {
+            throw new ParseError(`Edge via contains a non-numeric coordinate`, token.line, token.col);
+        }
+        points.push([x, y]);
+    }
+    return points.length ? points : undefined;
+}
+function normalizeEdgeRoute(value, token) {
+    if (!value)
+        return undefined;
+    const normalized = value.toLowerCase();
+    if (normalized === "straight" || normalized === "polyline" || normalized === "orthogonal") {
+        return normalized;
+    }
+    if (normalized === "ortho" || normalized === "elbow") {
+        return "orthogonal";
+    }
+    throw new ParseError(`Unsupported edge route "${value}"; use straight, orthogonal, or polyline`, token.line, token.col);
+}
 function parse(src, options = {}) {
     resetUid();
     const preparedSource = applyPluginPreprocessors(src, options.plugins);
@@ -715,28 +748,63 @@ function parse(src, options = {}) {
             height: props.height !== undefined ? parseFloat(props.height) : undefined,
         };
     }
-    function parseEdge(fromId, connector, rest) {
-        const toTok = rest.shift();
-        if (!toTok)
-            throw new ParseError("Expected edge target", 0, 0);
+    function parseEdgeProps(toks) {
         const props = {};
         let j = 0;
-        while (j < rest.length) {
-            const t = rest[j];
-            if ((t.type === "IDENT" || t.type === "KEYWORD") &&
-                j + 1 < rest.length &&
-                rest[j + 1].type === "EQUALS") {
-                props[t.value] = rest[j + 2]?.value ?? "";
-                j += 3;
+        while (j < toks.length) {
+            const key = toks[j];
+            const eq = toks[j + 1];
+            if (!isPropKeyToken(key) || eq?.type !== "EQUALS") {
+                j++;
+                continue;
             }
-            else {
+            const value = toks[j + 2];
+            if (!value) {
                 j++;
+                continue;
             }
+            if (value.type === "LBRACKET") {
+                const parts = [];
+                let depth = 1;
+                j += 3;
+                while (j < toks.length && depth > 0) {
+                    const tok = toks[j];
+                    if (tok.type === "LBRACKET") {
+                        depth++;
+                    }
+                    else if (tok.type === "RBRACKET") {
+                        depth--;
+                        if (depth === 0) {
+                            j++;
+                            break;
+                        }
+                    }
+                    if (depth > 0)
+                        parts.push(tok.value);
+                    j++;
+                }
+                if (depth > 0) {
+                    throw new ParseError(`Unterminated edge property list; expected ']'`, key.line, key.col);
+                }
+                props[key.value] = parts.join(" ");
+                continue;
+            }
+            props[key.value] = value.value;
+            j += 3;
         }
+        return props;
+    }
+    function parseEdge(fromId, connector, rest) {
+        const toTok = rest.shift();
+        if (!toTok)
+            throw new ParseError("Expected edge target", 0, 0);
+        const props = parseEdgeProps(rest);
         const dashed = connector.includes("--") ||
             connector.includes(".-") ||
             connector.includes("-.");
         const bidirectional = connector.includes("<") && connector.includes(">");
+        const via = parseEdgeWaypoints(props.via, toTok);
+        const route = normalizeEdgeRoute(props.route, toTok) ?? (via?.length ? "polyline" : undefined);
         return {
             kind: "edge",
             id: uid("edge"),
@@ -748,6 +816,8 @@ function parse(src, options = {}) {
             labelDy: props["label-dy"] !== undefined ? parseFloat(props["label-dy"]) : undefined,
             fromAnchor: props["anchor-from"],
             toAnchor: props["anchor-to"],
+            route,
+            via,
             dashed,
             bidirectional,
             style: propsToStyle(props),
@@ -3681,6 +3751,8 @@ function buildSceneGraph(ast) {
         labelDy: e.labelDy,
         fromAnchor: e.fromAnchor,
         toAnchor: e.toAnchor,
+        route: e.route,
+        via: e.via,
         dashed: e.dashed ?? false,
         bidirectional: e.bidirectional ?? false,
         style: e.style ?? {},
@@ -4282,6 +4354,151 @@ function getConnPoint(src, dstCX, dstCY, anchor) {
     return anchoredConnPoint(src, anchor, dstCX, dstCY);
 }
 // ── Group depth (for paint order) ────────────────────────────────────────
+function segmentLength(a, b) {
+    return Math.hypot(b[0] - a[0], b[1] - a[1]);
+}
+function compactPolylinePoints(points) {
+    const compacted = [];
+    for (const point of points) {
+        const previous = compacted[compacted.length - 1];
+        if (!previous || segmentLength(previous, point) > 0.01) {
+            compacted.push(point);
+        }
+    }
+    return compacted;
+}
+function polylinePathData(points) {
+    return points
+        .map(([x, y], index) => `${index === 0 ? "M" : "L"} ${x} ${y}`)
+        .join(" ");
+}
+function polylineEndpointDirection(points, end) {
+    const step = end === "start" ? 1 : -1;
+    let index = end === "start" ? 0 : points.length - 1;
+    while (index + step >= 0 && index + step < points.length) {
+        const from = points[index];
+        const to = points[index + step];
+        const dx = to[0] - from[0];
+        const dy = to[1] - from[1];
+        const len = Math.hypot(dx, dy);
+        if (len > 0.01) {
+            return end === "start" ? [dx / len, dy / len] : [-dx / len, -dy / len];
+        }
+        index += step;
+    }
+    return [1, 0];
+}
+function insetPolylineEndpoints(points, arrowAt, inset) {
+    const next = points.map((point) => [point[0], point[1]]);
+    if (next.length < 2)
+        return next;
+    if (arrowAt === "start" || arrowAt === "both") {
+        const [dx, dy] = polylineEndpointDirection(next, "start");
+        next[0] = [next[0][0] + dx * inset, next[0][1] + dy * inset];
+    }
+    if (arrowAt === "end" || arrowAt === "both") {
+        const [dx, dy] = polylineEndpointDirection(next, "end");
+        const last = next.length - 1;
+        next[last] = [next[last][0] - dx * inset, next[last][1] - dy * inset];
+    }
+    return compactPolylinePoints(next);
+}
+function polylineLabelPosition(points, offset, dx = 0, dy = 0) {
+    if (points.length < 2) {
+        const [x, y] = points[0] ?? [0, 0];
+        return { x: x + dx, y: y + dy };
+    }
+    const lengths = points.slice(1).map((point, index) => segmentLength(points[index], point));
+    const total = lengths.reduce((sum, value) => sum + value, 0);
+    if (total <= 0.01) {
+        const [x, y] = points[0];
+        return { x: x + dx, y: y + dy };
+    }
+    let travelled = 0;
+    const target = total / 2;
+    for (let index = 0; index < lengths.length; index += 1) {
+        const length = lengths[index];
+        if (travelled + length >= target) {
+            const from = points[index];
+            const to = points[index + 1];
+            const t = length > 0 ? (target - travelled) / length : 0;
+            const ux = (to[0] - from[0]) / length;
+            const uy = (to[1] - from[1]) / length;
+            return {
+                x: from[0] + (to[0] - from[0]) * t - uy * offset + dx,
+                y: from[1] + (to[1] - from[1]) * t + ux * offset + dy,
+            };
+        }
+        travelled += length;
+    }
+    const [x, y] = points[points.length - 1];
+    return { x: x + dx, y: y + dy };
+}
+function rectBoundaryPoint(entity, point, direction) {
+    const [px, py] = point;
+    const [dx, dy] = direction;
+    const candidates = [];
+    const minX = entity.x;
+    const maxX = entity.x + entity.w;
+    const minY = entity.y;
+    const maxY = entity.y + entity.h;
+    const epsilon = 0.01;
+    if (Math.abs(dx) > epsilon) {
+        candidates.push((minX - px) / dx, (maxX - px) / dx);
+    }
+    if (Math.abs(dy) > epsilon) {
+        candidates.push((minY - py) / dy, (maxY - py) / dy);
+    }
+    const valid = candidates
+        .filter((t) => t >= -epsilon)
+        .map((t) => ({
+        t: Math.max(0, t),
+        x: px + dx * t,
+        y: py + dy * t,
+    }))
+        .filter(({ x, y }) => x >= minX - epsilon &&
+        x <= maxX + epsilon &&
+        y >= minY - epsilon &&
+        y <= maxY + epsilon)
+        .sort((a, b) => a.t - b.t);
+    const hit = valid[0];
+    return hit ? [hit.x, hit.y] : point;
+}
+function ellipseBoundaryPoint(entity, point, direction) {
+    const [px, py] = point;
+    const [dx, dy] = direction;
+    const cx = entity.x + entity.w / 2;
+    const cy = entity.y + entity.h / 2;
+    const rx = Math.max(1, entity.w * 0.44);
+    const ry = Math.max(1, entity.h * 0.44);
+    const x0 = px - cx;
+    const y0 = py - cy;
+    const a = (dx * dx) / (rx * rx) + (dy * dy) / (ry * ry);
+    const b = 2 * ((x0 * dx) / (rx * rx) + (y0 * dy) / (ry * ry));
+    const c = (x0 * x0) / (rx * rx) + (y0 * y0) / (ry * ry) - 1;
+    const disc = b * b - 4 * a * c;
+    if (a <= 0 || disc < 0)
+        return point;
+    const sqrt = Math.sqrt(disc);
+    const hits = [(-b - sqrt) / (2 * a), (-b + sqrt) / (2 * a)]
+        .filter((t) => t >= -0.01)
+        .sort((left, right) => left - right);
+    const t = Math.max(0, hits[0] ?? 0);
+    return [px + dx * t, py + dy * t];
+}
+function polylineArrowTipPoint(entity, points, end) {
+    const point = end === "start" ? points[0] : points[points.length - 1];
+    if (!point)
+        return [0, 0];
+    const [dx, dy] = polylineEndpointDirection(points, end);
+    const outward = end === "start" ? [dx, dy] : [-dx, -dy];
+    if (Math.hypot(outward[0], outward[1]) <= 0.01)
+        return point;
+    if (entity.shape === "circle") {
+        return ellipseBoundaryPoint(entity, point, outward);
+    }
+    return rectBoundaryPoint(entity, point, outward);
+}
 function groupDepth(g, gm) {
     let d = 0;
     let cur = g;
@@ -5242,6 +5459,31 @@ function rectConnPoint(rx, ry, rw, rh, ox, oy) {
     const t = Math.min(tx, ty);
     return [cx + t * dx, cy + t * dy];
 }
+function distance$1(a, b) {
+    return Math.hypot(b[0] - a[0], b[1] - a[1]);
+}
+function compactEdgePoints(points) {
+    const compacted = [];
+    for (const point of points) {
+        const previous = compacted[compacted.length - 1];
+        if (!previous || distance$1(previous, point) > 0.01) {
+            compacted.push(point);
+        }
+    }
+    return compacted;
+}
+function orthogonalEdgePoints(start, end) {
+    if (Math.abs(start[0] - end[0]) < 0.01 || Math.abs(start[1] - end[1]) < 0.01) {
+        return [start, end];
+    }
+    const midX = (start[0] + end[0]) / 2;
+    return compactEdgePoints([
+        start,
+        [midX, start[1]],
+        [midX, end[1]],
+        end,
+    ]);
+}
 function routeEdges(sg) {
     const nm = nodeMap(sg);
     const tm = tableMap(sg);
@@ -5271,10 +5513,17 @@ function routeEdges(sg) {
         }
         const dstCX = dst.x + dst.w / 2, dstCY = dst.y + dst.h / 2;
         const srcCX = src.x + src.w / 2, srcCY = src.y + src.h / 2;
-        e.points = [
-            anchoredConnPoint(src, e.fromAnchor, dstCX, dstCY),
-            anchoredConnPoint(dst, e.toAnchor, srcCX, srcCY),
-        ];
+        const start = anchoredConnPoint(src, e.fromAnchor, dstCX, dstCY);
+        const end = anchoredConnPoint(dst, e.toAnchor, srcCX, srcCY);
+        if (e.via?.length) {
+            e.points = compactEdgePoints([start, ...e.via, end]);
+        }
+        else if (e.route === "orthogonal") {
+            e.points = orthogonalEdgePoints(start, end);
+        }
+        else {
+            e.points = [start, end];
+        }
     }
 }
 function computeBounds(sg, margin) {
@@ -5284,6 +5533,7 @@ function computeBounds(sg, margin) {
         ...sg.tables.map((t) => t.x + t.w),
         ...sg.charts.map((c) => c.x + c.w),
         ...sg.markdowns.map((m) => m.x + m.w),
+        ...sg.edges.flatMap((e) => (e.points ?? []).map(([x]) => x)),
     ];
     const allY = [
         ...sg.nodes.map((n) => n.y + n.h),
@@ -5291,6 +5541,7 @@ function computeBounds(sg, margin) {
         ...sg.tables.map((t) => t.y + t.h),
         ...sg.charts.map((c) => c.y + c.h),
         ...sg.markdowns.map((m) => m.y + m.h),
+        ...sg.edges.flatMap((e) => (e.points ?? []).map(([, y]) => y)),
     ];
     const autoWidth = (allX.length ? Math.max(...allX) : 400) + margin;
     const autoHeight = (allY.length ? Math.max(...allY) : 300) + margin;
@@ -8464,20 +8715,16 @@ function renderToSVG(sg, container, options = {}) {
         const srcCX = src.x + src.w / 2, srcCY = src.y + src.h / 2;
         const [x1, y1] = getConnPoint(src, dstCX, dstCY, e.fromAnchor);
         const [x2, y2] = getConnPoint(dst, srcCX, srcCY, e.toAnchor);
+        const points = compactPolylinePoints(e.points?.length && e.points.length >= 2 ? e.points : [[x1, y1], [x2, y2]]);
         const eg = mkGroup(`edge-${e.from}-${e.to}`, "eg");
         setParentGroupData(eg, resolveEdgeParentGroupId(e.from, e.to, nm, tm, gmMap, cm, parentGroups));
         if (e.style?.opacity != null)
             eg.setAttribute("opacity", String(e.style.opacity));
-        const len = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2) || 1;
-        const nx = (x2 - x1) / len, ny = (y2 - y1) / len;
         const ecol = String(e.style?.stroke ?? palette.edgeStroke);
         const { arrowAt, dashed } = connMeta(e.connector);
         const HEAD = EDGE.headInset;
-        const sx1 = arrowAt === "start" || arrowAt === "both" ? x1 + nx * HEAD : x1;
-        const sy1 = arrowAt === "start" || arrowAt === "both" ? y1 + ny * HEAD : y1;
-        const sx2 = arrowAt === "end" || arrowAt === "both" ? x2 - nx * HEAD : x2;
-        const sy2 = arrowAt === "end" || arrowAt === "both" ? y2 - ny * HEAD : y2;
-        const shaft = rc.line(sx1, sy1, sx2, sy2, {
+        const shaftPoints = insetPolylineEndpoints(points, arrowAt, HEAD);
+        const shaft = rc.path(polylinePathData(shaftPoints), {
             ...BASE_ROUGH,
             roughness: 0.9,
             seed: hashStr$3(e.from + e.to),
@@ -8488,18 +8735,21 @@ function renderToSVG(sg, container, options = {}) {
         shaft.setAttribute("data-edge-role", "shaft");
         eg.appendChild(shaft);
         if (arrowAt === "end" || arrowAt === "both") {
-            const endHead = arrowHead(rc, x2, y2, Math.atan2(y2 - y1, x2 - x1), ecol, hashStr$3(e.to));
+            const [endDx, endDy] = polylineEndpointDirection(points, "end");
+            const [endX, endY] = polylineArrowTipPoint(dst, points, "end");
+            const endHead = arrowHead(rc, endX, endY, Math.atan2(endDy, endDx), ecol, hashStr$3(e.to));
             endHead.setAttribute("data-edge-role", "head");
             eg.appendChild(endHead);
         }
         if (arrowAt === "start" || arrowAt === "both") {
-            const startHead = arrowHead(rc, x1, y1, Math.atan2(y1 - y2, x1 - x2), ecol, hashStr$3(e.from + "back"));
+            const [startDx, startDy] = polylineEndpointDirection(points, "start");
+            const [startX, startY] = polylineArrowTipPoint(src, points, "start");
+            const startHead = arrowHead(rc, startX, startY, Math.atan2(-startDy, -startDx), ecol, hashStr$3(e.from + "back"));
             startHead.setAttribute("data-edge-role", "head");
             eg.appendChild(startHead);
         }
         if (e.label) {
-            const mx = (x1 + x2) / 2 - ny * EDGE.labelOffset + (e.labelDx ?? 0);
-            const my = (y1 + y2) / 2 + nx * EDGE.labelOffset + (e.labelDy ?? 0);
+            const { x: mx, y: my } = polylineLabelPosition(points, EDGE.labelOffset, e.labelDx ?? 0, e.labelDy ?? 0);
             const tw = Math.max(e.label.length * 7 + 12, 36);
             const bg = se("rect");
             bg.setAttribute("x", String(mx - tw / 2));
@@ -9211,31 +9461,31 @@ function renderToCanvas(sg, canvas, options = {}) {
         const srcCX = src.x + src.w / 2, srcCY = src.y + src.h / 2;
         const [x1, y1] = getConnPoint(src, dstCX, dstCY, e.fromAnchor);
         const [x2, y2] = getConnPoint(dst, srcCX, srcCY, e.toAnchor);
+        const points = compactPolylinePoints(e.points?.length && e.points.length >= 2 ? e.points : [[x1, y1], [x2, y2]]);
         if (e.style?.opacity != null)
             ctx.globalAlpha = Number(e.style.opacity);
         const ecol = String(e.style?.stroke ?? palette.edgeStroke);
         const { arrowAt, dashed } = connMeta(e.connector);
-        const len = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2) || 1;
-        const nx = (x2 - x1) / len, ny = (y2 - y1) / len;
         const HEAD = EDGE.headInset;
-        const sx1 = arrowAt === 'start' || arrowAt === 'both' ? x1 + nx * HEAD : x1;
-        const sy1 = arrowAt === 'start' || arrowAt === 'both' ? y1 + ny * HEAD : y1;
-        const sx2 = arrowAt === 'end' || arrowAt === 'both' ? x2 - nx * HEAD : x2;
-        const sy2 = arrowAt === 'end' || arrowAt === 'both' ? y2 - ny * HEAD : y2;
-        rc.line(sx1, sy1, sx2, sy2, {
+        const shaftPoints = insetPolylineEndpoints(points, arrowAt, HEAD);
+        rc.path(polylinePathData(shaftPoints), {
             ...R, roughness: 0.9, seed: hashStr$3(e.from + e.to),
             stroke: ecol,
             strokeWidth: Number(e.style?.strokeWidth ?? 1.6),
             ...(dashed ? { strokeLineDash: EDGE.dashPattern } : {}),
         });
-        const ang = Math.atan2(y2 - y1, x2 - x1);
-        if (arrowAt === 'end' || arrowAt === 'both')
-            drawArrowHead(rc, x2, y2, ang, ecol, hashStr$3(e.to));
-        if (arrowAt === 'start' || arrowAt === 'both')
-            drawArrowHead(rc, x1, y1, Math.atan2(y1 - y2, x1 - x2), ecol, hashStr$3(e.from + 'back'));
+        if (arrowAt === 'end' || arrowAt === 'both') {
+            const [endDx, endDy] = polylineEndpointDirection(points, 'end');
+            const [endX, endY] = polylineArrowTipPoint(dst, points, 'end');
+            drawArrowHead(rc, endX, endY, Math.atan2(endDy, endDx), ecol, hashStr$3(e.to));
+        }
+        if (arrowAt === 'start' || arrowAt === 'both') {
+            const [startDx, startDy] = polylineEndpointDirection(points, 'start');
+            const [startX, startY] = polylineArrowTipPoint(src, points, 'start');
+            drawArrowHead(rc, startX, startY, Math.atan2(-startDy, -startDx), ecol, hashStr$3(e.from + 'back'));
+        }
         if (e.label) {
-            const mx = (x1 + x2) / 2 - ny * EDGE.labelOffset + (e.labelDx ?? 0);
-            const my = (y1 + y2) / 2 + nx * EDGE.labelOffset + (e.labelDy ?? 0);
+            const { x: mx, y: my } = polylineLabelPosition(points, EDGE.labelOffset, e.labelDx ?? 0, e.labelDy ?? 0);
             // ── Edge label: font, font-size, letter-spacing ──
             // always center-anchored (single line)
             const eFontSize = Number(e.style?.fontSize ?? EDGE.labelFontSize);
@@ -9932,7 +10182,7 @@ function animateShapeDraw(el, strokeDur = ANIMATION.nodeStrokeDur, stag = ANIMAT
     }));
 }
 // ── Edge draw helpers ─────────────────────────────────────
-const EDGE_SHAFT_SELECTOR = '[data-edge-role="shaft"] path';
+const EDGE_SHAFT_SELECTOR = '[data-edge-role="shaft"] path, path[data-edge-role="shaft"]';
 const EDGE_DECOR_SELECTOR = '[data-edge-role="head"], [data-edge-role="label"], [data-edge-role="label-bg"]';
 function edgeShaftPaths(el) {
     return Array.from(el.querySelectorAll(EDGE_SHAFT_SELECTOR));
@@ -11149,8 +11399,11 @@ class AnimationController {
      * 4. After guide finishes → fade in rough.js element, remove guide
      */
     _animateAnnotation(roughEl, guideD, silent) {
-        if (silent)
+        if (silent) {
+            roughEl.style.opacity = "1";
+            roughEl.style.transition = "none";
             return;
+        }
         // Hide rough.js element — will be revealed after guide draws
         roughEl.style.opacity = "0";
         roughEl.style.transition = "none";
@@ -11440,10 +11693,74 @@ const ANIMATION_CSS = `
 .skm-caption { pointer-events: none; user-select: none; }
 `;
 
+const exportAnimationState = new WeakMap();
+function bindExportAnimationState(svg, state) {
+    exportAnimationState.set(svg, state);
+}
+function getExportAnimationState(svg) {
+    return exportAnimationState.get(svg);
+}
+
 // ============================================================
 // sketchmark — Export System
 // SVG, PNG, Canvas, GIF (stub), MP4 (stub)
 // ============================================================
+const EXPORT_SVG_STYLE_ID = "sketchmark-export-state";
+const EXPORT_SVG_STATE_CSS = `
+.ng, .gg, .tg, .ntg, .cg, .eg, .mdg {
+  animation: none !important;
+  transition: none !important;
+}
+
+.ng.hidden { opacity: 0 !important; pointer-events: none !important; }
+.gg.gg-hidden,
+.tg.gg-hidden,
+.ntg.gg-hidden,
+.cg.gg-hidden,
+.eg.gg-hidden,
+.mdg.gg-hidden { opacity: 0 !important; }
+
+.ng.faded,
+.gg.faded,
+.tg.faded,
+.ntg.faded,
+.cg.faded,
+.eg.faded,
+.mdg.faded { opacity: 0.22 !important; }
+
+.ng.hl path, .ng.hl rect, .ng.hl ellipse, .ng.hl polygon,
+.tg.hl path, .tg.hl rect,
+.ntg.hl path, .ntg.hl polygon,
+.cg.hl path, .cg.hl rect,
+.mdg.hl text,
+.eg.hl path, .eg.hl line, .eg.hl polygon { stroke-width: 2.8 !important; }
+`;
+function buildExportSnapshot(svg) {
+    const snapshot = svg.cloneNode(true);
+    const animationState = getExportAnimationState(svg);
+    if (animationState?.steps.length) {
+        snapshot.querySelector("#annotation-layer")?.remove();
+        let rc = null;
+        try {
+            rc = rough.svg(snapshot);
+        }
+        catch {
+            rc = null;
+        }
+        const anim = new AnimationController(snapshot, animationState.steps, undefined, rc, animationState.config);
+        anim.goTo(animationState.steps.length - 1);
+    }
+    injectExportStyles(snapshot);
+    return snapshot;
+}
+function injectExportStyles(svg) {
+    if (svg.querySelector(`#${EXPORT_SVG_STYLE_ID}`))
+        return;
+    const style = document.createElementNS(SVG_NS$1, "style");
+    style.setAttribute("id", EXPORT_SVG_STYLE_ID);
+    style.textContent = EXPORT_SVG_STATE_CSS;
+    svg.insertBefore(style, svg.firstChild);
+}
 // ── Trigger browser download ──────────────────────────────
 function download(blob, filename) {
     const url = URL.createObjectURL(blob);
@@ -11457,15 +11774,15 @@ function download(blob, filename) {
 }
 // ── SVG export ────────────────────────────────────────────
 function exportSVG(svg, opts = {}) {
-    const str = svgToString(svg);
+    const str = svgToString(buildExportSnapshot(svg));
     const blob = new Blob([str], { type: 'image/svg+xml;charset=utf-8' });
     download(blob, opts.filename ?? 'diagram.svg');
 }
 function getSVGString(svg) {
-    return svgToString(svg);
+    return svgToString(buildExportSnapshot(svg));
 }
 function getSVGBlob(svg) {
-    return new Blob([svgToString(svg)], { type: 'image/svg+xml;charset=utf-8' });
+    return new Blob([svgToString(buildExportSnapshot(svg))], { type: 'image/svg+xml;charset=utf-8' });
 }
 // ── PNG export (from SVG via Canvas) ─────────────────────
 async function exportPNG(svg, opts = {}) {
@@ -11491,7 +11808,7 @@ async function svgToPNGDataURL(svg, opts = {}) {
         ctx.fillStyle = EXPORT.fallbackBg;
         ctx.fillRect(0, 0, w, h);
     }
-    const svgStr = svgToString(svg);
+    const svgStr = svgToString(buildExportSnapshot(svg));
     const blob = new Blob([svgStr], { type: 'image/svg+xml;charset=utf-8' });
     const url = URL.createObjectURL(blob);
     await new Promise((resolve, reject) => {
@@ -11509,7 +11826,7 @@ async function exportCanvasPNG(canvas, opts = {}) {
 }
 // ── HTML export (self-contained) ──────────────────────────
 function exportHTML(svg, dslSource, opts = {}) {
-    const svgStr = svgToString(svg);
+    const svgStr = svgToString(buildExportSnapshot(svg));
     const html = `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -11690,6 +12007,7 @@ function render(options) {
         }
         const containerEl = el instanceof SVGSVGElement ? undefined : el;
         anim = new AnimationController(svg, ast.steps, containerEl, rc, ast.config);
+        bindExportAnimationState(svg, { steps: ast.steps, config: ast.config });
     }
     if (typeof tts === "boolean") {
         anim.tts = tts;