orcasvn-react-diagrams 0.2.5 → 0.2.6

package/dist/esm/examples.js

@@ -178,7 +178,7 @@ var pathLength = function (points) {
     }
     return total;
 };
-var clamp$1 = function (value, min, max) { return Math.max(min, Math.min(max, value)); };
+var clamp$2 = function (value, min, max) { return Math.max(min, Math.min(max, value)); };
 var ObstacleRouter = /** @class */ (function () {
     function ObstacleRouter(options) {
         var _a, _b, _c;
@@ -458,7 +458,7 @@ var ObstacleRouter = /** @class */ (function () {
             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 corridorY = clamp$2((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;
@@ -475,7 +475,7 @@ var ObstacleRouter = /** @class */ (function () {
             ]);
         }
         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 corridorX = clamp$2((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;
@@ -990,6 +990,8 @@ var textDemoOwnerId = 'text-layout-owner';
 var textDemoOwnedTextId = 'text-owned-overflow';
 var textDemoFloatingTextId = 'text-floating-overflow';
 var textDemoLongSample = 'Long diagram label: middle ellipsis should keep the beginning and end visible while preserving the full canonical content in model state.';
+var textDemoOwnedInteraction = { movable: false, editable: false };
+var textDemoFloatingInteraction = { movable: true, editable: true };
 var createTextOwnershipState = function () { return ({
     elements: [
         {
@@ -1007,6 +1009,7 @@ var createTextOwnershipState = function () { return ({
             content: textDemoLongSample,
             position: { x: 12, y: 12 },
             ownerId: textDemoOwnerId,
+            interaction: textDemoOwnedInteraction,
             layout: {
                 boundsMode: 'owner-width',
                 wrap: 'none',
@@ -1018,6 +1021,7 @@ var createTextOwnershipState = function () { return ({
             id: textDemoFloatingTextId,
             content: textDemoLongSample,
             position: { x: 470, y: 120 },
+            interaction: textDemoFloatingInteraction,
             layout: {
                 boundsMode: 'fixed',
                 fixedSize: { width: 240, height: 90 },
@@ -1032,7 +1036,7 @@ var createTextOwnershipState = function () { return ({
 var textDemoConfig = ({
     id: 'text',
     title: 'Text Layout + Overflow',
-    description: 'Owner-constrained and fixed-bounds text with wrap and ellipsis behavior. Full content is preserved in model state; truncation is visual-only.',
+    description: 'Owner-constrained and fixed-bounds text with wrap, ellipsis, and per-text interaction behavior. Full content is preserved in model state; truncation is visual-only.',
     createState: createTextOwnershipState,
     elementShapes: baseElementShapes,
     portShapes: basePortShapes,
@@ -1278,7 +1282,8 @@ var createAutoLayoutState = function () { return ({
                 gap: 10,
                 align: 'center',
                 autoResize: 'grow-shrink',
-                gridTemplate: [[3], [1, 2]],
+                gridTemplate: [12, 4, 8],
+                gridChildWidthResizeEnabled: false,
                 childMinWidth: 24,
                 childMinHeight: 18,
             },
@@ -1348,7 +1353,7 @@ var createAutoLayoutState = function () { return ({
         { 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]]',
+            content: 'Grid template [12,4,8]',
             position: { x: 8, y: 6 },
             ownerId: 'layout-grid',
             layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
@@ -3391,7 +3396,7 @@ var addLinksAction = {
         });
     },
 };
-var rerouteAllAction = {
+var rerouteAllAction$1 = {
     id: 'reroute-links',
     label: 'Reroute All Links',
     run: function (editor) {
@@ -3407,7 +3412,7 @@ var obstacleRoutingDemoConfig = {
     portShapes: basePortShapes,
     defaultElementShapeId: 'default',
     defaultPortShapeId: 'port-circle',
-    actions: [addLinksAction, rerouteAllAction],
+    actions: [addLinksAction, rerouteAllAction$1],
 };
 
 var createLinkBendHandlesState = function () { return ({
@@ -4385,6 +4390,7 @@ var TextModel = /** @class */ (function () {
         this.size = data.size ? __assign({}, data.size) : undefined;
         this.style = data.style;
         this.ownerId = (_a = data.ownerId) !== null && _a !== void 0 ? _a : null;
+        this.interaction = data.interaction ? __assign({}, data.interaction) : undefined;
         this.layout = data.layout ? __assign({}, data.layout) : undefined;
         this.displayContent = (_b = data.displayContent) !== null && _b !== void 0 ? _b : data.content;
         this.displayOffset = data.displayOffset ? __assign({}, data.displayOffset) : undefined;
@@ -4421,6 +4427,7 @@ var TextModel = /** @class */ (function () {
             size: this.size ? __assign({}, this.size) : undefined,
             style: this.style,
             ownerId: this.ownerId,
+            interaction: this.interaction ? __assign({}, this.interaction) : undefined,
             layout: this.layout ? __assign({}, this.layout) : undefined,
             displayContent: (_a = this.displayContent) !== null && _a !== void 0 ? _a : this.content,
             displayOffset: this.displayOffset ? __assign({}, this.displayOffset) : undefined,
@@ -4435,7 +4442,7 @@ var distance = function (a, b) {
     var dy = a.y - b.y;
     return Math.sqrt(dx * dx + dy * dy);
 };
-var clamp = function (value, min, max) {
+var clamp$1 = function (value, min, max) {
     if (value < min)
         return min;
     if (value > max)
@@ -5683,6 +5690,7 @@ var TextLayoutService = /** @class */ (function () {
     return TextLayoutService;
 }());
 
+var GRID_ROW_UNITS = 12;
 var AutoLayoutService = /** @class */ (function () {
     function AutoLayoutService(config) {
         this.model = config.model;
@@ -5697,11 +5705,24 @@ var AutoLayoutService = /** @class */ (function () {
         if (!layout || layout.mode === 'manual')
             return { patches: [], movedPortIds: [] };
         var preserveParentSize = Boolean(options === null || options === void 0 ? void 0 : options.preserveParentSize);
+        var preserveParentWidth = preserveParentSize || Boolean(options === null || options === void 0 ? void 0 : options.preserveParentWidth);
+        var preserveParentHeight = preserveParentSize || Boolean(options === null || options === void 0 ? void 0 : options.preserveParentHeight);
         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) {
+            if (preserveParentWidth || preserveParentHeight) {
+                var targetWidth_1 = preserveParentWidth ? parent.size.width : Math.max(0, Math.round(padding.x * 2));
+                var targetHeight_1 = preserveParentHeight
+                    ? parent.size.height
+                    : Math.max(0, Math.round(padding.y * 2 + labelReservedTopLane));
+                if (parent.size.width === targetWidth_1 && parent.size.height === targetHeight_1) {
+                    return { patches: [], movedPortIds: [] };
+                }
+                var resizePatches_1 = this.commandQueue.run(createResizeElementCommand(parentId, { width: targetWidth_1, height: targetHeight_1 }), this.model);
+                return { patches: resizePatches_1, movedPortIds: __spreadArray([], parent.portIds, true) };
+            }
             if (preserveParentSize) {
                 return { patches: [], movedPortIds: [] };
             }
@@ -5716,9 +5737,17 @@ var AutoLayoutService = /** @class */ (function () {
             return { patches: resizePatches, movedPortIds: __spreadArray([], parent.portIds, true) };
         }
         if (layout.mode === 'grid') {
-            return this.applyGridLayoutForParent(parentId, parent, children, preserveParentSize);
+            return this.applyGridLayoutForParent(parentId, parent, children, {
+                preserveParentSize: preserveParentSize,
+                preserveParentWidth: preserveParentWidth,
+                preserveParentHeight: preserveParentHeight,
+            });
         }
-        return this.applyAxisLayoutForParent(parentId, parent, children, layout.mode, preserveParentSize);
+        return this.applyAxisLayoutForParent(parentId, parent, children, layout.mode, {
+            preserveParentSize: preserveParentSize,
+            preserveParentWidth: preserveParentWidth,
+            preserveParentHeight: preserveParentHeight,
+        });
     };
     AutoLayoutService.prototype.applyLayoutCascade = function (startParentId) {
         var _a;
@@ -5761,11 +5790,102 @@ var AutoLayoutService = /** @class */ (function () {
         });
         return { patches: patches, movedPortIds: Array.from(new Set(movedPortIds)) };
     };
-    AutoLayoutService.prototype.applyAxisLayoutForParent = function (parentId, parent, children, axis, preserveParentSize) {
+    AutoLayoutService.prototype.describeGridRows = function (parentId) {
+        var _a;
+        var parent = this.model.getElement(parentId);
+        if (!parent || ((_a = parent.layout) === null || _a === void 0 ? void 0 : _a.mode) !== 'grid')
+            return [];
+        return this.resolveAssignedGridRows(parent).map(function (row) { return ({ childIds: __spreadArray([], row.childIds, true) }); });
+    };
+    AutoLayoutService.prototype.describeGridSlotState = function (parentId) {
+        var _this = this;
+        var _a;
+        var parent = this.model.getElement(parentId);
+        if (!parent || ((_a = parent.layout) === null || _a === void 0 ? void 0 : _a.mode) !== 'grid')
+            return null;
+        var assignedRows = this.resolveAssignedGridRows(parent);
+        return {
+            orderedChildIds: assignedRows.flatMap(function (row) { return row.childIds; }),
+            slotWeights: assignedRows.flatMap(function (row) { return row.weights.slice(0, row.childIds.length).map(function (weight) { return _this.clampGridUnits(weight); }); }),
+        };
+    };
+    AutoLayoutService.prototype.resolveGridReorderedLayout = function (parentId, previousState) {
+        var _this = this;
+        var _a;
+        var parent = this.model.getElement(parentId);
+        if (!parent || ((_a = parent.layout) === null || _a === void 0 ? void 0 : _a.mode) !== 'grid' || !parent.layout)
+            return null;
+        var sortedChildren = this.sortGridChildrenForLayout(this.model.getChildren(parentId));
+        var orderedChildIds = sortedChildren.map(function (child) { return child.id; });
+        if (orderedChildIds.length === previousState.orderedChildIds.length &&
+            orderedChildIds.every(function (childId, index) { return childId === previousState.orderedChildIds[index]; })) {
+            return null;
+        }
+        var weightByChildId = new Map();
+        previousState.orderedChildIds.forEach(function (childId, index) {
+            var _a;
+            weightByChildId.set(childId, _this.clampGridUnits((_a = previousState.slotWeights[index]) !== null && _a !== void 0 ? _a : GRID_ROW_UNITS));
+        });
+        var reorderedTemplate = orderedChildIds.map(function (childId) { var _a; return (_a = weightByChildId.get(childId)) !== null && _a !== void 0 ? _a : GRID_ROW_UNITS; });
+        return __assign(__assign({}, parent.layout), { gridTemplate: reorderedTemplate });
+    };
+    AutoLayoutService.prototype.resolveGridChildResizeTopologyChange = function (parentId, childId, requestedWidth) {
+        var _a;
+        var parent = this.model.getElement(parentId);
+        if (!parent || ((_a = parent.layout) === null || _a === void 0 ? void 0 : _a.mode) !== 'grid' || !parent.layout)
+            return null;
+        var slotState = this.resolveGridChildSlotState(parentId, childId);
+        if (!slotState)
+            return null;
+        var assignedRows = slotState.assignedRows, orderedChildIds = slotState.orderedChildIds, slotWeights = slotState.slotWeights, childFlatIndex = slotState.childFlatIndex, rowIndex = slotState.rowIndex;
+        var currentUnits = slotWeights[childFlatIndex];
+        var requestedUnits = this.resolveRequestedGridUnits(parent, assignedRows[rowIndex], requestedWidth);
+        if (requestedUnits === currentUnits)
+            return null;
+        var nextSlotWeights = __spreadArray([], slotWeights, true);
+        nextSlotWeights[childFlatIndex] = requestedUnits;
+        var nextRows = this.packGridRowsFromSlots(orderedChildIds, nextSlotWeights);
+        var beforeRows = assignedRows.map(function (row) { return ({ childIds: __spreadArray([], row.childIds, true) }); });
+        var afterRows = nextRows.map(function (row) { return ({ childIds: __spreadArray([], row.childIds, true) }); });
+        var rowsChanged = !this.gridRowSnapshotsEqual(beforeRows, afterRows);
+        var reason = requestedUnits < currentUnits && rowsChanged ? 'child-resize-split' : 'child-resize-redistribute';
+        return {
+            parentId: parentId,
+            triggerChildId: childId,
+            reason: reason,
+            beforeRows: beforeRows,
+            afterRows: afterRows,
+            nextLayout: __assign(__assign({}, parent.layout), { gridTemplate: nextSlotWeights }),
+        };
+    };
+    AutoLayoutService.prototype.snapGridChildRequestedWidth = function (parentId, childId, requestedWidth) {
+        var _a, _b;
+        var parent = this.model.getElement(parentId);
+        if (!parent || ((_a = parent.layout) === null || _a === void 0 ? void 0 : _a.mode) !== 'grid' || !parent.layout)
+            return requestedWidth;
+        var slotState = this.resolveGridChildSlotState(parentId, childId);
+        if (!slotState)
+            return requestedWidth;
+        var requestedUnits = this.resolveRequestedGridUnits(parent, slotState.assignedRows[slotState.rowIndex], requestedWidth);
+        var rowUnitWidth = this.resolveGridRowUnitWidth(Math.max(0, parent.size.width - this.resolveLayoutPadding(parent.layout).x * 2), slotState.assignedRows[slotState.rowIndex].childIds.length, (_b = parent.layout.gap) !== null && _b !== void 0 ? _b : 12);
+        return Math.max(1, Math.round(requestedUnits * rowUnitWidth));
+    };
+    AutoLayoutService.prototype.canGridChildGrowRightward = function (parentId, childId) {
+        var _a;
+        var parent = this.model.getElement(parentId);
+        if (!parent || ((_a = parent.layout) === null || _a === void 0 ? void 0 : _a.mode) !== 'grid' || !parent.layout)
+            return false;
+        var orderedIds = this.resolveAssignedGridRows(parent).flatMap(function (row) { return row.childIds; });
+        var childIndex = orderedIds.indexOf(childId);
+        return childIndex >= 0 && childIndex < orderedIds.length - 1;
+    };
+    AutoLayoutService.prototype.applyAxisLayoutForParent = function (parentId, parent, children, axis, options) {
         var _a, _b;
         var _this = this;
         var _c, _d, _e, _f;
-        if (preserveParentSize === void 0) { preserveParentSize = false; }
+        var preserveParentSize = Boolean(options === null || options === void 0 ? void 0 : options.preserveParentSize);
+        var preserveParentWidth = preserveParentSize || Boolean(options === null || options === void 0 ? void 0 : options.preserveParentWidth);
+        var preserveParentHeight = preserveParentSize || Boolean(options === null || options === void 0 ? void 0 : options.preserveParentHeight);
         var layout = parent.layout;
         var padding = this.resolveLayoutPadding(layout);
         var gap = (_c = layout === null || layout === void 0 ? void 0 : layout.gap) !== null && _c !== void 0 ? _c : 12;
@@ -5848,8 +5968,16 @@ var AutoLayoutService = /** @class */ (function () {
         }
         else {
             (_a = resolveParentSize(fittedSizes), newParentWidth = _a.width, newParentHeight = _a.height);
+            if (preserveParentWidth)
+                newParentWidth = preservedParentWidth;
+            if (preserveParentHeight)
+                newParentHeight = preservedParentHeight;
             fittedSizes = calculateFittedSizes(newParentWidth, newParentHeight);
             (_b = resolveParentSize(fittedSizes), newParentWidth = _b.width, newParentHeight = _b.height);
+            if (preserveParentWidth)
+                newParentWidth = preservedParentWidth;
+            if (preserveParentHeight)
+                newParentHeight = preservedParentHeight;
         }
         var availableWidth = Math.max(0, newParentWidth - padding.x * 2);
         var availableHeight = Math.max(0, newParentHeight - padding.y * 2 - labelReservedTopLane);
@@ -5884,10 +6012,12 @@ var AutoLayoutService = /** @class */ (function () {
             height: newParentHeight,
         });
     };
-    AutoLayoutService.prototype.applyGridLayoutForParent = function (parentId, parent, children, preserveParentSize) {
+    AutoLayoutService.prototype.applyGridLayoutForParent = function (parentId, parent, children, options) {
         var _this = this;
         var _a, _b;
-        if (preserveParentSize === void 0) { preserveParentSize = false; }
+        var preserveParentSize = Boolean(options === null || options === void 0 ? void 0 : options.preserveParentSize);
+        var preserveParentWidth = preserveParentSize || Boolean(options === null || options === void 0 ? void 0 : options.preserveParentWidth);
+        var preserveParentHeight = preserveParentSize || Boolean(options === null || options === void 0 ? void 0 : options.preserveParentHeight);
         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;
@@ -5895,9 +6025,7 @@ var AutoLayoutService = /** @class */ (function () {
         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 sorted = this.sortGridChildrenForLayout(children);
         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) {
@@ -5912,20 +6040,33 @@ var AutoLayoutService = /** @class */ (function () {
                 };
             });
             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;
+            var totalGap = Math.max(0, clampedSizes.length - 1) * gap;
+            var usedUnits = effectiveWeights.reduce(function (sum, weight) { return sum + _this.clampGridUnits(weight); }, 0);
+            var requiredUnitWidth = effectiveWeights.reduce(function (max, weight, index) {
+                var _a, _b;
+                var slotUnits = Math.max(1, weight !== null && weight !== void 0 ? weight : 1);
+                var width = (_b = (_a = clampedSizes[index]) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0;
+                return Math.max(max, width / slotUnits);
+            }, 0);
+            var rowWidth = usedUnits >= GRID_ROW_UNITS
+                ? autoResize === 'grow-shrink'
+                    ? Math.round(requiredUnitWidth * GRID_ROW_UNITS) + totalGap
+                    : clampedSizes.reduce(function (sum, size) { return sum + size.width; }, 0) + totalGap
+                : Math.round(requiredUnitWidth * Math.max(1, usedUnits)) + totalGap;
             return {
                 row: row,
                 rowHeight: rowHeight,
                 rowWidth: rowWidth,
+                usedUnits: usedUnits,
                 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
+        var newParentWidth = preserveParentWidth
             ? Math.max(0, Math.round(parent.size.width))
             : this.resolveAutoResizedDimension(parent.size.width, padding.x * 2 + requiredInnerWidth, autoResize);
-        var newParentHeight = preserveParentSize
+        var newParentHeight = preserveParentHeight
             ? 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);
@@ -5944,8 +6085,11 @@ var AutoLayoutService = /** @class */ (function () {
             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 rowOuterWidth = metric.usedUnits >= GRID_ROW_UNITS
+                ? availableWidth
+                : Math.min(availableWidth, metric.rowWidth);
+            var rowInnerWidth = Math.max(0, rowOuterWidth - totalGap);
+            var cellWidths = _this.resolveGridCellWidths(rowInnerWidth, metric.effectiveWeights);
             var rowHeight = metric.rowHeight;
             var cursorX = padding.x;
             metric.row.childIds.forEach(function (childId, index) {
@@ -5969,6 +6113,13 @@ var AutoLayoutService = /** @class */ (function () {
             height: newParentHeight,
         });
     };
+    AutoLayoutService.prototype.resolveGridCellWidths = function (rowInnerWidth, weights) {
+        var _this = this;
+        if (weights.length === 0)
+            return [];
+        var safeWeights = weights.map(function (weight) { return _this.clampGridUnits(weight); });
+        return this.distributeWeightedSizes(Math.max(0, rowInnerWidth), safeWeights);
+    };
     AutoLayoutService.prototype.applyResolvedLayout = function (parentId, parent, desiredPositions, desiredSizes, parentSize) {
         var _this = this;
         var _a;
@@ -6031,43 +6182,96 @@ var AutoLayoutService = /** @class */ (function () {
             : Number.POSITIVE_INFINITY;
         return { minWidth: minWidth, maxWidth: maxWidth, minHeight: minHeight, maxHeight: maxHeight };
     };
+    AutoLayoutService.prototype.resolveAssignedGridRows = function (parent) {
+        var _a;
+        var children = this.model.getChildren(parent.id);
+        var sorted = this.sortGridChildrenForLayout(children);
+        var templateRows = this.normalizeGridTemplate((_a = parent.layout) === null || _a === void 0 ? void 0 : _a.gridTemplate);
+        return this.assignChildrenToGridRows(sorted.map(function (child) { return child.id; }), templateRows);
+    };
+    AutoLayoutService.prototype.repartitionAssignedGridRows = function (assignedRows, rowIndex, nextCurrentRowCount) {
+        var _a, _b;
+        var allChildIds = assignedRows.flatMap(function (row) { return row.childIds; });
+        var prefixRows = assignedRows.slice(0, rowIndex).map(function (row) { return ({
+            weights: __spreadArray([], row.weights.slice(0, row.childIds.length), true),
+            childIds: __spreadArray([], row.childIds, true),
+        }); });
+        var prefixCount = prefixRows.reduce(function (sum, row) { return sum + row.childIds.length; }, 0);
+        var nextRows = __spreadArray([], prefixRows, true);
+        var currentChildIds = allChildIds.slice(prefixCount, prefixCount + nextCurrentRowCount);
+        if (currentChildIds.length > 0) {
+            nextRows.push({
+                weights: this.fitGridRowWeights((_a = assignedRows[rowIndex]) === null || _a === void 0 ? void 0 : _a.weights, currentChildIds.length),
+                childIds: currentChildIds,
+            });
+        }
+        var cursor = prefixCount + currentChildIds.length;
+        var trailingRowIndex = rowIndex + 1;
+        while (cursor < allChildIds.length) {
+            var sourceRow = assignedRows[Math.min(trailingRowIndex, assignedRows.length - 1)];
+            var sourceCapacity = Math.max(1, (_b = sourceRow === null || sourceRow === void 0 ? void 0 : sourceRow.childIds.length) !== null && _b !== void 0 ? _b : 1);
+            var rowChildIds = allChildIds.slice(cursor, cursor + sourceCapacity);
+            nextRows.push({
+                weights: this.fitGridRowWeights(sourceRow === null || sourceRow === void 0 ? void 0 : sourceRow.weights, rowChildIds.length),
+                childIds: rowChildIds,
+            });
+            cursor += rowChildIds.length;
+            trailingRowIndex += 1;
+        }
+        return nextRows;
+    };
+    AutoLayoutService.prototype.fitGridRowWeights = function (sourceWeights, childCount) {
+        if (childCount <= 0)
+            return [];
+        var base = Array.isArray(sourceWeights) && sourceWeights.length > 0 ? sourceWeights : [1];
+        var normalizedBase = this.normalizeRowWeightsToTwelveUnits(base);
+        if (normalizedBase.length === childCount) {
+            return normalizedBase;
+        }
+        if (normalizedBase.length > childCount) {
+            return this.normalizeRowWeightsToTwelveUnits(normalizedBase.slice(0, childCount));
+        }
+        return this.buildEqualGridUnits(childCount);
+    };
+    AutoLayoutService.prototype.gridRowSnapshotsEqual = function (a, b) {
+        var _a, _b, _c, _d;
+        if (a.length !== b.length)
+            return false;
+        for (var index = 0; index < a.length; index += 1) {
+            var left = (_b = (_a = a[index]) === null || _a === void 0 ? void 0 : _a.childIds) !== null && _b !== void 0 ? _b : [];
+            var right = (_d = (_c = b[index]) === null || _c === void 0 ? void 0 : _c.childIds) !== null && _d !== void 0 ? _d : [];
+            if (left.length !== right.length)
+                return false;
+            for (var childIndex = 0; childIndex < left.length; childIndex += 1) {
+                if (left[childIndex] !== right[childIndex])
+                    return false;
+            }
+        }
+        return true;
+    };
     AutoLayoutService.prototype.normalizeGridTemplate = function (template) {
+        var slots = this.normalizeGridSlotUnits(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 });
+        var currentRow = [];
+        var currentUnits = 0;
+        slots.forEach(function (slotUnits) {
+            if (currentRow.length > 0 && currentUnits + slotUnits > GRID_ROW_UNITS) {
+                rows.push({ weights: __spreadArray([], currentRow, true) });
+                currentRow = [];
+                currentUnits = 0;
             }
+            currentRow.push(slotUnits);
+            currentUnits += slotUnits;
         });
+        if (currentRow.length > 0) {
+            rows.push({ weights: __spreadArray([], currentRow, true) });
+        }
         if (rows.length === 0) {
-            rows.push({ weights: [1] });
+            rows.push({ weights: [GRID_ROW_UNITS] });
         }
         return rows;
     };
     AutoLayoutService.prototype.assignChildrenToGridRows = function (childIds, templateRows) {
-        var _a;
         var assigned = [];
         var cursor = 0;
         templateRows.forEach(function (rowTemplate) {
@@ -6083,19 +6287,348 @@ var AutoLayoutService = /** @class */ (function () {
             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);
+            var rowChildren = childIds.slice(cursor, cursor + 1);
             assigned.push({
-                weights: Array.from({ length: rowChildren.length }, function () { return 1; }),
+                weights: [GRID_ROW_UNITS],
                 childIds: rowChildren,
             });
             cursor += rowChildren.length;
         }
         return assigned;
     };
+    AutoLayoutService.prototype.resolveGridChildSlotState = function (parentId, childId) {
+        var _this = this;
+        var _a;
+        var parent = this.model.getElement(parentId);
+        if (!parent || ((_a = parent.layout) === null || _a === void 0 ? void 0 : _a.mode) !== 'grid')
+            return null;
+        var assignedRows = this.resolveAssignedGridRows(parent);
+        if (assignedRows.length === 0)
+            return null;
+        var orderedChildIds = assignedRows.flatMap(function (row) { return row.childIds; });
+        var slotWeights = assignedRows.flatMap(function (row) { return row.weights.slice(0, row.childIds.length).map(function (weight) { return _this.clampGridUnits(weight); }); });
+        var childFlatIndex = orderedChildIds.indexOf(childId);
+        if (childFlatIndex < 0)
+            return null;
+        var rowIndex = assignedRows.findIndex(function (row) { return row.childIds.includes(childId); });
+        if (rowIndex < 0)
+            return null;
+        return { assignedRows: assignedRows, orderedChildIds: orderedChildIds, slotWeights: slotWeights, childFlatIndex: childFlatIndex, rowIndex: rowIndex };
+    };
+    AutoLayoutService.prototype.packGridRowsFromSlots = function (childIds, slotWeights) {
+        var _this = this;
+        var rows = [];
+        var currentChildIds = [];
+        var currentWeights = [];
+        var currentUnits = 0;
+        childIds.forEach(function (childId, index) {
+            var _a;
+            var slotUnits = _this.clampGridUnits((_a = slotWeights[index]) !== null && _a !== void 0 ? _a : GRID_ROW_UNITS);
+            if (currentChildIds.length > 0 && currentUnits + slotUnits > GRID_ROW_UNITS) {
+                rows.push({ childIds: __spreadArray([], currentChildIds, true), weights: __spreadArray([], currentWeights, true) });
+                currentChildIds = [];
+                currentWeights = [];
+                currentUnits = 0;
+            }
+            currentChildIds.push(childId);
+            currentWeights.push(slotUnits);
+            currentUnits += slotUnits;
+        });
+        if (currentChildIds.length > 0) {
+            rows.push({ childIds: __spreadArray([], currentChildIds, true), weights: __spreadArray([], currentWeights, true) });
+        }
+        return rows;
+    };
+    AutoLayoutService.prototype.resolveRequestedGridUnits = function (parent, currentRow, requestedWidth) {
+        var _a;
+        if (!parent.layout || parent.layout.mode !== 'grid' || !currentRow)
+            return GRID_ROW_UNITS;
+        var rowUnitWidth = this.resolveGridRowUnitWidth(Math.max(0, parent.size.width - this.resolveLayoutPadding(parent.layout).x * 2), currentRow.childIds.length, (_a = parent.layout.gap) !== null && _a !== void 0 ? _a : 12);
+        if (rowUnitWidth <= 0)
+            return GRID_ROW_UNITS;
+        return this.clampGridUnits(Math.round(requestedWidth / rowUnitWidth));
+    };
+    AutoLayoutService.prototype.sortGridChildrenForLayout = function (children) {
+        return __spreadArray([], children, true).sort(function (a, b) {
+            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;
+        });
+    };
+    AutoLayoutService.prototype.resolveRightwardGridOverflowChange = function (params) {
+        var _a, _b;
+        var assignedRows = params.assignedRows, rowIndex = params.rowIndex, childIndex = params.childIndex, requestedWidth = params.requestedWidth, availableWidth = params.availableWidth, gap = params.gap, parentLayout = params.parentLayout, parentId = params.parentId, childId = params.childId;
+        var currentRow = assignedRows[rowIndex];
+        if (!currentRow || childIndex < 0 || childIndex >= currentRow.childIds.length - 1)
+            return null;
+        var rowUnitWidth = this.resolveGridRowUnitWidth(availableWidth, currentRow.childIds.length, gap);
+        if (rowUnitWidth <= 0)
+            return null;
+        var currentUnits = (_b = (_a = currentRow.weights[childIndex]) !== null && _a !== void 0 ? _a : this.normalizeRowWeightsToTwelveUnits(currentRow.weights)[childIndex]) !== null && _b !== void 0 ? _b : 1;
+        var requestedUnits = this.clampLayoutSize(Math.round(requestedWidth / rowUnitWidth), currentUnits + 1, GRID_ROW_UNITS - 1);
+        var leftWeights = currentRow.weights.slice(0, childIndex);
+        var leftSum = leftWeights.reduce(function (sum, value) { return sum + value; }, 0);
+        var rightWeights = currentRow.weights.slice(childIndex + 1);
+        var rightIds = currentRow.childIds.slice(childIndex + 1);
+        var followingRows = assignedRows.slice(rowIndex + 1);
+        for (var retainCount = rightIds.length - 1; retainCount >= 0; retainCount -= 1) {
+            var maxTargetUnits = GRID_ROW_UNITS - leftSum - retainCount;
+            if (requestedUnits > maxTargetUnits)
+                continue;
+            var retainedIds = rightIds.slice(0, retainCount);
+            var retainedWeights = rightWeights.slice(0, retainCount);
+            var overflowIds = __spreadArray(__spreadArray([], rightIds.slice(retainCount), true), followingRows.flatMap(function (row) { return row.childIds; }), true);
+            var remainingUnits = GRID_ROW_UNITS - leftSum - requestedUnits;
+            var nextCurrentWeights = __spreadArray(__spreadArray(__spreadArray([], leftWeights, true), [
+                requestedUnits
+            ], false), this.distributeUnitsWithMinimums(remainingUnits, retainedWeights), true);
+            var nextRows = assignedRows.slice(0, rowIndex).map(function (row) { return ({
+                weights: __spreadArray([], row.weights, true),
+                childIds: __spreadArray([], row.childIds, true),
+            }); });
+            nextRows.push({
+                weights: nextCurrentWeights,
+                childIds: __spreadArray(__spreadArray([], currentRow.childIds.slice(0, childIndex + 1), true), retainedIds, true),
+            });
+            var trailingRows = this.reflowTrailingGridRows(overflowIds, followingRows, currentRow.weights.length);
+            var allRows = __spreadArray(__spreadArray([], nextRows, true), trailingRows, true);
+            var beforeRows = assignedRows.map(function (row) { return ({ childIds: __spreadArray([], row.childIds, true) }); });
+            var afterRows = allRows.map(function (row) { return ({ childIds: __spreadArray([], row.childIds, true) }); });
+            if (this.gridRowSnapshotsEqual(beforeRows, afterRows) && this.gridWeightsEqual(assignedRows, allRows)) {
+                return null;
+            }
+            return {
+                parentId: parentId,
+                triggerChildId: childId,
+                reason: 'child-resize-redistribute',
+                beforeRows: beforeRows,
+                afterRows: afterRows,
+                nextLayout: __assign(__assign({}, parentLayout), { gridTemplate: this.flattenAssignedRowsToGridTemplate(allRows) }),
+            };
+        }
+        return null;
+    };
+    AutoLayoutService.prototype.resolveSameRowGridUnitResizeChange = function (params) {
+        var _this = this;
+        var _a, _b, _c, _d;
+        var assignedRows = params.assignedRows, rowIndex = params.rowIndex, childIndex = params.childIndex, requestedWidth = params.requestedWidth, availableWidth = params.availableWidth, gap = params.gap, parentLayout = params.parentLayout, parentId = params.parentId, childId = params.childId;
+        var currentRow = assignedRows[rowIndex];
+        if (!currentRow || currentRow.childIds.length <= 1)
+            return null;
+        var donorIndices = Array.from({ length: Math.max(0, currentRow.childIds.length - childIndex - 1) }, function (_, index) { return childIndex + 1 + index; });
+        if (donorIndices.length === 0)
+            return null;
+        var rowUnitWidth = this.resolveGridRowUnitWidth(availableWidth, currentRow.childIds.length, gap);
+        if (rowUnitWidth <= 0)
+            return null;
+        var currentUnits = (_b = (_a = currentRow.weights[childIndex]) !== null && _a !== void 0 ? _a : this.normalizeRowWeightsToTwelveUnits(currentRow.weights)[childIndex]) !== null && _b !== void 0 ? _b : 1;
+        var requestedUnits = this.clampLayoutSize(Math.round(requestedWidth / rowUnitWidth), 1, GRID_ROW_UNITS - 1);
+        if (requestedUnits === currentUnits)
+            return null;
+        var nextWeights = __spreadArray([], currentRow.weights, true);
+        var delta = requestedUnits - currentUnits;
+        if (delta > 0) {
+            for (var _i = 0, donorIndices_1 = donorIndices; _i < donorIndices_1.length; _i++) {
+                var donorIndex = donorIndices_1[_i];
+                if (delta <= 0)
+                    break;
+                var donorCapacity = Math.max(0, ((_c = nextWeights[donorIndex]) !== null && _c !== void 0 ? _c : 1) - 1);
+                var transfer = Math.min(delta, donorCapacity);
+                nextWeights[donorIndex] -= transfer;
+                nextWeights[childIndex] += transfer;
+                delta -= transfer;
+            }
+        }
+        else {
+            var release = Math.abs(delta);
+            for (var _e = 0, donorIndices_2 = donorIndices; _e < donorIndices_2.length; _e++) {
+                var donorIndex = donorIndices_2[_e];
+                if (release <= 0)
+                    break;
+                var transfer = release;
+                nextWeights[donorIndex] += transfer;
+                nextWeights[childIndex] -= transfer;
+                release -= transfer;
+            }
+        }
+        if (delta > 0)
+            return null;
+        if (((_d = nextWeights[childIndex]) !== null && _d !== void 0 ? _d : currentUnits) === currentUnits)
+            return null;
+        var nextRows = assignedRows.map(function (row, index) {
+            return index === rowIndex
+                ? {
+                    weights: _this.normalizeRowWeightsToTwelveUnits(nextWeights),
+                    childIds: __spreadArray([], row.childIds, true),
+                }
+                : { weights: __spreadArray([], row.weights, true), childIds: __spreadArray([], row.childIds, true) };
+        });
+        return {
+            parentId: parentId,
+            triggerChildId: childId,
+            reason: 'child-resize-redistribute',
+            beforeRows: assignedRows.map(function (row) { return ({ childIds: __spreadArray([], row.childIds, true) }); }),
+            afterRows: nextRows.map(function (row) { return ({ childIds: __spreadArray([], row.childIds, true) }); }),
+            nextLayout: __assign(__assign({}, parentLayout), { gridTemplate: this.flattenAssignedRowsToGridTemplate(nextRows) }),
+        };
+    };
+    AutoLayoutService.prototype.splitGridRowIntoTwelveUnits = function (assignedRows, rowIndex, childId, requestedWidth, availableWidth, gap) {
+        var _a;
+        var currentRow = assignedRows[rowIndex];
+        var nextRow = assignedRows[rowIndex + 1];
+        if (!currentRow || !nextRow || currentRow.childIds.length !== 1 || nextRow.childIds.length === 0) {
+            return [];
+        }
+        var rowUnitWidth = this.resolveGridRowUnitWidth(availableWidth, 2, gap);
+        var requestedUnits = this.clampLayoutSize(Math.round(requestedWidth / rowUnitWidth), 1, GRID_ROW_UNITS - 1);
+        var nextRows = assignedRows.slice(0, rowIndex).map(function (row) { return ({
+            weights: __spreadArray([], row.weights, true),
+            childIds: __spreadArray([], row.childIds, true),
+        }); });
+        nextRows.push({
+            weights: [requestedUnits, GRID_ROW_UNITS - requestedUnits],
+            childIds: [childId, nextRow.childIds[0]],
+        });
+        var trailingRows = [];
+        var remainingChildIds = __spreadArray(__spreadArray([], nextRow.childIds.slice(1), true), assignedRows.slice(rowIndex + 2).flatMap(function (row) { return row.childIds; }), true);
+        var cursor = 0;
+        var seedRows = assignedRows.slice(rowIndex + 1);
+        var seedIndex = 0;
+        while (cursor < remainingChildIds.length) {
+            var seed = seedRows[Math.min(seedIndex, seedRows.length - 1)];
+            var capacity = Math.max(1, (_a = seed === null || seed === void 0 ? void 0 : seed.childIds.length) !== null && _a !== void 0 ? _a : 1);
+            var rowChildIds = remainingChildIds.slice(cursor, cursor + capacity);
+            trailingRows.push({
+                weights: this.fitGridRowWeights(seed === null || seed === void 0 ? void 0 : seed.weights, rowChildIds.length),
+                childIds: rowChildIds,
+            });
+            cursor += rowChildIds.length;
+            seedIndex += 1;
+        }
+        return __spreadArray(__spreadArray([], nextRows, true), trailingRows, true);
+    };
+    AutoLayoutService.prototype.reflowTrailingGridRows = function (childIds, seedRows, fallbackColumnCount) {
+        var _a;
+        if (childIds.length === 0)
+            return [];
+        var trailingRows = [];
+        var cursor = 0;
+        var seedIndex = 0;
+        var normalizedSeedRows = seedRows.length > 0 ? seedRows : [{ weights: this.buildEqualGridUnits(Math.max(1, fallbackColumnCount)), childIds: [] }];
+        while (cursor < childIds.length) {
+            var seed = normalizedSeedRows[Math.min(seedIndex, normalizedSeedRows.length - 1)];
+            var capacity = Math.max(1, (_a = seed === null || seed === void 0 ? void 0 : seed.weights.length) !== null && _a !== void 0 ? _a : fallbackColumnCount);
+            var rowChildIds = childIds.slice(cursor, cursor + capacity);
+            trailingRows.push({
+                weights: this.fitGridRowWeights(seed === null || seed === void 0 ? void 0 : seed.weights, rowChildIds.length),
+                childIds: rowChildIds,
+            });
+            cursor += rowChildIds.length;
+            seedIndex += 1;
+        }
+        return trailingRows;
+    };
+    AutoLayoutService.prototype.flattenAssignedRowsToGridTemplate = function (rows) {
+        var _this = this;
+        return rows.flatMap(function (row) { return _this.normalizeRowWeightsToTwelveUnits(row.weights.slice(0, row.childIds.length)); });
+    };
+    AutoLayoutService.prototype.buildEqualGridUnits = function (count) {
+        if (count <= 0)
+            return [];
+        var base = Math.floor(GRID_ROW_UNITS / count);
+        var remainder = GRID_ROW_UNITS - base * count;
+        return Array.from({ length: count }, function (_, index) { return base + (index < remainder ? 1 : 0); });
+    };
+    AutoLayoutService.prototype.normalizeRowWeightsToTwelveUnits = function (weights) {
+        var safeWeights = weights.map(function (weight) { return (Number.isFinite(weight) && weight > 0 ? weight : 1); });
+        if (safeWeights.length === 0)
+            return [GRID_ROW_UNITS];
+        if (safeWeights.length === 1)
+            return [GRID_ROW_UNITS];
+        var distributed = this.distributeWeightedSizes(GRID_ROW_UNITS, safeWeights);
+        var normalized = distributed.map(function (value) { return Math.max(1, value); });
+        var total = normalized.reduce(function (sum, value) { return sum + value; }, 0);
+        if (total === GRID_ROW_UNITS)
+            return normalized;
+        if (total < GRID_ROW_UNITS) {
+            var cursor_1 = 0;
+            while (total < GRID_ROW_UNITS) {
+                normalized[cursor_1 % normalized.length] += 1;
+                total += 1;
+                cursor_1 += 1;
+            }
+            return normalized;
+        }
+        var cursor = normalized.length - 1;
+        while (total > GRID_ROW_UNITS && cursor >= 0) {
+            if (normalized[cursor] > 1) {
+                normalized[cursor] -= 1;
+                total -= 1;
+            }
+            else {
+                cursor -= 1;
+            }
+            if (cursor < 0 && total > GRID_ROW_UNITS) {
+                cursor = normalized.length - 1;
+            }
+        }
+        return normalized;
+    };
+    AutoLayoutService.prototype.normalizeGridSlotUnits = function (template) {
+        var _this = this;
+        var slots = [];
+        (template !== null && template !== void 0 ? template : []).forEach(function (entry) {
+            if (typeof entry === 'number') {
+                if (Number.isFinite(entry) && entry > 0) {
+                    slots.push(_this.clampGridUnits(entry));
+                }
+                return;
+            }
+            if (!Array.isArray(entry))
+                return;
+            entry.forEach(function (value) {
+                if (Number.isFinite(value) && value > 0) {
+                    slots.push(_this.clampGridUnits(value));
+                }
+            });
+        });
+        return slots;
+    };
+    AutoLayoutService.prototype.clampGridUnits = function (value) {
+        return Math.max(1, Math.min(GRID_ROW_UNITS, Math.round(value)));
+    };
+    AutoLayoutService.prototype.distributeUnitsWithMinimums = function (totalUnits, seedWeights) {
+        if (seedWeights.length === 0)
+            return [];
+        var minimumTotal = seedWeights.length;
+        var clampedTotal = Math.max(minimumTotal, totalUnits);
+        var distributed = this.distributeWeightedSizes(clampedTotal - minimumTotal, seedWeights).map(function (value) { return value + 1; });
+        return distributed;
+    };
+    AutoLayoutService.prototype.gridWeightsEqual = function (leftRows, rightRows) {
+        var _a, _b, _c, _d;
+        if (leftRows.length !== rightRows.length)
+            return false;
+        for (var rowIndex = 0; rowIndex < leftRows.length; rowIndex += 1) {
+            var left = (_b = (_a = leftRows[rowIndex]) === null || _a === void 0 ? void 0 : _a.weights) !== null && _b !== void 0 ? _b : [];
+            var right = (_d = (_c = rightRows[rowIndex]) === null || _c === void 0 ? void 0 : _c.weights) !== null && _d !== void 0 ? _d : [];
+            if (left.length !== right.length)
+                return false;
+            for (var index = 0; index < left.length; index += 1) {
+                if (left[index] !== right[index])
+                    return false;
+            }
+        }
+        return true;
+    };
+    AutoLayoutService.prototype.resolveGridRowUnitWidth = function (availableWidth, childCount, gap) {
+        var totalGap = Math.max(0, childCount - 1) * gap;
+        var rowInnerWidth = Math.max(0, availableWidth - totalGap);
+        return rowInnerWidth / GRID_ROW_UNITS;
+    };
     AutoLayoutService.prototype.resolveLabelReservedTopLane = function (parentId, layout) {
         var _a, _b, _c, _d;
         var policy = layout === null || layout === void 0 ? void 0 : layout.labelReservedSpace;
@@ -6630,11 +7163,18 @@ var LinkRoutingService = /** @class */ (function () {
         var onEdge = (shape === null || shape === void 0 ? void 0 : shape.projectToBorder)
             ? this.isPointOnProjectedBorder(point, rect, shape.projectToBorder, EDGE_TOLERANCE)
             : this.isPointOnRectEdge(point, rect, EDGE_TOLERANCE);
-        var onEdgeSide = onEdge ? (_b = (_a = shape === null || shape === void 0 ? void 0 : shape.resolveBorderSide) === null || _a === void 0 ? void 0 : _a.call(shape, point, rect)) !== null && _b !== void 0 ? _b : this.resolveEdgeSide(point, rect) : undefined;
+        var projectedBorderPoint = (shape === null || shape === void 0 ? void 0 : shape.projectToBorder)
+            ? shape.projectToBorder(point, rect)
+            : projectPointToBoundary(point, rect, 'rect');
+        var projectedBoundaryEquivalent = !onEdge && !this.isPointInsideRect(point, rect, EDGE_TOLERANCE);
+        var sidePoint = projectedBoundaryEquivalent ? projectedBorderPoint : point;
+        var onEdgeSide = onEdge || projectedBoundaryEquivalent
+            ? (_b = (_a = shape === null || shape === void 0 ? void 0 : shape.resolveBorderSide) === null || _a === void 0 ? void 0 : _a.call(shape, sidePoint, rect)) !== null && _b !== void 0 ? _b : this.resolveEdgeSide(sidePoint, rect)
+            : undefined;
         if (onEdgeSide && oppositePoint) {
             onEdgeSide = this.resolveCornerTieBreakSide(point, rect, oppositePoint, onEdgeSide);
         }
-        return { onEdge: onEdge, onEdgeSide: onEdgeSide };
+        return { onEdge: onEdge || projectedBoundaryEquivalent, onEdgeSide: onEdgeSide };
     };
     LinkRoutingService.prototype.resolveCornerTieBreakSide = function (point, rect, oppositePoint, currentSide) {
         var onLeft = Math.abs(point.x - rect.x) <= EDGE_TOLERANCE;
@@ -6796,6 +7336,12 @@ var LinkRoutingService = /** @class */ (function () {
         var onBottom = Math.abs(point.y - (rect.y + rect.height)) <= tolerance;
         return onLeft || onRight || onTop || onBottom;
     };
+    LinkRoutingService.prototype.isPointInsideRect = 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);
+    };
     LinkRoutingService.prototype.resolveEdgeSide = function (point, rect) {
         var distances = [
             { side: 'left', value: Math.abs(point.x - rect.x) },
@@ -6840,8 +7386,8 @@ var MutationPipeline = /** @class */ (function () {
 }());
 
 var clampToRect = function (point, rect) { return ({
-    x: clamp(point.x, rect.x, rect.x + rect.width),
-    y: clamp(point.y, rect.y, rect.y + rect.height),
+    x: clamp$1(point.x, rect.x, rect.x + rect.width),
+    y: clamp$1(point.y, rect.y, rect.y + rect.height),
 }); };
 var snapToRectBorder = function (point, rect) {
     var clamped = clampToRect(point, rect);
@@ -6978,9 +7524,7 @@ var DiagramEngine = /** @class */ (function () {
         });
         this.emitChange(allPatches);
     };
-    DiagramEngine.prototype.moveElementTo = function (id, x, y) {
-        var _this = this;
-        var oldWorld = this.model.getElementWorldPosition(id);
+    DiagramEngine.prototype.resolveElementMovePosition = function (id, x, y) {
         var snapped = this.snapper.snap({ x: x, y: y });
         var element = this.model.getElement(id);
         var position = snapped;
@@ -7020,14 +7564,46 @@ var DiagramEngine = /** @class */ (function () {
                 }
             }
         }
+        return { element: element === null || element === void 0 ? void 0 : element.toData(), position: position };
+    };
+    DiagramEngine.prototype.buildChildMutationLayoutSteps = function (parentId, options) {
+        var _this = this;
+        var _a;
+        if (!parentId) {
+            return [function () { return _this.applyLayoutCascade(null); }];
+        }
+        var parent = this.model.getElement(parentId);
+        if ((options === null || options === void 0 ? void 0 : options.preserveGridParentWidth) && ((_a = parent === null || parent === void 0 ? void 0 : parent.layout) === null || _a === void 0 ? void 0 : _a.mode) === 'grid') {
+            return [
+                function () { return _this.applyLayoutForParent(parentId, { preserveParentWidth: true }); },
+                function () { var _a; return _this.applyLayoutCascade((_a = parent.parentId) !== null && _a !== void 0 ? _a : null); },
+            ];
+        }
+        return [function () { return _this.applyLayoutCascade(parentId); }];
+    };
+    DiagramEngine.prototype.moveElementTo = function (id, x, y) {
+        var _a;
+        var oldWorld = this.model.getElementWorldPosition(id);
+        var _b = this.resolveElementMovePosition(id, x, y), element = _b.element, position = _b.position;
+        var beforeGridSlotState = (element === null || element === void 0 ? void 0 : element.parentId)
+            ? this.autoLayoutService.describeGridSlotState(element.parentId)
+            : null;
         var patches = this.commandQueue.run(createMoveElementCommand(id, position), this.model);
+        if ((element === null || element === void 0 ? void 0 : element.parentId) && beforeGridSlotState) {
+            var reorderedLayout = this.autoLayoutService.resolveGridReorderedLayout(element.parentId, beforeGridSlotState);
+            if (reorderedLayout) {
+                patches.push.apply(patches, this.commandQueue.run(createSetElementLayoutCommand(element.parentId, reorderedLayout), this.model));
+            }
+        }
         var movedPortIds = [];
         if (element) {
             movedPortIds.push.apply(movedPortIds, this.collectElementPortIds(element.id));
         }
         var allPatches = this.mutationPipeline.run({
             basePatches: patches,
-            layoutSteps: [function () { var _a; return _this.applyLayoutCascade((_a = element === null || element === void 0 ? void 0 : element.parentId) !== null && _a !== void 0 ? _a : null); }],
+            layoutSteps: this.buildChildMutationLayoutSteps((_a = element === null || element === void 0 ? void 0 : element.parentId) !== null && _a !== void 0 ? _a : null, {
+                preserveGridParentWidth: true,
+            }),
             movedPortIds: movedPortIds,
         });
         this.emitChange(allPatches);
@@ -7044,24 +7620,106 @@ var DiagramEngine = /** @class */ (function () {
             }
         }
     };
+    DiagramEngine.prototype.resizeElementBounds = function (id, bounds) {
+        var _this = this;
+        var _a, _b, _c, _d;
+        var _e = this.resolveElementMovePosition(id, bounds.x, bounds.y), element = _e.element, position = _e.position;
+        if (!element)
+            return;
+        var oldSize = __assign({}, element.size);
+        var preserveParentSize = Boolean(element.layout && element.layout.mode !== 'manual');
+        var gridLayoutChange = this.resolveGridChildWidthResizeTopologyChange(element, bounds.width);
+        var patches = [];
+        if (gridLayoutChange) {
+            patches.push.apply(patches, this.commandQueue.run(createSetElementLayoutCommand(gridLayoutChange.parentId, gridLayoutChange.afterLayout), this.model));
+        }
+        var positionChanged = element.position.x !== position.x || element.position.y !== position.y;
+        if (positionChanged) {
+            patches.push.apply(patches, this.commandQueue.run(createMoveElementCommand(id, position), this.model));
+        }
+        patches.push.apply(patches, this.commandQueue.run(createResizeElementCommand(id, { width: bounds.width, height: bounds.height }), this.model));
+        var movedPortIds = this.collectElementPortIds(element.id);
+        var layoutSteps = [function () { return _this.applyLayoutForParent(id, { preserveParentSize: preserveParentSize }); }];
+        if (gridLayoutChange && element.parentId) {
+            var grandParentId_1 = (_b = (_a = this.model.getElement(element.parentId)) === null || _a === void 0 ? void 0 : _a.parentId) !== null && _b !== void 0 ? _b : null;
+            layoutSteps.push(function () { var _a; return _this.applyLayoutForParent((_a = element.parentId) !== null && _a !== void 0 ? _a : '', { preserveParentWidth: true }); });
+            if (grandParentId_1) {
+                layoutSteps.push(function () { return _this.applyLayoutCascade(grandParentId_1); });
+            }
+        }
+        else {
+            layoutSteps.push.apply(layoutSteps, this.buildChildMutationLayoutSteps((_c = element.parentId) !== null && _c !== void 0 ? _c : null, {
+                preserveGridParentWidth: true,
+            }));
+        }
+        var allPatches = this.mutationPipeline.run({
+            basePatches: patches,
+            layoutSteps: layoutSteps,
+            movedPortIds: movedPortIds,
+        });
+        if (gridLayoutChange) {
+            this.events.emit('gridLayoutChanged', {
+                parentId: gridLayoutChange.parentId,
+                triggerChildId: gridLayoutChange.triggerChildId,
+                reason: gridLayoutChange.reason,
+                beforeRows: gridLayoutChange.beforeRows,
+                afterRows: gridLayoutChange.afterRows,
+                beforeGridTemplate: gridLayoutChange.beforeGridTemplate,
+                afterGridTemplate: gridLayoutChange.afterGridTemplate,
+            });
+        }
+        this.emitChange(allPatches);
+        var newSize = (_d = this.model.getElement(id)) === null || _d === void 0 ? void 0 : _d.size;
+        if (newSize && (oldSize.width !== newSize.width || oldSize.height !== newSize.height)) {
+            this.events.emit('elementResized', { elementId: id, oldSize: oldSize, newSize: __assign({}, newSize) });
+        }
+    };
     DiagramEngine.prototype.resizeElement = function (id, width, height) {
         var _this = this;
-        var _a;
+        var _a, _b, _c, _d;
         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 gridLayoutChange = element
+            ? this.resolveGridChildWidthResizeTopologyChange(element, width)
+            : null;
+        var patches = [];
+        if (gridLayoutChange) {
+            patches.push.apply(patches, this.commandQueue.run(createSetElementLayoutCommand(gridLayoutChange.parentId, gridLayoutChange.afterLayout), this.model));
+        }
+        patches.push.apply(patches, this.commandQueue.run(createResizeElementCommand(id, { width: width, height: height }), this.model));
         var movedPortIds = element ? this.collectElementPortIds(element.id) : [];
+        var layoutSteps = [function () { return _this.applyLayoutForParent(id, { preserveParentSize: preserveParentSize }); }];
+        if (gridLayoutChange && (element === null || element === void 0 ? void 0 : element.parentId)) {
+            var grandParentId_2 = (_b = (_a = this.model.getElement(element.parentId)) === null || _a === void 0 ? void 0 : _a.parentId) !== null && _b !== void 0 ? _b : null;
+            layoutSteps.push(function () { var _a; return _this.applyLayoutForParent((_a = element.parentId) !== null && _a !== void 0 ? _a : '', { preserveParentWidth: true }); });
+            if (grandParentId_2) {
+                layoutSteps.push(function () { return _this.applyLayoutCascade(grandParentId_2); });
+            }
+        }
+        else {
+            layoutSteps.push.apply(layoutSteps, this.buildChildMutationLayoutSteps((_c = element === null || element === void 0 ? void 0 : element.parentId) !== null && _c !== void 0 ? _c : null, {
+                preserveGridParentWidth: true,
+            }));
+        }
         var allPatches = this.mutationPipeline.run({
             basePatches: patches,
-            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); },
-            ],
+            layoutSteps: layoutSteps,
             movedPortIds: movedPortIds,
         });
+        if (gridLayoutChange) {
+            this.events.emit('gridLayoutChanged', {
+                parentId: gridLayoutChange.parentId,
+                triggerChildId: gridLayoutChange.triggerChildId,
+                reason: gridLayoutChange.reason,
+                beforeRows: gridLayoutChange.beforeRows,
+                afterRows: gridLayoutChange.afterRows,
+                beforeGridTemplate: gridLayoutChange.beforeGridTemplate,
+                afterGridTemplate: gridLayoutChange.afterGridTemplate,
+            });
+        }
         this.emitChange(allPatches);
-        var newSize = (_a = this.model.getElement(id)) === null || _a === void 0 ? void 0 : _a.size;
+        var newSize = (_d = this.model.getElement(id)) === null || _d === void 0 ? void 0 : _d.size;
         if (oldSize && newSize && (oldSize.width !== newSize.width || oldSize.height !== newSize.height)) {
             this.events.emit('elementResized', { elementId: id, oldSize: __assign({}, oldSize), newSize: __assign({}, newSize) });
         }
@@ -7366,6 +8024,7 @@ var DiagramEngine = /** @class */ (function () {
         return baseRotation + instanceRotation;
     };
     DiagramEngine.prototype.normalizeElementResize = function (id, proposal, handle, minSize) {
+        var _a, _b;
         if (minSize === void 0) { minSize = 20; }
         var clamped = {
             x: proposal.x,
@@ -7377,13 +8036,19 @@ var DiagramEngine = /** @class */ (function () {
         if (!element)
             return clamped;
         var lockHorizontalResize = this.shouldLockAutoLayoutChildHorizontalResize(element);
+        var currentWorldPosition = this.model.getElementWorldPosition(id);
+        var anchorGridWidthToLeft = this.shouldAnchorAutoLayoutGridChildWidthToLeft(element);
+        var freezeGridLeftEdge = anchorGridWidthToLeft || lockHorizontalResize;
+        var snappedGridWidth = this.resolveSnappedGridChildWidth(element, clamped.width);
         var shape = this.shapeRegistry.get(element.shapeId);
         if (!(shape === null || shape === void 0 ? void 0 : shape.normalizeResize)) {
-            if (!lockHorizontalResize)
+            if (!lockHorizontalResize && !anchorGridWidthToLeft)
                 return clamped;
-            var width_1 = Math.max(minSize, element.size.width);
-            var x_1 = clamped.x;
-            if (handle === 'sw' || handle === 'nw') {
+            var width_1 = lockHorizontalResize
+                ? Math.max(minSize, element.size.width)
+                : Math.max(minSize, snappedGridWidth);
+            var x_1 = freezeGridLeftEdge ? ((_a = currentWorldPosition === null || currentWorldPosition === void 0 ? void 0 : currentWorldPosition.x) !== null && _a !== void 0 ? _a : clamped.x) : clamped.x;
+            if (!freezeGridLeftEdge && (handle === 'sw' || handle === 'nw')) {
                 x_1 += clamped.width - width_1;
             }
             return { x: x_1, y: clamped.y, width: width_1, height: clamped.height };
@@ -7394,11 +8059,15 @@ var DiagramEngine = /** @class */ (function () {
             minSize: minSize,
             proposal: { width: clamped.width, height: clamped.height },
         });
-        var width = lockHorizontalResize ? Math.max(minSize, element.size.width) : Math.max(minSize, normalized.width);
+        var width = lockHorizontalResize
+            ? Math.max(minSize, element.size.width)
+            : anchorGridWidthToLeft
+                ? Math.max(minSize, snappedGridWidth)
+                : Math.max(minSize, normalized.width);
         var height = Math.max(minSize, normalized.height);
-        var x = clamped.x;
+        var x = freezeGridLeftEdge ? ((_b = currentWorldPosition === null || currentWorldPosition === void 0 ? void 0 : currentWorldPosition.x) !== null && _b !== void 0 ? _b : clamped.x) : clamped.x;
         var y = clamped.y;
-        if (handle === 'sw' || handle === 'nw') {
+        if (!freezeGridLeftEdge && (handle === 'sw' || handle === 'nw')) {
             x += clamped.width - width;
         }
         if (handle === 'ne' || handle === 'nw') {
@@ -7416,7 +8085,64 @@ var DiagramEngine = /** @class */ (function () {
         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';
+        if (((_b = parent === null || parent === void 0 ? void 0 : parent.layout) === null || _b === void 0 ? void 0 : _b.mode) !== 'grid')
+            return false;
+        return !Boolean(parent.layout.gridChildWidthResizeEnabled);
+    };
+    DiagramEngine.prototype.shouldAnchorAutoLayoutGridChildWidthToLeft = 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 Boolean(((_b = parent === null || parent === void 0 ? void 0 : parent.layout) === null || _b === void 0 ? void 0 : _b.mode) === 'grid' && parent.layout.gridChildWidthResizeEnabled);
+    };
+    DiagramEngine.prototype.shouldRestrictAutoLayoutChildRightGrowth = function (element, handle, requestedWidth) {
+        return false;
+    };
+    DiagramEngine.prototype.resolveSnappedGridChildWidth = function (element, requestedWidth) {
+        var _a;
+        var parentId = (_a = element.parentId) !== null && _a !== void 0 ? _a : null;
+        if (!parentId)
+            return requestedWidth;
+        if (this.model.getChildren(element.id).length > 0)
+            return requestedWidth;
+        if (element.layout && element.layout.mode !== 'manual')
+            return requestedWidth;
+        var parent = this.model.getElement(parentId);
+        if (!(parent === null || parent === void 0 ? void 0 : parent.layout) || parent.layout.mode !== 'grid' || !parent.layout.gridChildWidthResizeEnabled)
+            return requestedWidth;
+        return this.autoLayoutService.snapGridChildRequestedWidth(parentId, element.id, requestedWidth);
+    };
+    DiagramEngine.prototype.resolveGridChildWidthResizeTopologyChange = function (element, requestedWidth) {
+        var _a, _b, _c;
+        var parentId = (_a = element.parentId) !== null && _a !== void 0 ? _a : null;
+        if (!parentId)
+            return null;
+        if (this.model.getChildren(element.id).length > 0)
+            return null;
+        if (element.layout && element.layout.mode !== 'manual')
+            return null;
+        var parent = this.model.getElement(parentId);
+        if (!parent || ((_b = parent.layout) === null || _b === void 0 ? void 0 : _b.mode) !== 'grid' || !parent.layout.gridChildWidthResizeEnabled)
+            return null;
+        var topologyChange = this.autoLayoutService.resolveGridChildResizeTopologyChange(parentId, element.id, requestedWidth);
+        if (!topologyChange)
+            return null;
+        return {
+            parentId: topologyChange.parentId,
+            triggerChildId: topologyChange.triggerChildId,
+            reason: topologyChange.reason,
+            beforeRows: topologyChange.beforeRows,
+            afterRows: topologyChange.afterRows,
+            beforeGridTemplate: parent.layout.gridTemplate ? __spreadArray([], parent.layout.gridTemplate, true) : undefined,
+            afterGridTemplate: __spreadArray([], ((_c = topologyChange.nextLayout.gridTemplate) !== null && _c !== void 0 ? _c : []), true),
+            afterLayout: topologyChange.nextLayout,
+        };
     };
     DiagramEngine.prototype.getPortWorldPosition = function (id) {
         return this.model.getPortWorldPosition(id);
@@ -7699,8 +8425,8 @@ var DiagramEngine = /** @class */ (function () {
         }
         if (style === null || style === void 0 ? void 0 : style.moveBounds) {
             var bounds = style.moveBounds;
-            position.x = clamp(position.x, bounds.x, bounds.x + bounds.width);
-            position.y = clamp(position.y, bounds.y, bounds.y + bounds.height);
+            position.x = clamp$1(position.x, bounds.x, bounds.x + bounds.width);
+            position.y = clamp$1(position.y, bounds.y, bounds.y + bounds.height);
         }
         if (effectiveMoveMode === 'border') {
             var resolvedBorder = this.resolveBorderPositionWithLimits(position, element, (_e = element.portMovement) === null || _e === void 0 ? void 0 : _e.positionLimits);
@@ -9575,6 +10301,10 @@ var KonvaInteraction = /** @class */ (function () {
                 return;
             }
             if (hit.type === 'text') {
+                if (!_this.isTextMovable(hit.id)) {
+                    _this.setCursor('default');
+                    return;
+                }
                 var base = _this.engine.getTextWorldPosition(hit.id);
                 if (base) {
                     _this.dragState = {
@@ -9964,6 +10694,8 @@ var KonvaInteraction = /** @class */ (function () {
             var hit = _this.resolveHit(point);
             if (!hit || hit.type !== 'text')
                 return;
+            if (!_this.isTextEditable(hit.id))
+                return;
             _this.startTextEdit(hit.id);
         };
         this.stage.on('dblclick dbltap', doubleClick);
@@ -11116,8 +11848,12 @@ var KonvaInteraction = /** @class */ (function () {
                 y: normalized.y + normalized.height / 2,
             }
             : { x: normalized.x, y: normalized.y };
-        this.engine.moveElementTo(state.elementId, moveTarget.x, moveTarget.y);
-        this.engine.resizeElement(state.elementId, normalized.width, normalized.height);
+        this.engine.resizeElementBounds(state.elementId, {
+            x: moveTarget.x,
+            y: moveTarget.y,
+            width: normalized.width,
+            height: normalized.height,
+        });
         this.updateSelectionOverlays();
     };
     KonvaInteraction.prototype.parseResizeHandle = function (id) {
@@ -11453,6 +12189,14 @@ var KonvaInteraction = /** @class */ (function () {
     KonvaInteraction.prototype.getTextById = function (id) {
         return this.engine.getState().texts.find(function (text) { return text.id === id; });
     };
+    KonvaInteraction.prototype.isTextMovable = function (id) {
+        var _a, _b;
+        return ((_b = (_a = this.getTextById(id)) === null || _a === void 0 ? void 0 : _a.interaction) === null || _b === void 0 ? void 0 : _b.movable) !== false;
+    };
+    KonvaInteraction.prototype.isTextEditable = function (id) {
+        var _a, _b;
+        return ((_b = (_a = this.getTextById(id)) === null || _a === void 0 ? void 0 : _a.interaction) === null || _b === void 0 ? void 0 : _b.editable) !== false;
+    };
     KonvaInteraction.prototype.getLinkById = function (id) {
         return this.engine.getState().links.find(function (link) { return link.id === id; });
     };
@@ -12135,6 +12879,24 @@ var hasBounds = function (bounds) {
         bounds.maxX >= bounds.minX &&
         bounds.maxY >= bounds.minY;
 };
+var DEFAULT_VIEWPORT_FIT_PADDING = 24;
+var DEFAULT_VIEWPORT_FIT_MIN_ZOOM = 0.2;
+var DEFAULT_VIEWPORT_FIT_MAX_ZOOM = 3;
+var resolveViewportFitOptions = function (options) {
+    var padding = typeof (options === null || options === void 0 ? void 0 : options.padding) === 'number' && Number.isFinite(options.padding)
+        ? Math.max(0, options.padding)
+        : DEFAULT_VIEWPORT_FIT_PADDING;
+    var requestedMinZoom = typeof (options === null || options === void 0 ? void 0 : options.minZoom) === 'number' && Number.isFinite(options.minZoom)
+        ? Math.max(0.000001, options.minZoom)
+        : DEFAULT_VIEWPORT_FIT_MIN_ZOOM;
+    var requestedMaxZoom = typeof (options === null || options === void 0 ? void 0 : options.maxZoom) === 'number' && Number.isFinite(options.maxZoom)
+        ? Math.max(0.000001, options.maxZoom)
+        : DEFAULT_VIEWPORT_FIT_MAX_ZOOM;
+    var minZoom = Math.min(requestedMinZoom, requestedMaxZoom);
+    var maxZoom = Math.max(requestedMinZoom, requestedMaxZoom);
+    return { padding: padding, minZoom: minZoom, maxZoom: maxZoom };
+};
+var clamp = function (value, min, max) { return Math.max(min, Math.min(max, value)); };
 var resolveStateWorldBounds = function (state) {
     var bounds = createBounds();
     state.elements.forEach(function (element) {
@@ -12171,6 +12933,34 @@ var resolveStateWorldBounds = function (state) {
     });
     return hasBounds(bounds) ? bounds : null;
 };
+var resolveElementWorldBounds = function (state) {
+    var bounds = createBounds();
+    state.elements.forEach(function (element) {
+        includeRect(bounds, element.position.x, element.position.y, element.size.width, element.size.height);
+    });
+    return hasBounds(bounds) ? bounds : null;
+};
+var resolveViewportFitTransform = function (state, viewportSize, options) {
+    var bounds = resolveElementWorldBounds(state);
+    if (!bounds)
+        return null;
+    var safeWidth = Math.max(1, viewportSize.width);
+    var safeHeight = Math.max(1, viewportSize.height);
+    var _a = resolveViewportFitOptions(options), padding = _a.padding, minZoom = _a.minZoom, maxZoom = _a.maxZoom;
+    var availableWidth = Math.max(1, safeWidth - padding * 2);
+    var availableHeight = Math.max(1, safeHeight - padding * 2);
+    var contentWidth = Math.max(1, bounds.maxX - bounds.minX);
+    var contentHeight = Math.max(1, bounds.maxY - bounds.minY);
+    var rawZoom = Math.min(availableWidth / contentWidth, availableHeight / contentHeight);
+    var zoom = clamp(rawZoom, minZoom, maxZoom);
+    var centerX = (bounds.minX + bounds.maxX) / 2;
+    var centerY = (bounds.minY + bounds.maxY) / 2;
+    var pan = {
+        x: safeWidth / 2 - centerX * zoom,
+        y: safeHeight / 2 - centerY * zoom,
+    };
+    return { pan: pan, zoom: zoom };
+};
 var resolveFitToContentPadding = function (fitToContent) {
     if (typeof fitToContent === 'object' && typeof fitToContent.padding === 'number') {
         return Math.max(0, fitToContent.padding);
@@ -12246,10 +13036,12 @@ var registerSimpleShapes = function (registry, shapes, isPort) {
 var createDiagramEditor = function (config) {
     var _a, _b;
     var Konva = getKonva();
+    var stageWidth = (_a = config.width) !== null && _a !== void 0 ? _a : 900;
+    var stageHeight = (_b = config.height) !== null && _b !== void 0 ? _b : 560;
     var stage = new Konva.Stage({
         container: config.container,
-        width: (_a = config.width) !== null && _a !== void 0 ? _a : 900,
-        height: (_b = config.height) !== null && _b !== void 0 ? _b : 560,
+        width: stageWidth,
+        height: stageHeight,
     });
     var stageContainer = typeof stage.container === 'function' ? stage.container() : stage.container;
     if (stageContainer && stageContainer.tabIndex < 0) {
@@ -12396,6 +13188,12 @@ var createDiagramEditor = function (config) {
         completeLinkToPort: function (targetPortId) { return interaction.completeLinkToPort(targetPortId); },
         completeLinkToElement: function (targetElementId, pointer) { return interaction.completeLinkToElement(targetElementId, pointer); },
         cancelLink: function () { return interaction.cancelLink(); },
+        zoomToFitElements: function (options) {
+            var transform = resolveViewportFitTransform(engine.getState(), { width: stageWidth, height: stageHeight }, options);
+            if (!transform)
+                return;
+            engine.setViewport(transform.pan, transform.zoom);
+        },
         exportImage: function (options) {
             engine.render();
             if (typeof stage.toDataURL !== 'function') {
@@ -12422,6 +13220,8 @@ var createDiagramEditor = function (config) {
             return stage.toDataURL(__assign(__assign({}, baseOptions), { x: cropX, y: cropY, width: cropWidth, height: cropHeight }));
         },
         resize: function (width, height) {
+            stageWidth = width;
+            stageHeight = height;
             stage.width(width);
             stage.height(height);
             engine.render();
@@ -12641,6 +13441,7 @@ var engineEventOptions = [
     'elementDragged',
     'elementMoved',
     'elementResized',
+    'gridLayoutChanged',
     'elementDeleted',
     'portDeleted',
     'linkDeleted',
@@ -12895,7 +13696,7 @@ var parentOptions = [
 ];
 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 defaultGridTemplateText = '[12,4,8]';
 var serializeGridTemplate = function (template) {
     return Array.isArray(template) && template.length > 0 ? JSON.stringify(template) : defaultGridTemplateText;
 };
@@ -12914,23 +13715,21 @@ var parseGridTemplate = function (value) {
         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)
+        var entry = parsed[i];
+        if (typeof entry === 'number') {
+            if (!Number.isFinite(entry) || entry <= 0)
                 return null;
-            normalized.push(Math.floor(row));
+            normalized.push(Math.floor(entry));
             continue;
         }
-        if (!Array.isArray(row) || row.length === 0)
+        if (!Array.isArray(entry) || entry.length === 0)
             return null;
-        var weights = [];
-        for (var j = 0; j < row.length; j += 1) {
-            var cell = row[j];
+        for (var j = 0; j < entry.length; j += 1) {
+            var cell = entry[j];
             if (typeof cell !== 'number' || !Number.isFinite(cell) || cell <= 0)
                 return null;
-            weights.push(cell);
+            normalized.push(Math.floor(cell));
         }
-        normalized.push(weights);
     }
     return normalized;
 };
@@ -12965,11 +13764,12 @@ var AutoLayoutDemo = function () {
     var _m = useState(''), childMaxWidth = _m[0], setChildMaxWidth = _m[1];
     var _o = useState(''), childMaxHeight = _o[0], setChildMaxHeight = _o[1];
     var _p = useState(defaultGridTemplateText), gridTemplateText = _p[0], setGridTemplateText = _p[1];
-    var _q = useState('none'), labelReservedMode = _q[0], setLabelReservedMode = _q[1];
-    var _r = useState(32), labelReservedFixedSize = _r[0], setLabelReservedFixedSize = _r[1];
-    var _s = useState(''), labelReservedMinSize = _s[0], setLabelReservedMinSize = _s[1];
-    var _t = useState(''), labelReservedMaxSize = _t[0], setLabelReservedMaxSize = _t[1];
-    var _u = useState('None yet'), lastTrigger = _u[0], setLastTrigger = _u[1];
+    var _q = useState(false), gridChildWidthResizeEnabled = _q[0], setGridChildWidthResizeEnabled = _q[1];
+    var _r = useState('none'), labelReservedMode = _r[0], setLabelReservedMode = _r[1];
+    var _s = useState(32), labelReservedFixedSize = _s[0], setLabelReservedFixedSize = _s[1];
+    var _t = useState(''), labelReservedMinSize = _t[0], setLabelReservedMinSize = _t[1];
+    var _u = useState(''), labelReservedMaxSize = _u[0], setLabelReservedMaxSize = _u[1];
+    var _v = useState('None yet'), lastTrigger = _v[0], setLastTrigger = _v[1];
     useEffect(function () {
         var editor = editorRef.current;
         if (!editor)
@@ -12977,6 +13777,7 @@ var AutoLayoutDemo = function () {
         var disposers = [
             editor.on('elementMoved', function () { return setLastTrigger('child moved'); }),
             editor.on('elementResized', function () { return setLastTrigger('child resized'); }),
+            editor.on('gridLayoutChanged', function (event) { return setLastTrigger("grid layout changed (".concat(event.reason, ")")); }),
             editor.on('elementDeleted', function () { return setLastTrigger('child removed'); }),
             editor.on('change', function () { return setLastTrigger(function (prev) { return prev; }); }),
         ];
@@ -13051,6 +13852,7 @@ var AutoLayoutDemo = function () {
         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));
+        setGridChildWidthResizeEnabled(Boolean(layout === null || layout === void 0 ? void 0 : layout.gridChildWidthResizeEnabled));
         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 : '');
@@ -13104,7 +13906,7 @@ var AutoLayoutDemo = function () {
             : __assign(__assign(__assign({ mode: labelReservedMode, placement: 'top' }, (labelReservedMode === 'fixed' ? { size: labelReservedFixedSize } : {})), (labelReservedMinSize === '' ? {} : { minSize: labelReservedMinSize })), (labelReservedMaxSize === '' ? {} : { maxSize: labelReservedMaxSize }));
         var layout = mode === 'manual'
             ? { mode: 'manual' }
-            : __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 });
+            : __assign(__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 } : {})), (mode === 'grid' ? { gridChildWidthResizeEnabled: gridChildWidthResizeEnabled } : {})), { labelReservedSpace: labelReservedSpace });
         editor.setElementLayout(targetElement.id, layout);
         setLastTrigger("layout applied (".concat(mode, ")"));
     };
@@ -13171,13 +13973,11 @@ var AutoLayoutDemo = function () {
     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, 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 } }, "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, 12-unit grid templates, and the optional grid child width-resize capability to validate current behavior."),
             React.createElement("p", { style: { marginTop: 0, marginBottom: 0, fontSize: 13, color: '#333' } },
-                "Resize-lock check: select ",
+                "Grid child width resize is disabled by default. With the capability off, 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.")),
+                " and drag a corner mostly downward: width stays stable while height changes. Turn the capability on to let horizontal drag wrap rows automatically from a flat 12-unit slot array, then resize children in 1/12 steps. Any corner can drive width changes, width always grows or shrinks on the right, siblings keep their own widths, and dragging can swap grid item order.")),
         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' } },
@@ -13225,7 +14025,11 @@ var AutoLayoutDemo = function () {
                     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("input", { id: "grid-template-input", type: "text", value: gridTemplateText, onChange: function (event) { return setGridTemplateText(event.target.value); }, style: { minWidth: 220, padding: '6px 8px' }, placeholder: "[12,4,8] or [3,3,6,9]", disabled: mode !== 'grid' }),
+                React.createElement("label", { htmlFor: "grid-child-width-resize-enabled", style: { fontWeight: 600 } }, "Grid child width resize"),
+                React.createElement("label", { style: { display: 'inline-flex', alignItems: 'center', gap: 6 } },
+                    React.createElement("input", { id: "grid-child-width-resize-enabled", type: "checkbox", checked: gridChildWidthResizeEnabled, onChange: function (event) { return setGridChildWidthResizeEnabled(event.target.checked); }, disabled: mode !== 'grid' }),
+                    "Enable 12-unit resize on child width drag"),
                 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"),
@@ -13278,11 +14082,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, "Resize lock: with grid child width resize off, select grid-b and drag diagonally; width should stay fixed."),
+                        React.createElement("li", null, "Enable grid child width resize, then shrink a full-width grid child; it should snap smaller without flashing, and later siblings should keep their own widths."),
+                        React.createElement("li", null, "Enable grid child width resize, then grow a child; siblings on the right should keep their own widths and only move down when they no longer fit."),
+                        React.createElement("li", null, "Try dragging a left resize handle on the first child in a row; the child should still grow, but only to the right."),
+                        React.createElement("li", null, "Try dragging a grid child across a sibling; the row-major order should swap to match the drag position."),
+                        React.createElement("li", null, "Whenever enabled child width resize changes row allocation, the last-trigger badge should report grid layout changed."),
                         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, "Grid: apply templates like [12,4,8] and [3,3,6,9]. Rows wrap automatically when the next item cannot fit."),
                         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."),
@@ -13714,10 +14523,15 @@ var TextLayoutDemo = function () {
     var selectedText = diagramState === null || diagramState === void 0 ? void 0 : diagramState.texts.find(function (text) { return text.id === selectedTextId; });
     var selectedDisplayContent = (_b = (_a = selectedText === null || selectedText === void 0 ? void 0 : selectedText.displayContent) !== null && _a !== void 0 ? _a : selectedText === null || selectedText === void 0 ? void 0 : selectedText.content) !== null && _b !== void 0 ? _b : '';
     var ownerElement = diagramState === null || diagramState === void 0 ? void 0 : diagramState.elements.find(function (element) { return element.id === textDemoOwnerId; });
+    var selectedInteraction = selectedText === null || selectedText === void 0 ? void 0 : selectedText.interaction;
+    var getInteractionForTarget = function (nextTarget) {
+        return nextTarget === 'owned' ? textDemoOwnedInteraction : textDemoFloatingInteraction;
+    };
     var applyLayoutToTarget = function (nextTarget, nextLayout) {
         var editor = editorRef.current;
         if (!editor)
             return;
+        var interaction = getInteractionForTarget(nextTarget);
         if (nextTarget === 'owned') {
             editor.removeText(textDemoOwnedTextId);
             editor.addText({
@@ -13725,6 +14539,7 @@ var TextLayoutDemo = function () {
                 content: textDemoLongSample,
                 ownerId: textDemoOwnerId,
                 position: { x: 12, y: 12 },
+                interaction: interaction,
                 layout: nextLayout,
             });
             editor.setSelection([textDemoOwnedTextId]);
@@ -13735,6 +14550,7 @@ var TextLayoutDemo = function () {
             id: textDemoFloatingTextId,
             content: textDemoLongSample,
             position: { x: 470, y: 120 },
+            interaction: interaction,
             layout: nextLayout,
         });
         editor.setSelection([textDemoFloatingTextId]);
@@ -13802,7 +14618,8 @@ var TextLayoutDemo = function () {
     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 } }, "Full text content is preserved in state. Overflow and ellipsis settings only change visual output (`displayContent`) for rendering.")),
+            React.createElement("p", { style: { marginTop: 0 } }, "Full text content is preserved in state. Overflow and ellipsis settings only change visual output (`displayContent`) for rendering."),
+            React.createElement("p", { style: { marginTop: 0, marginBottom: 0, fontSize: 13 } }, "Owned text is fixed and read-only. Floating text remains draggable and editable. Try drag and double-click on each label to compare built-in interaction policy behavior.")),
         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: 10, marginBottom: 12 } },
             React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 10, alignItems: 'center' } },
@@ -13890,7 +14707,12 @@ var TextLayoutDemo = function () {
                     ' ',
                     Number.isFinite(selectedWorldX) && Number.isFinite(selectedWorldY)
                         ? "".concat(selectedWorldX.toFixed(1), ", ").concat(selectedWorldY.toFixed(1))
-                        : 'n/a')),
+                        : 'n/a'),
+                React.createElement("div", null,
+                    "interaction: movable=",
+                    (selectedInteraction === null || selectedInteraction === void 0 ? void 0 : selectedInteraction.movable) === false ? 'false' : 'true',
+                    " | editable=",
+                    (selectedInteraction === null || selectedInteraction === void 0 ? void 0 : selectedInteraction.editable) === false ? 'false' : 'true')),
             React.createElement("div", { style: { display: 'grid', gap: 6 } },
                 React.createElement("div", { style: { fontSize: 12 } },
                     React.createElement("strong", null, "Canonical content:"),
@@ -13960,6 +14782,311 @@ var ObstacleRoutingDemo = function () {
                 "Enable redraw refresh on two-endpoint change")) }));
 };
 
+var offsetAnchorShapes = __spreadArray(__spreadArray([], baseElementShapes, true), [
+    {
+        id: 'offset-anchor-ellipse',
+        kind: 'ellipse',
+        style: {
+            fill: '#eef8ff',
+            stroke: '#2563eb',
+            strokeWidth: 2,
+        },
+    },
+], false);
+var createOffsetAnchorAvoidanceState = function () { return ({
+    elements: [
+        {
+            id: 'offset-sibling-parent',
+            position: { x: 40, y: 110 },
+            size: { width: 520, height: 250 },
+            shapeId: 'panel',
+            style: { fill: '#faf7ef' },
+        },
+        {
+            id: 'offset-sibling-a',
+            position: { x: 60, y: 78 },
+            size: { width: 130, height: 96 },
+            shapeId: 'offset-anchor-ellipse',
+            parentId: 'offset-sibling-parent',
+            portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
+        },
+        {
+            id: 'offset-sibling-b',
+            position: { x: 320, y: 78 },
+            size: { width: 130, height: 96 },
+            shapeId: 'offset-anchor-ellipse',
+            parentId: 'offset-sibling-parent',
+            portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
+        },
+        {
+            id: 'offset-direction-parent',
+            position: { x: 620, y: 110 },
+            size: { width: 330, height: 250 },
+            shapeId: 'offset-anchor-ellipse',
+            portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
+        },
+        {
+            id: 'offset-direction-child',
+            position: { x: 48, y: 74 },
+            size: { width: 128, height: 92 },
+            shapeId: 'default',
+            parentId: 'offset-direction-parent',
+            portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
+        },
+        {
+            id: 'offset-direction-sibling',
+            position: { x: 190, y: 126 },
+            size: { width: 96, height: 70 },
+            shapeId: 'default',
+            parentId: 'offset-direction-parent',
+            style: { fill: '#fff6e8', stroke: '#b45309', strokeWidth: 2 },
+        },
+    ],
+    ports: [
+        {
+            id: 'offset-sibling-a-port',
+            elementId: 'offset-sibling-a',
+            position: { x: 0, y: 48 },
+            shapeId: 'port-dark',
+            anchorCenter: true,
+            currentAnchorId: 'left',
+            moveMode: 'border',
+            externalLinkAttachPoint: { x: 0, y: 24 },
+        },
+        {
+            id: 'offset-sibling-b-port',
+            elementId: 'offset-sibling-b',
+            position: { x: 130, y: 48 },
+            shapeId: 'port-dark',
+            anchorCenter: true,
+            currentAnchorId: 'right',
+            moveMode: 'border',
+            externalLinkAttachPoint: { x: 0, y: 24 },
+        },
+        {
+            id: 'offset-parent-port',
+            elementId: 'offset-direction-parent',
+            position: { x: 18, y: 125 },
+            shapeId: 'port-circle',
+            anchorCenter: true,
+            currentAnchorId: 'left',
+            moveMode: 'border',
+            externalLinkAttachPoint: { x: 0, y: 18 },
+            internalLinkAttachPoint: { x: 0, y: -18 },
+        },
+        {
+            id: 'offset-child-port',
+            elementId: 'offset-direction-child',
+            position: { x: 128, y: 46 },
+            shapeId: 'port-circle',
+            anchorCenter: true,
+            currentAnchorId: 'right',
+            moveMode: 'border',
+            externalLinkAttachPoint: { x: 0, y: 18 },
+            internalLinkAttachPoint: { x: 0, y: -18 },
+        },
+    ],
+    links: [
+        {
+            id: 'offset-sibling-link',
+            sourcePortId: 'offset-sibling-a-port',
+            targetPortId: 'offset-sibling-b-port',
+            points: [],
+            routing: 'auto',
+        },
+        {
+            id: 'offset-parent-child-link',
+            sourcePortId: 'offset-parent-port',
+            targetPortId: 'offset-child-port',
+            points: [],
+            routing: 'auto',
+        },
+        {
+            id: 'offset-child-parent-link',
+            sourcePortId: 'offset-child-port',
+            targetPortId: 'offset-parent-port',
+            points: [],
+            routing: 'auto',
+        },
+    ],
+    texts: [
+        {
+            id: 'offset-anchor-intro',
+            content: 'Offset attach anchors now keep endpoint hosts forbidden during auto routing. Inspect that routes exit from projected border sides instead of cutting through the source or target host interior.',
+            position: { x: 40, y: 28 },
+        },
+        {
+            id: 'offset-sibling-label',
+            content: 'Scenario A: sibling children use external attach points offset beyond left/right edges.',
+            position: { x: 52, y: 82 },
+        },
+        {
+            id: 'offset-direction-label',
+            content: 'Scenario B: parent/child links reuse the same offset anchors but resolve internal vs external semantics by direction.',
+            position: { x: 620, y: 82 },
+        },
+        {
+            id: 'offset-sibling-a-text',
+            content: 'Child A\nexternal offset 24',
+            ownerId: 'offset-sibling-a',
+            position: { x: 14, y: -20 },
+        },
+        {
+            id: 'offset-sibling-b-text',
+            content: 'Child B\nexternal offset 24',
+            ownerId: 'offset-sibling-b',
+            position: { x: 14, y: -20 },
+        },
+        {
+            id: 'offset-direction-parent-text',
+            content: 'Parent port\ninternal 18 / external 18',
+            ownerId: 'offset-direction-parent',
+            position: { x: 48, y: -20 },
+        },
+        {
+            id: 'offset-direction-child-text',
+            content: 'Child port\nexternal 18 / internal 18',
+            ownerId: 'offset-direction-child',
+            position: { x: 6, y: -18 },
+        },
+        {
+            id: 'offset-direction-links-text',
+            content: 'Blue links: parent→child and child→parent should keep the host border side semantics even with offset attach coordinates.',
+            position: { x: 620, y: 378 },
+        },
+    ],
+}); };
+var rerouteAllAction = {
+    id: 'offset-reroute-links',
+    label: 'Reroute All Links',
+    run: function (editor) {
+        editor.rerouteAllLinks();
+    },
+};
+var shiftTargetsAction = {
+    id: 'offset-shift-targets',
+    label: 'Shift targets + reroute',
+    run: function (editor) {
+        editor.moveElementTo('offset-sibling-b', 320, 96);
+        editor.moveElementTo('offset-direction-child', 74, 96);
+        editor.rerouteAllLinks();
+    },
+};
+var offsetAnchorAvoidanceDemoConfig = {
+    id: 'offset-anchor-avoidance',
+    title: 'Offset Anchor Avoidance',
+    description: 'Visual QA for projected-boundary-equivalent offset attach anchors that must still keep endpoint host interiors forbidden.',
+    createState: createOffsetAnchorAvoidanceState,
+    elementShapes: offsetAnchorShapes,
+    portShapes: basePortShapes,
+    defaultElementShapeId: 'default',
+    defaultPortShapeId: 'port-circle',
+    actions: [rerouteAllAction, shiftTargetsAction],
+};
+
+var OffsetAnchorAvoidanceDemo = function () { return (React.createElement(SimpleDemo, { demo: offsetAnchorAvoidanceDemoConfig, beforeStage: React.createElement("div", { style: {
+            marginBottom: 12,
+            padding: '10px 12px',
+            borderRadius: 8,
+            border: '1px solid #2d2d2d',
+            background: '#f4f4f4',
+        } },
+        React.createElement("strong", null, "Visual checks"),
+        React.createElement("ul", { style: { margin: '6px 0 0 16px' } },
+            React.createElement("li", null, "Sibling link should route around both child interiors even though attach coordinates are offset outside the host edges."),
+            React.createElement("li", null, "`parent\u2192child` should use the parent's internal side and the child's external side."),
+            React.createElement("li", null, "`child\u2192parent` should invert the same endpoint semantics without crossing either endpoint host interior."),
+            React.createElement("li", null, "Use `Shift targets + reroute` and `Reroute All Links` to verify stable behavior after layout changes."))) })); };
+
+var createZoomToFitElementsState = function () { return ({
+    elements: [
+        {
+            id: 'fit-node-a',
+            position: { x: 40, y: 60 },
+            size: { width: 140, height: 90 },
+            shapeId: 'default',
+            style: { fill: '#eef6ff', stroke: '#1d4ed8', strokeWidth: 2 },
+        },
+        {
+            id: 'fit-node-b',
+            position: { x: 760, y: 120 },
+            size: { width: 170, height: 110 },
+            shapeId: 'panel',
+            style: { fill: '#fef3c7', stroke: '#b45309', strokeWidth: 2 },
+        },
+        {
+            id: 'fit-node-c',
+            position: { x: 140, y: 420 },
+            size: { width: 220, height: 120 },
+            shapeId: 'default',
+            style: { fill: '#ecfdf5', stroke: '#047857', strokeWidth: 2 },
+        },
+        {
+            id: 'fit-node-d',
+            position: { x: 860, y: 430 },
+            size: { width: 150, height: 90 },
+            shapeId: 'default',
+            style: { fill: '#f5f3ff', stroke: '#6d28d9', strokeWidth: 2 },
+        },
+    ],
+    ports: [],
+    links: [],
+    texts: [
+        {
+            id: 'fit-text-intro',
+            content: 'Use actions to spread nodes and run the zoom-to-fit viewport command.',
+            position: { x: 40, y: 24 },
+        },
+    ],
+}); };
+var zoomFitAction = {
+    id: 'fit-zoom-default',
+    label: 'Run Zoom-To-Fit',
+    run: function (editor) {
+        editor.zoomToFitElements();
+    },
+};
+var zoomFitPaddingAction = {
+    id: 'fit-zoom-padding',
+    label: 'Run Zoom-To-Fit (Padding 48)',
+    run: function (editor) {
+        editor.zoomToFitElements({ padding: 48 });
+    },
+};
+var spreadSceneAction = {
+    id: 'fit-spread-scene',
+    label: 'Spread Scene',
+    run: function (editor) {
+        editor.moveElementTo('fit-node-b', 880, 80);
+        editor.moveElementTo('fit-node-d', 980, 500);
+        editor.moveElementTo('fit-node-c', 80, 520);
+    },
+};
+var zoomToFitElementsDemoConfig = {
+    id: 'zoom-to-fit-elements',
+    title: 'Zoom To Fit Elements',
+    description: 'Calls a viewport command that zooms and centers so all elements are visible.',
+    createState: createZoomToFitElementsState,
+    elementShapes: baseElementShapes,
+    portShapes: basePortShapes,
+    defaultElementShapeId: 'default',
+    defaultPortShapeId: 'port-circle',
+    actions: [zoomFitAction, zoomFitPaddingAction, spreadSceneAction],
+};
+
+var ZoomToFitElementsDemo = function () { return (React.createElement(SimpleDemo, { demo: zoomToFitElementsDemoConfig, beforeStage: (React.createElement("div", { style: {
+            marginBottom: 12,
+            padding: '10px 12px',
+            borderRadius: 8,
+            border: '1px solid #2d2d2d',
+            background: '#f4f4f4',
+        } },
+        React.createElement("strong", null, "Visual checks"),
+        React.createElement("ul", { style: { margin: '6px 0 0 16px' } },
+            React.createElement("li", null, "Click `Run Zoom-To-Fit` and ensure every node is visible and centered."),
+            React.createElement("li", null, "Run `Spread Scene` then fit again to verify viewport recomputes from the updated layout."),
+            React.createElement("li", null, "Use `Run Zoom-To-Fit (Padding 48)` to confirm optional padding keeps extra breathing room around content.")))) })); };
+
 var initialPayloads = {
     elementDeleted: null,
     portDeleted: null,
@@ -15037,6 +16164,18 @@ var demoTabs = [
         description: obstacleRoutingDemoConfig.description,
         Component: ObstacleRoutingDemo,
     },
+    {
+        id: offsetAnchorAvoidanceDemoConfig.id,
+        title: offsetAnchorAvoidanceDemoConfig.title,
+        description: offsetAnchorAvoidanceDemoConfig.description,
+        Component: OffsetAnchorAvoidanceDemo,
+    },
+    {
+        id: zoomToFitElementsDemoConfig.id,
+        title: zoomToFitElementsDemoConfig.title,
+        description: zoomToFitElementsDemoConfig.description,
+        Component: ZoomToFitElementsDemo,
+    },
     {
         id: linkBendHandlesDemoConfig.id,
         title: linkBendHandlesDemoConfig.title,