orcasvn-react-diagrams 0.2.5 → 0.2.7

package/dist/cjs/examples.js

@@ -180,7 +180,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;
@@ -460,7 +460,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;
@@ -477,7 +477,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;
@@ -860,23 +860,44 @@ var linkPortCreationDemoConfig = ({
 var createNestedState = function () { return ({
     elements: [
         {
-            id: 'parent-1',
-            position: { x: 140, y: 140 },
-            size: { width: 320, height: 240 },
+            id: 'parent-locked',
+            position: { x: 110, y: 140 },
+            size: { width: 300, height: 240 },
+            shapeId: 'panel',
+            childElementInteraction: { movable: false },
+        },
+        {
+            id: 'child-locked',
+            position: { x: 40, y: 60 },
+            size: { width: 160, height: 100 },
+            shapeId: 'default',
+            parentId: 'parent-locked',
+        },
+        {
+            id: 'parent-free',
+            position: { x: 470, y: 140 },
+            size: { width: 300, height: 240 },
             shapeId: 'panel',
         },
         {
-            id: 'child-1',
+            id: 'child-free',
             position: { x: 40, y: 60 },
             size: { width: 160, height: 100 },
             shapeId: 'default',
-            parentId: 'parent-1',
+            parentId: 'parent-free',
         },
     ],
     ports: [
         {
-            id: 'child-port',
-            elementId: 'child-1',
+            id: 'child-port-locked',
+            elementId: 'child-locked',
+            position: { x: 20, y: 20 },
+            shapeId: 'port-circle',
+            anchorCenter: true,
+        },
+        {
+            id: 'child-port-free',
+            elementId: 'child-free',
             position: { x: 20, y: 20 },
             shapeId: 'port-circle',
             anchorCenter: true,
@@ -885,28 +906,61 @@ var createNestedState = function () { return ({
     links: [],
     texts: [
         {
-            id: 'child-label',
-            content: 'Child',
-            position: { x: 6, y: -16 },
-            ownerId: 'child-1',
+            id: 'parent-locked-label',
+            content: 'Locked child drag',
+            position: { x: 12, y: 12 },
+            ownerId: 'parent-locked',
+            interaction: { movable: false, editable: false },
+        },
+        {
+            id: 'child-locked-label',
+            content: 'Drag disabled',
+            position: { x: 10, y: 10 },
+            ownerId: 'child-locked',
+            interaction: { movable: false, editable: false },
+        },
+        {
+            id: 'parent-free-label',
+            content: 'Movable child drag',
+            position: { x: 12, y: 12 },
+            ownerId: 'parent-free',
+            interaction: { movable: false, editable: false },
+        },
+        {
+            id: 'child-free-label',
+            content: 'Drag enabled',
+            position: { x: 10, y: 10 },
+            ownerId: 'child-free',
+            interaction: { movable: false, editable: false },
         },
     ],
 }); };
 var nestedDemoConfig = ({
     id: 'nested',
     title: 'Nested Elements',
-    description: 'Parent/child elements with world positioning.',
+    description: 'Compare locked and movable child drag; locked children still move through API actions.',
     createState: createNestedState,
     elementShapes: baseElementShapes,
     portShapes: basePortShapes,
     defaultElementShapeId: 'default',
     defaultPortShapeId: 'port-circle',
     actions: [
+        {
+            id: 'move-locked-child-api',
+            label: 'Move locked child (API)',
+            run: function (editor, state) {
+                var child = state.elements.find(function (element) { return element.id === 'child-locked'; });
+                var parent = state.elements.find(function (element) { return element.id === 'parent-locked'; });
+                if (!child || !parent)
+                    return;
+                editor.moveElementTo(child.id, parent.position.x + child.position.x + 30, parent.position.y + child.position.y + 10);
+            },
+        },
         {
             id: 'move-parent',
-            label: 'Move parent',
+            label: 'Move locked parent',
             run: function (editor, state) {
-                var parent = state.elements.find(function (element) { return element.id === 'parent-1'; });
+                var parent = state.elements.find(function (element) { return element.id === 'parent-locked'; });
                 if (!parent)
                     return;
                 editor.moveElementTo(parent.id, parent.position.x + 40, parent.position.y + 20);
@@ -914,15 +968,15 @@ var nestedDemoConfig = ({
         },
         {
             id: 'add-child',
-            label: 'Add child',
+            label: 'Add movable child',
             run: function (editor, state, demo, helpers) {
                 var _a;
-                var parent = state.elements.find(function (element) { return element.id === 'parent-1'; });
+                var parent = state.elements.find(function (element) { return element.id === 'parent-free'; });
                 if (!parent)
                     return;
                 var offset = helpers.nextOffset();
                 editor.addElement({
-                    id: "child-".concat(createId()),
+                    id: "child-free-".concat(createId()),
                     position: { x: 30 + offset, y: 50 + offset },
                     size: { width: 140, height: 90 },
                     shapeId: (_a = demo.defaultElementShapeId) !== null && _a !== void 0 ? _a : 'default',
@@ -992,6 +1046,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: [
         {
@@ -1009,6 +1065,7 @@ var createTextOwnershipState = function () { return ({
             content: textDemoLongSample,
             position: { x: 12, y: 12 },
             ownerId: textDemoOwnerId,
+            interaction: textDemoOwnedInteraction,
             layout: {
                 boundsMode: 'owner-width',
                 wrap: 'none',
@@ -1020,6 +1077,7 @@ var createTextOwnershipState = function () { return ({
             id: textDemoFloatingTextId,
             content: textDemoLongSample,
             position: { x: 470, y: 120 },
+            interaction: textDemoFloatingInteraction,
             layout: {
                 boundsMode: 'fixed',
                 fixedSize: { width: 240, height: 90 },
@@ -1034,7 +1092,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,
@@ -1237,146 +1295,266 @@ var linkCancelDemoConfig = ({
     actions: [],
 });
 
-var createAutoLayoutState = function () { return ({
-    elements: [
-        {
-            id: 'layout-row',
-            position: { x: 60, y: 80 },
-            size: { width: 180, height: 96 },
-            shapeId: 'panel',
-            layout: { mode: 'horizontal', padding: { x: 14, y: 12 }, gap: 14, align: 'center' },
-        },
-        { id: 'row-a', position: { x: 0, y: 0 }, size: { width: 62, height: 44 }, shapeId: 'default', parentId: 'layout-row' },
-        { id: 'row-b', position: { x: 0, y: 0 }, size: { width: 96, height: 32 }, shapeId: 'default', parentId: 'layout-row' },
-        { id: 'row-c', position: { x: 0, y: 0 }, size: { width: 54, height: 56 }, shapeId: 'default', parentId: 'layout-row' },
-        {
-            id: 'row-nested-owner',
-            position: { x: 0, y: 0 },
-            size: { width: 82, height: 82 },
-            shapeId: 'default',
-            parentId: 'layout-row',
-            layout: { mode: 'vertical', padding: { x: 8, y: 6 }, gap: 6, align: 'start' },
-        },
-        { id: 'row-nested-child-a', position: { x: 0, y: 0 }, size: { width: 60, height: 20 }, shapeId: 'default', parentId: 'row-nested-owner' },
-        { id: 'row-nested-child-b', position: { x: 0, y: 0 }, size: { width: 76, height: 22 }, shapeId: 'default', parentId: 'row-nested-owner' },
-        {
-            id: 'layout-column',
-            position: { x: 400, y: 70 },
-            size: { width: 120, height: 140 },
-            shapeId: 'panel',
-            layout: { mode: 'vertical', padding: { x: 12, y: 10 }, gap: 16, align: 'end' },
-        },
-        { id: 'col-a', position: { x: 0, y: 0 }, size: { width: 44, height: 28 }, shapeId: 'default', parentId: 'layout-column' },
-        { id: 'col-b', position: { x: 0, y: 0 }, size: { width: 70, height: 36 }, shapeId: 'default', parentId: 'layout-column' },
-        { id: 'col-c', position: { x: 0, y: 0 }, size: { width: 92, height: 44 }, shapeId: 'default', parentId: 'layout-column' },
-        {
-            id: 'layout-grid',
-            position: { x: 620, y: 70 },
-            size: { width: 160, height: 110 },
-            shapeId: 'panel',
-            layout: {
-                mode: 'grid',
-                padding: { x: 10, y: 10 },
-                gap: 10,
-                align: 'center',
-                autoResize: 'grow-shrink',
-                gridTemplate: [[3], [1, 2]],
-                childMinWidth: 24,
-                childMinHeight: 18,
+var createAutoLayoutState = function (lockComparisonChildren) {
+    if (lockComparisonChildren === void 0) { lockComparisonChildren = true; }
+    return ({
+        elements: [
+            {
+                id: 'layout-row',
+                position: { x: 60, y: 80 },
+                size: { width: 180, height: 96 },
+                shapeId: 'panel',
+                layout: { mode: 'horizontal', padding: { x: 14, y: 12 }, gap: 14, align: 'center' },
             },
-        },
-        { id: 'grid-a', position: { x: 0, y: 0 }, size: { width: 36, height: 26 }, shapeId: 'default', parentId: 'layout-grid' },
-        { id: 'grid-b', position: { x: 0, y: 0 }, size: { width: 44, height: 24 }, shapeId: 'default', parentId: 'layout-grid' },
-        { id: 'grid-c', position: { x: 0, y: 0 }, size: { width: 50, height: 20 }, shapeId: 'default', parentId: 'layout-grid' },
-        { id: 'grid-d', position: { x: 0, y: 0 }, size: { width: 28, height: 30 }, shapeId: 'default', parentId: 'layout-grid' },
-        { id: 'grid-e', position: { x: 0, y: 0 }, size: { width: 52, height: 28 }, shapeId: 'default', parentId: 'layout-grid' },
-        {
-            id: 'layout-nested',
-            position: { x: 120, y: 260 },
-            size: { width: 190, height: 130 },
-            shapeId: 'panel',
-            layout: { mode: 'horizontal', padding: { x: 12, y: 12 }, gap: 12, align: 'start' },
-        },
-        {
-            id: 'nested-stack',
-            position: { x: 0, y: 0 },
-            size: { width: 90, height: 92 },
-            shapeId: 'default',
-            parentId: 'layout-nested',
-            layout: { mode: 'vertical', padding: { x: 8, y: 8 }, gap: 8, align: 'center' },
-        },
-        { id: 'stack-a', position: { x: 0, y: 0 }, size: { width: 60, height: 24 }, shapeId: 'default', parentId: 'nested-stack' },
-        { id: 'stack-b', position: { x: 0, y: 0 }, size: { width: 90, height: 30 }, shapeId: 'default', parentId: 'nested-stack' },
-        {
-            id: 'stack-overflow',
-            position: { x: 0, y: 0 },
-            size: { width: 110, height: 26 },
-            shapeId: 'default',
-            parentId: 'nested-stack',
-        },
-        { id: 'nested-peer', position: { x: 0, y: 0 }, size: { width: 50, height: 90 }, shapeId: 'default', parentId: 'layout-nested' },
-        {
-            id: 'layout-manual',
-            position: { x: 420, y: 260 },
-            size: { width: 190, height: 120 },
-            shapeId: 'panel',
-        },
-        { id: 'manual-a', position: { x: 12, y: 18 }, size: { width: 60, height: 30 }, shapeId: 'default', parentId: 'layout-manual' },
-        { id: 'manual-b', position: { x: 90, y: 60 }, size: { width: 68, height: 32 }, shapeId: 'default', parentId: 'layout-manual' },
-    ],
-    ports: [],
-    links: [],
-    texts: [
-        {
-            id: 'label-layout-row',
-            content: 'Row parent label lane',
-            position: { x: 8, y: 6 },
-            ownerId: 'layout-row',
-            layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
-        },
-        { id: 'label-row-a', content: 'row-a', position: { x: 6, y: -14 }, ownerId: 'row-a' },
-        { id: 'label-row-b', content: 'row-b', position: { x: 6, y: -14 }, ownerId: 'row-b' },
-        { id: 'label-row-c', content: 'row-c', position: { x: 6, y: -14 }, ownerId: 'row-c' },
-        { id: 'label-row-nested-owner', content: 'owns children', position: { x: 6, y: -16 }, ownerId: 'row-nested-owner' },
-        {
-            id: 'label-layout-column',
-            content: 'Column parent label lane',
-            position: { x: 8, y: 6 },
-            ownerId: 'layout-column',
-            layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
-        },
-        { id: 'label-col-a', content: 'col-a', position: { x: 6, y: -14 }, ownerId: 'col-a' },
-        { id: 'label-col-b', content: 'col-b', position: { x: 6, y: -14 }, ownerId: 'col-b' },
-        { id: 'label-col-c', content: 'col-c', position: { x: 6, y: -14 }, ownerId: 'col-c' },
-        {
-            id: 'label-layout-grid',
-            content: 'Grid template [[3],[1,2]]',
-            position: { x: 8, y: 6 },
-            ownerId: 'layout-grid',
-            layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
-        },
-        { id: 'label-grid-a', content: 'grid-a', position: { x: 6, y: -14 }, ownerId: 'grid-a' },
-        { id: 'label-grid-b', content: 'grid-b', position: { x: 6, y: -14 }, ownerId: 'grid-b' },
-        { id: 'label-grid-c', content: 'grid-c', position: { x: 6, y: -14 }, ownerId: 'grid-c' },
-        { id: 'label-grid-d', content: 'grid-d', position: { x: 6, y: -14 }, ownerId: 'grid-d' },
-        { id: 'label-grid-e', content: 'grid-e', position: { x: 6, y: -14 }, ownerId: 'grid-e' },
-        {
-            id: 'label-layout-nested',
-            content: 'Row + nested column lane',
-            position: { x: 6, y: 6 },
-            ownerId: 'layout-nested',
-            layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
-        },
-        { id: 'label-nested-stack', content: 'nested stack', position: { x: 6, y: -16 }, ownerId: 'nested-stack' },
-        { id: 'label-stack-a', content: 'stack-a', position: { x: 6, y: -14 }, ownerId: 'stack-a' },
-        { id: 'label-stack-b', content: 'stack-b', position: { x: 6, y: -14 }, ownerId: 'stack-b' },
-        { id: 'label-stack-overflow', content: 'stack-overflow', position: { x: 6, y: -14 }, ownerId: 'stack-overflow' },
-        { id: 'label-nested-peer', content: 'nested-peer', position: { x: 6, y: -14 }, ownerId: 'nested-peer' },
-        { id: 'label-layout-manual', content: 'Manual (no layout)', position: { x: 6, y: -18 }, ownerId: 'layout-manual' },
-        { id: 'label-manual-a', content: 'manual-a', position: { x: 6, y: -14 }, ownerId: 'manual-a' },
-        { id: 'label-manual-b', content: 'manual-b', position: { x: 6, y: -14 }, ownerId: 'manual-b' },
-    ],
-}); };
+            { id: 'row-a', position: { x: 0, y: 0 }, size: { width: 62, height: 44 }, shapeId: 'default', parentId: 'layout-row' },
+            { id: 'row-b', position: { x: 0, y: 0 }, size: { width: 96, height: 32 }, shapeId: 'default', parentId: 'layout-row' },
+            { id: 'row-c', position: { x: 0, y: 0 }, size: { width: 54, height: 56 }, shapeId: 'default', parentId: 'layout-row' },
+            {
+                id: 'row-nested-owner',
+                position: { x: 0, y: 0 },
+                size: { width: 82, height: 82 },
+                shapeId: 'default',
+                parentId: 'layout-row',
+                layout: { mode: 'vertical', padding: { x: 8, y: 6 }, gap: 6, align: 'start' },
+            },
+            { id: 'row-nested-child-a', position: { x: 0, y: 0 }, size: { width: 60, height: 20 }, shapeId: 'default', parentId: 'row-nested-owner' },
+            { id: 'row-nested-child-b', position: { x: 0, y: 0 }, size: { width: 76, height: 22 }, shapeId: 'default', parentId: 'row-nested-owner' },
+            {
+                id: 'layout-column',
+                position: { x: 400, y: 70 },
+                size: { width: 120, height: 140 },
+                shapeId: 'panel',
+                layout: { mode: 'vertical', padding: { x: 12, y: 10 }, gap: 16, align: 'end' },
+            },
+            { id: 'col-a', position: { x: 0, y: 0 }, size: { width: 44, height: 28 }, shapeId: 'default', parentId: 'layout-column' },
+            { id: 'col-b', position: { x: 0, y: 0 }, size: { width: 70, height: 36 }, shapeId: 'default', parentId: 'layout-column' },
+            { id: 'col-c', position: { x: 0, y: 0 }, size: { width: 92, height: 44 }, shapeId: 'default', parentId: 'layout-column' },
+            {
+                id: 'layout-grid',
+                position: { x: 620, y: 70 },
+                size: { width: 160, height: 110 },
+                shapeId: 'panel',
+                layout: {
+                    mode: 'grid',
+                    padding: { x: 10, y: 10 },
+                    gap: 10,
+                    align: 'center',
+                    autoResize: 'grow-shrink',
+                    gridTemplate: [12, 4, 8],
+                    gridChildWidthResizeEnabled: true,
+                    childMinWidth: 24,
+                    childMinHeight: 18,
+                },
+            },
+            { id: 'grid-a', position: { x: 0, y: 0 }, size: { width: 36, height: 26 }, shapeId: 'default', parentId: 'layout-grid' },
+            { id: 'grid-b', position: { x: 0, y: 0 }, size: { width: 44, height: 24 }, shapeId: 'default', parentId: 'layout-grid' },
+            { id: 'grid-c', position: { x: 0, y: 0 }, size: { width: 50, height: 20 }, shapeId: 'default', parentId: 'layout-grid' },
+            { id: 'grid-d', position: { x: 0, y: 0 }, size: { width: 28, height: 30 }, shapeId: 'default', parentId: 'layout-grid' },
+            { id: 'grid-e', position: { x: 0, y: 0 }, size: { width: 52, height: 28 }, shapeId: 'default', parentId: 'layout-grid' },
+            {
+                id: 'layout-nested',
+                position: { x: 120, y: 260 },
+                size: { width: 190, height: 130 },
+                shapeId: 'panel',
+                layout: { mode: 'horizontal', padding: { x: 12, y: 12 }, gap: 12, align: 'start' },
+            },
+            {
+                id: 'nested-stack',
+                position: { x: 0, y: 0 },
+                size: { width: 90, height: 92 },
+                shapeId: 'default',
+                parentId: 'layout-nested',
+                layout: { mode: 'vertical', padding: { x: 8, y: 8 }, gap: 8, align: 'center' },
+            },
+            { id: 'stack-a', position: { x: 0, y: 0 }, size: { width: 60, height: 24 }, shapeId: 'default', parentId: 'nested-stack' },
+            { id: 'stack-b', position: { x: 0, y: 0 }, size: { width: 90, height: 30 }, shapeId: 'default', parentId: 'nested-stack' },
+            {
+                id: 'stack-overflow',
+                position: { x: 0, y: 0 },
+                size: { width: 110, height: 26 },
+                shapeId: 'default',
+                parentId: 'nested-stack',
+            },
+            { id: 'nested-peer', position: { x: 0, y: 0 }, size: { width: 50, height: 90 }, shapeId: 'default', parentId: 'layout-nested' },
+            {
+                id: 'layout-grid-deep',
+                position: { x: 640, y: 250 },
+                size: { width: 250, height: 180 },
+                shapeId: 'panel',
+                layout: {
+                    mode: 'grid',
+                    padding: { x: 12, y: 12 },
+                    gap: 12,
+                    align: 'center',
+                    autoResize: 'grow-shrink',
+                    gridTemplate: [4, 4, 4],
+                    gridChildWidthResizeEnabled: true,
+                    childMinWidth: 48,
+                    childMinHeight: 60,
+                },
+            },
+            {
+                id: 'deep-grid-leaf-left',
+                position: { x: 0, y: 0 },
+                size: { width: 58, height: 72 },
+                shapeId: 'default',
+                parentId: 'layout-grid-deep',
+            },
+            {
+                id: 'deep-grid-nested-parent',
+                position: { x: 0, y: 0 },
+                size: { width: 108, height: 90 },
+                shapeId: 'default',
+                parentId: 'layout-grid-deep',
+                layout: {
+                    mode: 'grid',
+                    padding: { x: 8, y: 8 },
+                    gap: 8,
+                    align: 'center',
+                    autoResize: 'grow-shrink',
+                    gridTemplate: [6, 6],
+                    gridChildWidthResizeEnabled: true,
+                    childMinWidth: 18,
+                    childMinHeight: 18,
+                },
+            },
+            {
+                id: 'deep-grid-leaf-right',
+                position: { x: 0, y: 0 },
+                size: { width: 52, height: 78 },
+                shapeId: 'default',
+                parentId: 'layout-grid-deep',
+            },
+            { id: 'deep-grid-a', position: { x: 0, y: 0 }, size: { width: 34, height: 24 }, shapeId: 'default', parentId: 'deep-grid-nested-parent' },
+            { id: 'deep-grid-b', position: { x: 0, y: 0 }, size: { width: 40, height: 28 }, shapeId: 'default', parentId: 'deep-grid-nested-parent' },
+            { id: 'deep-grid-c', position: { x: 0, y: 0 }, size: { width: 52, height: 24 }, shapeId: 'default', parentId: 'deep-grid-nested-parent' },
+            { id: 'deep-grid-d', position: { x: 0, y: 0 }, size: { width: 28, height: 30 }, shapeId: 'default', parentId: 'deep-grid-nested-parent' },
+            {
+                id: 'layout-lock-compare',
+                position: { x: 420, y: 410 },
+                size: { width: 240, height: 160 },
+                shapeId: 'panel',
+                layout: { mode: 'horizontal', padding: { x: 12, y: 12 }, gap: 12, align: 'start' },
+            },
+            {
+                id: 'deep-lock-parent',
+                position: { x: 0, y: 0 },
+                size: { width: 110, height: 92 },
+                shapeId: 'default',
+                parentId: 'layout-lock-compare',
+                childElementInteraction: lockComparisonChildren ? { movable: false } : undefined,
+            },
+            { id: 'deep-lock-child-a', position: { x: 12, y: 24 }, size: { width: 38, height: 24 }, shapeId: 'default', parentId: 'deep-lock-parent' },
+            { id: 'deep-lock-child-b', position: { x: 56, y: 54 }, size: { width: 42, height: 24 }, shapeId: 'default', parentId: 'deep-lock-parent' },
+            {
+                id: 'deep-free-parent',
+                position: { x: 0, y: 0 },
+                size: { width: 110, height: 92 },
+                shapeId: 'default',
+                parentId: 'layout-lock-compare',
+            },
+            { id: 'deep-free-child-a', position: { x: 12, y: 24 }, size: { width: 38, height: 24 }, shapeId: 'default', parentId: 'deep-free-parent' },
+            { id: 'deep-free-child-b', position: { x: 56, y: 54 }, size: { width: 42, height: 24 }, shapeId: 'default', parentId: 'deep-free-parent' },
+            {
+                id: 'layout-manual',
+                position: { x: 420, y: 260 },
+                size: { width: 190, height: 120 },
+                shapeId: 'panel',
+            },
+            { id: 'manual-a', position: { x: 12, y: 18 }, size: { width: 60, height: 30 }, shapeId: 'default', parentId: 'layout-manual' },
+            { id: 'manual-b', position: { x: 90, y: 60 }, size: { width: 68, height: 32 }, shapeId: 'default', parentId: 'layout-manual' },
+        ],
+        ports: [],
+        links: [],
+        texts: [
+            {
+                id: 'label-layout-row',
+                content: 'Row parent label lane',
+                position: { x: 8, y: 6 },
+                ownerId: 'layout-row',
+                layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
+            },
+            { id: 'label-row-a', content: 'row-a', position: { x: 6, y: -14 }, ownerId: 'row-a' },
+            { id: 'label-row-b', content: 'row-b', position: { x: 6, y: -14 }, ownerId: 'row-b' },
+            { id: 'label-row-c', content: 'row-c', position: { x: 6, y: -14 }, ownerId: 'row-c' },
+            { id: 'label-row-nested-owner', content: 'owns children', position: { x: 6, y: -16 }, ownerId: 'row-nested-owner' },
+            {
+                id: 'label-layout-column',
+                content: 'Column parent label lane',
+                position: { x: 8, y: 6 },
+                ownerId: 'layout-column',
+                layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
+            },
+            { id: 'label-col-a', content: 'col-a', position: { x: 6, y: -14 }, ownerId: 'col-a' },
+            { id: 'label-col-b', content: 'col-b', position: { x: 6, y: -14 }, ownerId: 'col-b' },
+            { id: 'label-col-c', content: 'col-c', position: { x: 6, y: -14 }, ownerId: 'col-c' },
+            {
+                id: 'label-layout-grid',
+                content: 'Grid template [12,4,8]',
+                position: { x: 8, y: 6 },
+                ownerId: 'layout-grid',
+                layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
+            },
+            { id: 'label-grid-a', content: 'grid-a', position: { x: 6, y: -14 }, ownerId: 'grid-a' },
+            { id: 'label-grid-b', content: 'grid-b', position: { x: 6, y: -14 }, ownerId: 'grid-b' },
+            { id: 'label-grid-c', content: 'grid-c', position: { x: 6, y: -14 }, ownerId: 'grid-c' },
+            { id: 'label-grid-d', content: 'grid-d', position: { x: 6, y: -14 }, ownerId: 'grid-d' },
+            { id: 'label-grid-e', content: 'grid-e', position: { x: 6, y: -14 }, ownerId: 'grid-e' },
+            {
+                id: 'label-layout-nested',
+                content: 'Row + nested column lane',
+                position: { x: 6, y: 6 },
+                ownerId: 'layout-nested',
+                layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
+            },
+            { id: 'label-nested-stack', content: 'nested stack', position: { x: 6, y: -16 }, ownerId: 'nested-stack' },
+            { id: 'label-stack-a', content: 'stack-a', position: { x: 6, y: -14 }, ownerId: 'stack-a' },
+            { id: 'label-stack-b', content: 'stack-b', position: { x: 6, y: -14 }, ownerId: 'stack-b' },
+            { id: 'label-stack-overflow', content: 'stack-overflow', position: { x: 6, y: -14 }, ownerId: 'stack-overflow' },
+            { id: 'label-nested-peer', content: 'nested-peer', position: { x: 6, y: -14 }, ownerId: 'nested-peer' },
+            {
+                id: 'label-layout-grid-deep',
+                content: 'Outer grid: all direct children snap',
+                position: { x: 8, y: 6 },
+                ownerId: 'layout-grid-deep',
+                layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
+            },
+            { id: 'label-deep-grid-leaf-left', content: 'leaf resize/reorder', position: { x: 6, y: -16 }, ownerId: 'deep-grid-leaf-left' },
+            { id: 'label-deep-grid-nested-parent', content: 'nested grid 12-unit child', position: { x: 6, y: -16 }, ownerId: 'deep-grid-nested-parent' },
+            { id: 'label-deep-grid-leaf-right', content: 'leaf resize/reorder', position: { x: 6, y: -16 }, ownerId: 'deep-grid-leaf-right' },
+            { id: 'label-deep-grid-a', content: 'grid-a', position: { x: 6, y: -14 }, ownerId: 'deep-grid-a' },
+            { id: 'label-deep-grid-b', content: 'grid-b', position: { x: 6, y: -14 }, ownerId: 'deep-grid-b' },
+            { id: 'label-deep-grid-c', content: 'grid-c', position: { x: 6, y: -14 }, ownerId: 'deep-grid-c' },
+            { id: 'label-deep-grid-d', content: 'grid-d', position: { x: 6, y: -14 }, ownerId: 'deep-grid-d' },
+            {
+                id: 'label-layout-lock-compare',
+                content: 'Child drag lock comparison',
+                position: { x: 8, y: 6 },
+                ownerId: 'layout-lock-compare',
+                layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
+            },
+            {
+                id: 'label-deep-lock-parent',
+                content: lockComparisonChildren ? 'parent lock: on' : 'parent lock: off',
+                position: { x: 6, y: -16 },
+                ownerId: 'deep-lock-parent',
+            },
+            {
+                id: 'label-deep-lock-child-a',
+                content: lockComparisonChildren ? 'drag target (locked)' : 'drag target (unlocked)',
+                position: { x: 4, y: -14 },
+                ownerId: 'deep-lock-child-a',
+            },
+            { id: 'label-deep-lock-child-b', content: 'api move still works', position: { x: 4, y: -14 }, ownerId: 'deep-lock-child-b' },
+            { id: 'label-deep-free-parent', content: 'movable reference', position: { x: 6, y: -16 }, ownerId: 'deep-free-parent' },
+            { id: 'label-deep-free-child-a', content: 'drag target', position: { x: 4, y: -14 }, ownerId: 'deep-free-child-a' },
+            { id: 'label-deep-free-child-b', content: 'free sibling', position: { x: 4, y: -14 }, ownerId: 'deep-free-child-b' },
+            { id: 'label-layout-manual', content: 'Manual (no layout)', position: { x: 6, y: -18 }, ownerId: 'layout-manual' },
+            { id: 'label-manual-a', content: 'manual-a', position: { x: 6, y: -14 }, ownerId: 'manual-a' },
+            { id: 'label-manual-b', content: 'manual-b', position: { x: 6, y: -14 }, ownerId: 'manual-b' },
+        ],
+    });
+};
 var autoLayoutDemoConfig = ({
     id: 'auto-layout',
     title: 'Element Auto-Layout + Label Lane',
@@ -3393,7 +3571,7 @@ var addLinksAction = {
         });
     },
 };
-var rerouteAllAction = {
+var rerouteAllAction$1 = {
     id: 'reroute-links',
     label: 'Reroute All Links',
     run: function (editor) {
@@ -3409,7 +3587,7 @@ var obstacleRoutingDemoConfig = {
     portShapes: basePortShapes,
     defaultElementShapeId: 'default',
     defaultPortShapeId: 'port-circle',
-    actions: [addLinksAction, rerouteAllAction],
+    actions: [addLinksAction, rerouteAllAction$1],
 };
 
 var createLinkBendHandlesState = function () { return ({
@@ -4208,6 +4386,7 @@ var ElementModel = /** @class */ (function () {
         this.moveMode = data.moveMode;
         this.anchorCenter = data.anchorCenter;
         this.layout = data.layout;
+        this.childElementInteraction = data.childElementInteraction;
         this.portMovement = data.portMovement;
     }
     ElementModel.prototype.setPosition = function (position) {
@@ -4245,6 +4424,7 @@ var ElementModel = /** @class */ (function () {
             moveMode: this.moveMode,
             anchorCenter: this.anchorCenter,
             layout: this.layout,
+            childElementInteraction: this.childElementInteraction,
             portMovement: this.portMovement,
         };
     };
@@ -4387,6 +4567,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;
@@ -4423,6 +4604,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,
@@ -4437,7 +4619,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)
@@ -5685,6 +5867,7 @@ var TextLayoutService = /** @class */ (function () {
     return TextLayoutService;
 }());
 
+var GRID_ROW_UNITS = 12;
 var AutoLayoutService = /** @class */ (function () {
     function AutoLayoutService(config) {
         this.model = config.model;
@@ -5699,11 +5882,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: [] };
             }
@@ -5718,9 +5914,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;
@@ -5763,11 +5967,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;
@@ -5850,8 +6145,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);
@@ -5886,10 +6189,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;
@@ -5897,9 +6202,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) {
@@ -5914,20 +6217,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);
@@ -5946,8 +6262,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) {
@@ -5971,6 +6290,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;
@@ -6033,43 +6359,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) {
@@ -6085,19 +6464,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;
@@ -6632,11 +7340,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;
@@ -6798,6 +7513,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) },
@@ -6842,8 +7563,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);
@@ -6980,9 +7701,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;
@@ -7022,14 +7741,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);
@@ -7046,24 +7797,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) });
         }
@@ -7368,6 +8201,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,
@@ -7379,13 +8213,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 };
@@ -7396,11 +8236,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') {
@@ -7413,12 +8257,72 @@ var DiagramEngine = /** @class */ (function () {
         var parentId = (_a = element.parentId) !== null && _a !== void 0 ? _a : null;
         if (!parentId)
             return false;
+        if (!this.isLeafGridChildResizeCandidate(element))
+            return false;
+        var parent = this.model.getElement(parentId);
+        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) {
+        return this.isEnabledGridChildWidthResizeCandidate(element);
+    };
+    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.isEnabledGridChildWidthResizeCandidate(element))
+            return requestedWidth;
+        return this.autoLayoutService.snapGridChildRequestedWidth(parentId, element.id, requestedWidth);
+    };
+    DiagramEngine.prototype.resolveGridChildWidthResizeTopologyChange = function (element, requestedWidth) {
+        var _a, _b;
+        var parentId = (_a = element.parentId) !== null && _a !== void 0 ? _a : null;
+        if (!parentId)
+            return null;
+        if (!this.isEnabledGridChildWidthResizeCandidate(element))
+            return null;
+        var parent = this.model.getElement(parentId);
+        if (!parent)
+            return null;
+        var topologyChange = this.autoLayoutService.resolveGridChildResizeTopologyChange(parentId, element.id, requestedWidth);
+        if (!topologyChange)
+            return null;
+        var parentLayout = parent.layout;
+        if (!parentLayout)
+            return null;
+        return {
+            parentId: topologyChange.parentId,
+            triggerChildId: topologyChange.triggerChildId,
+            reason: topologyChange.reason,
+            beforeRows: topologyChange.beforeRows,
+            afterRows: topologyChange.afterRows,
+            beforeGridTemplate: parentLayout.gridTemplate ? __spreadArray([], parentLayout.gridTemplate, true) : undefined,
+            afterGridTemplate: __spreadArray([], ((_b = topologyChange.nextLayout.gridTemplate) !== null && _b !== void 0 ? _b : []), true),
+            afterLayout: topologyChange.nextLayout,
+        };
+    };
+    DiagramEngine.prototype.isLeafGridChildResizeCandidate = function (element) {
         if (this.model.getChildren(element.id).length > 0)
             return false;
         if (element.layout && element.layout.mode !== 'manual')
             return false;
+        return true;
+    };
+    DiagramEngine.prototype.isEnabledGridChildWidthResizeCandidate = function (element) {
+        var _a;
+        var parentId = (_a = element.parentId) !== null && _a !== void 0 ? _a : null;
+        if (!parentId)
+            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';
+        var layout = parent === null || parent === void 0 ? void 0 : parent.layout;
+        if (!layout || layout.mode !== 'grid')
+            return false;
+        return Boolean(layout.gridChildWidthResizeEnabled);
     };
     DiagramEngine.prototype.getPortWorldPosition = function (id) {
         return this.model.getPortWorldPosition(id);
@@ -7701,8 +8605,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);
@@ -9280,7 +10184,7 @@ var ellipseMidPointToIndex = function (value) {
 var KonvaInteraction = /** @class */ (function () {
     function KonvaInteraction(engine, config) {
         if (config === void 0) { config = {}; }
-        var _a, _b;
+        var _a;
         this.linkDragContext = null;
         this.programmaticLinkSession = null;
         this.bound = false;
@@ -9304,7 +10208,6 @@ var KonvaInteraction = /** @class */ (function () {
         this.stage = config.stage;
         this.hitTester = (_a = config.hitTester) !== null && _a !== void 0 ? _a : new KonvaHitTester();
         this.renderer = config.renderer;
-        this.panKey = (_b = config.panKey) !== null && _b !== void 0 ? _b : 'Control';
         this.shapeRegistry = config.shapeRegistry;
         this.shapeHoverControls = this.normalizeShapeHoverControls(config.shapeHoverControls);
         this.onShapeHoverControlInteracted = config.onShapeHoverControlInteracted;
@@ -9472,7 +10375,10 @@ var KonvaInteraction = /** @class */ (function () {
             var hit = _this.resolveHit(point);
             var nativeEvent = event === null || event === void 0 ? void 0 : event.evt;
             var isMulti = Boolean(nativeEvent && (nativeEvent.ctrlKey || nativeEvent.metaKey || nativeEvent.shiftKey));
-            var isPanGesture = Boolean(nativeEvent && _this.isPanKeyPressed(nativeEvent) && nativeEvent.button === 0);
+            var isPrimaryButton = !nativeEvent || nativeEvent.button === 0;
+            var isEmptyPaper = !hit || hit.type === 'none';
+            var isMarqueeGesture = Boolean(isPrimaryButton && isEmptyPaper && (nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.shiftKey));
+            var isPanGesture = Boolean(isPrimaryButton && isEmptyPaper && !(nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.shiftKey));
             var pointerInfo = _this.buildPointerInfo(point, nativeEvent);
             if ((hit === null || hit === void 0 ? void 0 : hit.type) === 'shape-hover-control') {
                 var resolvedControl = _this.resolveShapeHoverControlFromHit(hit.id, point);
@@ -9530,11 +10436,14 @@ var KonvaInteraction = /** @class */ (function () {
                 }
                 return;
             }
-            if (!hit || hit.type === 'none') {
+            if (isMarqueeGesture) {
                 _this.dragState = { mode: 'marquee', start: point, isMulti: isMulti, hasMoved: false };
                 (_d = _this.renderer) === null || _d === void 0 ? void 0 : _d.renderMarquee({ x: point.x, y: point.y, width: 0, height: 0 });
                 return;
             }
+            if (isEmptyPaper) {
+                return;
+            }
             if (hit.type === 'port') {
                 var elementId = _this.engine.getPortElementId(hit.id);
                 if (!elementId)
@@ -9577,6 +10486,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 = {
@@ -9595,6 +10508,7 @@ var KonvaInteraction = /** @class */ (function () {
                     var element = _this.getElementById(hit.id);
                     if (!element)
                         return;
+                    var movable = _this.isElementMovable(hit.id);
                     var anchor = element.anchorCenter ? 'center' : 'top-left';
                     var base = element.anchorCenter
                         ? {
@@ -9609,12 +10523,13 @@ var KonvaInteraction = /** @class */ (function () {
                         offset: { x: point.x - base.x, y: point.y - base.y },
                         start: __assign({}, base),
                         anchor: anchor,
+                        movable: movable,
                         startParentId: (_e = element.parentId) !== null && _e !== void 0 ? _e : null,
                         selectionIds: _this.engine.getSelection(),
                         isMulti: isMulti,
                         hasMoved: false,
                     };
-                    _this.setCursor('grabbing');
+                    _this.setCursor(movable ? 'grabbing' : 'pointer');
                 }
             }
         };
@@ -9672,6 +10587,9 @@ var KonvaInteraction = /** @class */ (function () {
                     var dy = target.y - _this.dragState.start.y;
                     var moved = Math.hypot(dx, dy) >= _this.dragThreshold;
                     _this.dragState.hasMoved = _this.dragState.hasMoved || moved;
+                    if (!_this.dragState.movable) {
+                        return;
+                    }
                     _this.engine.moveElementTo(_this.dragState.id, target.x, target.y);
                     if (_this.renderer && _this.engine.getSelection().includes(_this.dragState.id)) {
                         var element = _this.getElementById(_this.dragState.id);
@@ -9797,15 +10715,15 @@ var KonvaInteraction = /** @class */ (function () {
                 var dx = point.x - _this.dragState.start.x;
                 var dy = point.y - _this.dragState.start.y;
                 _this.pan = {
-                    x: _this.dragState.origin.x - dx * _this.panSpeed,
-                    y: _this.dragState.origin.y - dy * _this.panSpeed,
+                    x: _this.dragState.origin.x + dx * _this.panSpeed,
+                    y: _this.dragState.origin.y + dy * _this.panSpeed,
                 };
                 _this.applyStageTransform();
                 _this.engine.setViewport(_this.pan, _this.zoom);
             }
         };
         var pointerUp = function () {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
             var args = [];
             for (var _i = 0; _i < arguments.length; _i++) {
                 args[_i] = arguments[_i];
@@ -9899,10 +10817,21 @@ var KonvaInteraction = /** @class */ (function () {
                     _this.engine.emitPaperClick(pointerInfo);
                 }
             }
-            if (((_h = _this.dragState) === null || _h === void 0 ? void 0 : _h.mode) === 'move' && _this.dragState.type === 'element') {
+            if (((_h = _this.dragState) === null || _h === void 0 ? void 0 : _h.mode) === 'pan') {
+                var point = pointerPoint !== null && pointerPoint !== void 0 ? pointerPoint : _this.dragState.start;
+                var dx = point.x - _this.dragState.start.x;
+                var dy = point.y - _this.dragState.start.y;
+                var moved = Math.hypot(dx, dy) >= _this.dragThreshold;
+                if (!moved) {
+                    _this.engine.setSelection([]);
+                    var pointerInfo = _this.buildPointerInfo(point, nativeEvent);
+                    _this.engine.emitPaperClick(pointerInfo);
+                }
+            }
+            if (((_j = _this.dragState) === null || _j === void 0 ? void 0 : _j.mode) === 'move' && _this.dragState.type === 'element') {
                 var element = _this.getElementById(_this.dragState.id);
                 if (element) {
-                    var endTopLeft = (_j = _this.engine.getElementWorldPosition(_this.dragState.id)) !== null && _j !== void 0 ? _j : element.position;
+                    var endTopLeft = (_k = _this.engine.getElementWorldPosition(_this.dragState.id)) !== null && _k !== void 0 ? _k : element.position;
                     var endWorld = _this.dragState.anchor === 'center'
                         ? {
                             x: endTopLeft.x + element.size.width / 2,
@@ -9913,7 +10842,8 @@ var KonvaInteraction = /** @class */ (function () {
                         x: endWorld.x - _this.dragState.start.x,
                         y: endWorld.y - _this.dragState.start.y,
                     };
-                    var moved = _this.dragState.hasMoved || Math.hypot(delta.x, delta.y) > 0;
+                    var moved = _this.dragState.movable &&
+                        (_this.dragState.hasMoved || Math.hypot(delta.x, delta.y) > 0);
                     if (moved) {
                         _this.engine.emitElementDrop({
                             elementId: _this.dragState.id,
@@ -9925,16 +10855,16 @@ var KonvaInteraction = /** @class */ (function () {
                             anchor: _this.dragState.anchor,
                         });
                     }
-                    else {
+                    else if (!_this.dragState.hasMoved) {
                         var pointerInfo = _this.buildPointerInfo(pointerPoint !== null && pointerPoint !== void 0 ? pointerPoint : _this.dragState.start, nativeEvent);
                         _this.engine.emitElementClick(_this.dragState.id, pointerInfo, _this.dragState.isMulti);
                     }
                 }
             }
-            if (((_k = _this.dragState) === null || _k === void 0 ? void 0 : _k.mode) === 'move' && _this.dragState.type === 'port') {
+            if (((_l = _this.dragState) === null || _l === void 0 ? void 0 : _l.mode) === 'move' && _this.dragState.type === 'port') {
                 var elementId = _this.engine.getPortElementId(_this.dragState.id);
                 if (elementId) {
-                    var pointerInfo = _this.buildPointerInfo((_l = pointerPoint !== null && pointerPoint !== void 0 ? pointerPoint : _this.engine.getPortWorldPosition(_this.dragState.id)) !== null && _l !== void 0 ? _l : { x: 0, y: 0 }, nativeEvent);
+                    var pointerInfo = _this.buildPointerInfo((_m = pointerPoint !== null && pointerPoint !== void 0 ? pointerPoint : _this.engine.getPortWorldPosition(_this.dragState.id)) !== null && _m !== void 0 ? _m : { x: 0, y: 0 }, nativeEvent);
                     _this.engine.emitPortMouseUp({ portId: _this.dragState.id, elementId: elementId, pointer: pointerInfo });
                 }
             }
@@ -9966,6 +10896,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);
@@ -10238,6 +11170,10 @@ var KonvaInteraction = /** @class */ (function () {
             this.setCursor('pointer');
             return;
         }
+        if (hit.type === 'element' && !this.isElementMovable(hit.id)) {
+            this.setCursor('pointer');
+            return;
+        }
         this.setCursor('grab');
     };
     KonvaInteraction.prototype.normalizeShapeHoverControls = function (controls) {
@@ -11118,8 +12054,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) {
@@ -11455,6 +12395,22 @@ 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.isElementMovable = function (id) {
+        var _a;
+        var element = this.getElementById(id);
+        if (!(element === null || element === void 0 ? void 0 : element.parentId))
+            return true;
+        var parent = this.getElementById(element.parentId);
+        return ((_a = parent === null || parent === void 0 ? void 0 : parent.childElementInteraction) === null || _a === void 0 ? void 0 : _a.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; });
     };
@@ -11569,19 +12525,6 @@ var KonvaInteraction = /** @class */ (function () {
         var tag = target.tagName.toLowerCase();
         return tag === 'input' || tag === 'textarea' || tag === 'select';
     };
-    KonvaInteraction.prototype.isPanKeyPressed = function (event) {
-        switch (this.panKey) {
-            case 'Shift':
-                return event.shiftKey;
-            case 'Alt':
-                return event.altKey;
-            case 'Meta':
-                return event.metaKey;
-            case 'Control':
-            default:
-                return event.ctrlKey;
-        }
-    };
     return KonvaInteraction;
 }());
 
@@ -12137,6 +13080,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) {
@@ -12173,6 +13134,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);
@@ -12248,10 +13237,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) {
@@ -12398,6 +13389,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') {
@@ -12424,6 +13421,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();
@@ -12643,6 +13642,7 @@ var engineEventOptions = [
     'elementDragged',
     'elementMoved',
     'elementResized',
+    'gridLayoutChanged',
     'elementDeleted',
     'portDeleted',
     'linkDeleted',
@@ -12893,11 +13893,16 @@ var parentOptions = [
     { id: 'layout-column', label: 'Vertical layout' },
     { id: 'layout-grid', label: 'Grid layout' },
     { id: 'layout-nested', label: 'Nested layout' },
+    { id: 'layout-grid-deep', label: 'Nested grid' },
+    { id: 'layout-lock-compare', label: 'Child lock compare' },
     { id: 'layout-manual', label: 'Manual (compare)' },
 ];
 var shortLabel = 'Parent label lane demo';
 var longLabel = 'Parent label lane demo with longer content to increase flexible reserved space and push children downward.';
-var defaultGridTemplateText = '[[3],[1,2]]';
+var defaultGridTemplateText = '[12,4,8]';
+var lockComparisonContainerId = 'layout-lock-compare';
+var lockParentId = 'deep-lock-parent';
+var lockTargetId = 'deep-lock-child-a';
 var serializeGridTemplate = function (template) {
     return Array.isArray(template) && template.length > 0 ? JSON.stringify(template) : defaultGridTemplateText;
 };
@@ -12916,33 +13921,33 @@ 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;
 };
 var AutoLayoutDemo = function () {
     var demo = autoLayoutDemoConfig;
-    var _a = useDemoEditor({
-        createState: demo.createState,
+    var _a = React.useState(true), lockComparisonChildren = _a[0], setLockComparisonChildren = _a[1];
+    var createState = React.useCallback(function () { return createAutoLayoutState(lockComparisonChildren); }, [lockComparisonChildren]);
+    var _b = useDemoEditor({
+        createState: createState,
         elementShapes: demo.elementShapes,
         portShapes: demo.portShapes,
-    }), containerRef = _a.containerRef, editorRef = _a.editorRef, diagramState = _a.diagramState, selection = _a.selection, snapEnabled = _a.snapEnabled, setSnapEnabled = _a.setSnapEnabled;
+    }), containerRef = _b.containerRef, editorRef = _b.editorRef, diagramState = _b.diagramState, selection = _b.selection, snapEnabled = _b.snapEnabled, setSnapEnabled = _b.setSnapEnabled;
     var nextOffset = useOffsetSequence();
     var actionHelpers = React.useMemo(function () { return ({ nextOffset: nextOffset }); }, [nextOffset]);
     var controls = useDemoControls({
@@ -12954,24 +13959,25 @@ var AutoLayoutDemo = function () {
         setSnapEnabled: setSnapEnabled,
         actionHelpers: actionHelpers,
     });
-    var _b = React.useState(parentOptions[0].id), targetId = _b[0], setTargetId = _b[1];
-    var _c = React.useState('horizontal'), mode = _c[0], setMode = _c[1];
-    var _d = React.useState('center'), align = _d[0], setAlign = _d[1];
-    var _e = React.useState('grow'), autoResize = _e[0], setAutoResize = _e[1];
-    var _f = React.useState(12), padding = _f[0], setPadding = _f[1];
-    var _g = React.useState(12), gap = _g[0], setGap = _g[1];
-    var _h = React.useState('none'), childFitMainAxis = _h[0], setChildFitMainAxis = _h[1];
-    var _j = React.useState('none'), childFitCrossAxis = _j[0], setChildFitCrossAxis = _j[1];
-    var _k = React.useState(''), childMinWidth = _k[0], setChildMinWidth = _k[1];
-    var _l = React.useState(''), childMinHeight = _l[0], setChildMinHeight = _l[1];
-    var _m = React.useState(''), childMaxWidth = _m[0], setChildMaxWidth = _m[1];
-    var _o = React.useState(''), childMaxHeight = _o[0], setChildMaxHeight = _o[1];
-    var _p = React.useState(defaultGridTemplateText), gridTemplateText = _p[0], setGridTemplateText = _p[1];
-    var _q = React.useState('none'), labelReservedMode = _q[0], setLabelReservedMode = _q[1];
-    var _r = React.useState(32), labelReservedFixedSize = _r[0], setLabelReservedFixedSize = _r[1];
-    var _s = React.useState(''), labelReservedMinSize = _s[0], setLabelReservedMinSize = _s[1];
-    var _t = React.useState(''), labelReservedMaxSize = _t[0], setLabelReservedMaxSize = _t[1];
-    var _u = React.useState('None yet'), lastTrigger = _u[0], setLastTrigger = _u[1];
+    var _c = React.useState(parentOptions[0].id), targetId = _c[0], setTargetId = _c[1];
+    var _d = React.useState('horizontal'), mode = _d[0], setMode = _d[1];
+    var _e = React.useState('center'), align = _e[0], setAlign = _e[1];
+    var _f = React.useState('grow'), autoResize = _f[0], setAutoResize = _f[1];
+    var _g = React.useState(12), padding = _g[0], setPadding = _g[1];
+    var _h = React.useState(12), gap = _h[0], setGap = _h[1];
+    var _j = React.useState('none'), childFitMainAxis = _j[0], setChildFitMainAxis = _j[1];
+    var _k = React.useState('none'), childFitCrossAxis = _k[0], setChildFitCrossAxis = _k[1];
+    var _l = React.useState(''), childMinWidth = _l[0], setChildMinWidth = _l[1];
+    var _m = React.useState(''), childMinHeight = _m[0], setChildMinHeight = _m[1];
+    var _o = React.useState(''), childMaxWidth = _o[0], setChildMaxWidth = _o[1];
+    var _p = React.useState(''), childMaxHeight = _p[0], setChildMaxHeight = _p[1];
+    var _q = React.useState(defaultGridTemplateText), gridTemplateText = _q[0], setGridTemplateText = _q[1];
+    var _r = React.useState(false), gridChildWidthResizeEnabled = _r[0], setGridChildWidthResizeEnabled = _r[1];
+    var _s = React.useState('none'), labelReservedMode = _s[0], setLabelReservedMode = _s[1];
+    var _t = React.useState(32), labelReservedFixedSize = _t[0], setLabelReservedFixedSize = _t[1];
+    var _u = React.useState(''), labelReservedMinSize = _u[0], setLabelReservedMinSize = _u[1];
+    var _v = React.useState(''), labelReservedMaxSize = _v[0], setLabelReservedMaxSize = _v[1];
+    var _w = React.useState('None yet'), lastTrigger = _w[0], setLastTrigger = _w[1];
     React.useEffect(function () {
         var editor = editorRef.current;
         if (!editor)
@@ -12979,6 +13985,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; }); }),
         ];
@@ -13004,6 +14011,36 @@ var AutoLayoutDemo = function () {
         }
     }, [diagramState, targetId]);
     var targetElement = React.useMemo(function () { return diagramState === null || diagramState === void 0 ? void 0 : diagramState.elements.find(function (el) { return el.id === targetId; }); }, [diagramState, targetId]);
+    var resolveElementWorldPosition = React.useCallback(function (elementId) {
+        if (!diagramState)
+            return null;
+        var byId = new Map(diagramState.elements.map(function (element) { return [element.id, element]; }));
+        var current = byId.get(elementId);
+        if (!current)
+            return null;
+        var x = 0;
+        var y = 0;
+        while (current) {
+            x += current.position.x;
+            y += current.position.y;
+            current = current.parentId ? byId.get(current.parentId) : undefined;
+        }
+        return { x: x, y: y };
+    }, [diagramState]);
+    var lockDemoContext = React.useMemo(function () {
+        var _a;
+        if (!diagramState)
+            return null;
+        var outer = diagramState.elements.find(function (el) { return el.id === lockComparisonContainerId; });
+        var parent = diagramState.elements.find(function (el) { return el.id === lockParentId; });
+        if (!outer || !parent)
+            return null;
+        return {
+            outer: outer,
+            parent: parent,
+            isLocked: ((_a = parent.childElementInteraction) === null || _a === void 0 ? void 0 : _a.movable) === false,
+        };
+    }, [diagramState]);
     var targetOptions = React.useMemo(function () {
         var seen = new Set();
         var options = [];
@@ -13053,6 +14090,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 : '');
@@ -13106,7 +14144,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, ")"));
     };
@@ -13149,21 +14187,29 @@ var AutoLayoutDemo = function () {
             setLastTrigger('child removed');
         }
     };
-    var handleFocusResizeLockChild = function () {
+    var handleFocusLockTarget = function () {
         var editor = editorRef.current;
         if (!editor)
             return;
-        setTargetId('layout-grid');
-        editor.setSelection(['grid-b']);
-        setLastTrigger('focus resize-lock child');
+        setTargetId(lockParentId);
+        editor.setSelection([lockTargetId]);
+        setLastTrigger(lockComparisonChildren ? 'focus locked child' : 'focus unlocked comparison child');
     };
-    var handleFocusResizeLockParent = function () {
+    var handleFocusLockParent = function () {
         var editor = editorRef.current;
         if (!editor)
             return;
-        setTargetId('layout-grid');
-        editor.setSelection(['layout-grid']);
-        setLastTrigger('focus resize-lock parent');
+        setTargetId(lockParentId);
+        editor.setSelection([lockParentId]);
+        setLastTrigger('focus lock parent');
+    };
+    var handleMoveLockTargetViaApi = function () {
+        var editor = editorRef.current;
+        var parentWorld = resolveElementWorldPosition(lockParentId);
+        if (!editor || !lockDemoContext || !parentWorld)
+            return;
+        editor.moveElementTo(lockTargetId, parentWorld.x + 56, parentWorld.y + 18);
+        setLastTrigger(lockDemoContext.isLocked ? 'locked child moved by api' : 'comparison child moved by api');
     };
     var alignmentLabel = mode === 'horizontal'
         ? 'Vertical align (top/center/bottom)'
@@ -13173,13 +14219,18 @@ 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, fontSize: 13, color: '#333' } }, "Grid child width resize starts enabled for the seeded grid parents in this demo. With the capability on, horizontal drag can wrap rows automatically from a flat 12-unit slot array, resize direct grid children in 1/12 steps, and reorder peers by drag position. That now includes nested layout parents as well as leaf children. Turn the checkbox off on a selected grid parent to compare the older locked-width behavior where a mostly downward drag keeps width stable while height changes."),
             React.createElement("p", { style: { marginTop: 0, marginBottom: 0, fontSize: 13, color: '#333' } },
-                "Resize-lock check: select ",
-                React.createElement("code", null, "grid-b"),
-                " and drag a corner mostly downward. Width should stay stable while height changes. Then select ",
-                React.createElement("code", null, "layout-grid"),
-                " and drag a corner to verify parent width and height both follow pointer movement.")),
+                "The ",
+                React.createElement("code", null, "layout-grid-deep"),
+                " scenario now keeps the outer container focused on grid behavior with three direct grid children, including one nested grid parent that also follows the enabled 12-unit resize path. The child drag lock comparison lives beside it in ",
+                React.createElement("code", null, " layout-lock-compare"),
+                "; toggle the lock, try dragging",
+                React.createElement("code", null, " deep-lock-child-a"),
+                " versus ",
+                React.createElement("code", null, " deep-free-child-a"),
+                ", then use the API move shortcut to confirm the policy suppresses built-in drag without freezing geometry.")),
         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' } },
@@ -13227,7 +14278,19 @@ 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: "lock-comparison-child-drag", style: { fontWeight: 600 } }, "Lock comparison child drag"),
+                React.createElement("label", { style: { display: 'inline-flex', alignItems: 'center', gap: 6 } },
+                    React.createElement("input", { id: "lock-comparison-child-drag", type: "checkbox", checked: lockComparisonChildren, onChange: function (event) {
+                            setLockComparisonChildren(event.target.checked);
+                            setTargetId(lockComparisonContainerId);
+                            setLastTrigger(event.target.checked ? 'comparison child drag locked' : 'comparison child drag unlocked');
+                        } }),
+                    "Reload parent-owned lock demo"),
                 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"),
@@ -13258,8 +14321,9 @@ var AutoLayoutDemo = function () {
                     React.createElement("strong", null, lastTrigger)),
                 React.createElement("button", { type: "button", onClick: function () { return handleSetLabelContent(shortLabel); }, style: { padding: '6px 10px' }, disabled: !targetElement || mode === 'manual' }, "Label short"),
                 React.createElement("button", { type: "button", onClick: function () { return handleSetLabelContent(longLabel); }, style: { padding: '6px 10px' }, disabled: !targetElement || mode === 'manual' }, "Label long"),
-                React.createElement("button", { type: "button", onClick: handleFocusResizeLockChild, style: { padding: '6px 10px' } }, "Focus lock child"),
-                React.createElement("button", { type: "button", onClick: handleFocusResizeLockParent, style: { padding: '6px 10px' } }, "Focus lock parent")),
+                React.createElement("button", { type: "button", onClick: handleFocusLockTarget, style: { padding: '6px 10px' } }, "Focus lock target"),
+                React.createElement("button", { type: "button", onClick: handleFocusLockParent, style: { padding: '6px 10px' } }, "Focus lock parent"),
+                React.createElement("button", { type: "button", onClick: handleMoveLockTargetViaApi, style: { padding: '6px 10px' } }, "Move lock target via API")),
             React.createElement("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 } },
                 React.createElement("div", null,
                     React.createElement("div", { style: { fontWeight: 600, marginBottom: 6 } }, "Child order (axis or grid row-major)"),
@@ -13280,11 +14344,20 @@ 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, "Nested grid: target layout-grid-deep to inspect an outer grid where all three direct children, including the nested grid parent, use enabled 12-unit resize."),
+                        React.createElement("li", null, "Select deep-grid-nested-parent and drag a horizontal resize handle; it should snap in grid units and then reflow inner children inside the resized container."),
+                        React.createElement("li", null, "Lock comparison: target layout-lock-compare, toggle Lock comparison child drag, then compare deep-lock-child-a and deep-free-child-a."),
+                        React.createElement("li", null, "Use Move lock target via API after locking; the child should still reposition because the policy only suppresses built-in drag."),
+                        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."),
@@ -13716,10 +14789,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({
@@ -13727,6 +14805,7 @@ var TextLayoutDemo = function () {
                 content: textDemoLongSample,
                 ownerId: textDemoOwnerId,
                 position: { x: 12, y: 12 },
+                interaction: interaction,
                 layout: nextLayout,
             });
             editor.setSelection([textDemoOwnedTextId]);
@@ -13737,6 +14816,7 @@ var TextLayoutDemo = function () {
             id: textDemoFloatingTextId,
             content: textDemoLongSample,
             position: { x: 470, y: 120 },
+            interaction: interaction,
             layout: nextLayout,
         });
         editor.setSelection([textDemoFloatingTextId]);
@@ -13804,7 +14884,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' } },
@@ -13892,7 +14973,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:"),
@@ -13962,6 +15048,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,
@@ -15039,6 +16430,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,