sketchmark 1.1.5 → 1.2.0

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,
@@ -505,11 +554,14 @@ var AIDiagram = (function (exports) {
                 label: props.label || "",
                 ...(props.width ? { width: parseFloat(props.width) } : {}),
                 ...(props.height ? { height: parseFloat(props.height) } : {}),
+                ...(props.x ? { x: parseFloat(props.x) } : {}),
+                ...(props.y ? { y: parseFloat(props.y) } : {}),
                 ...(props.deg ? { deg: parseFloat(props.deg) } : {}),
                 ...(props.dx ? { dx: parseFloat(props.dx) } : {}),
                 ...(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)
@@ -534,17 +586,32 @@ 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) } : {}),
+                ...(props.x ? { x: parseFloat(props.x) } : {}),
+                ...(props.y ? { y: parseFloat(props.y) } : {}),
+                ...(props.deg ? { deg: parseFloat(props.deg) } : {}),
+                ...(props.dx ? { dx: parseFloat(props.dx) } : {}),
+                ...(props.dy ? { dy: parseFloat(props.dy) } : {}),
+                ...(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();
@@ -582,6 +649,8 @@ var AIDiagram = (function (exports) {
                 justify: props.justify,
                 theme: props.theme,
                 style: propsToStyle(props),
+                x: props.x !== undefined ? parseFloat(props.x) : undefined,
+                y: props.y !== undefined ? parseFloat(props.y) : undefined,
                 width: props.width !== undefined ? parseFloat(props.width) : undefined,
                 height: props.height !== undefined ? parseFloat(props.height) : undefined,
             };
@@ -615,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),
@@ -753,6 +824,8 @@ var AIDiagram = (function (exports) {
                 chartType: chartType.replace("-chart", ""),
                 label: props.label ?? props.title,
                 data: { headers, rows },
+                x: props.x ? parseFloat(props.x) : undefined,
+                y: props.y ? parseFloat(props.y) : undefined,
                 width: props.width ? parseFloat(props.width) : undefined,
                 height: props.height ? parseFloat(props.height) : undefined,
                 theme: props.theme,
@@ -778,6 +851,8 @@ var AIDiagram = (function (exports) {
                 id,
                 label: props.label ?? "",
                 rows: [],
+                x: props.x ? parseFloat(props.x) : undefined,
+                y: props.y ? parseFloat(props.y) : undefined,
                 theme: props.theme,
                 style: propsToStyle(props),
             };
@@ -833,6 +908,8 @@ var AIDiagram = (function (exports) {
                 kind: "markdown",
                 id,
                 content: content.trim(),
+                x: props.x ? parseFloat(props.x) : undefined,
+                y: props.y ? parseFloat(props.y) : undefined,
                 width: props.width ? parseFloat(props.width) : undefined,
                 height: props.height ? parseFloat(props.height) : undefined,
                 theme: props.theme,
@@ -922,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",
@@ -1092,7 +1170,7 @@ var AIDiagram = (function (exports) {
                 node.style = { ...ast.styles[node.id], ...node.style };
             }
         }
-        return ast;
+        return applyPluginAstTransforms(ast, options.plugins);
     }
 
     // ============================================================
@@ -3441,6 +3519,8 @@ var AIDiagram = (function (exports) {
                 groupId: nodeParentById.get(n.id),
                 width: n.width,
                 height: n.height,
+                authoredX: n.x,
+                authoredY: n.y,
                 deg: n.deg,
                 dx: n.dx,
                 dy: n.dy,
@@ -3469,6 +3549,8 @@ var AIDiagram = (function (exports) {
                 align: (g.align ?? "start"),
                 justify: (g.justify ?? "start"),
                 style: { ...ast.styles[g.id], ...themeStyle, ...g.style },
+                authoredX: g.x,
+                authoredY: g.y,
                 width: g.width,
                 height: g.height,
                 x: 0,
@@ -3488,6 +3570,8 @@ var AIDiagram = (function (exports) {
                 headerH: TABLE.headerH,
                 labelH: TABLE.labelH,
                 style: { ...ast.styles[t.id], ...themeStyle, ...t.style },
+                authoredX: t.x,
+                authoredY: t.y,
                 x: 0,
                 y: 0,
                 w: 0,
@@ -3502,6 +3586,8 @@ var AIDiagram = (function (exports) {
                 label: c.label,
                 data: c.data,
                 style: { ...ast.styles[c.id], ...themeStyle, ...c.style },
+                authoredX: c.x,
+                authoredY: c.y,
                 x: 0,
                 y: 0,
                 w: c.width ?? CHART.defaultW,
@@ -3517,6 +3603,8 @@ var AIDiagram = (function (exports) {
                 style: { ...ast.styles[m.id], ...themeStyle, ...m.style },
                 width: m.width,
                 height: m.height,
+                authoredX: m.x,
+                authoredY: m.y,
                 x: 0,
                 y: 0,
                 w: 0,
@@ -3529,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 ?? {},
@@ -4106,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) {
@@ -4364,6 +4439,12 @@ var AIDiagram = (function (exports) {
     function iH(r, em) {
         return em.get(r.id).h;
     }
+    function iAuthX(r, em) {
+        return em.get(r.id).authoredX ?? 0;
+    }
+    function iAuthY(r, em) {
+        return em.get(r.id).authoredY ?? 0;
+    }
     function setPos(r, x, y, em) {
         const e = em.get(r.id);
         e.x = Math.round(x);
@@ -4410,6 +4491,12 @@ var AIDiagram = (function (exports) {
             g.w = cols * cellW + (cols - 1) * gap + pad * 2;
             g.h = rows * cellH + (rows - 1) * gap + pad * 2 + labelH;
         }
+        else if (layout === "absolute") {
+            const maxRight = Math.max(0, ...kids.map((r) => iAuthX(r, em) + iW(r, em)));
+            const maxBottom = Math.max(0, ...kids.map((r) => iAuthY(r, em) + iH(r, em)));
+            g.w = maxRight + pad * 2;
+            g.h = maxBottom + pad * 2 + labelH;
+        }
         else {
             // column (default)
             g.w = Math.max(...ws) + pad * 2;
@@ -4500,6 +4587,11 @@ var AIDiagram = (function (exports) {
                 setPos(ref, contentX + (i % cols) * (cellW + gap), contentY + Math.floor(i / cols) * (cellH + gap), em);
             });
         }
+        else if (layout === "absolute") {
+            kids.forEach((ref) => {
+                setPos(ref, contentX + iAuthX(ref, em), contentY + iAuthY(ref, em), em);
+            });
+        }
         else {
             // column (default)
             const ws = kids.map((r) => iW(r, em));
@@ -4545,6 +4637,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;
@@ -4576,17 +4712,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);
@@ -4596,7 +4721,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) {
@@ -4682,6 +4810,7 @@ var AIDiagram = (function (exports) {
         const rootCols = Number(sg.config["columns"] ?? 1);
         const useGrid = rootLayout === "grid" && rootCols > 0;
         const useColumn = rootLayout === "column";
+        const useAbsolute = rootLayout === "absolute";
         if (useGrid) {
             // ── Grid: per-row heights, per-column widths (no wasted space) ──
             const cols = rootCols;
@@ -4713,6 +4842,13 @@ var AIDiagram = (function (exports) {
                 e.y = rowY[Math.floor(idx / cols)];
             });
         }
+        else if (useAbsolute) {
+            for (const ref of rootOrder) {
+                const e = em.get(ref.id);
+                e.x = MARGIN + (e.authoredX ?? 0);
+                e.y = MARGIN + (e.authoredY ?? 0);
+            }
+        }
         else {
             // ── Row or Column linear flow ──────────────────────────
             let pos = MARGIN;
@@ -7729,8 +7865,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));
@@ -7807,6 +7943,8 @@ var AIDiagram = (function (exports) {
             ng.dataset.h = String(n.h);
             if (n.pathData)
                 ng.dataset.pathData = 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) ──────────
@@ -8460,8 +8598,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);
@@ -9318,6 +9456,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;
@@ -9348,10 +9493,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();
@@ -9430,10 +9595,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);
@@ -9842,9 +10015,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) {
@@ -9880,8 +10055,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,
@@ -9894,12 +10069,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,
@@ -9908,12 +10085,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,
@@ -9925,7 +10104,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;
@@ -10069,18 +10250,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 ─────────────────────────────────────────────────
@@ -10101,45 +10284,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 ───────────────────────────────────────────
@@ -10733,7 +10915,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";
@@ -10749,7 +10931,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;
@@ -11093,6 +11275,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,
@@ -12170,6 +12353,7 @@ var AIDiagram = (function (exports) {
                 const instance = render({
                     container: this.diagramWrap,
                     dsl: this.dsl,
+                    plugins: this.options.plugins,
                     renderer: "svg",
                     svgOptions: {
                         showTitle: true,