@utisha/graph-editor 1.0.4 → 1.0.6

package/fesm2022/utisha-graph-editor.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, EventEmitter, viewChild, inject, computed, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { signal, Injectable, inject, TemplateRef, Directive, EventEmitter, viewChild, computed, contentChild, ElementRef, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
 
 /**
  * Service for managing undo/redo history of graph state.
@@ -122,6 +123,226 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
             type: Injectable
         }] });
 
+// ============================================================
+// Template directives
+// ============================================================
+/**
+ * Marks an `<ng-template>` as a custom HTML node renderer.
+ * Content is rendered inside an `<svg:foreignObject>` — write standard HTML/CSS.
+ *
+ * @example
+ * ```html
+ * <graph-editor [config]="config" [graph]="graph">
+ *   <ng-template geNodeHtml let-ctx>
+ *     <div class="my-node" [class.selected]="ctx.selected">
+ *       <div class="header">{{ ctx.type.label }}</div>
+ *       <div class="body">{{ ctx.node.data.name }}</div>
+ *     </div>
+ *   </ng-template>
+ * </graph-editor>
+ * ```
+ */
+class NodeHtmlTemplateDirective {
+    templateRef = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NodeHtmlTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: NodeHtmlTemplateDirective, isStandalone: true, selector: "ng-template[geNodeHtml]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NodeHtmlTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'ng-template[geNodeHtml]',
+                }]
+        }] });
+/**
+ * Marks an `<ng-template>` as a custom SVG node renderer.
+ * Content is rendered inside an `<svg:g>` — use `svg:` prefixed elements.
+ *
+ * @example
+ * ```html
+ * <graph-editor [config]="config" [graph]="graph">
+ *   <ng-template geNodeSvg let-ctx>
+ *     <svg:rect [attr.width]="ctx.width" [attr.height]="ctx.height"
+ *               rx="8" fill="white" stroke="#ccc" />
+ *     <svg:text x="10" y="24">{{ ctx.node.data.name }}</svg:text>
+ *   </ng-template>
+ * </graph-editor>
+ * ```
+ *
+ * **Important:** All SVG elements inside the template MUST use the `svg:` prefix
+ * (e.g. `<svg:rect>`, `<svg:text>`, `<svg:g>`).
+ */
+class NodeSvgTemplateDirective {
+    templateRef = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NodeSvgTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: NodeSvgTemplateDirective, isStandalone: true, selector: "ng-template[geNodeSvg]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NodeSvgTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'ng-template[geNodeSvg]',
+                }]
+        }] });
+/**
+ * Marks an `<ng-template>` as a custom edge renderer.
+ * Content is rendered inside an `<svg:g>` — use `svg:` prefixed elements.
+ * The library still handles the invisible hit-area and endpoint circles.
+ *
+ * @example
+ * ```html
+ * <graph-editor [config]="config" [graph]="graph">
+ *   <ng-template geEdge let-ctx>
+ *     <svg:path [attr.d]="ctx.path"
+ *               [attr.stroke]="ctx.selected ? 'blue' : 'gray'"
+ *               stroke-width="2" fill="none" />
+ *   </ng-template>
+ * </graph-editor>
+ * ```
+ */
+class EdgeTemplateDirective {
+    templateRef = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: EdgeTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: EdgeTemplateDirective, isStandalone: true, selector: "ng-template[geEdge]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: EdgeTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'ng-template[geEdge]',
+                }]
+        }] });
+
+/**
+ * Resolves a partial ThemeConfig into a complete ResolvedTheme with all defaults filled.
+ */
+function resolveTheme(theme) {
+    const selectionColor = theme?.selection?.color ?? '#3b82f6';
+    return {
+        shadows: theme?.shadows !== false,
+        canvas: {
+            background: theme?.canvas?.background ?? '#f8f9fa',
+            gridType: theme?.canvas?.gridType ?? 'line',
+            gridColor: theme?.canvas?.gridColor ?? '#e0e0e0',
+        },
+        node: {
+            background: theme?.node?.background ?? 'white',
+            borderColor: theme?.node?.borderColor ?? '#e2e8f0',
+            borderWidth: theme?.node?.borderWidth ?? 1.5,
+            borderRadius: theme?.node?.borderRadius ?? 12,
+            selectedBorderColor: theme?.node?.selectedBorderColor ?? selectionColor,
+            selectedBorderWidth: theme?.node?.selectedBorderWidth ?? 2.5,
+            shadowColor: theme?.node?.shadowColor ?? 'rgba(0,0,0,0.08)',
+            labelColor: theme?.node?.labelColor ?? '#1e293b',
+            labelFont: theme?.node?.labelFont ?? 'system-ui, -apple-system, sans-serif',
+            typeStyles: theme?.node?.typeStyles ?? {},
+        },
+        edge: {
+            stroke: theme?.edge?.stroke ?? '#94a3b8',
+            strokeWidth: theme?.edge?.strokeWidth ?? 2,
+            selectedStroke: theme?.edge?.selectedStroke ?? selectionColor,
+            selectedStrokeWidth: theme?.edge?.selectedStrokeWidth ?? 2.5,
+            markerColor: theme?.edge?.markerColor ?? '#94a3b8',
+            selectedMarkerColor: theme?.edge?.selectedMarkerColor ?? selectionColor,
+            pathType: theme?.edge?.pathType ?? 'straight',
+        },
+        port: {
+            fill: theme?.port?.fill ?? '#94a3b8',
+            stroke: theme?.port?.stroke ?? 'white',
+            strokeWidth: theme?.port?.strokeWidth ?? 2,
+            radius: theme?.port?.radius ?? 6,
+            hoverFill: theme?.port?.hoverFill ?? '#2563eb',
+            hoverRadius: theme?.port?.hoverRadius ?? 8,
+        },
+        selection: {
+            color: selectionColor,
+            boxFill: theme?.selection?.boxFill ?? `rgba(59, 130, 246, 0.1)`,
+            boxStroke: theme?.selection?.boxStroke ?? selectionColor,
+        },
+        font: {
+            family: theme?.font?.family ?? 'system-ui, -apple-system, sans-serif',
+            monoFamily: theme?.font?.monoFamily ?? 'monospace',
+        },
+        toolbar: resolveToolbar(theme?.toolbar, selectionColor),
+    };
+}
+function resolveToolbar(toolbar, selectionColor) {
+    return {
+        background: toolbar?.background ?? 'rgba(255, 255, 255, 0.95)',
+        borderRadius: toolbar?.borderRadius ?? 8,
+        shadow: toolbar?.shadow ?? '0 2px 8px rgba(0, 0, 0, 0.1)',
+        buttonBackground: toolbar?.buttonBackground ?? '#ffffff',
+        buttonBorderColor: toolbar?.buttonBorderColor ?? '#e5e7eb',
+        buttonTextColor: toolbar?.buttonTextColor ?? '#4b5563',
+        buttonHoverBackground: toolbar?.buttonHoverBackground ?? '#f9fafb',
+        buttonHoverAccent: toolbar?.buttonHoverAccent ?? selectionColor,
+        buttonActiveBackground: toolbar?.buttonActiveBackground ?? selectionColor,
+        buttonActiveTextColor: toolbar?.buttonActiveTextColor ?? '#ffffff',
+        dividerColor: toolbar?.dividerColor ?? '#e5e7eb',
+    };
+}
+/**
+ * Applies resolved theme values as CSS custom properties on a host element.
+ * This enables consumer templates to use `var(--ge-*)` in their CSS.
+ */
+function applyThemeCssProperties(host, t, userVars) {
+    const style = host.style;
+    // Canvas
+    style.setProperty('--ge-canvas-bg', t.canvas.background);
+    style.setProperty('--ge-grid-color', t.canvas.gridColor);
+    // Node
+    style.setProperty('--ge-node-bg', t.node.background);
+    style.setProperty('--ge-node-border', t.node.borderColor);
+    style.setProperty('--ge-node-border-width', `${t.node.borderWidth}px`);
+    style.setProperty('--ge-node-border-radius', `${t.node.borderRadius}px`);
+    style.setProperty('--ge-node-selected-border', t.node.selectedBorderColor);
+    style.setProperty('--ge-node-selected-border-width', `${t.node.selectedBorderWidth}px`);
+    style.setProperty('--ge-node-shadow', t.node.shadowColor);
+    style.setProperty('--ge-node-label-color', t.node.labelColor);
+    style.setProperty('--ge-node-label-font', t.node.labelFont);
+    // Edge
+    style.setProperty('--ge-edge-stroke', t.edge.stroke);
+    style.setProperty('--ge-edge-stroke-width', `${t.edge.strokeWidth}px`);
+    style.setProperty('--ge-edge-selected-stroke', t.edge.selectedStroke);
+    // Port
+    style.setProperty('--ge-port-fill', t.port.fill);
+    style.setProperty('--ge-port-hover-fill', t.port.hoverFill);
+    // Selection
+    style.setProperty('--ge-selection-color', t.selection.color);
+    // Font
+    style.setProperty('--ge-font-family', t.font.family);
+    style.setProperty('--ge-font-mono', t.font.monoFamily);
+    // Toolbar
+    style.setProperty('--ge-toolbar-bg', t.toolbar.background);
+    style.setProperty('--ge-toolbar-radius', `${t.toolbar.borderRadius}px`);
+    style.setProperty('--ge-toolbar-shadow', t.toolbar.shadow);
+    style.setProperty('--ge-toolbar-btn-bg', t.toolbar.buttonBackground);
+    style.setProperty('--ge-toolbar-btn-border', t.toolbar.buttonBorderColor);
+    style.setProperty('--ge-toolbar-btn-color', t.toolbar.buttonTextColor);
+    style.setProperty('--ge-toolbar-btn-hover-bg', t.toolbar.buttonHoverBackground);
+    style.setProperty('--ge-toolbar-btn-hover-accent', t.toolbar.buttonHoverAccent);
+    style.setProperty('--ge-toolbar-btn-active-bg', t.toolbar.buttonActiveBackground);
+    style.setProperty('--ge-toolbar-btn-active-color', t.toolbar.buttonActiveTextColor);
+    style.setProperty('--ge-toolbar-divider', t.toolbar.dividerColor);
+    // Backward compat: --graph-editor-canvas-bg
+    style.setProperty('--graph-editor-canvas-bg', t.canvas.background);
+    // User-provided custom variables
+    if (userVars) {
+        for (const [key, value] of Object.entries(userVars)) {
+            style.setProperty(key.startsWith('--') ? key : `--${key}`, value);
+        }
+    }
+}
+
 /**
  * Main graph editor component.
  *
@@ -208,8 +429,14 @@ class GraphEditorComponent {
             height: viewportHeight * 2
         };
     });
-    // Shadow configuration (defaults to true)
-    shadowsEnabled = computed(() => this.config.theme?.shadows !== false);
+    // Resolved theme (filled defaults)
+    resolvedTheme;
+    // Shadow configuration (derived from resolved theme)
+    shadowsEnabled = computed(() => this.resolvedTheme?.shadows ?? true);
+    // Template queries (signal-based contentChild)
+    nodeHtmlTemplate = contentChild(NodeHtmlTemplateDirective);
+    nodeSvgTemplate = contentChild(NodeSvgTemplateDirective);
+    edgeTemplate = contentChild(EdgeTemplateDirective);
     // Selected edge info for direction selector positioning
     selectedEdgeMidpoint = computed(() => {
         const sel = this.selection();
@@ -228,14 +455,25 @@ class GraphEditorComponent {
             y: midY * this.scale() + this.panY()
         };
     });
+    hostEl = inject(ElementRef);
     constructor() { }
     ngOnChanges(changes) {
         // Sync graph input to internal signal
         if (changes['graph'] && changes['graph'].currentValue) {
             this.internalGraph.set(structuredClone(changes['graph'].currentValue));
         }
+        // Re-resolve theme when config changes
+        if (changes['config']) {
+            this.resolvedTheme = resolveTheme(this.config.theme);
+            applyThemeCssProperties(this.hostEl.nativeElement, this.resolvedTheme, this.config.theme?.variables);
+        }
     }
     ngOnInit() {
+        // Resolve theme (first time, in case ngOnChanges didn't fire for config)
+        if (!this.resolvedTheme) {
+            this.resolvedTheme = resolveTheme(this.config.theme);
+            applyThemeCssProperties(this.hostEl.nativeElement, this.resolvedTheme, this.config.theme?.variables);
+        }
         // Initialize with current graph value
         if (this.graph) {
             this.internalGraph.set(structuredClone(this.graph));
@@ -652,6 +890,20 @@ class GraphEditorComponent {
         const max = zoomConfig?.max ?? 2.0;
         this.scale.set(Math.max(min, Math.min(max, level)));
     }
+    zoomIn() {
+        const zoomConfig = this.config.canvas?.zoom;
+        const step = zoomConfig?.step ?? 0.1;
+        const max = zoomConfig?.max ?? 2.0;
+        const newScale = Math.min(max, this.scale() + step);
+        this.scale.set(newScale);
+    }
+    zoomOut() {
+        const zoomConfig = this.config.canvas?.zoom;
+        const step = zoomConfig?.step ?? 0.1;
+        const min = zoomConfig?.min ?? 0.25;
+        const newScale = Math.max(min, this.scale() - step);
+        this.scale.set(newScale);
+    }
     getSelection() {
         return this.selection();
     }
@@ -1238,16 +1490,57 @@ class GraphEditorComponent {
         const targetNode = this.internalGraph().nodes.find(n => n.id === edge.target);
         if (!sourceNode || !targetNode)
             return '';
-        // Get port positions from edge or calculate closest
         const sourcePort = edge.sourcePort || this.findClosestPortForEdge(sourceNode, targetNode, 'source');
         const targetPort = edge.targetPort || this.findClosestPortForEdge(targetNode, sourceNode, 'target');
-        const sourcePoint = this.getPortWorldPosition(sourceNode, sourcePort);
-        const targetPoint = this.getPortWorldPosition(targetNode, targetPort);
-        // Simple straight line
-        return `M ${sourcePoint.x},${sourcePoint.y} L ${targetPoint.x},${targetPoint.y}`;
+        const s = this.getPortWorldPosition(sourceNode, sourcePort);
+        const t = this.getPortWorldPosition(targetNode, targetPort);
+        const pathType = this.resolvedTheme.edge.pathType;
+        if (pathType === 'bezier') {
+            const offset = Math.max(40, Math.abs(t.x - s.x) * 0.3, Math.abs(t.y - s.y) * 0.3);
+            const sc = this.getPortControlOffset(sourcePort, offset);
+            const tc = this.getPortControlOffset(targetPort, offset);
+            // Blend a small cross-axis component so the bezier tangent at endpoints
+            // isn't purely axis-aligned — this makes arrowheads follow the curve naturally.
+            const crossBias = 0.15;
+            const dx = t.x - s.x;
+            const dy = t.y - s.y;
+            const sc1x = s.x + sc.dx + (sc.dx !== 0 ? 0 : dx * crossBias);
+            const sc1y = s.y + sc.dy + (sc.dy !== 0 ? 0 : dy * crossBias);
+            const tc1x = t.x + tc.dx + (tc.dx !== 0 ? 0 : dx * -crossBias);
+            const tc1y = t.y + tc.dy + (tc.dy !== 0 ? 0 : dy * -crossBias);
+            return `M ${s.x},${s.y} C ${sc1x},${sc1y} ${tc1x},${tc1y} ${t.x},${t.y}`;
+        }
+        if (pathType === 'step') {
+            const midX = (s.x + t.x) / 2;
+            const midY = (s.y + t.y) / 2;
+            const isSourceVertical = sourcePort === 'top' || sourcePort === 'bottom';
+            const isTargetVertical = targetPort === 'top' || targetPort === 'bottom';
+            if (isSourceVertical && isTargetVertical) {
+                return `M ${s.x},${s.y} L ${s.x},${midY} L ${t.x},${midY} L ${t.x},${t.y}`;
+            }
+            else if (!isSourceVertical && !isTargetVertical) {
+                return `M ${s.x},${s.y} L ${midX},${s.y} L ${midX},${t.y} L ${t.x},${t.y}`;
+            }
+            else if (isSourceVertical) {
+                return `M ${s.x},${s.y} L ${s.x},${t.y} L ${t.x},${t.y}`;
+            }
+            else {
+                return `M ${s.x},${s.y} L ${t.x},${s.y} L ${t.x},${t.y}`;
+            }
+        }
+        return `M ${s.x},${s.y} L ${t.x},${t.y}`;
+    }
+    /** Get the control point offset direction for a port (used by bezier path). */
+    getPortControlOffset(port, offset) {
+        switch (port) {
+            case 'top': return { dx: 0, dy: -offset };
+            case 'bottom': return { dx: 0, dy: offset };
+            case 'left': return { dx: -offset, dy: 0 };
+            case 'right': return { dx: offset, dy: 0 };
+        }
     }
     getEdgeColor(edge) {
-        return edge.metadata?.style?.stroke || this.config.edges.style?.stroke || '#94a3b8';
+        return edge.metadata?.style?.stroke || this.resolvedTheme.edge.stroke;
     }
     getEdgeMarkerEnd(edge) {
         const dir = edge.direction || 'forward';
@@ -1364,6 +1657,29 @@ class GraphEditorComponent {
             .map(p => p.trim())
             .filter(p => p.length > 0);
     }
+    /**
+     * Split node types into columns for the palette.
+     * When there are too many node types to fit vertically, creates additional columns.
+     */
+    getPaletteColumns() {
+        const types = this.config.nodes.types;
+        if (!types || types.length === 0)
+            return [];
+        // Calculate available height for palette
+        // Top toolbar: 60px (12px top + 36px height + 12px gap)
+        // Bottom padding: 12px
+        // Each item: 40px (36px height + 4px gap)
+        const viewportHeight = typeof window !== 'undefined' ? window.innerHeight : 800;
+        const availableHeight = viewportHeight - 72 - 12 - 12; // toolbar + gaps + bottom padding
+        const itemHeight = 40;
+        const maxItemsPerColumn = Math.max(1, Math.floor(availableHeight / itemHeight));
+        // Split into columns
+        const columns = [];
+        for (let i = 0; i < types.length; i += maxItemsPerColumn) {
+            columns.push(types.slice(i, i + maxItemsPerColumn));
+        }
+        return columns;
+    }
     /**
      * Get the position for the node image (top-left corner of image).
      * Uses same positioning logic as icon but accounts for image dimensions.
@@ -1685,16 +2001,56 @@ class GraphEditorComponent {
             return dy > 0 ? 'bottom' : 'top';
         }
     }
+    /** Get the component type for a node (from NodeTypeDefinition.component, if set). */
+    getNodeComponent(node) {
+        const nodeConfig = this.config.nodes.types.find(t => t.type === node.type);
+        return nodeConfig?.component ?? null;
+    }
+    /** Build inputs map for ngComponentOutlet when rendering a node's custom component. */
+    getNodeComponentInputs(node) {
+        const size = this.getNodeSize(node);
+        return {
+            node,
+            selected: this.selection().nodes.includes(node.id),
+            width: size.width,
+            height: size.height,
+            config: this.config,
+        };
+    }
+    /** Build the template context for custom node templates. */
+    getNodeTemplateContext(node) {
+        const nodeConfig = this.config.nodes.types.find(t => t.type === node.type);
+        const size = this.getNodeSize(node);
+        return {
+            $implicit: {
+                node,
+                type: nodeConfig,
+                selected: this.selection().nodes.includes(node.id),
+                width: size.width,
+                height: size.height,
+            },
+        };
+    }
+    /** Build the template context for custom edge templates. */
+    getEdgeTemplateContext(edge) {
+        return {
+            $implicit: {
+                edge,
+                path: this.getEdgePath(edge),
+                selected: this.selection().edges.includes(edge.id),
+            },
+        };
+    }
     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;" }, 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.iconSvg) {\n              <svg\n                class=\"palette-icon-svg\"\n                [attr.viewBox]=\"nodeType.iconSvg.viewBox || '0 0 24 24'\"\n                [attr.fill]=\"nodeType.iconSvg.fill || 'none'\"\n                [attr.stroke]=\"nodeType.iconSvg.stroke || '#1D6A96'\"\n                [attr.stroke-width]=\"nodeType.iconSvg.strokeWidth || 2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                @for (pathData of splitIconPaths(nodeType.iconSvg.path); track $index) {\n                  <path [attr.d]=\"pathData\"/>\n                }\n              </svg>\n            } @else 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 (wrapped and auto-sized) -->\n            <text\n              class=\"node-label\"\n              [attr.x]=\"getLabelLineX(node)\"\n              text-anchor=\"middle\"\n              [attr.font-size]=\"getWrappedLabel(node).fontSize\"\n              font-weight=\"500\"\n              fill=\"#1e293b\"\n            >\n              @for (line of getWrappedLabel(node).lines; track $index) {\n                <tspan\n                  [attr.x]=\"getLabelLineX(node)\"\n                  [attr.y]=\"getLabelLineY(node, $index, getWrappedLabel(node).lines.length, getWrappedLabel(node).lineHeight)\"\n                >{{ line }}</tspan>\n              }\n            </text>\n\n            <!-- Resize handle (SE corner, visible when selected + hand tool) -->\n            @if (selection().nodes.includes(node.id) && activeTool() === 'hand' && selection().nodes.length === 1) {\n              <rect\n                class=\"resize-handle resize-handle-se\"\n                [attr.x]=\"getNodeSize(node).width - 8\"\n                [attr.y]=\"getNodeSize(node).height - 8\"\n                width=\"10\"\n                height=\"10\"\n                fill=\"#3b82f6\"\n                rx=\"2\"\n                cursor=\"se-resize\"\n                (mousedown)=\"onResizeHandleMouseDown($event, node)\"\n              />\n            }\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</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-icon-svg{width:22px;height:22px;flex-shrink:0}.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}.resize-handle{cursor:se-resize;opacity:.8;transition:opacity .15s,fill .15s}.resize-handle:hover{opacity:1;fill:#2563eb}\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], queries: [{ propertyName: "nodeHtmlTemplate", first: true, predicate: NodeHtmlTemplateDirective, descendants: true, isSignal: true }, { propertyName: "nodeSvgTemplate", first: true, predicate: NodeSvgTemplateDirective, descendants: true, isSignal: true }, { propertyName: "edgeTemplate", first: true, predicate: EdgeTemplateDirective, descendants: true, isSignal: true }], 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 horizontal toolbar -->\n    @if (config.palette?.enabled !== false) {\n      <div class=\"graph-toolbar-top\">\n        <!-- Tools -->\n        <button\n          class=\"toolbar-btn\"\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=\"toolbar-btn\"\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        <div class=\"toolbar-divider\"></div>\n\n        <!-- Zoom -->\n        <button\n          class=\"toolbar-btn\"\n          title=\"Zoom in\"\n          (click)=\"zoomIn()\"\n        >\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n            <path d=\"M21 21l-4.35-4.35M11 8v6M8 11h6\"/>\n          </svg>\n        </button>\n        <button\n          class=\"toolbar-btn\"\n          title=\"Zoom out\"\n          (click)=\"zoomOut()\"\n        >\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n            <path d=\"M21 21l-4.35-4.35M8 11h6\"/>\n          </svg>\n        </button>\n\n        <div class=\"toolbar-divider\"></div>\n\n        <!-- Actions -->\n        <button\n          class=\"toolbar-btn\"\n          title=\"Auto layout\"\n          (click)=\"applyLayout()\"\n        >\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/>\n            <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/>\n            <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"/>\n            <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"/>\n          </svg>\n        </button>\n        <button\n          class=\"toolbar-btn\"\n          title=\"Fit to screen\"\n          (click)=\"fitToScreen()\"\n        >\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"/>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Left vertical palette (node types) - supports multiple columns -->\n      <div class=\"graph-palette-container\">\n        @for (column of getPaletteColumns(); track $index) {\n          <div class=\"graph-palette-column\">\n            @for (nodeType of column; 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.iconSvg) {\n                  <svg\n                    class=\"palette-icon-svg\"\n                    [attr.viewBox]=\"nodeType.iconSvg.viewBox || '0 0 24 24'\"\n                    [attr.fill]=\"nodeType.iconSvg.fill || 'none'\"\n                    [attr.stroke]=\"nodeType.iconSvg.stroke || '#1D6A96'\"\n                    [attr.stroke-width]=\"nodeType.iconSvg.strokeWidth || 2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  >\n                    @for (pathData of splitIconPaths(nodeType.iconSvg.path); track $index) {\n                      <path [attr.d]=\"pathData\"/>\n                    }\n                  </svg>\n                } @else 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      </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=\"8\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 0 1 L 8 5 L 0 9 z\" [attr.fill]=\"resolvedTheme.edge.markerColor\"/>\n        </marker>\n        <marker id=\"arrow-end-selected\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 0 1 L 8 5 L 0 9 z\" [attr.fill]=\"resolvedTheme.edge.selectedMarkerColor\"/>\n        </marker>\n        <marker id=\"arrow-start\" viewBox=\"0 0 10 10\" refX=\"2\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 10 1 L 2 5 L 10 9 z\" [attr.fill]=\"resolvedTheme.edge.markerColor\"/>\n        </marker>\n        <marker id=\"arrow-start-selected\" viewBox=\"0 0 10 10\" refX=\"2\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 10 1 L 2 5 L 10 9 z\" [attr.fill]=\"resolvedTheme.edge.selectedMarkerColor\"/>\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            @if (resolvedTheme.canvas.gridType === 'dot') {\n              <pattern id=\"grid\" [attr.width]=\"config.canvas!.grid!.size\" [attr.height]=\"config.canvas!.grid!.size\" patternUnits=\"userSpaceOnUse\">\n                <circle [attr.cx]=\"config.canvas!.grid!.size / 2\" [attr.cy]=\"config.canvas!.grid!.size / 2\" r=\"1\" [attr.fill]=\"resolvedTheme.canvas.gridColor\" />\n              </pattern>\n            } @else {\n              <pattern id=\"grid\" [attr.width]=\"config.canvas!.grid!.size\" [attr.height]=\"config.canvas!.grid!.size\" patternUnits=\"userSpaceOnUse\">\n                <path [attr.d]=\"'M ' + config.canvas!.grid!.size + ' 0 L 0 0 0 ' + config.canvas!.grid!.size\" fill=\"none\" [attr.stroke]=\"resolvedTheme.canvas.gridColor\" stroke-width=\"1\" />\n              </pattern>\n            }\n          </defs>\n          <rect [attr.x]=\"gridBounds().x\" [attr.y]=\"gridBounds().y\" [attr.width]=\"gridBounds().width\" [attr.height]=\"gridBounds().height\" fill=\"url(#grid)\" />\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            [attr.stroke]=\"resolvedTheme.selection.color\"\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          @if (edgeTemplate()?.templateRef) {\n            <ng-container [ngTemplateOutlet]=\"edgeTemplate()!.templateRef\" [ngTemplateOutletContext]=\"getEdgeTemplateContext(edge)\" />\n          } @else {\n            <path class=\"edge-line\" [attr.d]=\"getEdgePath(edge)\"\n              [attr.stroke]=\"selection().edges.includes(edge.id) ? resolvedTheme.edge.selectedStroke : resolvedTheme.edge.stroke\"\n              [attr.stroke-width]=\"selection().edges.includes(edge.id) ? resolvedTheme.edge.selectedStrokeWidth : resolvedTheme.edge.strokeWidth\"\n              fill=\"none\" stroke-linecap=\"round\" [class.selected]=\"selection().edges.includes(edge.id)\"\n              [attr.marker-end]=\"getEdgeMarkerEnd(edge)\" [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            <!-- Priority: nodeHtmlTemplate > nodeSvgTemplate > component > default -->\n            @if (nodeHtmlTemplate()?.templateRef) {\n              <foreignObject [attr.width]=\"getNodeSize(node).width\" [attr.height]=\"getNodeSize(node).height\">\n                <ng-container [ngTemplateOutlet]=\"nodeHtmlTemplate()!.templateRef\" [ngTemplateOutletContext]=\"getNodeTemplateContext(node)\" />\n              </foreignObject>\n            } @else if (nodeSvgTemplate()?.templateRef) {\n              <ng-container [ngTemplateOutlet]=\"nodeSvgTemplate()!.templateRef\" [ngTemplateOutletContext]=\"getNodeTemplateContext(node)\" />\n            } @else if (getNodeComponent(node)) {\n              <foreignObject [attr.width]=\"getNodeSize(node).width\" [attr.height]=\"getNodeSize(node).height\">\n                <ng-container *ngComponentOutlet=\"getNodeComponent(node)!; inputs: getNodeComponentInputs(node)\" />\n              </foreignObject>\n            } @else {\n              <!-- Default built-in rendering (same as before but with resolvedTheme) -->\n              @if (shadowsEnabled()) {\n                <rect class=\"node-shadow\" [attr.width]=\"getNodeSize(node).width\" [attr.height]=\"getNodeSize(node).height\"\n                  [attr.fill]=\"resolvedTheme.node.shadowColor\" [attr.rx]=\"resolvedTheme.node.borderRadius\"\n                  transform=\"translate(2, 3)\" style=\"filter: blur(4px);\" />\n              }\n              <rect class=\"node-bg\" [attr.width]=\"getNodeSize(node).width\" [attr.height]=\"getNodeSize(node).height\"\n                [attr.fill]=\"resolvedTheme.node.background\"\n                [attr.stroke]=\"selection().nodes.includes(node.id) ? resolvedTheme.node.selectedBorderColor : resolvedTheme.node.borderColor\"\n                [attr.stroke-width]=\"selection().nodes.includes(node.id) ? resolvedTheme.node.selectedBorderWidth : resolvedTheme.node.borderWidth\"\n                [attr.rx]=\"resolvedTheme.node.borderRadius\" />\n              @if (getNodeImage(node)) {\n                <image class=\"node-image\" [attr.href]=\"getNodeImage(node)\" [attr.xlink:href]=\"getNodeImage(node)\"\n                  [attr.x]=\"getImagePosition(node).x\" [attr.y]=\"getImagePosition(node).y\"\n                  [attr.width]=\"getImageSize(node)\" [attr.height]=\"getImageSize(node)\"\n                  preserveAspectRatio=\"xMidYMid meet\" />\n              } @else {\n                <text class=\"node-icon\" [attr.x]=\"getIconPosition(node).x\" [attr.y]=\"getIconPosition(node).y\"\n                  text-anchor=\"middle\" dominant-baseline=\"middle\" [attr.font-size]=\"getNodeSize(node).height * 0.28\">\n                  {{ getNodeTypeIcon(node) }}\n                </text>\n              }\n              <text class=\"node-label\" [attr.x]=\"getLabelLineX(node)\" text-anchor=\"middle\"\n                [attr.font-size]=\"getWrappedLabel(node).fontSize\" font-weight=\"500\" [attr.fill]=\"resolvedTheme.node.labelColor\">\n                @for (line of getWrappedLabel(node).lines; track $index) {\n                  <tspan [attr.x]=\"getLabelLineX(node)\"\n                    [attr.y]=\"getLabelLineY(node, $index, getWrappedLabel(node).lines.length, getWrappedLabel(node).lineHeight)\">{{ line }}</tspan>\n                }\n              </text>\n              @if (selection().nodes.includes(node.id) && activeTool() === 'hand' && selection().nodes.length === 1) {\n                <rect class=\"resize-handle resize-handle-se\" [attr.x]=\"getNodeSize(node).width - 8\" [attr.y]=\"getNodeSize(node).height - 8\"\n                  width=\"10\" height=\"10\" [attr.fill]=\"resolvedTheme.selection.color\" rx=\"2\" cursor=\"se-resize\"\n                  (mousedown)=\"onResizeHandleMouseDown($event, node)\" />\n              }\n            }\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 ? resolvedTheme.port.hoverRadius : resolvedTheme.port.radius\"\n                  [attr.fill]=\"hoveredPort?.nodeId === node.id && hoveredPort?.port === port.position ? resolvedTheme.port.hoverFill : resolvedTheme.port.fill\"\n                  [attr.stroke]=\"resolvedTheme.port.stroke\"\n                  [attr.stroke-width]=\"resolvedTheme.port.strokeWidth\"\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                [attr.fill]=\"resolvedTheme.selection.color\"\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                [attr.fill]=\"resolvedTheme.selection.color\"\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            [attr.fill]=\"resolvedTheme.selection.boxFill\"\n            [attr.stroke]=\"resolvedTheme.selection.boxStroke\"\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</div>\n", styles: [".graph-editor-container{display:flex;width:100%;height:100%;position:relative;background:var(--graph-editor-canvas-bg, #f8f9fa)}.graph-toolbar-top{position:absolute;top:12px;left:12px;display:flex;gap:4px;z-index:10;background:var(--ge-toolbar-bg, rgba(255, 255, 255, .95));padding:6px;border-radius:var(--ge-toolbar-radius, 8px);box-shadow:var(--ge-toolbar-shadow, 0 2px 8px rgba(0, 0, 0, .1));backdrop-filter:blur(4px)}.toolbar-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1.5px solid var(--ge-toolbar-btn-border, #e5e7eb);border-radius:var(--ge-toolbar-radius, 8px);background:var(--ge-toolbar-btn-bg, #fff);color:var(--ge-toolbar-btn-color, #4b5563);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .15s ease;font-size:18px}.toolbar-btn:focus-visible{outline:2px solid var(--indigo-400, #818cf8);outline-offset:2px}.toolbar-btn:hover{background:var(--ge-toolbar-btn-hover-bg, #f9fafb);border-color:var(--ge-toolbar-btn-hover-accent, #3b82f6);color:var(--ge-toolbar-btn-hover-accent, #3b82f6)}.toolbar-btn:active{transform:translateY(0);box-shadow:none}.toolbar-btn.active{background:var(--ge-toolbar-btn-active-bg, #3b82f6);border-color:var(--ge-toolbar-btn-active-bg, #3b82f6);color:var(--ge-toolbar-btn-active-color, white)}.toolbar-btn.active:hover{background:color-mix(in srgb,var(--ge-toolbar-btn-active-bg, #3b82f6) 85%,black);border-color:color-mix(in srgb,var(--ge-toolbar-btn-active-bg, #3b82f6) 85%,black);color:var(--ge-toolbar-btn-active-color, white)}.toolbar-divider{width:1px;background:var(--ge-toolbar-divider, #e5e7eb);align-self:stretch;margin:4px 2px}.graph-palette-container{position:absolute;top:72px;left:12px;display:flex;flex-direction:row;gap:8px;z-index:10}.graph-palette-column{display:flex;flex-direction:column;gap:4px;background:var(--ge-toolbar-bg, rgba(255, 255, 255, .95));padding:6px;border-radius:var(--ge-toolbar-radius, 8px);box-shadow:var(--ge-toolbar-shadow, 0 2px 8px rgba(0, 0, 0, .1));backdrop-filter:blur(4px)}.palette-item{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1.5px solid var(--ge-toolbar-btn-border, #e5e7eb);border-radius:var(--ge-toolbar-radius, 8px);background:var(--ge-toolbar-btn-bg, #fff);color:var(--ge-toolbar-btn-color, #4b5563);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .15s ease;font-size:18px}.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:var(--ge-node-border, #cbd5e1)}.graph-node text{pointer-events:none}.graph-node .node-label{font-family:var(--ge-font-family, system-ui, -apple-system, sans-serif)}.graph-node.selected .node-bg{stroke:var(--ge-selection-color, #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:var(--ge-selection-color, #3b82f6)}.edge-endpoint.selected{fill:var(--ge-selection-color, #3b82f6)}.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:var(--ge-toolbar-bg, rgba(255, 255, 255, .95));padding:4px;border-radius:calc(var(--ge-toolbar-radius, 8px) * .75);box-shadow:var(--ge-toolbar-shadow, 0 2px 8px rgba(0, 0, 0, .15));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 var(--ge-toolbar-btn-border, #e5e7eb);border-radius:calc(var(--ge-toolbar-radius, 8px) * .5);background:var(--ge-toolbar-btn-bg, white);cursor:pointer;font-size:16px;transition:all .15s;color:var(--ge-toolbar-btn-color, #6b7280)}.direction-btn:hover{background:var(--ge-toolbar-btn-hover-bg, #f3f4f6);border-color:var(--ge-toolbar-btn-hover-accent, #3b82f6);color:var(--ge-toolbar-btn-hover-accent, #3b82f6)}.direction-btn.active{background:var(--ge-toolbar-btn-active-bg, #3b82f6);border-color:var(--ge-toolbar-btn-active-bg, #3b82f6);color:var(--ge-toolbar-btn-active-color, white)}.resize-handle{cursor:se-resize;opacity:.8;transition:opacity .15s,fill .15s}.resize-handle:hover{opacity:1;fill:var(--ge-selection-color, #3b82f6)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], 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: [], providers: [GraphHistoryService], host: {
+            args: [{ selector: 'graph-editor', standalone: true, imports: [NgTemplateOutlet, NgComponentOutlet], providers: [GraphHistoryService], host: {
                         'tabindex': '0',
                         'style': 'outline: none;',
                         '(keydown)': 'onKeyDown($event)'
-                    }, 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.iconSvg) {\n              <svg\n                class=\"palette-icon-svg\"\n                [attr.viewBox]=\"nodeType.iconSvg.viewBox || '0 0 24 24'\"\n                [attr.fill]=\"nodeType.iconSvg.fill || 'none'\"\n                [attr.stroke]=\"nodeType.iconSvg.stroke || '#1D6A96'\"\n                [attr.stroke-width]=\"nodeType.iconSvg.strokeWidth || 2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                @for (pathData of splitIconPaths(nodeType.iconSvg.path); track $index) {\n                  <path [attr.d]=\"pathData\"/>\n                }\n              </svg>\n            } @else 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 (wrapped and auto-sized) -->\n            <text\n              class=\"node-label\"\n              [attr.x]=\"getLabelLineX(node)\"\n              text-anchor=\"middle\"\n              [attr.font-size]=\"getWrappedLabel(node).fontSize\"\n              font-weight=\"500\"\n              fill=\"#1e293b\"\n            >\n              @for (line of getWrappedLabel(node).lines; track $index) {\n                <tspan\n                  [attr.x]=\"getLabelLineX(node)\"\n                  [attr.y]=\"getLabelLineY(node, $index, getWrappedLabel(node).lines.length, getWrappedLabel(node).lineHeight)\"\n                >{{ line }}</tspan>\n              }\n            </text>\n\n            <!-- Resize handle (SE corner, visible when selected + hand tool) -->\n            @if (selection().nodes.includes(node.id) && activeTool() === 'hand' && selection().nodes.length === 1) {\n              <rect\n                class=\"resize-handle resize-handle-se\"\n                [attr.x]=\"getNodeSize(node).width - 8\"\n                [attr.y]=\"getNodeSize(node).height - 8\"\n                width=\"10\"\n                height=\"10\"\n                fill=\"#3b82f6\"\n                rx=\"2\"\n                cursor=\"se-resize\"\n                (mousedown)=\"onResizeHandleMouseDown($event, node)\"\n              />\n            }\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</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-icon-svg{width:22px;height:22px;flex-shrink:0}.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}.resize-handle{cursor:se-resize;opacity:.8;transition:opacity .15s,fill .15s}.resize-handle:hover{opacity:1;fill:#2563eb}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"graph-editor-container\">\n  <!-- Canvas with overlaid palette -->\n  <div class=\"graph-canvas-wrapper\">\n    <!-- Top horizontal toolbar -->\n    @if (config.palette?.enabled !== false) {\n      <div class=\"graph-toolbar-top\">\n        <!-- Tools -->\n        <button\n          class=\"toolbar-btn\"\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=\"toolbar-btn\"\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        <div class=\"toolbar-divider\"></div>\n\n        <!-- Zoom -->\n        <button\n          class=\"toolbar-btn\"\n          title=\"Zoom in\"\n          (click)=\"zoomIn()\"\n        >\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n            <path d=\"M21 21l-4.35-4.35M11 8v6M8 11h6\"/>\n          </svg>\n        </button>\n        <button\n          class=\"toolbar-btn\"\n          title=\"Zoom out\"\n          (click)=\"zoomOut()\"\n        >\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n            <path d=\"M21 21l-4.35-4.35M8 11h6\"/>\n          </svg>\n        </button>\n\n        <div class=\"toolbar-divider\"></div>\n\n        <!-- Actions -->\n        <button\n          class=\"toolbar-btn\"\n          title=\"Auto layout\"\n          (click)=\"applyLayout()\"\n        >\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/>\n            <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/>\n            <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"/>\n            <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"/>\n          </svg>\n        </button>\n        <button\n          class=\"toolbar-btn\"\n          title=\"Fit to screen\"\n          (click)=\"fitToScreen()\"\n        >\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"/>\n          </svg>\n        </button>\n      </div>\n\n      <!-- Left vertical palette (node types) - supports multiple columns -->\n      <div class=\"graph-palette-container\">\n        @for (column of getPaletteColumns(); track $index) {\n          <div class=\"graph-palette-column\">\n            @for (nodeType of column; 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.iconSvg) {\n                  <svg\n                    class=\"palette-icon-svg\"\n                    [attr.viewBox]=\"nodeType.iconSvg.viewBox || '0 0 24 24'\"\n                    [attr.fill]=\"nodeType.iconSvg.fill || 'none'\"\n                    [attr.stroke]=\"nodeType.iconSvg.stroke || '#1D6A96'\"\n                    [attr.stroke-width]=\"nodeType.iconSvg.strokeWidth || 2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  >\n                    @for (pathData of splitIconPaths(nodeType.iconSvg.path); track $index) {\n                      <path [attr.d]=\"pathData\"/>\n                    }\n                  </svg>\n                } @else 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      </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=\"8\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 0 1 L 8 5 L 0 9 z\" [attr.fill]=\"resolvedTheme.edge.markerColor\"/>\n        </marker>\n        <marker id=\"arrow-end-selected\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 0 1 L 8 5 L 0 9 z\" [attr.fill]=\"resolvedTheme.edge.selectedMarkerColor\"/>\n        </marker>\n        <marker id=\"arrow-start\" viewBox=\"0 0 10 10\" refX=\"2\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 10 1 L 2 5 L 10 9 z\" [attr.fill]=\"resolvedTheme.edge.markerColor\"/>\n        </marker>\n        <marker id=\"arrow-start-selected\" viewBox=\"0 0 10 10\" refX=\"2\" refY=\"5\"\n          markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\">\n          <path d=\"M 10 1 L 2 5 L 10 9 z\" [attr.fill]=\"resolvedTheme.edge.selectedMarkerColor\"/>\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            @if (resolvedTheme.canvas.gridType === 'dot') {\n              <pattern id=\"grid\" [attr.width]=\"config.canvas!.grid!.size\" [attr.height]=\"config.canvas!.grid!.size\" patternUnits=\"userSpaceOnUse\">\n                <circle [attr.cx]=\"config.canvas!.grid!.size / 2\" [attr.cy]=\"config.canvas!.grid!.size / 2\" r=\"1\" [attr.fill]=\"resolvedTheme.canvas.gridColor\" />\n              </pattern>\n            } @else {\n              <pattern id=\"grid\" [attr.width]=\"config.canvas!.grid!.size\" [attr.height]=\"config.canvas!.grid!.size\" patternUnits=\"userSpaceOnUse\">\n                <path [attr.d]=\"'M ' + config.canvas!.grid!.size + ' 0 L 0 0 0 ' + config.canvas!.grid!.size\" fill=\"none\" [attr.stroke]=\"resolvedTheme.canvas.gridColor\" stroke-width=\"1\" />\n              </pattern>\n            }\n          </defs>\n          <rect [attr.x]=\"gridBounds().x\" [attr.y]=\"gridBounds().y\" [attr.width]=\"gridBounds().width\" [attr.height]=\"gridBounds().height\" fill=\"url(#grid)\" />\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            [attr.stroke]=\"resolvedTheme.selection.color\"\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          @if (edgeTemplate()?.templateRef) {\n            <ng-container [ngTemplateOutlet]=\"edgeTemplate()!.templateRef\" [ngTemplateOutletContext]=\"getEdgeTemplateContext(edge)\" />\n          } @else {\n            <path class=\"edge-line\" [attr.d]=\"getEdgePath(edge)\"\n              [attr.stroke]=\"selection().edges.includes(edge.id) ? resolvedTheme.edge.selectedStroke : resolvedTheme.edge.stroke\"\n              [attr.stroke-width]=\"selection().edges.includes(edge.id) ? resolvedTheme.edge.selectedStrokeWidth : resolvedTheme.edge.strokeWidth\"\n              fill=\"none\" stroke-linecap=\"round\" [class.selected]=\"selection().edges.includes(edge.id)\"\n              [attr.marker-end]=\"getEdgeMarkerEnd(edge)\" [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            <!-- Priority: nodeHtmlTemplate > nodeSvgTemplate > component > default -->\n            @if (nodeHtmlTemplate()?.templateRef) {\n              <foreignObject [attr.width]=\"getNodeSize(node).width\" [attr.height]=\"getNodeSize(node).height\">\n                <ng-container [ngTemplateOutlet]=\"nodeHtmlTemplate()!.templateRef\" [ngTemplateOutletContext]=\"getNodeTemplateContext(node)\" />\n              </foreignObject>\n            } @else if (nodeSvgTemplate()?.templateRef) {\n              <ng-container [ngTemplateOutlet]=\"nodeSvgTemplate()!.templateRef\" [ngTemplateOutletContext]=\"getNodeTemplateContext(node)\" />\n            } @else if (getNodeComponent(node)) {\n              <foreignObject [attr.width]=\"getNodeSize(node).width\" [attr.height]=\"getNodeSize(node).height\">\n                <ng-container *ngComponentOutlet=\"getNodeComponent(node)!; inputs: getNodeComponentInputs(node)\" />\n              </foreignObject>\n            } @else {\n              <!-- Default built-in rendering (same as before but with resolvedTheme) -->\n              @if (shadowsEnabled()) {\n                <rect class=\"node-shadow\" [attr.width]=\"getNodeSize(node).width\" [attr.height]=\"getNodeSize(node).height\"\n                  [attr.fill]=\"resolvedTheme.node.shadowColor\" [attr.rx]=\"resolvedTheme.node.borderRadius\"\n                  transform=\"translate(2, 3)\" style=\"filter: blur(4px);\" />\n              }\n              <rect class=\"node-bg\" [attr.width]=\"getNodeSize(node).width\" [attr.height]=\"getNodeSize(node).height\"\n                [attr.fill]=\"resolvedTheme.node.background\"\n                [attr.stroke]=\"selection().nodes.includes(node.id) ? resolvedTheme.node.selectedBorderColor : resolvedTheme.node.borderColor\"\n                [attr.stroke-width]=\"selection().nodes.includes(node.id) ? resolvedTheme.node.selectedBorderWidth : resolvedTheme.node.borderWidth\"\n                [attr.rx]=\"resolvedTheme.node.borderRadius\" />\n              @if (getNodeImage(node)) {\n                <image class=\"node-image\" [attr.href]=\"getNodeImage(node)\" [attr.xlink:href]=\"getNodeImage(node)\"\n                  [attr.x]=\"getImagePosition(node).x\" [attr.y]=\"getImagePosition(node).y\"\n                  [attr.width]=\"getImageSize(node)\" [attr.height]=\"getImageSize(node)\"\n                  preserveAspectRatio=\"xMidYMid meet\" />\n              } @else {\n                <text class=\"node-icon\" [attr.x]=\"getIconPosition(node).x\" [attr.y]=\"getIconPosition(node).y\"\n                  text-anchor=\"middle\" dominant-baseline=\"middle\" [attr.font-size]=\"getNodeSize(node).height * 0.28\">\n                  {{ getNodeTypeIcon(node) }}\n                </text>\n              }\n              <text class=\"node-label\" [attr.x]=\"getLabelLineX(node)\" text-anchor=\"middle\"\n                [attr.font-size]=\"getWrappedLabel(node).fontSize\" font-weight=\"500\" [attr.fill]=\"resolvedTheme.node.labelColor\">\n                @for (line of getWrappedLabel(node).lines; track $index) {\n                  <tspan [attr.x]=\"getLabelLineX(node)\"\n                    [attr.y]=\"getLabelLineY(node, $index, getWrappedLabel(node).lines.length, getWrappedLabel(node).lineHeight)\">{{ line }}</tspan>\n                }\n              </text>\n              @if (selection().nodes.includes(node.id) && activeTool() === 'hand' && selection().nodes.length === 1) {\n                <rect class=\"resize-handle resize-handle-se\" [attr.x]=\"getNodeSize(node).width - 8\" [attr.y]=\"getNodeSize(node).height - 8\"\n                  width=\"10\" height=\"10\" [attr.fill]=\"resolvedTheme.selection.color\" rx=\"2\" cursor=\"se-resize\"\n                  (mousedown)=\"onResizeHandleMouseDown($event, node)\" />\n              }\n            }\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 ? resolvedTheme.port.hoverRadius : resolvedTheme.port.radius\"\n                  [attr.fill]=\"hoveredPort?.nodeId === node.id && hoveredPort?.port === port.position ? resolvedTheme.port.hoverFill : resolvedTheme.port.fill\"\n                  [attr.stroke]=\"resolvedTheme.port.stroke\"\n                  [attr.stroke-width]=\"resolvedTheme.port.strokeWidth\"\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                [attr.fill]=\"resolvedTheme.selection.color\"\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                [attr.fill]=\"resolvedTheme.selection.color\"\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            [attr.fill]=\"resolvedTheme.selection.boxFill\"\n            [attr.stroke]=\"resolvedTheme.selection.boxStroke\"\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</div>\n", styles: [".graph-editor-container{display:flex;width:100%;height:100%;position:relative;background:var(--graph-editor-canvas-bg, #f8f9fa)}.graph-toolbar-top{position:absolute;top:12px;left:12px;display:flex;gap:4px;z-index:10;background:var(--ge-toolbar-bg, rgba(255, 255, 255, .95));padding:6px;border-radius:var(--ge-toolbar-radius, 8px);box-shadow:var(--ge-toolbar-shadow, 0 2px 8px rgba(0, 0, 0, .1));backdrop-filter:blur(4px)}.toolbar-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1.5px solid var(--ge-toolbar-btn-border, #e5e7eb);border-radius:var(--ge-toolbar-radius, 8px);background:var(--ge-toolbar-btn-bg, #fff);color:var(--ge-toolbar-btn-color, #4b5563);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .15s ease;font-size:18px}.toolbar-btn:focus-visible{outline:2px solid var(--indigo-400, #818cf8);outline-offset:2px}.toolbar-btn:hover{background:var(--ge-toolbar-btn-hover-bg, #f9fafb);border-color:var(--ge-toolbar-btn-hover-accent, #3b82f6);color:var(--ge-toolbar-btn-hover-accent, #3b82f6)}.toolbar-btn:active{transform:translateY(0);box-shadow:none}.toolbar-btn.active{background:var(--ge-toolbar-btn-active-bg, #3b82f6);border-color:var(--ge-toolbar-btn-active-bg, #3b82f6);color:var(--ge-toolbar-btn-active-color, white)}.toolbar-btn.active:hover{background:color-mix(in srgb,var(--ge-toolbar-btn-active-bg, #3b82f6) 85%,black);border-color:color-mix(in srgb,var(--ge-toolbar-btn-active-bg, #3b82f6) 85%,black);color:var(--ge-toolbar-btn-active-color, white)}.toolbar-divider{width:1px;background:var(--ge-toolbar-divider, #e5e7eb);align-self:stretch;margin:4px 2px}.graph-palette-container{position:absolute;top:72px;left:12px;display:flex;flex-direction:row;gap:8px;z-index:10}.graph-palette-column{display:flex;flex-direction:column;gap:4px;background:var(--ge-toolbar-bg, rgba(255, 255, 255, .95));padding:6px;border-radius:var(--ge-toolbar-radius, 8px);box-shadow:var(--ge-toolbar-shadow, 0 2px 8px rgba(0, 0, 0, .1));backdrop-filter:blur(4px)}.palette-item{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1.5px solid var(--ge-toolbar-btn-border, #e5e7eb);border-radius:var(--ge-toolbar-radius, 8px);background:var(--ge-toolbar-btn-bg, #fff);color:var(--ge-toolbar-btn-color, #4b5563);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .15s ease;font-size:18px}.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:var(--ge-node-border, #cbd5e1)}.graph-node text{pointer-events:none}.graph-node .node-label{font-family:var(--ge-font-family, system-ui, -apple-system, sans-serif)}.graph-node.selected .node-bg{stroke:var(--ge-selection-color, #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:var(--ge-selection-color, #3b82f6)}.edge-endpoint.selected{fill:var(--ge-selection-color, #3b82f6)}.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:var(--ge-toolbar-bg, rgba(255, 255, 255, .95));padding:4px;border-radius:calc(var(--ge-toolbar-radius, 8px) * .75);box-shadow:var(--ge-toolbar-shadow, 0 2px 8px rgba(0, 0, 0, .15));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 var(--ge-toolbar-btn-border, #e5e7eb);border-radius:calc(var(--ge-toolbar-radius, 8px) * .5);background:var(--ge-toolbar-btn-bg, white);cursor:pointer;font-size:16px;transition:all .15s;color:var(--ge-toolbar-btn-color, #6b7280)}.direction-btn:hover{background:var(--ge-toolbar-btn-hover-bg, #f3f4f6);border-color:var(--ge-toolbar-btn-hover-accent, #3b82f6);color:var(--ge-toolbar-btn-hover-accent, #3b82f6)}.direction-btn.active{background:var(--ge-toolbar-btn-active-bg, #3b82f6);border-color:var(--ge-toolbar-btn-active-bg, #3b82f6);color:var(--ge-toolbar-btn-active-color, white)}.resize-handle{cursor:se-resize;opacity:.8;transition:opacity .15s,fill .15s}.resize-handle:hover{opacity:1;fill:var(--ge-selection-color, #3b82f6)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1762,5 +2118,5 @@ function iconToDataUrl(icon, size = 48) {
  * Generated bundle index. Do not edit.
  */
 
-export { GraphEditorComponent, iconToDataUrl, renderIconSvg };
+export { EdgeTemplateDirective, GraphEditorComponent, NodeHtmlTemplateDirective, NodeSvgTemplateDirective, iconToDataUrl, renderIconSvg };
 //# sourceMappingURL=utisha-graph-editor.mjs.map