@ship-ui/core 0.19.5 → 0.22.2

package/fesm2022/ship-ui-core-ship-blueprint.mjs

@@ -0,0 +1,1156 @@
+import { isPlatformBrowser, JsonPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, DOCUMENT, PLATFORM_ID, ElementRef, computed, input, model, signal, effect, HostListener, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { ShipButton } from '@ship-ui/core/ship-button';
+import { ShipCard } from '@ship-ui/core/ship-card';
+import { ShipIcon } from '@ship-ui/core/ship-icon';
+import { classMutationSignal } from '@ship-ui/core';
+
+function layoutNodes(nodes) {
+    if (!nodes || nodes.length === 0)
+        return nodes;
+    const layoutedNodes = structuredClone(nodes);
+    const visited = new Set();
+    const unconnectedNodes = [];
+    const connectedGraphs = [];
+    const allToNodes = new Set(layoutedNodes.flatMap((node) => node.connections).map((conn) => conn.toNode));
+    const rootNodes = layoutedNodes.filter((node) => !allToNodes.has(node.id));
+    for (const node of layoutedNodes) {
+        if (!node.connections.length) {
+            unconnectedNodes.push(node);
+        }
+    }
+    for (const root of rootNodes) {
+        if (!visited.has(root.id)) {
+            const graph = [];
+            traverseGraph(root, graph, visited, layoutedNodes);
+            if (graph.length > 0) {
+                connectedGraphs.push(graph);
+            }
+        }
+    }
+    positionUnconnectedNodes(unconnectedNodes);
+    let currentX = 20;
+    let currentY = 20;
+    connectedGraphs.forEach((graph) => {
+        const layoutedGraph = traverseAndLayout(graph);
+        positionGraph(layoutedGraph, currentX, currentY);
+        currentY += getGraphHeight(layoutedGraph) + 200;
+    });
+    return layoutedNodes;
+}
+function traverseGraph(startNode, graph, visited, allNodes) {
+    const queue = [startNode];
+    visited.add(startNode.id);
+    let head = 0;
+    while (head < queue.length) {
+        const node = queue[head++];
+        graph.push(node);
+        node.connections.forEach((conn) => {
+            const toNode = allNodes.find((n) => n.id === conn.toNode);
+            if (toNode && !visited.has(toNode.id)) {
+                visited.add(toNode.id);
+                queue.push(toNode);
+            }
+        });
+    }
+}
+function positionUnconnectedNodes(nodes) {
+    nodes.forEach((node, index) => {
+        node.coordinates[0] = 20 + index * 200;
+        node.coordinates[1] = 20;
+    });
+}
+function traverseAndLayout(graph) {
+    const graphNodeMap = new Map(graph.map((n) => [n.id, n]));
+    const incomingConnectionCount = new Map();
+    graph.forEach((node) => {
+        incomingConnectionCount.set(node.id, 0);
+    });
+    graph
+        .flatMap((n) => n.connections)
+        .forEach((conn) => {
+        if (graphNodeMap.has(conn.toNode)) {
+            incomingConnectionCount.set(conn.toNode, (incomingConnectionCount.get(conn.toNode) || 0) + 1);
+        }
+    });
+    const roots = graph.filter((node) => (incomingConnectionCount.get(node.id) || 0) === 0);
+    const layoutedNodes = new Set();
+    const queue = [...roots];
+    let head = 0;
+    while (head < queue.length) {
+        const currentNode = queue[head++];
+        layoutedNodes.add(currentNode.id);
+        let outputConnectionIndex = 0;
+        const connectedNodes = [];
+        currentNode.connections.forEach((conn) => {
+            const toNode = graphNodeMap.get(conn.toNode);
+            if (toNode && !layoutedNodes.has(toNode.id)) {
+                connectedNodes.push(toNode);
+            }
+        });
+        connectedNodes.forEach((toNode) => {
+            toNode.coordinates[0] = currentNode.coordinates[0] + 200;
+            if (connectedNodes.length > 1) {
+                const verticalOffset = (outputConnectionIndex - (connectedNodes.length - 1) / 2) * 200;
+                toNode.coordinates[1] = currentNode.coordinates[1] + verticalOffset;
+            }
+            else {
+                toNode.coordinates[1] = currentNode.coordinates[1];
+            }
+            queue.push(toNode);
+            outputConnectionIndex++;
+        });
+    }
+    return graph;
+}
+function positionGraph(graph, startX, startY) {
+    const minX = Math.min(...graph.map((n) => n.coordinates[0]));
+    const minY = Math.min(...graph.map((n) => n.coordinates[1]));
+    graph.forEach((node) => {
+        node.coordinates[0] += startX - minX;
+        node.coordinates[1] += startY - minY;
+    });
+}
+function getGraphHeight(graph) {
+    if (!graph.length)
+        return 0;
+    const maxY = Math.max(...graph.map((n) => n.coordinates[1]));
+    const minY = Math.min(...graph.map((n) => n.coordinates[1]));
+    return maxY - minY;
+}
+
+function findDuplicatePortIDs(nodes) {
+    const errors = [];
+    for (const node of nodes) {
+        const portIdCounts = new Map();
+        const allPorts = [...node.inputs, ...node.outputs];
+        for (const port of allPorts) {
+            const count = portIdCounts.get(port.id) || 0;
+            portIdCounts.set(port.id, count + 1);
+        }
+        const duplicatePortIds = [];
+        for (const [id, count] of portIdCounts.entries()) {
+            if (count > 1) {
+                duplicatePortIds.push(id);
+            }
+        }
+        if (duplicatePortIds.length > 0) {
+            errors.push({
+                nodeId: node.id,
+                duplicatePortIds: duplicatePortIds,
+            });
+        }
+    }
+    return errors;
+}
+function findDuplicateNodeIDs(nodes) {
+    const nodeIdCounts = new Map();
+    for (const node of nodes) {
+        const count = nodeIdCounts.get(node.id) || 0;
+        nodeIdCounts.set(node.id, count + 1);
+    }
+    const duplicateNodeIds = [];
+    for (const [id, count] of nodeIdCounts.entries()) {
+        if (count > 1) {
+            duplicateNodeIds.push(id);
+        }
+    }
+    return duplicateNodeIds;
+}
+
+const TEST_NODES = [
+    {
+        id: 'a1',
+        name: 'hello a1',
+        coordinates: [0, 0],
+        inputs: [],
+        outputs: [{ id: 'out-1', name: 'Start Output' }],
+        connections: [{ fromNode: 'a1', fromPort: 'out-1', toNode: 'b1', toPort: 'in-1' }],
+    },
+    {
+        id: 'b1',
+        coordinates: [0, 0],
+        inputs: [
+            { id: 'in-1', name: 'Input A' },
+            { id: 'in-1', name: 'Another Input A' },
+        ],
+        outputs: [{ id: 'out-1', name: 'Output B' }],
+        connections: [
+            { fromNode: 'b1', fromPort: 'out-1', toNode: 'c6', toPort: 'in-1' },
+            { fromNode: 'a1', fromPort: 'out-1', toNode: 'b1', toPort: 'in-1' },
+        ],
+    },
+    {
+        id: 'c6',
+        name: 'hello c6',
+        coordinates: [0, 0],
+        inputs: [{ id: 'in-1', name: 'Input C' }],
+        outputs: [{ id: 'out-1', name: 'Output D' }],
+        connections: [{ fromNode: 'b1', fromPort: 'out-1', toNode: 'c6', toPort: 'in-1' }],
+    },
+];
+class ShipBlueprint {
+    #ZOOM_SPEED;
+    #MAX_ZOOM;
+    #MIN_ZOOM;
+    #NODE_WIDTH;
+    #NODE_HEADER_HEIGHT;
+    #PORT_ROW_HEIGHT;
+    #document;
+    #platformId;
+    #selfRef;
+    #currentClass;
+    #htmlClass;
+    #currentGridColor;
+    #draggingNodeCoordinates;
+    #isDragging;
+    #lastMouseX;
+    #lastMouseY;
+    #initialPinchDistance;
+    #isNodeDragging;
+    #draggedNodeId;
+    #dragOffset;
+    #connections;
+    #canvasWidth;
+    #canvasHeight;
+    #ctx;
+    #resizeObserver;
+    constructor() {
+        this.#ZOOM_SPEED = 0.01;
+        this.#MAX_ZOOM = 1.5;
+        this.#MIN_ZOOM = 0.5;
+        this.#NODE_WIDTH = 180;
+        this.#NODE_HEADER_HEIGHT = 40;
+        this.#PORT_ROW_HEIGHT = 28;
+        this.#document = inject(DOCUMENT);
+        this.#platformId = inject(PLATFORM_ID);
+        this.#selfRef = inject((ElementRef));
+        this.#currentClass = classMutationSignal();
+        this.#htmlClass = classMutationSignal(this.#document.documentElement);
+        this.asDots = computed(() => this.#currentClass().includes('dots'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "asDots" }] : /* istanbul ignore next */ []));
+        this.lightMode = computed(() => this.#htmlClass().includes('light'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lightMode" }] : /* istanbul ignore next */ []));
+        this.forceUnique = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "forceUnique" }] : /* istanbul ignore next */ []));
+        this.autoLayout = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "autoLayout" }] : /* istanbul ignore next */ []));
+        this.gridSize = input(20, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "gridSize" }] : /* istanbul ignore next */ []));
+        this.snapToGrid = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "snapToGrid" }] : /* istanbul ignore next */ []));
+        this.gridColor = input(['#d8d8d8', '#2c2c2c'], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "gridColor" }] : /* istanbul ignore next */ []));
+        this.nodes = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+        this.#currentGridColor = computed(() => this.gridColor()[this.lightMode() ? 0 : 1], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#currentGridColor" }] : /* istanbul ignore next */ []));
+        this.panX = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panX" }] : /* istanbul ignore next */ []));
+        this.panY = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panY" }] : /* istanbul ignore next */ []));
+        this.zoomLevel = signal(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "zoomLevel" }] : /* istanbul ignore next */ []));
+        this.gridSnapSize = signal(20, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "gridSnapSize" }] : /* istanbul ignore next */ []));
+        this.isHoveringNode = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isHoveringNode" }] : /* istanbul ignore next */ []));
+        this.midpointDivPosition = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "midpointDivPosition" }] : /* istanbul ignore next */ []));
+        this.showMidpointDiv = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showMidpointDiv" }] : /* istanbul ignore next */ []));
+        this.isLocked = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isLocked" }] : /* istanbul ignore next */ []));
+        this.draggingConnection = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "draggingConnection" }] : /* istanbul ignore next */ []));
+        this.validationErrors = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "validationErrors" }] : /* istanbul ignore next */ []));
+        this.highlightedConnection = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highlightedConnection" }] : /* istanbul ignore next */ []));
+        this.#draggingNodeCoordinates = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#draggingNodeCoordinates" }] : /* istanbul ignore next */ []));
+        this.#isDragging = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#isDragging" }] : /* istanbul ignore next */ []));
+        this.#lastMouseX = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#lastMouseX" }] : /* istanbul ignore next */ []));
+        this.#lastMouseY = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#lastMouseY" }] : /* istanbul ignore next */ []));
+        this.#initialPinchDistance = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#initialPinchDistance" }] : /* istanbul ignore next */ []));
+        this.#isNodeDragging = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#isNodeDragging" }] : /* istanbul ignore next */ []));
+        this.#draggedNodeId = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#draggedNodeId" }] : /* istanbul ignore next */ []));
+        this.#dragOffset = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#dragOffset" }] : /* istanbul ignore next */ []));
+        this.#connections = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#connections" }] : /* istanbul ignore next */ []));
+        this.#canvasWidth = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#canvasWidth" }] : /* istanbul ignore next */ []));
+        this.#canvasHeight = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#canvasHeight" }] : /* istanbul ignore next */ []));
+        this.visibleNodes = computed(() => {
+            const nodes = this.nodes();
+            const panX = this.panX();
+            const panY = this.panY();
+            const zoom = this.zoomLevel();
+            const width = this.#canvasWidth();
+            const height = this.#canvasHeight();
+            if (width === 0 || height === 0) {
+                return nodes;
+            }
+            const bufferX = width / zoom;
+            const bufferY = height / zoom;
+            const viewbox = {
+                x1: -panX / zoom - bufferX,
+                y1: -panY / zoom - bufferY,
+                x2: (-panX + width) / zoom + bufferX,
+                y2: (-panY + height) / zoom + bufferY,
+            };
+            return nodes.filter((node) => {
+                const [x, y] = node.coordinates;
+                return x > viewbox.x1 && x < viewbox.x2 && y > viewbox.y1 && y < viewbox.y2;
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleNodes" }] : /* istanbul ignore next */ []));
+        if (isPlatformBrowser(this.#platformId)) {
+            effect(() => {
+                this.asDots();
+                this.panX();
+                this.panY();
+                this.zoomLevel();
+                this.nodes();
+                this.#connections();
+                this.draggingConnection();
+                this.#currentGridColor();
+                this.highlightedConnection();
+                this.#draggingNodeCoordinates();
+                requestAnimationFrame(() => this.drawCanvas());
+            });
+            effect(() => {
+                const nodes = this.nodes();
+                const connectionsFromNodes = nodes.flatMap((node) => node.connections);
+                const uniqueConnections = connectionsFromNodes.filter((conn, index, self) => index ===
+                    self.findIndex((c) => c.fromNode === conn.fromNode &&
+                        c.fromPort === conn.fromPort &&
+                        c.toNode === conn.toNode &&
+                        c.toPort === conn.toPort));
+                this.#connections.set(uniqueConnections);
+            });
+        }
+    }
+    ngAfterViewInit() {
+        if (isPlatformBrowser(this.#platformId)) {
+            const canvas = this.canvasRef.nativeElement;
+            this.#ctx = canvas.getContext('2d');
+            if (typeof ResizeObserver !== 'undefined') {
+                this.#resizeObserver = new ResizeObserver(() => this.updateCanvasSize());
+                this.#resizeObserver.observe(this.#selfRef.nativeElement);
+            }
+            this.updateCanvasSize();
+            if (this.autoLayout()) {
+                this.applyAutolayout();
+            }
+            if (this.forceUnique()) {
+                this.#removeDuplicatesAndReinitiate();
+            }
+            else {
+                this.#validateNodes();
+            }
+        }
+    }
+    ngOnDestroy() {
+        if (this.#resizeObserver) {
+            this.#resizeObserver.disconnect();
+        }
+    }
+    onMouseUp(event) {
+        if (this.isLocked())
+            return;
+        this.endPan();
+        this.endNodeDrag();
+    }
+    onClick(event) {
+        const target = event.target;
+        if (this.draggingConnection()) {
+            if (!target.closest('.port')) {
+                this.cancelPortDrag();
+            }
+        }
+        else if (this.isLocked() && !target.closest('.midpoint-div')) {
+            this.closeMidpointDiv();
+        }
+        else {
+            this.#handleConnectionClick(event);
+        }
+    }
+    onEscape() {
+        if (this.draggingConnection()) {
+            this.cancelPortDrag();
+        }
+        else if (this.isLocked()) {
+            this.closeMidpointDiv();
+        }
+    }
+    onMouseMove(event) {
+        if (this.isLocked())
+            return;
+        if (this.#isNodeDragging()) {
+            this.nodeDrag(event);
+        }
+        else if (this.draggingConnection()) {
+            this.updatePathOnMove(event);
+        }
+        else {
+            this.pan(event);
+            if (this.isHoveringNode()) {
+                this.highlightedConnection.set(null);
+            }
+            else {
+                this.#checkConnectionHover(event);
+            }
+        }
+    }
+    onTouchMove(event) {
+        event.preventDefault();
+        if (this.isLocked())
+            return;
+        if (this.#isNodeDragging()) {
+            this.nodeDrag(event.touches[0]);
+        }
+        else if (this.draggingConnection()) {
+            this.updatePathOnMove(event.touches[0]);
+        }
+        else {
+            this.handleTouchMove(event);
+        }
+    }
+    onDocumentTouchEnd(event) {
+        if (this.isLocked())
+            return;
+        this.handleTouchEnd();
+    }
+    applyAutolayout() {
+        const newNodes = layoutNodes(this.nodes());
+        this.nodes.set(newNodes);
+    }
+    updateCanvasSize() {
+        const canvas = this.canvasRef.nativeElement;
+        const rect = this.#selfRef.nativeElement.getBoundingClientRect();
+        const dpr = window.devicePixelRatio || 1;
+        canvas.width = rect.width * dpr;
+        canvas.height = rect.height * dpr;
+        this.#ctx.scale(dpr, dpr);
+        canvas.style.width = `${rect.width}px`;
+        canvas.style.height = `${rect.height}px`;
+        this.#canvasWidth.set(rect.width);
+        this.#canvasHeight.set(rect.height);
+        this.drawCanvas();
+    }
+    drawCanvas() {
+        if (!this.#ctx)
+            return;
+        const ctx = this.#ctx;
+        const { width, height } = this.canvasRef.nativeElement;
+        const dpr = window.devicePixelRatio || 1;
+        ctx.clearRect(0, 0, width / dpr, height / dpr);
+        ctx.save();
+        ctx.translate(this.panX(), this.panY());
+        ctx.scale(this.zoomLevel(), this.zoomLevel());
+        this.drawGrid(ctx);
+        this.drawConnections(ctx);
+        if (this.draggingConnection()) {
+            this.drawDraggingPath(ctx);
+        }
+        ctx.restore();
+    }
+    drawGrid(ctx) {
+        const { width, height } = this.canvasRef.nativeElement;
+        const dpr = window.devicePixelRatio || 1;
+        const zoom = this.zoomLevel();
+        const panX = this.panX();
+        const panY = this.panY();
+        const gridSize = this.gridSize();
+        const gridColor = this.#currentGridColor();
+        const scaledGridSize = gridSize * zoom;
+        const dynamicGridSize = scaledGridSize < 20 ? gridSize * 4 : gridSize;
+        const startX = Math.floor(-panX / zoom / dynamicGridSize) * dynamicGridSize;
+        const startY = Math.floor(-panY / zoom / dynamicGridSize) * dynamicGridSize;
+        const endX = startX + width / dpr / zoom + dynamicGridSize;
+        const endY = startY + height / dpr / zoom + dynamicGridSize;
+        if (this.asDots()) {
+            const dotRadius = 1 / zoom;
+            ctx.fillStyle = gridColor;
+            for (let x = startX; x < endX; x += dynamicGridSize) {
+                for (let y = startY; y < endY; y += dynamicGridSize) {
+                    ctx.beginPath();
+                    ctx.arc(x, y, dotRadius, 0, 2 * Math.PI);
+                    ctx.fill();
+                }
+            }
+        }
+        else {
+            ctx.beginPath();
+            ctx.strokeStyle = gridColor;
+            ctx.lineWidth = 1 / zoom;
+            for (let x = startX; x < endX; x += dynamicGridSize) {
+                ctx.moveTo(x, startY);
+                ctx.lineTo(x, endY);
+            }
+            for (let y = startY; y < endY; y += dynamicGridSize) {
+                ctx.moveTo(startX, y);
+                ctx.lineTo(endX, y);
+            }
+            ctx.stroke();
+        }
+    }
+    drawConnections(ctx) {
+        const highlighted = this.highlightedConnection();
+        ctx.lineWidth = 2 / this.zoomLevel();
+        for (const conn of this.#connections()) {
+            const isHighlighted = highlighted?.fromNode === conn.fromNode &&
+                highlighted?.fromPort === conn.fromPort &&
+                highlighted?.toNode === conn.toNode &&
+                highlighted?.toPort === conn.toPort;
+            ctx.strokeStyle = isHighlighted ? '#ffc107' : '#888';
+            ctx.beginPath();
+            const startPos = this.getNodePortPosition(conn.fromNode, conn.fromPort);
+            const endPos = this.getNodePortPosition(conn.toNode, conn.toPort);
+            this.drawCurvedPath(ctx, startPos, endPos);
+            ctx.stroke();
+        }
+    }
+    drawDraggingPath(ctx) {
+        const conn = this.draggingConnection();
+        const startPos = this.getNodePortPosition(conn.fromNode, conn.fromPort);
+        const endPos = [conn.x2, conn.y2];
+        ctx.strokeStyle = '#5a9cf8';
+        ctx.lineWidth = 2 / this.zoomLevel();
+        ctx.beginPath();
+        this.drawCurvedPath(ctx, startPos, endPos);
+        ctx.stroke();
+    }
+    drawCurvedPath(ctx, start, end) {
+        const [x1, y1] = start;
+        const [x2, y2] = end;
+        const dx = Math.abs(x1 - x2) * 0.7;
+        ctx.moveTo(x1, y1);
+        ctx.bezierCurveTo(x1 + dx, y1, x2 - dx, y2, x2, y2);
+    }
+    startNodeDrag(event, nodeId) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.#isNodeDragging.set(true);
+        this.#draggedNodeId.set(nodeId);
+        const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
+        const clientY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
+        const blueprintRect = this.#selfRef.nativeElement.getBoundingClientRect();
+        const worldX = (clientX - blueprintRect.left - this.panX()) / this.zoomLevel();
+        const worldY = (clientY - blueprintRect.top - this.panY()) / this.zoomLevel();
+        const draggedNode = this.nodes().find((n) => n.id === nodeId);
+        if (draggedNode) {
+            this.#dragOffset.set([worldX - draggedNode.coordinates[0], worldY - draggedNode.coordinates[1]]);
+        }
+        this.#lastMouseX.set(clientX);
+        this.#lastMouseY.set(clientY);
+    }
+    endNodeDrag() {
+        const draggedId = this.#draggedNodeId();
+        const finalCoords = this.#draggingNodeCoordinates();
+        if (draggedId && finalCoords) {
+            this.nodes.update((nodes) => {
+                const node = nodes.find((n) => n.id === draggedId);
+                if (node) {
+                    node.coordinates = finalCoords;
+                }
+                return [...nodes];
+            });
+        }
+        this.#isNodeDragging.set(false);
+        this.#draggedNodeId.set(null);
+        this.#dragOffset.set(null);
+        this.#draggingNodeCoordinates.set(null);
+    }
+    nodeDrag(event) {
+        const draggedId = this.#draggedNodeId();
+        if (!this.#isNodeDragging() || !draggedId)
+            return;
+        const { clientX, clientY } = event;
+        const blueprintRect = this.#selfRef.nativeElement.getBoundingClientRect();
+        const worldX = (clientX - blueprintRect.left - this.panX()) / this.zoomLevel();
+        const worldY = (clientY - blueprintRect.top - this.panY()) / this.zoomLevel();
+        let newX = worldX - this.#dragOffset()[0];
+        let newY = worldY - this.#dragOffset()[1];
+        if (this.snapToGrid() || (event instanceof MouseEvent && event.shiftKey)) {
+            const grid = this.gridSnapSize();
+            newX = Math.round(newX / grid) * grid;
+            newY = Math.round(newY / grid) * grid;
+        }
+        this.#draggingNodeCoordinates.set([newX, newY]);
+        this.#lastMouseX.set(clientX);
+        this.#lastMouseY.set(clientY);
+    }
+    startPortDrag(event, nodeId, portId) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.draggingConnection())
+            this.cancelPortDrag();
+        const node = this.nodes().find((n) => n.id === nodeId);
+        if (node) {
+            this.draggingConnection.set({
+                fromNode: nodeId,
+                fromPort: portId,
+                x2: node.coordinates[0],
+                y2: node.coordinates[1],
+            });
+        }
+        this.updatePathOnMove(event);
+    }
+    endPortDrag(_, toNodeId, toPortId) {
+        if (!this.draggingConnection())
+            return;
+        const from = this.draggingConnection();
+        if (from.fromNode === toNodeId) {
+            this.cancelPortDrag();
+            return;
+        }
+        const newConnection = {
+            fromNode: from.fromNode,
+            fromPort: from.fromPort,
+            toNode: toNodeId,
+            toPort: toPortId,
+        };
+        this.nodes.update((nodes) => {
+            const fromNode = nodes.find((n) => n.id === newConnection.fromNode);
+            const toNode = nodes.find((n) => n.id === newConnection.toNode);
+            if (fromNode && toNode) {
+                const isDuplicateFrom = fromNode.connections.some((c) => c.fromNode === newConnection.fromNode &&
+                    c.fromPort === newConnection.fromPort &&
+                    c.toNode === newConnection.toNode &&
+                    c.toPort === newConnection.toPort);
+                if (!isDuplicateFrom) {
+                    fromNode.connections = [...fromNode.connections, newConnection];
+                }
+                const isDuplicateTo = toNode.connections.some((c) => c.fromNode === newConnection.fromNode &&
+                    c.fromPort === newConnection.fromPort &&
+                    c.toNode === newConnection.toNode &&
+                    c.toPort === newConnection.toPort);
+                if (!isDuplicateTo) {
+                    toNode.connections = [...toNode.connections, newConnection];
+                }
+            }
+            return [...nodes];
+        });
+        this.cancelPortDrag();
+    }
+    cancelPortDrag() {
+        this.draggingConnection.set(null);
+    }
+    updatePathOnMove(event) {
+        if (!this.draggingConnection())
+            return;
+        const blueprintRect = this.#selfRef.nativeElement.getBoundingClientRect();
+        const x2 = (event.clientX - blueprintRect.left - this.panX()) / this.zoomLevel();
+        const y2 = (event.clientY - blueprintRect.top - this.panY()) / this.zoomLevel();
+        this.draggingConnection.update((conn) => (conn ? { ...conn, x2, y2 } : conn));
+    }
+    getNodePortPosition(nodeId, portId) {
+        const node = this.nodes().find((n) => n.id === nodeId);
+        if (!node)
+            return [0, 0];
+        const portEl = this.#selfRef.nativeElement.querySelector(`[data-node-id="${nodeId}"][data-port-id="${portId}"]`);
+        if (portEl) {
+            const nodeWrapper = this.#selfRef.nativeElement.querySelector('.nodes-wrapper');
+            const wrapperRect = nodeWrapper.getBoundingClientRect();
+            const portRect = portEl.getBoundingClientRect();
+            const portCenterX = portRect.left + portRect.width / 2;
+            const portCenterY = portRect.top + portRect.height / 2;
+            const worldX = (portCenterX - wrapperRect.left) / this.zoomLevel();
+            const worldY = (portCenterY - wrapperRect.top) / this.zoomLevel();
+            return [worldX, worldY];
+        }
+        const isInput = node.inputs.some((p) => p.id === portId);
+        const portIndex = isInput
+            ? node.inputs.findIndex((p) => p.id === portId)
+            : node.outputs.findIndex((p) => p.id === portId);
+        if (portIndex === -1)
+            return node.coordinates;
+        const portYOffset = this.#NODE_HEADER_HEIGHT + portIndex * this.#PORT_ROW_HEIGHT + this.#PORT_ROW_HEIGHT / 2;
+        const portXOffset = isInput ? 0 : this.#NODE_WIDTH;
+        return [node.coordinates[0] + portXOffset, node.coordinates[1] + portYOffset];
+    }
+    startPan(event) {
+        if (this.isLocked())
+            return;
+        if (event.target instanceof HTMLElement && event.target.closest('.node'))
+            return;
+        event.preventDefault();
+        this.#isDragging.set(true);
+        this.#lastMouseX.set(event.clientX);
+        this.#lastMouseY.set(event.clientY);
+    }
+    endPan() {
+        this.#isDragging.set(false);
+    }
+    pan(event) {
+        if (!this.#isDragging() || this.isLocked())
+            return;
+        const dx = event.clientX - this.#lastMouseX();
+        const dy = event.clientY - this.#lastMouseY();
+        this.panX.update((x) => x + dx);
+        this.panY.update((y) => y + dy);
+        this.#lastMouseX.set(event.clientX);
+        this.#lastMouseY.set(event.clientY);
+    }
+    zoom(event) {
+        event.preventDefault();
+        const oldZoom = this.zoomLevel();
+        const newZoom = this.#clamp(oldZoom * (1 - event.deltaY * this.#ZOOM_SPEED), this.#MIN_ZOOM, this.#MAX_ZOOM);
+        const panRatio = newZoom / oldZoom;
+        const newPanX = event.clientX - (event.clientX - this.panX()) * panRatio;
+        const newPanY = event.clientY - (event.clientY - this.panY()) * panRatio;
+        this.zoomLevel.set(newZoom);
+        this.panX.set(newPanX);
+        this.panY.set(newPanY);
+    }
+    handleTouchStart(event) {
+        if (event.target instanceof HTMLElement && event.target.closest('.node'))
+            return;
+        event.preventDefault();
+        if (event.touches.length === 1) {
+            this.#isDragging.set(true);
+            this.#lastMouseX.set(event.touches[0].clientX);
+            this.#lastMouseY.set(event.touches[0].clientY);
+        }
+        else if (event.touches.length === 2) {
+            this.#isDragging.set(false);
+            this.#initialPinchDistance.set(this.#getDistance(event.touches[0], event.touches[1]));
+        }
+    }
+    handleTouchMove(event) {
+        event.preventDefault();
+        if (event.touches.length === 1 && this.#isDragging()) {
+            const dx = event.touches[0].clientX - this.#lastMouseX();
+            const dy = event.touches[0].clientY - this.#lastMouseY();
+            this.panX.update((x) => x + dx);
+            this.panY.update((y) => y + dy);
+            this.#lastMouseX.set(event.touches[0].clientX);
+            this.#lastMouseY.set(event.touches[0].clientY);
+        }
+        else if (event.touches.length === 2) {
+            const newPinchDistance = this.#getDistance(event.touches[0], event.touches[1]);
+            const pinchRatio = newPinchDistance / this.#initialPinchDistance();
+            const oldZoom = this.zoomLevel();
+            const newZoom = this.#clamp(oldZoom * pinchRatio, this.#MIN_ZOOM, this.#MAX_ZOOM);
+            const pinchCenterX = (event.touches[0].clientX + event.touches[1].clientX) / 2;
+            const pinchCenterY = (event.touches[0].clientY + event.touches[1].clientY) / 2;
+            const panRatio = newZoom / oldZoom;
+            const newPanX = pinchCenterX - (pinchCenterX - this.panX()) * panRatio;
+            const newPanY = pinchCenterY - (pinchCenterY - this.panY()) * panRatio;
+            this.zoomLevel.set(newZoom);
+            this.panX.set(newPanX);
+            this.panY.set(newPanY);
+            this.#initialPinchDistance.set(newPinchDistance);
+        }
+    }
+    handleTouchEnd() {
+        this.#isDragging.set(false);
+        this.endNodeDrag();
+        if (this.draggingConnection()) {
+            this.cancelPortDrag();
+        }
+    }
+    closeMidpointDiv() {
+        this.showMidpointDiv.set(false);
+        this.midpointDivPosition.set(null);
+        this.isLocked.set(false);
+    }
+    getDisplayCoordinates(node) {
+        const draggedId = this.#draggedNodeId();
+        const draggingCoords = this.#draggingNodeCoordinates();
+        if (draggedId === node.id && draggingCoords) {
+            return `translate(${draggingCoords[0]}px, ${draggingCoords[1]}px)`;
+        }
+        return `translate(${node.coordinates[0]}px, ${node.coordinates[1]}px)`;
+    }
+    removeConnection() {
+        const conn = this.highlightedConnection();
+        if (!conn)
+            return;
+        this.#connections.update((conns) => conns.filter((c) => !(c.fromNode === conn.fromNode &&
+            c.fromPort === conn.fromPort &&
+            c.toNode === conn.toNode &&
+            c.toPort === conn.toPort)));
+        this.nodes.update((nodes) => nodes.map((n) => ({
+            ...n,
+            connections: n.connections.filter((c) => !(c.fromNode === conn.fromNode &&
+                c.fromPort === conn.fromPort &&
+                c.toNode === conn.toNode &&
+                c.toPort === conn.toPort)),
+        })));
+        this.highlightedConnection.set(null);
+        this.closeMidpointDiv();
+    }
+    #removeDuplicatesAndReinitiate() {
+        const nodes = this.nodes();
+        const uniqueNodesMap = new Map();
+        const uniqueNodes = [];
+        for (const node of nodes) {
+            if (!uniqueNodesMap.has(node.id)) {
+                uniqueNodesMap.set(node.id, node);
+                uniqueNodes.push(node);
+            }
+        }
+        const nodesWithUniquePorts = uniqueNodes.map((node) => {
+            const uniqueInputs = new Map();
+            const uniqueOutputs = new Map();
+            const uniqueNodeInputs = node.inputs.filter((port) => {
+                if (!uniqueInputs.has(port.id)) {
+                    uniqueInputs.set(port.id, port);
+                    return true;
+                }
+                return false;
+            });
+            const uniqueNodeOutputs = node.outputs.filter((port) => {
+                if (!uniqueOutputs.has(port.id)) {
+                    uniqueOutputs.set(port.id, port);
+                    return true;
+                }
+                return false;
+            });
+            return {
+                ...node,
+                inputs: uniqueNodeInputs,
+                outputs: uniqueNodeOutputs,
+            };
+        });
+        const finalNodes = nodesWithUniquePorts.map((node) => {
+            const validConnections = node.connections.filter((conn) => {
+                const fromNodeExists = nodesWithUniquePorts.some((n) => n.id === conn.fromNode);
+                const toNodeExists = nodesWithUniquePorts.some((n) => n.id === conn.toNode);
+                const fromPortExists = nodesWithUniquePorts
+                    .find((n) => n.id === conn.fromNode)
+                    ?.outputs.some((p) => p.id === conn.fromPort);
+                const toPortExists = nodesWithUniquePorts
+                    .find((n) => n.id === conn.toNode)
+                    ?.inputs.some((p) => p.id === conn.toPort);
+                return fromNodeExists && toNodeExists && fromPortExists && toPortExists;
+            });
+            return { ...node, connections: validConnections };
+        });
+        this.nodes.set(finalNodes);
+    }
+    #handleConnectionClick(event) {
+        if (this.highlightedConnection()) {
+            const conn = this.highlightedConnection();
+            const startPos = this.getNodePortPosition(conn.fromNode, conn.fromPort);
+            const endPos = this.getNodePortPosition(conn.toNode, conn.toPort);
+            const midpoint = this.#getBezierMidpoint(startPos, endPos);
+            this.midpointDivPosition.set({ x: midpoint[0], y: midpoint[1] });
+            this.showMidpointDiv.set(true);
+            this.isLocked.set(true);
+        }
+    }
+    #getBezierMidpoint(start, end) {
+        const t = 0.5;
+        const [x1, y1] = start;
+        const [x2, y2] = end;
+        const dx = Math.abs(x1 - x2) * 0.7;
+        const cp1x = x1 + dx;
+        const cp1y = y1;
+        const cp2x = x2 - dx;
+        const cp2y = y2;
+        const mx = Math.pow(1 - t, 3) * x1 +
+            3 * Math.pow(1 - t, 2) * t * cp1x +
+            3 * (1 - t) * Math.pow(t, 2) * cp2x +
+            Math.pow(t, 3) * x2;
+        const my = Math.pow(1 - t, 3) * y1 +
+            3 * Math.pow(1 - t, 2) * t * cp1y +
+            3 * (1 - t) * Math.pow(t, 2) * cp2y +
+            Math.pow(t, 3) * y2;
+        return [mx, my];
+    }
+    #checkConnectionHover(event) {
+        const blueprintRect = this.#selfRef.nativeElement.getBoundingClientRect();
+        const worldX = (event.clientX - blueprintRect.left - this.panX()) / this.zoomLevel();
+        const worldY = (event.clientY - blueprintRect.top - this.panY()) / this.zoomLevel();
+        const cursorPoint = [worldX, worldY];
+        let hoveredConn = null;
+        const tolerance = 10 / this.zoomLevel();
+        for (const conn of this.#connections()) {
+            const startPos = this.getNodePortPosition(conn.fromNode, conn.fromPort);
+            const endPos = this.getNodePortPosition(conn.toNode, conn.toPort);
+            if (this.#isPointNearBezierCurve(cursorPoint, startPos, endPos, tolerance)) {
+                hoveredConn = conn;
+                break;
+            }
+        }
+        this.highlightedConnection.set(hoveredConn);
+    }
+    #isPointNearBezierCurve(point, start, end, tolerance = 10) {
+        const [x1, y1] = start;
+        const [x2, y2] = end;
+        const dx = Math.abs(x1 - x2) * 0.7;
+        const cp1x = x1 + dx;
+        const cp1y = y1;
+        const cp2x = x2 - dx;
+        const cp2y = y2;
+        const steps = 20;
+        for (let i = 0; i <= steps; i++) {
+            const t = i / steps;
+            const x = Math.pow(1 - t, 3) * x1 +
+                3 * Math.pow(1 - t, 2) * t * cp1x +
+                3 * (1 - t) * Math.pow(t, 2) * cp2x +
+                Math.pow(t, 3) * x2;
+            const y = Math.pow(1 - t, 3) * y1 +
+                3 * Math.pow(1 - t, 2) * t * cp1y +
+                3 * (1 - t) * Math.pow(t, 2) * cp2y +
+                Math.pow(t, 3) * y2;
+            const distance = Math.sqrt(Math.pow(point[0] - x, 2) + Math.pow(point[1] - y, 2));
+            if (distance < tolerance) {
+                return true;
+            }
+        }
+        return false;
+    }
+    getNewNodeCoordinates(panToCoordinates = false) {
+        let lowestY = 0;
+        if (this.nodes().length > 0) {
+            lowestY = this.nodes().reduce((max, node) => Math.max(max, node.coordinates[1]), 0);
+        }
+        const newCoordinates = [20, lowestY + 200];
+        if (panToCoordinates) {
+            this.#panToCoordinates(newCoordinates);
+        }
+        return newCoordinates;
+    }
+    #validateNodes() {
+        const duplicatePortIds = findDuplicatePortIDs(this.nodes());
+        const duplicateNodeIds = findDuplicateNodeIDs(this.nodes());
+        this.validationErrors.set({
+            duplicateNodeIds,
+            duplicatePortIds,
+        });
+    }
+    #panToCoordinates(coords) {
+        const [x, y] = coords;
+        const rect = this.#selfRef.nativeElement.getBoundingClientRect();
+        this.panX.set(rect.width / 2 - x * this.zoomLevel());
+        this.panY.set(rect.height / 2 - y * this.zoomLevel());
+    }
+    #getDistance(touch1, touch2) {
+        const dx = touch1.clientX - touch2.clientX;
+        const dy = touch1.clientY - touch2.clientY;
+        return Math.sqrt(dx * dx + dy * dy);
+    }
+    #clamp(value, min, max) {
+        return Math.max(min, Math.min(max, value));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipBlueprint, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ShipBlueprint, isStandalone: true, selector: "sh-blueprint", inputs: { forceUnique: { classPropertyName: "forceUnique", publicName: "forceUnique", isSignal: true, isRequired: false, transformFunction: null }, autoLayout: { classPropertyName: "autoLayout", publicName: "autoLayout", 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 }, gridColor: { classPropertyName: "gridColor", publicName: "gridColor", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodes: "nodesChange" }, host: { listeners: { "document:mouseup": "onMouseUp($event)", "document:click": "onClick($event)", "document:keydown.escape": "onEscape()", "document:mousemove": "onMouseMove($event)", "document:touchmove": "onTouchMove($event)", "document:touchend": "onDocumentTouchEnd($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["blueprintCanvas"], descendants: true, static: true }], ngImport: i0, template: `
+    <div
+      class="canvas-container"
+      [class.locked]="isLocked()"
+      [class.hovering-connection]="highlightedConnection()"
+      (mousedown)="startPan($event)"
+      (mousemove)="pan($event)"
+      (wheel)="zoom($event)"
+      (touchstart)="handleTouchStart($event)"
+      (touchmove)="handleTouchMove($event)"
+      (touchend)="handleTouchEnd()">
+      <div class="action-panel">
+        <button shButton (click)="applyAutolayout()" class="small">
+          Autolayout
+          <sh-icon>tree-structure</sh-icon>
+        </button>
+
+        <ng-content />
+      </div>
+
+      <canvas #blueprintCanvas></canvas>
+
+      @if (validationErrors()) {
+        <sh-card class="validation-errors type-c">
+          Something went wrong you have
+          <br />
+          duplicate node IDs or port IDs
+          <pre>{{ validationErrors() | json }}</pre>
+        </sh-card>
+      } @else {
+        <div
+          class="nodes-wrapper"
+          [style.transform]="'translate(' + panX() + 'px, ' + panY() + 'px) scale(' + zoomLevel() + ')'"
+          [style.transform-origin]="'0 0'">
+          @for (node of visibleNodes(); track node.id) {
+            <sh-card
+              class="node type-c"
+              [style.transform]="getDisplayCoordinates(node)"
+              (mouseenter)="isHoveringNode.set(true)"
+              (mouseleave)="isHoveringNode.set(false)">
+              <header (mousedown)="startNodeDrag($event, node.id)" (touchstart)="startNodeDrag($event, node.id)">
+                <span class="node-title">{{ node.name ? node.name : node.id }}</span>
+                <sh-icon>list</sh-icon>
+              </header>
+              <div class="ports">
+                <div class="inputs">
+                  @for (inputPort of node.inputs; track inputPort.id) {
+                    <div
+                      class="port-wrap"
+                      [attr.data-node-id]="node.id"
+                      [attr.data-port-id]="inputPort.id"
+                      (click)="endPortDrag($event, node.id, inputPort.id)">
+                      <div class="port input-port"></div>
+                      <span class="port-name">{{ inputPort.name }}</span>
+                    </div>
+                  }
+                </div>
+                <div class="outputs">
+                  @for (outputPort of node.outputs; track outputPort.id) {
+                    <div
+                      class="port-wrap"
+                      [attr.data-node-id]="node.id"
+                      [attr.data-port-id]="outputPort.id"
+                      (click)="startPortDrag($event, node.id, outputPort.id)">
+                      <span class="port-name">{{ outputPort.name }}</span>
+                      <div class="port output-port"></div>
+                    </div>
+                  }
+                </div>
+              </div>
+            </sh-card>
+          }
+
+          @if (showMidpointDiv()) {
+            <div
+              class="midpoint-div"
+              (click)="removeConnection()"
+              [style.left.px]="midpointDivPosition()?.x"
+              [style.top.px]="midpointDivPosition()?.y">
+              Remove connection
+              <sh-icon>trash</sh-icon>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: ["sh-blueprint{--bp-bg: var(--base-1);--bp-icon-c: var(--base-6);--bp-stroke-c: var(--base-7);--bp-stroke-ca: var(--primary-8);display:flex;position:relative;width:100%;height:100%}sh-blueprint>*{box-sizing:border-box}sh-blueprint sh-icon{font-size:1rem;color:var(--bp-icon-c)}sh-blueprint sh-card.type-c{--card-bg: var(--base-1)}sh-blueprint .validation-errors{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:1rem}sh-blueprint .midpoint-div{position:absolute;background-color:var(--base-2);border:var(--border-10);padding:.5rem;gap:.5rem;border-radius:var(--shape-2);transform:translate(-50%,-50%);z-index:100;display:flex;align-items:center;cursor:pointer}sh-blueprint .midpoint-div sh-icon{color:var(--base-12)}sh-blueprint .canvas-container{position:relative;width:100%;height:100%;overflow:hidden}sh-blueprint .canvas-container.hovering-connection{cursor:pointer}sh-blueprint .canvas-container.locked .node{pointer-events:none}sh-blueprint .action-panel{position:absolute;top:.5rem;right:.5rem;gap:.5rem;display:flex;align-items:center;z-index:1000}sh-blueprint canvas{position:absolute;top:0;left:0;width:100%;height:100%}sh-blueprint .nodes-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;will-change:transform}sh-blueprint .canvas{height:100%;width:100%;background-color:var(--bp-bg);overflow:hidden;touch-action:none;position:relative}sh-blueprint .grid{position:absolute;inset:0;will-change:transform}sh-blueprint .tile{position:absolute;box-sizing:border-box;width:800px;height:800px;background-image:repeating-linear-gradient(0deg,var(--bp-grid-c) 0 2px,transparent 2px 100%),repeating-linear-gradient(90deg,var(--bp-grid-c) 0 2px,transparent 2px 100%);background-size:20px 20px}sh-blueprint .node{position:absolute;min-width:150px;padding:0;transition:box-shadow .2s ease-in-out;box-shadow:var(--box-shadow-10);will-change:transform;display:flex;flex-direction:column}sh-blueprint .node header{padding:.5rem;display:flex;align-items:center;justify-content:space-between;background-color:var(--base-2);border-bottom:var(--border-10);cursor:grab;-webkit-user-select:none;user-select:none}sh-blueprint .node header:active{cursor:grabbing}sh-blueprint .node:has(header:hover){box-shadow:0 0 10px 2px var(--primary-6)}sh-blueprint .ports{padding:.5rem 0;display:flex;gap:.5rem}sh-blueprint .inputs,sh-blueprint .outputs{display:flex;flex-direction:column;justify-content:space-around;flex:1 0;height:100%}sh-blueprint .inputs .port{border-radius:0 50% 50% 0;border-left-width:0}sh-blueprint .outputs{align-items:flex-end}sh-blueprint .outputs .port{border-radius:50% 0 0 50%;border-right-width:0}sh-blueprint .port-wrap{display:flex;gap:.25rem;align-items:center}sh-blueprint .port{width:.75rem;height:.75rem;background-color:var(--bp-stroke-c);border-radius:50%;border:var(--border-20);cursor:pointer;position:relative}sh-blueprint .port:hover{background-color:var(--bp-stroke-ca)}sh-blueprint .port-name{font:var(--paragraph-40);color:var(--base-12);white-space:nowrap}sh-blueprint .svg-wrap{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}sh-blueprint .connections-svg{width:100%;height:100%;pointer-events:none}sh-blueprint .connection-path{stroke:var(--bp-stroke-c);stroke-width:3;fill:none;pointer-events:none}sh-blueprint .drag-path{stroke:var(--bp-stroke-ca);stroke-width:3;fill:none;stroke-dasharray:5,5;pointer-events:none}\n"], dependencies: [{ kind: "component", type: ShipCard, selector: "sh-card", inputs: ["color", "variant"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }, { kind: "component", type: ShipButton, selector: "[shButton]", inputs: ["color", "variant", "size", "readonly"] }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipBlueprint, decorators: [{
+            type: Component,
+            args: [{ selector: 'sh-blueprint', encapsulation: ViewEncapsulation.None, imports: [ShipCard, ShipIcon, JsonPipe, ShipButton], template: `
+    <div
+      class="canvas-container"
+      [class.locked]="isLocked()"
+      [class.hovering-connection]="highlightedConnection()"
+      (mousedown)="startPan($event)"
+      (mousemove)="pan($event)"
+      (wheel)="zoom($event)"
+      (touchstart)="handleTouchStart($event)"
+      (touchmove)="handleTouchMove($event)"
+      (touchend)="handleTouchEnd()">
+      <div class="action-panel">
+        <button shButton (click)="applyAutolayout()" class="small">
+          Autolayout
+          <sh-icon>tree-structure</sh-icon>
+        </button>
+
+        <ng-content />
+      </div>
+
+      <canvas #blueprintCanvas></canvas>
+
+      @if (validationErrors()) {
+        <sh-card class="validation-errors type-c">
+          Something went wrong you have
+          <br />
+          duplicate node IDs or port IDs
+          <pre>{{ validationErrors() | json }}</pre>
+        </sh-card>
+      } @else {
+        <div
+          class="nodes-wrapper"
+          [style.transform]="'translate(' + panX() + 'px, ' + panY() + 'px) scale(' + zoomLevel() + ')'"
+          [style.transform-origin]="'0 0'">
+          @for (node of visibleNodes(); track node.id) {
+            <sh-card
+              class="node type-c"
+              [style.transform]="getDisplayCoordinates(node)"
+              (mouseenter)="isHoveringNode.set(true)"
+              (mouseleave)="isHoveringNode.set(false)">
+              <header (mousedown)="startNodeDrag($event, node.id)" (touchstart)="startNodeDrag($event, node.id)">
+                <span class="node-title">{{ node.name ? node.name : node.id }}</span>
+                <sh-icon>list</sh-icon>
+              </header>
+              <div class="ports">
+                <div class="inputs">
+                  @for (inputPort of node.inputs; track inputPort.id) {
+                    <div
+                      class="port-wrap"
+                      [attr.data-node-id]="node.id"
+                      [attr.data-port-id]="inputPort.id"
+                      (click)="endPortDrag($event, node.id, inputPort.id)">
+                      <div class="port input-port"></div>
+                      <span class="port-name">{{ inputPort.name }}</span>
+                    </div>
+                  }
+                </div>
+                <div class="outputs">
+                  @for (outputPort of node.outputs; track outputPort.id) {
+                    <div
+                      class="port-wrap"
+                      [attr.data-node-id]="node.id"
+                      [attr.data-port-id]="outputPort.id"
+                      (click)="startPortDrag($event, node.id, outputPort.id)">
+                      <span class="port-name">{{ outputPort.name }}</span>
+                      <div class="port output-port"></div>
+                    </div>
+                  }
+                </div>
+              </div>
+            </sh-card>
+          }
+
+          @if (showMidpointDiv()) {
+            <div
+              class="midpoint-div"
+              (click)="removeConnection()"
+              [style.left.px]="midpointDivPosition()?.x"
+              [style.top.px]="midpointDivPosition()?.y">
+              Remove connection
+              <sh-icon>trash</sh-icon>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["sh-blueprint{--bp-bg: var(--base-1);--bp-icon-c: var(--base-6);--bp-stroke-c: var(--base-7);--bp-stroke-ca: var(--primary-8);display:flex;position:relative;width:100%;height:100%}sh-blueprint>*{box-sizing:border-box}sh-blueprint sh-icon{font-size:1rem;color:var(--bp-icon-c)}sh-blueprint sh-card.type-c{--card-bg: var(--base-1)}sh-blueprint .validation-errors{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:1rem}sh-blueprint .midpoint-div{position:absolute;background-color:var(--base-2);border:var(--border-10);padding:.5rem;gap:.5rem;border-radius:var(--shape-2);transform:translate(-50%,-50%);z-index:100;display:flex;align-items:center;cursor:pointer}sh-blueprint .midpoint-div sh-icon{color:var(--base-12)}sh-blueprint .canvas-container{position:relative;width:100%;height:100%;overflow:hidden}sh-blueprint .canvas-container.hovering-connection{cursor:pointer}sh-blueprint .canvas-container.locked .node{pointer-events:none}sh-blueprint .action-panel{position:absolute;top:.5rem;right:.5rem;gap:.5rem;display:flex;align-items:center;z-index:1000}sh-blueprint canvas{position:absolute;top:0;left:0;width:100%;height:100%}sh-blueprint .nodes-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;will-change:transform}sh-blueprint .canvas{height:100%;width:100%;background-color:var(--bp-bg);overflow:hidden;touch-action:none;position:relative}sh-blueprint .grid{position:absolute;inset:0;will-change:transform}sh-blueprint .tile{position:absolute;box-sizing:border-box;width:800px;height:800px;background-image:repeating-linear-gradient(0deg,var(--bp-grid-c) 0 2px,transparent 2px 100%),repeating-linear-gradient(90deg,var(--bp-grid-c) 0 2px,transparent 2px 100%);background-size:20px 20px}sh-blueprint .node{position:absolute;min-width:150px;padding:0;transition:box-shadow .2s ease-in-out;box-shadow:var(--box-shadow-10);will-change:transform;display:flex;flex-direction:column}sh-blueprint .node header{padding:.5rem;display:flex;align-items:center;justify-content:space-between;background-color:var(--base-2);border-bottom:var(--border-10);cursor:grab;-webkit-user-select:none;user-select:none}sh-blueprint .node header:active{cursor:grabbing}sh-blueprint .node:has(header:hover){box-shadow:0 0 10px 2px var(--primary-6)}sh-blueprint .ports{padding:.5rem 0;display:flex;gap:.5rem}sh-blueprint .inputs,sh-blueprint .outputs{display:flex;flex-direction:column;justify-content:space-around;flex:1 0;height:100%}sh-blueprint .inputs .port{border-radius:0 50% 50% 0;border-left-width:0}sh-blueprint .outputs{align-items:flex-end}sh-blueprint .outputs .port{border-radius:50% 0 0 50%;border-right-width:0}sh-blueprint .port-wrap{display:flex;gap:.25rem;align-items:center}sh-blueprint .port{width:.75rem;height:.75rem;background-color:var(--bp-stroke-c);border-radius:50%;border:var(--border-20);cursor:pointer;position:relative}sh-blueprint .port:hover{background-color:var(--bp-stroke-ca)}sh-blueprint .port-name{font:var(--paragraph-40);color:var(--base-12);white-space:nowrap}sh-blueprint .svg-wrap{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}sh-blueprint .connections-svg{width:100%;height:100%;pointer-events:none}sh-blueprint .connection-path{stroke:var(--bp-stroke-c);stroke-width:3;fill:none;pointer-events:none}sh-blueprint .drag-path{stroke:var(--bp-stroke-ca);stroke-width:3;fill:none;stroke-dasharray:5,5;pointer-events:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { forceUnique: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceUnique", required: false }] }], autoLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoLayout", required: false }] }], gridSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridSize", required: false }] }], snapToGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapToGrid", required: false }] }], gridColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridColor", required: false }] }], nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }, { type: i0.Output, args: ["nodesChange"] }], canvasRef: [{
+                type: ViewChild,
+                args: ['blueprintCanvas', { static: true }]
+            }], onMouseUp: [{
+                type: HostListener,
+                args: ['document:mouseup', ['$event']]
+            }], onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape', []]
+            }], onMouseMove: [{
+                type: HostListener,
+                args: ['document:mousemove', ['$event']]
+            }], onTouchMove: [{
+                type: HostListener,
+                args: ['document:touchmove', ['$event']]
+            }], onDocumentTouchEnd: [{
+                type: HostListener,
+                args: ['document:touchend', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ShipBlueprint, TEST_NODES, findDuplicateNodeIDs, findDuplicatePortIDs, layoutNodes };
+//# sourceMappingURL=ship-ui-core-ship-blueprint.mjs.map