@acorex/modules 21.0.0-next.7 → 21.0.0-next.8

package/fesm2022/acorex-modules-workflow-management.mjs

@@ -1,17 +1,18 @@
 import * as i0 from '@angular/core';
-import { inject, Injector, Injectable, NgModule } from '@angular/core';
-import { AXPSessionService, AXP_PERMISSION_DEFINITION_PROVIDER } from '@acorex/platform/auth';
-import { AXPEntityService, ensureListActions, actionExists, AXP_ENTITY_ACTION_PLUGIN, AXMEntityCrudServiceImpl, entityMasterCrudActions, entityMasterRecordActions, AXPEntityStorageService } from '@acorex/platform/layout/entity';
+import { inject, Injector, Injectable, NgModule, output, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { AXPSessionService, AXP_PERMISSION_DEFINITION_PROVIDER, AXPAuthGuard } from '@acorex/platform/auth';
+import { AXPEntityService, ensureListActions, actionExists, AXP_ENTITY_ACTION_PLUGIN, AXMEntityCrudServiceImpl, entityMasterCrudActions, entityMasterRecordActions, AXPEntityStorageService, AXP_ENTITY_CONFIG_TOKEN, AXP_ENTITY_DEFINITION_LOADER } from '@acorex/platform/layout/entity';
 import { firstValueFrom } from 'rxjs';
 import { AXMCalendarManagementModule } from '@acorex/modules/calendar-management';
 import * as i1 from '@acorex/platform/workflow';
-import { AXPWorkflowAction, AXPWorkflowModule, AXPWorkflowManager, AXP_WORKFLOW_DEFINITION_LOADER, AXP_ACTIVITY_CATEGORY_PROVIDER, AXP_ACTIVITY_PROVIDER, AXP_WORKFLOW_CATEGORY_PROVIDER, AXP_WORKFLOW_PROVIDER } from '@acorex/platform/workflow';
+import { AXPWorkflowAction, AXPWorkflowModule, AXPWorkflowManager, AXP_WORKFLOW_DEFINITION_LOADER, AXP_ACTIVITY_CATEGORY_PROVIDER, AXP_ACTIVITY_PROVIDER, AXP_WORKFLOW_CATEGORY_PROVIDER, AXP_WORKFLOW_PROVIDER, AXPActivityDefinitionService } from '@acorex/platform/workflow';
 import { provideCommandSetups } from '@acorex/platform/runtime';
 import { AXPDataGenerator, AXP_MODULE_MANIFEST_PROVIDER } from '@acorex/platform/core';
+import { AXPEntityCommandScope, createAllQueryView, AXPEntityQueryType, AXP_MENU_PROVIDER } from '@acorex/platform/common';
 import * as i2 from '@acorex/platform/layout/widget-core';
 import { AXPWidgetGroupEnum, AXP_WIDGETS_LAYOUT_CATEGORY, AXPWidgetCoreModule, AXPWidgetsCatalog, AXPWidgetSerializationHelper } from '@acorex/platform/layout/widget-core';
-import { AXPEntityCommandScope, createAllQueryView, AXPEntityQueryType } from '@acorex/platform/common';
-import { AXTranslationService } from '@acorex/core/translation';
+import * as i4 from '@acorex/core/translation';
+import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
 import { AXPLayoutBuilderService, AXPDialogRendererComponent } from '@acorex/platform/layout/builder';
 import { AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY } from '@acorex/platform/layout/widgets';
 import { AXToastService } from '@acorex/components/toast';
@@ -19,7 +20,18 @@ import { AXPWidgetsList } from '@acorex/modules/common';
 import { AXDialogService } from '@acorex/components/dialog';
 import { AXPopupService } from '@acorex/components/popup';
 import { cloneDeep } from 'lodash-es';
-import { AXPDomainModule, provideEntity } from '@acorex/platform/domain';
+import { AXPDomainModule } from '@acorex/platform/domain';
+import { ROUTES } from '@angular/router';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i3 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import { AXTextBoxModule } from '@acorex/components/text-box';
+import { AXSelectBoxModule } from '@acorex/components/select-box';
+import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
+import { AXPCategoryTreeComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutStartSideComponent } from '@acorex/platform/layout/components';
 
 const config = {
     i18n: 'workflow-management',
@@ -36,14 +48,14 @@ const RootConfig = {
     entities: {
         workflowDefinition: {
             name: 'WorkflowDefinition',
-            source: `${config.module}.WorkflowDefinition`,
+            fullName: `${config.module}.WorkflowDefinition`,
             title: '@workflow-management:workflow-definitions.entities.workflow-definition.title',
             titlePlural: '@workflow-management:workflow-definitions.entities.workflow-definition.plural',
             icon: 'fa-light fa-diagram-project',
         },
         workflowInstance: {
             name: 'WorkflowInstance',
-            source: `${config.module}.WorkflowInstance`,
+            fullName: `${config.module}.WorkflowInstance`,
             title: '@workflow-management:workflow-instances.entities.workflow-instance.title',
             titlePlural: '@workflow-management:workflow-instances.entities.workflow-instance.plural',
             icon: 'fa-light fa-play-circle',
@@ -62,13 +74,13 @@ const RootConfig = {
             titlePlural: '@workflow-management:activities.entities.activity-definition.plural',
             icon: 'fa-light fa-puzzle-piece',
         },
-        workflowCategory: {
-            name: 'WorkflowCategory',
-            fullName: `${config.module}.WorkflowCategory`,
-            title: '@workflow-management:workflows.entities.workflow-category.title',
-            titlePlural: '@workflow-management:workflows.entities.workflow-category.plural',
-            icon: 'fa-light fa-folder',
-        },
+        // workflowCategory: {
+        //   name: 'WorkflowCategory',
+        //   fullName: `${config.module}.WorkflowCategory`,
+        //   title: '@workflow-management:workflows.entities.workflow-category.title',
+        //   titlePlural: '@workflow-management:workflows.entities.workflow-category.plural',
+        //   icon: 'fa-light fa-folder',
+        // },
     },
 };
 
@@ -90,6 +102,17 @@ class AXMWorkflowManagementModuleEntityProvider {
                     return (await Promise.resolve().then(function () { return workflowDefinition_entity; })).factory(this.injector);
                 case RootConfig.entities.workflowInstance.name:
                     return (await Promise.resolve().then(function () { return workflowInstance_entity; })).factory(this.injector);
+                case RootConfig.entities.activityDefinition.name:
+                    return {
+                        name: RootConfig.entities.activityDefinition.name,
+                        module: RootConfig.module.name,
+                        title: RootConfig.entities.activityDefinition.title,
+                        formats: {
+                            individual: RootConfig.entities.activityDefinition.title,
+                            plural: RootConfig.entities.activityDefinition.titlePlural,
+                        },
+                        properties: [],
+                    };
             }
         }
         return null;
@@ -105,6 +128,7 @@ const AXPWorkflowManagementMenuKeys = {
     Root: 'workflow-management:menu',
     WorkflowDefinitions: 'workflow-management:workflow-definitions',
     WorkflowInstances: 'workflow-management:workflow-instances',
+    WorkflowStudio: 'workflow-management:workflow-studio',
 };
 
 class AXMMenuProvider {
@@ -142,6 +166,13 @@ class AXMMenuProvider {
                         priority: 20,
                         icon: RootConfig.entities.workflowInstance.icon,
                     },
+                    {
+                        name: AXPWorkflowManagementMenuKeys.WorkflowStudio,
+                        text: '@workflow-management:workflow-studio.menus.workflow-studio.title',
+                        path: `${this.sessionService.application?.name}/workflow-management/studio`,
+                        priority: 30,
+                        icon: 'fa-light fa-wand-magic-sparkles',
+                    },
                 ],
             },
         ]);
@@ -1504,7 +1535,7 @@ class AXMWorkflowCategoryProvider {
     constructor() {
         //#region ----   Services & Dependencies   ----
         this.entityService = inject(AXPEntityService);
-        this.categoryService = this.entityService.withEntity(RootConfig.module.name, RootConfig.entities.workflowCategory?.name || 'WorkflowCategory').data();
+        this.categoryService = this.entityService.withEntity(RootConfig.module.name, 'WorkflowCategory').data();
     }
     //#endregion
     //#region ----   AXPWorkflowCategoryProvider Implementation   ----
@@ -2228,6 +2259,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
             type: Injectable
         }] });
 
+function routesFactory() {
+    const config = inject(AXP_ENTITY_CONFIG_TOKEN);
+    const routes = [
+        {
+            path: ':app/workflow-management/studio',
+            loadComponent: () => {
+                return config.viewers.root();
+            },
+            canActivate: [AXPAuthGuard],
+            data: { reuse: true },
+            children: [
+                {
+                    path: '',
+                    loadComponent: () => Promise.resolve().then(function () { return workflowStudio_component; }).then((c) => c.WorkflowStudioComponent),
+                },
+            ],
+        },
+    ];
+    return routes;
+}
 class AXMWorkflowManagementModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXMWorkflowManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.12", ngImport: i0, type: AXMWorkflowManagementModule, imports: [AXMCalendarManagementModule,
@@ -2236,17 +2287,30 @@ class AXMWorkflowManagementModule {
             AXMWorkflowManagementWorkflowDefinitionEntityModule,
             AXMWorkflowManagementWorkflowInstanceEntityModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXMWorkflowManagementModule, providers: [
+            {
+                provide: ROUTES,
+                multi: true,
+                useFactory: routesFactory,
+            },
             provideCommandSetups([
                 {
                     key: 'WorkflowManagement.WorkflowDefinition:Execute',
                     command: () => Promise.resolve().then(function () { return index; }).then((c) => c.ExecuteWorkflowCommand),
                 },
             ]),
-            provideEntity([
-                RootConfig.entities.activityCategory.fullName,
-                RootConfig.entities.activityDefinition.fullName,
-                RootConfig.entities.workflowCategory?.fullName || `${RootConfig.module.name}.WorkflowCategory`,
-            ]),
+            // provideEntity([RootConfig.entities.activityDefinition.fullName]),
+            // Entity Definition Loader
+            {
+                provide: AXP_ENTITY_DEFINITION_LOADER,
+                useClass: AXMWorkflowManagementModuleEntityProvider,
+                multi: true,
+            },
+            // Menu Provider
+            {
+                provide: AXP_MENU_PROVIDER,
+                useClass: AXMMenuProvider,
+                multi: true,
+            },
             // Module Manifest Provider
             {
                 provide: AXP_MODULE_MANIFEST_PROVIDER,
@@ -2303,17 +2367,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                         AXMWorkflowManagementWorkflowInstanceEntityModule,
                     ],
                     providers: [
+                        {
+                            provide: ROUTES,
+                            multi: true,
+                            useFactory: routesFactory,
+                        },
                         provideCommandSetups([
                             {
                                 key: 'WorkflowManagement.WorkflowDefinition:Execute',
                                 command: () => Promise.resolve().then(function () { return index; }).then((c) => c.ExecuteWorkflowCommand),
                             },
                         ]),
-                        provideEntity([
-                            RootConfig.entities.activityCategory.fullName,
-                            RootConfig.entities.activityDefinition.fullName,
-                            RootConfig.entities.workflowCategory?.fullName || `${RootConfig.module.name}.WorkflowCategory`,
-                        ]),
+                        // provideEntity([RootConfig.entities.activityDefinition.fullName]),
+                        // Entity Definition Loader
+                        {
+                            provide: AXP_ENTITY_DEFINITION_LOADER,
+                            useClass: AXMWorkflowManagementModuleEntityProvider,
+                            multi: true,
+                        },
+                        // Menu Provider
+                        {
+                            provide: AXP_MENU_PROVIDER,
+                            useClass: AXMMenuProvider,
+                            multi: true,
+                        },
                         // Module Manifest Provider
                         {
                             provide: AXP_MODULE_MANIFEST_PROVIDER,
@@ -2357,9 +2434,1596 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                 }]
         }] });
 
