sketchmark 1.1.6 → 1.2.1

package/dist/index.cjs

@@ -146,10 +146,16 @@ function tokenize$1(src) {
                         val += "\n";
                     else if (esc === "t")
                         val += "\t";
+                    else if (esc === "r")
+                        val += "\r";
                     else if (esc === "\\")
                         val += "\\";
+                    else if (esc === q)
+                        val += q;
+                    else if (esc)
+                        val += `\\${esc}`;
                     else
-                        val += esc;
+                        val += "\\";
                 }
                 else
                     val += src[i];
@@ -226,6 +232,47 @@ function tokenize$1(src) {
     return tokens;
 }
 
+function pluginMessage(plugin, stage, error) {
+    const detail = error instanceof Error ? error.message : String(error);
+    return `Plugin "${plugin.name}" ${stage} failed: ${detail}`;
+}
+function applyPluginPreprocessors(source, plugins = []) {
+    let nextSource = source;
+    for (const plugin of plugins) {
+        if (!plugin.preprocess)
+            continue;
+        try {
+            const transformed = plugin.preprocess(nextSource);
+            if (typeof transformed !== "string") {
+                throw new Error("preprocess must return a string");
+            }
+            nextSource = transformed;
+        }
+        catch (error) {
+            throw new Error(pluginMessage(plugin, "preprocess", error));
+        }
+    }
+    return nextSource;
+}
+function applyPluginAstTransforms(ast, plugins = []) {
+    let nextAst = ast;
+    for (const plugin of plugins) {
+        if (!plugin.transformAst)
+            continue;
+        try {
+            const transformed = plugin.transformAst(nextAst);
+            if (!transformed || transformed.kind !== "diagram") {
+                throw new Error('transformAst must return a DiagramAST with kind="diagram"');
+            }
+            nextAst = transformed;
+        }
+        catch (error) {
+            throw new Error(pluginMessage(plugin, "transformAst", error));
+        }
+    }
+    return nextAst;
+}
+
 // ============================================================
 // sketchmark - Parser  (Tokens -> DiagramAST)
 // ============================================================
