orcasvn-react-diagrams 0.2.4 → 0.2.5

package/dist/cjs/examples.js

@@ -82,6 +82,454 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+var DEFAULT_PADDING = 12;
+var DEFAULT_TOLERANCE = 0.5;
+var DEFAULT_STUB_LENGTH = 12;
+var shrinkRect = function (rect, amount) {
+    var width = rect.width - amount * 2;
+    var height = rect.height - amount * 2;
+    if (width <= 0 || height <= 0)
+        return null;
+    return {
+        x: rect.x + amount,
+        y: rect.y + amount,
+        width: width,
+        height: height,
+    };
+};
+var segmentIntersectsRect = function (start, end, rect) {
+    var dx = end.x - start.x;
+    var dy = end.y - start.y;
+    var p = [-dx, dx, -dy, dy];
+    var q = [
+        start.x - rect.x,
+        rect.x + rect.width - start.x,
+        start.y - rect.y,
+        rect.y + rect.height - start.y,
+    ];
+    var t0 = 0;
+    var t1 = 1;
+    for (var i = 0; i < 4; i += 1) {
+        var pi = p[i];
+        var qi = q[i];
+        if (pi === 0) {
+            if (qi < 0)
+                return false;
+        }
+        else {
+            var r = qi / pi;
+            if (pi < 0) {
+                if (r > t1)
+                    return false;
+                if (r > t0)
+                    t0 = r;
+            }
+            else {
+                if (r < t0)
+                    return false;
+                if (r < t1)
+                    t1 = r;
+            }
+        }
+    }
+    return true;
+};
+var segmentIntersectsRectInterior = function (start, end, rect, tolerance) {
+    var inner = shrinkRect(rect, tolerance);
+    if (!inner)
+        return false;
+    return segmentIntersectsRect(start, end, inner);
+};
+var pointWithinRect = function (point, rect, tolerance) {
+    return (point.x >= rect.x - tolerance &&
+        point.x <= rect.x + rect.width + tolerance &&
+        point.y >= rect.y - tolerance &&
+        point.y <= rect.y + rect.height + tolerance);
+};
+var compactPath = function (points) {
+    var deduped = [];
+    points.forEach(function (point) {
+        var last = deduped[deduped.length - 1];
+        if (!last || last.x !== point.x || last.y !== point.y) {
+            deduped.push(point);
+        }
+    });
+    if (deduped.length < 3)
+        return deduped;
+    var compacted = [deduped[0]];
+    for (var i = 1; i < deduped.length; i += 1) {
+        var prev = compacted[compacted.length - 1];
+        var next = deduped[i];
+        var beforePrev = compacted[compacted.length - 2];
+        if (beforePrev &&
+            ((beforePrev.x === prev.x && prev.x === next.x) || (beforePrev.y === prev.y && prev.y === next.y))) {
+            compacted[compacted.length - 1] = next;
+        }
+        else {
+            compacted.push(next);
+        }
+    }
+    return compacted;
+};
+var pathLength = function (points) {
+    var total = 0;
+    for (var i = 1; i < points.length; i += 1) {
+        var dx = points[i].x - points[i - 1].x;
+        var dy = points[i].y - points[i - 1].y;
+        total += Math.sqrt(dx * dx + dy * dy);
+    }
+    return total;
+};
+var clamp$1 = function (value, min, max) { return Math.max(min, Math.min(max, value)); };
+var ObstacleRouter = /** @class */ (function () {
+    function ObstacleRouter(options) {
+        var _a, _b, _c;
+        this.padding = (_a = options === null || options === void 0 ? void 0 : options.padding) !== null && _a !== void 0 ? _a : DEFAULT_PADDING;
+        this.tolerance = (_b = options === null || options === void 0 ? void 0 : options.tolerance) !== null && _b !== void 0 ? _b : DEFAULT_TOLERANCE;
+        this.stubLength = (_c = options === null || options === void 0 ? void 0 : options.stubLength) !== null && _c !== void 0 ? _c : DEFAULT_STUB_LENGTH;
+    }
+    ObstacleRouter.prototype.route = function (source, target, context) {
+        var _a;
+        var obstacles = (_a = context === null || context === void 0 ? void 0 : context.obstacles) !== null && _a !== void 0 ? _a : [];
+        var bounds = context === null || context === void 0 ? void 0 : context.bounds;
+        var sourceStub = this.computeStubEndpoint(source, context === null || context === void 0 ? void 0 : context.sourceEndpoint, bounds, obstacles);
+        var targetStub = this.computeStubEndpoint(target, context === null || context === void 0 ? void 0 : context.targetEndpoint, bounds, obstacles);
+        var innerSource = sourceStub !== null && sourceStub !== void 0 ? sourceStub : source;
+        var innerTarget = targetStub !== null && targetStub !== void 0 ? targetStub : target;
+        var core = this.routeBetween(innerSource, innerTarget, obstacles, bounds, context);
+        var normalizedCore = this.ensureEndpoints(core, innerSource, innerTarget);
+        var middle = normalizedCore.slice(1, -1).map(function (p) { return (__assign({}, p)); });
+        var result = [__assign({}, source)];
+        var hasSourceStub = Boolean(sourceStub);
+        var hasTargetStub = Boolean(targetStub);
+        if (hasSourceStub && sourceStub) {
+            result.push(__assign({}, sourceStub));
+        }
+        result.push.apply(result, middle);
+        if (hasTargetStub && targetStub) {
+            result.push(__assign({}, targetStub));
+        }
+        result.push(__assign({}, target));
+        return this.compactPreservingStubs(result, hasSourceStub, hasTargetStub);
+    };
+    ObstacleRouter.prototype.buildCandidates = function (source, target, obstacles, context) {
+        var _this = this;
+        var midXValues = new Set();
+        var midYValues = new Set();
+        midXValues.add(Math.round((source.x + target.x) / 2));
+        midXValues.add(source.x);
+        midXValues.add(target.x);
+        midYValues.add(Math.round((source.y + target.y) / 2));
+        midYValues.add(source.y);
+        midYValues.add(target.y);
+        obstacles.forEach(function (obstacle) {
+            midXValues.add(obstacle.rect.x - _this.padding);
+            midXValues.add(obstacle.rect.x + obstacle.rect.width + _this.padding);
+            midYValues.add(obstacle.rect.y - _this.padding);
+            midYValues.add(obstacle.rect.y + obstacle.rect.height + _this.padding);
+        });
+        var candidates = [];
+        midXValues.forEach(function (midX) {
+            var path = compactPath([
+                __assign({}, source),
+                { x: midX, y: source.y },
+                { x: midX, y: target.y },
+                __assign({}, target),
+            ]);
+            candidates.push(path);
+        });
+        midYValues.forEach(function (midY) {
+            var path = compactPath([
+                __assign({}, source),
+                { x: source.x, y: midY },
+                { x: target.x, y: midY },
+                __assign({}, target),
+            ]);
+            candidates.push(path);
+        });
+        var corridorCandidate = this.buildCommonAncestorCorridorCandidate(source, target, context === null || context === void 0 ? void 0 : context.commonAncestorCorridor);
+        if (corridorCandidate) {
+            candidates.push(corridorCandidate);
+        }
+        return candidates;
+    };
+    ObstacleRouter.prototype.routeBetween = function (source, target, obstacles, bounds, context) {
+        var _this = this;
+        var direct = compactPath([__assign({}, source), __assign({}, target)]);
+        var hasCommonAncestorCorridor = Boolean(context === null || context === void 0 ? void 0 : context.commonAncestorCorridor);
+        if (!hasCommonAncestorCorridor && obstacles.length === 0 && (!bounds || this.pointsWithinBounds(direct, bounds))) {
+            return direct;
+        }
+        if (!hasCommonAncestorCorridor && this.isPathClear(direct, obstacles, bounds)) {
+            return direct;
+        }
+        var candidates = this.buildCandidates(source, target, obstacles, context);
+        var best = null;
+        var bestPenalty = Number.POSITIVE_INFINITY;
+        var bestCorridorSpan = Number.NEGATIVE_INFINITY;
+        var bestLength = Number.POSITIVE_INFINITY;
+        candidates.forEach(function (candidate) {
+            if (!_this.isPathClear(candidate, obstacles, bounds))
+                return;
+            var scored = _this.scoreCommonAncestorCorridor(candidate, context === null || context === void 0 ? void 0 : context.commonAncestorCorridor, source, target);
+            var length = pathLength(candidate);
+            if (scored.penalty < bestPenalty ||
+                (scored.penalty === bestPenalty && scored.corridorSpan > bestCorridorSpan) ||
+                (scored.penalty === bestPenalty && scored.corridorSpan === bestCorridorSpan && length < bestLength)) {
+                best = candidate;
+                bestPenalty = scored.penalty;
+                bestCorridorSpan = scored.corridorSpan;
+                bestLength = length;
+            }
+        });
+        return best !== null && best !== void 0 ? best : direct;
+    };
+    ObstacleRouter.prototype.pointsWithinBounds = function (points, bounds) {
+        var _this = this;
+        return points.every(function (point) { return pointWithinRect(point, bounds, _this.tolerance); });
+    };
+    ObstacleRouter.prototype.isPathClear = function (points, obstacles, bounds) {
+        if (points.length < 2)
+            return true;
+        if (bounds && !this.pointsWithinBounds(points, bounds))
+            return false;
+        for (var i = 1; i < points.length; i += 1) {
+            var start = points[i - 1];
+            var end = points[i];
+            if (start.x === end.x && start.y === end.y)
+                continue;
+            for (var j = 0; j < obstacles.length; j += 1) {
+                if (segmentIntersectsRectInterior(start, end, obstacles[j].rect, this.tolerance)) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    };
+    ObstacleRouter.prototype.computeStubEndpoint = function (point, endpoint, bounds, obstacles) {
+        if (!(endpoint === null || endpoint === void 0 ? void 0 : endpoint.onEdgeSide) || !endpoint.rect)
+            return null;
+        var outwardNormal = this.getNormal(endpoint.onEdgeSide);
+        var selectedNormal = outwardNormal;
+        var maxLength = this.computeAvailableStubLength(point, outwardNormal, bounds, obstacles, endpoint.elementId);
+        // If the outward normal is fully blocked by route bounds on the endpoint host, fall back inward
+        // to preserve a visible perpendicular stub for bounded parent-child routes.
+        if (maxLength <= this.tolerance && bounds && this.rectsEqual(bounds, endpoint.rect)) {
+            var inwardNormal = { x: -outwardNormal.x, y: -outwardNormal.y };
+            var inwardLength = this.computeAvailableStubLength(point, inwardNormal, bounds, obstacles, endpoint.elementId);
+            if (inwardLength > maxLength) {
+                selectedNormal = inwardNormal;
+                maxLength = inwardLength;
+            }
+        }
+        if (maxLength <= 0)
+            return null;
+        return {
+            x: point.x + selectedNormal.x * maxLength,
+            y: point.y + selectedNormal.y * maxLength,
+        };
+    };
+    ObstacleRouter.prototype.computeAvailableStubLength = function (point, normal, bounds, obstacles, ignoreId) {
+        var maxLength = this.stubLength;
+        if (bounds) {
+            maxLength = Math.min(maxLength, this.distanceToBounds(point, normal, bounds));
+        }
+        var obstacleLimit = this.distanceToObstacles(point, normal, obstacles, ignoreId);
+        if (obstacleLimit !== null) {
+            maxLength = Math.min(maxLength, obstacleLimit);
+        }
+        return maxLength;
+    };
+    ObstacleRouter.prototype.rectsEqual = function (a, b) {
+        return (Math.abs(a.x - b.x) <= this.tolerance &&
+            Math.abs(a.y - b.y) <= this.tolerance &&
+            Math.abs(a.width - b.width) <= this.tolerance &&
+            Math.abs(a.height - b.height) <= this.tolerance);
+    };
+    ObstacleRouter.prototype.getNormal = function (side) {
+        switch (side) {
+            case 'left':
+                return { x: -1, y: 0 };
+            case 'right':
+                return { x: 1, y: 0 };
+            case 'top':
+                return { x: 0, y: -1 };
+            case 'bottom':
+            default:
+                return { x: 0, y: 1 };
+        }
+    };
+    ObstacleRouter.prototype.distanceToBounds = function (point, normal, bounds) {
+        if (normal.x < 0) {
+            return Math.max(0, point.x - bounds.x);
+        }
+        if (normal.x > 0) {
+            return Math.max(0, bounds.x + bounds.width - point.x);
+        }
+        if (normal.y < 0) {
+            return Math.max(0, point.y - bounds.y);
+        }
+        return Math.max(0, bounds.y + bounds.height - point.y);
+    };
+    ObstacleRouter.prototype.distanceToObstacles = function (point, normal, obstacles, ignoreId) {
+        var _this = this;
+        var limit = Number.POSITIVE_INFINITY;
+        var overlapsHorizontally = function (rect) {
+            return point.y >= rect.y - _this.tolerance && point.y <= rect.y + rect.height + _this.tolerance;
+        };
+        var overlapsVertically = function (rect) {
+            return point.x >= rect.x - _this.tolerance && point.x <= rect.x + rect.width + _this.tolerance;
+        };
+        obstacles.forEach(function (obstacle) {
+            if (ignoreId && obstacle.id === ignoreId)
+                return;
+            var rect = obstacle.rect;
+            if (normal.x < 0 && overlapsHorizontally(rect) && rect.x + rect.width <= point.x) {
+                var available = point.x - (rect.x + rect.width + _this.tolerance);
+                if (available < limit)
+                    limit = available;
+            }
+            else if (normal.x > 0 && overlapsHorizontally(rect) && rect.x >= point.x) {
+                var available = rect.x - _this.tolerance - point.x;
+                if (available < limit)
+                    limit = available;
+            }
+            else if (normal.y < 0 && overlapsVertically(rect) && rect.y + rect.height <= point.y) {
+                var available = point.y - (rect.y + rect.height + _this.tolerance);
+                if (available < limit)
+                    limit = available;
+            }
+            else if (normal.y > 0 && overlapsVertically(rect) && rect.y >= point.y) {
+                var available = rect.y - _this.tolerance - point.y;
+                if (available < limit)
+                    limit = available;
+            }
+        });
+        if (!Number.isFinite(limit))
+            return null;
+        return Math.max(0, limit);
+    };
+    ObstacleRouter.prototype.ensureEndpoints = function (points, source, target) {
+        if (points.length === 0)
+            return [__assign({}, source), __assign({}, target)];
+        var result = __spreadArray([], points, true);
+        if (result.length === 1) {
+            result.unshift(__assign({}, source));
+            result.push(__assign({}, target));
+            return result;
+        }
+        if (result[0].x !== source.x || result[0].y !== source.y) {
+            result.unshift(__assign({}, source));
+        }
+        var last = result[result.length - 1];
+        if (last.x !== target.x || last.y !== target.y) {
+            result.push(__assign({}, target));
+        }
+        return result;
+    };
+    ObstacleRouter.prototype.compactPreservingStubs = function (points, hasSourceStub, hasTargetStub) {
+        if (points.length <= 2)
+            return points.map(function (p) { return (__assign({}, p)); });
+        var deduped = [];
+        points.forEach(function (point) {
+            var last = deduped[deduped.length - 1];
+            if (!last || last.x !== point.x || last.y !== point.y) {
+                deduped.push(point);
+            }
+        });
+        if (deduped.length < 3)
+            return deduped.map(function (p) { return (__assign({}, p)); });
+        var result = [deduped[0]];
+        for (var i = 1; i < deduped.length - 1; i += 1) {
+            var prev = result[result.length - 1];
+            var current = deduped[i];
+            var next = deduped[i + 1];
+            var isFirstTurn = hasSourceStub && result.length === 1;
+            var isLastTurn = hasTargetStub && i === deduped.length - 2;
+            var collinear = (prev.x === current.x && current.x === next.x) || (prev.y === current.y && current.y === next.y);
+            if (collinear && !isFirstTurn && !isLastTurn) {
+                continue;
+            }
+            result.push(current);
+        }
+        result.push(deduped[deduped.length - 1]);
+        return result.map(function (p) { return (__assign({}, p)); });
+    };
+    ObstacleRouter.prototype.buildCommonAncestorCorridorCandidate = function (source, target, corridor) {
+        if (!corridor)
+            return null;
+        if (corridor.axis === 'horizontal') {
+            var direction_1 = source.x <= target.x ? 1 : -1;
+            var corridorY = clamp$1((source.y + target.y) / 2, corridor.bounds.y + this.padding, corridor.bounds.y + corridor.bounds.height - this.padding);
+            var sourceExitX = direction_1 > 0
+                ? corridor.sourceBranchRect.x + corridor.sourceBranchRect.width + this.padding
+                : corridor.sourceBranchRect.x - this.padding;
+            var targetEntryX = direction_1 > 0
+                ? corridor.targetBranchRect.x - this.padding
+                : corridor.targetBranchRect.x + corridor.targetBranchRect.width + this.padding;
+            return compactPath([
+                __assign({}, source),
+                { x: sourceExitX, y: source.y },
+                { x: sourceExitX, y: corridorY },
+                { x: targetEntryX, y: corridorY },
+                { x: targetEntryX, y: target.y },
+                __assign({}, target),
+            ]);
+        }
+        var direction = source.y <= target.y ? 1 : -1;
+        var corridorX = clamp$1((source.x + target.x) / 2, corridor.bounds.x + this.padding, corridor.bounds.x + corridor.bounds.width - this.padding);
+        var sourceExitY = direction > 0
+            ? corridor.sourceBranchRect.y + corridor.sourceBranchRect.height + this.padding
+            : corridor.sourceBranchRect.y - this.padding;
+        var targetEntryY = direction > 0
+            ? corridor.targetBranchRect.y - this.padding
+            : corridor.targetBranchRect.y + corridor.targetBranchRect.height + this.padding;
+        return compactPath([
+            __assign({}, source),
+            { x: source.x, y: sourceExitY },
+            { x: corridorX, y: sourceExitY },
+            { x: corridorX, y: targetEntryY },
+            { x: target.x, y: targetEntryY },
+            __assign({}, target),
+        ]);
+    };
+    ObstacleRouter.prototype.scoreCommonAncestorCorridor = function (candidate, corridor, source, target) {
+        if (!corridor || candidate.length < 3) {
+            return { penalty: 0, corridorSpan: 0 };
+        }
+        var firstTurn = candidate[1];
+        var lastTurn = candidate[candidate.length - 2];
+        var penalty = 0;
+        var corridorSpan = 0;
+        if (corridor.axis === 'horizontal') {
+            var direction = source.x <= target.x ? 1 : -1;
+            var sourceBoundary = direction > 0 ? corridor.sourceBranchRect.x + corridor.sourceBranchRect.width : corridor.sourceBranchRect.x;
+            var targetBoundary = direction > 0 ? corridor.targetBranchRect.x : corridor.targetBranchRect.x + corridor.targetBranchRect.width;
+            var sourceExited = direction > 0 ? firstTurn.x > sourceBoundary + this.tolerance : firstTurn.x < sourceBoundary - this.tolerance;
+            var targetDeferred = direction > 0 ? lastTurn.x < targetBoundary - this.tolerance : lastTurn.x > targetBoundary + this.tolerance;
+            if (!sourceExited)
+                penalty += 1000;
+            if (!targetDeferred)
+                penalty += 1000;
+            corridorSpan = Math.abs(lastTurn.x - firstTurn.x);
+        }
+        else {
+            var direction = source.y <= target.y ? 1 : -1;
+            var sourceBoundary = direction > 0 ? corridor.sourceBranchRect.y + corridor.sourceBranchRect.height : corridor.sourceBranchRect.y;
+            var targetBoundary = direction > 0 ? corridor.targetBranchRect.y : corridor.targetBranchRect.y + corridor.targetBranchRect.height;
+            var sourceExited = direction > 0 ? firstTurn.y > sourceBoundary + this.tolerance : firstTurn.y < sourceBoundary - this.tolerance;
+            var targetDeferred = direction > 0 ? lastTurn.y < targetBoundary - this.tolerance : lastTurn.y > targetBoundary + this.tolerance;
+            if (!sourceExited)
+                penalty += 1000;
+            if (!targetDeferred)
+                penalty += 1000;
+            corridorSpan = Math.abs(lastTurn.y - firstTurn.y);
+        }
+        return { penalty: penalty, corridorSpan: corridorSpan };
+    };
+    return ObstacleRouter;
+}());
+
 var baseElementShapes = [
     {
         id: 'default',
@@ -211,8 +659,13 @@ var externalToolboxItems = [
 var defaultGhostSize = { width: 180, height: 120 };
 var defaultSvgPath = 'M10 10 H110 V90 H10 Z';
 var defaultSvgPathSize = { width: 180, height: 120 };
+var obstacleAwareRouter = new ObstacleRouter();
 var orthogonalRouter = {
-    route: function (source, target) {
+    route: function (source, target, context) {
+        var _a, _b;
+        if (((_b = (_a = context === null || context === void 0 ? void 0 : context.obstacles) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0) {
+            return obstacleAwareRouter.route(source, target, context);
+        }
         if (Math.abs(source.x - target.x) < 1 || Math.abs(source.y - target.y) < 1) {
             return [__assign({}, source), __assign({}, target)];
         }
@@ -816,6 +1269,27 @@ var createAutoLayoutState = function () { return ({
         { id: 'col-a', position: { x: 0, y: 0 }, size: { width: 44, height: 28 }, shapeId: 'default', parentId: 'layout-column' },
         { id: 'col-b', position: { x: 0, y: 0 }, size: { width: 70, height: 36 }, shapeId: 'default', parentId: 'layout-column' },
         { id: 'col-c', position: { x: 0, y: 0 }, size: { width: 92, height: 44 }, shapeId: 'default', parentId: 'layout-column' },
+        {
+            id: 'layout-grid',
+            position: { x: 620, y: 70 },
+            size: { width: 160, height: 110 },
+            shapeId: 'panel',
+            layout: {
+                mode: 'grid',
+                padding: { x: 10, y: 10 },
+                gap: 10,
+                align: 'center',
+                autoResize: 'grow-shrink',
+                gridTemplate: [[3], [1, 2]],
+                childMinWidth: 24,
+                childMinHeight: 18,
+            },
+        },
+        { id: 'grid-a', position: { x: 0, y: 0 }, size: { width: 36, height: 26 }, shapeId: 'default', parentId: 'layout-grid' },
+        { id: 'grid-b', position: { x: 0, y: 0 }, size: { width: 44, height: 24 }, shapeId: 'default', parentId: 'layout-grid' },
+        { id: 'grid-c', position: { x: 0, y: 0 }, size: { width: 50, height: 20 }, shapeId: 'default', parentId: 'layout-grid' },
+        { id: 'grid-d', position: { x: 0, y: 0 }, size: { width: 28, height: 30 }, shapeId: 'default', parentId: 'layout-grid' },
+        { id: 'grid-e', position: { x: 0, y: 0 }, size: { width: 52, height: 28 }, shapeId: 'default', parentId: 'layout-grid' },
         {
             id: 'layout-nested',
             position: { x: 120, y: 260 },
@@ -874,6 +1348,18 @@ var createAutoLayoutState = function () { return ({
         { id: 'label-col-a', content: 'col-a', position: { x: 6, y: -14 }, ownerId: 'col-a' },
         { id: 'label-col-b', content: 'col-b', position: { x: 6, y: -14 }, ownerId: 'col-b' },
         { id: 'label-col-c', content: 'col-c', position: { x: 6, y: -14 }, ownerId: 'col-c' },
+        {
+            id: 'label-layout-grid',
+            content: 'Grid template [[3],[1,2]]',
+            position: { x: 8, y: 6 },
+            ownerId: 'layout-grid',
+            layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
+        },
+        { id: 'label-grid-a', content: 'grid-a', position: { x: 6, y: -14 }, ownerId: 'grid-a' },
+        { id: 'label-grid-b', content: 'grid-b', position: { x: 6, y: -14 }, ownerId: 'grid-b' },
+        { id: 'label-grid-c', content: 'grid-c', position: { x: 6, y: -14 }, ownerId: 'grid-c' },
+        { id: 'label-grid-d', content: 'grid-d', position: { x: 6, y: -14 }, ownerId: 'grid-d' },
+        { id: 'label-grid-e', content: 'grid-e', position: { x: 6, y: -14 }, ownerId: 'grid-e' },
         {
             id: 'label-layout-nested',
             content: 'Row + nested column lane',
@@ -894,7 +1380,7 @@ var createAutoLayoutState = function () { return ({
 var autoLayoutDemoConfig = ({
     id: 'auto-layout',
     title: 'Element Auto-Layout + Label Lane',
-    description: 'Consolidated auto-layout verification with baseline/nested containers, fit options, and label reserved-space modes.',
+    description: 'Consolidated auto-layout verification with horizontal/vertical/grid containers, fit options, auto-resize policies, and label reserved-space modes.',
     createState: createAutoLayoutState,
     elementShapes: baseElementShapes,
     portShapes: basePortShapes,
@@ -2432,6 +2918,122 @@ var labelStyleDemoConfig = {
     ],
 };
 
+var createLinkColorPoolState = function () { return ({
+    elements: [
+        {
+            id: 'lc-off-source',
+            position: { x: 80, y: 170 },
+            size: { width: 190, height: 120 },
+            shapeId: 'default',
+        },
+        {
+            id: 'lc-off-target',
+            position: { x: 350, y: 170 },
+            size: { width: 190, height: 120 },
+            shapeId: 'default',
+        },
+        {
+            id: 'lc-default-source',
+            position: { x: 80, y: 360 },
+            size: { width: 190, height: 120 },
+            shapeId: 'panel',
+        },
+        {
+            id: 'lc-default-target',
+            position: { x: 350, y: 360 },
+            size: { width: 190, height: 120 },
+            shapeId: 'panel',
+        },
+        {
+            id: 'lc-custom-source',
+            position: { x: 620, y: 170 },
+            size: { width: 190, height: 120 },
+            shapeId: 'default',
+        },
+        {
+            id: 'lc-custom-target',
+            position: { x: 620, y: 360 },
+            size: { width: 190, height: 120 },
+            shapeId: 'default',
+        },
+    ],
+    ports: [
+        { id: 'lc-off-source-port', elementId: 'lc-off-source', position: { x: 170, y: 60 }, shapeId: 'port-circle' },
+        { id: 'lc-off-target-port', elementId: 'lc-off-target', position: { x: 20, y: 60 }, shapeId: 'port-circle' },
+        { id: 'lc-default-source-port', elementId: 'lc-default-source', position: { x: 170, y: 60 }, shapeId: 'port-circle' },
+        { id: 'lc-default-target-port', elementId: 'lc-default-target', position: { x: 20, y: 60 }, shapeId: 'port-circle' },
+        { id: 'lc-custom-source-port', elementId: 'lc-custom-source', position: { x: 95, y: 110 }, shapeId: 'port-circle' },
+        { id: 'lc-custom-target-port', elementId: 'lc-custom-target', position: { x: 95, y: 10 }, shapeId: 'port-circle' },
+    ],
+    links: [
+        {
+            id: 'lc-reference-link',
+            sourcePortId: 'lc-off-source-port',
+            targetPortId: 'lc-off-target-port',
+            points: [],
+            style: { stroke: '#374151', strokeWidth: 2 },
+        },
+    ],
+    texts: [
+        {
+            id: 'lc-intro',
+            content: 'Use Color Mode above: Off keeps baseline link color behavior. Default Pool enables random colors from the built-in 20-color pool. Custom Pool restricts random colors to #0b7285, #e8590c, #5f3dc4.',
+            position: { x: 80, y: 86 },
+        },
+        { id: 'lc-off-label', content: 'Off scenario pair', ownerId: 'lc-off-source', position: { x: 10, y: -16 } },
+        { id: 'lc-default-label', content: 'Default-pool scenario pair', ownerId: 'lc-default-source', position: { x: 10, y: -16 } },
+        { id: 'lc-custom-label', content: 'Custom-pool scenario pair', ownerId: 'lc-custom-source', position: { x: 10, y: -16 } },
+    ],
+}); };
+var linkColorPoolDemoConfig = {
+    id: 'link-color-pool',
+    title: 'Link Color Pool',
+    description: 'Verify disabled/default/custom random link-color assignment on new links.',
+    createState: createLinkColorPoolState,
+    elementShapes: baseElementShapes,
+    portShapes: basePortShapes,
+    defaultElementShapeId: 'default',
+    defaultPortShapeId: 'port-circle',
+    actions: [
+        {
+            id: 'add-link-off-pair',
+            label: 'Add link (off pair)',
+            run: function (editor) {
+                editor.addLink({
+                    id: "link-color-off-".concat(createId()),
+                    sourcePortId: 'lc-off-source-port',
+                    targetPortId: 'lc-off-target-port',
+                    points: [],
+                });
+            },
+        },
+        {
+            id: 'add-link-default-pair',
+            label: 'Add link (default pair)',
+            run: function (editor) {
+                editor.addLink({
+                    id: "link-color-default-".concat(createId()),
+                    sourcePortId: 'lc-default-source-port',
+                    targetPortId: 'lc-default-target-port',
+                    points: [],
+                });
+            },
+        },
+        {
+            id: 'add-link-custom-pair',
+            label: 'Add link (custom pair)',
+            run: function (editor) {
+                editor.addLink({
+                    id: "link-color-custom-".concat(createId()),
+                    sourcePortId: 'lc-custom-source-port',
+                    targetPortId: 'lc-custom-target-port',
+                    points: [],
+                });
+            },
+        },
+    ],
+};
+
 var createGridOverlayState = function () { return ({
     elements: [
         {
@@ -2521,7 +3123,7 @@ var createRoutingDemoState = function () { return ({
 var routingDemoConfig = ({
     id: 'routing-demo',
     title: 'Routing Demo',
-    description: 'Auto routing uses an orthogonal router. Toggle routing to compare.',
+    description: 'Auto routing is obstacle-aware. Toggle routing to compare manual vs auto reroute.',
     createState: createRoutingDemoState,
     elementShapes: baseElementShapes,
     portShapes: basePortShapes,
@@ -2560,6 +3162,17 @@ var obstacleRoutingLinks = [
         points: [],
         routing: 'auto',
     },
+    {
+        id: 'cross-branch-corridor-link',
+        sourcePortId: 'corridor-left-port',
+        targetPortId: 'corridor-right-port',
+        routing: 'auto',
+        points: [
+            { x: 310, y: 560 },
+            { x: 470, y: 500 },
+            { x: 630, y: 560 },
+        ],
+    },
 ];
 var obstacleRoutingShapes = __spreadArray(__spreadArray([], baseElementShapes, true), [
     {
@@ -2594,30 +3207,69 @@ var createObstacleRoutingState = function () { return ({
             position: { x: 310, y: 75 },
             size: { width: 140, height: 100 },
             shapeId: 'routing-ellipse',
-            parentId: 'sibling-parent',
+            parentId: 'sibling-parent',
+            portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
+        },
+        {
+            id: 'attach-parent',
+            position: { x: 620, y: 90 },
+            size: { width: 360, height: 250 },
+            shapeId: 'routing-ellipse',
+            portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
+        },
+        {
+            id: 'attach-child',
+            position: { x: 40, y: 45 },
+            size: { width: 140, height: 100 },
+            shapeId: 'routing-ellipse',
+            parentId: 'attach-parent',
+            portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
+        },
+        {
+            id: 'attach-child-b',
+            position: { x: 190, y: 120 },
+            size: { width: 140, height: 100 },
+            shapeId: 'routing-ellipse',
+            parentId: 'attach-parent',
+            portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
+        },
+        {
+            id: 'corridor-root',
+            position: { x: 40, y: 390 },
+            size: { width: 940, height: 260 },
+            shapeId: 'panel',
+            style: { fill: '#f5f9ff' },
+        },
+        {
+            id: 'corridor-left-branch',
+            position: { x: 80, y: 40 },
+            size: { width: 260, height: 170 },
+            shapeId: 'routing-ellipse',
+            parentId: 'corridor-root',
             portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
         },
         {
-            id: 'attach-parent',
-            position: { x: 620, y: 90 },
-            size: { width: 360, height: 250 },
+            id: 'corridor-right-branch',
+            position: { x: 560, y: 50 },
+            size: { width: 280, height: 170 },
             shapeId: 'routing-ellipse',
+            parentId: 'corridor-root',
             portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
         },
         {
-            id: 'attach-child',
-            position: { x: 40, y: 45 },
-            size: { width: 140, height: 100 },
-            shapeId: 'routing-ellipse',
-            parentId: 'attach-parent',
+            id: 'corridor-left-leaf',
+            position: { x: 120, y: 60 },
+            size: { width: 120, height: 70 },
+            shapeId: 'default',
+            parentId: 'corridor-left-branch',
             portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
         },
         {
-            id: 'attach-child-b',
-            position: { x: 190, y: 120 },
-            size: { width: 140, height: 100 },
-            shapeId: 'routing-ellipse',
-            parentId: 'attach-parent',
+            id: 'corridor-right-leaf',
+            position: { x: 50, y: 70 },
+            size: { width: 120, height: 70 },
+            shapeId: 'default',
+            parentId: 'corridor-right-branch',
             portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
         },
     ],
@@ -2668,6 +3320,22 @@ var createObstacleRoutingState = function () { return ({
             externalLinkAttachPoint: { x: 12, y: 0 },
             internalLinkAttachPoint: { x: -12, y: 0 },
         },
+        {
+            id: 'corridor-left-port',
+            elementId: 'corridor-left-leaf',
+            position: { x: 120, y: 35 },
+            shapeId: 'port-dark',
+            anchorCenter: true,
+            currentAnchorId: 'right',
+        },
+        {
+            id: 'corridor-right-port',
+            elementId: 'corridor-right-leaf',
+            position: { x: 0, y: 35 },
+            shapeId: 'port-dark',
+            anchorCenter: true,
+            currentAnchorId: 'left',
+        },
     ],
     links: obstacleRoutingLinks,
     texts: [
@@ -2701,6 +3369,16 @@ var createObstacleRoutingState = function () { return ({
             content: 'child-A->child-B: sibling endpoints EXTERNAL on both ends',
             position: { x: 620, y: 394 },
         },
+        {
+            id: 'corridor-group-label',
+            content: 'Scenario C: Cross-branch route should leave source branch early, travel at ancestor corridor, and descend near target.',
+            position: { x: 52, y: 360 },
+        },
+        {
+            id: 'corridor-redraw-label',
+            content: 'The cross-branch link starts with stale points. Toggle redraw refresh and click Manual Render to compare behavior.',
+            position: { x: 52, y: 676 },
+        },
     ],
 }); };
 var addLinksAction = {
@@ -2725,7 +3403,7 @@ var rerouteAllAction = {
 var obstacleRoutingDemoConfig = {
     id: 'obstacle-routing',
     title: 'Obstacle Routing',
-    description: 'Nested multi-anchor checks: sibling interior-avoidance + directional internal/external parent-child attach semantics.',
+    description: 'Nested routing checks: sibling interior-avoidance, directional parent-child attach semantics, and cross-parent common-ancestor corridor preference.',
     createState: createObstacleRoutingState,
     elementShapes: obstacleRoutingShapes,
     portShapes: basePortShapes,
@@ -3895,980 +4573,617 @@ var polygonIntersectsRect = function (polygon, rect) {
     }
     return false;
 };
-var snapToGrid = function (point, gridSize) {
-    if (gridSize <= 0)
-        return __assign({}, point);
-    return {
-        x: Math.round(point.x / gridSize) * gridSize,
-        y: Math.round(point.y / gridSize) * gridSize,
-    };
-};
-
-var DiagramModel = /** @class */ (function () {
-    function DiagramModel() {
-        this.elements = new Map();
-        this.ports = new Map();
-        this.links = new Map();
-        this.texts = new Map();
-        this.ownership = new OwnershipIndex();
-    }
-    DiagramModel.prototype.load = function (state) {
-        var _this = this;
-        this.elements.clear();
-        this.ports.clear();
-        this.links.clear();
-        this.texts.clear();
-        this.ownership = new OwnershipIndex();
-        state.elements.forEach(function (data) { return _this.elements.set(data.id, new ElementModel(data)); });
-        state.ports.forEach(function (data) { return _this.ports.set(data.id, new PortModel(data)); });
-        state.links.forEach(function (data) { return _this.links.set(data.id, new LinkModel(data)); });
-        state.texts.forEach(function (data) {
-            var text = new TextModel(data);
-            _this.texts.set(data.id, text);
-        });
-        this.ports.forEach(function (port) {
-            var element = _this.elements.get(port.elementId);
-            if (element) {
-                element.addPort(port.id);
-            }
-        });
-        this.texts.forEach(function (text) {
-            if (!text.ownerId)
-                return;
-            _this.ownership.add(text.ownerId, text.id);
-            var element = _this.elements.get(text.ownerId);
-            if (element) {
-                element.addText(text.id);
-                return;
-            }
-            var port = _this.ports.get(text.ownerId);
-            if (port) {
-                port.addText(text.id);
-                return;
-            }
-            var link = _this.links.get(text.ownerId);
-            if (link) {
-                link.addText(text.id);
-            }
-        });
-    };
-    DiagramModel.prototype.toState = function () {
-        return {
-            elements: Array.from(this.elements.values()).map(function (element) { return element.toData(); }),
-            ports: Array.from(this.ports.values()).map(function (port) { return port.toData(); }),
-            links: Array.from(this.links.values()).map(function (link) { return link.toData(); }),
-            texts: Array.from(this.texts.values()).map(function (text) { return text.toData(); }),
-        };
-    };
-    DiagramModel.prototype.getElement = function (id) {
-        return this.elements.get(id);
-    };
-    DiagramModel.prototype.setElementLayout = function (id, layout) {
-        var element = this.elements.get(id);
-        if (!element)
-            return;
-        element.layout = layout;
-    };
-    DiagramModel.prototype.getChildren = function (parentId) {
-        return Array.from(this.elements.values()).filter(function (child) { return child.parentId === parentId; });
-    };
-    DiagramModel.prototype.getElementWorldPosition = function (id) {
-        var element = this.elements.get(id);
-        if (!element)
-            return null;
-        return this.resolveElementWorldPosition(element);
-    };
-    DiagramModel.prototype.getPort = function (id) {
-        return this.ports.get(id);
-    };
-    DiagramModel.prototype.getPortWorldPosition = function (id) {
-        var port = this.ports.get(id);
-        if (!port)
-            return null;
-        var elementPosition = this.getElementWorldPosition(port.elementId);
-        if (!elementPosition)
-            return __assign({}, port.position);
-        return {
-            x: elementPosition.x + port.position.x,
-            y: elementPosition.y + port.position.y,
-        };
-    };
-    DiagramModel.prototype.getLink = function (id) {
-        return this.links.get(id);
-    };
-    DiagramModel.prototype.getLinkMidpoint = function (id) {
-        var link = this.links.get(id);
-        if (!link)
-            return null;
-        return this.resolveLinkMidpoint(link);
-    };
-    DiagramModel.prototype.getText = function (id) {
-        return this.texts.get(id);
-    };
-    DiagramModel.prototype.getTextWorldPosition = function (id) {
-        var text = this.texts.get(id);
-        if (!text)
-            return null;
-        if (!text.ownerId)
-            return __assign({}, text.position);
-        var element = this.elements.get(text.ownerId);
-        if (element) {
-            var elementPosition = this.resolveElementWorldPosition(element);
-            return {
-                x: elementPosition.x + text.position.x,
-                y: elementPosition.y + text.position.y,
-            };
-        }
-        var port = this.ports.get(text.ownerId);
-        if (port) {
-            var portPosition = this.getPortWorldPosition(port.id);
-            if (!portPosition)
-                return __assign({}, text.position);
-            return {
-                x: portPosition.x + text.position.x,
-                y: portPosition.y + text.position.y,
-            };
-        }
-        var link = this.links.get(text.ownerId);
-        if (link) {
-            var midpoint = this.resolveLinkMidpoint(link);
-            return {
-                x: midpoint.x + text.position.x,
-                y: midpoint.y + text.position.y,
-            };
-        }
-        return __assign({}, text.position);
-    };
-    DiagramModel.prototype.addElement = function (data) {
-        var element = new ElementModel(data);
-        this.elements.set(element.id, element);
-        return element;
-    };
-    DiagramModel.prototype.moveElement = function (id, position) {
-        var element = this.elements.get(id);
-        if (!element)
-            return;
-        element.setPosition(position);
-    };
-    DiagramModel.prototype.resizeElement = function (id, size) {
-        var element = this.elements.get(id);
-        if (!element)
-            return;
-        element.setSize(size);
-    };
-    DiagramModel.prototype.removeElement = function (id) {
-        var _this = this;
-        var element = this.elements.get(id);
-        if (!element)
-            return;
-        var portIds = __spreadArray([], element.portIds, true);
-        var textIds = __spreadArray([], element.textIds, true);
-        portIds.forEach(function (portId) { return _this.removePort(portId); });
-        textIds.forEach(function (textId) { return _this.removeText(textId); });
-        this.elements.delete(id);
-    };
-    DiagramModel.prototype.addPort = function (data) {
-        var port = new PortModel(data);
-        this.ports.set(port.id, port);
-        var element = this.elements.get(port.elementId);
-        if (element) {
-            element.addPort(port.id);
-        }
-        return port;
-    };
-    DiagramModel.prototype.movePort = function (id, position) {
-        var port = this.ports.get(id);
-        if (!port)
-            return;
-        port.setPosition(position);
-    };
-    DiagramModel.prototype.setPortCurrentAnchorId = function (id, currentAnchorId) {
-        var port = this.ports.get(id);
-        if (!port)
-            return;
-        port.setCurrentAnchorId(currentAnchorId);
-    };
-    DiagramModel.prototype.removePort = function (id) {
-        var _this = this;
-        var port = this.ports.get(id);
-        if (!port)
-            return;
-        var element = this.elements.get(port.elementId);
-        if (element) {
-            element.removePort(id);
-        }
-        var portTextIds = __spreadArray([], port.textIds, true);
-        portTextIds.forEach(function (textId) { return _this.removeText(textId); });
-        var linksToRemove = Array.from(this.links.values())
-            .filter(function (link) { return link.sourcePortId === id || link.targetPortId === id; })
-            .map(function (link) { return link.id; });
-        linksToRemove.forEach(function (linkId) { return _this.removeLink(linkId); });
-        this.ports.delete(id);
-    };
-    DiagramModel.prototype.addLink = function (data) {
-        var link = new LinkModel(data);
-        this.links.set(link.id, link);
-        return link;
-    };
-    DiagramModel.prototype.updateLinkPoints = function (id, points) {
-        var link = this.links.get(id);
-        if (!link)
-            return;
-        link.setPoints(points);
-    };
-    DiagramModel.prototype.setLinkRoutingMode = function (id, mode) {
-        var link = this.links.get(id);
-        if (!link)
-            return;
-        link.setRouting(mode);
+var snapToGrid = function (point, gridSize) {
+    if (gridSize <= 0)
+        return __assign({}, point);
+    return {
+        x: Math.round(point.x / gridSize) * gridSize,
+        y: Math.round(point.y / gridSize) * gridSize,
     };
-    DiagramModel.prototype.removeLink = function (id) {
+};
+
+var DiagramModel = /** @class */ (function () {
+    function DiagramModel() {
+        this.elements = new Map();
+        this.ports = new Map();
+        this.links = new Map();
+        this.texts = new Map();
+        this.ownership = new OwnershipIndex();
+    }
+    DiagramModel.prototype.load = function (state) {
         var _this = this;
-        var link = this.links.get(id);
-        if (!link)
-            return;
-        var textIds = __spreadArray([], link.textIds, true);
-        textIds.forEach(function (textId) { return _this.removeText(textId); });
-        this.links.delete(id);
-    };
-    DiagramModel.prototype.addText = function (data) {
-        var text = new TextModel(data);
-        this.texts.set(text.id, text);
-        if (text.ownerId) {
-            this.ownership.add(text.ownerId, text.id);
-            var element = this.elements.get(text.ownerId);
+        this.elements.clear();
+        this.ports.clear();
+        this.links.clear();
+        this.texts.clear();
+        this.ownership = new OwnershipIndex();
+        state.elements.forEach(function (data) { return _this.elements.set(data.id, new ElementModel(data)); });
+        state.ports.forEach(function (data) { return _this.ports.set(data.id, new PortModel(data)); });
+        state.links.forEach(function (data) { return _this.links.set(data.id, new LinkModel(data)); });
+        state.texts.forEach(function (data) {
+            var text = new TextModel(data);
+            _this.texts.set(data.id, text);
+        });
+        this.ports.forEach(function (port) {
+            var element = _this.elements.get(port.elementId);
+            if (element) {
+                element.addPort(port.id);
+            }
+        });
+        this.texts.forEach(function (text) {
+            if (!text.ownerId)
+                return;
+            _this.ownership.add(text.ownerId, text.id);
+            var element = _this.elements.get(text.ownerId);
             if (element) {
                 element.addText(text.id);
+                return;
             }
-            var port = this.ports.get(text.ownerId);
+            var port = _this.ports.get(text.ownerId);
             if (port) {
                 port.addText(text.id);
+                return;
             }
-            var link = this.links.get(text.ownerId);
+            var link = _this.links.get(text.ownerId);
             if (link) {
                 link.addText(text.id);
             }
-        }
-        return text;
+        });
     };
-    DiagramModel.prototype.updateText = function (id, content) {
-        var text = this.texts.get(id);
-        if (!text)
-            return;
-        text.setContent(content);
+    DiagramModel.prototype.toState = function () {
+        return {
+            elements: Array.from(this.elements.values()).map(function (element) { return element.toData(); }),
+            ports: Array.from(this.ports.values()).map(function (port) { return port.toData(); }),
+            links: Array.from(this.links.values()).map(function (link) { return link.toData(); }),
+            texts: Array.from(this.texts.values()).map(function (text) { return text.toData(); }),
+        };
     };
-    DiagramModel.prototype.moveText = function (id, position) {
-        var text = this.texts.get(id);
-        if (!text)
-            return;
-        text.setPosition(position);
+    DiagramModel.prototype.getElement = function (id) {
+        return this.elements.get(id);
     };
-    DiagramModel.prototype.removeText = function (id) {
-        var text = this.texts.get(id);
-        if (!text)
+    DiagramModel.prototype.setElementLayout = function (id, layout) {
+        var element = this.elements.get(id);
+        if (!element)
             return;
-        if (text.ownerId) {
-            this.ownership.remove(text.ownerId, id);
-            var element = this.elements.get(text.ownerId);
-            if (element) {
-                element.removeText(id);
-            }
-            var port = this.ports.get(text.ownerId);
-            if (port) {
-                port.removeText(id);
-            }
-            var link = this.links.get(text.ownerId);
-            if (link) {
-                link.removeText(id);
-            }
-        }
-        this.texts.delete(id);
-    };
-    DiagramModel.prototype.resolveElementWorldPosition = function (element) {
-        var x = element.position.x;
-        var y = element.position.y;
-        if (element.anchorCenter) {
-            x -= element.size.width / 2;
-            y -= element.size.height / 2;
-        }
-        var current = element;
-        while (current === null || current === void 0 ? void 0 : current.parentId) {
-            var parent_1 = this.elements.get(current.parentId);
-            if (!parent_1)
-                break;
-            var parentX = parent_1.position.x;
-            var parentY = parent_1.position.y;
-            if (parent_1.anchorCenter) {
-                parentX -= parent_1.size.width / 2;
-                parentY -= parent_1.size.height / 2;
-            }
-            x += parentX;
-            y += parentY;
-            current = parent_1;
-        }
-        return { x: x, y: y };
-    };
-    DiagramModel.prototype.resolveLinkMidpoint = function (link) {
-        var points = link.points;
-        if (points.length === 0)
-            return { x: 0, y: 0 };
-        if (points.length === 1)
-            return __assign({}, points[0]);
-        var total = 0;
-        for (var i = 1; i < points.length; i += 1) {
-            total += distance(points[i - 1], points[i]);
-        }
-        var halfway = total / 2;
-        var traveled = 0;
-        for (var i = 1; i < points.length; i += 1) {
-            var segment = distance(points[i - 1], points[i]);
-            if (traveled + segment >= halfway) {
-                var ratio = segment === 0 ? 0 : (halfway - traveled) / segment;
-                return {
-                    x: points[i - 1].x + (points[i].x - points[i - 1].x) * ratio,
-                    y: points[i - 1].y + (points[i].y - points[i - 1].y) * ratio,
-                };
-            }
-            traveled += segment;
-        }
-        return __assign({}, points[points.length - 1]);
+        element.layout = layout;
     };
-    return DiagramModel;
-}());
-
-var CommandQueue = /** @class */ (function () {
-    function CommandQueue() {
-        this.queue = [];
-    }
-    CommandQueue.prototype.enqueue = function (command) {
-        this.queue.push(command);
+    DiagramModel.prototype.getChildren = function (parentId) {
+        return Array.from(this.elements.values()).filter(function (child) { return child.parentId === parentId; });
     };
-    CommandQueue.prototype.flush = function (model) {
-        var patches = [];
-        while (this.queue.length > 0) {
-            var command = this.queue.shift();
-            if (!command)
-                continue;
-            var next = command.apply(model);
-            patches.push.apply(patches, next);
-        }
-        return patches;
+    DiagramModel.prototype.getElementWorldPosition = function (id) {
+        var element = this.elements.get(id);
+        if (!element)
+            return null;
+        return this.resolveElementWorldPosition(element);
     };
-    CommandQueue.prototype.run = function (command, model) {
-        this.enqueue(command);
-        return this.flush(model);
+    DiagramModel.prototype.getPort = function (id) {
+        return this.ports.get(id);
     };
-    return CommandQueue;
-}());
-
-var EventBus = /** @class */ (function () {
-    function EventBus() {
-        this.handlers = new Map();
-    }
-    EventBus.prototype.subscribe = function (event, handler) {
-        var _this = this;
-        var _a;
-        var set = (_a = this.handlers.get(event)) !== null && _a !== void 0 ? _a : new Set();
-        set.add(handler);
-        this.handlers.set(event, set);
-        return function () {
-            var existing = _this.handlers.get(event);
-            if (!existing)
-                return;
-            existing.delete(handler);
-            if (existing.size === 0) {
-                _this.handlers.delete(event);
-            }
+    DiagramModel.prototype.getPortWorldPosition = function (id) {
+        var port = this.ports.get(id);
+        if (!port)
+            return null;
+        var elementPosition = this.getElementWorldPosition(port.elementId);
+        if (!elementPosition)
+            return __assign({}, port.position);
+        return {
+            x: elementPosition.x + port.position.x,
+            y: elementPosition.y + port.position.y,
         };
     };
-    EventBus.prototype.emit = function (event, payload) {
-        var set = this.handlers.get(event);
-        if (!set)
-            return;
-        Array.from(set.values()).forEach(function (handler) {
-            handler(payload);
-        });
+    DiagramModel.prototype.getLink = function (id) {
+        return this.links.get(id);
     };
-    return EventBus;
-}());
-
-var SelectionState = /** @class */ (function () {
-    function SelectionState() {
-        this.selectedIds = new Set();
-    }
-    SelectionState.prototype.set = function (ids) {
-        this.selectedIds = new Set(ids);
+    DiagramModel.prototype.getLinkMidpoint = function (id) {
+        var link = this.links.get(id);
+        if (!link)
+            return null;
+        return this.resolveLinkMidpoint(link);
     };
-    SelectionState.prototype.toggle = function (id) {
-        if (this.selectedIds.has(id)) {
-            this.selectedIds.delete(id);
+    DiagramModel.prototype.getText = function (id) {
+        return this.texts.get(id);
+    };
+    DiagramModel.prototype.getTextWorldPosition = function (id) {
+        var text = this.texts.get(id);
+        if (!text)
+            return null;
+        if (!text.ownerId)
+            return __assign({}, text.position);
+        var element = this.elements.get(text.ownerId);
+        if (element) {
+            var elementPosition = this.resolveElementWorldPosition(element);
+            return {
+                x: elementPosition.x + text.position.x,
+                y: elementPosition.y + text.position.y,
+            };
         }
-        else {
-            this.selectedIds.add(id);
+        var port = this.ports.get(text.ownerId);
+        if (port) {
+            var portPosition = this.getPortWorldPosition(port.id);
+            if (!portPosition)
+                return __assign({}, text.position);
+            return {
+                x: portPosition.x + text.position.x,
+                y: portPosition.y + text.position.y,
+            };
+        }
+        var link = this.links.get(text.ownerId);
+        if (link) {
+            var midpoint = this.resolveLinkMidpoint(link);
+            return {
+                x: midpoint.x + text.position.x,
+                y: midpoint.y + text.position.y,
+            };
         }
+        return __assign({}, text.position);
     };
-    SelectionState.prototype.get = function () {
-        return Array.from(this.selectedIds.values());
+    DiagramModel.prototype.addElement = function (data) {
+        var element = new ElementModel(data);
+        this.elements.set(element.id, element);
+        return element;
     };
-    SelectionState.prototype.clear = function () {
-        this.selectedIds.clear();
+    DiagramModel.prototype.moveElement = function (id, position) {
+        var element = this.elements.get(id);
+        if (!element)
+            return;
+        element.setPosition(position);
     };
-    return SelectionState;
-}());
-
-var ViewportState = /** @class */ (function () {
-    function ViewportState() {
-        this.pan = { x: 0, y: 0 };
-        this.zoom = 1;
-    }
-    ViewportState.prototype.setPan = function (point) {
-        this.pan = __assign({}, point);
+    DiagramModel.prototype.resizeElement = function (id, size) {
+        var element = this.elements.get(id);
+        if (!element)
+            return;
+        element.setSize(size);
     };
-    ViewportState.prototype.setZoom = function (value) {
-        this.zoom = value;
+    DiagramModel.prototype.removeElement = function (id) {
+        var _this = this;
+        var element = this.elements.get(id);
+        if (!element)
+            return;
+        var portIds = __spreadArray([], element.portIds, true);
+        var textIds = __spreadArray([], element.textIds, true);
+        portIds.forEach(function (portId) { return _this.removePort(portId); });
+        textIds.forEach(function (textId) { return _this.removeText(textId); });
+        this.elements.delete(id);
     };
-    return ViewportState;
-}());
-
-var patchAdd = function (entity, id, payload) { return ({
-    type: 'add',
-    entity: entity,
-    id: id,
-    payload: payload,
-}); };
-var patchUpdate = function (entity, id, payload) { return ({
-    type: 'update',
-    entity: entity,
-    id: id,
-    payload: payload,
-}); };
-var patchRemove = function (entity, id) { return ({
-    type: 'remove',
-    entity: entity,
-    id: id,
-}); };
-
-var createLoadCommand = function (state) { return ({
-    type: 'load',
-    apply: function (model) {
-        model.load(state);
-        return [{ type: 'load', entity: 'config', payload: {} }];
-    },
-}); };
-var createAddElementCommand = function (element) { return ({
-    type: 'addElement',
-    apply: function (model) {
-        model.addElement(element);
-        return [patchAdd('element', element.id, element)];
-    },
-}); };
-var createMoveElementCommand = function (id, position) { return ({
-    type: 'moveElement',
-    apply: function (model) {
-        model.moveElement(id, position);
-        return [patchUpdate('element', id, { position: position })];
-    },
-}); };
-var createResizeElementCommand = function (id, size) { return ({
-    type: 'resizeElement',
-    apply: function (model) {
-        var current = model.getElement(id);
-        var previousSize = current ? __assign({}, current.size) : undefined;
-        model.resizeElement(id, size);
-        return [patchUpdate('element', id, { size: size, previousSize: previousSize })];
-    },
-}); };
-var createRemoveElementCommand = function (id) { return ({
-    type: 'removeElement',
-    apply: function (model) {
-        model.removeElement(id);
-        return [patchRemove('element', id)];
-    },
-}); };
-var createSetElementLayoutCommand = function (id, layout) { return ({
-    type: 'setElementLayout',
-    apply: function (model) {
-        model.setElementLayout(id, layout);
-        return [patchUpdate('element', id, { layout: layout })];
-    },
-}); };
-var createAddPortCommand = function (port) { return ({
-    type: 'addPort',
-    apply: function (model) {
-        model.addPort(port);
-        return [patchAdd('port', port.id, port)];
-    },
-}); };
-var createMovePortCommand = function (id, update) { return ({
-    type: 'movePort',
-    apply: function (model) {
-        var _a, _b;
-        var hasCurrentAnchorId = Object.prototype.hasOwnProperty.call(update, 'currentAnchorId');
-        model.movePort(id, update.position);
-        if (hasCurrentAnchorId) {
-            model.setPortCurrentAnchorId(id, (_a = update.currentAnchorId) !== null && _a !== void 0 ? _a : undefined);
-        }
-        var payload = { position: update.position };
-        if (hasCurrentAnchorId) {
-            payload.currentAnchorId = (_b = update.currentAnchorId) !== null && _b !== void 0 ? _b : null;
-        }
-        return [patchUpdate('port', id, payload)];
-    },
-}); };
-var createRemovePortCommand = function (id) { return ({
-    type: 'removePort',
-    apply: function (model) {
-        model.removePort(id);
-        return [patchRemove('port', id)];
-    },
-}); };
-var createAddLinkCommand = function (link) { return ({
-    type: 'addLink',
-    apply: function (model) {
-        model.addLink(link);
-        return [patchAdd('link', link.id, link)];
-    },
-}); };
-var createUpdateLinkCommand = function (id, update) { return ({
-    type: 'updateLink',
-    apply: function (model) {
-        if (update.points !== undefined) {
-            model.updateLinkPoints(id, update.points);
+    DiagramModel.prototype.addPort = function (data) {
+        var port = new PortModel(data);
+        this.ports.set(port.id, port);
+        var element = this.elements.get(port.elementId);
+        if (element) {
+            element.addPort(port.id);
         }
-        if (update.routing !== undefined) {
-            model.setLinkRoutingMode(id, update.routing);
+        return port;
+    };
+    DiagramModel.prototype.movePort = function (id, position) {
+        var port = this.ports.get(id);
+        if (!port)
+            return;
+        port.setPosition(position);
+    };
+    DiagramModel.prototype.setPortCurrentAnchorId = function (id, currentAnchorId) {
+        var port = this.ports.get(id);
+        if (!port)
+            return;
+        port.setCurrentAnchorId(currentAnchorId);
+    };
+    DiagramModel.prototype.removePort = function (id) {
+        var _this = this;
+        var port = this.ports.get(id);
+        if (!port)
+            return;
+        var element = this.elements.get(port.elementId);
+        if (element) {
+            element.removePort(id);
         }
-        var payload = {};
-        if (update.points !== undefined)
-            payload.points = update.points;
-        if (update.routing !== undefined)
-            payload.routing = update.routing;
-        return [patchUpdate('link', id, payload)];
-    },
-}); };
-var createRemoveLinkCommand = function (id) { return ({
-    type: 'removeLink',
-    apply: function (model) {
-        model.removeLink(id);
-        return [patchRemove('link', id)];
-    },
-}); };
-var createAddTextCommand = function (text) { return ({
-    type: 'addText',
-    apply: function (model) {
-        model.addText(text);
-        return [patchAdd('text', text.id, text)];
-    },
-}); };
-var createUpdateTextCommand = function (id, content) { return ({
-    type: 'updateText',
-    apply: function (model) {
-        model.updateText(id, content);
-        return [patchUpdate('text', id, { content: content })];
-    },
-}); };
-var createMoveTextCommand = function (id, position) { return ({
-    type: 'moveText',
-    apply: function (model) {
-        model.moveText(id, position);
-        return [patchUpdate('text', id, { position: position })];
-    },
-}); };
-var createRemoveTextCommand = function (id) { return ({
-    type: 'removeText',
-    apply: function (model) {
-        model.removeText(id);
-        return [patchRemove('text', id)];
-    },
-}); };
-
-var RenderScheduler = /** @class */ (function () {
-    function RenderScheduler() {
-        this.pending = false;
-        this.lastCallback = null;
-    }
-    RenderScheduler.prototype.requestRender = function (callback) {
+        var portTextIds = __spreadArray([], port.textIds, true);
+        portTextIds.forEach(function (textId) { return _this.removeText(textId); });
+        var linksToRemove = Array.from(this.links.values())
+            .filter(function (link) { return link.sourcePortId === id || link.targetPortId === id; })
+            .map(function (link) { return link.id; });
+        linksToRemove.forEach(function (linkId) { return _this.removeLink(linkId); });
+        this.ports.delete(id);
+    };
+    DiagramModel.prototype.addLink = function (data) {
+        var link = new LinkModel(data);
+        this.links.set(link.id, link);
+        return link;
+    };
+    DiagramModel.prototype.updateLinkPoints = function (id, points) {
+        var link = this.links.get(id);
+        if (!link)
+            return;
+        link.setPoints(points);
+    };
+    DiagramModel.prototype.setLinkRoutingMode = function (id, mode) {
+        var link = this.links.get(id);
+        if (!link)
+            return;
+        link.setRouting(mode);
+    };
+    DiagramModel.prototype.removeLink = function (id) {
         var _this = this;
-        this.lastCallback = callback;
-        if (this.pending)
+        var link = this.links.get(id);
+        if (!link)
             return;
-        this.pending = true;
-        var schedule = typeof requestAnimationFrame !== 'undefined'
-            ? requestAnimationFrame
-            : function (cb) { return setTimeout(function () { return cb(Date.now()); }, 16); };
-        schedule(function () {
-            _this.pending = false;
-            var next = _this.lastCallback;
-            _this.lastCallback = null;
-            if (next) {
-                next();
+        var textIds = __spreadArray([], link.textIds, true);
+        textIds.forEach(function (textId) { return _this.removeText(textId); });
+        this.links.delete(id);
+    };
+    DiagramModel.prototype.addText = function (data) {
+        var text = new TextModel(data);
+        this.texts.set(text.id, text);
+        if (text.ownerId) {
+            this.ownership.add(text.ownerId, text.id);
+            var element = this.elements.get(text.ownerId);
+            if (element) {
+                element.addText(text.id);
             }
-        });
+            var port = this.ports.get(text.ownerId);
+            if (port) {
+                port.addText(text.id);
+            }
+            var link = this.links.get(text.ownerId);
+            if (link) {
+                link.addText(text.id);
+            }
+        }
+        return text;
     };
-    return RenderScheduler;
-}());
-
-var DEFAULT_PADDING = 12;
-var DEFAULT_TOLERANCE = 0.5;
-var DEFAULT_STUB_LENGTH = 12;
-var shrinkRect = function (rect, amount) {
-    var width = rect.width - amount * 2;
-    var height = rect.height - amount * 2;
-    if (width <= 0 || height <= 0)
-        return null;
-    return {
-        x: rect.x + amount,
-        y: rect.y + amount,
-        width: width,
-        height: height,
+    DiagramModel.prototype.updateText = function (id, content) {
+        var text = this.texts.get(id);
+        if (!text)
+            return;
+        text.setContent(content);
     };
-};
-var segmentIntersectsRect = function (start, end, rect) {
-    var dx = end.x - start.x;
-    var dy = end.y - start.y;
-    var p = [-dx, dx, -dy, dy];
-    var q = [
-        start.x - rect.x,
-        rect.x + rect.width - start.x,
-        start.y - rect.y,
-        rect.y + rect.height - start.y,
-    ];
-    var t0 = 0;
-    var t1 = 1;
-    for (var i = 0; i < 4; i += 1) {
-        var pi = p[i];
-        var qi = q[i];
-        if (pi === 0) {
-            if (qi < 0)
-                return false;
-        }
-        else {
-            var r = qi / pi;
-            if (pi < 0) {
-                if (r > t1)
-                    return false;
-                if (r > t0)
-                    t0 = r;
+    DiagramModel.prototype.moveText = function (id, position) {
+        var text = this.texts.get(id);
+        if (!text)
+            return;
+        text.setPosition(position);
+    };
+    DiagramModel.prototype.removeText = function (id) {
+        var text = this.texts.get(id);
+        if (!text)
+            return;
+        if (text.ownerId) {
+            this.ownership.remove(text.ownerId, id);
+            var element = this.elements.get(text.ownerId);
+            if (element) {
+                element.removeText(id);
             }
-            else {
-                if (r < t0)
-                    return false;
-                if (r < t1)
-                    t1 = r;
+            var port = this.ports.get(text.ownerId);
+            if (port) {
+                port.removeText(id);
+            }
+            var link = this.links.get(text.ownerId);
+            if (link) {
+                link.removeText(id);
             }
         }
-    }
-    return true;
-};
-var segmentIntersectsRectInterior = function (start, end, rect, tolerance) {
-    var inner = shrinkRect(rect, tolerance);
-    if (!inner)
-        return false;
-    return segmentIntersectsRect(start, end, inner);
-};
-var pointWithinRect = function (point, rect, tolerance) {
-    return (point.x >= rect.x - tolerance &&
-        point.x <= rect.x + rect.width + tolerance &&
-        point.y >= rect.y - tolerance &&
-        point.y <= rect.y + rect.height + tolerance);
-};
-var compactPath = function (points) {
-    var deduped = [];
-    points.forEach(function (point) {
-        var last = deduped[deduped.length - 1];
-        if (!last || last.x !== point.x || last.y !== point.y) {
-            deduped.push(point);
-        }
-    });
-    if (deduped.length < 3)
-        return deduped;
-    var compacted = [deduped[0]];
-    for (var i = 1; i < deduped.length; i += 1) {
-        var prev = compacted[compacted.length - 1];
-        var next = deduped[i];
-        var beforePrev = compacted[compacted.length - 2];
-        if (beforePrev &&
-            ((beforePrev.x === prev.x && prev.x === next.x) || (beforePrev.y === prev.y && prev.y === next.y))) {
-            compacted[compacted.length - 1] = next;
-        }
-        else {
-            compacted.push(next);
-        }
-    }
-    return compacted;
-};
-var pathLength = function (points) {
-    var total = 0;
-    for (var i = 1; i < points.length; i += 1) {
-        var dx = points[i].x - points[i - 1].x;
-        var dy = points[i].y - points[i - 1].y;
-        total += Math.sqrt(dx * dx + dy * dy);
-    }
-    return total;
-};
-var ObstacleRouter = /** @class */ (function () {
-    function ObstacleRouter(options) {
-        var _a, _b, _c;
-        this.padding = (_a = options === null || options === void 0 ? void 0 : options.padding) !== null && _a !== void 0 ? _a : DEFAULT_PADDING;
-        this.tolerance = (_b = options === null || options === void 0 ? void 0 : options.tolerance) !== null && _b !== void 0 ? _b : DEFAULT_TOLERANCE;
-        this.stubLength = (_c = options === null || options === void 0 ? void 0 : options.stubLength) !== null && _c !== void 0 ? _c : DEFAULT_STUB_LENGTH;
-    }
-    ObstacleRouter.prototype.route = function (source, target, context) {
-        var _a;
-        var obstacles = (_a = context === null || context === void 0 ? void 0 : context.obstacles) !== null && _a !== void 0 ? _a : [];
-        var bounds = context === null || context === void 0 ? void 0 : context.bounds;
-        var sourceStub = this.computeStubEndpoint(source, context === null || context === void 0 ? void 0 : context.sourceEndpoint, bounds, obstacles);
-        var targetStub = this.computeStubEndpoint(target, context === null || context === void 0 ? void 0 : context.targetEndpoint, bounds, obstacles);
-        var innerSource = sourceStub !== null && sourceStub !== void 0 ? sourceStub : source;
-        var innerTarget = targetStub !== null && targetStub !== void 0 ? targetStub : target;
-        var core = this.routeBetween(innerSource, innerTarget, obstacles, bounds);
-        var normalizedCore = this.ensureEndpoints(core, innerSource, innerTarget);
-        var middle = normalizedCore.slice(1, -1).map(function (p) { return (__assign({}, p)); });
-        var result = [__assign({}, source)];
-        var hasSourceStub = Boolean(sourceStub);
-        var hasTargetStub = Boolean(targetStub);
-        if (hasSourceStub && sourceStub) {
-            result.push(__assign({}, sourceStub));
-        }
-        result.push.apply(result, middle);
-        if (hasTargetStub && targetStub) {
-            result.push(__assign({}, targetStub));
-        }
-        result.push(__assign({}, target));
-        return this.compactPreservingStubs(result, hasSourceStub, hasTargetStub);
-    };
-    ObstacleRouter.prototype.buildCandidates = function (source, target, obstacles) {
-        var _this = this;
-        var midXValues = new Set();
-        var midYValues = new Set();
-        midXValues.add(Math.round((source.x + target.x) / 2));
-        midXValues.add(source.x);
-        midXValues.add(target.x);
-        midYValues.add(Math.round((source.y + target.y) / 2));
-        midYValues.add(source.y);
-        midYValues.add(target.y);
-        obstacles.forEach(function (obstacle) {
-            midXValues.add(obstacle.rect.x - _this.padding);
-            midXValues.add(obstacle.rect.x + obstacle.rect.width + _this.padding);
-            midYValues.add(obstacle.rect.y - _this.padding);
-            midYValues.add(obstacle.rect.y + obstacle.rect.height + _this.padding);
-        });
-        var candidates = [];
-        midXValues.forEach(function (midX) {
-            var path = compactPath([
-                __assign({}, source),
-                { x: midX, y: source.y },
-                { x: midX, y: target.y },
-                __assign({}, target),
-            ]);
-            candidates.push(path);
-        });
-        midYValues.forEach(function (midY) {
-            var path = compactPath([
-                __assign({}, source),
-                { x: source.x, y: midY },
-                { x: target.x, y: midY },
-                __assign({}, target),
-            ]);
-            candidates.push(path);
-        });
-        return candidates;
+        this.texts.delete(id);
     };
-    ObstacleRouter.prototype.routeBetween = function (source, target, obstacles, bounds) {
-        var _this = this;
-        var direct = compactPath([__assign({}, source), __assign({}, target)]);
-        if (obstacles.length === 0 && (!bounds || this.pointsWithinBounds(direct, bounds))) {
-            return direct;
+    DiagramModel.prototype.resolveElementWorldPosition = function (element) {
+        var x = element.position.x;
+        var y = element.position.y;
+        if (element.anchorCenter) {
+            x -= element.size.width / 2;
+            y -= element.size.height / 2;
+        }
+        var current = element;
+        while (current === null || current === void 0 ? void 0 : current.parentId) {
+            var parent_1 = this.elements.get(current.parentId);
+            if (!parent_1)
+                break;
+            var parentX = parent_1.position.x;
+            var parentY = parent_1.position.y;
+            if (parent_1.anchorCenter) {
+                parentX -= parent_1.size.width / 2;
+                parentY -= parent_1.size.height / 2;
+            }
+            x += parentX;
+            y += parentY;
+            current = parent_1;
         }
-        if (this.isPathClear(direct, obstacles, bounds)) {
-            return direct;
+        return { x: x, y: y };
+    };
+    DiagramModel.prototype.resolveLinkMidpoint = function (link) {
+        var points = link.points;
+        if (points.length === 0)
+            return { x: 0, y: 0 };
+        if (points.length === 1)
+            return __assign({}, points[0]);
+        var total = 0;
+        for (var i = 1; i < points.length; i += 1) {
+            total += distance(points[i - 1], points[i]);
         }
-        var candidates = this.buildCandidates(source, target, obstacles);
-        var best = null;
-        var bestLength = Number.POSITIVE_INFINITY;
-        candidates.forEach(function (candidate) {
-            if (!_this.isPathClear(candidate, obstacles, bounds))
-                return;
-            var length = pathLength(candidate);
-            if (length < bestLength) {
-                best = candidate;
-                bestLength = length;
+        var halfway = total / 2;
+        var traveled = 0;
+        for (var i = 1; i < points.length; i += 1) {
+            var segment = distance(points[i - 1], points[i]);
+            if (traveled + segment >= halfway) {
+                var ratio = segment === 0 ? 0 : (halfway - traveled) / segment;
+                return {
+                    x: points[i - 1].x + (points[i].x - points[i - 1].x) * ratio,
+                    y: points[i - 1].y + (points[i].y - points[i - 1].y) * ratio,
+                };
             }
-        });
-        return best !== null && best !== void 0 ? best : direct;
+            traveled += segment;
+        }
+        return __assign({}, points[points.length - 1]);
     };
-    ObstacleRouter.prototype.pointsWithinBounds = function (points, bounds) {
-        var _this = this;
-        return points.every(function (point) { return pointWithinRect(point, bounds, _this.tolerance); });
+    return DiagramModel;
+}());
+
+var CommandQueue = /** @class */ (function () {
+    function CommandQueue() {
+        this.queue = [];
+    }
+    CommandQueue.prototype.enqueue = function (command) {
+        this.queue.push(command);
     };
-    ObstacleRouter.prototype.isPathClear = function (points, obstacles, bounds) {
-        if (points.length < 2)
-            return true;
-        if (bounds && !this.pointsWithinBounds(points, bounds))
-            return false;
-        for (var i = 1; i < points.length; i += 1) {
-            var start = points[i - 1];
-            var end = points[i];
-            if (start.x === end.x && start.y === end.y)
+    CommandQueue.prototype.flush = function (model) {
+        var patches = [];
+        while (this.queue.length > 0) {
+            var command = this.queue.shift();
+            if (!command)
                 continue;
-            for (var j = 0; j < obstacles.length; j += 1) {
-                if (segmentIntersectsRectInterior(start, end, obstacles[j].rect, this.tolerance)) {
-                    return false;
-                }
-            }
+            var next = command.apply(model);
+            patches.push.apply(patches, next);
         }
-        return true;
+        return patches;
     };
-    ObstacleRouter.prototype.computeStubEndpoint = function (point, endpoint, bounds, obstacles) {
-        if (!(endpoint === null || endpoint === void 0 ? void 0 : endpoint.onEdgeSide) || !endpoint.rect)
-            return null;
-        var outwardNormal = this.getNormal(endpoint.onEdgeSide);
-        var selectedNormal = outwardNormal;
-        var maxLength = this.computeAvailableStubLength(point, outwardNormal, bounds, obstacles, endpoint.elementId);
-        // If the outward normal is fully blocked by route bounds on the endpoint host, fall back inward
-        // to preserve a visible perpendicular stub for bounded parent-child routes.
-        if (maxLength <= this.tolerance && bounds && this.rectsEqual(bounds, endpoint.rect)) {
-            var inwardNormal = { x: -outwardNormal.x, y: -outwardNormal.y };
-            var inwardLength = this.computeAvailableStubLength(point, inwardNormal, bounds, obstacles, endpoint.elementId);
-            if (inwardLength > maxLength) {
-                selectedNormal = inwardNormal;
-                maxLength = inwardLength;
+    CommandQueue.prototype.run = function (command, model) {
+        this.enqueue(command);
+        return this.flush(model);
+    };
+    return CommandQueue;
+}());
+
+var EventBus = /** @class */ (function () {
+    function EventBus() {
+        this.handlers = new Map();
+    }
+    EventBus.prototype.subscribe = function (event, handler) {
+        var _this = this;
+        var _a;
+        var set = (_a = this.handlers.get(event)) !== null && _a !== void 0 ? _a : new Set();
+        set.add(handler);
+        this.handlers.set(event, set);
+        return function () {
+            var existing = _this.handlers.get(event);
+            if (!existing)
+                return;
+            existing.delete(handler);
+            if (existing.size === 0) {
+                _this.handlers.delete(event);
             }
-        }
-        if (maxLength <= 0)
-            return null;
-        return {
-            x: point.x + selectedNormal.x * maxLength,
-            y: point.y + selectedNormal.y * maxLength,
         };
     };
-    ObstacleRouter.prototype.computeAvailableStubLength = function (point, normal, bounds, obstacles, ignoreId) {
-        var maxLength = this.stubLength;
-        if (bounds) {
-            maxLength = Math.min(maxLength, this.distanceToBounds(point, normal, bounds));
+    EventBus.prototype.emit = function (event, payload) {
+        var set = this.handlers.get(event);
+        if (!set)
+            return;
+        Array.from(set.values()).forEach(function (handler) {
+            handler(payload);
+        });
+    };
+    return EventBus;
+}());
+
+var SelectionState = /** @class */ (function () {
+    function SelectionState() {
+        this.selectedIds = new Set();
+    }
+    SelectionState.prototype.set = function (ids) {
+        this.selectedIds = new Set(ids);
+    };
+    SelectionState.prototype.toggle = function (id) {
+        if (this.selectedIds.has(id)) {
+            this.selectedIds.delete(id);
         }
-        var obstacleLimit = this.distanceToObstacles(point, normal, obstacles, ignoreId);
-        if (obstacleLimit !== null) {
-            maxLength = Math.min(maxLength, obstacleLimit);
+        else {
+            this.selectedIds.add(id);
         }
-        return maxLength;
     };
-    ObstacleRouter.prototype.rectsEqual = function (a, b) {
-        return (Math.abs(a.x - b.x) <= this.tolerance &&
-            Math.abs(a.y - b.y) <= this.tolerance &&
-            Math.abs(a.width - b.width) <= this.tolerance &&
-            Math.abs(a.height - b.height) <= this.tolerance);
+    SelectionState.prototype.get = function () {
+        return Array.from(this.selectedIds.values());
     };
-    ObstacleRouter.prototype.getNormal = function (side) {
-        switch (side) {
-            case 'left':
-                return { x: -1, y: 0 };
-            case 'right':
-                return { x: 1, y: 0 };
-            case 'top':
-                return { x: 0, y: -1 };
-            case 'bottom':
-            default:
-                return { x: 0, y: 1 };
+    SelectionState.prototype.clear = function () {
+        this.selectedIds.clear();
+    };
+    return SelectionState;
+}());
+
+var ViewportState = /** @class */ (function () {
+    function ViewportState() {
+        this.pan = { x: 0, y: 0 };
+        this.zoom = 1;
+    }
+    ViewportState.prototype.setPan = function (point) {
+        this.pan = __assign({}, point);
+    };
+    ViewportState.prototype.setZoom = function (value) {
+        this.zoom = value;
+    };
+    return ViewportState;
+}());
+
+var patchAdd = function (entity, id, payload) { return ({
+    type: 'add',
+    entity: entity,
+    id: id,
+    payload: payload,
+}); };
+var patchUpdate = function (entity, id, payload) { return ({
+    type: 'update',
+    entity: entity,
+    id: id,
+    payload: payload,
+}); };
+var patchRemove = function (entity, id) { return ({
+    type: 'remove',
+    entity: entity,
+    id: id,
+}); };
+
+var createLoadCommand = function (state) { return ({
+    type: 'load',
+    apply: function (model) {
+        model.load(state);
+        return [{ type: 'load', entity: 'config', payload: {} }];
+    },
+}); };
+var createAddElementCommand = function (element) { return ({
+    type: 'addElement',
+    apply: function (model) {
+        model.addElement(element);
+        return [patchAdd('element', element.id, element)];
+    },
+}); };
+var createMoveElementCommand = function (id, position) { return ({
+    type: 'moveElement',
+    apply: function (model) {
+        model.moveElement(id, position);
+        return [patchUpdate('element', id, { position: position })];
+    },
+}); };
+var createResizeElementCommand = function (id, size) { return ({
+    type: 'resizeElement',
+    apply: function (model) {
+        var current = model.getElement(id);
+        var previousSize = current ? __assign({}, current.size) : undefined;
+        model.resizeElement(id, size);
+        return [patchUpdate('element', id, { size: size, previousSize: previousSize })];
+    },
+}); };
+var createRemoveElementCommand = function (id) { return ({
+    type: 'removeElement',
+    apply: function (model) {
+        model.removeElement(id);
+        return [patchRemove('element', id)];
+    },
+}); };
+var createSetElementLayoutCommand = function (id, layout) { return ({
+    type: 'setElementLayout',
+    apply: function (model) {
+        model.setElementLayout(id, layout);
+        return [patchUpdate('element', id, { layout: layout })];
+    },
+}); };
+var createAddPortCommand = function (port) { return ({
+    type: 'addPort',
+    apply: function (model) {
+        model.addPort(port);
+        return [patchAdd('port', port.id, port)];
+    },
+}); };
+var createMovePortCommand = function (id, update) { return ({
+    type: 'movePort',
+    apply: function (model) {
+        var _a, _b;
+        var hasCurrentAnchorId = Object.prototype.hasOwnProperty.call(update, 'currentAnchorId');
+        model.movePort(id, update.position);
+        if (hasCurrentAnchorId) {
+            model.setPortCurrentAnchorId(id, (_a = update.currentAnchorId) !== null && _a !== void 0 ? _a : undefined);
         }
-    };
-    ObstacleRouter.prototype.distanceToBounds = function (point, normal, bounds) {
-        if (normal.x < 0) {
-            return Math.max(0, point.x - bounds.x);
+        var payload = { position: update.position };
+        if (hasCurrentAnchorId) {
+            payload.currentAnchorId = (_b = update.currentAnchorId) !== null && _b !== void 0 ? _b : null;
         }
-        if (normal.x > 0) {
-            return Math.max(0, bounds.x + bounds.width - point.x);
+        return [patchUpdate('port', id, payload)];
+    },
+}); };
+var createRemovePortCommand = function (id) { return ({
+    type: 'removePort',
+    apply: function (model) {
+        model.removePort(id);
+        return [patchRemove('port', id)];
+    },
+}); };
+var createAddLinkCommand = function (link) { return ({
+    type: 'addLink',
+    apply: function (model) {
+        model.addLink(link);
+        return [patchAdd('link', link.id, link)];
+    },
+}); };
+var createUpdateLinkCommand = function (id, update) { return ({
+    type: 'updateLink',
+    apply: function (model) {
+        if (update.points !== undefined) {
+            model.updateLinkPoints(id, update.points);
         }
-        if (normal.y < 0) {
-            return Math.max(0, point.y - bounds.y);
+        if (update.routing !== undefined) {
+            model.setLinkRoutingMode(id, update.routing);
         }
-        return Math.max(0, bounds.y + bounds.height - point.y);
-    };
-    ObstacleRouter.prototype.distanceToObstacles = function (point, normal, obstacles, ignoreId) {
+        var payload = {};
+        if (update.points !== undefined)
+            payload.points = update.points;
+        if (update.routing !== undefined)
+            payload.routing = update.routing;
+        return [patchUpdate('link', id, payload)];
+    },
+}); };
+var createRemoveLinkCommand = function (id) { return ({
+    type: 'removeLink',
+    apply: function (model) {
+        model.removeLink(id);
+        return [patchRemove('link', id)];
+    },
+}); };
+var createAddTextCommand = function (text) { return ({
+    type: 'addText',
+    apply: function (model) {
+        model.addText(text);
+        return [patchAdd('text', text.id, text)];
+    },
+}); };
+var createUpdateTextCommand = function (id, content) { return ({
+    type: 'updateText',
+    apply: function (model) {
+        model.updateText(id, content);
+        return [patchUpdate('text', id, { content: content })];
+    },
+}); };
+var createMoveTextCommand = function (id, position) { return ({
+    type: 'moveText',
+    apply: function (model) {
+        model.moveText(id, position);
+        return [patchUpdate('text', id, { position: position })];
+    },
+}); };
+var createRemoveTextCommand = function (id) { return ({
+    type: 'removeText',
+    apply: function (model) {
+        model.removeText(id);
+        return [patchRemove('text', id)];
+    },
+}); };
+
+var RenderScheduler = /** @class */ (function () {
+    function RenderScheduler() {
+        this.pending = false;
+        this.lastCallback = null;
+    }
+    RenderScheduler.prototype.requestRender = function (callback) {
         var _this = this;
-        var limit = Number.POSITIVE_INFINITY;
-        var overlapsHorizontally = function (rect) {
-            return point.y >= rect.y - _this.tolerance && point.y <= rect.y + rect.height + _this.tolerance;
-        };
-        var overlapsVertically = function (rect) {
-            return point.x >= rect.x - _this.tolerance && point.x <= rect.x + rect.width + _this.tolerance;
-        };
-        obstacles.forEach(function (obstacle) {
-            if (ignoreId && obstacle.id === ignoreId)
-                return;
-            var rect = obstacle.rect;
-            if (normal.x < 0 && overlapsHorizontally(rect) && rect.x + rect.width <= point.x) {
-                var available = point.x - (rect.x + rect.width + _this.tolerance);
-                if (available < limit)
-                    limit = available;
-            }
-            else if (normal.x > 0 && overlapsHorizontally(rect) && rect.x >= point.x) {
-                var available = rect.x - _this.tolerance - point.x;
-                if (available < limit)
-                    limit = available;
-            }
-            else if (normal.y < 0 && overlapsVertically(rect) && rect.y + rect.height <= point.y) {
-                var available = point.y - (rect.y + rect.height + _this.tolerance);
-                if (available < limit)
-                    limit = available;
-            }
-            else if (normal.y > 0 && overlapsVertically(rect) && rect.y >= point.y) {
-                var available = rect.y - _this.tolerance - point.y;
-                if (available < limit)
-                    limit = available;
-            }
-        });
-        if (!Number.isFinite(limit))
-            return null;
-        return Math.max(0, limit);
-    };
-    ObstacleRouter.prototype.ensureEndpoints = function (points, source, target) {
-        if (points.length === 0)
-            return [__assign({}, source), __assign({}, target)];
-        var result = __spreadArray([], points, true);
-        if (result.length === 1) {
-            result.unshift(__assign({}, source));
-            result.push(__assign({}, target));
-            return result;
-        }
-        if (result[0].x !== source.x || result[0].y !== source.y) {
-            result.unshift(__assign({}, source));
-        }
-        var last = result[result.length - 1];
-        if (last.x !== target.x || last.y !== target.y) {
-            result.push(__assign({}, target));
-        }
-        return result;
-    };
-    ObstacleRouter.prototype.compactPreservingStubs = function (points, hasSourceStub, hasTargetStub) {
-        if (points.length <= 2)
-            return points.map(function (p) { return (__assign({}, p)); });
-        var deduped = [];
-        points.forEach(function (point) {
-            var last = deduped[deduped.length - 1];
-            if (!last || last.x !== point.x || last.y !== point.y) {
-                deduped.push(point);
+        this.lastCallback = callback;
+        if (this.pending)
+            return;
+        this.pending = true;
+        var schedule = typeof requestAnimationFrame !== 'undefined'
+            ? requestAnimationFrame
+            : function (cb) { return setTimeout(function () { return cb(Date.now()); }, 16); };
+        schedule(function () {
+            _this.pending = false;
+            var next = _this.lastCallback;
+            _this.lastCallback = null;
+            if (next) {
+                next();
             }
         });
-        if (deduped.length < 3)
-            return deduped.map(function (p) { return (__assign({}, p)); });
-        var result = [deduped[0]];
-        for (var i = 1; i < deduped.length - 1; i += 1) {
-            var prev = result[result.length - 1];
-            var current = deduped[i];
-            var next = deduped[i + 1];
-            var isFirstTurn = hasSourceStub && result.length === 1;
-            var isLastTurn = hasTargetStub && i === deduped.length - 2;
-            var collinear = (prev.x === current.x && current.x === next.x) || (prev.y === current.y && current.y === next.y);
-            if (collinear && !isFirstTurn && !isLastTurn) {
-                continue;
-            }
-            result.push(current);
-        }
-        result.push(deduped[deduped.length - 1]);
-        return result.map(function (p) { return (__assign({}, p)); });
     };
-    return ObstacleRouter;
+    return RenderScheduler;
 }());
 
 var DefaultSnapper = /** @class */ (function () {
@@ -5376,28 +5691,92 @@ var AutoLayoutService = /** @class */ (function () {
         this.commandQueue = config.commandQueue;
         this.collectElementPortIds = config.collectElementPortIds;
     }
-    AutoLayoutService.prototype.applyLayoutForParent = function (parentId) {
-        var _a;
-        var _this = this;
-        var _b, _c, _d, _e;
+    AutoLayoutService.prototype.applyLayoutForParent = function (parentId, options) {
         var parent = this.model.getElement(parentId);
         if (!parent)
             return { patches: [], movedPortIds: [] };
         var layout = parent.layout;
         if (!layout || layout.mode === 'manual')
             return { patches: [], movedPortIds: [] };
+        var preserveParentSize = Boolean(options === null || options === void 0 ? void 0 : options.preserveParentSize);
+        var padding = this.resolveLayoutPadding(layout);
+        var labelReservedTopLane = this.resolveLabelReservedTopLane(parentId, layout);
+        var autoResize = this.resolveAutoResizeMode(layout);
         var children = this.model.getChildren(parentId);
-        if (children.length === 0)
-            return { patches: [], movedPortIds: [] };
-        var axis = layout.mode;
+        if (children.length === 0) {
+            if (preserveParentSize) {
+                return { patches: [], movedPortIds: [] };
+            }
+            if (autoResize !== 'grow-shrink')
+                return { patches: [], movedPortIds: [] };
+            var targetWidth = Math.max(0, Math.round(padding.x * 2));
+            var targetHeight = Math.max(0, Math.round(padding.y * 2 + labelReservedTopLane));
+            if (parent.size.width === targetWidth && parent.size.height === targetHeight) {
+                return { patches: [], movedPortIds: [] };
+            }
+            var resizePatches = this.commandQueue.run(createResizeElementCommand(parentId, { width: targetWidth, height: targetHeight }), this.model);
+            return { patches: resizePatches, movedPortIds: __spreadArray([], parent.portIds, true) };
+        }
+        if (layout.mode === 'grid') {
+            return this.applyGridLayoutForParent(parentId, parent, children, preserveParentSize);
+        }
+        return this.applyAxisLayoutForParent(parentId, parent, children, layout.mode, preserveParentSize);
+    };
+    AutoLayoutService.prototype.applyLayoutCascade = function (startParentId) {
+        var _a;
+        var patches = [];
+        var movedPortIds = [];
+        var visited = new Set();
+        var current = startParentId;
+        while (current) {
+            if (visited.has(current))
+                break;
+            visited.add(current);
+            var result = this.applyLayoutForParent(current);
+            patches.push.apply(patches, result.patches);
+            movedPortIds.push.apply(movedPortIds, result.movedPortIds);
+            var parent_1 = this.model.getElement(current);
+            current = (_a = parent_1 === null || parent_1 === void 0 ? void 0 : parent_1.parentId) !== null && _a !== void 0 ? _a : null;
+        }
+        return { patches: patches, movedPortIds: Array.from(new Set(movedPortIds)) };
+    };
+    AutoLayoutService.prototype.applyAllLayouts = function () {
+        var _this = this;
+        var layoutParents = Array.from(this.model.elements.values()).filter(function (element) { return element.layout && element.layout.mode !== 'manual'; });
+        var patches = [];
+        var movedPortIds = [];
+        var depth = function (elementId) {
+            var level = 0;
+            var current = _this.model.getElement(elementId);
+            while (current === null || current === void 0 ? void 0 : current.parentId) {
+                level += 1;
+                current = _this.model.getElement(current.parentId);
+            }
+            return level;
+        };
+        layoutParents
+            .sort(function (a, b) { return depth(b.id) - depth(a.id); })
+            .forEach(function (element) {
+            var result = _this.applyLayoutForParent(element.id);
+            patches.push.apply(patches, result.patches);
+            movedPortIds.push.apply(movedPortIds, result.movedPortIds);
+        });
+        return { patches: patches, movedPortIds: Array.from(new Set(movedPortIds)) };
+    };
+    AutoLayoutService.prototype.applyAxisLayoutForParent = function (parentId, parent, children, axis, preserveParentSize) {
+        var _a, _b;
+        var _this = this;
+        var _c, _d, _e, _f;
+        if (preserveParentSize === void 0) { preserveParentSize = false; }
+        var layout = parent.layout;
         var padding = this.resolveLayoutPadding(layout);
-        var gap = (_b = layout.gap) !== null && _b !== void 0 ? _b : 12;
-        var align = (_c = layout.align) !== null && _c !== void 0 ? _c : 'center';
-        var childFitMainAxis = (_d = layout.childFitMainAxis) !== null && _d !== void 0 ? _d : 'none';
-        var childFitCrossAxis = (_e = layout.childFitCrossAxis) !== null && _e !== void 0 ? _e : 'none';
-        var childFitMinSize = layout.childFitMinSize;
-        var childFitMaxSize = layout.childFitMaxSize;
+        var gap = (_c = layout === null || layout === void 0 ? void 0 : layout.gap) !== null && _c !== void 0 ? _c : 12;
+        var align = (_d = layout === null || layout === void 0 ? void 0 : layout.align) !== null && _d !== void 0 ? _d : 'center';
+        var childFitMainAxis = (_e = layout === null || layout === void 0 ? void 0 : layout.childFitMainAxis) !== null && _e !== void 0 ? _e : 'none';
+        var childFitCrossAxis = (_f = layout === null || layout === void 0 ? void 0 : layout.childFitCrossAxis) !== null && _f !== void 0 ? _f : 'none';
         var labelReservedTopLane = this.resolveLabelReservedTopLane(parentId, layout);
+        var constraints = this.resolveChildSizeConstraints(layout);
+        var autoResize = this.resolveAutoResizeMode(layout);
         var sorted = __spreadArray([], children, true).sort(function (a, b) {
             var aPos = axis === 'horizontal' ? a.position.x : a.position.y;
             var bPos = axis === 'horizontal' ? b.position.x : b.position.y;
@@ -5413,16 +5792,11 @@ var AutoLayoutService = /** @class */ (function () {
                 ? Math.max(0, availableWidth - gap * gapCount)
                 : Math.max(0, availableHeight - gap * gapCount);
             var distributedMainSizes = childFitMainAxis === 'distribute'
-                ? _this.distributeLayoutSizes(availableMain, sorted.length, sorted.map(function () { var _a, _b; return axis === 'horizontal' ? (_a = childFitMinSize === null || childFitMinSize === void 0 ? void 0 : childFitMinSize.width) !== null && _a !== void 0 ? _a : 0 : (_b = childFitMinSize === null || childFitMinSize === void 0 ? void 0 : childFitMinSize.height) !== null && _b !== void 0 ? _b : 0; }), sorted.map(function () {
-                    var _a, _b;
-                    return axis === 'horizontal'
-                        ? (_a = childFitMaxSize === null || childFitMaxSize === void 0 ? void 0 : childFitMaxSize.width) !== null && _a !== void 0 ? _a : Number.POSITIVE_INFINITY
-                        : (_b = childFitMaxSize === null || childFitMaxSize === void 0 ? void 0 : childFitMaxSize.height) !== null && _b !== void 0 ? _b : Number.POSITIVE_INFINITY;
-                }))
+                ? _this.distributeLayoutSizes(availableMain, sorted.length, sorted.map(function () { return (axis === 'horizontal' ? constraints.minWidth : constraints.minHeight); }), sorted.map(function () { return (axis === 'horizontal' ? constraints.maxWidth : constraints.maxHeight); }))
                 : null;
             return sorted.map(function (child, index) {
-                var width = child.size.width;
-                var height = child.size.height;
+                var width = _this.clampLayoutSize(child.size.width, constraints.minWidth, constraints.maxWidth);
+                var height = _this.clampLayoutSize(child.size.height, constraints.minHeight, constraints.maxHeight);
                 if (distributedMainSizes) {
                     if (axis === 'horizontal') {
                         width = distributedMainSizes[index];
@@ -5440,8 +5814,8 @@ var AutoLayoutService = /** @class */ (function () {
                     }
                 }
                 return {
-                    width: _this.clampLayoutSize(width, childFitMinSize === null || childFitMinSize === void 0 ? void 0 : childFitMinSize.width, childFitMaxSize === null || childFitMaxSize === void 0 ? void 0 : childFitMaxSize.width),
-                    height: _this.clampLayoutSize(height, childFitMinSize === null || childFitMinSize === void 0 ? void 0 : childFitMinSize.height, childFitMaxSize === null || childFitMaxSize === void 0 ? void 0 : childFitMaxSize.height),
+                    width: _this.clampLayoutSize(width, constraints.minWidth, constraints.maxWidth),
+                    height: _this.clampLayoutSize(height, constraints.minHeight, constraints.maxHeight),
                 };
             });
         };
@@ -5451,20 +5825,34 @@ var AutoLayoutService = /** @class */ (function () {
             var totalWidth = fittedSizes.reduce(function (sum, size) { return sum + size.width; }, 0);
             var totalHeight = fittedSizes.reduce(function (sum, size) { return sum + size.height; }, 0);
             if (axis === 'horizontal') {
+                var requiredWidth_1 = padding.x * 2 + totalWidth + gap * gapCount;
+                var requiredHeight_1 = padding.y * 2 + labelReservedTopLane + maxHeight;
                 return {
-                    width: Math.max(parent.size.width, padding.x * 2 + totalWidth + gap * gapCount),
-                    height: Math.max(parent.size.height, padding.y * 2 + labelReservedTopLane + maxHeight),
+                    width: _this.resolveAutoResizedDimension(parent.size.width, requiredWidth_1, autoResize),
+                    height: _this.resolveAutoResizedDimension(parent.size.height, requiredHeight_1, autoResize),
                 };
             }
+            var requiredWidth = padding.x * 2 + maxWidth;
+            var requiredHeight = padding.y * 2 + labelReservedTopLane + totalHeight + gap * gapCount;
             return {
-                width: Math.max(parent.size.width, padding.x * 2 + maxWidth),
-                height: Math.max(parent.size.height, padding.y * 2 + labelReservedTopLane + totalHeight + gap * gapCount),
+                width: _this.resolveAutoResizedDimension(parent.size.width, requiredWidth, autoResize),
+                height: _this.resolveAutoResizedDimension(parent.size.height, requiredHeight, autoResize),
             };
         };
-        var fittedSizes = calculateFittedSizes(parent.size.width, parent.size.height);
-        var _f = resolveParentSize(fittedSizes), newParentWidth = _f.width, newParentHeight = _f.height;
-        fittedSizes = calculateFittedSizes(newParentWidth, newParentHeight);
-        (_a = resolveParentSize(fittedSizes), newParentWidth = _a.width, newParentHeight = _a.height);
+        var preservedParentWidth = Math.max(0, Math.round(parent.size.width));
+        var preservedParentHeight = Math.max(0, Math.round(parent.size.height));
+        var fittedSizes = calculateFittedSizes(preservedParentWidth, preservedParentHeight);
+        var newParentWidth;
+        var newParentHeight;
+        if (preserveParentSize) {
+            newParentWidth = preservedParentWidth;
+            newParentHeight = preservedParentHeight;
+        }
+        else {
+            (_a = resolveParentSize(fittedSizes), newParentWidth = _a.width, newParentHeight = _a.height);
+            fittedSizes = calculateFittedSizes(newParentWidth, newParentHeight);
+            (_b = resolveParentSize(fittedSizes), newParentWidth = _b.width, newParentHeight = _b.height);
+        }
         var availableWidth = Math.max(0, newParentWidth - padding.x * 2);
         var availableHeight = Math.max(0, newParentHeight - padding.y * 2 - labelReservedTopLane);
         var cursorX = padding.x;
@@ -5493,6 +5881,99 @@ var AutoLayoutService = /** @class */ (function () {
                 cursorY += fittedSize.height + (index < sorted.length - 1 ? gap : 0);
             }
         });
+        return this.applyResolvedLayout(parentId, parent, desiredPositions, desiredSizes, {
+            width: newParentWidth,
+            height: newParentHeight,
+        });
+    };
+    AutoLayoutService.prototype.applyGridLayoutForParent = function (parentId, parent, children, preserveParentSize) {
+        var _this = this;
+        var _a, _b;
+        if (preserveParentSize === void 0) { preserveParentSize = false; }
+        var layout = parent.layout;
+        var padding = this.resolveLayoutPadding(layout);
+        var gap = (_a = layout === null || layout === void 0 ? void 0 : layout.gap) !== null && _a !== void 0 ? _a : 12;
+        var align = (_b = layout === null || layout === void 0 ? void 0 : layout.align) !== null && _b !== void 0 ? _b : 'center';
+        var labelReservedTopLane = this.resolveLabelReservedTopLane(parentId, layout);
+        var constraints = this.resolveChildSizeConstraints(layout);
+        var autoResize = this.resolveAutoResizeMode(layout);
+        // Keep grid child ordering stable across resize/layout cycles.
+        // Grid slot assignment should not depend on transient child positions produced during drag.
+        var sorted = __spreadArray([], children, true);
+        var templateRows = this.normalizeGridTemplate(layout === null || layout === void 0 ? void 0 : layout.gridTemplate);
+        var assignedRows = this.assignChildrenToGridRows(sorted.map(function (child) { return child.id; }), templateRows);
+        var rowMetrics = assignedRows.map(function (row) {
+            var effectiveWeights = row.weights.slice(0, row.childIds.length);
+            var clampedSizes = row.childIds.map(function (childId) {
+                var child = _this.model.getElement(childId);
+                var width = child ? child.size.width : 0;
+                var height = child ? child.size.height : 0;
+                return {
+                    width: _this.clampLayoutSize(width, constraints.minWidth, constraints.maxWidth),
+                    height: _this.clampLayoutSize(height, constraints.minHeight, constraints.maxHeight),
+                };
+            });
+            var rowHeight = clampedSizes.reduce(function (max, size) { return Math.max(max, size.height); }, 0);
+            var rowWidth = clampedSizes.reduce(function (sum, size) { return sum + size.width; }, 0) + Math.max(0, clampedSizes.length - 1) * gap;
+            return {
+                row: row,
+                rowHeight: rowHeight,
+                rowWidth: rowWidth,
+                effectiveWeights: effectiveWeights,
+            };
+        });
+        var requiredInnerWidth = rowMetrics.reduce(function (max, metric) { return Math.max(max, metric.rowWidth); }, 0);
+        var requiredInnerHeight = rowMetrics.reduce(function (sum, metric) { return sum + metric.rowHeight; }, 0) + Math.max(0, rowMetrics.length - 1) * gap;
+        var newParentWidth = preserveParentSize
+            ? Math.max(0, Math.round(parent.size.width))
+            : this.resolveAutoResizedDimension(parent.size.width, padding.x * 2 + requiredInnerWidth, autoResize);
+        var newParentHeight = preserveParentSize
+            ? Math.max(0, Math.round(parent.size.height))
+            : this.resolveAutoResizedDimension(parent.size.height, padding.y * 2 + labelReservedTopLane + requiredInnerHeight, autoResize);
+        var availableWidth = Math.max(0, newParentWidth - padding.x * 2);
+        var availableHeight = Math.max(0, newParentHeight - padding.y * 2 - labelReservedTopLane);
+        var contentHeight = requiredInnerHeight;
+        var blockOffsetY = align === 'start'
+            ? 0
+            : align === 'end'
+                ? Math.max(0, availableHeight - contentHeight)
+                : Math.max(0, (availableHeight - contentHeight) / 2);
+        var cursorY = padding.y + labelReservedTopLane + blockOffsetY;
+        var desiredPositions = new Map();
+        var desiredSizes = new Map();
+        rowMetrics.forEach(function (metric) {
+            var childCount = metric.row.childIds.length;
+            if (childCount <= 0)
+                return;
+            var totalGap = Math.max(0, childCount - 1) * gap;
+            var rowInnerWidth = Math.max(0, availableWidth - totalGap);
+            var cellWidths = _this.distributeWeightedSizes(rowInnerWidth, metric.effectiveWeights);
+            var rowHeight = metric.rowHeight;
+            var cursorX = padding.x;
+            metric.row.childIds.forEach(function (childId, index) {
+                var _a;
+                var cellWidth = (_a = cellWidths[index]) !== null && _a !== void 0 ? _a : 0;
+                var targetWidth = _this.clampLayoutSize(cellWidth, constraints.minWidth, constraints.maxWidth);
+                var targetHeight = _this.clampLayoutSize(rowHeight, constraints.minHeight, constraints.maxHeight);
+                var offsetX = _this.resolveAlignmentOffset(align, cellWidth, targetWidth);
+                var offsetY = _this.resolveAlignmentOffset(align, rowHeight, targetHeight);
+                desiredSizes.set(childId, { width: targetWidth, height: targetHeight });
+                desiredPositions.set(childId, {
+                    x: cursorX + offsetX,
+                    y: cursorY + offsetY,
+                });
+                cursorX += cellWidth + gap;
+            });
+            cursorY += rowHeight + gap;
+        });
+        return this.applyResolvedLayout(parentId, parent, desiredPositions, desiredSizes, {
+            width: newParentWidth,
+            height: newParentHeight,
+        });
+    };
+    AutoLayoutService.prototype.applyResolvedLayout = function (parentId, parent, desiredPositions, desiredSizes, parentSize) {
+        var _this = this;
+        var _a;
         var patches = [];
         var movedPortIds = [];
         desiredPositions.forEach(function (position, childId) {
@@ -5514,54 +5995,13 @@ var AutoLayoutService = /** @class */ (function () {
                 movedPortIds.push.apply(movedPortIds, nested.movedPortIds);
             }
         });
-        if (newParentWidth !== parent.size.width || newParentHeight !== parent.size.height) {
-            var resizePatches = this.commandQueue.run(createResizeElementCommand(parentId, { width: newParentWidth, height: newParentHeight }), this.model);
+        if (parentSize.width !== parent.size.width || parentSize.height !== parent.size.height) {
+            var resizePatches = this.commandQueue.run(createResizeElementCommand(parentId, parentSize), this.model);
             patches.push.apply(patches, resizePatches);
-            movedPortIds.push.apply(movedPortIds, parent.portIds);
-        }
-        return { patches: patches, movedPortIds: Array.from(new Set(movedPortIds)) };
-    };
-    AutoLayoutService.prototype.applyLayoutCascade = function (startParentId) {
-        var _a;
-        var patches = [];
-        var movedPortIds = [];
-        var visited = new Set();
-        var current = startParentId;
-        while (current) {
-            if (visited.has(current))
-                break;
-            visited.add(current);
-            var result = this.applyLayoutForParent(current);
-            patches.push.apply(patches, result.patches);
-            movedPortIds.push.apply(movedPortIds, result.movedPortIds);
-            var parent_1 = this.model.getElement(current);
-            current = (_a = parent_1 === null || parent_1 === void 0 ? void 0 : parent_1.parentId) !== null && _a !== void 0 ? _a : null;
+            movedPortIds.push.apply(movedPortIds, ((_a = parent.portIds) !== null && _a !== void 0 ? _a : []));
         }
         return { patches: patches, movedPortIds: Array.from(new Set(movedPortIds)) };
     };
-    AutoLayoutService.prototype.applyAllLayouts = function () {
-        var _this = this;
-        var layoutParents = Array.from(this.model.elements.values()).filter(function (element) { return element.layout && element.layout.mode !== 'manual'; });
-        var patches = [];
-        var movedPortIds = [];
-        var depth = function (elementId) {
-            var level = 0;
-            var current = _this.model.getElement(elementId);
-            while (current === null || current === void 0 ? void 0 : current.parentId) {
-                level += 1;
-                current = _this.model.getElement(current.parentId);
-            }
-            return level;
-        };
-        layoutParents
-            .sort(function (a, b) { return depth(b.id) - depth(a.id); })
-            .forEach(function (element) {
-            var result = _this.applyLayoutForParent(element.id);
-            patches.push.apply(patches, result.patches);
-            movedPortIds.push.apply(movedPortIds, result.movedPortIds);
-        });
-        return { patches: patches, movedPortIds: Array.from(new Set(movedPortIds)) };
-    };
     AutoLayoutService.prototype.resolveLayoutPadding = function (layout) {
         var _a, _b, _c;
         var padding = (_a = layout === null || layout === void 0 ? void 0 : layout.padding) !== null && _a !== void 0 ? _a : 12;
@@ -5572,6 +6012,92 @@ var AutoLayoutService = /** @class */ (function () {
             y: (_c = padding.y) !== null && _c !== void 0 ? _c : 12,
         };
     };
+    AutoLayoutService.prototype.resolveAutoResizeMode = function (layout) {
+        return (layout === null || layout === void 0 ? void 0 : layout.autoResize) === 'grow-shrink' ? 'grow-shrink' : 'grow';
+    };
+    AutoLayoutService.prototype.resolveAutoResizedDimension = function (current, required, mode) {
+        var safeRequired = Math.max(0, Math.round(required));
+        return mode === 'grow-shrink' ? safeRequired : Math.max(Math.max(0, current), safeRequired);
+    };
+    AutoLayoutService.prototype.resolveChildSizeConstraints = function (layout) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var minWidth = Math.max(0, (_c = (_a = layout === null || layout === void 0 ? void 0 : layout.childMinWidth) !== null && _a !== void 0 ? _a : (_b = layout === null || layout === void 0 ? void 0 : layout.childFitMinSize) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : 0);
+        var minHeight = Math.max(0, (_f = (_d = layout === null || layout === void 0 ? void 0 : layout.childMinHeight) !== null && _d !== void 0 ? _d : (_e = layout === null || layout === void 0 ? void 0 : layout.childFitMinSize) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : 0);
+        var resolvedMaxWidth = (_g = layout === null || layout === void 0 ? void 0 : layout.childMaxWidth) !== null && _g !== void 0 ? _g : (_h = layout === null || layout === void 0 ? void 0 : layout.childFitMaxSize) === null || _h === void 0 ? void 0 : _h.width;
+        var resolvedMaxHeight = (_j = layout === null || layout === void 0 ? void 0 : layout.childMaxHeight) !== null && _j !== void 0 ? _j : (_k = layout === null || layout === void 0 ? void 0 : layout.childFitMaxSize) === null || _k === void 0 ? void 0 : _k.height;
+        var maxWidth = Number.isFinite(resolvedMaxWidth !== null && resolvedMaxWidth !== void 0 ? resolvedMaxWidth : Number.NaN)
+            ? Math.max(minWidth, resolvedMaxWidth)
+            : Number.POSITIVE_INFINITY;
+        var maxHeight = Number.isFinite(resolvedMaxHeight !== null && resolvedMaxHeight !== void 0 ? resolvedMaxHeight : Number.NaN)
+            ? Math.max(minHeight, resolvedMaxHeight)
+            : Number.POSITIVE_INFINITY;
+        return { minWidth: minWidth, maxWidth: maxWidth, minHeight: minHeight, maxHeight: maxHeight };
+    };
+    AutoLayoutService.prototype.normalizeGridTemplate = function (template) {
+        var rows = [];
+        (template !== null && template !== void 0 ? template : []).forEach(function (entry) {
+            if (typeof entry === 'number') {
+                var count = Math.max(0, Math.floor(entry));
+                if (count > 0) {
+                    rows.push({ weights: Array.from({ length: count }, function () { return 1; }) });
+                }
+                return;
+            }
+            if (!Array.isArray(entry))
+                return;
+            if (entry.length === 1 && Number.isFinite(entry[0]) && entry[0] > 1) {
+                var count = Math.max(0, Math.floor(entry[0]));
+                if (count > 0) {
+                    rows.push({ weights: Array.from({ length: count }, function () { return 1; }) });
+                }
+                return;
+            }
+            var weights = entry
+                .map(function (value) {
+                if (!Number.isFinite(value) || value <= 0)
+                    return 1;
+                return value;
+            })
+                .filter(function (value) { return value > 0; });
+            if (weights.length > 0) {
+                rows.push({ weights: weights });
+            }
+        });
+        if (rows.length === 0) {
+            rows.push({ weights: [1] });
+        }
+        return rows;
+    };
+    AutoLayoutService.prototype.assignChildrenToGridRows = function (childIds, templateRows) {
+        var _a;
+        var assigned = [];
+        var cursor = 0;
+        templateRows.forEach(function (rowTemplate) {
+            if (cursor >= childIds.length)
+                return;
+            var rowChildren = childIds.slice(cursor, cursor + rowTemplate.weights.length);
+            if (rowChildren.length === 0)
+                return;
+            assigned.push({
+                weights: rowTemplate.weights,
+                childIds: rowChildren,
+            });
+            cursor += rowChildren.length;
+        });
+        while (cursor < childIds.length) {
+            var remaining = childIds.length - cursor;
+            var lastRow = templateRows[templateRows.length - 1];
+            var fallbackColumns = (_a = lastRow === null || lastRow === void 0 ? void 0 : lastRow.weights.length) !== null && _a !== void 0 ? _a : 1;
+            var fallbackCount = Math.max(1, Math.min(remaining, fallbackColumns));
+            var rowChildren = childIds.slice(cursor, cursor + fallbackCount);
+            assigned.push({
+                weights: Array.from({ length: rowChildren.length }, function () { return 1; }),
+                childIds: rowChildren,
+            });
+            cursor += rowChildren.length;
+        }
+        return assigned;
+    };
     AutoLayoutService.prototype.resolveLabelReservedTopLane = function (parentId, layout) {
         var _a, _b, _c, _d;
         var policy = layout === null || layout === void 0 ? void 0 : layout.labelReservedSpace;
@@ -5611,11 +6137,43 @@ var AutoLayoutService = /** @class */ (function () {
         });
         return Math.max(0, lane);
     };
+    AutoLayoutService.prototype.resolveAlignmentOffset = function (align, container, content) {
+        var delta = Math.max(0, container - content);
+        if (align === 'start')
+            return 0;
+        if (align === 'end')
+            return delta;
+        return delta / 2;
+    };
     AutoLayoutService.prototype.clampLayoutSize = function (value, min, max) {
         var minValue = min !== null && min !== void 0 ? min : 0;
         var maxValue = max !== null && max !== void 0 ? max : Number.POSITIVE_INFINITY;
         return Math.max(minValue, Math.min(maxValue, value));
     };
+    AutoLayoutService.prototype.distributeWeightedSizes = function (total, weights) {
+        if (weights.length === 0)
+            return [];
+        var safeTotal = Math.max(0, total);
+        var normalized = weights.map(function (weight) { return (Number.isFinite(weight) && weight > 0 ? weight : 1); });
+        var sumWeights = normalized.reduce(function (sum, weight) { return sum + weight; }, 0);
+        if (sumWeights <= 0) {
+            return Array.from({ length: normalized.length }, function () { return 0; });
+        }
+        var raw = normalized.map(function (weight) { return (safeTotal * weight) / sumWeights; });
+        var floored = raw.map(function (value) { return Math.floor(value); });
+        var remainder = Math.max(0, Math.round(safeTotal - floored.reduce(function (sum, value) { return sum + value; }, 0)));
+        var fractions = raw
+            .map(function (value, index) { return ({ index: index, fraction: value - floored[index] }); })
+            .sort(function (a, b) { return b.fraction - a.fraction || a.index - b.index; });
+        var cursor = 0;
+        while (remainder > 0 && fractions.length > 0) {
+            var index = fractions[cursor % fractions.length].index;
+            floored[index] += 1;
+            remainder -= 1;
+            cursor += 1;
+        }
+        return floored;
+    };
     AutoLayoutService.prototype.distributeLayoutSizes = function (total, count, minValues, maxValues) {
         if (count <= 0)
             return [];
@@ -5834,6 +6392,35 @@ var LinkRoutingService = /** @class */ (function () {
         });
         return patches;
     };
+    LinkRoutingService.prototype.refreshLinksForRedraw = function (options) {
+        var _this = this;
+        var includeManual = Boolean(options === null || options === void 0 ? void 0 : options.includeManual);
+        var patches = [];
+        var links = Array.from(this.model.links.values()).sort(function (a, b) { return a.id.localeCompare(b.id); });
+        links.forEach(function (link) {
+            var _a;
+            if (link.points.length < 2)
+                return;
+            var routing = (_a = link.routing) !== null && _a !== void 0 ? _a : 'auto';
+            if (routing === 'manual' && !includeManual)
+                return;
+            var endpoints = _this.resolveLinkEndpoints(link);
+            var source = endpoints.source;
+            var target = endpoints.target;
+            if (!source || !target)
+                return;
+            var first = link.points[0];
+            var last = link.points[link.points.length - 1];
+            var sourceChanged = !_this.pointsEqual(first, source);
+            var targetChanged = !_this.pointsEqual(last, target);
+            if (!sourceChanged || !targetChanged)
+                return;
+            var points = _this.resolveLinkPointsForUpdate(link, source, target);
+            var linkPatches = _this.commandQueue.run(createUpdateLinkCommand(link.id, { points: points }), _this.model);
+            patches.push.apply(patches, linkPatches);
+        });
+        return patches;
+    };
     LinkRoutingService.prototype.getPortLinkWorldPosition = function (portId, options) {
         var _a;
         var port = this.model.getPort(portId);
@@ -5911,6 +6498,9 @@ var LinkRoutingService = /** @class */ (function () {
             return __assign({}, point);
         });
     };
+    LinkRoutingService.prototype.pointsEqual = function (a, b) {
+        return Math.abs(a.x - b.x) <= POSITION_EPSILON$1 && Math.abs(a.y - b.y) <= POSITION_EPSILON$1;
+    };
     LinkRoutingService.prototype.buildRouteContext = function (link) {
         var _this = this;
         var _a, _b;
@@ -5933,6 +6523,8 @@ var LinkRoutingService = /** @class */ (function () {
         var targetOnEdge = (_b = targetEndpointGeometry === null || targetEndpointGeometry === void 0 ? void 0 : targetEndpointGeometry.onEdge) !== null && _b !== void 0 ? _b : false;
         var ancestorExclusions = this.getAncestorExclusions(sourceElementId, targetElementId);
         var _c = this.resolveRouteBounds(sourceElementId, targetElementId), bounds = _c.bounds, boundsElementId = _c.boundsElementId;
+        var commonAncestorCorridor = this.resolveCommonAncestorCorridorHint(sourceElementId, targetElementId);
+        var effectiveBounds = bounds !== null && bounds !== void 0 ? bounds : commonAncestorCorridor === null || commonAncestorCorridor === void 0 ? void 0 : commonAncestorCorridor.bounds;
         var forcedObstacles = new Set();
         if (sourceElementId && sourceOnEdge)
             forcedObstacles.add(sourceElementId);
@@ -5975,7 +6567,7 @@ var LinkRoutingService = /** @class */ (function () {
             sourcePortId: link.sourcePortId,
             targetPortId: link.targetPortId,
             obstacles: obstacles,
-            bounds: bounds,
+            bounds: effectiveBounds,
             sourceEndpoint: sourcePosition && sourceRect
                 ? {
                     elementId: sourceElementId !== null && sourceElementId !== void 0 ? sourceElementId : undefined,
@@ -5990,6 +6582,48 @@ var LinkRoutingService = /** @class */ (function () {
                     onEdgeSide: targetEndpointGeometry === null || targetEndpointGeometry === void 0 ? void 0 : targetEndpointGeometry.onEdgeSide,
                 }
                 : undefined,
+            commonAncestorCorridor: commonAncestorCorridor,
+        };
+    };
+    LinkRoutingService.prototype.resolveCommonAncestorCorridorHint = function (sourceElementId, targetElementId) {
+        if (!sourceElementId || !targetElementId)
+            return undefined;
+        if (sourceElementId === targetElementId)
+            return undefined;
+        var sourceElement = this.model.getElement(sourceElementId);
+        var targetElement = this.model.getElement(targetElementId);
+        if (!sourceElement || !targetElement)
+            return undefined;
+        if (sourceElement.parentId === targetElement.parentId)
+            return undefined;
+        if (this.isAncestorOf(sourceElementId, targetElementId) || this.isAncestorOf(targetElementId, sourceElementId)) {
+            return undefined;
+        }
+        var commonAncestorId = this.getFirstCommonAncestorId(sourceElementId, targetElementId);
+        if (!commonAncestorId)
+            return undefined;
+        var commonBounds = this.getElementRect(commonAncestorId);
+        if (!commonBounds)
+            return undefined;
+        var sourceBranchId = this.resolveImmediateChildUnderAncestor(sourceElementId, commonAncestorId);
+        var targetBranchId = this.resolveImmediateChildUnderAncestor(targetElementId, commonAncestorId);
+        if (!sourceBranchId || !targetBranchId || sourceBranchId === targetBranchId)
+            return undefined;
+        var sourceBranchRect = this.getElementRect(sourceBranchId);
+        var targetBranchRect = this.getElementRect(targetBranchId);
+        if (!sourceBranchRect || !targetBranchRect)
+            return undefined;
+        var horizontalSeparation = sourceBranchRect.x + sourceBranchRect.width <= targetBranchRect.x ||
+            targetBranchRect.x + targetBranchRect.width <= sourceBranchRect.x;
+        var axis = horizontalSeparation ? 'horizontal' : 'vertical';
+        return {
+            ancestorId: commonAncestorId,
+            bounds: commonBounds,
+            sourceBranchId: sourceBranchId,
+            targetBranchId: targetBranchId,
+            sourceBranchRect: sourceBranchRect,
+            targetBranchRect: targetBranchRect,
+            axis: axis,
         };
     };
     LinkRoutingService.prototype.resolveEndpointGeometry = function (point, rect, elementId, oppositePoint) {
@@ -6094,6 +6728,34 @@ var LinkRoutingService = /** @class */ (function () {
         }
         return chain;
     };
+    LinkRoutingService.prototype.getFirstCommonAncestorId = function (sourceElementId, targetElementId) {
+        var sourceChain = this.getAncestorChain(sourceElementId);
+        var targetSet = new Set(this.getAncestorChain(targetElementId));
+        for (var i = 0; i < sourceChain.length; i += 1) {
+            var candidate = sourceChain[i];
+            if (targetSet.has(candidate))
+                return candidate;
+        }
+        return null;
+    };
+    LinkRoutingService.prototype.resolveImmediateChildUnderAncestor = function (elementId, ancestorId) {
+        var _a;
+        if (elementId === ancestorId)
+            return null;
+        var currentId = elementId;
+        var previousId = null;
+        while (currentId) {
+            var current = this.model.getElement(currentId);
+            if (!current)
+                return null;
+            if (current.id === ancestorId) {
+                return previousId;
+            }
+            previousId = current.id;
+            currentId = (_a = current.parentId) !== null && _a !== void 0 ? _a : null;
+        }
+        return null;
+    };
     LinkRoutingService.prototype.getAncestorExclusions = function (sourceElementId, targetElementId) {
         var exclusions = new Set();
         if (sourceElementId) {
@@ -6200,10 +6862,41 @@ var snapToRectBorder = function (point, rect) {
 };
 var POSITION_EPSILON = 1e-6;
 var ANCHOR_PRESET_FALLBACK_ORDER = ['vertices', 'cardinal'];
+var DEFAULT_LINK_COLOR_POOL = [
+    '#1f77b4',
+    '#ff7f0e',
+    '#2ca02c',
+    '#d62728',
+    '#9467bd',
+    '#8c564b',
+    '#e377c2',
+    '#7f7f7f',
+    '#bcbd22',
+    '#17becf',
+    '#4e79a7',
+    '#f28e2b',
+    '#e15759',
+    '#76b7b2',
+    '#59a14f',
+    '#edc948',
+    '#b07aa1',
+    '#ff9da7',
+    '#9c755f',
+    '#bab0ab',
+];
+var normalizeLinkColorPoolPolicy = function (policy) {
+    var _a;
+    var enabled = Boolean(policy === null || policy === void 0 ? void 0 : policy.enabled);
+    var normalizedColors = ((_a = policy === null || policy === void 0 ? void 0 : policy.colors) !== null && _a !== void 0 ? _a : [])
+        .map(function (color) { return color.trim(); })
+        .filter(function (color) { return color.length > 0; });
+    var colors = normalizedColors.length > 0 ? normalizedColors : __spreadArray([], DEFAULT_LINK_COLOR_POOL, true);
+    return { enabled: enabled, colors: colors };
+};
 var DiagramEngine = /** @class */ (function () {
     function DiagramEngine(config) {
         var _this = this;
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         this.model = new DiagramModel();
         this.events = new EventBus();
         this.commandQueue = new CommandQueue();
@@ -6227,6 +6920,11 @@ var DiagramEngine = /** @class */ (function () {
             router: router,
             shapeRegistry: this.shapeRegistry,
         });
+        this.linkRouteRefreshPolicy = {
+            mode: (_g = (_f = config.linkRouteRefreshPolicy) === null || _f === void 0 ? void 0 : _f.mode) !== null && _g !== void 0 ? _g : 'mutation-only',
+            includeManual: Boolean((_h = config.linkRouteRefreshPolicy) === null || _h === void 0 ? void 0 : _h.includeManual),
+        };
+        this.linkColorPoolPolicy = normalizeLinkColorPoolPolicy(config.linkColorPoolPolicy);
         this.mutationPipeline = new MutationPipeline({
             routeLinksWithEmptyPoints: function () { return _this.routeLinksWithEmptyPoints(); },
             reprojectBorderPortsForResizedElements: function (patches) { return _this.reprojectBorderPortsForResizedElements(patches); },
@@ -6353,11 +7051,15 @@ var DiagramEngine = /** @class */ (function () {
         var _a;
         var element = this.model.getElement(id);
         var oldSize = element === null || element === void 0 ? void 0 : element.size;
+        var preserveParentSize = Boolean((element === null || element === void 0 ? void 0 : element.layout) && element.layout.mode !== 'manual');
         var patches = this.commandQueue.run(createResizeElementCommand(id, { width: width, height: height }), this.model);
         var movedPortIds = element ? this.collectElementPortIds(element.id) : [];
         var allPatches = this.mutationPipeline.run({
             basePatches: patches,
-            layoutSteps: [function () { return _this.applyLayoutForParent(id); }, function () { var _a; return _this.applyLayoutCascade((_a = element === null || element === void 0 ? void 0 : element.parentId) !== null && _a !== void 0 ? _a : null); }],
+            layoutSteps: [
+                function () { return _this.applyLayoutForParent(id, { preserveParentSize: preserveParentSize }); },
+                function () { var _a; return _this.applyLayoutCascade((_a = element === null || element === void 0 ? void 0 : element.parentId) !== null && _a !== void 0 ? _a : null); },
+            ],
             movedPortIds: movedPortIds,
         });
         this.emitChange(allPatches);
@@ -6464,23 +7166,24 @@ var DiagramEngine = /** @class */ (function () {
     };
     DiagramEngine.prototype.addLink = function (link) {
         var _a;
-        var source = this.linkRoutingService.getPortLinkWorldPosition(link.sourcePortId, {
-            oppositePortId: link.targetPortId,
+        var nextLink = this.applyOptionalLinkColor(link);
+        var source = this.linkRoutingService.getPortLinkWorldPosition(nextLink.sourcePortId, {
+            oppositePortId: nextLink.targetPortId,
         });
-        var target = this.linkRoutingService.getPortLinkWorldPosition(link.targetPortId, {
-            oppositePortId: link.sourcePortId,
+        var target = this.linkRoutingService.getPortLinkWorldPosition(nextLink.targetPortId, {
+            oppositePortId: nextLink.sourcePortId,
         });
-        var routing = (_a = link.routing) !== null && _a !== void 0 ? _a : 'auto';
-        var points = link.points;
+        var routing = (_a = nextLink.routing) !== null && _a !== void 0 ? _a : 'auto';
+        var points = nextLink.points;
         if (source && target) {
             if (routing === 'auto') {
-                points = this.computeAutoRoute(link, source, target);
+                points = this.computeAutoRoute(nextLink, source, target);
             }
             else if (points.length < 2) {
                 points = [__assign({}, source), __assign({}, target)];
             }
         }
-        var patches = this.commandQueue.run(createAddLinkCommand(__assign(__assign({}, link), { points: points, routing: routing })), this.model);
+        var patches = this.commandQueue.run(createAddLinkCommand(__assign(__assign({}, nextLink), { points: points, routing: routing })), this.model);
         this.emitChange(patches);
     };
     DiagramEngine.prototype.updateLinkPoints = function (id, points) {
@@ -6675,16 +7378,25 @@ var DiagramEngine = /** @class */ (function () {
         var element = this.model.getElement(id);
         if (!element)
             return clamped;
+        var lockHorizontalResize = this.shouldLockAutoLayoutChildHorizontalResize(element);
         var shape = this.shapeRegistry.get(element.shapeId);
-        if (!(shape === null || shape === void 0 ? void 0 : shape.normalizeResize))
-            return clamped;
+        if (!(shape === null || shape === void 0 ? void 0 : shape.normalizeResize)) {
+            if (!lockHorizontalResize)
+                return clamped;
+            var width_1 = Math.max(minSize, element.size.width);
+            var x_1 = clamped.x;
+            if (handle === 'sw' || handle === 'nw') {
+                x_1 += clamped.width - width_1;
+            }
+            return { x: x_1, y: clamped.y, width: width_1, height: clamped.height };
+        }
         var normalized = shape.normalizeResize({
             element: element.toData(),
             handle: handle,
             minSize: minSize,
             proposal: { width: clamped.width, height: clamped.height },
         });
-        var width = Math.max(minSize, normalized.width);
+        var width = lockHorizontalResize ? Math.max(minSize, element.size.width) : Math.max(minSize, normalized.width);
         var height = Math.max(minSize, normalized.height);
         var x = clamped.x;
         var y = clamped.y;
@@ -6696,6 +7408,18 @@ var DiagramEngine = /** @class */ (function () {
         }
         return { x: x, y: y, width: width, height: height };
     };
+    DiagramEngine.prototype.shouldLockAutoLayoutChildHorizontalResize = function (element) {
+        var _a, _b;
+        var parentId = (_a = element.parentId) !== null && _a !== void 0 ? _a : null;
+        if (!parentId)
+            return false;
+        if (this.model.getChildren(element.id).length > 0)
+            return false;
+        if (element.layout && element.layout.mode !== 'manual')
+            return false;
+        var parent = this.model.getElement(parentId);
+        return ((_b = parent === null || parent === void 0 ? void 0 : parent.layout) === null || _b === void 0 ? void 0 : _b.mode) === 'grid';
+    };
     DiagramEngine.prototype.getPortWorldPosition = function (id) {
         return this.model.getPortWorldPosition(id);
     };
@@ -6778,6 +7502,10 @@ var DiagramEngine = /** @class */ (function () {
         this.events.emit('config', { type: 'rendering' });
     };
     DiagramEngine.prototype.render = function () {
+        var redrawRoutingPatches = this.refreshLinksForRenderCycle();
+        if (redrawRoutingPatches.length > 0) {
+            this.emitChange(redrawRoutingPatches, { render: false });
+        }
         this.renderer.render(this.model);
     };
     DiagramEngine.prototype.emitElementDrop = function (event) {
@@ -7266,8 +7994,8 @@ var DiagramEngine = /** @class */ (function () {
         });
         this.renderer.renderSelection(selectedIds);
     };
-    DiagramEngine.prototype.applyLayoutForParent = function (parentId) {
-        return this.autoLayoutService.applyLayoutForParent(parentId);
+    DiagramEngine.prototype.applyLayoutForParent = function (parentId, options) {
+        return this.autoLayoutService.applyLayoutForParent(parentId, options);
     };
     DiagramEngine.prototype.applyLayoutCascade = function (startParentId) {
         return this.autoLayoutService.applyLayoutCascade(startParentId);
@@ -7333,6 +8061,30 @@ var DiagramEngine = /** @class */ (function () {
     DiagramEngine.prototype.routeLinksWithEmptyPoints = function () {
         return this.linkRoutingService.routeLinksWithEmptyPoints();
     };
+    DiagramEngine.prototype.applyOptionalLinkColor = function (link) {
+        if (!this.linkColorPoolPolicy.enabled)
+            return link;
+        var existingStyle = link.style;
+        var hasExplicitStroke = existingStyle !== undefined &&
+            Object.prototype.hasOwnProperty.call(existingStyle, 'stroke') &&
+            existingStyle.stroke !== undefined &&
+            existingStyle.stroke !== null &&
+            "".concat(existingStyle.stroke).trim().length > 0;
+        if (hasExplicitStroke)
+            return link;
+        var colors = this.linkColorPoolPolicy.colors;
+        if (colors.length === 0)
+            return link;
+        var index = Math.max(0, Math.min(colors.length - 1, Math.floor(Math.random() * colors.length)));
+        return __assign(__assign({}, link), { style: __assign(__assign({}, (existingStyle !== null && existingStyle !== void 0 ? existingStyle : {})), { stroke: colors[index] }) });
+    };
+    DiagramEngine.prototype.refreshLinksForRenderCycle = function () {
+        if (this.linkRouteRefreshPolicy.mode !== 'redraw-two-endpoint-change')
+            return [];
+        return this.linkRoutingService.refreshLinksForRedraw({
+            includeManual: this.linkRouteRefreshPolicy.includeManual,
+        });
+    };
     DiagramEngine.prototype.normalizePortsForHostPolicies = function (portIds) {
         var _this = this;
         var ids = portIds !== null && portIds !== void 0 ? portIds : Array.from(this.model.ports.keys());
@@ -8546,6 +9298,7 @@ var KonvaInteraction = /** @class */ (function () {
         this.dragThreshold = 4;
         this.panSpeed = 0.5;
         this.occupiedVertexTolerance = 2;
+        this.nestedHoverElementPadding = 12;
         this.emittingElementLinkEnded = false;
         this.engine = engine;
         this.stage = config.stage;
@@ -9765,7 +10518,13 @@ var KonvaInteraction = /** @class */ (function () {
             this.clearActiveShapeHoverControl();
             return;
         }
-        var resolved = this.resolveShapeHoverControl(hit.id, point);
+        var hoverElementIds = this.resolveNestedHoverElementCandidates(point, hit.id);
+        var resolved = null;
+        for (var i = 0; i < hoverElementIds.length; i += 1) {
+            resolved = this.resolveShapeHoverControl(hoverElementIds[i], point);
+            if (resolved)
+                break;
+        }
         if (!resolved) {
             this.clearActiveShapeHoverControl();
             return;
@@ -9781,6 +10540,70 @@ var KonvaInteraction = /** @class */ (function () {
         this.activeShapeHoverControl = resolved;
         (_b = (_a = this.renderer) === null || _a === void 0 ? void 0 : _a.renderShapeHoverControl) === null || _b === void 0 ? void 0 : _b.call(_a, this.toShapeHoverRenderConfig(resolved));
     };
+    KonvaInteraction.prototype.resolveNestedHoverElementCandidates = function (point, rootElementId) {
+        var _this = this;
+        var _a;
+        var state = this.engine.getState();
+        var root = state.elements.find(function (element) { return element.id === rootElementId; });
+        if (!root)
+            return [rootElementId];
+        var byId = new Map(state.elements.map(function (element) { var _a; return [element.id, { parentId: (_a = element.parentId) !== null && _a !== void 0 ? _a : null }]; }));
+        var activeElementId = (_a = this.activeShapeHoverControl) === null || _a === void 0 ? void 0 : _a.elementId;
+        var entries = state.elements
+            .map(function (element, order) { return ({ element: element, order: order }); })
+            .filter(function (_a) {
+            var element = _a.element;
+            return _this.isDescendantOrSelf(element.id, rootElementId, byId);
+        })
+            .filter(function (_a) {
+            var element = _a.element;
+            return _this.isPointWithinElementHoverBounds(point, element, _this.nestedHoverElementPadding);
+        })
+            .map(function (_a) {
+            var element = _a.element, order = _a.order;
+            return ({
+                id: element.id,
+                depth: _this.computeElementDepth(element.id, byId),
+                order: order,
+                active: activeElementId === element.id,
+            });
+        });
+        entries.sort(function (a, b) {
+            if (a.active !== b.active)
+                return a.active ? -1 : 1;
+            if (a.depth !== b.depth)
+                return b.depth - a.depth;
+            return b.order - a.order;
+        });
+        var ordered = entries.map(function (entry) { return entry.id; });
+        if (!ordered.includes(rootElementId)) {
+            ordered.push(rootElementId);
+        }
+        return ordered;
+    };
+    KonvaInteraction.prototype.isDescendantOrSelf = function (candidateId, ancestorId, byId) {
+        if (candidateId === ancestorId)
+            return true;
+        var current = byId.get(candidateId);
+        while (current === null || current === void 0 ? void 0 : current.parentId) {
+            if (current.parentId === ancestorId)
+                return true;
+            current = byId.get(current.parentId);
+        }
+        return false;
+    };
+    KonvaInteraction.prototype.isPointWithinElementHoverBounds = function (point, element, padding) {
+        var _a, _b;
+        var world = (_a = this.engine.getElementWorldPosition(element.id)) !== null && _a !== void 0 ? _a : element.position;
+        var rect = {
+            x: world.x - padding,
+            y: world.y - padding,
+            width: Math.max(0, element.size.width + padding * 2),
+            height: Math.max(0, element.size.height + padding * 2),
+        };
+        var rotation = this.engine.getElementRotation(element.id);
+        return pointInRotatedRect(point, { x: rect.x, y: rect.y }, { width: rect.width, height: rect.height }, rotation, (_b = element.anchorCenter) !== null && _b !== void 0 ? _b : false);
+    };
     KonvaInteraction.prototype.resolveShapeHoverControl = function (elementId, point) {
         var _a, _b, _c, _d, _e, _f, _g;
         var controls = (_a = this.shapeHoverControls) === null || _a === void 0 ? void 0 : _a.controls;
@@ -11438,7 +12261,12 @@ var createDiagramEditor = function (config) {
     registerSimpleShapes(shapeRegistry, config.elementShapes, false);
     registerSimpleShapes(shapeRegistry, config.portShapes, true);
     var renderer = new KonvaRenderer({ stage: stage, konva: Konva, shapeRegistry: shapeRegistry });
-    var engine = new DiagramEngine({ renderer: renderer, shapeRegistry: shapeRegistry });
+    var engine = new DiagramEngine({
+        renderer: renderer,
+        shapeRegistry: shapeRegistry,
+        linkRouteRefreshPolicy: config.linkRouteRefreshPolicy,
+        linkColorPoolPolicy: config.linkColorPoolPolicy,
+    });
     if (config.onChange) {
         engine.on('change', config.onChange);
     }
@@ -11620,7 +12448,7 @@ var useDisplayBoxMetricsUpdater = function () {
 };
 
 var useDemoEditor = function (_a) {
-    var createState = _a.createState, elementShapes = _a.elementShapes, portShapes = _a.portShapes, router = _a.router, snapDefault = _a.snapDefault, elementShapeHoverControls = _a.elementShapeHoverControls, onElementShapeHoverControlInteraction = _a.onElementShapeHoverControlInteraction, onElementShapeHoverControlActivated = _a.onElementShapeHoverControlActivated;
+    var createState = _a.createState, elementShapes = _a.elementShapes, portShapes = _a.portShapes, router = _a.router, snapDefault = _a.snapDefault, linkRouteRefreshPolicy = _a.linkRouteRefreshPolicy, linkColorPoolPolicy = _a.linkColorPoolPolicy, elementShapeHoverControls = _a.elementShapeHoverControls, onElementShapeHoverControlInteraction = _a.onElementShapeHoverControlInteraction, onElementShapeHoverControlActivated = _a.onElementShapeHoverControlActivated;
     var containerRef = React.useRef(null);
     var editorRef = React.useRef(null);
     var _b = React.useState(null), diagramState = _b[0], setDiagramState = _b[1];
@@ -11662,6 +12490,8 @@ var useDemoEditor = function (_a) {
             initialState: createState(),
             elementShapes: elementShapes,
             portShapes: portShapes,
+            linkRouteRefreshPolicy: linkRouteRefreshPolicy,
+            linkColorPoolPolicy: linkColorPoolPolicy,
             elementShapeHoverControls: elementShapeHoverControls,
             onElementShapeHoverControlInteraction: onElementShapeHoverControlInteraction,
             onElementShapeHoverControlActivated: onElementShapeHoverControlActivated,
@@ -11707,6 +12537,8 @@ var useDemoEditor = function (_a) {
         portShapes,
         router,
         snapDefault,
+        linkRouteRefreshPolicy,
+        linkColorPoolPolicy,
         elementShapeHoverControls,
         onElementShapeHoverControlInteraction,
         onElementShapeHoverControlActivated,
@@ -12059,11 +12891,51 @@ var LinkCancelDemo = function () {
 var parentOptions = [
     { id: 'layout-row', label: 'Horizontal layout' },
     { id: 'layout-column', label: 'Vertical layout' },
+    { id: 'layout-grid', label: 'Grid layout' },
     { id: 'layout-nested', label: 'Nested layout' },
     { id: 'layout-manual', label: 'Manual (compare)' },
 ];
 var shortLabel = 'Parent label lane demo';
 var longLabel = 'Parent label lane demo with longer content to increase flexible reserved space and push children downward.';
+var defaultGridTemplateText = '[[3],[1,2]]';
+var serializeGridTemplate = function (template) {
+    return Array.isArray(template) && template.length > 0 ? JSON.stringify(template) : defaultGridTemplateText;
+};
+var parseGridTemplate = function (value) {
+    var trimmed = value.trim();
+    if (!trimmed)
+        return undefined;
+    var parsed;
+    try {
+        parsed = JSON.parse(trimmed);
+    }
+    catch (_a) {
+        return null;
+    }
+    if (!Array.isArray(parsed))
+        return null;
+    var normalized = [];
+    for (var i = 0; i < parsed.length; i += 1) {
+        var row = parsed[i];
+        if (typeof row === 'number') {
+            if (!Number.isFinite(row) || row <= 0)
+                return null;
+            normalized.push(Math.floor(row));
+            continue;
+        }
+        if (!Array.isArray(row) || row.length === 0)
+            return null;
+        var weights = [];
+        for (var j = 0; j < row.length; j += 1) {
+            var cell = row[j];
+            if (typeof cell !== 'number' || !Number.isFinite(cell) || cell <= 0)
+                return null;
+            weights.push(cell);
+        }
+        normalized.push(weights);
+    }
+    return normalized;
+};
 var AutoLayoutDemo = function () {
     var demo = autoLayoutDemoConfig;
     var _a = useDemoEditor({
@@ -12085,19 +12957,21 @@ var AutoLayoutDemo = function () {
     var _b = React.useState(parentOptions[0].id), targetId = _b[0], setTargetId = _b[1];
     var _c = React.useState('horizontal'), mode = _c[0], setMode = _c[1];
     var _d = React.useState('center'), align = _d[0], setAlign = _d[1];
-    var _e = React.useState(12), padding = _e[0], setPadding = _e[1];
-    var _f = React.useState(12), gap = _f[0], setGap = _f[1];
-    var _g = React.useState('none'), childFitMainAxis = _g[0], setChildFitMainAxis = _g[1];
-    var _h = React.useState('none'), childFitCrossAxis = _h[0], setChildFitCrossAxis = _h[1];
-    var _j = React.useState(''), childFitMinWidth = _j[0], setChildFitMinWidth = _j[1];
-    var _k = React.useState(''), childFitMinHeight = _k[0], setChildFitMinHeight = _k[1];
-    var _l = React.useState(''), childFitMaxWidth = _l[0], setChildFitMaxWidth = _l[1];
-    var _m = React.useState(''), childFitMaxHeight = _m[0], setChildFitMaxHeight = _m[1];
-    var _o = React.useState('none'), labelReservedMode = _o[0], setLabelReservedMode = _o[1];
-    var _p = React.useState(32), labelReservedFixedSize = _p[0], setLabelReservedFixedSize = _p[1];
-    var _q = React.useState(''), labelReservedMinSize = _q[0], setLabelReservedMinSize = _q[1];
-    var _r = React.useState(''), labelReservedMaxSize = _r[0], setLabelReservedMaxSize = _r[1];
-    var _s = React.useState('None yet'), lastTrigger = _s[0], setLastTrigger = _s[1];
+    var _e = React.useState('grow'), autoResize = _e[0], setAutoResize = _e[1];
+    var _f = React.useState(12), padding = _f[0], setPadding = _f[1];
+    var _g = React.useState(12), gap = _g[0], setGap = _g[1];
+    var _h = React.useState('none'), childFitMainAxis = _h[0], setChildFitMainAxis = _h[1];
+    var _j = React.useState('none'), childFitCrossAxis = _j[0], setChildFitCrossAxis = _j[1];
+    var _k = React.useState(''), childMinWidth = _k[0], setChildMinWidth = _k[1];
+    var _l = React.useState(''), childMinHeight = _l[0], setChildMinHeight = _l[1];
+    var _m = React.useState(''), childMaxWidth = _m[0], setChildMaxWidth = _m[1];
+    var _o = React.useState(''), childMaxHeight = _o[0], setChildMaxHeight = _o[1];
+    var _p = React.useState(defaultGridTemplateText), gridTemplateText = _p[0], setGridTemplateText = _p[1];
+    var _q = React.useState('none'), labelReservedMode = _q[0], setLabelReservedMode = _q[1];
+    var _r = React.useState(32), labelReservedFixedSize = _r[0], setLabelReservedFixedSize = _r[1];
+    var _s = React.useState(''), labelReservedMinSize = _s[0], setLabelReservedMinSize = _s[1];
+    var _t = React.useState(''), labelReservedMaxSize = _t[0], setLabelReservedMaxSize = _t[1];
+    var _u = React.useState('None yet'), lastTrigger = _u[0], setLastTrigger = _u[1];
     React.useEffect(function () {
         var editor = editorRef.current;
         if (!editor)
@@ -12157,30 +13031,32 @@ var AutoLayoutDemo = function () {
         return options;
     }, [diagramState, targetElement]);
     React.useEffect(function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
         var parent = diagramState === null || diagramState === void 0 ? void 0 : diagramState.elements.find(function (el) { return el.id === targetId; });
         if (!parent)
             return;
         var layout = parent.layout;
         setMode((_a = layout === null || layout === void 0 ? void 0 : layout.mode) !== null && _a !== void 0 ? _a : 'manual');
         setAlign((_b = layout === null || layout === void 0 ? void 0 : layout.align) !== null && _b !== void 0 ? _b : 'center');
+        setAutoResize((_c = layout === null || layout === void 0 ? void 0 : layout.autoResize) !== null && _c !== void 0 ? _c : 'grow');
         var paddingValue = typeof (layout === null || layout === void 0 ? void 0 : layout.padding) === 'number'
             ? layout.padding
             : (layout === null || layout === void 0 ? void 0 : layout.padding)
-                ? Math.max((_c = layout.padding.x) !== null && _c !== void 0 ? _c : 0, (_d = layout.padding.y) !== null && _d !== void 0 ? _d : 0)
+                ? Math.max((_d = layout.padding.x) !== null && _d !== void 0 ? _d : 0, (_e = layout.padding.y) !== null && _e !== void 0 ? _e : 0)
                 : 12;
         setPadding(paddingValue !== null && paddingValue !== void 0 ? paddingValue : 12);
-        setGap((_e = layout === null || layout === void 0 ? void 0 : layout.gap) !== null && _e !== void 0 ? _e : 12);
-        setChildFitMainAxis((_f = layout === null || layout === void 0 ? void 0 : layout.childFitMainAxis) !== null && _f !== void 0 ? _f : 'none');
-        setChildFitCrossAxis((_g = layout === null || layout === void 0 ? void 0 : layout.childFitCrossAxis) !== null && _g !== void 0 ? _g : 'none');
-        setChildFitMinWidth((_j = (_h = layout === null || layout === void 0 ? void 0 : layout.childFitMinSize) === null || _h === void 0 ? void 0 : _h.width) !== null && _j !== void 0 ? _j : '');
-        setChildFitMinHeight((_l = (_k = layout === null || layout === void 0 ? void 0 : layout.childFitMinSize) === null || _k === void 0 ? void 0 : _k.height) !== null && _l !== void 0 ? _l : '');
-        setChildFitMaxWidth((_o = (_m = layout === null || layout === void 0 ? void 0 : layout.childFitMaxSize) === null || _m === void 0 ? void 0 : _m.width) !== null && _o !== void 0 ? _o : '');
-        setChildFitMaxHeight((_q = (_p = layout === null || layout === void 0 ? void 0 : layout.childFitMaxSize) === null || _p === void 0 ? void 0 : _p.height) !== null && _q !== void 0 ? _q : '');
-        setLabelReservedMode((_s = (_r = layout === null || layout === void 0 ? void 0 : layout.labelReservedSpace) === null || _r === void 0 ? void 0 : _r.mode) !== null && _s !== void 0 ? _s : 'none');
-        setLabelReservedFixedSize((_u = (_t = layout === null || layout === void 0 ? void 0 : layout.labelReservedSpace) === null || _t === void 0 ? void 0 : _t.size) !== null && _u !== void 0 ? _u : 32);
-        setLabelReservedMinSize((_w = (_v = layout === null || layout === void 0 ? void 0 : layout.labelReservedSpace) === null || _v === void 0 ? void 0 : _v.minSize) !== null && _w !== void 0 ? _w : '');
-        setLabelReservedMaxSize((_y = (_x = layout === null || layout === void 0 ? void 0 : layout.labelReservedSpace) === null || _x === void 0 ? void 0 : _x.maxSize) !== null && _y !== void 0 ? _y : '');
+        setGap((_f = layout === null || layout === void 0 ? void 0 : layout.gap) !== null && _f !== void 0 ? _f : 12);
+        setChildFitMainAxis((_g = layout === null || layout === void 0 ? void 0 : layout.childFitMainAxis) !== null && _g !== void 0 ? _g : 'none');
+        setChildFitCrossAxis((_h = layout === null || layout === void 0 ? void 0 : layout.childFitCrossAxis) !== null && _h !== void 0 ? _h : 'none');
+        setChildMinWidth((_l = (_j = layout === null || layout === void 0 ? void 0 : layout.childMinWidth) !== null && _j !== void 0 ? _j : (_k = layout === null || layout === void 0 ? void 0 : layout.childFitMinSize) === null || _k === void 0 ? void 0 : _k.width) !== null && _l !== void 0 ? _l : '');
+        setChildMinHeight((_p = (_m = layout === null || layout === void 0 ? void 0 : layout.childMinHeight) !== null && _m !== void 0 ? _m : (_o = layout === null || layout === void 0 ? void 0 : layout.childFitMinSize) === null || _o === void 0 ? void 0 : _o.height) !== null && _p !== void 0 ? _p : '');
+        setChildMaxWidth((_s = (_q = layout === null || layout === void 0 ? void 0 : layout.childMaxWidth) !== null && _q !== void 0 ? _q : (_r = layout === null || layout === void 0 ? void 0 : layout.childFitMaxSize) === null || _r === void 0 ? void 0 : _r.width) !== null && _s !== void 0 ? _s : '');
+        setChildMaxHeight((_v = (_t = layout === null || layout === void 0 ? void 0 : layout.childMaxHeight) !== null && _t !== void 0 ? _t : (_u = layout === null || layout === void 0 ? void 0 : layout.childFitMaxSize) === null || _u === void 0 ? void 0 : _u.height) !== null && _v !== void 0 ? _v : '');
+        setGridTemplateText(serializeGridTemplate(layout === null || layout === void 0 ? void 0 : layout.gridTemplate));
+        setLabelReservedMode((_x = (_w = layout === null || layout === void 0 ? void 0 : layout.labelReservedSpace) === null || _w === void 0 ? void 0 : _w.mode) !== null && _x !== void 0 ? _x : 'none');
+        setLabelReservedFixedSize((_z = (_y = layout === null || layout === void 0 ? void 0 : layout.labelReservedSpace) === null || _y === void 0 ? void 0 : _y.size) !== null && _z !== void 0 ? _z : 32);
+        setLabelReservedMinSize((_1 = (_0 = layout === null || layout === void 0 ? void 0 : layout.labelReservedSpace) === null || _0 === void 0 ? void 0 : _0.minSize) !== null && _1 !== void 0 ? _1 : '');
+        setLabelReservedMaxSize((_3 = (_2 = layout === null || layout === void 0 ? void 0 : layout.labelReservedSpace) === null || _2 === void 0 ? void 0 : _2.maxSize) !== null && _3 !== void 0 ? _3 : '');
     }, [diagramState, targetId]);
     var childOrder = React.useMemo(function () {
         var _a;
@@ -12188,13 +13064,22 @@ var AutoLayoutDemo = function () {
             return [];
         var children = diagramState.elements.filter(function (el) { return el.parentId === targetId; });
         var parent = diagramState.elements.find(function (el) { return el.id === targetId; });
-        var axis = ((_a = parent === null || parent === void 0 ? void 0 : parent.layout) === null || _a === void 0 ? void 0 : _a.mode) === 'vertical' ? 'y' : 'x';
+        var layoutMode = (_a = parent === null || parent === void 0 ? void 0 : parent.layout) === null || _a === void 0 ? void 0 : _a.mode;
         return __spreadArray([], children, true).sort(function (a, b) {
-            var aPos = axis === 'y' ? a.position.y : a.position.x;
-            var bPos = axis === 'y' ? b.position.y : b.position.x;
-            if (aPos === bPos)
-                return a.id.localeCompare(b.id);
-            return aPos - bPos;
+            if (layoutMode === 'vertical' || layoutMode === 'grid') {
+                if (a.position.y === b.position.y) {
+                    if (a.position.x === b.position.x)
+                        return a.id.localeCompare(b.id);
+                    return a.position.x - b.position.x;
+                }
+                return a.position.y - b.position.y;
+            }
+            if (a.position.x === b.position.x) {
+                if (a.position.y === b.position.y)
+                    return a.id.localeCompare(b.id);
+                return a.position.y - b.position.y;
+            }
+            return a.position.x - b.position.x;
         });
     }, [diagramState, targetId]);
     var parentSummaries = React.useMemo(function () {
@@ -12211,28 +13096,17 @@ var AutoLayoutDemo = function () {
             return;
         if (!targetElement)
             return;
-        var childFitMinSize = childFitMinWidth === '' && childFitMinHeight === ''
-            ? undefined
-            : __assign(__assign({}, (childFitMinWidth === '' ? {} : { width: childFitMinWidth })), (childFitMinHeight === '' ? {} : { height: childFitMinHeight }));
-        var childFitMaxSize = childFitMaxWidth === '' && childFitMaxHeight === ''
-            ? undefined
-            : __assign(__assign({}, (childFitMaxWidth === '' ? {} : { width: childFitMaxWidth })), (childFitMaxHeight === '' ? {} : { height: childFitMaxHeight }));
+        var parsedGridTemplate = mode === 'grid' ? parseGridTemplate(gridTemplateText) : undefined;
+        if (mode === 'grid' && parsedGridTemplate === null) {
+            setLastTrigger('invalid grid template JSON');
+            return;
+        }
         var labelReservedSpace = mode === 'manual'
             ? undefined
             : __assign(__assign(__assign({ mode: labelReservedMode, placement: 'top' }, (labelReservedMode === 'fixed' ? { size: labelReservedFixedSize } : {})), (labelReservedMinSize === '' ? {} : { minSize: labelReservedMinSize })), (labelReservedMaxSize === '' ? {} : { maxSize: labelReservedMaxSize }));
         var layout = mode === 'manual'
             ? { mode: 'manual' }
-            : {
-                mode: mode,
-                padding: padding,
-                gap: gap,
-                align: align !== null && align !== void 0 ? align : 'center',
-                childFitMainAxis: childFitMainAxis,
-                childFitCrossAxis: childFitCrossAxis,
-                childFitMinSize: childFitMinSize,
-                childFitMaxSize: childFitMaxSize,
-                labelReservedSpace: labelReservedSpace,
-            };
+            : __assign(__assign(__assign(__assign(__assign(__assign({ mode: mode, autoResize: autoResize, padding: padding, gap: gap, align: align !== null && align !== void 0 ? align : 'center', childFitMainAxis: childFitMainAxis, childFitCrossAxis: childFitCrossAxis }, (childMinWidth === '' ? {} : { childMinWidth: childMinWidth })), (childMinHeight === '' ? {} : { childMinHeight: childMinHeight })), (childMaxWidth === '' ? {} : { childMaxWidth: childMaxWidth })), (childMaxHeight === '' ? {} : { childMaxHeight: childMaxHeight })), (mode === 'grid' && parsedGridTemplate ? { gridTemplate: parsedGridTemplate } : {})), { labelReservedSpace: labelReservedSpace });
         editor.setElementLayout(targetElement.id, layout);
         setLastTrigger("layout applied (".concat(mode, ")"));
     };
@@ -12275,11 +13149,37 @@ var AutoLayoutDemo = function () {
             setLastTrigger('child removed');
         }
     };
-    var alignmentLabel = mode === 'horizontal' ? 'Vertical align (top/center/bottom)' : 'Horizontal align (left/center/right)';
+    var handleFocusResizeLockChild = function () {
+        var editor = editorRef.current;
+        if (!editor)
+            return;
+        setTargetId('layout-grid');
+        editor.setSelection(['grid-b']);
+        setLastTrigger('focus resize-lock child');
+    };
+    var handleFocusResizeLockParent = function () {
+        var editor = editorRef.current;
+        if (!editor)
+            return;
+        setTargetId('layout-grid');
+        editor.setSelection(['layout-grid']);
+        setLastTrigger('focus resize-lock parent');
+    };
+    var alignmentLabel = mode === 'horizontal'
+        ? 'Vertical align (top/center/bottom)'
+        : mode === 'vertical'
+            ? 'Horizontal align (left/center/right)'
+            : 'Cell align (start/center/end)';
     return (React.createElement("section", null,
         React.createElement("div", { style: { marginBottom: 12 } },
             React.createElement("h2", { style: { marginTop: 0, marginBottom: 4 } }, demo.title),
-            React.createElement("p", { style: { marginTop: 0 } }, "Try horizontal, vertical, nested, and manual layout containers. Select a layout parent directly on the canvas or pick it from the list; the controls below always act on the current selection. Drag, resize, add, or remove children to see automatic reflow. Use fit controls to distribute/stretch child sizes with optional min/max guards. Nested column shows fit propagation boundaries to its parent row.")),
+            React.createElement("p", { style: { marginTop: 0 } }, "Try horizontal, vertical, grid, nested, and manual layout containers. Select a layout parent directly on the canvas or pick it from the list; the controls below always act on the current selection. Drag, resize, add, or remove children to see automatic reflow. Use fit controls, explicit child min/max constraints, auto-resize policy, and grid templates to validate v0.2.5 behavior."),
+            React.createElement("p", { style: { marginTop: 0, marginBottom: 0, fontSize: 13, color: '#333' } },
+                "Resize-lock check: select ",
+                React.createElement("code", null, "grid-b"),
+                " and drag a corner mostly downward. Width should stay stable while height changes. Then select ",
+                React.createElement("code", null, "layout-grid"),
+                " and drag a corner to verify parent width and height both follow pointer movement.")),
         React.createElement(DisplayBoxControls, { actions: demo.actions, snapEnabled: controls.snapEnabled, selectedLinkRouting: controls.selectedLinkRouting, canToggleLinkRouting: controls.canToggleLinkRouting, onReload: controls.handleReload, onZoomIn: controls.handleZoomIn, onZoomOut: controls.handleZoomOut, onResetViewport: controls.handleResetViewport, onToggleSnap: controls.handleToggleSnap, onManualRender: controls.handleManualRender, onToggleLinkRouting: controls.handleToggleLinkRouting, onAction: controls.handleAction, onExportImage: controls.handleExportImage, onClearExportPreview: controls.handleClearExportPreview, exportPreviewDataUrl: controls.exportPreviewDataUrl, exportError: controls.exportError }),
         React.createElement("div", { style: { display: 'grid', gap: 12, marginBottom: 12 } },
             React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center' } },
@@ -12295,32 +13195,39 @@ var AutoLayoutDemo = function () {
                 React.createElement("select", { id: "mode-select", value: mode, onChange: function (event) { return setMode(event.target.value); }, style: { padding: '6px 10px', minWidth: 140 } },
                     React.createElement("option", { value: "manual" }, "Manual"),
                     React.createElement("option", { value: "horizontal" }, "Horizontal"),
-                    React.createElement("option", { value: "vertical" }, "Vertical")),
+                    React.createElement("option", { value: "vertical" }, "Vertical"),
+                    React.createElement("option", { value: "grid" }, "Grid")),
                 React.createElement("label", { htmlFor: "align-select", style: { fontWeight: 600 } }, alignmentLabel),
                 React.createElement("select", { id: "align-select", value: align !== null && align !== void 0 ? align : 'center', onChange: function (event) { return setAlign(event.target.value); }, style: { padding: '6px 10px', minWidth: 140 } },
-                    React.createElement("option", { value: "start" }, mode === 'horizontal' ? 'Top' : 'Left'),
+                    React.createElement("option", { value: "start" }, mode === 'horizontal' ? 'Top' : mode === 'vertical' ? 'Left' : 'Start'),
                     React.createElement("option", { value: "center" }, "Center"),
-                    React.createElement("option", { value: "end" }, mode === 'horizontal' ? 'Bottom' : 'Right')),
+                    React.createElement("option", { value: "end" }, mode === 'horizontal' ? 'Bottom' : mode === 'vertical' ? 'Right' : 'End')),
+                React.createElement("label", { htmlFor: "auto-resize-select", style: { fontWeight: 600 } }, "Auto resize"),
+                React.createElement("select", { id: "auto-resize-select", value: autoResize, onChange: function (event) { return setAutoResize(event.target.value); }, style: { padding: '6px 10px', minWidth: 130 }, disabled: mode === 'manual' },
+                    React.createElement("option", { value: "grow" }, "Grow only"),
+                    React.createElement("option", { value: "grow-shrink" }, "Grow + shrink")),
                 React.createElement("label", { htmlFor: "padding-input", style: { fontWeight: 600 } }, "Padding"),
                 React.createElement("input", { id: "padding-input", type: "number", value: padding, onChange: function (event) { return setPadding(Number(event.target.value) || 0); }, style: { width: 72, padding: '6px 8px' }, min: 0 }),
                 React.createElement("label", { htmlFor: "gap-input", style: { fontWeight: 600 } }, "Gap"),
                 React.createElement("input", { id: "gap-input", type: "number", value: gap, onChange: function (event) { return setGap(Number(event.target.value) || 0); }, style: { width: 72, padding: '6px 8px' }, min: 0 }),
                 React.createElement("label", { htmlFor: "fit-main-select", style: { fontWeight: 600 } }, "Main-axis fit"),
-                React.createElement("select", { id: "fit-main-select", value: childFitMainAxis !== null && childFitMainAxis !== void 0 ? childFitMainAxis : 'none', onChange: function (event) { return setChildFitMainAxis(event.target.value); }, style: { padding: '6px 10px', minWidth: 130 } },
+                React.createElement("select", { id: "fit-main-select", value: childFitMainAxis !== null && childFitMainAxis !== void 0 ? childFitMainAxis : 'none', onChange: function (event) { return setChildFitMainAxis(event.target.value); }, style: { padding: '6px 10px', minWidth: 130 }, disabled: mode === 'manual' || mode === 'grid' },
                     React.createElement("option", { value: "none" }, "Off"),
                     React.createElement("option", { value: "distribute" }, "Distribute")),
                 React.createElement("label", { htmlFor: "fit-cross-select", style: { fontWeight: 600 } }, "Cross-axis fit"),
-                React.createElement("select", { id: "fit-cross-select", value: childFitCrossAxis !== null && childFitCrossAxis !== void 0 ? childFitCrossAxis : 'none', onChange: function (event) { return setChildFitCrossAxis(event.target.value); }, style: { padding: '6px 10px', minWidth: 130 } },
+                React.createElement("select", { id: "fit-cross-select", value: childFitCrossAxis !== null && childFitCrossAxis !== void 0 ? childFitCrossAxis : 'none', onChange: function (event) { return setChildFitCrossAxis(event.target.value); }, style: { padding: '6px 10px', minWidth: 130 }, disabled: mode === 'manual' },
                     React.createElement("option", { value: "none" }, "Off"),
                     React.createElement("option", { value: "stretch" }, "Stretch")),
-                React.createElement("label", { htmlFor: "fit-min-width-input", style: { fontWeight: 600 } }, "Min W/H"),
+                React.createElement("label", { htmlFor: "fit-min-width-input", style: { fontWeight: 600 } }, "Child min W/H"),
                 React.createElement("div", { style: { display: 'inline-flex', gap: 6 } },
-                    React.createElement("input", { id: "fit-min-width-input", type: "number", value: childFitMinWidth, onChange: function (event) { return setChildFitMinWidth(event.target.value === '' ? '' : Math.max(0, Number(event.target.value) || 0)); }, style: { width: 64, padding: '6px 8px' }, min: 0, placeholder: "w" }),
-                    React.createElement("input", { type: "number", value: childFitMinHeight, onChange: function (event) { return setChildFitMinHeight(event.target.value === '' ? '' : Math.max(0, Number(event.target.value) || 0)); }, style: { width: 64, padding: '6px 8px' }, min: 0, placeholder: "h" })),
-                React.createElement("label", { htmlFor: "fit-max-width-input", style: { fontWeight: 600 } }, "Max W/H"),
+                    React.createElement("input", { id: "fit-min-width-input", type: "number", value: childMinWidth, onChange: function (event) { return setChildMinWidth(event.target.value === '' ? '' : Math.max(0, Number(event.target.value) || 0)); }, style: { width: 64, padding: '6px 8px' }, min: 0, placeholder: "w" }),
+                    React.createElement("input", { type: "number", value: childMinHeight, onChange: function (event) { return setChildMinHeight(event.target.value === '' ? '' : Math.max(0, Number(event.target.value) || 0)); }, style: { width: 64, padding: '6px 8px' }, min: 0, placeholder: "h" })),
+                React.createElement("label", { htmlFor: "fit-max-width-input", style: { fontWeight: 600 } }, "Child max W/H"),
                 React.createElement("div", { style: { display: 'inline-flex', gap: 6 } },
-                    React.createElement("input", { id: "fit-max-width-input", type: "number", value: childFitMaxWidth, onChange: function (event) { return setChildFitMaxWidth(event.target.value === '' ? '' : Math.max(0, Number(event.target.value) || 0)); }, style: { width: 64, padding: '6px 8px' }, min: 0, placeholder: "w" }),
-                    React.createElement("input", { type: "number", value: childFitMaxHeight, onChange: function (event) { return setChildFitMaxHeight(event.target.value === '' ? '' : Math.max(0, Number(event.target.value) || 0)); }, style: { width: 64, padding: '6px 8px' }, min: 0, placeholder: "h" })),
+                    React.createElement("input", { id: "fit-max-width-input", type: "number", value: childMaxWidth, onChange: function (event) { return setChildMaxWidth(event.target.value === '' ? '' : Math.max(0, Number(event.target.value) || 0)); }, style: { width: 64, padding: '6px 8px' }, min: 0, placeholder: "w" }),
+                    React.createElement("input", { type: "number", value: childMaxHeight, onChange: function (event) { return setChildMaxHeight(event.target.value === '' ? '' : Math.max(0, Number(event.target.value) || 0)); }, style: { width: 64, padding: '6px 8px' }, min: 0, placeholder: "h" })),
+                React.createElement("label", { htmlFor: "grid-template-input", style: { fontWeight: 600 } }, "Grid template"),
+                React.createElement("input", { id: "grid-template-input", type: "text", value: gridTemplateText, onChange: function (event) { return setGridTemplateText(event.target.value); }, style: { minWidth: 220, padding: '6px 8px' }, placeholder: "[[3],[1,2]] or [[1,1,1,1],[3,1]]", disabled: mode !== 'grid' }),
                 React.createElement("label", { htmlFor: "label-reserved-mode-select", style: { fontWeight: 600 } }, "Label lane"),
                 React.createElement("select", { id: "label-reserved-mode-select", value: labelReservedMode, onChange: function (event) { return setLabelReservedMode(event.target.value); }, style: { padding: '6px 10px', minWidth: 120 }, disabled: mode === 'manual' },
                     React.createElement("option", { value: "none" }, "None"),
@@ -12350,10 +13257,12 @@ var AutoLayoutDemo = function () {
                     "Last trigger: ",
                     React.createElement("strong", null, lastTrigger)),
                 React.createElement("button", { type: "button", onClick: function () { return handleSetLabelContent(shortLabel); }, style: { padding: '6px 10px' }, disabled: !targetElement || mode === 'manual' }, "Label short"),
-                React.createElement("button", { type: "button", onClick: function () { return handleSetLabelContent(longLabel); }, style: { padding: '6px 10px' }, disabled: !targetElement || mode === 'manual' }, "Label long")),
+                React.createElement("button", { type: "button", onClick: function () { return handleSetLabelContent(longLabel); }, style: { padding: '6px 10px' }, disabled: !targetElement || mode === 'manual' }, "Label long"),
+                React.createElement("button", { type: "button", onClick: handleFocusResizeLockChild, style: { padding: '6px 10px' } }, "Focus lock child"),
+                React.createElement("button", { type: "button", onClick: handleFocusResizeLockParent, style: { padding: '6px 10px' } }, "Focus lock parent")),
             React.createElement("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 } },
                 React.createElement("div", null,
-                    React.createElement("div", { style: { fontWeight: 600, marginBottom: 6 } }, "Child order (based on layout axis)"),
+                    React.createElement("div", { style: { fontWeight: 600, marginBottom: 6 } }, "Child order (axis or grid row-major)"),
                     React.createElement("ol", { style: { marginTop: 0, paddingLeft: 18 } },
                         childOrder.map(function (child) { return (React.createElement("li", { key: child.id, style: { marginBottom: 4, fontSize: 13 } },
                             child.id,
@@ -12371,12 +13280,16 @@ var AutoLayoutDemo = function () {
                 React.createElement("div", null,
                     React.createElement("div", { style: { fontWeight: 600, marginBottom: 6 } }, "Scenario tips"),
                     React.createElement("ul", { style: { marginTop: 0, paddingLeft: 18, fontSize: 13 } },
+                        React.createElement("li", null, "Resize lock: select grid-b, drag corner diagonally; width should stay fixed while height changes."),
+                        React.createElement("li", null, "Parent resize: select layout-grid, drag corner; parent width and height should both track drag."),
                         React.createElement("li", null, "Horizontal: try center vs bottom alignment and larger padding."),
                         React.createElement("li", null, "Vertical: see parent grow taller as children stack."),
+                        React.createElement("li", null, "Grid: apply templates like [[3],[1,2]] and [[1,1,1,1],[3,1]]."),
+                        React.createElement("li", null, "Auto resize: compare grow-only vs grow-shrink while adding/removing children."),
                         React.createElement("li", null, "Label lane: compare none/fixed/flexible and observe children start below the reserved lane."),
                         React.createElement("li", null, "Fit main-axis distribute fills inner layout space across siblings."),
                         React.createElement("li", null, "Fit cross-axis stretch extends children across inner cross axis."),
-                        React.createElement("li", null, "Min/max fit guards cap distributed or stretched child sizes."),
+                        React.createElement("li", null, "Child min/max guards cap distributed, stretched, and grid cell sizes."),
                         React.createElement("li", null, "Nested: the left column owns its own children and expands the row."),
                         React.createElement("li", null, "Deep bounds: stack-overflow widens the nested column and the outer row."),
                         React.createElement("li", null, "Re-order: drag along the layout axis then apply layout to keep the new order."),
@@ -12993,13 +13906,15 @@ var TextLayoutDemo = function () {
 };
 
 var SimpleDemo = function (_a) {
-    var demo = _a.demo, beforeStage = _a.beforeStage, stageHandlers = _a.stageHandlers;
+    var demo = _a.demo, linkRouteRefreshPolicy = _a.linkRouteRefreshPolicy, linkColorPoolPolicy = _a.linkColorPoolPolicy, beforeStage = _a.beforeStage, stageHandlers = _a.stageHandlers;
     var _b = useDemoEditor({
         createState: demo.createState,
         elementShapes: demo.elementShapes,
         portShapes: demo.portShapes,
         router: demo.router,
         snapDefault: demo.snapDefault,
+        linkRouteRefreshPolicy: linkRouteRefreshPolicy !== null && linkRouteRefreshPolicy !== void 0 ? linkRouteRefreshPolicy : demo.linkRouteRefreshPolicy,
+        linkColorPoolPolicy: linkColorPoolPolicy !== null && linkColorPoolPolicy !== void 0 ? linkColorPoolPolicy : demo.linkColorPoolPolicy,
     }), containerRef = _b.containerRef, editorRef = _b.editorRef, diagramState = _b.diagramState, selection = _b.selection, snapEnabled = _b.snapEnabled, setSnapEnabled = _b.setSnapEnabled;
     var nextOffset = useOffsetSequence();
     var actionHelpers = React.useMemo(function () { return ({ nextOffset: nextOffset }); }, [nextOffset]);
@@ -13021,20 +13936,31 @@ var SimpleDemo = function (_a) {
         React.createElement(DisplayBoxStage, { containerRef: containerRef, onDragOver: stageHandlers === null || stageHandlers === void 0 ? void 0 : stageHandlers.onDragOver, onDragLeave: stageHandlers === null || stageHandlers === void 0 ? void 0 : stageHandlers.onDragLeave, onDrop: stageHandlers === null || stageHandlers === void 0 ? void 0 : stageHandlers.onDrop, stageStyle: demo.stageStyle })));
 };
 
-var ObstacleRoutingDemo = function () { return (React.createElement(SimpleDemo, { demo: obstacleRoutingDemoConfig, beforeStage: React.createElement("div", { style: {
-            marginBottom: 12,
-            padding: '10px 12px',
-            borderRadius: 8,
-            border: '1px solid #2d2d2d',
-            background: '#f4f4f4',
-        } },
-        React.createElement("strong", null, "Expected routing behavior"),
-        React.createElement("ul", { style: { margin: '6px 0 0 16px' } },
-            React.createElement("li", null, "Scenario A: the sibling link must not cross either child host interior."),
-            React.createElement("li", null, "Scenario A: sibling host ports use anchor preset `cardinal` (left/right) for deterministic multi-anchor placement."),
-            React.createElement("li", null, "Scenario B has one parent and two children with three links: parent->child, child->parent, and child->child."),
-            React.createElement("li", null, "Scenario B: ancestor endpoints resolve to `internalLinkAttachPoint`; descendant/sibling endpoints resolve to `externalLinkAttachPoint`."),
-            React.createElement("li", null, "Use `Reroute All Links` repeatedly; both routes should stay deterministic after each reroute."))) })); };
+var ObstacleRoutingDemo = function () {
+    var _a = React.useState(false), redrawRefreshEnabled = _a[0], setRedrawRefreshEnabled = _a[1];
+    var linkRouteRefreshPolicy = React.useMemo(function () {
+        return redrawRefreshEnabled
+            ? { mode: 'redraw-two-endpoint-change', includeManual: false }
+            : undefined;
+    }, [redrawRefreshEnabled]);
+    return (React.createElement(SimpleDemo, { demo: obstacleRoutingDemoConfig, linkRouteRefreshPolicy: linkRouteRefreshPolicy, beforeStage: React.createElement("div", { style: {
+                marginBottom: 12,
+                padding: '10px 12px',
+                borderRadius: 8,
+                border: '1px solid #2d2d2d',
+                background: '#f4f4f4',
+            } },
+            React.createElement("strong", null, "Expected routing behavior"),
+            React.createElement("ul", { style: { margin: '6px 0 10px 16px' } },
+                React.createElement("li", null, "Scenario A: the sibling link must not cross either child host interior."),
+                React.createElement("li", null, "Scenario B: parent endpoints use internal attach points while child/sibling endpoints use external attach points."),
+                React.createElement("li", null, "Scenario C: cross-parent link should exit source branch early, travel along the first common-ancestor corridor, then descend near target."),
+                React.createElement("li", null, "Use `Reroute All Links` repeatedly to verify deterministic routing output."),
+                React.createElement("li", null, "For redraw refresh check: keep the stale cross-branch link, toggle the option below, then click `Manual Render`.")),
+            React.createElement("label", { htmlFor: "obstacle-redraw-refresh-toggle", style: { display: 'inline-flex', alignItems: 'center', gap: 8, fontWeight: 600 } },
+                React.createElement("input", { id: "obstacle-redraw-refresh-toggle", type: "checkbox", checked: redrawRefreshEnabled, onChange: function (event) { return setRedrawRefreshEnabled(event.target.checked); } }),
+                "Enable redraw refresh on two-endpoint change")) }));
+};
 
 var initialPayloads = {
     elementDeleted: null,
@@ -13492,6 +14418,31 @@ var EllipseMidPointControlSection = function (_a) {
                 midPoint)); })))));
 };
 
+var customPool = ['#0b7285', '#e8590c', '#5f3dc4'];
+var LinkColorPoolDemo = function () {
+    var _a = React.useState('off'), mode = _a[0], setMode = _a[1];
+    var linkColorPoolPolicy = React.useMemo(function () {
+        if (mode === 'off')
+            return undefined;
+        if (mode === 'default')
+            return { enabled: true };
+        return { enabled: true, colors: customPool };
+    }, [mode]);
+    return (React.createElement(SimpleDemo, { demo: linkColorPoolDemoConfig, linkColorPoolPolicy: linkColorPoolPolicy, beforeStage: React.createElement("div", { style: {
+                marginBottom: 12,
+                padding: '10px 12px',
+                borderRadius: 8,
+                border: '1px solid #2d2d2d',
+                background: '#f4f4f4',
+            } },
+            React.createElement("label", { htmlFor: "link-color-mode", style: { display: 'inline-flex', alignItems: 'center', gap: 8, fontWeight: 600 } },
+                "Color Mode",
+                React.createElement("select", { id: "link-color-mode", value: mode, onChange: function (event) { return setMode(event.target.value); } },
+                    React.createElement("option", { value: "off" }, "Off (default behavior)"),
+                    React.createElement("option", { value: "default" }, "Default 20-color pool"),
+                    React.createElement("option", { value: "custom" }, "Custom pool (#0b7285, #e8590c, #5f3dc4)")))) }));
+};
+
 var sidePositions = {
     top: { x: 112, y: 0 },
     right: { x: 280, y: 68 },
@@ -14034,6 +14985,12 @@ var demoTabs = [
         description: labelStyleDemoConfig.description,
         Component: wrapSimpleDemo(labelStyleDemoConfig),
     },
+    {
+        id: linkColorPoolDemoConfig.id,
+        title: linkColorPoolDemoConfig.title,
+        description: linkColorPoolDemoConfig.description,
+        Component: LinkColorPoolDemo,
+    },
     {
         id: portBorderDemoConfig.id,
         title: portBorderDemoConfig.title,