sketchmark 1.1.6 → 1.2.1

package/dist/sketchmark.iife.js

@@ -147,10 +147,16 @@ var AIDiagram = (function (exports) {
                             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];
@@ -227,6 +233,47 @@ var AIDiagram = (function (exports) {
         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)
     // ============================================================
@@ -313,9 +360,10 @@ var AIDiagram = (function (exports) {
     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) {
@@ -498,6 +546,7 @@ var AIDiagram = (function (exports) {
             const toks = lineTokens();
             const id = requireExplicitId(keywordTok, toks);
             const props = parseSimpleProps(toks, 1);
+            const meta = extractNodeMeta(props);
             const node = {
                 kind: "node",
                 id,
@@ -512,6 +561,7 @@ var AIDiagram = (function (exports) {
                 ...(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)
@@ -536,12 +586,14 @@ var AIDiagram = (function (exports) {
                 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) } : {}),
@@ -553,6 +605,13 @@ var AIDiagram = (function (exports) {
                 ...(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();
@@ -625,6 +684,8 @@ var AIDiagram = (function (exports) {
                 to: toTok.value,
                 connector: connector,
                 label: props.label,
+                fromAnchor: props["anchor-from"],
+                toAnchor: props["anchor-to"],
                 dashed,
                 bidirectional,
                 style: propsToStyle(props),
@@ -938,6 +999,7 @@ var AIDiagram = (function (exports) {
                 registerAuthoredId(grp.id, "group", t);
                 if (isBare) {
                     grp.label = "";
+                    grp.padding = grp.padding ?? 0;
                     grp.style = {
                         ...grp.style,
                         fill: grp.style?.fill ?? "none",
@@ -1108,7 +1170,7 @@ var AIDiagram = (function (exports) {
                 node.style = { ...ast.styles[node.id], ...node.style };
             }
         }
-        return ast;
+        return applyPluginAstTransforms(ast, options.plugins);
     }
 
     // ============================================================
@@ -3555,6 +3617,8 @@ var AIDiagram = (function (exports) {
             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 ?? {},
@@ -4132,28 +4196,13 @@ var AIDiagram = (function (exports) {
             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) {
@@ -4251,37 +4300,510 @@ var AIDiagram = (function (exports) {
         },
     };
 
+    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;
@@ -4588,6 +5110,50 @@ var AIDiagram = (function (exports) {
         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;
@@ -4619,17 +5185,6 @@ var AIDiagram = (function (exports) {
                 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);
@@ -4639,7 +5194,10 @@ var AIDiagram = (function (exports) {
             }
             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) {
@@ -7780,8 +8338,8 @@ var AIDiagram = (function (exports) {
                 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));
@@ -7857,7 +8415,9 @@ var AIDiagram = (function (exports) {
             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) ──────────
@@ -8511,8 +9071,8 @@ var AIDiagram = (function (exports) {
                 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);
@@ -9369,6 +9929,13 @@ var AIDiagram = (function (exports) {
                     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;
@@ -9399,10 +9966,30 @@ var AIDiagram = (function (exports) {
                 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();
@@ -9481,10 +10068,18 @@ var AIDiagram = (function (exports) {
             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);
@@ -9893,9 +10488,11 @@ var AIDiagram = (function (exports) {
         // ── 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) {
@@ -9931,8 +10528,8 @@ var AIDiagram = (function (exports) {
         }
         // ── 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,
@@ -9945,12 +10542,14 @@ var AIDiagram = (function (exports) {
                 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,
@@ -9959,12 +10558,14 @@ var AIDiagram = (function (exports) {
                 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,
@@ -9976,7 +10577,9 @@ var AIDiagram = (function (exports) {
                 ...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;
@@ -10120,18 +10723,20 @@ var AIDiagram = (function (exports) {
                 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 ─────────────────────────────────────────────────
@@ -10152,45 +10757,44 @@ var AIDiagram = (function (exports) {
         }
         // ── 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 ───────────────────────────────────────────
@@ -10784,7 +11388,7 @@ var AIDiagram = (function (exports) {
     }
 
     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";
@@ -10800,7 +11404,7 @@ var AIDiagram = (function (exports) {
         else {
             el = rawContainer;
         }
-        const ast = parse(dsl);
+        const ast = parse(dsl, { plugins });
         const scene = buildSceneGraph(ast);
         layout(scene);
         let svg;
@@ -11144,6 +11748,7 @@ var AIDiagram = (function (exports) {
                 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,
@@ -12221,6 +12826,7 @@ var AIDiagram = (function (exports) {
                 const instance = render({
                     container: this.diagramWrap,
                     dsl: this.dsl,
+                    plugins: this.options.plugins,
                     renderer: "svg",
                     svgOptions: {
                         showTitle: true,