@utisha/graph-editor 1.0.0 → 1.0.1

package/fesm2022/utisha-graph-editor.mjs

@@ -1,5 +1,126 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, viewChild, signal, computed, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { signal, Injectable, EventEmitter, viewChild, inject, computed, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * Service for managing undo/redo history of graph state.
+ *
+ * Uses a simple snapshot-based approach where each history entry
+ * is a deep copy of the entire graph state.
+ */
+class GraphHistoryService {
+    history = [];
+    historyIndex = -1;
+    maxHistorySize = 100;
+    /** Signal to track if an undo/redo operation is in progress */
+    isUndoRedo = signal(false);
+    /**
+     * Initialize history with the given graph state.
+     * Clears any existing history.
+     */
+    init(graph) {
+        this.history = [structuredClone(graph)];
+        this.historyIndex = 0;
+    }
+    /**
+     * Push a new state to the history stack.
+     * If we're not at the end of history, truncates future states.
+     * Prevents duplicate consecutive states.
+     *
+     * @returns true if state was pushed, false if it was a duplicate
+     */
+    push(graph) {
+        const currentState = structuredClone(graph);
+        // Don't push if state hasn't changed
+        if (this.historyIndex >= 0 && this.historyIndex < this.history.length) {
+            const lastState = this.history[this.historyIndex];
+            if (JSON.stringify(lastState) === JSON.stringify(currentState)) {
+                return false;
+            }
+        }
+        // If we're not at the end of history, truncate future states
+        if (this.historyIndex < this.history.length - 1) {
+            this.history = this.history.slice(0, this.historyIndex + 1);
+        }
+        // Add new state
+        this.history.push(currentState);
+        this.historyIndex = this.history.length - 1;
+        // Enforce max history size
+        if (this.history.length > this.maxHistorySize) {
+            this.history.shift();
+            this.historyIndex--;
+        }
+        return true;
+    }
+    /**
+     * Undo the last action.
+     * @returns The previous graph state, or null if nothing to undo
+     */
+    undo() {
+        if (this.historyIndex <= 0) {
+            return null;
+        }
+        this.historyIndex--;
+        this.isUndoRedo.set(true);
+        const state = structuredClone(this.history[this.historyIndex]);
+        // Note: caller should set isUndoRedo back to false after applying state
+        return state;
+    }
+    /**
+     * Redo the last undone action.
+     * @returns The next graph state, or null if nothing to redo
+     */
+    redo() {
+        if (this.historyIndex >= this.history.length - 1) {
+            return null;
+        }
+        this.historyIndex++;
+        this.isUndoRedo.set(true);
+        const state = structuredClone(this.history[this.historyIndex]);
+        // Note: caller should set isUndoRedo back to false after applying state
+        return state;
+    }
+    /**
+     * Complete an undo/redo operation.
+     * Call this after applying the state returned by undo() or redo().
+     */
+    completeUndoRedo() {
+        this.isUndoRedo.set(false);
+    }
+    /** Check if undo is available */
+    canUndo() {
+        return this.historyIndex > 0;
+    }
+    /** Check if redo is available */
+    canRedo() {
+        return this.historyIndex < this.history.length - 1;
+    }
+    /** Clear history and reset to given state */
+    clear(graph) {
+        this.init(graph);
+    }
+    /** Get current history size */
+    get size() {
+        return this.history.length;
+    }
+    /** Get current position in history (0-indexed) */
+    get position() {
+        return this.historyIndex;
+    }
+    /** Set maximum history size */
+    setMaxSize(size) {
+        this.maxHistorySize = size;
+        // Trim history if necessary
+        while (this.history.length > this.maxHistorySize) {
+            this.history.shift();
+            this.historyIndex--;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: GraphHistoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: GraphHistoryService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: GraphHistoryService, decorators: [{
+            type: Injectable
+        }] });
 
 /**
  * Main graph editor component.
@@ -35,6 +156,7 @@ class GraphEditorComponent {
     canvasClick = new EventEmitter();
     contextMenu = new EventEmitter();
     canvasSvgRef = viewChild('canvasSvg');
+    historyService = inject(GraphHistoryService);
     // Internal state
     internalGraph = signal({ nodes: [], edges: [] });
     selection = signal({ nodes: [], edges: [] });
@@ -46,6 +168,8 @@ class GraphEditorComponent {
     // Dragging state
     draggedNode = null;
     dragOffset = { x: 0, y: 0 };
+    draggedNodeOffsets = new Map(); // For multi-node drag
+    didDrag = false; // Track if actual dragging occurred (to suppress click after drag)
     isPanning = false;
     lastMousePos = { x: 0, y: 0 };
     draggedEdge = null;
@@ -59,6 +183,10 @@ class GraphEditorComponent {
     pendingEdge = null;
     // Preview line for line tool (rubber-band from source to cursor)
     previewLine = signal(null);
+    // Box selection state (Shift+drag)
+    isBoxSelecting = false;
+    boxSelectStart = { x: 0, y: 0 };
+    selectionBox = signal(null);
     // Computed
     transform = computed(() => `translate(${this.panX()}, ${this.panY()}) scale(${this.scale()})`);
     gridBounds = computed(() => {
@@ -108,6 +236,8 @@ class GraphEditorComponent {
             this.internalGraph.set(structuredClone(this.graph));
         }
         this.validate();
+        // Initialize history with starting state
+        this.historyService.init(this.internalGraph());
     }
     // Node operations
     addNode(type, position) {
@@ -190,6 +320,46 @@ class GraphEditorComponent {
         }
         this.selectionChange.emit(this.selection());
     }
+    /** Toggle a node in/out of the current selection (for Ctrl+Click) */
+    toggleNodeSelection(nodeId) {
+        const sel = this.selection();
+        const isSelected = sel.nodes.includes(nodeId);
+        if (isSelected) {
+            // Remove from selection
+            this.selection.set({
+                nodes: sel.nodes.filter(id => id !== nodeId),
+                edges: sel.edges
+            });
+        }
+        else {
+            // Add to selection
+            this.selection.set({
+                nodes: [...sel.nodes, nodeId],
+                edges: sel.edges
+            });
+        }
+        this.selectionChange.emit(this.selection());
+    }
+    /** Toggle an edge in/out of the current selection (for Ctrl+Click) */
+    toggleEdgeSelection(edgeId) {
+        const sel = this.selection();
+        const isSelected = sel.edges.includes(edgeId);
+        if (isSelected) {
+            // Remove from selection
+            this.selection.set({
+                nodes: sel.nodes,
+                edges: sel.edges.filter(id => id !== edgeId)
+            });
+        }
+        else {
+            // Add to selection
+            this.selection.set({
+                nodes: sel.nodes,
+                edges: [...sel.edges, edgeId]
+            });
+        }
+        this.selectionChange.emit(this.selection());
+    }
     onKeyDown(event) {
         if (this.readonly || this.config.interaction?.readonly)
             return;
@@ -203,24 +373,58 @@ class GraphEditorComponent {
             event.preventDefault();
             return;
         }
-        if (event.key === 'Delete' || event.key === 'Backspace') {
-            const sel = this.selection();
-            // Delete selected edges
-            if (sel.edges.length > 0) {
-                for (const edgeId of sel.edges) {
-                    this.removeEdge(edgeId);
-                }
+        // Undo: Ctrl+Z (or Cmd+Z on Mac)
+        if ((event.ctrlKey || event.metaKey) && event.key === 'z' && !event.shiftKey) {
+            if (this.undo()) {
                 event.preventDefault();
-                return;
             }
-            // Delete selected nodes (keep attached edges)
-            if (sel.nodes.length > 0) {
-                for (const nodeId of sel.nodes) {
-                    this.removeNode(nodeId, false);
-                }
+            return;
+        }
+        // Redo: Ctrl+Y or Ctrl+Shift+Z (or Cmd+Y / Cmd+Shift+Z on Mac)
+        if ((event.ctrlKey || event.metaKey) && (event.key === 'y' || (event.key === 'z' && event.shiftKey))) {
+            if (this.redo()) {
                 event.preventDefault();
+            }
+            return;
+        }
+        if (event.key === 'Delete' || event.key === 'Backspace') {
+            const sel = this.selection();
+            if (sel.nodes.length === 0 && sel.edges.length === 0)
                 return;
+            // Batch delete: remove all selected items atomically (single history entry)
+            const graph = this.internalGraph();
+            const nodeIdsToRemove = new Set(sel.nodes);
+            const edgeIdsToRemove = new Set(sel.edges);
+            // Collect removed items for events
+            const removedNodes = graph.nodes.filter(n => nodeIdsToRemove.has(n.id));
+            const removedEdges = graph.edges.filter(e => edgeIdsToRemove.has(e.id));
+            // Filter out selected nodes
+            const remainingNodes = graph.nodes.filter(n => !nodeIdsToRemove.has(n.id));
+            // Filter out selected edges AND edges connected to deleted nodes
+            const remainingEdges = graph.edges.filter(e => !edgeIdsToRemove.has(e.id) &&
+                !nodeIdsToRemove.has(e.source) &&
+                !nodeIdsToRemove.has(e.target));
+            // Find edges that were removed because they connected to deleted nodes
+            const additionalRemovedEdges = graph.edges.filter(e => !edgeIdsToRemove.has(e.id) &&
+                (nodeIdsToRemove.has(e.source) || nodeIdsToRemove.has(e.target)));
+            // Update graph atomically (single history push)
+            this.internalGraph.set({ ...graph, nodes: remainingNodes, edges: remainingEdges });
+            this.emitGraphChange();
+            // Emit removal events
+            for (const edge of removedEdges) {
+                this.edgeRemoved.emit(edge);
+            }
+            for (const edge of additionalRemovedEdges) {
+                this.edgeRemoved.emit(edge);
             }
+            for (const node of removedNodes) {
+                this.nodeRemoved.emit(node);
+            }
+            // Clear selection
+            this.selection.set({ nodes: [], edges: [] });
+            this.selectionChange.emit(this.selection());
+            event.preventDefault();
+            return;
         }
         // Arrow keys: nudge selected node(s) — 1px default, 10px with Shift
         if (event.key.startsWith('Arrow')) {
@@ -301,7 +505,14 @@ class GraphEditorComponent {
         if (this.activeTool() !== 'hand')
             return;
         event.stopPropagation();
-        this.selectEdge(edge.id);
+        if (event.ctrlKey || event.metaKey) {
+            // Ctrl/Cmd+Click: toggle edge in selection
+            this.toggleEdgeSelection(edge.id);
+        }
+        else {
+            // Normal click: replace selection with this edge
+            this.selectEdge(edge.id);
+        }
         this.edgeClick.emit(edge);
     }
     onEdgeDoubleClick(event, edge) {
@@ -369,7 +580,17 @@ class GraphEditorComponent {
                 },
             };
         });
-        this.internalGraph.set({ ...graph, nodes: updatedNodes });
+        // Recalculate edge ports based on new node positions
+        const updatedEdges = graph.edges.map(edge => {
+            const sourceNode = updatedNodes.find(n => n.id === edge.source);
+            const targetNode = updatedNodes.find(n => n.id === edge.target);
+            if (!sourceNode || !targetNode)
+                return edge;
+            const newSourcePort = this.findClosestPortForEdge(sourceNode, targetNode, 'source');
+            const newTargetPort = this.findClosestPortForEdge(targetNode, sourceNode, 'target');
+            return { ...edge, sourcePort: newSourcePort, targetPort: newTargetPort };
+        });
+        this.internalGraph.set({ ...graph, nodes: updatedNodes, edges: updatedEdges });
         this.emitGraphChange();
         setTimeout(() => this.fitToScreen());
     }
@@ -448,14 +669,37 @@ class GraphEditorComponent {
         const isHitArea = target.classList.contains('edge-hit-area');
         const isInteractive = isNode || isEdgeEndpoint || isAttachmentPoint || isHitArea;
         if (!isInteractive) {
-            this.isPanning = true;
+            const rect = event.currentTarget.getBoundingClientRect();
+            const mouseX = (event.clientX - rect.left - this.panX()) / this.scale();
+            const mouseY = (event.clientY - rect.top - this.panY()) / this.scale();
+            if (event.shiftKey && this.activeTool() === 'hand') {
+                // Shift+drag = box selection (only with hand tool)
+                this.isBoxSelecting = true;
+                this.boxSelectStart = { x: mouseX, y: mouseY };
+                this.selectionBox.set({ x: mouseX, y: mouseY, width: 0, height: 0 });
+            }
+            else {
+                // Normal drag = pan
+                this.isPanning = true;
+            }
             this.lastMousePos = { x: event.clientX, y: event.clientY };
             this.clearSelection();
             event.preventDefault();
         }
     }
     onCanvasMouseMove(event) {
-        if (this.isPanning) {
+        if (this.isBoxSelecting) {
+            // Update selection box
+            const rect = event.currentTarget.getBoundingClientRect();
+            const mouseX = (event.clientX - rect.left - this.panX()) / this.scale();
+            const mouseY = (event.clientY - rect.top - this.panY()) / this.scale();
+            const x = Math.min(this.boxSelectStart.x, mouseX);
+            const y = Math.min(this.boxSelectStart.y, mouseY);
+            const width = Math.abs(mouseX - this.boxSelectStart.x);
+            const height = Math.abs(mouseY - this.boxSelectStart.y);
+            this.selectionBox.set({ x, y, width, height });
+        }
+        else if (this.isPanning) {
             const dx = event.clientX - this.lastMousePos.x;
             const dy = event.clientY - this.lastMousePos.y;
             this.panX.set(this.panX() + dx);
@@ -463,46 +707,74 @@ class GraphEditorComponent {
             this.lastMousePos = { x: event.clientX, y: event.clientY };
         }
         else if (this.draggedNode) {
+            this.didDrag = true; // Mark that dragging occurred
             const rect = event.currentTarget.getBoundingClientRect();
             const mouseX = (event.clientX - rect.left - this.panX()) / this.scale();
             const mouseY = (event.clientY - rect.top - this.panY()) / this.scale();
-            let x = mouseX - this.dragOffset.x;
-            let y = mouseY - this.dragOffset.y;
-            // Smart snap to grid
-            if (this.config.canvas?.grid?.snap) {
-                const gridSize = this.config.canvas.grid.size || 20;
-                const snapThreshold = gridSize / 4;
-                const snapX = Math.round(x / gridSize) * gridSize;
-                const snapY = Math.round(y / gridSize) * gridSize;
-                if (Math.abs(x - snapX) < snapThreshold)
-                    x = snapX;
-                if (Math.abs(y - snapY) < snapThreshold)
-                    y = snapY;
-            }
-            // Atomic update: node position + edge port recalculation in one graph set
             const graph = this.internalGraph();
-            const nodeIndex = graph.nodes.findIndex(n => n.id === this.draggedNode.id);
-            if (nodeIndex !== -1) {
-                const updatedNodes = [...graph.nodes];
-                updatedNodes[nodeIndex] = { ...updatedNodes[nodeIndex], position: { x, y } };
-                // Recalculate ports for all edges connected to this node
-                const draggedId = this.draggedNode.id;
-                const updatedEdges = graph.edges.map(edge => {
-                    if (edge.source !== draggedId && edge.target !== draggedId)
-                        return edge;
-                    const sourceNode = updatedNodes.find(n => n.id === edge.source);
-                    const targetNode = updatedNodes.find(n => n.id === edge.target);
-                    if (!sourceNode || !targetNode)
-                        return edge;
-                    const newSourcePort = this.findClosestPortForEdge(sourceNode, targetNode, 'source');
-                    const newTargetPort = this.findClosestPortForEdge(targetNode, sourceNode, 'target');
-                    if (edge.sourcePort === newSourcePort && edge.targetPort === newTargetPort)
-                        return edge;
-                    return { ...edge, sourcePort: newSourcePort, targetPort: newTargetPort };
-                });
-                this.internalGraph.set({ ...graph, nodes: updatedNodes, edges: updatedEdges });
-                this.emitGraphChange();
+            const updatedNodes = [...graph.nodes];
+            const movedNodeIds = new Set();
+            // Check if we're dragging multiple selected nodes
+            if (this.draggedNodeOffsets.size > 1) {
+                // Multi-node drag: move all selected nodes
+                for (const [nodeId, offset] of this.draggedNodeOffsets) {
+                    const nodeIndex = updatedNodes.findIndex(n => n.id === nodeId);
+                    if (nodeIndex === -1)
+                        continue;
+                    let x = mouseX - offset.x;
+                    let y = mouseY - offset.y;
+                    // Smart snap to grid
+                    if (this.config.canvas?.grid?.snap) {
+                        const gridSize = this.config.canvas.grid.size || 20;
+                        const snapThreshold = gridSize / 4;
+                        const snapX = Math.round(x / gridSize) * gridSize;
+                        const snapY = Math.round(y / gridSize) * gridSize;
+                        if (Math.abs(x - snapX) < snapThreshold)
+                            x = snapX;
+                        if (Math.abs(y - snapY) < snapThreshold)
+                            y = snapY;
+                    }
+                    updatedNodes[nodeIndex] = { ...updatedNodes[nodeIndex], position: { x, y } };
+                    movedNodeIds.add(nodeId);
+                }
+            }
+            else {
+                // Single node drag
+                let x = mouseX - this.dragOffset.x;
+                let y = mouseY - this.dragOffset.y;
+                // Smart snap to grid
+                if (this.config.canvas?.grid?.snap) {
+                    const gridSize = this.config.canvas.grid.size || 20;
+                    const snapThreshold = gridSize / 4;
+                    const snapX = Math.round(x / gridSize) * gridSize;
+                    const snapY = Math.round(y / gridSize) * gridSize;
+                    if (Math.abs(x - snapX) < snapThreshold)
+                        x = snapX;
+                    if (Math.abs(y - snapY) < snapThreshold)
+                        y = snapY;
+                }
+                const nodeIndex = updatedNodes.findIndex(n => n.id === this.draggedNode.id);
+                if (nodeIndex !== -1) {
+                    updatedNodes[nodeIndex] = { ...updatedNodes[nodeIndex], position: { x, y } };
+                    movedNodeIds.add(this.draggedNode.id);
+                }
             }
+            // Recalculate ports for all edges connected to moved nodes
+            const updatedEdges = graph.edges.map(edge => {
+                if (!movedNodeIds.has(edge.source) && !movedNodeIds.has(edge.target))
+                    return edge;
+                const sourceNode = updatedNodes.find(n => n.id === edge.source);
+                const targetNode = updatedNodes.find(n => n.id === edge.target);
+                if (!sourceNode || !targetNode)
+                    return edge;
+                const newSourcePort = this.findClosestPortForEdge(sourceNode, targetNode, 'source');
+                const newTargetPort = this.findClosestPortForEdge(targetNode, sourceNode, 'target');
+                if (edge.sourcePort === newSourcePort && edge.targetPort === newTargetPort)
+                    return edge;
+                return { ...edge, sourcePort: newSourcePort, targetPort: newTargetPort };
+            });
+            this.internalGraph.set({ ...graph, nodes: updatedNodes, edges: updatedEdges });
+            this.emitGraphChange();
         }
         else if (this.draggedEdge) {
             // Edge reconnection - find hovered node and closest port
@@ -572,6 +844,41 @@ class GraphEditorComponent {
         }
     }
     onCanvasMouseUp(_event) {
+        // Handle box selection completion
+        if (this.isBoxSelecting) {
+            const box = this.selectionBox();
+            if (box && (box.width > 5 || box.height > 5)) {
+                // Find all nodes within the selection box
+                const selectedNodes = [];
+                for (const node of this.internalGraph().nodes) {
+                    const size = this.getNodeSize(node);
+                    const nodeRight = node.position.x + size.width;
+                    const nodeBottom = node.position.y + size.height;
+                    const boxRight = box.x + box.width;
+                    const boxBottom = box.y + box.height;
+                    // Check if node intersects with selection box
+                    if (node.position.x < boxRight &&
+                        nodeRight > box.x &&
+                        node.position.y < boxBottom &&
+                        nodeBottom > box.y) {
+                        selectedNodes.push(node.id);
+                    }
+                }
+                if (selectedNodes.length > 0) {
+                    // Also select edges where both source and target are selected
+                    const selectedEdges = [];
+                    for (const edge of this.internalGraph().edges) {
+                        if (selectedNodes.includes(edge.source) && selectedNodes.includes(edge.target)) {
+                            selectedEdges.push(edge.id);
+                        }
+                    }
+                    this.selection.set({ nodes: selectedNodes, edges: selectedEdges });
+                    this.selectionChange.emit(this.selection());
+                }
+            }
+            this.isBoxSelecting = false;
+            this.selectionBox.set(null);
+        }
         // Handle edge reconnection with port snapping
         if (this.draggedEdge && this.hoveredNodeId && this.hoveredPort) {
             const graph = this.internalGraph();
@@ -596,6 +903,7 @@ class GraphEditorComponent {
         }
         this.isPanning = false;
         this.draggedNode = null;
+        this.draggedNodeOffsets.clear();
         this.draggedEdge = null;
         this.hoveredNodeId = null;
         this.hoveredPort = null;
@@ -608,6 +916,7 @@ class GraphEditorComponent {
         if (this.activeTool() !== 'hand')
             return;
         this.draggedNode = node;
+        this.didDrag = false; // Reset - will be set true if actual movement occurs
         // Calculate offset between mouse position and node origin to prevent jump
         const svg = event.target.closest('svg');
         const rect = svg.getBoundingClientRect();
@@ -617,6 +926,21 @@ class GraphEditorComponent {
             x: mouseX - node.position.x,
             y: mouseY - node.position.y
         };
+        // If this node is part of a multi-selection, calculate offsets for all selected nodes
+        const sel = this.selection();
+        this.draggedNodeOffsets.clear();
+        if (sel.nodes.includes(node.id) && sel.nodes.length > 1) {
+            const graph = this.internalGraph();
+            for (const nodeId of sel.nodes) {
+                const n = graph.nodes.find(nd => nd.id === nodeId);
+                if (n) {
+                    this.draggedNodeOffsets.set(nodeId, {
+                        x: mouseX - n.position.x,
+                        y: mouseY - n.position.y
+                    });
+                }
+            }
+        }
     }
     onNodeClick(event, node) {
         if (this.activeTool() === 'line') {
@@ -664,8 +988,20 @@ class GraphEditorComponent {
             }
         }
         else {
-            // Hand tool - normal select
-            this.selectNode(node.id);
+            // Hand tool - select or toggle selection
+            // Skip selection change if we just finished dragging
+            if (this.didDrag) {
+                this.didDrag = false;
+                return;
+            }
+            if (event.ctrlKey || event.metaKey) {
+                // Ctrl/Cmd+Click: toggle node in selection
+                this.toggleNodeSelection(node.id);
+            }
+            else {
+                // Normal click: replace selection with this node
+                this.selectNode(node.id);
+            }
         }
     }
     onAttachmentPointClick(event, node, port) {
@@ -766,11 +1102,55 @@ class GraphEditorComponent {
     }
     // Helper methods
     emitGraphChange() {
+        // Push to history (unless this is an undo/redo operation)
+        if (!this.historyService.isUndoRedo()) {
+            this.historyService.push(this.internalGraph());
+        }
         this.graphChange.emit(this.internalGraph());
         if (this.config.validation?.validateOnChange) {
             this.validate();
         }
     }
+    /** Undo the last action (Ctrl+Z) */
+    undo() {
+        const state = this.historyService.undo();
+        if (!state) {
+            return false;
+        }
+        this.internalGraph.set(state);
+        this.graphChange.emit(this.internalGraph());
+        this.historyService.completeUndoRedo();
+        // Clear selection after undo
+        this.selection.set({ nodes: [], edges: [] });
+        this.selectionChange.emit(this.selection());
+        return true;
+    }
+    /** Redo the last undone action (Ctrl+Y / Ctrl+Shift+Z) */
+    redo() {
+        const state = this.historyService.redo();
+        if (!state) {
+            return false;
+        }
+        this.internalGraph.set(state);
+        this.graphChange.emit(this.internalGraph());
+        this.historyService.completeUndoRedo();
+        // Clear selection after redo
+        this.selection.set({ nodes: [], edges: [] });
+        this.selectionChange.emit(this.selection());
+        return true;
+    }
+    /** Check if undo is available */
+    canUndo() {
+        return this.historyService.canUndo();
+    }
+    /** Check if redo is available */
+    canRedo() {
+        return this.historyService.canRedo();
+    }
+    /** Clear history and reset to current state */
+    clearHistory() {
+        this.historyService.clear(this.internalGraph());
+    }
     generateId() {
         return `node_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
     }
@@ -865,6 +1245,53 @@ class GraphEditorComponent {
         const nodeConfig = this.config.nodes.types.find(t => t.type === node.type);
         return nodeConfig?.icon || '●';
     }
+    /**
+     * Get custom image URL for a node.
+     * Checks node.data['imageUrl'] first, then falls back to nodeType.defaultData['imageUrl'].
+     * Returns null if no image is configured (will render text icon instead).
+     */
+    getNodeImage(node) {
+        // Check instance-level image first
+        if (node.data['imageUrl']) {
+            return node.data['imageUrl'];
+        }
+        // Fall back to node type default
+        const nodeConfig = this.config.nodes.types.find(t => t.type === node.type);
+        if (nodeConfig?.defaultData['imageUrl']) {
+            return nodeConfig.defaultData['imageUrl'];
+        }
+        return null;
+    }
+    /**
+     * Get the position for the node image (top-left corner of image).
+     * Uses same positioning logic as icon but accounts for image dimensions.
+     */
+    getImagePosition(node) {
+        const size = this.getNodeSize(node);
+        const imageSize = this.getImageSize(node);
+        const pos = this.config.nodes.iconPosition || 'top-left';
+        const padding = 8;
+        const positions = {
+            'top-left': { x: padding, y: padding },
+            'top': { x: (size.width - imageSize) / 2, y: padding },
+            'top-right': { x: size.width - imageSize - padding, y: padding },
+            'right': { x: size.width - imageSize - padding, y: (size.height - imageSize) / 2 },
+            'bottom-right': { x: size.width - imageSize - padding, y: size.height - imageSize - padding },
+            'bottom': { x: (size.width - imageSize) / 2, y: size.height - imageSize - padding },
+            'bottom-left': { x: padding, y: size.height - imageSize - padding },
+            'left': { x: padding, y: (size.height - imageSize) / 2 }
+        };
+        return positions[pos] || positions['top-left'];
+    }
+    /**
+     * Get the size (width/height) for node images.
+     * Images are rendered as squares, sized proportionally to node height.
+     */
+    getImageSize(node) {
+        const size = this.getNodeSize(node);
+        // Image takes up ~40% of node height, with min 24px and max 64px
+        return Math.min(64, Math.max(24, size.height * 0.4));
+    }
     getIconPosition(node) {
         const size = this.getNodeSize(node);
         const pos = this.config.nodes.iconPosition || 'top-left';
@@ -1008,647 +1435,15 @@ class GraphEditorComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: GraphEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: GraphEditorComponent, isStandalone: true, selector: "graph-editor", inputs: { config: "config", graph: "graph", readonly: "readonly", visualizationMode: "visualizationMode", overlayData: "overlayData" }, outputs: { graphChange: "graphChange", nodeAdded: "nodeAdded", nodeUpdated: "nodeUpdated", nodeRemoved: "nodeRemoved", edgeAdded: "edgeAdded", edgeUpdated: "edgeUpdated", edgeRemoved: "edgeRemoved", selectionChange: "selectionChange", validationChange: "validationChange", nodeClick: "nodeClick", nodeDoubleClick: "nodeDoubleClick", edgeClick: "edgeClick", edgeDoubleClick: "edgeDoubleClick", canvasClick: "canvasClick", contextMenu: "contextMenu" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "onKeyDown($event)" }, styleAttribute: "outline: none;" }, viewQueries: [{ propertyName: "canvasSvgRef", first: true, predicate: ["canvasSvg"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `
-    <div class="graph-editor-container">
-      <!-- Canvas with overlaid palette -->
-      <div class="graph-canvas-wrapper">
-        <!-- Top-left horizontal palette overlay -->
-        @if (config.palette?.enabled !== false) {
-          <div class="graph-palette-overlay">
-            <!-- Tools -->
-            <button
-              class="palette-item tool-item"
-              [class.active]="activeTool() === 'hand'"
-              title="Hand tool (move nodes)"
-              (click)="switchTool('hand')"
-            >
-              <span class="icon">✋</span>
-            </button>
-            <button
-              class="palette-item tool-item"
-              [class.active]="activeTool() === 'line'"
-              title="Line tool (draw connections)"
-              (click)="switchTool('line')"
-            >
-              <span class="icon">∕</span>
-            </button>
-
-            <!-- Divider -->
-            <div class="palette-divider"></div>
-
-            <!-- Node types -->
-            @for (nodeType of config.nodes.types; track nodeType.type) {
-              <button
-                class="palette-item"
-                [attr.data-node-type]="nodeType.type"
-                [attr.title]="nodeType.label || nodeType.type"
-                (click)="addNode(nodeType.type)"
-              >
-                <span class="icon">{{ nodeType.icon || '●' }}</span>
-              </button>
-            }
-          </div>
-        }
-
-        <svg
-          #canvasSvg
-          [class.tool-line]="activeTool() === 'line'"
-          [attr.width]="'100%'"
-          [attr.height]="'100%'"
-          (mousedown)="onCanvasMouseDown($event)"
-          (mousemove)="onCanvasMouseMove($event)"
-          (mouseup)="onCanvasMouseUp($event)"
-          (wheel)="onWheel($event)"
-          (contextmenu)="onContextMenu($event)"
-        >
-          <!-- Arrow marker definitions -->
-          <defs>
-            <marker id="arrow-end" viewBox="0 0 10 10" refX="9" refY="5"
-              markerWidth="8" markerHeight="8" orient="auto">
-              <path d="M 0 1 L 8 5 L 0 9 z" fill="#94a3b8"/>
-            </marker>
-            <marker id="arrow-end-selected" viewBox="0 0 10 10" refX="9" refY="5"
-              markerWidth="8" markerHeight="8" orient="auto">
-              <path d="M 0 1 L 8 5 L 0 9 z" fill="#3b82f6"/>
-            </marker>
-            <marker id="arrow-start" viewBox="0 0 10 10" refX="1" refY="5"
-              markerWidth="8" markerHeight="8" orient="auto">
-              <path d="M 10 1 L 2 5 L 10 9 z" fill="#94a3b8"/>
-            </marker>
-            <marker id="arrow-start-selected" viewBox="0 0 10 10" refX="1" refY="5"
-              markerWidth="8" markerHeight="8" orient="auto">
-              <path d="M 10 1 L 2 5 L 10 9 z" fill="#3b82f6"/>
-            </marker>
-          </defs>
-
-          <!-- Main transform group (pan + zoom) -->
-          <g [attr.transform]="transform()">
-            <!-- Grid (if enabled) -->
-            <!-- Grid (if enabled) - extended to cover viewport during pan -->
-            @if (config.canvas?.grid?.enabled) {
-              <defs>
-                <pattern
-                  id="grid"
-                  [attr.width]="config.canvas!.grid!.size"
-                  [attr.height]="config.canvas!.grid!.size"
-                  patternUnits="userSpaceOnUse"
-                >
-                  <path
-                    [attr.d]="'M ' + config.canvas!.grid!.size + ' 0 L 0 0 0 ' + config.canvas!.grid!.size"
-                    fill="none"
-                    [attr.stroke]="config.canvas!.grid!.color || '#e0e0e0'"
-                    stroke-width="1"
-                  />
-                </pattern>
-              </defs>
-              <!-- Extended grid background covering viewport + pan offset -->
-              <rect
-                [attr.x]="gridBounds().x"
-                [attr.y]="gridBounds().y"
-                [attr.width]="gridBounds().width"
-                [attr.height]="gridBounds().height"
-                fill="url(#grid)"
-              />
-            }
-
-            <!-- Layer 0.5: Preview line for line tool (rubber-band) -->
-            @if (previewLine()) {
-              <line
-                class="preview-line"
-                [attr.x1]="previewLine()!.source.x"
-                [attr.y1]="previewLine()!.source.y"
-                [attr.x2]="previewLine()!.target.x"
-                [attr.y2]="previewLine()!.target.y"
-                stroke="#3b82f6"
-                stroke-width="2.5"
-                stroke-dasharray="8,6"
-                stroke-linecap="round"
-                opacity="0.7"
-              />
-            }
-
-            <!-- Layer 1: Edge paths (behind everything) -->
-            @for (edge of internalGraph().edges; track edge.id) {
-              <!-- Edge shadow for depth (optional) -->
-              @if (shadowsEnabled()) {
-                <path
-                  class="edge-shadow"
-                  [attr.d]="getEdgePath(edge)"
-                  stroke="rgba(0,0,0,0.06)"
-                  stroke-width="6"
-                  fill="none"
-                  stroke-linecap="round"
-                  [attr.transform]="'translate(1, 2)'"
-                />
-              }
-              <!-- Invisible wide hit-area for easier clicking (hand tool only) -->
-              <path
-                [attr.d]="getEdgePath(edge)"
-                stroke="transparent"
-                [attr.stroke-width]="20"
-                fill="none"
-                class="edge-hit-area"
-                [attr.pointer-events]="activeTool() === 'hand' ? 'stroke' : 'none'"
-                (click)="onEdgeClick($event, edge)"
-                (dblclick)="onEdgeDoubleClick($event, edge)"
-              />
-              <!-- Visible edge line -->
-              <path
-                class="edge-line"
-                [attr.d]="getEdgePath(edge)"
-                [attr.stroke]="selection().edges.includes(edge.id) ? '#3b82f6' : '#94a3b8'"
-                [attr.stroke-width]="selection().edges.includes(edge.id) ? 2.5 : 2"
-                fill="none"
-                stroke-linecap="round"
-                [class.selected]="selection().edges.includes(edge.id)"
-                [attr.marker-end]="getEdgeMarkerEnd(edge)"
-                [attr.marker-start]="getEdgeMarkerStart(edge)"
-                pointer-events="none"
-              />
-            }
-
-            <!-- Layer 2: Nodes -->
-            @for (node of internalGraph().nodes; track node.id) {
-              <g
-                [attr.transform]="'translate(' + node.position.x + ',' + node.position.y + ')'"
-                class="graph-node"
-                [class.selected]="selection().nodes.includes(node.id)"
-                [attr.data-node-id]="node.id"
-                (mousedown)="onNodeMouseDown($event, node)"
-                (click)="onNodeClick($event, node)"
-                (dblclick)="nodeDoubleClick.emit(node)"
-              >
-                <!-- Node shadow (optional) -->
-                @if (shadowsEnabled()) {
-                  <rect
-                    class="node-shadow"
-                    [attr.width]="getNodeSize(node).width"
-                    [attr.height]="getNodeSize(node).height"
-                    fill="rgba(0,0,0,0.08)"
-                    rx="12"
-                    transform="translate(2, 3)"
-                    style="filter: blur(4px);"
-                  />
-                }
-                <!-- Node background -->
-                <rect
-                  class="node-bg"
-                  [attr.width]="getNodeSize(node).width"
-                  [attr.height]="getNodeSize(node).height"
-                  fill="white"
-                  [attr.stroke]="selection().nodes.includes(node.id) ? '#3b82f6' : '#e2e8f0'"
-                  [attr.stroke-width]="selection().nodes.includes(node.id) ? 2.5 : 1.5"
-                  rx="12"
-                />
-
-                <!-- Node type icon -->
-                <text
-                  class="node-icon"
-                  [attr.x]="getIconPosition(node).x"
-                  [attr.y]="getIconPosition(node).y"
-                  text-anchor="middle"
-                  dominant-baseline="middle"
-                  [attr.font-size]="getNodeSize(node).height * 0.28"
-                >
-                  {{ getNodeTypeIcon(node) }}
-                </text>
-
-                <!-- Node label -->
-                <text
-                  class="node-label"
-                  [attr.x]="getLabelPosition(node).x"
-                  [attr.y]="getLabelPosition(node).y"
-                  text-anchor="middle"
-                  dominant-baseline="middle"
-                  font-size="14"
-                  font-weight="500"
-                  fill="#1e293b"
-                >
-                  {{ node.data['name'] || node.type }}
-                </text>
-              </g>
-            }
-
-            <!-- Layer 3: Attachment points (on top of nodes) -->
-            @for (node of internalGraph().nodes; track node.id) {
-              @if (showAttachmentPoints() === node.id) {
-                <g [attr.transform]="'translate(' + node.position.x + ',' + node.position.y + ')'">
-                  @for (port of getNodePorts(node); track port.position) {
-                    <circle
-                      [attr.cx]="port.x"
-                      [attr.cy]="port.y"
-                      [attr.r]="hoveredPort?.nodeId === node.id && hoveredPort?.port === port.position ? 8 : 6"
-                      [attr.fill]="hoveredPort?.nodeId === node.id && hoveredPort?.port === port.position ? '#2563eb' : '#94a3b8'"
-                      stroke="white"
-                      stroke-width="2"
-                      class="attachment-point"
-                      [class.hovered]="hoveredPort?.nodeId === node.id && hoveredPort?.port === port.position"
-                      (mousedown)="$event.stopPropagation()"
-                      (click)="onAttachmentPointClick($event, node, port.position)"
-                    />
-                  }
-                </g>
-              }
-            }
-
-            <!-- Layer 4: Edge endpoints (only visible when edge is selected) -->
-            @for (edge of internalGraph().edges; track edge.id) {
-              @if (selection().edges.includes(edge.id)) {
-                <g>
-                  <!-- Source endpoint -->
-                  <circle
-                    [attr.cx]="getEdgeSourcePoint(edge).x"
-                    [attr.cy]="getEdgeSourcePoint(edge).y"
-                    r="6"
-                    fill="#3b82f6"
-                    stroke="white"
-                    stroke-width="2"
-                    class="edge-endpoint selected"
-                    (mousedown)="onEdgeEndpointMouseDown($event, edge, 'source')"
-                  />
-
-                  <!-- Target endpoint -->
-                  <circle
-                    [attr.cx]="getEdgeTargetPoint(edge).x"
-                    [attr.cy]="getEdgeTargetPoint(edge).y"
-                    r="6"
-                    fill="#3b82f6"
-                    stroke="white"
-                    stroke-width="2"
-                    class="edge-endpoint selected"
-                    (mousedown)="onEdgeEndpointMouseDown($event, edge, 'target')"
-                  />
-                </g>
-              }
-            }
-          </g>
-        </svg>
-      </div>
-
-      <!-- Edge direction selector overlay -->
-      @if (selectedEdgeMidpoint()) {
-        <div
-          class="edge-direction-selector"
-          [style.left.px]="selectedEdgeMidpoint()!.x"
-          [style.top.px]="selectedEdgeMidpoint()!.y"
-        >
-          <button
-            class="direction-btn"
-            [class.active]="selectedEdgeMidpoint()!.edge.direction === 'backward'"
-            title="Backward"
-            (click)="setEdgeDirection('backward')"
-          >←</button>
-          <button
-            class="direction-btn"
-            [class.active]="selectedEdgeMidpoint()!.edge.direction === 'bidirectional'"
-            title="Bidirectional"
-            (click)="setEdgeDirection('bidirectional')"
-          >↔</button>
-          <button
-            class="direction-btn"
-            [class.active]="!selectedEdgeMidpoint()!.edge.direction || selectedEdgeMidpoint()!.edge.direction === 'forward'"
-            title="Forward"
-            (click)="setEdgeDirection('forward')"
-          >→</button>
-        </div>
-      }
-      <!-- Validation errors -->
-      @if (validationResult() && !validationResult()!.valid) {
-        <div class="validation-panel">
-          <h4>Validation Errors</h4>
-          @for (error of validationResult()!.errors; track error.rule) {
-            <div class="error-item" [class.warning]="error.severity === 'warning'">
-              {{ error.message }}
-            </div>
-          }
-        </div>
-      }
-    </div>
-  `, isInline: true, styles: [".graph-editor-container{display:flex;width:100%;height:100%;position:relative;background:var(--graph-editor-canvas-bg, #f8f9fa)}.graph-palette-overlay{position:absolute;top:16px;left:16px;display:flex;gap:4px;z-index:10;background:#fffffff2;padding:6px;border-radius:var(--radius-md, 8px);box-shadow:0 2px 8px #0000001a;backdrop-filter:blur(4px)}.palette-item{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1.5px solid var(--neutral-200, #e5e7eb);border-radius:var(--radius-md, 8px);background:var(--white, #fff);color:var(--neutral-600, #4b5563);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .15s ease;font-size:20px}.palette-item:focus-visible{outline:2px solid var(--indigo-400, #818cf8);outline-offset:2px}.palette-item:hover{background:var(--neutral-50, #f9fafb);border-color:var(--interactive, #3b82f6);color:var(--interactive, #3b82f6);transform:translateY(-1px);box-shadow:0 2px 6px #00000014}.palette-item:active{transform:translateY(0);box-shadow:none}.palette-item.tool-item.active{background:var(--interactive, #3b82f6);border-color:var(--interactive, #3b82f6);color:#fff}.palette-item.tool-item.active:hover{background:var(--interactive-hover, #2563eb);border-color:var(--interactive-hover, #2563eb);color:#fff}.palette-divider{width:1px;background:var(--neutral-200, #e5e7eb);align-self:stretch;margin:4px 2px}.graph-canvas-wrapper{flex:1;position:relative;overflow:hidden}.graph-canvas{width:100%;height:100%;cursor:grab}.graph-canvas:active{cursor:grabbing}.graph-canvas.tool-line,.graph-canvas.tool-line .graph-node{cursor:crosshair}.graph-node{cursor:move;user-select:none;-webkit-user-select:none;transition:transform .1s ease-out}.graph-node:hover .node-bg{stroke:#cbd5e1}.graph-node text{pointer-events:none}.graph-node .node-label{font-family:system-ui,-apple-system,sans-serif}.graph-node.selected .node-bg{stroke:#3b82f6;filter:drop-shadow(0 4px 12px rgba(59,130,246,.25))}.edge-line{transition:stroke .15s,stroke-width .15s}.edge-line.selected{filter:drop-shadow(0 2px 4px rgba(59,130,246,.3))}.edge-hit-area{cursor:pointer}.edge-endpoint{cursor:pointer;transition:r .2s,fill .2s}.edge-endpoint:hover{r:8;fill:#2563eb}.edge-endpoint.selected{fill:#2563eb}.attachment-point{cursor:crosshair;transition:all .2s}.attachment-point.hovered{filter:drop-shadow(0 0 4px rgba(37,99,235,.6))}.validation-panel{position:absolute;bottom:0;left:0;right:0;max-height:200px;overflow-y:auto;background:#fff;border-top:1px solid #e5e7eb;padding:16px}.error-item{padding:8px 12px;margin-bottom:8px;background:#fee2e2;border-left:3px solid #ef4444;border-radius:4px;font-size:14px}.error-item.warning{background:#fef3c7;border-left-color:#f59e0b}.edge-direction-selector{position:absolute;transform:translate(-50%,-100%);margin-top:-12px;display:flex;gap:2px;background:#fffffff2;padding:4px;border-radius:6px;box-shadow:0 2px 8px #00000026;backdrop-filter:blur(4px);z-index:20;pointer-events:auto}.direction-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid #e5e7eb;border-radius:4px;background:#fff;cursor:pointer;font-size:16px;transition:all .15s;color:#6b7280}.direction-btn:hover{background:#f3f4f6;border-color:#3b82f6;color:#3b82f6}.direction-btn.active{background:#3b82f6;border-color:#3b82f6;color:#fff}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: GraphEditorComponent, isStandalone: true, selector: "graph-editor", inputs: { config: "config", graph: "graph", readonly: "readonly", visualizationMode: "visualizationMode", overlayData: "overlayData" }, outputs: { graphChange: "graphChange", nodeAdded: "nodeAdded", nodeUpdated: "nodeUpdated", nodeRemoved: "nodeRemoved", edgeAdded: "edgeAdded", edgeUpdated: "edgeUpdated", edgeRemoved: "edgeRemoved", selectionChange: "selectionChange", validationChange: "validationChange", nodeClick: "nodeClick", nodeDoubleClick: "nodeDoubleClick", edgeClick: "edgeClick", edgeDoubleClick: "edgeDoubleClick", canvasClick: "canvasClick", contextMenu: "contextMenu" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "onKeyDown($event)" }, styleAttribute: "outline: none;" }, providers: [GraphHistoryService], viewQueries: [{ propertyName: "canvasSvgRef", first: true, predicate: ["canvasSvg"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"graph-editor-container\">\n  <!-- Canvas with overlaid palette -->\n  <div class=\"graph-canvas-wrapper\">\n    <!-- Top-left horizontal palette overlay -->\n    @if (config.palette?.enabled !== false) {\n      <div class=\"graph-palette-overlay\">\n        <!-- Tools -->\n        <button\n          class=\"palette-item tool-item\"\n          [class.active]=\"activeTool() === 'hand'\"\n          title=\"Hand tool (move nodes)\"\n          (click)=\"switchTool('hand')\"\n        >\n          <span class=\"icon\">\u270B</span>\n        </button>\n        <button\n          class=\"palette-item tool-item\"\n          [class.active]=\"activeTool() === 'line'\"\n          title=\"Line tool (draw connections)\"\n          (click)=\"switchTool('line')\"\n        >\n          <span class=\"icon\">\u2215</span>\n        </button>\n\n        <!-- Divider -->\n        <div class=\"palette-divider\"></div>\n\n        <!-- Node types -->\n        @for (nodeType of config.nodes.types; track nodeType.type) {\n          <button\n            class=\"palette-item\"\n            [attr.data-node-type]=\"nodeType.type\"\n            [attr.title]=\"nodeType.label || nodeType.type\"\n            (click)=\"addNode(nodeType.type)\"\n          >\n            @if (nodeType.defaultData['imageUrl']) {\n              <img\n                class=\"palette-icon-img\"\n                [src]=\"nodeType.defaultData['imageUrl']\"\n                [alt]=\"nodeType.label || nodeType.type\"\n              />\n            } @else {\n              <span class=\"icon\">{{ nodeType.icon || '\u25CF' }}</span>\n            }\n          </button>\n        }\n      </div>\n    }\n\n    <svg\n      #canvasSvg\n      [class.tool-line]=\"activeTool() === 'line'\"\n      [attr.width]=\"'100%'\"\n      [attr.height]=\"'100%'\"\n      (mousedown)=\"onCanvasMouseDown($event)\"\n      (mousemove)=\"onCanvasMouseMove($event)\"\n      (mouseup)=\"onCanvasMouseUp($event)\"\n      (wheel)=\"onWheel($event)\"\n      (contextmenu)=\"onContextMenu($event)\"\n    >\n      <!-- Arrow marker definitions -->\n      <defs>\n        <marker id=\"arrow-end\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 0 1 L 8 5 L 0 9 z\" fill=\"#94a3b8\"/>\n        </marker>\n        <marker id=\"arrow-end-selected\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 0 1 L 8 5 L 0 9 z\" fill=\"#3b82f6\"/>\n        </marker>\n        <marker id=\"arrow-start\" viewBox=\"0 0 10 10\" refX=\"1\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 10 1 L 2 5 L 10 9 z\" fill=\"#94a3b8\"/>\n        </marker>\n        <marker id=\"arrow-start-selected\" viewBox=\"0 0 10 10\" refX=\"1\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 10 1 L 2 5 L 10 9 z\" fill=\"#3b82f6\"/>\n        </marker>\n      </defs>\n\n      <!-- Main transform group (pan + zoom) -->\n      <g [attr.transform]=\"transform()\">\n        <!-- Grid (if enabled) -->\n        <!-- Grid (if enabled) - extended to cover viewport during pan -->\n        @if (config.canvas?.grid?.enabled) {\n          <defs>\n            <pattern\n              id=\"grid\"\n              [attr.width]=\"config.canvas!.grid!.size\"\n              [attr.height]=\"config.canvas!.grid!.size\"\n              patternUnits=\"userSpaceOnUse\"\n            >\n              <path\n                [attr.d]=\"'M ' + config.canvas!.grid!.size + ' 0 L 0 0 0 ' + config.canvas!.grid!.size\"\n                fill=\"none\"\n                [attr.stroke]=\"config.canvas!.grid!.color || '#e0e0e0'\"\n                stroke-width=\"1\"\n              />\n            </pattern>\n          </defs>\n          <!-- Extended grid background covering viewport + pan offset -->\n          <rect\n            [attr.x]=\"gridBounds().x\"\n            [attr.y]=\"gridBounds().y\"\n            [attr.width]=\"gridBounds().width\"\n            [attr.height]=\"gridBounds().height\"\n            fill=\"url(#grid)\"\n          />\n        }\n\n        <!-- Layer 0.5: Preview line for line tool (rubber-band) -->\n        @if (previewLine()) {\n          <line\n            class=\"preview-line\"\n            [attr.x1]=\"previewLine()!.source.x\"\n            [attr.y1]=\"previewLine()!.source.y\"\n            [attr.x2]=\"previewLine()!.target.x\"\n            [attr.y2]=\"previewLine()!.target.y\"\n            stroke=\"#3b82f6\"\n            stroke-width=\"2.5\"\n            stroke-dasharray=\"8,6\"\n            stroke-linecap=\"round\"\n            opacity=\"0.7\"\n          />\n        }\n\n        <!-- Layer 1: Edge paths (behind everything) -->\n        @for (edge of internalGraph().edges; track edge.id) {\n          <!-- Edge shadow for depth (optional) -->\n          @if (shadowsEnabled()) {\n            <path\n              class=\"edge-shadow\"\n              [attr.d]=\"getEdgePath(edge)\"\n              stroke=\"rgba(0,0,0,0.06)\"\n              stroke-width=\"6\"\n              fill=\"none\"\n              stroke-linecap=\"round\"\n              [attr.transform]=\"'translate(1, 2)'\"\n            />\n          }\n          <!-- Invisible wide hit-area for easier clicking (hand tool only) -->\n          <path\n            [attr.d]=\"getEdgePath(edge)\"\n            stroke=\"transparent\"\n            [attr.stroke-width]=\"20\"\n            fill=\"none\"\n            class=\"edge-hit-area\"\n            [attr.pointer-events]=\"activeTool() === 'hand' ? 'stroke' : 'none'\"\n            (click)=\"onEdgeClick($event, edge)\"\n            (dblclick)=\"onEdgeDoubleClick($event, edge)\"\n          />\n          <!-- Visible edge line -->\n          <path\n            class=\"edge-line\"\n            [attr.d]=\"getEdgePath(edge)\"\n            [attr.stroke]=\"selection().edges.includes(edge.id) ? '#3b82f6' : '#94a3b8'\"\n            [attr.stroke-width]=\"selection().edges.includes(edge.id) ? 2.5 : 2\"\n            fill=\"none\"\n            stroke-linecap=\"round\"\n            [class.selected]=\"selection().edges.includes(edge.id)\"\n            [attr.marker-end]=\"getEdgeMarkerEnd(edge)\"\n            [attr.marker-start]=\"getEdgeMarkerStart(edge)\"\n            pointer-events=\"none\"\n          />\n        }\n\n        <!-- Layer 2: Nodes -->\n        @for (node of internalGraph().nodes; track node.id) {\n          <g\n            [attr.transform]=\"'translate(' + node.position.x + ',' + node.position.y + ')'\"\n            class=\"graph-node\"\n            [class.selected]=\"selection().nodes.includes(node.id)\"\n            [attr.data-node-id]=\"node.id\"\n            (mousedown)=\"onNodeMouseDown($event, node)\"\n            (click)=\"onNodeClick($event, node)\"\n            (dblclick)=\"nodeDoubleClick.emit(node)\"\n          >\n            <!-- Node shadow (optional) -->\n            @if (shadowsEnabled()) {\n              <rect\n                class=\"node-shadow\"\n                [attr.width]=\"getNodeSize(node).width\"\n                [attr.height]=\"getNodeSize(node).height\"\n                fill=\"rgba(0,0,0,0.08)\"\n                rx=\"12\"\n                transform=\"translate(2, 3)\"\n                style=\"filter: blur(4px);\"\n              />\n            }\n            <!-- Node background -->\n            <rect\n              class=\"node-bg\"\n              [attr.width]=\"getNodeSize(node).width\"\n              [attr.height]=\"getNodeSize(node).height\"\n              fill=\"white\"\n              [attr.stroke]=\"selection().nodes.includes(node.id) ? '#3b82f6' : '#e2e8f0'\"\n              [attr.stroke-width]=\"selection().nodes.includes(node.id) ? 2.5 : 1.5\"\n              rx=\"12\"\n            />\n\n            <!-- Node type icon (text/emoji) or custom image -->\n            @if (getNodeImage(node)) {\n              <image\n                class=\"node-image\"\n                [attr.href]=\"getNodeImage(node)\"\n                [attr.xlink:href]=\"getNodeImage(node)\"\n                [attr.x]=\"getImagePosition(node).x\"\n                [attr.y]=\"getImagePosition(node).y\"\n                [attr.width]=\"getImageSize(node)\"\n                [attr.height]=\"getImageSize(node)\"\n                preserveAspectRatio=\"xMidYMid meet\"\n              />\n            } @else {\n              <text\n                class=\"node-icon\"\n                [attr.x]=\"getIconPosition(node).x\"\n                [attr.y]=\"getIconPosition(node).y\"\n                text-anchor=\"middle\"\n                dominant-baseline=\"middle\"\n                [attr.font-size]=\"getNodeSize(node).height * 0.28\"\n              >\n                {{ getNodeTypeIcon(node) }}\n              </text>\n            }\n\n            <!-- Node label -->\n            <text\n              class=\"node-label\"\n              [attr.x]=\"getLabelPosition(node).x\"\n              [attr.y]=\"getLabelPosition(node).y\"\n              text-anchor=\"middle\"\n              dominant-baseline=\"middle\"\n              font-size=\"14\"\n              font-weight=\"500\"\n              fill=\"#1e293b\"\n            >\n              {{ node.data['name'] || node.type }}\n            </text>\n          </g>\n        }\n\n        <!-- Layer 3: Attachment points (on top of nodes) -->\n        @for (node of internalGraph().nodes; track node.id) {\n          @if (showAttachmentPoints() === node.id) {\n            <g [attr.transform]=\"'translate(' + node.position.x + ',' + node.position.y + ')'\">\n              @for (port of getNodePorts(node); track port.position) {\n                <circle\n                  [attr.cx]=\"port.x\"\n                  [attr.cy]=\"port.y\"\n                  [attr.r]=\"hoveredPort?.nodeId === node.id && hoveredPort?.port === port.position ? 8 : 6\"\n                  [attr.fill]=\"hoveredPort?.nodeId === node.id && hoveredPort?.port === port.position ? '#2563eb' : '#94a3b8'\"\n                  stroke=\"white\"\n                  stroke-width=\"2\"\n                  class=\"attachment-point\"\n                  [class.hovered]=\"hoveredPort?.nodeId === node.id && hoveredPort?.port === port.position\"\n                  (mousedown)=\"$event.stopPropagation()\"\n                  (click)=\"onAttachmentPointClick($event, node, port.position)\"\n                />\n              }\n            </g>\n          }\n        }\n\n        <!-- Layer 4: Edge endpoints (only visible when edge is selected) -->\n        @for (edge of internalGraph().edges; track edge.id) {\n          @if (selection().edges.includes(edge.id)) {\n            <g>\n              <!-- Source endpoint -->\n              <circle\n                [attr.cx]=\"getEdgeSourcePoint(edge).x\"\n                [attr.cy]=\"getEdgeSourcePoint(edge).y\"\n                r=\"6\"\n                fill=\"#3b82f6\"\n                stroke=\"white\"\n                stroke-width=\"2\"\n                class=\"edge-endpoint selected\"\n                (mousedown)=\"onEdgeEndpointMouseDown($event, edge, 'source')\"\n              />\n\n              <!-- Target endpoint -->\n              <circle\n                [attr.cx]=\"getEdgeTargetPoint(edge).x\"\n                [attr.cy]=\"getEdgeTargetPoint(edge).y\"\n                r=\"6\"\n                fill=\"#3b82f6\"\n                stroke=\"white\"\n                stroke-width=\"2\"\n                class=\"edge-endpoint selected\"\n                (mousedown)=\"onEdgeEndpointMouseDown($event, edge, 'target')\"\n              />\n            </g>\n          }\n        }\n\n        <!-- Layer 5: Selection box (Shift+drag) -->\n        @if (selectionBox()) {\n          <rect\n            class=\"selection-box\"\n            [attr.x]=\"selectionBox()!.x\"\n            [attr.y]=\"selectionBox()!.y\"\n            [attr.width]=\"selectionBox()!.width\"\n            [attr.height]=\"selectionBox()!.height\"\n            fill=\"rgba(59, 130, 246, 0.1)\"\n            stroke=\"#3b82f6\"\n            stroke-width=\"1\"\n            stroke-dasharray=\"4,2\"\n          />\n        }\n      </g>\n    </svg>\n  </div>\n\n  <!-- Edge direction selector overlay -->\n  @if (selectedEdgeMidpoint()) {\n    <div\n      class=\"edge-direction-selector\"\n      [style.left.px]=\"selectedEdgeMidpoint()!.x\"\n      [style.top.px]=\"selectedEdgeMidpoint()!.y\"\n    >\n      <button\n        class=\"direction-btn\"\n        [class.active]=\"selectedEdgeMidpoint()!.edge.direction === 'backward'\"\n        title=\"Backward\"\n        (click)=\"setEdgeDirection('backward')\"\n      >\u2190</button>\n      <button\n        class=\"direction-btn\"\n        [class.active]=\"selectedEdgeMidpoint()!.edge.direction === 'bidirectional'\"\n        title=\"Bidirectional\"\n        (click)=\"setEdgeDirection('bidirectional')\"\n      >\u2194</button>\n      <button\n        class=\"direction-btn\"\n        [class.active]=\"!selectedEdgeMidpoint()!.edge.direction || selectedEdgeMidpoint()!.edge.direction === 'forward'\"\n        title=\"Forward\"\n        (click)=\"setEdgeDirection('forward')\"\n      >\u2192</button>\n    </div>\n  }\n  <!-- Validation errors -->\n  @if (validationResult() && !validationResult()!.valid) {\n    <div class=\"validation-panel\">\n      <h4>Validation Errors</h4>\n      @for (error of validationResult()!.errors; track error.rule) {\n        <div class=\"error-item\" [class.warning]=\"error.severity === 'warning'\">\n          {{ error.message }}\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".graph-editor-container{display:flex;width:100%;height:100%;position:relative;background:var(--graph-editor-canvas-bg, #f8f9fa)}.graph-palette-overlay{position:absolute;top:16px;left:16px;display:flex;gap:4px;z-index:10;background:#fffffff2;padding:6px;border-radius:var(--radius-md, 8px);box-shadow:0 2px 8px #0000001a;backdrop-filter:blur(4px)}.palette-item{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1.5px solid var(--neutral-200, #e5e7eb);border-radius:var(--radius-md, 8px);background:var(--white, #fff);color:var(--neutral-600, #4b5563);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .15s ease;font-size:20px}.palette-icon-img{width:24px;height:24px;object-fit:contain}.palette-item:focus-visible{outline:2px solid var(--indigo-400, #818cf8);outline-offset:2px}.palette-item:hover{background:var(--neutral-50, #f9fafb);border-color:var(--interactive, #3b82f6);color:var(--interactive, #3b82f6);transform:translateY(-1px);box-shadow:0 2px 6px #00000014}.palette-item:active{transform:translateY(0);box-shadow:none}.palette-item.tool-item.active{background:var(--interactive, #3b82f6);border-color:var(--interactive, #3b82f6);color:#fff}.palette-item.tool-item.active:hover{background:var(--interactive-hover, #2563eb);border-color:var(--interactive-hover, #2563eb);color:#fff}.palette-divider{width:1px;background:var(--neutral-200, #e5e7eb);align-self:stretch;margin:4px 2px}.graph-canvas-wrapper{flex:1;position:relative;overflow:hidden}.graph-canvas{width:100%;height:100%;cursor:grab}.graph-canvas:active{cursor:grabbing}.graph-canvas.tool-line,.graph-canvas.tool-line .graph-node{cursor:crosshair}.graph-node{cursor:move;user-select:none;-webkit-user-select:none;transition:transform .1s ease-out}.graph-node:hover .node-bg{stroke:#cbd5e1}.graph-node text{pointer-events:none}.graph-node .node-label{font-family:system-ui,-apple-system,sans-serif}.graph-node.selected .node-bg{stroke:#3b82f6;filter:drop-shadow(0 4px 12px rgba(59,130,246,.25))}.edge-line{transition:stroke .15s,stroke-width .15s}.edge-line.selected{filter:drop-shadow(0 2px 4px rgba(59,130,246,.3))}.edge-hit-area{cursor:pointer}.edge-endpoint{cursor:pointer;transition:r .2s,fill .2s}.edge-endpoint:hover{r:8;fill:#2563eb}.edge-endpoint.selected{fill:#2563eb}.attachment-point{cursor:crosshair;transition:all .2s}.attachment-point.hovered{filter:drop-shadow(0 0 4px rgba(37,99,235,.6))}.validation-panel{position:absolute;bottom:0;left:0;right:0;max-height:200px;overflow-y:auto;background:#fff;border-top:1px solid #e5e7eb;padding:16px}.error-item{padding:8px 12px;margin-bottom:8px;background:#fee2e2;border-left:3px solid #ef4444;border-radius:4px;font-size:14px}.error-item.warning{background:#fef3c7;border-left-color:#f59e0b}.edge-direction-selector{position:absolute;transform:translate(-50%,-100%);margin-top:-12px;display:flex;gap:2px;background:#fffffff2;padding:4px;border-radius:6px;box-shadow:0 2px 8px #00000026;backdrop-filter:blur(4px);z-index:20;pointer-events:auto}.direction-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid #e5e7eb;border-radius:4px;background:#fff;cursor:pointer;font-size:16px;transition:all .15s;color:#6b7280}.direction-btn:hover{background:#f3f4f6;border-color:#3b82f6;color:#3b82f6}.direction-btn.active{background:#3b82f6;border-color:#3b82f6;color:#fff}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: GraphEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'graph-editor', standalone: true, imports: [], host: {
+            args: [{ selector: 'graph-editor', standalone: true, imports: [], providers: [GraphHistoryService], host: {
                         'tabindex': '0',
                         'style': 'outline: none;',
                         '(keydown)': 'onKeyDown($event)'
-                    }, template: `
-    <div class="graph-editor-container">
-      <!-- Canvas with overlaid palette -->
-      <div class="graph-canvas-wrapper">
-        <!-- Top-left horizontal palette overlay -->
-        @if (config.palette?.enabled !== false) {
-          <div class="graph-palette-overlay">
-            <!-- Tools -->
-            <button
-              class="palette-item tool-item"
-              [class.active]="activeTool() === 'hand'"
-              title="Hand tool (move nodes)"
-              (click)="switchTool('hand')"
-            >
-              <span class="icon">✋</span>
-            </button>
-            <button
-              class="palette-item tool-item"
-              [class.active]="activeTool() === 'line'"
-              title="Line tool (draw connections)"
-              (click)="switchTool('line')"
-            >
-              <span class="icon">∕</span>
-            </button>
-
-            <!-- Divider -->
-            <div class="palette-divider"></div>
-
-            <!-- Node types -->
-            @for (nodeType of config.nodes.types; track nodeType.type) {
-              <button
-                class="palette-item"
-                [attr.data-node-type]="nodeType.type"
-                [attr.title]="nodeType.label || nodeType.type"
-                (click)="addNode(nodeType.type)"
-              >
-                <span class="icon">{{ nodeType.icon || '●' }}</span>
-              </button>
-            }
-          </div>
-        }
-
-        <svg
-          #canvasSvg
-          [class.tool-line]="activeTool() === 'line'"
-          [attr.width]="'100%'"
-          [attr.height]="'100%'"
-          (mousedown)="onCanvasMouseDown($event)"
-          (mousemove)="onCanvasMouseMove($event)"
-          (mouseup)="onCanvasMouseUp($event)"
-          (wheel)="onWheel($event)"
-          (contextmenu)="onContextMenu($event)"
-        >
-          <!-- Arrow marker definitions -->
-          <defs>
-            <marker id="arrow-end" viewBox="0 0 10 10" refX="9" refY="5"
-              markerWidth="8" markerHeight="8" orient="auto">
-              <path d="M 0 1 L 8 5 L 0 9 z" fill="#94a3b8"/>
-            </marker>
-            <marker id="arrow-end-selected" viewBox="0 0 10 10" refX="9" refY="5"
-              markerWidth="8" markerHeight="8" orient="auto">
-              <path d="M 0 1 L 8 5 L 0 9 z" fill="#3b82f6"/>
-            </marker>
-            <marker id="arrow-start" viewBox="0 0 10 10" refX="1" refY="5"
-              markerWidth="8" markerHeight="8" orient="auto">
-              <path d="M 10 1 L 2 5 L 10 9 z" fill="#94a3b8"/>
-            </marker>
-            <marker id="arrow-start-selected" viewBox="0 0 10 10" refX="1" refY="5"
-              markerWidth="8" markerHeight="8" orient="auto">
-              <path d="M 10 1 L 2 5 L 10 9 z" fill="#3b82f6"/>
-            </marker>
-          </defs>
-
-          <!-- Main transform group (pan + zoom) -->
-          <g [attr.transform]="transform()">
-            <!-- Grid (if enabled) -->
-            <!-- Grid (if enabled) - extended to cover viewport during pan -->
-            @if (config.canvas?.grid?.enabled) {
-              <defs>
-                <pattern
-                  id="grid"
-                  [attr.width]="config.canvas!.grid!.size"
-                  [attr.height]="config.canvas!.grid!.size"
-                  patternUnits="userSpaceOnUse"
-                >
-                  <path
-                    [attr.d]="'M ' + config.canvas!.grid!.size + ' 0 L 0 0 0 ' + config.canvas!.grid!.size"
-                    fill="none"
-                    [attr.stroke]="config.canvas!.grid!.color || '#e0e0e0'"
-                    stroke-width="1"
-                  />
-                </pattern>
-              </defs>
-              <!-- Extended grid background covering viewport + pan offset -->
-              <rect
-                [attr.x]="gridBounds().x"
-                [attr.y]="gridBounds().y"
-                [attr.width]="gridBounds().width"
-                [attr.height]="gridBounds().height"
-                fill="url(#grid)"
-              />
-            }
-
-            <!-- Layer 0.5: Preview line for line tool (rubber-band) -->
-            @if (previewLine()) {
-              <line
-                class="preview-line"
-                [attr.x1]="previewLine()!.source.x"
-                [attr.y1]="previewLine()!.source.y"
-                [attr.x2]="previewLine()!.target.x"
-                [attr.y2]="previewLine()!.target.y"
-                stroke="#3b82f6"
-                stroke-width="2.5"
-                stroke-dasharray="8,6"
-                stroke-linecap="round"
-                opacity="0.7"
-              />
-            }
-
-            <!-- Layer 1: Edge paths (behind everything) -->
-            @for (edge of internalGraph().edges; track edge.id) {
-              <!-- Edge shadow for depth (optional) -->
-              @if (shadowsEnabled()) {
-                <path
-                  class="edge-shadow"
-                  [attr.d]="getEdgePath(edge)"
-                  stroke="rgba(0,0,0,0.06)"
-                  stroke-width="6"
-                  fill="none"
-                  stroke-linecap="round"
-                  [attr.transform]="'translate(1, 2)'"
-                />
-              }
-              <!-- Invisible wide hit-area for easier clicking (hand tool only) -->
-              <path
-                [attr.d]="getEdgePath(edge)"
-                stroke="transparent"
-                [attr.stroke-width]="20"
-                fill="none"
-                class="edge-hit-area"
-                [attr.pointer-events]="activeTool() === 'hand' ? 'stroke' : 'none'"
-                (click)="onEdgeClick($event, edge)"
-                (dblclick)="onEdgeDoubleClick($event, edge)"
-              />
-              <!-- Visible edge line -->
-              <path
-                class="edge-line"
-                [attr.d]="getEdgePath(edge)"
-                [attr.stroke]="selection().edges.includes(edge.id) ? '#3b82f6' : '#94a3b8'"
-                [attr.stroke-width]="selection().edges.includes(edge.id) ? 2.5 : 2"
-                fill="none"
-                stroke-linecap="round"
-                [class.selected]="selection().edges.includes(edge.id)"
-                [attr.marker-end]="getEdgeMarkerEnd(edge)"
-                [attr.marker-start]="getEdgeMarkerStart(edge)"
-                pointer-events="none"
-              />
-            }
-
-            <!-- Layer 2: Nodes -->
-            @for (node of internalGraph().nodes; track node.id) {
-              <g
-                [attr.transform]="'translate(' + node.position.x + ',' + node.position.y + ')'"
-                class="graph-node"
-                [class.selected]="selection().nodes.includes(node.id)"
-                [attr.data-node-id]="node.id"
-                (mousedown)="onNodeMouseDown($event, node)"
-                (click)="onNodeClick($event, node)"
-                (dblclick)="nodeDoubleClick.emit(node)"
-              >
-                <!-- Node shadow (optional) -->
-                @if (shadowsEnabled()) {
-                  <rect
-                    class="node-shadow"
-                    [attr.width]="getNodeSize(node).width"
-                    [attr.height]="getNodeSize(node).height"
-                    fill="rgba(0,0,0,0.08)"
-                    rx="12"
-                    transform="translate(2, 3)"
-                    style="filter: blur(4px);"
-                  />
-                }
-                <!-- Node background -->
-                <rect
-                  class="node-bg"
-                  [attr.width]="getNodeSize(node).width"
-                  [attr.height]="getNodeSize(node).height"
-                  fill="white"
-                  [attr.stroke]="selection().nodes.includes(node.id) ? '#3b82f6' : '#e2e8f0'"
-                  [attr.stroke-width]="selection().nodes.includes(node.id) ? 2.5 : 1.5"
-                  rx="12"
-                />
-
-                <!-- Node type icon -->
-                <text
-                  class="node-icon"
-                  [attr.x]="getIconPosition(node).x"
-                  [attr.y]="getIconPosition(node).y"
-                  text-anchor="middle"
-                  dominant-baseline="middle"
-                  [attr.font-size]="getNodeSize(node).height * 0.28"
-                >
-                  {{ getNodeTypeIcon(node) }}
-                </text>
-
-                <!-- Node label -->
-                <text
-                  class="node-label"
-                  [attr.x]="getLabelPosition(node).x"
-                  [attr.y]="getLabelPosition(node).y"
-                  text-anchor="middle"
-                  dominant-baseline="middle"
-                  font-size="14"
-                  font-weight="500"
-                  fill="#1e293b"
-                >
-                  {{ node.data['name'] || node.type }}
-                </text>
-              </g>
-            }
-
-            <!-- Layer 3: Attachment points (on top of nodes) -->
-            @for (node of internalGraph().nodes; track node.id) {
-              @if (showAttachmentPoints() === node.id) {
-                <g [attr.transform]="'translate(' + node.position.x + ',' + node.position.y + ')'">
-                  @for (port of getNodePorts(node); track port.position) {
-                    <circle
-                      [attr.cx]="port.x"
-                      [attr.cy]="port.y"
-                      [attr.r]="hoveredPort?.nodeId === node.id && hoveredPort?.port === port.position ? 8 : 6"
-                      [attr.fill]="hoveredPort?.nodeId === node.id && hoveredPort?.port === port.position ? '#2563eb' : '#94a3b8'"
-                      stroke="white"
-                      stroke-width="2"
-                      class="attachment-point"
-                      [class.hovered]="hoveredPort?.nodeId === node.id && hoveredPort?.port === port.position"
-                      (mousedown)="$event.stopPropagation()"
-                      (click)="onAttachmentPointClick($event, node, port.position)"
-                    />
-                  }
-                </g>
-              }
-            }
-
-            <!-- Layer 4: Edge endpoints (only visible when edge is selected) -->
-            @for (edge of internalGraph().edges; track edge.id) {
-              @if (selection().edges.includes(edge.id)) {
-                <g>
-                  <!-- Source endpoint -->
-                  <circle
-                    [attr.cx]="getEdgeSourcePoint(edge).x"
-                    [attr.cy]="getEdgeSourcePoint(edge).y"
-                    r="6"
-                    fill="#3b82f6"
-                    stroke="white"
-                    stroke-width="2"
-                    class="edge-endpoint selected"
-                    (mousedown)="onEdgeEndpointMouseDown($event, edge, 'source')"
-                  />
-
-                  <!-- Target endpoint -->
-                  <circle
-                    [attr.cx]="getEdgeTargetPoint(edge).x"
-                    [attr.cy]="getEdgeTargetPoint(edge).y"
-                    r="6"
-                    fill="#3b82f6"
-                    stroke="white"
-                    stroke-width="2"
-                    class="edge-endpoint selected"
-                    (mousedown)="onEdgeEndpointMouseDown($event, edge, 'target')"
-                  />
-                </g>
-              }
-            }
-          </g>
-        </svg>
-      </div>
-
-      <!-- Edge direction selector overlay -->
-      @if (selectedEdgeMidpoint()) {
-        <div
-          class="edge-direction-selector"
-          [style.left.px]="selectedEdgeMidpoint()!.x"
-          [style.top.px]="selectedEdgeMidpoint()!.y"
-        >
-          <button
-            class="direction-btn"
-            [class.active]="selectedEdgeMidpoint()!.edge.direction === 'backward'"
-            title="Backward"
-            (click)="setEdgeDirection('backward')"
-          >←</button>
-          <button
-            class="direction-btn"
-            [class.active]="selectedEdgeMidpoint()!.edge.direction === 'bidirectional'"
-            title="Bidirectional"
-            (click)="setEdgeDirection('bidirectional')"
-          >↔</button>
-          <button
-            class="direction-btn"
-            [class.active]="!selectedEdgeMidpoint()!.edge.direction || selectedEdgeMidpoint()!.edge.direction === 'forward'"
-            title="Forward"
-            (click)="setEdgeDirection('forward')"
-          >→</button>
-        </div>
-      }
-      <!-- Validation errors -->
-      @if (validationResult() && !validationResult()!.valid) {
-        <div class="validation-panel">
-          <h4>Validation Errors</h4>
-          @for (error of validationResult()!.errors; track error.rule) {
-            <div class="error-item" [class.warning]="error.severity === 'warning'">
-              {{ error.message }}
-            </div>
-          }
-        </div>
-      }
-    </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".graph-editor-container{display:flex;width:100%;height:100%;position:relative;background:var(--graph-editor-canvas-bg, #f8f9fa)}.graph-palette-overlay{position:absolute;top:16px;left:16px;display:flex;gap:4px;z-index:10;background:#fffffff2;padding:6px;border-radius:var(--radius-md, 8px);box-shadow:0 2px 8px #0000001a;backdrop-filter:blur(4px)}.palette-item{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1.5px solid var(--neutral-200, #e5e7eb);border-radius:var(--radius-md, 8px);background:var(--white, #fff);color:var(--neutral-600, #4b5563);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .15s ease;font-size:20px}.palette-item:focus-visible{outline:2px solid var(--indigo-400, #818cf8);outline-offset:2px}.palette-item:hover{background:var(--neutral-50, #f9fafb);border-color:var(--interactive, #3b82f6);color:var(--interactive, #3b82f6);transform:translateY(-1px);box-shadow:0 2px 6px #00000014}.palette-item:active{transform:translateY(0);box-shadow:none}.palette-item.tool-item.active{background:var(--interactive, #3b82f6);border-color:var(--interactive, #3b82f6);color:#fff}.palette-item.tool-item.active:hover{background:var(--interactive-hover, #2563eb);border-color:var(--interactive-hover, #2563eb);color:#fff}.palette-divider{width:1px;background:var(--neutral-200, #e5e7eb);align-self:stretch;margin:4px 2px}.graph-canvas-wrapper{flex:1;position:relative;overflow:hidden}.graph-canvas{width:100%;height:100%;cursor:grab}.graph-canvas:active{cursor:grabbing}.graph-canvas.tool-line,.graph-canvas.tool-line .graph-node{cursor:crosshair}.graph-node{cursor:move;user-select:none;-webkit-user-select:none;transition:transform .1s ease-out}.graph-node:hover .node-bg{stroke:#cbd5e1}.graph-node text{pointer-events:none}.graph-node .node-label{font-family:system-ui,-apple-system,sans-serif}.graph-node.selected .node-bg{stroke:#3b82f6;filter:drop-shadow(0 4px 12px rgba(59,130,246,.25))}.edge-line{transition:stroke .15s,stroke-width .15s}.edge-line.selected{filter:drop-shadow(0 2px 4px rgba(59,130,246,.3))}.edge-hit-area{cursor:pointer}.edge-endpoint{cursor:pointer;transition:r .2s,fill .2s}.edge-endpoint:hover{r:8;fill:#2563eb}.edge-endpoint.selected{fill:#2563eb}.attachment-point{cursor:crosshair;transition:all .2s}.attachment-point.hovered{filter:drop-shadow(0 0 4px rgba(37,99,235,.6))}.validation-panel{position:absolute;bottom:0;left:0;right:0;max-height:200px;overflow-y:auto;background:#fff;border-top:1px solid #e5e7eb;padding:16px}.error-item{padding:8px 12px;margin-bottom:8px;background:#fee2e2;border-left:3px solid #ef4444;border-radius:4px;font-size:14px}.error-item.warning{background:#fef3c7;border-left-color:#f59e0b}.edge-direction-selector{position:absolute;transform:translate(-50%,-100%);margin-top:-12px;display:flex;gap:2px;background:#fffffff2;padding:4px;border-radius:6px;box-shadow:0 2px 8px #00000026;backdrop-filter:blur(4px);z-index:20;pointer-events:auto}.direction-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid #e5e7eb;border-radius:4px;background:#fff;cursor:pointer;font-size:16px;transition:all .15s;color:#6b7280}.direction-btn:hover{background:#f3f4f6;border-color:#3b82f6;color:#3b82f6}.direction-btn.active{background:#3b82f6;border-color:#3b82f6;color:#fff}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"graph-editor-container\">\n  <!-- Canvas with overlaid palette -->\n  <div class=\"graph-canvas-wrapper\">\n    <!-- Top-left horizontal palette overlay -->\n    @if (config.palette?.enabled !== false) {\n      <div class=\"graph-palette-overlay\">\n        <!-- Tools -->\n        <button\n          class=\"palette-item tool-item\"\n          [class.active]=\"activeTool() === 'hand'\"\n          title=\"Hand tool (move nodes)\"\n          (click)=\"switchTool('hand')\"\n        >\n          <span class=\"icon\">\u270B</span>\n        </button>\n        <button\n          class=\"palette-item tool-item\"\n          [class.active]=\"activeTool() === 'line'\"\n          title=\"Line tool (draw connections)\"\n          (click)=\"switchTool('line')\"\n        >\n          <span class=\"icon\">\u2215</span>\n        </button>\n\n        <!-- Divider -->\n        <div class=\"palette-divider\"></div>\n\n        <!-- Node types -->\n        @for (nodeType of config.nodes.types; track nodeType.type) {\n          <button\n            class=\"palette-item\"\n            [attr.data-node-type]=\"nodeType.type\"\n            [attr.title]=\"nodeType.label || nodeType.type\"\n            (click)=\"addNode(nodeType.type)\"\n          >\n            @if (nodeType.defaultData['imageUrl']) {\n              <img\n                class=\"palette-icon-img\"\n                [src]=\"nodeType.defaultData['imageUrl']\"\n                [alt]=\"nodeType.label || nodeType.type\"\n              />\n            } @else {\n              <span class=\"icon\">{{ nodeType.icon || '\u25CF' }}</span>\n            }\n          </button>\n        }\n      </div>\n    }\n\n    <svg\n      #canvasSvg\n      [class.tool-line]=\"activeTool() === 'line'\"\n      [attr.width]=\"'100%'\"\n      [attr.height]=\"'100%'\"\n      (mousedown)=\"onCanvasMouseDown($event)\"\n      (mousemove)=\"onCanvasMouseMove($event)\"\n      (mouseup)=\"onCanvasMouseUp($event)\"\n      (wheel)=\"onWheel($event)\"\n      (contextmenu)=\"onContextMenu($event)\"\n    >\n      <!-- Arrow marker definitions -->\n      <defs>\n        <marker id=\"arrow-end\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 0 1 L 8 5 L 0 9 z\" fill=\"#94a3b8\"/>\n        </marker>\n        <marker id=\"arrow-end-selected\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 0 1 L 8 5 L 0 9 z\" fill=\"#3b82f6\"/>\n        </marker>\n        <marker id=\"arrow-start\" viewBox=\"0 0 10 10\" refX=\"1\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 10 1 L 2 5 L 10 9 z\" fill=\"#94a3b8\"/>\n        </marker>\n        <marker id=\"arrow-start-selected\" viewBox=\"0 0 10 10\" refX=\"1\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 10 1 L 2 5 L 10 9 z\" fill=\"#3b82f6\"/>\n        </marker>\n      </defs>\n\n      <!-- Main transform group (pan + zoom) -->\n      <g [attr.transform]=\"transform()\">\n        <!-- Grid (if enabled) -->\n        <!-- Grid (if enabled) - extended to cover viewport during pan -->\n        @if (config.canvas?.grid?.enabled) {\n          <defs>\n            <pattern\n              id=\"grid\"\n              [attr.width]=\"config.canvas!.grid!.size\"\n              [attr.height]=\"config.canvas!.grid!.size\"\n              patternUnits=\"userSpaceOnUse\"\n            >\n              <path\n                [attr.d]=\"'M ' + config.canvas!.grid!.size + ' 0 L 0 0 0 ' + config.canvas!.grid!.size\"\n                fill=\"none\"\n                [attr.stroke]=\"config.canvas!.grid!.color || '#e0e0e0'\"\n                stroke-width=\"1\"\n              />\n            </pattern>\n          </defs>\n          <!-- Extended grid background covering viewport + pan offset -->\n          <rect\n            [attr.x]=\"gridBounds().x\"\n            [attr.y]=\"gridBounds().y\"\n            [attr.width]=\"gridBounds().width\"\n            [attr.height]=\"gridBounds().height\"\n            fill=\"url(#grid)\"\n          />\n        }\n\n        <!-- Layer 0.5: Preview line for line tool (rubber-band) -->\n        @if (previewLine()) {\n          <line\n            class=\"preview-line\"\n            [attr.x1]=\"previewLine()!.source.x\"\n            [attr.y1]=\"previewLine()!.source.y\"\n            [attr.x2]=\"previewLine()!.target.x\"\n            [attr.y2]=\"previewLine()!.target.y\"\n            stroke=\"#3b82f6\"\n            stroke-width=\"2.5\"\n            stroke-dasharray=\"8,6\"\n            stroke-linecap=\"round\"\n            opacity=\"0.7\"\n          />\n        }\n\n        <!-- Layer 1: Edge paths (behind everything) -->\n        @for (edge of internalGraph().edges; track edge.id) {\n          <!-- Edge shadow for depth (optional) -->\n          @if (shadowsEnabled()) {\n            <path\n              class=\"edge-shadow\"\n              [attr.d]=\"getEdgePath(edge)\"\n              stroke=\"rgba(0,0,0,0.06)\"\n              stroke-width=\"6\"\n              fill=\"none\"\n              stroke-linecap=\"round\"\n              [attr.transform]=\"'translate(1, 2)'\"\n            />\n          }\n          <!-- Invisible wide hit-area for easier clicking (hand tool only) -->\n          <path\n            [attr.d]=\"getEdgePath(edge)\"\n            stroke=\"transparent\"\n            [attr.stroke-width]=\"20\"\n            fill=\"none\"\n            class=\"edge-hit-area\"\n            [attr.pointer-events]=\"activeTool() === 'hand' ? 'stroke' : 'none'\"\n            (click)=\"onEdgeClick($event, edge)\"\n            (dblclick)=\"onEdgeDoubleClick($event, edge)\"\n          />\n          <!-- Visible edge line -->\n          <path\n            class=\"edge-line\"\n            [attr.d]=\"getEdgePath(edge)\"\n            [attr.stroke]=\"selection().edges.includes(edge.id) ? '#3b82f6' : '#94a3b8'\"\n            [attr.stroke-width]=\"selection().edges.includes(edge.id) ? 2.5 : 2\"\n            fill=\"none\"\n            stroke-linecap=\"round\"\n            [class.selected]=\"selection().edges.includes(edge.id)\"\n            [attr.marker-end]=\"getEdgeMarkerEnd(edge)\"\n            [attr.marker-start]=\"getEdgeMarkerStart(edge)\"\n            pointer-events=\"none\"\n          />\n        }\n\n        <!-- Layer 2: Nodes -->\n        @for (node of internalGraph().nodes; track node.id) {\n          <g\n            [attr.transform]=\"'translate(' + node.position.x + ',' + node.position.y + ')'\"\n            class=\"graph-node\"\n            [class.selected]=\"selection().nodes.includes(node.id)\"\n            [attr.data-node-id]=\"node.id\"\n            (mousedown)=\"onNodeMouseDown($event, node)\"\n            (click)=\"onNodeClick($event, node)\"\n            (dblclick)=\"nodeDoubleClick.emit(node)\"\n          >\n            <!-- Node shadow (optional) -->\n            @if (shadowsEnabled()) {\n              <rect\n                class=\"node-shadow\"\n                [attr.width]=\"getNodeSize(node).width\"\n                [attr.height]=\"getNodeSize(node).height\"\n                fill=\"rgba(0,0,0,0.08)\"\n                rx=\"12\"\n                transform=\"translate(2, 3)\"\n                style=\"filter: blur(4px);\"\n              />\n            }\n            <!-- Node background -->\n            <rect\n              class=\"node-bg\"\n              [attr.width]=\"getNodeSize(node).width\"\n              [attr.height]=\"getNodeSize(node).height\"\n              fill=\"white\"\n              [attr.stroke]=\"selection().nodes.includes(node.id) ? '#3b82f6' : '#e2e8f0'\"\n              [attr.stroke-width]=\"selection().nodes.includes(node.id) ? 2.5 : 1.5\"\n              rx=\"12\"\n            />\n\n            <!-- Node type icon (text/emoji) or custom image -->\n            @if (getNodeImage(node)) {\n              <image\n                class=\"node-image\"\n                [attr.href]=\"getNodeImage(node)\"\n                [attr.xlink:href]=\"getNodeImage(node)\"\n                [attr.x]=\"getImagePosition(node).x\"\n                [attr.y]=\"getImagePosition(node).y\"\n                [attr.width]=\"getImageSize(node)\"\n                [attr.height]=\"getImageSize(node)\"\n                preserveAspectRatio=\"xMidYMid meet\"\n              />\n            } @else {\n              <text\n                class=\"node-icon\"\n                [attr.x]=\"getIconPosition(node).x\"\n                [attr.y]=\"getIconPosition(node).y\"\n                text-anchor=\"middle\"\n                dominant-baseline=\"middle\"\n                [attr.font-size]=\"getNodeSize(node).height * 0.28\"\n              >\n                {{ getNodeTypeIcon(node) }}\n              </text>\n            }\n\n            <!-- Node label -->\n            <text\n              class=\"node-label\"\n              [attr.x]=\"getLabelPosition(node).x\"\n              [attr.y]=\"getLabelPosition(node).y\"\n              text-anchor=\"middle\"\n              dominant-baseline=\"middle\"\n              font-size=\"14\"\n              font-weight=\"500\"\n              fill=\"#1e293b\"\n            >\n              {{ node.data['name'] || node.type }}\n            </text>\n          </g>\n        }\n\n        <!-- Layer 3: Attachment points (on top of nodes) -->\n        @for (node of internalGraph().nodes; track node.id) {\n          @if (showAttachmentPoints() === node.id) {\n            <g [attr.transform]=\"'translate(' + node.position.x + ',' + node.position.y + ')'\">\n              @for (port of getNodePorts(node); track port.position) {\n                <circle\n                  [attr.cx]=\"port.x\"\n                  [attr.cy]=\"port.y\"\n                  [attr.r]=\"hoveredPort?.nodeId === node.id && hoveredPort?.port === port.position ? 8 : 6\"\n                  [attr.fill]=\"hoveredPort?.nodeId === node.id && hoveredPort?.port === port.position ? '#2563eb' : '#94a3b8'\"\n                  stroke=\"white\"\n                  stroke-width=\"2\"\n                  class=\"attachment-point\"\n                  [class.hovered]=\"hoveredPort?.nodeId === node.id && hoveredPort?.port === port.position\"\n                  (mousedown)=\"$event.stopPropagation()\"\n                  (click)=\"onAttachmentPointClick($event, node, port.position)\"\n                />\n              }\n            </g>\n          }\n        }\n\n        <!-- Layer 4: Edge endpoints (only visible when edge is selected) -->\n        @for (edge of internalGraph().edges; track edge.id) {\n          @if (selection().edges.includes(edge.id)) {\n            <g>\n              <!-- Source endpoint -->\n              <circle\n                [attr.cx]=\"getEdgeSourcePoint(edge).x\"\n                [attr.cy]=\"getEdgeSourcePoint(edge).y\"\n                r=\"6\"\n                fill=\"#3b82f6\"\n                stroke=\"white\"\n                stroke-width=\"2\"\n                class=\"edge-endpoint selected\"\n                (mousedown)=\"onEdgeEndpointMouseDown($event, edge, 'source')\"\n              />\n\n              <!-- Target endpoint -->\n              <circle\n                [attr.cx]=\"getEdgeTargetPoint(edge).x\"\n                [attr.cy]=\"getEdgeTargetPoint(edge).y\"\n                r=\"6\"\n                fill=\"#3b82f6\"\n                stroke=\"white\"\n                stroke-width=\"2\"\n                class=\"edge-endpoint selected\"\n                (mousedown)=\"onEdgeEndpointMouseDown($event, edge, 'target')\"\n              />\n            </g>\n          }\n        }\n\n        <!-- Layer 5: Selection box (Shift+drag) -->\n        @if (selectionBox()) {\n          <rect\n            class=\"selection-box\"\n            [attr.x]=\"selectionBox()!.x\"\n            [attr.y]=\"selectionBox()!.y\"\n            [attr.width]=\"selectionBox()!.width\"\n            [attr.height]=\"selectionBox()!.height\"\n            fill=\"rgba(59, 130, 246, 0.1)\"\n            stroke=\"#3b82f6\"\n            stroke-width=\"1\"\n            stroke-dasharray=\"4,2\"\n          />\n        }\n      </g>\n    </svg>\n  </div>\n\n  <!-- Edge direction selector overlay -->\n  @if (selectedEdgeMidpoint()) {\n    <div\n      class=\"edge-direction-selector\"\n      [style.left.px]=\"selectedEdgeMidpoint()!.x\"\n      [style.top.px]=\"selectedEdgeMidpoint()!.y\"\n    >\n      <button\n        class=\"direction-btn\"\n        [class.active]=\"selectedEdgeMidpoint()!.edge.direction === 'backward'\"\n        title=\"Backward\"\n        (click)=\"setEdgeDirection('backward')\"\n      >\u2190</button>\n      <button\n        class=\"direction-btn\"\n        [class.active]=\"selectedEdgeMidpoint()!.edge.direction === 'bidirectional'\"\n        title=\"Bidirectional\"\n        (click)=\"setEdgeDirection('bidirectional')\"\n      >\u2194</button>\n      <button\n        class=\"direction-btn\"\n        [class.active]=\"!selectedEdgeMidpoint()!.edge.direction || selectedEdgeMidpoint()!.edge.direction === 'forward'\"\n        title=\"Forward\"\n        (click)=\"setEdgeDirection('forward')\"\n      >\u2192</button>\n    </div>\n  }\n  <!-- Validation errors -->\n  @if (validationResult() && !validationResult()!.valid) {\n    <div class=\"validation-panel\">\n      <h4>Validation Errors</h4>\n      @for (error of validationResult()!.errors; track error.rule) {\n        <div class=\"error-item\" [class.warning]=\"error.severity === 'warning'\">\n          {{ error.message }}\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".graph-editor-container{display:flex;width:100%;height:100%;position:relative;background:var(--graph-editor-canvas-bg, #f8f9fa)}.graph-palette-overlay{position:absolute;top:16px;left:16px;display:flex;gap:4px;z-index:10;background:#fffffff2;padding:6px;border-radius:var(--radius-md, 8px);box-shadow:0 2px 8px #0000001a;backdrop-filter:blur(4px)}.palette-item{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1.5px solid var(--neutral-200, #e5e7eb);border-radius:var(--radius-md, 8px);background:var(--white, #fff);color:var(--neutral-600, #4b5563);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .15s ease;font-size:20px}.palette-icon-img{width:24px;height:24px;object-fit:contain}.palette-item:focus-visible{outline:2px solid var(--indigo-400, #818cf8);outline-offset:2px}.palette-item:hover{background:var(--neutral-50, #f9fafb);border-color:var(--interactive, #3b82f6);color:var(--interactive, #3b82f6);transform:translateY(-1px);box-shadow:0 2px 6px #00000014}.palette-item:active{transform:translateY(0);box-shadow:none}.palette-item.tool-item.active{background:var(--interactive, #3b82f6);border-color:var(--interactive, #3b82f6);color:#fff}.palette-item.tool-item.active:hover{background:var(--interactive-hover, #2563eb);border-color:var(--interactive-hover, #2563eb);color:#fff}.palette-divider{width:1px;background:var(--neutral-200, #e5e7eb);align-self:stretch;margin:4px 2px}.graph-canvas-wrapper{flex:1;position:relative;overflow:hidden}.graph-canvas{width:100%;height:100%;cursor:grab}.graph-canvas:active{cursor:grabbing}.graph-canvas.tool-line,.graph-canvas.tool-line .graph-node{cursor:crosshair}.graph-node{cursor:move;user-select:none;-webkit-user-select:none;transition:transform .1s ease-out}.graph-node:hover .node-bg{stroke:#cbd5e1}.graph-node text{pointer-events:none}.graph-node .node-label{font-family:system-ui,-apple-system,sans-serif}.graph-node.selected .node-bg{stroke:#3b82f6;filter:drop-shadow(0 4px 12px rgba(59,130,246,.25))}.edge-line{transition:stroke .15s,stroke-width .15s}.edge-line.selected{filter:drop-shadow(0 2px 4px rgba(59,130,246,.3))}.edge-hit-area{cursor:pointer}.edge-endpoint{cursor:pointer;transition:r .2s,fill .2s}.edge-endpoint:hover{r:8;fill:#2563eb}.edge-endpoint.selected{fill:#2563eb}.attachment-point{cursor:crosshair;transition:all .2s}.attachment-point.hovered{filter:drop-shadow(0 0 4px rgba(37,99,235,.6))}.validation-panel{position:absolute;bottom:0;left:0;right:0;max-height:200px;overflow-y:auto;background:#fff;border-top:1px solid #e5e7eb;padding:16px}.error-item{padding:8px 12px;margin-bottom:8px;background:#fee2e2;border-left:3px solid #ef4444;border-radius:4px;font-size:14px}.error-item.warning{background:#fef3c7;border-left-color:#f59e0b}.edge-direction-selector{position:absolute;transform:translate(-50%,-100%);margin-top:-12px;display:flex;gap:2px;background:#fffffff2;padding:4px;border-radius:6px;box-shadow:0 2px 8px #00000026;backdrop-filter:blur(4px);z-index:20;pointer-events:auto}.direction-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid #e5e7eb;border-radius:4px;background:#fff;cursor:pointer;font-size:16px;transition:all .15s;color:#6b7280}.direction-btn:hover{background:#f3f4f6;border-color:#3b82f6;color:#3b82f6}.direction-btn.active{background:#3b82f6;border-color:#3b82f6;color:#fff}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input,
                 args: [{ required: true }]