@@ -312,9 +359,10 @@ function isValueToken(t) {
 function isPropKeyToken(t) {
     return !!t && (t.type === "IDENT" || t.type === "KEYWORD");
 }
-function parse(src) {
+function parse(src, options = {}) {
     resetUid();
-    const tokens = tokenize$1(src).filter((t) => t.type !== "NEWLINE" || t.value === "\n");
+    const preparedSource = applyPluginPreprocessors(src, options.plugins);
+    const tokens = tokenize$1(preparedSource).filter((t) => t.type !== "NEWLINE" || t.value === "\n");
     const flat = [];
     let lastNL = false;
     for (const t of tokens) {
@@ -497,6 +545,7 @@ function parse(src) {
         const toks = lineTokens();
         const id = requireExplicitId(keywordTok, toks);
         const props = parseSimpleProps(toks, 1);
+        const meta = extractNodeMeta(props);
         const node = {
             kind: "node",
             id,
@@ -511,6 +560,7 @@ function parse(src) {
             ...(props.dy ? { dy: parseFloat(props.dy) } : {}),
             ...(props.factor ? { factor: parseFloat(props.factor) } : {}),
             ...(props.theme ? { theme: props.theme } : {}),
+            ...(meta ? { meta } : {}),
             style: propsToStyle(props),
         };
         if (props.url)
@@ -535,12 +585,14 @@ function parse(src) {
             j = 2;
         }
         Object.assign(props, parseSimpleProps(toks, j));
+        const meta = extractNodeMeta(props);
         return {
             kind: "node",
             id,
             shape: "note",
             label: (props.label ?? "").replace(/\\n/g, "\n"),
             theme: props.theme,
+            ...(meta ? { meta } : {}),
             style: propsToStyle(props),
             ...(props.width ? { width: parseFloat(props.width) } : {}),
             ...(props.height ? { height: parseFloat(props.height) } : {}),
@@ -552,6 +604,13 @@ function parse(src) {
             ...(props.factor ? { factor: parseFloat(props.factor) } : {}),
         };
     }
+    function extractNodeMeta(props) {
+        const meta = {};
+        if (props["animation-parent"]) {
+            meta.animationParent = props["animation-parent"];
+        }
+        return Object.keys(meta).length ? meta : undefined;
+    }
     function parseGroup() {
         const keywordTok = cur();
         skip();
@@ -624,6 +683,8 @@ function parse(src) {
             to: toTok.value,
             connector: connector,
             label: props.label,
+            fromAnchor: props["anchor-from"],
+            toAnchor: props["anchor-to"],
             dashed,
             bidirectional,
             style: propsToStyle(props),
@@ -937,6 +998,7 @@ function parse(src) {
             registerAuthoredId(grp.id, "group", t);
             if (isBare) {
                 grp.label = "";
+                grp.padding = grp.padding ?? 0;
                 grp.style = {
                     ...grp.style,
                     fill: grp.style?.fill ?? "none",
@@ -1107,7 +1169,7 @@ function parse(src) {
             node.style = { ...ast.styles[node.id], ...node.style };
         }
     }
-    return ast;
+    return applyPluginAstTransforms(ast, options.plugins);
 }
 
 // ============================================================
@@ -3554,6 +3616,8 @@ function buildSceneGraph(ast) {
         to: e.to,
         connector: e.connector,
         label: e.label,
+        fromAnchor: e.fromAnchor,
+        toAnchor: e.toAnchor,
         dashed: e.dashed ?? false,
         bidirectional: e.bidirectional ?? false,
         style: e.style ?? {},
@@ -4131,28 +4195,13 @@ function connMeta(connector) {
         return { arrowAt: "start", dashed };
     return { arrowAt: "end", dashed };
 }
-// ── Generic rect connection point ────────────────────────────────────────
-function rectConnPoint$1(rx, ry, rw, rh, ox, oy) {
-    const cx = rx + rw / 2, cy = ry + rh / 2;
-    const dx = ox - cx, dy = oy - cy;
-    if (Math.abs(dx) < 0.01 && Math.abs(dy) < 0.01)
-        return [cx, cy];
-    const hw = rw / 2 - 2, hh = rh / 2 - 2;
-    const tx = Math.abs(dx) > 0.01 ? hw / Math.abs(dx) : 1e9;
-    const ty = Math.abs(dy) > 0.01 ? hh / Math.abs(dy) : 1e9;
-    const t = Math.min(tx, ty);
-    return [cx + t * dx, cy + t * dy];
-}
 // ── Resolve an endpoint entity by ID across all maps ─────────────────────
 function resolveEndpoint(id, nm, tm, gm, cm) {
     return nm.get(id) ?? tm.get(id) ?? gm.get(id) ?? cm.get(id) ?? null;
 }
 // ── Get connection point for any entity ──────────────────────────────────
-function getConnPoint(src, dstCX, dstCY) {
-    if ("shape" in src && src.shape) {
-        return connPoint(src, { x: dstCX - 1, y: dstCY - 1, w: 2, h: 2});
-    }
-    return rectConnPoint$1(src.x, src.y, src.w, src.h, dstCX, dstCY);
+function getConnPoint(src, dstCX, dstCY, anchor) {
+    return anchoredConnPoint(src, anchor, dstCX, dstCY);
 }
 // ── Group depth (for paint order) ────────────────────────────────────────
 function groupDepth(g, gm) {
@@ -4250,37 +4299,510 @@ const lineShape = {
     },
 };
 
+const COMMAND_RE = /^[AaCcHhLlMmQqSsTtVvZz]$/;
+const TOKEN_RE = /[AaCcHhLlMmQqSsTtVvZz]|[-+]?(?:\d*\.\d+|\d+)(?:[eE][-+]?\d+)?/g;
+const EPSILON = 1e-6;
+const PARAM_COUNTS = {
+    A: 7,
+    C: 6,
+    H: 1,
+    L: 2,
+    M: 2,
+    Q: 4,
+    S: 4,
+    T: 2,
+    V: 1,
+    Z: 0,
+};
+function isCommandToken(token) {
+    return COMMAND_RE.test(token);
+}
+function formatNumber(value) {
+    const rounded = Math.abs(value) < EPSILON ? 0 : Number(value.toFixed(3));
+    return Object.is(rounded, -0) ? "0" : String(rounded);
+}
+function parseRawSegments(pathData) {
+    const tokens = pathData.match(TOKEN_RE) ?? [];
+    if (!tokens.length)
+        return [];
+    const segments = [];
+    let index = 0;
+    let currentCommand = null;
+    while (index < tokens.length) {
+        const token = tokens[index];
+        if (isCommandToken(token)) {
+            currentCommand = token;
+            index += 1;
+            if (token === "Z" || token === "z") {
+                segments.push({ command: "Z", values: [] });
+            }
+            continue;
+        }
+        if (!currentCommand)
+            break;
+        const upper = currentCommand.toUpperCase();
+        const paramCount = PARAM_COUNTS[upper];
+        if (!paramCount) {
+            index += 1;
+            continue;
+        }
+        let isFirstMove = upper === "M";
+        while (index < tokens.length && !isCommandToken(tokens[index])) {
+            if (index + paramCount > tokens.length)
+                return segments;
+            const values = tokens
+                .slice(index, index + paramCount)
+                .map((value) => Number(value));
+            if (values.some((value) => Number.isNaN(value))) {
+                return segments;
+            }
+            if (upper === "M") {
+                const moveCommand = isFirstMove
+                    ? currentCommand
+                    : currentCommand === "m"
+                        ? "l"
+                        : "L";
+                segments.push({ command: moveCommand, values });
+                isFirstMove = false;
+            }
+            else {
+                segments.push({ command: currentCommand, values });
+            }
+            index += paramCount;
+        }
+    }
+    return segments;
+}
+function reflect(control, around) {
+    return {
+        x: around.x * 2 - control.x,
+        y: around.y * 2 - control.y,
+    };
+}
+function toAbsoluteSegments(rawSegments) {
+    const segments = [];
+    let current = { x: 0, y: 0 };
+    let subpathStart = { x: 0, y: 0 };
+    let previousCubicControl = null;
+    let previousQuadraticControl = null;
+    for (const segment of rawSegments) {
+        const isRelative = segment.command === segment.command.toLowerCase();
+        const command = segment.command.toUpperCase();
+        const values = segment.values;
+        switch (command) {
+            case "M": {
+                const x = isRelative ? current.x + values[0] : values[0];
+                const y = isRelative ? current.y + values[1] : values[1];
+                current = { x, y };
+                subpathStart = { x, y };
+                previousCubicControl = null;
+                previousQuadraticControl = null;
+                segments.push({ command: "M", values: [x, y] });
+                break;
+            }
+            case "L": {
+                const x = isRelative ? current.x + values[0] : values[0];
+                const y = isRelative ? current.y + values[1] : values[1];
+                current = { x, y };
+                previousCubicControl = null;
+                previousQuadraticControl = null;
+                segments.push({ command: "L", values: [x, y] });
+                break;
+            }
+            case "H": {
+                const x = isRelative ? current.x + values[0] : values[0];
+                current = { x, y: current.y };
+                previousCubicControl = null;
+                previousQuadraticControl = null;
+                segments.push({ command: "L", values: [x, current.y] });
+                break;
+            }
+            case "V": {
+                const y = isRelative ? current.y + values[0] : values[0];
+                current = { x: current.x, y };
+                previousCubicControl = null;
+                previousQuadraticControl = null;
+                segments.push({ command: "L", values: [current.x, y] });
+                break;
+            }
+            case "C": {
+                const x1 = isRelative ? current.x + values[0] : values[0];
+                const y1 = isRelative ? current.y + values[1] : values[1];
+                const x2 = isRelative ? current.x + values[2] : values[2];
+                const y2 = isRelative ? current.y + values[3] : values[3];
+                const x = isRelative ? current.x + values[4] : values[4];
+                const y = isRelative ? current.y + values[5] : values[5];
+                current = { x, y };
+                previousCubicControl = { x: x2, y: y2 };
+                previousQuadraticControl = null;
+                segments.push({ command: "C", values: [x1, y1, x2, y2, x, y] });
+                break;
+            }
+            case "S": {
+                const control1 = previousCubicControl
+                    ? reflect(previousCubicControl, current)
+                    : { ...current };
+                const x2 = isRelative ? current.x + values[0] : values[0];
+                const y2 = isRelative ? current.y + values[1] : values[1];
+                const x = isRelative ? current.x + values[2] : values[2];
+                const y = isRelative ? current.y + values[3] : values[3];
+                current = { x, y };
+                previousCubicControl = { x: x2, y: y2 };
+                previousQuadraticControl = null;
+                segments.push({
+                    command: "C",
+                    values: [control1.x, control1.y, x2, y2, x, y],
+                });
+                break;
+            }
+            case "Q": {
+                const x1 = isRelative ? current.x + values[0] : values[0];
+                const y1 = isRelative ? current.y + values[1] : values[1];
+                const x = isRelative ? current.x + values[2] : values[2];
+                const y = isRelative ? current.y + values[3] : values[3];
+                current = { x, y };
+                previousCubicControl = null;
+                previousQuadraticControl = { x: x1, y: y1 };
+                segments.push({ command: "Q", values: [x1, y1, x, y] });
+                break;
+            }
+            case "T": {
+                const control = previousQuadraticControl
+                    ? reflect(previousQuadraticControl, current)
+                    : { ...current };
+                const x = isRelative ? current.x + values[0] : values[0];
+                const y = isRelative ? current.y + values[1] : values[1];
+                current = { x, y };
+                previousCubicControl = null;
+                previousQuadraticControl = control;
+                segments.push({ command: "Q", values: [control.x, control.y, x, y] });
+                break;
+            }
+            case "A": {
+                const rx = Math.abs(values[0]);
+                const ry = Math.abs(values[1]);
+                const rotation = values[2];
+                const largeArc = values[3];
+                const sweep = values[4];
+                const x = isRelative ? current.x + values[5] : values[5];
+                const y = isRelative ? current.y + values[6] : values[6];
+                current = { x, y };
+                previousCubicControl = null;
+                previousQuadraticControl = null;
+                segments.push({
+                    command: "A",
+                    values: [rx, ry, rotation, largeArc, sweep, x, y],
+                });
+                break;
+            }
+            case "Z": {
+                current = { ...subpathStart };
+                previousCubicControl = null;
+                previousQuadraticControl = null;
+                segments.push({ command: "Z", values: [] });
+                break;
+            }
+        }
+    }
+    return segments;
+}
+function cubicAt(p0, p1, p2, p3, t) {
+    const mt = 1 - t;
+    return (mt * mt * mt * p0 +
+        3 * mt * mt * t * p1 +
+        3 * mt * t * t * p2 +
+        t * t * t * p3);
+}
+function quadraticAt(p0, p1, p2, t) {
+    const mt = 1 - t;
+    return mt * mt * p0 + 2 * mt * t * p1 + t * t * p2;
+}
+function cubicExtrema(p0, p1, p2, p3) {
+    const a = -p0 + 3 * p1 - 3 * p2 + p3;
+    const b = 3 * p0 - 6 * p1 + 3 * p2;
+    const c = -3 * p0 + 3 * p1;
+    if (Math.abs(a) < EPSILON) {
+        if (Math.abs(b) < EPSILON)
+            return [];
+        return [-c / (2 * b)].filter((t) => t > 0 && t < 1);
+    }
+    const discriminant = 4 * b * b - 12 * a * c;
+    if (discriminant < 0)
+        return [];
+    const sqrtDiscriminant = Math.sqrt(discriminant);
+    return [
+        (-2 * b + sqrtDiscriminant) / (6 * a),
+        (-2 * b - sqrtDiscriminant) / (6 * a),
+    ].filter((t) => t > 0 && t < 1);
+}
+function quadraticExtrema(p0, p1, p2) {
+    const denominator = p0 - 2 * p1 + p2;
+    if (Math.abs(denominator) < EPSILON)
+        return [];
+    const t = (p0 - p1) / denominator;
+    return t > 0 && t < 1 ? [t] : [];
+}
+function angleBetween(u, v) {
+    const magnitude = Math.hypot(u.x, u.y) * Math.hypot(v.x, v.y);
+    if (magnitude < EPSILON)
+        return 0;
+    const sign = u.x * v.y - u.y * v.x < 0 ? -1 : 1;
+    const cosine = Math.min(1, Math.max(-1, (u.x * v.x + u.y * v.y) / magnitude));
+    return sign * Math.acos(cosine);
+}
+function sampleArc(start, values) {
+    let [rx, ry, rotation, largeArcFlag, sweepFlag, endX, endY] = values;
+    if ((Math.abs(start.x - endX) < EPSILON && Math.abs(start.y - endY) < EPSILON) || rx < EPSILON || ry < EPSILON) {
+        return [start, { x: endX, y: endY }];
+    }
+    rx = Math.abs(rx);
+    ry = Math.abs(ry);
+    const phi = (rotation * Math.PI) / 180;
+    const cosPhi = Math.cos(phi);
+    const sinPhi = Math.sin(phi);
+    const dx2 = (start.x - endX) / 2;
+    const dy2 = (start.y - endY) / 2;
+    const x1p = cosPhi * dx2 + sinPhi * dy2;
+    const y1p = -sinPhi * dx2 + cosPhi * dy2;
+    const lambda = (x1p * x1p) / (rx * rx) + (y1p * y1p) / (ry * ry);
+    if (lambda > 1) {
+        const scale = Math.sqrt(lambda);
+        rx *= scale;
+        ry *= scale;
+    }
+    const rx2 = rx * rx;
+    const ry2 = ry * ry;
+    const x1p2 = x1p * x1p;
+    const y1p2 = y1p * y1p;
+    const numerator = rx2 * ry2 - rx2 * y1p2 - ry2 * x1p2;
+    const denominator = rx2 * y1p2 + ry2 * x1p2;
+    const factor = denominator < EPSILON ? 0 : Math.sqrt(Math.max(0, numerator / denominator));
+    const sign = largeArcFlag === sweepFlag ? -1 : 1;
+    const cxp = sign * factor * ((rx * y1p) / ry);
+    const cyp = sign * factor * (-(ry * x1p) / rx);
+    const cx = cosPhi * cxp - sinPhi * cyp + (start.x + endX) / 2;
+    const cy = sinPhi * cxp + cosPhi * cyp + (start.y + endY) / 2;
+    const startVector = {
+        x: (x1p - cxp) / rx,
+        y: (y1p - cyp) / ry,
+    };
+    const endVector = {
+        x: (-x1p - cxp) / rx,
+        y: (-y1p - cyp) / ry,
+    };
+    let deltaTheta = angleBetween(startVector, endVector);
+    if (!sweepFlag && deltaTheta > 0)
+        deltaTheta -= Math.PI * 2;
+    if (sweepFlag && deltaTheta < 0)
+        deltaTheta += Math.PI * 2;
+    const theta1 = angleBetween({ x: 1, y: 0 }, startVector);
+    const steps = Math.max(12, Math.ceil(Math.abs(deltaTheta) / (Math.PI / 8)));
+    const points = [];
+    for (let index = 0; index <= steps; index += 1) {
+        const theta = theta1 + (deltaTheta * index) / steps;
+        const cosTheta = Math.cos(theta);
+        const sinTheta = Math.sin(theta);
+        points.push({
+            x: cx + rx * cosPhi * cosTheta - ry * sinPhi * sinTheta,
+            y: cy + rx * sinPhi * cosTheta + ry * cosPhi * sinTheta,
+        });
+    }
+    return points;
+}
+function boundsFromAbsoluteSegments(segments) {
+    if (!segments.length)
+        return null;
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    const include = (point) => {
+        minX = Math.min(minX, point.x);
+        minY = Math.min(minY, point.y);
+        maxX = Math.max(maxX, point.x);
+        maxY = Math.max(maxY, point.y);
+    };
+    let current = { x: 0, y: 0 };
+    let subpathStart = { x: 0, y: 0 };
+    for (const segment of segments) {
+        switch (segment.command) {
+            case "M": {
+                current = { x: segment.values[0], y: segment.values[1] };
+                subpathStart = { ...current };
+                include(current);
+                break;
+            }
+            case "L": {
+                include(current);
+                current = { x: segment.values[0], y: segment.values[1] };
+                include(current);
+                break;
+            }
+            case "C": {
+                const [x1, y1, x2, y2, x, y] = segment.values;
+                const ts = new Set([0, 1]);
+                cubicExtrema(current.x, x1, x2, x).forEach((value) => ts.add(value));
+                cubicExtrema(current.y, y1, y2, y).forEach((value) => ts.add(value));
+                for (const t of ts) {
+                    include({
+                        x: cubicAt(current.x, x1, x2, x, t),
+                        y: cubicAt(current.y, y1, y2, y, t),
+                    });
+                }
+                current = { x, y };
+                break;
+            }
+            case "Q": {
+                const [x1, y1, x, y] = segment.values;
+                const ts = new Set([0, 1]);
+                quadraticExtrema(current.x, x1, x).forEach((value) => ts.add(value));
+                quadraticExtrema(current.y, y1, y).forEach((value) => ts.add(value));
+                for (const t of ts) {
+                    include({
+                        x: quadraticAt(current.x, x1, x, t),
+                        y: quadraticAt(current.y, y1, y, t),
+                    });
+                }
+                current = { x, y };
+                break;
+            }
+            case "A": {
+                for (const point of sampleArc(current, segment.values)) {
+                    include(point);
+                }
+                current = { x: segment.values[5], y: segment.values[6] };
+                break;
+            }
+            case "Z": {
+                include(current);
+                include(subpathStart);
+                current = { ...subpathStart };
+                break;
+            }
+        }
+    }
+    if (!Number.isFinite(minX) || !Number.isFinite(minY) || !Number.isFinite(maxX) || !Number.isFinite(maxY)) {
+        return null;
+    }
+    return { minX, minY, maxX, maxY };
+}
+function transformX(x, bounds, scaleX) {
+    return (x - bounds.minX) * scaleX;
+}
+function transformY(y, bounds, scaleY) {
+    return (y - bounds.minY) * scaleY;
+}
+function buildScaledPathData(segments, bounds, width, height) {
+    const sourceWidth = Math.max(bounds.maxX - bounds.minX, EPSILON);
+    const sourceHeight = Math.max(bounds.maxY - bounds.minY, EPSILON);
+    const scaleX = width / sourceWidth;
+    const scaleY = height / sourceHeight;
+    return segments
+        .map((segment) => {
+        switch (segment.command) {
+            case "M":
+            case "L":
+                return [
+                    segment.command,
+                    formatNumber(transformX(segment.values[0], bounds, scaleX)),
+                    formatNumber(transformY(segment.values[1], bounds, scaleY)),
+                ].join(" ");
+            case "C":
+                return [
+                    "C",
+                    formatNumber(transformX(segment.values[0], bounds, scaleX)),
+                    formatNumber(transformY(segment.values[1], bounds, scaleY)),
+                    formatNumber(transformX(segment.values[2], bounds, scaleX)),
+                    formatNumber(transformY(segment.values[3], bounds, scaleY)),
+                    formatNumber(transformX(segment.values[4], bounds, scaleX)),
+                    formatNumber(transformY(segment.values[5], bounds, scaleY)),
+                ].join(" ");
+            case "Q":
+                return [
+                    "Q",
+                    formatNumber(transformX(segment.values[0], bounds, scaleX)),
+                    formatNumber(transformY(segment.values[1], bounds, scaleY)),
+                    formatNumber(transformX(segment.values[2], bounds, scaleX)),
+                    formatNumber(transformY(segment.values[3], bounds, scaleY)),
+                ].join(" ");
+            case "A":
+                return [
+                    "A",
+                    formatNumber(segment.values[0] * scaleX),
+                    formatNumber(segment.values[1] * scaleY),
+                    formatNumber(segment.values[2]),
+                    formatNumber(segment.values[3]),
+                    formatNumber(segment.values[4]),
+                    formatNumber(transformX(segment.values[5], bounds, scaleX)),
+                    formatNumber(transformY(segment.values[6], bounds, scaleY)),
+                ].join(" ");
+            case "Z":
+                return "Z";
+        }
+    })
+        .join(" ");
+}
+function intrinsicSizeFromBounds(bounds) {
+    if (!bounds)
+        return { width: 100, height: 100 };
+    return {
+        width: Math.max(1, Math.ceil(bounds.maxX - bounds.minX)),
+        height: Math.max(1, Math.ceil(bounds.maxY - bounds.minY)),
+    };
+}
+function parsePathGeometry(pathData) {
+    const segments = toAbsoluteSegments(parseRawSegments(pathData));
+    return {
+        segments,
+        bounds: boundsFromAbsoluteSegments(segments),
+    };
+}
+function getPathIntrinsicSize(pathData) {
+    if (!pathData)
+        return { width: 100, height: 100 };
+    return intrinsicSizeFromBounds(parsePathGeometry(pathData).bounds);
+}
+function getRenderablePathData(pathData, width, height) {
+    if (!pathData)
+        return null;
+    const { segments, bounds } = parsePathGeometry(pathData);
+    if (!segments.length || !bounds)
+        return pathData;
+    return buildScaledPathData(segments, bounds, Math.max(1, width), Math.max(1, height));
+}
+function getRenderableNodePathData(node) {
+    return getRenderablePathData(node.pathData, node.w, node.h);
+}
+
 const pathShape = {
     size(n, labelW) {
-        // User should provide width/height; defaults to 100x100
-        const w = n.width ?? Math.max(100, Math.min(300, labelW + 20));
+        const intrinsic = getPathIntrinsicSize(n.pathData);
+        const w = n.width ?? Math.max(intrinsic.width, Math.min(300, labelW + 20));
         n.w = w;
         if (!n.h) {
-            if (!n.width && labelW + 20 > w) {
+            if (!n.width && !n.height && labelW + 20 > w) {
                 const fontSize = Number(n.style?.fontSize ?? 14);
                 const lines = Math.ceil(labelW / (w - 20));
-                n.h = Math.max(100, lines * fontSize * 1.5 + 20);
+                n.h = Math.max(intrinsic.height, lines * fontSize * 1.5 + 20);
             }
             else {
-                n.h = n.height ?? 100;
+                n.h = n.height ?? intrinsic.height;
             }
         }
     },
     renderSVG(rc, n, _palette, opts) {
-        const d = n.pathData;
+        const d = getRenderableNodePathData(n);
         if (!d) {
-            // No path data — render placeholder box
             return [rc.rectangle(n.x + 1, n.y + 1, n.w - 2, n.h - 2, opts)];
         }
         const el = rc.path(d, opts);
-        // Wrap in a group to translate the user's path to the node position
         const g = document.createElementNS(SVG_NS, "g");
         g.setAttribute("transform", `translate(${n.x},${n.y})`);
         g.appendChild(el);
         return [g];
     },
     renderCanvas(rc, ctx, n, _palette, opts) {
-        const d = n.pathData;
+        const d = getRenderableNodePathData(n);
         if (!d) {
             rc.rectangle(n.x + 1, n.y + 1, n.w - 2, n.h - 2, opts);
             return;
@@ -4587,6 +5109,50 @@ function connPoint(n, other) {
     const t = Math.min(tx, ty);
     return [cx + t * dx, cy + t * dy];
 }
+function clampInset(value) {
+    return Math.max(2, value);
+}
+function anchoredConnPoint(entity, anchor, otherCX, otherCY) {
+    if (!anchor) {
+        if (entity.shape && otherCX != null && otherCY != null) {
+            return connPoint(entity, { x: otherCX - 1, y: otherCY - 1, w: 2, h: 2});
+        }
+        if (otherCX != null && otherCY != null) {
+            return rectConnPoint(entity.x, entity.y, entity.w, entity.h, otherCX, otherCY);
+        }
+        return [entity.x + entity.w / 2, entity.y + entity.h / 2];
+    }
+    const insetX = clampInset(Math.min(10, entity.w / 2));
+    const insetY = clampInset(Math.min(10, entity.h / 2));
+    const left = entity.x + insetX;
+    const right = entity.x + entity.w - insetX;
+    const top = entity.y + insetY;
+    const bottom = entity.y + entity.h - insetY;
+    const cx = entity.x + entity.w / 2;
+    const cy = entity.y + entity.h / 2;
+    switch (anchor) {
+        case "top":
+            return [cx, top];
+        case "right":
+            return [right, cy];
+        case "bottom":
+            return [cx, bottom];
+        case "left":
+            return [left, cy];
+        case "center":
+            return [cx, cy];
+        case "top-left":
+            return [left, top];
+        case "top-right":
+            return [right, top];
+        case "bottom-left":
+            return [left, bottom];
+        case "bottom-right":
+            return [right, bottom];
+        default:
+            return [cx, cy];
+    }
+}
 function rectConnPoint(rx, ry, rw, rh, ox, oy) {
     const cx = rx + rw / 2, cy = ry + rh / 2;
     const dx = ox - cx, dy = oy - cy;
@@ -4618,17 +5184,6 @@ function routeEdges(sg) {
             return c;
         return null;
     }
-    function connPt(src, dstCX, dstCY) {
-        // SceneNode has a .shape field; use the existing connPoint for it
-        if ("shape" in src && src.shape) {
-            return connPoint(src, {
-                x: dstCX - 1,
-                y: dstCY - 1,
-                w: 2,
-                h: 2});
-        }
-        return rectConnPoint(src.x, src.y, src.w, src.h, dstCX, dstCY);
-    }
     for (const e of sg.edges) {
         const src = resolve(e.from);
         const dst = resolve(e.to);
@@ -4638,7 +5193,10 @@ 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 = [connPt(src, dstCX, dstCY), connPt(dst, srcCX, srcCY)];
+        e.points = [
+            anchoredConnPoint(src, e.fromAnchor, dstCX, dstCY),
+            anchoredConnPoint(dst, e.toAnchor, srcCX, srcCY),
+        ];
     }
 }
 function computeBounds(sg, margin) {
@@ -7779,8 +8337,8 @@ function renderToSVG(sg, container, options = {}) {
             continue;
         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;
-        const [x1, y1] = getConnPoint(src, dstCX, dstCY);
-        const [x2, y2] = getConnPoint(dst, srcCX, srcCY);
+        const [x1, y1] = getConnPoint(src, dstCX, dstCY, e.fromAnchor);
+        const [x2, y2] = getConnPoint(dst, srcCX, srcCY, e.toAnchor);
         const eg = mkGroup(`edge-${e.from}-${e.to}`, "eg");
         if (e.style?.opacity != null)
             eg.setAttribute("opacity", String(e.style.opacity));
@@ -7856,7 +8414,9 @@ function renderToSVG(sg, container, options = {}) {
         ng.dataset.w = String(n.w);
         ng.dataset.h = String(n.h);
         if (n.pathData)
-            ng.dataset.pathData = n.pathData;
+            ng.dataset.pathData = getRenderableNodePathData(n) ?? n.pathData;
+        if (n.meta?.animationParent)
+            ng.dataset.animationParent = n.meta.animationParent;
         if (n.style?.opacity != null)
             ng.setAttribute("opacity", String(n.style.opacity));
         // ── Static transform (deg, dx, dy, factor) ──────────
@@ -8510,8 +9070,8 @@ function renderToCanvas(sg, canvas, options = {}) {
             continue;
         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;
-        const [x1, y1] = getConnPoint(src, dstCX, dstCY);
-        const [x2, y2] = getConnPoint(dst, srcCX, srcCY);
+        const [x1, y1] = getConnPoint(src, dstCX, dstCY, e.fromAnchor);
+        const [x2, y2] = getConnPoint(dst, srcCX, srcCY, e.toAnchor);
         if (e.style?.opacity != null)
             ctx.globalAlpha = Number(e.style.opacity);
         const ecol = String(e.style?.stroke ?? palette.edgeStroke);
@@ -9368,6 +9928,13 @@ class AnimationController {
                 this.drawTargetNodes.delete(`node-${s.target}`);
             }
         }
+        this._relatedElementIdsByPrimaryId = this._buildRelatedElementIndex();
+        for (const nodeId of Array.from(this.drawTargetNodes)) {
+            const relatedIds = this._relatedElementIdsByPrimaryId.get(nodeId);
+            if (!relatedIds)
+                continue;
+            relatedIds.forEach((id) => this.drawTargetNodes.add(id));
+        }
         this._drawStepIndexByElementId = this._buildDrawStepIndex();
         const { parentGroupByElementId, groupDescendantIds } = this._buildGroupVisibilityIndex();
         this._parentGroupByElementId = parentGroupByElementId;
@@ -9398,10 +9965,30 @@ class AnimationController {
             const el = resolveNonEdgeDrawEl(this.svg, step.target);
             if (el && !drawStepIndexByElementId.has(el.id)) {
                 drawStepIndexByElementId.set(el.id, stepIndex);
+                this._relatedElementIdsByPrimaryId.get(el.id)?.forEach((relatedId) => {
+                    if (!drawStepIndexByElementId.has(relatedId)) {
+                        drawStepIndexByElementId.set(relatedId, stepIndex);
+                    }
+                });
             }
         });
         return drawStepIndexByElementId;
     }
+    _buildRelatedElementIndex() {
+        const relatedElementIdsByPrimaryId = new Map();
+        this.svg.querySelectorAll(POSITIONABLE_SELECTOR).forEach((el) => {
+            const animationParent = el.dataset.animationParent;
+            if (!animationParent)
+                return;
+            const primaryEl = resolveNonEdgeDrawEl(this.svg, animationParent);
+            if (!primaryEl || primaryEl.id === el.id)
+                return;
+            const related = relatedElementIdsByPrimaryId.get(primaryEl.id) ?? new Set();
+            related.add(el.id);
+            relatedElementIdsByPrimaryId.set(primaryEl.id, related);
+        });
+        return relatedElementIdsByPrimaryId;
+    }
     _buildGroupVisibilityIndex() {
         const parentGroupByElementId = new Map();
         const directChildIdsByGroup = new Map();
@@ -9480,10 +10067,18 @@ class AnimationController {
         const el = resolveEl(this.svg, target);
         if (!el)
             return [];
-        if (!el.id.startsWith("group-"))
-            return [el];
+        if (!el.id.startsWith("group-")) {
+            const ids = new Set([el.id]);
+            this._relatedElementIdsByPrimaryId.get(el.id)?.forEach((id) => ids.add(id));
+            return Array.from(ids)
+                .map((id) => getEl(this.svg, id))
+                .filter((candidate) => candidate != null);
+        }
         const ids = new Set([el.id]);
         this._groupDescendantIds.get(el.id)?.forEach((id) => ids.add(id));
+        Array.from(ids).forEach((id) => {
+            this._relatedElementIdsByPrimaryId.get(id)?.forEach((relatedId) => ids.add(relatedId));
+        });
         return Array.from(ids)
             .map((id) => getEl(this.svg, id))
             .filter((candidate) => candidate != null);
@@ -9892,9 +10487,11 @@ class AnimationController {
     // ── highlight ────────────────────────────────────────────
     _doHighlight(target) {
         this.svg
-            .querySelectorAll(".ng.hl, .tg.hl, .ntg.hl, .cg.hl, .eg.hl")
+            .querySelectorAll(".ng.hl, .gg.hl, .tg.hl, .ntg.hl, .cg.hl, .mdg.hl, .eg.hl")
             .forEach((e) => e.classList.remove("hl"));
-        resolveEl(this.svg, target)?.classList.add("hl");
+        for (const el of this._resolveCascadeTargets(target)) {
+            el.classList.add("hl");
+        }
     }
     // ── fade / unfade ─────────────────────────────────────────
     _doFade(target, doFade) {
@@ -9930,8 +10527,8 @@ class AnimationController {
     }
     // ── move ──────────────────────────────────────────────────
     _doMove(target, step, silent) {
-        const el = resolveEl(this.svg, target);
-        if (!el)
+        const targets = this._resolveCascadeTargets(target);
+        if (!targets.length)
             return;
         const cur = this._transforms.get(target) ?? {
             tx: 0,
@@ -9944,12 +10541,14 @@ class AnimationController {
             tx: cur.tx + (step.dx ?? 0),
             ty: cur.ty + (step.dy ?? 0),
         });
-        this._writeTransform(el, target, silent, step.duration ?? 420);
+        for (const el of targets) {
+            this._writeTransform(el, target, silent, step.duration ?? 420);
+        }
     }
     // ── scale ─────────────────────────────────────────────────
     _doScale(target, step, silent) {
-        const el = resolveEl(this.svg, target);
-        if (!el)
+        const targets = this._resolveCascadeTargets(target);
+        if (!targets.length)
             return;
         const cur = this._transforms.get(target) ?? {
             tx: 0,
@@ -9958,12 +10557,14 @@ class AnimationController {
             rotate: 0,
         };
         this._transforms.set(target, { ...cur, scale: step.factor ?? 1 });
-        this._writeTransform(el, target, silent, step.duration ?? 350);
+        for (const el of targets) {
+            this._writeTransform(el, target, silent, step.duration ?? 350);
+        }
     }
     // ── rotate ────────────────────────────────────────────────
     _doRotate(target, step, silent) {
-        const el = resolveEl(this.svg, target);
-        if (!el)
+        const targets = this._resolveCascadeTargets(target);
+        if (!targets.length)
             return;
         const cur = this._transforms.get(target) ?? {
             tx: 0,
@@ -9975,7 +10576,9 @@ class AnimationController {
             ...cur,
             rotate: cur.rotate + (step.deg ?? 0),
         });
-        this._writeTransform(el, target, silent, step.duration ?? 400);
+        for (const el of targets) {
+            this._writeTransform(el, target, silent, step.duration ?? 400);
+        }
     }
     _doDraw(step, silent) {
         const { target } = step;
@@ -10119,18 +10722,20 @@ class AnimationController {
             return;
         }
         // ── Node draw ──────────────────────────────────────
-        const nodeEl = getNodeEl(this.svg, target);
-        if (!nodeEl)
+        const nodeEls = this._resolveCascadeTargets(target).filter((el) => el.classList.contains("ng"));
+        if (!nodeEls.length)
             return;
-        showDrawEl(nodeEl);
-        if (silent) {
-            revealNodeInstant(nodeEl);
-        }
-        else {
-            if (!nodeGuidePathEl(nodeEl) && !nodeEl.querySelector("path")?.style.strokeDasharray) {
-                prepareNodeForDraw(nodeEl);
+        for (const nodeEl of nodeEls) {
+            showDrawEl(nodeEl);
+            if (silent) {
+                revealNodeInstant(nodeEl);
+            }
+            else {
+                if (!nodeGuidePathEl(nodeEl) && !nodeEl.querySelector("path")?.style.strokeDasharray) {
+                    prepareNodeForDraw(nodeEl);
+                }
+                animateNodeDraw(nodeEl, step.duration ?? ANIMATION.nodeStrokeDur, step.duration ?? ANIMATION.textRevealMs);
             }
-            animateNodeDraw(nodeEl, step.duration ?? ANIMATION.nodeStrokeDur, step.duration ?? ANIMATION.textRevealMs);
         }
     }
     // ── erase ─────────────────────────────────────────────────
@@ -10151,45 +10756,44 @@ class AnimationController {
     }
     // ── pulse ─────────────────────────────────────────────────
     _doPulse(target, duration = 500) {
-        resolveEl(this.svg, target)?.animate([
-            { filter: "brightness(1)" },
-            { filter: "brightness(1.6)" },
-            { filter: "brightness(1)" },
-        ], { duration, iterations: 3 });
+        for (const el of this._resolveCascadeTargets(target)) {
+            el.animate([
+                { filter: "brightness(1)" },
+                { filter: "brightness(1.6)" },
+                { filter: "brightness(1)" },
+            ], { duration, iterations: 3 });
+        }
     }
     // ── color ─────────────────────────────────────────────────
     _doColor(target, color) {
         if (!color)
             return;
-        const el = resolveEl(this.svg, target);
-        if (!el)
-            return;
-        // edge — color stroke
-        if (parseEdgeTarget(target)) {
-            el.querySelectorAll("path, line, polyline").forEach((p) => {
-                p.style.stroke = color;
-            });
-            el.querySelectorAll("polygon").forEach((p) => {
-                p.style.fill = color;
-                p.style.stroke = color;
-            });
-            return;
-        }
-        // everything else — color fill
-        let hit = false;
-        el.querySelectorAll("path, rect, ellipse, polygon").forEach((c) => {
-            const attrFill = c.getAttribute("fill");
-            if (attrFill === "none")
-                return;
-            if (attrFill === null && c.tagName === "path")
-                return;
-            c.style.fill = color;
-            hit = true;
-        });
-        if (!hit) {
-            el.querySelectorAll("text").forEach((t) => {
-                t.style.fill = color;
+        for (const el of this._resolveCascadeTargets(target)) {
+            if (parseEdgeTarget(target)) {
+                el.querySelectorAll("path, line, polyline").forEach((p) => {
+                    p.style.stroke = color;
+                });
+                el.querySelectorAll("polygon").forEach((p) => {
+                    p.style.fill = color;
+                    p.style.stroke = color;
+                });
+                continue;
+            }
+            let hit = false;
+            el.querySelectorAll("path, rect, ellipse, polygon").forEach((c) => {
+                const attrFill = c.getAttribute("fill");
+                if (attrFill === "none")
+                    return;
+                if (attrFill === null && c.tagName === "path")
+                    return;
+                c.style.fill = color;
+                hit = true;
             });
+            if (!hit) {
+                el.querySelectorAll("text").forEach((t) => {
+                    t.style.fill = color;
+                });
+            }
         }
     }
     // ── narration ───────────────────────────────────────────
@@ -10783,7 +11387,7 @@ class EventEmitter {
 }
 
 function render(options) {
-    const { container: rawContainer, dsl, renderer = "svg", injectCSS = true, tts, svgOptions = {}, canvasOptions = {}, onNodeClick, onReady, } = options;
+    const { container: rawContainer, dsl, plugins, renderer = "svg", injectCSS = true, tts, svgOptions = {}, canvasOptions = {}, onNodeClick, onReady, } = options;
     if (injectCSS && !document.getElementById("ai-diagram-css")) {
         const style = document.createElement("style");
         style.id = "ai-diagram-css";
@@ -10799,7 +11403,7 @@ function render(options) {
     else {
         el = rawContainer;
     }
-    const ast = parse(dsl);
+    const ast = parse(dsl, { plugins });
     const scene = buildSceneGraph(ast);
     layout(scene);
     let svg;
@@ -11143,6 +11747,7 @@ class SketchmarkCanvas {
             const instance = render({
                 container: this.diagramWrap,
                 dsl: this.dsl,
+                plugins: this.options.plugins,
                 renderer: this.renderer,
                 svgOptions: { interactive: true, showTitle: true, theme: this.options.svgOptions?.theme ?? this.theme, ...this.options.svgOptions },
                 canvasOptions: this.options.canvasOptions,
@@ -12220,6 +12825,7 @@ class SketchmarkEmbed {
             const instance = render({
                 container: this.diagramWrap,
                 dsl: this.dsl,
+                plugins: this.options.plugins,
                 renderer: "svg",
                 svgOptions: {
                     showTitle: true,