@xlabs-store/core 0.0.1

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

@@ -0,0 +1,468 @@
+import { h, Host } from "@stencil/core";
+export class XWorkflowBuilder {
+    el;
+    /**
+     * Initial nodes to load into the builder
+     */
+    initialNodes;
+    /**
+     * Initial edges to load into the builder
+     */
+    initialEdges;
+    /**
+     * Optional custom title for the builder
+     */
+    builderTitle = 'XLabs Workflow Pro';
+    nodes = [];
+    edges = [];
+    selectedNode = null;
+    selectedEdge = null;
+    viewport = { x: 0, y: 0, zoom: 1 };
+    activeTool = 'select';
+    theme = 'light';
+    turboMode = false;
+    snapToGrid = 10;
+    activeTab = 'content';
+    gridVisible = true;
+    gridType = 'dots';
+    nodeToolbarVisible = true;
+    nodeToolbarMode = 'selected';
+    edgeRoutingMode = 'fixed';
+    // UI State
+    siderCollapsed = false;
+    importModalVisible = false;
+    importJson = '';
+    messages = [];
+    componentWillLoad() {
+        this.initializeFromProps();
+    }
+    handlePropsChange() {
+        this.initializeFromProps();
+    }
+    initializeFromProps() {
+        if (this.initialNodes) {
+            try {
+                this.nodes = typeof this.initialNodes === 'string' ? JSON.parse(this.initialNodes) : [...this.initialNodes];
+            }
+            catch (e) {
+                console.error('Failed to parse initialNodes', e);
+            }
+        }
+        else {
+            // Default fallback nodes
+            this.nodes = [
+                { id: '1', position: { x: 250, y: 150 }, data: { label: 'Input Node' }, type: 'input', zIndex: 10, resizable: true },
+                { id: '2', position: { x: 100, y: 100 }, data: { label: 'Parent Group' }, type: 'group', width: 400, height: 300, resizable: true, className: 'group-node', zIndex: 1 },
+                { id: '3', position: { x: 120, y: 120 }, data: { label: 'Child Node' }, parentId: '2', zIndex: 11 },
+            ];
+        }
+        if (this.initialEdges) {
+            try {
+                this.edges = typeof this.initialEdges === 'string' ? JSON.parse(this.initialEdges) : [...this.initialEdges];
+            }
+            catch (e) {
+                console.error('Failed to parse initialEdges', e);
+            }
+        }
+        else if (!this.initialNodes) {
+            this.edges = [{ id: 'e1-3', source: '1', target: '3', animated: true }];
+        }
+    }
+    workflow;
+    showMessage(content, type = 'info') {
+        const id = Date.now().toString();
+        this.messages = [...this.messages, { id, content, type }];
+    }
+    handleMessageClose(id) {
+        this.messages = this.messages.filter(m => m.id !== id);
+    }
+    addNode(type = 'default') {
+        const id = Date.now().toString();
+        const newNode = {
+            id,
+            position: { x: 400, y: 300 },
+            data: { label: `New ${type} Node` },
+            type,
+            shape: type === 'branch' ? 'diamond' : undefined,
+            width: type === 'branch' ? 100 : 150,
+            height: type === 'branch' ? 100 : 48,
+            resizable: true,
+            zIndex: 10,
+        };
+        this.nodes = [...this.nodes, newNode];
+        this.showMessage(`${type.charAt(0).toUpperCase() + type.slice(1)} node added`, 'success');
+    }
+    handleUndo() {
+        const workflow = this.el.shadowRoot?.querySelector('x-workflow');
+        if (workflow?.service) {
+            workflow.service.undo();
+            this.showMessage('Undo successful', 'info');
+        }
+    }
+    handleRedo() {
+        const workflow = this.el.shadowRoot?.querySelector('x-workflow');
+        if (workflow?.service) {
+            workflow.service.redo();
+            this.showMessage('Redo successful', 'info');
+        }
+    }
+    handleNodeClick(e) {
+        this.selectedNode = e.detail;
+        this.selectedEdge = null;
+    }
+    handleEdgeClick(edge) {
+        this.selectedEdge = edge;
+        this.selectedNode = null;
+    }
+    updateNodeData(id, data) {
+        this.nodes = this.nodes.map(n => {
+            if (n.id === id) {
+                return { ...n, data: { ...n.data, ...data } };
+            }
+            return n;
+        });
+        const updated = this.nodes.find(n => n.id === id);
+        if (updated && this.selectedNode?.id === id) {
+            this.selectedNode = updated;
+        }
+    }
+    updateNodeStyles(id, style) {
+        this.nodes = this.nodes.map(n => {
+            if (n.id === id) {
+                return { ...n, style: { ...(n.style || {}), ...style } };
+            }
+            return n;
+        });
+        const updated = this.nodes.find(n => n.id === id);
+        if (updated && this.selectedNode?.id === id) {
+            this.selectedNode = updated;
+        }
+    }
+    handleAutoLayout() {
+        const workflow = this.el.shadowRoot?.querySelector('x-workflow');
+        if (workflow?.service) {
+            workflow.service.autoLayout();
+            this.showMessage('Auto layout applied', 'info');
+        }
+    }
+    handleDelete() {
+        const workflow = this.el.shadowRoot?.querySelector('x-workflow');
+        if (workflow?.service) {
+            workflow.service.deleteSelected();
+            this.showMessage('Selection deleted', 'info');
+        }
+    }
+    handleGroup() {
+        if (this.workflow) {
+            this.workflow.groupSelected();
+            this.showMessage('Cells grouped', 'success');
+        }
+    }
+    renderLeftSider() {
+        return (h("x-sider", { collapsible: true, collapsed: this.siderCollapsed, onXCollapse: ev => (this.siderCollapsed = ev.detail), width: 260, theme: "light", class: "toolbox-sider" }, h("div", { class: "toolbox-content" }, h("div", { class: "toolbox-section" }, h("div", { class: "toolbox-section-header" }, "Elements"), h("x-row", null, [
+            { type: 'input', label: 'Input', icon: 'login', color: '#1890ff' },
+            { type: 'default', label: 'Process', icon: 'settings', color: '#52c41a' },
+            { type: 'output', label: 'Output', icon: 'logout', color: '#f5222d' },
+        ].map(item => (h("x-col", { span: 24 }, h("x-card", { hoverable: true, bordered: true, class: "palette-card", onClick: () => this.addNode(item.type) }, h("div", { class: "palette-card-content" }, h("x-icon", { name: item.icon, size: 20, color: item.color }), h("x-typography", { type: "text" }, item.label)))))))), h("x-divider", { style: { margin: '16px 0' } }), h("div", { class: "toolbox-section" }, h("div", { class: "toolbox-section-header" }, "Logic & Data"), h("x-row", null, [
+            { type: 'branch', label: 'Branch', icon: 'alt_route', color: '#faad14' },
+            { type: 'group', label: 'Group', icon: 'crop_free', color: '#722ed1' },
+        ].map(item => (h("x-col", { span: 24 }, h("x-card", { hoverable: true, bordered: true, class: "palette-card", onClick: () => this.addNode(item.type) }, h("div", { class: "palette-card-content" }, h("x-icon", { name: item.icon, size: 20, color: item.color }), h("x-typography", { type: "text" }, item.label)))))))))));
+    }
+    renderFloatingControls() {
+        return (h("div", { class: "canvas-floating-controls" }, h("x-segmented", { value: this.activeTool, options: [
+                { label: 'Select', value: 'select' },
+                { label: 'Draw', value: 'freehand' },
+                { label: 'Rect', value: 'rectangle' },
+                { label: 'Eraser', value: 'eraser' },
+            ], onXChange: (ev) => (this.activeTool = ev.detail.value) }), h("x-divider", { type: "vertical" }), h("x-space", { size: "small" }, h("x-tooltip", { tooltipTitle: "Undo (Ctrl+Z)" }, h("x-button", { type: "text", onXClick: () => this.handleUndo() }, h("x-icon", { name: "undo", size: 16 }))), h("x-tooltip", { tooltipTitle: "Redo (Ctrl+Y)" }, h("x-button", { type: "text", onXClick: () => this.handleRedo() }, h("x-icon", { name: "redo", size: 16 }))), h("x-tooltip", { tooltipTitle: "Auto Layout" }, h("x-button", { type: "text", onXClick: () => this.handleAutoLayout() }, h("x-icon", { name: "grid_view", size: 16 }))), h("x-tooltip", { tooltipTitle: "Delete Selection (Del)" }, h("x-button", { type: "text", onXClick: () => this.handleDelete() }, h("x-icon", { name: "delete", size: 16, color: "#ff4d4f" }))), h("x-tooltip", { tooltipTitle: "Group Selection" }, h("x-button", { type: "text", onXClick: () => this.handleGroup() }, h("x-icon", { name: "group_work", size: 16, color: "var(--x-primary-color)" }))), h("x-divider", { type: "vertical" }), h("x-tooltip", { tooltipTitle: "Toggle Grid" }, h("x-button", { type: "text", onXClick: (_ev) => {
+                this.gridVisible = !this.gridVisible;
+            } }, 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 ? (() => {
+            const edge = this.selectedEdge;
+            const style = edge.style || {};
+            const strokeColor = style['stroke'] || '#b1b1b7';
+            const strokeWidth = parseInt(style['strokeWidth'] || '2');
+            const strokeDash = style['strokeDasharray'];
+            const strokeStyle = strokeDash ? (strokeDash === '5,5' ? 'dashed' : 'dotted') : 'solid';
+            return (h("div", { class: "edge-editor" }, h("div", { class: "selected-node-info" }, h("x-tag", { color: "warning" }, "EDGE"), h("x-typography", { type: "text", strong: true }, edge.id)), h("div", { class: "property-sections" }, h("div", { class: "property-section-title" }, "Content"), h("x-card", { bordered: false, size: "small", type: "inner" }, h("x-form", { layout: "vertical" }, h("x-form-item", { label: "Label" }, h("x-input", { value: this.selectedEdge.label || '', onXChange: (ev) => {
+                    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) => {
+                    const val = ev.detail.value;
+                    this.edges = this.edges.map(e => (e.id === edge.id ? { ...e, type: val } : e));
+                    this.selectedEdge = { ...edge, type: val };
+                } }, h("x-select-option", { value: "default" }, "Bezier (Curve)"), h("x-select-option", { value: "straight" }, "Linear (Straight)"), h("x-select-option", { value: "step" }, "Step"), h("x-select-option", { value: "smoothstep" }, "Smooth Step"))), h("x-form-item", { label: "Stroke Color" }, h("x-color-picker", { value: strokeColor, onXChange: (ev) => {
+                    const val = ev.detail.value;
+                    const nStyle = { ...(style || {}), stroke: val };
+                    this.edges = this.edges.map(e => (e.id === edge.id ? { ...e, style: nStyle } : e));
+                    this.selectedEdge = { ...edge, style: nStyle };
+                } })), h("x-form-item", { label: "Stroke Width" }, h("x-slider", { min: 1, max: 10, value: strokeWidth, onXChange: (ev) => {
+                    const val = ev.detail + '';
+                    const nStyle = { ...(style || {}), strokeWidth: val };
+                    this.edges = this.edges.map(e => (e.id === edge.id ? { ...e, style: nStyle } : e));
+                    this.selectedEdge = { ...edge, style: nStyle };
+                } })), h("x-form-item", { label: "Animated" }, h("x-switch", { checked: this.selectedEdge.animated, onXChange: (ev) => {
+                    const val = ev.detail;
+                    this.edges = this.edges.map(e => (e.id === edge.id ? { ...e, animated: val } : e));
+                    this.selectedEdge = { ...edge, animated: val };
+                } })), h("x-form-item", { label: "Stroke Style" }, h("x-select", { value: strokeStyle, onXChange: (ev) => {
+                    const val = ev.detail.value;
+                    const dash = val === 'dashed' ? '5,5' : val === 'dotted' ? '2,2' : undefined;
+                    const nStyle = { ...(style || {}), strokeDasharray: dash };
+                    this.edges = this.edges.map(e => (e.id === edge.id ? { ...e, style: nStyle } : e));
+                    this.selectedEdge = { ...edge, style: nStyle };
+                } }, h("x-select-option", { value: "solid" }, "Solid"), h("x-select-option", { value: "dashed" }, "Dashed"), h("x-select-option", { value: "dotted" }, "Dotted"))), h("x-divider", { plain: true, style: { fontSize: '11px', margin: '8px 0' } }, "Handle Routing"), h("x-row", { gutter: 8 }, h("x-col", { span: 12 }, h("x-form-item", { label: "Src" }, h("x-select", { size: "small", value: this.selectedEdge.sourceHandle || 'right', onXChange: (ev) => {
+                    const val = ev.detail.value;
+                    this.edges = this.edges.map(e => (e.id === edge.id ? { ...e, sourceHandle: val } : e));
+                    this.selectedEdge = { ...edge, sourceHandle: 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("x-col", { span: 12 }, h("x-form-item", { label: "Tgt" }, h("x-select", { size: "small", value: this.selectedEdge.targetHandle || 'left', onXChange: (ev) => {
+                    const val = ev.detail.value;
+                    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: [
+                { 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: [
+                { label: 'Dots', value: 'dots' },
+                { label: 'Lines', value: 'lines' },
+            ], onXChange: (ev) => (this.gridType = ev.detail) }))))))));
+    }
+    handleThemeToggle() {
+        this.theme = this.theme === 'light' ? 'dark' : 'light';
+        this.showMessage(`Switched to ${this.theme} mode`, 'info');
+    }
+    handleForceLayout() {
+        if (this.workflow) {
+            this.workflow.forceLayout();
+            this.showMessage('Force layout applied', 'info');
+        }
+    }
+    async exportAsImage() {
+        const workflow = this.el.shadowRoot?.querySelector('x-workflow');
+        const container = workflow?.shadowRoot?.querySelector('.workflow-container');
+        if (!container)
+            return;
+        this.showMessage('Generating image...', 'loading');
+        const svg = container.querySelector('svg');
+        const svgData = new XMLSerializer().serializeToString(svg);
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        const img = new Image();
+        const rect = container.getBoundingClientRect();
+        canvas.width = rect.width;
+        canvas.height = rect.height;
+        const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
+        const url = URL.createObjectURL(svgBlob);
+        img.onload = () => {
+            ctx.fillStyle = 'white';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            ctx.drawImage(img, 0, 0);
+            const pngUrl = canvas.toDataURL('image/png');
+            const downloadLink = document.createElement('a');
+            downloadLink.href = pngUrl;
+            downloadLink.download = 'workflow-export.png';
+            downloadLink.click();
+            URL.revokeObjectURL(url);
+            this.showMessage('Image exported successfully', 'success');
+        };
+        img.src = url;
+    }
+    exportJson() {
+        const workflow = this.el.shadowRoot?.querySelector('x-workflow');
+        const data = workflow?.service ? workflow.service.getFullState() : { nodes: this.nodes, edges: this.edges, viewport: this.viewport };
+        const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'workflow.json';
+        a.click();
+        URL.revokeObjectURL(url);
+        this.showMessage('JSON exported successfully', 'success');
+    }
+    handleImport() {
+        try {
+            const data = JSON.parse(this.importJson);
+            if (data.nodes)
+                this.nodes = data.nodes;
+            if (data.edges)
+                this.edges = data.edges;
+            this.importModalVisible = false;
+            this.showMessage('Workflow imported successfully', 'success');
+        }
+        catch {
+            this.showMessage('Invalid JSON format', 'error');
+        }
+    }
+    renderContentTab() {
+        const node = this.selectedNode;
+        if (!node)
+            return null;
+        return (h("x-card", { bordered: false, size: "small", type: "inner" }, h("x-form", { layout: "vertical" }, h("x-form-item", { label: "Label" }, h("x-input", { value: node.data.label, onXChange: (ev) => this.updateNodeData(node.id, { label: ev.detail.value }) })), h("x-form-item", { label: "Node ID" }, h("x-input", { value: node.id, disabled: true })))));
+    }
+    renderDesignTab() {
+        const node = this.selectedNode;
+        if (!node)
+            return null;
+        return (h("x-card", { bordered: false, size: "small", type: "inner" }, h("x-form", { layout: "vertical" }, h("x-row", { gutter: 16 }, h("x-col", { span: 12 }, h("x-form-item", { label: "Width" }, h("x-input-number", { value: node.width || 150, onXChange: (ev) => this.updateNodeStyles(node.id, { width: ev.detail.value }) }))), h("x-col", { span: 12 }, h("x-form-item", { label: "Height" }, h("x-input-number", { value: node.height || 48, onXChange: (ev) => this.updateNodeStyles(node.id, { height: ev.detail.value }) })))), h("x-form-item", { label: "Background Color" }, h("x-color-picker", { value: node.style?.background || '#ffffff', onXChange: (ev) => this.updateNodeStyles(node.id, { background: ev.detail.value }) })), h("x-form-item", { label: "Border Radius" }, h("x-slider", { min: 0, max: 24, value: parseInt(node.style?.borderRadius || '6'), onXChange: (ev) => this.updateNodeStyles(node.id, { borderRadius: ev.detail + 'px' }) })))));
+    }
+    renderLayoutTab() {
+        const node = this.selectedNode;
+        if (!node)
+            return null;
+        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) => {
+                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 => {
+                this.nodes = ev.detail;
+                const sel = this.nodes.find(n => n.selected);
+                if (sel) {
+                    this.selectedNode = sel;
+                    this.selectedEdge = null;
+                }
+                else if (!this.selectedEdge) {
+                    this.selectedNode = null;
+                }
+            }, onXEdgesChange: ev => {
+                this.edges = ev.detail;
+                const sel = this.edges.find(e => e.selected);
+                if (sel) {
+                    this.selectedEdge = sel;
+                    this.selectedNode = null;
+                }
+                else if (!this.selectedNode) {
+                    this.selectedEdge = null;
+                }
+            }, onXConnect: (ev) => console.log('Connected:', ev.detail), onXViewportChange: ev => (this.viewport = ev.detail), onClick: () => {
+                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) }))));
+    }
+    static get is() { return "x-workflow-builder"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-workflow-builder.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-workflow-builder.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "initialNodes": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "XNode[] | string",
+                    "resolved": "XNode<Record<string, unknown>>[] | string",
+                    "references": {
+                        "XNode": {
+                            "location": "import",
+                            "path": "../../utils/workflow/types",
+                            "id": "src/utils/workflow/types.ts::XNode",
+                            "referenceLocation": "XNode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial nodes to load into the builder"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "initial-nodes"
+            },
+            "initialEdges": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "XEdge[] | string",
+                    "resolved": "XEdge<Record<string, unknown>>[] | string",
+                    "references": {
+                        "XEdge": {
+                            "location": "import",
+                            "path": "../../utils/workflow/types",
+                            "id": "src/utils/workflow/types.ts::XEdge",
+                            "referenceLocation": "XEdge"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial edges to load into the builder"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "initial-edges"
+            },
+            "builderTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional custom title for the builder"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "builder-title",
+                "defaultValue": "'XLabs Workflow Pro'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "nodes": {},
+            "edges": {},
+            "selectedNode": {},
+            "selectedEdge": {},
+            "viewport": {},
+            "activeTool": {},
+            "theme": {},
+            "turboMode": {},
+            "snapToGrid": {},
+            "activeTab": {},
+            "gridVisible": {},
+            "gridType": {},
+            "nodeToolbarVisible": {},
+            "nodeToolbarMode": {},
+            "edgeRoutingMode": {},
+            "siderCollapsed": {},
+            "importModalVisible": {},
+            "importJson": {},
+            "messages": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "initialNodes",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "initialEdges",
+                "methodName": "handlePropsChange"
+            }];
+    }
+}

package/dist/collection/index.js

@@ -0,0 +1,5 @@
+export * from './components';
+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';

package/dist/collection/locales/index.js

@@ -0,0 +1,2 @@
+export { getLocaleCode, getLocaleData, setLocale, registerLocale, onLocaleChange, translate } from './locale.service';
+export * from './languages';

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

@@ -0,0 +1,120 @@
+export default {
+    locale: 'ar_EG',
+    Pagination: {
+        items_per_page: '/ صفحة',
+        jump_to: 'انتقل إلى',
+        page: 'صفحة',
+        prev_page: 'الصفحة السابقة',
+        next_page: 'الصفحة التالية',
+    },
+    DatePicker: {
+        lang: {
+            placeholder: 'اختر التاريخ',
+            weekDays: ['أح', 'إث', 'ثل', 'أر', 'خم', 'جم', 'سب'],
+            monthsShort: ['ينا', 'فبر', 'مار', 'أبر', 'ماي', 'يون', 'يول', 'أغس', 'سبت', 'أكت', 'نوف', 'ديس'],
+            monthsFull: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو', 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'],
+            quarters: [
+                { label: 'الربع 1', months: 'ينا - مار' },
+                { label: 'الربع 2', months: 'أبر - يون' },
+                { label: 'الربع 3', months: 'يول - سب' },
+                { label: 'الربع 4', months: 'أكت - ديس' },
+            ],
+            today: 'اليوم',
+            now: 'الآن',
+            ok: 'OK',
+            hour: 'ساعة',
+            minute: 'دقيقة',
+            second: 'ثانية',
+            am: 'AM',
+            pm: 'PM',
+            ampm: 'AM/PM',
+            week: 'أسبوع',
+        },
+    },
+    TimePicker: {
+        placeholder: 'اختر الوقت',
+    },
+    global: {
+        close: 'إغلاق',
+        go: 'اذهب',
+    },
+    Table: {
+        filterConfirm: 'OK',
+        filterReset: 'إعادة تعيين',
+    },
+    Modal: {
+        okText: 'OK',
+        cancelText: 'إلغاء',
+    },
+    Popconfirm: {
+        okText: 'OK',
+        cancelText: 'إلغاء',
+    },
+    Transfer: {
+        title: {
+            source: 'المصدر',
+            target: 'الهدف',
+        },
+        searchPlaceholder: 'بحث',
+        notFoundContent: 'لا توجد بيانات',
+    },
+    Empty: {
+        description: 'لا توجد بيانات',
+    },
+    TreeSelect: {
+        placeholder: 'يرجى الاختيار',
+        notFoundContent: 'لا توجد بيانات',
+    },
+    Cascader: {
+        placeholder: 'يرجى الاختيار',
+        notFoundContent: 'لا توجد بيانات',
+    },
+    RangePicker: {
+        startPlaceholder: 'تاريخ البدء',
+        endPlaceholder: 'تاريخ الانتهاء',
+    },
+    Editor: {
+        placeholder: 'ابدأ الكتابة...',
+        undo: 'تراجع (Ctrl+Z)',
+        redo: 'إعادة (Ctrl+Shift+Z)',
+        bold: 'غامق (Ctrl+B)',
+        italic: 'مائل (Ctrl+I)',
+        underline: 'تسطير (Ctrl+U)',
+        strikethrough: 'خط عبر',
+        textColor: 'لون النص',
+        backgroundColor: 'لون الخلفية',
+        fontFamily: 'الخط',
+        fontSize: 'حجم الخط',
+        h1: 'عنوان 1',
+        h2: 'عنوان 2',
+        h3: 'عنوان 3',
+        h4: 'عنوان 4',
+        h5: 'عنوان 5',
+        h6: 'عنوان 6',
+        paragraph: 'فقرة',
+        blockquote: 'اقتباس',
+        codeBlock: 'كتلة كود',
+        alignLeft: 'محاذاة لليسار',
+        alignCenter: 'محاذاة للوسط',
+        alignRight: 'محاذاة لليمين',
+        alignJustify: 'محاذاة كاملة',
+        outdent: 'تقليل المسافة البادئة',
+        indent: 'زيادة المسافة البادئة',
+        insertLink: 'إدراج رابط',
+        insertImage: 'إدراج صورة',
+        insertVideo: 'إدراج فيديو',
+        insertFile: 'إدراج ملف',
+        insertTable: 'إدراج جدول',
+        horizontalLine: 'خط أفقي',
+    },
+    Drawer: {
+        close: 'إغلاق',
+    },
+    Image: {
+        preview: 'معاينة',
+    },
+    Select: {
+        placeholder: 'يرجى الاختيار',
+        notFoundContent: 'لا توجد بيانات',
+    },
+};