@xlabs-store/core 0.0.1 → 0.0.3

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

@@ -111,7 +111,7 @@ export class XWorkflow {
             }
             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.selectionRect = { x: clientX - rect.left, y: clientY - rect.top, width: 0, height: 0 };
                 this.isInteracting = true;
             }
             else {
@@ -147,7 +147,10 @@ export class XWorkflow {
     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; });
+        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 => {
@@ -186,8 +189,10 @@ export class XWorkflow {
                     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;
+                    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);
@@ -234,13 +239,11 @@ export class XWorkflow {
     };
     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()));
+        return (h("div", { key: 'a91dd40532f5f5b4ed483ae6e386bba58a4c32fc', 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: '907746c70c6498dafede5c7003c49280d382683f', class: "background-canvas" }, this.renderBackground()), h("div", { key: '4b08f3a924ffb0f32452eb890d1412ec09064868', class: "flow-renderer", style: { transform } }, h("svg", { key: '79d11a10adc62c2fda79e0d255004202282974de', class: "edges-svg" }, h("defs", { key: '88b740608559c08280829d75c96a53792636f7ff' }, h("marker", { key: '4af37c5a03d2039e429b94579de0d4abc1f74dc4', id: "arrowhead", markerWidth: "10", markerHeight: "7", refX: "9", refY: "3.5", orient: "auto" }, h("polygon", { key: '81c67a5f7f974adbe54b013cc982d367627886b0', points: "0 0, 10 3.5, 0 7", fill: "currentColor" })), h("marker", { key: 'b373d964af68271dc5dc74d2b30d4c7b342eb20b', id: "arrowhead-selected", markerWidth: "10", markerHeight: "7", refX: "9", refY: "3.5", orient: "auto" }, h("polygon", { key: 'a067eb105fcc952b3475ba694baa1c070c8f6c8f', 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: 'cb5e9f73ca6b623871b44678e1ce6312d0c70b4c', class: "nodes-layer" }, this.flowNodes.map(node => this.renderNode(node))), h("svg", { key: '7f3b9e5a58576406080264de861cec229ac6606b', 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 h("div", { class: "dots-bg", style: { backgroundSize: `${20 * this.flowViewport.zoom}px ${20 * this.flowViewport.zoom}px` } });
         }
         return null;
     }
@@ -261,7 +264,7 @@ export class XWorkflow {
             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" }));
+        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);
@@ -284,7 +287,7 @@ export class XWorkflow {
         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 || ''))));
+        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);
@@ -300,9 +303,7 @@ export class XWorkflow {
         // ✅ 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;
+        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;
@@ -380,15 +381,15 @@ export class XWorkflow {
         else {
             const dx = x2 - x1;
             const curvature = 0.5;
-            path = `
-      M${x1},${y1}
-      C${x1 + dx * curvature},${y1}
-       ${x2 - dx * curvature},${y2}
-       ${x2},${y2}
+            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) => {
+        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);
@@ -398,27 +399,24 @@ export class XWorkflow {
                 'animated': edge.animated,
             }, "marker-end": isSelected ? 'url(#arrowhead-selected)' : 'url(#arrowhead)', style: {
                 pointerEvents: 'none',
-                stroke: isSelected
-                    ? 'var(--x-primary-color)'
-                    : (edge.style?.['stroke'] || '#b1b1b7'),
+                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) => {
+            } }), 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) => {
+            } }, "\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)));
+            } }, "\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);
+        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) {
@@ -446,11 +444,16 @@ export class XWorkflow {
         }
         // 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 };
+            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) {
@@ -471,9 +474,9 @@ export class XWorkflow {
             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)) };
+            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) };
+            return { x: sc.x + (dx * sh) / Math.abs(dy), y: sc.y + sh * Math.sign(dy) };
     }
     renderEdgeHandles() {
         return this.flowEdges
@@ -485,7 +488,7 @@ export class XWorkflow {
                 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') })));
+            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) {
@@ -498,7 +501,14 @@ export class XWorkflow {
             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.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) {
@@ -506,30 +516,35 @@ export class XWorkflow {
         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: 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
+                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'),
+                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',
+                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 })), " "));
+                ...(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)
@@ -545,7 +560,7 @@ export class XWorkflow {
         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) }));
+        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)) {
@@ -555,7 +570,7 @@ export class XWorkflow {
         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.service.selectNode(node.id, 'shiftKey' in e && e.shiftKey);
         this.startNodeDrag(clientX, clientY, node);
     }
     startNodeDrag(startX, startY, node) {
@@ -617,7 +632,7 @@ export class XWorkflow {
             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));
+            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);
@@ -635,7 +650,7 @@ export class XWorkflow {
         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
+            y: node.position.y + (node.height || 48) / 2,
         };
         const onMove = (me) => {
             const cx = 'touches' in me ? me.touches[0].clientX : me.clientX;
@@ -685,7 +700,7 @@ export class XWorkflow {
                 left: `${Math.min(x, x + width)}px`,
                 top: `${Math.min(y, y + height)}px`,
                 width: `${Math.abs(width)}px`,
-                height: `${Math.abs(height)}px`
+                height: `${Math.abs(height)}px`,
             } }));
     }
     renderContextMenu() {
@@ -700,10 +715,10 @@ export class XWorkflow {
             id: `node-${Date.now()}`,
             position: {
                 x: (clientX - rect.left - x) / zoom,
-                y: (clientY - rect.top - y) / zoom
+                y: (clientY - rect.top - y) / zoom,
             },
             data: { label: 'New Node' },
-            zIndex: 10
+            zIndex: 10,
         });
     }
     startConnection(e, nodeId, handle) {
@@ -726,7 +741,7 @@ export class XWorkflow {
             startX: hPos.x,
             startY: hPos.y,
             mouseX: (clientX - rect.left - x) / zoom,
-            mouseY: (clientY - rect.top - y) / zoom
+            mouseY: (clientY - rect.top - y) / zoom,
         };
         this.proximityPreview = null; // Clear any existing previews
         this.startConnectionHandler(nodeId, 'source');
@@ -745,7 +760,7 @@ export class XWorkflow {
                 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 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 };
@@ -775,7 +790,7 @@ export class XWorkflow {
             points: this.tool === 'freehand' ? [{ x, y }] : [],
             width: 0,
             height: 0,
-            style: { stroke: '#111', strokeWidth: '2', fill: 'none' }
+            style: { stroke: '#111', strokeWidth: '2', fill: 'none' },
         };
     }
     renderDrawing(d) {
@@ -783,7 +798,7 @@ export class XWorkflow {
             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 }));
+            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) {
@@ -824,7 +839,7 @@ export class XWorkflow {
         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" })));
+        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"; }

package/dist/collection/components/x-workflow-builder/x-workflow-builder.css

@@ -96,6 +96,7 @@
   --x-color-text-label: rgba(0, 0, 0, 0.65);
   --x-color-text-description: rgba(0, 0, 0, 0.45);
   --x-color-text-light-solid: #ffffff;
+  --x-color-text-processing: #ffffff;
   /** Background Colors **/
   --x-color-bg-container: #ffffff;
   --x-color-bg-elevated: #ffffff;
@@ -138,8 +139,10 @@
   --x-color-light-shade: #d7d8da;
   --x-color-light-tint: #f5f6f9;
   /** Font Family **/
-  --x-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --x-font-family-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  --x-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --x-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   /** Font Sizes **/
   --x-font-size: 14px;
   --x-font-size-sm: 12px;

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

@@ -179,7 +179,7 @@ export class XWorkflowBuilder {
             } }, h("x-icon", { name: this.gridVisible ? 'grid_on' : 'grid_off', size: 16 }))))));
     }
     renderRightSider() {
-        return (h("x-sider", { width: 320, theme: "light", class: "properties-sider" }, h("div", { class: "sider-header" }, h("x-icon", { name: "tune", size: 18 }), h("x-typography", { type: "title", level: 4, style: { margin: '0' } }, "Properties")), this.selectedNode ? (h("div", { class: "node-editor" }, h("div", { class: "selected-node-info" }, h("x-tag", { color: "processing" }, this.selectedNode.type?.toUpperCase()), h("x-typography", { type: "text", strong: true }, this.selectedNode.id)), h("div", { class: "property-sections" }, h("div", { class: "property-section-title" }, "Content"), this.renderContentTab(), h("x-divider", { style: { margin: '16px 0' } }), h("div", { class: "property-section-title" }, "Design"), this.renderDesignTab(), h("x-divider", { style: { margin: '16px 0' } }), h("div", { class: "property-section-title" }, "Layout"), this.renderLayoutTab()))) : this.selectedEdge ? (() => {
+        return (h("x-sider", { width: 320, theme: "light", class: "properties-sider" }, h("div", { class: "sider-header" }, h("x-icon", { name: "tune", size: 18 }), h("x-typography", { type: "title", level: 4, style: { margin: '0' } }, "Properties")), this.selectedNode ? (h("div", { class: "node-editor" }, h("div", { class: "selected-node-info" }, h("x-tag", { color: "processing" }, this.selectedNode.type?.toUpperCase()), h("x-typography", { type: "text", strong: true }, this.selectedNode.id)), h("div", { class: "property-sections" }, h("div", { class: "property-section-title" }, "Content"), this.renderContentTab(), h("x-divider", { style: { margin: '16px 0' } }), h("div", { class: "property-section-title" }, "Design"), this.renderDesignTab(), h("x-divider", { style: { margin: '16px 0' } }), h("div", { class: "property-section-title" }, "Layout"), this.renderLayoutTab()))) : this.selectedEdge ? ((() => {
             const edge = this.selectedEdge;
             const style = edge.style || {};
             const strokeColor = style['stroke'] || '#b1b1b7';
@@ -190,7 +190,7 @@ export class XWorkflowBuilder {
                     const val = ev.detail.value;
                     this.edges = this.edges.map(e => (e.id === edge.id ? { ...e, label: val } : e));
                     this.selectedEdge = { ...edge, label: val };
-                } })), h("x-form-item", { label: "Source \u2192 Target" }, h("x-typography", { type: "text", disabled: true }, this.selectedEdge.source, " ", "\u2192", " ", this.selectedEdge.target)))), h("x-divider", { style: { margin: '16px 0' } }), h("div", { class: "property-section-title" }, "Design"), h("x-card", { bordered: false, size: "small", type: "inner" }, h("x-form", { layout: "vertical" }, h("x-form-item", { label: "Edge Type" }, h("x-select", { value: this.selectedEdge.type || 'default', onXChange: (ev) => {
+                } })), h("x-form-item", { label: 'Source \u2192 Target' }, h("x-typography", { type: "text", disabled: true }, this.selectedEdge.source, " ", '\u2192', " ", this.selectedEdge.target)))), h("x-divider", { style: { margin: '16px 0' } }), h("div", { class: "property-section-title" }, "Design"), h("x-card", { bordered: false, size: "small", type: "inner" }, h("x-form", { layout: "vertical" }, h("x-form-item", { label: "Edge Type" }, h("x-select", { value: this.selectedEdge.type || 'default', onXChange: (ev) => {
                     const val = ev.detail.value;
                     this.edges = this.edges.map(e => (e.id === edge.id ? { ...e, type: val } : e));
                     this.selectedEdge = { ...edge, type: val };
@@ -223,7 +223,7 @@ export class XWorkflowBuilder {
                     this.edges = this.edges.map(e => (e.id === edge.id ? { ...e, targetHandle: val } : e));
                     this.selectedEdge = { ...edge, targetHandle: val };
                 } }, h("x-select-option", { value: "top" }, "Top"), h("x-select-option", { value: "right" }, "Right"), h("x-select-option", { value: "bottom" }, "Bottom"), h("x-select-option", { value: "left" }, "Left"))))))))));
-        })() : (h("div", { class: "empty-selection" }, h("x-result", { status: "info", resultTitle: "No Selection", subTitle: "Select a node or edge to edit." }, h("div", { slot: "extra" }, h("x-button", { type: "primary", size: "small", onXClick: () => this.addNode('default') }, "Add Node"))))), h("div", { class: "global-config" }, h("x-divider", { orientation: "left" }, "Global Settings"), h("x-form", { layout: "vertical", size: "small" }, h("x-row", { gutter: [0, 16] }, h("x-col", { span: 24 }, h("x-form-item", { label: "Routing Mode" }, h("x-segmented", { value: this.edgeRoutingMode, options: [
+        })()) : (h("div", { class: "empty-selection" }, h("x-result", { status: "info", resultTitle: "No Selection", subTitle: "Select a node or edge to edit." }, h("div", { slot: "extra" }, h("x-button", { type: "primary", size: "small", onXClick: () => this.addNode('default') }, "Add Node"))))), h("div", { class: "global-config" }, h("x-divider", { orientation: "left" }, "Global Settings"), h("x-form", { layout: "vertical", size: "small" }, h("x-row", { gutter: [0, 16] }, h("x-col", { span: 24 }, h("x-form-item", { label: "Routing Mode" }, h("x-segmented", { value: this.edgeRoutingMode, options: [
                 { label: 'Fixed', value: 'fixed' },
                 { label: 'Auto', value: 'auto' },
             ], onXChange: (ev) => (this.edgeRoutingMode = ev.detail) }))), h("x-col", { span: 24 }, h("x-form-item", { label: "Toolbar Mode" }, h("x-select", { value: this.nodeToolbarMode, onXChange: (ev) => (this.nodeToolbarMode = ev.detail.value) }, h("x-select-option", { value: "selected" }, "On Select"), h("x-select-option", { value: "always" }, "Always"), h("x-select-option", { value: "hover" }, "On Hover")))), h("x-col", { span: 24 }, h("x-form-item", { label: "Snap to Grid" }, h("x-select", { value: this.snapToGrid.toString(), onXChange: (ev) => (this.snapToGrid = parseInt(ev.detail.value)) }, h("x-select-option", { value: "0" }, "Off"), h("x-select-option", { value: "10" }, "10px"), h("x-select-option", { value: "20" }, "20px"), h("x-select-option", { value: "50" }, "50px")))), h("x-col", { span: 24 }, h("x-form-item", { label: "Grid Style" }, h("x-segmented", { value: this.gridType, options: [
@@ -316,9 +316,9 @@ export class XWorkflowBuilder {
         return (h("x-card", { bordered: false, size: "small", type: "inner" }, h("x-form", { layout: "vertical" }, h("x-form-item", { label: "Z-Index" }, h("x-input-number", { value: node.zIndex || 10, onXChange: (ev) => (this.nodes = this.nodes.map(n => (n.id === node.id ? { ...n, zIndex: ev.detail.value } : n))) })), h("x-form-item", { label: "Resizable" }, h("x-switch", { checked: node.resizable, onXChange: (ev) => (this.nodes = this.nodes.map(n => (n.id === node.id ? { ...n, resizable: ev.detail } : n))) })))));
     }
     render() {
-        return (h(Host, { key: '0faccbdf9f2a3bac562a28492783d72ac9d85904' }, h("x-layout", { key: '674c830b74114a268525fecd51f2b6e36ffd2621', fixed: true, class: "builder-root" }, h("x-header", { key: 'd8fc35929a764c3ba412f92220ebaeb09dbbb5d7', class: "builder-header" }, h("x-flex", { key: '24037e3fd064f1bf88dd1ced6f497e7fac9907e3', align: "center", justify: "space-between" }, h("x-space", { key: 'b02059d2d9a24e38c4b8527eb7730bfa5d4fe9fc', size: "middle", align: "center" }, h("x-flex", { key: '22c7194ece550caf4e9318c0a86663832c043649', align: "center", gap: "8" }, h("x-icon", { key: 'e805b06acfaa1ef28166deadd8368155f2246c29', name: "hub", size: 24, color: "var(--x-primary-color)" }), h("x-typography", { key: '9b2034e63d14ee4597edb5fb1f9ede67851ba7bc', type: "title", level: 5, style: { margin: '0' } }, "XLabs Workflow Pro"))), h("x-space", { key: '6c52a2cca4b01c154add473b205e87e26638efaf', size: "small", align: "center" }, h("x-flex", { key: 'bb727e2f612c3d534b38be95f86d54f7fc426c48', align: "center", gap: "8" }, h("x-tooltip", { key: 'd937710e20370e27ea15e2eb04b4693adb2f05cb', tooltipTitle: "Import workflow from JSON" }, h("x-button", { key: 'e1d70e5e0f45851c7c12ae407f3c10707c031fb5', type: "default", onXClick: (_ev) => {
+        return (h(Host, { key: 'bad55b93956829853806a37b5bbd79987568b58e' }, h("x-layout", { key: '3b9b067fd110de263753472a187a2fded19ed4c7', fixed: true, class: "builder-root" }, h("x-header", { key: '5f07eb160fd29c7e9b4899e6ed08e684e37d923b', class: "builder-header" }, h("x-flex", { key: 'ebdfef5e3a35e3056f530ecef9e31bce6994440b', align: "center", justify: "space-between" }, h("x-space", { key: '6367f580ccca25457a2db77daf85235d4240632c', size: "middle", align: "center" }, h("x-flex", { key: '06d66e958bb3c3c4216ed349e401198b0ee6749e', align: "center", gap: "8" }, h("x-icon", { key: 'd58b467293e470943ae59778be6f64f3d891b503', name: "hub", size: 24, color: "var(--x-primary-color)" }), h("x-typography", { key: 'c97debb400798656775483cb3458e6764ab980b6', type: "title", level: 5, style: { margin: '0' } }, "XLabs Workflow Pro"))), h("x-space", { key: '67cd752411f4fabf4bb2f98526b03d09f1640f29', size: "small", align: "center" }, h("x-flex", { key: '5be6c491830ca000ddba7d949beb735c7a4ff232', align: "center", gap: "8" }, h("x-tooltip", { key: '6c879642b90f93320aea43ba2268df23011eea4a', tooltipTitle: "Import workflow from JSON" }, h("x-button", { key: '4637d288d27bce4bc89ebac163daed26ad03e232', type: "default", onXClick: (_ev) => {
                 this.importModalVisible = true;
-            } }, "Import")), h("x-dropdown", { key: 'fdf3302b1825141a07d1c1d87a578d9c8cae2cee' }, h("x-button", { key: '37fbb14fc1afcdf9f5c681302416615b2e06efac', type: "default", slot: "trigger" }, "Export ", h("x-icon", { key: 'f4176e5d46069165607466fc2a3a21ca03c7036a', name: "expand_more" })), h("x-menu", { key: '220f750110eeb4fbabded36fb56a5ec489892c2c', slot: "overlay" }, h("x-menu-item", { key: '071cf5aca5c26c03f0928b5073fac23563a170bb', onClick: () => this.exportJson() }, h("x-icon", { key: 'e6e485bf6b1065b4bf8e41945b5bfc5221d76423', name: "json" }), " Export JSON"), h("x-menu-item", { key: '2eff28ca8352e66676c6ade4f15f722c56b30135', onClick: () => this.exportAsImage() }, h("x-icon", { key: '098cd706b93d8bf1e7e96c1c0fe403c811f4600e', name: "image" }), " Export PNG"))), h("x-divider", { key: 'be1dbaf01a62a2e8fcf48443566dcaf245273afa', type: "vertical" }), h("x-tooltip", { key: 'a8b0a2afcacb9d85c7a3bfb59ba58387f627a758', tooltipTitle: "Toggle Dark/Light Mode" }, h("x-button", { key: '31327eb682df35d0ca6f7b899382162573e1e3a1', type: "text", onXClick: () => this.handleThemeToggle() }, h("x-icon", { key: 'be69001a8215b6d0b808697e2f6689eb673ba49c', name: this.theme === 'light' ? 'dark_mode' : 'light_mode' }))), h("x-flex", { key: '994850fd003567ee89c0192a25e83e234c10c7f7', align: "center", gap: "16" }, h("x-flex", { key: 'a05903aa8fd15576fb484d296e34da83083bd11f', align: "center", gap: "8" }, h("span", { key: 'b636943e65255ad669bf96813d2a9b313c57c054', style: { fontSize: '12px', color: '#64748b' } }, "Turbo"), h("x-switch", { key: '39fe9f954f8ca4be2d78ddb7fc72c1141194e9b4', checked: this.turboMode, onXChange: (e) => (this.turboMode = e.detail) })), h("x-tooltip", { key: '6988771c0453533a11cd7f86445d7c09a441fe69', tooltipTitle: "Force Layout" }, h("x-button", { key: '0744f1c1078df2326044c0fa713770b33fd95aed', type: "text", onXClick: () => this.handleForceLayout() }, h("x-icon", { key: '90cf5cca862b1058121de9431feca17e188c97b9', name: "auto_graph" }))), h("x-tooltip", { key: '265915fd6ca5a4ffca87cf32768b165799edb886', tooltipTitle: "Toggle Node Toolbar" }, h("x-button", { key: 'b448b0da6fc61e444ba7ef109566334436c803e7', type: this.nodeToolbarVisible ? 'primary' : 'text', size: "small", onXClick: () => (this.nodeToolbarVisible = !this.nodeToolbarVisible) }, h("x-icon", { key: 'dcc9969bdc8998aaaf36bd4397e6afe5966626fe', name: "construction" })))), h("x-button", { key: 'be82367deddb5d4686f0826e28d8455a2cd55f1a', type: "primary", onXClick: () => this.showMessage('Workflow saved to server!', 'success') }, "Save Workflow"))))), h("x-layout", { key: 'e4d585c24bdaf70a2e5cac037f72fb2f15d15f5f', hasSiderProp: true, class: "builder-main" }, this.renderLeftSider(), h("x-content", { key: '79da1d665a29f917203e543282bb7a4139b62c6c', class: "canvas-content" }, h("div", { key: '1643dc6ad989d1f5882fdc0f43b05ae69c9ba4c7', class: "canvas-wrapper" }, h("x-workflow", { key: 'f75cb6876a60fa3ef45464e55d2a1b02495d2c31', ref: el => (this.workflow = el), nodes: this.nodes, edges: this.edges, tool: this.activeTool, theme: this.theme, nodeToolbarVisible: this.nodeToolbarVisible, nodeToolbarMode: this.nodeToolbarMode, edgeRoutingMode: this.edgeRoutingMode, ...{ turboMode: this.turboMode }, snapToGridValue: this.snapToGrid, background: { variant: this.gridVisible ? (this.gridType === 'dots' ? 'dots' : 'lines') : 'dots' }, onXNodeClick: ev => this.handleNodeClick(ev), onXEdgeClick: ev => this.handleEdgeClick(ev.detail), onXNodesChange: ev => {
+            } }, "Import")), h("x-dropdown", { key: '2c0fb034f11b46db6b85dd8c41d29d5517459832' }, h("x-button", { key: '43d7ab08abffbaef5207ba0f97a64b2d700e4bc7', type: "default", slot: "trigger" }, "Export ", h("x-icon", { key: 'c560ac02985ba51750878da346ecc449af1a19c2', name: "expand_more" })), h("x-menu", { key: '9ff6ec6c9eb0dfc240a27694a53557f60108fd39', slot: "overlay" }, h("x-menu-item", { key: 'a22685b9abd02be69200827e342ad4e2610b041b', onClick: () => this.exportJson() }, h("x-icon", { key: 'a9d371391ebde36105404e205e42507a0f2768a6', name: "json" }), " Export JSON"), h("x-menu-item", { key: '50cbd839196d85b24542ecd18f43dbba8933542a', onClick: () => this.exportAsImage() }, h("x-icon", { key: '252d7a4159d9677a09edc0658b210727c3bf02ef', name: "image" }), " Export PNG"))), h("x-divider", { key: '1f710d9b464ebb8aa74b438ddc4c354ed3075eb4', type: "vertical" }), h("x-tooltip", { key: '816c9686282cabff3f7d1fd39f36bb354b432738', tooltipTitle: "Toggle Dark/Light Mode" }, h("x-button", { key: '195ab847fdb73a2ef10885a95919b2eb266bd173', type: "text", onXClick: () => this.handleThemeToggle() }, h("x-icon", { key: '81a935b0a3a0cbf429e7937ba0ee08b97a3fb75f', name: this.theme === 'light' ? 'dark_mode' : 'light_mode' }))), h("x-flex", { key: '2dffa71677ca04f2a15126d4535fdfd0fa332d30', align: "center", gap: "16" }, h("x-flex", { key: 'f25e325f1fcecb12c7abac967b6b892965b92e25', align: "center", gap: "8" }, h("span", { key: '3cd32970aca0f4cef1e2f8361ea094c8c2e2e5df', style: { fontSize: '12px', color: '#64748b' } }, "Turbo"), h("x-switch", { key: '0427d53bf97b3af731e46d2d5c43a525abae156a', checked: this.turboMode, onXChange: (e) => (this.turboMode = e.detail) })), h("x-tooltip", { key: 'b6d92e19a956fb1c4767bbcaf74afc20a5f5d50c', tooltipTitle: "Force Layout" }, h("x-button", { key: 'cd70fe9412ab728a8f73c694b77b609865874307', type: "text", onXClick: () => this.handleForceLayout() }, h("x-icon", { key: '9f7b3245dd8c9ac1eb3784e4f41aee1f39b121f2', name: "auto_graph" }))), h("x-tooltip", { key: 'c0298e14a86adf9a2d131b1403b87e170ba39450', tooltipTitle: "Toggle Node Toolbar" }, h("x-button", { key: '432d0bbf939608fa797aa947b513c742203d655e', type: this.nodeToolbarVisible ? 'primary' : 'text', size: "small", onXClick: () => (this.nodeToolbarVisible = !this.nodeToolbarVisible) }, h("x-icon", { key: 'a1e36f1ca9b47e70c20af5fb833aaf4f531e69d9', name: "construction" })))), h("x-button", { key: 'baa2504bf8c2cf749f93189b67d06e989e202bd0', type: "primary", onXClick: () => this.showMessage('Workflow saved to server!', 'success') }, "Save Workflow"))))), h("x-layout", { key: '2fc53708c53e15d603df5c61efa6854c6dfa6a9a', hasSiderProp: true, class: "builder-main" }, this.renderLeftSider(), h("x-content", { key: '7a8e94ea2d279884c3a375e40a31740237b86589', class: "canvas-content" }, h("div", { key: 'd77d3ee7f9a5d37089514b24681db10473734bca', class: "canvas-wrapper" }, h("x-workflow", { key: 'e1f650c9c8e9796c3ddc1470c05e15f37c6dd523', ref: el => (this.workflow = el), nodes: this.nodes, edges: this.edges, tool: this.activeTool, theme: this.theme, nodeToolbarVisible: this.nodeToolbarVisible, nodeToolbarMode: this.nodeToolbarMode, edgeRoutingMode: this.edgeRoutingMode, ...{ turboMode: this.turboMode }, snapToGridValue: this.snapToGrid, background: { variant: this.gridVisible ? (this.gridType === 'dots' ? 'dots' : 'lines') : 'dots' }, onXNodeClick: ev => this.handleNodeClick(ev), onXEdgeClick: ev => this.handleEdgeClick(ev.detail), onXNodesChange: ev => {
                 this.nodes = ev.detail;
                 const sel = this.nodes.find(n => n.selected);
                 if (sel) {
@@ -342,7 +342,7 @@ export class XWorkflowBuilder {
                 const workflow = this.el.shadowRoot?.querySelector('x-workflow');
                 if (workflow?.selectedEdges?.length === 0)
                     this.selectedEdge = null;
-            } }), this.renderFloatingControls(), h("x-float-button", { key: '39d836c7bb23aaf84579157570ea1735646c1f65', tooltip: "Recenter", onXClick: () => this.showMessage('Recenter logic here', 'info') }, h("x-icon", { key: 'e0f62bcf71a9c5d7ed35b8b21ce943ed2c1da114', slot: "icon", name: "center_focus_weak" })), h("x-float-button", { key: '95e6c4e2ab813e32694921fc4392444960f19184', tooltip: "Help", onXClick: () => this.showMessage('Workflow Builder Help', 'info') }, h("x-icon", { key: 'f86748e2f74b2f4b00d9f344e66dba70ac05ccc2', slot: "icon", name: "help_outline" })))), this.renderRightSider()), h("x-footer", { key: '67d036b3fbffbd5dba994cae365800a2ae160670', class: "builder-footer" }, h("x-space", { key: '34a71fad3b61d7fa9bfb9a304c994efe04e44005', size: "middle" }, h("x-badge", { key: '653453953d21e71c4f6143e5a1d2024cbce1242d', status: "processing", text: `Nodes: ${this.nodes.length}` }), h("x-divider", { key: '3dfc7e538647bda82e31df0a8cafca4a7fa2209e', type: "vertical" }), h("x-badge", { key: '45efad274387a274393e3c2d76d23ea93b57efba', status: "warning", text: `Edges: ${this.edges.length}` }), h("x-divider", { key: 'e2fdb7bf6d5530f3030527c1de27bc0bbf26a001', type: "vertical" }), h("x-typography", { key: 'b29d0f786981f20bdc7a0e489cef8fd5fd3c1f5e', type: "text", class: "viewport-info" }, "Zoom: ", Math.round(this.viewport.zoom * 100), "% | X: ", Math.round(this.viewport.x), " Y: ", Math.round(this.viewport.y))), h("div", { key: '78451993195deb5a8092dbed3f6b8b6366d48776', class: "footer-status" }, h("x-typography", { key: 'cba7d868c9ae149c8f5749a88f4cd9f3a0b7ede7', type: "text" }, "System Ready")))), h("div", { key: '07a20f58eb36afe52bacea4bbf7924dfb0b40c1b', class: "message-container" }, this.messages.map(msg => (h("x-message", { content: msg.content, type: msg.type, onXClose: () => this.handleMessageClose(msg.id) })))), h("x-modal", { key: '118d787f46866a103853fc68822dd88dc2ef0faa', visible: this.importModalVisible, title: "Import Workflow Definition", onXOk: () => this.handleImport(), onXCancel: () => (this.importModalVisible = false), okText: "Import Now", cancelText: "Cancel" }, h("x-alert", { key: 'ae0ed9cd468f9c440dbe77386d836bf7b9e8ae97', message: "Warning", description: "Importing a new JSON will overwrite your current workflow state.", type: "warning", showIcon: true, style: { marginBottom: '16px' } }), h("x-typography", { key: 'fb15c18c0a115dd73af8b65093f88062c8093e5e', type: "text" }, "Paste your JSON definition below:"), h("x-textarea", { key: '11fe3b5a2c30a67f69fe653731da4ea5e8ddde01', rows: 12, placeholder: '{ "nodes": [...], "edges": [...] }', value: this.importJson, onXChange: (ev) => (this.importJson = ev.detail) }))));
+            } }), this.renderFloatingControls(), h("x-float-button", { key: '61b3edaec3ec6217811cee9569eec3aa24abd4bc', tooltip: "Recenter", onXClick: () => this.showMessage('Recenter logic here', 'info') }, h("x-icon", { key: 'bf5966e6d4b4e09c327428f7870de5105580a2bf', slot: "icon", name: "center_focus_weak" })), h("x-float-button", { key: '60e57ddc7f6d7397d0b6a68c861e1f936c7823ac', tooltip: "Help", onXClick: () => this.showMessage('Workflow Builder Help', 'info') }, h("x-icon", { key: 'd554dabe7e7775d952a6f75dd0b44be0b3a4bdc8', slot: "icon", name: "help_outline" })))), this.renderRightSider()), h("x-footer", { key: 'f62458cda16b13ae60dfec840ff10aa96e8dcb12', class: "builder-footer" }, h("x-space", { key: 'e52e51e2bfd2be5d5149ac9104b4e0657a8fc3f4', size: "middle" }, h("x-badge", { key: '3a80ba4fc6f8791505ca49ea9c5e0be24e21eefb', status: "processing", text: `Nodes: ${this.nodes.length}` }), h("x-divider", { key: '5f986a59b01d30b0566473d250e57393998871ae', type: "vertical" }), h("x-badge", { key: 'bea01f78b597bcb78b92503ca466e29e554d4caa', status: "warning", text: `Edges: ${this.edges.length}` }), h("x-divider", { key: '6cb5bb05eb06728b5fc90d7528b436a1d383e36d', type: "vertical" }), h("x-typography", { key: 'a1862f0446972fd52d80eee786fe4b6a5715327c', type: "text", class: "viewport-info" }, "Zoom: ", Math.round(this.viewport.zoom * 100), "% | X: ", Math.round(this.viewport.x), " Y: ", Math.round(this.viewport.y))), h("div", { key: '9e9871f08fa8bfe9bb6d2924df54ef070d25ab25', class: "footer-status" }, h("x-typography", { key: '44d202659a060d227c591054b90655e6ca005346', type: "text" }, "System Ready")))), h("div", { key: '3520e2845da297cd47c8f7e5b63cd342988d9467', class: "message-container" }, this.messages.map(msg => (h("x-message", { content: msg.content, type: msg.type, onXClose: () => this.handleMessageClose(msg.id) })))), h("x-modal", { key: '879da576db1d6993986517c185c447ad758ffc0e', visible: this.importModalVisible, title: "Import Workflow Definition", onXOk: () => this.handleImport(), onXCancel: () => (this.importModalVisible = false), okText: "Import Now", cancelText: "Cancel" }, h("x-alert", { key: '017ecd3bcee9349df03e9cea3dc3db23429e3e79', message: "Warning", description: "Importing a new JSON will overwrite your current workflow state.", type: "warning", showIcon: true, style: { marginBottom: '16px' } }), h("x-typography", { key: 'd7e9cb287bb486b2d3d0067acb07294dfd19dd81', type: "text" }, "Paste your JSON definition below:"), h("x-textarea", { key: '94f865b191d3fedf2f6f942c87061aa150a8dbcf', rows: 12, placeholder: '{ "nodes": [...], "edges": [...] }', value: this.importJson, onXChange: (ev) => (this.importJson = ev.detail) }))));
     }
     static get is() { return "x-workflow-builder"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/index.js

@@ -3,3 +3,5 @@ export { message } from './components/x-message/message-service';
 export { Modal as modal } from './components/x-modal/modal-service';
 export { notification } from './components/x-notification/notification-service';
 export { SchemaBuilder } from './components/x-form-builder/services/schema/schema-builder';
+// X-Icon Types
+export { Icons } from './components/x-icon/icons';

package/dist/collection/locales/languages/mn_MN.js

@@ -12,7 +12,20 @@ export default {
             placeholder: 'Огноо сонгох',
             weekDays: ['Ня', 'Да', 'Мя', 'Ла', 'Пү', 'Ба', 'Бя'],
             monthsShort: ['1-р сар', '2-р сар', '3-р сар', '4-р сар', '5-р сар', '6-р сар', '7-р сар', '8-р сар', '9-р сар', '10-р сар', '11-р сар', '12-р сар'],
-            monthsFull: ['Нэгдүгээр сар', 'Хоёрдугаар сар', 'Гуравдугаар сар', 'Дөрөвдүгээр сар', 'Тавдугаар сар', 'Зургаадугаар сар', 'Долоодугаар сар', 'Наймдугаар сар', 'Есдүгээр сар', 'Аравдугаар сар', 'Арваннэгдүгээр сар', 'Арванхоёрдугаар сар'],
+            monthsFull: [
+                'Нэгдүгээр сар',
+                'Хоёрдугаар сар',
+                'Гуравдугаар сар',
+                'Дөрөвдүгээр сар',
+                'Тавдугаар сар',
+                'Зургаадугаар сар',
+                'Долоодугаар сар',
+                'Наймдугаар сар',
+                'Есдүгээр сар',
+                'Аравдугаар сар',
+                'Арваннэгдүгээр сар',
+                'Арванхоёрдугаар сар',
+            ],
             quarters: [
                 { label: 'Q1', months: '1-р - 3-р сар' },
                 { label: 'Q2', months: '4-р - 6-р сар' },

package/dist/collection/locales/locale.service.js

@@ -35,14 +35,14 @@ export function getLocaleData(code) {
  *
  * @example
  * ```ts
- * import { setLocale } from '@xlabs/core/locales';
+ * import { setLocale } from '@xlabs-store/core/locales';
  * setLocale('vi_VN');
  * ```
  */
 export function setLocale(code) {
     currentLocaleCode = code;
     const data = getLocaleData(code);
-    listeners.forEach((fn) => fn(currentLocaleCode, data));
+    listeners.forEach(fn => fn(currentLocaleCode, data));
 }
 /**
  * Register a custom locale.
@@ -53,7 +53,7 @@ export function setLocale(code) {
  *
  * @example
  * ```ts
- * import { registerLocale } from '@xlabs/core/locales';
+ * import { registerLocale } from '@xlabs-store/core/locales';
  * registerLocale('ja_JP', {
  *   locale: 'ja',
  *   Modal: { okText: 'はい', cancelText: 'いいえ', justOkText: 'はい' },
@@ -163,12 +163,7 @@ function interpolate(message, params) {
 function deepMerge(target, source) {
     const output = { ...target };
     for (const key of Object.keys(source)) {
-        if (source[key] &&
-            typeof source[key] === 'object' &&
-            !Array.isArray(source[key]) &&
-            target[key] &&
-            typeof target[key] === 'object' &&
-            !Array.isArray(target[key])) {
+        if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key]) && target[key] && typeof target[key] === 'object' && !Array.isArray(target[key])) {
             output[key] = deepMerge(target[key], source[key]);
         }
         else {