+//#region ----   Imports   ----
+//#endregion
+class AXMActivityCategoriesTreeComponent {
+    constructor() {
+        //#region ----   Services & Dependencies   ----
+        this.activityDefinitionService = inject(AXPActivityDefinitionService);
+        //#endregion
+        //#region ----   Output Events   ----
+        /**
+         * Emitted when a category node is clicked
+         */
+        this.categoryClick = output();
+        /**
+         * Emitted when an activity node is clicked
+         */
+        this.activityClick = output();
+        //#endregion
+        //#region ----   Category Tree Configuration   ----
+        /**
+         * Category tree data source
+         */
+        this.categoryTreeDataSource = {
+            loadRootNodes: async () => {
+                const categories = await this.activityDefinitionService.getCategories();
+                return this.mapCategoriesToEntities(categories);
+            },
+            loadChildNodes: async (parentId) => {
+                // Check if parentId is an activity (prefixed with 'activity_')
+                if (parentId.startsWith('activity_')) {
+                    return []; // Activities are leaf nodes
+                }
+                // Load child categories
+                const categories = await this.activityDefinitionService.getCategories(parentId);
+                const categoryEntities = this.mapCategoriesToEntities(categories);
+                // Load activities for this category
+                const activities = await this.activityDefinitionService.getActivitiesByCategoryId(parentId);
+                const activityEntities = this.mapActivitiesToEntities(activities, parentId);
+                // Return categories first, then activities
+                return [...categoryEntities, ...activityEntities];
+            },
+            searchNodes: async (searchValue) => {
+                // TODO: Implement search if needed
+                return [];
+            },
+        };
+        /**
+         * Category tree configuration
+         */
+        this.categoryTreeConfig = computed(() => ({
+            textField: 'title',
+            valueField: 'id',
+            expandedField: 'expand',
+            showCheckbox: false,
+            searchable: false,
+            emptyStateTitle: '@workflow-management:activities.components.activity-categories-tree.empty-state.title',
+            emptyStateDescription: '@workflow-management:activities.components.activity-categories-tree.empty-state.description',
+            emptyStateIcon: 'fa-light fa-folder-open',
+        }), ...(ngDevMode ? [{ debugName: "categoryTreeConfig" }] : []));
+        /**
+         * Category tree actions (disabled CRUD operations)
+         */
+        this.categoryTreeActions = computed(() => ({
+            canCreate: false,
+            canUpdate: false,
+            canDelete: false,
+            canCreateChild: false,
+        }), ...(ngDevMode ? [{ debugName: "categoryTreeActions" }] : []));
+        /**
+         * Category tree events
+         */
+        this.categoryTreeEvents = computed(() => ({
+            onNodeClick: (entity) => {
+                this.handleNodeClick(entity);
+            },
+        }), ...(ngDevMode ? [{ debugName: "categoryTreeEvents" }] : []));
+    }
+    //#endregion
+    //#region ----   Event Handlers   ----
+    /**
+     * Handle category tree node click events
+     */
+    handleNodeClick(entity) {
+        const activityEntity = entity;
+        if (activityEntity.itemType === 'category' && activityEntity.originalItem) {
+            this.categoryClick.emit(activityEntity.originalItem);
+        }
+        else if (activityEntity.itemType === 'activity' && activityEntity.originalItem) {
+            this.activityClick.emit(activityEntity.originalItem);
+        }
+    }
+    //#endregion
+    //#region ----   Utility Methods   ----
+    /**
+     * Map activity categories to category entities
+     */
+    mapCategoriesToEntities(categories) {
+        return categories.map((category) => ({
+            id: category.id,
+            title: category.title || category.id,
+            description: category.description,
+            parentId: category.parentId,
+            childrenCount: (category.childrenCount ?? 0) + (category.itemsCount ?? 0), // Include activities in children count
+            itemsCount: category.itemsCount,
+            originalItem: category,
+            itemType: 'category',
+        }));
+    }
+    /**
+     * Map activity definitions to category entities
+     */
+    mapActivitiesToEntities(activities, parentId) {
+        return activities.map((activity) => ({
+            id: `activity_${activity.type || activity.name}`,
+            title: activity.title || activity.name || activity.type,
+            description: activity.description,
+            parentId: parentId,
+            childrenCount: 0, // Activities are leaf nodes
+            itemsCount: 0,
+            originalItem: activity,
+            itemType: 'activity',
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXMActivityCategoriesTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXMActivityCategoriesTreeComponent, isStandalone: true, selector: "axp-activity-categories-tree", outputs: { categoryClick: "categoryClick", activityClick: "activityClick" }, host: { classAttribute: "axp-activity-categories-tree" }, ngImport: i0, template: "<axp-category-tree\n  [dataSource]=\"categoryTreeDataSource\"\n  [config]=\"categoryTreeConfig()\"\n  [actions]=\"categoryTreeActions()\"\n  [events]=\"categoryTreeEvents()\"\n  (nodeClick)=\"handleNodeClick($event)\"\n>\n</axp-category-tree>\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXPCategoryTreeComponent, selector: "axp-category-tree", inputs: ["dataSource", "config", "actions", "events"], outputs: ["nodeClick", "nodeSelect", "nodeCreate", "nodeUpdate", "nodeDelete", "searchChange", "collapseChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXMActivityCategoriesTreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-activity-categories-tree', standalone: true, imports: [CommonModule, AXPCategoryTreeComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'axp-activity-categories-tree' }, template: "<axp-category-tree\n  [dataSource]=\"categoryTreeDataSource\"\n  [config]=\"categoryTreeConfig()\"\n  [actions]=\"categoryTreeActions()\"\n  [events]=\"categoryTreeEvents()\"\n  (nodeClick)=\"handleNodeClick($event)\"\n>\n</axp-category-tree>\n\n" }]
+        }], propDecorators: { categoryClick: [{ type: i0.Output, args: ["categoryClick"] }], activityClick: [{ type: i0.Output, args: ["activityClick"] }] } });
+
+class WorkflowStudioComponent extends AXPPageLayoutBaseComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----   Services & Dependencies   ----
+        this.workflowManager = inject(AXPWorkflowManager);
+        this.activityDefinitionService = inject(AXPActivityDefinitionService);
+        this.entityService = inject(AXPEntityService);
+        this.translationService = inject(AXTranslationService);
+        //#endregion
+        //#region ----   State   ----
+        this.activeTab = signal('json', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+        this.selectedCategory = signal(null, ...(ngDevMode ? [{ debugName: "selectedCategory" }] : []));
+        this.selectedActivity = signal(null, ...(ngDevMode ? [{ debugName: "selectedActivity" }] : []));
+        this.workflowJson = signal(this.getEmptyWorkflow(), ...(ngDevMode ? [{ debugName: "workflowJson" }] : []));
+        this.visualNodes = signal([], ...(ngDevMode ? [{ debugName: "visualNodes" }] : []));
+        this.selectedNode = signal(null, ...(ngDevMode ? [{ debugName: "selectedNode" }] : []));
+        this.isExecuting = signal(false, ...(ngDevMode ? [{ debugName: "isExecuting" }] : []));
+        this.executionLogs = signal([], ...(ngDevMode ? [{ debugName: "executionLogs" }] : []));
+        this.executionResult = signal(null, ...(ngDevMode ? [{ debugName: "executionResult" }] : []));
+        // Execution Dialog State
+        this.showExecutionDialog = signal(false, ...(ngDevMode ? [{ debugName: "showExecutionDialog" }] : []));
+        this.workflowInstanceState = signal(null, ...(ngDevMode ? [{ debugName: "workflowInstanceState" }] : []));
+        // UI State
+        this.showPropertiesPanel = signal(true, ...(ngDevMode ? [{ debugName: "showPropertiesPanel" }] : []));
+        this.showWorkflowSettings = signal(false, ...(ngDevMode ? [{ debugName: "showWorkflowSettings" }] : []));
+        this.activeSettingsTab = signal('general', ...(ngDevMode ? [{ debugName: "activeSettingsTab" }] : []));
+        this.showExecutionResult = signal(false, ...(ngDevMode ? [{ debugName: "showExecutionResult" }] : []));
+        // Workflow Settings
+        this.workflowSettings = signal({
+            definitionId: '',
+            name: '',
+            description: '',
+            inputs: [],
+            outputs: [],
+            variables: [],
+            outcomes: ['Done'],
+            usableAsActivity: false,
+            autoUpdateConsumingWorkflows: false,
+            version: 1,
+            isLatest: true,
+            isPublished: false,
+            toolVersion: '1.0.0',
+            providerName: 'WorkflowStudio'
+        }, ...(ngDevMode ? [{ debugName: "workflowSettings" }] : []));
+        // Canvas state
+        this.canvasOffset = { x: 0, y: 0 };
+        this.isDraggingCanvas = false;
+        this.dragStartPos = { x: 0, y: 0 };
+        this.draggedActivity = null;
+        this.draggedNode = null;
+        this.nodeDragOffset = { x: 0, y: 0 };
+        this.connectionSource = null;
+        /**
+         * دسترسی به Object برای استفاده در template
+         */
+        this.Object = Object;
+        /**
+         * دسترسی به typeof برای استفاده در template
+         */
+        this.typeof = (value) => typeof value;
+        /**
+         * دسترسی به JSON برای استفاده در template
+         */
+        this.JSON = JSON;
+    }
+    async ngOnInit() {
+        // Page layout initialization
+        await super.ngOnInit();
+    }
+    //#endregion
+    //#region ----   Page Layout Overrides   ----
+    async getPageTitle() {
+        return await this.translationService.translateAsync('@workflow-management:workflow-studio.menus.workflow-studio.title');
+    }
+    async getPageDescription() {
+        return await this.translationService.translateAsync('@workflow-management:workflow-studio.menus.workflow-studio.description');
+    }
+    async getPrimaryMenuItems() {
+        return [
+            {
+                name: 'execute-workflow',
+                title: '@workflow-management:workflow-studio.actions.execute-workflow.title',
+                icon: 'fa-light fa-play',
+                color: 'success',
+                disabled: this.isExecuting(),
+            },
+            {
+                name: 'workflow-settings',
+                title: '@workflow-management:workflow-studio.actions.settings.title',
+                icon: 'fa-light fa-cog',
+                color: 'default',
+            },
+            {
+                name: 'export-workflow',
+                title: '@workflow-management:workflow-studio.actions.export.title',
+                icon: 'fa-light fa-download',
+                color: 'default',
+            },
+        ];
+    }
+    async getSecondaryMenuItems() {
+        return [
+            {
+                name: 'format-json',
+                title: '@workflow-management:workflow-studio.actions.format-json.title',
+                icon: 'fa-light fa-code',
+                color: 'default',
+            },
+            {
+                name: 'clear-canvas',
+                title: '@workflow-management:workflow-studio.actions.clear-canvas.title',
+                icon: 'fa-light fa-trash',
+                color: 'danger',
+                visible: this.activeTab() === 'visual',
+            },
+        ];
+    }
+    async execute(command) {
+        switch (command.name) {
+            case 'execute-workflow':
+                this.openExecutionDialog();
+                break;
+            case 'workflow-settings':
+                this.openWorkflowSettings();
+                break;
+            case 'export-workflow':
+                this.downloadWorkflowDefinition();
+                break;
+            case 'format-json':
+                this.formatJson();
+                break;
+            case 'clear-canvas':
+                this.clearCanvas();
+                break;
+        }
+    }
+    //#endregion
+    //#region ----   Category & Activity Loading   ----
+    /**
+     * Handle category selection from tree
+     */
+    onCategoryClick(category) {
+        this.selectedCategory.set(category);
+        this.selectedActivity.set(null);
+    }
+    /**
+     * Handle activity selection from tree
+     */
+    onActivityClick(activity) {
+        this.selectedActivity.set(activity);
+        this.addLog('info', `Activity selected: ${activity.name}`);
+    }
+    /**
+     * Convert AXPActivityDefinition to ActivityInfo
+     */
+    convertActivityDefinitionToInfo(activity) {
+        const properties = (activity.inputs || []).map(input => ({
+            name: input.name,
+            type: this.getPropertyTypeFromSchema(input.schema),
+            required: !input.schema.nullable,
+            description: input.description,
+            defaultValue: input.schema.defaultValue
+        }));
+        const defaultProperties = {};
+        properties.forEach(prop => {
+            if (prop.defaultValue !== undefined) {
+                defaultProperties[prop.name] = prop.defaultValue;
+            }
+        });
+        return {
+            type: activity.type,
+            name: activity.name,
+            description: activity.description || '',
+            icon: activity.icon || 'fa-light fa-circle',
+            properties,
+            defaultProperties
+        };
+    }
+    /**
+     * Get property type from schema
+     */
+    getPropertyTypeFromSchema(schema) {
+        const dataType = schema?.dataType || 'string';
+        if (dataType === 'array')
+            return 'array';
+        if (dataType === 'object')
+            return 'object';
+        if (dataType === 'boolean')
+            return 'boolean';
+        if (dataType === 'number' || dataType === 'integer')
+            return 'number';
+        return 'string';
+    }
+    /**
+     * Get category color
+     */
+    getCategoryColor(categoryId) {
+        const colorMap = {
+            'workflow-markers': '#10B981',
+            'control-flow': '#3B82F6',
+            'user-interaction': '#8B5CF6',
+            'data': '#10B981',
+            'navigation': '#F59E0B',
+            'events': '#EF4444',
+            'http': '#06B6D4'
+        };
+        return colorMap[categoryId] || '#64748B';
+    }
+    /**
+     * Get empty workflow JSON
+     */
+    getEmptyWorkflow() {
+        return JSON.stringify({
+            id: 'new-workflow',
+            name: '',
+            description: '',
+            version: 1,
+            root: {
+                id: 'root',
+                type: 'workflow-activity:sequence',
+                name: 'Root',
+                children: []
+            }
+        }, null, 2);
+    }
+    //#endregion
+    /**
+     * Sync visualizer with JSON changes
+     */
+    syncVisualizerWithJson() {
+        try {
+            if (this.activeTab() === 'visual') {
+                this.jsonToVisual();
+            }
+        }
+        catch (err) {
+            console.error('[WorkflowStudio] Error syncing visualizer:', err);
+        }
+    }
+    //#region ----   Workflow Execution   ----
+    /**
+     * Open execution dialog
+     */
+    openExecutionDialog() {
+        this.showExecutionDialog.set(true);
+        this.workflowInstanceState.set(null);
+    }
+    /**
+     * Close execution dialog
+     */
+    closeExecutionDialog() {
+        this.showExecutionDialog.set(false);
+        this.workflowInstanceState.set(null);
+    }
+    /**
+     * Start workflow execution
+     */
+    async startWorkflowExecution() {
+        await this.runWorkflow();
+    }
+    /**
+     * اجرای workflow
+     */
+    async runWorkflow() {
+        this.isExecuting.set(true);
+        this.executionLogs.set([]);
+        this.executionResult.set(null);
+        this.showExecutionResult.set(false); // بستن نتیجه قبلی
+        this.workflowInstanceState.set({
+            status: 'running',
+            startTime: new Date(),
+            currentState: null
+        });
+        this.addLog('info', 'شروع اجرای Workflow...');
+        try {
+            // Parse JSON
+            const workflowDef = JSON.parse(this.workflowJson());
+            const logMessage = await this.translationService.translateAsync('@workflow-management:test-pages.messages.info.json-parsed');
+            this.addLog('success', logMessage, workflowDef);
+            // Save workflow definition to entity service first
+            const workflowId = workflowDef.id || `workflow-${Date.now()}`;
+            const definitionToSave = this.exportWorkflowDefinition();
+            if (!definitionToSave) {
+                throw new Error('Failed to export workflow definition');
+            }
+            // Save or update workflow definition
+            try {
+                const existing = await this.entityService.withEntity(RootConfig.module.name, RootConfig.entities.workflowDefinition.name).data().byKey(workflowId);
+                if (existing) {
+                    await this.entityService.withEntity(RootConfig.module.name, RootConfig.entities.workflowDefinition.name).data().update(workflowId, definitionToSave);
+                }
+                else {
+                    await this.entityService.withEntity(RootConfig.module.name, RootConfig.entities.workflowDefinition.name).data().create({ ...definitionToSave, id: workflowId });
+                }
+                const saveMessage = await this.translationService.translateAsync('@workflow-management:test-pages.messages.success.workflow-saved');
+                this.addLog('success', saveMessage);
+            }
+            catch (saveError) {
+                // Continue execution even if save fails
+                const saveErrorMessage = await this.translationService.translateAsync('@workflow-management:test-pages.messages.warning.save-failed');
+                this.addLog('warning', `${saveErrorMessage}: ${saveError.message}`);
+            }
+            // اجرای workflow
+            const executingMessage = await this.translationService.translateAsync('@workflow-management:test-pages.messages.info.executing');
+            this.addLog('info', executingMessage);
+            // Start workflow execution using the workflow name
+            const workflowName = definitionToSave.name || workflowId;
+            let result = await this.workflowManager.start(workflowName, {});
+            this.addLog('info', `Workflow started. Instance ID: ${result.instanceId}`, result);
+            if (!result.instanceId) {
+                this.addLog('error', '❌ Workflow با خطا مواجه شد', result);
+                this.executionResult.set(result);
+                this.showExecutionResult.set(true);
+                return;
+            }
+            // Handle workflow execution loop - execute all frontend tasks
+            let currentResult = result;
+            let taskCount = 0;
+            while (currentResult.nextTask) {
+                taskCount++;
+                const task = currentResult.nextTask;
+                this.addLog('info', `📋 Task ${taskCount}: ${task.activityType} (${task.activityName || task.activityId})`, task);
+                try {
+                    // Execute frontend task
+                    this.addLog('info', `⚡ Executing task: ${task.activityType}...`);
+                    const { output, outcome } = await this.workflowManager.execute(task);
+                    this.addLog('success', `✅ Task executed. Outcome: ${outcome}`, { output, outcome });
+                    // Complete task and get next
+                    this.addLog('info', `🔄 Completing task and getting next...`);
+                    currentResult = await this.workflowManager.complete(currentResult.instanceId, task, outcome, output);
+                    if (!currentResult.instanceId) {
+                        this.addLog('error', '❌ Task completion failed', currentResult);
+                        break;
+                    }
+                    if (currentResult.nextTask) {
+                        this.addLog('info', `➡️ Next task available: ${currentResult.nextTask.activityType}`);
+                    }
+                    else {
+                        this.addLog('success', '✅ No more tasks. Workflow completed!');
+                    }
+                }
+                catch (error) {
+                    this.addLog('error', `❌ Error executing task: ${error.message}`, error);
+                    currentResult = {
+                        ...currentResult,
+                        success: false,
+                        error: error.message || 'Task execution failed'
+                    };
+                    break;
+                }
+            }
+            // نتیجه
+            this.executionResult.set(currentResult);
+            this.showExecutionResult.set(true); // باز کردن خودکار نتیجه
+            this.workflowInstanceState.set({
+                status: 'finished',
+                startTime: this.workflowInstanceState()?.startTime || new Date(),
+                endTime: new Date(),
+                result: currentResult,
+                currentState: currentResult.state?.output?.['taskStatus'] || currentResult.state?.output?.['currentState']
+            });
+            if (currentResult.success) {
+                this.addLog('success', `✅ Workflow با موفقیت اجرا شد! (${taskCount} task(s) executed)`, currentResult);
+            }
+            else {
+                this.addLog('error', '❌ Workflow با خطا مواجه شد: ' + (currentResult.error || 'Unknown error'), currentResult);
+            }
+        }
+        catch (error) {
+            this.addLog('error', '❌ خطا در اجرا: ' + error.message, error);
+            this.workflowInstanceState.set({
+                ...this.workflowInstanceState(),
+                status: 'error',
+                error: error.message
+            });
+        }
+        finally {
+            this.isExecuting.set(false);
+        }
+    }
+    /**
+     * اضافه کردن لاگ
+     */
+    addLog(level, message, data) {
+        const logs = this.executionLogs();
+        logs.push({
+            timestamp: new Date(),
+            level,
+            message,
+            data
+        });
+        this.executionLogs.set([...logs]);
+    }
+    /**
+     * کپی کردن نمونه activity
+     */
+    copyActivityTemplate(activity) {
+        const template = {
+            id: `${activity.type.toLowerCase()}-${Date.now()}`,
+            type: activity.type,
+            name: activity.name,
+            properties: {}
+        };
+        // کپی در کلیپ‌بورد
+        navigator.clipboard.writeText(JSON.stringify(template, null, 2));
+        this.addLog('success', `✂️ Template برای ${activity.name} کپی شد!`);
+    }
+    /**
+     * فرمت کردن JSON
+     */
+    formatJson() {
+        try {
+            const parsed = JSON.parse(this.workflowJson());
+            this.workflowJson.set(JSON.stringify(parsed, null, 2));
+            this.addLog('success', '✨ JSON فرمت شد');
+        }
+        catch (error) {
+            this.addLog('error', '❌ خطا در فرمت: ' + error.message);
+        }
+    }
+    /**
+     * باز کردن تنظیمات workflow
+     */
+    openWorkflowSettings() {
+        // Extract settings from current workflow JSON
+        try {
+            const workflow = JSON.parse(this.workflowJson());
+            // Convert old format inputs/outputs to new format
+            const convertInput = (input) => {
+                if (input.schema) {
+                    // Already in new format
+                    return {
+                        name: input.name,
+                        title: input.title || input.name,
+                        description: input.description,
+                        schema: input.schema,
+                        validations: input.validations
+                    };
+                }
+                else {
+                    // Old format - convert
+                    return {
+                        name: input.name,
+                        title: input.name,
+                        description: input.description,
+                        schema: {
+                            dataType: input.typeName || 'string',
+                            defaultValue: input.defaultValue
+                        },
+                        validations: input.isRequired ? [{ rule: 'required' }] : undefined
+                    };
+                }
+            };
+            const convertOutput = (output) => {
+                if (output.schema) {
+                    // Already in new format
+                    return {
+                        name: output.name,
+                        title: output.title || output.name,
+                        description: output.description,
+                        schema: output.schema
+                    };
+                }
+                else {
+                    // Old format - convert
+                    return {
+                        name: output.name,
+                        title: output.name,
+                        description: output.description,
+                        schema: {
+                            dataType: output.typeName || 'string'
+                        }
+                    };
+                }
+            };
+            this.workflowSettings.set({
+                definitionId: workflow.definitionId || workflow.id || '',
+                name: workflow.name || '',
+                description: workflow.description || '',
+                inputs: (workflow.inputs || []).map(convertInput),
+                outputs: (workflow.outputs || []).map(convertOutput),
+                variables: workflow.variables || [],
+                outcomes: workflow.outcomes || ['Done'],
+                usableAsActivity: workflow.options?.usableAsActivity || false,
+                autoUpdateConsumingWorkflows: workflow.options?.autoUpdateConsumingWorkflows || false,
+                version: workflow.version || 1,
+                isLatest: workflow.isLatest !== undefined ? workflow.isLatest : true,
+                isPublished: workflow.isPublished || false,
+                toolVersion: workflow.toolVersion || '1.0.0',
+                providerName: workflow.providerName || 'WorkflowStudio'
+            });
+        }
+        catch (error) {
+            // If parsing fails, use default settings
+            this.workflowSettings.set({
+                definitionId: '',
+                name: '',
+                description: '',
+                inputs: [],
+                outputs: [],
+                variables: [],
+                outcomes: ['Done'],
+                usableAsActivity: false,
+                autoUpdateConsumingWorkflows: false,
+                version: 1,
+                isLatest: true,
+                isPublished: false,
+                toolVersion: '1.0.0',
+                providerName: 'WorkflowStudio'
+            });
+        }
+        this.showWorkflowSettings.set(true);
+    }
+    /**
+     * بستن تنظیمات workflow
+     */
+    closeWorkflowSettings() {
+        this.showWorkflowSettings.set(false);
+    }
+    /**
+     * ذخیره تنظیمات workflow
+     */
+    saveWorkflowSettings() {
+        try {
+            const workflow = JSON.parse(this.workflowJson());
+            const settings = this.workflowSettings();
+            // Update workflow with settings according to WorkflowDefinition structure
+            workflow.definitionId = settings.definitionId;
+            workflow.name = settings.name;
+            workflow.description = settings.description;
+            workflow.version = settings.version;
+            workflow.isLatest = settings.isLatest;
+            workflow.isPublished = settings.isPublished;
+            workflow.toolVersion = settings.toolVersion;
+            workflow.providerName = settings.providerName;
+            // WorkflowCommon properties
+            workflow.options = {
+                usableAsActivity: settings.usableAsActivity,
+                autoUpdateConsumingWorkflows: settings.autoUpdateConsumingWorkflows
+            };
+            workflow.variables = settings.variables.map(v => ({
+                id: v.name, // Use name as id for now
+                name: v.name,
+                typeName: v.typeName,
+                value: v.value,
+                storageDriverType: 'Memory' // Default storage driver
+            }));
+            workflow.inputs = settings.inputs.map(i => ({
+                name: i.name,
+                title: i.title,
+                description: i.description,
+                schema: {
+                    dataType: i.schema.dataType,
+                    nullable: i.schema.nullable,
+                    readonly: i.schema.readonly,
+                    hidden: i.schema.hidden,
+                    defaultValue: i.schema.defaultValue
+                },
+                validations: i.validations
+            }));
+            workflow.outputs = settings.outputs.map(o => ({
+                name: o.name,
+                title: o.title,
+                description: o.description,
+                schema: {
+                    dataType: o.schema.dataType
+                }
+            }));
+            workflow.outcomes = settings.outcomes;
+            workflow.customProperties = workflow.customProperties || {};
+            workflow.isReadonly = false;
+            workflow.isSystem = false;
+            this.workflowJson.set(JSON.stringify(workflow, null, 2));
+            this.addLog('success', '✅ تنظیمات ورک فلو ذخیره شد');
+            this.closeWorkflowSettings();
+        }
+        catch (error) {
+            this.addLog('error', '❌ خطا در ذخیره تنظیمات: ' + error.message);
+        }
+    }
+    /**
+     * Export workflow به فرمت Elsa Workflow Definition v3.0.0
+     * https://elsaworkflows.io/schemas/workflow-definition/v3.0.0/schema.json
+     */
+    exportWorkflowDefinition() {
+        try {
+            const workflow = JSON.parse(this.workflowJson());
+            const settings = this.workflowSettings();
+            // Create Elsa Workflow Definition v3.0.0 structure
+            const definition = {
+                // VersionedEntity fields
+                id: workflow.id || this.generateId(),
+                version: settings.version,
+                isLatest: settings.isLatest,
+                isPublished: settings.isPublished,
+                // Identification fields
+                definitionId: settings.definitionId || workflow.id || this.generateId(),
+                name: settings.name || workflow.name || 'Untitled Workflow',
+                description: settings.description || workflow.description || '',
+                toolVersion: settings.toolVersion || '3.0.0',
+                // Materialization fields
+                providerName: settings.providerName || 'ACoreX',
+                materializerContext: {
+                    materializerName: 'Json',
+                    // Store the root activity as JSON string
+                    stringData: JSON.stringify(workflow.root)
+                },
+                // WorkflowCommon fields
+                options: {
+                    usableAsActivity: settings.usableAsActivity || false,
+                    autoUpdateConsumingWorkflows: settings.autoUpdateConsumingWorkflows || false
+                },
+                // Variables array
+                variables: settings.variables.map(v => ({
+                    id: v.name,
+                    name: v.name,
+                    typeName: v.typeName,
+                    value: v.value,
+                    storageDriverType: 'Memory'
+                })),
+                // Inputs array
+                inputs: settings.inputs.map(i => ({
+                    name: i.name,
+                    title: i.title,
+                    description: i.description,
+                    schema: {
+                        dataType: i.schema.dataType,
+                        nullable: i.schema.nullable,
+                        readonly: i.schema.readonly,
+                        hidden: i.schema.hidden,
+                        defaultValue: i.schema.defaultValue
+                    },
+                    validations: i.validations || []
+                })),
+                // Outputs array
+                outputs: settings.outputs.map(o => ({
+                    name: o.name,
+                    title: o.title,
+                    description: o.description,
+                    schema: {
+                        dataType: o.schema.dataType
+                    }
+                })),
+                // Outcomes array
+                outcomes: settings.outcomes || ['Done'],
+                // Custom properties
+                customProperties: workflow.customProperties || {},
+                // Flags
+                isReadonly: false,
+                isSystem: false,
+                // Root activity (direct reference for Elsa compatibility)
+                root: workflow.root
+            };
+            return definition;
+        }
+        catch (error) {
+            this.addLog('error', '❌ خطا در export: ' + error.message);
+            return null;
+        }
+    }
+    /**
+     * دانلود WorkflowDefinition به صورت JSON file
+     */
+    downloadWorkflowDefinition() {
+        const definition = this.exportWorkflowDefinition();
+        if (!definition)
+            return;
+        const blob = new Blob([JSON.stringify(definition, null, 2)], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `${definition.definitionId || 'workflow'}-v${definition.version}.json`;
+        link.click();
+        URL.revokeObjectURL(url);
+        this.addLog('success', `📥 Workflow Definition دانلود شد: ${link.download}`);
+    }
+    generateId() {
+        return `wf-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    }
+    /**
+     * تغییر تب settings
+     */
+    switchSettingsTab(tab) {
+        this.activeSettingsTab.set(tab);
+    }
+    // ============ Workflow Inputs Management ============
+    addWorkflowInput() {
+        const settings = this.workflowSettings();
+        settings.inputs.push({
+            name: `input${settings.inputs.length + 1}`,
+            title: `Input ${settings.inputs.length + 1}`,
+            description: '',
+            schema: {
+                dataType: 'string',
+                defaultValue: undefined
+            },
+            validations: undefined
+        });
+        this.workflowSettings.set({ ...settings });
+    }
+    removeWorkflowInput(index) {
+        const settings = this.workflowSettings();
+        settings.inputs.splice(index, 1);
+        this.workflowSettings.set({ ...settings });
+    }
+    updateWorkflowInput(index, field, value) {
+        const settings = this.workflowSettings();
+        const input = settings.inputs[index];
+        if (field === 'schema') {
+            // For nested schema updates
+            input[field] = value;
+        }
+        else if (field.startsWith('schema.')) {
+            // For nested schema properties like 'schema.dataType'
+            const schemaField = field.replace('schema.', '');
+            if (!input.schema) {
+                input.schema = { dataType: 'string' };
+            }
+            input.schema[schemaField] = value;
+        }
+        else {
+            input[field] = value;
+        }
+        this.workflowSettings.set({ ...settings });
+    }
+    updateWorkflowInputSchema(index, schemaField, value) {
+        const settings = this.workflowSettings();
+        const input = settings.inputs[index];
+        if (!input.schema) {
+            input.schema = { dataType: 'string' };
+        }
+        input.schema[schemaField] = value;
+        this.workflowSettings.set({ ...settings });
+    }
+    updateWorkflowInputValidation(index, isRequired) {
+        const settings = this.workflowSettings();
+        const input = settings.inputs[index];
+        if (isRequired) {
+            if (!input.validations) {
+                input.validations = [];
+            }
+            if (!input.validations.some(v => v.rule === 'required')) {
+                input.validations.push({ rule: 'required' });
+            }
+        }
+        else {
+            input.validations = input.validations?.filter(v => v.rule !== 'required');
+            if (input.validations?.length === 0) {
+                input.validations = undefined;
+            }
+        }
+        this.workflowSettings.set({ ...settings });
+    }
+    getInputIsRequired(input) {
+        return input.validations?.some(v => v.rule === 'required') ?? false;
+    }
+    // ============ Workflow Outputs Management ============
+    addWorkflowOutput() {
+        const settings = this.workflowSettings();
+        settings.outputs.push({
+            name: `output${settings.outputs.length + 1}`,
+            title: `Output ${settings.outputs.length + 1}`,
+            description: '',
+            schema: {
+                dataType: 'string'
+            }
+        });
+        this.workflowSettings.set({ ...settings });
+    }
+    removeWorkflowOutput(index) {
+        const settings = this.workflowSettings();
+        settings.outputs.splice(index, 1);
+        this.workflowSettings.set({ ...settings });
+    }
+    updateWorkflowOutput(index, field, value) {
+        const settings = this.workflowSettings();
+        const output = settings.outputs[index];
+        if (field.startsWith('schema.')) {
+            // For nested schema properties like 'schema.dataType'
+            const schemaField = field.replace('schema.', '');
+            if (!output.schema) {
+                output.schema = { dataType: 'string' };
+            }
+            output.schema[schemaField] = value;
+        }
+        else {
+            output[field] = value;
+        }
+        this.workflowSettings.set({ ...settings });
+    }
+    updateWorkflowOutputSchema(index, schemaField, value) {
+        const settings = this.workflowSettings();
+        const output = settings.outputs[index];
+        if (!output.schema) {
+            output.schema = { dataType: 'string' };
+        }
+        output.schema[schemaField] = value;
+        this.workflowSettings.set({ ...settings });
+    }
+    // ============ Workflow Variables Management ============
+    addWorkflowVariable() {
+        const settings = this.workflowSettings();
+        settings.variables.push({
+            name: `variable${settings.variables.length + 1}`,
+            typeName: 'string',
+            value: '',
+            description: ''
+        });
+        this.workflowSettings.set({ ...settings });
+    }
+    removeWorkflowVariable(index) {
+        const settings = this.workflowSettings();
+        settings.variables.splice(index, 1);
+        this.workflowSettings.set({ ...settings });
+    }
+    updateWorkflowVariable(index, field, value) {
+        const settings = this.workflowSettings();
+        settings.variables[index][field] = value;
+        this.workflowSettings.set({ ...settings });
+    }
+    /**
+     * به‌روزرسانی outcomes از string
+     */
+    updateOutcomes(outcomesString) {
+        const settings = this.workflowSettings();
+        settings.outcomes = outcomesString
+            .split(',')
+            .map(o => o.trim())
+            .filter(o => o.length > 0);
+        this.workflowSettings.set({ ...settings });
+    }
+    /**
+     * پاک کردن لاگ‌ها
+     */
+    clearLogs() {
+        this.executionLogs.set([]);
+    }
+    // ============ Visual Designer Methods ============
+    /**
+     * تغییر تب
+     */
+    switchTab(tab) {
+        if (tab === 'visual' && this.activeTab() === 'json') {
+            // تبدیل JSON به Visual
+            this.jsonToVisual();
+        }
+        else if (tab === 'json' && this.activeTab() === 'visual') {
+            // تبدیل Visual به JSON
+            this.visualToJson();
+        }
+        this.activeTab.set(tab);
+    }
+    /**
+     * انتخاب Node
+     */
+    selectNodeById(node) {
+        this.selectedNode.set(node);
+    }
+    /**
+     * حذف Node
+     */
+    deleteNode(nodeId) {
+        const nodes = this.visualNodes().filter(n => n.id !== nodeId);
+        // حذف اتصالات به این نود
+        nodes.forEach(n => {
+            n.connections = n.connections.filter(c => c !== nodeId);
+        });
+        this.visualNodes.set(nodes);
+        if (this.selectedNode()?.id === nodeId) {
+            this.selectedNode.set(null);
+        }
+        this.addLog('info', `🗑️ Node حذف شد`);
+    }
+    /**
+     * اتصال دو Node با outcome مشخص
+     */
+    connectNodes(fromId, toId, outcome) {
+        const nodes = this.visualNodes();
+        const fromNodeIndex = nodes.findIndex(n => n.id === fromId);
+        const toNode = nodes.find(n => n.id === toId);
+        if (fromNodeIndex !== -1 && toNode) {
+            const fromNode = nodes[fromNodeIndex];
+            // Use outcome-based connections if available
+            if (outcome && fromNode.outcomes && fromNode.outcomes.length > 1) {
+                const outcomeConnections = fromNode.outcomeConnections || [];
+                // Check if this outcome already has a connection
+                const existingConnection = outcomeConnections.find(c => c.outcome === outcome);
+                if (existingConnection) {
+                    this.addLog('warning', `⚠️ Outcome "${outcome}" قبلاً متصل شده است`);
+                    return;
+                }
+                // Add new outcome connection
+                const updatedNodes = [...nodes];
+                updatedNodes[fromNodeIndex] = {
+                    ...fromNode,
+                    outcomeConnections: [...outcomeConnections, { outcome, targetNodeId: toId }],
+                    connections: [...fromNode.connections, toId] // Keep for backward compat
+                };
+                this.visualNodes.set(updatedNodes);
+                this.addLog('success', `🔗 ${fromNode.name} [${outcome}] → ${toNode.name}`);
+            }
+            else {
+                // Simple connection (no outcomes)
+                if (!fromNode.connections.includes(toId)) {
+                    const updatedNodes = [...nodes];
+                    updatedNodes[fromNodeIndex] = {
+                        ...fromNode,
+                        connections: [...fromNode.connections, toId]
+                    };
+                    this.visualNodes.set(updatedNodes);
+                    this.addLog('success', `🔗 ${fromNode.name} متصل شد به ${toNode.name}`);
+                }
+                else {
+                    this.addLog('warning', '⚠️ این اتصال از قبل وجود دارد');
+                }
+            }
+        }
+        else {
+            this.addLog('error', '❌ خطا در ایجاد اتصال');
+        }
+    }
+    /**
+     * قطع اتصال (با یا بدون outcome)
+     */
+    disconnectNodes(fromId, toId, outcome) {
+        const nodes = this.visualNodes();
+        const fromNodeIndex = nodes.findIndex(n => n.id === fromId);
+        if (fromNodeIndex !== -1) {
+            const fromNode = nodes[fromNodeIndex];
+            const updatedNodes = [...nodes];
+            // Remove from outcome connections if specified
+            if (outcome && fromNode.outcomeConnections) {
+                updatedNodes[fromNodeIndex] = {
+                    ...fromNode,
+                    outcomeConnections: fromNode.outcomeConnections.filter(c => !(c.outcome === outcome && c.targetNodeId === toId)),
+                    connections: fromNode.connections.filter(c => c !== toId)
+                };
+            }
+            else {
+                // Simple disconnect
+                updatedNodes[fromNodeIndex] = {
+                    ...fromNode,
+                    connections: fromNode.connections.filter(c => c !== toId),
+                    outcomeConnections: fromNode.outcomeConnections?.filter(c => c.targetNodeId !== toId)
+                };
+            }
+            this.visualNodes.set(updatedNodes);
+            this.addLog('info', `✂️ اتصال قطع شد${outcome ? ` [${outcome}]` : ''}`);
+        }
+    }
+    /**
+     * تبدیل JSON به Visual
+     */
+    jsonToVisual() {
+        try {
+            const workflow = JSON.parse(this.workflowJson());
+            const nodes = [];
+            let yPos = 100;
+            // پردازش root activity
+            if (workflow.root) {
+                this.processActivityToNode(workflow.root, nodes, 100, yPos);
+            }
+            this.visualNodes.set(nodes);
+            this.addLog('success', '✅ JSON به Visual تبدیل شد');
+        }
+        catch (error) {
+            this.addLog('error', '❌ خطا در تبدیل: ' + error.message);
+        }
+    }
+    /**
+     * پردازش Activity به Node (recursive)
+     */
+    processActivityToNode(activity, nodes, x, y, parentId) {
+        const nodeId = activity.id || `${activity.type}-${Date.now()}-${Math.random()}`;
+        // Get outcomes for this activity type (use default for now, will be updated async if needed)
+        const outcomes = ['Done']; // Default outcome, will be updated when activity info is loaded
+        // Get outcomeConnections from activity definition
+        const outcomeConnections = activity.outcomeConnections || [];
+        // Build simple connections list from outcomeConnections for backward compatibility
+        const connections = outcomeConnections.map((conn) => conn.targetNodeId);
+        const node = {
+            id: nodeId,
+            type: activity.type,
+            name: activity.name || activity.type,
+            icon: this.getIconForActivityType(activity.type),
+            properties: activity.properties || {},
+            position: { x, y },
+            connections: connections,
+            outcomeConnections: outcomeConnections,
+            outcomes: outcomes
+        };
+        nodes.push(node);
+        // اگر parent دارد، اتصال برقرار کن (برای Sequence)
+        if (parentId && !outcomeConnections.length) {
+            const parentNode = nodes.find(n => n.id === parentId);
+            if (parentNode && !parentNode.connections.includes(nodeId)) {
+                parentNode.connections.push(nodeId);
+            }
+        }
+        // پردازش children (برای Sequence) - اما فقط اگر outcomeConnections نباشد
+        if (activity.children && Array.isArray(activity.children) && !outcomeConnections.length) {
+            let childY = y;
+            activity.children.forEach((child, index) => {
+                childY = y + (index * 100);
+                this.processActivityToNode(child, nodes, x + 250, childY, nodeId);
+            });
+        }
+        return nodeId;
+    }
+    /**
+     * تبدیل Visual به JSON
+     */
+    visualToJson() {
+        try {
+            const nodes = this.visualNodes();
+            if (nodes.length === 0) {
+                this.addLog('warning', '⚠️ هیچ Node ای وجود ندارد');
+                return;
+            }
+            // پیدا کردن root node (node بدون parent)
+            const rootNode = this.findRootNode(nodes);
+            if (!rootNode) {
+                this.addLog('error', '❌ Root Node پیدا نشد');
+                return;
+            }
+            const workflow = {
+                id: 'visual-workflow-' + Date.now(),
+                name: 'Visual Workflow',
+                version: 1,
+                root: this.nodeToActivity(rootNode, nodes)
+            };
+            this.workflowJson.set(JSON.stringify(workflow, null, 2));
+            this.addLog('success', '✅ Visual به JSON تبدیل شد');
+        }
+        catch (error) {
+            this.addLog('error', '❌ خطا در تبدیل: ' + error.message);
+        }
+    }
+    /**
+     * پیدا کردن Root Node
+     */
+    findRootNode(nodes) {
+        // Node ای که به آن اشاره نشده
+        const connectedIds = new Set();
+        nodes.forEach(n => n.connections.forEach(c => connectedIds.add(c)));
+        const rootNodes = nodes.filter(n => !connectedIds.has(n.id));
+        return rootNodes[0] || nodes[0];
+    }
+    /**
+     * تبدیل Node به Activity (recursive)
+     */
+    nodeToActivity(node, allNodes) {
+        const activity = {
+            id: node.id,
+            type: node.type,
+            name: node.name,
+            properties: node.properties
+        };
+        // اگر children دارد (connections)
+        if (node.connections.length > 0) {
+            const children = node.connections
+                .map(connId => allNodes.find(n => n.id === connId))
+                .filter(n => n !== undefined)
+                .map(childNode => this.nodeToActivity(childNode, allNodes));
+            if (children.length > 0) {
+                activity.children = children;
+            }
+        }
+        return activity;
+    }
+    /**
+     * دریافت آیکون برای نوع Activity
+     */
+    getIconForActivityType(type) {
+        const iconMap = {
+            'workflow-activity:sequence': 'fa-light fa-list-ol',
+            'workflow-activity:show-confirm-dialog': 'fa-light fa-question-circle',
+            'workflow-activity:show-alert-dialog': 'fa-light fa-circle-info',
+            'workflow-activity:show-toast': 'fa-light fa-bell',
+            'workflow-activity:set-variable': 'fa-light fa-variable',
+            'workflow-activity:execute-query': 'fa-light fa-search',
+            'workflow-activity:execute-command': 'fa-light fa-bolt',
+            'workflow-activity:navigate': 'fa-light fa-route',
+            'workflow-activity:dispatch-event': 'fa-light fa-paper-plane'
+        };
+        return iconMap[type] || 'fa-light fa-circle';
+    }
+    /**
+     * به‌روزرسانی property نود
+     */
+    updateNodeProperty(nodeId, propertyName, value) {
+        const nodes = this.visualNodes();
+        const nodeIndex = nodes.findIndex(n => n.id === nodeId);
+        if (nodeIndex !== -1) {
+            const node = nodes[nodeIndex];
+            const updatedNodes = [...nodes];
+            // اگر property مستقیم نود است (مثل name)
+            if (propertyName === 'name') {
+                updatedNodes[nodeIndex] = {
+                    ...node,
+                    name: value
+                };
+            }
+            else {
+                // اگر property داخل properties object است
+                const newProperties = {
+                    ...node.properties,
+                    [propertyName]: value
+                };
+                // Recompute outcomes if property affects them (e.g., expectedStatusCodes)
+                let newOutcomes = node.outcomes;
+                if (propertyName === 'expectedStatusCodes' && node.type === 'workflow-activity:http-request') {
+                    // Load activity info asynchronously and update outcomes
+                    this.findActivityInfo(node.type).then(activityInfo => {
+                        if (activityInfo) {
+                            const computedOutcomes = this.computeOutcomes(activityInfo, newProperties);
+                            const updatedNodes = this.visualNodes();
+                            const nodeIdx = updatedNodes.findIndex(n => n.id === nodeId);
+                            if (nodeIdx !== -1) {
+                                updatedNodes[nodeIdx] = {
+                                    ...updatedNodes[nodeIdx],
+                                    outcomes: computedOutcomes
+                                };
+                                this.visualNodes.set([...updatedNodes]);
+                                this.addLog('info', `🔄 Outcomes updated: [${computedOutcomes.join(', ')}]`);
+                            }
+                        }
+                    }).catch(() => {
+                        // Silently fail if activity info not found
+                    });
+                }
+                updatedNodes[nodeIndex] = {
+                    ...node,
+                    properties: newProperties,
+                    outcomes: newOutcomes
+                };
+            }
+            this.visualNodes.set(updatedNodes);
+            // اگر این نود selected است، آن را هم update کن
+            if (this.selectedNode()?.id === nodeId) {
+                this.selectedNode.set(updatedNodes[nodeIndex]);
+            }
+        }
+    }
+    /**
+     * پیدا کردن activity info بر اساس type
+     */
+    async findActivityInfo(type) {
+        try {
+            // Try to get activity by name (type is used as name in some cases)
+            const activity = await this.activityDefinitionService.getActivityByName(type);
+            if (activity) {
+                return this.convertActivityDefinitionToInfo(activity);
+            }
+        }
+        catch (error) {
+            console.warn(`Failed to find activity info for type: ${type}`, error);
+        }
+        return null;
+    }
+    /**
+     * پاک کردن همه نودها
+     */
+    clearCanvas() {
+        this.visualNodes.set([]);
+        this.selectedNode.set(null);
+        this.addLog('info', '🗑️ Canvas پاک شد');
+    }
+    // ============ Drag & Drop Methods ============
+    /**
+     * شروع drag از activity list
+     */
+    onActivityDragStart(event, activity) {
+        this.draggedActivity = activity;
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'copy';
+            event.dataTransfer.setData('text/plain', activity.type);
+        }
+        this.addLog('info', `🎯 در حال Drag: ${activity.name}`);
+    }
+    /**
+     * پایان drag از activity list
+     */
+    onActivityDragEnd(event) {
+        this.draggedActivity = null;
+    }
+    /**
+     * drag over روی Canvas
+     */
+    onCanvasDragOver(event) {
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'copy';
+        }
+    }
+    /**
+     * drag leave از Canvas
+     */
+    onCanvasDragLeave(event) {
+        // می‌توان از این برای visual feedback استفاده کرد
+    }
+    /**
+     * محاسبه outcomes برای یک activity
+     */
+    computeOutcomes(activityInfo, properties) {
+        // For HTTP Request with expected status codes
+        if (activityInfo.type === 'workflow-activity:http-request' && properties['expectedStatusCodes']) {
+            const codes = Array.isArray(properties['expectedStatusCodes'])
+                ? properties['expectedStatusCodes']
+                : [properties['expectedStatusCodes']];
+            const statusOutcomes = codes.map((code) => code.toString());
+            return [...statusOutcomes, 'Done', 'Failed', 'Timeout'];
+        }
+        // TODO: Add more activity types with dynamic outcomes
+        // Default: check activity info for outcomes
+        // For now, we define outcomes manually for known activities
+        const outcomeMap = {
+            'workflow-activity:if': ['Then', 'Else'],
+            'workflow-activity:show-confirm-dialog': ['Confirmed', 'Cancelled'],
+            'workflow-activity:show-alert-dialog': ['Done'],
+            'workflow-activity:show-form': ['Submitted', 'Cancelled'],
+            'workflow-activity:http-request': ['Done', 'Failed', 'Timeout'], // Will be overridden if expectedStatusCodes exist
+            'workflow-activity:sequence': ['Done'],
+            'workflow-activity:for-each': ['Done'],
+            'workflow-activity:while': ['Done'],
+            'workflow-activity:set-variable': ['Done'],
+            'workflow-activity:execute-query': ['Done'],
+            'workflow-activity:execute-command': ['Done'],
+            'workflow-activity:navigate': ['Done'],
+            'workflow-activity:show-toast': ['Done'],
+            'workflow-activity:dispatch-event': ['Done']
+        };
+        return outcomeMap[activityInfo.type] || ['Done'];
+    }
+    /**
+     * drop روی Canvas - اضافه کردن activity جدید
+     */
+    onCanvasDrop(event) {
+        event.preventDefault();
+        if (!this.draggedActivity) {
+            return;
+        }
+        const canvas = event.currentTarget;
+        const rect = canvas.getBoundingClientRect();
+        const x = event.clientX - rect.left - 75; // center node
+        const y = event.clientY - rect.top - 40;
+        const nodes = this.visualNodes();
+        const defaultProps = { ...(this.draggedActivity.defaultProperties || {}) };
+        const newNode = {
+            id: `${this.draggedActivity.type}-${Date.now()}`,
+            type: this.draggedActivity.type,
+            name: this.draggedActivity.name,
+            icon: this.draggedActivity.icon,
+            properties: defaultProps,
+            position: { x: Math.max(0, x), y: Math.max(0, y) },
+            connections: [],
+            outcomeConnections: [],
+            outcomes: this.computeOutcomes(this.draggedActivity, defaultProps)
+        };
+        this.visualNodes.set([...nodes, newNode]);
+        const outcomesInfo = newNode.outcomes && newNode.outcomes.length > 1
+            ? ` with ${newNode.outcomes.length} outcomes [${newNode.outcomes.join(', ')}]`
+            : '';
+        this.addLog('success', `✅ Activity ${this.draggedActivity.name} اضافه شد${outcomesInfo}`);
+        this.draggedActivity = null;
+    }
+    /**
+     * شروع drag نود
+     */
+    onNodeDragStart(event, node) {
+        this.draggedNode = node;
+        const target = event.target;
+        const rect = target.getBoundingClientRect();
+        this.nodeDragOffset = {
+            x: event.clientX - rect.left,
+            y: event.clientY - rect.top
+        };
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'move';
+            // Make drag image transparent
+            const img = new Image();
+            img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+            event.dataTransfer.setDragImage(img, 0, 0);
+        }
+    }
+    /**
+     * در حال drag نود
+     */
+    onNodeDrag(event, node) {
+        if (!this.draggedNode || event.clientX === 0 || event.clientY === 0) {
+            return;
+        }
+        const canvas = document.querySelector('.canvas-area');
+        if (!canvas)
+            return;
+        const rect = canvas.getBoundingClientRect();
+        const x = event.clientX - rect.left - this.nodeDragOffset.x;
+        const y = event.clientY - rect.top - this.nodeDragOffset.y;
+        const nodes = this.visualNodes();
+        const nodeIndex = nodes.findIndex(n => n.id === node.id);
+        if (nodeIndex !== -1) {
+            nodes[nodeIndex].position = {
+                x: Math.max(0, x),
+                y: Math.max(0, y)
+            };
+            this.visualNodes.set([...nodes]);
+        }
+    }
+    /**
+     * پایان drag نود
+     */
+    onNodeDragEnd(event, node) {
+        this.draggedNode = null;
+    }
+    /**
+     * کلیک روی کانکتور - برای ایجاد اتصال (برای activities با یک outcome)
+     */
+    onConnectorClick(event, node, type) {
+        event.stopPropagation();
+        if (!this.connectionSource) {
+            // اولین کلیک - ذخیره source
+            if (type === 'out') {
+                this.connectionSource = { node, type };
+                this.addLog('info', `🔗 منبع اتصال انتخاب شد: ${node.name}`);
+            }
+        }
+        else {
+            // دومین کلیک - ایجاد اتصال
+            if (type === 'in' && this.connectionSource.node.id !== node.id) {
+                this.connectNodes(this.connectionSource.node.id, node.id, this.connectionSource.outcome);
+                this.connectionSource = null;
+            }
+            else {
+                this.addLog('warning', '⚠️ اتصال نامعتبر - ابتدا روی connector خروجی و سپس ورودی کلیک کنید');
+                this.connectionSource = null;
+            }
+        }
+    }
+    /**
+     * کلیک روی outcome connector - برای activities با چند outcome
+     */
+    onOutcomeConnectorClick(event, node, outcome) {
+        event.stopPropagation();
+        if (!this.connectionSource) {
+            // اولین کلیک - ذخیره source با outcome
+            this.connectionSource = { node, type: 'out', outcome };
+            this.addLog('info', `🔗 منبع اتصال انتخاب شد: ${node.name} [${outcome}]`);
+        }
+        else {
+            this.addLog('warning', '⚠️ لطفاً روی input connector یک نود دیگر کلیک کنید');
+            this.connectionSource = null;
+        }
+    }
+    // ============ UI Methods ============
+    /**
+     * تغییر وضعیت نمایش Properties Panel
+     */
+    togglePropertiesPanel() {
+        this.showPropertiesPanel.set(!this.showPropertiesPanel());
+    }
+    // ============ Template Helper Methods ============
+    /**
+     * پیدا کردن Node با ID
+     */
+    findNodeById(nodeId) {
+        return this.visualNodes().find(n => n.id === nodeId);
+    }
+    /**
+     * بررسی اینکه آیا properties خالی است یا نه
+     */
+    hasProperties(properties) {
+        return properties && Object.keys(properties).length > 0;
+    }
+    /**
+     * دریافت رنگ بر اساس outcome
+     */
+    getOutcomeColor(outcome) {
+        const colorMap = {
+            '200': '#10b981', // Green - Success
+            'Done': '#10b981', // Green - Success
+            'Success': '#10b981', // Green - Success
+            '404': '#ef4444', // Red - Error
+            '500': '#ef4444', // Red - Error
+            'Failed': '#ef4444', // Red - Error
+            'Error': '#ef4444', // Red - Error
+            'Timeout': '#f59e0b', // Orange - Warning
+            'Cancelled': '#f59e0b', // Orange - Warning
+            'Then': '#3b82f6', // Blue - Info
+            'Else': '#64748b', // Gray
+        };
+        return colorMap[outcome] || '#8b5cf6'; // Purple - Default
+    }
+    /**
+     * دریافت نام رنگ برای marker ID
+     */
+    getOutcomeColorName(outcome) {
+        if (['200', 'Done', 'Success'].includes(outcome)) {
+            return 'success';
+        }
+        if (['404', '500', 'Failed', 'Error'].includes(outcome)) {
+            return 'error';
+        }
+        if (['Timeout', 'Cancelled'].includes(outcome)) {
+            return 'warning';
+        }
+        if (['Then'].includes(outcome)) {
+            return 'info';
+        }
+        return 'default';
+    }
+    /**
+     * به‌روزرسانی property با parse کردن JSON
+     */
+    updateNodePropertyJSON(nodeId, propertyName, jsonString) {
+        try {
+            const value = JSON.parse(jsonString);
+            this.updateNodeProperty(nodeId, propertyName, value);
+        }
+        catch (error) {
+            // اگر JSON نامعتبر بود، چیزی نکن
+            console.warn('Invalid JSON:', jsonString);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: WorkflowStudioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: WorkflowStudioComponent, isStandalone: true, selector: "app-workflow-studio", providers: [
+            {
+                provide: AXPPageLayoutBase,
+                useExisting: WorkflowStudioComponent,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<axp-page-layout>\n  <axp-layout-start-side>\n    <axp-activity-categories-tree (categoryClick)=\"onCategoryClick($event)\"\n      (activityClick)=\"onActivityClick($event)\"></axp-activity-categories-tree>\n  </axp-layout-start-side>\n\n  <axp-page-toolbar>\n    <axp-layout-prefix>\n      <!-- Editor Tabs -->\n      <div class=\"editor-tabs\">\n        <button class=\"tab-btn\" [class.active]=\"activeTab() === 'json'\" (click)=\"switchTab('json')\">\n          <i class=\"fa-light fa-code\"></i>\n          {{ '@workflow-management:workflow-studio.terms.json-editor' | translate | async }}\n        </button>\n        <button class=\"tab-btn\" [class.active]=\"activeTab() === 'visual'\" (click)=\"switchTab('visual')\">\n          <i class=\"fa-light fa-diagram-project\"></i>\n          {{ '@workflow-management:workflow-studio.terms.visual-designer' | translate | async }}\n        </button>\n      </div>\n    </axp-layout-prefix>\n  </axp-page-toolbar>\n\n  <axp-page-content>\n    <div class=\"workflow-studio\">\n      <!-- Main Layout -->\n      <div class=\"studio-body\" [class.properties-hidden]=\"!showPropertiesPanel()\">\n\n        <!-- Editor -->\n        <div class=\"studio-editor\">\n          <!-- Tab Content -->\n          <div class=\"editor-content\">\n            <!-- JSON Tab -->\n            @if (activeTab() === 'json') {\n            <div class=\"json-tab\">\n              <textarea class=\"json-editor\" [(ngModel)]=\"workflowJson\"\n                [placeholder]=\"'@workflow-management:workflow-studio.components.json-editor.placeholder' | translate | async\"\n                spellcheck=\"false\">\n            </textarea>\n            </div>\n            }\n\n            <!-- Visual Tab -->\n            @if (activeTab() === 'visual') {\n            <div class=\"visual-tab\">\n              <!-- Canvas -->\n              <div class=\"visual-canvas\">\n                <div class=\"canvas-toolbar\">\n                  <button class=\"tool-btn\" (click)=\"clearCanvas()\"\n                    [title]=\"'@workflow-management:workflow-studio.components.canvas-toolbar.clear-canvas.title' | translate | async\">\n                    <i class=\"fa-light fa-trash\"></i>\n                  </button>\n                  <button class=\"tool-btn\" (click)=\"visualToJson()\"\n                    [title]=\"'@workflow-management:workflow-studio.components.canvas-toolbar.convert-to-json.title' | translate | async\">\n                    <i class=\"fa-light fa-code\"></i>\n                  </button>\n                  <span class=\"tool-info\">\n                    <i class=\"fa-light fa-lightbulb\"></i>\n                    <strong>{{ '@workflow-management:workflow-studio.components.canvas-toolbar.hint' | translate | async }}</strong>\n                  </span>\n                </div>\n\n                <div class=\"canvas-area\" (drop)=\"onCanvasDrop($event)\" (dragover)=\"onCanvasDragOver($event)\"\n                  (dragleave)=\"onCanvasDragLeave($event)\">\n                  <!-- SVG for Connections -->\n                  <svg class=\"connections-layer\">\n                    <!-- Outcome-based Connections -->\n                    @for (node of visualNodes(); track node.id) {\n                    @if (node.outcomeConnections && node.outcomeConnections.length > 0) {\n                    @for (conn of node.outcomeConnections; track conn.targetNodeId + conn.outcome) {\n                    @let targetNode = findNodeById(conn.targetNodeId);\n                    @if (targetNode) {\n                    <g class=\"outcome-connection-group\">\n                      <line [attr.x1]=\"node.position.x + 75\" [attr.y1]=\"node.position.y + 80\"\n                        [attr.x2]=\"targetNode.position.x + 75\" [attr.y2]=\"targetNode.position.y - 50\"\n                        class=\"connection-line outcome-line\" [attr.stroke]=\"getOutcomeColor(conn.outcome)\"\n                        stroke-width=\"2.5\"\n                        [attr.marker-end]=\"'url(#arrowhead-' + getOutcomeColorName(conn.outcome) + ')'\"\n                        style=\"cursor: pointer\" (dblclick)=\"disconnectNodes(node.id, conn.targetNodeId, conn.outcome)\"\n                        [attr.title]=\"'Outcome: ' + conn.outcome + ' (Double-click to remove)'\">\n                        <title>{{ conn.outcome }} \u2192 {{ targetNode.name }}</title>\n                      </line>\n                      <text [attr.x]=\"(node.position.x + targetNode.position.x) / 2 + 75\"\n                        [attr.y]=\"(node.position.y + targetNode.position.y) / 2 + 15\" class=\"connection-label\"\n                        text-anchor=\"middle\" [attr.fill]=\"getOutcomeColor(conn.outcome)\" font-size=\"11\"\n                        font-weight=\"600\" pointer-events=\"none\">\n                        {{ conn.outcome }}\n                      </text>\n                    </g>\n                    }\n                    }\n                    } @else {\n                    <!-- Simple Connections (backward compatibility) -->\n                    @for (targetId of node.connections; track targetId) {\n                    @let targetNode = findNodeById(targetId);\n                    @if (targetNode) {\n                    <line [attr.x1]=\"node.position.x + 75\" [attr.y1]=\"node.position.y + 40\"\n                      [attr.x2]=\"targetNode.position.x + 75\" [attr.y2]=\"targetNode.position.y - 50\"\n                      class=\"connection-line\" stroke=\"#64748b\" stroke-width=\"2\" marker-end=\"url(#arrowhead-default)\"\n                      style=\"cursor: pointer\" (dblclick)=\"disconnectNodes(node.id, targetId)\"\n                      title=\"Double-click \u0628\u0631\u0627\u06CC \u062D\u0630\u0641 \u0627\u062A\u0635\u0627\u0644\">\n                      <title>Double-click \u0628\u0631\u0627\u06CC \u062D\u0630\u0641</title>\n                    </line>\n                    }\n                    }\n                    }\n                    }\n\n                    <defs>\n                      <!-- Default Arrow -->\n                      <marker id=\"arrowhead-default\" markerWidth=\"10\" markerHeight=\"10\" refX=\"9\" refY=\"3\" orient=\"auto\">\n                        <polygon points=\"0 0, 10 3, 0 6\" fill=\"#64748b\" />\n                      </marker>\n                      <!-- Success Arrow (Green) -->\n                      <marker id=\"arrowhead-success\" markerWidth=\"10\" markerHeight=\"10\" refX=\"9\" refY=\"3\" orient=\"auto\">\n                        <polygon points=\"0 0, 10 3, 0 6\" fill=\"#10b981\" />\n                      </marker>\n                      <!-- Error Arrow (Red) -->\n                      <marker id=\"arrowhead-error\" markerWidth=\"10\" markerHeight=\"10\" refX=\"9\" refY=\"3\" orient=\"auto\">\n                        <polygon points=\"0 0, 10 3, 0 6\" fill=\"#ef4444\" />\n                      </marker>\n                      <!-- Warning Arrow (Orange) -->\n                      <marker id=\"arrowhead-warning\" markerWidth=\"10\" markerHeight=\"10\" refX=\"9\" refY=\"3\" orient=\"auto\">\n                        <polygon points=\"0 0, 10 3, 0 6\" fill=\"#f59e0b\" />\n                      </marker>\n                      <!-- Info Arrow (Blue) -->\n                      <marker id=\"arrowhead-info\" markerWidth=\"10\" markerHeight=\"10\" refX=\"9\" refY=\"3\" orient=\"auto\">\n                        <polygon points=\"0 0, 10 3, 0 6\" fill=\"#3b82f6\" />\n                      </marker>\n                    </defs>\n                  </svg>\n\n                  <!-- Nodes -->\n                  @for (node of visualNodes(); track node.id) {\n                  <div class=\"visual-node\" [class.selected]=\"selectedNode()?.id === node.id\"\n                    [style.left.px]=\"node.position.x\" [style.top.px]=\"node.position.y\" [attr.data-node-id]=\"node.id\"\n                    draggable=\"true\" (dragstart)=\"onNodeDragStart($event, node)\" (drag)=\"onNodeDrag($event, node)\"\n                    (dragend)=\"onNodeDragEnd($event, node)\" (click)=\"selectNodeById(node)\">\n                    <div class=\"node-header\">\n                      <i [class]=\"node.icon\"></i>\n                      <span>{{ node.name }}</span>\n                      <button class=\"node-delete\" (click)=\"deleteNode(node.id); $event.stopPropagation()\">\n                        <i class=\"fa-light fa-times\"></i>\n                      </button>\n                    </div>\n\n                    <div class=\"node-body\">\n                      <small>{{ node.type }}</small>\n                    </div>\n\n                    <div class=\"node-connectors\">\n                      <!-- Input Connector -->\n                      <div class=\"connector connector-in\" title=\"Input\" (click)=\"onConnectorClick($event, node, 'in')\">\n                      </div>\n\n                      <!-- Output Connectors - Multiple outcomes support -->\n                      @if (node.outcomes && node.outcomes.length > 1) {\n                      <!-- Multiple outcomes: show separate port for each -->\n                      <div class=\"outcomes-container\">\n                        @for (outcome of node.outcomes; track outcome; let idx = $index) {\n                        <div class=\"outcome-connector\" [class.active]=\"\n                                connectionSource?.node?.id === node.id && connectionSource?.outcome === outcome\n                              \" [attr.data-outcome]=\"outcome\" [title]=\"'Output: ' + outcome\"\n                          (click)=\"onOutcomeConnectorClick($event, node, outcome)\">\n                          <span class=\"outcome-label\">{{ outcome }}</span>\n                          <div class=\"outcome-dot\"></div>\n                        </div>\n                        }\n                      </div>\n                      } @else {\n                      <!-- Single outcome: show simple output connector -->\n                      <div class=\"connector connector-out\" [class.active]=\"connectionSource?.node?.id === node.id\"\n                        title=\"Output\" (click)=\"onConnectorClick($event, node, 'out')\"></div>\n                      }\n                    </div>\n                  </div>\n                  }\n\n                  <!-- Empty State -->\n                  @if (visualNodes().length === 0) {\n                  <div class=\"canvas-empty-state\">\n                    <i class=\"fa-light fa-diagram-project\"></i>\n                    <p>Activity \u0647\u0627 \u0631\u0627 \u0627\u0632 \u0633\u0627\u06CC\u062F\u0628\u0627\u0631 \u0628\u0647 \u0627\u06CC\u0646\u062C\u0627 \u0628\u06A9\u0634\u06CC\u062F</p>\n                    <small>\u06CC\u0627 \u0627\u0632 \u062A\u0628 JSON\u060C workflow \u0631\u0627 import \u06A9\u0646\u06CC\u062F</small>\n                  </div>\n                  }\n                </div>\n              </div>\n\n              <!-- Properties Panel -->\n              @if (selectedNode() && showPropertiesPanel()) {\n              <div class=\"properties-panel\">\n                <div class=\"properties-header\">\n                  <i class=\"fa-light fa-sliders\"></i>\n                  <h4>{{ '@workflow-management:workflow-studio.components.properties-panel.title' | translate | async }}</h4>\n                  <div class=\"header-actions\">\n                    <button class=\"header-btn\" (click)=\"togglePropertiesPanel()\"\n                      [title]=\"'@workflow-management:workflow-studio.components.properties-panel.actions.close-panel' | translate | async\">\n                      <i class=\"fa-light fa-angle-right\"></i>\n                    </button>\n                    <button class=\"header-btn\" (click)=\"selectedNode.set(null)\"\n                      [title]=\"'@workflow-management:workflow-studio.components.properties-panel.actions.close' | translate | async\">\n                      <i class=\"fa-light fa-times\"></i>\n                    </button>\n                  </div>\n                </div>\n                <div class=\"properties-body\">\n                  <div class=\"property-row\">\n                    <label>{{ '@workflow-management:workflow-studio.components.properties-panel.fields.id' | translate | async }}:</label>\n                    <input type=\"text\" [value]=\"selectedNode()!.id\" disabled />\n                  </div>\n                  <div class=\"property-row\">\n                    <label>{{ '@workflow-management:workflow-studio.components.properties-panel.fields.type' | translate | async }}:</label>\n                    <input type=\"text\" [value]=\"selectedNode()!.type\" disabled />\n                  </div>\n                  <div class=\"property-row\">\n                    <label>{{ '@workflow-management:workflow-studio.components.properties-panel.fields.name' | translate | async }}:</label>\n                    <input type=\"text\" [value]=\"selectedNode()!.name\"\n                      (input)=\"updateNodeProperty(selectedNode()!.id, 'name', $any($event.target).value)\" />\n                  </div>\n\n                  <div class=\"properties-divider\"></div>\n\n                  <h5>\uD83D\uDCE5 {{ '@workflow-management:workflow-studio.components.properties-panel.sections.input-properties' | translate | async }}</h5>\n                  <small class=\"properties-hint\">{{ '@workflow-management:workflow-studio.components.properties-panel.sections.input-properties' | translate | async }} - \u0645\u0642\u0627\u062F\u06CC\u0631 \u0631\u0627 \u062A\u0646\u0638\u06CC\u0645 \u06A9\u0646\u06CC\u062F</small>\n\n                  @if (hasProperties(selectedNode()!.properties)) {\n                  <div class=\"property-editor\">\n                    @for (key of Object.keys(selectedNode()!.properties); track key) {\n                    <div class=\"property-row\">\n                      <label>\n                        {{ key }}\n                        <span class=\"property-type-badge\">{{ typeof selectedNode()!.properties[key] }}</span>\n                      </label>\n\n                      @if (typeof selectedNode()!.properties[key] === 'boolean') {\n                      <select [value]=\"selectedNode()!.properties[key]\" (change)=\"\n                                updateNodeProperty(selectedNode()!.id, key, $any($event.target).value === 'true')\n                              \">\n                        <option [value]=\"true\">True</option>\n                        <option [value]=\"false\">False</option>\n                      </select>\n                      } @else if (typeof selectedNode()!.properties[key] === 'number') {\n                      <input type=\"number\" [value]=\"selectedNode()!.properties[key]\"\n                        (input)=\"updateNodeProperty(selectedNode()!.id, key, +$any($event.target).value)\" />\n                      } @else if (typeof selectedNode()!.properties[key] === 'object') {\n                      <textarea rows=\"3\" [value]=\"JSON.stringify(selectedNode()!.properties[key], null, 2)\"\n                        (input)=\"updateNodePropertyJSON(selectedNode()!.id, key, $any($event.target).value)\"></textarea>\n                      } @else {\n                      <input type=\"text\" [value]=\"selectedNode()!.properties[key]\"\n                        (input)=\"updateNodeProperty(selectedNode()!.id, key, $any($event.target).value)\" />\n                      }\n                    </div>\n                    }\n                  </div>\n                  } @else {\n                  <p class=\"no-properties\">\n                    {{ '@workflow-management:workflow-studio.components.properties-panel.empty-states.no-properties' | translate | async }}\n                  </p>\n                  }\n\n                  <div class=\"properties-divider\"></div>\n\n                  <h5>\uD83D\uDCE4 {{ '@workflow-management:workflow-studio.components.properties-panel.sections.output-variables' | translate | async }}</h5>\n                  <small class=\"properties-hint\">\u062E\u0631\u0648\u062C\u06CC \u0648 \u0645\u062A\u063A\u06CC\u0631\u0647\u0627</small>\n                  <div class=\"property-row\">\n                    <label>{{ '@workflow-management:workflow-studio.components.properties-panel.fields.output-variable' | translate | async }}:</label>\n                    <input type=\"text\" placeholder=\"\u0645\u062B\u0644\u0627\u064B result\"\n                      [value]=\"selectedNode()!.properties['outputVariable'] || ''\"\n                      (input)=\"updateNodeProperty(selectedNode()!.id, 'outputVariable', $any($event.target).value)\" />\n                  </div>\n\n                  <div class=\"properties-divider\"></div>\n\n                  <h5>\uD83D\uDD17 {{ '@workflow-management:workflow-studio.components.properties-panel.sections.connections' | translate | async }}</h5>\n                  <small class=\"properties-hint\">\u0627\u062A\u0635\u0627\u0644\u0627\u062A \u0627\u06CC\u0646 \u0646\u0648\u062F</small>\n\n                  <!-- Outcome-based Connections -->\n                  @if (selectedNode()!.outcomeConnections && selectedNode()!.outcomeConnections!.length > 0) {\n                  <div class=\"connections-list\">\n                    @for (conn of selectedNode()!.outcomeConnections!; track conn.targetNodeId + conn.outcome) {\n                    @let targetNode = findNodeById(conn.targetNodeId);\n                    @if (targetNode) {\n                    <div class=\"connection-item outcome-connection\">\n                      <span class=\"outcome-badge\" [style.background]=\"getOutcomeColor(conn.outcome)\">\n                        {{ conn.outcome }}\n                      </span>\n                      <i class=\"fa-light fa-arrow-right\"></i>\n                      <span>{{ targetNode.name }}</span>\n                      <button class=\"remove-btn\"\n                        (click)=\"disconnectNodes(selectedNode()!.id, conn.targetNodeId, conn.outcome)\"\n                        title=\"\u062D\u0630\u0641 \u0627\u062A\u0635\u0627\u0644\">\n                        <i class=\"fa-light fa-times\"></i>\n                      </button>\n                    </div>\n                    }\n                    }\n                  </div>\n                  } @else if (selectedNode()!.connections.length > 0) {\n                  <!-- Simple Connections (fallback) -->\n                  <div class=\"connections-list\">\n                    @for (targetId of selectedNode()!.connections; track targetId) {\n                    @let targetNode = findNodeById(targetId);\n                    @if (targetNode) {\n                    <div class=\"connection-item\">\n                      <i class=\"fa-light fa-arrow-right\"></i>\n                      <span>{{ targetNode.name }}</span>\n                      <button class=\"remove-btn\" (click)=\"disconnectNodes(selectedNode()!.id, targetId)\"\n                        title=\"\u062D\u0630\u0641 \u0627\u062A\u0635\u0627\u0644\">\n                        <i class=\"fa-light fa-times\"></i>\n                      </button>\n                    </div>\n                    }\n                    }\n                  </div>\n                  } @else {\n                  <p class=\"no-properties\">{{ '@workflow-management:workflow-studio.components.properties-panel.empty-states.no-connections' | translate | async }}</p>\n                  }\n\n                  <!-- Available Outcomes Info -->\n                  @if (selectedNode()!.outcomes && selectedNode()!.outcomes!.length > 1) {\n                  <div class=\"properties-divider\"></div>\n                  <h5>\uD83D\uDCE4 {{ '@workflow-management:workflow-studio.components.properties-panel.sections.available-outcomes' | translate | async }}</h5>\n                  <small class=\"properties-hint\">\u062E\u0631\u0648\u062C\u06CC\u200C\u0647\u0627\u06CC \u0645\u0648\u062C\u0648\u062F \u0628\u0631\u0627\u06CC \u0627\u062A\u0635\u0627\u0644</small>\n                  <div class=\"outcomes-info\">\n                    @for (outcome of selectedNode()!.outcomes!; track outcome) {\n                    <span class=\"outcome-tag\" [style.borderColor]=\"getOutcomeColor(outcome)\">\n                      <span class=\"outcome-dot\" [style.background]=\"getOutcomeColor(outcome)\"></span>\n                      {{ outcome }}\n                    </span>\n                    }\n                  </div>\n                  }\n\n                  <div class=\"properties-divider\"></div>\n\n                  <h5>\uD83D\uDCDD {{ '@workflow-management:workflow-studio.components.properties-panel.sections.raw-json' | translate | async }}</h5>\n                  <pre class=\"properties-json\">{{ selectedNode() | json }}</pre>\n                </div>\n              </div>\n              }\n\n              <!-- Toggle Button for Properties (when closed) -->\n              @if (selectedNode() && !showPropertiesPanel()) {\n              <button class=\"sidebar-toggle-btn right\" (click)=\"togglePropertiesPanel()\"\n                [title]=\"'@workflow-management:workflow-studio.components.properties-panel.actions.show-panel' | translate | async\">\n                <i class=\"fa-light fa-sliders\"></i>\n              </button>\n              }\n            </div>\n            }\n          </div>\n        </div>\n\n        <!-- Result Panel -->\n        <div class=\"studio-result\">\n          <div class=\"result-header\">\n            <i class=\"fa-light fa-terminal\"></i>\n            <h3>{{ '@workflow-management:workflow-studio.components.execution-result.title' | translate | async }}</h3>\n            <button class=\"clear-btn\" (click)=\"clearLogs()\" *ngIf=\"executionLogs().length > 0\">\n              <i class=\"fa-light fa-trash\"></i> {{ '@workflow-management:test-pages.actions.clear-logs.title' | translate | async }}\n            </button>\n          </div>\n\n          <div class=\"result-body\">\n            <!-- Execution Logs -->\n            @if (executionLogs().length > 0) {\n            <div class=\"logs-container\">\n              @for (log of executionLogs(); track $index) {\n              <div class=\"log-item\" [class]=\"'log-' + log.level\">\n                <span class=\"log-time\">{{ log.timestamp | date: 'HH:mm:ss.SSS' }}</span>\n                <span class=\"log-icon\">\n                  @switch (log.level) {\n                  @case ('info') {\n                  <i class=\"fa-light fa-info-circle\"></i>\n                  }\n                  @case ('success') {\n                  <i class=\"fa-light fa-check-circle\"></i>\n                  }\n                  @case ('warning') {\n                  <i class=\"fa-light fa-exclamation-triangle\"></i>\n                  }\n                  @case ('error') {\n                  <i class=\"fa-light fa-times-circle\"></i>\n                  }\n                  }\n                </span>\n                <span class=\"log-message\">{{ log.message }}</span>\n                @if (log.data) {\n                <button class=\"log-data-toggle\" (click)=\"log.expanded = !log.expanded\">\n                  <i class=\"fa-light\" [class.fa-chevron-down]=\"!log.expanded\" [class.fa-chevron-up]=\"log.expanded\"></i>\n                </button>\n                }\n              </div>\n\n              @if (log.data && log.expanded) {\n              <pre class=\"log-data\">{{ log.data | json }}</pre>\n              }\n              }\n            </div>\n            } @else {\n            <div class=\"empty-state\">\n              <i class=\"fa-light fa-play-circle\"></i>\n              <p>{{ '@workflow-management:workflow-studio.components.execution-result.empty-states.no-results.description' | translate | async }}</p>\n            </div>\n            }\n\n            <!-- Final Result -->\n            @if (executionResult()) {\n            <div class=\"final-result\">\n              <div class=\"result-header\" (click)=\"showExecutionResult.set(!showExecutionResult())\">\n                <h4>\n                  <i class=\"fa-light\" [class.fa-chevron-down]=\"showExecutionResult()\"\n                    [class.fa-chevron-left]=\"!showExecutionResult()\"></i>\n                  {{ '@workflow-management:workflow-studio.components.execution-result.final-result.title' | translate | async }}\n                </h4>\n                <span class=\"toggle-hint\">{{ (showExecutionResult() ? '@workflow-management:workflow-studio.components.execution-result.final-result.toggle.close' : '@workflow-management:workflow-studio.components.execution-result.final-result.toggle.open') | translate | async }}</span>\n              </div>\n              @if (showExecutionResult()) {\n              <div class=\"result-card\">\n                @if (executionResult().status) {\n                <div class=\"result-row\">\n                  <strong>{{ '@workflow-management:workflow-studio.components.execution-result.final-result.fields.status' | translate | async }}:</strong>\n                  <span class=\"badge\" [class]=\"'badge-' + (executionResult().status?.toLowerCase() || 'unknown')\">\n                    {{ executionResult().status }}\n                  </span>\n                </div>\n                }\n                @if (executionResult().subStatus) {\n                <div class=\"result-row\">\n                  <strong>{{ '@workflow-management:workflow-studio.components.execution-result.final-result.fields.sub-status' | translate | async }}:</strong>\n                  <span class=\"badge\" [class]=\"'badge-' + (executionResult().subStatus?.toLowerCase() || 'unknown')\">\n                    {{ executionResult().subStatus }}\n                  </span>\n                </div>\n                }\n                @if (executionResult().success !== undefined) {\n                <div class=\"result-row\">\n                  <strong>{{ '@workflow-management:workflow-studio.components.execution-result.final-result.fields.success' | translate | async }}:</strong>\n                  <span class=\"badge\" [class]=\"'badge-' + (executionResult().success ? 'success' : 'danger')\">\n                    {{ (executionResult().success ? '@workflow-management:workflow-studio.components.execution-result.final-result.values.success' : '@workflow-management:workflow-studio.components.execution-result.final-result.values.failed') | translate | async }}\n                  </span>\n                </div>\n                }\n                @if (executionResult().error) {\n                <div class=\"result-row\">\n                  <strong>{{ '@workflow-management:workflow-studio.components.execution-result.final-result.fields.error' | translate | async }}:</strong>\n                  <span class=\"error-text\">{{ executionResult().error }}</span>\n                </div>\n                }\n                @if (executionResult().output) {\n                <div class=\"result-row\">\n                  <strong>{{ '@workflow-management:workflow-studio.components.execution-result.final-result.fields.output' | translate | async }}:</strong>\n                  <pre>{{ executionResult().output | json }}</pre>\n                </div>\n                }\n              </div>\n              }\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n\n      <!-- Workflow Settings Modal -->\n      @if (showWorkflowSettings()) {\n      <div class=\"settings-modal-overlay\" (click)=\"closeWorkflowSettings()\">\n        <div class=\"settings-modal\" (click)=\"$event.stopPropagation()\">\n          <!-- Modal Header -->\n          <div class=\"settings-modal-header\">\n            <div class=\"header-title\">\n              <i class=\"fa-light fa-cog\"></i>\n              <h2>{{ '@workflow-management:workflow-studio.settings.title' | translate | async }}</h2>\n            </div>\n            <button class=\"close-btn\" (click)=\"closeWorkflowSettings()\">\n              <i class=\"fa-light fa-times\"></i>\n            </button>\n          </div>\n\n          <!-- Modal Body -->\n          <div class=\"settings-modal-body\">\n            <!-- Tabs Navigation -->\n            <div class=\"settings-tabs\">\n              <button class=\"tab-btn\" [class.active]=\"activeSettingsTab() === 'general'\"\n                (click)=\"switchSettingsTab('general')\">\n                <i class=\"fa-light fa-info-circle\"></i>\n                {{ '@workflow-management:workflow-studio.settings.tabs.general' | translate | async }}\n              </button>\n              <button class=\"tab-btn\" [class.active]=\"activeSettingsTab() === 'inputs'\"\n                (click)=\"switchSettingsTab('inputs')\">\n                <i class=\"fa-light fa-sign-in\"></i>\n                {{ '@workflow-management:workflow-studio.settings.tabs.inputs' | translate | async }}\n                @if (workflowSettings().inputs.length > 0) {\n                <span class=\"badge\">{{ workflowSettings().inputs.length }}</span>\n                }\n              </button>\n              <button class=\"tab-btn\" [class.active]=\"activeSettingsTab() === 'outputs'\"\n                (click)=\"switchSettingsTab('outputs')\">\n                <i class=\"fa-light fa-sign-out\"></i>\n                {{ '@workflow-management:workflow-studio.settings.tabs.outputs' | translate | async }}\n                @if (workflowSettings().outputs.length > 0) {\n                <span class=\"badge\">{{ workflowSettings().outputs.length }}</span>\n                }\n              </button>\n              <button class=\"tab-btn\" [class.active]=\"activeSettingsTab() === 'variables'\"\n                (click)=\"switchSettingsTab('variables')\">\n                <i class=\"fa-light fa-box\"></i>\n                {{ '@workflow-management:workflow-studio.settings.tabs.variables' | translate | async }}\n                @if (workflowSettings().variables.length > 0) {\n                <span class=\"badge\">{{ workflowSettings().variables.length }}</span>\n                }\n              </button>\n              <button class=\"tab-btn\" [class.active]=\"activeSettingsTab() === 'advanced'\"\n                (click)=\"switchSettingsTab('advanced')\">\n                <i class=\"fa-light fa-cog\"></i>\n                {{ '@workflow-management:workflow-studio.settings.tabs.advanced' | translate | async }}\n              </button>\n            </div>\n\n            <!-- Tab Content -->\n            <div class=\"settings-content\">\n              <!-- General Tab -->\n              @if (activeSettingsTab() === 'general') {\n              <div class=\"settings-section\">\n                <h3>{{ '@workflow-management:workflow-studio.settings.sections.general.title' | translate | async }}</h3>\n                <div class=\"form-group\">\n                  <label>{{ '@workflow-management:workflow-studio.settings.sections.general.fields.name.title' | translate | async }}</label>\n                  <input type=\"text\" class=\"form-input\"\n                    [placeholder]=\"'@workflow-management:workflow-studio.settings.sections.general.fields.name.placeholder' | translate | async\"\n                    [(ngModel)]=\"workflowSettings().name\" />\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ '@workflow-management:workflow-studio.settings.sections.general.fields.definition-id.title' | translate | async }}</label>\n                  <input type=\"text\" class=\"form-input\"\n                    [placeholder]=\"'@workflow-management:workflow-studio.settings.sections.general.fields.definition-id.placeholder' | translate | async\"\n                    [(ngModel)]=\"workflowSettings().definitionId\" />\n                  <small>{{ '@workflow-management:workflow-studio.settings.sections.general.fields.definition-id.description' | translate | async }}</small>\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ '@workflow-management:workflow-studio.settings.sections.general.fields.description.title' | translate | async }}</label>\n                  <textarea class=\"form-textarea\" rows=\"4\"\n                    [placeholder]=\"'@workflow-management:workflow-studio.settings.sections.general.fields.description.placeholder' | translate | async\"\n                    [(ngModel)]=\"workflowSettings().description\"></textarea>\n                </div>\n              </div>\n              }\n\n              <!-- Inputs Tab -->\n              @if (activeSettingsTab() === 'inputs') {\n              <div class=\"settings-section\">\n                <div class=\"section-header\">\n                  <h3>{{ '@workflow-management:workflow-studio.settings.sections.inputs.title' | translate | async }}</h3>\n                  <button class=\"add-btn\" (click)=\"addWorkflowInput()\">\n                    <i class=\"fa-light fa-plus\"></i>\n                    {{ '@workflow-management:workflow-studio.settings.sections.inputs.add-button' | translate | async }}\n                  </button>\n                </div>\n\n                @if (workflowSettings().inputs.length === 0) {\n                <div class=\"empty-state\">\n                  <i class=\"fa-light fa-inbox\"></i>\n                  <p>{{ '@workflow-management:workflow-studio.settings.sections.inputs.empty-state.title' | translate | async }}</p>\n                  <small>{{ '@workflow-management:workflow-studio.settings.sections.inputs.empty-state.description' | translate | async }}</small>\n                </div>\n                } @else {\n                <div class=\"items-list\">\n                  @for (input of workflowSettings().inputs; track $index) {\n                  <div class=\"item-card\">\n                    <div class=\"item-header\">\n                      <span class=\"item-number\">#{{ $index + 1 }}</span>\n                      <button class=\"remove-btn\" (click)=\"removeWorkflowInput($index)\"\n                        [title]=\"'@workflow-management:workflow-studio.settings.sections.inputs.actions.remove' | translate | async\">\n                        <i class=\"fa-light fa-trash\"></i>\n                      </button>\n                    </div>\n                    <div class=\"item-body\">\n                      <div class=\"form-row\">\n                        <div class=\"form-group flex-1\">\n                          <label>{{ '@workflow-management:workflow-studio.settings.sections.inputs.fields.name' | translate | async }}</label>\n                          <input type=\"text\" class=\"form-input\" placeholder=\"userName\" [value]=\"input.name\"\n                            (input)=\"updateWorkflowInput($index, 'name', $any($event.target).value)\" />\n                        </div>\n                        <div class=\"form-group flex-1\">\n                          <label>{{ '@workflow-management:workflow-studio.settings.sections.inputs.fields.title' | translate | async }}</label>\n                          <input type=\"text\" class=\"form-input\" placeholder=\"User Name\" [value]=\"input.title\"\n                            (input)=\"updateWorkflowInput($index, 'title', $any($event.target).value)\" />\n                        </div>\n                      </div>\n                      <div class=\"form-group\">\n                        <label>{{ '@workflow-management:workflow-studio.settings.sections.inputs.fields.description' | translate | async }}</label>\n                        <input type=\"text\" class=\"form-input\"\n                          [placeholder]=\"'@workflow-management:workflow-studio.settings.sections.inputs.fields.description-placeholder' | translate | async\"\n                          [value]=\"input.description || ''\"\n                          (input)=\"updateWorkflowInput($index, 'description', $any($event.target).value)\" />\n                      </div>\n                      <div class=\"form-row\">\n                        <div class=\"form-group flex-1\">\n                          <label>{{ '@workflow-management:workflow-studio.settings.sections.inputs.fields.data-type' | translate | async }}</label>\n                          <select class=\"form-select\" [value]=\"input.schema.dataType || 'string'\"\n                            (change)=\"updateWorkflowInputSchema($index, 'dataType', $any($event.target).value)\">\n                            <option value=\"string\">String</option>\n                            <option value=\"number\">Number</option>\n                            <option value=\"boolean\">Boolean</option>\n                            <option value=\"object\">Object</option>\n                            <option value=\"array\">Array</option>\n                          </select>\n                        </div>\n                        <div class=\"form-group flex-1\">\n                          <label>{{ '@workflow-management:workflow-studio.settings.sections.inputs.fields.default-value' | translate | async }}</label>\n                          <input type=\"text\" class=\"form-input\"\n                            [placeholder]=\"'@workflow-management:workflow-studio.settings.sections.inputs.fields.default-value-placeholder' | translate | async\"\n                            [value]=\"input.schema.defaultValue || ''\"\n                            (input)=\"updateWorkflowInputSchema($index, 'defaultValue', $any($event.target).value)\" />\n                        </div>\n                      </div>\n                      <div class=\"form-group checkbox-group\">\n                        <label>\n                          <input type=\"checkbox\" [checked]=\"getInputIsRequired(input)\"\n                            (change)=\"updateWorkflowInputValidation($index, $any($event.target).checked)\" />\n                          <span>{{ '@workflow-management:workflow-studio.settings.sections.inputs.fields.required' | translate | async }}</span>\n                        </label>\n                      </div>\n                    </div>\n                  </div>\n                  }\n                </div>\n                }\n              </div>\n              }\n\n              <!-- Outputs Tab -->\n              @if (activeSettingsTab() === 'outputs') {\n              <div class=\"settings-section\">\n                <div class=\"section-header\">\n                  <h3>{{ '@workflow-management:workflow-studio.settings.sections.outputs.title' | translate | async }}</h3>\n                  <button class=\"add-btn\" (click)=\"addWorkflowOutput()\">\n                    <i class=\"fa-light fa-plus\"></i>\n                    {{ '@workflow-management:workflow-studio.settings.sections.outputs.add-button' | translate | async }}\n                  </button>\n                </div>\n\n                @if (workflowSettings().outputs.length === 0) {\n                <div class=\"empty-state\">\n                  <i class=\"fa-light fa-inbox\"></i>\n                  <p>{{ '@workflow-management:workflow-studio.settings.sections.outputs.empty-state.title' | translate | async }}</p>\n                  <small>{{ '@workflow-management:workflow-studio.settings.sections.outputs.empty-state.description' | translate | async }}</small>\n                </div>\n                } @else {\n                <div class=\"items-list\">\n                  @for (output of workflowSettings().outputs; track $index) {\n                  <div class=\"item-card\">\n                    <div class=\"item-header\">\n                      <span class=\"item-number\">#{{ $index + 1 }}</span>\n                      <button class=\"remove-btn\" (click)=\"removeWorkflowOutput($index)\"\n                        [title]=\"'@workflow-management:workflow-studio.settings.sections.outputs.actions.remove' | translate | async\">\n                        <i class=\"fa-light fa-trash\"></i>\n                      </button>\n                    </div>\n                    <div class=\"item-body\">\n                      <div class=\"form-row\">\n                        <div class=\"form-group flex-1\">\n                          <label>{{ '@workflow-management:workflow-studio.settings.sections.outputs.fields.name' | translate | async }}</label>\n                          <input type=\"text\" class=\"form-input\" placeholder=\"result\" [value]=\"output.name\"\n                            (input)=\"updateWorkflowOutput($index, 'name', $any($event.target).value)\" />\n                        </div>\n                        <div class=\"form-group flex-1\">\n                          <label>{{ '@workflow-management:workflow-studio.settings.sections.outputs.fields.title' | translate | async }}</label>\n                          <input type=\"text\" class=\"form-input\" placeholder=\"Result\" [value]=\"output.title\"\n                            (input)=\"updateWorkflowOutput($index, 'title', $any($event.target).value)\" />\n                        </div>\n                      </div>\n                      <div class=\"form-group\">\n                        <label>{{ '@workflow-management:workflow-studio.settings.sections.outputs.fields.description' | translate | async }}</label>\n                        <input type=\"text\" class=\"form-input\"\n                          [placeholder]=\"'@workflow-management:workflow-studio.settings.sections.outputs.fields.description-placeholder' | translate | async\"\n                          [value]=\"output.description || ''\"\n                          (input)=\"updateWorkflowOutput($index, 'description', $any($event.target).value)\" />\n                      </div>\n                      <div class=\"form-group\">\n                        <label>{{ '@workflow-management:workflow-studio.settings.sections.outputs.fields.data-type' | translate | async }}</label>\n                        <select class=\"form-select\" [value]=\"output.schema.dataType || 'string'\"\n                          (change)=\"updateWorkflowOutputSchema($index, 'dataType', $any($event.target).value)\">\n                          <option value=\"string\">String</option>\n                          <option value=\"number\">Number</option>\n                          <option value=\"boolean\">Boolean</option>\n                          <option value=\"object\">Object</option>\n                          <option value=\"array\">Array</option>\n                        </select>\n                      </div>\n                    </div>\n                  </div>\n                  }\n                </div>\n                }\n              </div>\n              }\n\n              <!-- Variables Tab -->\n              @if (activeSettingsTab() === 'variables') {\n              <div class=\"settings-section\">\n                <div class=\"section-header\">\n                  <h3>{{ '@workflow-management:workflow-studio.settings.sections.variables.title' | translate | async }}</h3>\n                  <button class=\"add-btn\" (click)=\"addWorkflowVariable()\">\n                    <i class=\"fa-light fa-plus\"></i>\n                    {{ '@workflow-management:workflow-studio.settings.sections.variables.add-button' | translate | async }}\n                  </button>\n                </div>\n\n                @if (workflowSettings().variables.length === 0) {\n                <div class=\"empty-state\">\n                  <i class=\"fa-light fa-inbox\"></i>\n                  <p>{{ '@workflow-management:workflow-studio.settings.sections.variables.empty-state.title' | translate | async }}</p>\n                  <small>{{ '@workflow-management:workflow-studio.settings.sections.variables.empty-state.description' | translate | async }}</small>\n                </div>\n                } @else {\n                <div class=\"items-list\">\n                  @for (variable of workflowSettings().variables; track $index) {\n                  <div class=\"item-card\">\n                    <div class=\"item-header\">\n                      <span class=\"item-number\">#{{ $index + 1 }}</span>\n                      <button class=\"remove-btn\" (click)=\"removeWorkflowVariable($index)\"\n                        [title]=\"'@workflow-management:workflow-studio.settings.sections.variables.actions.remove' | translate | async\">\n                        <i class=\"fa-light fa-trash\"></i>\n                      </button>\n                    </div>\n                    <div class=\"item-body\">\n                      <div class=\"form-row\">\n                        <div class=\"form-group flex-1\">\n                          <label>{{ '@workflow-management:workflow-studio.settings.sections.variables.fields.name' | translate | async }}</label>\n                          <input type=\"text\" class=\"form-input\" placeholder=\"tempData\" [value]=\"variable.name\"\n                            (input)=\"updateWorkflowVariable($index, 'name', $any($event.target).value)\" />\n                        </div>\n                        <div class=\"form-group flex-1\">\n                          <label>{{ '@workflow-management:workflow-studio.settings.sections.variables.fields.type' | translate | async }}</label>\n                          <select class=\"form-select\" [value]=\"variable.typeName\"\n                            (change)=\"updateWorkflowVariable($index, 'typeName', $any($event.target).value)\">\n                            <option value=\"string\">String</option>\n                            <option value=\"number\">Number</option>\n                            <option value=\"boolean\">Boolean</option>\n                            <option value=\"object\">Object</option>\n                            <option value=\"array\">Array</option>\n                          </select>\n                        </div>\n                      </div>\n                      <div class=\"form-group\">\n                        <label>{{ '@workflow-management:workflow-studio.settings.sections.variables.fields.description' | translate | async }}</label>\n                        <input type=\"text\" class=\"form-input\"\n                          [placeholder]=\"'@workflow-management:workflow-studio.settings.sections.variables.fields.description-placeholder' | translate | async\"\n                          [value]=\"variable.description || ''\"\n                          (input)=\"updateWorkflowVariable($index, 'description', $any($event.target).value)\" />\n                      </div>\n                      <div class=\"form-group\">\n                        <label>{{ '@workflow-management:workflow-studio.settings.sections.variables.fields.initial-value' | translate | async }}</label>\n                        <input type=\"text\" class=\"form-input\"\n                          [placeholder]=\"'@workflow-management:workflow-studio.settings.sections.variables.fields.initial-value-placeholder' | translate | async\"\n                          [value]=\"variable.value || ''\"\n                          (input)=\"updateWorkflowVariable($index, 'value', $any($event.target).value)\" />\n                      </div>\n                    </div>\n                  </div>\n                  }\n                </div>\n                }\n              </div>\n              }\n\n              <!-- Advanced Tab -->\n              @if (activeSettingsTab() === 'advanced') {\n              <div class=\"settings-section\">\n                <h3>{{ '@workflow-management:workflow-studio.settings.sections.advanced.title' | translate | async }}</h3>\n\n                <!-- Versioning -->\n                <div class=\"advanced-group\">\n                  <h4>\u0646\u0633\u062E\u0647\u200C\u0628\u0646\u062F\u06CC (Versioning)</h4>\n                  <div class=\"form-row\">\n                    <div class=\"form-group flex-1\">\n                      <label>Version</label>\n                      <input type=\"number\" class=\"form-input\" min=\"1\" [(ngModel)]=\"workflowSettings().version\" />\n                      <small>\u0634\u0645\u0627\u0631\u0647 \u0646\u0633\u062E\u0647 workflow (1, 2, 3, ...)</small>\n                    </div>\n                    <div class=\"form-group checkbox-group\" style=\"margin-top: 1.8rem\">\n                      <label>\n                        <input type=\"checkbox\" [(ngModel)]=\"workflowSettings().isLatest\" />\n                        <span>\u0622\u062E\u0631\u06CC\u0646 \u0646\u0633\u062E\u0647 (Is Latest)</span>\n                      </label>\n                    </div>\n                    <div class=\"form-group checkbox-group\" style=\"margin-top: 1.8rem\">\n                      <label>\n                        <input type=\"checkbox\" [(ngModel)]=\"workflowSettings().isPublished\" />\n                        <span>\u0645\u0646\u062A\u0634\u0631 \u0634\u062F\u0647 (Published)</span>\n                      </label>\n                    </div>\n                  </div>\n                </div>\n\n                <!-- Options -->\n                <div class=\"advanced-group\">\n                  <h4>\u062A\u0646\u0638\u06CC\u0645\u0627\u062A (Options)</h4>\n                  <div class=\"form-group checkbox-group\">\n                    <label>\n                      <input type=\"checkbox\" [(ngModel)]=\"workflowSettings().usableAsActivity\" />\n                      <span>\u0642\u0627\u0628\u0644 \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 Activity</span>\n                    </label>\n                    <small>\u0627\u06CC\u0646 workflow \u0645\u06CC\u200C\u062A\u0648\u0627\u0646\u062F \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06CC\u06A9 activity \u062F\u0631 workflow \u0647\u0627\u06CC \u062F\u06CC\u06AF\u0631 \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u0634\u0648\u062F</small>\n                  </div>\n                  <div class=\"form-group checkbox-group\">\n                    <label>\n                      <input type=\"checkbox\" [(ngModel)]=\"workflowSettings().autoUpdateConsumingWorkflows\" />\n                      <span>\u0628\u0647\u200C\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06CC \u062E\u0648\u062F\u06A9\u0627\u0631 workflows \u0645\u0635\u0631\u0641\u200C\u06A9\u0646\u0646\u062F\u0647</span>\n                    </label>\n                    <small>workflow \u0647\u0627\u06CC\u06CC \u06A9\u0647 \u0627\u0632 \u0627\u06CC\u0646 workflow \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u0645\u06CC\u200C\u06A9\u0646\u0646\u062F \u0628\u0647 \u0635\u0648\u0631\u062A \u062E\u0648\u062F\u06A9\u0627\u0631 \u0628\u0647\u200C\u0631\u0648\u0632 \u0645\u06CC\u200C\u0634\u0648\u0646\u062F</small>\n                  </div>\n                </div>\n\n                <!-- Metadata -->\n                <div class=\"advanced-group\">\n                  <h4>Metadata</h4>\n                  <div class=\"form-row\">\n                    <div class=\"form-group flex-1\">\n                      <label>Tool Version</label>\n                      <input type=\"text\" class=\"form-input\" placeholder=\"1.0.0\"\n                        [(ngModel)]=\"workflowSettings().toolVersion\" />\n                      <small>\u0646\u0633\u062E\u0647 \u0627\u0628\u0632\u0627\u0631 \u0633\u0627\u0632\u0646\u062F\u0647</small>\n                    </div>\n                    <div class=\"form-group flex-1\">\n                      <label>Provider Name</label>\n                      <input type=\"text\" class=\"form-input\" placeholder=\"WorkflowStudio\"\n                        [(ngModel)]=\"workflowSettings().providerName\" />\n                      <small>\u0646\u0627\u0645 \u0627\u0628\u0632\u0627\u0631 \u0633\u0627\u0632\u0646\u062F\u0647</small>\n                    </div>\n                  </div>\n                </div>\n\n                <!-- Outcomes -->\n                <div class=\"advanced-group\">\n                  <h4>Workflow Outcomes</h4>\n                  <div class=\"form-group\">\n                    <label>Possible Outcomes</label>\n                    <input type=\"text\" class=\"form-input\" placeholder=\"Done, Success, Failed (\u062C\u062F\u0627 \u0634\u062F\u0647 \u0628\u0627 \u06A9\u0627\u0645\u0627)\"\n                      [value]=\"workflowSettings().outcomes.join(', ')\"\n                      (input)=\"updateOutcomes($any($event.target).value)\" />\n                    <small>\u0646\u062A\u0627\u06CC\u062C \u0645\u0645\u06A9\u0646 \u06A9\u0647 \u0627\u06CC\u0646 workflow \u0645\u06CC\u200C\u062A\u0648\u0627\u0646\u062F \u0628\u0631\u06AF\u0631\u062F\u0627\u0646\u062F (\u0645\u062B\u0644\u0627\u064B: Done, Success, Failed)</small>\n                  </div>\n                  <div class=\"outcomes-preview\">\n                    @for (outcome of workflowSettings().outcomes; track outcome) {\n                    <span class=\"outcome-chip\">{{ outcome }}</span>\n                    }\n                  </div>\n                </div>\n\n                <!-- Export Preview -->\n                <div class=\"advanced-group\">\n                  <h4>\u062E\u0631\u0648\u062C\u06CC \u0646\u0647\u0627\u06CC\u06CC (WorkflowDefinition)</h4>\n                  <small>\u0627\u06CC\u0646 \u0633\u0627\u062E\u062A\u0627\u0631 \u062F\u0642\u06CC\u0642\u0627\u064B \u0645\u0637\u0627\u0628\u0642 \u0628\u0627 WorkflowDefinition \u0627\u0633\u062A \u0648 \u062F\u0631 \u062F\u06CC\u062A\u0627\u0628\u06CC\u0633 \u0630\u062E\u06CC\u0631\u0647 \u0645\u06CC\u200C\u0634\u0648\u062F</small>\n                  <div class=\"export-info\">\n                    <div class=\"info-row\">\n                      <span class=\"label\">Definition ID:</span>\n                      <code>{{ workflowSettings().definitionId || '(\u062E\u0627\u0644\u06CC)' }}</code>\n                    </div>\n                    <div class=\"info-row\">\n                      <span class=\"label\">Name:</span>\n                      <code>{{ workflowSettings().name || '(\u062E\u0627\u0644\u06CC)' }}</code>\n                    </div>\n                    <div class=\"info-row\">\n                      <span class=\"label\">Version:</span>\n                      <code>v{{ workflowSettings().version }}</code>\n                    </div>\n                    <div class=\"info-row\">\n                      <span class=\"label\">Inputs:</span>\n                      <code>{{ workflowSettings().inputs.length }} items</code>\n                    </div>\n                    <div class=\"info-row\">\n                      <span class=\"label\">Outputs:</span>\n                      <code>{{ workflowSettings().outputs.length }} items</code>\n                    </div>\n                    <div class=\"info-row\">\n                      <span class=\"label\">Variables:</span>\n                      <code>{{ workflowSettings().variables.length }} items</code>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              }\n            </div>\n          </div>\n\n          <!-- Modal Footer -->\n          <div class=\"settings-modal-footer\">\n            <ax-button [text]=\"'@workflow-management:workflow-studio.settings.actions.cancel' | translate | async\" color=\"secondary\" size=\"md\" (onClick)=\"closeWorkflowSettings()\"> </ax-button>\n            <ax-button [text]=\"'@workflow-management:workflow-studio.settings.actions.save' | translate | async\" color=\"primary\" size=\"md\" (onClick)=\"saveWorkflowSettings()\"> </ax-button>\n          </div>\n        </div>\n      </div>\n      }\n\n      <!-- Workflow Execution Dialog -->\n      @if (showExecutionDialog()) {\n      <div class=\"execution-dialog-overlay\" (click)=\"closeExecutionDialog()\">\n        <div class=\"execution-dialog\" (click)=\"$event.stopPropagation()\">\n          <!-- Dialog Header -->\n          <div class=\"execution-dialog-header\">\n            <div class=\"header-content\">\n              <i class=\"fa-light fa-play-circle\"></i>\n              <div class=\"header-info\">\n                <h2>{{ '@workflow-management:test-pages.workflow-studio.actions.execute-workflow.title' | translate |\n                  async }}</h2>\n                <p>{{ '@workflow-management:test-pages.workflow-studio.actions.execute-workflow.description' | translate\n                  | async }}</p>\n              </div>\n            </div>\n            <button class=\"close-btn\" (click)=\"closeExecutionDialog()\" [disabled]=\"isExecuting()\">\n              <i class=\"fa-light fa-times\"></i>\n            </button>\n          </div>\n\n          <!-- Dialog Body -->\n          <div class=\"execution-dialog-body\">\n            <!-- Workflow Info Panel (Before Execution) -->\n            @if (!workflowInstanceState()) {\n            <div class=\"workflow-info-panel\">\n              <div class=\"start-section\">\n                <div class=\"start-illustration\">\n                  <i class=\"fa-light fa-rocket\"></i>\n                </div>\n                <h3>{{ '@workflow-management:test-pages.workflow-studio.messages.info.ready-to-execute' | translate |\n                  async }}</h3>\n                <p>{{ '@workflow-management:test-pages.workflow-studio.messages.info.click-to-start' | translate | async\n                  }}</p>\n                <ax-button\n                  [text]=\"'@workflow-management:test-pages.workflow-studio.actions.start-execution.title' | translate | async\"\n                  color=\"success\" size=\"lg\" (onClick)=\"startWorkflowExecution()\">\n                </ax-button>\n              </div>\n            </div>\n            }\n\n\n            <!-- Custom UI for Registration -->\n            @if (false) {\n            <div class=\"registration-ui\">\n              <div class=\"registration-card\">\n                <div class=\"registration-icon\">\n                  <i class=\"fa-light fa-user-circle\"></i>\n                </div>\n                <h3>\u0641\u0631\u0622\u06CC\u0646\u062F \u062B\u0628\u062A\u200C\u0646\u0627\u0645</h3>\n                <p class=\"registration-desc\">\n                  \u0627\u06CC\u0646 \u0641\u0644\u0648 \u0634\u0627\u0645\u0644 \u0686\u0646\u062F \u0645\u0631\u062D\u0644\u0647 \u0627\u0633\u062A \u06A9\u0647 \u062F\u0627\u062F\u0647\u200C\u0647\u0627\u06CC \u06A9\u0627\u0631\u0628\u0631 \u0631\u0627 \u062C\u0645\u0639\u200C\u0622\u0648\u0631\u06CC \u06A9\u0631\u062F\u0647 \u0648 \u062F\u0631 \u0646\u0647\u0627\u06CC\u062A \u062D\u0633\u0627\u0628 \u06A9\u0627\u0631\u0628\u0631\u06CC \u0627\u06CC\u062C\u0627\u062F \u0645\u06CC\u200C\u06A9\u0646\u062F.\n                </p>\n\n                @if (workflowInstanceState()?.status === 'running') {\n                <div class=\"registration-progress\">\n                  <div class=\"progress-spinner\">\n                    <i class=\"fa-light fa-spinner-third fa-spin\"></i>\n                  </div>\n                  <p>\u062F\u0631 \u062D\u0627\u0644 \u0627\u062C\u0631\u0627\u06CC \u0645\u0631\u0627\u062D\u0644 \u062B\u0628\u062A\u200C\u0646\u0627\u0645...</p>\n                </div>\n                }\n\n                @if (workflowInstanceState()?.status === 'finished') {\n                <div class=\"registration-success\">\n                  <i class=\"fa-light fa-check-circle\"></i>\n                  <h4>\u062B\u0628\u062A\u200C\u0646\u0627\u0645 \u0628\u0627 \u0645\u0648\u0641\u0642\u06CC\u062A \u0627\u0646\u062C\u0627\u0645 \u0634\u062F!</h4>\n                  <p>\u062D\u0633\u0627\u0628 \u06A9\u0627\u0631\u0628\u0631\u06CC \u0634\u0645\u0627 \u0627\u06CC\u062C\u0627\u062F \u0634\u062F \u0648 \u0628\u0647 \u0632\u0648\u062F\u06CC \u0628\u0647 \u062F\u0627\u0634\u0628\u0648\u0631\u062F \u0645\u0646\u062A\u0642\u0644 \u062E\u0648\u0627\u0647\u06CC\u062F \u0634\u062F.</p>\n                </div>\n                }\n              </div>\n            </div>\n            }\n\n            <!-- Default Execution View -->\n            @if (workflowInstanceState()) {\n            <div class=\"default-execution-view\">\n              <div class=\"execution-status\">\n                @if (workflowInstanceState()?.status === 'running') {\n                <div class=\"status-running\">\n                  <i class=\"fa-light fa-spinner-third fa-spin\"></i>\n                  <h3>\u062F\u0631 \u062D\u0627\u0644 \u0627\u062C\u0631\u0627...</h3>\n                  <p>Workflow \u062F\u0631 \u062D\u0627\u0644 \u0627\u062C\u0631\u0627 \u0627\u0633\u062A. \u0644\u0637\u0641\u0627\u064B \u0635\u0628\u0631 \u06A9\u0646\u06CC\u062F.</p>\n                </div>\n                }\n\n                @if (workflowInstanceState()?.status === 'finished') {\n                <div class=\"status-finished\">\n                  <i class=\"fa-light fa-check-circle\"></i>\n                  <h3>\u0627\u062C\u0631\u0627 \u0628\u0627 \u0645\u0648\u0641\u0642\u06CC\u062A \u062A\u06A9\u0645\u06CC\u0644 \u0634\u062F</h3>\n                  <p>Workflow \u0628\u0627 \u0645\u0648\u0641\u0642\u06CC\u062A \u0627\u062C\u0631\u0627 \u0634\u062F \u0648 \u062A\u0645\u0627\u0645 Activities \u0627\u0646\u062C\u0627\u0645 \u0634\u062F\u0646\u062F.</p>\n                </div>\n                }\n\n                @if (workflowInstanceState()?.status === 'error') {\n                <div class=\"status-error\">\n                  <i class=\"fa-light fa-times-circle\"></i>\n                  <h3>\u062E\u0637\u0627 \u062F\u0631 \u0627\u062C\u0631\u0627</h3>\n                  <p>{{ workflowInstanceState()?.error }}</p>\n                </div>\n                }\n              </div>\n            </div>\n            }\n\n            <!-- Execution Logs Panel -->\n            @if (workflowInstanceState() && executionLogs().length > 0) {\n            <div class=\"execution-logs-panel\">\n              <h3><i class=\"fa-light fa-terminal\"></i> \u0644\u0627\u06AF\u200C\u0647\u0627\u06CC \u0627\u062C\u0631\u0627</h3>\n              <div class=\"logs-container-compact\">\n                @for (log of executionLogs(); track $index) {\n                <div class=\"log-item-compact\" [class]=\"'log-' + log.level\">\n                  <span class=\"log-time\">{{ log.timestamp | date: 'HH:mm:ss' }}</span>\n                  <span class=\"log-icon\">\n                    @switch (log.level) {\n                    @case ('info') {\n                    <i class=\"fa-light fa-info-circle\"></i>\n                    }\n                    @case ('success') {\n                    <i class=\"fa-light fa-check-circle\"></i>\n                    }\n                    @case ('warning') {\n                    <i class=\"fa-light fa-exclamation-triangle\"></i>\n                    }\n                    @case ('error') {\n                    <i class=\"fa-light fa-times-circle\"></i>\n                    }\n                    }\n                  </span>\n                  <span class=\"log-message\">{{ log.message }}</span>\n                </div>\n                }\n              </div>\n            </div>\n            }\n          </div>\n\n          <!-- Dialog Footer -->\n          <div class=\"execution-dialog-footer\">\n            <div class=\"footer-info\">\n              @if (workflowInstanceState()?.startTime) {\n              <span class=\"time-info\">\n                <i class=\"fa-light fa-clock\"></i>\n                \u0634\u0631\u0648\u0639: {{ workflowInstanceState()!.startTime | date: 'HH:mm:ss' }}\n              </span>\n              }\n              @if (workflowInstanceState()?.endTime) {\n              <span class=\"time-info\">\n                <i class=\"fa-light fa-flag-checkered\"></i>\n                \u067E\u0627\u06CC\u0627\u0646: {{ workflowInstanceState()!.endTime | date: 'HH:mm:ss' }}\n              </span>\n              }\n            </div>\n            <div class=\"footer-actions\">\n              <ax-button\n                [text]=\"(workflowInstanceState() ? '@general:actions.close.title' : '@general:actions.cancel.title') | translate | async\"\n                color=\"secondary\" size=\"md\" [disabled]=\"isExecuting()\" (onClick)=\"closeExecutionDialog()\">\n              </ax-button>\n            </div>\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n  </axp-page-content>\n</axp-page-layout>", styles: [".sidebar-header .toggle-btn{padding:.5rem;margin-left:auto;background:transparent;border:1px solid #e2e8f0;border-radius:6px;color:#64748b;cursor:pointer;transition:all .2s}.sidebar-header .toggle-btn:hover{background:#f8fafc;border-color:#8b5cf6;color:#8b5cf6}.sidebar-header .toggle-btn i{font-size:.875rem}.sidebar-toggle-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:100;padding:1rem .5rem;background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#8b5cf6;cursor:pointer;box-shadow:0 4px 12px #0000001a;transition:all .3s}.sidebar-toggle-btn:hover{background:#8b5cf6;color:#fff;box-shadow:0 8px 24px #8b5cf64d;transform:translateY(-50%) scale(1.1)}.sidebar-toggle-btn.left{left:0;border-left:none;border-radius:0 8px 8px 0}.sidebar-toggle-btn.right{right:0;border-right:none;border-radius:8px 0 0 8px}.sidebar-toggle-btn i{font-size:1.25rem;display:block}.properties-header .header-actions{display:flex;gap:.5rem;margin-left:auto}.properties-header .header-btn{padding:.375rem .5rem;background:transparent;border:1px solid #e2e8f0;border-radius:4px;color:#64748b;cursor:pointer;transition:all .2s}.properties-header .header-btn:hover{background:#f8fafc;border-color:#8b5cf6;color:#8b5cf6}.properties-header .header-btn i{font-size:.75rem}.connections-list{margin-top:.75rem}.connection-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;margin-bottom:.5rem;font-size:.875rem}.connection-item i{color:#8b5cf6}.connection-item span{flex:1;color:#1e293b}.connection-item .remove-btn{padding:.25rem .375rem;background:transparent;border:1px solid #e2e8f0;border-radius:4px;color:#ef4444;cursor:pointer;transition:all .2s}.connection-item .remove-btn:hover{background:#fef2f2;border-color:#ef4444}.connection-item .remove-btn i{font-size:.75rem;color:inherit}.property-editor{margin-top:.75rem}.property-editor .property-row label{display:flex;align-items:center;gap:.5rem;justify-content:space-between}.property-editor .property-row label .property-type-badge{padding:.125rem .375rem;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;font-size:.625rem;font-weight:400;color:#64748b;text-transform:lowercase;font-family:JetBrains Mono,monospace}.property-editor .property-row select{width:100%;padding:.5rem;border:1px solid #e2e8f0;border-radius:6px;font-size:.875rem;color:#1e293b;background:#fff;cursor:pointer;transition:all .2s}.property-editor .property-row select:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a}.property-editor .property-row textarea{width:100%;padding:.5rem;border:1px solid #e2e8f0;border-radius:6px;font-size:.75rem;font-family:JetBrains Mono,monospace;color:#1e293b;resize:vertical;transition:all .2s}.property-editor .property-row textarea:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a}.workflow-studio{display:flex;flex-direction:column;height:100vh;background:#f8fafc;overflow:hidden}.workflow-popup .popup-header{text-align:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #e2e8f0}.workflow-popup .popup-header h3{margin:0 0 .5rem;color:#1e293b;font-size:1.5rem;font-weight:700}.workflow-popup .popup-header p{margin:0;color:#64748b;font-size:.95rem}.workflow-popup .popup-body{max-height:60vh;overflow-y:auto;padding:0 .5rem}.workflow-popup .popup-body h4{margin:1.5rem 0 .75rem;color:#374151;font-size:1.1rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.workflow-popup .popup-body ul{margin:0;padding-left:1.5rem}.workflow-popup .popup-body ul li{margin-bottom:.5rem;color:#4b5563}.workflow-popup .popup-body ul li strong{color:#1f2937}.workflow-popup .workflow-info{background:#f8fafc;padding:1rem;border-radius:8px;border:1px solid #e2e8f0}.workflow-popup .workflow-variables{background:#fef3c7;padding:1rem;border-radius:8px;border:1px solid #f59e0b}.workflow-popup .workflow-flow{background:#ecfdf5;padding:1rem;border-radius:8px;border:1px solid #10b981}.workflow-popup .workflow-flow .flow-steps{display:flex;flex-direction:column;gap:.75rem}.workflow-popup .workflow-flow .flow-steps .flow-step{display:flex;align-items:center;gap:.75rem;padding:.5rem;background:#fff;border-radius:6px;border:1px solid #d1d5db}.workflow-popup .workflow-flow .flow-steps .flow-step .step-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#3b82f6;color:#fff;border-radius:50%;font-size:.8rem;font-weight:600}.workflow-popup .workflow-flow .flow-steps .flow-step .step-text{color:#374151;font-weight:500}.workflow-popup .workflow-json{background:#1f2937;padding:1rem;border-radius:8px;border:1px solid #374151}.workflow-popup .workflow-json .json-preview{background:transparent;color:#e5e7eb;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.8rem;line-height:1.4;margin:0;white-space:pre-wrap;word-break:break-all;max-height:200px;overflow-y:auto}.workflow-popup .popup-footer{text-align:center;margin-top:1.5rem;padding-top:1rem;border-top:1px solid #e2e8f0}.workflow-popup .popup-footer .btn{padding:.75rem 1.5rem;background:#3b82f6;color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;transition:background-color .2s}.workflow-popup .popup-footer .btn:hover{background:#2563eb}.workflow-popup .popup-footer .btn i{font-size:.9rem}.view-workflow-link{color:#3b82f6;text-decoration:none;font-size:.85rem;margin-left:.5rem;transition:color .2s}.view-workflow-link:hover{color:#1d4ed8;text-decoration:underline}.studio-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:#fff;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px #0000000d}.studio-header .header-title{display:flex;align-items:center;gap:.75rem}.studio-header .header-title i{font-size:1.75rem;color:#8b5cf6}.studio-header .header-title h1{margin:0;font-size:1.5rem;font-weight:700;color:#1e293b}.studio-header .header-title .badge{padding:.25rem .75rem;background:#8b5cf6;color:#fff;border-radius:12px;font-size:.75rem;font-weight:600}.studio-header .header-actions{display:flex;gap:.75rem;align-items:center}.samples-dropdown{position:relative}.samples-dropdown .samples-menu{position:absolute;top:calc(100% + .5rem);left:0;min-width:320px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 10px 25px #0000001a;z-index:1000;max-height:400px;overflow-y:auto}.samples-dropdown .samples-menu .sample-item{padding:.875rem 1rem;display:flex;align-items:flex-start;gap:.75rem;cursor:pointer;border-bottom:1px solid #f1f5f9;transition:all .2s}.samples-dropdown .samples-menu .sample-item:last-child{border-bottom:none}.samples-dropdown .samples-menu .sample-item:hover{background:#f8fafc;transform:translate(4px)}.samples-dropdown .samples-menu .sample-item i{font-size:1.25rem;margin-top:.125rem;color:#8b5cf6}.samples-dropdown .samples-menu .sample-item .sample-info{display:flex;flex-direction:column;gap:.25rem;flex:1}.samples-dropdown .samples-menu .sample-item .sample-info strong{color:#1e293b;font-size:.875rem;font-weight:600}.samples-dropdown .samples-menu .sample-item .sample-info span{color:#64748b;font-size:.75rem;line-height:1.4}.studio-body{display:grid;grid-template-columns:320px 1fr 420px;gap:0;flex:1;overflow:hidden;transition:grid-template-columns .3s ease}.studio-body.sidebar-hidden{grid-template-columns:0 1fr 420px}.studio-body.properties-hidden{grid-template-columns:320px 1fr 0}.studio-body.sidebar-hidden.properties-hidden{grid-template-columns:0 1fr 0}.studio-sidebar{background:#fff;border-right:1px solid #e2e8f0;display:flex;flex-direction:column;overflow:hidden}.studio-sidebar .sidebar-header{padding:1rem 1.25rem;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;gap:.5rem}.studio-sidebar .sidebar-header i{font-size:1.25rem;color:#8b5cf6}.studio-sidebar .sidebar-header h3{flex:1;margin:0;font-size:1.125rem;font-weight:600;color:#1e293b}.activities-tree{flex:1;overflow-y:auto;padding:.5rem}.category-section{margin-bottom:.5rem}.category-section .category-header{display:flex;align-items:center;gap:.5rem;padding:.75rem;border-radius:8px;cursor:pointer;transition:all .2s;background:#f8fafc}.category-section .category-header:hover{background:#f1f5f9}.category-section .category-header.active{background:#ede9fe}.category-section .category-header.active>i:first-child{color:#8b5cf6}.category-section .category-header>i:first-child{font-size:.875rem;color:#94a3b8;transition:transform .2s,color .2s}.category-section .category-header>i:nth-child(2){font-size:1.125rem}.category-section .category-header span{flex:1;font-weight:600;font-size:.875rem;color:#334155}.category-section .category-header .count{flex:none;padding:.125rem .5rem;background:#fff;border-radius:10px;font-size:.75rem;font-weight:600;color:#64748b;border:1px solid #e2e8f0}.activities-list{padding:.5rem 0 .5rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;animation:slideDown .3s ease}.activities-list .activities-header{padding:.5rem .75rem;margin-bottom:.5rem}.activities-list .activities-header h4{margin:0;font-size:.875rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px}.activity-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:.875rem;margin-bottom:.75rem;transition:all .2s}.activity-card:hover{border-color:#8b5cf6;box-shadow:0 4px 12px #8b5cf61a;transform:translateY(-1px)}.activity-card .activity-info{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:.5rem}.activity-card .activity-info>i{font-size:1.5rem;color:#8b5cf6;margin-top:.125rem}.activity-card .activity-info .activity-details{flex:1;display:flex;flex-direction:column;gap:.25rem}.activity-card .activity-info .activity-details strong{font-size:.875rem;color:#1e293b}.activity-card .activity-info .activity-details small{font-size:.75rem;color:#64748b;line-height:1.4}.activity-card .activity-info .activity-details code{font-size:.75rem;color:#8b5cf6;background:#f3f0ff;padding:.125rem .375rem;border-radius:4px;width:fit-content}.activity-card .copy-btn{float:right;padding:.375rem .75rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;transition:all .2s;color:#64748b}.activity-card .copy-btn:hover{background:#8b5cf6;border-color:#8b5cf6;color:#fff}.activity-card .copy-btn i{font-size:.875rem}.activity-card .activity-properties{margin-top:.75rem;padding-top:.75rem;border-top:1px solid #f1f5f9}.activity-card .activity-properties .properties-title{display:block;font-size:.75rem;font-weight:600;color:#64748b;margin-bottom:.5rem}.activity-card .activity-properties .property-item{display:flex;align-items:center;gap:.5rem;padding:.25rem 0;font-size:.75rem}.activity-card .activity-properties .property-item code{color:#1e293b;background:#f8fafc;padding:.125rem .375rem;border-radius:3px}.activity-card .activity-properties .property-item .property-type{color:#64748b;font-style:italic}.activity-card .activity-properties .property-item .required{color:#ef4444;font-weight:700}.studio-editor{display:flex;flex-direction:column;background:#1e293b;overflow:hidden}.studio-editor .editor-header{padding:1rem 1.25rem;background:#0f172a;display:flex;align-items:center;gap:.5rem}.studio-editor .editor-header i{font-size:1.125rem;color:#8b5cf6}.studio-editor .editor-header h3{margin:0;font-size:1rem;font-weight:600;color:#e2e8f0}.studio-editor axp-page-toolbar .editor-tabs{display:flex;gap:.5rem;background:transparent}.studio-editor axp-page-toolbar .editor-tabs .tab-btn{padding:.5rem 1rem;background:transparent;border:1px solid #e2e8f0;border-radius:6px;color:#64748b;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.5rem}.studio-editor axp-page-toolbar .editor-tabs .tab-btn i{font-size:.875rem}.studio-editor axp-page-toolbar .editor-tabs .tab-btn:hover{background:#f8fafc;border-color:#cbd5e1;color:#475569}.studio-editor axp-page-toolbar .editor-tabs .tab-btn.active{background:#8b5cf6;border-color:#8b5cf6;color:#fff}.studio-editor .editor-content{flex:1;display:flex;overflow:hidden}.studio-editor .json-tab{flex:1;display:flex;flex-direction:column}.studio-editor .json-editor{flex:1;padding:1.5rem;background:#1e293b;color:#e2e8f0;border:none;outline:none;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:.875rem;line-height:1.6;resize:none;overflow:auto}.studio-editor .json-editor::placeholder{color:#475569}.studio-editor .json-editor::-webkit-scrollbar{width:10px;height:10px}.studio-editor .json-editor::-webkit-scrollbar-track{background:#0f172a}.studio-editor .json-editor::-webkit-scrollbar-thumb{background:#475569;border-radius:5px}.studio-editor .json-editor::-webkit-scrollbar-thumb:hover{background:#64748b}.studio-editor .visual-tab{flex:1;display:flex;background:#f8fafc;position:relative}.studio-editor .visual-canvas{flex:1;display:flex;flex-direction:column;overflow:hidden}.studio-editor .visual-canvas .canvas-toolbar{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:#fff;border-bottom:1px solid #e2e8f0}.studio-editor .visual-canvas .canvas-toolbar .tool-btn{padding:.5rem .75rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;color:#64748b;cursor:pointer;transition:all .2s}.studio-editor .visual-canvas .canvas-toolbar .tool-btn:hover{background:#8b5cf6;border-color:#8b5cf6;color:#fff}.studio-editor .visual-canvas .canvas-toolbar .tool-btn i{font-size:.875rem}.studio-editor .visual-canvas .canvas-toolbar .tool-info{flex:1;display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:#64748b}.studio-editor .visual-canvas .canvas-toolbar .tool-info i{font-size:1rem;color:#8b5cf6}.studio-editor .visual-canvas .canvas-area{flex:1;position:relative;background:linear-gradient(90deg,#e5e7eb 1px,transparent 1px),linear-gradient(#e5e7eb 1px,transparent 1px);background-size:20px 20px;overflow:auto;min-height:600px}.studio-editor .visual-canvas .connections-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.studio-editor .visual-canvas .connection-line{stroke:#64748b;stroke-width:2;fill:none;opacity:.6;cursor:pointer;pointer-events:stroke;transition:all .2s}.studio-editor .visual-canvas .connection-line:hover{stroke:#ef4444;stroke-width:3;opacity:1}.studio-editor .visual-canvas .visual-node{position:absolute;width:150px;background:#fff;border:2px solid #e2e8f0;border-radius:8px;box-shadow:0 2px 8px #0000001a;cursor:move;transition:all .2s;z-index:2}.studio-editor .visual-canvas .visual-node:hover{border-color:#8b5cf6;box-shadow:0 4px 16px #8b5cf633;transform:translateY(-2px)}.studio-editor .visual-canvas .visual-node.selected{border-color:#8b5cf6;border-width:3px;box-shadow:0 0 0 3px #8b5cf633}.studio-editor .visual-canvas .visual-node .node-header{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;border-radius:6px 6px 0 0;font-size:.875rem;font-weight:600}.studio-editor .visual-canvas .visual-node .node-header i{font-size:1rem}.studio-editor .visual-canvas .visual-node .node-header span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-editor .visual-canvas .visual-node .node-header .node-delete{padding:.25rem;background:#fff3;border:none;border-radius:4px;color:#fff;cursor:pointer;transition:all .2s}.studio-editor .visual-canvas .visual-node .node-header .node-delete:hover{background:#ef4444cc}.studio-editor .visual-canvas .visual-node .node-header .node-delete i{font-size:.75rem}.studio-editor .visual-canvas .visual-node .node-body{padding:.75rem}.studio-editor .visual-canvas .visual-node .node-body small{display:block;font-size:.75rem;color:#64748b;text-align:center}.studio-editor .visual-canvas .visual-node .node-connectors{position:relative}.studio-editor .visual-canvas .visual-node .node-connectors .connector{position:absolute;width:12px;height:12px;background:#8b5cf6;border:2px solid white;border-radius:50%;cursor:pointer;transition:all .2s;z-index:10}.studio-editor .visual-canvas .visual-node .node-connectors .connector:hover{transform:scale(1.3);box-shadow:0 0 0 3px #8b5cf64d}.studio-editor .visual-canvas .visual-node .node-connectors .connector-in{top:-50px;left:50%;transform:translate(-50%);background:#3b82f6}.studio-editor .visual-canvas .visual-node .node-connectors .connector-out{bottom:-6px;left:50%;transform:translate(-50%);background:#8b5cf6}.studio-editor .visual-canvas .visual-node .node-connectors .connector-out.active{background:#ef4444}.studio-editor .visual-canvas .visual-node .node-connectors .outcomes-container{position:absolute;bottom:-60px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;background:#fff;padding:8px;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 12px #00000026;min-width:120px;z-index:100}.studio-editor .visual-canvas .visual-node .node-connectors .outcomes-container:before{content:\"\";position:absolute;top:-8px;left:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid white;filter:drop-shadow(0 -2px 2px rgba(0,0,0,.05))}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;transition:all .2s;position:relative}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector:hover{background:#f1f5f9;border-color:#8b5cf6;transform:translate(2px)}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector.active{background:#fef2f2;border-color:#ef4444}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector.active .outcome-dot{background:#ef4444;box-shadow:0 0 0 3px #ef444433}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector .outcome-label{font-size:.75rem;font-weight:600;color:#475569;-webkit-user-select:none;user-select:none;flex:1}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector .outcome-dot{width:10px;height:10px;background:#8b5cf6;border:2px solid white;border-radius:50%;transition:all .2s;flex-shrink:0}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=\"200\"] .outcome-dot,.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=Done] .outcome-dot{background:#10b981}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=\"404\"] .outcome-dot,.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=Failed] .outcome-dot{background:#ef4444}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=Timeout] .outcome-dot,.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=Cancelled] .outcome-dot{background:#f59e0b}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=Then] .outcome-dot{background:#3b82f6}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=Else] .outcome-dot{background:#64748b}.studio-editor .visual-canvas .canvas-empty-state{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#94a3b8;pointer-events:none}.studio-editor .visual-canvas .canvas-empty-state i{font-size:4rem;margin-bottom:1rem;opacity:.5}.studio-editor .visual-canvas .canvas-empty-state p{margin:0 0 .5rem;font-size:1rem;font-weight:500}.studio-editor .visual-canvas .canvas-empty-state small{font-size:.875rem;opacity:.8}.studio-editor .properties-panel{width:280px;background:#fff;border-left:1px solid #e2e8f0;display:flex;flex-direction:column}.studio-editor .properties-panel .properties-header{display:flex;align-items:center;gap:.5rem;padding:1rem;border-bottom:1px solid #e2e8f0}.studio-editor .properties-panel .properties-header i{font-size:1.125rem;color:#8b5cf6}.studio-editor .properties-panel .properties-header h4{flex:1;margin:0;font-size:.875rem;font-weight:600;color:#1e293b}.studio-editor .properties-panel .properties-header button{padding:.25rem .5rem;background:transparent;border:none;color:#64748b;cursor:pointer;transition:color .2s}.studio-editor .properties-panel .properties-header button:hover{color:#ef4444}.studio-editor .properties-panel .properties-body{flex:1;padding:1rem;overflow-y:auto}.studio-editor .properties-panel .properties-body .property-row{margin-bottom:1rem}.studio-editor .properties-panel .properties-body .property-row label{display:block;font-size:.75rem;font-weight:600;color:#64748b;margin-bottom:.375rem;text-transform:uppercase;letter-spacing:.5px}.studio-editor .properties-panel .properties-body .property-row input{width:100%;padding:.5rem;border:1px solid #e2e8f0;border-radius:6px;font-size:.875rem;color:#1e293b;transition:all .2s}.studio-editor .properties-panel .properties-body .property-row input:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a}.studio-editor .properties-panel .properties-body .property-row input:disabled{background:#f8fafc;color:#94a3b8;cursor:not-allowed}.studio-editor .properties-panel .properties-body .properties-divider{height:1px;background:#e2e8f0;margin:1.5rem 0}.studio-editor .properties-panel .properties-body h5{margin:0 0 .5rem;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px}.studio-editor .properties-panel .properties-body .properties-hint{display:block;font-size:.75rem;color:#94a3b8;margin-bottom:.75rem}.studio-editor .properties-panel .properties-body .properties-json{margin:.75rem 0 0;padding:.75rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;font-family:JetBrains Mono,monospace;font-size:.75rem;line-height:1.6;color:#1e293b;overflow-x:auto}.studio-editor .properties-panel .properties-body .no-properties{margin:.75rem 0 0;padding:1rem;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:6px;text-align:center;font-size:.75rem;color:#94a3b8}.studio-editor .properties-panel .properties-body .connections-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem}.studio-editor .properties-panel .properties-body .connections-list .connection-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;font-size:.75rem}.studio-editor .properties-panel .properties-body .connections-list .connection-item.outcome-connection{border-left-width:3px}.studio-editor .properties-panel .properties-body .connections-list .connection-item i{color:#64748b;font-size:.875rem}.studio-editor .properties-panel .properties-body .connections-list .connection-item span{flex:1;color:#1e293b;font-weight:500}.studio-editor .properties-panel .properties-body .connections-list .connection-item .outcome-badge{padding:.25rem .5rem;border-radius:4px;color:#fff;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.studio-editor .properties-panel .properties-body .connections-list .connection-item .remove-btn{padding:.25rem;background:transparent;border:none;color:#ef4444;cursor:pointer;border-radius:4px;transition:all .2s}.studio-editor .properties-panel .properties-body .connections-list .connection-item .remove-btn:hover{background:#fee2e2}.studio-editor .properties-panel .properties-body .connections-list .connection-item .remove-btn i{font-size:.75rem;color:inherit}.studio-editor .properties-panel .properties-body .outcomes-info{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.studio-editor .properties-panel .properties-body .outcomes-info .outcome-tag{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .625rem;background:#fff;border:2px solid;border-radius:6px;font-size:.75rem;font-weight:600;color:#1e293b;transition:all .2s}.studio-editor .properties-panel .properties-body .outcomes-info .outcome-tag:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.studio-editor .properties-panel .properties-body .outcomes-info .outcome-tag .outcome-dot{width:8px;height:8px;border-radius:50%}.studio-result{display:flex;flex-direction:column;background:#fff;border-left:1px solid #e2e8f0;overflow:hidden}.studio-result .result-header{padding:1rem 1.25rem;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;gap:.5rem}.studio-result .result-header i{font-size:1.125rem;color:#10b981}.studio-result .result-header h3{flex:1;margin:0;font-size:1rem;font-weight:600;color:#1e293b}.studio-result .result-header .clear-btn{padding:.375rem .75rem;background:#fee2e2;color:#dc2626;border:none;border-radius:6px;cursor:pointer;font-size:.75rem;font-weight:500;transition:all .2s}.studio-result .result-header .clear-btn:hover{background:#fecaca}.studio-result .result-header .clear-btn i{font-size:.75rem;color:inherit}.studio-result .result-body{flex:1;overflow-y:auto;padding:1rem}.logs-container{display:flex;flex-direction:column;gap:.5rem}.log-item{display:flex;align-items:flex-start;gap:.5rem;padding:.75rem;background:#f8fafc;border-left:3px solid #cbd5e1;border-radius:6px;font-size:.875rem}.log-item.log-info{border-left-color:#3b82f6;background:#eff6ff}.log-item.log-info .log-icon{color:#3b82f6}.log-item.log-success{border-left-color:#10b981;background:#f0fdf4}.log-item.log-success .log-icon{color:#10b981}.log-item.log-warning{border-left-color:#f59e0b;background:#fffbeb}.log-item.log-warning .log-icon{color:#f59e0b}.log-item.log-error{border-left-color:#ef4444;background:#fef2f2}.log-item.log-error .log-icon{color:#ef4444}.log-item .log-time{font-family:JetBrains Mono,monospace;font-size:.75rem;color:#64748b;min-width:80px}.log-item .log-icon{font-size:1rem}.log-item .log-message{flex:1;color:#1e293b}.log-item .log-data-toggle{padding:.25rem .5rem;background:transparent;border:1px solid #cbd5e1;border-radius:4px;cursor:pointer;transition:all .2s}.log-item .log-data-toggle:hover{background:#fff}.log-item .log-data-toggle i{font-size:.75rem;color:#64748b}.log-data{margin:.5rem 0 0;padding:1rem;background:#0f172a;color:#e2e8f0;border-radius:6px;font-family:JetBrains Mono,monospace;font-size:.75rem;line-height:1.6;overflow-x:auto}.settings-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:9999;padding:2rem;animation:fadeIn .2s ease}.settings-modal{background:#fff;border-radius:12px;box-shadow:0 20px 60px #0000004d;width:100%;max-width:900px;max-height:90vh;display:flex;flex-direction:column;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.settings-modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2rem;border-bottom:1px solid #e2e8f0}.settings-modal-header .header-title{display:flex;align-items:center;gap:.75rem}.settings-modal-header .header-title i{font-size:1.5rem;color:#8b5cf6}.settings-modal-header .header-title h2{margin:0;font-size:1.25rem;font-weight:700;color:#1e293b}.settings-modal-header .close-btn{padding:.5rem;background:transparent;border:none;color:#64748b;cursor:pointer;border-radius:6px;transition:all .2s}.settings-modal-header .close-btn:hover{background:#f1f5f9;color:#ef4444}.settings-modal-header .close-btn i{font-size:1.25rem}.settings-modal-body{flex:1;display:flex;flex-direction:column;overflow:hidden}.settings-tabs{display:flex;gap:.5rem;padding:1rem 2rem 0;border-bottom:1px solid #e2e8f0}.settings-tabs .tab-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background:transparent;border:none;border-bottom:2px solid transparent;color:#64748b;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;position:relative}.settings-tabs .tab-btn:hover{color:#8b5cf6;background:#f8fafc}.settings-tabs .tab-btn.active{color:#8b5cf6;border-bottom-color:#8b5cf6}.settings-tabs .tab-btn i{font-size:1rem}.settings-tabs .tab-btn .badge{padding:.125rem .5rem;background:#8b5cf6;color:#fff;border-radius:10px;font-size:.7rem;font-weight:600}.settings-content{flex:1;overflow-y:auto;padding:2rem}.settings-section h3{margin:0 0 1.5rem;font-size:1rem;font-weight:600;color:#1e293b}.settings-section .section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.settings-section .section-header h3{margin:0}.settings-section .section-header .add-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#8b5cf6;color:#fff;border:none;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.settings-section .section-header .add-btn:hover{background:#7c3aed;transform:translateY(-1px);box-shadow:0 4px 12px #8b5cf64d}.settings-section .section-header .add-btn i{font-size:.875rem}.form-group{margin-bottom:1.25rem}.form-group label{display:block;font-size:.875rem;font-weight:600;color:#475569;margin-bottom:.5rem}.form-group small{display:block;font-size:.75rem;color:#94a3b8;margin-top:.375rem}.form-group.checkbox-group{margin-bottom:0}.form-group.checkbox-group label{display:flex;align-items:center;gap:.5rem;cursor:pointer;margin-bottom:0}.form-group.checkbox-group label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.form-group.checkbox-group label span{font-size:.875rem;font-weight:500}.form-group.flex-1{flex:1}.form-row{display:flex;gap:1rem;align-items:flex-start}.form-input,.form-select,.form-textarea{width:100%;padding:.625rem;border:1px solid #e2e8f0;border-radius:6px;font-size:.875rem;color:#1e293b;transition:all .2s}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a}.form-input::placeholder,.form-select::placeholder,.form-textarea::placeholder{color:#cbd5e1}.form-textarea{resize:vertical;font-family:inherit}.items-list{display:flex;flex-direction:column;gap:1rem}.item-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;transition:all .2s}.item-card:hover{border-color:#cbd5e1;box-shadow:0 2px 8px #0000000d}.item-card .item-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:#f1f5f9;border-bottom:1px solid #e2e8f0}.item-card .item-header .item-number{font-size:.75rem;font-weight:700;color:#8b5cf6;padding:.25rem .5rem;background:#fff;border-radius:4px}.item-card .item-header .remove-btn{padding:.375rem .625rem;background:transparent;border:none;color:#ef4444;cursor:pointer;border-radius:4px;transition:all .2s}.item-card .item-header .remove-btn:hover{background:#fee2e2}.item-card .item-header .remove-btn i{font-size:.875rem}.item-card .item-body{padding:1rem}.advanced-group{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid #e2e8f0}.advanced-group:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.advanced-group h4{margin:0 0 1rem;font-size:.875rem;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.5px}.outcomes-preview{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.outcomes-preview .outcome-chip{display:inline-flex;align-items:center;padding:.375rem .75rem;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:6px;font-size:.75rem;font-weight:600;color:#475569}.export-info{margin-top:1rem;padding:1rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px}.export-info .info-row{display:flex;align-items:center;gap:.75rem;padding:.5rem 0;border-bottom:1px solid #e2e8f0}.export-info .info-row:last-child{border-bottom:none;padding-bottom:0}.export-info .info-row .label{font-size:.75rem;font-weight:600;color:#64748b;min-width:120px}.export-info .info-row code{flex:1;padding:.25rem .5rem;background:#fff;border:1px solid #e2e8f0;border-radius:4px;font-size:.75rem;color:#1e293b;font-family:JetBrains Mono,monospace}.settings-modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:1rem;padding:1.5rem 2rem;border-top:1px solid #e2e8f0;background:#f8fafc}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;text-align:center;color:#94a3b8}.empty-state i{font-size:3rem;margin-bottom:1rem}.empty-state p{margin:0;font-size:.875rem}.final-result{margin-top:1.5rem;padding-top:1.5rem;border-top:2px solid #e2e8f0}.final-result .result-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem;background:#f8fafc;border-radius:8px;margin-bottom:1rem;cursor:pointer;transition:all .2s}.final-result .result-header:hover{background:#f1f5f9;transform:translate(-2px)}.final-result .result-header h4{display:flex;align-items:center;gap:.5rem;margin:0;font-size:.875rem;font-weight:600;color:#475569;text-transform:uppercase}.final-result .result-header h4 i{font-size:.875rem;transition:transform .2s}.final-result .result-header .toggle-hint{font-size:.75rem;color:#94a3b8}.final-result .result-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:1rem}.final-result .result-card .result-row{display:flex;align-items:center;gap:.75rem;padding:.5rem 0}.final-result .result-card .result-row:not(:last-child){border-bottom:1px solid #e2e8f0}.final-result .result-card .result-row strong{font-size:.875rem;color:#475569;min-width:100px}.final-result .result-card .result-row .badge{padding:.25rem .75rem;border-radius:12px;font-size:.75rem;font-weight:600}.final-result .result-card .result-row .badge.badge-running{background:#dbeafe;color:#1e40af}.final-result .result-card .result-row .badge.badge-finished{background:#d1fae5;color:#065f46}.final-result .result-card .result-row .badge.badge-cancelled{background:#fed7aa;color:#92400e}.final-result .result-card .result-row .badge.badge-faulted{background:#fee2e2;color:#991b1b}.final-result .result-card .result-row pre{margin:.5rem 0 0;padding:.75rem;background:#0f172a;color:#e2e8f0;border-radius:6px;font-family:JetBrains Mono,monospace;font-size:.75rem;line-height:1.6;overflow-x:auto;width:100%}.activities-list::-webkit-scrollbar,.result-body::-webkit-scrollbar{width:8px}.activities-list::-webkit-scrollbar-track,.result-body::-webkit-scrollbar-track{background:#f1f5f9}.activities-list::-webkit-scrollbar-thumb,.result-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.activities-list::-webkit-scrollbar-thumb:hover,.result-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}.activity-card{cursor:grab}.activity-card:active{cursor:grabbing}.activity-card[draggable=true]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.visual-node[draggable=true]{cursor:move;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.visual-node:active{cursor:grabbing}.canvas-area[data-drag-over=true]{background-color:#8b5cf60d}.connector:hover{transform:scale(1.3);box-shadow:0 0 0 3px #8b5cf64d}.connector-out.active{animation:pulse 1s infinite}@keyframes pulse{0%,to{box-shadow:0 0 0 3px #ef44444d}50%{box-shadow:0 0 0 6px #ef44441a}}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:2000px}}.execution-dialog-overlay{position:fixed;inset:0;background:#000000b3;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease}.execution-dialog{width:90vw;max-width:1200px;height:90vh;background:#fff;border-radius:16px;box-shadow:0 25px 50px #0000004d;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s ease}.execution-dialog-header{padding:1.5rem 2rem;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.execution-dialog-header .header-content{display:flex;align-items:center;gap:1rem;flex:1}.execution-dialog-header .header-content>i{font-size:2.5rem;opacity:.9}.execution-dialog-header .header-content .header-info h2{margin:0;font-size:1.75rem;font-weight:700}.execution-dialog-header .header-content .header-info p{margin:.25rem 0 0;opacity:.9;font-size:.95rem}.execution-dialog-header .close-btn{background:#fff3;border:none;width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;color:#fff;font-size:1.25rem}.execution-dialog-header .close-btn:hover:not(:disabled){background:#ffffff4d;transform:scale(1.05)}.execution-dialog-header .close-btn:disabled{opacity:.5;cursor:not-allowed}.execution-dialog-body{flex:1;overflow-y:auto;padding:2rem;background:#f8fafc}.execution-dialog-footer{padding:1rem 2rem;background:#fff;border-top:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.execution-dialog-footer .footer-info{display:flex;gap:1.5rem}.execution-dialog-footer .footer-info .time-info{display:flex;align-items:center;gap:.5rem;color:#64748b;font-size:.875rem}.execution-dialog-footer .footer-info .time-info i{color:#8b5cf6}.execution-dialog-footer .footer-actions{display:flex;gap:.75rem}.workflow-info-panel{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 4px 6px #0000000d}.workflow-info-panel .info-section{margin-bottom:2rem}.workflow-info-panel .info-section h3{display:flex;align-items:center;gap:.5rem;margin:0 0 1rem;color:#1e293b;font-size:1.25rem}.workflow-info-panel .info-section h3 i{color:#8b5cf6}.workflow-info-panel .info-section .description{color:#475569;line-height:1.7;margin:0}.workflow-info-panel .info-section .features-list{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}.workflow-info-panel .info-section .features-list li{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:#f8fafc;border-radius:8px;color:#334155}.workflow-info-panel .info-section .features-list li i{color:#10b981;font-size:1.125rem}.workflow-info-panel .start-section{text-align:center;padding:2rem;background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-radius:12px;border:2px dashed #10b981}.workflow-info-panel .start-section .start-illustration{margin-bottom:1rem}.workflow-info-panel .start-section .start-illustration i{font-size:4rem;color:#10b981;animation:float 3s ease-in-out infinite}.workflow-info-panel .start-section h3{margin:0 0 .5rem;color:#1e293b;font-size:1.5rem}.workflow-info-panel .start-section p{margin:0 0 1.5rem;color:#64748b}.state-machine-ui .issue-tracker{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 2px #0000000d}.state-machine-ui .issue-tracker .issue-header-main{padding:1.5rem 2rem 1rem;border-bottom:1px solid #e2e8f0}.state-machine-ui .issue-tracker .issue-header-main .issue-breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#64748b;margin-bottom:.75rem}.state-machine-ui .issue-tracker .issue-header-main .issue-breadcrumb .project-name{color:#3b82f6;font-weight:600}.state-machine-ui .issue-tracker .issue-header-main .issue-breadcrumb .separator{color:#94a3b8}.state-machine-ui .issue-tracker .issue-header-main .issue-breadcrumb .issue-key{color:#64748b}.state-machine-ui .issue-tracker .issue-header-main .issue-type-title{display:flex;align-items:center;gap:.75rem}.state-machine-ui .issue-tracker .issue-header-main .issue-type-title .type-badge{padding:.375rem .75rem;border-radius:4px;font-size:.8125rem;font-weight:600;display:flex;align-items:center;gap:.375rem;background:#eff6ff;color:#3b82f6}.state-machine-ui .issue-tracker .issue-header-main .issue-type-title .type-badge i{font-size:1rem}.state-machine-ui .issue-tracker .issue-header-main .issue-type-title .issue-main-title{margin:0;font-size:1.5rem;font-weight:600;color:#1e293b}.state-machine-ui .issue-tracker .issue-action-bar{padding:.75rem 2rem;background:#f8fafc;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left{display:flex;gap:.5rem}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn{padding:.5rem 1rem;border:1px solid #cbd5e1;border-radius:4px;background:#fff;font-weight:500;font-size:.875rem;cursor:pointer;transition:all .2s;color:#334155}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn:hover:not(:disabled){background:#f1f5f9;border-color:#94a3b8}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn:disabled{opacity:.5;cursor:not-allowed}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn.btn-primary{background:#3b82f6;color:#fff;border-color:#3b82f6}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn.btn-primary:hover:not(:disabled){background:#2563eb}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn.btn-success{background:#10b981;color:#fff;border-color:#10b981}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn.btn-success:hover:not(:disabled){background:#059669}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn.btn-warning{background:#f59e0b;color:#fff;border-color:#f59e0b}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn.btn-warning:hover:not(:disabled){background:#d97706}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-right .more-actions-btn{padding:.5rem 1rem;border:1px solid #cbd5e1;border-radius:4px;background:#fff;font-weight:500;font-size:.875rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;color:#334155;transition:all .2s}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-right .more-actions-btn:hover{background:#f1f5f9}.state-machine-ui .issue-tracker .issue-main-content{display:grid;grid-template-columns:320px 1fr;gap:2rem;padding:2rem}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section{margin-bottom:2rem}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section h3{margin:0 0 1rem;font-size:1rem;font-weight:600;color:#1e293b}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row{display:flex;padding:.625rem 0;border-bottom:1px solid #f1f5f9}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row:last-child{border-bottom:none}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row label{min-width:100px;font-size:.8125rem;color:#64748b;font-weight:500}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row .detail-value{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#1e293b}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row .detail-value i{font-size:1rem}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row .detail-value .status-badge{padding:.25rem .625rem;border-radius:4px;color:#fff;font-weight:600;font-size:.75rem;text-transform:uppercase}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row .detail-value .view-workflow-link{color:#3b82f6;font-size:.8125rem;text-decoration:none;margin-left:.5rem}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row .detail-value .view-workflow-link:hover{text-decoration:underline}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row .detail-value .user-avatar{width:24px;height:24px;border-radius:50%;background:#8b5cf6;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.75rem}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz{background:#f8fafc;border-radius:8px;padding:1.5rem;border:1px solid #e2e8f0}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz h3{margin:0 0 1rem;font-size:.875rem;font-weight:600;color:#1e293b}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-state{display:flex;flex-direction:column;align-items:center;gap:.375rem;opacity:.4;transition:opacity .2s}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-state.active,.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-state.completed{opacity:1}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-state .state-circle{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.875rem;box-shadow:0 2px 4px #0000001a}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-state .state-name{font-size:.6875rem;color:#64748b;font-weight:500}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-state.active .state-name{color:#1e293b;font-weight:600}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-arrow{color:#cbd5e1;font-size:.75rem;margin:0 .25rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .description-section,.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section{margin-bottom:2rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .description-section h3,.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section h3{margin:0 0 1rem;font-size:1rem;font-weight:600;color:#1e293b}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .description-section .description-content,.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .description-content{padding:1rem;background:#f8fafc;border-radius:6px;border:1px solid #e2e8f0}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .description-section .description-content p,.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .description-content p{margin:0;color:#475569;line-height:1.7;font-size:.875rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline{display:flex;flex-direction:column;gap:1rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item{display:flex;gap:.75rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-avatar{width:32px;height:32px;border-radius:50%;background:#8b5cf6;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.875rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-content{flex:1;padding-bottom:1rem;border-bottom:1px solid #f1f5f9}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-content .activity-header{font-size:.875rem;color:#334155;line-height:1.6;margin-bottom:.375rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-content .activity-header strong{color:#1e293b;font-weight:600}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-content .activity-header .activity-action{color:#64748b}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-content .activity-meta{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:#94a3b8}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-content .activity-meta .activity-label{color:#8b5cf6;font-weight:500}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item:last-child .activity-content{border-bottom:none;padding-bottom:0}.registration-ui{display:flex;justify-content:center;align-items:center;min-height:400px}.registration-ui .registration-card{background:#fff;border-radius:12px;padding:3rem;box-shadow:0 4px 6px #0000000d;text-align:center;max-width:500px}.registration-ui .registration-card .registration-icon{margin-bottom:1.5rem}.registration-ui .registration-card .registration-icon i{font-size:5rem;color:#8b5cf6}.registration-ui .registration-card h3{margin:0 0 .75rem;color:#1e293b;font-size:1.75rem;font-weight:700}.registration-ui .registration-card .registration-desc{margin:0 0 2rem;color:#64748b;line-height:1.7}.registration-ui .registration-card .registration-progress{padding:2rem;background:#fef3c7;border-radius:8px}.registration-ui .registration-card .registration-progress .progress-spinner{margin-bottom:1rem}.registration-ui .registration-card .registration-progress .progress-spinner i{font-size:3rem;color:#f59e0b}.registration-ui .registration-card .registration-progress p{margin:0;color:#92400e;font-weight:500}.registration-ui .registration-card .registration-success{padding:2rem;background:#f0fdf4;border-radius:8px}.registration-ui .registration-card .registration-success i{font-size:4rem;color:#10b981;margin-bottom:1rem}.registration-ui .registration-card .registration-success h4{margin:0 0 .5rem;color:#064e3b;font-size:1.5rem;font-weight:700}.registration-ui .registration-card .registration-success p{margin:0;color:#065f46}.default-execution-view{display:flex;justify-content:center;align-items:center;min-height:400px}.default-execution-view .execution-status{text-align:center;padding:3rem;background:#fff;border-radius:12px;box-shadow:0 4px 6px #0000000d;min-width:400px}.default-execution-view .execution-status i{font-size:5rem;margin-bottom:1.5rem}.default-execution-view .execution-status h3{margin:0 0 .75rem;font-size:1.75rem;font-weight:700}.default-execution-view .execution-status p{margin:0;color:#64748b;line-height:1.7}.default-execution-view .execution-status .status-running i{color:#f59e0b}.default-execution-view .execution-status .status-finished i{color:#10b981}.default-execution-view .execution-status .status-error i{color:#ef4444}.execution-logs-panel{margin-top:2rem;background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 4px 6px #0000000d}.execution-logs-panel h3{display:flex;align-items:center;gap:.5rem;margin:0 0 1rem;color:#1e293b;font-size:1.125rem}.execution-logs-panel h3 i{color:#8b5cf6}.execution-logs-panel .logs-container-compact{max-height:300px;overflow-y:auto;background:#f8fafc;border-radius:8px;padding:.75rem}.execution-logs-panel .logs-container-compact .log-item-compact{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-radius:6px;margin-bottom:.5rem;font-size:.875rem}.execution-logs-panel .logs-container-compact .log-item-compact:last-child{margin-bottom:0}.execution-logs-panel .logs-container-compact .log-item-compact .log-time{font-family:Courier New,monospace;color:#64748b;font-size:.8125rem;min-width:70px}.execution-logs-panel .logs-container-compact .log-item-compact .log-icon{display:flex;align-items:center;justify-content:center;width:20px}.execution-logs-panel .logs-container-compact .log-item-compact .log-icon i{font-size:1rem}.execution-logs-panel .logs-container-compact .log-item-compact .log-message{flex:1;color:#334155}.execution-logs-panel .logs-container-compact .log-item-compact.log-info{background:#eff6ff}.execution-logs-panel .logs-container-compact .log-item-compact.log-info .log-icon i{color:#3b82f6}.execution-logs-panel .logs-container-compact .log-item-compact.log-success{background:#f0fdf4}.execution-logs-panel .logs-container-compact .log-item-compact.log-success .log-icon i{color:#10b981}.execution-logs-panel .logs-container-compact .log-item-compact.log-warning{background:#fffbeb}.execution-logs-panel .logs-container-compact .log-item-compact.log-warning .log-icon i{color:#f59e0b}.execution-logs-panel .logs-container-compact .log-item-compact.log-error{background:#fef2f2}.execution-logs-panel .logs-container-compact .log-item-compact.log-error .log-icon i{color:#ef4444}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "component", type: AXMActivityCategoriesTreeComponent, selector: "axp-activity-categories-tree", outputs: ["categoryClick", "activityClick"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: WorkflowStudioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-workflow-studio', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        AXButtonModule,
+                        AXTextBoxModule,
+                        AXSelectBoxModule,
+                        AXTranslationModule,
+                        AXPPageLayoutComponent,
+                        AXPThemeLayoutBlockComponent,
+                        AXPThemeLayoutStartSideComponent,
+                        AXMActivityCategoriesTreeComponent
+                    ], providers: [
+                        {
+                            provide: AXPPageLayoutBase,
+                            useExisting: WorkflowStudioComponent,
+                        },
+                    ], template: "<axp-page-layout>\n  <axp-layout-start-side>\n    <axp-activity-categories-tree (categoryClick)=\"onCategoryClick($event)\"\n      (activityClick)=\"onActivityClick($event)\"></axp-activity-categories-tree>\n  </axp-layout-start-side>\n\n  <axp-page-toolbar>\n    <axp-layout-prefix>\n      <!-- Editor Tabs -->\n      <div class=\"editor-tabs\">\n        <button class=\"tab-btn\" [class.active]=\"activeTab() === 'json'\" (click)=\"switchTab('json')\">\n          <i class=\"fa-light fa-code\"></i>\n          {{ '@workflow-management:workflow-studio.terms.json-editor' | translate | async }}\n        </button>\n        <button class=\"tab-btn\" [class.active]=\"activeTab() === 'visual'\" (click)=\"switchTab('visual')\">\n          <i class=\"fa-light fa-diagram-project\"></i>\n          {{ '@workflow-management:workflow-studio.terms.visual-designer' | translate | async }}\n        </button>\n      </div>\n    </axp-layout-prefix>\n  </axp-page-toolbar>\n\n  <axp-page-content>\n    <div class=\"workflow-studio\">\n      <!-- Main Layout -->\n      <div class=\"studio-body\" [class.properties-hidden]=\"!showPropertiesPanel()\">\n\n        <!-- Editor -->\n        <div class=\"studio-editor\">\n          <!-- Tab Content -->\n          <div class=\"editor-content\">\n            <!-- JSON Tab -->\n            @if (activeTab() === 'json') {\n            <div class=\"json-tab\">\n              <textarea class=\"json-editor\" [(ngModel)]=\"workflowJson\"\n                [placeholder]=\"'@workflow-management:workflow-studio.components.json-editor.placeholder' | translate | async\"\n                spellcheck=\"false\">\n            </textarea>\n            </div>\n            }\n\n            <!-- Visual Tab -->\n            @if (activeTab() === 'visual') {\n            <div class=\"visual-tab\">\n              <!-- Canvas -->\n              <div class=\"visual-canvas\">\n                <div class=\"canvas-toolbar\">\n                  <button class=\"tool-btn\" (click)=\"clearCanvas()\"\n                    [title]=\"'@workflow-management:workflow-studio.components.canvas-toolbar.clear-canvas.title' | translate | async\">\n                    <i class=\"fa-light fa-trash\"></i>\n                  </button>\n                  <button class=\"tool-btn\" (click)=\"visualToJson()\"\n                    [title]=\"'@workflow-management:workflow-studio.components.canvas-toolbar.convert-to-json.title' | translate | async\">\n                    <i class=\"fa-light fa-code\"></i>\n                  </button>\n                  <span class=\"tool-info\">\n                    <i class=\"fa-light fa-lightbulb\"></i>\n                    <strong>{{ '@workflow-management:workflow-studio.components.canvas-toolbar.hint' | translate | async }}</strong>\n                  </span>\n                </div>\n\n                <div class=\"canvas-area\" (drop)=\"onCanvasDrop($event)\" (dragover)=\"onCanvasDragOver($event)\"\n                  (dragleave)=\"onCanvasDragLeave($event)\">\n                  <!-- SVG for Connections -->\n                  <svg class=\"connections-layer\">\n                    <!-- Outcome-based Connections -->\n                    @for (node of visualNodes(); track node.id) {\n                    @if (node.outcomeConnections && node.outcomeConnections.length > 0) {\n                    @for (conn of node.outcomeConnections; track conn.targetNodeId + conn.outcome) {\n                    @let targetNode = findNodeById(conn.targetNodeId);\n                    @if (targetNode) {\n                    <g class=\"outcome-connection-group\">\n                      <line [attr.x1]=\"node.position.x + 75\" [attr.y1]=\"node.position.y + 80\"\n                        [attr.x2]=\"targetNode.position.x + 75\" [attr.y2]=\"targetNode.position.y - 50\"\n                        class=\"connection-line outcome-line\" [attr.stroke]=\"getOutcomeColor(conn.outcome)\"\n                        stroke-width=\"2.5\"\n                        [attr.marker-end]=\"'url(#arrowhead-' + getOutcomeColorName(conn.outcome) + ')'\"\n                        style=\"cursor: pointer\" (dblclick)=\"disconnectNodes(node.id, conn.targetNodeId, conn.outcome)\"\n                        [attr.title]=\"'Outcome: ' + conn.outcome + ' (Double-click to remove)'\">\n                        <title>{{ conn.outcome }} \u2192 {{ targetNode.name }}</title>\n                      </line>\n                      <text [attr.x]=\"(node.position.x + targetNode.position.x) / 2 + 75\"\n                        [attr.y]=\"(node.position.y + targetNode.position.y) / 2 + 15\" class=\"connection-label\"\n                        text-anchor=\"middle\" [attr.fill]=\"getOutcomeColor(conn.outcome)\" font-size=\"11\"\n                        font-weight=\"600\" pointer-events=\"none\">\n                        {{ conn.outcome }}\n                      </text>\n                    </g>\n                    }\n                    }\n                    } @else {\n                    <!-- Simple Connections (backward compatibility) -->\n                    @for (targetId of node.connections; track targetId) {\n                    @let targetNode = findNodeById(targetId);\n                    @if (targetNode) {\n                    <line [attr.x1]=\"node.position.x + 75\" [attr.y1]=\"node.position.y + 40\"\n                      [attr.x2]=\"targetNode.position.x + 75\" [attr.y2]=\"targetNode.position.y - 50\"\n                      class=\"connection-line\" stroke=\"#64748b\" stroke-width=\"2\" marker-end=\"url(#arrowhead-default)\"\n                      style=\"cursor: pointer\" (dblclick)=\"disconnectNodes(node.id, targetId)\"\n                      title=\"Double-click \u0628\u0631\u0627\u06CC \u062D\u0630\u0641 \u0627\u062A\u0635\u0627\u0644\">\n                      <title>Double-click \u0628\u0631\u0627\u06CC \u062D\u0630\u0641</title>\n                    </line>\n                    }\n                    }\n                    }\n                    }\n\n                    <defs>\n                      <!-- Default Arrow -->\n                      <marker id=\"arrowhead-default\" markerWidth=\"10\" markerHeight=\"10\" refX=\"9\" refY=\"3\" orient=\"auto\">\n                        <polygon points=\"0 0, 10 3, 0 6\" fill=\"#64748b\" />\n                      </marker>\n                      <!-- Success Arrow (Green) -->\n                      <marker id=\"arrowhead-success\" markerWidth=\"10\" markerHeight=\"10\" refX=\"9\" refY=\"3\" orient=\"auto\">\n                        <polygon points=\"0 0, 10 3, 0 6\" fill=\"#10b981\" />\n                      </marker>\n                      <!-- Error Arrow (Red) -->\n                      <marker id=\"arrowhead-error\" markerWidth=\"10\" markerHeight=\"10\" refX=\"9\" refY=\"3\" orient=\"auto\">\n                        <polygon points=\"0 0, 10 3, 0 6\" fill=\"#ef4444\" />\n                      </marker>\n                      <!-- Warning Arrow (Orange) -->\n                      <marker id=\"arrowhead-warning\" markerWidth=\"10\" markerHeight=\"10\" refX=\"9\" refY=\"3\" orient=\"auto\">\n                        <polygon points=\"0 0, 10 3, 0 6\" fill=\"#f59e0b\" />\n                      </marker>\n                      <!-- Info Arrow (Blue) -->\n                      <marker id=\"arrowhead-info\" markerWidth=\"10\" markerHeight=\"10\" refX=\"9\" refY=\"3\" orient=\"auto\">\n                        <polygon points=\"0 0, 10 3, 0 6\" fill=\"#3b82f6\" />\n                      </marker>\n                    </defs>\n                  </svg>\n\n                  <!-- Nodes -->\n                  @for (node of visualNodes(); track node.id) {\n                  <div class=\"visual-node\" [class.selected]=\"selectedNode()?.id === node.id\"\n                    [style.left.px]=\"node.position.x\" [style.top.px]=\"node.position.y\" [attr.data-node-id]=\"node.id\"\n                    draggable=\"true\" (dragstart)=\"onNodeDragStart($event, node)\" (drag)=\"onNodeDrag($event, node)\"\n                    (dragend)=\"onNodeDragEnd($event, node)\" (click)=\"selectNodeById(node)\">\n                    <div class=\"node-header\">\n                      <i [class]=\"node.icon\"></i>\n                      <span>{{ node.name }}</span>\n                      <button class=\"node-delete\" (click)=\"deleteNode(node.id); $event.stopPropagation()\">\n                        <i class=\"fa-light fa-times\"></i>\n                      </button>\n                    </div>\n\n                    <div class=\"node-body\">\n                      <small>{{ node.type }}</small>\n                    </div>\n\n                    <div class=\"node-connectors\">\n                      <!-- Input Connector -->\n                      <div class=\"connector connector-in\" title=\"Input\" (click)=\"onConnectorClick($event, node, 'in')\">\n                      </div>\n\n                      <!-- Output Connectors - Multiple outcomes support -->\n                      @if (node.outcomes && node.outcomes.length > 1) {\n                      <!-- Multiple outcomes: show separate port for each -->\n                      <div class=\"outcomes-container\">\n                        @for (outcome of node.outcomes; track outcome; let idx = $index) {\n                        <div class=\"outcome-connector\" [class.active]=\"\n                                connectionSource?.node?.id === node.id && connectionSource?.outcome === outcome\n                              \" [attr.data-outcome]=\"outcome\" [title]=\"'Output: ' + outcome\"\n                          (click)=\"onOutcomeConnectorClick($event, node, outcome)\">\n                          <span class=\"outcome-label\">{{ outcome }}</span>\n                          <div class=\"outcome-dot\"></div>\n                        </div>\n                        }\n                      </div>\n                      } @else {\n                      <!-- Single outcome: show simple output connector -->\n                      <div class=\"connector connector-out\" [class.active]=\"connectionSource?.node?.id === node.id\"\n                        title=\"Output\" (click)=\"onConnectorClick($event, node, 'out')\"></div>\n                      }\n                    </div>\n                  </div>\n                  }\n\n                  <!-- Empty State -->\n                  @if (visualNodes().length === 0) {\n                  <div class=\"canvas-empty-state\">\n                    <i class=\"fa-light fa-diagram-project\"></i>\n                    <p>Activity \u0647\u0627 \u0631\u0627 \u0627\u0632 \u0633\u0627\u06CC\u062F\u0628\u0627\u0631 \u0628\u0647 \u0627\u06CC\u0646\u062C\u0627 \u0628\u06A9\u0634\u06CC\u062F</p>\n                    <small>\u06CC\u0627 \u0627\u0632 \u062A\u0628 JSON\u060C workflow \u0631\u0627 import \u06A9\u0646\u06CC\u062F</small>\n                  </div>\n                  }\n                </div>\n              </div>\n\n              <!-- Properties Panel -->\n              @if (selectedNode() && showPropertiesPanel()) {\n              <div class=\"properties-panel\">\n                <div class=\"properties-header\">\n                  <i class=\"fa-light fa-sliders\"></i>\n                  <h4>{{ '@workflow-management:workflow-studio.components.properties-panel.title' | translate | async }}</h4>\n                  <div class=\"header-actions\">\n                    <button class=\"header-btn\" (click)=\"togglePropertiesPanel()\"\n                      [title]=\"'@workflow-management:workflow-studio.components.properties-panel.actions.close-panel' | translate | async\">\n                      <i class=\"fa-light fa-angle-right\"></i>\n                    </button>\n                    <button class=\"header-btn\" (click)=\"selectedNode.set(null)\"\n                      [title]=\"'@workflow-management:workflow-studio.components.properties-panel.actions.close' | translate | async\">\n                      <i class=\"fa-light fa-times\"></i>\n                    </button>\n                  </div>\n                </div>\n                <div class=\"properties-body\">\n                  <div class=\"property-row\">\n                    <label>{{ '@workflow-management:workflow-studio.components.properties-panel.fields.id' | translate | async }}:</label>\n                    <input type=\"text\" [value]=\"selectedNode()!.id\" disabled />\n                  </div>\n                  <div class=\"property-row\">\n                    <label>{{ '@workflow-management:workflow-studio.components.properties-panel.fields.type' | translate | async }}:</label>\n                    <input type=\"text\" [value]=\"selectedNode()!.type\" disabled />\n                  </div>\n                  <div class=\"property-row\">\n                    <label>{{ '@workflow-management:workflow-studio.components.properties-panel.fields.name' | translate | async }}:</label>\n                    <input type=\"text\" [value]=\"selectedNode()!.name\"\n                      (input)=\"updateNodeProperty(selectedNode()!.id, 'name', $any($event.target).value)\" />\n                  </div>\n\n                  <div class=\"properties-divider\"></div>\n\n                  <h5>\uD83D\uDCE5 {{ '@workflow-management:workflow-studio.components.properties-panel.sections.input-properties' | translate | async }}</h5>\n                  <small class=\"properties-hint\">{{ '@workflow-management:workflow-studio.components.properties-panel.sections.input-properties' | translate | async }} - \u0645\u0642\u0627\u062F\u06CC\u0631 \u0631\u0627 \u062A\u0646\u0638\u06CC\u0645 \u06A9\u0646\u06CC\u062F</small>\n\n                  @if (hasProperties(selectedNode()!.properties)) {\n                  <div class=\"property-editor\">\n                    @for (key of Object.keys(selectedNode()!.properties); track key) {\n                    <div class=\"property-row\">\n                      <label>\n                        {{ key }}\n                        <span class=\"property-type-badge\">{{ typeof selectedNode()!.properties[key] }}</span>\n                      </label>\n\n                      @if (typeof selectedNode()!.properties[key] === 'boolean') {\n                      <select [value]=\"selectedNode()!.properties[key]\" (change)=\"\n                                updateNodeProperty(selectedNode()!.id, key, $any($event.target).value === 'true')\n                              \">\n                        <option [value]=\"true\">True</option>\n                        <option [value]=\"false\">False</option>\n                      </select>\n                      } @else if (typeof selectedNode()!.properties[key] === 'number') {\n                      <input type=\"number\" [value]=\"selectedNode()!.properties[key]\"\n                        (input)=\"updateNodeProperty(selectedNode()!.id, key, +$any($event.target).value)\" />\n                      } @else if (typeof selectedNode()!.properties[key] === 'object') {\n                      <textarea rows=\"3\" [value]=\"JSON.stringify(selectedNode()!.properties[key], null, 2)\"\n                        (input)=\"updateNodePropertyJSON(selectedNode()!.id, key, $any($event.target).value)\"></textarea>\n                      } @else {\n                      <input type=\"text\" [value]=\"selectedNode()!.properties[key]\"\n                        (input)=\"updateNodeProperty(selectedNode()!.id, key, $any($event.target).value)\" />\n                      }\n                    </div>\n                    }\n                  </div>\n                  } @else {\n                  <p class=\"no-properties\">\n                    {{ '@workflow-management:workflow-studio.components.properties-panel.empty-states.no-properties' | translate | async }}\n                  </p>\n                  }\n\n                  <div class=\"properties-divider\"></div>\n\n                  <h5>\uD83D\uDCE4 {{ '@workflow-management:workflow-studio.components.properties-panel.sections.output-variables' | translate | async }}</h5>\n                  <small class=\"properties-hint\">\u062E\u0631\u0648\u062C\u06CC \u0648 \u0645\u062A\u063A\u06CC\u0631\u0647\u0627</small>\n                  <div class=\"property-row\">\n                    <label>{{ '@workflow-management:workflow-studio.components.properties-panel.fields.output-variable' | translate | async }}:</label>\n                    <input type=\"text\" placeholder=\"\u0645\u062B\u0644\u0627\u064B result\"\n                      [value]=\"selectedNode()!.properties['outputVariable'] || ''\"\n                      (input)=\"updateNodeProperty(selectedNode()!.id, 'outputVariable', $any($event.target).value)\" />\n                  </div>\n\n                  <div class=\"properties-divider\"></div>\n\n                  <h5>\uD83D\uDD17 {{ '@workflow-management:workflow-studio.components.properties-panel.sections.connections' | translate | async }}</h5>\n                  <small class=\"properties-hint\">\u0627\u062A\u0635\u0627\u0644\u0627\u062A \u0627\u06CC\u0646 \u0646\u0648\u062F</small>\n\n                  <!-- Outcome-based Connections -->\n                  @if (selectedNode()!.outcomeConnections && selectedNode()!.outcomeConnections!.length > 0) {\n                  <div class=\"connections-list\">\n                    @for (conn of selectedNode()!.outcomeConnections!; track conn.targetNodeId + conn.outcome) {\n                    @let targetNode = findNodeById(conn.targetNodeId);\n                    @if (targetNode) {\n                    <div class=\"connection-item outcome-connection\">\n                      <span class=\"outcome-badge\" [style.background]=\"getOutcomeColor(conn.outcome)\">\n                        {{ conn.outcome }}\n                      </span>\n                      <i class=\"fa-light fa-arrow-right\"></i>\n                      <span>{{ targetNode.name }}</span>\n                      <button class=\"remove-btn\"\n                        (click)=\"disconnectNodes(selectedNode()!.id, conn.targetNodeId, conn.outcome)\"\n                        title=\"\u062D\u0630\u0641 \u0627\u062A\u0635\u0627\u0644\">\n                        <i class=\"fa-light fa-times\"></i>\n                      </button>\n                    </div>\n                    }\n                    }\n                  </div>\n                  } @else if (selectedNode()!.connections.length > 0) {\n                  <!-- Simple Connections (fallback) -->\n                  <div class=\"connections-list\">\n                    @for (targetId of selectedNode()!.connections; track targetId) {\n                    @let targetNode = findNodeById(targetId);\n                    @if (targetNode) {\n                    <div class=\"connection-item\">\n                      <i class=\"fa-light fa-arrow-right\"></i>\n                      <span>{{ targetNode.name }}</span>\n                      <button class=\"remove-btn\" (click)=\"disconnectNodes(selectedNode()!.id, targetId)\"\n                        title=\"\u062D\u0630\u0641 \u0627\u062A\u0635\u0627\u0644\">\n                        <i class=\"fa-light fa-times\"></i>\n                      </button>\n                    </div>\n                    }\n                    }\n                  </div>\n                  } @else {\n                  <p class=\"no-properties\">{{ '@workflow-management:workflow-studio.components.properties-panel.empty-states.no-connections' | translate | async }}</p>\n                  }\n\n                  <!-- Available Outcomes Info -->\n                  @if (selectedNode()!.outcomes && selectedNode()!.outcomes!.length > 1) {\n                  <div class=\"properties-divider\"></div>\n                  <h5>\uD83D\uDCE4 {{ '@workflow-management:workflow-studio.components.properties-panel.sections.available-outcomes' | translate | async }}</h5>\n                  <small class=\"properties-hint\">\u062E\u0631\u0648\u062C\u06CC\u200C\u0647\u0627\u06CC \u0645\u0648\u062C\u0648\u062F \u0628\u0631\u0627\u06CC \u0627\u062A\u0635\u0627\u0644</small>\n                  <div class=\"outcomes-info\">\n                    @for (outcome of selectedNode()!.outcomes!; track outcome) {\n                    <span class=\"outcome-tag\" [style.borderColor]=\"getOutcomeColor(outcome)\">\n                      <span class=\"outcome-dot\" [style.background]=\"getOutcomeColor(outcome)\"></span>\n                      {{ outcome }}\n                    </span>\n                    }\n                  </div>\n                  }\n\n                  <div class=\"properties-divider\"></div>\n\n                  <h5>\uD83D\uDCDD {{ '@workflow-management:workflow-studio.components.properties-panel.sections.raw-json' | translate | async }}</h5>\n                  <pre class=\"properties-json\">{{ selectedNode() | json }}</pre>\n                </div>\n              </div>\n              }\n\n              <!-- Toggle Button for Properties (when closed) -->\n              @if (selectedNode() && !showPropertiesPanel()) {\n              <button class=\"sidebar-toggle-btn right\" (click)=\"togglePropertiesPanel()\"\n                [title]=\"'@workflow-management:workflow-studio.components.properties-panel.actions.show-panel' | translate | async\">\n                <i class=\"fa-light fa-sliders\"></i>\n              </button>\n              }\n            </div>\n            }\n          </div>\n        </div>\n\n        <!-- Result Panel -->\n        <div class=\"studio-result\">\n          <div class=\"result-header\">\n            <i class=\"fa-light fa-terminal\"></i>\n            <h3>{{ '@workflow-management:workflow-studio.components.execution-result.title' | translate | async }}</h3>\n            <button class=\"clear-btn\" (click)=\"clearLogs()\" *ngIf=\"executionLogs().length > 0\">\n              <i class=\"fa-light fa-trash\"></i> {{ '@workflow-management:test-pages.actions.clear-logs.title' | translate | async }}\n            </button>\n          </div>\n\n          <div class=\"result-body\">\n            <!-- Execution Logs -->\n            @if (executionLogs().length > 0) {\n            <div class=\"logs-container\">\n              @for (log of executionLogs(); track $index) {\n              <div class=\"log-item\" [class]=\"'log-' + log.level\">\n                <span class=\"log-time\">{{ log.timestamp | date: 'HH:mm:ss.SSS' }}</span>\n                <span class=\"log-icon\">\n                  @switch (log.level) {\n                  @case ('info') {\n                  <i class=\"fa-light fa-info-circle\"></i>\n                  }\n                  @case ('success') {\n                  <i class=\"fa-light fa-check-circle\"></i>\n                  }\n                  @case ('warning') {\n                  <i class=\"fa-light fa-exclamation-triangle\"></i>\n                  }\n                  @case ('error') {\n                  <i class=\"fa-light fa-times-circle\"></i>\n                  }\n                  }\n                </span>\n                <span class=\"log-message\">{{ log.message }}</span>\n                @if (log.data) {\n                <button class=\"log-data-toggle\" (click)=\"log.expanded = !log.expanded\">\n                  <i class=\"fa-light\" [class.fa-chevron-down]=\"!log.expanded\" [class.fa-chevron-up]=\"log.expanded\"></i>\n                </button>\n                }\n              </div>\n\n              @if (log.data && log.expanded) {\n              <pre class=\"log-data\">{{ log.data | json }}</pre>\n              }\n              }\n            </div>\n            } @else {\n            <div class=\"empty-state\">\n              <i class=\"fa-light fa-play-circle\"></i>\n              <p>{{ '@workflow-management:workflow-studio.components.execution-result.empty-states.no-results.description' | translate | async }}</p>\n            </div>\n            }\n\n            <!-- Final Result -->\n            @if (executionResult()) {\n            <div class=\"final-result\">\n              <div class=\"result-header\" (click)=\"showExecutionResult.set(!showExecutionResult())\">\n                <h4>\n                  <i class=\"fa-light\" [class.fa-chevron-down]=\"showExecutionResult()\"\n                    [class.fa-chevron-left]=\"!showExecutionResult()\"></i>\n                  {{ '@workflow-management:workflow-studio.components.execution-result.final-result.title' | translate | async }}\n                </h4>\n                <span class=\"toggle-hint\">{{ (showExecutionResult() ? '@workflow-management:workflow-studio.components.execution-result.final-result.toggle.close' : '@workflow-management:workflow-studio.components.execution-result.final-result.toggle.open') | translate | async }}</span>\n              </div>\n              @if (showExecutionResult()) {\n              <div class=\"result-card\">\n                @if (executionResult().status) {\n                <div class=\"result-row\">\n                  <strong>{{ '@workflow-management:workflow-studio.components.execution-result.final-result.fields.status' | translate | async }}:</strong>\n                  <span class=\"badge\" [class]=\"'badge-' + (executionResult().status?.toLowerCase() || 'unknown')\">\n                    {{ executionResult().status }}\n                  </span>\n                </div>\n                }\n                @if (executionResult().subStatus) {\n                <div class=\"result-row\">\n                  <strong>{{ '@workflow-management:workflow-studio.components.execution-result.final-result.fields.sub-status' | translate | async }}:</strong>\n                  <span class=\"badge\" [class]=\"'badge-' + (executionResult().subStatus?.toLowerCase() || 'unknown')\">\n                    {{ executionResult().subStatus }}\n                  </span>\n                </div>\n                }\n                @if (executionResult().success !== undefined) {\n                <div class=\"result-row\">\n                  <strong>{{ '@workflow-management:workflow-studio.components.execution-result.final-result.fields.success' | translate | async }}:</strong>\n                  <span class=\"badge\" [class]=\"'badge-' + (executionResult().success ? 'success' : 'danger')\">\n                    {{ (executionResult().success ? '@workflow-management:workflow-studio.components.execution-result.final-result.values.success' : '@workflow-management:workflow-studio.components.execution-result.final-result.values.failed') | translate | async }}\n                  </span>\n                </div>\n                }\n                @if (executionResult().error) {\n                <div class=\"result-row\">\n                  <strong>{{ '@workflow-management:workflow-studio.components.execution-result.final-result.fields.error' | translate | async }}:</strong>\n                  <span class=\"error-text\">{{ executionResult().error }}</span>\n                </div>\n                }\n                @if (executionResult().output) {\n                <div class=\"result-row\">\n                  <strong>{{ '@workflow-management:workflow-studio.components.execution-result.final-result.fields.output' | translate | async }}:</strong>\n                  <pre>{{ executionResult().output | json }}</pre>\n                </div>\n                }\n              </div>\n              }\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n\n      <!-- Workflow Settings Modal -->\n      @if (showWorkflowSettings()) {\n      <div class=\"settings-modal-overlay\" (click)=\"closeWorkflowSettings()\">\n        <div class=\"settings-modal\" (click)=\"$event.stopPropagation()\">\n          <!-- Modal Header -->\n          <div class=\"settings-modal-header\">\n            <div class=\"header-title\">\n              <i class=\"fa-light fa-cog\"></i>\n              <h2>{{ '@workflow-management:workflow-studio.settings.title' | translate | async }}</h2>\n            </div>\n            <button class=\"close-btn\" (click)=\"closeWorkflowSettings()\">\n              <i class=\"fa-light fa-times\"></i>\n            </button>\n          </div>\n\n          <!-- Modal Body -->\n          <div class=\"settings-modal-body\">\n            <!-- Tabs Navigation -->\n            <div class=\"settings-tabs\">\n              <button class=\"tab-btn\" [class.active]=\"activeSettingsTab() === 'general'\"\n                (click)=\"switchSettingsTab('general')\">\n                <i class=\"fa-light fa-info-circle\"></i>\n                {{ '@workflow-management:workflow-studio.settings.tabs.general' | translate | async }}\n              </button>\n              <button class=\"tab-btn\" [class.active]=\"activeSettingsTab() === 'inputs'\"\n                (click)=\"switchSettingsTab('inputs')\">\n                <i class=\"fa-light fa-sign-in\"></i>\n                {{ '@workflow-management:workflow-studio.settings.tabs.inputs' | translate | async }}\n                @if (workflowSettings().inputs.length > 0) {\n                <span class=\"badge\">{{ workflowSettings().inputs.length }}</span>\n                }\n              </button>\n              <button class=\"tab-btn\" [class.active]=\"activeSettingsTab() === 'outputs'\"\n                (click)=\"switchSettingsTab('outputs')\">\n                <i class=\"fa-light fa-sign-out\"></i>\n                {{ '@workflow-management:workflow-studio.settings.tabs.outputs' | translate | async }}\n                @if (workflowSettings().outputs.length > 0) {\n                <span class=\"badge\">{{ workflowSettings().outputs.length }}</span>\n                }\n              </button>\n              <button class=\"tab-btn\" [class.active]=\"activeSettingsTab() === 'variables'\"\n                (click)=\"switchSettingsTab('variables')\">\n                <i class=\"fa-light fa-box\"></i>\n                {{ '@workflow-management:workflow-studio.settings.tabs.variables' | translate | async }}\n                @if (workflowSettings().variables.length > 0) {\n                <span class=\"badge\">{{ workflowSettings().variables.length }}</span>\n                }\n              </button>\n              <button class=\"tab-btn\" [class.active]=\"activeSettingsTab() === 'advanced'\"\n                (click)=\"switchSettingsTab('advanced')\">\n                <i class=\"fa-light fa-cog\"></i>\n                {{ '@workflow-management:workflow-studio.settings.tabs.advanced' | translate | async }}\n              </button>\n            </div>\n\n            <!-- Tab Content -->\n            <div class=\"settings-content\">\n              <!-- General Tab -->\n              @if (activeSettingsTab() === 'general') {\n              <div class=\"settings-section\">\n                <h3>{{ '@workflow-management:workflow-studio.settings.sections.general.title' | translate | async }}</h3>\n                <div class=\"form-group\">\n                  <label>{{ '@workflow-management:workflow-studio.settings.sections.general.fields.name.title' | translate | async }}</label>\n                  <input type=\"text\" class=\"form-input\"\n                    [placeholder]=\"'@workflow-management:workflow-studio.settings.sections.general.fields.name.placeholder' | translate | async\"\n                    [(ngModel)]=\"workflowSettings().name\" />\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ '@workflow-management:workflow-studio.settings.sections.general.fields.definition-id.title' | translate | async }}</label>\n                  <input type=\"text\" class=\"form-input\"\n                    [placeholder]=\"'@workflow-management:workflow-studio.settings.sections.general.fields.definition-id.placeholder' | translate | async\"\n                    [(ngModel)]=\"workflowSettings().definitionId\" />\n                  <small>{{ '@workflow-management:workflow-studio.settings.sections.general.fields.definition-id.description' | translate | async }}</small>\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ '@workflow-management:workflow-studio.settings.sections.general.fields.description.title' | translate | async }}</label>\n                  <textarea class=\"form-textarea\" rows=\"4\"\n                    [placeholder]=\"'@workflow-management:workflow-studio.settings.sections.general.fields.description.placeholder' | translate | async\"\n                    [(ngModel)]=\"workflowSettings().description\"></textarea>\n                </div>\n              </div>\n              }\n\n              <!-- Inputs Tab -->\n              @if (activeSettingsTab() === 'inputs') {\n              <div class=\"settings-section\">\n                <div class=\"section-header\">\n                  <h3>{{ '@workflow-management:workflow-studio.settings.sections.inputs.title' | translate | async }}</h3>\n                  <button class=\"add-btn\" (click)=\"addWorkflowInput()\">\n                    <i class=\"fa-light fa-plus\"></i>\n                    {{ '@workflow-management:workflow-studio.settings.sections.inputs.add-button' | translate | async }}\n                  </button>\n                </div>\n\n                @if (workflowSettings().inputs.length === 0) {\n                <div class=\"empty-state\">\n                  <i class=\"fa-light fa-inbox\"></i>\n                  <p>{{ '@workflow-management:workflow-studio.settings.sections.inputs.empty-state.title' | translate | async }}</p>\n                  <small>{{ '@workflow-management:workflow-studio.settings.sections.inputs.empty-state.description' | translate | async }}</small>\n                </div>\n                } @else {\n                <div class=\"items-list\">\n                  @for (input of workflowSettings().inputs; track $index) {\n                  <div class=\"item-card\">\n                    <div class=\"item-header\">\n                      <span class=\"item-number\">#{{ $index + 1 }}</span>\n                      <button class=\"remove-btn\" (click)=\"removeWorkflowInput($index)\"\n                        [title]=\"'@workflow-management:workflow-studio.settings.sections.inputs.actions.remove' | translate | async\">\n                        <i class=\"fa-light fa-trash\"></i>\n                      </button>\n                    </div>\n                    <div class=\"item-body\">\n                      <div class=\"form-row\">\n                        <div class=\"form-group flex-1\">\n                          <label>{{ '@workflow-management:workflow-studio.settings.sections.inputs.fields.name' | translate | async }}</label>\n                          <input type=\"text\" class=\"form-input\" placeholder=\"userName\" [value]=\"input.name\"\n                            (input)=\"updateWorkflowInput($index, 'name', $any($event.target).value)\" />\n                        </div>\n                        <div class=\"form-group flex-1\">\n                          <label>{{ '@workflow-management:workflow-studio.settings.sections.inputs.fields.title' | translate | async }}</label>\n                          <input type=\"text\" class=\"form-input\" placeholder=\"User Name\" [value]=\"input.title\"\n                            (input)=\"updateWorkflowInput($index, 'title', $any($event.target).value)\" />\n                        </div>\n                      </div>\n                      <div class=\"form-group\">\n                        <label>{{ '@workflow-management:workflow-studio.settings.sections.inputs.fields.description' | translate | async }}</label>\n                        <input type=\"text\" class=\"form-input\"\n                          [placeholder]=\"'@workflow-management:workflow-studio.settings.sections.inputs.fields.description-placeholder' | translate | async\"\n                          [value]=\"input.description || ''\"\n                          (input)=\"updateWorkflowInput($index, 'description', $any($event.target).value)\" />\n                      </div>\n                      <div class=\"form-row\">\n                        <div class=\"form-group flex-1\">\n                          <label>{{ '@workflow-management:workflow-studio.settings.sections.inputs.fields.data-type' | translate | async }}</label>\n                          <select class=\"form-select\" [value]=\"input.schema.dataType || 'string'\"\n                            (change)=\"updateWorkflowInputSchema($index, 'dataType', $any($event.target).value)\">\n                            <option value=\"string\">String</option>\n                            <option value=\"number\">Number</option>\n                            <option value=\"boolean\">Boolean</option>\n                            <option value=\"object\">Object</option>\n                            <option value=\"array\">Array</option>\n                          </select>\n                        </div>\n                        <div class=\"form-group flex-1\">\n                          <label>{{ '@workflow-management:workflow-studio.settings.sections.inputs.fields.default-value' | translate | async }}</label>\n                          <input type=\"text\" class=\"form-input\"\n                            [placeholder]=\"'@workflow-management:workflow-studio.settings.sections.inputs.fields.default-value-placeholder' | translate | async\"\n                            [value]=\"input.schema.defaultValue || ''\"\n                            (input)=\"updateWorkflowInputSchema($index, 'defaultValue', $any($event.target).value)\" />\n                        </div>\n                      </div>\n                      <div class=\"form-group checkbox-group\">\n                        <label>\n                          <input type=\"checkbox\" [checked]=\"getInputIsRequired(input)\"\n                            (change)=\"updateWorkflowInputValidation($index, $any($event.target).checked)\" />\n                          <span>{{ '@workflow-management:workflow-studio.settings.sections.inputs.fields.required' | translate | async }}</span>\n                        </label>\n                      </div>\n                    </div>\n                  </div>\n                  }\n                </div>\n                }\n              </div>\n              }\n\n              <!-- Outputs Tab -->\n              @if (activeSettingsTab() === 'outputs') {\n              <div class=\"settings-section\">\n                <div class=\"section-header\">\n                  <h3>{{ '@workflow-management:workflow-studio.settings.sections.outputs.title' | translate | async }}</h3>\n                  <button class=\"add-btn\" (click)=\"addWorkflowOutput()\">\n                    <i class=\"fa-light fa-plus\"></i>\n                    {{ '@workflow-management:workflow-studio.settings.sections.outputs.add-button' | translate | async }}\n                  </button>\n                </div>\n\n                @if (workflowSettings().outputs.length === 0) {\n                <div class=\"empty-state\">\n                  <i class=\"fa-light fa-inbox\"></i>\n                  <p>{{ '@workflow-management:workflow-studio.settings.sections.outputs.empty-state.title' | translate | async }}</p>\n                  <small>{{ '@workflow-management:workflow-studio.settings.sections.outputs.empty-state.description' | translate | async }}</small>\n                </div>\n                } @else {\n                <div class=\"items-list\">\n                  @for (output of workflowSettings().outputs; track $index) {\n                  <div class=\"item-card\">\n                    <div class=\"item-header\">\n                      <span class=\"item-number\">#{{ $index + 1 }}</span>\n                      <button class=\"remove-btn\" (click)=\"removeWorkflowOutput($index)\"\n                        [title]=\"'@workflow-management:workflow-studio.settings.sections.outputs.actions.remove' | translate | async\">\n                        <i class=\"fa-light fa-trash\"></i>\n                      </button>\n                    </div>\n                    <div class=\"item-body\">\n                      <div class=\"form-row\">\n                        <div class=\"form-group flex-1\">\n                          <label>{{ '@workflow-management:workflow-studio.settings.sections.outputs.fields.name' | translate | async }}</label>\n                          <input type=\"text\" class=\"form-input\" placeholder=\"result\" [value]=\"output.name\"\n                            (input)=\"updateWorkflowOutput($index, 'name', $any($event.target).value)\" />\n                        </div>\n                        <div class=\"form-group flex-1\">\n                          <label>{{ '@workflow-management:workflow-studio.settings.sections.outputs.fields.title' | translate | async }}</label>\n                          <input type=\"text\" class=\"form-input\" placeholder=\"Result\" [value]=\"output.title\"\n                            (input)=\"updateWorkflowOutput($index, 'title', $any($event.target).value)\" />\n                        </div>\n                      </div>\n                      <div class=\"form-group\">\n                        <label>{{ '@workflow-management:workflow-studio.settings.sections.outputs.fields.description' | translate | async }}</label>\n                        <input type=\"text\" class=\"form-input\"\n                          [placeholder]=\"'@workflow-management:workflow-studio.settings.sections.outputs.fields.description-placeholder' | translate | async\"\n                          [value]=\"output.description || ''\"\n                          (input)=\"updateWorkflowOutput($index, 'description', $any($event.target).value)\" />\n                      </div>\n                      <div class=\"form-group\">\n                        <label>{{ '@workflow-management:workflow-studio.settings.sections.outputs.fields.data-type' | translate | async }}</label>\n                        <select class=\"form-select\" [value]=\"output.schema.dataType || 'string'\"\n                          (change)=\"updateWorkflowOutputSchema($index, 'dataType', $any($event.target).value)\">\n                          <option value=\"string\">String</option>\n                          <option value=\"number\">Number</option>\n                          <option value=\"boolean\">Boolean</option>\n                          <option value=\"object\">Object</option>\n                          <option value=\"array\">Array</option>\n                        </select>\n                      </div>\n                    </div>\n                  </div>\n                  }\n                </div>\n                }\n              </div>\n              }\n\n              <!-- Variables Tab -->\n              @if (activeSettingsTab() === 'variables') {\n              <div class=\"settings-section\">\n                <div class=\"section-header\">\n                  <h3>{{ '@workflow-management:workflow-studio.settings.sections.variables.title' | translate | async }}</h3>\n                  <button class=\"add-btn\" (click)=\"addWorkflowVariable()\">\n                    <i class=\"fa-light fa-plus\"></i>\n                    {{ '@workflow-management:workflow-studio.settings.sections.variables.add-button' | translate | async }}\n                  </button>\n                </div>\n\n                @if (workflowSettings().variables.length === 0) {\n                <div class=\"empty-state\">\n                  <i class=\"fa-light fa-inbox\"></i>\n                  <p>{{ '@workflow-management:workflow-studio.settings.sections.variables.empty-state.title' | translate | async }}</p>\n                  <small>{{ '@workflow-management:workflow-studio.settings.sections.variables.empty-state.description' | translate | async }}</small>\n                </div>\n                } @else {\n                <div class=\"items-list\">\n                  @for (variable of workflowSettings().variables; track $index) {\n                  <div class=\"item-card\">\n                    <div class=\"item-header\">\n                      <span class=\"item-number\">#{{ $index + 1 }}</span>\n                      <button class=\"remove-btn\" (click)=\"removeWorkflowVariable($index)\"\n                        [title]=\"'@workflow-management:workflow-studio.settings.sections.variables.actions.remove' | translate | async\">\n                        <i class=\"fa-light fa-trash\"></i>\n                      </button>\n                    </div>\n                    <div class=\"item-body\">\n                      <div class=\"form-row\">\n                        <div class=\"form-group flex-1\">\n                          <label>{{ '@workflow-management:workflow-studio.settings.sections.variables.fields.name' | translate | async }}</label>\n                          <input type=\"text\" class=\"form-input\" placeholder=\"tempData\" [value]=\"variable.name\"\n                            (input)=\"updateWorkflowVariable($index, 'name', $any($event.target).value)\" />\n                        </div>\n                        <div class=\"form-group flex-1\">\n                          <label>{{ '@workflow-management:workflow-studio.settings.sections.variables.fields.type' | translate | async }}</label>\n                          <select class=\"form-select\" [value]=\"variable.typeName\"\n                            (change)=\"updateWorkflowVariable($index, 'typeName', $any($event.target).value)\">\n                            <option value=\"string\">String</option>\n                            <option value=\"number\">Number</option>\n                            <option value=\"boolean\">Boolean</option>\n                            <option value=\"object\">Object</option>\n                            <option value=\"array\">Array</option>\n                          </select>\n                        </div>\n                      </div>\n                      <div class=\"form-group\">\n                        <label>{{ '@workflow-management:workflow-studio.settings.sections.variables.fields.description' | translate | async }}</label>\n                        <input type=\"text\" class=\"form-input\"\n                          [placeholder]=\"'@workflow-management:workflow-studio.settings.sections.variables.fields.description-placeholder' | translate | async\"\n                          [value]=\"variable.description || ''\"\n                          (input)=\"updateWorkflowVariable($index, 'description', $any($event.target).value)\" />\n                      </div>\n                      <div class=\"form-group\">\n                        <label>{{ '@workflow-management:workflow-studio.settings.sections.variables.fields.initial-value' | translate | async }}</label>\n                        <input type=\"text\" class=\"form-input\"\n                          [placeholder]=\"'@workflow-management:workflow-studio.settings.sections.variables.fields.initial-value-placeholder' | translate | async\"\n                          [value]=\"variable.value || ''\"\n                          (input)=\"updateWorkflowVariable($index, 'value', $any($event.target).value)\" />\n                      </div>\n                    </div>\n                  </div>\n                  }\n                </div>\n                }\n              </div>\n              }\n\n              <!-- Advanced Tab -->\n              @if (activeSettingsTab() === 'advanced') {\n              <div class=\"settings-section\">\n                <h3>{{ '@workflow-management:workflow-studio.settings.sections.advanced.title' | translate | async }}</h3>\n\n                <!-- Versioning -->\n                <div class=\"advanced-group\">\n                  <h4>\u0646\u0633\u062E\u0647\u200C\u0628\u0646\u062F\u06CC (Versioning)</h4>\n                  <div class=\"form-row\">\n                    <div class=\"form-group flex-1\">\n                      <label>Version</label>\n                      <input type=\"number\" class=\"form-input\" min=\"1\" [(ngModel)]=\"workflowSettings().version\" />\n                      <small>\u0634\u0645\u0627\u0631\u0647 \u0646\u0633\u062E\u0647 workflow (1, 2, 3, ...)</small>\n                    </div>\n                    <div class=\"form-group checkbox-group\" style=\"margin-top: 1.8rem\">\n                      <label>\n                        <input type=\"checkbox\" [(ngModel)]=\"workflowSettings().isLatest\" />\n                        <span>\u0622\u062E\u0631\u06CC\u0646 \u0646\u0633\u062E\u0647 (Is Latest)</span>\n                      </label>\n                    </div>\n                    <div class=\"form-group checkbox-group\" style=\"margin-top: 1.8rem\">\n                      <label>\n                        <input type=\"checkbox\" [(ngModel)]=\"workflowSettings().isPublished\" />\n                        <span>\u0645\u0646\u062A\u0634\u0631 \u0634\u062F\u0647 (Published)</span>\n                      </label>\n                    </div>\n                  </div>\n                </div>\n\n                <!-- Options -->\n                <div class=\"advanced-group\">\n                  <h4>\u062A\u0646\u0638\u06CC\u0645\u0627\u062A (Options)</h4>\n                  <div class=\"form-group checkbox-group\">\n                    <label>\n                      <input type=\"checkbox\" [(ngModel)]=\"workflowSettings().usableAsActivity\" />\n                      <span>\u0642\u0627\u0628\u0644 \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 Activity</span>\n                    </label>\n                    <small>\u0627\u06CC\u0646 workflow \u0645\u06CC\u200C\u062A\u0648\u0627\u0646\u062F \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06CC\u06A9 activity \u062F\u0631 workflow \u0647\u0627\u06CC \u062F\u06CC\u06AF\u0631 \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u0634\u0648\u062F</small>\n                  </div>\n                  <div class=\"form-group checkbox-group\">\n                    <label>\n                      <input type=\"checkbox\" [(ngModel)]=\"workflowSettings().autoUpdateConsumingWorkflows\" />\n                      <span>\u0628\u0647\u200C\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06CC \u062E\u0648\u062F\u06A9\u0627\u0631 workflows \u0645\u0635\u0631\u0641\u200C\u06A9\u0646\u0646\u062F\u0647</span>\n                    </label>\n                    <small>workflow \u0647\u0627\u06CC\u06CC \u06A9\u0647 \u0627\u0632 \u0627\u06CC\u0646 workflow \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u0645\u06CC\u200C\u06A9\u0646\u0646\u062F \u0628\u0647 \u0635\u0648\u0631\u062A \u062E\u0648\u062F\u06A9\u0627\u0631 \u0628\u0647\u200C\u0631\u0648\u0632 \u0645\u06CC\u200C\u0634\u0648\u0646\u062F</small>\n                  </div>\n                </div>\n\n                <!-- Metadata -->\n                <div class=\"advanced-group\">\n                  <h4>Metadata</h4>\n                  <div class=\"form-row\">\n                    <div class=\"form-group flex-1\">\n                      <label>Tool Version</label>\n                      <input type=\"text\" class=\"form-input\" placeholder=\"1.0.0\"\n                        [(ngModel)]=\"workflowSettings().toolVersion\" />\n                      <small>\u0646\u0633\u062E\u0647 \u0627\u0628\u0632\u0627\u0631 \u0633\u0627\u0632\u0646\u062F\u0647</small>\n                    </div>\n                    <div class=\"form-group flex-1\">\n                      <label>Provider Name</label>\n                      <input type=\"text\" class=\"form-input\" placeholder=\"WorkflowStudio\"\n                        [(ngModel)]=\"workflowSettings().providerName\" />\n                      <small>\u0646\u0627\u0645 \u0627\u0628\u0632\u0627\u0631 \u0633\u0627\u0632\u0646\u062F\u0647</small>\n                    </div>\n                  </div>\n                </div>\n\n                <!-- Outcomes -->\n                <div class=\"advanced-group\">\n                  <h4>Workflow Outcomes</h4>\n                  <div class=\"form-group\">\n                    <label>Possible Outcomes</label>\n                    <input type=\"text\" class=\"form-input\" placeholder=\"Done, Success, Failed (\u062C\u062F\u0627 \u0634\u062F\u0647 \u0628\u0627 \u06A9\u0627\u0645\u0627)\"\n                      [value]=\"workflowSettings().outcomes.join(', ')\"\n                      (input)=\"updateOutcomes($any($event.target).value)\" />\n                    <small>\u0646\u062A\u0627\u06CC\u062C \u0645\u0645\u06A9\u0646 \u06A9\u0647 \u0627\u06CC\u0646 workflow \u0645\u06CC\u200C\u062A\u0648\u0627\u0646\u062F \u0628\u0631\u06AF\u0631\u062F\u0627\u0646\u062F (\u0645\u062B\u0644\u0627\u064B: Done, Success, Failed)</small>\n                  </div>\n                  <div class=\"outcomes-preview\">\n                    @for (outcome of workflowSettings().outcomes; track outcome) {\n                    <span class=\"outcome-chip\">{{ outcome }}</span>\n                    }\n                  </div>\n                </div>\n\n                <!-- Export Preview -->\n                <div class=\"advanced-group\">\n                  <h4>\u062E\u0631\u0648\u062C\u06CC \u0646\u0647\u0627\u06CC\u06CC (WorkflowDefinition)</h4>\n                  <small>\u0627\u06CC\u0646 \u0633\u0627\u062E\u062A\u0627\u0631 \u062F\u0642\u06CC\u0642\u0627\u064B \u0645\u0637\u0627\u0628\u0642 \u0628\u0627 WorkflowDefinition \u0627\u0633\u062A \u0648 \u062F\u0631 \u062F\u06CC\u062A\u0627\u0628\u06CC\u0633 \u0630\u062E\u06CC\u0631\u0647 \u0645\u06CC\u200C\u0634\u0648\u062F</small>\n                  <div class=\"export-info\">\n                    <div class=\"info-row\">\n                      <span class=\"label\">Definition ID:</span>\n                      <code>{{ workflowSettings().definitionId || '(\u062E\u0627\u0644\u06CC)' }}</code>\n                    </div>\n                    <div class=\"info-row\">\n                      <span class=\"label\">Name:</span>\n                      <code>{{ workflowSettings().name || '(\u062E\u0627\u0644\u06CC)' }}</code>\n                    </div>\n                    <div class=\"info-row\">\n                      <span class=\"label\">Version:</span>\n                      <code>v{{ workflowSettings().version }}</code>\n                    </div>\n                    <div class=\"info-row\">\n                      <span class=\"label\">Inputs:</span>\n                      <code>{{ workflowSettings().inputs.length }} items</code>\n                    </div>\n                    <div class=\"info-row\">\n                      <span class=\"label\">Outputs:</span>\n                      <code>{{ workflowSettings().outputs.length }} items</code>\n                    </div>\n                    <div class=\"info-row\">\n                      <span class=\"label\">Variables:</span>\n                      <code>{{ workflowSettings().variables.length }} items</code>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              }\n            </div>\n          </div>\n\n          <!-- Modal Footer -->\n          <div class=\"settings-modal-footer\">\n            <ax-button [text]=\"'@workflow-management:workflow-studio.settings.actions.cancel' | translate | async\" color=\"secondary\" size=\"md\" (onClick)=\"closeWorkflowSettings()\"> </ax-button>\n            <ax-button [text]=\"'@workflow-management:workflow-studio.settings.actions.save' | translate | async\" color=\"primary\" size=\"md\" (onClick)=\"saveWorkflowSettings()\"> </ax-button>\n          </div>\n        </div>\n      </div>\n      }\n\n      <!-- Workflow Execution Dialog -->\n      @if (showExecutionDialog()) {\n      <div class=\"execution-dialog-overlay\" (click)=\"closeExecutionDialog()\">\n        <div class=\"execution-dialog\" (click)=\"$event.stopPropagation()\">\n          <!-- Dialog Header -->\n          <div class=\"execution-dialog-header\">\n            <div class=\"header-content\">\n              <i class=\"fa-light fa-play-circle\"></i>\n              <div class=\"header-info\">\n                <h2>{{ '@workflow-management:test-pages.workflow-studio.actions.execute-workflow.title' | translate |\n                  async }}</h2>\n                <p>{{ '@workflow-management:test-pages.workflow-studio.actions.execute-workflow.description' | translate\n                  | async }}</p>\n              </div>\n            </div>\n            <button class=\"close-btn\" (click)=\"closeExecutionDialog()\" [disabled]=\"isExecuting()\">\n              <i class=\"fa-light fa-times\"></i>\n            </button>\n          </div>\n\n          <!-- Dialog Body -->\n          <div class=\"execution-dialog-body\">\n            <!-- Workflow Info Panel (Before Execution) -->\n            @if (!workflowInstanceState()) {\n            <div class=\"workflow-info-panel\">\n              <div class=\"start-section\">\n                <div class=\"start-illustration\">\n                  <i class=\"fa-light fa-rocket\"></i>\n                </div>\n                <h3>{{ '@workflow-management:test-pages.workflow-studio.messages.info.ready-to-execute' | translate |\n                  async }}</h3>\n                <p>{{ '@workflow-management:test-pages.workflow-studio.messages.info.click-to-start' | translate | async\n                  }}</p>\n                <ax-button\n                  [text]=\"'@workflow-management:test-pages.workflow-studio.actions.start-execution.title' | translate | async\"\n                  color=\"success\" size=\"lg\" (onClick)=\"startWorkflowExecution()\">\n                </ax-button>\n              </div>\n            </div>\n            }\n\n\n            <!-- Custom UI for Registration -->\n            @if (false) {\n            <div class=\"registration-ui\">\n              <div class=\"registration-card\">\n                <div class=\"registration-icon\">\n                  <i class=\"fa-light fa-user-circle\"></i>\n                </div>\n                <h3>\u0641\u0631\u0622\u06CC\u0646\u062F \u062B\u0628\u062A\u200C\u0646\u0627\u0645</h3>\n                <p class=\"registration-desc\">\n                  \u0627\u06CC\u0646 \u0641\u0644\u0648 \u0634\u0627\u0645\u0644 \u0686\u0646\u062F \u0645\u0631\u062D\u0644\u0647 \u0627\u0633\u062A \u06A9\u0647 \u062F\u0627\u062F\u0647\u200C\u0647\u0627\u06CC \u06A9\u0627\u0631\u0628\u0631 \u0631\u0627 \u062C\u0645\u0639\u200C\u0622\u0648\u0631\u06CC \u06A9\u0631\u062F\u0647 \u0648 \u062F\u0631 \u0646\u0647\u0627\u06CC\u062A \u062D\u0633\u0627\u0628 \u06A9\u0627\u0631\u0628\u0631\u06CC \u0627\u06CC\u062C\u0627\u062F \u0645\u06CC\u200C\u06A9\u0646\u062F.\n                </p>\n\n                @if (workflowInstanceState()?.status === 'running') {\n                <div class=\"registration-progress\">\n                  <div class=\"progress-spinner\">\n                    <i class=\"fa-light fa-spinner-third fa-spin\"></i>\n                  </div>\n                  <p>\u062F\u0631 \u062D\u0627\u0644 \u0627\u062C\u0631\u0627\u06CC \u0645\u0631\u0627\u062D\u0644 \u062B\u0628\u062A\u200C\u0646\u0627\u0645...</p>\n                </div>\n                }\n\n                @if (workflowInstanceState()?.status === 'finished') {\n                <div class=\"registration-success\">\n                  <i class=\"fa-light fa-check-circle\"></i>\n                  <h4>\u062B\u0628\u062A\u200C\u0646\u0627\u0645 \u0628\u0627 \u0645\u0648\u0641\u0642\u06CC\u062A \u0627\u0646\u062C\u0627\u0645 \u0634\u062F!</h4>\n                  <p>\u062D\u0633\u0627\u0628 \u06A9\u0627\u0631\u0628\u0631\u06CC \u0634\u0645\u0627 \u0627\u06CC\u062C\u0627\u062F \u0634\u062F \u0648 \u0628\u0647 \u0632\u0648\u062F\u06CC \u0628\u0647 \u062F\u0627\u0634\u0628\u0648\u0631\u062F \u0645\u0646\u062A\u0642\u0644 \u062E\u0648\u0627\u0647\u06CC\u062F \u0634\u062F.</p>\n                </div>\n                }\n              </div>\n            </div>\n            }\n\n            <!-- Default Execution View -->\n            @if (workflowInstanceState()) {\n            <div class=\"default-execution-view\">\n              <div class=\"execution-status\">\n                @if (workflowInstanceState()?.status === 'running') {\n                <div class=\"status-running\">\n                  <i class=\"fa-light fa-spinner-third fa-spin\"></i>\n                  <h3>\u062F\u0631 \u062D\u0627\u0644 \u0627\u062C\u0631\u0627...</h3>\n                  <p>Workflow \u062F\u0631 \u062D\u0627\u0644 \u0627\u062C\u0631\u0627 \u0627\u0633\u062A. \u0644\u0637\u0641\u0627\u064B \u0635\u0628\u0631 \u06A9\u0646\u06CC\u062F.</p>\n                </div>\n                }\n\n                @if (workflowInstanceState()?.status === 'finished') {\n                <div class=\"status-finished\">\n                  <i class=\"fa-light fa-check-circle\"></i>\n                  <h3>\u0627\u062C\u0631\u0627 \u0628\u0627 \u0645\u0648\u0641\u0642\u06CC\u062A \u062A\u06A9\u0645\u06CC\u0644 \u0634\u062F</h3>\n                  <p>Workflow \u0628\u0627 \u0645\u0648\u0641\u0642\u06CC\u062A \u0627\u062C\u0631\u0627 \u0634\u062F \u0648 \u062A\u0645\u0627\u0645 Activities \u0627\u0646\u062C\u0627\u0645 \u0634\u062F\u0646\u062F.</p>\n                </div>\n                }\n\n                @if (workflowInstanceState()?.status === 'error') {\n                <div class=\"status-error\">\n                  <i class=\"fa-light fa-times-circle\"></i>\n                  <h3>\u062E\u0637\u0627 \u062F\u0631 \u0627\u062C\u0631\u0627</h3>\n                  <p>{{ workflowInstanceState()?.error }}</p>\n                </div>\n                }\n              </div>\n            </div>\n            }\n\n            <!-- Execution Logs Panel -->\n            @if (workflowInstanceState() && executionLogs().length > 0) {\n            <div class=\"execution-logs-panel\">\n              <h3><i class=\"fa-light fa-terminal\"></i> \u0644\u0627\u06AF\u200C\u0647\u0627\u06CC \u0627\u062C\u0631\u0627</h3>\n              <div class=\"logs-container-compact\">\n                @for (log of executionLogs(); track $index) {\n                <div class=\"log-item-compact\" [class]=\"'log-' + log.level\">\n                  <span class=\"log-time\">{{ log.timestamp | date: 'HH:mm:ss' }}</span>\n                  <span class=\"log-icon\">\n                    @switch (log.level) {\n                    @case ('info') {\n                    <i class=\"fa-light fa-info-circle\"></i>\n                    }\n                    @case ('success') {\n                    <i class=\"fa-light fa-check-circle\"></i>\n                    }\n                    @case ('warning') {\n                    <i class=\"fa-light fa-exclamation-triangle\"></i>\n                    }\n                    @case ('error') {\n                    <i class=\"fa-light fa-times-circle\"></i>\n                    }\n                    }\n                  </span>\n                  <span class=\"log-message\">{{ log.message }}</span>\n                </div>\n                }\n              </div>\n            </div>\n            }\n          </div>\n\n          <!-- Dialog Footer -->\n          <div class=\"execution-dialog-footer\">\n            <div class=\"footer-info\">\n              @if (workflowInstanceState()?.startTime) {\n              <span class=\"time-info\">\n                <i class=\"fa-light fa-clock\"></i>\n                \u0634\u0631\u0648\u0639: {{ workflowInstanceState()!.startTime | date: 'HH:mm:ss' }}\n              </span>\n              }\n              @if (workflowInstanceState()?.endTime) {\n              <span class=\"time-info\">\n                <i class=\"fa-light fa-flag-checkered\"></i>\n                \u067E\u0627\u06CC\u0627\u0646: {{ workflowInstanceState()!.endTime | date: 'HH:mm:ss' }}\n              </span>\n              }\n            </div>\n            <div class=\"footer-actions\">\n              <ax-button\n                [text]=\"(workflowInstanceState() ? '@general:actions.close.title' : '@general:actions.cancel.title') | translate | async\"\n                color=\"secondary\" size=\"md\" [disabled]=\"isExecuting()\" (onClick)=\"closeExecutionDialog()\">\n              </ax-button>\n            </div>\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n  </axp-page-content>\n</axp-page-layout>", styles: [".sidebar-header .toggle-btn{padding:.5rem;margin-left:auto;background:transparent;border:1px solid #e2e8f0;border-radius:6px;color:#64748b;cursor:pointer;transition:all .2s}.sidebar-header .toggle-btn:hover{background:#f8fafc;border-color:#8b5cf6;color:#8b5cf6}.sidebar-header .toggle-btn i{font-size:.875rem}.sidebar-toggle-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:100;padding:1rem .5rem;background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#8b5cf6;cursor:pointer;box-shadow:0 4px 12px #0000001a;transition:all .3s}.sidebar-toggle-btn:hover{background:#8b5cf6;color:#fff;box-shadow:0 8px 24px #8b5cf64d;transform:translateY(-50%) scale(1.1)}.sidebar-toggle-btn.left{left:0;border-left:none;border-radius:0 8px 8px 0}.sidebar-toggle-btn.right{right:0;border-right:none;border-radius:8px 0 0 8px}.sidebar-toggle-btn i{font-size:1.25rem;display:block}.properties-header .header-actions{display:flex;gap:.5rem;margin-left:auto}.properties-header .header-btn{padding:.375rem .5rem;background:transparent;border:1px solid #e2e8f0;border-radius:4px;color:#64748b;cursor:pointer;transition:all .2s}.properties-header .header-btn:hover{background:#f8fafc;border-color:#8b5cf6;color:#8b5cf6}.properties-header .header-btn i{font-size:.75rem}.connections-list{margin-top:.75rem}.connection-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;margin-bottom:.5rem;font-size:.875rem}.connection-item i{color:#8b5cf6}.connection-item span{flex:1;color:#1e293b}.connection-item .remove-btn{padding:.25rem .375rem;background:transparent;border:1px solid #e2e8f0;border-radius:4px;color:#ef4444;cursor:pointer;transition:all .2s}.connection-item .remove-btn:hover{background:#fef2f2;border-color:#ef4444}.connection-item .remove-btn i{font-size:.75rem;color:inherit}.property-editor{margin-top:.75rem}.property-editor .property-row label{display:flex;align-items:center;gap:.5rem;justify-content:space-between}.property-editor .property-row label .property-type-badge{padding:.125rem .375rem;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;font-size:.625rem;font-weight:400;color:#64748b;text-transform:lowercase;font-family:JetBrains Mono,monospace}.property-editor .property-row select{width:100%;padding:.5rem;border:1px solid #e2e8f0;border-radius:6px;font-size:.875rem;color:#1e293b;background:#fff;cursor:pointer;transition:all .2s}.property-editor .property-row select:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a}.property-editor .property-row textarea{width:100%;padding:.5rem;border:1px solid #e2e8f0;border-radius:6px;font-size:.75rem;font-family:JetBrains Mono,monospace;color:#1e293b;resize:vertical;transition:all .2s}.property-editor .property-row textarea:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a}.workflow-studio{display:flex;flex-direction:column;height:100vh;background:#f8fafc;overflow:hidden}.workflow-popup .popup-header{text-align:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #e2e8f0}.workflow-popup .popup-header h3{margin:0 0 .5rem;color:#1e293b;font-size:1.5rem;font-weight:700}.workflow-popup .popup-header p{margin:0;color:#64748b;font-size:.95rem}.workflow-popup .popup-body{max-height:60vh;overflow-y:auto;padding:0 .5rem}.workflow-popup .popup-body h4{margin:1.5rem 0 .75rem;color:#374151;font-size:1.1rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.workflow-popup .popup-body ul{margin:0;padding-left:1.5rem}.workflow-popup .popup-body ul li{margin-bottom:.5rem;color:#4b5563}.workflow-popup .popup-body ul li strong{color:#1f2937}.workflow-popup .workflow-info{background:#f8fafc;padding:1rem;border-radius:8px;border:1px solid #e2e8f0}.workflow-popup .workflow-variables{background:#fef3c7;padding:1rem;border-radius:8px;border:1px solid #f59e0b}.workflow-popup .workflow-flow{background:#ecfdf5;padding:1rem;border-radius:8px;border:1px solid #10b981}.workflow-popup .workflow-flow .flow-steps{display:flex;flex-direction:column;gap:.75rem}.workflow-popup .workflow-flow .flow-steps .flow-step{display:flex;align-items:center;gap:.75rem;padding:.5rem;background:#fff;border-radius:6px;border:1px solid #d1d5db}.workflow-popup .workflow-flow .flow-steps .flow-step .step-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#3b82f6;color:#fff;border-radius:50%;font-size:.8rem;font-weight:600}.workflow-popup .workflow-flow .flow-steps .flow-step .step-text{color:#374151;font-weight:500}.workflow-popup .workflow-json{background:#1f2937;padding:1rem;border-radius:8px;border:1px solid #374151}.workflow-popup .workflow-json .json-preview{background:transparent;color:#e5e7eb;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.8rem;line-height:1.4;margin:0;white-space:pre-wrap;word-break:break-all;max-height:200px;overflow-y:auto}.workflow-popup .popup-footer{text-align:center;margin-top:1.5rem;padding-top:1rem;border-top:1px solid #e2e8f0}.workflow-popup .popup-footer .btn{padding:.75rem 1.5rem;background:#3b82f6;color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;transition:background-color .2s}.workflow-popup .popup-footer .btn:hover{background:#2563eb}.workflow-popup .popup-footer .btn i{font-size:.9rem}.view-workflow-link{color:#3b82f6;text-decoration:none;font-size:.85rem;margin-left:.5rem;transition:color .2s}.view-workflow-link:hover{color:#1d4ed8;text-decoration:underline}.studio-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:#fff;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px #0000000d}.studio-header .header-title{display:flex;align-items:center;gap:.75rem}.studio-header .header-title i{font-size:1.75rem;color:#8b5cf6}.studio-header .header-title h1{margin:0;font-size:1.5rem;font-weight:700;color:#1e293b}.studio-header .header-title .badge{padding:.25rem .75rem;background:#8b5cf6;color:#fff;border-radius:12px;font-size:.75rem;font-weight:600}.studio-header .header-actions{display:flex;gap:.75rem;align-items:center}.samples-dropdown{position:relative}.samples-dropdown .samples-menu{position:absolute;top:calc(100% + .5rem);left:0;min-width:320px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 10px 25px #0000001a;z-index:1000;max-height:400px;overflow-y:auto}.samples-dropdown .samples-menu .sample-item{padding:.875rem 1rem;display:flex;align-items:flex-start;gap:.75rem;cursor:pointer;border-bottom:1px solid #f1f5f9;transition:all .2s}.samples-dropdown .samples-menu .sample-item:last-child{border-bottom:none}.samples-dropdown .samples-menu .sample-item:hover{background:#f8fafc;transform:translate(4px)}.samples-dropdown .samples-menu .sample-item i{font-size:1.25rem;margin-top:.125rem;color:#8b5cf6}.samples-dropdown .samples-menu .sample-item .sample-info{display:flex;flex-direction:column;gap:.25rem;flex:1}.samples-dropdown .samples-menu .sample-item .sample-info strong{color:#1e293b;font-size:.875rem;font-weight:600}.samples-dropdown .samples-menu .sample-item .sample-info span{color:#64748b;font-size:.75rem;line-height:1.4}.studio-body{display:grid;grid-template-columns:320px 1fr 420px;gap:0;flex:1;overflow:hidden;transition:grid-template-columns .3s ease}.studio-body.sidebar-hidden{grid-template-columns:0 1fr 420px}.studio-body.properties-hidden{grid-template-columns:320px 1fr 0}.studio-body.sidebar-hidden.properties-hidden{grid-template-columns:0 1fr 0}.studio-sidebar{background:#fff;border-right:1px solid #e2e8f0;display:flex;flex-direction:column;overflow:hidden}.studio-sidebar .sidebar-header{padding:1rem 1.25rem;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;gap:.5rem}.studio-sidebar .sidebar-header i{font-size:1.25rem;color:#8b5cf6}.studio-sidebar .sidebar-header h3{flex:1;margin:0;font-size:1.125rem;font-weight:600;color:#1e293b}.activities-tree{flex:1;overflow-y:auto;padding:.5rem}.category-section{margin-bottom:.5rem}.category-section .category-header{display:flex;align-items:center;gap:.5rem;padding:.75rem;border-radius:8px;cursor:pointer;transition:all .2s;background:#f8fafc}.category-section .category-header:hover{background:#f1f5f9}.category-section .category-header.active{background:#ede9fe}.category-section .category-header.active>i:first-child{color:#8b5cf6}.category-section .category-header>i:first-child{font-size:.875rem;color:#94a3b8;transition:transform .2s,color .2s}.category-section .category-header>i:nth-child(2){font-size:1.125rem}.category-section .category-header span{flex:1;font-weight:600;font-size:.875rem;color:#334155}.category-section .category-header .count{flex:none;padding:.125rem .5rem;background:#fff;border-radius:10px;font-size:.75rem;font-weight:600;color:#64748b;border:1px solid #e2e8f0}.activities-list{padding:.5rem 0 .5rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;animation:slideDown .3s ease}.activities-list .activities-header{padding:.5rem .75rem;margin-bottom:.5rem}.activities-list .activities-header h4{margin:0;font-size:.875rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px}.activity-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:.875rem;margin-bottom:.75rem;transition:all .2s}.activity-card:hover{border-color:#8b5cf6;box-shadow:0 4px 12px #8b5cf61a;transform:translateY(-1px)}.activity-card .activity-info{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:.5rem}.activity-card .activity-info>i{font-size:1.5rem;color:#8b5cf6;margin-top:.125rem}.activity-card .activity-info .activity-details{flex:1;display:flex;flex-direction:column;gap:.25rem}.activity-card .activity-info .activity-details strong{font-size:.875rem;color:#1e293b}.activity-card .activity-info .activity-details small{font-size:.75rem;color:#64748b;line-height:1.4}.activity-card .activity-info .activity-details code{font-size:.75rem;color:#8b5cf6;background:#f3f0ff;padding:.125rem .375rem;border-radius:4px;width:fit-content}.activity-card .copy-btn{float:right;padding:.375rem .75rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;transition:all .2s;color:#64748b}.activity-card .copy-btn:hover{background:#8b5cf6;border-color:#8b5cf6;color:#fff}.activity-card .copy-btn i{font-size:.875rem}.activity-card .activity-properties{margin-top:.75rem;padding-top:.75rem;border-top:1px solid #f1f5f9}.activity-card .activity-properties .properties-title{display:block;font-size:.75rem;font-weight:600;color:#64748b;margin-bottom:.5rem}.activity-card .activity-properties .property-item{display:flex;align-items:center;gap:.5rem;padding:.25rem 0;font-size:.75rem}.activity-card .activity-properties .property-item code{color:#1e293b;background:#f8fafc;padding:.125rem .375rem;border-radius:3px}.activity-card .activity-properties .property-item .property-type{color:#64748b;font-style:italic}.activity-card .activity-properties .property-item .required{color:#ef4444;font-weight:700}.studio-editor{display:flex;flex-direction:column;background:#1e293b;overflow:hidden}.studio-editor .editor-header{padding:1rem 1.25rem;background:#0f172a;display:flex;align-items:center;gap:.5rem}.studio-editor .editor-header i{font-size:1.125rem;color:#8b5cf6}.studio-editor .editor-header h3{margin:0;font-size:1rem;font-weight:600;color:#e2e8f0}.studio-editor axp-page-toolbar .editor-tabs{display:flex;gap:.5rem;background:transparent}.studio-editor axp-page-toolbar .editor-tabs .tab-btn{padding:.5rem 1rem;background:transparent;border:1px solid #e2e8f0;border-radius:6px;color:#64748b;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.5rem}.studio-editor axp-page-toolbar .editor-tabs .tab-btn i{font-size:.875rem}.studio-editor axp-page-toolbar .editor-tabs .tab-btn:hover{background:#f8fafc;border-color:#cbd5e1;color:#475569}.studio-editor axp-page-toolbar .editor-tabs .tab-btn.active{background:#8b5cf6;border-color:#8b5cf6;color:#fff}.studio-editor .editor-content{flex:1;display:flex;overflow:hidden}.studio-editor .json-tab{flex:1;display:flex;flex-direction:column}.studio-editor .json-editor{flex:1;padding:1.5rem;background:#1e293b;color:#e2e8f0;border:none;outline:none;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:.875rem;line-height:1.6;resize:none;overflow:auto}.studio-editor .json-editor::placeholder{color:#475569}.studio-editor .json-editor::-webkit-scrollbar{width:10px;height:10px}.studio-editor .json-editor::-webkit-scrollbar-track{background:#0f172a}.studio-editor .json-editor::-webkit-scrollbar-thumb{background:#475569;border-radius:5px}.studio-editor .json-editor::-webkit-scrollbar-thumb:hover{background:#64748b}.studio-editor .visual-tab{flex:1;display:flex;background:#f8fafc;position:relative}.studio-editor .visual-canvas{flex:1;display:flex;flex-direction:column;overflow:hidden}.studio-editor .visual-canvas .canvas-toolbar{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:#fff;border-bottom:1px solid #e2e8f0}.studio-editor .visual-canvas .canvas-toolbar .tool-btn{padding:.5rem .75rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;color:#64748b;cursor:pointer;transition:all .2s}.studio-editor .visual-canvas .canvas-toolbar .tool-btn:hover{background:#8b5cf6;border-color:#8b5cf6;color:#fff}.studio-editor .visual-canvas .canvas-toolbar .tool-btn i{font-size:.875rem}.studio-editor .visual-canvas .canvas-toolbar .tool-info{flex:1;display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:#64748b}.studio-editor .visual-canvas .canvas-toolbar .tool-info i{font-size:1rem;color:#8b5cf6}.studio-editor .visual-canvas .canvas-area{flex:1;position:relative;background:linear-gradient(90deg,#e5e7eb 1px,transparent 1px),linear-gradient(#e5e7eb 1px,transparent 1px);background-size:20px 20px;overflow:auto;min-height:600px}.studio-editor .visual-canvas .connections-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.studio-editor .visual-canvas .connection-line{stroke:#64748b;stroke-width:2;fill:none;opacity:.6;cursor:pointer;pointer-events:stroke;transition:all .2s}.studio-editor .visual-canvas .connection-line:hover{stroke:#ef4444;stroke-width:3;opacity:1}.studio-editor .visual-canvas .visual-node{position:absolute;width:150px;background:#fff;border:2px solid #e2e8f0;border-radius:8px;box-shadow:0 2px 8px #0000001a;cursor:move;transition:all .2s;z-index:2}.studio-editor .visual-canvas .visual-node:hover{border-color:#8b5cf6;box-shadow:0 4px 16px #8b5cf633;transform:translateY(-2px)}.studio-editor .visual-canvas .visual-node.selected{border-color:#8b5cf6;border-width:3px;box-shadow:0 0 0 3px #8b5cf633}.studio-editor .visual-canvas .visual-node .node-header{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;border-radius:6px 6px 0 0;font-size:.875rem;font-weight:600}.studio-editor .visual-canvas .visual-node .node-header i{font-size:1rem}.studio-editor .visual-canvas .visual-node .node-header span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-editor .visual-canvas .visual-node .node-header .node-delete{padding:.25rem;background:#fff3;border:none;border-radius:4px;color:#fff;cursor:pointer;transition:all .2s}.studio-editor .visual-canvas .visual-node .node-header .node-delete:hover{background:#ef4444cc}.studio-editor .visual-canvas .visual-node .node-header .node-delete i{font-size:.75rem}.studio-editor .visual-canvas .visual-node .node-body{padding:.75rem}.studio-editor .visual-canvas .visual-node .node-body small{display:block;font-size:.75rem;color:#64748b;text-align:center}.studio-editor .visual-canvas .visual-node .node-connectors{position:relative}.studio-editor .visual-canvas .visual-node .node-connectors .connector{position:absolute;width:12px;height:12px;background:#8b5cf6;border:2px solid white;border-radius:50%;cursor:pointer;transition:all .2s;z-index:10}.studio-editor .visual-canvas .visual-node .node-connectors .connector:hover{transform:scale(1.3);box-shadow:0 0 0 3px #8b5cf64d}.studio-editor .visual-canvas .visual-node .node-connectors .connector-in{top:-50px;left:50%;transform:translate(-50%);background:#3b82f6}.studio-editor .visual-canvas .visual-node .node-connectors .connector-out{bottom:-6px;left:50%;transform:translate(-50%);background:#8b5cf6}.studio-editor .visual-canvas .visual-node .node-connectors .connector-out.active{background:#ef4444}.studio-editor .visual-canvas .visual-node .node-connectors .outcomes-container{position:absolute;bottom:-60px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;background:#fff;padding:8px;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 12px #00000026;min-width:120px;z-index:100}.studio-editor .visual-canvas .visual-node .node-connectors .outcomes-container:before{content:\"\";position:absolute;top:-8px;left:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid white;filter:drop-shadow(0 -2px 2px rgba(0,0,0,.05))}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;transition:all .2s;position:relative}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector:hover{background:#f1f5f9;border-color:#8b5cf6;transform:translate(2px)}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector.active{background:#fef2f2;border-color:#ef4444}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector.active .outcome-dot{background:#ef4444;box-shadow:0 0 0 3px #ef444433}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector .outcome-label{font-size:.75rem;font-weight:600;color:#475569;-webkit-user-select:none;user-select:none;flex:1}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector .outcome-dot{width:10px;height:10px;background:#8b5cf6;border:2px solid white;border-radius:50%;transition:all .2s;flex-shrink:0}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=\"200\"] .outcome-dot,.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=Done] .outcome-dot{background:#10b981}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=\"404\"] .outcome-dot,.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=Failed] .outcome-dot{background:#ef4444}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=Timeout] .outcome-dot,.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=Cancelled] .outcome-dot{background:#f59e0b}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=Then] .outcome-dot{background:#3b82f6}.studio-editor .visual-canvas .visual-node .node-connectors .outcome-connector[data-outcome=Else] .outcome-dot{background:#64748b}.studio-editor .visual-canvas .canvas-empty-state{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#94a3b8;pointer-events:none}.studio-editor .visual-canvas .canvas-empty-state i{font-size:4rem;margin-bottom:1rem;opacity:.5}.studio-editor .visual-canvas .canvas-empty-state p{margin:0 0 .5rem;font-size:1rem;font-weight:500}.studio-editor .visual-canvas .canvas-empty-state small{font-size:.875rem;opacity:.8}.studio-editor .properties-panel{width:280px;background:#fff;border-left:1px solid #e2e8f0;display:flex;flex-direction:column}.studio-editor .properties-panel .properties-header{display:flex;align-items:center;gap:.5rem;padding:1rem;border-bottom:1px solid #e2e8f0}.studio-editor .properties-panel .properties-header i{font-size:1.125rem;color:#8b5cf6}.studio-editor .properties-panel .properties-header h4{flex:1;margin:0;font-size:.875rem;font-weight:600;color:#1e293b}.studio-editor .properties-panel .properties-header button{padding:.25rem .5rem;background:transparent;border:none;color:#64748b;cursor:pointer;transition:color .2s}.studio-editor .properties-panel .properties-header button:hover{color:#ef4444}.studio-editor .properties-panel .properties-body{flex:1;padding:1rem;overflow-y:auto}.studio-editor .properties-panel .properties-body .property-row{margin-bottom:1rem}.studio-editor .properties-panel .properties-body .property-row label{display:block;font-size:.75rem;font-weight:600;color:#64748b;margin-bottom:.375rem;text-transform:uppercase;letter-spacing:.5px}.studio-editor .properties-panel .properties-body .property-row input{width:100%;padding:.5rem;border:1px solid #e2e8f0;border-radius:6px;font-size:.875rem;color:#1e293b;transition:all .2s}.studio-editor .properties-panel .properties-body .property-row input:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a}.studio-editor .properties-panel .properties-body .property-row input:disabled{background:#f8fafc;color:#94a3b8;cursor:not-allowed}.studio-editor .properties-panel .properties-body .properties-divider{height:1px;background:#e2e8f0;margin:1.5rem 0}.studio-editor .properties-panel .properties-body h5{margin:0 0 .5rem;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px}.studio-editor .properties-panel .properties-body .properties-hint{display:block;font-size:.75rem;color:#94a3b8;margin-bottom:.75rem}.studio-editor .properties-panel .properties-body .properties-json{margin:.75rem 0 0;padding:.75rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;font-family:JetBrains Mono,monospace;font-size:.75rem;line-height:1.6;color:#1e293b;overflow-x:auto}.studio-editor .properties-panel .properties-body .no-properties{margin:.75rem 0 0;padding:1rem;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:6px;text-align:center;font-size:.75rem;color:#94a3b8}.studio-editor .properties-panel .properties-body .connections-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem}.studio-editor .properties-panel .properties-body .connections-list .connection-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;font-size:.75rem}.studio-editor .properties-panel .properties-body .connections-list .connection-item.outcome-connection{border-left-width:3px}.studio-editor .properties-panel .properties-body .connections-list .connection-item i{color:#64748b;font-size:.875rem}.studio-editor .properties-panel .properties-body .connections-list .connection-item span{flex:1;color:#1e293b;font-weight:500}.studio-editor .properties-panel .properties-body .connections-list .connection-item .outcome-badge{padding:.25rem .5rem;border-radius:4px;color:#fff;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.studio-editor .properties-panel .properties-body .connections-list .connection-item .remove-btn{padding:.25rem;background:transparent;border:none;color:#ef4444;cursor:pointer;border-radius:4px;transition:all .2s}.studio-editor .properties-panel .properties-body .connections-list .connection-item .remove-btn:hover{background:#fee2e2}.studio-editor .properties-panel .properties-body .connections-list .connection-item .remove-btn i{font-size:.75rem;color:inherit}.studio-editor .properties-panel .properties-body .outcomes-info{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.studio-editor .properties-panel .properties-body .outcomes-info .outcome-tag{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .625rem;background:#fff;border:2px solid;border-radius:6px;font-size:.75rem;font-weight:600;color:#1e293b;transition:all .2s}.studio-editor .properties-panel .properties-body .outcomes-info .outcome-tag:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.studio-editor .properties-panel .properties-body .outcomes-info .outcome-tag .outcome-dot{width:8px;height:8px;border-radius:50%}.studio-result{display:flex;flex-direction:column;background:#fff;border-left:1px solid #e2e8f0;overflow:hidden}.studio-result .result-header{padding:1rem 1.25rem;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;gap:.5rem}.studio-result .result-header i{font-size:1.125rem;color:#10b981}.studio-result .result-header h3{flex:1;margin:0;font-size:1rem;font-weight:600;color:#1e293b}.studio-result .result-header .clear-btn{padding:.375rem .75rem;background:#fee2e2;color:#dc2626;border:none;border-radius:6px;cursor:pointer;font-size:.75rem;font-weight:500;transition:all .2s}.studio-result .result-header .clear-btn:hover{background:#fecaca}.studio-result .result-header .clear-btn i{font-size:.75rem;color:inherit}.studio-result .result-body{flex:1;overflow-y:auto;padding:1rem}.logs-container{display:flex;flex-direction:column;gap:.5rem}.log-item{display:flex;align-items:flex-start;gap:.5rem;padding:.75rem;background:#f8fafc;border-left:3px solid #cbd5e1;border-radius:6px;font-size:.875rem}.log-item.log-info{border-left-color:#3b82f6;background:#eff6ff}.log-item.log-info .log-icon{color:#3b82f6}.log-item.log-success{border-left-color:#10b981;background:#f0fdf4}.log-item.log-success .log-icon{color:#10b981}.log-item.log-warning{border-left-color:#f59e0b;background:#fffbeb}.log-item.log-warning .log-icon{color:#f59e0b}.log-item.log-error{border-left-color:#ef4444;background:#fef2f2}.log-item.log-error .log-icon{color:#ef4444}.log-item .log-time{font-family:JetBrains Mono,monospace;font-size:.75rem;color:#64748b;min-width:80px}.log-item .log-icon{font-size:1rem}.log-item .log-message{flex:1;color:#1e293b}.log-item .log-data-toggle{padding:.25rem .5rem;background:transparent;border:1px solid #cbd5e1;border-radius:4px;cursor:pointer;transition:all .2s}.log-item .log-data-toggle:hover{background:#fff}.log-item .log-data-toggle i{font-size:.75rem;color:#64748b}.log-data{margin:.5rem 0 0;padding:1rem;background:#0f172a;color:#e2e8f0;border-radius:6px;font-family:JetBrains Mono,monospace;font-size:.75rem;line-height:1.6;overflow-x:auto}.settings-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:9999;padding:2rem;animation:fadeIn .2s ease}.settings-modal{background:#fff;border-radius:12px;box-shadow:0 20px 60px #0000004d;width:100%;max-width:900px;max-height:90vh;display:flex;flex-direction:column;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.settings-modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2rem;border-bottom:1px solid #e2e8f0}.settings-modal-header .header-title{display:flex;align-items:center;gap:.75rem}.settings-modal-header .header-title i{font-size:1.5rem;color:#8b5cf6}.settings-modal-header .header-title h2{margin:0;font-size:1.25rem;font-weight:700;color:#1e293b}.settings-modal-header .close-btn{padding:.5rem;background:transparent;border:none;color:#64748b;cursor:pointer;border-radius:6px;transition:all .2s}.settings-modal-header .close-btn:hover{background:#f1f5f9;color:#ef4444}.settings-modal-header .close-btn i{font-size:1.25rem}.settings-modal-body{flex:1;display:flex;flex-direction:column;overflow:hidden}.settings-tabs{display:flex;gap:.5rem;padding:1rem 2rem 0;border-bottom:1px solid #e2e8f0}.settings-tabs .tab-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background:transparent;border:none;border-bottom:2px solid transparent;color:#64748b;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;position:relative}.settings-tabs .tab-btn:hover{color:#8b5cf6;background:#f8fafc}.settings-tabs .tab-btn.active{color:#8b5cf6;border-bottom-color:#8b5cf6}.settings-tabs .tab-btn i{font-size:1rem}.settings-tabs .tab-btn .badge{padding:.125rem .5rem;background:#8b5cf6;color:#fff;border-radius:10px;font-size:.7rem;font-weight:600}.settings-content{flex:1;overflow-y:auto;padding:2rem}.settings-section h3{margin:0 0 1.5rem;font-size:1rem;font-weight:600;color:#1e293b}.settings-section .section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.settings-section .section-header h3{margin:0}.settings-section .section-header .add-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#8b5cf6;color:#fff;border:none;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.settings-section .section-header .add-btn:hover{background:#7c3aed;transform:translateY(-1px);box-shadow:0 4px 12px #8b5cf64d}.settings-section .section-header .add-btn i{font-size:.875rem}.form-group{margin-bottom:1.25rem}.form-group label{display:block;font-size:.875rem;font-weight:600;color:#475569;margin-bottom:.5rem}.form-group small{display:block;font-size:.75rem;color:#94a3b8;margin-top:.375rem}.form-group.checkbox-group{margin-bottom:0}.form-group.checkbox-group label{display:flex;align-items:center;gap:.5rem;cursor:pointer;margin-bottom:0}.form-group.checkbox-group label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.form-group.checkbox-group label span{font-size:.875rem;font-weight:500}.form-group.flex-1{flex:1}.form-row{display:flex;gap:1rem;align-items:flex-start}.form-input,.form-select,.form-textarea{width:100%;padding:.625rem;border:1px solid #e2e8f0;border-radius:6px;font-size:.875rem;color:#1e293b;transition:all .2s}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a}.form-input::placeholder,.form-select::placeholder,.form-textarea::placeholder{color:#cbd5e1}.form-textarea{resize:vertical;font-family:inherit}.items-list{display:flex;flex-direction:column;gap:1rem}.item-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;transition:all .2s}.item-card:hover{border-color:#cbd5e1;box-shadow:0 2px 8px #0000000d}.item-card .item-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:#f1f5f9;border-bottom:1px solid #e2e8f0}.item-card .item-header .item-number{font-size:.75rem;font-weight:700;color:#8b5cf6;padding:.25rem .5rem;background:#fff;border-radius:4px}.item-card .item-header .remove-btn{padding:.375rem .625rem;background:transparent;border:none;color:#ef4444;cursor:pointer;border-radius:4px;transition:all .2s}.item-card .item-header .remove-btn:hover{background:#fee2e2}.item-card .item-header .remove-btn i{font-size:.875rem}.item-card .item-body{padding:1rem}.advanced-group{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid #e2e8f0}.advanced-group:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.advanced-group h4{margin:0 0 1rem;font-size:.875rem;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.5px}.outcomes-preview{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.outcomes-preview .outcome-chip{display:inline-flex;align-items:center;padding:.375rem .75rem;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:6px;font-size:.75rem;font-weight:600;color:#475569}.export-info{margin-top:1rem;padding:1rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px}.export-info .info-row{display:flex;align-items:center;gap:.75rem;padding:.5rem 0;border-bottom:1px solid #e2e8f0}.export-info .info-row:last-child{border-bottom:none;padding-bottom:0}.export-info .info-row .label{font-size:.75rem;font-weight:600;color:#64748b;min-width:120px}.export-info .info-row code{flex:1;padding:.25rem .5rem;background:#fff;border:1px solid #e2e8f0;border-radius:4px;font-size:.75rem;color:#1e293b;font-family:JetBrains Mono,monospace}.settings-modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:1rem;padding:1.5rem 2rem;border-top:1px solid #e2e8f0;background:#f8fafc}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;text-align:center;color:#94a3b8}.empty-state i{font-size:3rem;margin-bottom:1rem}.empty-state p{margin:0;font-size:.875rem}.final-result{margin-top:1.5rem;padding-top:1.5rem;border-top:2px solid #e2e8f0}.final-result .result-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem;background:#f8fafc;border-radius:8px;margin-bottom:1rem;cursor:pointer;transition:all .2s}.final-result .result-header:hover{background:#f1f5f9;transform:translate(-2px)}.final-result .result-header h4{display:flex;align-items:center;gap:.5rem;margin:0;font-size:.875rem;font-weight:600;color:#475569;text-transform:uppercase}.final-result .result-header h4 i{font-size:.875rem;transition:transform .2s}.final-result .result-header .toggle-hint{font-size:.75rem;color:#94a3b8}.final-result .result-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:1rem}.final-result .result-card .result-row{display:flex;align-items:center;gap:.75rem;padding:.5rem 0}.final-result .result-card .result-row:not(:last-child){border-bottom:1px solid #e2e8f0}.final-result .result-card .result-row strong{font-size:.875rem;color:#475569;min-width:100px}.final-result .result-card .result-row .badge{padding:.25rem .75rem;border-radius:12px;font-size:.75rem;font-weight:600}.final-result .result-card .result-row .badge.badge-running{background:#dbeafe;color:#1e40af}.final-result .result-card .result-row .badge.badge-finished{background:#d1fae5;color:#065f46}.final-result .result-card .result-row .badge.badge-cancelled{background:#fed7aa;color:#92400e}.final-result .result-card .result-row .badge.badge-faulted{background:#fee2e2;color:#991b1b}.final-result .result-card .result-row pre{margin:.5rem 0 0;padding:.75rem;background:#0f172a;color:#e2e8f0;border-radius:6px;font-family:JetBrains Mono,monospace;font-size:.75rem;line-height:1.6;overflow-x:auto;width:100%}.activities-list::-webkit-scrollbar,.result-body::-webkit-scrollbar{width:8px}.activities-list::-webkit-scrollbar-track,.result-body::-webkit-scrollbar-track{background:#f1f5f9}.activities-list::-webkit-scrollbar-thumb,.result-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.activities-list::-webkit-scrollbar-thumb:hover,.result-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}.activity-card{cursor:grab}.activity-card:active{cursor:grabbing}.activity-card[draggable=true]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.visual-node[draggable=true]{cursor:move;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.visual-node:active{cursor:grabbing}.canvas-area[data-drag-over=true]{background-color:#8b5cf60d}.connector:hover{transform:scale(1.3);box-shadow:0 0 0 3px #8b5cf64d}.connector-out.active{animation:pulse 1s infinite}@keyframes pulse{0%,to{box-shadow:0 0 0 3px #ef44444d}50%{box-shadow:0 0 0 6px #ef44441a}}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:2000px}}.execution-dialog-overlay{position:fixed;inset:0;background:#000000b3;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease}.execution-dialog{width:90vw;max-width:1200px;height:90vh;background:#fff;border-radius:16px;box-shadow:0 25px 50px #0000004d;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s ease}.execution-dialog-header{padding:1.5rem 2rem;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.execution-dialog-header .header-content{display:flex;align-items:center;gap:1rem;flex:1}.execution-dialog-header .header-content>i{font-size:2.5rem;opacity:.9}.execution-dialog-header .header-content .header-info h2{margin:0;font-size:1.75rem;font-weight:700}.execution-dialog-header .header-content .header-info p{margin:.25rem 0 0;opacity:.9;font-size:.95rem}.execution-dialog-header .close-btn{background:#fff3;border:none;width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;color:#fff;font-size:1.25rem}.execution-dialog-header .close-btn:hover:not(:disabled){background:#ffffff4d;transform:scale(1.05)}.execution-dialog-header .close-btn:disabled{opacity:.5;cursor:not-allowed}.execution-dialog-body{flex:1;overflow-y:auto;padding:2rem;background:#f8fafc}.execution-dialog-footer{padding:1rem 2rem;background:#fff;border-top:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.execution-dialog-footer .footer-info{display:flex;gap:1.5rem}.execution-dialog-footer .footer-info .time-info{display:flex;align-items:center;gap:.5rem;color:#64748b;font-size:.875rem}.execution-dialog-footer .footer-info .time-info i{color:#8b5cf6}.execution-dialog-footer .footer-actions{display:flex;gap:.75rem}.workflow-info-panel{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 4px 6px #0000000d}.workflow-info-panel .info-section{margin-bottom:2rem}.workflow-info-panel .info-section h3{display:flex;align-items:center;gap:.5rem;margin:0 0 1rem;color:#1e293b;font-size:1.25rem}.workflow-info-panel .info-section h3 i{color:#8b5cf6}.workflow-info-panel .info-section .description{color:#475569;line-height:1.7;margin:0}.workflow-info-panel .info-section .features-list{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}.workflow-info-panel .info-section .features-list li{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:#f8fafc;border-radius:8px;color:#334155}.workflow-info-panel .info-section .features-list li i{color:#10b981;font-size:1.125rem}.workflow-info-panel .start-section{text-align:center;padding:2rem;background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-radius:12px;border:2px dashed #10b981}.workflow-info-panel .start-section .start-illustration{margin-bottom:1rem}.workflow-info-panel .start-section .start-illustration i{font-size:4rem;color:#10b981;animation:float 3s ease-in-out infinite}.workflow-info-panel .start-section h3{margin:0 0 .5rem;color:#1e293b;font-size:1.5rem}.workflow-info-panel .start-section p{margin:0 0 1.5rem;color:#64748b}.state-machine-ui .issue-tracker{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 2px #0000000d}.state-machine-ui .issue-tracker .issue-header-main{padding:1.5rem 2rem 1rem;border-bottom:1px solid #e2e8f0}.state-machine-ui .issue-tracker .issue-header-main .issue-breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#64748b;margin-bottom:.75rem}.state-machine-ui .issue-tracker .issue-header-main .issue-breadcrumb .project-name{color:#3b82f6;font-weight:600}.state-machine-ui .issue-tracker .issue-header-main .issue-breadcrumb .separator{color:#94a3b8}.state-machine-ui .issue-tracker .issue-header-main .issue-breadcrumb .issue-key{color:#64748b}.state-machine-ui .issue-tracker .issue-header-main .issue-type-title{display:flex;align-items:center;gap:.75rem}.state-machine-ui .issue-tracker .issue-header-main .issue-type-title .type-badge{padding:.375rem .75rem;border-radius:4px;font-size:.8125rem;font-weight:600;display:flex;align-items:center;gap:.375rem;background:#eff6ff;color:#3b82f6}.state-machine-ui .issue-tracker .issue-header-main .issue-type-title .type-badge i{font-size:1rem}.state-machine-ui .issue-tracker .issue-header-main .issue-type-title .issue-main-title{margin:0;font-size:1.5rem;font-weight:600;color:#1e293b}.state-machine-ui .issue-tracker .issue-action-bar{padding:.75rem 2rem;background:#f8fafc;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left{display:flex;gap:.5rem}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn{padding:.5rem 1rem;border:1px solid #cbd5e1;border-radius:4px;background:#fff;font-weight:500;font-size:.875rem;cursor:pointer;transition:all .2s;color:#334155}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn:hover:not(:disabled){background:#f1f5f9;border-color:#94a3b8}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn:disabled{opacity:.5;cursor:not-allowed}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn.btn-primary{background:#3b82f6;color:#fff;border-color:#3b82f6}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn.btn-primary:hover:not(:disabled){background:#2563eb}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn.btn-success{background:#10b981;color:#fff;border-color:#10b981}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn.btn-success:hover:not(:disabled){background:#059669}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn.btn-warning{background:#f59e0b;color:#fff;border-color:#f59e0b}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-left .status-transition-btn.btn-warning:hover:not(:disabled){background:#d97706}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-right .more-actions-btn{padding:.5rem 1rem;border:1px solid #cbd5e1;border-radius:4px;background:#fff;font-weight:500;font-size:.875rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;color:#334155;transition:all .2s}.state-machine-ui .issue-tracker .issue-action-bar .action-bar-right .more-actions-btn:hover{background:#f1f5f9}.state-machine-ui .issue-tracker .issue-main-content{display:grid;grid-template-columns:320px 1fr;gap:2rem;padding:2rem}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section{margin-bottom:2rem}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section h3{margin:0 0 1rem;font-size:1rem;font-weight:600;color:#1e293b}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row{display:flex;padding:.625rem 0;border-bottom:1px solid #f1f5f9}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row:last-child{border-bottom:none}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row label{min-width:100px;font-size:.8125rem;color:#64748b;font-weight:500}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row .detail-value{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#1e293b}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row .detail-value i{font-size:1rem}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row .detail-value .status-badge{padding:.25rem .625rem;border-radius:4px;color:#fff;font-weight:600;font-size:.75rem;text-transform:uppercase}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row .detail-value .view-workflow-link{color:#3b82f6;font-size:.8125rem;text-decoration:none;margin-left:.5rem}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row .detail-value .view-workflow-link:hover{text-decoration:underline}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .details-section .detail-row .detail-value .user-avatar{width:24px;height:24px;border-radius:50%;background:#8b5cf6;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.75rem}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz{background:#f8fafc;border-radius:8px;padding:1.5rem;border:1px solid #e2e8f0}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz h3{margin:0 0 1rem;font-size:.875rem;font-weight:600;color:#1e293b}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-state{display:flex;flex-direction:column;align-items:center;gap:.375rem;opacity:.4;transition:opacity .2s}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-state.active,.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-state.completed{opacity:1}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-state .state-circle{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.875rem;box-shadow:0 2px 4px #0000001a}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-state .state-name{font-size:.6875rem;color:#64748b;font-weight:500}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-state.active .state-name{color:#1e293b;font-weight:600}.state-machine-ui .issue-tracker .issue-main-content .issue-details-panel .state-machine-viz .states-flow .flow-arrow{color:#cbd5e1;font-size:.75rem;margin:0 .25rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .description-section,.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section{margin-bottom:2rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .description-section h3,.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section h3{margin:0 0 1rem;font-size:1rem;font-weight:600;color:#1e293b}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .description-section .description-content,.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .description-content{padding:1rem;background:#f8fafc;border-radius:6px;border:1px solid #e2e8f0}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .description-section .description-content p,.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .description-content p{margin:0;color:#475569;line-height:1.7;font-size:.875rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline{display:flex;flex-direction:column;gap:1rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item{display:flex;gap:.75rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-avatar{width:32px;height:32px;border-radius:50%;background:#8b5cf6;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.875rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-content{flex:1;padding-bottom:1rem;border-bottom:1px solid #f1f5f9}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-content .activity-header{font-size:.875rem;color:#334155;line-height:1.6;margin-bottom:.375rem}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-content .activity-header strong{color:#1e293b;font-weight:600}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-content .activity-header .activity-action{color:#64748b}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-content .activity-meta{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:#94a3b8}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item .activity-content .activity-meta .activity-label{color:#8b5cf6;font-weight:500}.state-machine-ui .issue-tracker .issue-main-content .issue-description-panel .activity-section .activity-timeline .activity-item:last-child .activity-content{border-bottom:none;padding-bottom:0}.registration-ui{display:flex;justify-content:center;align-items:center;min-height:400px}.registration-ui .registration-card{background:#fff;border-radius:12px;padding:3rem;box-shadow:0 4px 6px #0000000d;text-align:center;max-width:500px}.registration-ui .registration-card .registration-icon{margin-bottom:1.5rem}.registration-ui .registration-card .registration-icon i{font-size:5rem;color:#8b5cf6}.registration-ui .registration-card h3{margin:0 0 .75rem;color:#1e293b;font-size:1.75rem;font-weight:700}.registration-ui .registration-card .registration-desc{margin:0 0 2rem;color:#64748b;line-height:1.7}.registration-ui .registration-card .registration-progress{padding:2rem;background:#fef3c7;border-radius:8px}.registration-ui .registration-card .registration-progress .progress-spinner{margin-bottom:1rem}.registration-ui .registration-card .registration-progress .progress-spinner i{font-size:3rem;color:#f59e0b}.registration-ui .registration-card .registration-progress p{margin:0;color:#92400e;font-weight:500}.registration-ui .registration-card .registration-success{padding:2rem;background:#f0fdf4;border-radius:8px}.registration-ui .registration-card .registration-success i{font-size:4rem;color:#10b981;margin-bottom:1rem}.registration-ui .registration-card .registration-success h4{margin:0 0 .5rem;color:#064e3b;font-size:1.5rem;font-weight:700}.registration-ui .registration-card .registration-success p{margin:0;color:#065f46}.default-execution-view{display:flex;justify-content:center;align-items:center;min-height:400px}.default-execution-view .execution-status{text-align:center;padding:3rem;background:#fff;border-radius:12px;box-shadow:0 4px 6px #0000000d;min-width:400px}.default-execution-view .execution-status i{font-size:5rem;margin-bottom:1.5rem}.default-execution-view .execution-status h3{margin:0 0 .75rem;font-size:1.75rem;font-weight:700}.default-execution-view .execution-status p{margin:0;color:#64748b;line-height:1.7}.default-execution-view .execution-status .status-running i{color:#f59e0b}.default-execution-view .execution-status .status-finished i{color:#10b981}.default-execution-view .execution-status .status-error i{color:#ef4444}.execution-logs-panel{margin-top:2rem;background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 4px 6px #0000000d}.execution-logs-panel h3{display:flex;align-items:center;gap:.5rem;margin:0 0 1rem;color:#1e293b;font-size:1.125rem}.execution-logs-panel h3 i{color:#8b5cf6}.execution-logs-panel .logs-container-compact{max-height:300px;overflow-y:auto;background:#f8fafc;border-radius:8px;padding:.75rem}.execution-logs-panel .logs-container-compact .log-item-compact{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-radius:6px;margin-bottom:.5rem;font-size:.875rem}.execution-logs-panel .logs-container-compact .log-item-compact:last-child{margin-bottom:0}.execution-logs-panel .logs-container-compact .log-item-compact .log-time{font-family:Courier New,monospace;color:#64748b;font-size:.8125rem;min-width:70px}.execution-logs-panel .logs-container-compact .log-item-compact .log-icon{display:flex;align-items:center;justify-content:center;width:20px}.execution-logs-panel .logs-container-compact .log-item-compact .log-icon i{font-size:1rem}.execution-logs-panel .logs-container-compact .log-item-compact .log-message{flex:1;color:#334155}.execution-logs-panel .logs-container-compact .log-item-compact.log-info{background:#eff6ff}.execution-logs-panel .logs-container-compact .log-item-compact.log-info .log-icon i{color:#3b82f6}.execution-logs-panel .logs-container-compact .log-item-compact.log-success{background:#f0fdf4}.execution-logs-panel .logs-container-compact .log-item-compact.log-success .log-icon i{color:#10b981}.execution-logs-panel .logs-container-compact .log-item-compact.log-warning{background:#fffbeb}.execution-logs-panel .logs-container-compact .log-item-compact.log-warning .log-icon i{color:#f59e0b}.execution-logs-panel .logs-container-compact .log-item-compact.log-error{background:#fef2f2}.execution-logs-panel .logs-container-compact .log-item-compact.log-error .log-icon i{color:#ef4444}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}\n"] }]
+        }] });
+
+var workflowStudio_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    WorkflowStudioComponent: WorkflowStudioComponent
+});
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXCCategoryProvider, AXMMenuProvider, AXMSignPluginModule, AXMSignPopupAction, AXMSignWorkflow, AXMWorkflowActivitiesDefinitionProvider, AXMWorkflowManagementModule, AXMWorkflowManagementModuleEntityProvider, AXMWorkflowManagementWorkflowDefinitionEntityModule, AXMWorkflowManagementWorkflowDefinitionEntityService, AXMWorkflowManagementWorkflowDefinitionEntityServiceImpl, AXMWorkflowManagementWorkflowInstanceEntityModule, AXMWorkflowManagementWorkflowInstanceEntityService, AXMWorkflowManagementWorkflowInstanceEntityServiceImpl, CheckPermissionActivity, ExecuteCommandActivity, ExecuteQueryActivity, ExecuteWorkflowCommand, RootConfig, ShowConfirmPopupActivity, ShowLayoutPopupActivity, signPlugin, factory$1 as workflowDefinitionEntityFactory, factory as workflowInstanceEntityFactory };
+export { AXCCategoryProvider, AXMActivityCategoriesTreeComponent, AXMMenuProvider, AXMSignPluginModule, AXMSignPopupAction, AXMSignWorkflow, AXMWorkflowActivitiesDefinitionProvider, AXMWorkflowManagementModule, AXMWorkflowManagementModuleEntityProvider, AXMWorkflowManagementWorkflowDefinitionEntityModule, AXMWorkflowManagementWorkflowDefinitionEntityService, AXMWorkflowManagementWorkflowDefinitionEntityServiceImpl, AXMWorkflowManagementWorkflowInstanceEntityModule, AXMWorkflowManagementWorkflowInstanceEntityService, AXMWorkflowManagementWorkflowInstanceEntityServiceImpl, CheckPermissionActivity, ExecuteCommandActivity, ExecuteQueryActivity, ExecuteWorkflowCommand, RootConfig, ShowConfirmPopupActivity, ShowLayoutPopupActivity, WorkflowStudioComponent, signPlugin, factory$1 as workflowDefinitionEntityFactory, factory as workflowInstanceEntityFactory };
 //# sourceMappingURL=acorex-modules-workflow-management.mjs.map