@xlabs-store/core 0.0.1

package/dist/collection/components/x-workflow/x-workflow.js

@@ -0,0 +1,1403 @@
+import { h } from "@stencil/core";
+import { FlowService } from "../../utils/workflow/flow.service";
+export class XWorkflow {
+    el;
+    nodes = [];
+    edges = [];
+    fitView = false;
+    interactive = true;
+    viewportValue = { x: 0, y: 0, zoom: 1 };
+    snapToGridValue = 0;
+    background = { variant: 'dots' };
+    tool = 'select';
+    theme = 'light';
+    turboMode = false;
+    displayMode = 'advanced';
+    users = [];
+    nodeToolbarVisible = true;
+    nodeToolbarMode = 'selected';
+    edgeRoutingMode = 'fixed';
+    flowNodes = [];
+    flowEdges = [];
+    flowViewport = { x: 0, y: 0, zoom: 1 };
+    pendingConnection = null;
+    selectedNodes = [];
+    draggingNodeId = null;
+    proximityPreview = null;
+    helperLines = [];
+    contextMenu = null;
+    selectionRect = null;
+    drawings = [];
+    activeDrawing = null;
+    editingEdgeId = null;
+    focusedNodeId = null;
+    xNodesChange;
+    xEdgesChange;
+    xViewportChange;
+    xNodeClick;
+    xEdgeClick;
+    xConnect;
+    xWorkflowChange;
+    service;
+    isDraggingCanvas = false;
+    isUpdatingFromProp = false;
+    isInteracting = false;
+    lastMousePos = { x: 0, y: 0 };
+    container;
+    throttleTimer = null;
+    async forceLayout() {
+        this.service.forceLayout();
+    }
+    componentWillLoad() {
+        this.service = new FlowService(this.nodes, this.edges);
+        this.service.setViewport(this.viewportValue);
+        this.updateState();
+        this.service.subscribe(() => {
+            this.updateState();
+            this.throttleEmitWorkflowChange();
+        });
+    }
+    throttleEmitWorkflowChange() {
+        if (this.throttleTimer)
+            return;
+        this.throttleTimer = setTimeout(() => {
+            this.xWorkflowChange.emit(this.service.getFullState());
+            this.throttleTimer = null;
+        }, 100);
+    }
+    handleNodesPropChange(nodes) {
+        this.isUpdatingFromProp = true;
+        this.service.setNodes(nodes);
+        this.isUpdatingFromProp = false;
+    }
+    handleEdgesPropChange(edges) {
+        this.isUpdatingFromProp = true;
+        this.service.setEdges(edges);
+        this.isUpdatingFromProp = false;
+    }
+    handleViewportChange(vp) {
+        this.isUpdatingFromProp = true;
+        this.service.setViewport(vp);
+        this.isUpdatingFromProp = false;
+    }
+    updateState() {
+        this.flowNodes = [...this.service.getNodes()];
+        this.flowEdges = [...this.service.getEdges()];
+        this.flowViewport = { ...this.service.getViewport() };
+        this.selectedNodes = [...this.service.getSelectedNodes()];
+        // During active interaction (drag/pan), suppress heavy external sync to prevent parent re-renders.
+        // We will emit the final state on mouseup.
+        if (!this.isUpdatingFromProp && !this.isInteracting) {
+            this.xViewportChange.emit(this.flowViewport);
+            this.xNodesChange.emit(this.flowNodes);
+            this.xEdgesChange.emit(this.flowEdges);
+        }
+    }
+    handleMouseDown = (e) => {
+        if (!this.interactive)
+            return;
+        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+        const target = e.target;
+        // Check if we're clicking on a node or edge
+        if (target.closest('.node') || target.closest('.edge-group'))
+            return;
+        if (target === this.container || target.closest('.background-canvas')) {
+            const rect = this.container.getBoundingClientRect();
+            const lx = (clientX - rect.left - this.flowViewport.x) / this.flowViewport.zoom, ly = (clientY - rect.top - this.flowViewport.y) / this.flowViewport.zoom;
+            if (this.tool === 'rectangle' || this.tool === 'freehand') {
+                this.startDrawing(lx, ly);
+                return;
+            }
+            this.lastMousePos = { x: clientX, y: clientY };
+            if ('shiftKey' in e && e.shiftKey) {
+                this.selectionRect = { x: (clientX - rect.left), y: (clientY - rect.top), width: 0, height: 0 };
+                this.isInteracting = true;
+            }
+            else {
+                this.isDraggingCanvas = true;
+                this.isInteracting = true;
+                this.service.clearSelection();
+            }
+            this.contextMenu = null;
+        }
+    };
+    handleMove(e) {
+        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX, clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+        const { x, y, zoom } = this.flowViewport, rect = this.container.getBoundingClientRect();
+        if (this.isDraggingCanvas) {
+            const dx = clientX - this.lastMousePos.x, dy = clientY - this.lastMousePos.y;
+            this.lastMousePos = { x: clientX, y: clientY };
+            this.service.setViewport({ x: x + dx, y: y + dy, zoom });
+        }
+        if (this.pendingConnection) {
+            this.pendingConnection = { ...this.pendingConnection, mouseX: (clientX - rect.left - x) / zoom, mouseY: (clientY - rect.top - y) / zoom };
+        }
+        if (this.tool === 'eraser' && (('buttons' in e && e.buttons === 1) || 'touches' in e)) {
+            this.handleEraserAt(clientX, clientY);
+        }
+        if (this.activeDrawing) {
+            const lx = (clientX - rect.left - x) / zoom, ly = (clientY - rect.top - y) / zoom;
+            if (this.activeDrawing.type === 'rectangle')
+                this.activeDrawing = { ...this.activeDrawing, width: lx - this.activeDrawing.position.x, height: ly - this.activeDrawing.position.y };
+            else if (this.activeDrawing.type === 'freehand')
+                this.activeDrawing = { ...this.activeDrawing, points: [...this.activeDrawing.points, { x: lx, y: ly }] };
+        }
+    }
+    handleEraserAt(clientX, clientY) {
+        const rect = this.container.getBoundingClientRect(), { x: vx, y: vy, zoom } = this.flowViewport;
+        const lx = (clientX - rect.left - vx) / zoom, ly = (clientY - rect.top - vy) / zoom;
+        const node = this.flowNodes.find(n => { const w = n.width || 150, h = n.height || 48; return lx >= n.position.x && lx <= n.position.x + w && ly >= n.position.y && ly <= n.position.y + h; });
+        if (node)
+            this.service.deleteNode(node.id);
+        this.drawings = this.drawings.filter(d => {
+            if (d.type === 'rectangle') {
+                const rx = Math.min(d.position.x, d.position.x + (d.width || 0)), ry = Math.min(d.position.y, d.position.y + (d.height || 0)), rw = Math.abs(d.width || 0), rh = Math.abs(d.height || 0);
+                return !(lx >= rx && lx <= rx + rw && ly >= ry && ly <= ry + rh);
+            }
+            return true;
+        });
+    }
+    handleUp() {
+        if (this.isInteracting) {
+            this.isInteracting = false;
+            // Sync final state once interaction ends
+            this.updateState();
+        }
+        this.isDraggingCanvas = false;
+        if (this.activeDrawing) {
+            this.drawings = [...this.drawings, this.activeDrawing];
+            this.activeDrawing = null;
+        }
+        if (this.selectionRect) {
+            this.applyLassoSelection();
+            this.selectionRect = null;
+        }
+        // REMOVED premature clearing of pendingConnection which was causing errors in startConnectionHandler
+        // Drop-to-Group Logic
+        if (this.draggingNodeId) {
+            const node = this.flowNodes.find(n => n.id === this.draggingNodeId);
+            if (node) {
+                // const containerBox = this.container.getBoundingClientRect(); // This line was unused and removed
+                // const absX = node.position.x * this.flowViewport.zoom + this.flowViewport.x; // This line was unused and removed
+                // const absY = node.position.y * this.flowViewport.zoom + this.flowViewport.y; // This line was unused and removed
+                // Find potential parent node (type: group) under the drop position
+                const potentialParent = this.flowNodes.find(n => {
+                    if (n.id === node.id || n.type !== 'group')
+                        return false;
+                    const nw = n.width || 400, nh = n.height || 300;
+                    return node.position.x >= n.position.x && node.position.x + (node.width || 150) <= n.position.x + nw &&
+                        node.position.y >= n.position.y && node.position.y + (node.height || 48) <= n.position.y + nh;
+                });
+                if (potentialParent)
+                    this.service.setParent(node.id, potentialParent.id);
+                else if (node.parentId)
+                    this.service.setParent(node.id, null);
+            }
+        }
+        this.isDraggingCanvas = false;
+        this.draggingNodeId = null;
+        this.helperLines = [];
+    }
+    handleKeyDown(e) {
+        if (!this.interactive || e.target.tagName === 'INPUT')
+            return;
+        if ((e.ctrlKey || e.metaKey) && e.key === 'c') {
+            e.preventDefault();
+            this.service.copySelected();
+        }
+        if ((e.ctrlKey || e.metaKey) && e.key === 'v') {
+            e.preventDefault();
+            this.service.paste();
+        }
+        if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
+            e.preventDefault();
+            if (e.shiftKey)
+                this.service.redo();
+            else
+                this.service.undo();
+        }
+        if (e.key === 'Delete' || e.key === 'Backspace') {
+            e.preventDefault();
+            this.service.deleteSelected();
+        }
+    }
+    handleWheel = (e) => {
+        if (!this.interactive)
+            return;
+        e.preventDefault();
+        const zoomSpeed = 0.001, v = this.service.getViewport(), zoomDelta = -e.deltaY * zoomSpeed, newZoom = Math.min(Math.max(v.zoom + zoomDelta, 0.1), 5);
+        if (newZoom === v.zoom)
+            return;
+        const rect = this.container.getBoundingClientRect(), mouseX = e.clientX - rect.left, mouseY = e.clientY - rect.top, cx = (mouseX - v.x) / v.zoom, cy = (mouseY - v.y) / v.zoom;
+        this.service.setViewport({ x: mouseX - cx * newZoom, y: mouseY - cy * newZoom, zoom: newZoom });
+    };
+    render() {
+        const { x, y, zoom } = this.flowViewport, transform = `translate(${x}px, ${y}px) scale(${zoom})`;
+        return (h("div", { key: 'db1bff3ac7ea27720be9a937afc0ee78a1c7ddb3', class: { 'workflow-container': true, 'theme-dark': this.theme === 'dark' }, onMouseDown: this.handleMouseDown, onTouchStart: this.handleMouseDown, onWheel: this.handleWheel, ref: (el) => this.container = el }, h("div", { key: '24c5d1a846646f25d6ae1ace14f38e7d939d0348', class: "background-canvas" }, this.renderBackground()), h("div", { key: 'd96eb3b0188cb0c6f16e2e093873c56fd471ca37', class: "flow-renderer", style: { transform } }, h("svg", { key: '2801eb1d3d4fb082be5057f0b1500fbc3ac53583', class: "edges-svg" }, h("defs", { key: 'b797372dac820c84edc52087d07805bfb7155126' }, h("marker", { key: '8b0584a343dcbbc40a43767e4a6ab0733a0243d3', id: "arrowhead", markerWidth: "10", markerHeight: "7", refX: "9", refY: "3.5", orient: "auto" }, h("polygon", { key: 'dfe7c9ad6eeaccba3cd560b891021dad77c32b34', points: "0 0, 10 3.5, 0 7", fill: "currentColor" })), h("marker", { key: 'e098834ed3919e64aea097f9d9b2326781841e8e', id: "arrowhead-selected", markerWidth: "10", markerHeight: "7", refX: "9", refY: "3.5", orient: "auto" }, h("polygon", { key: '5c99c575d24f2f6cffddc71ecb3fc29c592416ec', points: "0 0, 10 3.5, 0 7", fill: "var(--x-primary-color)" }))), this.flowEdges
+            .sort((a, b) => (a.selected ? 1 : 0) - (b.selected ? 1 : 0))
+            .map(edge => this.renderEdge(edge)), this.renderPendingLine(), this.renderProximityPreview(), this.renderEdgeHandles()), h("div", { key: 'cd1699a7dd5a41e238be3d94329686e9e8975253', class: "nodes-layer" }, this.flowNodes.map(node => this.renderNode(node))), h("svg", { key: 'bd722c1ce4e18b83b5e954af15162c4fa6bbb44e', class: "drawings-layer" }, this.drawings.map(d => this.renderDrawing(d)), this.activeDrawing && this.renderDrawing(this.activeDrawing)), this.renderHelperLines(), this.renderUsers()), this.renderContextMenu(), this.renderSelectionRect()));
+    }
+    renderBackground() {
+        if (this.background.variant === 'dots') {
+            return (h("div", { class: "dots-bg", style: { backgroundSize: `${20 * this.flowViewport.zoom}px ${20 * this.flowViewport.zoom}px` } }));
+        }
+        return null;
+    }
+    renderUsers() {
+        return this.users.map(u => (h("div", { class: "user-cursor", style: { left: `${u.position.x}px`, top: `${u.position.y}px` } }, h("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: u.color }, h("path", { d: "M5 1v22l6-6h11z" })), h("span", { class: "user-name", style: { backgroundColor: u.color } }, u.name))));
+    }
+    renderPendingLine() {
+        if (!this.pendingConnection)
+            return null;
+        return (h("path", { d: `M${this.pendingConnection.startX},${this.pendingConnection.startY} L${this.pendingConnection.mouseX},${this.pendingConnection.mouseY}`, class: "edge-path pending" }));
+    }
+    renderProximityPreview() {
+        if (!this.proximityPreview)
+            return null;
+        const s = this.flowNodes.find(n => n.id === this.proximityPreview.source);
+        const t = this.flowNodes.find(n => n.id === this.proximityPreview.target);
+        if (!s || !t)
+            return null;
+        const sp = this.getHandlePos(s, this.proximityPreview.sourceHandle, t);
+        const tp = this.getHandlePos(t, this.proximityPreview.targetHandle, s);
+        return (h("path", { d: `M${sp.x},${sp.y} L${tp.x},${tp.y}`, class: "edge-path proximity-preview", "stroke-dasharray": "5,5", opacity: "0.5" }));
+    }
+    handleNodeClick(e, nodeId) {
+        const node = this.flowNodes.find(n => n.id === nodeId);
+        if (!node)
+            return;
+        if (e.shiftKey || e.ctrlKey || e.metaKey) {
+            this.service.selectNode(nodeId, true);
+        }
+        else {
+            this.service.selectNode(nodeId, false);
+        }
+        this.xNodeClick.emit(node);
+    }
+    handleEdgeLabelDblClick(e, edgeId) {
+        e.stopPropagation();
+        this.editingEdgeId = edgeId;
+    }
+    handleEdgeLabelChange(e, edgeId) {
+        const newLabel = e.target.value;
+        this.service.updateEdge(edgeId, { label: newLabel });
+    }
+    renderEdgeLabel(edge, x, y) {
+        return (h("foreignObject", { x: x - 50, y: y - 12, width: 100, height: 24, class: "edge-label-container" }, h("div", { class: "edge-label", onDblClick: (e) => this.handleEdgeLabelDblClick(e, edge.id) }, this.editingEdgeId === edge.id ? (h("input", { value: edge.label, onInput: (e) => this.handleEdgeLabelChange(e, edge.id), onKeyDown: (e) => e.key === 'Enter' && (this.editingEdgeId = null), onBlur: () => this.editingEdgeId = null, autoFocus: true, style: { width: '100%', background: 'white', border: '1px solid #ccc', borderRadius: '4px' } })) : (edge.label || ''))));
+    }
+    renderEdge(edge) {
+        const s = this.flowNodes.find(n => n.id === edge.source);
+        const t = this.flowNodes.find(n => n.id === edge.target);
+        if (!s || !t)
+            return null;
+        const sPos = this.getHandlePos(s, edge.sourceHandle, t);
+        const tPos = this.getHandlePos(t, edge.targetHandle, s);
+        let x1 = sPos.x;
+        let y1 = sPos.y;
+        let x2 = tPos.x;
+        let y2 = tPos.y;
+        // ✅ Multi-edge offset
+        const siblings = this.flowEdges.filter(e => e.source === edge.source && e.target === edge.target);
+        const index = siblings.findIndex(e => e.id === edge.id);
+        const offset = siblings.length > 1
+            ? (index - (siblings.length - 1) / 2) * 20
+            : 0;
+        // apply offset theo normal vector
+        if (edge.type !== 'straight') {
+            const dx = x2 - x1;
+            const dy = y2 - y1;
+            const len = Math.hypot(dx, dy) || 1;
+            const nx = -dy / len;
+            const ny = dx / len;
+            x1 += nx * offset;
+            y1 += ny * offset;
+            x2 += nx * offset;
+            y2 += ny * offset;
+        }
+        let path = '';
+        // =========================================================
+        // 1. STRAIGHT
+        // =========================================================
+        if (edge.type === 'straight') {
+            path = `M${x1},${y1} L${x2},${y2}`;
+        }
+        // =========================================================
+        // 2. STEP / SMOOTHSTEP (FIXED VERSION)
+        // =========================================================
+        else if (edge.type === 'step' || edge.type === 'smoothstep') {
+            const isSmooth = edge.type === 'smoothstep';
+            const radius = isSmooth ? 8 : 0;
+            const points = [];
+            const midX = x1 + (x2 - x1) / 2;
+            const midY = y1 + (y2 - y1) / 2;
+            // routing basic
+            if (Math.abs(x1 - x2) > Math.abs(y1 - y2)) {
+                // horizontal first
+                points.push({ x: x1, y: y1 });
+                points.push({ x: midX, y: y1 });
+                points.push({ x: midX, y: y2 });
+                points.push({ x: x2, y: y2 });
+            }
+            else {
+                // vertical first
+                points.push({ x: x1, y: y1 });
+                points.push({ x: x1, y: midY });
+                points.push({ x: x2, y: midY });
+                points.push({ x: x2, y: y2 });
+            }
+            const parts = [];
+            parts.push(`M${points[0].x},${points[0].y}`);
+            for (let i = 1; i < points.length - 1; i++) {
+                const prev = points[i - 1];
+                const curr = points[i];
+                const next = points[i + 1];
+                if (radius === 0) {
+                    parts.push(`L${curr.x},${curr.y}`);
+                    continue;
+                }
+                const dx1 = curr.x - prev.x;
+                const dy1 = curr.y - prev.y;
+                const dx2 = next.x - curr.x;
+                const dy2 = next.y - curr.y;
+                const len1 = Math.hypot(dx1, dy1);
+                const len2 = Math.hypot(dx2, dy2);
+                const r = Math.min(radius, len1 / 2, len2 / 2);
+                const p1x = curr.x - (dx1 / len1) * r;
+                const p1y = curr.y - (dy1 / len1) * r;
+                const p2x = curr.x + (dx2 / len2) * r;
+                const p2y = curr.y + (dy2 / len2) * r;
+                parts.push(`L${p1x},${p1y}`);
+                parts.push(`Q${curr.x},${curr.y} ${p2x},${p2y}`);
+            }
+            const last = points[points.length - 1];
+            parts.push(`L${last.x},${last.y}`);
+            path = parts.join(' ');
+        }
+        // =========================================================
+        // 3. DEFAULT (Bezier)
+        // =========================================================
+        else {
+            const dx = x2 - x1;
+            const curvature = 0.5;
+            path = `
+      M${x1},${y1}
+      C${x1 + dx * curvature},${y1}
+       ${x2 - dx * curvature},${y2}
+       ${x2},${y2}
+    `;
+        }
+        const isSelected = this.selectedNodes.includes(edge.id); // Assuming edges can be selected
+        return (h("g", { key: edge.id, class: { 'edge-group': true } }, h("path", { d: path, stroke: "transparent", "stroke-width": "20", fill: "none", style: { cursor: 'pointer', pointerEvents: 'stroke' }, onClick: (e) => {
+                e.stopPropagation();
+                this.service.selectEdge(edge.id, e.ctrlKey || e.metaKey);
+                this.xEdgeClick.emit(edge);
+            } }), h("path", { d: path, class: {
+                'edge-path': true,
+                'selected': isSelected,
+                'animated': edge.animated,
+            }, "marker-end": isSelected ? 'url(#arrowhead-selected)' : 'url(#arrowhead)', style: {
+                pointerEvents: 'none',
+                stroke: isSelected
+                    ? 'var(--x-primary-color)'
+                    : (edge.style?.['stroke'] || '#b1b1b7'),
+                strokeDasharray: edge.style?.['strokeDasharray'],
+            } }), edge.selected && (h("foreignObject", { x: (x1 + x2) / 2 - 30, y: (y1 + y2) / 2 - 50, width: "60", height: "40" }, h("div", { class: "edge-toolbar" }, h("button", { class: "edge-toolbar-btn", onClick: (e) => {
+                e.stopPropagation();
+                this.service.updateEdge(edge.id, {
+                    animated: !edge.animated,
+                });
+            } }, "\u26A1"), h("button", { class: "edge-toolbar-btn", onClick: (e) => {
+                e.stopPropagation();
+                this.service.deleteEdge(edge.id);
+            } }, "\uD83D\uDDD1")))), edge.label &&
+            this.renderEdgeLabel(edge, (x1 + x2) / 2, (y1 + y2) / 2)));
+    }
+    getHandlePos(node, handle, targetNode) {
+        // Ensure we have a width and height to calculate the midpoint/edges
+        const x = Math.round(node.position.x);
+        const y = Math.round(node.position.y);
+        const w = node.width ? Math.round(node.width) : (node.shape === 'diamond' ? 100 : 150);
+        const h = node.height ? Math.round(node.height) : (node.shape === 'diamond' ? 100 : 48);
+        if (handle === 'floating' && targetNode)
+            return this.getFloatingHandlePos(node, targetNode);
+        if (this.edgeRoutingMode === 'auto' && targetNode) {
+            const sc = { x: x + w / 2, y: y + h / 2 };
+            const tc = { x: targetNode.position.x + (targetNode.width || 150) / 2, y: targetNode.position.y + (targetNode.height || 48) / 2 };
+            const dx = tc.x - sc.x;
+            const dy = tc.y - sc.y;
+            if (Math.abs(dx) > Math.abs(dy))
+                handle = dx > 0 ? 'right' : 'left';
+            else
+                handle = dy > 0 ? 'bottom' : 'top';
+        }
+        else if (!handle && targetNode) {
+            const sc = { x: x + w / 2, y: y + h / 2 };
+            const tc = { x: targetNode.position.x + (targetNode.width || 150) / 2, y: targetNode.position.y + (targetNode.height || 48) / 2 };
+            const dx = tc.x - sc.x;
+            const dy = tc.y - sc.y;
+            if (Math.abs(dx) > Math.abs(dy))
+                handle = dx > 0 ? 'right' : 'left';
+            else
+                handle = dy > 0 ? 'bottom' : 'top';
+        }
+        else if (!handle) {
+            handle = 'floating';
+        }
+        // Offset slightly for handle markers (r=4)
+        switch (handle) {
+            case 'top': return { x: x + w / 2, y };
+            case 'right': return { x: x + w, y: y + h / 2 };
+            case 'bottom': return { x: x + w / 2, y: y + h };
+            case 'left': return { x: x, y: y + h / 2 };
+            default: return { x: x + w / 2, y: y + h / 2 };
+        }
+    }
+    getFloatingHandlePos(source, target) {
+        const sw = (source.width || 150) / 2, sh = (source.height || 48) / 2;
+        const sc = { x: source.position.x + sw, y: source.position.y + sh };
+        const tc = { x: target.position.x + (target.width || 150) / 2, y: target.position.y + (target.height || 48) / 2 };
+        const dx = tc.x - sc.x, dy = tc.y - sc.y;
+        const angle = Math.atan2(dy, dx);
+        // Diamond Shape Correction
+        if (source.shape === 'diamond') {
+            const absCos = Math.abs(Math.cos(angle)), absSin = Math.abs(Math.sin(angle));
+            const d = (sw * sh) / (sh * absCos + sw * absSin);
+            return { x: sc.x + d * Math.cos(angle), y: sc.y + d * Math.sin(angle) };
+        }
+        // Circle Shape Correction
+        if (source.shape === 'circle') {
+            const r = Math.min(sw, sh);
+            return { x: sc.x + r * Math.cos(angle), y: sc.y + r * Math.sin(angle) };
+        }
+        if (Math.abs(dx) * sh > Math.abs(dy) * sw)
+            return { x: sc.x + sw * Math.sign(dx), y: sc.y + (dy * sw / Math.abs(dx)) };
+        else
+            return { x: sc.x + (dx * sh / Math.abs(dy)), y: sc.y + sh * Math.sign(dy) };
+    }
+    renderEdgeHandles() {
+        return this.flowEdges
+            .filter(e => e.selected)
+            .map(edge => {
+            const s = this.flowNodes.find(n => n.id === edge.source);
+            const t = this.flowNodes.find(n => n.id === edge.target);
+            if (!s || !t)
+                return null;
+            const sPos = this.getHandlePos(s, edge.sourceHandle, t);
+            const tPos = this.getHandlePos(t, edge.targetHandle, s);
+            return (h("g", { class: "edge-controls" }, h("circle", { cx: sPos.x, cy: sPos.y, r: "4", class: "edge-handle source", onMouseDown: (e) => this.startEdgeReconnect(e, edge, 'source'), onTouchStart: (e) => this.startEdgeReconnect(e, edge, 'source') }), h("circle", { cx: tPos.x, cy: tPos.y, r: "4", class: "edge-handle target", onMouseDown: (e) => this.startEdgeReconnect(e, edge, 'target'), onTouchStart: (e) => this.startEdgeReconnect(e, edge, 'target') })));
+        });
+    }
+    startEdgeReconnect(e, edge, type) {
+        if (this.pendingConnection)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const otherId = type === 'source' ? edge.target : edge.source, otherNode = this.flowNodes.find(n => n.id === otherId);
+        if (!otherNode)
+            return;
+        const rect = this.container.getBoundingClientRect(), { x, y, zoom } = this.flowViewport, otherPos = this.getHandlePos(otherNode, type === 'source' ? edge.targetHandle : edge.sourceHandle), cx = 'touches' in e ? e.touches[0].clientX : e.clientX, cy = 'touches' in e ? e.touches[0].clientY : e.clientY;
+        this.service.deleteEdge(edge.id);
+        this.pendingConnection = { source: otherId, handle: (type === 'source' ? edge.targetHandle : edge.sourceHandle) || 'floating', startX: otherPos.x, startY: otherPos.y, mouseX: (cx - rect.left - x) / zoom, mouseY: (cy - rect.top - y) / zoom };
+        this.startConnectionHandler(otherId, type === 'source' ? 'target' : 'source');
+    }
+    renderNode(node) {
+        const isSelected = this.selectedNodes.includes(node.id);
+        const isFocused = this.focusedNodeId === node.id;
+        const shapeClass = node.shape ? `shape-${node.shape}` : '';
+        return (h("div", { key: node.id, "data-id": node.id, class: {
+                'node': true,
+                'selected': isSelected,
+                'dragging': this.draggingNodeId === node.id,
+                'collapsed': node.isCollapsed,
+                [node.className]: !!node.className,
+                [shapeClass]: !!shapeClass,
+                'focused': isFocused,
+                'turbo': this.turboMode,
+                [`type-${node.type}`]: true
+            }, style: {
+                left: `${Math.round(node.position.x)}px`,
+                top: `${Math.round(node.position.y)}px`,
+                width: node.width ? `${node.width}px` : (node.shape === 'diamond' ? '100px' : '150px'),
+                height: node.height ? `${node.height}px` : (node.shape === 'diamond' ? '100px' : '48px'),
+                transform: `rotate(${node.rotation || 0}deg) translateZ(0)`,
+                opacity: (this.focusedNodeId && !isFocused && node.parentId !== this.focusedNodeId) ? '0.3' : '1',
+                zIndex: isSelected ? '1000' : (node.zIndex || 10).toString(),
+                ...(node.style || {})
+            }, onMouseDown: (e) => this.handleNodeDragStart(e, node), onTouchStart: (e) => this.handleNodeDragStart(e, node), onClick: (e) => this.handleNodeClick(e, node.id), onDblClick: () => node.type === 'group' && (this.focusedNodeId = this.focusedNodeId === node.id ? null : node.id) }, this.shouldShowToolbar(node) && this.renderNodeToolbar(node), node.shape === 'diamond' && (h("div", { class: "node-shape-wrapper" }, h("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", class: "node-shape-svg" }, h("path", { d: "M50 0 L100 50 L50 100 L0 50 Z", class: { 'shape-path': true, 'selected': isSelected } })))), h("div", { class: "node-content" }, (node.type === 'group' || node.isParent) && (h("button", { class: "node-collapse-btn", onClick: (e) => { e.stopPropagation(); this.service.toggleNodeCollapse(node.id); } }, h("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: node.isCollapsed ? "M12 5v14M5 12h14" : "M5 12h14" })))), node.template ? h("div", { innerHTML: node.template }) : h("slot", { name: `node-${node.type}` }, node.data?.label || node.id)), node.handles ? node.handles.map(h => this.renderCustomHandle(node, h)) : [
+            h("div", { key: "top", class: "handle top", onMouseDown: (e) => this.startConnection(e, node.id, 'top') }),
+            h("div", { key: "right", class: "handle right", onMouseDown: (e) => this.startConnection(e, node.id, 'right') }),
+            h("div", { key: "bottom", class: "handle bottom", onMouseDown: (e) => this.startConnection(e, node.id, 'bottom') }),
+            h("div", { key: "left", class: "handle left", onMouseDown: (e) => this.startConnection(e, node.id, 'left') })
+        ], isSelected && node.resizable && h("div", { class: "node-resizer", onMouseDown: (e) => this.startResize(e, node) }), " ", isSelected && node.rotatable !== false && h("div", { class: "node-rotator", onMouseDown: (e) => this.startRotate(e, node) }, h("x-icon", { name: "autorenew", size: 12 })), " "));
+    }
+    shouldShowToolbar(node) {
+        if (!this.nodeToolbarVisible)
+            return false;
+        if (this.nodeToolbarMode === 'always')
+            return true;
+        if (this.nodeToolbarMode === 'selected')
+            return this.selectedNodes.includes(node.id);
+        return false; // For hover mode, we'd need some mouse state tracking or CSS
+    }
+    renderNodeToolbar(node) {
+        const colors = ['#ffffff', '#fecaca', '#bfdbfe', '#bbf7d0', '#fef08a', '#e9d5ff'];
+        return (h("div", { class: "node-toolbar" }, h("div", { class: "color-picker" }, colors.map(c => (h("div", { class: "color-swatch", style: { background: c }, onClick: () => this.service.updateNode(node.id, { style: { ...node.style, background: c } }) })))), h("x-divider", { type: "vertical" }), h("button", { onClick: () => this.service.deleteNode(node.id) }, h("x-icon", { name: "delete", size: 14 })), h("button", { onClick: () => this.service.copySelected() }, h("x-icon", { name: "content_copy", size: 14 }))));
+    }
+    renderCustomHandle(node, h) {
+        return (h("div", { class: { 'handle': true, [h.position]: true }, style: h.style, onMouseDown: (e) => this.startConnection(e, node.id, h.id), onTouchStart: (e) => this.startConnection(e, node.id, h.id) }));
+    }
+    handleNodeDragStart(e, node) {
+        if (node.dragHandle && !e.target.closest(node.dragHandle)) {
+            return;
+        }
+        e.preventDefault(); // Stop simulated mouse events
+        e.stopPropagation();
+        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+        this.service.selectNode(node.id, ('shiftKey' in e && e.shiftKey));
+        this.startNodeDrag(clientX, clientY, node);
+    }
+    startNodeDrag(startX, startY, node) {
+        const startNodeX = node.position.x;
+        const startNodeY = node.position.y;
+        const zoom = this.flowViewport.zoom;
+        const dragThreshold = 5; // Increased threshold
+        let dragStarted = false;
+        const onMove = (me) => {
+            const cx = 'touches' in me ? me.touches[0].clientX : me.clientX;
+            const cy = 'touches' in me ? me.touches[0].clientY : me.clientY;
+            if (!dragStarted) {
+                const moveDist = Math.sqrt(Math.pow(cx - startX, 2) + Math.pow(cy - startY, 2));
+                if (moveDist > dragThreshold) {
+                    dragStarted = true;
+                    this.draggingNodeId = node.id;
+                    this.isInteracting = true; // Block external sync during drag
+                }
+                else {
+                    return;
+                }
+            }
+            const dx = (cx - startX) / zoom;
+            const dy = (cy - startY) / zoom;
+            const newX = startNodeX + dx;
+            const newY = startNodeY + dy;
+            this.service.updateNodePosition(node.id, newX, newY, this.snapToGridValue);
+            this.helperLines = this.calculateHelperLines(node.id, newX, newY);
+            this.checkProximity(node.id, newX, newY);
+        };
+        const onUp = () => {
+            if (this.proximityPreview) {
+                this.service.onConnect(this.proximityPreview);
+                this.proximityPreview = null;
+            }
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+            document.removeEventListener('touchmove', onMove);
+            document.removeEventListener('touchend', onUp);
+            this.draggingNodeId = null;
+            this.handleUp();
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+        document.addEventListener('touchmove', onMove);
+        document.addEventListener('touchend', onUp);
+    }
+    startResize(e, node) {
+        e.stopPropagation();
+        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+        const startX = clientX;
+        const startY = clientY;
+        const startWidth = node.width || 150;
+        const startHeight = node.height || 48;
+        const zoom = this.flowViewport.zoom;
+        const onMove = (me) => {
+            const cx = 'touches' in me ? me.touches[0].clientX : me.clientX;
+            const cy = 'touches' in me ? me.touches[0].clientY : me.clientY;
+            const dw = (cx - startX) / zoom;
+            const dh = (cy - startY) / zoom;
+            this.service.setNodes(this.flowNodes.map(n => n.id === node.id ? { ...n, width: Math.max(50, startWidth + dw), height: Math.max(30, startHeight + dh) } : n));
+        };
+        const onUp = () => {
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+            document.removeEventListener('touchmove', onMove);
+            document.removeEventListener('touchend', onUp);
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+        document.addEventListener('touchmove', onMove);
+        document.addEventListener('touchend', onUp);
+    }
+    startRotate(e, node) {
+        e.stopPropagation();
+        const rect = this.container.getBoundingClientRect(), { x: vx, y: vy, zoom } = this.flowViewport;
+        const center = {
+            x: node.position.x + (node.width || 150) / 2,
+            y: node.position.y + (node.height || 48) / 2
+        };
+        const onMove = (me) => {
+            const cx = 'touches' in me ? me.touches[0].clientX : me.clientX;
+            const cy = 'touches' in me ? me.touches[0].clientY : me.clientY;
+            const mousePos = { x: (cx - rect.left - vx) / zoom, y: (cy - rect.top - vy) / zoom };
+            const angle = Math.atan2(mousePos.y - center.y, mousePos.x - center.x) * (180 / Math.PI) + 90;
+            this.service.rotateNode(node.id, angle);
+        };
+        const onUp = () => {
+            this.service.saveToHistory();
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+            document.removeEventListener('touchmove', onMove);
+            document.removeEventListener('touchend', onUp);
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+        document.addEventListener('touchmove', onMove);
+        document.addEventListener('touchend', onUp);
+    }
+    applyLassoSelection() {
+        if (!this.selectionRect)
+            return;
+        const { x, y, width, height } = this.selectionRect;
+        const zoom = this.flowViewport.zoom;
+        const viewX = this.flowViewport.x;
+        const viewY = this.flowViewport.y;
+        const rectX = (Math.min(x, x + width) - viewX) / zoom;
+        const rectY = (Math.min(y, y + height) - viewY) / zoom;
+        const rectW = Math.abs(width) / zoom;
+        const rectH = Math.abs(height) / zoom;
+        this.flowNodes.forEach(node => {
+            const nx = node.position.x;
+            const ny = node.position.y;
+            const nw = node.width || 150;
+            const nh = node.height || 48;
+            if (nx >= rectX && nx + nw <= rectX + rectW && ny >= rectY && ny + nh <= rectY + rectH) {
+                this.service.selectNode(node.id, true);
+            }
+        });
+    }
+    renderSelectionRect() {
+        if (!this.selectionRect)
+            return null;
+        const { x, y, width, height } = this.selectionRect;
+        return (h("div", { class: "selection-rect", style: {
+                left: `${Math.min(x, x + width)}px`,
+                top: `${Math.min(y, y + height)}px`,
+                width: `${Math.abs(width)}px`,
+                height: `${Math.abs(height)}px`
+            } }));
+    }
+    renderContextMenu() {
+        if (!this.contextMenu)
+            return null;
+        return (h("div", { class: "context-menu", style: { left: `${this.contextMenu.x}px`, top: `${this.contextMenu.y}px` } }, h("div", { class: "menu-item", onClick: () => this.addNodeAtPos(this.contextMenu.x, this.contextMenu.y) }, "Add Node Here"), h("div", { class: "divider" }), this.selectedNodes.length > 1 && (h("div", { class: "menu-item", onClick: () => this.service.groupSelected() }, "Group Selected")), h("div", { class: "menu-item", onClick: () => this.service.undo() }, "Undo"), h("div", { class: "menu-item", onClick: () => this.service.redo() }, "Redo")));
+    }
+    addNodeAtPos(clientX, clientY) {
+        const rect = this.container.getBoundingClientRect();
+        const { x, y, zoom } = this.flowViewport;
+        this.service.addNode({
+            id: `node-${Date.now()}`,
+            position: {
+                x: (clientX - rect.left - x) / zoom,
+                y: (clientY - rect.top - y) / zoom
+            },
+            data: { label: 'New Node' },
+            zIndex: 10
+        });
+    }
+    startConnection(e, nodeId, handle) {
+        if (this.pendingConnection)
+            return;
+        e.preventDefault(); // Stop simulated mouse events
+        e.stopPropagation();
+        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+        const rect = this.container.getBoundingClientRect();
+        const { x, y, zoom } = this.flowViewport;
+        const node = this.flowNodes.find(n => n.id === nodeId);
+        if (!node)
+            return;
+        // Use handle center instead of click position for start point
+        const hPos = this.getHandlePos(node, handle);
+        this.pendingConnection = {
+            source: nodeId,
+            handle,
+            startX: hPos.x,
+            startY: hPos.y,
+            mouseX: (clientX - rect.left - x) / zoom,
+            mouseY: (clientY - rect.top - y) / zoom
+        };
+        this.proximityPreview = null; // Clear any existing previews
+        this.startConnectionHandler(nodeId, 'source');
+    }
+    startConnectionHandler(nodeId, handleType = 'source') {
+        const onUp = (de) => {
+            const pending = this.pendingConnection;
+            this.pendingConnection = null;
+            this.proximityPreview = null;
+            document.removeEventListener('mouseup', onUp);
+            document.removeEventListener('touchend', onUp);
+            if (!pending)
+                return;
+            const clientX = 'touches' in de ? de.touches[0].clientX : de.clientX, clientY = 'touches' in de ? de.touches[0].clientY : de.clientY, { x: vx, y: vy, zoom } = this.flowViewport, rect = this.container.getBoundingClientRect(), lx = (clientX - rect.left - vx) / zoom, ly = (clientY - rect.top - vy) / zoom, padding = 15, targetNode = this.flowNodes.find(n => {
+                const w = (n.width || 150) + padding * 2, h = (n.height || 48) + padding * 2;
+                return lx >= n.position.x - padding && lx <= n.position.x + w && ly >= n.position.y - padding && ly <= n.position.y + h;
+            });
+            if (targetNode && targetNode.id !== nodeId) {
+                const path = de.composedPath(), targetHandleEl = path.find(el => el.classList && el.classList.contains('handle')), targetHandle = targetHandleEl ? (Array.from(targetHandleEl.classList).find(c => ['top', 'right', 'bottom', 'left'].includes(c))) : 'floating';
+                const connection = handleType === 'source'
+                    ? { source: nodeId, target: targetNode.id, sourceHandle: pending.handle, targetHandle }
+                    : { source: targetNode.id, target: nodeId, sourceHandle: targetHandle, targetHandle: pending.handle };
+                if (this.service.isValidConnection(connection)) {
+                    this.service.onConnect(connection);
+                    this.xConnect.emit(connection);
+                }
+            }
+            else if (!targetNode) {
+                const newNodeId = `node-${Date.now()}`;
+                this.service.addNode({ id: newNodeId, position: { x: lx - 75, y: ly - 24 }, data: { label: 'New Node' }, zIndex: 10 });
+                const connection = handleType === 'source'
+                    ? { source: nodeId, target: newNodeId, sourceHandle: pending.handle, targetHandle: 'floating' }
+                    : { source: newNodeId, target: nodeId, sourceHandle: 'floating', targetHandle: pending.handle };
+                this.service.onConnect(connection);
+                this.xConnect.emit(connection);
+            }
+        };
+        document.addEventListener('mouseup', onUp);
+        document.addEventListener('touchend', onUp);
+    }
+    startDrawing(x, y) {
+        this.activeDrawing = {
+            id: `draw-${Date.now()}`,
+            type: (this.tool === 'rectangle' ? 'rectangle' : 'freehand'),
+            position: { x, y },
+            points: this.tool === 'freehand' ? [{ x, y }] : [],
+            width: 0,
+            height: 0,
+            style: { stroke: '#111', strokeWidth: '2', fill: 'none' }
+        };
+    }
+    renderDrawing(d) {
+        if (d.type === 'rectangle') {
+            return (h("rect", { x: Math.min(d.position.x, d.position.x + (d.width || 0)), y: Math.min(d.position.y, d.position.y + (d.height || 0)), width: Math.abs(d.width || 0), height: Math.abs(d.height || 0), style: d.style }));
+        }
+        else {
+            return (h("path", { d: d.points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`).join(' '), style: d.style }));
+        }
+    }
+    checkProximity(nodeId, nx, ny) {
+        const threshold = 50;
+        const node = this.flowNodes.find(n => n.id === nodeId);
+        if (!node)
+            return;
+        const nw = node.width || 150;
+        const nh = node.height || 48;
+        const nc = { x: nx + nw / 2, y: ny + nh / 2 };
+        let closest = null;
+        let minDist = threshold;
+        this.flowNodes.forEach(other => {
+            if (other.id === nodeId || other.parentId === nodeId)
+                return;
+            const ow = other.width || 150;
+            const oh = other.height || 48;
+            const oc = { x: other.position.x + ow / 2, y: other.position.y + oh / 2 };
+            const d = Math.sqrt((nc.x - oc.x) ** 2 + (nc.y - oc.y) ** 2);
+            if (d < minDist) {
+                minDist = d;
+                closest = { source: nodeId, target: other.id, sourceHandle: 'floating', targetHandle: 'floating' };
+            }
+        });
+        this.proximityPreview = closest;
+    }
+    calculateHelperLines(nodeId, x, y) {
+        const threshold = 10;
+        const lines = [];
+        this.flowNodes.forEach(other => {
+            if (other.id === nodeId || other.parentId === nodeId)
+                return;
+            if (Math.abs(x - other.position.x) < threshold)
+                lines.push({ x: other.position.x });
+            if (Math.abs(y - other.position.y) < threshold)
+                lines.push({ y: other.position.y });
+        });
+        return lines;
+    }
+    renderHelperLines() {
+        return h("svg", { class: "helper-lines-svg", style: { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', pointerEvents: 'none' } }, this.helperLines.map(line => line.x !== undefined ? h("line", { x1: line.x, y1: "-10000", x2: line.x, y2: "10000", stroke: "#3b82f6", "stroke-dasharray": "2,2" }) : h("line", { x1: "-10000", y1: line.y, x2: "10000", y2: line.y, stroke: "#3b82f6", "stroke-dasharray": "2,2" })));
+    }
+    static get is() { return "x-workflow"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-workflow.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-workflow.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "nodes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "XNode[]",
+                    "resolved": "XNode<Record<string, unknown>>[]",
+                    "references": {
+                        "XNode": {
+                            "location": "import",
+                            "path": "../../utils/workflow/types",
+                            "id": "src/utils/workflow/types.ts::XNode",
+                            "referenceLocation": "XNode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "edges": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "XEdge[]",
+                    "resolved": "XEdge<Record<string, unknown>>[]",
+                    "references": {
+                        "XEdge": {
+                            "location": "import",
+                            "path": "../../utils/workflow/types",
+                            "id": "src/utils/workflow/types.ts::XEdge",
+                            "referenceLocation": "XEdge"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "fitView": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fit-view",
+                "defaultValue": "false"
+            },
+            "interactive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "interactive",
+                "defaultValue": "true"
+            },
+            "viewportValue": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Viewport",
+                    "resolved": "{ x: number; y: number; zoom: number; }",
+                    "references": {
+                        "Viewport": {
+                            "location": "import",
+                            "path": "../../utils/workflow/types",
+                            "id": "src/utils/workflow/types.ts::Viewport",
+                            "referenceLocation": "Viewport"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{ x: 0, y: 0, zoom: 1 }"
+            },
+            "snapToGridValue": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "snap-to-grid-value",
+                "defaultValue": "0"
+            },
+            "background": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BackgroundProps",
+                    "resolved": "BackgroundProps",
+                    "references": {
+                        "BackgroundProps": {
+                            "location": "import",
+                            "path": "../../utils/workflow/types",
+                            "id": "src/utils/workflow/types.ts::BackgroundProps",
+                            "referenceLocation": "BackgroundProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{ variant: 'dots' }"
+            },
+            "tool": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'select' | 'hand' | 'rectangle' | 'freehand' | 'eraser'",
+                    "resolved": "\"eraser\" | \"freehand\" | \"hand\" | \"rectangle\" | \"select\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tool",
+                "defaultValue": "'select'"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'light'"
+            },
+            "turboMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "turbo-mode",
+                "defaultValue": "false"
+            },
+            "displayMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'simple' | 'advanced'",
+                    "resolved": "\"advanced\" | \"simple\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "display-mode",
+                "defaultValue": "'advanced'"
+            },
+            "users": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<{ id: string; name: string; color: string; position: { x: number; y: number } }>",
+                    "resolved": "{ id: string; name: string; color: string; position: { x: number; y: number; }; }[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "nodeToolbarVisible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "node-toolbar-visible",
+                "defaultValue": "true"
+            },
+            "nodeToolbarMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'always' | 'hover' | 'selected'",
+                    "resolved": "\"always\" | \"hover\" | \"selected\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "node-toolbar-mode",
+                "defaultValue": "'selected'"
+            },
+            "edgeRoutingMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'fixed' | 'auto'",
+                    "resolved": "\"auto\" | \"fixed\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "edge-routing-mode",
+                "defaultValue": "'fixed'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "flowNodes": {},
+            "flowEdges": {},
+            "flowViewport": {},
+            "pendingConnection": {},
+            "selectedNodes": {},
+            "draggingNodeId": {},
+            "proximityPreview": {},
+            "helperLines": {},
+            "contextMenu": {},
+            "selectionRect": {},
+            "drawings": {},
+            "activeDrawing": {},
+            "editingEdgeId": {},
+            "focusedNodeId": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xNodesChange",
+                "name": "xNodesChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "XNode[]",
+                    "resolved": "XNode<Record<string, unknown>>[]",
+                    "references": {
+                        "XNode": {
+                            "location": "import",
+                            "path": "../../utils/workflow/types",
+                            "id": "src/utils/workflow/types.ts::XNode",
+                            "referenceLocation": "XNode"
+                        }
+                    }
+                }
+            }, {
+                "method": "xEdgesChange",
+                "name": "xEdgesChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "XEdge[]",
+                    "resolved": "XEdge<Record<string, unknown>>[]",
+                    "references": {
+                        "XEdge": {
+                            "location": "import",
+                            "path": "../../utils/workflow/types",
+                            "id": "src/utils/workflow/types.ts::XEdge",
+                            "referenceLocation": "XEdge"
+                        }
+                    }
+                }
+            }, {
+                "method": "xViewportChange",
+                "name": "xViewportChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Viewport",
+                    "resolved": "{ x: number; y: number; zoom: number; }",
+                    "references": {
+                        "Viewport": {
+                            "location": "import",
+                            "path": "../../utils/workflow/types",
+                            "id": "src/utils/workflow/types.ts::Viewport",
+                            "referenceLocation": "Viewport"
+                        }
+                    }
+                }
+            }, {
+                "method": "xNodeClick",
+                "name": "xNodeClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "XNode",
+                    "resolved": "XNode<Record<string, unknown>>",
+                    "references": {
+                        "XNode": {
+                            "location": "import",
+                            "path": "../../utils/workflow/types",
+                            "id": "src/utils/workflow/types.ts::XNode",
+                            "referenceLocation": "XNode"
+                        }
+                    }
+                }
+            }, {
+                "method": "xEdgeClick",
+                "name": "xEdgeClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "XEdge",
+                    "resolved": "XEdge<Record<string, unknown>>",
+                    "references": {
+                        "XEdge": {
+                            "location": "import",
+                            "path": "../../utils/workflow/types",
+                            "id": "src/utils/workflow/types.ts::XEdge",
+                            "referenceLocation": "XEdge"
+                        }
+                    }
+                }
+            }, {
+                "method": "xConnect",
+                "name": "xConnect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "XConnection",
+                    "resolved": "XConnection",
+                    "references": {
+                        "XConnection": {
+                            "location": "import",
+                            "path": "../../utils/workflow/types",
+                            "id": "src/utils/workflow/types.ts::XConnection",
+                            "referenceLocation": "XConnection"
+                        }
+                    }
+                }
+            }, {
+                "method": "xWorkflowChange",
+                "name": "xWorkflowChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "unknown",
+                    "resolved": "unknown",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "forceLayout": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "nodes",
+                "methodName": "handleNodesPropChange"
+            }, {
+                "propName": "edges",
+                "methodName": "handleEdgesPropChange"
+            }, {
+                "propName": "viewportValue",
+                "methodName": "handleViewportChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "mousemove",
+                "method": "handleMove",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "touchmove",
+                "method": "handleMove",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "mouseup",
+                "method": "handleUp",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "touchend",
+                "method": "handleUp",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}