orcasvn-react-diagrams 0.2.2 → 0.2.4

package/dist/esm/examples.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback, createContext, useContext, useRef, useState, useEffect } from 'react';
+import React, { useMemo, useState, useCallback, createContext, useContext, useRef, useEffect } from 'react';
 
 var fallbackId = function () {
     return "id-".concat(Math.random().toString(36).slice(2, 10), "-").concat(Date.now().toString(36));
@@ -851,16 +851,34 @@ var createAutoLayoutState = function () { return ({
     ports: [],
     links: [],
     texts: [
-        { id: 'label-layout-row', content: 'Row parent', position: { x: 8, y: -18 }, ownerId: 'layout-row' },
+        {
+            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', position: { x: 8, y: -18 }, ownerId: 'layout-column' },
+        {
+            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-nested', content: 'Row + nested column', position: { x: 6, y: -18 }, ownerId: 'layout-nested' },
+        {
+            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' },
@@ -873,8 +891,8 @@ var createAutoLayoutState = function () { return ({
 }); };
 var autoLayoutDemoConfig = ({
     id: 'auto-layout',
-    title: 'Element Auto-Layout',
-    description: 'Arrange children with padding/alignment plus fit options (main-axis distribute, cross-axis stretch).',
+    title: 'Element Auto-Layout + Label Lane',
+    description: 'Consolidated auto-layout verification with baseline/nested containers, fit options, and label reserved-space modes.',
     createState: createAutoLayoutState,
     elementShapes: baseElementShapes,
     portShapes: basePortShapes,
@@ -1486,6 +1504,302 @@ var multipleElementsDemoConfig = ({
     actions: [],
 });
 
+var asymmetricPortMultiAnchorDemoId = 'asymmetric-port-multi-anchor';
+var asymmetricPortDefaultVariantId = 'classic';
+var asymmetricPortShapeVariants = [
+    {
+        id: asymmetricPortDefaultVariantId,
+        label: 'Classic arm',
+        description: 'Baseline square-line-circle asymmetric glyph.',
+        shapeId: 'displaybox-asymmetric-anchor-port-classic',
+        svgPath: 'M2 6 H10 V14 H2 Z M10 10 H24 M28 10 m-4 0 a4 4 0 1 0 8 0 a4 4 0 1 0 -8 0',
+        svgSize: { width: 36, height: 20 },
+        placementPoint: { x: 6, y: 10 },
+        externalLinkAttachPoint: { x: 28, y: 10 },
+        internalLinkAttachPoint: { x: 6, y: 10 },
+        rotationPivot: { x: 6, y: 10 },
+    },
+    {
+        id: 'forked-arm',
+        label: 'Forked arm',
+        description: 'Connector splits before reaching the terminal circle.',
+        shapeId: 'displaybox-asymmetric-anchor-port-forked',
+        svgPath: 'M2 6 H10 V14 H2 Z M10 10 H18 M18 10 L24 6 M18 10 L24 14 M30 10 m-4 0 a4 4 0 1 0 8 0 a4 4 0 1 0 -8 0',
+        svgSize: { width: 38, height: 20 },
+        placementPoint: { x: 6, y: 10 },
+        externalLinkAttachPoint: { x: 30, y: 10 },
+        internalLinkAttachPoint: { x: 6, y: 10 },
+        rotationPivot: { x: 6, y: 10 },
+    },
+    {
+        id: 'zigzag-arm',
+        label: 'Zigzag arm',
+        description: 'Connector uses a zigzag body before the endpoint marker.',
+        shapeId: 'displaybox-asymmetric-anchor-port-zigzag',
+        svgPath: 'M2 6 H10 V14 H2 Z M10 10 L15 6 L20 14 L25 6 L28 10 M34 10 m-4 0 a4 4 0 1 0 8 0 a4 4 0 1 0 -8 0',
+        svgSize: { width: 42, height: 20 },
+        placementPoint: { x: 6, y: 10 },
+        externalLinkAttachPoint: { x: 34, y: 10 },
+        internalLinkAttachPoint: { x: 6, y: 10 },
+        rotationPivot: { x: 6, y: 10 },
+    },
+    {
+        id: 'dual-bar',
+        label: 'Dual bar',
+        description: 'Body includes dual bars between pivot and circle endpoint.',
+        shapeId: 'displaybox-asymmetric-anchor-port-dual-bar',
+        svgPath: 'M2 6 H10 V14 H2 Z M10 10 H18 M18 6 V14 M22 6 V14 M22 10 H26 M32 10 m-4 0 a4 4 0 1 0 8 0 a4 4 0 1 0 -8 0',
+        svgSize: { width: 40, height: 20 },
+        placementPoint: { x: 6, y: 10 },
+        externalLinkAttachPoint: { x: 32, y: 10 },
+        internalLinkAttachPoint: { x: 6, y: 10 },
+        rotationPivot: { x: 6, y: 10 },
+    },
+];
+var resolveAsymmetricPortShapeVariant = function (variantId) {
+    var _a;
+    if (!variantId)
+        return asymmetricPortShapeVariants[0];
+    return (_a = asymmetricPortShapeVariants.find(function (variant) { return variant.id === variantId; })) !== null && _a !== void 0 ? _a : asymmetricPortShapeVariants[0];
+};
+resolveAsymmetricPortShapeVariant(asymmetricPortDefaultVariantId).shapeId;
+resolveAsymmetricPortShapeVariant(asymmetricPortDefaultVariantId).svgPath;
+resolveAsymmetricPortShapeVariant(asymmetricPortDefaultVariantId).svgSize;
+var multiAnchorHostId = 'multi-anchor-host';
+var multiAnchorExternalPortId = 'multi-anchor-port-external';
+var multiAnchorStroke = '#1f4d99';
+var legacyStroke = '#9b2c2c';
+var createAsymmetricPort = function (options) {
+    var basePort = {
+        id: options.id,
+        elementId: options.elementId,
+        position: options.position,
+        shapeId: options.shapeVariant.shapeId,
+        size: __assign({}, options.shapeVariant.svgSize),
+        moveMode: 'border',
+        anchorCenter: true,
+        orientToHostBorder: true,
+        style: {
+            stroke: options.stroke,
+            strokeWidth: 2,
+            fill: 'transparent',
+        },
+    };
+    if (options.mode === 'legacy') {
+        return basePort;
+    }
+    return __assign(__assign({}, basePort), { placementPoint: __assign({}, options.shapeVariant.placementPoint), externalLinkAttachPoint: __assign({}, options.shapeVariant.externalLinkAttachPoint), internalLinkAttachPoint: __assign({}, options.shapeVariant.internalLinkAttachPoint), rotationPivot: __assign({}, options.shapeVariant.rotationPivot) });
+};
+var createComparisonRow = function (options) {
+    var prefix = options.prefix, top = options.top, mode = options.mode, shapeVariant = options.shapeVariant;
+    var hostId = "".concat(prefix, "-host");
+    var peerId = "".concat(prefix, "-peer");
+    var childId = "".concat(prefix, "-child");
+    var externalPortId = "".concat(prefix, "-port-external");
+    var topPortId = "".concat(prefix, "-port-top");
+    var bottomPortId = "".concat(prefix, "-port-bottom");
+    var internalPortId = "".concat(prefix, "-port-internal");
+    var peerPortId = "".concat(prefix, "-peer-port");
+    var childPortId = "".concat(prefix, "-child-port");
+    var stroke = mode === 'multi-anchor' ? multiAnchorStroke : legacyStroke;
+    var title = mode === 'multi-anchor' ? 'Multi-anchor geometry' : 'Legacy/default geometry';
+    var subtitle = mode === 'multi-anchor'
+        ? "".concat(shapeVariant.label, ": square pivot stays pinned to the border; right-side link starts at the circle endpoint.")
+        : 'Same svgPath without placement/link/pivot anchors for quick comparison.';
+    return {
+        elements: [
+            {
+                id: hostId,
+                position: { x: 80, y: top },
+                size: { width: 280, height: 180 },
+                shapeId: 'default',
+            },
+            {
+                id: peerId,
+                position: { x: 470, y: top + 36 },
+                size: { width: 170, height: 108 },
+                shapeId: 'panel',
+            },
+            {
+                id: childId,
+                position: { x: 88, y: 86 },
+                size: { width: 122, height: 72 },
+                shapeId: 'panel',
+                parentId: hostId,
+            },
+        ],
+        ports: [
+            createAsymmetricPort({
+                id: topPortId,
+                elementId: hostId,
+                position: { x: 112, y: 0 },
+                stroke: stroke,
+                mode: mode,
+                shapeVariant: shapeVariant,
+            }),
+            createAsymmetricPort({
+                id: externalPortId,
+                elementId: hostId,
+                position: { x: 280, y: 68 },
+                stroke: stroke,
+                mode: mode,
+                shapeVariant: shapeVariant,
+            }),
+            createAsymmetricPort({
+                id: bottomPortId,
+                elementId: hostId,
+                position: { x: 182, y: 180 },
+                stroke: stroke,
+                mode: mode,
+                shapeVariant: shapeVariant,
+            }),
+            createAsymmetricPort({
+                id: internalPortId,
+                elementId: hostId,
+                position: { x: 0, y: 130 },
+                stroke: stroke,
+                mode: mode,
+                shapeVariant: shapeVariant,
+            }),
+            {
+                id: peerPortId,
+                elementId: peerId,
+                position: { x: 0, y: 54 },
+                shapeId: 'port-dark',
+                moveMode: 'border',
+                anchorCenter: true,
+            },
+            {
+                id: childPortId,
+                elementId: childId,
+                position: { x: 0, y: 36 },
+                shapeId: 'port-circle',
+                moveMode: 'border',
+                anchorCenter: true,
+            },
+        ],
+        links: [
+            {
+                id: "".concat(prefix, "-link-external"),
+                sourcePortId: externalPortId,
+                targetPortId: peerPortId,
+                points: [],
+                style: {
+                    stroke: stroke,
+                    strokeWidth: 2,
+                },
+            },
+            {
+                id: "".concat(prefix, "-link-internal"),
+                sourcePortId: internalPortId,
+                targetPortId: childPortId,
+                points: [],
+                style: {
+                    stroke: mode === 'multi-anchor' ? '#2f7a3d' : '#7a5f2f',
+                    strokeWidth: 2,
+                    dash: mode === 'multi-anchor' ? [8, 4] : [4, 4],
+                },
+            },
+        ],
+        texts: [
+            {
+                id: "".concat(prefix, "-title"),
+                content: title,
+                position: { x: 74, y: top - 42 },
+                style: { fontStyle: 'bold', fontSize: 20 },
+            },
+            {
+                id: "".concat(prefix, "-subtitle"),
+                content: subtitle,
+                position: { x: 74, y: top - 18 },
+                style: { fontSize: 13, fill: '#334155' },
+            },
+            {
+                id: "".concat(prefix, "-host-label"),
+                content: 'Drag border ports or use the side buttons below.',
+                position: { x: 14, y: -18 },
+                ownerId: hostId,
+                style: { fontSize: 12, fill: '#334155' },
+            },
+            {
+                id: "".concat(prefix, "-top-port-label"),
+                content: 'top',
+                position: { x: 10, y: -18 },
+                ownerId: topPortId,
+                style: { fontSize: 11 },
+            },
+            {
+                id: "".concat(prefix, "-external-port-label"),
+                content: 'external → circle',
+                position: { x: 12, y: -18 },
+                ownerId: externalPortId,
+                style: { fontSize: 11 },
+            },
+            {
+                id: "".concat(prefix, "-bottom-port-label"),
+                content: 'bottom',
+                position: { x: 12, y: 18 },
+                ownerId: bottomPortId,
+                style: { fontSize: 11 },
+            },
+            {
+                id: "".concat(prefix, "-internal-port-label"),
+                content: 'internal → square',
+                position: { x: 12, y: -18 },
+                ownerId: internalPortId,
+                style: { fontSize: 11 },
+            },
+            {
+                id: "".concat(prefix, "-peer-label"),
+                content: 'External peer',
+                position: { x: 12, y: -18 },
+                ownerId: peerId,
+                style: { fontSize: 12 },
+            },
+            {
+                id: "".concat(prefix, "-child-label"),
+                content: 'Child host for internal link',
+                position: { x: 8, y: -18 },
+                ownerId: childId,
+                style: { fontSize: 11 },
+            },
+        ],
+    };
+};
+var createAsymmetricPortMultiAnchorState = function (showLegacyComparison, variantId) {
+    if (showLegacyComparison === void 0) { showLegacyComparison = true; }
+    if (variantId === void 0) { variantId = asymmetricPortDefaultVariantId; }
+    var shapeVariant = resolveAsymmetricPortShapeVariant(variantId);
+    var primaryRow = createComparisonRow({ prefix: 'multi-anchor', top: 92, mode: 'multi-anchor', shapeVariant: shapeVariant });
+    var legacyRow = showLegacyComparison
+        ? createComparisonRow({ prefix: 'legacy', top: 356, mode: 'legacy', shapeVariant: shapeVariant })
+        : { elements: [], ports: [], links: [], texts: [] };
+    return {
+        elements: __spreadArray(__spreadArray([], primaryRow.elements, true), legacyRow.elements, true),
+        ports: __spreadArray(__spreadArray([], primaryRow.ports, true), legacyRow.ports, true),
+        links: __spreadArray(__spreadArray([], primaryRow.links, true), legacyRow.links, true),
+        texts: __spreadArray(__spreadArray([
+            {
+                id: 'multi-anchor-legend',
+                content: 'Legend: square = placement/rotation pivot, line = glyph body, circle = external attach endpoint. Internal link uses the square anchor.',
+                position: { x: 72, y: 28 },
+                style: { fontSize: 13, fill: '#1f2937' },
+            }
+        ], primaryRow.texts, true), legacyRow.texts, true),
+    };
+};
+var asymmetricPortMultiAnchorDemoConfig = {
+    id: asymmetricPortMultiAnchorDemoId,
+    title: 'Asymmetric Multi-Anchor Ports',
+    description: 'Compares legacy/default origin-based svg glyph behavior with explicit placement, pivot, and external/internal link attach points.',
+    createState: function () { return createAsymmetricPortMultiAnchorState(true, asymmetricPortDefaultVariantId); },
+    elementShapes: baseElementShapes,
+    portShapes: basePortShapes,
+    defaultElementShapeId: 'default',
+    defaultPortShapeId: 'port-circle',
+    actions: [],
+};
+
 var createPortConstraintState = function () { return ({
     elements: [
         {
@@ -1657,6 +1971,213 @@ var portConstraintsDemoConfig = ({
     ],
 });
 
+var createPortPositionLimitsState = function () { return ({
+    elements: [
+        {
+            id: 'limit-left-host',
+            position: { x: 60, y: 120 },
+            size: { width: 220, height: 140 },
+            shapeId: 'panel',
+            portMovement: {
+                moveMode: 'inside',
+                positionLimits: {
+                    x: { max: 70 },
+                },
+            },
+        },
+        {
+            id: 'limit-right-host',
+            position: { x: 330, y: 120 },
+            size: { width: 220, height: 140 },
+            shapeId: 'panel',
+            portMovement: {
+                moveMode: 'inside',
+                positionLimits: {
+                    x: { min: 150 },
+                },
+            },
+        },
+        {
+            id: 'limit-top-host',
+            position: { x: 600, y: 120 },
+            size: { width: 220, height: 140 },
+            shapeId: 'panel',
+            portMovement: {
+                moveMode: 'inside',
+                positionLimits: {
+                    y: { max: 45 },
+                },
+            },
+        },
+        {
+            id: 'limit-bottom-host',
+            position: { x: 870, y: 120 },
+            size: { width: 220, height: 140 },
+            shapeId: 'panel',
+            portMovement: {
+                moveMode: 'inside',
+                positionLimits: {
+                    y: { min: 90 },
+                },
+            },
+        },
+        {
+            id: 'border-left-host',
+            position: { x: 200, y: 350 },
+            size: { width: 220, height: 140 },
+            shapeId: 'panel',
+            portMovement: {
+                moveMode: 'border',
+                positionLimits: {
+                    x: { max: 80 },
+                },
+            },
+        },
+        {
+            id: 'border-right-host',
+            position: { x: 500, y: 350 },
+            size: { width: 220, height: 140 },
+            shapeId: 'panel',
+            portMovement: {
+                moveMode: 'border',
+                positionLimits: {
+                    x: { min: 140 },
+                },
+            },
+        },
+        {
+            id: 'default-normalize-host',
+            position: { x: 800, y: 350 },
+            size: { width: 220, height: 140 },
+            shapeId: 'panel',
+            portMovement: {
+                moveMode: 'inside',
+                positionLimits: {
+                    x: { max: 60 },
+                    y: { max: 60 },
+                },
+            },
+        },
+    ],
+    ports: [
+        { id: 'limit-left-port', elementId: 'limit-left-host', position: { x: 40, y: 70 }, shapeId: 'port-circle', anchorCenter: true },
+        { id: 'limit-right-port', elementId: 'limit-right-host', position: { x: 180, y: 70 }, shapeId: 'port-circle', anchorCenter: true },
+        { id: 'limit-top-port', elementId: 'limit-top-host', position: { x: 110, y: 30 }, shapeId: 'port-circle', anchorCenter: true },
+        { id: 'limit-bottom-port', elementId: 'limit-bottom-host', position: { x: 110, y: 110 }, shapeId: 'port-circle', anchorCenter: true },
+        { id: 'border-left-port', elementId: 'border-left-host', position: { x: 80, y: 0 }, shapeId: 'port-circle', anchorCenter: true },
+        { id: 'border-right-port', elementId: 'border-right-host', position: { x: 140, y: 140 }, shapeId: 'port-circle', anchorCenter: true },
+        { id: 'reload-default-port', elementId: 'default-normalize-host', position: { x: 190, y: 130 }, shapeId: 'port-circle', anchorCenter: true },
+    ],
+    links: [],
+    texts: [
+        {
+            id: 'limit-intro',
+            content: 'Top row: threshold/limit hosts. Bottom row: border+limits hosts and default-position normalization checks for add/load flows.',
+            position: { x: 60, y: 40 },
+        },
+        { id: 'limit-group-title', content: 'Threshold/limit-focused hosts', position: { x: 60, y: 85 } },
+        { id: 'border-group-title', content: 'Border+limits + default-position normalization', position: { x: 200, y: 315 } },
+        { id: 'limit-left-title', content: 'x.max = 70 (left of X)', position: { x: 8, y: -20 }, ownerId: 'limit-left-host' },
+        { id: 'limit-right-title', content: 'x.min = 150 (right of X)', position: { x: 8, y: -20 }, ownerId: 'limit-right-host' },
+        { id: 'limit-top-title', content: 'y.max = 45 (above Y)', position: { x: 8, y: -20 }, ownerId: 'limit-top-host' },
+        { id: 'limit-bottom-title', content: 'y.min = 90 (below Y)', position: { x: 8, y: -20 }, ownerId: 'limit-bottom-host' },
+        { id: 'border-left-title', content: 'moveMode=border + x.max = 80', position: { x: 8, y: -20 }, ownerId: 'border-left-host' },
+        { id: 'border-right-title', content: 'moveMode=border + x.min = 140', position: { x: 8, y: -20 }, ownerId: 'border-right-host' },
+        { id: 'default-normalize-title', content: 'default normalization host x/y.max = 60', position: { x: 8, y: -20 }, ownerId: 'default-normalize-host' },
+        { id: 'limit-left-status', content: 'local: x=40, y=70', position: { x: 8, y: 110 }, ownerId: 'limit-left-host' },
+        { id: 'limit-right-status', content: 'local: x=180, y=70', position: { x: 8, y: 110 }, ownerId: 'limit-right-host' },
+        { id: 'limit-top-status', content: 'local: x=110, y=30', position: { x: 8, y: 110 }, ownerId: 'limit-top-host' },
+        { id: 'limit-bottom-status', content: 'local: x=110, y=110', position: { x: 8, y: 110 }, ownerId: 'limit-bottom-host' },
+        { id: 'border-left-status', content: 'local: x=80, y=0', position: { x: 8, y: 110 }, ownerId: 'border-left-host' },
+        { id: 'border-right-status', content: 'local: x=140, y=140', position: { x: 8, y: 110 }, ownerId: 'border-right-host' },
+        {
+            id: 'add-default-status',
+            content: 'add invalid default: not executed',
+            position: { x: 8, y: 88 },
+            ownerId: 'default-normalize-host',
+        },
+        {
+            id: 'reload-default-status',
+            content: 'reload invalid default: click "Read reload-normalized port"',
+            position: { x: 8, y: 106 },
+            ownerId: 'default-normalize-host',
+        },
+    ],
+}); };
+var portPositionLimitsDemoConfig = {
+    id: 'port-position-limits',
+    title: 'Port Position Limits',
+    description: 'Unified restriction demo: threshold limits, border+limits, and add/load default-position normalization.',
+    createState: createPortPositionLimitsState,
+    elementShapes: baseElementShapes,
+    portShapes: basePortShapes,
+    defaultElementShapeId: 'default',
+    defaultPortShapeId: 'port-circle',
+    actions: [
+        {
+            id: 'force-limit-clamp',
+            label: 'Force out-of-range moves',
+            run: function (editor) {
+                editor.movePortTo('limit-left-port', 1000, 1000);
+                editor.movePortTo('limit-right-port', -1000, 1000);
+                editor.movePortTo('limit-top-port', 1000, 1000);
+                editor.movePortTo('limit-bottom-port', 1000, -1000);
+                editor.movePortTo('border-left-port', 1000, 1000);
+                editor.movePortTo('border-right-port', -1000, -1000);
+                var state = editor.getState();
+                var left = state.ports.find(function (item) { return item.id === 'limit-left-port'; });
+                var right = state.ports.find(function (item) { return item.id === 'limit-right-port'; });
+                var top = state.ports.find(function (item) { return item.id === 'limit-top-port'; });
+                var bottom = state.ports.find(function (item) { return item.id === 'limit-bottom-port'; });
+                var borderLeft = state.ports.find(function (item) { return item.id === 'border-left-port'; });
+                var borderRight = state.ports.find(function (item) { return item.id === 'border-right-port'; });
+                if (left)
+                    editor.updateText('limit-left-status', "local: x=".concat(left.position.x, ", y=").concat(left.position.y));
+                if (right)
+                    editor.updateText('limit-right-status', "local: x=".concat(right.position.x, ", y=").concat(right.position.y));
+                if (top)
+                    editor.updateText('limit-top-status', "local: x=".concat(top.position.x, ", y=").concat(top.position.y));
+                if (bottom)
+                    editor.updateText('limit-bottom-status', "local: x=".concat(bottom.position.x, ", y=").concat(bottom.position.y));
+                if (borderLeft)
+                    editor.updateText('border-left-status', "local: x=".concat(borderLeft.position.x, ", y=").concat(borderLeft.position.y));
+                if (borderRight)
+                    editor.updateText('border-right-status', "local: x=".concat(borderRight.position.x, ", y=").concat(borderRight.position.y));
+            },
+        },
+        {
+            id: 'add-invalid-default-port',
+            label: 'Add invalid default port',
+            run: function (editor) {
+                editor.removePort('added-default-port');
+                editor.addPortToElement('default-normalize-host', {
+                    id: 'added-default-port',
+                    elementId: 'default-normalize-host',
+                    position: { x: 180, y: 120 },
+                    shapeId: 'port-circle',
+                    anchorCenter: true,
+                });
+                var state = editor.getState();
+                var added = state.ports.find(function (item) { return item.id === 'added-default-port'; });
+                if (added) {
+                    editor.updateText('add-default-status', "add invalid default: local x=".concat(added.position.x, ", y=").concat(added.position.y));
+                }
+            },
+        },
+        {
+            id: 'read-reload-normalized-port',
+            label: 'Read reload-normalized port',
+            run: function (editor) {
+                var state = editor.getState();
+                var reloaded = state.ports.find(function (item) { return item.id === 'reload-default-port'; });
+                if (reloaded) {
+                    editor.updateText('reload-default-status', "reload invalid default: local x=".concat(reloaded.position.x, ", y=").concat(reloaded.position.y));
+                }
+            },
+        },
+    ],
+};
+
 var createPortBorderState = function () { return ({
     elements: [
         {
@@ -1811,6 +2332,104 @@ var childConstraintsDemoConfig = ({
     ],
 });
 
+var createLabelStyleState = function () { return ({
+    elements: [
+        {
+            id: 'label-center-host',
+            position: { x: 80, y: 160 },
+            size: { width: 260, height: 120 },
+            shapeId: 'panel',
+        },
+        {
+            id: 'label-background-host',
+            position: { x: 390, y: 160 },
+            size: { width: 260, height: 120 },
+            shapeId: 'panel',
+            style: {
+                cornerRadius: 16,
+                stroke: '#1f4d99',
+                strokeWidth: 2,
+                fill: '#edf4ff',
+            },
+        },
+        {
+            id: 'label-baseline-host',
+            position: { x: 700, y: 160 },
+            size: { width: 260, height: 120 },
+            shapeId: 'panel',
+        },
+    ],
+    ports: [],
+    links: [],
+    texts: [
+        {
+            id: 'label-style-intro',
+            content: 'Compare center alignment, background fill, and baseline label styling. Resize hosts to verify visual stability.',
+            position: { x: 80, y: 80 },
+        },
+        {
+            id: 'label-center-text',
+            content: 'Center aligned owner-width label',
+            ownerId: 'label-center-host',
+            position: { x: 0, y: 44 },
+            layout: { boundsMode: 'owner-width', wrap: 'none', overflow: 'ellipsis-end', padding: 8 },
+            style: { align: 'center', fill: '#16324f', fontSize: 15 },
+        },
+        {
+            id: 'label-background-text',
+            content: 'Top Header Label',
+            ownerId: 'label-background-host',
+            position: { x: 0, y: 0 },
+            layout: { boundsMode: 'owner-width', wrap: 'none', overflow: 'ellipsis-end', padding: 0 },
+            style: {
+                align: 'center',
+                backgroundFill: '#cfe2ff',
+                backgroundStroke: '#1f4d99',
+                backgroundStrokeWidth: 1,
+                fill: '#16324f',
+                fontSize: 15,
+                padding: 8,
+            },
+        },
+        {
+            id: 'label-baseline-text',
+            content: 'Baseline label (no style keys)',
+            ownerId: 'label-baseline-host',
+            position: { x: 12, y: 44 },
+            layout: { boundsMode: 'owner-width', wrap: 'none', overflow: 'ellipsis-end', padding: 8 },
+        },
+    ],
+}); };
+var labelStyleDemoConfig = {
+    id: 'label-style',
+    title: 'Label Style',
+    description: 'Center text alignment and backgroundFill styling for labels.',
+    createState: createLabelStyleState,
+    elementShapes: baseElementShapes,
+    portShapes: basePortShapes,
+    defaultElementShapeId: 'default',
+    defaultPortShapeId: 'port-circle',
+    actions: [
+        {
+            id: 'resize-label-hosts',
+            label: 'Resize hosts (style verification)',
+            run: function (editor, state) {
+                var _a, _b;
+                var expanded = ((_b = (_a = state.elements.find(function (item) { return item.id === 'label-center-host'; })) === null || _a === void 0 ? void 0 : _a.size.width) !== null && _b !== void 0 ? _b : 0) > 260;
+                if (expanded) {
+                    editor.resizeElement('label-center-host', 260, 120);
+                    editor.resizeElement('label-background-host', 260, 120);
+                    editor.resizeElement('label-baseline-host', 260, 120);
+                    return;
+                }
+                editor.resizeElement('label-center-host', 320, 140);
+                editor.resizeElement('label-background-host', 320, 140);
+                editor.resizeElement('label-baseline-host', 320, 140);
+            },
+        },
+    ],
+};
+
 var createGridOverlayState = function () { return ({
     elements: [
         {
@@ -1912,141 +2531,174 @@ var routingDemoConfig = ({
 
 var obstacleRoutingLinks = [
     {
-        id: 'block-link',
-        sourcePortId: 'block-source-port',
-        targetPortId: 'block-target-port',
+        id: 'sibling-external-link',
+        sourcePortId: 'sibling-a-port',
+        targetPortId: 'sibling-b-port',
         points: [],
         routing: 'auto',
     },
     {
-        id: 'shared-sibling-link',
-        sourcePortId: 'shared-child-a-port',
-        targetPortId: 'shared-child-b-port',
+        id: 'parent-to-child-link',
+        sourcePortId: 'attach-parent-port',
+        targetPortId: 'attach-child-a-port',
         points: [],
         routing: 'auto',
     },
     {
-        id: 'parent-child-link',
-        sourcePortId: 'parent-host-port',
-        targetPortId: 'edge-child-port',
+        id: 'child-to-parent-link',
+        sourcePortId: 'attach-child-b-port',
+        targetPortId: 'attach-parent-port',
         points: [],
         routing: 'auto',
     },
     {
-        id: 'grandchild-link',
-        sourcePortId: 'grandchild-a-port',
-        targetPortId: 'grandchild-b-port',
+        id: 'child-to-child-link',
+        sourcePortId: 'attach-child-a-port',
+        targetPortId: 'attach-child-b-port',
         points: [],
         routing: 'auto',
     },
 ];
+var obstacleRoutingShapes = __spreadArray(__spreadArray([], baseElementShapes, true), [
+    {
+        id: 'routing-ellipse',
+        kind: 'ellipse',
+        style: {
+            fill: '#e8f8ff',
+            stroke: '#1e6b8f',
+            strokeWidth: 2,
+        },
+    },
+], false);
 var createObstacleRoutingState = function () { return ({
     elements: [
         {
-            id: 'block-source',
-            position: { x: 60, y: 40 },
-            size: { width: 140, height: 90 },
-            shapeId: 'default',
+            id: 'sibling-parent',
+            position: { x: 40, y: 90 },
+            size: { width: 540, height: 250 },
+            shapeId: 'panel',
+            style: { fill: '#fafafa' },
         },
         {
-            id: 'block-target',
-            position: { x: 380, y: 40 },
-            size: { width: 140, height: 90 },
-            shapeId: 'panel',
+            id: 'sibling-a',
+            position: { x: 70, y: 75 },
+            size: { width: 140, height: 100 },
+            shapeId: 'routing-ellipse',
+            parentId: 'sibling-parent',
+            portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
         },
         {
-            id: 'block-obstacle',
-            position: { x: 250, y: 30 },
-            size: { width: 80, height: 110 },
-            shapeId: 'default',
+            id: 'sibling-b',
+            position: { x: 310, y: 75 },
+            size: { width: 140, height: 100 },
+            shapeId: 'routing-ellipse',
+            parentId: 'sibling-parent',
+            portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
         },
         {
-            id: 'shared-parent',
-            position: { x: 40, y: 180 },
-            size: { width: 420, height: 220 },
-            shapeId: 'panel',
-            style: { fill: '#fafafa' },
+            id: 'attach-parent',
+            position: { x: 620, y: 90 },
+            size: { width: 360, height: 250 },
+            shapeId: 'routing-ellipse',
+            portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
         },
         {
-            id: 'shared-child-a',
-            position: { x: 40, y: 40 },
-            size: { width: 140, height: 90 },
-            shapeId: 'default',
-            parentId: 'shared-parent',
+            id: 'attach-child',
+            position: { x: 40, y: 45 },
+            size: { width: 140, height: 100 },
+            shapeId: 'routing-ellipse',
+            parentId: 'attach-parent',
+            portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
         },
         {
-            id: 'shared-child-b',
-            position: { x: 220, y: 40 },
-            size: { width: 140, height: 90 },
-            shapeId: 'default',
-            parentId: 'shared-parent',
+            id: 'attach-child-b',
+            position: { x: 190, y: 120 },
+            size: { width: 140, height: 100 },
+            shapeId: 'routing-ellipse',
+            parentId: 'attach-parent',
+            portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
         },
+    ],
+    ports: [
         {
-            id: 'parent-host',
-            position: { x: 500, y: 180 },
-            size: { width: 320, height: 220 },
-            shapeId: 'panel',
-            style: { fill: '#fafafa' },
+            id: 'sibling-a-port',
+            elementId: 'sibling-a',
+            position: { x: 0, y: 50 },
+            shapeId: 'port-dark',
+            anchorCenter: true,
+            currentAnchorId: 'left',
         },
         {
-            id: 'edge-child',
-            position: { x: 40, y: 60 },
-            size: { width: 160, height: 90 },
-            shapeId: 'default',
-            parentId: 'parent-host',
+            id: 'sibling-b-port',
+            elementId: 'sibling-b',
+            position: { x: 140, y: 50 },
+            shapeId: 'port-dark',
+            anchorCenter: true,
+            currentAnchorId: 'right',
         },
         {
-            id: 'grandparent',
-            position: { x: 40, y: 380 },
-            size: { width: 780, height: 160 },
-            shapeId: 'panel',
-            style: { fill: '#fafafa' },
+            id: 'attach-parent-port',
+            elementId: 'attach-parent',
+            position: { x: 20, y: 125 },
+            shapeId: 'port-circle',
+            anchorCenter: true,
+            currentAnchorId: 'left',
+            externalLinkAttachPoint: { x: -16, y: 0 },
+            internalLinkAttachPoint: { x: 16, y: 0 },
         },
         {
-            id: 'mid-parent-a',
+            id: 'attach-child-a-port',
+            elementId: 'attach-child',
+            position: { x: 140, y: 50 },
+            shapeId: 'port-circle',
+            anchorCenter: true,
+            currentAnchorId: 'right',
+            externalLinkAttachPoint: { x: 12, y: 0 },
+            internalLinkAttachPoint: { x: -12, y: 0 },
+        },
+        {
+            id: 'attach-child-b-port',
+            elementId: 'attach-child-b',
+            position: { x: 0, y: 50 },
+            shapeId: 'port-circle',
+            anchorCenter: true,
+            currentAnchorId: 'left',
+            externalLinkAttachPoint: { x: 12, y: 0 },
+            internalLinkAttachPoint: { x: -12, y: 0 },
+        },
+    ],
+    links: obstacleRoutingLinks,
+    texts: [
+        {
+            id: 'obstacle-routing-instructions',
+            content: 'Two checks in one canvas: (A) sibling external-anchor link avoids both child interiors; (B) parent/children hierarchy resolves internal vs external attach points per endpoint direction.',
             position: { x: 40, y: 30 },
-            size: { width: 300, height: 100 },
-            shapeId: 'panel',
-            parentId: 'grandparent',
         },
         {
-            id: 'mid-parent-b',
-            position: { x: 420, y: 30 },
-            size: { width: 300, height: 100 },
-            shapeId: 'panel',
-            parentId: 'grandparent',
+            id: 'sibling-group-label',
+            content: 'Scenario A: Same-parent children, external-facing anchors (left/right)',
+            position: { x: 52, y: 66 },
         },
         {
-            id: 'grandchild-a',
-            position: { x: 40, y: 20 },
-            size: { width: 120, height: 60 },
-            shapeId: 'default',
-            parentId: 'mid-parent-a',
+            id: 'attach-group-label',
+            content: 'Scenario B: Directional attach semantics (parent internal, child/sibling external)',
+            position: { x: 620, y: 66 },
         },
         {
-            id: 'grandchild-b',
-            position: { x: 40, y: 20 },
-            size: { width: 120, height: 60 },
-            shapeId: 'default',
-            parentId: 'mid-parent-b',
+            id: 'attach-link-parent-child-label',
+            content: 'parent->child-A: parent endpoint INTERNAL, child endpoint EXTERNAL',
+            position: { x: 620, y: 350 },
+        },
+        {
+            id: 'attach-link-child-parent-label',
+            content: 'child-B->parent: child endpoint EXTERNAL, parent endpoint INTERNAL',
+            position: { x: 620, y: 372 },
+        },
+        {
+            id: 'attach-link-child-child-label',
+            content: 'child-A->child-B: sibling endpoints EXTERNAL on both ends',
+            position: { x: 620, y: 394 },
         },
-    ],
-    ports: [
-        { id: 'block-source-port', elementId: 'block-source', position: { x: 70, y: 45 }, shapeId: 'port-circle' },
-        { id: 'block-target-port', elementId: 'block-target', position: { x: 70, y: 45 }, shapeId: 'port-circle' },
-        { id: 'shared-child-a-port', elementId: 'shared-child-a', position: { x: 70, y: 45 }, shapeId: 'port-circle' },
-        { id: 'shared-child-b-port', elementId: 'shared-child-b', position: { x: 70, y: 45 }, shapeId: 'port-circle' },
-        { id: 'parent-host-port', elementId: 'parent-host', position: { x: 250, y: 110 }, shapeId: 'port-circle' },
-        { id: 'edge-child-port', elementId: 'edge-child', position: { x: 0, y: 45 }, shapeId: 'port-circle' },
-        { id: 'grandchild-a-port', elementId: 'grandchild-a', position: { x: 60, y: 30 }, shapeId: 'port-circle' },
-        { id: 'grandchild-b-port', elementId: 'grandchild-b', position: { x: 60, y: 30 }, shapeId: 'port-circle' },
-    ],
-    links: obstacleRoutingLinks,
-    texts: [
-        { id: 'block-label', content: 'Blocking obstacle', position: { x: 60, y: 16 } },
-        { id: 'shared-label', content: 'Shared parent (siblings)', position: { x: 40, y: 158 } },
-        { id: 'parent-label', content: 'Parent-child (stay inside)', position: { x: 500, y: 158 } },
-        { id: 'grand-label', content: 'Grandchildren (shared ancestors)', position: { x: 40, y: 358 } },
     ],
 }); };
 var addLinksAction = {
@@ -2068,17 +2720,17 @@ var rerouteAllAction = {
         editor.rerouteAllLinks();
     },
 };
-var obstacleRoutingDemoConfig = ({
+var obstacleRoutingDemoConfig = {
     id: 'obstacle-routing',
     title: 'Obstacle Routing',
-    description: 'Auto routing avoids obstacles and respects ancestor/edge rules.',
+    description: 'Nested multi-anchor checks: sibling interior-avoidance + directional internal/external parent-child attach semantics.',
     createState: createObstacleRoutingState,
-    elementShapes: baseElementShapes,
+    elementShapes: obstacleRoutingShapes,
     portShapes: basePortShapes,
     defaultElementShapeId: 'default',
     defaultPortShapeId: 'port-circle',
     actions: [addLinksAction, rerouteAllAction],
-});
+};
 
 var createLinkBendHandlesState = function () { return ({
     elements: [
@@ -2436,7 +3088,7 @@ var shapeHoverDemoIds = {
     circle: 'hover-circle-host',
     noopRect: 'hover-noop-rect',
 };
-var elementShapes = __spreadArray(__spreadArray([], baseElementShapes, true), [
+var elementShapes$1 = __spreadArray(__spreadArray([], baseElementShapes, true), [
     {
         id: 'hover-diamond-shape',
         kind: 'diamond',
@@ -2570,7 +3222,7 @@ var shapeHoverControlsDemoConfig = {
     title: 'Shape Hover Controls',
     description: 'Host-configured edge/midpoint/vertex plus ellipse-midpoint controls with trigger modes, selectors, click actions, and drag event logging.',
     createState: createShapeHoverControlsState,
-    elementShapes: elementShapes,
+    elementShapes: elementShapes$1,
     portShapes: basePortShapes,
     defaultElementShapeId: 'default',
     defaultPortShapeId: 'port-circle',
@@ -2592,22 +3244,168 @@ var shapeHoverControlsDemoConfig = {
     ],
 };
 
+var vertexSessionDemoIds = {
+    source: 'vertex-session-source',
+    portTarget: 'vertex-session-port-target',
+    elementTarget: 'vertex-session-element-target',
+    nativeSource: 'vertex-session-native-source',
+    nativeTarget: 'vertex-session-native-target',
+    existingTargetPort: 'vertex-session-existing-target-port',
+    nativeSourcePort: 'vertex-session-native-source-port',
+    nativeTargetPort: 'vertex-session-native-target-port',
+};
+var elementShapes = __spreadArray(__spreadArray([], baseElementShapes, true), [
+    {
+        id: 'vertex-session-diamond',
+        kind: 'diamond',
+        style: {
+            fill: '#f5edff',
+            stroke: '#6a3da3',
+            strokeWidth: 2,
+        },
+    },
+    {
+        id: 'vertex-session-target',
+        kind: 'rect',
+        style: {
+            cornerRadius: 10,
+            fill: '#edf7ff',
+            stroke: '#2f6d97',
+            strokeWidth: 2,
+        },
+    },
+], false);
+var createVertexSessionState = function () { return ({
+    elements: [
+        {
+            id: vertexSessionDemoIds.source,
+            position: { x: 80, y: 120 },
+            size: { width: 170, height: 130 },
+            shapeId: 'vertex-session-diamond',
+        },
+        {
+            id: vertexSessionDemoIds.portTarget,
+            position: { x: 420, y: 110 },
+            size: { width: 210, height: 140 },
+            shapeId: 'vertex-session-target',
+        },
+        {
+            id: vertexSessionDemoIds.elementTarget,
+            position: { x: 720, y: 120 },
+            size: { width: 220, height: 160 },
+            shapeId: 'vertex-session-target',
+        },
+        {
+            id: vertexSessionDemoIds.nativeSource,
+            position: { x: 200, y: 360 },
+            size: { width: 180, height: 120 },
+            shapeId: 'default',
+        },
+        {
+            id: vertexSessionDemoIds.nativeTarget,
+            position: { x: 560, y: 360 },
+            size: { width: 180, height: 120 },
+            shapeId: 'default',
+        },
+    ],
+    ports: [
+        {
+            id: vertexSessionDemoIds.existingTargetPort,
+            elementId: vertexSessionDemoIds.portTarget,
+            position: { x: 0, y: 70 },
+            shapeId: 'port-circle',
+            moveMode: 'border',
+            anchorCenter: true,
+            orientToHostBorder: true,
+        },
+        {
+            id: vertexSessionDemoIds.nativeSourcePort,
+            elementId: vertexSessionDemoIds.nativeSource,
+            position: { x: 180, y: 60 },
+            shapeId: 'port-circle',
+            moveMode: 'border',
+            anchorCenter: true,
+            orientToHostBorder: true,
+        },
+        {
+            id: vertexSessionDemoIds.nativeTargetPort,
+            elementId: vertexSessionDemoIds.nativeTarget,
+            position: { x: 0, y: 60 },
+            shapeId: 'port-circle',
+            moveMode: 'border',
+            anchorCenter: true,
+            orientToHostBorder: true,
+        },
+    ],
+    links: [],
+    texts: [
+        {
+            id: 'vertex-session-source-label',
+            ownerId: vertexSessionDemoIds.source,
+            content: 'Drag the vertex control to start programmatic link session',
+            position: { x: 8, y: -18 },
+            style: { fontSize: 13, fontFamily: 'sans-serif' },
+        },
+        {
+            id: 'vertex-session-target-port-label',
+            ownerId: vertexSessionDemoIds.portTarget,
+            content: 'Scenario 1 target: existing port',
+            position: { x: 8, y: -16 },
+            style: { fontSize: 13, fontFamily: 'sans-serif' },
+        },
+        {
+            id: 'vertex-session-target-element-label',
+            ownerId: vertexSessionDemoIds.elementTarget,
+            content: 'Scenario 2 target: element body (auto create destination port)',
+            position: { x: 8, y: -16 },
+            style: { fontSize: 13, fontFamily: 'sans-serif' },
+        },
+        {
+            id: 'vertex-session-native-label',
+            ownerId: vertexSessionDemoIds.nativeSource,
+            content: 'Scenario 5 baseline: native port drag still works',
+            position: { x: 8, y: -16 },
+            style: { fontSize: 12, fontFamily: 'sans-serif' },
+        },
+    ],
+}); };
+var vertexControlLinkSessionDemoConfig = {
+    id: 'vertex-control-link-session',
+    title: 'Vertex Control Link Session',
+    description: 'Programmatic link lifecycle driven by vertex-control drag: start, preview update, complete-to-port, complete-to-element, and cancel paths with event log verification.',
+    createState: createVertexSessionState,
+    elementShapes: elementShapes,
+    portShapes: basePortShapes,
+    defaultElementShapeId: 'default',
+    defaultPortShapeId: 'port-circle',
+    actions: [],
+};
+
 var DisplayBoxControls = function (_a) {
-    var actions = _a.actions, snapEnabled = _a.snapEnabled, selectedLinkRouting = _a.selectedLinkRouting, canToggleLinkRouting = _a.canToggleLinkRouting, onReload = _a.onReload, onZoomIn = _a.onZoomIn, onZoomOut = _a.onZoomOut, onResetViewport = _a.onResetViewport, onToggleSnap = _a.onToggleSnap, onManualRender = _a.onManualRender, onToggleLinkRouting = _a.onToggleLinkRouting, onAction = _a.onAction;
-    return (React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 12 } },
-        React.createElement("button", { onClick: onReload, style: { padding: '8px 12px' } }, "Reload Demo State"),
-        React.createElement("button", { onClick: onZoomIn, style: { padding: '8px 12px' } }, "Zoom In"),
-        React.createElement("button", { onClick: onZoomOut, style: { padding: '8px 12px' } }, "Zoom Out"),
-        React.createElement("button", { onClick: onResetViewport, style: { padding: '8px 12px' } }, "Reset Viewport"),
-        React.createElement("button", { onClick: onToggleSnap, style: { padding: '8px 12px' } },
-            "Snap: ",
-            snapEnabled ? 'On' : 'Off'),
-        React.createElement("button", { onClick: onManualRender, style: { padding: '8px 12px' } }, "Manual Render"),
-        React.createElement("button", { onClick: onToggleLinkRouting, style: { padding: '8px 12px' }, disabled: !canToggleLinkRouting },
-            "Toggle Link Routing (",
-            selectedLinkRouting,
-            ")"),
-        actions.map(function (action) { return (React.createElement("button", { key: action.id, onClick: function () { return onAction(action); }, style: { padding: '8px 12px' } }, action.label)); })));
+    var actions = _a.actions, snapEnabled = _a.snapEnabled, selectedLinkRouting = _a.selectedLinkRouting, canToggleLinkRouting = _a.canToggleLinkRouting, onReload = _a.onReload, onZoomIn = _a.onZoomIn, onZoomOut = _a.onZoomOut, onResetViewport = _a.onResetViewport, onToggleSnap = _a.onToggleSnap, onManualRender = _a.onManualRender, onToggleLinkRouting = _a.onToggleLinkRouting, onAction = _a.onAction, onExportImage = _a.onExportImage, onClearExportPreview = _a.onClearExportPreview, exportPreviewDataUrl = _a.exportPreviewDataUrl, exportError = _a.exportError;
+    return (React.createElement("div", { style: { marginBottom: 12 } },
+        React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 8 } },
+            React.createElement("button", { onClick: onReload, style: { padding: '8px 12px' } }, "Reload Demo State"),
+            React.createElement("button", { onClick: onZoomIn, style: { padding: '8px 12px' } }, "Zoom In"),
+            React.createElement("button", { onClick: onZoomOut, style: { padding: '8px 12px' } }, "Zoom Out"),
+            React.createElement("button", { onClick: onResetViewport, style: { padding: '8px 12px' } }, "Reset Viewport"),
+            React.createElement("button", { onClick: onToggleSnap, style: { padding: '8px 12px' } },
+                "Snap: ",
+                snapEnabled ? 'On' : 'Off'),
+            React.createElement("button", { onClick: onManualRender, style: { padding: '8px 12px' } }, "Manual Render"),
+            React.createElement("button", { onClick: onToggleLinkRouting, style: { padding: '8px 12px' }, disabled: !canToggleLinkRouting },
+                "Toggle Link Routing (",
+                selectedLinkRouting,
+                ")"),
+            onExportImage ? (React.createElement("button", { onClick: onExportImage, style: { padding: '8px 12px' } }, "Export PNG (2x)")) : null,
+            onClearExportPreview && (exportPreviewDataUrl || exportError) ? (React.createElement("button", { onClick: onClearExportPreview, style: { padding: '8px 12px' } }, "Clear Export")) : null,
+            actions.map(function (action) { return (React.createElement("button", { key: action.id, onClick: function () { return onAction(action); }, style: { padding: '8px 12px' } }, action.label)); })),
+        exportError ? (React.createElement("div", { style: { marginTop: 8, color: '#a10000', fontSize: 12 } },
+            "Export failed: ",
+            exportError)) : null,
+        exportPreviewDataUrl ? (React.createElement("div", { style: { marginTop: 10 } },
+            React.createElement("div", { style: { fontSize: 12, color: '#444', marginBottom: 6 } }, "Latest export preview:"),
+            React.createElement("img", { src: exportPreviewDataUrl, alt: "Exported diagram preview", style: { maxWidth: 320, width: '100%', height: 'auto', border: '1px solid #d0d0d0', borderRadius: 6 } }))) : null));
 };
 
 var DisplayBoxStage = function (_a) {
@@ -2626,6 +3424,8 @@ var useDemoControls = function (_a) {
     }, [diagramState, selection]);
     var selectedLinkRouting = (_b = selectedLink === null || selectedLink === void 0 ? void 0 : selectedLink.routing) !== null && _b !== void 0 ? _b : 'auto';
     var canToggleLinkRouting = Boolean(selectedLink);
+    var _c = useState(null), exportPreviewDataUrl = _c[0], setExportPreviewDataUrl = _c[1];
+    var _d = useState(null), exportError = _d[0], setExportError = _d[1];
     var handleAction = useCallback(function (action) {
         var editor = editorRef.current;
         if (!editor)
@@ -2669,9 +3469,29 @@ var useDemoControls = function (_a) {
         var next = selectedLinkRouting === 'auto' ? 'manual' : 'auto';
         editor.setLinkRoutingMode(selectedLink.id, next);
     }, [editorRef, selectedLink, selectedLinkRouting]);
+    var handleExportImage = useCallback(function () {
+        var editor = editorRef.current;
+        if (!editor)
+            return;
+        try {
+            var dataUrl = editor.exportImage({ mimeType: 'image/png', pixelRatio: 2 });
+            setExportPreviewDataUrl(dataUrl);
+            setExportError(null);
+        }
+        catch (error) {
+            setExportPreviewDataUrl(null);
+            setExportError(error instanceof Error ? error.message : 'Failed to export image.');
+        }
+    }, [editorRef]);
+    var handleClearExportPreview = useCallback(function () {
+        setExportPreviewDataUrl(null);
+        setExportError(null);
+    }, []);
     return {
         selectedLinkRouting: selectedLinkRouting,
         canToggleLinkRouting: canToggleLinkRouting,
+        exportPreviewDataUrl: exportPreviewDataUrl,
+        exportError: exportError,
         handleAction: handleAction,
         handleReload: handleReload,
         handleZoomIn: function () { return handleZoom(1.1); },
@@ -2680,6 +3500,8 @@ var useDemoControls = function (_a) {
         handleToggleSnap: handleToggleSnap,
         handleManualRender: handleManualRender,
         handleToggleLinkRouting: handleToggleLinkRouting,
+        handleExportImage: handleExportImage,
+        handleClearExportPreview: handleClearExportPreview,
         snapEnabled: snapEnabled,
     };
 };
@@ -2832,6 +3654,11 @@ var PortModel = /** @class */ (function () {
         this.moveMode = data.moveMode;
         this.anchorCenter = (_a = data.anchorCenter) !== null && _a !== void 0 ? _a : true;
         this.orientToHostBorder = (_b = data.orientToHostBorder) !== null && _b !== void 0 ? _b : true;
+        this.placementPoint = data.placementPoint ? __assign({}, data.placementPoint) : undefined;
+        this.linkAttachPoint = data.linkAttachPoint ? __assign({}, data.linkAttachPoint) : undefined;
+        this.externalLinkAttachPoint = data.externalLinkAttachPoint ? __assign({}, data.externalLinkAttachPoint) : undefined;
+        this.internalLinkAttachPoint = data.internalLinkAttachPoint ? __assign({}, data.internalLinkAttachPoint) : undefined;
+        this.rotationPivot = data.rotationPivot ? __assign({}, data.rotationPivot) : undefined;
         this.currentAnchorId = data.currentAnchorId;
     }
     PortModel.prototype.setPosition = function (position) {
@@ -2860,6 +3687,11 @@ var PortModel = /** @class */ (function () {
             moveMode: this.moveMode,
             anchorCenter: this.anchorCenter,
             orientToHostBorder: this.orientToHostBorder,
+            placementPoint: this.placementPoint ? __assign({}, this.placementPoint) : undefined,
+            linkAttachPoint: this.linkAttachPoint ? __assign({}, this.linkAttachPoint) : undefined,
+            externalLinkAttachPoint: this.externalLinkAttachPoint ? __assign({}, this.externalLinkAttachPoint) : undefined,
+            internalLinkAttachPoint: this.internalLinkAttachPoint ? __assign({}, this.internalLinkAttachPoint) : undefined,
+            rotationPivot: this.rotationPivot ? __assign({}, this.rotationPivot) : undefined,
             currentAnchorId: this.currentAnchorId,
         };
     };
@@ -3888,21 +4720,42 @@ var ObstacleRouter = /** @class */ (function () {
     ObstacleRouter.prototype.computeStubEndpoint = function (point, endpoint, bounds, obstacles) {
         if (!(endpoint === null || endpoint === void 0 ? void 0 : endpoint.onEdgeSide) || !endpoint.rect)
             return null;
-        var normal = this.getNormal(endpoint.onEdgeSide);
+        var outwardNormal = this.getNormal(endpoint.onEdgeSide);
+        var selectedNormal = outwardNormal;
+        var maxLength = this.computeAvailableStubLength(point, outwardNormal, bounds, obstacles, endpoint.elementId);
+        // If the outward normal is fully blocked by route bounds on the endpoint host, fall back inward
+        // to preserve a visible perpendicular stub for bounded parent-child routes.
+        if (maxLength <= this.tolerance && bounds && this.rectsEqual(bounds, endpoint.rect)) {
+            var inwardNormal = { x: -outwardNormal.x, y: -outwardNormal.y };
+            var inwardLength = this.computeAvailableStubLength(point, inwardNormal, bounds, obstacles, endpoint.elementId);
+            if (inwardLength > maxLength) {
+                selectedNormal = inwardNormal;
+                maxLength = inwardLength;
+            }
+        }
+        if (maxLength <= 0)
+            return null;
+        return {
+            x: point.x + selectedNormal.x * maxLength,
+            y: point.y + selectedNormal.y * maxLength,
+        };
+    };
+    ObstacleRouter.prototype.computeAvailableStubLength = function (point, normal, bounds, obstacles, ignoreId) {
         var maxLength = this.stubLength;
         if (bounds) {
             maxLength = Math.min(maxLength, this.distanceToBounds(point, normal, bounds));
         }
-        var obstacleLimit = this.distanceToObstacles(point, normal, obstacles, endpoint.elementId);
+        var obstacleLimit = this.distanceToObstacles(point, normal, obstacles, ignoreId);
         if (obstacleLimit !== null) {
             maxLength = Math.min(maxLength, obstacleLimit);
         }
-        if (maxLength <= 0)
-            return null;
-        return {
-            x: point.x + normal.x * maxLength,
-            y: point.y + normal.y * maxLength,
-        };
+        return maxLength;
+    };
+    ObstacleRouter.prototype.rectsEqual = function (a, b) {
+        return (Math.abs(a.x - b.x) <= this.tolerance &&
+            Math.abs(a.y - b.y) <= this.tolerance &&
+            Math.abs(a.width - b.width) <= this.tolerance &&
+            Math.abs(a.height - b.height) <= this.tolerance);
     };
     ObstacleRouter.prototype.getNormal = function (side) {
         switch (side) {
@@ -4199,7 +5052,7 @@ var borderSideToInwardRotation = function (side) {
     return 0;
 };
 
-var POSITION_EPSILON$1 = 1e-6;
+var POSITION_EPSILON$2 = 1e-6;
 var MIN_TRUNCATION_WIDTH_SAFETY_EPSILON = 0.5;
 var FONT_SIZE_TRUNCATION_SAFETY_RATIO = 1.4;
 var FONT_SIZE_TRUNCATION_SAFETY_BASE = 2;
@@ -4225,7 +5078,7 @@ var TextLayoutService = /** @class */ (function () {
         var textRenderPadding = this.resolveTextRenderPadding(text.style);
         var horizontalRenderInset = textRenderPadding * 2;
         var verticalRenderInset = textRenderPadding * 2;
-        var zeroPaddingInset = padding <= POSITION_EPSILON$1 && this.shouldTrackOwnerBoundLayout(text) ? 0.5 : 0;
+        var zeroPaddingInset = padding <= POSITION_EPSILON$2 && this.shouldTrackOwnerBoundLayout(text) ? 0.5 : 0;
         var drawableWidth = maxWidth !== undefined ? Math.max(0, maxWidth - zeroPaddingInset * 2 - horizontalRenderInset) : undefined;
         var drawableHeight = maxHeight !== undefined ? Math.max(0, maxHeight - zeroPaddingInset * 2 - verticalRenderInset) : undefined;
         var lineHeight = this.textMeasurer.measure(__assign(__assign({}, text), { content: 'M' })).height;
@@ -4542,6 +5395,7 @@ var AutoLayoutService = /** @class */ (function () {
         var childFitCrossAxis = (_e = layout.childFitCrossAxis) !== null && _e !== void 0 ? _e : 'none';
         var childFitMinSize = layout.childFitMinSize;
         var childFitMaxSize = layout.childFitMaxSize;
+        var labelReservedTopLane = this.resolveLabelReservedTopLane(parentId, layout);
         var sorted = __spreadArray([], children, true).sort(function (a, b) {
             var aPos = axis === 'horizontal' ? a.position.x : a.position.y;
             var bPos = axis === 'horizontal' ? b.position.x : b.position.y;
@@ -4552,7 +5406,7 @@ var AutoLayoutService = /** @class */ (function () {
         var gapCount = Math.max(0, sorted.length - 1);
         var calculateFittedSizes = function (parentWidth, parentHeight) {
             var availableWidth = Math.max(0, parentWidth - padding.x * 2);
-            var availableHeight = Math.max(0, parentHeight - padding.y * 2);
+            var availableHeight = Math.max(0, parentHeight - padding.y * 2 - labelReservedTopLane);
             var availableMain = axis === 'horizontal'
                 ? Math.max(0, availableWidth - gap * gapCount)
                 : Math.max(0, availableHeight - gap * gapCount);
@@ -4597,12 +5451,12 @@ var AutoLayoutService = /** @class */ (function () {
             if (axis === 'horizontal') {
                 return {
                     width: Math.max(parent.size.width, padding.x * 2 + totalWidth + gap * gapCount),
-                    height: Math.max(parent.size.height, padding.y * 2 + maxHeight),
+                    height: Math.max(parent.size.height, padding.y * 2 + labelReservedTopLane + maxHeight),
                 };
             }
             return {
                 width: Math.max(parent.size.width, padding.x * 2 + maxWidth),
-                height: Math.max(parent.size.height, padding.y * 2 + totalHeight + gap * gapCount),
+                height: Math.max(parent.size.height, padding.y * 2 + labelReservedTopLane + totalHeight + gap * gapCount),
             };
         };
         var fittedSizes = calculateFittedSizes(parent.size.width, parent.size.height);
@@ -4610,9 +5464,9 @@ var AutoLayoutService = /** @class */ (function () {
         fittedSizes = calculateFittedSizes(newParentWidth, newParentHeight);
         (_a = resolveParentSize(fittedSizes), newParentWidth = _a.width, newParentHeight = _a.height);
         var availableWidth = Math.max(0, newParentWidth - padding.x * 2);
-        var availableHeight = Math.max(0, newParentHeight - padding.y * 2);
+        var availableHeight = Math.max(0, newParentHeight - padding.y * 2 - labelReservedTopLane);
         var cursorX = padding.x;
-        var cursorY = padding.y;
+        var cursorY = padding.y + labelReservedTopLane;
         var desiredPositions = new Map();
         var desiredSizes = new Map();
         sorted.forEach(function (child, index) {
@@ -4620,10 +5474,10 @@ var AutoLayoutService = /** @class */ (function () {
             desiredSizes.set(child.id, fittedSize);
             if (axis === 'horizontal') {
                 var y = align === 'start'
-                    ? padding.y
+                    ? padding.y + labelReservedTopLane
                     : align === 'end'
                         ? newParentHeight - padding.y - fittedSize.height
-                        : padding.y + Math.max(0, (availableHeight - fittedSize.height) / 2);
+                        : padding.y + labelReservedTopLane + Math.max(0, (availableHeight - fittedSize.height) / 2);
                 desiredPositions.set(child.id, { x: cursorX, y: y });
                 cursorX += fittedSize.width + (index < sorted.length - 1 ? gap : 0);
             }
@@ -4716,6 +5570,45 @@ var AutoLayoutService = /** @class */ (function () {
             y: (_c = padding.y) !== null && _c !== void 0 ? _c : 12,
         };
     };
+    AutoLayoutService.prototype.resolveLabelReservedTopLane = function (parentId, layout) {
+        var _a, _b, _c, _d;
+        var policy = layout === null || layout === void 0 ? void 0 : layout.labelReservedSpace;
+        if (!policy)
+            return 0;
+        var mode = (_a = policy.mode) !== null && _a !== void 0 ? _a : 'none';
+        if (mode === 'none')
+            return 0;
+        if (((_b = policy.placement) !== null && _b !== void 0 ? _b : 'top') !== 'top')
+            return 0;
+        var minSize = Math.max(0, (_c = policy.minSize) !== null && _c !== void 0 ? _c : 0);
+        var maxSize = typeof policy.maxSize === 'number' && Number.isFinite(policy.maxSize)
+            ? Math.max(minSize, policy.maxSize)
+            : Number.POSITIVE_INFINITY;
+        var resolved = 0;
+        if (mode === 'fixed') {
+            resolved = Math.max(0, (_d = policy.size) !== null && _d !== void 0 ? _d : 0);
+        }
+        else {
+            resolved = this.resolveFlexibleLabelLaneFromText(parentId);
+        }
+        return this.clampLayoutSize(resolved, minSize, maxSize);
+    };
+    AutoLayoutService.prototype.resolveFlexibleLabelLaneFromText = function (parentId) {
+        var lane = 0;
+        this.model.texts.forEach(function (text) {
+            var _a, _b, _c;
+            if (text.ownerId !== parentId)
+                return;
+            var offset = (_a = text.displayOffset) !== null && _a !== void 0 ? _a : { x: 0, y: 0 };
+            var size = (_b = text.displayClipSize) !== null && _b !== void 0 ? _b : text.size;
+            var height = (_c = size === null || size === void 0 ? void 0 : size.height) !== null && _c !== void 0 ? _c : 0;
+            var bottom = text.position.y + offset.y + height;
+            if (bottom > lane) {
+                lane = bottom;
+            }
+        });
+        return Math.max(0, lane);
+    };
     AutoLayoutService.prototype.clampLayoutSize = function (value, min, max) {
         var minValue = min !== null && min !== void 0 ? min : 0;
         var maxValue = max !== null && max !== void 0 ? max : Number.POSITIVE_INFINITY;
@@ -4784,7 +5677,106 @@ var AutoLayoutService = /** @class */ (function () {
     return AutoLayoutService;
 }());
 
+var ZERO_POINT = { x: 0, y: 0 };
+var clonePoint = function (point) { return ({ x: point.x, y: point.y }); };
+var borderSideToNormal = function (side) {
+    if (side === 'left')
+        return { x: -1, y: 0 };
+    if (side === 'right')
+        return { x: 1, y: 0 };
+    if (side === 'top')
+        return { x: 0, y: -1 };
+    return { x: 0, y: 1 };
+};
+var resolvePortGeometryPoints = function (port, attachMode) {
+    var _a, _b, _c, _d, _e;
+    var placementPoint = clonePoint((_a = port.placementPoint) !== null && _a !== void 0 ? _a : ZERO_POINT);
+    var sharedLinkAttachPoint = clonePoint((_b = port.linkAttachPoint) !== null && _b !== void 0 ? _b : placementPoint);
+    var effectiveLinkAttachPoint = clonePoint(attachMode === 'internal'
+        ? (_c = port.internalLinkAttachPoint) !== null && _c !== void 0 ? _c : sharedLinkAttachPoint
+        : (_d = port.externalLinkAttachPoint) !== null && _d !== void 0 ? _d : sharedLinkAttachPoint);
+    var rotationPivot = clonePoint((_e = port.rotationPivot) !== null && _e !== void 0 ? _e : placementPoint);
+    return {
+        placementPoint: placementPoint,
+        sharedLinkAttachPoint: sharedLinkAttachPoint,
+        effectiveLinkAttachPoint: effectiveLinkAttachPoint,
+        rotationPivot: rotationPivot,
+    };
+};
+var resolvePortOrientationContext = function (options) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var port = options.port, worldPlacement = options.worldPlacement, host = options.host, shapeRegistry = options.shapeRegistry, attachMode = options.attachMode;
+    var portShape = port.shapeId ? shapeRegistry.get(port.shapeId) : undefined;
+    var localRotation = ((_a = portShape === null || portShape === void 0 ? void 0 : portShape.baseRotation) !== null && _a !== void 0 ? _a : 0) +
+        (typeof ((_b = port.style) === null || _b === void 0 ? void 0 : _b.rotation) === 'number' ? port.style.rotation : 0);
+    var nodeAnchorPoint = port.anchorCenter && (portShape === null || portShape === void 0 ? void 0 : portShape.svgPath)
+        ? {
+            x: ((_f = (_d = (_c = portShape.svgSize) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : (_e = port.size) === null || _e === void 0 ? void 0 : _e.width) !== null && _f !== void 0 ? _f : 0) / 2,
+            y: ((_k = (_h = (_g = portShape.svgSize) === null || _g === void 0 ? void 0 : _g.height) !== null && _h !== void 0 ? _h : (_j = port.size) === null || _j === void 0 ? void 0 : _j.height) !== null && _k !== void 0 ? _k : 0) / 2,
+        }
+        : __assign({}, ZERO_POINT);
+    if (port.moveMode !== 'border' || port.orientToHostBorder === false || !host) {
+        return { localRotation: localRotation, rotation: 0, offset: __assign({}, ZERO_POINT), nodeAnchorPoint: nodeAnchorPoint };
+    }
+    var hostRect = {
+        x: host.position.x,
+        y: host.position.y,
+        width: host.size.width,
+        height: host.size.height,
+    };
+    var shape = shapeRegistry.get(host.shapeId);
+    var side = (shape === null || shape === void 0 ? void 0 : shape.resolveBorderSide)
+        ? shape.resolveBorderSide(worldPlacement, hostRect)
+        : resolveBoundarySide(worldPlacement, hostRect, 'rect');
+    var normal = (shape === null || shape === void 0 ? void 0 : shape.resolveBorderNormal)
+        ? shape.resolveBorderNormal(worldPlacement, hostRect)
+        : borderSideToNormal(side);
+    var geometry = resolvePortGeometryPoints(port, attachMode);
+    var hookContext = {
+        side: side,
+        normal: normal,
+        hostRect: hostRect,
+        attachMode: attachMode,
+        effectiveLinkAttachPoint: geometry.effectiveLinkAttachPoint,
+        placementPoint: geometry.placementPoint,
+        rotationPivot: geometry.rotationPivot,
+        portSize: port.size,
+    };
+    var hookResult = (_l = shape === null || shape === void 0 ? void 0 : shape.resolvePortBorderTransform) === null || _l === void 0 ? void 0 : _l.call(shape, hookContext);
+    return {
+        localRotation: localRotation,
+        nodeAnchorPoint: nodeAnchorPoint,
+        side: side,
+        normal: normal,
+        rotation: borderSideToInwardRotation(side) + ((_m = hookResult === null || hookResult === void 0 ? void 0 : hookResult.rotation) !== null && _m !== void 0 ? _m : 0),
+        offset: (hookResult === null || hookResult === void 0 ? void 0 : hookResult.offset) ? clonePoint(hookResult.offset) : __assign({}, ZERO_POINT),
+    };
+};
+var resolvePortWorldTransform = function (options) {
+    var port = options.port, worldPlacement = options.worldPlacement, attachMode = options.attachMode, orientation = options.orientation;
+    var geometry = resolvePortGeometryPoints(port, attachMode);
+    var totalRotation = orientation.localRotation + orientation.rotation;
+    var rotatedPlacement = rotatePoint({
+        x: geometry.placementPoint.x - orientation.nodeAnchorPoint.x,
+        y: geometry.placementPoint.y - orientation.nodeAnchorPoint.y,
+    }, ZERO_POINT, totalRotation);
+    var rotatedAttach = rotatePoint({
+        x: geometry.effectiveLinkAttachPoint.x - orientation.nodeAnchorPoint.x,
+        y: geometry.effectiveLinkAttachPoint.y - orientation.nodeAnchorPoint.y,
+    }, ZERO_POINT, totalRotation);
+    var nodePosition = {
+        x: worldPlacement.x - rotatedPlacement.x + orientation.offset.x,
+        y: worldPlacement.y - rotatedPlacement.y + orientation.offset.y,
+    };
+    var linkAttachWorld = {
+        x: nodePosition.x + rotatedAttach.x,
+        y: nodePosition.y + rotatedAttach.y,
+    };
+    return { nodePosition: nodePosition, linkAttachWorld: linkAttachWorld };
+};
+
 var EDGE_TOLERANCE = 0.5;
+var POSITION_EPSILON$1 = 1e-6;
 var LinkRoutingService = /** @class */ (function () {
     function LinkRoutingService(config) {
         this.model = config.model;
@@ -4808,8 +5800,9 @@ var LinkRoutingService = /** @class */ (function () {
             }
             if (updatedLinks.has(link.id))
                 return;
-            var source = _this.model.getPortWorldPosition(link.sourcePortId);
-            var target = _this.model.getPortWorldPosition(link.targetPortId);
+            var endpoints = _this.resolveLinkEndpoints(link);
+            var source = endpoints.source;
+            var target = endpoints.target;
             if (!source || !target)
                 return;
             var points = _this.resolveLinkPointsForUpdate(link, source, target);
@@ -4826,8 +5819,9 @@ var LinkRoutingService = /** @class */ (function () {
             var _a;
             if (link.points.length > 0)
                 return;
-            var source = _this.model.getPortWorldPosition(link.sourcePortId);
-            var target = _this.model.getPortWorldPosition(link.targetPortId);
+            var endpoints = _this.resolveLinkEndpoints(link);
+            var source = endpoints.source;
+            var target = endpoints.target;
             if (!source || !target)
                 return;
             var points = ((_a = link.routing) !== null && _a !== void 0 ? _a : 'auto') === 'manual'
@@ -4838,6 +5832,31 @@ var LinkRoutingService = /** @class */ (function () {
         });
         return patches;
     };
+    LinkRoutingService.prototype.getPortLinkWorldPosition = function (portId, options) {
+        var _a;
+        var port = this.model.getPort(portId);
+        if (!port)
+            return null;
+        var worldPlacement = this.model.getPortWorldPosition(portId);
+        if (!worldPlacement)
+            return null;
+        var host = this.resolveHostForPort(portId);
+        var attachMode = (_a = options === null || options === void 0 ? void 0 : options.attachMode) !== null && _a !== void 0 ? _a : this.resolveAttachModeForPorts(portId, options === null || options === void 0 ? void 0 : options.oppositePortId);
+        var orientation = resolvePortOrientationContext({
+            port: port.toData(),
+            worldPlacement: worldPlacement,
+            host: host,
+            shapeRegistry: this.shapeRegistry,
+            attachMode: attachMode,
+        });
+        var transformed = resolvePortWorldTransform({
+            port: port.toData(),
+            worldPlacement: worldPlacement,
+            attachMode: attachMode,
+            orientation: orientation,
+        });
+        return transformed.linkAttachWorld;
+    };
     LinkRoutingService.prototype.computeAutoRoute = function (link, source, target) {
         var routed = this.router.route(source, target, this.buildRouteContext(link));
         if (!routed || routed.length < 2) {
@@ -4856,15 +5875,37 @@ var LinkRoutingService = /** @class */ (function () {
         }
         return this.computeAutoRoute(link, source, target);
     };
+    LinkRoutingService.prototype.resolveLinkEndpoints = function (link) {
+        return {
+            source: this.getPortLinkWorldPosition(link.sourcePortId, { oppositePortId: link.targetPortId }),
+            target: this.getPortLinkWorldPosition(link.targetPortId, { oppositePortId: link.sourcePortId }),
+        };
+    };
     LinkRoutingService.prototype.updateManualRoute = function (points, source, target) {
         if (points.length < 2) {
             return [__assign({}, source), __assign({}, target)];
         }
+        var sourceDelta = {
+            x: source.x - points[0].x,
+            y: source.y - points[0].y,
+        };
+        var targetDelta = {
+            x: target.x - points[points.length - 1].x,
+            y: target.y - points[points.length - 1].y,
+        };
+        var shouldTranslateAllPoints = Math.abs(sourceDelta.x - targetDelta.x) <= POSITION_EPSILON$1 &&
+            Math.abs(sourceDelta.y - targetDelta.y) <= POSITION_EPSILON$1;
         return points.map(function (point, index) {
             if (index === 0)
                 return __assign({}, source);
             if (index === points.length - 1)
                 return __assign({}, target);
+            if (shouldTranslateAllPoints) {
+                return {
+                    x: point.x + sourceDelta.x,
+                    y: point.y + sourceDelta.y,
+                };
+            }
             return __assign({}, point);
         });
     };
@@ -4875,8 +5916,9 @@ var LinkRoutingService = /** @class */ (function () {
         var targetPort = this.model.getPort(link.targetPortId);
         var sourceElementId = sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.elementId;
         var targetElementId = targetPort === null || targetPort === void 0 ? void 0 : targetPort.elementId;
-        var sourcePosition = this.model.getPortWorldPosition(link.sourcePortId);
-        var targetPosition = this.model.getPortWorldPosition(link.targetPortId);
+        var endpoints = this.resolveLinkEndpoints(link);
+        var sourcePosition = endpoints.source;
+        var targetPosition = endpoints.target;
         var sourceRect = sourceElementId ? this.getElementRect(sourceElementId) : null;
         var targetRect = targetElementId ? this.getElementRect(targetElementId) : null;
         var sourceEndpointGeometry = sourcePosition && sourceRect
@@ -5006,6 +6048,37 @@ var LinkRoutingService = /** @class */ (function () {
             height: element.size.height,
         };
     };
+    LinkRoutingService.prototype.resolveHostForPort = function (portId) {
+        var _a;
+        var port = this.model.getPort(portId);
+        if (!port)
+            return null;
+        var element = this.model.getElement(port.elementId);
+        if (!element)
+            return null;
+        return {
+            id: element.id,
+            position: (_a = this.model.getElementWorldPosition(element.id)) !== null && _a !== void 0 ? _a : element.position,
+            size: element.size,
+            shapeId: element.shapeId,
+        };
+    };
+    LinkRoutingService.prototype.resolveAttachModeForPorts = function (portId, oppositePortId) {
+        var _a, _b;
+        if (!oppositePortId)
+            return 'external';
+        var elementId = (_a = this.model.getPort(portId)) === null || _a === void 0 ? void 0 : _a.elementId;
+        var oppositeElementId = (_b = this.model.getPort(oppositePortId)) === null || _b === void 0 ? void 0 : _b.elementId;
+        if (!elementId || !oppositeElementId)
+            return 'external';
+        return this.isAncestorOf(elementId, oppositeElementId) ? 'internal' : 'external';
+    };
+    LinkRoutingService.prototype.isAncestorOf = function (candidateAncestorId, candidateDescendantId) {
+        if (candidateAncestorId === candidateDescendantId)
+            return false;
+        var descendantChain = this.getAncestorChain(candidateDescendantId);
+        return descendantChain.includes(candidateAncestorId);
+    };
     LinkRoutingService.prototype.getAncestorChain = function (elementId) {
         var _a;
         var chain = [];
@@ -5164,11 +6237,17 @@ var DiagramEngine = /** @class */ (function () {
     DiagramEngine.prototype.load = function (state) {
         var _this = this;
         var patches = this.commandQueue.run(createLoadCommand(state), this.model);
-        var allPatches = this.mutationPipeline.run({
+        var mutationPatches = this.mutationPipeline.run({
             basePatches: patches,
             layoutSteps: [function () { return _this.applyAllLayouts(); }],
             includeEmptyLinkRouting: true,
         });
+        var normalizedPorts = this.normalizePortsForHostPolicies();
+        var normalizedLinkPatches = normalizedPorts.movedPortIds.length > 0
+            ? this.updateLinksForPorts(normalizedPorts.movedPortIds)
+            : [];
+        var textPresentationPatches = this.resolveAllTextPresentationPatches(false);
+        var allPatches = __spreadArray(__spreadArray(__spreadArray(__spreadArray([], mutationPatches, true), normalizedPorts.patches, true), normalizedLinkPatches, true), textPresentationPatches, true);
         this.emitChange(allPatches);
     };
     DiagramEngine.prototype.getState = function () {
@@ -5383,8 +6462,12 @@ var DiagramEngine = /** @class */ (function () {
     };
     DiagramEngine.prototype.addLink = function (link) {
         var _a;
-        var source = this.model.getPortWorldPosition(link.sourcePortId);
-        var target = this.model.getPortWorldPosition(link.targetPortId);
+        var source = this.linkRoutingService.getPortLinkWorldPosition(link.sourcePortId, {
+            oppositePortId: link.targetPortId,
+        });
+        var target = this.linkRoutingService.getPortLinkWorldPosition(link.targetPortId, {
+            oppositePortId: link.sourcePortId,
+        });
         var routing = (_a = link.routing) !== null && _a !== void 0 ? _a : 'auto';
         var points = link.points;
         if (source && target) {
@@ -5408,8 +6491,12 @@ var DiagramEngine = /** @class */ (function () {
             return;
         var update = { routing: mode };
         if (mode === 'auto') {
-            var source = this.model.getPortWorldPosition(link.sourcePortId);
-            var target = this.model.getPortWorldPosition(link.targetPortId);
+            var source = this.linkRoutingService.getPortLinkWorldPosition(link.sourcePortId, {
+                oppositePortId: link.targetPortId,
+            });
+            var target = this.linkRoutingService.getPortLinkWorldPosition(link.targetPortId, {
+                oppositePortId: link.sourcePortId,
+            });
             if (source && target) {
                 update.points = this.computeAutoRoute(link, source, target);
             }
@@ -5443,8 +6530,12 @@ var DiagramEngine = /** @class */ (function () {
             var routing = (_a = link.routing) !== null && _a !== void 0 ? _a : 'auto';
             if (routing === 'manual' && !includeManual)
                 return;
-            var source = _this.model.getPortWorldPosition(link.sourcePortId);
-            var target = _this.model.getPortWorldPosition(link.targetPortId);
+            var source = _this.linkRoutingService.getPortLinkWorldPosition(link.sourcePortId, {
+                oppositePortId: link.targetPortId,
+            });
+            var target = _this.linkRoutingService.getPortLinkWorldPosition(link.targetPortId, {
+                oppositePortId: link.sourcePortId,
+            });
             if (!source || !target)
                 return;
             var points = _this.computeAutoRoute(link, source, target);
@@ -5468,8 +6559,10 @@ var DiagramEngine = /** @class */ (function () {
         this.emitChange(patches);
     };
     DiagramEngine.prototype.updateText = function (id, content) {
+        var _this = this;
         var patches = this.commandQueue.run(createUpdateTextCommand(id, content), this.model);
         var text = this.model.getText(id);
+        var layoutOwnerId = (text === null || text === void 0 ? void 0 : text.ownerId) && this.hasFlexibleLabelReservedSpace(text.ownerId) ? text.ownerId : null;
         if (text) {
             var resolved = this.resolveTextPresentation(text.toData());
             text.setSize(resolved.size);
@@ -5490,7 +6583,18 @@ var DiagramEngine = /** @class */ (function () {
                 reason: 'content',
             });
         }
-        this.emitChange(patches);
+        if (!layoutOwnerId) {
+            this.emitChange(patches);
+            return;
+        }
+        var allPatches = this.mutationPipeline.run({
+            basePatches: patches,
+            layoutSteps: [
+                function () { return _this.applyLayoutForParent(layoutOwnerId); },
+                function () { var _a, _b; return _this.applyLayoutCascade((_b = (_a = _this.model.getElement(layoutOwnerId)) === null || _a === void 0 ? void 0 : _a.parentId) !== null && _b !== void 0 ? _b : null); },
+            ],
+        });
+        this.emitChange(allPatches);
     };
     DiagramEngine.prototype.moveTextTo = function (id, x, y) {
         var text = this.model.getText(id);
@@ -5593,6 +6697,9 @@ var DiagramEngine = /** @class */ (function () {
     DiagramEngine.prototype.getPortWorldPosition = function (id) {
         return this.model.getPortWorldPosition(id);
     };
+    DiagramEngine.prototype.getPortLinkWorldPosition = function (id, options) {
+        return this.linkRoutingService.getPortLinkWorldPosition(id, options);
+    };
     DiagramEngine.prototype.getTextWorldPosition = function (id) {
         return this.model.getTextWorldPosition(id);
     };
@@ -5732,7 +6839,7 @@ var DiagramEngine = /** @class */ (function () {
             if (!host)
                 return;
             host.portIds.forEach(function (portId) {
-                var _a;
+                var _a, _b, _c;
                 var port = _this.model.getPort(portId);
                 if (!port)
                     return;
@@ -5755,11 +6862,16 @@ var DiagramEngine = /** @class */ (function () {
                     return;
                 }
                 var projected = _this.resolveBorderPortResizeProjection(port.position, host.shapeId, sizeInfo, host.size);
-                var unchanged = Math.abs(projected.x - port.position.x) <= POSITION_EPSILON &&
-                    Math.abs(projected.y - port.position.y) <= POSITION_EPSILON;
+                var constrained = _this.resolveConstrainedPortRelativePosition(port, host, projected);
+                var unchanged = Math.abs(constrained.position.x - port.position.x) <= POSITION_EPSILON &&
+                    Math.abs(constrained.position.y - port.position.y) <= POSITION_EPSILON &&
+                    ((_b = constrained.currentAnchorId) !== null && _b !== void 0 ? _b : null) === ((_c = port.currentAnchorId) !== null && _c !== void 0 ? _c : null);
                 if (unchanged)
                     return;
-                var patchesForPort = _this.commandQueue.run(createMovePortCommand(port.id, { position: projected, currentAnchorId: null }), _this.model);
+                var patchesForPort = _this.commandQueue.run(createMovePortCommand(port.id, {
+                    position: constrained.position,
+                    currentAnchorId: constrained.currentAnchorId,
+                }), _this.model);
                 reprojectionPatches.push.apply(reprojectionPatches, patchesForPort);
                 movedPortIds.add(port.id);
             });
@@ -5816,10 +6928,10 @@ var DiagramEngine = /** @class */ (function () {
         return this.projectPointToHostBorder(projectedTarget, shapeId, nextSize);
     };
     DiagramEngine.prototype.resolveConstrainedPortRelativePosition = function (port, element, requestedPosition) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
         var position = __assign({}, requestedPosition);
         var effectiveMoveMode = this.resolveEffectivePortMoveMode(port, element);
-        if (effectiveMoveMode && effectiveMoveMode !== 'free' && effectiveMoveMode !== 'anchors') {
+        if (effectiveMoveMode === 'inside' || effectiveMoveMode === 'border') {
             var widthLimit = Math.max(0, element.size.width - ((_b = (_a = port.size) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0));
             var heightLimit = Math.max(0, element.size.height - ((_d = (_c = port.size) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 0));
             var bounds = {
@@ -5843,9 +6955,12 @@ var DiagramEngine = /** @class */ (function () {
                         height: Math.max(0, element.size.height),
                     };
             }
-            position = effectiveMoveMode === 'inside'
-                ? clampToRect(position, bounds)
-                : this.constrainPortToHostBorder(position, element);
+            if (effectiveMoveMode === 'inside') {
+                position = clampToRect(position, bounds);
+            }
+            else {
+                position = this.constrainPortToHostBorder(position, element);
+            }
         }
         var style = port.style;
         if ((style === null || style === void 0 ? void 0 : style.moveAxis) === 'horizontal') {
@@ -5859,18 +6974,134 @@ var DiagramEngine = /** @class */ (function () {
             position.x = clamp(position.x, bounds.x, bounds.x + bounds.width);
             position.y = clamp(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);
+            position = resolvedBorder !== null && resolvedBorder !== void 0 ? resolvedBorder : this.constrainPortToHostBorder(position, element);
+        }
+        else {
+            position = this.applyPortPositionLimits(position, (_f = element.portMovement) === null || _f === void 0 ? void 0 : _f.positionLimits);
+        }
         if (effectiveMoveMode === 'anchors') {
-            var anchor = this.resolveNearestPortAnchor(element, position);
+            var anchor = this.resolveNearestPortAnchor(element, position, port.currentAnchorId);
             if (anchor) {
                 return {
                     position: __assign({}, anchor.position),
                     currentAnchorId: anchor.id,
                 };
             }
-            return { position: position, currentAnchorId: (_e = port.currentAnchorId) !== null && _e !== void 0 ? _e : null };
+            return { position: __assign({}, port.position), currentAnchorId: (_g = port.currentAnchorId) !== null && _g !== void 0 ? _g : null };
         }
         return { position: position, currentAnchorId: null };
     };
+    DiagramEngine.prototype.applyPortPositionLimits = function (position, limits) {
+        if (!limits)
+            return __assign({}, position);
+        var x = position.x;
+        var y = position.y;
+        if (limits.x) {
+            if (typeof limits.x.min === 'number') {
+                x = Math.max(x, limits.x.min);
+            }
+            if (typeof limits.x.max === 'number') {
+                x = Math.min(x, limits.x.max);
+            }
+        }
+        if (limits.y) {
+            if (typeof limits.y.min === 'number') {
+                y = Math.max(y, limits.y.min);
+            }
+            if (typeof limits.y.max === 'number') {
+                y = Math.min(y, limits.y.max);
+            }
+        }
+        return { x: x, y: y };
+    };
+    DiagramEngine.prototype.resolveBorderPositionWithLimits = function (position, element, limits) {
+        var _this = this;
+        var _a, _b, _c, _d;
+        var borderBase = this.constrainPortToHostBorder(position, element);
+        if (!limits)
+            return borderBase;
+        if (this.isPointWithinPositionLimits(borderBase, limits))
+            return borderBase;
+        var target = this.applyPortPositionLimits(borderBase, limits);
+        var xValues = new Set([borderBase.x, target.x, 0, Math.max(0, element.size.width)]);
+        var yValues = new Set([borderBase.y, target.y, 0, Math.max(0, element.size.height)]);
+        if (typeof ((_a = limits.x) === null || _a === void 0 ? void 0 : _a.min) === 'number')
+            xValues.add(limits.x.min);
+        if (typeof ((_b = limits.x) === null || _b === void 0 ? void 0 : _b.max) === 'number')
+            xValues.add(limits.x.max);
+        if (typeof ((_c = limits.y) === null || _c === void 0 ? void 0 : _c.min) === 'number')
+            yValues.add(limits.y.min);
+        if (typeof ((_d = limits.y) === null || _d === void 0 ? void 0 : _d.max) === 'number')
+            yValues.add(limits.y.max);
+        var seeds = [];
+        xValues.forEach(function (x) { return yValues.forEach(function (y) { return seeds.push({ x: x, y: y }); }); });
+        seeds.push({ x: borderBase.x, y: target.y }, { x: target.x, y: borderBase.y });
+        var candidates = [];
+        var seen = new Set();
+        seeds.forEach(function (seed) {
+            var candidate = _this.constrainPortToHostBorder(seed, element);
+            var key = "".concat(candidate.x.toFixed(6), ":").concat(candidate.y.toFixed(6));
+            if (seen.has(key))
+                return;
+            seen.add(key);
+            candidates.push(candidate);
+        });
+        var valid = candidates.filter(function (candidate) { return _this.isPointWithinPositionLimits(candidate, limits); });
+        if (valid.length === 0)
+            return null;
+        return valid.reduce(function (best, candidate) {
+            var bestDistance = Math.pow((best.x - target.x), 2) + Math.pow((best.y - target.y), 2);
+            var candidateDistance = Math.pow((candidate.x - target.x), 2) + Math.pow((candidate.y - target.y), 2);
+            if (candidateDistance < bestDistance)
+                return candidate;
+            if (candidateDistance > bestDistance)
+                return best;
+            if (candidate.x < best.x)
+                return candidate;
+            if (candidate.x > best.x)
+                return best;
+            return candidate.y < best.y ? candidate : best;
+        }, valid[0]);
+    };
+    DiagramEngine.prototype.isPointWithinPositionLimits = function (position, limits) {
+        if (!limits)
+            return true;
+        if (limits.x) {
+            if (typeof limits.x.min === 'number' && position.x < limits.x.min)
+                return false;
+            if (typeof limits.x.max === 'number' && position.x > limits.x.max)
+                return false;
+        }
+        if (limits.y) {
+            if (typeof limits.y.min === 'number' && position.y < limits.y.min)
+                return false;
+            if (typeof limits.y.max === 'number' && position.y > limits.y.max)
+                return false;
+        }
+        return true;
+    };
+    DiagramEngine.prototype.filterAnchorsByPositionLimits = function (anchors, limits) {
+        if (!limits)
+            return anchors;
+        return anchors.filter(function (anchor) {
+            var position = anchor.position;
+            if (limits.x) {
+                if (typeof limits.x.min === 'number' && position.x < limits.x.min)
+                    return false;
+                if (typeof limits.x.max === 'number' && position.x > limits.x.max)
+                    return false;
+            }
+            if (limits.y) {
+                if (typeof limits.y.min === 'number' && position.y < limits.y.min)
+                    return false;
+                if (typeof limits.y.max === 'number' && position.y > limits.y.max)
+                    return false;
+            }
+            return true;
+        });
+    };
     DiagramEngine.prototype.resolveEffectivePortMoveMode = function (port, element) {
         var _a, _b;
         return (_b = (_a = element.portMovement) === null || _a === void 0 ? void 0 : _a.moveMode) !== null && _b !== void 0 ? _b : port.moveMode;
@@ -5905,7 +7136,8 @@ var DiagramEngine = /** @class */ (function () {
         return [];
     };
     DiagramEngine.prototype.resolveNearestPortAnchor = function (element, target, preferredAnchorId) {
-        var anchors = this.resolvePortAnchorsForElement(element);
+        var _a;
+        var anchors = this.filterAnchorsByPositionLimits(this.resolvePortAnchorsForElement(element), (_a = element.portMovement) === null || _a === void 0 ? void 0 : _a.positionLimits);
         if (anchors.length === 0)
             return null;
         if (preferredAnchorId) {
@@ -5970,6 +7202,46 @@ var DiagramEngine = /** @class */ (function () {
     DiagramEngine.prototype.resolveTextPresentation = function (text) {
         return this.textLayoutService.resolveTextPresentation(text);
     };
+    DiagramEngine.prototype.resolveAllTextPresentationPatches = function (emitTextUpdated) {
+        var _this = this;
+        var textPatches = [];
+        this.model.texts.forEach(function (text) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+            var current = text.toData();
+            var resolved = _this.resolveTextPresentation(current);
+            var currentDisplay = (_a = current.displayContent) !== null && _a !== void 0 ? _a : current.content;
+            var sizeChanged = !current.size ||
+                current.size.width !== resolved.size.width ||
+                current.size.height !== resolved.size.height;
+            var displayChanged = currentDisplay !== resolved.displayContent;
+            var offsetChanged = ((_c = (_b = current.displayOffset) === null || _b === void 0 ? void 0 : _b.x) !== null && _c !== void 0 ? _c : 0) !== ((_e = (_d = resolved.displayOffset) === null || _d === void 0 ? void 0 : _d.x) !== null && _e !== void 0 ? _e : 0) ||
+                ((_g = (_f = current.displayOffset) === null || _f === void 0 ? void 0 : _f.y) !== null && _g !== void 0 ? _g : 0) !== ((_j = (_h = resolved.displayOffset) === null || _h === void 0 ? void 0 : _h.y) !== null && _j !== void 0 ? _j : 0);
+            var clipChanged = ((_l = (_k = current.displayClipSize) === null || _k === void 0 ? void 0 : _k.width) !== null && _l !== void 0 ? _l : 0) !== ((_o = (_m = resolved.displayClipSize) === null || _m === void 0 ? void 0 : _m.width) !== null && _o !== void 0 ? _o : 0) ||
+                ((_q = (_p = current.displayClipSize) === null || _p === void 0 ? void 0 : _p.height) !== null && _q !== void 0 ? _q : 0) !== ((_s = (_r = resolved.displayClipSize) === null || _r === void 0 ? void 0 : _r.height) !== null && _s !== void 0 ? _s : 0);
+            if (!sizeChanged && !displayChanged && !offsetChanged && !clipChanged)
+                return;
+            text.setSize(resolved.size);
+            text.setDisplayContent(resolved.displayContent);
+            text.setDisplayOffset(resolved.displayOffset);
+            text.setDisplayClipSize(resolved.displayClipSize);
+            textPatches.push(patchUpdate('text', text.id, {
+                size: resolved.size,
+                displayContent: resolved.displayContent,
+                displayOffset: resolved.displayOffset,
+                displayClipSize: resolved.displayClipSize,
+            }));
+            if (emitTextUpdated) {
+                _this.events.emit('textUpdated', {
+                    textId: text.id,
+                    ownerId: text.ownerId,
+                    content: text.content,
+                    displayContent: resolved.displayContent,
+                    reason: 'layout',
+                });
+            }
+        });
+        return textPatches;
+    };
     DiagramEngine.prototype.emitSelection = function () {
         var _this = this;
         var selectedIds = this.selection.get();
@@ -6001,6 +7273,12 @@ var DiagramEngine = /** @class */ (function () {
     DiagramEngine.prototype.applyAllLayouts = function () {
         return this.autoLayoutService.applyAllLayouts();
     };
+    DiagramEngine.prototype.hasFlexibleLabelReservedSpace = function (elementId) {
+        var _a, _b, _c;
+        var element = this.model.getElement(elementId);
+        var mode = (_c = (_b = (_a = element === null || element === void 0 ? void 0 : element.layout) === null || _a === void 0 ? void 0 : _a.labelReservedSpace) === null || _b === void 0 ? void 0 : _b.mode) !== null && _c !== void 0 ? _c : 'none';
+        return mode === 'flexible';
+    };
     DiagramEngine.prototype.updateLinksForPorts = function (portIds) {
         return this.linkRoutingService.updateLinksForPorts(portIds);
     };
@@ -6053,6 +7331,40 @@ var DiagramEngine = /** @class */ (function () {
     DiagramEngine.prototype.routeLinksWithEmptyPoints = function () {
         return this.linkRoutingService.routeLinksWithEmptyPoints();
     };
+    DiagramEngine.prototype.normalizePortsForHostPolicies = function (portIds) {
+        var _this = this;
+        var ids = portIds !== null && portIds !== void 0 ? portIds : Array.from(this.model.ports.keys());
+        var normalizedPatches = [];
+        var movedPortIds = new Set();
+        ids.forEach(function (portId) {
+            var _a, _b;
+            var port = _this.model.getPort(portId);
+            if (!port)
+                return;
+            var element = _this.model.getElement(port.elementId);
+            if (!element)
+                return;
+            var constrained = _this.resolveConstrainedPortRelativePosition(port, element, port.position);
+            var previousAnchorId = (_a = port.currentAnchorId) !== null && _a !== void 0 ? _a : null;
+            var shouldPersistAnchorId = previousAnchorId !== null || constrained.currentAnchorId === null;
+            var nextAnchorId = shouldPersistAnchorId ? ((_b = constrained.currentAnchorId) !== null && _b !== void 0 ? _b : null) : previousAnchorId;
+            var unchanged = Math.abs(constrained.position.x - port.position.x) <= POSITION_EPSILON &&
+                Math.abs(constrained.position.y - port.position.y) <= POSITION_EPSILON &&
+                previousAnchorId === nextAnchorId;
+            if (unchanged)
+                return;
+            var update = {
+                position: constrained.position,
+            };
+            if (shouldPersistAnchorId) {
+                update.currentAnchorId = constrained.currentAnchorId;
+            }
+            var patches = _this.commandQueue.run(createMovePortCommand(port.id, update), _this.model);
+            normalizedPatches.push.apply(normalizedPatches, patches);
+            movedPortIds.add(port.id);
+        });
+        return { patches: normalizedPatches, movedPortIds: Array.from(movedPortIds) };
+    };
     DiagramEngine.prototype.computeRemovalDiff = function (before) {
         var after = this.model.toState();
         var removedPatches = [];
@@ -6263,6 +7575,21 @@ var KonvaNodeFactory = /** @class */ (function () {
         }
         return node;
     };
+    KonvaNodeFactory.prototype.createTextBackgroundNode = function (config) {
+        return new this.konva.Rect({
+            id: config.id,
+            x: config.x,
+            y: config.y,
+            width: config.width,
+            height: config.height,
+            fill: config.fill,
+            stroke: config.stroke,
+            strokeWidth: config.strokeWidth,
+            cornerRadius: config.cornerRadius,
+            name: 'text-background',
+            listening: false,
+        });
+    };
     KonvaNodeFactory.prototype.createHandleNode = function (config) {
         return new this.konva.Rect({
             id: config.id,
@@ -6342,7 +7669,8 @@ var KonvaNodeFactory = /** @class */ (function () {
     KonvaNodeFactory.prototype.createDrawNode = function (model, shape, config) {
         var _a, _b;
         var style = model.style;
-        var attrs = __assign(__assign({ id: model.id, x: model.position.x, y: model.position.y, name: config.name }, (style !== null && style !== void 0 ? style : {})), { __shapeDraw: true, __model: model, sceneFunc: function (ctx, node) {
+        var _c = this.resolveShapeRotation(shape, style), resolvedStyle = _c.style, rotation = _c.rotation;
+        var attrs = __assign(__assign({ id: model.id, x: model.position.x, y: model.position.y, name: config.name }, (resolvedStyle !== null && resolvedStyle !== void 0 ? resolvedStyle : {})), { __shapeDraw: true, __model: model, rotation: rotation, sceneFunc: function (ctx, node) {
                 var _a, _b, _c;
                 var resolvedModel = (_b = (node.getAttr ? node.getAttr('__model') : (_a = node.attrs) === null || _a === void 0 ? void 0 : _a.__model)) !== null && _b !== void 0 ? _b : model;
                 (_c = shape.draw) === null || _c === void 0 ? void 0 : _c.call(shape, { ctx: ctx, model: resolvedModel });
@@ -6358,6 +7686,7 @@ var KonvaNodeFactory = /** @class */ (function () {
     KonvaNodeFactory.prototype.createSvgPathNode = function (model, shape, config) {
         var _a, _b, _c, _d, _e, _f, _g;
         var style = model.style;
+        var _h = this.resolveShapeRotation(shape, style), resolvedStyle = _h.style, rotation = _h.rotation;
         var sizeUpdater = function (_a) {
             var _b, _c;
             var nextSize = _a.size, anchorCenter = _a.anchorCenter, updateOffsetX = _a.updateOffsetX, updateOffsetY = _a.updateOffsetY, getNodeAttr = _a.getNodeAttr;
@@ -6379,7 +7708,7 @@ var KonvaNodeFactory = /** @class */ (function () {
             return attrs;
         };
         var size = (_a = config.size) !== null && _a !== void 0 ? _a : { width: 0, height: 0 };
-        var node = new this.konva.Path(__assign(__assign({ id: model.id, x: model.position.x, y: model.position.y, data: shape.svgPath, name: config.name }, (style !== null && style !== void 0 ? style : {})), { shapeKind: 'svg-path', __autoOffsetX: true, __autoOffsetY: true }));
+        var node = new this.konva.Path(__assign(__assign({ id: model.id, x: model.position.x, y: model.position.y, rotation: rotation, data: shape.svgPath, name: config.name }, (resolvedStyle !== null && resolvedStyle !== void 0 ? resolvedStyle : {})), { shapeKind: 'svg-path', __autoOffsetX: true, __autoOffsetY: true }));
         var rect = node.getClientRect ? node.getClientRect({ skipTransform: true }) : null;
         var baseWidth = (_d = (_c = (_b = shape.svgSize) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : rect === null || rect === void 0 ? void 0 : rect.width) !== null && _d !== void 0 ? _d : size.width;
         var baseHeight = (_g = (_f = (_e = shape.svgSize) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : rect === null || rect === void 0 ? void 0 : rect.height) !== null && _g !== void 0 ? _g : size.height;
@@ -6396,6 +7725,20 @@ var KonvaNodeFactory = /** @class */ (function () {
         }
         return node;
     };
+    KonvaNodeFactory.prototype.resolveShapeRotation = function (shape, style) {
+        var _a, _b;
+        if (!style) {
+            return {
+                style: undefined,
+                rotation: (_a = shape.baseRotation) !== null && _a !== void 0 ? _a : 0,
+            };
+        }
+        var rotation = style.rotation, rest = __rest(style, ["rotation"]);
+        return {
+            style: rest,
+            rotation: ((_b = shape.baseRotation) !== null && _b !== void 0 ? _b : 0) + (typeof rotation === 'number' ? rotation : 0),
+        };
+    };
     KonvaNodeFactory.prototype.applyShapeBehaviorAttrs = function (node, shape) {
         if (!node.setAttrs || !shape.sizeUpdater)
             return;
@@ -6427,6 +7770,7 @@ var KonvaRenderer = /** @class */ (function () {
         this.portNodes = new Map();
         this.linkNodes = new Map();
         this.textNodes = new Map();
+        this.textBackgroundNodes = new Map();
         this.selectedIds = new Set();
         this.tempLinkNode = null;
         this.tempPortNode = null;
@@ -6596,7 +7940,7 @@ var KonvaRenderer = /** @class */ (function () {
         this.drawOverlays();
     };
     KonvaRenderer.prototype.renderPortPlaceholder = function (port, hostElement) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         var shapeId = port.shapeId;
         if (!this.tempPortNode || this.tempPortShapeId !== shapeId) {
             (_b = (_a = this.tempPortNode) === null || _a === void 0 ? void 0 : _a.destroy) === null || _b === void 0 ? void 0 : _b.call(_a);
@@ -6615,6 +7959,9 @@ var KonvaRenderer = /** @class */ (function () {
             }
         }
         if (this.tempPortNode) {
+            this.updateSize(this.tempPortNode, (_e = port.size) !== null && _e !== void 0 ? _e : { width: 8, height: 8 }, {
+                anchorCenter: (_f = port.anchorCenter) !== null && _f !== void 0 ? _f : true,
+            });
             this.applyPortOrientation(this.tempPortNode, port, port.position, undefined, hostElement);
         }
         this.drawOverlays();
@@ -6723,6 +8070,8 @@ var KonvaRenderer = /** @class */ (function () {
         this.elementNodes.clear();
         this.portNodes.clear();
         this.linkNodes.clear();
+        this.textBackgroundNodes.forEach(function (node) { var _a; return (_a = node.destroy) === null || _a === void 0 ? void 0 : _a.call(node); });
+        this.textBackgroundNodes.clear();
         this.textNodes.clear();
         this.resizeHandleNodes.clear();
         this.linkHandleNodes.clear();
@@ -6874,7 +8223,7 @@ var KonvaRenderer = /** @class */ (function () {
         var _this = this;
         var ports = Array.from(model.ports.values());
         ports.forEach(function (port) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e;
             var data = port.toData();
             var node = _this.portNodes.get(port.id);
             if (!node) {
@@ -6886,6 +8235,7 @@ var KonvaRenderer = /** @class */ (function () {
                 node.setAttrs({ __model: data });
             }
             var position = (_c = model.getPortWorldPosition(port.id)) !== null && _c !== void 0 ? _c : port.position;
+            _this.updateSize(node, (_d = data.size) !== null && _d !== void 0 ? _d : { width: 8, height: 8 }, { anchorCenter: (_e = data.anchorCenter) !== null && _e !== void 0 ? _e : true });
             _this.updatePosition(node, position);
             _this.applyPortOrientation(node, data, position, model);
         });
@@ -6928,7 +8278,7 @@ var KonvaRenderer = /** @class */ (function () {
         var _this = this;
         var texts = Array.from(model.texts.values());
         texts.forEach(function (text) {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
             var node = _this.textNodes.get(text.id);
             if (!node) {
                 node = _this.nodeFactory.createTextNode(text.toData());
@@ -6937,32 +8287,124 @@ var KonvaRenderer = /** @class */ (function () {
             }
             var position = (_c = model.getTextWorldPosition(text.id)) !== null && _c !== void 0 ? _c : text.position;
             var displayOffset = (_d = text.displayOffset) !== null && _d !== void 0 ? _d : { x: 0, y: 0 };
-            _this.updatePosition(node, {
+            var textPosition = {
                 x: position.x + displayOffset.x,
                 y: position.y + displayOffset.y,
+            };
+            _this.updatePosition(node, {
+                x: textPosition.x,
+                y: textPosition.y,
             });
             if (node.setAttrs) {
-                var style = text.style;
-                var defaults = resolveTextStyleDefaults(style);
-                var baseFill = (_g = (_f = (_e = style === null || style === void 0 ? void 0 : style.fill) !== null && _e !== void 0 ? _e : _this.getNodeAttr(node, '__baseFill')) !== null && _f !== void 0 ? _f : _this.getNodeAttr(node, 'fill')) !== null && _g !== void 0 ? _g : 'black';
+                var style_1 = text.style;
+                var defaults = resolveTextStyleDefaults(style_1);
+                var baseFill = (_g = (_f = (_e = style_1 === null || style_1 === void 0 ? void 0 : style_1.fill) !== null && _e !== void 0 ? _e : _this.getNodeAttr(node, '__baseFill')) !== null && _f !== void 0 ? _f : _this.getNodeAttr(node, 'fill')) !== null && _g !== void 0 ? _g : 'black';
                 var fill = _this.selectedIds.has(text.id) ? '#ff7a00' : baseFill;
-                var clip = text.displayClipSize;
-                node.setAttrs(__assign(__assign({ text: (_h = text.displayContent) !== null && _h !== void 0 ? _h : text.content, fontSize: defaults.fontSize, fontFamily: defaults.fontFamily, lineHeight: defaults.lineHeight }, (style !== null && style !== void 0 ? style : {})), { width: clip === null || clip === void 0 ? void 0 : clip.width, height: clip === null || clip === void 0 ? void 0 : clip.height, wrap: clip ? 'none' : undefined, ellipsis: false, fill: fill, __baseFill: baseFill, 
+                var clip_1 = text.displayClipSize;
+                node.setAttrs(__assign(__assign({ text: (_h = text.displayContent) !== null && _h !== void 0 ? _h : text.content, fontSize: defaults.fontSize, fontFamily: defaults.fontFamily, lineHeight: defaults.lineHeight }, (style_1 !== null && style_1 !== void 0 ? style_1 : {})), { width: clip_1 === null || clip_1 === void 0 ? void 0 : clip_1.width, height: clip_1 === null || clip_1 === void 0 ? void 0 : clip_1.height, wrap: clip_1 ? 'none' : undefined, ellipsis: false, fill: fill, __baseFill: baseFill, 
                     // Keep metadata for tests/debugging; Konva clip attrs do not apply on Text nodes.
-                    clipX: clip ? 0 : undefined, clipY: clip ? 0 : undefined, clipWidth: clip === null || clip === void 0 ? void 0 : clip.width, clipHeight: clip === null || clip === void 0 ? void 0 : clip.height }));
+                    clipX: clip_1 ? 0 : undefined, clipY: clip_1 ? 0 : undefined, clipWidth: clip_1 === null || clip_1 === void 0 ? void 0 : clip_1.width, clipHeight: clip_1 === null || clip_1 === void 0 ? void 0 : clip_1.height }));
+            }
+            var style = text.style;
+            var backgroundFill = style === null || style === void 0 ? void 0 : style.backgroundFill;
+            var clip = text.displayClipSize;
+            var backgroundWidth = (_j = clip === null || clip === void 0 ? void 0 : clip.width) !== null && _j !== void 0 ? _j : (_k = text.size) === null || _k === void 0 ? void 0 : _k.width;
+            var backgroundHeight = (_l = clip === null || clip === void 0 ? void 0 : clip.height) !== null && _l !== void 0 ? _l : (_m = text.size) === null || _m === void 0 ? void 0 : _m.height;
+            var backgroundMeta = _this.resolveTextBackgroundMeta(model, text.toData());
+            var hasBackground = typeof backgroundFill === 'string' &&
+                backgroundFill.length > 0 &&
+                typeof backgroundWidth === 'number' &&
+                typeof backgroundHeight === 'number' &&
+                backgroundWidth > 0 &&
+                backgroundHeight > 0;
+            if (hasBackground) {
+                var baseX = textPosition.x + backgroundMeta.inset;
+                var baseY = textPosition.y + backgroundMeta.inset;
+                var width = Math.max(0, backgroundWidth - backgroundMeta.inset * 2);
+                var height = Math.max(0, backgroundHeight - backgroundMeta.inset);
+                var backgroundStroke = typeof (style === null || style === void 0 ? void 0 : style.backgroundStroke) === 'string' && style.backgroundStroke.length > 0
+                    ? style.backgroundStroke
+                    : undefined;
+                var backgroundStrokeWidth = typeof (style === null || style === void 0 ? void 0 : style.backgroundStrokeWidth) === 'number'
+                    ? Math.max(0, style.backgroundStrokeWidth)
+                    : undefined;
+                var backgroundNode = _this.textBackgroundNodes.get(text.id);
+                if (!backgroundNode) {
+                    backgroundNode = _this.nodeFactory.createTextBackgroundNode({
+                        id: "text-background:".concat(text.id),
+                        x: baseX,
+                        y: baseY,
+                        width: width,
+                        height: height,
+                        fill: backgroundFill,
+                        stroke: backgroundStroke,
+                        strokeWidth: backgroundStrokeWidth,
+                        cornerRadius: backgroundMeta.cornerRadius,
+                    });
+                    _this.textBackgroundNodes.set(text.id, backgroundNode);
+                    (_p = (_o = _this.layers.getLayer('texts')) === null || _o === void 0 ? void 0 : _o.add) === null || _p === void 0 ? void 0 : _p.call(_o, backgroundNode);
+                }
+                else {
+                    _this.updatePosition(backgroundNode, { x: baseX, y: baseY });
+                    (_q = backgroundNode.setAttrs) === null || _q === void 0 ? void 0 : _q.call(backgroundNode, {
+                        width: width,
+                        height: height,
+                        fill: backgroundFill,
+                        stroke: backgroundStroke,
+                        strokeWidth: backgroundStrokeWidth,
+                        cornerRadius: backgroundMeta.cornerRadius,
+                        listening: false,
+                        name: 'text-background',
+                    });
+                }
+                (_r = node.moveToTop) === null || _r === void 0 ? void 0 : _r.call(node);
+            }
+            else {
+                var backgroundNode = _this.textBackgroundNodes.get(text.id);
+                (_s = backgroundNode === null || backgroundNode === void 0 ? void 0 : backgroundNode.destroy) === null || _s === void 0 ? void 0 : _s.call(backgroundNode);
+                _this.textBackgroundNodes.delete(text.id);
             }
         });
         Array.from(this.textNodes.keys()).forEach(function (id) {
-            var _a;
+            var _a, _b;
             if (!model.texts.has(id)) {
+                var backgroundNode = _this.textBackgroundNodes.get(id);
+                (_a = backgroundNode === null || backgroundNode === void 0 ? void 0 : backgroundNode.destroy) === null || _a === void 0 ? void 0 : _a.call(backgroundNode);
+                _this.textBackgroundNodes.delete(id);
                 var node = _this.textNodes.get(id);
-                (_a = node === null || node === void 0 ? void 0 : node.destroy) === null || _a === void 0 ? void 0 : _a.call(node);
+                (_b = node === null || node === void 0 ? void 0 : node.destroy) === null || _b === void 0 ? void 0 : _b.call(node);
                 _this.textNodes.delete(id);
                 _this.layers.markDirty('texts');
             }
         });
         this.layers.markDirty('texts');
     };
+    KonvaRenderer.prototype.resolveTextBackgroundMeta = function (model, text) {
+        var _a;
+        var ownerId = (_a = text.ownerId) !== null && _a !== void 0 ? _a : null;
+        if (!ownerId)
+            return { inset: 0 };
+        var owner = model.getElement(ownerId);
+        if (!owner)
+            return { inset: 0 };
+        var ownerStyle = owner.style;
+        var strokeWidth = typeof (ownerStyle === null || ownerStyle === void 0 ? void 0 : ownerStyle.strokeWidth) === 'number' ? Math.max(0, ownerStyle.strokeWidth) : 0;
+        var inset = strokeWidth > 0 ? strokeWidth / 2 : 0;
+        var rawCornerRadius = ownerStyle === null || ownerStyle === void 0 ? void 0 : ownerStyle.cornerRadius;
+        var isTopLabel = text.position.y <= 1;
+        if (!isTopLabel)
+            return { inset: inset };
+        if (typeof rawCornerRadius === 'number' && rawCornerRadius > 0) {
+            var topRadius = Math.max(0, rawCornerRadius - inset);
+            return { inset: inset, cornerRadius: [topRadius, topRadius, 0, 0] };
+        }
+        if (Array.isArray(rawCornerRadius) && rawCornerRadius.length === 4) {
+            var tl = typeof rawCornerRadius[0] === 'number' ? Math.max(0, rawCornerRadius[0] - inset) : 0;
+            var tr = typeof rawCornerRadius[1] === 'number' ? Math.max(0, rawCornerRadius[1] - inset) : 0;
+            return { inset: inset, cornerRadius: [tl, tr, 0, 0] };
+        }
+        return { inset: inset };
+    };
     KonvaRenderer.prototype.updatePosition = function (node, position) {
         if (node.position) {
             node.position({ x: position.x, y: position.y });
@@ -6980,27 +8422,22 @@ var KonvaRenderer = /** @class */ (function () {
         if (this.getNodeAttr(node, '__baseRotation') === undefined) {
             node.setAttrs({ __baseRotation: baseRotation });
         }
-        var orientedRotation = this.resolvePortBorderRotation(port, worldPosition, model, hostElementOverride);
-        node.setAttrs({ rotation: baseRotation + (orientedRotation !== null && orientedRotation !== void 0 ? orientedRotation : 0) });
-    };
-    KonvaRenderer.prototype.resolvePortBorderRotation = function (port, worldPosition, model, hostElementOverride) {
-        if (port.moveMode !== 'border' || port.orientToHostBorder === false) {
-            return null;
-        }
         var host = hostElementOverride !== null && hostElementOverride !== void 0 ? hostElementOverride : this.resolveHostElement(port.elementId, model);
-        if (!host)
-            return null;
-        var hostRect = {
-            x: host.position.x,
-            y: host.position.y,
-            width: host.size.width,
-            height: host.size.height,
-        };
-        var shape = this.shapeRegistry.get(host.shapeId);
-        var side = (shape === null || shape === void 0 ? void 0 : shape.resolveBorderSide)
-            ? shape.resolveBorderSide(worldPosition, hostRect)
-            : resolveBoundarySide(worldPosition, hostRect, 'rect');
-        return borderSideToInwardRotation(side);
+        var orientation = resolvePortOrientationContext({
+            port: port,
+            worldPlacement: worldPosition,
+            host: host,
+            shapeRegistry: this.shapeRegistry,
+            attachMode: 'external',
+        });
+        var transform = resolvePortWorldTransform({
+            port: port,
+            worldPlacement: worldPosition,
+            attachMode: 'external',
+            orientation: orientation,
+        });
+        this.updatePosition(node, transform.nodePosition);
+        node.setAttrs({ rotation: baseRotation + orientation.rotation });
     };
     KonvaRenderer.prototype.resolveHostElement = function (elementId, model) {
         var _a;
@@ -7091,6 +8528,7 @@ var KonvaInteraction = /** @class */ (function () {
         if (config === void 0) { config = {}; }
         var _a, _b;
         this.linkDragContext = null;
+        this.programmaticLinkSession = null;
         this.bound = false;
         this.handlers = [];
         this.windowHandlers = [];
@@ -7105,6 +8543,8 @@ var KonvaInteraction = /** @class */ (function () {
         this.textEditor = null;
         this.dragThreshold = 4;
         this.panSpeed = 0.5;
+        this.occupiedVertexTolerance = 2;
+        this.emittingElementLinkEnded = false;
         this.engine = engine;
         this.stage = config.stage;
         this.hitTester = (_a = config.hitTester) !== null && _a !== void 0 ? _a : new KonvaHitTester();
@@ -7125,6 +8565,121 @@ var KonvaInteraction = /** @class */ (function () {
             this.updateShapeHoverControl(this.lastPointerPosition);
         }
     };
+    KonvaInteraction.prototype.startLinkFromPort = function (sourcePortId, pointer) {
+        var _a, _b, _c;
+        var sourceElementId = this.engine.getPortElementId(sourcePortId);
+        if (!sourceElementId)
+            return;
+        var sourcePoint = (_a = this.engine.getPortLinkWorldPosition(sourcePortId)) !== null && _a !== void 0 ? _a : this.engine.getPortWorldPosition(sourcePortId);
+        if (!sourcePoint)
+            return;
+        if (((_b = this.dragState) === null || _b === void 0 ? void 0 : _b.mode) === 'link-drag' || this.programmaticLinkSession) {
+            this.cancelLink();
+        }
+        if (this.dragState &&
+            this.dragState.mode !== 'shape-control-drag' &&
+            this.dragState.mode !== 'link-drag') {
+            return;
+        }
+        var start = __assign({}, sourcePoint);
+        if (((_c = this.dragState) === null || _c === void 0 ? void 0 : _c.mode) === 'shape-control-drag') {
+            this.programmaticLinkSession = {
+                sourcePortId: sourcePortId,
+                sourceElementId: sourceElementId,
+                start: start,
+                current: start,
+            };
+        }
+        else {
+            this.dragState = {
+                mode: 'link-drag',
+                sourcePortId: sourcePortId,
+                sourceElementId: sourceElementId,
+                start: start,
+                current: start,
+                isMulti: false,
+                hasMoved: false,
+                completionBehavior: 'explicit',
+            };
+        }
+        this.linkDragContext = { sourcePortId: sourcePortId, sourceElementId: sourceElementId };
+        this.engine.emitElementLinkStarted({ sourcePortId: sourcePortId, sourceElementId: sourceElementId, startWorld: __assign({}, start) });
+        this.setCursor('crosshair');
+        if (pointer) {
+            this.updateLinkPreview(pointer);
+        }
+    };
+    KonvaInteraction.prototype.updateLinkPreview = function (pointer) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        if (this.programmaticLinkSession) {
+            this.programmaticLinkSession.current = __assign({}, pointer);
+        }
+        else if (((_a = this.dragState) === null || _a === void 0 ? void 0 : _a.mode) === 'link-drag') {
+            this.dragState.current = __assign({}, pointer);
+            this.dragState.hasMoved = true;
+        }
+        else {
+            return;
+        }
+        var sourcePortId = (_c = (_b = this.programmaticLinkSession) === null || _b === void 0 ? void 0 : _b.sourcePortId) !== null && _c !== void 0 ? _c : (((_d = this.dragState) === null || _d === void 0 ? void 0 : _d.mode) === 'link-drag' ? this.dragState.sourcePortId : null);
+        if (!sourcePortId)
+            return;
+        var source = this.resolveLinkPreviewSource(sourcePortId, pointer);
+        if (source) {
+            (_e = this.renderer) === null || _e === void 0 ? void 0 : _e.renderTempLink([source, pointer]);
+        }
+        var hit = this.resolveHit(pointer);
+        if ((hit === null || hit === void 0 ? void 0 : hit.type) === 'element') {
+            var placeholder = this.createPlaceholderPort(hit.id, pointer, sourcePortId);
+            if (placeholder) {
+                var hostElement = this.getElementById(hit.id);
+                if (hostElement) {
+                    var hostWorld = (_f = this.engine.getElementWorldPosition(hit.id)) !== null && _f !== void 0 ? _f : hostElement.position;
+                    (_h = (_g = this.renderer) === null || _g === void 0 ? void 0 : _g.renderPortPlaceholder) === null || _h === void 0 ? void 0 : _h.call(_g, placeholder, { id: hostElement.id, position: hostWorld, size: hostElement.size, shapeId: hostElement.shapeId });
+                }
+                else {
+                    (_k = (_j = this.renderer) === null || _j === void 0 ? void 0 : _j.renderPortPlaceholder) === null || _k === void 0 ? void 0 : _k.call(_j, placeholder);
+                }
+            }
+            return;
+        }
+        (_m = (_l = this.renderer) === null || _l === void 0 ? void 0 : _l.clearPortPlaceholder) === null || _m === void 0 ? void 0 : _m.call(_l);
+    };
+    KonvaInteraction.prototype.completeLinkToPort = function (targetPortId) {
+        var _a, _b;
+        var session = this.resolveActiveLinkSession();
+        if (!session)
+            return;
+        var completion = this.tryCreateLinkToPort(session.sourcePortId, session.sourceElementId, targetPortId);
+        this.finishLinkDragSession({
+            sourcePortId: session.sourcePortId,
+            sourceElementId: session.sourceElementId,
+            createdLinkId: (_a = completion.createdLinkId) !== null && _a !== void 0 ? _a : undefined,
+            targetPortId: completion.targetPortId,
+            targetElementId: (_b = completion.targetElementId) !== null && _b !== void 0 ? _b : undefined,
+            cancelled: completion.createdLinkId === null,
+            fromProgrammatic: session.fromProgrammatic,
+        });
+    };
+    KonvaInteraction.prototype.completeLinkToElement = function (targetElementId, pointer) {
+        var _a, _b, _c;
+        var session = this.resolveActiveLinkSession();
+        if (!session)
+            return;
+        var completion = this.tryCreateLinkToElement(session.sourcePortId, session.sourceElementId, targetElementId, pointer);
+        this.finishLinkDragSession({
+            sourcePortId: session.sourcePortId,
+            sourceElementId: session.sourceElementId,
+            createdLinkId: (_a = completion.createdLinkId) !== null && _a !== void 0 ? _a : undefined,
+            targetPortId: (_b = completion.targetPortId) !== null && _b !== void 0 ? _b : undefined,
+            targetElementId: (_c = completion.targetElementId) !== null && _c !== void 0 ? _c : undefined,
+            cancelled: completion.createdLinkId === null,
+            fromProgrammatic: session.fromProgrammatic,
+        });
+    };
+    KonvaInteraction.prototype.cancelLink = function () {
+        this.cancelLinkDrag();
+    };
     KonvaInteraction.prototype.buildPointerInfo = function (world, nativeEvent) {
         var evt = nativeEvent !== null && nativeEvent !== void 0 ? nativeEvent : undefined;
         var client = evt ? { x: evt.clientX, y: evt.clientY } : { x: world.x, y: world.y };
@@ -7252,6 +8807,7 @@ var KonvaInteraction = /** @class */ (function () {
                         current: point,
                         isMulti: isMulti,
                         hasMoved: false,
+                        completionBehavior: 'hover-or-release',
                     };
                     _this.linkDragContext = { sourcePortId: hit.id, sourceElementId: elementId };
                     _this.engine.emitElementLinkStarted({ sourcePortId: hit.id, sourceElementId: elementId, startWorld: __assign({}, point) });
@@ -7326,22 +8882,29 @@ var KonvaInteraction = /** @class */ (function () {
             }
             _this.clearActiveShapeHoverControl();
             if (_this.dragState.mode === 'shape-control-drag') {
-                var delta = { x: point.x - _this.dragState.start.x, y: point.y - _this.dragState.start.y };
+                var dragState = _this.dragState;
+                var delta = { x: point.x - dragState.start.x, y: point.y - dragState.start.y };
                 var moved = Math.hypot(delta.x, delta.y) >= _this.dragThreshold;
-                if (!_this.dragState.hasMoved && moved) {
-                    _this.dragState.hasMoved = true;
-                    _this.emitShapeHoverControlInteraction('drag-start', _this.dragState.control, point, nativeEvent, {
-                        sessionId: _this.dragState.sessionId,
-                        startPointer: _this.dragState.startPointer,
+                if (!dragState.hasMoved && moved) {
+                    dragState.hasMoved = true;
+                    _this.emitShapeHoverControlInteraction('drag-start', dragState.control, point, nativeEvent, {
+                        sessionId: dragState.sessionId,
+                        startPointer: dragState.startPointer,
                         delta: delta,
                     });
+                    if (_this.dragState !== dragState) {
+                        return;
+                    }
                 }
-                if (_this.dragState.hasMoved) {
-                    _this.emitShapeHoverControlInteraction('drag-move', _this.dragState.control, point, nativeEvent, {
-                        sessionId: _this.dragState.sessionId,
-                        startPointer: _this.dragState.startPointer,
+                if (dragState.hasMoved) {
+                    _this.emitShapeHoverControlInteraction('drag-move', dragState.control, point, nativeEvent, {
+                        sessionId: dragState.sessionId,
+                        startPointer: dragState.startPointer,
                         delta: delta,
                     });
+                    if (_this.dragState !== dragState) {
+                        return;
+                    }
                 }
             }
             else if (_this.dragState.mode === 'move') {
@@ -7379,12 +8942,14 @@ var KonvaInteraction = /** @class */ (function () {
                 _this.dragState.hasMoved = _this.dragState.hasMoved || moved;
                 _this.dragState.current = point;
                 if (_this.dragState.hasMoved) {
-                    var source = _this.engine.getPortWorldPosition(_this.dragState.sourcePortId);
+                    var hit = _this.resolveHit(point);
+                    var source = _this.resolveLinkPreviewSource(_this.dragState.sourcePortId, point, hit);
                     if (source) {
                         (_b = _this.renderer) === null || _b === void 0 ? void 0 : _b.renderTempLink([source, point]);
                     }
-                    var hit = _this.resolveHit(point);
-                    if ((hit === null || hit === void 0 ? void 0 : hit.type) === 'port' && hit.id !== linkDrag.sourcePortId) {
+                    if (linkDrag.completionBehavior === 'hover-or-release' &&
+                        (hit === null || hit === void 0 ? void 0 : hit.type) === 'port' &&
+                        hit.id !== linkDrag.sourcePortId) {
                         var completion = _this.tryCreateLinkToPort(linkDrag.sourcePortId, linkDrag.sourceElementId, hit.id);
                         if (completion.createdLinkId) {
                             var pointerInfo = _this.buildPointerInfo(point, nativeEvent);
@@ -7393,7 +8958,9 @@ var KonvaInteraction = /** @class */ (function () {
                                 elementId: linkDrag.sourceElementId,
                                 pointer: pointerInfo,
                             });
-                            _this.engine.emitElementLinkEnded({
+                            _this.dragState = null;
+                            _this.linkDragContext = null;
+                            _this.emitElementLinkEndedSafely({
                                 sourcePortId: linkDrag.sourcePortId,
                                 sourceElementId: linkDrag.sourceElementId,
                                 linkId: completion.createdLinkId,
@@ -7403,8 +8970,6 @@ var KonvaInteraction = /** @class */ (function () {
                             });
                             (_d = _this.renderer) === null || _d === void 0 ? void 0 : _d.clearTempLink();
                             (_f = (_e = _this.renderer) === null || _e === void 0 ? void 0 : _e.clearPortPlaceholder) === null || _f === void 0 ? void 0 : _f.call(_e);
-                            _this.dragState = null;
-                            _this.linkDragContext = null;
                             _this.setCursor('default');
                             return;
                         }
@@ -7495,6 +9060,7 @@ var KonvaInteraction = /** @class */ (function () {
             var pointerPoint = _this.getPointerPosition();
             if (((_a = _this.dragState) === null || _a === void 0 ? void 0 : _a.mode) === 'shape-control-drag') {
                 var dragState = _this.dragState;
+                _this.dragState = null;
                 var point = pointerPoint !== null && pointerPoint !== void 0 ? pointerPoint : dragState.start;
                 var delta = { x: point.x - dragState.start.x, y: point.y - dragState.start.y };
                 var dragContext = {
@@ -7509,7 +9075,6 @@ var KonvaInteraction = /** @class */ (function () {
                     _this.emitShapeHoverControlInteraction('click', dragState.control, point, nativeEvent);
                     _this.emitLegacyShapeHoverControlActivation(dragState.control, point, nativeEvent);
                 }
-                _this.dragState = null;
                 if (pointerPoint) {
                     _this.lastPointerPosition = __assign({}, pointerPoint);
                     _this.updateShapeHoverControl(pointerPoint);
@@ -7522,46 +9087,45 @@ var KonvaInteraction = /** @class */ (function () {
                 return;
             }
             if (((_b = _this.dragState) === null || _b === void 0 ? void 0 : _b.mode) === 'link-drag') {
+                var linkState = _this.dragState;
                 var point = pointerPoint;
-                var pointerInfo = _this.buildPointerInfo(point !== null && point !== void 0 ? point : _this.dragState.start, nativeEvent);
+                var pointerInfo = _this.buildPointerInfo(point !== null && point !== void 0 ? point : linkState.start, nativeEvent);
                 var sourcePortPayload = {
-                    portId: _this.dragState.sourcePortId,
-                    elementId: _this.dragState.sourceElementId,
+                    portId: linkState.sourcePortId,
+                    elementId: linkState.sourceElementId,
                     pointer: pointerInfo,
                 };
                 _this.engine.emitPortMouseUp(sourcePortPayload);
                 var createdLinkId = null;
                 var targetPortId = null;
                 var targetElementId = null;
-                if (!_this.dragState.hasMoved) {
-                    _this.handleSelection({ id: _this.dragState.sourcePortId, type: 'port' }, _this.dragState.isMulti);
+                if (!linkState.hasMoved) {
+                    _this.handleSelection({ id: linkState.sourcePortId, type: 'port' }, linkState.isMulti);
                 }
                 else {
                     var hit = point ? _this.resolveHit(point) : null;
-                    if (hit && hit.type === 'port' && hit.id !== _this.dragState.sourcePortId) {
-                        var completion = _this.tryCreateLinkToPort(_this.dragState.sourcePortId, _this.dragState.sourceElementId, hit.id);
+                    if (linkState.completionBehavior === 'hover-or-release' &&
+                        hit &&
+                        hit.type === 'port' &&
+                        hit.id !== linkState.sourcePortId) {
+                        var completion = _this.tryCreateLinkToPort(linkState.sourcePortId, linkState.sourceElementId, hit.id);
                         createdLinkId = completion.createdLinkId;
                         targetPortId = completion.targetPortId;
                         targetElementId = completion.targetElementId;
                     }
-                    else if (hit && hit.type === 'element' && point) {
+                    else if (linkState.completionBehavior === 'hover-or-release' && hit && hit.type === 'element' && point) {
                         targetElementId = hit.id;
-                        var createdPortId = _this.createPortForLink(hit.id, point, _this.dragState.sourcePortId);
-                        if (createdPortId) {
-                            targetPortId = createdPortId;
-                            createdLinkId = createId();
-                            _this.engine.addLink({
-                                id: createdLinkId,
-                                sourcePortId: _this.dragState.sourcePortId,
-                                targetPortId: createdPortId,
-                                points: [],
-                            });
-                        }
+                        var completion = _this.tryCreateLinkToElement(linkState.sourcePortId, linkState.sourceElementId, hit.id, point);
+                        targetPortId = completion.targetPortId;
+                        createdLinkId = completion.createdLinkId;
+                        targetElementId = completion.targetElementId;
                     }
                 }
-                _this.engine.emitElementLinkEnded({
-                    sourcePortId: _this.dragState.sourcePortId,
-                    sourceElementId: _this.dragState.sourceElementId,
+                _this.dragState = null;
+                _this.linkDragContext = null;
+                _this.emitElementLinkEndedSafely({
+                    sourcePortId: linkState.sourcePortId,
+                    sourceElementId: linkState.sourceElementId,
                     linkId: createdLinkId !== null && createdLinkId !== void 0 ? createdLinkId : undefined,
                     targetPortId: targetPortId !== null && targetPortId !== void 0 ? targetPortId : undefined,
                     targetElementId: targetElementId !== null && targetElementId !== void 0 ? targetElementId : undefined,
@@ -7795,7 +9359,7 @@ var KonvaInteraction = /** @class */ (function () {
         addHit(this.findElementHit(point));
         if (hits.length === 0)
             return null;
-        var priority = ['resize-handle', 'link-handle', 'shape-hover-control', 'port', 'link', 'text', 'element'];
+        var priority = ['resize-handle', 'link-handle', 'port', 'shape-hover-control', 'link', 'text', 'element'];
         var _loop_1 = function (i) {
             var candidates = hits.filter(function (hit) { return hit.type === priority[i]; });
             if (candidates.length === 0)
@@ -8241,10 +9805,10 @@ var KonvaInteraction = /** @class */ (function () {
         for (var index = 0; index < controls.length; index += 1) {
             var control = controls[index];
             var targetHoverCandidate = control.visibilityTriggers.includes('target-hover')
-                ? this.resolveTargetHoverCandidate(point, transformed, ellipseMidPoints, control)
+                ? this.resolveTargetHoverCandidate(point, transformed, ellipseMidPoints, control, elementId)
                 : null;
             var elementHoverCandidate = control.visibilityTriggers.includes('element-hover')
-                ? this.resolveElementHoverCandidate(point, transformed, ellipseMidPoints, control)
+                ? this.resolveElementHoverCandidate(point, transformed, ellipseMidPoints, control, elementId)
                 : null;
             var candidate = targetHoverCandidate !== null && targetHoverCandidate !== void 0 ? targetHoverCandidate : elementHoverCandidate;
             if (!candidate)
@@ -8260,7 +9824,7 @@ var KonvaInteraction = /** @class */ (function () {
         }
         return null;
     };
-    KonvaInteraction.prototype.resolveTargetHoverCandidate = function (point, geometry, ellipseMidPoints, control) {
+    KonvaInteraction.prototype.resolveTargetHoverCandidate = function (point, geometry, ellipseMidPoints, control, elementId) {
         if (control.targetKind === 'ellipse-midpoint') {
             var targets = this.resolveEligibleEllipseMidPoints(control, ellipseMidPoints);
             if (!targets.length || control.tolerance <= 0)
@@ -8281,7 +9845,7 @@ var KonvaInteraction = /** @class */ (function () {
         }
         if (!geometry)
             return null;
-        var indices = this.resolveEligibleTargetIndices(control, geometry);
+        var indices = this.resolveEligibleTargetIndices(control, geometry, elementId);
         if (!indices.length || control.tolerance <= 0)
             return null;
         if (control.targetKind === 'vertex') {
@@ -8331,7 +9895,7 @@ var KonvaInteraction = /** @class */ (function () {
         }
         return best ? { targetIndex: best.targetIndex, target: best.target } : null;
     };
-    KonvaInteraction.prototype.resolveElementHoverCandidate = function (point, geometry, ellipseMidPoints, control) {
+    KonvaInteraction.prototype.resolveElementHoverCandidate = function (point, geometry, ellipseMidPoints, control, elementId) {
         if (control.targetKind === 'ellipse-midpoint') {
             var targets = this.resolveEligibleEllipseMidPoints(control, ellipseMidPoints);
             if (!targets.length)
@@ -8350,7 +9914,7 @@ var KonvaInteraction = /** @class */ (function () {
         }
         if (!geometry)
             return null;
-        var indices = this.resolveEligibleTargetIndices(control, geometry);
+        var indices = this.resolveEligibleTargetIndices(control, geometry, elementId);
         if (!indices.length)
             return null;
         if (control.targetKind === 'vertex') {
@@ -8394,17 +9958,46 @@ var KonvaInteraction = /** @class */ (function () {
         }
         return best ? { targetIndex: best.targetIndex, target: best.target } : null;
     };
-    KonvaInteraction.prototype.resolveEligibleTargetIndices = function (control, geometry) {
+    KonvaInteraction.prototype.resolveEligibleTargetIndices = function (control, geometry, elementId) {
         var _a;
         var source = control.targetKind === 'vertex' ? geometry.vertices : geometry.edges;
         if (!source.length)
             return [];
+        var occupiedVertexIndices = this.resolveOccupiedVertexIndices(elementId, geometry);
         if (control.allowAllTargets === true) {
-            return Array.from({ length: source.length }, function (_, index) { return index; });
+            return Array.from({ length: source.length }, function (_, index) { return index; }).filter(function (index) {
+                return control.targetKind === 'vertex' ? !occupiedVertexIndices.has(index) : true;
+            });
         }
         if (!((_a = control.targetIndices) === null || _a === void 0 ? void 0 : _a.length))
             return [];
-        return control.targetIndices.filter(function (targetIndex) { return targetIndex >= 0 && targetIndex < source.length; });
+        return control.targetIndices.filter(function (targetIndex) {
+            return targetIndex >= 0 &&
+                targetIndex < source.length &&
+                (control.targetKind !== 'vertex' || !occupiedVertexIndices.has(targetIndex));
+        });
+    };
+    KonvaInteraction.prototype.resolveOccupiedVertexIndices = function (elementId, geometry) {
+        var _this = this;
+        if (!geometry.vertices.length)
+            return new Set();
+        var ports = this.engine.getState().ports.filter(function (port) { return port.elementId === elementId; });
+        if (!ports.length)
+            return new Set();
+        var tolerance = this.occupiedVertexTolerance;
+        var occupied = new Set();
+        ports.forEach(function (port) {
+            var world = _this.engine.getPortWorldPosition(port.id);
+            if (!world)
+                return;
+            geometry.vertices.forEach(function (vertex, index) {
+                if (Math.abs(vertex.position.x - world.x) <= tolerance &&
+                    Math.abs(vertex.position.y - world.y) <= tolerance) {
+                    occupied.add(index);
+                }
+            });
+        });
+        return occupied;
     };
     KonvaInteraction.prototype.resolveEligibleEllipseMidPoints = function (control, targets) {
         var _a;
@@ -8826,14 +10419,19 @@ var KonvaInteraction = /** @class */ (function () {
         this.engine.setSelection(Array.from(selected));
     };
     KonvaInteraction.prototype.applyPortConstraints = function (portId, worldTarget) {
+        var _a;
         var port = this.getPortById(portId);
         if (!port)
             return worldTarget;
+        var element = this.getElementById(port.elementId);
+        if (!element)
+            return worldTarget;
         var elementPos = this.engine.getElementWorldPosition(port.elementId);
         if (!elementPos)
             return worldTarget;
         var relative = { x: worldTarget.x - elementPos.x, y: worldTarget.y - elementPos.y };
         var style = port.style;
+        var limits = (_a = element.portMovement) === null || _a === void 0 ? void 0 : _a.positionLimits;
         var constrained = __assign({}, relative);
         if ((style === null || style === void 0 ? void 0 : style.moveAxis) === 'horizontal') {
             constrained.y = port.position.y;
@@ -8841,12 +10439,82 @@ var KonvaInteraction = /** @class */ (function () {
         else if ((style === null || style === void 0 ? void 0 : style.moveAxis) === 'vertical') {
             constrained.x = port.position.x;
         }
-        if (style === null || style === void 0 ? void 0 : style.moveBounds) {
-            var bounds = style.moveBounds;
-            constrained.x = Math.min(bounds.x + bounds.width, Math.max(bounds.x, constrained.x));
-            constrained.y = Math.min(bounds.y + bounds.height, Math.max(bounds.y, constrained.y));
+        if (style === null || style === void 0 ? void 0 : style.moveBounds) {
+            var bounds = style.moveBounds;
+            constrained.x = Math.min(bounds.x + bounds.width, Math.max(bounds.x, constrained.x));
+            constrained.y = Math.min(bounds.y + bounds.height, Math.max(bounds.y, constrained.y));
+        }
+        if (limits === null || limits === void 0 ? void 0 : limits.x) {
+            if (typeof limits.x.min === 'number')
+                constrained.x = Math.max(constrained.x, limits.x.min);
+            if (typeof limits.x.max === 'number')
+                constrained.x = Math.min(constrained.x, limits.x.max);
+        }
+        if (limits === null || limits === void 0 ? void 0 : limits.y) {
+            if (typeof limits.y.min === 'number')
+                constrained.y = Math.max(constrained.y, limits.y.min);
+            if (typeof limits.y.max === 'number')
+                constrained.y = Math.min(constrained.y, limits.y.max);
+        }
+        return { x: elementPos.x + constrained.x, y: elementPos.y + constrained.y };
+    };
+    KonvaInteraction.prototype.resolveLinkPreviewSource = function (sourcePortId, pointer, hit) {
+        var resolvedHit = hit !== null && hit !== void 0 ? hit : this.resolveHit(pointer);
+        if ((resolvedHit === null || resolvedHit === void 0 ? void 0 : resolvedHit.type) === 'port' && resolvedHit.id !== sourcePortId) {
+            return this.engine.getPortLinkWorldPosition(sourcePortId, { oppositePortId: resolvedHit.id });
+        }
+        return this.engine.getPortLinkWorldPosition(sourcePortId);
+    };
+    KonvaInteraction.prototype.resolveActiveLinkSession = function () {
+        var _a;
+        if (this.programmaticLinkSession) {
+            return {
+                sourcePortId: this.programmaticLinkSession.sourcePortId,
+                sourceElementId: this.programmaticLinkSession.sourceElementId,
+                fromProgrammatic: true,
+            };
+        }
+        if (((_a = this.dragState) === null || _a === void 0 ? void 0 : _a.mode) === 'link-drag') {
+            return {
+                sourcePortId: this.dragState.sourcePortId,
+                sourceElementId: this.dragState.sourceElementId,
+                fromProgrammatic: false,
+            };
+        }
+        return null;
+    };
+    KonvaInteraction.prototype.finishLinkDragSession = function (result) {
+        var _a, _b, _c, _d;
+        this.linkDragContext = null;
+        if (result.fromProgrammatic) {
+            this.programmaticLinkSession = null;
+        }
+        else if (((_a = this.dragState) === null || _a === void 0 ? void 0 : _a.mode) === 'link-drag') {
+            this.dragState = null;
+        }
+        (_b = this.renderer) === null || _b === void 0 ? void 0 : _b.clearTempLink();
+        (_d = (_c = this.renderer) === null || _c === void 0 ? void 0 : _c.clearPortPlaceholder) === null || _d === void 0 ? void 0 : _d.call(_c);
+        this.clearActiveShapeHoverControl();
+        this.setCursor('default');
+        this.emitElementLinkEndedSafely({
+            sourcePortId: result.sourcePortId,
+            sourceElementId: result.sourceElementId,
+            linkId: result.createdLinkId,
+            targetPortId: result.targetPortId,
+            targetElementId: result.targetElementId,
+            cancelled: result.cancelled,
+        });
+    };
+    KonvaInteraction.prototype.emitElementLinkEndedSafely = function (event) {
+        if (this.emittingElementLinkEnded)
+            return;
+        this.emittingElementLinkEnded = true;
+        try {
+            this.engine.emitElementLinkEnded(event);
+        }
+        finally {
+            this.emittingElementLinkEnded = false;
         }
-        return { x: elementPos.x + constrained.x, y: elementPos.y + constrained.y };
     };
     KonvaInteraction.prototype.tryCreateLinkToPort = function (sourcePortId, sourceElementId, targetPortId) {
         var targetElementId = this.engine.getPortElementId(targetPortId);
@@ -8871,6 +10539,33 @@ var KonvaInteraction = /** @class */ (function () {
         });
         return { createdLinkId: createdLinkId, targetPortId: targetPortId, targetElementId: targetElementId };
     };
+    KonvaInteraction.prototype.tryCreateLinkToElement = function (sourcePortId, sourceElementId, targetElementId, worldPoint) {
+        var targetPort = this.createPortForLink(targetElementId, worldPoint, sourcePortId);
+        if (!targetPort) {
+            return { createdLinkId: null, targetPortId: null, targetElementId: null };
+        }
+        var cancelledByHost = this.engine.emitElementLinkConnecting({
+            sourcePortId: sourcePortId,
+            sourceElementId: sourceElementId,
+            targetPortId: targetPort.id,
+            targetElementId: targetElementId,
+            cancel: function () { },
+            cancelled: false,
+        });
+        if (cancelledByHost) {
+            return { createdLinkId: null, targetPortId: targetPort.id, targetElementId: targetElementId };
+        }
+        this.engine.addPortToElement(targetElementId, targetPort);
+        this.engine.movePortTo(targetPort.id, worldPoint.x, worldPoint.y);
+        var createdLinkId = createId();
+        this.engine.addLink({
+            id: createdLinkId,
+            sourcePortId: sourcePortId,
+            targetPortId: targetPort.id,
+            points: [],
+        });
+        return { createdLinkId: createdLinkId, targetPortId: targetPort.id, targetElementId: targetElementId };
+    };
     KonvaInteraction.prototype.createPortForLink = function (elementId, worldPoint, sourcePortId) {
         var _a, _b, _c, _d;
         var element = this.getElementById(elementId);
@@ -8885,9 +10580,8 @@ var KonvaInteraction = /** @class */ (function () {
         var destinationMoveMode = ((_b = element.portMovement) === null || _b === void 0 ? void 0 : _b.moveMode) && element.portMovement.moveMode !== 'anchors'
             ? element.portMovement.moveMode
             : undefined;
-        var portId = createId();
-        this.engine.addPortToElement(elementId, {
-            id: portId,
+        return {
+            id: createId(),
             elementId: elementId,
             position: relative,
             shapeId: sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.shapeId,
@@ -8896,9 +10590,12 @@ var KonvaInteraction = /** @class */ (function () {
             moveMode: destinationMoveMode !== null && destinationMoveMode !== void 0 ? destinationMoveMode : sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.moveMode,
             anchorCenter: (_c = sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.anchorCenter) !== null && _c !== void 0 ? _c : true,
             orientToHostBorder: (_d = sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.orientToHostBorder) !== null && _d !== void 0 ? _d : true,
-        });
-        this.engine.movePortTo(portId, worldPoint.x, worldPoint.y);
-        return portId;
+            placementPoint: (sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.placementPoint) ? __assign({}, sourcePort.placementPoint) : undefined,
+            linkAttachPoint: (sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.linkAttachPoint) ? __assign({}, sourcePort.linkAttachPoint) : undefined,
+            externalLinkAttachPoint: (sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.externalLinkAttachPoint) ? __assign({}, sourcePort.externalLinkAttachPoint) : undefined,
+            internalLinkAttachPoint: (sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.internalLinkAttachPoint) ? __assign({}, sourcePort.internalLinkAttachPoint) : undefined,
+            rotationPivot: (sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.rotationPivot) ? __assign({}, sourcePort.rotationPivot) : undefined,
+        };
     };
     KonvaInteraction.prototype.createPlaceholderPort = function (elementId, worldPoint, sourcePortId) {
         var _a, _b, _c;
@@ -8917,6 +10614,11 @@ var KonvaInteraction = /** @class */ (function () {
             moveMode: destinationMoveMode !== null && destinationMoveMode !== void 0 ? destinationMoveMode : sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.moveMode,
             anchorCenter: (_b = sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.anchorCenter) !== null && _b !== void 0 ? _b : true,
             orientToHostBorder: (_c = sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.orientToHostBorder) !== null && _c !== void 0 ? _c : true,
+            placementPoint: (sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.placementPoint) ? __assign({}, sourcePort.placementPoint) : undefined,
+            linkAttachPoint: (sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.linkAttachPoint) ? __assign({}, sourcePort.linkAttachPoint) : undefined,
+            externalLinkAttachPoint: (sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.externalLinkAttachPoint) ? __assign({}, sourcePort.externalLinkAttachPoint) : undefined,
+            internalLinkAttachPoint: (sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.internalLinkAttachPoint) ? __assign({}, sourcePort.internalLinkAttachPoint) : undefined,
+            rotationPivot: (sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.rotationPivot) ? __assign({}, sourcePort.rotationPivot) : undefined,
         };
     };
     KonvaInteraction.prototype.getElementById = function (id) {
@@ -8960,47 +10662,77 @@ var KonvaInteraction = /** @class */ (function () {
         (_b = stageAny === null || stageAny === void 0 ? void 0 : stageAny.position) === null || _b === void 0 ? void 0 : _b.call(stageAny, this.pan);
     };
     KonvaInteraction.prototype.cancelLinkDrag = function () {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         if (((_a = this.dragState) === null || _a === void 0 ? void 0 : _a.mode) === 'shape-control-drag') {
-            var point_1 = (_b = this.lastPointerPosition) !== null && _b !== void 0 ? _b : this.dragState.start;
-            if (this.dragState.hasMoved) {
-                this.emitShapeHoverControlInteraction('drag-end', this.dragState.control, point_1, undefined, {
-                    sessionId: this.dragState.sessionId,
-                    startPointer: this.dragState.startPointer,
+            var dragState = this.dragState;
+            var point_1 = (_b = this.lastPointerPosition) !== null && _b !== void 0 ? _b : dragState.start;
+            this.dragState = null;
+            if (dragState.hasMoved) {
+                this.emitShapeHoverControlInteraction('drag-end', dragState.control, point_1, undefined, {
+                    sessionId: dragState.sessionId,
+                    startPointer: dragState.startPointer,
                     delta: {
-                        x: point_1.x - this.dragState.start.x,
-                        y: point_1.y - this.dragState.start.y,
+                        x: point_1.x - dragState.start.x,
+                        y: point_1.y - dragState.start.y,
                     },
                 });
             }
-            this.dragState = null;
+            if (this.programmaticLinkSession) {
+                var session = this.programmaticLinkSession;
+                this.programmaticLinkSession = null;
+                this.linkDragContext = null;
+                (_c = this.renderer) === null || _c === void 0 ? void 0 : _c.clearTempLink();
+                (_e = (_d = this.renderer) === null || _d === void 0 ? void 0 : _d.clearPortPlaceholder) === null || _e === void 0 ? void 0 : _e.call(_d);
+                this.emitElementLinkEndedSafely({
+                    sourcePortId: session.sourcePortId,
+                    sourceElementId: session.sourceElementId,
+                    cancelled: true,
+                });
+            }
+            this.clearActiveShapeHoverControl();
+            this.setCursor('default');
+            return;
+        }
+        if (this.programmaticLinkSession) {
+            var session = this.programmaticLinkSession;
+            this.programmaticLinkSession = null;
+            this.linkDragContext = null;
+            (_f = this.renderer) === null || _f === void 0 ? void 0 : _f.clearTempLink();
+            (_h = (_g = this.renderer) === null || _g === void 0 ? void 0 : _g.clearPortPlaceholder) === null || _h === void 0 ? void 0 : _h.call(_g);
+            this.emitElementLinkEndedSafely({
+                sourcePortId: session.sourcePortId,
+                sourceElementId: session.sourceElementId,
+                cancelled: true,
+            });
             this.clearActiveShapeHoverControl();
             this.setCursor('default');
             return;
         }
         if (!this.dragState || this.dragState.mode !== 'link-drag') {
             if (this.linkDragContext) {
-                this.engine.emitElementLinkEnded(__assign(__assign({}, this.linkDragContext), { cancelled: true }));
+                var context = this.linkDragContext;
                 this.linkDragContext = null;
+                this.emitElementLinkEndedSafely(__assign(__assign({}, context), { cancelled: true }));
             }
             return;
         }
-        var point = (_c = this.dragState.current) !== null && _c !== void 0 ? _c : this.dragState.start;
+        var linkState = this.dragState;
+        var point = (_j = linkState.current) !== null && _j !== void 0 ? _j : linkState.start;
         var pointerInfo = this.buildPointerInfo(point, null);
         this.engine.emitPortMouseUp({
-            portId: this.dragState.sourcePortId,
-            elementId: this.dragState.sourceElementId,
+            portId: linkState.sourcePortId,
+            elementId: linkState.sourceElementId,
             pointer: pointerInfo,
         });
-        this.engine.emitElementLinkEnded({
-            sourcePortId: this.dragState.sourcePortId,
-            sourceElementId: this.dragState.sourceElementId,
+        this.dragState = null;
+        this.linkDragContext = null;
+        (_k = this.renderer) === null || _k === void 0 ? void 0 : _k.clearTempLink();
+        (_m = (_l = this.renderer) === null || _l === void 0 ? void 0 : _l.clearPortPlaceholder) === null || _m === void 0 ? void 0 : _m.call(_l);
+        this.emitElementLinkEndedSafely({
+            sourcePortId: linkState.sourcePortId,
+            sourceElementId: linkState.sourceElementId,
             cancelled: true,
         });
-        this.linkDragContext = null;
-        (_d = this.renderer) === null || _d === void 0 ? void 0 : _d.clearTempLink();
-        (_f = (_e = this.renderer) === null || _e === void 0 ? void 0 : _e.clearPortPlaceholder) === null || _f === void 0 ? void 0 : _f.call(_e);
-        this.dragState = null;
         this.clearActiveShapeHoverControl();
         this.setCursor('default');
     };
@@ -9224,6 +10956,15 @@ var normalizeVector = function (vector) {
         return { x: 0, y: -1 };
     return { x: vector.x / length, y: vector.y / length };
 };
+var sideToNormal = function (side) {
+    if (side === 'left')
+        return { x: -1, y: 0 };
+    if (side === 'right')
+        return { x: 1, y: 0 };
+    if (side === 'top')
+        return { x: 0, y: -1 };
+    return { x: 0, y: 1 };
+};
 var resolveCardinalAnchors = function (rect) {
     var cx = rect.x + rect.width / 2;
     var cy = rect.y + rect.height / 2;
@@ -9303,9 +11044,15 @@ var BuiltInShape = /** @class */ (function () {
     BuiltInShape.prototype.resolveBorderSide = function (point, rect) {
         return resolveBoundarySide(point, rect, 'rect');
     };
+    BuiltInShape.prototype.resolveBorderNormal = function (point, rect) {
+        return sideToNormal(this.resolveBorderSide(point, rect));
+    };
     BuiltInShape.prototype.resolvePortAnchors = function (_rect, _options) {
         return [];
     };
+    BuiltInShape.prototype.resolvePortBorderTransform = function (_context) {
+        return undefined;
+    };
     BuiltInShape.prototype.resolveHoverGeometry = function (_rect) {
         return undefined;
     };
@@ -9535,6 +11282,78 @@ var getKonva = function () {
     var module = require('konva');
     return (_a = module.default) !== null && _a !== void 0 ? _a : module;
 };
+var createBounds = function () { return ({
+    minX: Number.POSITIVE_INFINITY,
+    minY: Number.POSITIVE_INFINITY,
+    maxX: Number.NEGATIVE_INFINITY,
+    maxY: Number.NEGATIVE_INFINITY,
+}); };
+var expandBounds = function (bounds, x, y) {
+    if (x < bounds.minX)
+        bounds.minX = x;
+    if (y < bounds.minY)
+        bounds.minY = y;
+    if (x > bounds.maxX)
+        bounds.maxX = x;
+    if (y > bounds.maxY)
+        bounds.maxY = y;
+};
+var includeRect = function (bounds, x, y, width, height) {
+    var safeWidth = Math.max(0, width);
+    var safeHeight = Math.max(0, height);
+    expandBounds(bounds, x, y);
+    expandBounds(bounds, x + safeWidth, y + safeHeight);
+};
+var hasBounds = function (bounds) {
+    return Number.isFinite(bounds.minX) &&
+        Number.isFinite(bounds.minY) &&
+        Number.isFinite(bounds.maxX) &&
+        Number.isFinite(bounds.maxY) &&
+        bounds.maxX >= bounds.minX &&
+        bounds.maxY >= bounds.minY;
+};
+var resolveStateWorldBounds = function (state) {
+    var bounds = createBounds();
+    state.elements.forEach(function (element) {
+        includeRect(bounds, element.position.x, element.position.y, element.size.width, element.size.height);
+    });
+    state.ports.forEach(function (port) {
+        var _a;
+        var size = port.size;
+        if (!size) {
+            expandBounds(bounds, port.position.x, port.position.y);
+            return;
+        }
+        var anchorCenter = (_a = port.anchorCenter) !== null && _a !== void 0 ? _a : true;
+        var x = anchorCenter ? port.position.x - size.width / 2 : port.position.x;
+        var y = anchorCenter ? port.position.y - size.height / 2 : port.position.y;
+        includeRect(bounds, x, y, size.width, size.height);
+    });
+    state.links.forEach(function (link) {
+        link.points.forEach(function (point) {
+            expandBounds(bounds, point.x, point.y);
+        });
+    });
+    state.texts.forEach(function (text) {
+        var _a;
+        var offset = (_a = text.displayOffset) !== null && _a !== void 0 ? _a : { x: 0, y: 0 };
+        var position = { x: text.position.x + offset.x, y: text.position.y + offset.y };
+        var clipSize = text.displayClipSize;
+        var size = clipSize !== null && clipSize !== void 0 ? clipSize : text.size;
+        if (size) {
+            includeRect(bounds, position.x, position.y, size.width, size.height);
+            return;
+        }
+        expandBounds(bounds, position.x, position.y);
+    });
+    return hasBounds(bounds) ? bounds : null;
+};
+var resolveFitToContentPadding = function (fitToContent) {
+    if (typeof fitToContent === 'object' && typeof fitToContent.padding === 'number') {
+        return Math.max(0, fitToContent.padding);
+    }
+    return 0;
+};
 var getNodeAttr = function (node, key) {
     if (node.getAttr) {
         return node.getAttr(key);
@@ -9573,7 +11392,13 @@ var registerSimpleShapes = function (registry, shapes, isPort) {
                 : undefined,
             projectToBorder: function (point, rect) { return behavior.projectToBorder(point, rect); },
             resolveBorderSide: function (point, rect) { return behavior.resolveBorderSide(point, rect); },
+            resolveBorderNormal: behavior.resolveBorderNormal
+                ? function (point, rect) { return behavior.resolveBorderNormal(point, rect); }
+                : undefined,
             resolvePortAnchors: function (rect, options) { return behavior.resolvePortAnchors(rect, options); },
+            resolvePortBorderTransform: behavior.resolvePortBorderTransform
+                ? function (context) { return behavior.resolvePortBorderTransform(context); }
+                : undefined,
             resolveHoverGeometry: function (rect) { return behavior.resolveHoverGeometry(rect); },
             resolveEllipseMidPoints: function (rect) { return behavior.resolveEllipseMidPoints(rect); },
             createNode: function (model) {
@@ -9647,7 +11472,7 @@ var createDiagramEditor = function (config) {
             .filter(function (hit) { return Boolean(hit); });
         if (hits.length === 0)
             return { id: '', type: 'none' };
-        var priority = ['resize-handle', 'link-handle', 'shape-hover-control', 'port', 'link', 'text', 'element'];
+        var priority = ['resize-handle', 'link-handle', 'port', 'shape-hover-control', 'link', 'text', 'element'];
         var _loop_1 = function (i) {
             var candidates = hits.filter(function (hit) { return hit.type === priority[i]; });
             if (candidates.length === 0)
@@ -9738,6 +11563,36 @@ var createDiagramEditor = function (config) {
         setSnapping: function (snapper) { return engine.setSnapping(snapper); },
         registerShape: function (shape) { return engine.registerShape(shape); },
         render: function () { return engine.render(); },
+        startLinkFromPort: function (sourcePortId, pointer) { return interaction.startLinkFromPort(sourcePortId, pointer); },
+        updateLinkPreview: function (pointer) { return interaction.updateLinkPreview(pointer); },
+        completeLinkToPort: function (targetPortId) { return interaction.completeLinkToPort(targetPortId); },
+        completeLinkToElement: function (targetElementId, pointer) { return interaction.completeLinkToElement(targetElementId, pointer); },
+        cancelLink: function () { return interaction.cancelLink(); },
+        exportImage: function (options) {
+            engine.render();
+            if (typeof stage.toDataURL !== 'function') {
+                throw new Error('Diagram image export is not available on the current stage.');
+            }
+            if (!options) {
+                return stage.toDataURL();
+            }
+            var fitToContent = options.fitToContent, baseOptions = __rest(options, ["fitToContent"]);
+            if (!fitToContent) {
+                return stage.toDataURL(baseOptions);
+            }
+            var padding = resolveFitToContentPadding(fitToContent);
+            var worldBounds = resolveStateWorldBounds(engine.getState());
+            if (!worldBounds) {
+                return stage.toDataURL(baseOptions);
+            }
+            var viewport = engine.getViewport();
+            var safeZoom = viewport.zoom === 0 ? 1 : viewport.zoom;
+            var cropX = worldBounds.minX * safeZoom + viewport.pan.x - padding;
+            var cropY = worldBounds.minY * safeZoom + viewport.pan.y - padding;
+            var cropWidth = Math.max(1, (worldBounds.maxX - worldBounds.minX) * safeZoom + padding * 2);
+            var cropHeight = Math.max(1, (worldBounds.maxY - worldBounds.minY) * safeZoom + padding * 2);
+            return stage.toDataURL(__assign(__assign({}, baseOptions), { x: cropX, y: cropY, width: cropWidth, height: cropHeight }));
+        },
         resize: function (width, height) {
             stage.width(width);
             stage.height(height);
@@ -9927,7 +11782,7 @@ var EventHandlersDemo = function () {
         React.createElement("div", { style: { marginBottom: 12 } },
             React.createElement("h2", { style: { marginTop: 0, marginBottom: 4 } }, demo.title),
             React.createElement("p", { style: { marginTop: 0 } }, demo.description)),
-        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 }),
+        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: 'flex', gap: 12, alignItems: 'center', marginBottom: 12 } },
             React.createElement("label", { htmlFor: "event-handler-select", style: { fontWeight: 600 } }, "Event"),
             React.createElement("select", { id: "event-handler-select", value: eventDemoEvent, onChange: function (event) { return setEventDemoEvent(event.target.value); }, style: { padding: '6px 8px' } },
@@ -10005,7 +11860,7 @@ var EngineEventsDemo = function () {
         React.createElement("div", { style: { marginBottom: 12 } },
             React.createElement("h2", { style: { marginTop: 0, marginBottom: 4 } }, demo.title),
             React.createElement("p", { style: { marginTop: 0 } }, demo.description)),
-        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 }),
+        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', alignItems: 'center', gap: 12 } },
                 React.createElement("label", { htmlFor: "engine-event-select", style: { fontWeight: 600 } }, "Engine Event"),
@@ -10113,7 +11968,7 @@ var LinkCancelDemo = function () {
                 " and ",
                 React.createElement("code", null, "elementLinkEnded"),
                 " appear below.")),
-        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 }),
+        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' } },
                 React.createElement("span", { style: __assign(__assign({}, badgeStyle), { background: statusTone, color: statusColor, borderColor: statusColor }) },
@@ -10205,6 +12060,8 @@ var parentOptions = [
     { id: 'layout-nested', label: 'Nested layout' },
     { id: 'layout-manual', label: 'Manual (compare)' },
 ];
+var shortLabel = 'Parent label lane demo';
+var longLabel = 'Parent label lane demo with longer content to increase flexible reserved space and push children downward.';
 var AutoLayoutDemo = function () {
     var demo = autoLayoutDemoConfig;
     var _a = useDemoEditor({
@@ -10234,7 +12091,11 @@ var AutoLayoutDemo = function () {
     var _k = useState(''), childFitMinHeight = _k[0], setChildFitMinHeight = _k[1];
     var _l = useState(''), childFitMaxWidth = _l[0], setChildFitMaxWidth = _l[1];
     var _m = useState(''), childFitMaxHeight = _m[0], setChildFitMaxHeight = _m[1];
-    var _o = useState('None yet'), lastTrigger = _o[0], setLastTrigger = _o[1];
+    var _o = useState('none'), labelReservedMode = _o[0], setLabelReservedMode = _o[1];
+    var _p = useState(32), labelReservedFixedSize = _p[0], setLabelReservedFixedSize = _p[1];
+    var _q = useState(''), labelReservedMinSize = _q[0], setLabelReservedMinSize = _q[1];
+    var _r = useState(''), labelReservedMaxSize = _r[0], setLabelReservedMaxSize = _r[1];
+    var _s = useState('None yet'), lastTrigger = _s[0], setLastTrigger = _s[1];
     useEffect(function () {
         var editor = editorRef.current;
         if (!editor)
@@ -10294,7 +12155,7 @@ var AutoLayoutDemo = function () {
         return options;
     }, [diagramState, targetElement]);
     useEffect(function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
         var parent = diagramState === null || diagramState === void 0 ? void 0 : diagramState.elements.find(function (el) { return el.id === targetId; });
         if (!parent)
             return;
@@ -10314,6 +12175,10 @@ var AutoLayoutDemo = function () {
         setChildFitMinHeight((_l = (_k = layout === null || layout === void 0 ? void 0 : layout.childFitMinSize) === null || _k === void 0 ? void 0 : _k.height) !== null && _l !== void 0 ? _l : '');
         setChildFitMaxWidth((_o = (_m = layout === null || layout === void 0 ? void 0 : layout.childFitMaxSize) === null || _m === void 0 ? void 0 : _m.width) !== null && _o !== void 0 ? _o : '');
         setChildFitMaxHeight((_q = (_p = layout === null || layout === void 0 ? void 0 : layout.childFitMaxSize) === null || _p === void 0 ? void 0 : _p.height) !== null && _q !== void 0 ? _q : '');
+        setLabelReservedMode((_s = (_r = layout === null || layout === void 0 ? void 0 : layout.labelReservedSpace) === null || _r === void 0 ? void 0 : _r.mode) !== null && _s !== void 0 ? _s : 'none');
+        setLabelReservedFixedSize((_u = (_t = layout === null || layout === void 0 ? void 0 : layout.labelReservedSpace) === null || _t === void 0 ? void 0 : _t.size) !== null && _u !== void 0 ? _u : 32);
+        setLabelReservedMinSize((_w = (_v = layout === null || layout === void 0 ? void 0 : layout.labelReservedSpace) === null || _v === void 0 ? void 0 : _v.minSize) !== null && _w !== void 0 ? _w : '');
+        setLabelReservedMaxSize((_y = (_x = layout === null || layout === void 0 ? void 0 : layout.labelReservedSpace) === null || _x === void 0 ? void 0 : _x.maxSize) !== null && _y !== void 0 ? _y : '');
     }, [diagramState, targetId]);
     var childOrder = useMemo(function () {
         var _a;
@@ -10350,6 +12215,9 @@ var AutoLayoutDemo = function () {
         var childFitMaxSize = childFitMaxWidth === '' && childFitMaxHeight === ''
             ? undefined
             : __assign(__assign({}, (childFitMaxWidth === '' ? {} : { width: childFitMaxWidth })), (childFitMaxHeight === '' ? {} : { height: childFitMaxHeight }));
+        var labelReservedSpace = mode === 'manual'
+            ? undefined
+            : __assign(__assign(__assign({ mode: labelReservedMode, placement: 'top' }, (labelReservedMode === 'fixed' ? { size: labelReservedFixedSize } : {})), (labelReservedMinSize === '' ? {} : { minSize: labelReservedMinSize })), (labelReservedMaxSize === '' ? {} : { maxSize: labelReservedMaxSize }));
         var layout = mode === 'manual'
             ? { mode: 'manual' }
             : {
@@ -10361,10 +12229,21 @@ var AutoLayoutDemo = function () {
                 childFitCrossAxis: childFitCrossAxis,
                 childFitMinSize: childFitMinSize,
                 childFitMaxSize: childFitMaxSize,
+                labelReservedSpace: labelReservedSpace,
             };
         editor.setElementLayout(targetElement.id, layout);
         setLastTrigger("layout applied (".concat(mode, ")"));
     };
+    var handleSetLabelContent = function (content) {
+        var editor = editorRef.current;
+        if (!editor || !diagramState || !targetElement)
+            return;
+        var label = diagramState.texts.find(function (text) { return text.ownerId === targetElement.id; });
+        if (!label)
+            return;
+        editor.updateText(label.id, content);
+        setLastTrigger('label updated');
+    };
     var handleAddChild = function () {
         var _a;
         var editor = editorRef.current;
@@ -10399,7 +12278,7 @@ var AutoLayoutDemo = function () {
         React.createElement("div", { style: { marginBottom: 12 } },
             React.createElement("h2", { style: { marginTop: 0, marginBottom: 4 } }, demo.title),
             React.createElement("p", { style: { marginTop: 0 } }, "Try horizontal, vertical, nested, and manual layout containers. Select a layout parent directly on the canvas or pick it from the list; the controls below always act on the current selection. Drag, resize, add, or remove children to see automatic reflow. Use fit controls to distribute/stretch child sizes with optional min/max guards. Nested column shows fit propagation boundaries to its parent row.")),
-        React.createElement(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 }),
+        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' } },
                 React.createElement("label", { htmlFor: "parent-select", style: { fontWeight: 600 } }, "Target element (follows selection)"),
@@ -10440,6 +12319,16 @@ var AutoLayoutDemo = function () {
                 React.createElement("div", { style: { display: 'inline-flex', gap: 6 } },
                     React.createElement("input", { id: "fit-max-width-input", type: "number", value: childFitMaxWidth, onChange: function (event) { return setChildFitMaxWidth(event.target.value === '' ? '' : Math.max(0, Number(event.target.value) || 0)); }, style: { width: 64, padding: '6px 8px' }, min: 0, placeholder: "w" }),
                     React.createElement("input", { type: "number", value: childFitMaxHeight, onChange: function (event) { return setChildFitMaxHeight(event.target.value === '' ? '' : Math.max(0, Number(event.target.value) || 0)); }, style: { width: 64, padding: '6px 8px' }, min: 0, placeholder: "h" })),
+                React.createElement("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"),
+                    React.createElement("option", { value: "fixed" }, "Fixed"),
+                    React.createElement("option", { value: "flexible" }, "Flexible")),
+                React.createElement("label", { htmlFor: "label-reserved-fixed-input", style: { fontWeight: 600 } }, "Lane fixed/min/max"),
+                React.createElement("div", { style: { display: 'inline-flex', gap: 6 } },
+                    React.createElement("input", { id: "label-reserved-fixed-input", type: "number", value: labelReservedFixedSize, onChange: function (event) { return setLabelReservedFixedSize(Math.max(0, Number(event.target.value) || 0)); }, style: { width: 70, padding: '6px 8px' }, min: 0, placeholder: "fixed", disabled: mode === 'manual' }),
+                    React.createElement("input", { type: "number", value: labelReservedMinSize, onChange: function (event) { return setLabelReservedMinSize(event.target.value === '' ? '' : Math.max(0, Number(event.target.value) || 0)); }, style: { width: 64, padding: '6px 8px' }, min: 0, placeholder: "min", disabled: mode === 'manual' }),
+                    React.createElement("input", { type: "number", value: labelReservedMaxSize, onChange: function (event) { return setLabelReservedMaxSize(event.target.value === '' ? '' : Math.max(0, Number(event.target.value) || 0)); }, style: { width: 64, padding: '6px 8px' }, min: 0, placeholder: "max", disabled: mode === 'manual' })),
                 React.createElement("button", { type: "button", onClick: handleApplyLayout, style: { padding: '6px 12px', fontWeight: 600 } }, "Apply layout"),
                 React.createElement("button", { type: "button", onClick: handleAddChild, style: { padding: '6px 10px' }, disabled: !targetElement }, "Add child"),
                 React.createElement("button", { type: "button", onClick: handleRemoveChild, style: { padding: '6px 10px' }, disabled: !targetElement }, "Remove last child"),
@@ -10457,7 +12346,9 @@ var AutoLayoutDemo = function () {
                     targetElement ? targetElement.id : '—',
                     React.createElement("span", { style: { width: 6, height: 6, borderRadius: '50%', background: '#1f4d99', display: 'inline-block' } }),
                     "Last trigger: ",
-                    React.createElement("strong", null, lastTrigger))),
+                    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("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 } },
                 React.createElement("div", null,
                     React.createElement("div", { style: { fontWeight: 600, marginBottom: 6 } }, "Child order (based on layout axis)"),
@@ -10480,6 +12371,7 @@ var AutoLayoutDemo = function () {
                     React.createElement("ul", { style: { marginTop: 0, paddingLeft: 18, fontSize: 13 } },
                         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, "Label lane: compare none/fixed/flexible and observe children start below the reserved lane."),
                         React.createElement("li", null, "Fit main-axis distribute fills inner layout space across siblings."),
                         React.createElement("li", null, "Fit cross-axis stretch extends children across inner cross axis."),
                         React.createElement("li", null, "Min/max fit guards cap distributed or stretched child sizes."),
@@ -10660,7 +12552,7 @@ var ExternalDragDropDemo = function () {
         React.createElement("div", { style: { marginBottom: 12 } },
             React.createElement("h2", { style: { marginTop: 0, marginBottom: 4 } }, demo.title),
             React.createElement("p", { style: { marginTop: 0 } }, demo.description)),
-        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 }),
+        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: 'flex', gap: 16, marginBottom: 12, alignItems: 'stretch' } },
             React.createElement("div", { style: {
                     minWidth: 220,
@@ -10817,7 +12709,7 @@ var SvgPathDemo = function () {
         React.createElement("div", { style: { marginBottom: 12 } },
             React.createElement("h2", { style: { marginTop: 0, marginBottom: 4 } }, demo.title),
             React.createElement("p", { style: { marginTop: 0 } }, demo.description)),
-        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 }),
+        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',
                 gridTemplateColumns: 'minmax(0, 1fr) 200px',
@@ -10998,7 +12890,7 @@ var TextLayoutDemo = function () {
         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(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 }),
+        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' } },
                 React.createElement("label", { htmlFor: "text-target", style: { fontWeight: 600 } }, "Target"),
@@ -11122,7 +13014,7 @@ var SimpleDemo = function (_a) {
         React.createElement("div", { style: { marginBottom: 12 } },
             React.createElement("h2", { style: { marginTop: 0, marginBottom: 4 } }, demo.title),
             React.createElement("p", { style: { marginTop: 0 } }, demo.description)),
-        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 }),
+        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 }),
         beforeStage,
         React.createElement(DisplayBoxStage, { containerRef: containerRef, onDragOver: stageHandlers === null || stageHandlers === void 0 ? void 0 : stageHandlers.onDragOver, onDragLeave: stageHandlers === null || stageHandlers === void 0 ? void 0 : stageHandlers.onDragLeave, onDrop: stageHandlers === null || stageHandlers === void 0 ? void 0 : stageHandlers.onDrop, stageStyle: demo.stageStyle })));
 };
@@ -11136,10 +13028,11 @@ var ObstacleRoutingDemo = function () { return (React.createElement(SimpleDemo,
         } },
         React.createElement("strong", null, "Expected routing behavior"),
         React.createElement("ul", { style: { margin: '6px 0 0 16px' } },
-            React.createElement("li", null, "Links between top nodes should route around the blocking element."),
-            React.createElement("li", null, "Sibling links inside a shared parent should ignore the parent as an obstacle."),
-            React.createElement("li", null, "Parent-child links should stay within the parent and avoid the child interior when ports are on edges."),
-            React.createElement("li", null, "Grandchild links should ignore shared ancestors (parent + grandparent containers)."))) })); };
+            React.createElement("li", null, "Scenario A: the sibling link must not cross either child host interior."),
+            React.createElement("li", null, "Scenario A: sibling host ports use anchor preset `cardinal` (left/right) for deterministic multi-anchor placement."),
+            React.createElement("li", null, "Scenario B has one parent and two children with three links: parent->child, child->parent, and child->child."),
+            React.createElement("li", null, "Scenario B: ancestor endpoints resolve to `internalLinkAttachPoint`; descendant/sibling endpoints resolve to `externalLinkAttachPoint`."),
+            React.createElement("li", null, "Use `Reroute All Links` repeatedly; both routes should stay deterministic after each reroute."))) })); };
 
 var initialPayloads = {
     elementDeleted: null,
@@ -11204,7 +13097,7 @@ var DeletionEventsDemo = function () {
                 "Use direct delete buttons for port/link/text, then delete ",
                 React.createElement("code", null, "delete-source"),
                 " to trigger cascade removals. Latest payloads are shown below for integration debugging.")),
-        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 }),
+        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: 8 } },
                 React.createElement("button", { type: "button", onClick: function () { var _a; return (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.removePort('delete-source-free-port'); }, disabled: !hasPort }, "Delete Port"),
@@ -11510,7 +13403,7 @@ var ShapeHoverControlsDemo = function () {
         React.createElement("div", { style: { marginBottom: 12 } },
             React.createElement("h2", { style: { marginTop: 0, marginBottom: 4 } }, demo.title),
             React.createElement("p", { style: { marginTop: 0 } }, demo.description)),
-        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 }),
+        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: {
                 marginBottom: 12,
                 padding: '10px 12px',
@@ -11597,6 +13490,414 @@ var EllipseMidPointControlSection = function (_a) {
                 midPoint)); })))));
 };
 
+var sidePositions = {
+    top: { x: 112, y: 0 },
+    right: { x: 280, y: 68 },
+    bottom: { x: 182, y: 180 },
+    left: { x: 0, y: 130 },
+};
+var sideLabels = ['top', 'right', 'bottom', 'left'];
+var resolvePortSide = function (port, host) {
+    if (Math.abs(port.position.x) <= 0.001)
+        return 'left';
+    if (Math.abs(port.position.x - host.size.width) <= 0.001)
+        return 'right';
+    if (Math.abs(port.position.y) <= 0.001)
+        return 'top';
+    if (Math.abs(port.position.y - host.size.height) <= 0.001)
+        return 'bottom';
+    return null;
+};
+var sideToVector = function (side) {
+    if (side === 'left')
+        return { x: -1, y: 0 };
+    if (side === 'right')
+        return { x: 1, y: 0 };
+    if (side === 'top')
+        return { x: 0, y: -1 };
+    return { x: 0, y: 1 };
+};
+var AsymmetricPortMultiAnchorDemo = function () {
+    var demo = asymmetricPortMultiAnchorDemoConfig;
+    var _a = useState(true), showLegacyComparison = _a[0], setShowLegacyComparison = _a[1];
+    var _b = useState(false), showExpectedAnchors = _b[0], setShowExpectedAnchors = _b[1];
+    var _c = useState(asymmetricPortDefaultVariantId), selectedVariantId = _c[0], setSelectedVariantId = _c[1];
+    var overlayHandlesRef = useRef([]);
+    var selectedVariant = useMemo(function () { return resolveAsymmetricPortShapeVariant(selectedVariantId); }, [selectedVariantId]);
+    var attachDistance = selectedVariant.externalLinkAttachPoint.x - selectedVariant.placementPoint.x;
+    var createState = useCallback(function () { return createAsymmetricPortMultiAnchorState(showLegacyComparison, selectedVariantId); }, [showLegacyComparison, selectedVariantId]);
+    var _d = useDemoEditor({
+        createState: createState,
+        elementShapes: demo.elementShapes,
+        portShapes: demo.portShapes,
+    }), containerRef = _d.containerRef, editorRef = _d.editorRef, diagramState = _d.diagramState, selection = _d.selection, snapEnabled = _d.snapEnabled, setSnapEnabled = _d.setSnapEnabled;
+    var nextOffset = useOffsetSequence();
+    var actionHelpers = useMemo(function () { return ({ nextOffset: nextOffset }); }, [nextOffset]);
+    var controls = useDemoControls({
+        demo: demo,
+        editorRef: editorRef,
+        diagramState: diagramState,
+        selection: selection,
+        snapEnabled: snapEnabled,
+        setSnapEnabled: setSnapEnabled,
+        actionHelpers: actionHelpers,
+    });
+    useEffect(function () {
+        var editor = editorRef.current;
+        if (!editor)
+            return;
+        asymmetricPortShapeVariants.forEach(function (variant) {
+            editor.registerShape({
+                id: variant.shapeId,
+                baseRotation: 90,
+                svgPath: variant.svgPath,
+                svgSize: variant.svgSize,
+            });
+        });
+        editor.rerouteAllLinks();
+    }, [editorRef, showLegacyComparison, selectedVariantId]);
+    useEffect(function () {
+        var editor = editorRef.current;
+        var state = diagramState;
+        overlayHandlesRef.current.forEach(function (handle) { return handle.destroy(); });
+        overlayHandlesRef.current = [];
+        if (!showExpectedAnchors || !editor || !state)
+            return;
+        var hosts = new Map(state.elements.map(function (element) { return [element.id, element]; }));
+        var debugPorts = state.ports.filter(function (port) { return port.id.startsWith('multi-anchor-port-'); });
+        debugPorts.forEach(function (port) {
+            var host = hosts.get(port.elementId);
+            if (!host)
+                return;
+            var side = resolvePortSide(port, host);
+            if (!side)
+                return;
+            var vector = sideToVector(side);
+            var placementWorld = {
+                x: host.position.x + port.position.x,
+                y: host.position.y + port.position.y,
+            };
+            overlayHandlesRef.current.push(editor.createOverlayShape({
+                shapeId: 'default',
+                position: placementWorld,
+                size: { width: 8, height: 8 },
+                anchorCenter: true,
+                style: {
+                    fill: '#ffffff',
+                    stroke: '#d97706',
+                    strokeWidth: 2,
+                    cornerRadius: 1,
+                    opacity: 0.9,
+                },
+            }));
+            if (port.id === multiAnchorExternalPortId || port.id.endsWith('-port-top') || port.id.endsWith('-port-bottom')) {
+                overlayHandlesRef.current.push(editor.createOverlayShape({
+                    shapeId: 'port-dark',
+                    position: {
+                        x: placementWorld.x + vector.x * attachDistance,
+                        y: placementWorld.y + vector.y * attachDistance,
+                    },
+                    size: { width: 8, height: 8 },
+                    anchorCenter: true,
+                    style: {
+                        fill: '#dc2626',
+                        stroke: '#dc2626',
+                        opacity: 0.85,
+                    },
+                }));
+            }
+        });
+        return function () {
+            overlayHandlesRef.current.forEach(function (handle) { return handle.destroy(); });
+            overlayHandlesRef.current = [];
+        };
+    }, [diagramState, editorRef, showExpectedAnchors]);
+    var moveExternalPortToSide = function (side) {
+        var editor = editorRef.current;
+        var host = diagramState === null || diagramState === void 0 ? void 0 : diagramState.elements.find(function (element) { return element.id === multiAnchorHostId; });
+        if (!editor || !host)
+            return;
+        var local = sidePositions[side];
+        editor.movePortTo(multiAnchorExternalPortId, host.position.x + local.x, host.position.y + local.y);
+        editor.setSelection([multiAnchorExternalPortId]);
+    };
+    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, marginBottom: 8 } }, demo.description),
+            React.createElement("p", { style: { marginTop: 0, marginBottom: 0, fontSize: 13, color: '#475569' } }, "The custom `svgPath` glyph is intentionally non-centered. The multi-anchor row keeps the square pivot pinned to the border while links use the circle for external targets and the square pivot for parent-child internal links."),
+            React.createElement("p", { style: { marginTop: 8, marginBottom: 0, fontSize: 13, color: '#475569' } },
+                "Active glyph variant: ",
+                React.createElement("strong", null, selectedVariant.label),
+                " (",
+                selectedVariant.description,
+                ")")),
+        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',
+                gridTemplateColumns: 'minmax(0, 1fr) auto',
+                gap: 12,
+                alignItems: 'start',
+                marginBottom: 12,
+                padding: 12,
+                border: '1px solid #d9e2f0',
+                borderRadius: 8,
+                background: '#f8fbff',
+            } },
+            React.createElement("div", { style: { display: 'grid', gap: 8 } },
+                React.createElement("label", { htmlFor: "legacy-comparison-toggle", style: { display: 'flex', alignItems: 'center', gap: 8, fontWeight: 600 } },
+                    React.createElement("input", { id: "legacy-comparison-toggle", type: "checkbox", checked: showLegacyComparison, onChange: function (event) { return setShowLegacyComparison(event.target.checked); } }),
+                    "Show legacy/default comparison"),
+                React.createElement("label", { htmlFor: "expected-anchor-toggle", style: { display: 'flex', alignItems: 'center', gap: 8, fontWeight: 600 } },
+                    React.createElement("input", { id: "expected-anchor-toggle", type: "checkbox", checked: showExpectedAnchors, onChange: function (event) { return setShowExpectedAnchors(event.target.checked); } }),
+                    "Show expected anchor markers"),
+                React.createElement("label", { htmlFor: "asymmetric-variant-select", style: { display: 'flex', alignItems: 'center', gap: 8, fontWeight: 600 } },
+                    "Port glyph variant",
+                    React.createElement("select", { id: "asymmetric-variant-select", value: selectedVariantId, onChange: function (event) { return setSelectedVariantId(event.target.value); } }, asymmetricPortShapeVariants.map(function (variant) { return (React.createElement("option", { key: variant.id, value: variant.id }, variant.label)); }))),
+                React.createElement("div", { style: { fontSize: 13, color: '#334155' } }, "Drag any asymmetric port around the host border or use the side controls to verify top/right/bottom/left orientation."),
+                React.createElement("div", { style: { fontSize: 13, color: '#334155' } }, "Quick visual check: the multi-anchor row should keep the square touching the border; the legacy row may shift because it has no explicit placement or pivot anchors."),
+                React.createElement("div", { style: { fontSize: 13, color: '#334155' } }, "Debug markers: amber square = expected border placement point, red dot = expected external attach point.")),
+            React.createElement("div", { style: { display: 'grid', gap: 8 } },
+                React.createElement("div", { style: { fontSize: 12, fontWeight: 600, color: '#1e293b' } }, "Move the external demo port"),
+                React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 8, justifyContent: 'flex-end' } }, sideLabels.map(function (side) { return (React.createElement("button", { key: side, type: "button", onClick: function () { return moveExternalPortToSide(side); }, style: { padding: '6px 10px' } },
+                    "External \u2192 ",
+                    side[0].toUpperCase() + side.slice(1))); })))),
+        React.createElement(DisplayBoxStage, { containerRef: containerRef })));
+};
+
+var VERTEX_CONTROL_ID = 'vertex-session-link';
+var VERTEX_CONTROL_SVG = 'M2 8 H14 M8 2 V14';
+var pointInRect = function (point, rect) {
+    return point.x >= rect.x &&
+        point.x <= rect.x + rect.width &&
+        point.y >= rect.y &&
+        point.y <= rect.y + rect.height;
+};
+var resolveTargetFromPointer = function (state, pointer, sourcePortId) {
+    var closestPort = null;
+    var _loop_1 = function (port) {
+        if (port.id === sourcePortId)
+            return "continue";
+        var host = state.elements.find(function (element) { return element.id === port.elementId; });
+        if (!host)
+            return "continue";
+        var world = {
+            x: host.position.x + port.position.x,
+            y: host.position.y + port.position.y,
+        };
+        var distance = Math.hypot(world.x - pointer.x, world.y - pointer.y);
+        if (distance > 16)
+            return "continue";
+        if (!closestPort || distance < closestPort.distance) {
+            closestPort = { id: port.id, distance: distance };
+        }
+    };
+    for (var _i = 0, _a = state.ports; _i < _a.length; _i++) {
+        var port = _a[_i];
+        _loop_1(port);
+    }
+    if (closestPort) {
+        return { type: 'port', id: closestPort.id };
+    }
+    var targetOrder = [vertexSessionDemoIds.elementTarget, vertexSessionDemoIds.portTarget];
+    var _loop_2 = function (i) {
+        var element = state.elements.find(function (item) { return item.id === targetOrder[i]; });
+        if (!element)
+            return "continue";
+        if (pointInRect(pointer, {
+            x: element.position.x,
+            y: element.position.y,
+            width: element.size.width,
+            height: element.size.height,
+        })) {
+            return { value: { type: 'element', id: element.id } };
+        }
+    };
+    for (var i = 0; i < targetOrder.length; i += 1) {
+        var state_1 = _loop_2(i);
+        if (typeof state_1 === "object")
+            return state_1.value;
+    }
+    return { type: 'none' };
+};
+var createVertexSessionSourcePort = function (editor, sourcePoint) {
+    var portId = "vertex-session-source-".concat(createId());
+    var port = {
+        id: portId,
+        elementId: vertexSessionDemoIds.source,
+        position: { x: 0, y: 0 },
+        shapeId: 'port-dark',
+        moveMode: 'border',
+        anchorCenter: true,
+        orientToHostBorder: true,
+    };
+    editor.addPortToElement(vertexSessionDemoIds.source, port);
+    editor.movePortTo(portId, sourcePoint.x, sourcePoint.y);
+    return portId;
+};
+var vertexControls = {
+    controls: [
+        {
+            id: VERTEX_CONTROL_ID,
+            targetKind: 'vertex',
+            allowAllTargets: true,
+            visibilityTriggers: ['target-hover'],
+            tolerance: 14,
+            icon: {
+                svgPath: VERTEX_CONTROL_SVG,
+                size: { width: 16, height: 16 },
+                style: { fill: 'none', stroke: '#6a3da3', strokeWidth: 2, lineCap: 'round' },
+            },
+        },
+    ],
+};
+var VertexControlLinkSessionDemo = function () {
+    var _a, _b;
+    var demo = vertexControlLinkSessionDemoConfig;
+    var editorHandleRef = useRef(null);
+    var activeSourcePortRef = useRef(null);
+    var _c = useState(false), cancelOnConnect = _c[0], setCancelOnConnect = _c[1];
+    var _d = useState([]), eventLog = _d[0], setEventLog = _d[1];
+    var _e = useState('none'), lastResolution = _e[0], setLastResolution = _e[1];
+    var _f = useState(false), isLogExpanded = _f[0], setIsLogExpanded = _f[1];
+    var nextOffset = useOffsetSequence();
+    var actionHelpers = useMemo(function () { return ({ nextOffset: nextOffset }); }, [nextOffset]);
+    var onControlInteraction = useCallback(function (event) {
+        var _a, _b;
+        if (event.controlId !== VERTEX_CONTROL_ID || event.elementId !== vertexSessionDemoIds.source)
+            return;
+        var editor = editorHandleRef.current;
+        if (!editor)
+            return;
+        if (event.eventType === 'drag-start') {
+            var sourcePoint = (_b = (_a = event.vertex) === null || _a === void 0 ? void 0 : _a.position) !== null && _b !== void 0 ? _b : event.pointer.world;
+            var sourcePortId = createVertexSessionSourcePort(editor, sourcePoint);
+            activeSourcePortRef.current = sourcePortId;
+            editor.startLinkFromPort(sourcePortId, sourcePoint);
+            setLastResolution('started');
+            return;
+        }
+        if (event.eventType === 'drag-move') {
+            if (!activeSourcePortRef.current)
+                return;
+            editor.updateLinkPreview(event.pointer.world);
+            return;
+        }
+        if (event.eventType === 'drag-end') {
+            var sourcePortId = activeSourcePortRef.current;
+            if (!sourcePortId)
+                return;
+            var state = editor.getState();
+            var target = resolveTargetFromPointer(state, event.pointer.world, sourcePortId);
+            if (target.type === 'port') {
+                editor.completeLinkToPort(target.id);
+                setLastResolution("completeLinkToPort(".concat(target.id, ")"));
+            }
+            else if (target.type === 'element') {
+                editor.completeLinkToElement(target.id, event.pointer.world);
+                setLastResolution("completeLinkToElement(".concat(target.id, ")"));
+            }
+            else {
+                editor.cancelLink();
+                setLastResolution('cancelLink()');
+            }
+            activeSourcePortRef.current = null;
+        }
+    }, []);
+    var _g = useDemoEditor({
+        createState: demo.createState,
+        elementShapes: demo.elementShapes,
+        portShapes: demo.portShapes,
+        elementShapeHoverControls: vertexControls,
+        onElementShapeHoverControlInteraction: onControlInteraction,
+    }), containerRef = _g.containerRef, editorRef = _g.editorRef, diagramState = _g.diagramState, selection = _g.selection, snapEnabled = _g.snapEnabled, setSnapEnabled = _g.setSnapEnabled;
+    editorHandleRef.current = editorRef.current;
+    var controls = useDemoControls({
+        demo: demo,
+        editorRef: editorRef,
+        diagramState: diagramState,
+        selection: selection,
+        snapEnabled: snapEnabled,
+        setSnapEnabled: setSnapEnabled,
+        actionHelpers: actionHelpers,
+    });
+    useEffect(function () {
+        var editor = editorRef.current;
+        if (!editor)
+            return undefined;
+        var append = function (entry) {
+            setEventLog(function (prev) { return __spreadArray([entry], prev, true).slice(0, 16); });
+        };
+        var offStarted = editor.on('elementLinkStarted', function (payload) {
+            append("elementLinkStarted source=".concat(payload.sourcePortId, " start=(").concat(Math.round(payload.startWorld.x), ",").concat(Math.round(payload.startWorld.y), ")"));
+        });
+        var offConnecting = editor.on('elementLinkConnecting', function (payload) {
+            if (cancelOnConnect) {
+                payload.cancel();
+            }
+            append("elementLinkConnecting source=".concat(payload.sourcePortId, " target=").concat(payload.targetPortId, " cancelled=").concat(payload.cancelled || cancelOnConnect));
+        });
+        var offEnded = editor.on('elementLinkEnded', function (payload) {
+            var _a, _b;
+            append("elementLinkEnded source=".concat(payload.sourcePortId, " targetPort=").concat((_a = payload.targetPortId) !== null && _a !== void 0 ? _a : '-', " targetElement=").concat((_b = payload.targetElementId) !== null && _b !== void 0 ? _b : '-', " cancelled=").concat(payload.cancelled));
+        });
+        return function () {
+            offStarted();
+            offConnecting();
+            offEnded();
+        };
+    }, [editorRef, cancelOnConnect]);
+    var linksCount = (_a = diagramState === null || diagramState === void 0 ? void 0 : diagramState.links.length) !== null && _a !== void 0 ? _a : 0;
+    var portsCount = (_b = diagramState === null || diagramState === void 0 ? void 0 : diagramState.ports.length) !== null && _b !== void 0 ? _b : 0;
+    var handleManualCancel = function () {
+        var _a;
+        (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.cancelLink();
+        activeSourcePortRef.current = null;
+        setLastResolution('cancelLink()');
+    };
+    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 } }, demo.description)),
+        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: { marginBottom: 12, padding: 12, border: '1px solid #d9e1ec', borderRadius: 8, background: '#fbfdff' } },
+            React.createElement("div", { style: { fontWeight: 700, marginBottom: 6 } }, "Required scenarios"),
+            React.createElement("ol", { style: { marginTop: 0, marginBottom: 10, paddingLeft: 20, fontSize: 13 } },
+                React.createElement("li", null, "Drag source vertex control to the existing port on the left side of Scenario 1 target."),
+                React.createElement("li", null, "Drag source vertex control to Scenario 2 target body (not its border port)."),
+                React.createElement("li", null, "Enable host cancellation, then repeat a completion drag to verify cancelled end event."),
+                React.createElement("li", null, "Start a drag and press Cancel Active Session to verify temp visuals clear and cancelled end event."),
+                React.createElement("li", null, "Use baseline native ports (bottom row) and drag from one port to the other to verify no regression.")),
+            React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center', marginBottom: 8 } },
+                React.createElement("label", { style: { fontSize: 13 } },
+                    React.createElement("input", { type: "checkbox", checked: cancelOnConnect, onChange: function (event) { return setCancelOnConnect(event.target.checked); }, style: { marginRight: 6 } }),
+                    "Host cancels on elementLinkConnecting"),
+                React.createElement("button", { type: "button", onClick: handleManualCancel, style: { padding: '6px 10px' } }, "Cancel Active Session"),
+                React.createElement("button", { type: "button", onClick: function () { return setIsLogExpanded(function (prev) { return !prev; }); }, style: { padding: '6px 10px' } }, isLogExpanded ? 'Collapse Lifecycle Log' : 'Expand Lifecycle Log'),
+                React.createElement("span", { style: { fontSize: 13 } },
+                    "Ports: ",
+                    React.createElement("strong", null, portsCount),
+                    " | Links: ",
+                    React.createElement("strong", null, linksCount),
+                    " | Last resolution: ",
+                    React.createElement("strong", null, lastResolution))),
+            React.createElement("div", { style: { fontSize: 12, color: '#2d3a4d' } },
+                React.createElement("strong", null, "Lifecycle log:"),
+                " ",
+                isLogExpanded ? 'expanded' : 'collapsed',
+                isLogExpanded ? (React.createElement("pre", { style: {
+                        marginTop: 6,
+                        padding: 8,
+                        maxHeight: 170,
+                        overflow: 'auto',
+                        background: '#ffffff',
+                        border: '1px solid #d9e1ec',
+                        borderRadius: 6,
+                        whiteSpace: 'pre-wrap',
+                    } }, eventLog.length ? eventLog.join('\n') : 'No events yet')) : null)),
+        React.createElement(DisplayBoxStage, { containerRef: containerRef, stageStyle: gridStageStyle })));
+};
+
 var wrapSimpleDemo = function (demo) { return function () { return React.createElement(SimpleDemo, { demo: demo }); }; };
 var demoTabs = [
     {
@@ -11695,6 +13996,12 @@ var demoTabs = [
         description: svgPathDemoConfig.description,
         Component: SvgPathDemo,
     },
+    {
+        id: asymmetricPortMultiAnchorDemoConfig.id,
+        title: asymmetricPortMultiAnchorDemoConfig.title,
+        description: asymmetricPortMultiAnchorDemoConfig.description,
+        Component: AsymmetricPortMultiAnchorDemo,
+    },
     {
         id: multiLevelTreeDemoConfig.id,
         title: multiLevelTreeDemoConfig.title,
@@ -11713,6 +14020,18 @@ var demoTabs = [
         description: portConstraintsDemoConfig.description,
         Component: wrapSimpleDemo(portConstraintsDemoConfig),
     },
+    {
+        id: portPositionLimitsDemoConfig.id,
+        title: portPositionLimitsDemoConfig.title,
+        description: portPositionLimitsDemoConfig.description,
+        Component: wrapSimpleDemo(portPositionLimitsDemoConfig),
+    },
+    {
+        id: labelStyleDemoConfig.id,
+        title: labelStyleDemoConfig.title,
+        description: labelStyleDemoConfig.description,
+        Component: wrapSimpleDemo(labelStyleDemoConfig),
+    },
     {
         id: portBorderDemoConfig.id,
         title: portBorderDemoConfig.title,
@@ -11731,6 +14050,12 @@ var demoTabs = [
         description: shapeHoverControlsDemoConfig.description,
         Component: ShapeHoverControlsDemo,
     },
+    {
+        id: vertexControlLinkSessionDemoConfig.id,
+        title: vertexControlLinkSessionDemoConfig.title,
+        description: vertexControlLinkSessionDemoConfig.description,
+        Component: VertexControlLinkSessionDemo,
+    },
     {
         id: childConstraintsDemoConfig.id,
         title: childConstraintsDemoConfig.title,