@acorex/modules 21.0.0-next.51 → 21.0.0-next.54

package/fesm2022/{acorex-modules-platform-management-acorex-modules-platform-management-DkOzj2Oy.mjs → acorex-modules-platform-management-acorex-modules-platform-management-5DJoQkx2.mjs}

@@ -5,7 +5,7 @@ import { AXMEntityCrudServiceImpl, AXPEntityService, AXP_ENTITY_DEFINITION_LOADE
 import { AXPRootLayoutComponent } from '@acorex/platform/themes/default';
 import { provideCommandSetups, provideQuerySetups } from '@acorex/platform/runtime';
 import * as i0 from '@angular/core';
-import { inject, Injector, Injectable, viewChild, signal, computed, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { inject, Injector, Injectable, viewChild, signal, computed, ViewEncapsulation, Component, NgModule, input, output, DestroyRef, afterNextRender, effect, ChangeDetectionStrategy, Directive } from '@angular/core';
 import { ROUTES } from '@angular/router';
 import { AXPMenuCustomizerService, AXPMenuCustomizerComponent, AXPThemeLayoutBlockComponent, AXP_MENU_CUSTOMIZER_SERVICE } from '@acorex/platform/layout/components';
 import * as i1 from '@acorex/platform/workflow';
@@ -19,6 +19,13 @@ import { SwUpdate } from '@angular/service-worker';
 import { AXPCommonMenuKeys, AXPWidgetsList } from '@acorex/modules/common';
 import { AXPWidgetsCatalog, AXPWidgetGroupEnum } from '@acorex/platform/layout/widget-core';
 import { AXPRelationshipCardinality, AXPRelationshipKind } from '@acorex/platform/domain';
+import { AXPanViewDirective } from '@acorex/cdk/pan-view';
+import * as i1$2 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i2 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
 
 const config = {
     i18n: 'platform-management',
@@ -1884,7 +1891,7 @@ function routesFactory() {
             children: [
                 {
                     path: '',
-                    loadComponent: () => import('./acorex-modules-platform-management-menu-list.component-agWZWchQ.mjs').then((c) => c.AXMMenuListComponent),
+                    loadComponent: () => import('./acorex-modules-platform-management-menu-list.component-C3WBYbOt.mjs').then((c) => c.AXMMenuListComponent),
                     data: { reuse: true },
                 },
             ],
@@ -6860,11 +6867,1919 @@ var index = /*#__PURE__*/Object.freeze({
     widgetFieldConfiguratorValueFromInterfaceDefinition: widgetFieldConfiguratorValueFromInterfaceDefinition
 });
 
+/** MIME type for native drag payloads carrying `AXPWorkflowActivityPaletteItem` JSON. */
+const AXP_WORKFLOW_PALETTE_MIME = 'application/x-axp-workflow-palette-item';
+
+//#region ---- Ids ----
+let idCounter = 0;
+function createWorkflowNodeId() {
+    idCounter += 1;
+    return `wf-node-${Date.now()}-${idCounter}`;
+}
+function createWorkflowConnectorId() {
+    idCounter += 1;
+    return `wf-conn-${Date.now()}-${idCounter}`;
+}
+function createWorkflowPortId(prefix) {
+    idCounter += 1;
+    return `${prefix}-port-${idCounter}`;
+}
+//#endregion
+//#region ---- Defaults ----
+const DEFAULT_SIZE = { width: 180, height: 72 };
+const DEFAULT_INBOUND = [{ side: 'left', ratio: 0.5, key: 'in' }];
+const DEFAULT_OUTBOUND = [{ side: 'right', ratio: 0.5, key: 'out' }];
+function cloneDiagram(model) {
+    return {
+        nodes: model.nodes.map((n) => ({
+            ...n,
+            position: { ...n.position },
+            size: { ...n.size },
+            inboundPorts: n.inboundPorts.map((p) => ({
+                ...p,
+                data: p.data ? { ...p.data } : undefined,
+            })),
+            outboundPorts: n.outboundPorts.map((p) => ({
+                ...p,
+                data: p.data ? { ...p.data } : undefined,
+            })),
+            data: n.data ? { ...n.data } : undefined,
+        })),
+        connectors: model.connectors.map((c) => ({
+            ...c,
+            data: c.data ? { ...c.data } : undefined,
+        })),
+        data: model.data ? { ...model.data } : undefined,
+    };
+}
+function createPortsFromPalette(nodeId, item) {
+    const inboundSrc = item.inboundPorts !== undefined ? item.inboundPorts : DEFAULT_INBOUND;
+    const outboundSrc = item.outboundPorts !== undefined ? item.outboundPorts : DEFAULT_OUTBOUND;
+    const inbound = inboundSrc.map((p) => ({
+        ...p,
+        id: createWorkflowPortId(`${nodeId}-in`),
+        kind: 'inbound',
+        data: p.data ? { ...p.data } : undefined,
+    }));
+    const outbound = outboundSrc.map((p) => ({
+        ...p,
+        id: createWorkflowPortId(`${nodeId}-out`),
+        kind: 'outbound',
+        data: p.data ? { ...p.data } : undefined,
+    }));
+    return { inbound, outbound };
+}
+function createNodeFromPaletteItem(item, position) {
+    const id = createWorkflowNodeId();
+    const { inbound, outbound } = createPortsFromPalette(id, item);
+    const shape = item.shape ?? 'rounded-rectangle';
+    const size = item.size ? { ...item.size } : { ...DEFAULT_SIZE };
+    if (shape === 'circle') {
+        const d = Math.min(size.width, size.height);
+        size.width = d;
+        size.height = d;
+    }
+    return {
+        id,
+        type: item.type,
+        title: item.title,
+        icon: item.icon,
+        shape,
+        position: { ...position },
+        size: { ...size },
+        inboundPorts: inbound,
+        outboundPorts: outbound,
+        data: item.data ? { ...item.data } : undefined,
+        lockAspectRatio: item.lockAspectRatio ?? shape === 'circle',
+        snapToGrid: item.snapToGrid,
+        color: item.color,
+    };
+}
+/**
+ * Parses drag `dataTransfer` JSON into a partial palette item (requires `type`).
+ * Merge with catalog (`paletteItems`) to obtain `title` and defaults.
+ */
+function parsePaletteItemDragPayload(raw) {
+    if (!raw)
+        return null;
+    try {
+        const o = JSON.parse(raw);
+        if (typeof o.type !== 'string')
+            return null;
+        return o;
+    }
+    catch {
+        return null;
+    }
+}
+//#endregion
+//#region ---- Snap ----
+function snapScalar(value, grid) {
+    if (grid <= 0)
+        return value;
+    return Math.round(value / grid) * grid;
+}
+function snapPoint(point, grid) {
+    return { x: snapScalar(point.x, grid), y: snapScalar(point.y, grid) };
+}
+//#endregion
+//#region ---- Port anchor (node-local, top-left origin) ----
+/**
+ * Inbound/outbound anchor on an axis-aligned ellipse inscribed in `w`×`h` (centered),
+ * so ports sit on the true perimeter for circle/ellipse nodes.
+ */
+function portAnchorOnEllipsePerimeter(w, h, side, ratio) {
+    const r = Math.min(0.999, Math.max(0.001, ratio));
+    const cx = w * 0.5;
+    const cy = h * 0.5;
+    const rx = w * 0.5;
+    const ry = h * 0.5;
+    let theta = 0;
+    switch (side) {
+        case 'right':
+            theta = -Math.PI / 2 + Math.PI * r;
+            break;
+        case 'left':
+            theta = Math.PI / 2 + Math.PI * r;
+            break;
+        case 'top':
+            theta = Math.PI + Math.PI * r;
+            break;
+        case 'bottom':
+            theta = Math.PI * r;
+            break;
+        default:
+            theta = 0;
+    }
+    return {
+        x: cx + rx * Math.cos(theta),
+        y: cy + ry * Math.sin(theta),
+    };
+}
+function portAnchorOnBoxEdge(w, h, side, ratio) {
+    const r = Math.min(0.999, Math.max(0.001, ratio));
+    switch (side) {
+        case 'top':
+            return { x: w * r, y: 0 };
+        case 'bottom':
+            return { x: w * r, y: h };
+        case 'left':
+            return { x: 0, y: h * r };
+        case 'right':
+            return { x: w, y: h * r };
+        default:
+            return { x: w * 0.5, y: h * 0.5 };
+    }
+}
+/** Diamond perimeter of a rotated square inside the node bounds. */
+function portAnchorOnDiamondPerimeter(w, h, side, ratio) {
+    const r = Math.min(0.999, Math.max(0.001, ratio));
+    const top = { x: w * 0.5, y: 0 };
+    const right = { x: w, y: h * 0.5 };
+    const bottom = { x: w * 0.5, y: h };
+    const left = { x: 0, y: h * 0.5 };
+    const lerp = (a, b, t) => ({
+        x: a.x + (b.x - a.x) * t,
+        y: a.y + (b.y - a.y) * t,
+    });
+    switch (side) {
+        case 'top':
+            return r <= 0.5 ? lerp(left, top, r * 2) : lerp(top, right, (r - 0.5) * 2);
+        case 'right':
+            return r <= 0.5 ? lerp(top, right, r * 2) : lerp(right, bottom, (r - 0.5) * 2);
+        case 'bottom':
+            return r <= 0.5 ? lerp(right, bottom, r * 2) : lerp(bottom, left, (r - 0.5) * 2);
+        case 'left':
+            return r <= 0.5 ? lerp(bottom, left, r * 2) : lerp(left, top, (r - 0.5) * 2);
+        default:
+            return { x: w * 0.5, y: h * 0.5 };
+    }
+}
+function portAnchorOnNode(node, port) {
+    const { width: w, height: h } = node.size;
+    const r = Math.min(0.999, Math.max(0.001, port.ratio));
+    if (node.shape === 'circle' || node.shape === 'ellipse') {
+        return portAnchorOnEllipsePerimeter(w, h, port.side, r);
+    }
+    if (node.shape === 'diamond') {
+        return portAnchorOnDiamondPerimeter(w, h, port.side, r);
+    }
+    return portAnchorOnBoxEdge(w, h, port.side, r);
+}
+function portCanvasPosition(node, port) {
+    const local = portAnchorOnNode(node, port);
+    return { x: node.position.x + local.x, y: node.position.y + local.y };
+}
+function inflateRect(r, padding) {
+    return {
+        x: r.position.x - padding,
+        y: r.position.y - padding,
+        width: r.size.width + padding * 2,
+        height: r.size.height + padding * 2,
+    };
+}
+function pointInsideRect(p, r) {
+    return p.x > r.x && p.x < r.x + r.width && p.y > r.y && p.y < r.y + r.height;
+}
+/**
+ * Returns true if an axis-aligned segment crosses the interior of any obstacle.
+ * Endpoints that only touch the rectangle's edge are not considered a crossing.
+ */
+function segmentCrossesObstacles(a, b, obstacles) {
+    const minX = Math.min(a.x, b.x);
+    const maxX = Math.max(a.x, b.x);
+    const minY = Math.min(a.y, b.y);
+    const maxY = Math.max(a.y, b.y);
+    const tolerance = 0.5;
+    for (const r of obstacles) {
+        const right = r.x + r.width;
+        const bottom = r.y + r.height;
+        if (maxX <= r.x + tolerance || minX >= right - tolerance)
+            continue;
+        if (maxY <= r.y + tolerance || minY >= bottom - tolerance)
+            continue;
+        if (Math.abs(a.y - b.y) < 0.0001) {
+            if (a.y > r.y + tolerance && a.y < bottom - tolerance)
+                return true;
+        }
+        else if (Math.abs(a.x - b.x) < 0.0001) {
+            if (a.x > r.x + tolerance && a.x < right - tolerance)
+                return true;
+        }
+        else {
+            return true;
+        }
+    }
+    return false;
+}
+function stepOutward(p, side, length) {
+    switch (side) {
+        case 'left':
+            return { x: p.x - length, y: p.y };
+        case 'right':
+            return { x: p.x + length, y: p.y };
+        case 'top':
+            return { x: p.x, y: p.y - length };
+        case 'bottom':
+            return { x: p.x, y: p.y + length };
+    }
+}
+function oppositeSide(side) {
+    switch (side) {
+        case 'left':
+            return 'right';
+        case 'right':
+            return 'left';
+        case 'top':
+            return 'bottom';
+        case 'bottom':
+            return 'top';
+    }
+}
+function sideAxis(side) {
+    return side === 'left' || side === 'right' ? 'h' : 'v';
+}
+/**
+ * Removes consecutive duplicate points and collapses collinear intermediate waypoints.
+ */
+function simplifyWaypoints(points) {
+    const deduped = [];
+    for (const p of points) {
+        const last = deduped[deduped.length - 1];
+        if (last && Math.abs(last.x - p.x) < 0.001 && Math.abs(last.y - p.y) < 0.001)
+            continue;
+        deduped.push(p);
+    }
+    if (deduped.length <= 2)
+        return deduped;
+    const out = [deduped[0]];
+    for (let i = 1; i < deduped.length - 1; i++) {
+        const prev = deduped[i - 1];
+        const curr = deduped[i];
+        const next = deduped[i + 1];
+        const collinearH = Math.abs(prev.y - curr.y) < 0.001 && Math.abs(curr.y - next.y) < 0.001;
+        const collinearV = Math.abs(prev.x - curr.x) < 0.001 && Math.abs(curr.x - next.x) < 0.001;
+        if (!collinearH && !collinearV)
+            out.push(curr);
+    }
+    out.push(deduped[deduped.length - 1]);
+    return out;
+}
+/**
+ * Generates candidate waypoint sets that connect `a` to `b` while respecting the entry/exit axes.
+ * Strategies are ordered from "most natural" to "more elaborate detour".
+ */
+function generateRouteStrategies(a, aAxis, b, bAxis, obstacles) {
+    const strategies = [];
+    const midX = (a.x + b.x) / 2;
+    const midY = (a.y + b.y) / 2;
+    const obstacleXCuts = [];
+    const obstacleYCuts = [];
+    for (const o of obstacles) {
+        obstacleXCuts.push(o.x - 6);
+        obstacleXCuts.push(o.x + o.width + 6);
+        obstacleYCuts.push(o.y - 6);
+        obstacleYCuts.push(o.y + o.height + 6);
+    }
+    obstacleXCuts.sort((x, y) => Math.abs(x - midX) - Math.abs(y - midX));
+    obstacleYCuts.sort((x, y) => Math.abs(x - midY) - Math.abs(y - midY));
+    if (aAxis === 'h' && bAxis === 'h') {
+        strategies.push([
+            { x: midX, y: a.y },
+            { x: midX, y: b.y },
+        ]);
+        for (const mx of obstacleXCuts) {
+            strategies.push([
+                { x: mx, y: a.y },
+                { x: mx, y: b.y },
+            ]);
+        }
+        for (const my of obstacleYCuts) {
+            strategies.push([
+                { x: a.x, y: my },
+                { x: b.x, y: my },
+            ]);
+        }
+    }
+    else if (aAxis === 'v' && bAxis === 'v') {
+        strategies.push([
+            { x: a.x, y: midY },
+            { x: b.x, y: midY },
+        ]);
+        for (const my of obstacleYCuts) {
+            strategies.push([
+                { x: a.x, y: my },
+                { x: b.x, y: my },
+            ]);
+        }
+        for (const mx of obstacleXCuts) {
+            strategies.push([
+                { x: mx, y: a.y },
+                { x: mx, y: b.y },
+            ]);
+        }
+    }
+    else if (aAxis === 'h' && bAxis === 'v') {
+        strategies.push([{ x: b.x, y: a.y }]);
+        for (const my of obstacleYCuts) {
+            strategies.push([
+                { x: a.x, y: my },
+                { x: b.x, y: my },
+            ]);
+        }
+    }
+    else {
+        strategies.push([{ x: a.x, y: b.y }]);
+        for (const mx of obstacleXCuts) {
+            strategies.push([
+                { x: mx, y: a.y },
+                { x: mx, y: b.y },
+            ]);
+        }
+    }
+    return strategies;
+}
+/**
+ * Picks the first strategy whose segments do not cross any obstacle.
+ * Falls back to the most natural strategy when every candidate is blocked
+ * (best-effort: keeps the connector readable even in tight layouts).
+ */
+function pickCleanStrategy(a, b, strategies, obstacles) {
+    for (const wp of strategies) {
+        const full = [a, ...wp, b];
+        let clean = true;
+        for (let i = 0; i < full.length - 1; i++) {
+            if (segmentCrossesObstacles(full[i], full[i + 1], obstacles)) {
+                clean = false;
+                break;
+            }
+        }
+        if (clean)
+            return wp;
+    }
+    return strategies[0] ?? [];
+}
+/**
+ * Routes an obstacle-aware orthogonal path between two free-space points.
+ * The returned array includes the start (`from`), stub-outs from each port,
+ * intermediate waypoints, and the end (`to`).
+ *
+ * Obstacles whose inflated rect already contains a stub point are dropped so
+ * that source/target nodes can still emit/receive their connector without the
+ * router fighting itself — but the middle of the path still routes around them.
+ */
+function routeOrthogonalConnector(from, sourceSide, to, targetSide, obstacles = [], options = {}) {
+    const stub = Math.max(0, options.stub ?? 18);
+    const padding = Math.max(0, options.obstaclePadding ?? 10);
+    const aStub = stepOutward(from, sourceSide, stub);
+    const bStub = stepOutward(to, targetSide, stub);
+    const inflated = obstacles.map((o) => inflateRect(o, padding));
+    const safe = inflated.filter((o) => !pointInsideRect(aStub, o) && !pointInsideRect(bStub, o));
+    const strategies = generateRouteStrategies(aStub, sideAxis(sourceSide), bStub, sideAxis(targetSide), safe);
+    const middle = pickCleanStrategy(aStub, bStub, strategies, safe);
+    return simplifyWaypoints([from, aStub, ...middle, bStub, to]);
+}
+/** Renders waypoints as straight `L` segments. */
+function waypointsToOrthogonalPath(points) {
+    if (points.length < 2)
+        return '';
+    const cmds = [`M ${points[0].x} ${points[0].y}`];
+    for (let i = 1; i < points.length; i++) {
+        cmds.push(`L ${points[i].x} ${points[i].y}`);
+    }
+    return cmds.join(' ');
+}
+/** Renders waypoints with rounded corners (quadratic curves) between segments. */
+function waypointsToRoundedPath(points, radius) {
+    if (points.length < 2)
+        return '';
+    if (points.length === 2)
+        return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`;
+    const cmds = [`M ${points[0].x} ${points[0].y}`];
+    for (let i = 1; i < points.length - 1; i++) {
+        const prev = points[i - 1];
+        const curr = points[i];
+        const next = points[i + 1];
+        const inDx = Math.sign(curr.x - prev.x);
+        const inDy = Math.sign(curr.y - prev.y);
+        const outDx = Math.sign(next.x - curr.x);
+        const outDy = Math.sign(next.y - curr.y);
+        const segIn = Math.hypot(curr.x - prev.x, curr.y - prev.y);
+        const segOut = Math.hypot(next.x - curr.x, next.y - curr.y);
+        const r = Math.max(0, Math.min(radius, segIn * 0.5, segOut * 0.5));
+        const cornerStart = { x: curr.x - inDx * r, y: curr.y - inDy * r };
+        const cornerEnd = { x: curr.x + outDx * r, y: curr.y + outDy * r };
+        cmds.push(`L ${cornerStart.x} ${cornerStart.y}`);
+        cmds.push(`Q ${curr.x} ${curr.y} ${cornerEnd.x} ${cornerEnd.y}`);
+    }
+    const last = points[points.length - 1];
+    cmds.push(`L ${last.x} ${last.y}`);
+    return cmds.join(' ');
+}
+/**
+ * Builds the SVG `d` string for a connector. When `options.obstacles` is supplied,
+ * orthogonal/rounded routes detour around the obstacle rectangles instead of
+ * passing through them. The `straight` style always draws a direct line.
+ */
+function connectorPath(from, to, style, sourceSide, options = {}) {
+    if (style === 'straight') {
+        return `M ${from.x} ${from.y} L ${to.x} ${to.y}`;
+    }
+    const targetSide = options.targetSide ?? oppositeSide(sourceSide);
+    const waypoints = routeOrthogonalConnector(from, sourceSide, to, targetSide, options.obstacles ?? [], {
+        stub: options.stub,
+        obstaclePadding: options.obstaclePadding,
+    });
+    if (style === 'orthogonal') {
+        return waypointsToOrthogonalPath(waypoints);
+    }
+    return waypointsToRoundedPath(waypoints, options.cornerRadius ?? 14);
+}
+//#endregion
+//#region ---- Model helpers ----
+function findNode(model, nodeId) {
+    return model.nodes.find((n) => n.id === nodeId);
+}
+function findPort(node, portId) {
+    const pi = node.inboundPorts.find((p) => p.id === portId);
+    if (pi)
+        return { port: pi, inbound: true };
+    const po = node.outboundPorts.find((p) => p.id === portId);
+    if (po)
+        return { port: po, inbound: false };
+    return undefined;
+}
+function findConnector(model, id) {
+    return model.connectors.find((c) => c.id === id);
+}
+/**
+ * Built-in rules: valid ports, not disabled, optional single inbound attachment, no duplicate edge.
+ */
+function defaultCanConnectRequest(request) {
+    const { model, sourceNodeId, sourcePortId, targetNodeId, targetPortId } = request;
+    const sn = findNode(model, sourceNodeId);
+    const tn = findNode(model, targetNodeId);
+    if (!sn || !tn)
+        return false;
+    const spInfo = findPort(sn, sourcePortId);
+    const tpInfo = findPort(tn, targetPortId);
+    if (!spInfo || !tpInfo)
+        return false;
+    const sp = spInfo.port;
+    const tp = tpInfo.port;
+    if (sp.kind !== 'outbound' || tp.kind !== 'inbound')
+        return false;
+    if (sp.disabled || tp.disabled)
+        return false;
+    const duplicate = model.connectors.some((c) => c.sourceNodeId === sourceNodeId &&
+        c.sourcePortId === sourcePortId &&
+        c.targetNodeId === targetNodeId &&
+        c.targetPortId === targetPortId);
+    if (duplicate)
+        return false;
+    if (!tp.allowMultiple) {
+        const inboundTaken = model.connectors.some((c) => c.targetNodeId === targetNodeId && c.targetPortId === targetPortId);
+        if (inboundTaken)
+            return false;
+    }
+    return true;
+}
+//#endregion
+//#region ---- Auto layout ----
+const DEFAULT_ARRANGE_MARGIN = 80;
+// Defaults leave room for inbound/outbound port labels that sit ~18px outside the
+// port anchor and may extend further as text. Larger gaps keep adjacent nodes from
+// having their port labels collide with each other or with routed connectors.
+const DEFAULT_ARRANGE_PRIMARY_GAP = 160;
+const DEFAULT_ARRANGE_CROSS_GAP = 110;
+const DEFAULT_ARRANGE_COMPONENT_GAP = 220;
+/**
+ * Auto-arranges workflow nodes in a layered layout (left→right by default).
+ * Honors `direction`, `alignment`, `origin`, `nodeIds`, and crossing-reduction options.
+ */
+function arrangeWorkflowDiagram(model, options = {}) {
+    if (model.nodes.length === 0) {
+        return model;
+    }
+    const margin = options.margin ?? DEFAULT_ARRANGE_MARGIN;
+    const runtime = {
+        direction: options.direction ?? 'horizontal',
+        alignment: options.alignment ?? 'center',
+        primaryGap: options.horizontalGap ?? DEFAULT_ARRANGE_PRIMARY_GAP,
+        crossGap: options.verticalGap ?? DEFAULT_ARRANGE_CROSS_GAP,
+        componentGap: Math.max(options.verticalGap ?? DEFAULT_ARRANGE_CROSS_GAP, DEFAULT_ARRANGE_COMPONENT_GAP),
+        margin,
+        grid: options.gridSize ?? 0,
+        origin: options.origin ?? { x: margin, y: margin },
+        reduceCrossings: options.reduceCrossings ?? true,
+        groupDisconnected: options.groupDisconnected ?? true,
+    };
+    const subsetIds = options.nodeIds && options.nodeIds.length > 0
+        ? new Set(options.nodeIds.filter((id) => model.nodes.some((n) => n.id === id)))
+        : null;
+    const targetNodes = subsetIds ? model.nodes.filter((n) => subsetIds.has(n.id)) : model.nodes;
+    if (targetNodes.length === 0) {
+        return model;
+    }
+    const targetIds = new Set(targetNodes.map((n) => n.id));
+    const relevantConnectors = model.connectors.filter((c) => targetIds.has(c.sourceNodeId) && targetIds.has(c.targetNodeId));
+    const components = splitComponents(targetNodes, relevantConnectors, runtime, options.startNodeId);
+    const positionById = new Map();
+    let crossCursor = runtime.direction === 'horizontal' ? runtime.origin.y : runtime.origin.x;
+    for (const component of components) {
+        layoutComponent(component, positionById, runtime, crossCursor);
+        crossCursor += component.crossSize + runtime.componentGap;
+    }
+    return {
+        ...model,
+        nodes: model.nodes.map((n) => {
+            const next = positionById.get(n.id);
+            return next ? { ...n, position: { ...next } } : n;
+        }),
+    };
+}
+function splitComponents(nodes, connectors, runtime, startNodeId) {
+    const undirected = new Map();
+    const outgoing = new Map();
+    const incomingCount = new Map();
+    for (const n of nodes) {
+        undirected.set(n.id, new Set());
+        outgoing.set(n.id, new Set());
+        incomingCount.set(n.id, 0);
+    }
+    for (const c of connectors) {
+        if (!undirected.has(c.sourceNodeId) || !undirected.has(c.targetNodeId))
+            continue;
+        undirected.get(c.sourceNodeId).add(c.targetNodeId);
+        undirected.get(c.targetNodeId).add(c.sourceNodeId);
+        outgoing.get(c.sourceNodeId).add(c.targetNodeId);
+        incomingCount.set(c.targetNodeId, (incomingCount.get(c.targetNodeId) ?? 0) + 1);
+    }
+    const sortedNodes = [...nodes].sort(compareNodesForLayout);
+    if (startNodeId) {
+        sortedNodes.sort((a, b) => {
+            if (a.id === startNodeId)
+                return -1;
+            if (b.id === startNodeId)
+                return 1;
+            return 0;
+        });
+    }
+    const visited = new Set();
+    const componentBuckets = [];
+    if (runtime.groupDisconnected) {
+        for (const seed of sortedNodes) {
+            if (visited.has(seed.id))
+                continue;
+            const bucket = [];
+            const queue = [seed.id];
+            visited.add(seed.id);
+            while (queue.length > 0) {
+                const id = queue.shift();
+                const node = nodes.find((n) => n.id === id);
+                if (node)
+                    bucket.push(node);
+                for (const next of undirected.get(id) ?? []) {
+                    if (!visited.has(next)) {
+                        visited.add(next);
+                        queue.push(next);
+                    }
+                }
+            }
+            componentBuckets.push(bucket);
+        }
+    }
+    else {
+        componentBuckets.push([...nodes]);
+    }
+    const components = [];
+    for (const bucket of componentBuckets) {
+        const bucketIds = new Set(bucket.map((n) => n.id));
+        const bucketConnectors = connectors.filter((c) => bucketIds.has(c.sourceNodeId) && bucketIds.has(c.targetNodeId));
+        const ranks = computeRanks(bucket, outgoing, incomingCount, startNodeId);
+        if (runtime.reduceCrossings) {
+            reduceCrossingsInPlace(ranks, bucketConnectors, runtime.direction);
+        }
+        else {
+            for (const rank of ranks)
+                rank.sort(compareNodesForLayout);
+        }
+        const crossSize = estimateCrossSize(ranks, runtime);
+        components.push({ nodes: bucket, ranks, crossSize });
+    }
+    return components;
+}
+function computeRanks(nodes, outgoing, incomingCount, startNodeId) {
+    const rank = new Map();
+    const queue = [];
+    const enqueueRoots = (ids) => {
+        for (const id of ids) {
+            if (!rank.has(id)) {
+                rank.set(id, 0);
+                queue.push(id);
+            }
+        }
+    };
+    const localIds = new Set(nodes.map((n) => n.id));
+    if (startNodeId && localIds.has(startNodeId)) {
+        enqueueRoots([startNodeId]);
+    }
+    else {
+        enqueueRoots(nodes.filter((n) => (incomingCount.get(n.id) ?? 0) === 0).map((n) => n.id));
+    }
+    // First-visit BFS handles cycles safely (shortest-distance ranking).
+    const maxSteps = nodes.length * (nodes.length + 1);
+    let steps = 0;
+    while (queue.length > 0 && steps < maxSteps) {
+        steps += 1;
+        const id = queue.shift();
+        const base = rank.get(id) ?? 0;
+        for (const targetId of outgoing.get(id) ?? []) {
+            if (!localIds.has(targetId) || rank.has(targetId))
+                continue;
+            rank.set(targetId, base + 1);
+            queue.push(targetId);
+        }
+    }
+    let orphanRank = nodes.reduce((max, n) => Math.max(max, rank.get(n.id) ?? 0), 0) + 1;
+    const unranked = nodes.filter((n) => !rank.has(n.id)).sort(compareNodesForLayout);
+    for (const n of unranked) {
+        rank.set(n.id, orphanRank);
+        orphanRank += 1;
+    }
+    const byRank = new Map();
+    for (const n of nodes) {
+        const r = rank.get(n.id) ?? 0;
+        const bucket = byRank.get(r) ?? [];
+        bucket.push(n);
+        byRank.set(r, bucket);
+    }
+    return [...byRank.keys()].sort((a, b) => a - b).map((r) => byRank.get(r) ?? []);
+}
+/**
+ * Returns a 0–1 fraction along the cross axis (vertical for horizontal flow) where the port sits on the node.
+ */
+function portCrossAxisFraction(node, portId, direction) {
+    const info = findPort(node, portId);
+    if (!info) {
+        return 0.5;
+    }
+    const port = info.port;
+    const r = Math.min(0.999, Math.max(0.001, port.ratio));
+    if (direction === 'horizontal') {
+        switch (port.side) {
+            case 'left':
+            case 'right':
+                return r;
+            case 'top':
+                return 0;
+            case 'bottom':
+                return 1;
+        }
+    }
+    switch (port.side) {
+        case 'top':
+        case 'bottom':
+            return r;
+        case 'left':
+            return 0;
+        case 'right':
+            return 1;
+    }
+    return r;
+}
+/**
+ * Barycenter heuristic with port-aware weights: targets inherit both their predecessor's rank index
+ * and the source port's cross-axis position so top/bottom (or left/right) ports map to matching targets.
+ */
+function reduceCrossingsInPlace(ranks, connectors, direction) {
+    if (ranks.length === 0)
+        return;
+    ranks[0] = [...ranks[0]].sort(compareNodesForLayout);
+    const nodeById = new Map();
+    for (const rank of ranks) {
+        for (const node of rank) {
+            nodeById.set(node.id, node);
+        }
+    }
+    const indexInRank = ranks.map((rank) => {
+        const map = new Map();
+        for (let i = 0; i < rank.length; i++)
+            map.set(rank[i].id, i);
+        return map;
+    });
+    for (let r = 1; r < ranks.length; r++) {
+        const predRank = ranks[r - 1];
+        const predIndex = indexInRank[r - 1];
+        const incomingFromPred = new Map();
+        const predIds = new Set(predRank.map((n) => n.id));
+        for (const c of connectors) {
+            if (!predIds.has(c.sourceNodeId)) {
+                continue;
+            }
+            const idx = predIndex.get(c.sourceNodeId);
+            if (idx === undefined) {
+                continue;
+            }
+            const sourceNode = nodeById.get(c.sourceNodeId);
+            const portFraction = sourceNode ? portCrossAxisFraction(sourceNode, c.sourcePortId, direction) : 0.5;
+            // Keep port ordering within the same predecessor index (fraction ∈ [0, 1)).
+            const weight = idx + portFraction;
+            const arr = incomingFromPred.get(c.targetNodeId) ?? [];
+            arr.push(weight);
+            incomingFromPred.set(c.targetNodeId, arr);
+        }
+        ranks[r] = [...ranks[r]].sort((a, b) => {
+            const ia = incomingFromPred.get(a.id) ?? [];
+            const ib = incomingFromPred.get(b.id) ?? [];
+            const ba = ia.length > 0 ? ia.reduce((s, v) => s + v, 0) / ia.length : Number.POSITIVE_INFINITY;
+            const bb = ib.length > 0 ? ib.reduce((s, v) => s + v, 0) / ib.length : Number.POSITIVE_INFINITY;
+            if (ba !== bb)
+                return ba - bb;
+            return compareNodesForLayout(a, b);
+        });
+        const refreshed = new Map();
+        for (let i = 0; i < ranks[r].length; i++)
+            refreshed.set(ranks[r][i].id, i);
+        indexInRank[r] = refreshed;
+    }
+}
+function estimateCrossSize(ranks, runtime) {
+    let max = 0;
+    for (const rank of ranks) {
+        const total = rank.reduce((sum, n) => sum + (runtime.direction === 'horizontal' ? n.size.height : n.size.width), 0);
+        const gaps = Math.max(0, rank.length - 1) * runtime.crossGap;
+        max = Math.max(max, total + gaps);
+    }
+    return max;
+}
+function layoutComponent(component, positionById, runtime, crossStart) {
+    const isHorizontal = runtime.direction === 'horizontal';
+    let primaryCursor = isHorizontal ? runtime.origin.x : runtime.origin.y;
+    for (const rank of component.ranks) {
+        if (rank.length === 0)
+            continue;
+        const crossTotal = rank.reduce((sum, n) => sum + (isHorizontal ? n.size.height : n.size.width), 0);
+        const crossGaps = (rank.length - 1) * runtime.crossGap;
+        const crossLen = crossTotal + crossGaps;
+        let cursor = crossStart;
+        if (runtime.alignment === 'center') {
+            cursor = crossStart + (component.crossSize - crossLen) * 0.5;
+        }
+        else if (runtime.alignment === 'end') {
+            cursor = crossStart + (component.crossSize - crossLen);
+        }
+        let primaryMax = 0;
+        for (const node of rank) {
+            const primary = isHorizontal ? primaryCursor : cursor;
+            const cross = isHorizontal ? cursor : primaryCursor;
+            const raw = isHorizontal ? { x: primary, y: cross } : { x: cross, y: primary };
+            const snapped = runtime.grid > 0 ? snapPoint(raw, runtime.grid) : raw;
+            positionById.set(node.id, snapped);
+            const advance = (isHorizontal ? node.size.height : node.size.width) + runtime.crossGap;
+            cursor += advance;
+            primaryMax = Math.max(primaryMax, isHorizontal ? node.size.width : node.size.height);
+        }
+        primaryCursor += primaryMax + runtime.primaryGap;
+    }
+}
+function compareNodesForLayout(a, b) {
+    const titleA = a.title?.trim() ?? '';
+    const titleB = b.title?.trim() ?? '';
+    if (titleA !== titleB) {
+        return titleA.localeCompare(titleB);
+    }
+    return a.id.localeCompare(b.id);
+}
+//#endregion
+
+//#endregion
+class AXPWorkflowDesignerComponent {
+    //#endregion
+    constructor() {
+        /** Unique SVG fragment id so multiple designers on one page do not clash. */
+        this.svgMarkerId = `axp-wf-arrow-${Math.random().toString(36).slice(2, 10)}`;
+        //#region ---- Inputs / outputs ----
+        this.model = input.required(...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+        this.modelChange = output();
+        /** When true, the whole designer is non-interactive unless a nested entity sets its own readonly flag. */
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        this.gridSize = input(20, ...(ngDevMode ? [{ debugName: "gridSize" }] : /* istanbul ignore next */ []));
+        /** Default snap when node does not override `snapToGrid`. */
+        this.snapToGrid = input(true, ...(ngDevMode ? [{ debugName: "snapToGrid" }] : /* istanbul ignore next */ []));
+        this.connectionPreviewStyle = input('orthogonal', ...(ngDevMode ? [{ debugName: "connectionPreviewStyle" }] : /* istanbul ignore next */ []));
+        this.backgroundPattern = input('dots', ...(ngDevMode ? [{ debugName: "backgroundPattern" }] : /* istanbul ignore next */ []));
+        this.zoomChange = output();
+        /** When set, replaces built-in `defaultCanConnectRequest` entirely. */
+        this.canConnect = input(null, ...(ngDevMode ? [{ debugName: "canConnect" }] : /* istanbul ignore next */ []));
+        /** Used to resolve native palette drag payloads (`type`) into full defaults. */
+        this.paletteItems = input([], ...(ngDevMode ? [{ debugName: "paletteItems" }] : /* istanbul ignore next */ []));
+        /** When false, port labels are hidden (ports remain interactive). */
+        this.showPortLabels = input(true, ...(ngDevMode ? [{ debugName: "showPortLabels" }] : /* istanbul ignore next */ []));
+        this.nodeBodyTemplate = input(null, ...(ngDevMode ? [{ debugName: "nodeBodyTemplate" }] : /* istanbul ignore next */ []));
+        this.designerPointerDown = output();
+        this.designerClick = output();
+        this.designerDoubleClick = output();
+        this.nodePointerDown = output();
+        this.nodeClick = output();
+        this.nodeDoubleClick = output();
+        this.nodeContextMenu = output();
+        this.nodeDragStart = output();
+        this.nodeDragEnd = output();
+        this.portPointerDown = output();
+        this.linkDragStart = output();
+        this.linkDragMove = output();
+        this.linkDragEnd = output();
+        this.connectorClick = output();
+        this.connectorDoubleClick = output();
+        this.connectionCreated = output();
+        this.connectionRejected = output();
+        this.activationChange = output();
+        //#endregion
+        //#region ---- State ----
+        this.surfaceRef = viewChild.required('surface');
+        this.panViewRef = viewChild(AXPanViewDirective, ...(ngDevMode ? [{ debugName: "panViewRef" }] : /* istanbul ignore next */ []));
+        this.activation = signal(null, ...(ngDevMode ? [{ debugName: "activation" }] : /* istanbul ignore next */ []));
+        this.selectedNodeIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedNodeIds" }] : /* istanbul ignore next */ []));
+        this.selectedConnectorIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedConnectorIds" }] : /* istanbul ignore next */ []));
+        this.panX = signal(0, ...(ngDevMode ? [{ debugName: "panX" }] : /* istanbul ignore next */ []));
+        this.panY = signal(0, ...(ngDevMode ? [{ debugName: "panY" }] : /* istanbul ignore next */ []));
+        this.panZoomLevel = signal(100, ...(ngDevMode ? [{ debugName: "panZoomLevel" }] : /* istanbul ignore next */ []));
+        this.linkDrag = signal(null, ...(ngDevMode ? [{ debugName: "linkDrag" }] : /* istanbul ignore next */ []));
+        /** Inbound port under the pointer while dragging a new connector from an outbound port. */
+        this.linkHoverTarget = signal(null, ...(ngDevMode ? [{ debugName: "linkHoverTarget" }] : /* istanbul ignore next */ []));
+        this.nodeMove = null;
+        this.resize = null;
+        this.suppressNextNodeClick = false;
+        this.wrapperDragoverListener = null;
+        this.wrapperDropListener = null;
+        this.wrapperElement = signal(null, ...(ngDevMode ? [{ debugName: "wrapperElement" }] : /* istanbul ignore next */ []));
+        this.wrapperAttachRetryHandle = null;
+        this.wrapperAttachAttempt = 0;
+        this.destroyRef = inject(DestroyRef);
+        //#endregion
+        //#region ---- Computed ----
+        this.gridStyle = computed(() => {
+            const g = this.gridSize();
+            if (this.backgroundPattern() === 'dots') {
+                return {
+                    'background-size': `${g}px ${g}px`,
+                    'background-image': `radial-gradient(circle, rgba(148, 163, 184, 0.35) 1px, transparent 1.2px)`,
+                };
+            }
+            return {
+                'background-size': `${g}px ${g}px`,
+                'background-image': `
+        linear-gradient(to right, rgba(148, 163, 184, 0.2) 1px, transparent 1px),
+        linear-gradient(to bottom, rgba(148, 163, 184, 0.2) 1px, transparent 1px)
+      `,
+            };
+        }, ...(ngDevMode ? [{ debugName: "gridStyle" }] : /* istanbul ignore next */ []));
+        this.canvasViewport = computed(() => {
+            const model = this.model();
+            const contentPadding = 320;
+            const minCanvasWidth = 1600;
+            const minCanvasHeight = 1000;
+            const nodeMinX = model.nodes.reduce((acc, node) => Math.min(acc, node.position.x), 0);
+            const nodeMinY = model.nodes.reduce((acc, node) => Math.min(acc, node.position.y), 0);
+            const nodeMaxRight = model.nodes.reduce((acc, node) => Math.max(acc, node.position.x + node.size.width), 0);
+            const nodeMaxBottom = model.nodes.reduce((acc, node) => Math.max(acc, node.position.y + node.size.height), 0);
+            const minX = Math.min(0, nodeMinX);
+            const minY = Math.min(0, nodeMinY);
+            const maxRight = Math.max(minCanvasWidth, nodeMaxRight);
+            const maxBottom = Math.max(minCanvasHeight, nodeMaxBottom);
+            const offsetX = -minX + contentPadding;
+            const offsetY = -minY + contentPadding;
+            return {
+                minX,
+                minY,
+                offsetX,
+                offsetY,
+                width: Math.ceil(maxRight - minX + contentPadding * 2),
+                height: Math.ceil(maxBottom - minY + contentPadding * 2),
+            };
+        }, ...(ngDevMode ? [{ debugName: "canvasViewport" }] : /* istanbul ignore next */ []));
+        this.surfaceStyle = computed(() => {
+            const viewport = this.canvasViewport();
+            return {
+                // ...this.gridStyle(),
+                width: `${viewport.width}px`,
+                height: `${viewport.height}px`,
+            };
+        }, ...(ngDevMode ? [{ debugName: "surfaceStyle" }] : /* istanbul ignore next */ []));
+        this.onWindowPointerMoveForNode = (ev) => {
+            const drag = this.nodeMove;
+            if (!drag)
+                return;
+            const model = this.model();
+            const p = this.canvasPointFromClient(ev.clientX, ev.clientY);
+            const dx = p.x - drag.start.x;
+            const dy = p.y - drag.start.y;
+            if (Math.abs(dx) > 1 || Math.abs(dy) > 1) {
+                drag.moved = true;
+            }
+            const nodes = model.nodes.map((n) => {
+                if (!drag.nodeIds.includes(n.id))
+                    return n;
+                const origin = drag.origins[n.id];
+                if (!origin)
+                    return n;
+                let nx = origin.x + dx;
+                let ny = origin.y + dy;
+                const snapped = this.applySnapForNode(n, { x: nx, y: ny });
+                nx = snapped.x;
+                ny = snapped.y;
+                return { ...n, position: { x: nx, y: ny } };
+            });
+            this.commit({ ...model, nodes });
+        };
+        this.onWindowPointerUpForNode = (ev) => {
+            const drag = this.nodeMove;
+            this.nodeMove = null;
+            window.removeEventListener('pointermove', this.onWindowPointerMoveForNode);
+            window.removeEventListener('pointerup', this.onWindowPointerUpForNode);
+            window.removeEventListener('pointercancel', this.onWindowPointerUpForNode);
+            if (drag?.moved) {
+                this.suppressNextNodeClick = true;
+            }
+            if (drag) {
+                const node = findNode(this.model(), drag.nodeIds[0] ?? '');
+                if (node)
+                    this.nodeDragEnd.emit({ node, event: ev });
+            }
+        };
+        this.onWindowPointerMoveForResize = (ev) => {
+            const st = this.resize;
+            if (!st)
+                return;
+            const model = this.model();
+            const node = findNode(model, st.nodeId);
+            if (!node)
+                return;
+            const p = this.canvasPointFromClient(ev.clientX, ev.clientY);
+            const dx = p.x - st.startPointer.x;
+            const dy = p.y - st.startPointer.y;
+            let { width, height } = st.startSize;
+            let { x, y } = st.startPosition;
+            const minW = 72;
+            const minH = 40;
+            const growEast = st.handle.includes('e');
+            const growSouth = st.handle.includes('s');
+            const growWest = st.handle.includes('w');
+            const growNorth = st.handle.includes('n');
+            if (growEast)
+                width = Math.max(minW, st.startSize.width + dx);
+            if (growSouth)
+                height = Math.max(minH, st.startSize.height + dy);
+            if (growWest) {
+                const nw = Math.max(minW, st.startSize.width - dx);
+                x = st.startPosition.x + st.startSize.width - nw;
+                width = nw;
+            }
+            if (growNorth) {
+                const nh = Math.max(minH, st.startSize.height - dy);
+                y = st.startPosition.y + st.startSize.height - nh;
+                height = nh;
+            }
+            if (node.shape === 'circle' || node.lockAspectRatio) {
+                const a = st.aspect;
+                if (growEast || growWest) {
+                    height = width / a;
+                    if (growNorth)
+                        y = st.startPosition.y + st.startSize.height - height;
+                }
+                else {
+                    width = height * a;
+                    if (growWest)
+                        x = st.startPosition.x + st.startSize.width - width;
+                }
+            }
+            const g = this.gridSize();
+            const useSnap = node.snapToGrid ?? this.snapToGrid();
+            if (useSnap && g > 0) {
+                width = Math.max(minW, snapScalar(width, g));
+                height = Math.max(minH, snapScalar(height, g));
+                x = snapScalar(x, g);
+                y = snapScalar(y, g);
+            }
+            const nodes = model.nodes.map((n) => n.id === node.id ? { ...n, position: { x, y }, size: { width, height } } : n);
+            this.commit({ ...model, nodes });
+        };
+        this.onWindowPointerUpForResize = () => {
+            this.resize = null;
+            window.removeEventListener('pointermove', this.onWindowPointerMoveForResize);
+            window.removeEventListener('pointerup', this.onWindowPointerUpForResize);
+            window.removeEventListener('pointercancel', this.onWindowPointerUpForResize);
+        };
+        this.onWindowPointerMoveForLink = (ev) => {
+            const st = this.linkDrag();
+            if (!st)
+                return;
+            const to = this.canvasPointFromClient(ev.clientX, ev.clientY);
+            this.linkDrag.set({ ...st, to });
+            const model = this.model();
+            const node = findNode(model, st.sourceNodeId);
+            const port = node ? findPort(node, st.sourcePortId)?.port : undefined;
+            if (node && port) {
+                this.linkDragMove.emit({ sourceNode: node, sourcePort: port, point: to, event: ev });
+            }
+            const hover = this.pickInboundPortAtPoint(model, to, st.sourceNodeId);
+            this.linkHoverTarget.set(hover ? { nodeId: hover.node.id, portId: hover.port.id } : null);
+        };
+        this.onWindowPointerUpForLink = (ev) => {
+            const st = this.linkDrag();
+            this.linkDrag.set(null);
+            this.linkHoverTarget.set(null);
+            window.removeEventListener('pointermove', this.onWindowPointerMoveForLink);
+            window.removeEventListener('pointerup', this.onWindowPointerUpForLink);
+            window.removeEventListener('pointercancel', this.onWindowPointerUpForLink);
+            if (!st)
+                return;
+            const model = this.model();
+            const sourceNode = findNode(model, st.sourceNodeId);
+            const sourcePort = sourceNode ? findPort(sourceNode, st.sourcePortId)?.port : undefined;
+            if (!sourceNode || !sourcePort)
+                return;
+            const target = this.pickInboundPortAtPoint(model, st.to, sourceNode.id);
+            if (!target) {
+                this.linkDragEnd.emit({ sourceNode, sourcePort, cancelled: true, event: ev });
+                return;
+            }
+            const request = {
+                model,
+                sourceNodeId: st.sourceNodeId,
+                sourcePortId: st.sourcePortId,
+                targetNodeId: target.node.id,
+                targetPortId: target.port.id,
+            };
+            if (!this.evaluateConnect(request)) {
+                this.connectionRejected.emit({ reason: 'canConnect returned false', request, event: ev });
+                this.linkDragEnd.emit({ sourceNode, sourcePort, cancelled: true, event: ev });
+                return;
+            }
+            const connector = {
+                id: createWorkflowConnectorId(),
+                sourceNodeId: st.sourceNodeId,
+                sourcePortId: st.sourcePortId,
+                targetNodeId: target.node.id,
+                targetPortId: target.port.id,
+                data: {},
+                color: sourceNode.color,
+            };
+            const next = {
+                nodes: [...model.nodes],
+                connectors: [...model.connectors, connector],
+            };
+            this.commit(next);
+            this.connectionCreated.emit({ connector, model: next });
+            this.setActivation({ kind: 'connector', id: connector.id });
+            this.linkDragEnd.emit({ sourceNode, sourcePort, cancelled: false, event: ev });
+        };
+        afterNextRender(() => this.attachWrapperDropTargetsWithRetry());
+        effect(() => this.syncWrapperBackgroundStyle());
+        effect(() => {
+            this.zoomChange.emit(this.panZoomLevel());
+        });
+        this.destroyRef.onDestroy(() => this.detachWindowListeners());
+    }
+    zoomIn() {
+        this.panViewRef()?.zoomIn();
+    }
+    zoomOut() {
+        this.panViewRef()?.zoomOut();
+    }
+    zoomReset() {
+        this.panViewRef()?.resetPosition();
+    }
+    getZoomLevel() {
+        return this.panZoomLevel();
+    }
+    //#region ---- Readonly helpers ----
+    isNodeReadonly(node) {
+        return this.readonly() || node.readonly === true;
+    }
+    isConnectorReadonly(c) {
+        return this.readonly() || c.readonly === true;
+    }
+    //#endregion
+    //#region ---- Activation ----
+    isNodeActive(nodeId) {
+        return this.selectedNodeIds().has(nodeId);
+    }
+    isConnectorActive(id) {
+        return this.selectedConnectorIds().has(id);
+    }
+    isPortActive(nodeId, portId) {
+        const a = this.activation();
+        return a?.kind === 'port' && a.nodeId === nodeId && a.id === portId;
+    }
+    isPortLinkHoverTarget(nodeId, portId) {
+        if (!this.linkDrag())
+            return false;
+        const h = this.linkHoverTarget();
+        return h !== null && h.nodeId === nodeId && h.portId === portId;
+    }
+    setActivation(next) {
+        this.activation.set(next);
+        this.activationChange.emit(next);
+    }
+    clearSelections() {
+        this.selectedNodeIds.set(new Set());
+        this.selectedConnectorIds.set(new Set());
+    }
+    //#endregion
+    //#region ---- Model commit ----
+    commit(next) {
+        this.modelChange.emit(next);
+    }
+    /**
+     * Auto-arranges nodes into a layered layout and commits the result.
+     *
+     * Honors layout options such as `direction` (`'horizontal'` / `'vertical'`),
+     * `alignment`, `origin`, `nodeIds` (subset arrange), and `reduceCrossings`.
+     * When `gridSize` is omitted the designer's own `gridSize` input is used.
+     */
+    arrangeNicely(options) {
+        if (this.readonly()) {
+            return;
+        }
+        this.commit(this.computeArrangedLayout(options));
+    }
+    /**
+     * Computes an arranged layout without committing it. Useful for previews,
+     * comparing the result before applying it, or rendering ghost positions.
+     */
+    computeArrangedLayout(options) {
+        return arrangeWorkflowDiagram(cloneDiagram(this.model()), {
+            gridSize: this.gridSize(),
+            ...options,
+        });
+    }
+    resolvePaletteItem(type) {
+        return this.paletteItems().find((i) => i.type === type);
+    }
+    /**
+     * Full drag payload merged with `paletteItems()` entry when the payload omits optional fields.
+     */
+    resolveDroppedPaletteItem(raw) {
+        const parsed = parsePaletteItemDragPayload(raw);
+        if (!parsed)
+            return null;
+        const base = this.resolvePaletteItem(parsed.type);
+        const item = { ...(base ?? {}), ...parsed };
+        if (typeof item.title !== 'string')
+            return null;
+        return item;
+    }
+    evaluateConnect(request) {
+        const fn = this.canConnect();
+        if (fn)
+            return fn(request);
+        return defaultCanConnectRequest(request);
+    }
+    //#endregion
+    //#region ---- Canvas / surface ----
+    onSurfacePointerDown(event) {
+        if (!this.isBackgroundInteractionTarget(event.target))
+            return;
+        this.designerPointerDown.emit(event);
+    }
+    onSurfaceClick(event) {
+        if (!this.isBackgroundInteractionTarget(event.target))
+            return;
+        this.clearSelections();
+        this.setActivation({ kind: 'canvas', id: 'canvas' });
+        this.designerClick.emit(event);
+    }
+    onSurfaceDoubleClick(event) {
+        if (!this.isBackgroundInteractionTarget(event.target))
+            return;
+        this.designerDoubleClick.emit(event);
+    }
+    isBackgroundInteractionTarget(target) {
+        if (!target)
+            return false;
+        if (target.closest('.axp-workflow-designer__node'))
+            return false;
+        if (target.closest('.axp-workflow-designer__connector-actions'))
+            return false;
+        if (target.closest('.axp-workflow-designer__port-cluster'))
+            return false;
+        if (target.closest('path.axp-workflow-designer__edge-hit'))
+            return false;
+        if (target.closest('ax-button'))
+            return false;
+        return true;
+    }
+    canvasPointFromClient(clientX, clientY) {
+        const surface = this.surfaceRef().nativeElement;
+        const wrapper = surface.closest('.ax-pan-view-wrapper');
+        const basisRect = (wrapper ?? surface).getBoundingClientRect();
+        const localX = clientX - basisRect.left;
+        const localY = clientY - basisRect.top;
+        const computed = getComputedStyle(surface);
+        const transform = computed.transform;
+        if (!transform || transform === 'none') {
+            return this.surfacePointToModel({ x: localX, y: localY });
+        }
+        const matrix = new DOMMatrixReadOnly(transform);
+        const originParts = computed.transformOrigin.split(' ');
+        const originX = Number.parseFloat(originParts[0] ?? '0') || 0;
+        const originY = Number.parseFloat(originParts[1] ?? '0') || 0;
+        // CSS transform is applied around transform-origin, so include origin translation in matrix inversion.
+        const withOrigin = new DOMMatrixReadOnly()
+            .translate(originX, originY)
+            .multiply(matrix)
+            .translate(-originX, -originY);
+        const point = new DOMPoint(localX, localY).matrixTransform(withOrigin.inverse());
+        return this.surfacePointToModel({ x: point.x, y: point.y });
+    }
+    //#endregion
+    //#region ---- Drag / drop (palette) ----
+    onCanvasDragOver(event) {
+        if (this.readonly())
+            return;
+        event.preventDefault();
+        if (event.dataTransfer)
+            event.dataTransfer.dropEffect = 'copy';
+    }
+    onCanvasDrop(event) {
+        if (this.readonly())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const raw = event.dataTransfer?.getData(AXP_WORKFLOW_PALETTE_MIME);
+        const item = this.resolveDroppedPaletteItem(raw);
+        if (!item)
+            return;
+        const pt = this.canvasPointFromClient(event.clientX, event.clientY);
+        const node = createNodeFromPaletteItem(item, this.applySnapToPointForNewNode(item, pt));
+        const model = this.model();
+        const next = {
+            nodes: [...model.nodes, node],
+            connectors: [...model.connectors],
+        };
+        this.commit(next);
+        this.setActivation({ kind: 'node', id: node.id });
+    }
+    applySnapToPointForNewNode(item, pt) {
+        const nodeSnap = item.snapToGrid;
+        const useSnap = nodeSnap ?? this.snapToGrid();
+        const g = this.gridSize();
+        if (!useSnap || g <= 0)
+            return pt;
+        return snapPoint(pt, g);
+    }
+    applySnapForNode(node, pt) {
+        const useSnap = node.snapToGrid ?? this.snapToGrid();
+        const g = this.gridSize();
+        if (!useSnap || g <= 0)
+            return pt;
+        return snapPoint(pt, g);
+    }
+    //#endregion
+    //#region ---- Wrapper drop bridge ----
+    attachWrapperDropTargetsWithRetry() {
+        this.clearWrapperAttachRetry();
+        this.wrapperAttachAttempt = 0;
+        const tryAttach = () => {
+            const attached = this.attachWrapperDropTargets();
+            if (attached) {
+                return;
+            }
+            this.wrapperAttachAttempt += 1;
+            if (this.wrapperAttachAttempt >= 20) {
+                return;
+            }
+            this.wrapperAttachRetryHandle = setTimeout(tryAttach, 50);
+        };
+        tryAttach();
+    }
+    /**
+     * Binds drag/drop to pan-view wrapper so users can drop while panning far away
+     * from current finite surface bounds.
+     */
+    attachWrapperDropTargets() {
+        const surface = this.surfaceRef().nativeElement;
+        const wrapper = surface.closest('.ax-pan-view-wrapper');
+        if (!wrapper) {
+            return false;
+        }
+        this.detachWrapperDropTargets();
+        this.wrapperElement.set(wrapper);
+        this.wrapperDragoverListener = (event) => {
+            const target = event.target;
+            if (target?.closest('.axp-workflow-designer__surface')) {
+                return;
+            }
+            this.onCanvasDragOver(event);
+        };
+        this.wrapperDropListener = (event) => {
+            const target = event.target;
+            if (target?.closest('.axp-workflow-designer__surface')) {
+                return;
+            }
+            this.onCanvasDrop(event);
+        };
+        wrapper.addEventListener('dragover', this.wrapperDragoverListener);
+        wrapper.addEventListener('drop', this.wrapperDropListener);
+        this.syncWrapperBackgroundStyle();
+        return true;
+    }
+    detachWrapperDropTargets() {
+        const surface = this.surfaceRef().nativeElement;
+        const wrapper = surface.closest('.ax-pan-view-wrapper');
+        if (!wrapper) {
+            this.wrapperElement.set(null);
+            this.wrapperDragoverListener = null;
+            this.wrapperDropListener = null;
+            return;
+        }
+        if (this.wrapperDragoverListener) {
+            wrapper.removeEventListener('dragover', this.wrapperDragoverListener);
+            this.wrapperDragoverListener = null;
+        }
+        if (this.wrapperDropListener) {
+            wrapper.removeEventListener('drop', this.wrapperDropListener);
+            this.wrapperDropListener = null;
+        }
+        this.wrapperElement.set(null);
+    }
+    clearWrapperAttachRetry() {
+        if (this.wrapperAttachRetryHandle != null) {
+            clearTimeout(this.wrapperAttachRetryHandle);
+            this.wrapperAttachRetryHandle = null;
+        }
+    }
+    //#endregion
+    //#region ---- Keyboard ----
+    onWindowKeydown(ev) {
+        if (this.readonly())
+            return;
+        const target = ev.target;
+        if (target?.closest('input,textarea,select,[contenteditable="true"]'))
+            return;
+        if (ev.key === 'Escape') {
+            ev.preventDefault();
+            this.cancelLinkDrag(ev);
+            this.clearSelections();
+            this.setActivation(null);
+            return;
+        }
+        if (ev.key !== 'Delete' && ev.key !== 'Backspace')
+            return;
+        ev.preventDefault();
+        const selectedConnectorIds = this.selectedConnectorIds();
+        const selectedNodeIds = this.selectedNodeIds();
+        const model = this.model();
+        if (selectedConnectorIds.size > 0 || selectedNodeIds.size > 0) {
+            const nodes = model.nodes.filter((n) => !selectedNodeIds.has(n.id));
+            const connectors = model.connectors.filter((c) => !selectedConnectorIds.has(c.id) &&
+                !selectedNodeIds.has(c.sourceNodeId) &&
+                !selectedNodeIds.has(c.targetNodeId));
+            this.commit({ ...model, nodes, connectors });
+            this.clearSelections();
+            this.setActivation(null);
+            return;
+        }
+        const a = this.activation();
+        if (!a || a.kind === 'canvas')
+            return;
+        if (a.kind === 'connector') {
+            const c = findConnector(model, a.id);
+            if (c && !this.isConnectorReadonly(c)) {
+                const connectors = model.connectors.filter((x) => x.id !== c.id);
+                this.commit({ ...model, connectors });
+                this.setActivation(null);
+            }
+            return;
+        }
+        const nodeId = a.kind === 'node' ? a.id : a.nodeId;
+        if (!nodeId)
+            return;
+        const node = findNode(model, nodeId);
+        if (!node || this.isNodeReadonly(node))
+            return;
+        const nodes = model.nodes.filter((n) => n.id !== nodeId);
+        const connectors = model.connectors.filter((c) => c.sourceNodeId !== nodeId && c.targetNodeId !== nodeId);
+        this.commit({ ...model, nodes, connectors });
+        this.setActivation(null);
+    }
+    cancelLinkDrag(ev) {
+        const st = this.linkDrag();
+        if (!st)
+            return;
+        this.linkDrag.set(null);
+        this.linkHoverTarget.set(null);
+        window.removeEventListener('pointermove', this.onWindowPointerMoveForLink);
+        window.removeEventListener('pointerup', this.onWindowPointerUpForLink);
+        window.removeEventListener('pointercancel', this.onWindowPointerUpForLink);
+        const model = this.model();
+        const sourceNode = findNode(model, st.sourceNodeId);
+        const sourcePort = sourceNode ? findPort(sourceNode, st.sourcePortId)?.port : undefined;
+        if (sourceNode && sourcePort) {
+            this.linkDragEnd.emit({ sourceNode, sourcePort, cancelled: true, event: ev });
+        }
+    }
+    //#endregion
+    //#region ---- Node chrome ----
+    shapeClass(shape) {
+        return `axp-workflow-designer__node-shape--${shape}`;
+    }
+    semanticSurfaceClass(color) {
+        return color ? `axp-${color}-surface` : '';
+    }
+    nodeShapeClasses(node) {
+        return ['axp-workflow-designer__node-shape', this.shapeClass(node.shape), this.semanticSurfaceClass(node.color)]
+            .filter(Boolean)
+            .join(' ');
+    }
+    connectorEdgeClasses(c) {
+        const parts = [
+            'axp-workflow-designer__edge',
+            this.semanticSurfaceClass(c.color),
+            this.isConnectorActive(c.id) ? 'axp-workflow-designer__edge--active' : '',
+        ];
+        return parts.filter(Boolean).join(' ');
+    }
+    onNodePointerDown(node, event) {
+        if (this.isNodeReadonly(node))
+            return;
+        if (event.button !== 0)
+            return;
+        this.nodePointerDown.emit({ node, event });
+    }
+    onNodeClick(node, event) {
+        if (this.suppressNextNodeClick) {
+            this.suppressNextNodeClick = false;
+            event.stopPropagation();
+            return;
+        }
+        event.stopPropagation();
+        const append = event.ctrlKey || event.metaKey;
+        if (append) {
+            const next = new Set(this.selectedNodeIds());
+            if (next.has(node.id))
+                next.delete(node.id);
+            else
+                next.add(node.id);
+            this.selectedNodeIds.set(next);
+            this.selectedConnectorIds.set(new Set());
+        }
+        else {
+            this.selectedNodeIds.set(new Set([node.id]));
+            this.selectedConnectorIds.set(new Set());
+        }
+        this.setActivation({ kind: 'node', id: node.id });
+        this.nodeClick.emit({ node, event: event });
+    }
+    onNodeDoubleClick(node, event) {
+        event.stopPropagation();
+        this.nodeDoubleClick.emit({ node, event });
+    }
+    onNodeContextMenu(node, event) {
+        if (this.isNodeReadonly(node)) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.selectedNodeIds.set(new Set([node.id]));
+        this.selectedConnectorIds.set(new Set());
+        this.setActivation({ kind: 'node', id: node.id });
+        this.nodeContextMenu.emit({ node, event });
+    }
+    onNodeBodyPointerDown(node, event) {
+        if (this.isNodeReadonly(node))
+            return;
+        if (event.button !== 0)
+            return;
+        if (event.target.closest('.axp-workflow-designer__port-cluster'))
+            return;
+        if (event.target.closest('.axp-workflow-designer__resize'))
+            return;
+        // Ctrl/Cmd click is reserved for multi-select toggling in click handler; do not start drag here.
+        if (event.ctrlKey || event.metaKey)
+            return;
+        event.stopPropagation();
+        const selected = this.selectedNodeIds();
+        const moveIds = selected.has(node.id) && selected.size > 0 ? [...selected] : [node.id];
+        if (!selected.has(node.id) || selected.size === 0) {
+            this.selectedNodeIds.set(new Set([node.id]));
+            this.selectedConnectorIds.set(new Set());
+        }
+        this.setActivation({ kind: 'node', id: node.id });
+        const p = this.canvasPointFromClient(event.clientX, event.clientY);
+        const model = this.model();
+        const origins = {};
+        for (const moveId of moveIds) {
+            const n = findNode(model, moveId);
+            if (n)
+                origins[moveId] = { ...n.position };
+        }
+        this.nodeMove = {
+            nodeIds: moveIds,
+            start: p,
+            origins,
+            moved: false,
+        };
+        this.nodeDragStart.emit({ node, event });
+        window.addEventListener('pointermove', this.onWindowPointerMoveForNode);
+        window.addEventListener('pointerup', this.onWindowPointerUpForNode, { once: false });
+        window.addEventListener('pointercancel', this.onWindowPointerUpForNode, { once: false });
+        event.target.setPointerCapture?.(event.pointerId);
+    }
+    //#endregion
+    //#region ---- Resize ----
+    onResizePointerDown(node, handle, event) {
+        if (this.isNodeReadonly(node))
+            return;
+        if (event.button !== 0)
+            return;
+        event.stopPropagation();
+        this.resize = {
+            nodeId: node.id,
+            handle,
+            startPointer: this.canvasPointFromClient(event.clientX, event.clientY),
+            startPosition: { ...node.position },
+            startSize: { ...node.size },
+            aspect: node.size.width / Math.max(1, node.size.height),
+        };
+        window.addEventListener('pointermove', this.onWindowPointerMoveForResize);
+        window.addEventListener('pointerup', this.onWindowPointerUpForResize);
+        window.addEventListener('pointercancel', this.onWindowPointerUpForResize);
+    }
+    //#endregion
+    //#region ---- Ports & linking ----
+    onPortPointerDown(node, port, event) {
+        if (this.isNodeReadonly(node))
+            return;
+        if (port.readonly)
+            return;
+        if (event.button !== 0)
+            return;
+        event.stopPropagation();
+        this.portPointerDown.emit({ node, port, event });
+        this.setActivation({ kind: 'port', id: port.id, nodeId: node.id });
+        if (port.kind === 'outbound' && !port.disabled) {
+            this.linkHoverTarget.set(null);
+            const from = portCanvasPosition(node, port);
+            this.linkDrag.set({
+                sourceNodeId: node.id,
+                sourcePortId: port.id,
+                from,
+                to: from,
+            });
+            this.linkDragStart.emit({ sourceNode: node, sourcePort: port, event });
+            window.addEventListener('pointermove', this.onWindowPointerMoveForLink);
+            window.addEventListener('pointerup', this.onWindowPointerUpForLink);
+            window.addEventListener('pointercancel', this.onWindowPointerUpForLink);
+        }
+    }
+    pickInboundPortAtPoint(model, point, excludeSourceNodeId) {
+        let best = null;
+        const hitR = 18;
+        for (const node of model.nodes) {
+            if (node.id === excludeSourceNodeId)
+                continue;
+            if (this.isNodeReadonly(node))
+                continue;
+            for (const port of node.inboundPorts) {
+                if (port.disabled || port.readonly)
+                    continue;
+                const c = portCanvasPosition(node, port);
+                const d = Math.hypot(c.x - point.x, c.y - point.y);
+                if (d <= hitR && (!best || d < best.d))
+                    best = { node, port, d };
+            }
+        }
+        return best ? { node: best.node, port: best.port } : null;
+    }
+    //#endregion
+    //#region ---- Connectors UI ----
+    connectorPathD(c) {
+        const model = this.model();
+        const sn = findNode(model, c.sourceNodeId);
+        const tn = findNode(model, c.targetNodeId);
+        if (!sn || !tn)
+            return '';
+        const sp = findPort(sn, c.sourcePortId)?.port;
+        const tp = findPort(tn, c.targetPortId)?.port;
+        if (!sp || !tp)
+            return '';
+        const from = this.modelPointToSurface(portCanvasPosition(sn, sp));
+        const to = this.trimmedConnectorTarget(from, this.modelPointToSurface(portCanvasPosition(tn, tp)));
+        return connectorPath(from, to, this.connectionPreviewStyle(), sp.side, {
+            targetSide: tp.side,
+            obstacles: this.collectObstaclesInSurface(),
+        });
+    }
+    connectorMidpoint(c) {
+        const model = this.model();
+        const sn = findNode(model, c.sourceNodeId);
+        const tn = findNode(model, c.targetNodeId);
+        if (!sn || !tn)
+            return { x: 0, y: 0 };
+        const sp = findPort(sn, c.sourcePortId)?.port;
+        const tp = findPort(tn, c.targetPortId)?.port;
+        if (!sp || !tp)
+            return { x: 0, y: 0 };
+        const a = this.modelPointToSurface(portCanvasPosition(sn, sp));
+        const b = this.modelPointToSurface(portCanvasPosition(tn, tp));
+        return { x: (a.x + b.x) * 0.5, y: (a.y + b.y) * 0.5 };
+    }
+    onConnectorClick(c, event) {
+        event.stopPropagation();
+        event.preventDefault();
+        const append = event.ctrlKey || event.metaKey;
+        if (append) {
+            const next = new Set(this.selectedConnectorIds());
+            if (next.has(c.id))
+                next.delete(c.id);
+            else
+                next.add(c.id);
+            this.selectedConnectorIds.set(next);
+            this.selectedNodeIds.set(new Set());
+        }
+        else {
+            this.selectedConnectorIds.set(new Set([c.id]));
+            this.selectedNodeIds.set(new Set());
+        }
+        this.setActivation({ kind: 'connector', id: c.id });
+        this.connectorClick.emit({ connector: c, event });
+    }
+    onConnectorDoubleClick(c, event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.connectorDoubleClick.emit({ connector: c, event });
+    }
+    removeConnector(c) {
+        if (this.isConnectorReadonly(c))
+            return;
+        const model = this.model();
+        const connectors = model.connectors.filter((x) => x.id !== c.id);
+        this.commit({ ...model, connectors });
+        this.setActivation(null);
+    }
+    previewPath() {
+        const st = this.linkDrag();
+        if (!st)
+            return '';
+        const model = this.model();
+        const sn = findNode(model, st.sourceNodeId);
+        const sp = sn ? findPort(sn, st.sourcePortId)?.port : undefined;
+        if (!sn || !sp)
+            return '';
+        const from = this.modelPointToSurface(st.from);
+        const to = this.modelPointToSurface(st.to);
+        const hover = this.linkHoverTarget();
+        const hoverNode = hover ? findNode(model, hover.nodeId) : undefined;
+        const hoverPort = hover && hoverNode ? findPort(hoverNode, hover.portId)?.port : undefined;
+        return connectorPath(from, this.trimmedConnectorTarget(from, to), this.connectionPreviewStyle(), sp.side, {
+            targetSide: hoverPort?.side,
+            obstacles: this.collectObstaclesInSurface(),
+        });
+    }
+    //#endregion
+    //#region ---- Template context ----
+    templateContext(node) {
+        return { $implicit: node, node };
+    }
+    portClusterStyle(node, port) {
+        const local = portAnchorOnNode(node, port);
+        const w = Math.max(1, node.size.width);
+        const h = Math.max(1, node.size.height);
+        return {
+            position: 'absolute',
+            left: `${(local.x / w) * 100}%`,
+            top: `${(local.y / h) * 100}%`,
+            'z-index': '3',
+        };
+    }
+    portLabelText(port) {
+        return (port.label ?? port.key ?? '').trim();
+    }
+    portLabelX(node, port) {
+        return this.portLabelCanvasPoint(node, port).x;
+    }
+    portLabelY(node, port) {
+        return this.portLabelCanvasPoint(node, port).y;
+    }
+    portLabelAnchor(node, port) {
+        const centerX = this.modelPointToSurface({ x: node.position.x + node.size.width * 0.5, y: node.position.y }).x;
+        const anchor = this.modelPointToSurface(portCanvasPosition(node, port));
+        const dx = anchor.x - centerX;
+        if (Math.abs(dx) < 6)
+            return 'middle';
+        return dx < 0 ? 'end' : 'start';
+    }
+    nodeSurfaceLeft(node) {
+        return node.position.x + this.canvasViewport().offsetX;
+    }
+    nodeSurfaceTop(node) {
+        return node.position.y + this.canvasViewport().offsetY;
+    }
+    trimmedConnectorTarget(from, to) {
+        const dx = to.x - from.x;
+        const dy = to.y - from.y;
+        const len = Math.hypot(dx, dy);
+        if (len < 0.001)
+            return to;
+        // Keep arrowhead just outside the 14px port without creating a visible gap.
+        const trim = 7;
+        return {
+            x: to.x - (dx / len) * trim,
+            y: to.y - (dy / len) * trim,
+        };
+    }
+    portLabelCanvasPoint(node, port) {
+        const anchor = this.modelPointToSurface(portCanvasPosition(node, port));
+        const center = {
+            x: node.position.x + node.size.width * 0.5 + this.canvasViewport().offsetX,
+            y: node.position.y + node.size.height * 0.5 + this.canvasViewport().offsetY,
+        };
+        const vx = anchor.x - center.x;
+        const vy = anchor.y - center.y;
+        const len = Math.hypot(vx, vy);
+        if (len < 0.001)
+            return anchor;
+        const outward = 18;
+        return {
+            x: anchor.x + (vx / len) * outward,
+            y: anchor.y + (vy / len) * outward,
+        };
+    }
+    //#endregion
+    //#region ---- Canvas mapping ----
+    modelPointToSurface(point) {
+        const viewport = this.canvasViewport();
+        return {
+            x: point.x + viewport.offsetX,
+            y: point.y + viewport.offsetY,
+        };
+    }
+    surfacePointToModel(point) {
+        const viewport = this.canvasViewport();
+        return {
+            x: point.x - viewport.offsetX,
+            y: point.y - viewport.offsetY,
+        };
+    }
+    /**
+     * Returns node bounding boxes in surface coordinates.
+     *
+     * All nodes are returned so the router can route AROUND every node, including
+     * the source and target of a connector. The router itself drops obstacles that
+     * already contain the stub-out point so the connector can still exit/enter its port.
+     */
+    collectObstaclesInSurface() {
+        const viewport = this.canvasViewport();
+        const obstacles = [];
+        for (const node of this.model().nodes) {
+            obstacles.push({
+                position: { x: node.position.x + viewport.offsetX, y: node.position.y + viewport.offsetY },
+                size: { width: node.size.width, height: node.size.height },
+            });
+        }
+        return obstacles;
+    }
+    //#endregion
+    //#region ---- Wrapper visuals ----
+    syncWrapperBackgroundStyle() {
+        const wrapper = this.wrapperElement();
+        if (!wrapper) {
+            return;
+        }
+        const gridStyle = this.gridStyle();
+        wrapper.style.backgroundColor = 'var(--ax-sys-color-lightest-surface)';
+        wrapper.style.backgroundImage = String(gridStyle['background-image'] ?? '');
+        wrapper.style.backgroundSize = String(gridStyle['background-size'] ?? '');
+        wrapper.style.borderRadius = '10px';
+    }
+    //#endregion
+    detachWindowListeners() {
+        this.clearWrapperAttachRetry();
+        this.detachWrapperDropTargets();
+        this.linkHoverTarget.set(null);
+        window.removeEventListener('pointermove', this.onWindowPointerMoveForNode);
+        window.removeEventListener('pointerup', this.onWindowPointerUpForNode);
+        window.removeEventListener('pointercancel', this.onWindowPointerUpForNode);
+        window.removeEventListener('pointermove', this.onWindowPointerMoveForResize);
+        window.removeEventListener('pointerup', this.onWindowPointerUpForResize);
+        window.removeEventListener('pointercancel', this.onWindowPointerUpForResize);
+        window.removeEventListener('pointermove', this.onWindowPointerMoveForLink);
+        window.removeEventListener('pointerup', this.onWindowPointerUpForLink);
+        window.removeEventListener('pointercancel', this.onWindowPointerUpForLink);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWorkflowDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPWorkflowDesignerComponent, isStandalone: true, selector: "axp-workflow-designer", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, gridSize: { classPropertyName: "gridSize", publicName: "gridSize", isSignal: true, isRequired: false, transformFunction: null }, snapToGrid: { classPropertyName: "snapToGrid", publicName: "snapToGrid", isSignal: true, isRequired: false, transformFunction: null }, connectionPreviewStyle: { classPropertyName: "connectionPreviewStyle", publicName: "connectionPreviewStyle", isSignal: true, isRequired: false, transformFunction: null }, backgroundPattern: { classPropertyName: "backgroundPattern", publicName: "backgroundPattern", isSignal: true, isRequired: false, transformFunction: null }, canConnect: { classPropertyName: "canConnect", publicName: "canConnect", isSignal: true, isRequired: false, transformFunction: null }, paletteItems: { classPropertyName: "paletteItems", publicName: "paletteItems", isSignal: true, isRequired: false, transformFunction: null }, showPortLabels: { classPropertyName: "showPortLabels", publicName: "showPortLabels", isSignal: true, isRequired: false, transformFunction: null }, nodeBodyTemplate: { classPropertyName: "nodeBodyTemplate", publicName: "nodeBodyTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modelChange: "modelChange", zoomChange: "zoomChange", designerPointerDown: "designerPointerDown", designerClick: "designerClick", designerDoubleClick: "designerDoubleClick", nodePointerDown: "nodePointerDown", nodeClick: "nodeClick", nodeDoubleClick: "nodeDoubleClick", nodeContextMenu: "nodeContextMenu", nodeDragStart: "nodeDragStart", nodeDragEnd: "nodeDragEnd", portPointerDown: "portPointerDown", linkDragStart: "linkDragStart", linkDragMove: "linkDragMove", linkDragEnd: "linkDragEnd", connectorClick: "connectorClick", connectorDoubleClick: "connectorDoubleClick", connectionCreated: "connectionCreated", connectionRejected: "connectionRejected", activationChange: "activationChange" }, host: { listeners: { "window:keydown": "onWindowKeydown($event)" }, classAttribute: "axp-workflow-designer-host" }, viewQueries: [{ propertyName: "surfaceRef", first: true, predicate: ["surface"], descendants: true, isSignal: true }, { propertyName: "panViewRef", first: true, predicate: AXPanViewDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"axp-workflow-designer\" [ngStyle]=\"gridStyle()\">\n  <div\n    #surface\n    class=\"axp-workflow-designer__surface\"\n    axPanView\n    [(panX)]=\"panX\"\n    [(panY)]=\"panY\"\n    [(zoom)]=\"panZoomLevel\"\n    [maxZoom]=\"10000\"\n    [freeMode]=\"false\"\n    [fitContent]=\"true\"\n    wrapperClasses=\"h\"\n    [ngStyle]=\"surfaceStyle()\"\n    (pointerdown)=\"onSurfacePointerDown($event)\"\n    (click)=\"onSurfaceClick($event)\"\n    (dblclick)=\"onSurfaceDoubleClick($event)\"\n    (dragover)=\"onCanvasDragOver($event)\"\n    (drop)=\"onCanvasDrop($event)\"\n  >\n    <svg class=\"axp-workflow-designer__svg\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMinYMin meet\">\n      <defs>\n        <marker [attr.id]=\"svgMarkerId\" markerWidth=\"6\" markerHeight=\"6\" refX=\"3.9\" refY=\"3\" orient=\"auto\">\n          <path d=\"M0,0 L4,3 L0,6 Q1.5,3 0,0 Z\" class=\"axp-workflow-designer__arrow-head\"></path>\n        </marker>\n      </defs>\n      @for (c of model().connectors; track c.id) {\n        <path\n          class=\"axp-workflow-designer__edge-hit\"\n          [attr.d]=\"connectorPathD(c)\"\n          fill=\"none\"\n          stroke=\"transparent\"\n          stroke-width=\"16\"\n          pointer-events=\"stroke\"\n          (click)=\"onConnectorClick(c, $event)\"\n          (dblclick)=\"onConnectorDoubleClick(c, $event)\"\n        />\n        <path\n          [class]=\"connectorEdgeClasses(c)\"\n          [attr.d]=\"connectorPathD(c)\"\n          fill=\"none\"\n          [attr.marker-end]=\"'url(#' + svgMarkerId + ')'\"\n        />\n      }\n      @if (linkDrag()) {\n        <path class=\"axp-workflow-designer__edge-preview\" [attr.d]=\"previewPath()\" fill=\"none\" />\n      }\n      @if (showPortLabels()) {\n        @for (node of model().nodes; track node.id) {\n          @for (port of node.inboundPorts; track port.id) {\n            @if (portLabelText(port)) {\n              <text\n                class=\"axp-workflow-designer__port-label-svg\"\n                [attr.x]=\"portLabelX(node, port)\"\n                [attr.y]=\"portLabelY(node, port)\"\n                [attr.text-anchor]=\"portLabelAnchor(node, port)\"\n              >\n                {{ portLabelText(port) }}\n              </text>\n            }\n          }\n          @for (port of node.outboundPorts; track port.id) {\n            @if (portLabelText(port)) {\n              <text\n                class=\"axp-workflow-designer__port-label-svg\"\n                [attr.x]=\"portLabelX(node, port)\"\n                [attr.y]=\"portLabelY(node, port)\"\n                [attr.text-anchor]=\"portLabelAnchor(node, port)\"\n              >\n                {{ portLabelText(port) }}\n              </text>\n            }\n          }\n        }\n      }\n    </svg>\n\n    @for (c of model().connectors; track c.id) {\n      @if (isConnectorActive(c.id) && !isConnectorReadonly(c)) {\n        <div\n          class=\"axp-workflow-designer__connector-actions\"\n          [style.left.px]=\"connectorMidpoint(c).x - 16\"\n          [style.top.px]=\"connectorMidpoint(c).y - 16\"\n        >\n          <ax-button look=\"blank\" class=\"ax-xs axp-workflow-designer__icon-btn\" (onClick)=\"removeConnector(c)\">\n            <ax-icon class=\"fa-solid fa-minus\"></ax-icon>\n          </ax-button>\n        </div>\n      }\n    }\n\n    @for (node of model().nodes; track node.id) {\n      <div\n        class=\"axp-workflow-designer__node\"\n        [class.axp-workflow-designer__node--active]=\"isNodeActive(node.id)\"\n        [style.left.px]=\"nodeSurfaceLeft(node)\"\n        [style.top.px]=\"nodeSurfaceTop(node)\"\n        [style.width.px]=\"node.size.width\"\n        [style.height.px]=\"node.size.height\"\n        (pointerdown)=\"onNodePointerDown(node, $event)\"\n        (click)=\"onNodeClick(node, $event)\"\n        (dblclick)=\"onNodeDoubleClick(node, $event)\"\n        (contextmenu)=\"onNodeContextMenu(node, $event)\"\n      >\n        <div [class]=\"nodeShapeClasses(node)\">\n          <div class=\"axp-workflow-designer__node-body\" (pointerdown)=\"onNodeBodyPointerDown(node, $event)\">\n            @if (nodeBodyTemplate(); as tpl) {\n              <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"templateContext(node)\" />\n            } @else {\n              <div class=\"axp-workflow-designer__node-default\">\n                @if (node.icon) {\n                  <ax-icon class=\"axp-workflow-designer__node-default-icon\" [class]=\"node.icon\"></ax-icon>\n                }\n                <span class=\"axp-workflow-designer__node-default-title\">{{ node.title }}</span>\n              </div>\n            }\n          </div>\n        </div>\n\n        @for (port of node.inboundPorts; track port.id) {\n          <div\n            class=\"axp-workflow-designer__port-cluster\"\n            [class.axp-workflow-designer__port-cluster--side-top]=\"port.side === 'top'\"\n            [class.axp-workflow-designer__port-cluster--side-right]=\"port.side === 'right'\"\n            [class.axp-workflow-designer__port-cluster--side-bottom]=\"port.side === 'bottom'\"\n            [class.axp-workflow-designer__port-cluster--side-left]=\"port.side === 'left'\"\n            [ngStyle]=\"portClusterStyle(node, port)\"\n          >\n            <button\n              type=\"button\"\n              class=\"axp-workflow-designer__port axp-workflow-designer__port--inbound\"\n              [class.axp-workflow-designer__port--active]=\"isPortActive(node.id, port.id)\"\n              [class.axp-workflow-designer__port--link-hover]=\"isPortLinkHoverTarget(node.id, port.id)\"\n              [class.axp-workflow-designer__port--disabled]=\"port.disabled\"\n              [disabled]=\"isNodeReadonly(node) || port.disabled === true\"\n              (pointerdown)=\"onPortPointerDown(node, port, $event)\"\n            ></button>\n          </div>\n        }\n        @for (port of node.outboundPorts; track port.id) {\n          <div\n            class=\"axp-workflow-designer__port-cluster\"\n            [class.axp-workflow-designer__port-cluster--side-top]=\"port.side === 'top'\"\n            [class.axp-workflow-designer__port-cluster--side-right]=\"port.side === 'right'\"\n            [class.axp-workflow-designer__port-cluster--side-bottom]=\"port.side === 'bottom'\"\n            [class.axp-workflow-designer__port-cluster--side-left]=\"port.side === 'left'\"\n            [ngStyle]=\"portClusterStyle(node, port)\"\n          >\n            <button\n              type=\"button\"\n              class=\"axp-workflow-designer__port axp-workflow-designer__port--outbound\"\n              [class.axp-workflow-designer__port--active]=\"isPortActive(node.id, port.id)\"\n              [class.axp-workflow-designer__port--disabled]=\"port.disabled\"\n              [disabled]=\"isNodeReadonly(node) || port.disabled === true\"\n              (pointerdown)=\"onPortPointerDown(node, port, $event)\"\n            ></button>\n          </div>\n        }\n\n        @if (isNodeActive(node.id) && !isNodeReadonly(node)) {\n          <span\n            class=\"axp-workflow-designer__resize axp-workflow-designer__resize--nw\"\n            (pointerdown)=\"onResizePointerDown(node, 'nw', $event)\"\n          ></span>\n          <span\n            class=\"axp-workflow-designer__resize axp-workflow-designer__resize--ne\"\n            (pointerdown)=\"onResizePointerDown(node, 'ne', $event)\"\n          ></span>\n          <span\n            class=\"axp-workflow-designer__resize axp-workflow-designer__resize--sw\"\n            (pointerdown)=\"onResizePointerDown(node, 'sw', $event)\"\n          ></span>\n          <span\n            class=\"axp-workflow-designer__resize axp-workflow-designer__resize--se\"\n            (pointerdown)=\"onResizePointerDown(node, 'se', $event)\"\n          ></span>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".axp-workflow-designer-host{display:block;width:100%;height:100%;min-height:360px;user-select:none;-webkit-user-select:none}.axp-workflow-designer{display:flex;width:100%;height:100%;min-height:inherit}.axp-workflow-designer__surface{position:relative;flex:1;min-width:100%;min-height:100%;overflow:auto;border-radius:10px;user-select:none;-webkit-user-select:none}.axp-workflow-designer__surface::ng-deep .ax-pan-view__wrapper{width:100%;height:100%}.axp-workflow-designer__svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.axp-workflow-designer__edge-hit{pointer-events:stroke;cursor:pointer}.axp-workflow-designer__edge{pointer-events:none;stroke:rgb(var(--ax-sys-color-neutral-500));stroke-width:2;transition:stroke .12s ease}.axp-workflow-designer__edge--active{stroke:rgb(var(--ax-sys-color-primary-500));stroke-dasharray:2}.axp-workflow-designer__edge.ax-primary-surface:not(.axp-workflow-designer__edge--active){stroke:rgb(var(--ax-sys-color-primary-500))}.axp-workflow-designer__edge.ax-secondary-surface:not(.axp-workflow-designer__edge--active){stroke:rgb(var(--ax-sys-color-secondary-500))}.axp-workflow-designer__edge.ax-success-surface:not(.axp-workflow-designer__edge--active){stroke:rgb(var(--ax-sys-color-success-500))}.axp-workflow-designer__edge.ax-warning-surface:not(.axp-workflow-designer__edge--active){stroke:rgb(var(--ax-sys-color-warning-500))}.axp-workflow-designer__edge.ax-danger-surface:not(.axp-workflow-designer__edge--active){stroke:rgb(var(--ax-sys-color-danger-500))}.axp-workflow-designer__edge-preview{pointer-events:none;stroke:rgb(var(--ax-sys-color-primary-400));stroke-width:2;stroke-dasharray:6 4}.axp-workflow-designer__port-label-svg{fill:rgb(var(--ax-sys-color-on-surface));font-size:10px;font-weight:600;dominant-baseline:middle;pointer-events:none;paint-order:stroke;stroke:rgb(var(--ax-sys-color-surface));stroke-width:4px;stroke-linejoin:round}.axp-workflow-designer__arrow-head{fill:rgb(var(--ax-sys-color-neutral-500))}.axp-workflow-designer__connector-actions{position:absolute;z-index:4;display:flex;align-items:center;justify-content:center}.axp-workflow-designer__icon-btn{border-radius:999px;user-select:none;-webkit-user-select:none}.axp-workflow-designer__node{position:absolute;z-index:2;box-sizing:border-box;user-select:none;-webkit-user-select:none}.axp-workflow-designer__node-shape{position:absolute;inset:0;box-sizing:border-box;background:rgb(var(--ax-sys-color-surface));overflow:visible}.axp-workflow-designer__node-shape.axp-primary-surface{background:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface))}.axp-workflow-designer__node-shape.axp-secondary-surface{background:rgb(var(--ax-sys-color-secondary-surface));color:rgb(var(--ax-sys-color-on-secondary-surface))}.axp-workflow-designer__node-shape.axp-success-surface{background:rgb(var(--ax-sys-color-success-surface));color:rgb(var(--ax-sys-color-on-success-surface))}.axp-workflow-designer__node-shape.axp-warning-surface{background:rgb(var(--ax-sys-color-warning-surface));color:rgb(var(--ax-sys-color-on-warning-surface))}.axp-workflow-designer__node-shape.axp-danger-surface{background:rgb(var(--ax-sys-color-danger-surface));border-color:rgb(var(--ax-sys-color-danger-500));color:rgb(var(--ax-sys-color-on-danger-surface))}.axp-workflow-designer__node.axp-workflow-designer__node--active .axp-workflow-designer__node-shape{border:2px dotted rgb(var(--ax-sys-color-primary-500))}.axp-workflow-designer__node-shape--rectangle{border-radius:4px}.axp-workflow-designer__node-shape--rounded-rectangle{border-radius:14px}.axp-workflow-designer__node-shape--circle,.axp-workflow-designer__node-shape--ellipse{border-radius:50%}.axp-workflow-designer__node-shape--diamond{border-radius:0;clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%)}.axp-workflow-designer__node-body{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:8px 12px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}.axp-workflow-designer__node-default{display:flex;align-items:center;gap:8px;min-width:0}.axp-workflow-designer__node-default-icon{flex-shrink:0}.axp-workflow-designer__node-default-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.axp-workflow-designer__port-cluster{position:absolute;width:0;height:0;overflow:visible;pointer-events:none;transform:translate(-50%,-50%);z-index:3}.axp-workflow-designer__port{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);flex-shrink:0;width:14px;height:14px;padding:0;border-radius:999px;border:1px solid rgb(var(--ax-sys-color-surface));cursor:crosshair;touch-action:none;pointer-events:auto;transition:transform .12s ease}.axp-workflow-designer__port--inbound{background:rgb(var(--ax-sys-color-success-500))}.axp-workflow-designer__port--outbound{background:rgb(var(--ax-sys-color-primary-500))}.axp-workflow-designer__port--active{box-shadow:0 0 0 3px #3b82f659}.axp-workflow-designer__port--link-hover{border:1px solid rgb(var(--ax-sys-color-primary-500));transform:translate(-50%,-50%) scale(1.12)}.axp-workflow-designer__port--disabled{opacity:.45;cursor:not-allowed}.axp-workflow-designer__port:disabled{opacity:.45;cursor:not-allowed}.axp-workflow-designer__resize{position:absolute;width:7px;height:7px;border-radius:999px;background:rgb(var(--ax-sys-color-primary-500));border:1px solid rgb(var(--ax-sys-color-surface));z-index:4;touch-action:none;user-select:none;-webkit-user-select:none}.axp-workflow-designer__resize--nw{left:-6px;top:-6px;cursor:nwse-resize}.axp-workflow-designer__resize--ne{right:-6px;top:-6px;cursor:nesw-resize}.axp-workflow-designer__resize--sw{left:-6px;bottom:-6px;cursor:nesw-resize}.axp-workflow-designer__resize--se{right:-6px;bottom:-6px;cursor:nwse-resize}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXPanViewDirective, selector: "[axPanView]", inputs: ["zoomStep", "minZoom", "maxZoom", "freeMode", "fitContent", "disablePan", "disableZoom", "wrapperClasses", "panX", "panY", "zoom"], outputs: ["panXChange", "panYChange", "zoomChange", "positionChange"], exportAs: ["axPanView"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWorkflowDesignerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-workflow-designer', imports: [CommonModule, AXDecoratorModule, AXButtonModule, AXPanViewDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'axp-workflow-designer-host',
+                        '(window:keydown)': 'onWindowKeydown($event)',
+                    }, template: "<div class=\"axp-workflow-designer\" [ngStyle]=\"gridStyle()\">\n  <div\n    #surface\n    class=\"axp-workflow-designer__surface\"\n    axPanView\n    [(panX)]=\"panX\"\n    [(panY)]=\"panY\"\n    [(zoom)]=\"panZoomLevel\"\n    [maxZoom]=\"10000\"\n    [freeMode]=\"false\"\n    [fitContent]=\"true\"\n    wrapperClasses=\"h\"\n    [ngStyle]=\"surfaceStyle()\"\n    (pointerdown)=\"onSurfacePointerDown($event)\"\n    (click)=\"onSurfaceClick($event)\"\n    (dblclick)=\"onSurfaceDoubleClick($event)\"\n    (dragover)=\"onCanvasDragOver($event)\"\n    (drop)=\"onCanvasDrop($event)\"\n  >\n    <svg class=\"axp-workflow-designer__svg\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMinYMin meet\">\n      <defs>\n        <marker [attr.id]=\"svgMarkerId\" markerWidth=\"6\" markerHeight=\"6\" refX=\"3.9\" refY=\"3\" orient=\"auto\">\n          <path d=\"M0,0 L4,3 L0,6 Q1.5,3 0,0 Z\" class=\"axp-workflow-designer__arrow-head\"></path>\n        </marker>\n      </defs>\n      @for (c of model().connectors; track c.id) {\n        <path\n          class=\"axp-workflow-designer__edge-hit\"\n          [attr.d]=\"connectorPathD(c)\"\n          fill=\"none\"\n          stroke=\"transparent\"\n          stroke-width=\"16\"\n          pointer-events=\"stroke\"\n          (click)=\"onConnectorClick(c, $event)\"\n          (dblclick)=\"onConnectorDoubleClick(c, $event)\"\n        />\n        <path\n          [class]=\"connectorEdgeClasses(c)\"\n          [attr.d]=\"connectorPathD(c)\"\n          fill=\"none\"\n          [attr.marker-end]=\"'url(#' + svgMarkerId + ')'\"\n        />\n      }\n      @if (linkDrag()) {\n        <path class=\"axp-workflow-designer__edge-preview\" [attr.d]=\"previewPath()\" fill=\"none\" />\n      }\n      @if (showPortLabels()) {\n        @for (node of model().nodes; track node.id) {\n          @for (port of node.inboundPorts; track port.id) {\n            @if (portLabelText(port)) {\n              <text\n                class=\"axp-workflow-designer__port-label-svg\"\n                [attr.x]=\"portLabelX(node, port)\"\n                [attr.y]=\"portLabelY(node, port)\"\n                [attr.text-anchor]=\"portLabelAnchor(node, port)\"\n              >\n                {{ portLabelText(port) }}\n              </text>\n            }\n          }\n          @for (port of node.outboundPorts; track port.id) {\n            @if (portLabelText(port)) {\n              <text\n                class=\"axp-workflow-designer__port-label-svg\"\n                [attr.x]=\"portLabelX(node, port)\"\n                [attr.y]=\"portLabelY(node, port)\"\n                [attr.text-anchor]=\"portLabelAnchor(node, port)\"\n              >\n                {{ portLabelText(port) }}\n              </text>\n            }\n          }\n        }\n      }\n    </svg>\n\n    @for (c of model().connectors; track c.id) {\n      @if (isConnectorActive(c.id) && !isConnectorReadonly(c)) {\n        <div\n          class=\"axp-workflow-designer__connector-actions\"\n          [style.left.px]=\"connectorMidpoint(c).x - 16\"\n          [style.top.px]=\"connectorMidpoint(c).y - 16\"\n        >\n          <ax-button look=\"blank\" class=\"ax-xs axp-workflow-designer__icon-btn\" (onClick)=\"removeConnector(c)\">\n            <ax-icon class=\"fa-solid fa-minus\"></ax-icon>\n          </ax-button>\n        </div>\n      }\n    }\n\n    @for (node of model().nodes; track node.id) {\n      <div\n        class=\"axp-workflow-designer__node\"\n        [class.axp-workflow-designer__node--active]=\"isNodeActive(node.id)\"\n        [style.left.px]=\"nodeSurfaceLeft(node)\"\n        [style.top.px]=\"nodeSurfaceTop(node)\"\n        [style.width.px]=\"node.size.width\"\n        [style.height.px]=\"node.size.height\"\n        (pointerdown)=\"onNodePointerDown(node, $event)\"\n        (click)=\"onNodeClick(node, $event)\"\n        (dblclick)=\"onNodeDoubleClick(node, $event)\"\n        (contextmenu)=\"onNodeContextMenu(node, $event)\"\n      >\n        <div [class]=\"nodeShapeClasses(node)\">\n          <div class=\"axp-workflow-designer__node-body\" (pointerdown)=\"onNodeBodyPointerDown(node, $event)\">\n            @if (nodeBodyTemplate(); as tpl) {\n              <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"templateContext(node)\" />\n            } @else {\n              <div class=\"axp-workflow-designer__node-default\">\n                @if (node.icon) {\n                  <ax-icon class=\"axp-workflow-designer__node-default-icon\" [class]=\"node.icon\"></ax-icon>\n                }\n                <span class=\"axp-workflow-designer__node-default-title\">{{ node.title }}</span>\n              </div>\n            }\n          </div>\n        </div>\n\n        @for (port of node.inboundPorts; track port.id) {\n          <div\n            class=\"axp-workflow-designer__port-cluster\"\n            [class.axp-workflow-designer__port-cluster--side-top]=\"port.side === 'top'\"\n            [class.axp-workflow-designer__port-cluster--side-right]=\"port.side === 'right'\"\n            [class.axp-workflow-designer__port-cluster--side-bottom]=\"port.side === 'bottom'\"\n            [class.axp-workflow-designer__port-cluster--side-left]=\"port.side === 'left'\"\n            [ngStyle]=\"portClusterStyle(node, port)\"\n          >\n            <button\n              type=\"button\"\n              class=\"axp-workflow-designer__port axp-workflow-designer__port--inbound\"\n              [class.axp-workflow-designer__port--active]=\"isPortActive(node.id, port.id)\"\n              [class.axp-workflow-designer__port--link-hover]=\"isPortLinkHoverTarget(node.id, port.id)\"\n              [class.axp-workflow-designer__port--disabled]=\"port.disabled\"\n              [disabled]=\"isNodeReadonly(node) || port.disabled === true\"\n              (pointerdown)=\"onPortPointerDown(node, port, $event)\"\n            ></button>\n          </div>\n        }\n        @for (port of node.outboundPorts; track port.id) {\n          <div\n            class=\"axp-workflow-designer__port-cluster\"\n            [class.axp-workflow-designer__port-cluster--side-top]=\"port.side === 'top'\"\n            [class.axp-workflow-designer__port-cluster--side-right]=\"port.side === 'right'\"\n            [class.axp-workflow-designer__port-cluster--side-bottom]=\"port.side === 'bottom'\"\n            [class.axp-workflow-designer__port-cluster--side-left]=\"port.side === 'left'\"\n            [ngStyle]=\"portClusterStyle(node, port)\"\n          >\n            <button\n              type=\"button\"\n              class=\"axp-workflow-designer__port axp-workflow-designer__port--outbound\"\n              [class.axp-workflow-designer__port--active]=\"isPortActive(node.id, port.id)\"\n              [class.axp-workflow-designer__port--disabled]=\"port.disabled\"\n              [disabled]=\"isNodeReadonly(node) || port.disabled === true\"\n              (pointerdown)=\"onPortPointerDown(node, port, $event)\"\n            ></button>\n          </div>\n        }\n\n        @if (isNodeActive(node.id) && !isNodeReadonly(node)) {\n          <span\n            class=\"axp-workflow-designer__resize axp-workflow-designer__resize--nw\"\n            (pointerdown)=\"onResizePointerDown(node, 'nw', $event)\"\n          ></span>\n          <span\n            class=\"axp-workflow-designer__resize axp-workflow-designer__resize--ne\"\n            (pointerdown)=\"onResizePointerDown(node, 'ne', $event)\"\n          ></span>\n          <span\n            class=\"axp-workflow-designer__resize axp-workflow-designer__resize--sw\"\n            (pointerdown)=\"onResizePointerDown(node, 'sw', $event)\"\n          ></span>\n          <span\n            class=\"axp-workflow-designer__resize axp-workflow-designer__resize--se\"\n            (pointerdown)=\"onResizePointerDown(node, 'se', $event)\"\n          ></span>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".axp-workflow-designer-host{display:block;width:100%;height:100%;min-height:360px;user-select:none;-webkit-user-select:none}.axp-workflow-designer{display:flex;width:100%;height:100%;min-height:inherit}.axp-workflow-designer__surface{position:relative;flex:1;min-width:100%;min-height:100%;overflow:auto;border-radius:10px;user-select:none;-webkit-user-select:none}.axp-workflow-designer__surface::ng-deep .ax-pan-view__wrapper{width:100%;height:100%}.axp-workflow-designer__svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.axp-workflow-designer__edge-hit{pointer-events:stroke;cursor:pointer}.axp-workflow-designer__edge{pointer-events:none;stroke:rgb(var(--ax-sys-color-neutral-500));stroke-width:2;transition:stroke .12s ease}.axp-workflow-designer__edge--active{stroke:rgb(var(--ax-sys-color-primary-500));stroke-dasharray:2}.axp-workflow-designer__edge.ax-primary-surface:not(.axp-workflow-designer__edge--active){stroke:rgb(var(--ax-sys-color-primary-500))}.axp-workflow-designer__edge.ax-secondary-surface:not(.axp-workflow-designer__edge--active){stroke:rgb(var(--ax-sys-color-secondary-500))}.axp-workflow-designer__edge.ax-success-surface:not(.axp-workflow-designer__edge--active){stroke:rgb(var(--ax-sys-color-success-500))}.axp-workflow-designer__edge.ax-warning-surface:not(.axp-workflow-designer__edge--active){stroke:rgb(var(--ax-sys-color-warning-500))}.axp-workflow-designer__edge.ax-danger-surface:not(.axp-workflow-designer__edge--active){stroke:rgb(var(--ax-sys-color-danger-500))}.axp-workflow-designer__edge-preview{pointer-events:none;stroke:rgb(var(--ax-sys-color-primary-400));stroke-width:2;stroke-dasharray:6 4}.axp-workflow-designer__port-label-svg{fill:rgb(var(--ax-sys-color-on-surface));font-size:10px;font-weight:600;dominant-baseline:middle;pointer-events:none;paint-order:stroke;stroke:rgb(var(--ax-sys-color-surface));stroke-width:4px;stroke-linejoin:round}.axp-workflow-designer__arrow-head{fill:rgb(var(--ax-sys-color-neutral-500))}.axp-workflow-designer__connector-actions{position:absolute;z-index:4;display:flex;align-items:center;justify-content:center}.axp-workflow-designer__icon-btn{border-radius:999px;user-select:none;-webkit-user-select:none}.axp-workflow-designer__node{position:absolute;z-index:2;box-sizing:border-box;user-select:none;-webkit-user-select:none}.axp-workflow-designer__node-shape{position:absolute;inset:0;box-sizing:border-box;background:rgb(var(--ax-sys-color-surface));overflow:visible}.axp-workflow-designer__node-shape.axp-primary-surface{background:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface))}.axp-workflow-designer__node-shape.axp-secondary-surface{background:rgb(var(--ax-sys-color-secondary-surface));color:rgb(var(--ax-sys-color-on-secondary-surface))}.axp-workflow-designer__node-shape.axp-success-surface{background:rgb(var(--ax-sys-color-success-surface));color:rgb(var(--ax-sys-color-on-success-surface))}.axp-workflow-designer__node-shape.axp-warning-surface{background:rgb(var(--ax-sys-color-warning-surface));color:rgb(var(--ax-sys-color-on-warning-surface))}.axp-workflow-designer__node-shape.axp-danger-surface{background:rgb(var(--ax-sys-color-danger-surface));border-color:rgb(var(--ax-sys-color-danger-500));color:rgb(var(--ax-sys-color-on-danger-surface))}.axp-workflow-designer__node.axp-workflow-designer__node--active .axp-workflow-designer__node-shape{border:2px dotted rgb(var(--ax-sys-color-primary-500))}.axp-workflow-designer__node-shape--rectangle{border-radius:4px}.axp-workflow-designer__node-shape--rounded-rectangle{border-radius:14px}.axp-workflow-designer__node-shape--circle,.axp-workflow-designer__node-shape--ellipse{border-radius:50%}.axp-workflow-designer__node-shape--diamond{border-radius:0;clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%)}.axp-workflow-designer__node-body{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:8px 12px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}.axp-workflow-designer__node-default{display:flex;align-items:center;gap:8px;min-width:0}.axp-workflow-designer__node-default-icon{flex-shrink:0}.axp-workflow-designer__node-default-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.axp-workflow-designer__port-cluster{position:absolute;width:0;height:0;overflow:visible;pointer-events:none;transform:translate(-50%,-50%);z-index:3}.axp-workflow-designer__port{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);flex-shrink:0;width:14px;height:14px;padding:0;border-radius:999px;border:1px solid rgb(var(--ax-sys-color-surface));cursor:crosshair;touch-action:none;pointer-events:auto;transition:transform .12s ease}.axp-workflow-designer__port--inbound{background:rgb(var(--ax-sys-color-success-500))}.axp-workflow-designer__port--outbound{background:rgb(var(--ax-sys-color-primary-500))}.axp-workflow-designer__port--active{box-shadow:0 0 0 3px #3b82f659}.axp-workflow-designer__port--link-hover{border:1px solid rgb(var(--ax-sys-color-primary-500));transform:translate(-50%,-50%) scale(1.12)}.axp-workflow-designer__port--disabled{opacity:.45;cursor:not-allowed}.axp-workflow-designer__port:disabled{opacity:.45;cursor:not-allowed}.axp-workflow-designer__resize{position:absolute;width:7px;height:7px;border-radius:999px;background:rgb(var(--ax-sys-color-primary-500));border:1px solid rgb(var(--ax-sys-color-surface));z-index:4;touch-action:none;user-select:none;-webkit-user-select:none}.axp-workflow-designer__resize--nw{left:-6px;top:-6px;cursor:nwse-resize}.axp-workflow-designer__resize--ne{right:-6px;top:-6px;cursor:nesw-resize}.axp-workflow-designer__resize--sw{left:-6px;bottom:-6px;cursor:nesw-resize}.axp-workflow-designer__resize--se{right:-6px;bottom:-6px;cursor:nwse-resize}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], modelChange: [{ type: i0.Output, args: ["modelChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], gridSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridSize", required: false }] }], snapToGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapToGrid", required: false }] }], connectionPreviewStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionPreviewStyle", required: false }] }], backgroundPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundPattern", required: false }] }], zoomChange: [{ type: i0.Output, args: ["zoomChange"] }], canConnect: [{ type: i0.Input, args: [{ isSignal: true, alias: "canConnect", required: false }] }], paletteItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "paletteItems", required: false }] }], showPortLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPortLabels", required: false }] }], nodeBodyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeBodyTemplate", required: false }] }], designerPointerDown: [{ type: i0.Output, args: ["designerPointerDown"] }], designerClick: [{ type: i0.Output, args: ["designerClick"] }], designerDoubleClick: [{ type: i0.Output, args: ["designerDoubleClick"] }], nodePointerDown: [{ type: i0.Output, args: ["nodePointerDown"] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeDoubleClick: [{ type: i0.Output, args: ["nodeDoubleClick"] }], nodeContextMenu: [{ type: i0.Output, args: ["nodeContextMenu"] }], nodeDragStart: [{ type: i0.Output, args: ["nodeDragStart"] }], nodeDragEnd: [{ type: i0.Output, args: ["nodeDragEnd"] }], portPointerDown: [{ type: i0.Output, args: ["portPointerDown"] }], linkDragStart: [{ type: i0.Output, args: ["linkDragStart"] }], linkDragMove: [{ type: i0.Output, args: ["linkDragMove"] }], linkDragEnd: [{ type: i0.Output, args: ["linkDragEnd"] }], connectorClick: [{ type: i0.Output, args: ["connectorClick"] }], connectorDoubleClick: [{ type: i0.Output, args: ["connectorDoubleClick"] }], connectionCreated: [{ type: i0.Output, args: ["connectionCreated"] }], connectionRejected: [{ type: i0.Output, args: ["connectionRejected"] }], activationChange: [{ type: i0.Output, args: ["activationChange"] }], surfaceRef: [{ type: i0.ViewChild, args: ['surface', { isSignal: true }] }], panViewRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPanViewDirective), { isSignal: true }] }] } });
+
+/**
+ * Makes any host element a draggable palette source. Set `[axpWorkflowPaletteItem]="item"` and optional outputs.
+ * Drop target: `axp-workflow-designer` canvas (same MIME as drag payload).
+ */
+class AXPWorkflowPaletteItemDragDirective {
+    constructor() {
+        /** Palette definition serialized into the drag payload. */
+        this.axpWorkflowPaletteItem = input.required({ ...(ngDevMode ? { debugName: "axpWorkflowPaletteItem" } : /* istanbul ignore next */ {}), alias: 'axpWorkflowPaletteItem' });
+        /** When true, drag is disabled. */
+        this.axpWorkflowPaletteDragDisabled = input(false, { ...(ngDevMode ? { debugName: "axpWorkflowPaletteDragDisabled" } : /* istanbul ignore next */ {}), alias: 'axpWorkflowPaletteDragDisabled' });
+        this.axpWorkflowPaletteDragStart = output({
+            alias: 'axpWorkflowPaletteDragStart',
+        });
+        this.axpWorkflowPaletteDragEnd = output({
+            alias: 'axpWorkflowPaletteDragEnd',
+        });
+        this.hostDraggable = computed(() => (this.axpWorkflowPaletteDragDisabled() ? null : true), ...(ngDevMode ? [{ debugName: "hostDraggable" }] : /* istanbul ignore next */ []));
+        this.lastItem = null;
+    }
+    onDragStart(event) {
+        if (this.axpWorkflowPaletteDragDisabled()) {
+            event.preventDefault();
+            return;
+        }
+        const item = this.axpWorkflowPaletteItem();
+        this.lastItem = item;
+        event.dataTransfer?.setData(AXP_WORKFLOW_PALETTE_MIME, JSON.stringify(item));
+        event.dataTransfer?.setData('text/plain', item.title);
+        if (event.dataTransfer)
+            event.dataTransfer.effectAllowed = 'copy';
+        this.axpWorkflowPaletteDragStart.emit({ item, event });
+    }
+    onDragEnd(event) {
+        this.axpWorkflowPaletteDragEnd.emit({ item: this.lastItem, event });
+        this.lastItem = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWorkflowPaletteItemDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: AXPWorkflowPaletteItemDragDirective, isStandalone: true, selector: "[axpWorkflowPaletteItem]", inputs: { axpWorkflowPaletteItem: { classPropertyName: "axpWorkflowPaletteItem", publicName: "axpWorkflowPaletteItem", isSignal: true, isRequired: true, transformFunction: null }, axpWorkflowPaletteDragDisabled: { classPropertyName: "axpWorkflowPaletteDragDisabled", publicName: "axpWorkflowPaletteDragDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { axpWorkflowPaletteDragStart: "axpWorkflowPaletteDragStart", axpWorkflowPaletteDragEnd: "axpWorkflowPaletteDragEnd" }, host: { listeners: { "dragstart": "onDragStart($event)", "dragend": "onDragEnd($event)" }, properties: { "attr.draggable": "hostDraggable()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWorkflowPaletteItemDragDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axpWorkflowPaletteItem]',
+                    host: {
+                        '[attr.draggable]': 'hostDraggable()',
+                        '(dragstart)': 'onDragStart($event)',
+                        '(dragend)': 'onDragEnd($event)',
+                    },
+                }]
+        }], propDecorators: { axpWorkflowPaletteItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "axpWorkflowPaletteItem", required: true }] }], axpWorkflowPaletteDragDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "axpWorkflowPaletteDragDisabled", required: false }] }], axpWorkflowPaletteDragStart: [{ type: i0.Output, args: ["axpWorkflowPaletteDragStart"] }], axpWorkflowPaletteDragEnd: [{ type: i0.Output, args: ["axpWorkflowPaletteDragEnd"] }] } });
+
+//#region ---- Point & geometry ----
+//#endregion
+
 // export * from './lib/features';
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXPMenuManagementService as A, RootConfig as R, AXMPlatformManagementModule as a, AXMTokenEntityModule as b, AXMTokensService as c, AXMTokensServiceImpl as d, AXPPlatformManagementFeatureKeys as e, aggregateDefinitionEntityFactory as f, commandDefinitionEntityFactory as g, interfaceDefinitionFromWidgetFieldConfiguratorValue as h, interfaceDefinitionEntityFactory as i, mapEntityFieldRowsInterfaceToDomain as j, menuDefinitionEntityFactory as k, moduleDefinitionEntityFactory as l, mapEntityFieldRowsInterfaceForForm as m, pluginDefinitionEntityFactory as n, tokenEntityFactory as o, permissionGroupDefinitionEntityFactory as p, queryDefinitionEntityFactory as q, relationDefinitionEntityFactory as r, toWidgetFieldConfiguratorColumnNode as t, validationDefinitionEntityFactory as v, widgetFieldConfiguratorValueFromInterfaceDefinition as w };
-//# sourceMappingURL=acorex-modules-platform-management-acorex-modules-platform-management-DkOzj2Oy.mjs.map
+export { AXPMenuManagementService as A, menuDefinitionEntityFactory as B, moduleDefinitionEntityFactory as C, parsePaletteItemDragPayload as D, permissionGroupDefinitionEntityFactory as E, pluginDefinitionEntityFactory as F, portAnchorOnNode as G, portCanvasPosition as H, queryDefinitionEntityFactory as I, relationDefinitionEntityFactory as J, routeOrthogonalConnector as K, snapPoint as L, snapScalar as M, toWidgetFieldConfiguratorColumnNode as N, tokenEntityFactory as O, validationDefinitionEntityFactory as P, widgetFieldConfiguratorValueFromInterfaceDefinition as Q, RootConfig as R, AXMPlatformManagementModule as a, AXMTokenEntityModule as b, AXMTokensService as c, AXMTokensServiceImpl as d, AXPPlatformManagementFeatureKeys as e, AXPWorkflowDesignerComponent as f, AXPWorkflowPaletteItemDragDirective as g, AXP_WORKFLOW_PALETTE_MIME as h, aggregateDefinitionEntityFactory as i, arrangeWorkflowDiagram as j, cloneDiagram as k, commandDefinitionEntityFactory as l, connectorPath as m, createNodeFromPaletteItem as n, createPortsFromPalette as o, createWorkflowConnectorId as p, createWorkflowNodeId as q, createWorkflowPortId as r, defaultCanConnectRequest as s, findConnector as t, findNode as u, findPort as v, interfaceDefinitionEntityFactory as w, interfaceDefinitionFromWidgetFieldConfiguratorValue as x, mapEntityFieldRowsInterfaceForForm as y, mapEntityFieldRowsInterfaceToDomain as z };
+//# sourceMappingURL=acorex-modules-platform-management-acorex-modules-platform-management-5DJoQkx2.mjs.map