@acorex/modules 21.0.0-next.40 → 21.0.0-next.42

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

@@ -1,49 +1,26 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, NgModule, InjectionToken, Inject, makeEnvironmentProviders, Injector, runInInjectionContext, output, ViewEncapsulation, ChangeDetectionStrategy, Component, DestroyRef, signal, computed, effect, viewChild } from '@angular/core';
+import { Injectable, inject, NgModule, InjectionToken, Inject, makeEnvironmentProviders, Injector, runInInjectionContext } from '@angular/core';
 import { AXPCommonMenuKeys, AXPWidgetsList } from '@acorex/modules/common';
-import { AXPSessionService, AXPAuthGuard, AXP_PERMISSION_DEFINITION_PROVIDER } from '@acorex/platform/auth';
-import { AXPEntityService, AXPEntityFormBuilderService, AXPEntityDefinitionRegistryService, entityDetailsCrudActions, AXP_ENTITY_ACTION_PLUGIN, AXP_ENTITY_CONFIG_TOKEN, AXP_ENTITY_DEFINITION_LOADER } from '@acorex/platform/layout/entity';
+import { AXPSessionService, AXP_PERMISSION_DEFINITION_PROVIDER } from '@acorex/platform/auth';
+import { AXPEntityService, AXPEntityFormBuilderService, AXPEntityDefinitionRegistryService, entityDetailsCrudActions, AXP_ENTITY_ACTION_PLUGIN, AXP_ENTITY_DEFINITION_LOADER } from '@acorex/platform/layout/entity';
 import { firstValueFrom } from 'rxjs';
 import { AXMCalendarManagementModule } from '@acorex/modules/calendar-management';
 import { AXPEntityCommandScope, AXPStatusProvider, AXPSystemStatusType, systemStatusToDefinition, AXPSystemStatuses, AXP_STATUS_PROVIDERS, AXP_MENU_PROVIDER } from '@acorex/platform/common';
 import { AXPSystemActionType, AXP_EXPRESSION_EVALUATOR_SCOPE_PROVIDER, AXP_MODULE_MANIFEST_PROVIDER, provideLazyProvider } from '@acorex/platform/core';
-import { AXP_PAGE_COMPONENT_PROVIDER, AXPPropertyViewerComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutToolbarComponent, AXPThemeLayoutStartSideComponent } from '@acorex/platform/layout/components';
+import { AXP_PAGE_COMPONENT_PROVIDER } from '@acorex/platform/layout/components';
 import { AXPDomainModule } from '@acorex/platform/domain';
-import { AXPWidgetGroupEnum, AXP_WIDGETS_EDITOR_CATEGORY, AXPWidgetSerializationHelper, AXPWidgetCoreModule, AXP_WIDGET_DEFINITION_PROVIDER, mapAXPPropertyToWidgetProperty } from '@acorex/platform/layout/widget-core';
+import { AXPWidgetGroupEnum, AXP_WIDGETS_EDITOR_CATEGORY, AXPWidgetSerializationHelper, AXPWidgetCoreModule, AXP_WIDGET_DEFINITION_PROVIDER } from '@acorex/platform/layout/widget-core';
 import { AXPBarChartWidget, AXPHeatmapChartWidget, AXPDonutChartWidget, AXPLineChartWidget, AXPGaugeChartWidget, AXPFunnelChartWidget, AXPKpiDetailsWidget, AXPKpiProgressWidget, AXPKpiSegmentedWidget, AXPKpiStatCardWidget } from '@acorex/modules/dashboard-management';
 import { AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY } from '@acorex/platform/layout/widgets';
 import { provideCommandSetups } from '@acorex/platform/runtime';
-import { AXPWorkflowManager, AXPWorkflowDefinitionService, AXP_WORKFLOW_PROVIDER, AXP_ACTIVITY_CATEGORY_PROVIDER, AXP_ACTIVITY_PROVIDER, AXP_WORKFLOW_CATEGORY_PROVIDER, AXPActivityDefinitionService } from '@acorex/platform/workflow';
-import { ROUTES, ActivatedRoute, Router } from '@angular/router';
+import { AXPWorkflowManager, AXPWorkflowDefinitionService, AXP_WORKFLOW_PROVIDER, AXP_ACTIVITY_CATEGORY_PROVIDER, AXP_ACTIVITY_PROVIDER, AXP_WORKFLOW_CATEGORY_PROVIDER } from '@acorex/platform/workflow';
 import { AXDialogService } from '@acorex/components/dialog';
-import * as i5$1 from '@acorex/core/translation';
-import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
+import { AXTranslationService } from '@acorex/core/translation';
 import { AXPopupService } from '@acorex/components/popup';
 import { AXPDialogRendererComponent, AXPLayoutBuilderService } from '@acorex/platform/layout/builder';
 import { cloneDeep } from 'lodash-es';
 import { AXToastService } from '@acorex/components/toast';
 import { AXPWorkflowTaskProvider, AXP_WORKFLOW_TASK_PROVIDER } from '@acorex/modules/task-management';
-import * as i2 from '@acorex/components/button';
-import { AXButtonModule } from '@acorex/components/button';
-import * as i2$1 from '@acorex/components/button-group';
-import { AXButtonGroupModule } from '@acorex/components/button-group';
-import * as i3 from '@acorex/components/decorators';
-import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i5 from '@acorex/components/search-box';
-import { AXSearchBoxModule } from '@acorex/components/search-box';
-import { AXSelectBoxModule } from '@acorex/components/select-box';
-import * as i6 from '@acorex/components/switch';
-import { AXSwitchModule } from '@acorex/components/switch';
-import { AXTabsModule } from '@acorex/components/tabs';
-import * as i4 from '@acorex/components/text-box';
-import { AXTextBoxModule } from '@acorex/components/text-box';
-import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
-import * as i7 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormsModule } from '@angular/forms';
-import * as i1 from '@acorex/components/tree-view-legacy';
-import { AXTreeViewLegacyModule } from '@acorex/components/tree-view-legacy';
 
 const config = {
     i18n: 'workflow-management',
@@ -179,9 +156,9 @@ class AXMWorkflowManagementModuleEntityProvider {
         if (moduleName === RootConfig.module.name) {
             switch (entityName) {
                 case RootConfig.entities.workflowDefinition.name:
-                    return (await import('./acorex-modules-workflow-management-workflow-definition.entity-DqPVpcSv.mjs')).factory();
+                    return (await import('./acorex-modules-workflow-management-workflow-definition.entity-CjQQpjdB.mjs')).factory();
                 case RootConfig.entities.workflowInstance.name:
-                    return (await import('./acorex-modules-workflow-management-workflow-instance.entity-D-KnWlsU.mjs')).factory();
+                    return (await import('./acorex-modules-workflow-management-workflow-instance.entity-B_V3uMSI.mjs')).factory();
                 case RootConfig.entities.activityDefinition.name:
                     return (await import('./acorex-modules-workflow-management-activity-definition.entity-B3DkgDQb.mjs')).factory();
                 case RootConfig.entities.automation.name:
@@ -206,7 +183,6 @@ const AXPWorkflowManagementMenuKeys = {
     Workflow: 'workflow-management:workflow',
     WorkflowDefinitions: 'workflow-management:workflow-definitions',
     WorkflowInstances: 'workflow-management:workflow-instances',
-    WorkflowStudio: 'workflow-management:workflow-studio',
     Activities: 'workflow-management:activities',
 };
 
@@ -221,7 +197,6 @@ class AXMMenuProvider {
             return;
         }
         const module = RootConfig.module;
-        const appName = this.sessionService.application?.name ?? module.name;
         const workflowsMenu = context.find(AXPCommonMenuKeys.Workflows);
         if (!workflowsMenu.exists) {
             context.find(AXPCommonMenuKeys.Administration).addItems([
@@ -256,16 +231,6 @@ class AXMMenuProvider {
                     features: [module.name],
                 },
             },
-            {
-                name: AXPWorkflowManagementMenuKeys.WorkflowStudio,
-                text: '@workflow-management:workflow-studio.menus.workflow-studio.title',
-                path: `/${appName}/workflow-management/studio`,
-                priority: 3,
-                icon: 'fa-light fa-wrench',
-                policy: {
-                    features: [module.name],
-                },
-            },
         ]);
     }
 }
@@ -1022,10 +987,10 @@ const AXMActivityCommandConfiguratorWidget = {
     ],
     components: {
         edit: {
-            component: () => import('./acorex-modules-workflow-management-activity-command-configurator-widget-edit.component-BYJpDQRs.mjs').then((c) => c.AXMActivityCommandConfiguratorWidgetEditComponent),
+            component: () => import('./acorex-modules-workflow-management-activity-command-configurator-widget-edit.component-Dj6LkQeZ.mjs').then((c) => c.AXMActivityCommandConfiguratorWidgetEditComponent),
         },
         designer: {
-            component: () => import('./acorex-modules-workflow-management-activity-command-configurator-widget-edit.component-BYJpDQRs.mjs').then((c) => c.AXMActivityCommandConfiguratorWidgetEditComponent),
+            component: () => import('./acorex-modules-workflow-management-activity-command-configurator-widget-edit.component-Dj6LkQeZ.mjs').then((c) => c.AXMActivityCommandConfiguratorWidgetEditComponent),
         },
         column: {
             component: () => import('./acorex-modules-workflow-management-activity-command-configurator-widget-column.component-CDo0QVFy.mjs').then((c) => c.AXMActivityCommandConfiguratorWidgetColumnComponent),
@@ -2594,9 +2559,7 @@ class AXPGenericWorkflowTaskProvider extends AXPWorkflowTaskProvider {
         if (payload.activityType === 'workflow-activity:cartable') {
             return assigned.length === 0 && candidates.length > 0;
         }
-        return (payload.activityType === 'workflow-activity:human-task' &&
-            assigned.length === 0 &&
-            candidates.length > 0);
+        return payload.activityType === 'workflow-activity:human-task' && assigned.length === 0 && candidates.length > 0;
     }
     normalizeUserIdList(value) {
         if (!value || value.length === 0)
@@ -2666,8 +2629,7 @@ class AXPGenericWorkflowTaskProvider extends AXPWorkflowTaskProvider {
                         // Get payload from entity (payload object or parse payloadJson)
                         let payload;
                         try {
-                            const raw = bookmark.payload ??
-                                (bookmark.payloadJson ? JSON.parse(bookmark.payloadJson) : null);
+                            const raw = bookmark.payload ?? (bookmark.payloadJson ? JSON.parse(bookmark.payloadJson) : null);
                             payload =
                                 typeof raw === 'object' && raw !== null
                                     ? raw
@@ -2723,11 +2685,13 @@ class AXPGenericWorkflowTaskProvider extends AXPWorkflowTaskProvider {
     mapBookmarkToTask(instance, bookmark, payload) {
         // Extract dates
         const dueDate = payload.dueDate
-            ? (typeof payload.dueDate === 'string' ? new Date(payload.dueDate) : payload.dueDate)
-            : (instance.createdAt ? new Date(instance.createdAt) : new Date());
-        const startDate = instance.createdAt
-            ? new Date(instance.createdAt)
-            : dueDate;
+            ? typeof payload.dueDate === 'string'
+                ? new Date(payload.dueDate)
+                : payload.dueDate
+            : instance.createdAt
+                ? new Date(instance.createdAt)
+                : new Date();
+        const startDate = instance.createdAt ? new Date(instance.createdAt) : dueDate;
         // If startDate and endDate are the same, set endDate to one day after startDate
         let endDate = dueDate;
         if (startDate.getTime() === dueDate.getTime()) {
@@ -2910,10 +2874,7 @@ class AXPGenericWorkflowTaskProvider extends AXPWorkflowTaskProvider {
         }
         // Extract actions from payload
         if (payload.actions) {
-            const allActions = [
-                ...(payload.actions.prefix || []),
-                ...(payload.actions.suffix || []),
-            ];
+            const allActions = [...(payload.actions.prefix || []), ...(payload.actions.suffix || [])];
             for (const action of allActions) {
                 const actionName = action.command?.name || action.name || 'unknown';
                 actions.push({
@@ -2993,7 +2954,7 @@ class AXPGenericWorkflowTaskProvider extends AXPWorkflowTaskProvider {
     //#endregion
     //#region ----   Component   ----
     getComponent() {
-        return () => import('./acorex-modules-workflow-management-workflow-task-popover.component-NpUx0sB5.mjs').then((m) => m.AXMWorkflowTaskPopoverComponent);
+        return () => import('./acorex-modules-workflow-management-workflow-task-popover.component-l37iXJIY.mjs').then((m) => m.AXMWorkflowTaskPopoverComponent);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPGenericWorkflowTaskProvider, deps: [{ token: AXP_GENERIC_WORKFLOW_TASK_PROVIDER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPGenericWorkflowTaskProvider }); }
@@ -3034,13 +2995,6 @@ function provideTaskWorkflow() {
                             providers.push(provider);
                         }
                     }
-                    if (providers.length === 0) {
-                        providers.push(runInInjectionContext(injector, () => new AXPGenericWorkflowTaskProvider({
-                            name: 'workflow-tasks-all',
-                            title: 'Workflow tasks',
-                            icon: 'fa-light fa-inbox',
-                        })));
-                    }
                     return providers;
                 })();
             },
@@ -3049,26 +3003,6 @@ function provideTaskWorkflow() {
     ]);
 }
 
-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: "21.2.9", ngImport: i0, type: AXMWorkflowManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AXMWorkflowManagementModule, imports: [AXMCalendarManagementModule,
@@ -3078,23 +3012,14 @@ class AXMWorkflowManagementModule {
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMWorkflowManagementModule, providers: [
             { provide: AXP_WIDGET_DEFINITION_PROVIDER, useClass: AXMWorkflowManagementWidgetsProvider, multi: true },
             { provide: AXP_WIDGET_DEFINITION_PROVIDER, useClass: AXMWorkflowDashboardWidgetsProvider, multi: true },
-            {
-                provide: ROUTES,
-                multi: true,
-                useFactory: routesFactory,
-            },
             provideCommandSetups([
                 {
                     key: 'WorkflowManagement.WorkflowDefinition:ExecuteWithInput',
-                    command: () => import('./acorex-modules-workflow-management-index-C9Qc07oK.mjs').then((c) => c.ExecuteWorkflowWithInputCommand),
+                    command: () => import('./acorex-modules-workflow-management-index-CHySddpP.mjs').then((c) => c.ExecuteWorkflowWithInputCommand),
                 },
                 {
                     key: 'WorkflowManagement.WorkflowDefinition:Execute',
-                    command: () => import('./acorex-modules-workflow-management-index-C9Qc07oK.mjs').then((c) => c.ExecuteWorkflowCommand),
-                },
-                {
-                    key: 'WorkflowManagement.WorkflowDefinition:EditInStudio',
-                    command: () => import('./acorex-modules-workflow-management-index-C9Qc07oK.mjs').then((c) => c.EditInStudioCommand),
+                    command: () => import('./acorex-modules-workflow-management-index-CHySddpP.mjs').then((c) => c.ExecuteWorkflowCommand),
                 },
                 {
                     key: 'WorkflowManagement.WorkflowDefinition:Activities:Save',
@@ -3140,8 +3065,8 @@ class AXMWorkflowManagementModule {
                 useClass: AXMWorkflowManagementModuleEntityProvider,
                 multi: true,
             },
-            provideLazyProvider(AXP_PAGE_COMPONENT_PROVIDER, () => import('./acorex-modules-workflow-management-index-Bx2uYraH.mjs').then((m) => m.AXMWorkflowInstanceActivityInstancesPageComponentProvider)),
-            provideLazyProvider(AXP_PAGE_COMPONENT_PROVIDER, () => import('./acorex-modules-workflow-management-index-D8fjNgQJ.mjs').then((m) => m.AXMWorkflowDefinitionActivitiesPageComponentProvider)),
+            provideLazyProvider(AXP_PAGE_COMPONENT_PROVIDER, () => import('./acorex-modules-workflow-management-index-Eh5DDK-V.mjs').then((m) => m.AXMWorkflowInstanceActivityInstancesPageComponentProvider)),
+            provideLazyProvider(AXP_PAGE_COMPONENT_PROVIDER, () => import('./acorex-modules-workflow-management-index-V4OesZTq.mjs').then((m) => m.AXMWorkflowDefinitionActivitiesPageComponentProvider)),
             // Automation condition builder: default automation.rules(refType, refId); modules override for their refTypes
             {
                 provide: AXP_EXPRESSION_EVALUATOR_SCOPE_PROVIDER,
@@ -3240,23 +3165,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     providers: [
                         { provide: AXP_WIDGET_DEFINITION_PROVIDER, useClass: AXMWorkflowManagementWidgetsProvider, multi: true },
                         { provide: AXP_WIDGET_DEFINITION_PROVIDER, useClass: AXMWorkflowDashboardWidgetsProvider, multi: true },
-                        {
-                            provide: ROUTES,
-                            multi: true,
-                            useFactory: routesFactory,
-                        },
                         provideCommandSetups([
                             {
                                 key: 'WorkflowManagement.WorkflowDefinition:ExecuteWithInput',
-                                command: () => import('./acorex-modules-workflow-management-index-C9Qc07oK.mjs').then((c) => c.ExecuteWorkflowWithInputCommand),
+                                command: () => import('./acorex-modules-workflow-management-index-CHySddpP.mjs').then((c) => c.ExecuteWorkflowWithInputCommand),
                             },
                             {
                                 key: 'WorkflowManagement.WorkflowDefinition:Execute',
-                                command: () => import('./acorex-modules-workflow-management-index-C9Qc07oK.mjs').then((c) => c.ExecuteWorkflowCommand),
-                            },
-                            {
-                                key: 'WorkflowManagement.WorkflowDefinition:EditInStudio',
-                                command: () => import('./acorex-modules-workflow-management-index-C9Qc07oK.mjs').then((c) => c.EditInStudioCommand),
+                                command: () => import('./acorex-modules-workflow-management-index-CHySddpP.mjs').then((c) => c.ExecuteWorkflowCommand),
                             },
                             {
                                 key: 'WorkflowManagement.WorkflowDefinition:Activities:Save',
@@ -3302,8 +3218,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useClass: AXMWorkflowManagementModuleEntityProvider,
                             multi: true,
                         },
-                        provideLazyProvider(AXP_PAGE_COMPONENT_PROVIDER, () => import('./acorex-modules-workflow-management-index-Bx2uYraH.mjs').then((m) => m.AXMWorkflowInstanceActivityInstancesPageComponentProvider)),
-                        provideLazyProvider(AXP_PAGE_COMPONENT_PROVIDER, () => import('./acorex-modules-workflow-management-index-D8fjNgQJ.mjs').then((m) => m.AXMWorkflowDefinitionActivitiesPageComponentProvider)),
+                        provideLazyProvider(AXP_PAGE_COMPONENT_PROVIDER, () => import('./acorex-modules-workflow-management-index-Eh5DDK-V.mjs').then((m) => m.AXMWorkflowInstanceActivityInstancesPageComponentProvider)),
+                        provideLazyProvider(AXP_PAGE_COMPONENT_PROVIDER, () => import('./acorex-modules-workflow-management-index-V4OesZTq.mjs').then((m) => m.AXMWorkflowDefinitionActivitiesPageComponentProvider)),
                         // Automation condition builder: default automation.rules(refType, refId); modules override for their refTypes
                         {
                             provide: AXP_EXPRESSION_EVALUATOR_SCOPE_PROVIDER,
@@ -3395,2284 +3311,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 // Entity exports - services and modules removed, handled by middleware
 // Exporting entity types for use in feature components
 
-//#region ----   Imports   ----
-//#endregion
-class AXMActivityCategoriesTreeComponent {
-    constructor() {
-        //#region ----   Services & Dependencies   ----
-        this.activityDefinitionService = inject(AXPActivityDefinitionService);
-        this.multiLanguageResolver = inject(AXTranslationService);
-        //#endregion
-        //#region ----   Output Events   ----
-        this.categoryClick = output();
-        this.activityClick = output();
-        /** Emitted when user starts dragging an activity (so parent can set draggedActivity for canvas drop). */
-        this.activityDragStart = output();
-        //#endregion
-        //#region ----   Lazy Tree Data (same pattern as report-categories-tree)   ----
-        this.provideLazyTreeView = async (selectedItemId) => {
-            if (selectedItemId !== undefined && selectedItemId !== null) {
-                const parentId = String(selectedItemId);
-                if (parentId.startsWith('activity_')) {
-                    return [];
-                }
-                const categories = await this.activityDefinitionService.getCategories(parentId);
-                const categoryItems = categories.map((item) => ({
-                    id: item.id,
-                    title: this.multiLanguageResolver.resolve(item.title) || item.id,
-                    hasChild: (item.childrenCount ?? 0) > 0 || (item.itemsCount ?? 0) > 0,
-                    item,
-                    type: 'category',
-                    expanded: false,
-                }));
-                const activities = await this.activityDefinitionService.getActivitiesByCategoryId(parentId);
-                const definitionItems = activities.map((item) => ({
-                    id: `activity_${item.type ?? item.name}`,
-                    title: this.multiLanguageResolver.resolve(item.title) || item.name || item.type || '',
-                    hasChild: false,
-                    item,
-                    type: 'definition',
-                    expanded: false,
-                }));
-                return [...categoryItems, ...definitionItems];
-            }
-            const categories = await this.activityDefinitionService.getCategories();
-            return categories.map((item) => ({
-                id: item.id,
-                title: this.multiLanguageResolver.resolve(item.title) || item.id,
-                hasChild: (item.childrenCount ?? 0) > 0 || (item.itemsCount ?? 0) > 0,
-                item,
-                type: 'category',
-                expanded: false,
-            }));
-        };
-    }
-    //#endregion
-    //#region ----   Event Handlers   ----
-    handleNodeClick(event) {
-        const node = event.data;
-        if (node.type === 'category' && node.item) {
-            this.categoryClick.emit(node.item);
-        }
-        else if (node.type === 'definition' && node.item) {
-            this.activityClick.emit(node.item);
-        }
-    }
-    onActivityDragStart(event, item) {
-        if (item.type !== 'definition' || !item.item)
-            return;
-        event.stopPropagation();
-        if (event.dataTransfer) {
-            event.dataTransfer.effectAllowed = 'copy';
-            event.dataTransfer.setData('text/plain', item.item.type);
-        }
-        this.activityDragStart.emit({ event, activity: item.item });
-    }
-    /**
-     * Normalize FontAwesome icon for display: prepend 'fa-light ' when missing style prefix.
-     */
-    getActivityIconClass(icon) {
-        if (!icon?.trim())
-            return 'fa-light fa-puzzle-piece';
-        const trimmed = icon.trim();
-        const hasStylePrefix = /^(fa-light|fas|far|fal|fa-solid|fa-regular|fa-brands|fa-duotone)(\s|$)/i.test(trimmed);
-        return hasStylePrefix ? trimmed : `fa-light ${trimmed}`;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMActivityCategoriesTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXMActivityCategoriesTreeComponent, isStandalone: true, selector: "axp-activity-categories-tree", outputs: { categoryClick: "categoryClick", activityClick: "activityClick", activityDragStart: "activityDragStart" }, host: { classAttribute: "axp-activity-categories-tree" }, ngImport: i0, template: "<ax-tree-view-legacy\n  [showCheckbox]=\"false\"\n  [itemTemplate]=\"itemTemplate\"\n  [textField]=\"'title'\"\n  [hasChildField]=\"'hasChild'\"\n  [valueField]=\"'id'\"\n  [expandedField]=\"'expanded'\"\n  [items]=\"provideLazyTreeView\"\n  (onNodeClick)=\"handleNodeClick($event)\"\n>\n</ax-tree-view-legacy>\n\n<ng-template #itemTemplate let-item>\n  @if (item.type === 'category') {\n    <span class=\"__tree-item __category\">\n      <i class=\"fas fa-folder ax-text-warning __icon\"></i>\n      <span class=\"__title\">{{ item.title }}</span>\n    </span>\n  } @else {\n    <span\n      class=\"__tree-item __activity\"\n      draggable=\"true\"\n      (dragstart)=\"onActivityDragStart($event, item)\"\n    >\n      <i class=\"__icon ax-text-primary\" [class]=\"getActivityIconClass(item.item?.icon)\"></i>\n      <span class=\"__title\">{{ item.title }}</span>\n    </span>\n  }\n</ng-template>\n", styles: [".axp-activity-categories-tree{height:100%;width:100%}.axp-activity-categories-tree .__tree-item{display:flex;align-items:center;gap:.5rem}.axp-activity-categories-tree .__tree-item .__icon{flex-shrink:0}.axp-activity-categories-tree .__tree-item .__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-activity-categories-tree .__activity{cursor:grab}.axp-activity-categories-tree .__activity:active{cursor:grabbing}\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTreeViewLegacyModule }, { kind: "component", type: i1.AXTreeViewLegacyComponent, selector: "ax-tree-view-legacy", inputs: ["items", "showCheckbox", "hasCheckboxField", "selectionMode", "selectionBehavior", "selectionScope", "focusNodeEnabled", "valueField", "textField", "visibleField", "disableField", "hasChildField", "selectedField", "expandedField", "tooltipField", "childrenField", "activeField", "indeterminateField", "parentField", "iconField", "toggleIcons", "look", "showEmptyNodeMassage", "itemTemplate", "emptyTemplate", "expandOn"], outputs: ["onSelectionChanged", "onItemSelectedChanged", "onNodeClick", "onCollapsedChanged", "onNodedbClick"] }, { kind: "ngmodule", type: AXTranslationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMActivityCategoriesTreeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'axp-activity-categories-tree', standalone: true, imports: [AXDecoratorModule, AXTreeViewLegacyModule, AXTranslationModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'axp-activity-categories-tree' }, template: "<ax-tree-view-legacy\n  [showCheckbox]=\"false\"\n  [itemTemplate]=\"itemTemplate\"\n  [textField]=\"'title'\"\n  [hasChildField]=\"'hasChild'\"\n  [valueField]=\"'id'\"\n  [expandedField]=\"'expanded'\"\n  [items]=\"provideLazyTreeView\"\n  (onNodeClick)=\"handleNodeClick($event)\"\n>\n</ax-tree-view-legacy>\n\n<ng-template #itemTemplate let-item>\n  @if (item.type === 'category') {\n    <span class=\"__tree-item __category\">\n      <i class=\"fas fa-folder ax-text-warning __icon\"></i>\n      <span class=\"__title\">{{ item.title }}</span>\n    </span>\n  } @else {\n    <span\n      class=\"__tree-item __activity\"\n      draggable=\"true\"\n      (dragstart)=\"onActivityDragStart($event, item)\"\n    >\n      <i class=\"__icon ax-text-primary\" [class]=\"getActivityIconClass(item.item?.icon)\"></i>\n      <span class=\"__title\">{{ item.title }}</span>\n    </span>\n  }\n</ng-template>\n", styles: [".axp-activity-categories-tree{height:100%;width:100%}.axp-activity-categories-tree .__tree-item{display:flex;align-items:center;gap:.5rem}.axp-activity-categories-tree .__tree-item .__icon{flex-shrink:0}.axp-activity-categories-tree .__tree-item .__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-activity-categories-tree .__activity{cursor:grab}.axp-activity-categories-tree .__activity:active{cursor:grabbing}\n"] }]
-        }], propDecorators: { categoryClick: [{ type: i0.Output, args: ["categoryClick"] }], activityClick: [{ type: i0.Output, args: ["activityClick"] }], activityDragStart: [{ type: i0.Output, args: ["activityDragStart"] }] } });
-
-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);
-        this.activatedRoute = inject(ActivatedRoute);
-        this.router = inject(Router);
-        this.workflowDefinitionService = inject(AXPWorkflowDefinitionService);
-        this.layoutBuilder = inject(AXPLayoutBuilderService);
-        this.destroyRef = inject(DestroyRef);
-        //#endregion
-        //#region ----   State   ----
-        this.activeTab = signal('json', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
-        this.selectedCategory = signal(null, ...(ngDevMode ? [{ debugName: "selectedCategory" }] : /* istanbul ignore next */ []));
-        this.selectedActivity = signal(null, ...(ngDevMode ? [{ debugName: "selectedActivity" }] : /* istanbul ignore next */ []));
-        this.workflowJson = signal(this.getEmptyWorkflow(), ...(ngDevMode ? [{ debugName: "workflowJson" }] : /* istanbul ignore next */ []));
-        this.visualNodes = signal([], ...(ngDevMode ? [{ debugName: "visualNodes" }] : /* istanbul ignore next */ []));
-        this.selectedNode = signal(null, ...(ngDevMode ? [{ debugName: "selectedNode" }] : /* istanbul ignore next */ []));
-        this.isExecuting = signal(false, ...(ngDevMode ? [{ debugName: "isExecuting" }] : /* istanbul ignore next */ []));
-        this.executionLogs = signal([], ...(ngDevMode ? [{ debugName: "executionLogs" }] : /* istanbul ignore next */ []));
-        // Execution Dialog State
-        this.showExecutionDialog = signal(false, ...(ngDevMode ? [{ debugName: "showExecutionDialog" }] : /* istanbul ignore next */ []));
-        this.workflowInstanceState = signal(null, ...(ngDevMode ? [{ debugName: "workflowInstanceState" }] : /* istanbul ignore next */ []));
-        // UI State
-        this.showPropertiesPanel = signal(true, ...(ngDevMode ? [{ debugName: "showPropertiesPanel" }] : /* istanbul ignore next */ []));
-        /** When true, workflow changes can trigger auto-save (e.g. apply to JSON); actual persist is up to the host. */
-        this.autoSaveEnabled = signal(false, ...(ngDevMode ? [{ debugName: "autoSaveEnabled" }] : /* istanbul ignore next */ []));
-        /** Activity definition for the selected node (loaded when selection changes). */
-        this.activityDefinitionForSelected = signal(null, ...(ngDevMode ? [{ debugName: "activityDefinitionForSelected" }] : /* istanbul ignore next */ []));
-        /** Cache key for property viewer tabs so we keep stable refs and avoid re-render/focus loss on value change. */
-        this.lastPropertyViewerStructKey = null;
-        /** Cached tabs; updated only when selected node identity or def structure changes. */
-        this.cachedPropertyViewerTabs = signal([], ...(ngDevMode ? [{ debugName: "cachedPropertyViewerTabs" }] : /* istanbul ignore next */ []));
-        /** Tabs for the property viewer (platform widget-based rendering). Stable refs to prevent focus loss. */
-        this.propertyViewerTabs = computed(() => this.cachedPropertyViewerTabs(), ...(ngDevMode ? [{ debugName: "propertyViewerTabs" }] : /* istanbul ignore next */ []));
-        this.updatePropertyViewerTabsEffect = effect(() => {
-            const def = this.activityDefinitionForSelected();
-            const node = this.selectedNode();
-            if (!node) {
-                this.lastPropertyViewerStructKey = null;
-                this.cachedPropertyViewerTabs.set([]);
-                return;
-            }
-            const structKey = `${node.id}:${node.type}:${def?.inputs?.length ?? 0}`;
-            if (this.lastPropertyViewerStructKey === structKey)
-                return;
-            this.lastPropertyViewerStructKey = structKey;
-            this.cachedPropertyViewerTabs.set(this.buildPropertyViewerTabs(def, node));
-        }, ...(ngDevMode ? [{ debugName: "updatePropertyViewerTabsEffect" }] : /* istanbul ignore next */ []));
-        this.propertyViewerRef = viewChild(AXPPropertyViewerComponent, ...(ngDevMode ? [{ debugName: "propertyViewerRef" }] : /* istanbul ignore next */ []));
-        this.loadActivityDefinitionForSelectedEffect = effect(() => {
-            const node = this.selectedNode();
-            if (!node) {
-                this.activityDefinitionForSelected.set(null);
-                return;
-            }
-            this.activityDefinitionService.getActivityByName(node.type).then((def) => {
-                this.activityDefinitionForSelected.set(def ?? null);
-            });
-        }, ...(ngDevMode ? [{ debugName: "loadActivityDefinitionForSelectedEffect" }] : /* istanbul ignore next */ []));
-        this.initPropertyViewerContextEffect = effect(() => {
-            const viewer = this.propertyViewerRef();
-            const node = this.selectedNode();
-            const tabs = this.propertyViewerTabs();
-            if (viewer && node && tabs.length > 0) {
-                viewer.initializeContext({ ...node, properties: { ...node.properties } });
-            }
-        }, ...(ngDevMode ? [{ debugName: "initPropertyViewerContextEffect" }] : /* istanbul ignore next */ []));
-        // 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" }] : /* istanbul ignore next */ []));
-        /** Data source for variable type select (settings modal). */
-        this.variableTypeOptions = [
-            { value: 'string', label: 'String' },
-            { value: 'number', label: 'Number' },
-            { value: 'boolean', label: 'Boolean' },
-            { value: 'object', label: 'Object' },
-            { value: 'array', label: 'Array' },
-        ];
-        // 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;
-        /** Canvas area element for zoom/center/auto-layout. */
-        this.canvasAreaRef = viewChild('canvasAreaRef', ...(ngDevMode ? [{ debugName: "canvasAreaRef" }] : /* istanbul ignore next */ []));
-        /**
-         * دسترسی به 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();
-        // Load workflow from query parameter if provided
-        await this.loadWorkflowFromRoute();
-    }
-    /**
-     * Load workflow from route query parameter
-     */
-    async loadWorkflowFromRoute() {
-        // Read from snapshot (for initial load)
-        const workflowName = this.activatedRoute.snapshot.queryParams['workflow'];
-        if (!workflowName) {
-            return;
-        }
-        await this.loadWorkflowByName(workflowName);
-        // Subscribe to query param changes (like drive component)
-        this.activatedRoute.queryParams.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(async (params) => {
-            const newWorkflowName = params['workflow'];
-            if (newWorkflowName && newWorkflowName !== workflowName) {
-                await this.loadWorkflowByName(newWorkflowName);
-            }
-        });
-    }
-    /**
-     * Update a single workflow setting field (for signal-based form binding).
-     */
-    updateWorkflowSetting(key, value) {
-        this.workflowSettings.update((s) => ({ ...s, [key]: value }));
-    }
-    /**
-     * Handle JSON editor input (textarea value -> workflowJson signal).
-     */
-    onWorkflowJsonInput(ev) {
-        const value = ev.target.value;
-        this.workflowJson.set(value);
-    }
-    //#region ---- Workflow definition display (multi-language) ----
-    /**
-     * Resolves workflow definition title for studio UI strings (settings, graph root label).
-     */
-    resolveWorkflowDefinitionTitle(workflowDef) {
-        const raw = workflowDef.title;
-        if (raw == null || raw === '') {
-            return workflowDef.name || 'Root';
-        }
-        return typeof raw === 'string'
-            ? raw
-            : (this.translationService.resolve(raw) ?? workflowDef.name ?? 'Root');
-    }
-    /**
-     * Resolves workflow definition description for studio settings (current locale string).
-     */
-    resolveWorkflowDefinitionDescription(workflowDef) {
-        const raw = workflowDef.description;
-        if (raw == null || raw === '') {
-            return '';
-        }
-        return typeof raw === 'string' ? raw : (this.translationService.resolve(raw) ?? '');
-    }
-    //#endregion
-    /**
-     * Load workflow by name
-     */
-    async loadWorkflowByName(workflowName) {
-        try {
-            this.addLog('info', `Loading workflow: ${workflowName}...`);
-            // Try to get workflow from entity service first
-            const workflowEntityService = this.entityService
-                .withEntity(RootConfig.module.name, RootConfig.entities.workflowDefinition.name)
-                .data();
-            const result = await workflowEntityService.query({
-                skip: 0,
-                take: 1,
-                filter: {
-                    logic: 'and',
-                    filters: [
-                        {
-                            field: 'name',
-                            operator: { type: 'equal' },
-                            value: workflowName,
-                        },
-                    ],
-                },
-            });
-            let workflowDef = null;
-            if (result.items && result.items.length > 0) {
-                workflowDef = result.items[0];
-            }
-            else {
-                // Try workflow definition service
-                workflowDef = await this.workflowDefinitionService.getWorkflowByName(workflowName);
-            }
-            if (!workflowDef) {
-                this.addLog('warning', `Workflow '${workflowName}' not found`);
-                return;
-            }
-            // Convert workflow definition to studio JSON format
-            const studioJson = this.convertWorkflowDefinitionToStudioJson(workflowDef);
-            this.workflowJson.set(JSON.stringify(studioJson, null, 2));
-            // Update workflow settings
-            this.workflowSettings.set({
-                definitionId: workflowDef.id || workflowDef.definitionId || workflowDef.name,
-                name: workflowDef.name || '',
-                description: this.resolveWorkflowDefinitionDescription(workflowDef),
-                inputs: (workflowDef.inputs || []).map((input) => this.mapDefinitionInputToWorkflowInput(input)),
-                outputs: (workflowDef.outputs || []).map((output) => this.mapDefinitionOutputToWorkflowOutput(output)),
-                variables: workflowDef.variables || [],
-                outcomes: workflowDef.outcomes || ['Done'],
-                usableAsActivity: workflowDef.extensions?.elsa?.options?.usableAsActivity || false,
-                autoUpdateConsumingWorkflows: workflowDef.extensions?.elsa?.options?.autoUpdateConsumingWorkflows || false,
-                version: workflowDef.version || 1,
-                isLatest: workflowDef.isLatest !== undefined ? workflowDef.isLatest : true,
-                isPublished: workflowDef.statusId === AXPSystemStatusType.Published,
-                toolVersion: workflowDef.toolVersion || '1.0.0',
-                providerName: workflowDef.providerName || 'ACoreX',
-            });
-            this.addLog('success', `Workflow '${workflowName}' loaded successfully`);
-            // If visual tab is active, convert to visual
-            if (this.activeTab() === 'visual') {
-                this.jsonToVisual();
-            }
-        }
-        catch (error) {
-            this.addLog('error', `Failed to load workflow: ${error.message}`);
-            console.error('[WorkflowStudio] Error loading workflow:', error);
-        }
-    }
-    /**
-     * Convert workflow definition to studio JSON format
-     */
-    convertWorkflowDefinitionToStudioJson(workflowDef) {
-        // Convert graph format to root activity format
-        const graph = workflowDef.graph;
-        if (!graph) {
-            return this.getEmptyWorkflow();
-        }
-        // Build root activity structure
-        const rootActivity = {
-            id: graph.startActivityId || 'root',
-            type: 'workflow-activity:sequence',
-            name: this.resolveWorkflowDefinitionTitle(workflowDef),
-            children: [],
-        };
-        // Convert activities to children
-        const activities = graph.activities || [];
-        const connections = graph.connections || [];
-        // Build activity map
-        const activityMap = new Map();
-        activities.forEach((activity) => {
-            activityMap.set(activity.id, {
-                id: activity.id,
-                type: activity.name || activity.type,
-                name: activity.customProperties?.nodeId || activity.id,
-                properties: activity.inputs || {},
-                children: [],
-            });
-        });
-        // Build connections tree
-        const startActivity = activityMap.get(graph.startActivityId);
-        if (startActivity) {
-            rootActivity.children.push(startActivity);
-            // Follow connections to build tree
-            const processed = new Set();
-            const processActivity = (activityId) => {
-                if (processed.has(activityId)) {
-                    return;
-                }
-                processed.add(activityId);
-                const activity = activityMap.get(activityId);
-                if (!activity) {
-                    return;
-                }
-                // Find outgoing connections
-                const outgoingConnections = connections.filter((conn) => conn.source.activtyName === activityId);
-                outgoingConnections.forEach((conn) => {
-                    const targetActivity = activityMap.get(conn.target.activtyName);
-                    if (targetActivity && !processed.has(targetActivity.id)) {
-                        activity.children.push(targetActivity);
-                        processActivity(targetActivity.id);
-                    }
-                });
-            };
-            processActivity(graph.startActivityId);
-        }
-        return {
-            id: workflowDef.id || workflowDef.name || 'workflow',
-            name: workflowDef.name || '',
-            description: this.resolveWorkflowDefinitionDescription(workflowDef),
-            version: workflowDef.version || 1,
-            root: rootActivity,
-        };
-    }
-    //#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(),
-                command: { name: 'execute-workflow' },
-            },
-            {
-                name: 'workflow-settings',
-                title: '@workflow-management:workflow-studio.actions.settings.title',
-                icon: 'fa-light fa-cog',
-                color: 'default',
-                command: { name: 'workflow-settings' },
-            },
-            {
-                name: 'export-workflow',
-                title: '@workflow-management:workflow-studio.actions.export.title',
-                icon: 'fa-light fa-download',
-                color: 'default',
-                command: { name: 'export-workflow' },
-            },
-        ];
-    }
-    async getSecondaryMenuItems() {
-        return [
-            {
-                name: 'format-json',
-                title: '@workflow-management:workflow-studio.actions.format-json.title',
-                icon: 'fa-light fa-code',
-                color: 'default',
-                command: { name: 'format-json' },
-            },
-            {
-                name: 'clear-canvas',
-                title: '@workflow-management:workflow-studio.actions.clear-canvas.title',
-                icon: 'fa-light fa-trash',
-                color: 'danger',
-                visible: this.activeTab() === 'visual',
-                command: { name: 'clear-canvas' },
-            },
-        ];
-    }
-    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}`);
-    }
-    /**
-     * Handle drag start from activity tree – set draggedActivity so canvas drop can add the node.
-     */
-    onActivityDragStartFromTree(payload) {
-        this.draggedActivity = this.convertActivityDefinitionToInfo(payload.activity);
-        if (payload.event.dataTransfer) {
-            payload.event.dataTransfer.effectAllowed = 'copy';
-            payload.event.dataTransfer.setData('text/plain', payload.activity.type);
-        }
-    }
-    /**
-     * Convert AXPActivityDefinition to ActivityInfo
-     */
-    mapDefinitionInputToWorkflowInput(input) {
-        const titleRaw = input.title ?? input.name;
-        const titleStr = typeof titleRaw === 'string' ? titleRaw : (this.translationService.resolve(titleRaw) ?? String(input.name));
-        const descRaw = input.description;
-        const descStr = descRaw == null ? undefined : typeof descRaw === 'string' ? descRaw : this.translationService.resolve(descRaw);
-        if (input.dataType != null && input.interface != null) {
-            return {
-                name: input.name,
-                title: titleStr,
-                description: descStr,
-                schema: {
-                    dataType: input.dataType,
-                    interface: input.interface,
-                },
-                validations: input.validations,
-            };
-        }
-        if (input.schema) {
-            return {
-                name: input.name,
-                title: titleStr,
-                description: descStr,
-                schema: input.schema,
-                validations: input.validations,
-            };
-        }
-        return {
-            name: input.name,
-            title: input.name,
-            description: descStr,
-            schema: { dataType: input.typeName || 'string', defaultValue: input.defaultValue },
-            validations: input.isRequired ? [{ rule: 'required' }] : undefined,
-        };
-    }
-    mapDefinitionOutputToWorkflowOutput(output) {
-        const titleRaw = output.title ?? output.name;
-        const titleStr = typeof titleRaw === 'string' ? titleRaw : (this.translationService.resolve(titleRaw) ?? String(output.name));
-        const descStr = output.description == null
-            ? undefined
-            : typeof output.description === 'string'
-                ? output.description
-                : this.translationService.resolve(output.description);
-        if (output.dataType != null && output.interface != null) {
-            return {
-                name: output.name,
-                title: titleStr,
-                description: descStr,
-                schema: { dataType: output.dataType, interface: output.interface },
-                path: output.path,
-                metadata: output.metadata,
-            };
-        }
-        if (output.schema) {
-            return {
-                name: output.name,
-                title: titleStr,
-                description: descStr,
-                schema: output.schema,
-                path: output.path,
-                metadata: output.metadata,
-            };
-        }
-        return {
-            name: output.name,
-            title: titleStr,
-            description: descStr,
-            schema: { dataType: output.typeName || 'string' },
-        };
-    }
-    convertActivityDefinitionToInfo(activity) {
-        const properties = (activity.inputs || []).map((input) => ({
-            name: input.name,
-            type: this.getPropertyTypeFromDataType(input.dataType),
-            required: !!input.validations?.some((v) => v.rule === 'required'),
-            description: this.translationService.resolve(input.description) ?? undefined,
-            defaultValue: undefined,
-        }));
-        const defaultProperties = {};
-        properties.forEach((prop) => {
-            if (prop.defaultValue !== undefined) {
-                defaultProperties[prop.name] = prop.defaultValue;
-            }
-        });
-        return {
-            type: activity.type,
-            name: activity.name,
-            description: this.translationService.resolve(activity.description) || '',
-            icon: this.normalizeActivityIcon(activity.icon),
-            properties,
-            defaultProperties,
-        };
-    }
-    /**
-     * Normalize FontAwesome icon: if missing style prefix (e.g. fa-light, fas), prepend 'fa-light ' so short values like 'fa-shield-alt' render.
-     */
-    normalizeActivityIcon(icon) {
-        if (!icon?.trim())
-            return 'fa-light fa-circle';
-        const trimmed = icon.trim();
-        const hasStylePrefix = /^(fa-light|fas|far|fal|fa-solid|fa-regular|fa-brands|fa-duotone)(\s|$)/i.test(trimmed);
-        return hasStylePrefix ? trimmed : `fa-light ${trimmed}`;
-    }
-    /**
-     * Map {@link AXPProperty.dataType} to visual editor property type.
-     */
-    getPropertyTypeFromDataType(dataType) {
-        if (dataType === 'array')
-            return 'array';
-        if (dataType === 'object')
-            return 'object';
-        if (dataType === 'boolean')
-            return 'boolean';
-        if (dataType === 'number' || dataType === 'integer')
-            return 'number';
-        if (dataType === 'blob')
-            return 'any';
-        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.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);
-                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.workflowInstanceState.set({
-                status: 'finished',
-                finalResult: currentResult,
-                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', '❌ خطا در اجرای Workflow: ' + error.message, error);
-            this.workflowInstanceState.set({
-                status: 'error',
-                error: error.message,
-                startTime: this.workflowInstanceState().startTime,
-            });
-        }
-        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);
-        }
-    }
-    /**
-     * Open workflow settings dialog built with Layout Builder (platform widgets / Acorex).
-     */
-    openWorkflowSettings() {
-        this.syncWorkflowSettingsFromJson();
-        const settings = this.workflowSettings();
-        const dialogContext = {
-            name: settings.name,
-            definitionId: settings.definitionId,
-            description: settings.description ?? '',
-            inputsJson: JSON.stringify(settings.inputs, null, 2),
-            outputsJson: JSON.stringify(settings.outputs, null, 2),
-            variablesJson: JSON.stringify(settings.variables, null, 2),
-            outcomesJson: Array.isArray(settings.outcomes) ? settings.outcomes.join(', ') : 'Done',
-            version: settings.version,
-            isLatest: settings.isLatest,
-            isPublished: settings.isPublished,
-            usableAsActivity: settings.usableAsActivity,
-            autoUpdateConsumingWorkflows: settings.autoUpdateConsumingWorkflows,
-            toolVersion: settings.toolVersion ?? '1.0.0',
-            providerName: settings.providerName ?? 'WorkflowStudio',
-        };
-        this.layoutBuilder
-            .create()
-            .dialog((dialog) => {
-            dialog
-                .setTitle('@workflow-management:workflow-studio.settings.title')
-                .setSize('lg')
-                .setCloseButton(true)
-                .setContext(dialogContext)
-                .content((flex) => {
-                flex
-                    .setDirection('column')
-                    .setGap('12px')
-                    .fieldset((general) => {
-                    general
-                        .setTitle('@workflow-management:workflow-studio.settings.tabs.general')
-                        .formField('@workflow-management:workflow-studio.settings.sections.general.fields.name.title', (field) => {
-                        field.path('name');
-                        field.textBox({
-                            placeholder: '@workflow-management:workflow-studio.settings.sections.general.fields.name.placeholder',
-                        });
-                    })
-                        .formField('@workflow-management:workflow-studio.settings.sections.general.fields.definition-id.title', (field) => {
-                        field.path('definitionId');
-                        field.textBox({
-                            placeholder: '@workflow-management:workflow-studio.settings.sections.general.fields.definition-id.placeholder',
-                        });
-                    })
-                        .formField('@workflow-management:workflow-studio.settings.sections.general.fields.description.title', (field) => {
-                        field.path('description');
-                        field.largeTextBox({
-                            placeholder: '@workflow-management:workflow-studio.settings.sections.general.fields.description.placeholder',
-                            rows: 4,
-                        });
-                    });
-                })
-                    .fieldset((inputs) => {
-                    inputs
-                        .setTitle('@workflow-management:workflow-studio.settings.tabs.inputs')
-                        .formField('@workflow-management:workflow-studio.settings.sections.inputs.fields.inputs-json', (field) => {
-                        field.path('inputsJson');
-                        field.largeTextBox({ rows: 12 });
-                    });
-                })
-                    .fieldset((outputs) => {
-                    outputs
-                        .setTitle('@workflow-management:workflow-studio.settings.tabs.outputs')
-                        .formField('@workflow-management:workflow-studio.settings.sections.outputs.fields.outputs-json', (field) => {
-                        field.path('outputsJson');
-                        field.largeTextBox({ rows: 12 });
-                    });
-                })
-                    .fieldset((variables) => {
-                    variables
-                        .setTitle('@workflow-management:workflow-studio.settings.tabs.variables')
-                        .formField('@workflow-management:workflow-studio.settings.sections.variables.fields.variables-json', (field) => {
-                        field.path('variablesJson');
-                        field.largeTextBox({ rows: 12 });
-                    });
-                })
-                    .fieldset((advanced) => {
-                    advanced
-                        .setTitle('@workflow-management:workflow-studio.settings.tabs.advanced')
-                        .formField('@workflow-management:workflow-studio.settings.sections.advanced.fields.version', (field) => {
-                        field.path('version');
-                        field.numberBox({ min: 1 });
-                    })
-                        .formField('@workflow-management:workflow-studio.settings.sections.advanced.fields.is-latest', (field) => {
-                        field.path('isLatest');
-                        field.toggleSwitch();
-                    })
-                        .formField('@workflow-management:workflow-studio.settings.sections.advanced.fields.is-published', (field) => {
-                        field.path('isPublished');
-                        field.toggleSwitch();
-                    })
-                        .formField('@workflow-management:workflow-studio.settings.sections.advanced.fields.usable-as-activity', (field) => {
-                        field.path('usableAsActivity');
-                        field.toggleSwitch();
-                    })
-                        .formField('@workflow-management:workflow-studio.settings.sections.advanced.fields.auto-update-consuming', (field) => {
-                        field.path('autoUpdateConsumingWorkflows');
-                        field.toggleSwitch();
-                    })
-                        .formField('@workflow-management:workflow-studio.settings.sections.advanced.fields.tool-version', (field) => {
-                        field.path('toolVersion');
-                        field.textBox({ placeholder: '1.0.0' });
-                    })
-                        .formField('@workflow-management:workflow-studio.settings.sections.advanced.fields.provider-name', (field) => {
-                        field.path('providerName');
-                        field.textBox({ placeholder: 'WorkflowStudio' });
-                    })
-                        .formField('@workflow-management:workflow-studio.settings.sections.advanced.fields.outcomes-label', (field) => {
-                        field.path('outcomesJson');
-                        field.textBox({
-                            placeholder: '@workflow-management:workflow-studio.settings.sections.advanced.fields.outcomes-placeholder',
-                        });
-                    });
-                });
-            })
-                .setActions((actions) => {
-                actions
-                    .cancel('@workflow-management:workflow-studio.settings.actions.cancel')
-                    .submit('@workflow-management:workflow-studio.settings.actions.save');
-            })
-                .onAction(async (dialogRef) => {
-                const action = dialogRef.action();
-                if (action === 'cancel')
-                    return;
-                const ctx = dialogRef.context();
-                if (!ctx)
-                    return;
-                let inputs = [];
-                let outputs = [];
-                let variables = [];
-                let outcomes = ['Done'];
-                try {
-                    if (typeof ctx.inputsJson === 'string' && ctx.inputsJson.trim()) {
-                        inputs = JSON.parse(ctx.inputsJson);
-                    }
-                }
-                catch {
-                    this.addLog('error', 'Invalid inputs JSON');
-                }
-                try {
-                    if (typeof ctx.outputsJson === 'string' && ctx.outputsJson.trim()) {
-                        outputs = JSON.parse(ctx.outputsJson);
-                    }
-                }
-                catch {
-                    this.addLog('error', 'Invalid outputs JSON');
-                }
-                try {
-                    if (typeof ctx.variablesJson === 'string' && ctx.variablesJson.trim()) {
-                        variables = JSON.parse(ctx.variablesJson);
-                    }
-                }
-                catch {
-                    this.addLog('error', 'Invalid variables JSON');
-                }
-                if (typeof ctx.outcomesJson === 'string' && ctx.outcomesJson.trim()) {
-                    outcomes = ctx.outcomesJson
-                        .split(',')
-                        .map((s) => s.trim())
-                        .filter(Boolean);
-                }
-                if (outcomes.length === 0)
-                    outcomes = ['Done'];
-                const newSettings = {
-                    definitionId: String(ctx.definitionId ?? ''),
-                    name: String(ctx.name ?? ''),
-                    description: String(ctx.description ?? ''),
-                    inputs,
-                    outputs,
-                    variables,
-                    outcomes,
-                    version: Number(ctx.version) || 1,
-                    isLatest: Boolean(ctx.isLatest),
-                    isPublished: Boolean(ctx.isPublished),
-                    usableAsActivity: Boolean(ctx.usableAsActivity),
-                    autoUpdateConsumingWorkflows: Boolean(ctx.autoUpdateConsumingWorkflows),
-                    toolVersion: String(ctx.toolVersion ?? '1.0.0'),
-                    providerName: String(ctx.providerName ?? 'WorkflowStudio'),
-                };
-                this.workflowSettings.set(newSettings);
-                this.applyWorkflowSettingsToJson();
-            });
-        })
-            .show();
-    }
-    /**
-     * Sync workflowSettings from current workflow JSON (used before opening settings dialog).
-     */
-    syncWorkflowSettingsFromJson() {
-        try {
-            const workflow = JSON.parse(this.workflowJson());
-            this.workflowSettings.set({
-                definitionId: workflow.definitionId || workflow.id || '',
-                name: workflow.name || '',
-                description: this.resolveWorkflowDefinitionDescription(workflow),
-                inputs: (workflow.inputs || []).map((input) => this.mapDefinitionInputToWorkflowInput(input)),
-                outputs: (workflow.outputs || []).map((output) => this.mapDefinitionOutputToWorkflowOutput(output)),
-                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 {
-            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',
-            });
-        }
-    }
-    /**
-     * Apply current workflowSettings to workflow JSON (used after saving from dialog).
-     */
-    applyWorkflowSettingsToJson() {
-        try {
-            const workflow = JSON.parse(this.workflowJson());
-            const settings = this.workflowSettings();
-            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;
-            workflow.options = {
-                usableAsActivity: settings.usableAsActivity,
-                autoUpdateConsumingWorkflows: settings.autoUpdateConsumingWorkflows,
-            };
-            workflow.variables = settings.variables.map((v) => ({
-                id: v.name,
-                name: v.name,
-                typeName: v.typeName,
-                value: v.value,
-                storageDriverType: 'Memory',
-            }));
-            workflow.inputs = settings.inputs.map((i) => ({
-                name: i.name,
-                title: i.title,
-                description: i.description,
-                dataType: i.schema.dataType,
-                interface: i.schema.interface ?? { type: 'text-editor', options: {} },
-                validations: i.validations,
-            }));
-            workflow.outputs = settings.outputs.map((o) => ({
-                name: o.name,
-                title: o.title,
-                description: o.description,
-                dataType: o.schema.dataType,
-                interface: o.schema.interface ?? { type: 'text-editor', options: {} },
-                path: o.path,
-                metadata: o.metadata,
-            }));
-            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', '✅ Workflow settings saved');
-        }
-        catch (error) {
-            this.addLog('error', '❌ Failed to save settings: ' + 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 || this.resolveWorkflowDefinitionDescription(workflow),
-                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 (aligned with {@link AXPProperty})
-                inputs: settings.inputs.map((i) => ({
-                    name: i.name,
-                    title: i.title,
-                    description: i.description,
-                    dataType: i.schema.dataType,
-                    interface: i.schema.interface ?? { type: 'text-editor', options: {} },
-                    validations: i.validations || [],
-                })),
-                // Outputs array (aligned with {@link AXPWorkflowOutputProperty})
-                outputs: settings.outputs.map((o) => ({
-                    name: o.name,
-                    title: o.title,
-                    description: o.description,
-                    dataType: o.schema.dataType,
-                    interface: o.schema.interface ?? { type: 'text-editor', options: {} },
-                    path: o.path,
-                    metadata: o.metadata,
-                })),
-                // 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)}`;
-    }
-    // ============ 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,
-                interface: { type: 'text-editor', options: {} },
-            },
-            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', interface: { type: 'text-editor', options: {} } };
-            }
-            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', interface: { type: 'text-editor', options: {} } };
-        }
-        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);
-    }
-    /**
-     * Delete node from canvas (used from template to avoid event propagation).
-     */
-    deleteNodeFromCanvas(nodeId) {
-        this.deleteNode(nodeId);
-    }
-    /**
-     * حذف 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:navigate': 'fa-light fa-route',
-            'workflow-activity:dispatch-event': 'fa-light fa-paper-plane',
-            'workflow-activity:entity-create': 'fa-light fa-plus',
-            'workflow-activity:entity-read': 'fa-light fa-book-open',
-            'workflow-activity:entity-update': 'fa-light fa-pen',
-            'workflow-activity:entity-delete': 'fa-light fa-trash',
-            'workflow-activity:human-task': 'fa-light fa-user-check',
-            'workflow-activity:cartable': 'fa-light fa-inbox',
-        };
-        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];
-            if (propertyName === 'name') {
-                updatedNodes[nodeIndex] = {
-                    ...node,
-                    name: value,
-                };
-            }
-            else {
-                const newProperties = {
-                    ...node.properties,
-                    [propertyName]: value,
-                };
-                let newOutcomes = node.outcomes;
-                const shouldRecomputeOutcomes = (propertyName === 'expectedStatusCodes' && node.type === 'workflow-activity:http-request') ||
-                    (propertyName === 'actions' &&
-                        (node.type === 'workflow-activity:human-task' || node.type === 'workflow-activity:cartable'));
-                if (shouldRecomputeOutcomes) {
-                    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(() => { });
-                }
-                updatedNodes[nodeIndex] = {
-                    ...node,
-                    properties: newProperties,
-                    outcomes: newOutcomes,
-                };
-            }
-            this.visualNodes.set(updatedNodes);
-            if (this.selectedNode()?.id === nodeId) {
-                this.selectedNode.set(updatedNodes[nodeIndex]);
-            }
-        }
-    }
-    /**
-     * پیدا کردن activity info بر اساس type
-     */
-    async findActivityInfo(type) {
-        try {
-            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 پاک شد');
-    }
-    /**
-     * Copy workflow Definition ID to clipboard (Elsa-style workflow info).
-     */
-    async copyDefinitionIdToClipboard() {
-        const id = this.workflowSettings().definitionId || 'new-workflow';
-        try {
-            if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
-                await navigator.clipboard.writeText(id);
-                this.addLog('success', 'Definition ID copied to clipboard');
-            }
-        }
-        catch {
-            this.addLog('warning', 'Could not copy to clipboard');
-        }
-    }
-    /**
-     * Scroll canvas area so content is centered (Elsa-style "Center").
-     */
-    canvasCenter() {
-        const el = this.canvasAreaRef()?.nativeElement;
-        if (!el)
-            return;
-        const nodes = this.visualNodes();
-        if (nodes.length === 0)
-            return;
-        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-        for (const n of nodes) {
-            minX = Math.min(minX, n.position.x);
-            minY = Math.min(minY, n.position.y);
-            maxX = Math.max(maxX, n.position.x + 150);
-            maxY = Math.max(maxY, n.position.y + 120);
-        }
-        const cx = (minX + maxX) / 2;
-        const cy = (minY + maxY) / 2;
-        const parent = el.parentElement;
-        if (parent && parent.scrollWidth > parent.clientWidth) {
-            parent.scrollLeft = Math.max(0, cx - parent.clientWidth / 2);
-        }
-        if (parent && parent.scrollHeight > parent.clientHeight) {
-            parent.scrollTop = Math.max(0, cy - parent.clientHeight / 2);
-        }
-    }
-    /**
-     * Scroll canvas so all nodes are in view (Elsa-style "Zoom to fit" – fit by scroll).
-     */
-    canvasZoomToFit() {
-        const el = this.canvasAreaRef()?.nativeElement;
-        if (!el)
-            return;
-        const nodes = this.visualNodes();
-        if (nodes.length === 0)
-            return;
-        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-        for (const n of nodes) {
-            minX = Math.min(minX, n.position.x);
-            minY = Math.min(minY, n.position.y);
-            maxX = Math.max(maxX, n.position.x + 150);
-            maxY = Math.max(maxY, n.position.y + 120);
-        }
-        const parent = el.parentElement;
-        if (parent) {
-            parent.scrollLeft = Math.max(0, minX - 24);
-            parent.scrollTop = Math.max(0, minY - 24);
-        }
-    }
-    /**
-     * Auto-arrange nodes in a vertical flow (Elsa-style "Auto layout").
-     */
-    canvasAutoLayout() {
-        const nodes = this.visualNodes();
-        if (nodes.length === 0)
-            return;
-        const root = this.findRootNode(nodes);
-        const ordered = [];
-        const visited = new Set();
-        const add = (n) => {
-            if (visited.has(n.id))
-                return;
-            visited.add(n.id);
-            ordered.push(n);
-            const targets = (n.outcomeConnections ?? [])
-                .map((c) => this.findNodeById(c.targetNodeId))
-                .filter(Boolean);
-            for (const t of targets)
-                add(t);
-            const fallback = (n.connections ?? []).map((id) => this.findNodeById(id)).filter(Boolean);
-            for (const t of fallback)
-                add(t);
-        };
-        if (root)
-            add(root);
-        for (const n of nodes)
-            if (!visited.has(n.id))
-                ordered.push(n);
-        const startX = 50;
-        const startY = 50;
-        const stepY = 120;
-        this.visualNodes.update((list) => list.map((node) => {
-            const idx = ordered.findIndex((o) => o.id === node.id);
-            const y = idx >= 0 ? startY + idx * stepY : node.position.y;
-            return { ...node, position: { x: startX, y } };
-        }));
-        this.addLog('info', 'Layout applied');
-    }
-    // ============ 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'];
-        }
-        // Human task / cartable: outcomes from actions (prefix/suffix) in workflow definition
-        if ((activityInfo.type === 'workflow-activity:human-task' ||
-            activityInfo.type === 'workflow-activity:cartable') &&
-            properties['actions']) {
-            const names = [];
-            try {
-                const actions = properties['actions'];
-                const parsed = typeof actions === 'string' ? JSON.parse(actions) : actions;
-                const prefix = parsed?.prefix ?? [];
-                const suffix = parsed?.suffix ?? [];
-                for (const item of [...prefix, ...suffix]) {
-                    const name = item?.command?.name ?? item?.name;
-                    if (name && typeof name === 'string' && !names.includes(name))
-                        names.push(name);
-                }
-            }
-            catch {
-                // ignore parse error
-            }
-            if (names.length > 0)
-                return names;
-        }
-        // Default: check activity info for outcomes
-        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:human-task': ['submit', 'cancel'],
-            'workflow-activity:cartable': ['submit', 'cancel'],
-            'workflow-activity:http-request': ['Done', 'Failed', 'Timeout'],
-            'workflow-activity:sequence': ['Done'],
-            'workflow-activity:for-each': ['Done'],
-            'workflow-activity:while': ['Done'],
-            'workflow-activity:set-variable': ['Done'],
-            'workflow-activity:navigate': ['Done'],
-            'workflow-activity:show-toast': ['Done'],
-            'workflow-activity:dispatch-event': ['Done'],
-            'workflow-activity:entity-create': ['Done', 'Failed'],
-            'workflow-activity:entity-read': ['Done', 'NotFound', 'Failed'],
-            'workflow-activity:entity-update': ['Done', 'Failed'],
-            'workflow-activity:entity-delete': ['Done', 'Failed'],
-        };
-        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());
-    }
-    /**
-     * Build property viewer tabs from activity definition (platform widget-based).
-     * Used so the properties panel renders via the same widget system as the form builder.
-     */
-    buildPropertyViewerTabs(def, node) {
-        const generalGroup = { name: 'identity', title: 'General', order: 0 };
-        const inputGroup = { name: 'input-properties', title: 'Input Properties', order: 1 };
-        const outputGroup = { name: 'output', title: 'Output & Variables', order: 2 };
-        const identityProps = [
-            this.createReadOnlyStringProp('id', 'ID', 'id', generalGroup),
-            this.createReadOnlyStringProp('type', 'Type', 'type', generalGroup),
-            this.createStringProp('name', 'Name', 'name', generalGroup),
-        ];
-        const inputProps = (def?.inputs ?? []).map((input, index) => this.activityInputToWidgetProperty(input, inputGroup, index));
-        const outputProps = [
-            this.createStringProp('outputVariable', 'Output Variable', 'properties.outputVariable', outputGroup),
-        ];
-        const groups = [
-            { name: generalGroup.name, title: generalGroup.title, isCollapsed: false, props: identityProps },
-            ...(inputProps.length
-                ? [{ name: inputGroup.name, title: inputGroup.title, isCollapsed: false, props: inputProps }]
-                : []),
-            { name: outputGroup.name, title: outputGroup.title, isCollapsed: false, props: outputProps },
-        ];
-        return [{ name: 'general', title: 'General', groups }];
-    }
-    createStringProp(name, title, path, group) {
-        return {
-            name,
-            title,
-            group,
-            order: 0,
-            schema: {
-                dataType: 'string',
-                interface: {
-                    path,
-                    name,
-                    type: 'text-editor',
-                    options: {},
-                },
-            },
-            visible: true,
-        };
-    }
-    createReadOnlyStringProp(name, title, path, group) {
-        return {
-            name,
-            title,
-            group,
-            order: 0,
-            schema: {
-                dataType: 'string',
-                interface: {
-                    path,
-                    name,
-                    type: 'text-editor',
-                    options: { readonly: true },
-                },
-            },
-            visible: true,
-        };
-    }
-    activityInputToWidgetProperty(input, group, order) {
-        return mapAXPPropertyToWidgetProperty(input, {
-            group,
-            order,
-            valuePathPrefix: 'properties',
-            resolveTitle: (prop) => typeof prop.title === 'string' ? prop.title : (this.translationService.resolve(prop.title) ?? prop.name),
-            resolveDescription: (prop) => prop.description === undefined
-                ? undefined
-                : typeof prop.description === 'string'
-                    ? prop.description
-                    : this.translationService.resolve(prop.description),
-        });
-    }
-    /**
-     * Apply property viewer context changes back to the selected node.
-     */
-    onPropertyViewerChanged(ev) {
-        const node = this.selectedNode();
-        if (!node || ev.mode !== 'update')
-            return;
-        const v = ev.values;
-        if (v.name !== undefined)
-            this.updateNodeProperty(node.id, 'name', v.name);
-        if (v.properties && typeof v.properties === 'object') {
-            for (const key of Object.keys(v.properties)) {
-                this.updateNodeProperty(node.id, key, v.properties[key]);
-            }
-        }
-    }
-    // ============ 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;
-    }
-    /**
-     * Builds SVG path for a curved connection (quadratic Bezier) so the line is smooth like Elsa/n8n.
-     * Control point is offset so the curve bows naturally between source and target.
-     */
-    getConnectionPath(x1, y1, x2, y2) {
-        const midX = (x1 + x2) / 2;
-        const midY = (y1 + y2) / 2;
-        const dy = y2 - y1;
-        const offset = Math.min(80, Math.max(40, Math.abs(dy) * 0.3));
-        const cpy = midY - (dy >= 0 ? offset : -offset);
-        return `M ${x1} ${y1} Q ${midX} ${cpy} ${x2} ${y2}`;
-    }
-    /**
-     * Approximate midpoint on the curve for label placement (quadratic Bezier t=0.5).
-     */
-    getConnectionLabelPosition(x1, y1, x2, y2) {
-        const midX = (x1 + x2) / 2;
-        const midY = (y1 + y2) / 2;
-        const dy = y2 - y1;
-        const offset = Math.min(80, Math.max(40, Math.abs(dy) * 0.3));
-        const cpy = midY - (dy >= 0 ? offset : -offset);
-        const t = 0.5;
-        const x = (1 - t) * (1 - t) * x1 + 2 * (1 - t) * t * midX + t * t * x2;
-        const y = (1 - t) * (1 - t) * y1 + 2 * (1 - t) * t * cpy + t * t * y2;
-        return { x, y: y + 12 };
-    }
-    /**
-     * دریافت رنگ بر اساس 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
-    }
-    /**
-     * Returns marker name for arrowhead def (success, error, warning, info, primary, default).
-     */
-    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';
-        }
-        if (['Else'].includes(outcome)) {
-            return 'default';
-        }
-        return 'primary'; // purple for custom outcomes
-    }
-    /**
-     * به‌روزرسانی 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: "21.2.9", ngImport: i0, type: WorkflowStudioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: WorkflowStudioComponent, isStandalone: true, selector: "app-workflow-studio", providers: [
-            {
-                provide: AXPPageLayoutBase,
-                useExisting: WorkflowStudioComponent,
-            },
-        ], viewQueries: [{ propertyName: "propertyViewerRef", first: true, predicate: AXPPropertyViewerComponent, descendants: true, isSignal: true }, { propertyName: "canvasAreaRef", first: true, predicate: ["canvasAreaRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout>\n  <axp-layout-start-side>\n    <axp-layout-header>\n      <axp-layout-title>{{ '@workflow-management:activities.menus.activity-categories.title' | translate | async }}</axp-layout-title>\n      <axp-layout-toolbar>\n        <ax-search-box\n          [delayTime]=\"300\"\n          [placeholder]=\"'@workflow-management:workflow-studio.components.activity-categories-tree.search-placeholder' | translate | async\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </axp-layout-toolbar>\n    </axp-layout-header>\n    <axp-layout-content>\n      <axp-activity-categories-tree\n        (categoryClick)=\"onCategoryClick($event)\"\n        (activityClick)=\"onActivityClick($event)\"\n        (activityDragStart)=\"onActivityDragStartFromTree($event)\"\n      ></axp-activity-categories-tree>\n    </axp-layout-content>\n  </axp-layout-start-side>\n\n  <axp-page-toolbar>\n    <axp-layout-prefix>\n      <!-- JSON / Visual toggle (same pattern as report view mode) -->\n      <div class=\"studio-editor-tabs\">\n        <ax-button-group class=\"ax-sm\" [selection]=\"'single'\">\n          <ax-button-group-item (onClick)=\"switchTab('json')\" text=\"{{ '@workflow-management:workflow-studio.terms.json-editor' | translate | async }}\" [selected]=\"activeTab() === 'json'\">\n            <ax-prefix>\n              <i class=\"fa-light fa-code\"></i>\n            </ax-prefix>\n          </ax-button-group-item>\n          <ax-button-group-item (onClick)=\"switchTab('visual')\" text=\"{{ '@workflow-management:workflow-studio.terms.visual-designer' | translate | async }}\" [selected]=\"activeTab() === 'visual'\">\n            <ax-prefix>\n              <i class=\"fa-light fa-diagram-project\"></i>\n            </ax-prefix>\n          </ax-button-group-item>\n        </ax-button-group>\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\" [value]=\"workflowJson()\"\n                (input)=\"onWorkflowJsonInput($event)\"\n                [placeholder]=\"'@workflow-management:workflow-studio.components.json-editor.placeholder' | translate | async\"\n                spellcheck=\"false\"></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                  <ax-button look=\"blank\" class=\"ax-sm\" [attr.title]=\"'@workflow-management:workflow-studio.components.canvas-toolbar.zoom-to-fit.title' | translate | async\" (onClick)=\"canvasZoomToFit()\">\n                    <ax-prefix><i class=\"fa-light fa-expand\"></i></ax-prefix>\n                  </ax-button>\n                  <ax-button look=\"blank\" class=\"ax-sm\" [attr.title]=\"'@workflow-management:workflow-studio.components.canvas-toolbar.center.title' | translate | async\" (onClick)=\"canvasCenter()\">\n                    <ax-prefix><i class=\"fa-light fa-crosshairs\"></i></ax-prefix>\n                  </ax-button>\n                  <ax-button look=\"blank\" class=\"ax-sm\" [attr.title]=\"'@workflow-management:workflow-studio.components.canvas-toolbar.auto-layout.title' | translate | async\" (onClick)=\"canvasAutoLayout()\">\n                    <ax-prefix><i class=\"fa-light fa-sitemap\"></i></ax-prefix>\n                  </ax-button>\n                  <span class=\"toolbar-sep\"></span>\n                  <label class=\"toolbar-auto-save\">\n                    <ax-switch [value]=\"autoSaveEnabled()\" (valueChange)=\"autoSaveEnabled.set($event)\"></ax-switch>\n                    <span>{{ '@workflow-management:workflow-studio.components.canvas-toolbar.auto-save' | translate | async }}</span>\n                  </label>\n                  <span class=\"toolbar-sep\"></span>\n                  <ax-button look=\"blank\" class=\"ax-sm\" [attr.title]=\"'@workflow-management:workflow-studio.components.canvas-toolbar.clear-canvas.title' | translate | async\" (onClick)=\"clearCanvas()\">\n                    <ax-prefix><i class=\"fa-light fa-trash\"></i></ax-prefix>\n                  </ax-button>\n                  <ax-button look=\"blank\" class=\"ax-sm\" [attr.title]=\"'@workflow-management:workflow-studio.components.canvas-toolbar.convert-to-json.title' | translate | async\" (onClick)=\"visualToJson()\">\n                    <ax-prefix><i class=\"fa-light fa-code\"></i></ax-prefix>\n                  </ax-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 #canvasAreaRef 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 }} \u00E2\u2020\u2019 {{ 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\" dominant-baseline=\"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                    @let sx = node.position.x + 75;\n                    @let sy = node.position.y + 40;\n                    @let tx = targetNode.position.x + 75;\n                    @let ty = targetNode.position.y - 50;\n                    @let pathD = getConnectionPath(sx, sy, tx, ty);\n                    <g class=\"connection-group\">\n                      <path [attr.d]=\"pathD\" class=\"connection-line connection-hit\" fill=\"none\" stroke=\"transparent\"\n                        stroke-width=\"16\" pointer-events=\"stroke\" (dblclick)=\"disconnectNodes(node.id, targetId)\">\n                      </path>\n                      <path [attr.d]=\"pathD\" class=\"connection-line\" fill=\"none\" stroke=\"#64748b\" stroke-width=\"2\"\n                        stroke-linecap=\"round\" marker-end=\"url(#arrowhead-default)\" pointer-events=\"none\">\n                      </path>\n                      <title>{{ '@workflow-management:workflow-studio.components.canvas-toolbar.connection-remove-hint' | translate | async }}</title>\n                    </g>\n                    }\n                    }\n                    }\n                    }\n\n                    <defs>\n                      <!-- Arrow markers: larger, rounded tip on line end (refX so tip touches path end) -->\n                      <marker id=\"arrowhead-default\" markerWidth=\"12\" markerHeight=\"12\" refX=\"10\" refY=\"4\" orient=\"auto\">\n                        <polygon points=\"0 0, 12 4, 0 8\" fill=\"#64748b\" />\n                      </marker>\n                      <marker id=\"arrowhead-primary\" markerWidth=\"12\" markerHeight=\"12\" refX=\"10\" refY=\"4\" orient=\"auto\">\n                        <polygon points=\"0 0, 12 4, 0 8\" fill=\"#8b5cf6\" />\n                      </marker>\n                      <marker id=\"arrowhead-success\" markerWidth=\"12\" markerHeight=\"12\" refX=\"10\" refY=\"4\" orient=\"auto\">\n                        <polygon points=\"0 0, 12 4, 0 8\" fill=\"#10b981\" />\n                      </marker>\n                      <marker id=\"arrowhead-error\" markerWidth=\"12\" markerHeight=\"12\" refX=\"10\" refY=\"4\" orient=\"auto\">\n                        <polygon points=\"0 0, 12 4, 0 8\" fill=\"#ef4444\" />\n                      </marker>\n                      <marker id=\"arrowhead-warning\" markerWidth=\"12\" markerHeight=\"12\" refX=\"10\" refY=\"4\" orient=\"auto\">\n                        <polygon points=\"0 0, 12 4, 0 8\" fill=\"#f59e0b\" />\n                      </marker>\n                      <marker id=\"arrowhead-info\" markerWidth=\"12\" markerHeight=\"12\" refX=\"10\" refY=\"4\" orient=\"auto\">\n                        <polygon points=\"0 0, 12 4, 0 8\" 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                      <span class=\"node-delete-wrap\" (click)=\"$event.stopPropagation()\">\n                        <ax-button look=\"blank\" size=\"sm\" class=\"node-delete\" (onClick)=\"deleteNodeFromCanvas(node.id)\">\n                          <ax-prefix><i class=\"fa-light fa-times\"></i></ax-prefix>\n                        </ax-button>\n                      </span>\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>{{ '@workflow-management:workflow-studio.components.canvas-empty-state.title' | translate | async }}</p>\n                    <small>{{ '@workflow-management:workflow-studio.components.canvas-empty-state.description' | translate | async }}</small>\n                  </div>\n                  }\n                </div>\n              </div>\n\n              <!-- Workflow Panel (when no node selected, Elsa-style) -->\n              @if (!selectedNode() && showPropertiesPanel()) {\n              <div class=\"properties-panel workflow-panel\">\n                <div class=\"properties-header\">\n                  <i class=\"fa-light fa-diagram-project\"></i>\n                  <h4>{{ '@workflow-management:workflow-studio.components.workflow-panel.title' | translate | async }}</h4>\n                  <div class=\"header-actions\">\n                    <ax-button look=\"blank\" size=\"sm\" [title]=\"'@workflow-management:workflow-studio.components.properties-panel.actions.close-panel' | translate | async\" (onClick)=\"togglePropertiesPanel()\">\n                      <ax-prefix><i class=\"fa-light fa-angle-right\"></i></ax-prefix>\n                    </ax-button>\n                  </div>\n                </div>\n                <div class=\"properties-body\">\n                  <section class=\"workflow-panel-section\">\n                    <h5>{{ '@workflow-management:workflow-studio.components.workflow-panel.metadata' | translate | async }}</h5>\n                    <div class=\"property-row\">\n                      <label>{{ '@workflow-management:workflow-studio.components.workflow-panel.name' | translate | async }}</label>\n                      <ax-text-box class=\"form-input\" [value]=\"workflowSettings().name\" [disabled]=\"true\" />\n                    </div>\n                    <div class=\"property-row\">\n                      <label>{{ '@workflow-management:workflow-studio.components.workflow-panel.description' | translate | async }}</label>\n                      <ax-text-box class=\"form-input\" [value]=\"workflowSettings().description\" [disabled]=\"true\" />\n                    </div>\n                  </section>\n                  <div class=\"properties-divider\"></div>\n                  <section class=\"workflow-panel-section\">\n                    <h5>{{ '@workflow-management:workflow-studio.components.workflow-panel.information' | translate | async }}</h5>\n                    <div class=\"workflow-info-table\">\n                      <div class=\"workflow-info-row\">\n                        <span class=\"info-label\">{{ '@workflow-management:workflow-studio.components.workflow-panel.definition-id' | translate | async }}</span>\n                        <span class=\"info-actions\">\n                          <ax-button look=\"blank\" size=\"sm\" [title]=\"'@workflow-management:workflow-studio.components.workflow-panel.copy' | translate | async\" (onClick)=\"copyDefinitionIdToClipboard()\">\n                            <ax-prefix><i class=\"fa-light fa-copy\"></i></ax-prefix>\n                          </ax-button>\n                        </span>\n                        <span class=\"info-value\">{{ workflowSettings().definitionId || 'new-workflow' }}</span>\n                      </div>\n                      <div class=\"workflow-info-row\">\n                        <span class=\"info-label\">{{ '@workflow-management:workflow-studio.components.workflow-panel.version' | translate | async }}</span>\n                        <span class=\"info-value\">{{ workflowSettings().version }}</span>\n                      </div>\n                      <div class=\"workflow-info-row\">\n                        <span class=\"info-label\">{{ '@workflow-management:workflow-studio.components.workflow-panel.status' | translate | async }}</span>\n                        <span class=\"info-value\">{{ workflowSettings().isPublished ? ('@workflow-management:workflow-studio.components.workflow-panel.published' | translate | async) : ('@workflow-management:workflow-studio.components.workflow-panel.draft' | translate | async) }}</span>\n                      </div>\n                      <div class=\"workflow-info-row\">\n                        <span class=\"info-label\">{{ '@workflow-management:workflow-studio.components.workflow-panel.usable-as-activity' | translate | async }}</span>\n                        <span class=\"info-value\">{{ workflowSettings().usableAsActivity ? ('@general:terms.common.yes-no.yes' | translate | async) : ('@general:terms.common.yes-no.no' | translate | async) }}</span>\n                      </div>\n                    </div>\n                  </section>\n                  <p class=\"properties-hint\">{{ '@workflow-management:workflow-studio.components.workflow-panel.settings-hint' | translate | async }}</p>\n                </div>\n              </div>\n              }\n\n              <!-- Properties Panel (when a node is selected) -->\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                    <ax-button look=\"blank\" size=\"sm\" [title]=\"'@workflow-management:workflow-studio.components.properties-panel.actions.close-panel' | translate | async\" (onClick)=\"togglePropertiesPanel()\">\n                      <ax-prefix><i class=\"fa-light fa-angle-right\"></i></ax-prefix>\n                    </ax-button>\n                    <ax-button look=\"blank\" size=\"sm\" [title]=\"'@workflow-management:workflow-studio.components.properties-panel.actions.close' | translate | async\" (onClick)=\"selectedNode.set(null)\">\n                      <ax-prefix><i class=\"fa-light fa-times\"></i></ax-prefix>\n                    </ax-button>\n                  </div>\n                </div>\n                <div class=\"properties-body\">\n                  @if (propertyViewerTabs().length > 0) {\n                  <div class=\"properties-widget-section\">\n                    <axp-property-viewer\n                      #propertyViewerRef\n                      [tabsInput]=\"propertyViewerTabs()\"\n                      [mode]=\"'simple'\"\n                      (onChanged)=\"onPropertyViewerChanged($event)\">\n                    </axp-property-viewer>\n                  </div>\n                  } @else {\n                  <div class=\"property-row\">\n                    <label>{{ '@workflow-management:workflow-studio.components.properties-panel.fields.id' | translate | async }}:</label>\n                    <ax-text-box class=\"form-input\" [value]=\"selectedNode()!.id\" [disabled]=\"true\" />\n                  </div>\n                  <div class=\"property-row\">\n                    <label>{{ '@workflow-management:workflow-studio.components.properties-panel.fields.type' | translate | async }}:</label>\n                    <ax-text-box class=\"form-input\" [value]=\"selectedNode()!.type\" [disabled]=\"true\" />\n                  </div>\n                  <div class=\"property-row\">\n                    <label>{{ '@workflow-management:workflow-studio.components.properties-panel.fields.name' | translate | async }}:</label>\n                    <ax-text-box class=\"form-input\" [value]=\"selectedNode()!.name\"\n                      (valueChange)=\"updateNodeProperty(selectedNode()!.id, 'name', $event)\" />\n                  </div>\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\n                  <h5>\u00F0\u0178\u201D\u2014 {{ '@workflow-management:workflow-studio.components.properties-panel.sections.connections' | translate | async }}</h5>\n                  <small class=\"properties-hint\">{{ '@workflow-management:workflow-studio.components.properties-panel.sections.connections-hint' | translate | async }}</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                      <ax-button look=\"blank\" size=\"sm\" class=\"remove-btn\"\n                        [title]=\"'@workflow-management:workflow-studio.components.properties-panel.actions.remove-connection' | translate | async\"\n                        (onClick)=\"disconnectNodes(selectedNode()!.id, conn.targetNodeId, conn.outcome)\">\n                        <ax-prefix><i class=\"fa-light fa-times\"></i></ax-prefix>\n                      </ax-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                      <ax-button look=\"blank\" size=\"sm\" class=\"remove-btn\"\n                        [title]=\"'@workflow-management:workflow-studio.components.properties-panel.actions.remove-connection' | translate | async\"\n                        (onClick)=\"disconnectNodes(selectedNode()!.id, targetId)\">\n                        <ax-prefix><i class=\"fa-light fa-times\"></i></ax-prefix>\n                      </ax-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>\u00F0\u0178\u201C\u00A4 {{ '@workflow-management:workflow-studio.components.properties-panel.sections.available-outcomes' | translate | async }}</h5>\n                  <small class=\"properties-hint\">{{ '@workflow-management:workflow-studio.components.properties-panel.sections.available-outcomes-hint' | translate | async }}</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>\u00F0\u0178\u201C\u009D {{ '@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 (!showPropertiesPanel()) {\n              <ax-button look=\"blank\" class=\"sidebar-toggle-btn right\" (onClick)=\"togglePropertiesPanel()\"\n                [title]=\"selectedNode() ? ('@workflow-management:workflow-studio.components.properties-panel.actions.show-panel' | translate | async) : ('@workflow-management:workflow-studio.components.workflow-panel.show-panel' | translate | async)\">\n                <ax-prefix><i class=\"fa-light fa-sliders\"></i></ax-prefix>\n              </ax-button>\n              }\n            </div>\n            }\n          </div>\n        </div>\n\n      </div>\n\n      <!-- Workflow Settings: opened via Layout Builder dialog in openWorkflowSettings() -->\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            <ax-button look=\"blank\" size=\"sm\" class=\"close-btn\" [disabled]=\"isExecuting()\" (onClick)=\"closeExecutionDialog()\">\n              <ax-prefix><i class=\"fa-light fa-times\"></i></ax-prefix>\n            </ax-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>\u00D9\u0081\u00D8\u00B1\u00D8\u00A2\u00DB\u0152\u00D9\u2020\u00D8\u00AF \u00D8\u00AB\u00D8\u00A8\u00D8\u00AA\u00E2\u20AC\u0152\u00D9\u2020\u00D8\u00A7\u00D9\u2026</h3>\n                <p class=\"registration-desc\">\n                  \u00D8\u00A7\u00DB\u0152\u00D9\u2020 \u00D9\u0081\u00D9\u201E\u00D9\u02C6 \u00D8\u00B4\u00D8\u00A7\u00D9\u2026\u00D9\u201E \u00DA\u2020\u00D9\u2020\u00D8\u00AF \u00D9\u2026\u00D8\u00B1\u00D8\u00AD\u00D9\u201E\u00D9\u2021 \u00D8\u00A7\u00D8\u00B3\u00D8\u00AA \u00DA\u00A9\u00D9\u2021 \u00D8\u00AF\u00D8\u00A7\u00D8\u00AF\u00D9\u2021\u00E2\u20AC\u0152\u00D9\u2021\u00D8\u00A7\u00DB\u0152 \u00DA\u00A9\u00D8\u00A7\u00D8\u00B1\u00D8\u00A8\u00D8\u00B1 \u00D8\u00B1\u00D8\u00A7 \u00D8\u00AC\u00D9\u2026\u00D8\u00B9\u00E2\u20AC\u0152\u00D8\u00A2\u00D9\u02C6\u00D8\u00B1\u00DB\u0152 \u00DA\u00A9\u00D8\u00B1\u00D8\u00AF\u00D9\u2021 \u00D9\u02C6 \u00D8\u00AF\u00D8\u00B1 \u00D9\u2020\u00D9\u2021\u00D8\u00A7\u00DB\u0152\u00D8\u00AA \u00D8\u00AD\u00D8\u00B3\u00D8\u00A7\u00D8\u00A8 \u00DA\u00A9\u00D8\u00A7\u00D8\u00B1\u00D8\u00A8\u00D8\u00B1\u00DB\u0152 \u00D8\u00A7\u00DB\u0152\u00D8\u00AC\u00D8\u00A7\u00D8\u00AF \u00D9\u2026\u00DB\u0152\u00E2\u20AC\u0152\u00DA\u00A9\u00D9\u2020\u00D8\u00AF.\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>\u00D8\u00AF\u00D8\u00B1 \u00D8\u00AD\u00D8\u00A7\u00D9\u201E \u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7\u00DB\u0152 \u00D9\u2026\u00D8\u00B1\u00D8\u00A7\u00D8\u00AD\u00D9\u201E \u00D8\u00AB\u00D8\u00A8\u00D8\u00AA\u00E2\u20AC\u0152\u00D9\u2020\u00D8\u00A7\u00D9\u2026...</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>\u00D8\u00AB\u00D8\u00A8\u00D8\u00AA\u00E2\u20AC\u0152\u00D9\u2020\u00D8\u00A7\u00D9\u2026 \u00D8\u00A8\u00D8\u00A7 \u00D9\u2026\u00D9\u02C6\u00D9\u0081\u00D9\u201A\u00DB\u0152\u00D8\u00AA \u00D8\u00A7\u00D9\u2020\u00D8\u00AC\u00D8\u00A7\u00D9\u2026 \u00D8\u00B4\u00D8\u00AF!</h4>\n                  <p>\u00D8\u00AD\u00D8\u00B3\u00D8\u00A7\u00D8\u00A8 \u00DA\u00A9\u00D8\u00A7\u00D8\u00B1\u00D8\u00A8\u00D8\u00B1\u00DB\u0152 \u00D8\u00B4\u00D9\u2026\u00D8\u00A7 \u00D8\u00A7\u00DB\u0152\u00D8\u00AC\u00D8\u00A7\u00D8\u00AF \u00D8\u00B4\u00D8\u00AF \u00D9\u02C6 \u00D8\u00A8\u00D9\u2021 \u00D8\u00B2\u00D9\u02C6\u00D8\u00AF\u00DB\u0152 \u00D8\u00A8\u00D9\u2021 \u00D8\u00AF\u00D8\u00A7\u00D8\u00B4\u00D8\u00A8\u00D9\u02C6\u00D8\u00B1\u00D8\u00AF \u00D9\u2026\u00D9\u2020\u00D8\u00AA\u00D9\u201A\u00D9\u201E \u00D8\u00AE\u00D9\u02C6\u00D8\u00A7\u00D9\u2021\u00DB\u0152\u00D8\u00AF \u00D8\u00B4\u00D8\u00AF.</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>\u00D8\u00AF\u00D8\u00B1 \u00D8\u00AD\u00D8\u00A7\u00D9\u201E \u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7...</h3>\n                  <p>Workflow \u00D8\u00AF\u00D8\u00B1 \u00D8\u00AD\u00D8\u00A7\u00D9\u201E \u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7 \u00D8\u00A7\u00D8\u00B3\u00D8\u00AA. \u00D9\u201E\u00D8\u00B7\u00D9\u0081\u00D8\u00A7\u00D9\u2039 \u00D8\u00B5\u00D8\u00A8\u00D8\u00B1 \u00DA\u00A9\u00D9\u2020\u00DB\u0152\u00D8\u00AF.</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>\u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7 \u00D8\u00A8\u00D8\u00A7 \u00D9\u2026\u00D9\u02C6\u00D9\u0081\u00D9\u201A\u00DB\u0152\u00D8\u00AA \u00D8\u00AA\u00DA\u00A9\u00D9\u2026\u00DB\u0152\u00D9\u201E \u00D8\u00B4\u00D8\u00AF</h3>\n                  <p>Workflow \u00D8\u00A8\u00D8\u00A7 \u00D9\u2026\u00D9\u02C6\u00D9\u0081\u00D9\u201A\u00DB\u0152\u00D8\u00AA \u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7 \u00D8\u00B4\u00D8\u00AF \u00D9\u02C6 \u00D8\u00AA\u00D9\u2026\u00D8\u00A7\u00D9\u2026 Activities \u00D8\u00A7\u00D9\u2020\u00D8\u00AC\u00D8\u00A7\u00D9\u2026 \u00D8\u00B4\u00D8\u00AF\u00D9\u2020\u00D8\u00AF.</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>\u00D8\u00AE\u00D8\u00B7\u00D8\u00A7 \u00D8\u00AF\u00D8\u00B1 \u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7</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> \u00D9\u201E\u00D8\u00A7\u00DA\u00AF\u00E2\u20AC\u0152\u00D9\u2021\u00D8\u00A7\u00DB\u0152 \u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7</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                \u00D8\u00B4\u00D8\u00B1\u00D9\u02C6\u00D8\u00B9: {{ 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                \u00D9\u00BE\u00D8\u00A7\u00DB\u0152\u00D8\u00A7\u00D9\u2020: {{ 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>\n", 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}.studio-editor-tabs ax-button-group-item[selected],.studio-editor-tabs ax-button-group-item.ax-selected{font-weight:600;opacity:1}.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:1fr;gap:0;flex:1;overflow:hidden;transition:grid-template-columns .3s ease}.studio-body.sidebar-hidden,.studio-body.properties-hidden,.studio-body.sidebar-hidden.properties-hidden{grid-template-columns:1fr}.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:var(--ax-surface, white);border-bottom:1px solid var(--ax-border, #e2e8f0)}.studio-editor .visual-canvas .canvas-toolbar .tool-btn{padding:.5rem .75rem;background:var(--ax-surface-alt, #f8fafc);border:1px solid var(--ax-border, #e2e8f0);border-radius:6px;color:var(--ax-text-muted, #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 .toolbar-sep{width:1px;height:1.25rem;background:var(--ax-border, #e2e8f0);flex-shrink:0}.studio-editor .visual-canvas .canvas-toolbar .toolbar-auto-save{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--ax-text-muted, #64748b);cursor:default}.studio-editor .visual-canvas .canvas-toolbar .toolbar-auto-save ax-switch{flex-shrink:0}.studio-editor .visual-canvas .canvas-toolbar .tool-info{flex:1;display:flex;align-items:center;gap:.5rem;min-height:1.75rem;font-size:.8125rem;color:var(--ax-text-muted, #64748b);line-height:1.4}.studio-editor .visual-canvas .canvas-toolbar .tool-info strong{font-weight:600}.studio-editor .visual-canvas .canvas-toolbar .tool-info i{font-size:1rem;color:#8b5cf6;flex-shrink:0}.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{fill:none;transition:stroke .2s}.studio-editor .visual-canvas .connection-line.connection-hit{stroke:transparent;stroke-width:16;cursor:pointer;pointer-events:stroke}.studio-editor .visual-canvas .connection-line.connection-hit:hover~.outcome-line,.studio-editor .visual-canvas .connection-line.connection-hit:hover~.connection-line:not(.connection-hit){filter:brightness(.9)}.studio-editor .visual-canvas .connection-line:not(.connection-hit){stroke-linecap:round;pointer-events:none}.studio-editor .visual-canvas .connection-line.outcome-line{stroke-width:2.5}.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 .properties-widget-section{min-height:0}.studio-editor .properties-panel .properties-body .workflow-panel-section{margin-bottom:1.5rem}.studio-editor .properties-panel .properties-body .workflow-panel-section h5{margin:0 0 .75rem;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px}.studio-editor .properties-panel .properties-body .workflow-panel-section .form-group{margin-bottom:.75rem}.studio-editor .properties-panel .properties-body .workflow-panel-section .form-group label{font-size:.75rem}.studio-editor .properties-panel .properties-body .workflow-panel-section .form-group input,.studio-editor .properties-panel .properties-body .workflow-panel-section .form-group textarea{font-size:.8125rem}.studio-editor .properties-panel .properties-body .workflow-info-table{display:flex;flex-direction:column;gap:.5rem}.studio-editor .properties-panel .properties-body .workflow-info-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem 0;border-bottom:1px solid #f1f5f9}.studio-editor .properties-panel .properties-body .workflow-info-row:last-child{border-bottom:none}.studio-editor .properties-panel .properties-body .info-label{font-size:.8125rem;font-weight:500;color:#64748b;flex-shrink:0}.studio-editor .properties-panel .properties-body .info-value{font-size:.8125rem;color:#1e293b;text-align:right;word-break:break-all}.studio-editor .properties-panel .properties-body .info-actions{display:flex;align-items:center;gap:.5rem}.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{padding:0 1.5rem}.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: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.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: AXButtonGroupModule }, { kind: "component", type: i2$1.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "fitParent", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i2$1.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i6.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPPropertyViewerComponent, selector: "axp-property-viewer", inputs: ["tabsInput", "mode", "bindingExpressionEditorMode"], outputs: ["onChanged"] }, { 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: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { 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", "activityDragStart"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.JsonPipe, name: "json" }, { kind: "pipe", type: i7.DatePipe, name: "date" }, { kind: "pipe", type: i5$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WorkflowStudioComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-workflow-studio', standalone: true, imports: [
-                        CommonModule,
-                        FormsModule,
-                        AXButtonModule,
-                        AXButtonGroupModule,
-                        AXDecoratorModule,
-                        AXTextBoxModule,
-                        AXSelectBoxModule,
-                        AXSearchBoxModule,
-                        AXSwitchModule,
-                        AXTabsModule,
-                        AXTranslationModule,
-                        AXPPageLayoutComponent,
-                        AXPPropertyViewerComponent,
-                        AXPThemeLayoutBlockComponent,
-                        AXPThemeLayoutHeaderComponent,
-                        AXPThemeLayoutToolbarComponent,
-                        AXPThemeLayoutStartSideComponent,
-                        AXMActivityCategoriesTreeComponent,
-                    ], providers: [
-                        {
-                            provide: AXPPageLayoutBase,
-                            useExisting: WorkflowStudioComponent,
-                        },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<axp-page-layout>\n  <axp-layout-start-side>\n    <axp-layout-header>\n      <axp-layout-title>{{ '@workflow-management:activities.menus.activity-categories.title' | translate | async }}</axp-layout-title>\n      <axp-layout-toolbar>\n        <ax-search-box\n          [delayTime]=\"300\"\n          [placeholder]=\"'@workflow-management:workflow-studio.components.activity-categories-tree.search-placeholder' | translate | async\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </axp-layout-toolbar>\n    </axp-layout-header>\n    <axp-layout-content>\n      <axp-activity-categories-tree\n        (categoryClick)=\"onCategoryClick($event)\"\n        (activityClick)=\"onActivityClick($event)\"\n        (activityDragStart)=\"onActivityDragStartFromTree($event)\"\n      ></axp-activity-categories-tree>\n    </axp-layout-content>\n  </axp-layout-start-side>\n\n  <axp-page-toolbar>\n    <axp-layout-prefix>\n      <!-- JSON / Visual toggle (same pattern as report view mode) -->\n      <div class=\"studio-editor-tabs\">\n        <ax-button-group class=\"ax-sm\" [selection]=\"'single'\">\n          <ax-button-group-item (onClick)=\"switchTab('json')\" text=\"{{ '@workflow-management:workflow-studio.terms.json-editor' | translate | async }}\" [selected]=\"activeTab() === 'json'\">\n            <ax-prefix>\n              <i class=\"fa-light fa-code\"></i>\n            </ax-prefix>\n          </ax-button-group-item>\n          <ax-button-group-item (onClick)=\"switchTab('visual')\" text=\"{{ '@workflow-management:workflow-studio.terms.visual-designer' | translate | async }}\" [selected]=\"activeTab() === 'visual'\">\n            <ax-prefix>\n              <i class=\"fa-light fa-diagram-project\"></i>\n            </ax-prefix>\n          </ax-button-group-item>\n        </ax-button-group>\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\" [value]=\"workflowJson()\"\n                (input)=\"onWorkflowJsonInput($event)\"\n                [placeholder]=\"'@workflow-management:workflow-studio.components.json-editor.placeholder' | translate | async\"\n                spellcheck=\"false\"></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                  <ax-button look=\"blank\" class=\"ax-sm\" [attr.title]=\"'@workflow-management:workflow-studio.components.canvas-toolbar.zoom-to-fit.title' | translate | async\" (onClick)=\"canvasZoomToFit()\">\n                    <ax-prefix><i class=\"fa-light fa-expand\"></i></ax-prefix>\n                  </ax-button>\n                  <ax-button look=\"blank\" class=\"ax-sm\" [attr.title]=\"'@workflow-management:workflow-studio.components.canvas-toolbar.center.title' | translate | async\" (onClick)=\"canvasCenter()\">\n                    <ax-prefix><i class=\"fa-light fa-crosshairs\"></i></ax-prefix>\n                  </ax-button>\n                  <ax-button look=\"blank\" class=\"ax-sm\" [attr.title]=\"'@workflow-management:workflow-studio.components.canvas-toolbar.auto-layout.title' | translate | async\" (onClick)=\"canvasAutoLayout()\">\n                    <ax-prefix><i class=\"fa-light fa-sitemap\"></i></ax-prefix>\n                  </ax-button>\n                  <span class=\"toolbar-sep\"></span>\n                  <label class=\"toolbar-auto-save\">\n                    <ax-switch [value]=\"autoSaveEnabled()\" (valueChange)=\"autoSaveEnabled.set($event)\"></ax-switch>\n                    <span>{{ '@workflow-management:workflow-studio.components.canvas-toolbar.auto-save' | translate | async }}</span>\n                  </label>\n                  <span class=\"toolbar-sep\"></span>\n                  <ax-button look=\"blank\" class=\"ax-sm\" [attr.title]=\"'@workflow-management:workflow-studio.components.canvas-toolbar.clear-canvas.title' | translate | async\" (onClick)=\"clearCanvas()\">\n                    <ax-prefix><i class=\"fa-light fa-trash\"></i></ax-prefix>\n                  </ax-button>\n                  <ax-button look=\"blank\" class=\"ax-sm\" [attr.title]=\"'@workflow-management:workflow-studio.components.canvas-toolbar.convert-to-json.title' | translate | async\" (onClick)=\"visualToJson()\">\n                    <ax-prefix><i class=\"fa-light fa-code\"></i></ax-prefix>\n                  </ax-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 #canvasAreaRef 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 }} \u00E2\u2020\u2019 {{ 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\" dominant-baseline=\"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                    @let sx = node.position.x + 75;\n                    @let sy = node.position.y + 40;\n                    @let tx = targetNode.position.x + 75;\n                    @let ty = targetNode.position.y - 50;\n                    @let pathD = getConnectionPath(sx, sy, tx, ty);\n                    <g class=\"connection-group\">\n                      <path [attr.d]=\"pathD\" class=\"connection-line connection-hit\" fill=\"none\" stroke=\"transparent\"\n                        stroke-width=\"16\" pointer-events=\"stroke\" (dblclick)=\"disconnectNodes(node.id, targetId)\">\n                      </path>\n                      <path [attr.d]=\"pathD\" class=\"connection-line\" fill=\"none\" stroke=\"#64748b\" stroke-width=\"2\"\n                        stroke-linecap=\"round\" marker-end=\"url(#arrowhead-default)\" pointer-events=\"none\">\n                      </path>\n                      <title>{{ '@workflow-management:workflow-studio.components.canvas-toolbar.connection-remove-hint' | translate | async }}</title>\n                    </g>\n                    }\n                    }\n                    }\n                    }\n\n                    <defs>\n                      <!-- Arrow markers: larger, rounded tip on line end (refX so tip touches path end) -->\n                      <marker id=\"arrowhead-default\" markerWidth=\"12\" markerHeight=\"12\" refX=\"10\" refY=\"4\" orient=\"auto\">\n                        <polygon points=\"0 0, 12 4, 0 8\" fill=\"#64748b\" />\n                      </marker>\n                      <marker id=\"arrowhead-primary\" markerWidth=\"12\" markerHeight=\"12\" refX=\"10\" refY=\"4\" orient=\"auto\">\n                        <polygon points=\"0 0, 12 4, 0 8\" fill=\"#8b5cf6\" />\n                      </marker>\n                      <marker id=\"arrowhead-success\" markerWidth=\"12\" markerHeight=\"12\" refX=\"10\" refY=\"4\" orient=\"auto\">\n                        <polygon points=\"0 0, 12 4, 0 8\" fill=\"#10b981\" />\n                      </marker>\n                      <marker id=\"arrowhead-error\" markerWidth=\"12\" markerHeight=\"12\" refX=\"10\" refY=\"4\" orient=\"auto\">\n                        <polygon points=\"0 0, 12 4, 0 8\" fill=\"#ef4444\" />\n                      </marker>\n                      <marker id=\"arrowhead-warning\" markerWidth=\"12\" markerHeight=\"12\" refX=\"10\" refY=\"4\" orient=\"auto\">\n                        <polygon points=\"0 0, 12 4, 0 8\" fill=\"#f59e0b\" />\n                      </marker>\n                      <marker id=\"arrowhead-info\" markerWidth=\"12\" markerHeight=\"12\" refX=\"10\" refY=\"4\" orient=\"auto\">\n                        <polygon points=\"0 0, 12 4, 0 8\" 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                      <span class=\"node-delete-wrap\" (click)=\"$event.stopPropagation()\">\n                        <ax-button look=\"blank\" size=\"sm\" class=\"node-delete\" (onClick)=\"deleteNodeFromCanvas(node.id)\">\n                          <ax-prefix><i class=\"fa-light fa-times\"></i></ax-prefix>\n                        </ax-button>\n                      </span>\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>{{ '@workflow-management:workflow-studio.components.canvas-empty-state.title' | translate | async }}</p>\n                    <small>{{ '@workflow-management:workflow-studio.components.canvas-empty-state.description' | translate | async }}</small>\n                  </div>\n                  }\n                </div>\n              </div>\n\n              <!-- Workflow Panel (when no node selected, Elsa-style) -->\n              @if (!selectedNode() && showPropertiesPanel()) {\n              <div class=\"properties-panel workflow-panel\">\n                <div class=\"properties-header\">\n                  <i class=\"fa-light fa-diagram-project\"></i>\n                  <h4>{{ '@workflow-management:workflow-studio.components.workflow-panel.title' | translate | async }}</h4>\n                  <div class=\"header-actions\">\n                    <ax-button look=\"blank\" size=\"sm\" [title]=\"'@workflow-management:workflow-studio.components.properties-panel.actions.close-panel' | translate | async\" (onClick)=\"togglePropertiesPanel()\">\n                      <ax-prefix><i class=\"fa-light fa-angle-right\"></i></ax-prefix>\n                    </ax-button>\n                  </div>\n                </div>\n                <div class=\"properties-body\">\n                  <section class=\"workflow-panel-section\">\n                    <h5>{{ '@workflow-management:workflow-studio.components.workflow-panel.metadata' | translate | async }}</h5>\n                    <div class=\"property-row\">\n                      <label>{{ '@workflow-management:workflow-studio.components.workflow-panel.name' | translate | async }}</label>\n                      <ax-text-box class=\"form-input\" [value]=\"workflowSettings().name\" [disabled]=\"true\" />\n                    </div>\n                    <div class=\"property-row\">\n                      <label>{{ '@workflow-management:workflow-studio.components.workflow-panel.description' | translate | async }}</label>\n                      <ax-text-box class=\"form-input\" [value]=\"workflowSettings().description\" [disabled]=\"true\" />\n                    </div>\n                  </section>\n                  <div class=\"properties-divider\"></div>\n                  <section class=\"workflow-panel-section\">\n                    <h5>{{ '@workflow-management:workflow-studio.components.workflow-panel.information' | translate | async }}</h5>\n                    <div class=\"workflow-info-table\">\n                      <div class=\"workflow-info-row\">\n                        <span class=\"info-label\">{{ '@workflow-management:workflow-studio.components.workflow-panel.definition-id' | translate | async }}</span>\n                        <span class=\"info-actions\">\n                          <ax-button look=\"blank\" size=\"sm\" [title]=\"'@workflow-management:workflow-studio.components.workflow-panel.copy' | translate | async\" (onClick)=\"copyDefinitionIdToClipboard()\">\n                            <ax-prefix><i class=\"fa-light fa-copy\"></i></ax-prefix>\n                          </ax-button>\n                        </span>\n                        <span class=\"info-value\">{{ workflowSettings().definitionId || 'new-workflow' }}</span>\n                      </div>\n                      <div class=\"workflow-info-row\">\n                        <span class=\"info-label\">{{ '@workflow-management:workflow-studio.components.workflow-panel.version' | translate | async }}</span>\n                        <span class=\"info-value\">{{ workflowSettings().version }}</span>\n                      </div>\n                      <div class=\"workflow-info-row\">\n                        <span class=\"info-label\">{{ '@workflow-management:workflow-studio.components.workflow-panel.status' | translate | async }}</span>\n                        <span class=\"info-value\">{{ workflowSettings().isPublished ? ('@workflow-management:workflow-studio.components.workflow-panel.published' | translate | async) : ('@workflow-management:workflow-studio.components.workflow-panel.draft' | translate | async) }}</span>\n                      </div>\n                      <div class=\"workflow-info-row\">\n                        <span class=\"info-label\">{{ '@workflow-management:workflow-studio.components.workflow-panel.usable-as-activity' | translate | async }}</span>\n                        <span class=\"info-value\">{{ workflowSettings().usableAsActivity ? ('@general:terms.common.yes-no.yes' | translate | async) : ('@general:terms.common.yes-no.no' | translate | async) }}</span>\n                      </div>\n                    </div>\n                  </section>\n                  <p class=\"properties-hint\">{{ '@workflow-management:workflow-studio.components.workflow-panel.settings-hint' | translate | async }}</p>\n                </div>\n              </div>\n              }\n\n              <!-- Properties Panel (when a node is selected) -->\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                    <ax-button look=\"blank\" size=\"sm\" [title]=\"'@workflow-management:workflow-studio.components.properties-panel.actions.close-panel' | translate | async\" (onClick)=\"togglePropertiesPanel()\">\n                      <ax-prefix><i class=\"fa-light fa-angle-right\"></i></ax-prefix>\n                    </ax-button>\n                    <ax-button look=\"blank\" size=\"sm\" [title]=\"'@workflow-management:workflow-studio.components.properties-panel.actions.close' | translate | async\" (onClick)=\"selectedNode.set(null)\">\n                      <ax-prefix><i class=\"fa-light fa-times\"></i></ax-prefix>\n                    </ax-button>\n                  </div>\n                </div>\n                <div class=\"properties-body\">\n                  @if (propertyViewerTabs().length > 0) {\n                  <div class=\"properties-widget-section\">\n                    <axp-property-viewer\n                      #propertyViewerRef\n                      [tabsInput]=\"propertyViewerTabs()\"\n                      [mode]=\"'simple'\"\n                      (onChanged)=\"onPropertyViewerChanged($event)\">\n                    </axp-property-viewer>\n                  </div>\n                  } @else {\n                  <div class=\"property-row\">\n                    <label>{{ '@workflow-management:workflow-studio.components.properties-panel.fields.id' | translate | async }}:</label>\n                    <ax-text-box class=\"form-input\" [value]=\"selectedNode()!.id\" [disabled]=\"true\" />\n                  </div>\n                  <div class=\"property-row\">\n                    <label>{{ '@workflow-management:workflow-studio.components.properties-panel.fields.type' | translate | async }}:</label>\n                    <ax-text-box class=\"form-input\" [value]=\"selectedNode()!.type\" [disabled]=\"true\" />\n                  </div>\n                  <div class=\"property-row\">\n                    <label>{{ '@workflow-management:workflow-studio.components.properties-panel.fields.name' | translate | async }}:</label>\n                    <ax-text-box class=\"form-input\" [value]=\"selectedNode()!.name\"\n                      (valueChange)=\"updateNodeProperty(selectedNode()!.id, 'name', $event)\" />\n                  </div>\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\n                  <h5>\u00F0\u0178\u201D\u2014 {{ '@workflow-management:workflow-studio.components.properties-panel.sections.connections' | translate | async }}</h5>\n                  <small class=\"properties-hint\">{{ '@workflow-management:workflow-studio.components.properties-panel.sections.connections-hint' | translate | async }}</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                      <ax-button look=\"blank\" size=\"sm\" class=\"remove-btn\"\n                        [title]=\"'@workflow-management:workflow-studio.components.properties-panel.actions.remove-connection' | translate | async\"\n                        (onClick)=\"disconnectNodes(selectedNode()!.id, conn.targetNodeId, conn.outcome)\">\n                        <ax-prefix><i class=\"fa-light fa-times\"></i></ax-prefix>\n                      </ax-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                      <ax-button look=\"blank\" size=\"sm\" class=\"remove-btn\"\n                        [title]=\"'@workflow-management:workflow-studio.components.properties-panel.actions.remove-connection' | translate | async\"\n                        (onClick)=\"disconnectNodes(selectedNode()!.id, targetId)\">\n                        <ax-prefix><i class=\"fa-light fa-times\"></i></ax-prefix>\n                      </ax-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>\u00F0\u0178\u201C\u00A4 {{ '@workflow-management:workflow-studio.components.properties-panel.sections.available-outcomes' | translate | async }}</h5>\n                  <small class=\"properties-hint\">{{ '@workflow-management:workflow-studio.components.properties-panel.sections.available-outcomes-hint' | translate | async }}</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>\u00F0\u0178\u201C\u009D {{ '@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 (!showPropertiesPanel()) {\n              <ax-button look=\"blank\" class=\"sidebar-toggle-btn right\" (onClick)=\"togglePropertiesPanel()\"\n                [title]=\"selectedNode() ? ('@workflow-management:workflow-studio.components.properties-panel.actions.show-panel' | translate | async) : ('@workflow-management:workflow-studio.components.workflow-panel.show-panel' | translate | async)\">\n                <ax-prefix><i class=\"fa-light fa-sliders\"></i></ax-prefix>\n              </ax-button>\n              }\n            </div>\n            }\n          </div>\n        </div>\n\n      </div>\n\n      <!-- Workflow Settings: opened via Layout Builder dialog in openWorkflowSettings() -->\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            <ax-button look=\"blank\" size=\"sm\" class=\"close-btn\" [disabled]=\"isExecuting()\" (onClick)=\"closeExecutionDialog()\">\n              <ax-prefix><i class=\"fa-light fa-times\"></i></ax-prefix>\n            </ax-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>\u00D9\u0081\u00D8\u00B1\u00D8\u00A2\u00DB\u0152\u00D9\u2020\u00D8\u00AF \u00D8\u00AB\u00D8\u00A8\u00D8\u00AA\u00E2\u20AC\u0152\u00D9\u2020\u00D8\u00A7\u00D9\u2026</h3>\n                <p class=\"registration-desc\">\n                  \u00D8\u00A7\u00DB\u0152\u00D9\u2020 \u00D9\u0081\u00D9\u201E\u00D9\u02C6 \u00D8\u00B4\u00D8\u00A7\u00D9\u2026\u00D9\u201E \u00DA\u2020\u00D9\u2020\u00D8\u00AF \u00D9\u2026\u00D8\u00B1\u00D8\u00AD\u00D9\u201E\u00D9\u2021 \u00D8\u00A7\u00D8\u00B3\u00D8\u00AA \u00DA\u00A9\u00D9\u2021 \u00D8\u00AF\u00D8\u00A7\u00D8\u00AF\u00D9\u2021\u00E2\u20AC\u0152\u00D9\u2021\u00D8\u00A7\u00DB\u0152 \u00DA\u00A9\u00D8\u00A7\u00D8\u00B1\u00D8\u00A8\u00D8\u00B1 \u00D8\u00B1\u00D8\u00A7 \u00D8\u00AC\u00D9\u2026\u00D8\u00B9\u00E2\u20AC\u0152\u00D8\u00A2\u00D9\u02C6\u00D8\u00B1\u00DB\u0152 \u00DA\u00A9\u00D8\u00B1\u00D8\u00AF\u00D9\u2021 \u00D9\u02C6 \u00D8\u00AF\u00D8\u00B1 \u00D9\u2020\u00D9\u2021\u00D8\u00A7\u00DB\u0152\u00D8\u00AA \u00D8\u00AD\u00D8\u00B3\u00D8\u00A7\u00D8\u00A8 \u00DA\u00A9\u00D8\u00A7\u00D8\u00B1\u00D8\u00A8\u00D8\u00B1\u00DB\u0152 \u00D8\u00A7\u00DB\u0152\u00D8\u00AC\u00D8\u00A7\u00D8\u00AF \u00D9\u2026\u00DB\u0152\u00E2\u20AC\u0152\u00DA\u00A9\u00D9\u2020\u00D8\u00AF.\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>\u00D8\u00AF\u00D8\u00B1 \u00D8\u00AD\u00D8\u00A7\u00D9\u201E \u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7\u00DB\u0152 \u00D9\u2026\u00D8\u00B1\u00D8\u00A7\u00D8\u00AD\u00D9\u201E \u00D8\u00AB\u00D8\u00A8\u00D8\u00AA\u00E2\u20AC\u0152\u00D9\u2020\u00D8\u00A7\u00D9\u2026...</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>\u00D8\u00AB\u00D8\u00A8\u00D8\u00AA\u00E2\u20AC\u0152\u00D9\u2020\u00D8\u00A7\u00D9\u2026 \u00D8\u00A8\u00D8\u00A7 \u00D9\u2026\u00D9\u02C6\u00D9\u0081\u00D9\u201A\u00DB\u0152\u00D8\u00AA \u00D8\u00A7\u00D9\u2020\u00D8\u00AC\u00D8\u00A7\u00D9\u2026 \u00D8\u00B4\u00D8\u00AF!</h4>\n                  <p>\u00D8\u00AD\u00D8\u00B3\u00D8\u00A7\u00D8\u00A8 \u00DA\u00A9\u00D8\u00A7\u00D8\u00B1\u00D8\u00A8\u00D8\u00B1\u00DB\u0152 \u00D8\u00B4\u00D9\u2026\u00D8\u00A7 \u00D8\u00A7\u00DB\u0152\u00D8\u00AC\u00D8\u00A7\u00D8\u00AF \u00D8\u00B4\u00D8\u00AF \u00D9\u02C6 \u00D8\u00A8\u00D9\u2021 \u00D8\u00B2\u00D9\u02C6\u00D8\u00AF\u00DB\u0152 \u00D8\u00A8\u00D9\u2021 \u00D8\u00AF\u00D8\u00A7\u00D8\u00B4\u00D8\u00A8\u00D9\u02C6\u00D8\u00B1\u00D8\u00AF \u00D9\u2026\u00D9\u2020\u00D8\u00AA\u00D9\u201A\u00D9\u201E \u00D8\u00AE\u00D9\u02C6\u00D8\u00A7\u00D9\u2021\u00DB\u0152\u00D8\u00AF \u00D8\u00B4\u00D8\u00AF.</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>\u00D8\u00AF\u00D8\u00B1 \u00D8\u00AD\u00D8\u00A7\u00D9\u201E \u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7...</h3>\n                  <p>Workflow \u00D8\u00AF\u00D8\u00B1 \u00D8\u00AD\u00D8\u00A7\u00D9\u201E \u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7 \u00D8\u00A7\u00D8\u00B3\u00D8\u00AA. \u00D9\u201E\u00D8\u00B7\u00D9\u0081\u00D8\u00A7\u00D9\u2039 \u00D8\u00B5\u00D8\u00A8\u00D8\u00B1 \u00DA\u00A9\u00D9\u2020\u00DB\u0152\u00D8\u00AF.</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>\u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7 \u00D8\u00A8\u00D8\u00A7 \u00D9\u2026\u00D9\u02C6\u00D9\u0081\u00D9\u201A\u00DB\u0152\u00D8\u00AA \u00D8\u00AA\u00DA\u00A9\u00D9\u2026\u00DB\u0152\u00D9\u201E \u00D8\u00B4\u00D8\u00AF</h3>\n                  <p>Workflow \u00D8\u00A8\u00D8\u00A7 \u00D9\u2026\u00D9\u02C6\u00D9\u0081\u00D9\u201A\u00DB\u0152\u00D8\u00AA \u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7 \u00D8\u00B4\u00D8\u00AF \u00D9\u02C6 \u00D8\u00AA\u00D9\u2026\u00D8\u00A7\u00D9\u2026 Activities \u00D8\u00A7\u00D9\u2020\u00D8\u00AC\u00D8\u00A7\u00D9\u2026 \u00D8\u00B4\u00D8\u00AF\u00D9\u2020\u00D8\u00AF.</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>\u00D8\u00AE\u00D8\u00B7\u00D8\u00A7 \u00D8\u00AF\u00D8\u00B1 \u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7</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> \u00D9\u201E\u00D8\u00A7\u00DA\u00AF\u00E2\u20AC\u0152\u00D9\u2021\u00D8\u00A7\u00DB\u0152 \u00D8\u00A7\u00D8\u00AC\u00D8\u00B1\u00D8\u00A7</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                \u00D8\u00B4\u00D8\u00B1\u00D9\u02C6\u00D8\u00B9: {{ 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                \u00D9\u00BE\u00D8\u00A7\u00DB\u0152\u00D8\u00A7\u00D9\u2020: {{ 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>\n", 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}.studio-editor-tabs ax-button-group-item[selected],.studio-editor-tabs ax-button-group-item.ax-selected{font-weight:600;opacity:1}.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:1fr;gap:0;flex:1;overflow:hidden;transition:grid-template-columns .3s ease}.studio-body.sidebar-hidden,.studio-body.properties-hidden,.studio-body.sidebar-hidden.properties-hidden{grid-template-columns:1fr}.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:var(--ax-surface, white);border-bottom:1px solid var(--ax-border, #e2e8f0)}.studio-editor .visual-canvas .canvas-toolbar .tool-btn{padding:.5rem .75rem;background:var(--ax-surface-alt, #f8fafc);border:1px solid var(--ax-border, #e2e8f0);border-radius:6px;color:var(--ax-text-muted, #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 .toolbar-sep{width:1px;height:1.25rem;background:var(--ax-border, #e2e8f0);flex-shrink:0}.studio-editor .visual-canvas .canvas-toolbar .toolbar-auto-save{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--ax-text-muted, #64748b);cursor:default}.studio-editor .visual-canvas .canvas-toolbar .toolbar-auto-save ax-switch{flex-shrink:0}.studio-editor .visual-canvas .canvas-toolbar .tool-info{flex:1;display:flex;align-items:center;gap:.5rem;min-height:1.75rem;font-size:.8125rem;color:var(--ax-text-muted, #64748b);line-height:1.4}.studio-editor .visual-canvas .canvas-toolbar .tool-info strong{font-weight:600}.studio-editor .visual-canvas .canvas-toolbar .tool-info i{font-size:1rem;color:#8b5cf6;flex-shrink:0}.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{fill:none;transition:stroke .2s}.studio-editor .visual-canvas .connection-line.connection-hit{stroke:transparent;stroke-width:16;cursor:pointer;pointer-events:stroke}.studio-editor .visual-canvas .connection-line.connection-hit:hover~.outcome-line,.studio-editor .visual-canvas .connection-line.connection-hit:hover~.connection-line:not(.connection-hit){filter:brightness(.9)}.studio-editor .visual-canvas .connection-line:not(.connection-hit){stroke-linecap:round;pointer-events:none}.studio-editor .visual-canvas .connection-line.outcome-line{stroke-width:2.5}.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 .properties-widget-section{min-height:0}.studio-editor .properties-panel .properties-body .workflow-panel-section{margin-bottom:1.5rem}.studio-editor .properties-panel .properties-body .workflow-panel-section h5{margin:0 0 .75rem;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px}.studio-editor .properties-panel .properties-body .workflow-panel-section .form-group{margin-bottom:.75rem}.studio-editor .properties-panel .properties-body .workflow-panel-section .form-group label{font-size:.75rem}.studio-editor .properties-panel .properties-body .workflow-panel-section .form-group input,.studio-editor .properties-panel .properties-body .workflow-panel-section .form-group textarea{font-size:.8125rem}.studio-editor .properties-panel .properties-body .workflow-info-table{display:flex;flex-direction:column;gap:.5rem}.studio-editor .properties-panel .properties-body .workflow-info-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem 0;border-bottom:1px solid #f1f5f9}.studio-editor .properties-panel .properties-body .workflow-info-row:last-child{border-bottom:none}.studio-editor .properties-panel .properties-body .info-label{font-size:.8125rem;font-weight:500;color:#64748b;flex-shrink:0}.studio-editor .properties-panel .properties-body .info-value{font-size:.8125rem;color:#1e293b;text-align:right;word-break:break-all}.studio-editor .properties-panel .properties-body .info-actions{display:flex;align-items:center;gap:.5rem}.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{padding:0 1.5rem}.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"] }]
-        }], propDecorators: { propertyViewerRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPPropertyViewerComponent), { isSignal: true }] }], canvasAreaRef: [{ type: i0.ViewChild, args: ['canvasAreaRef', { isSignal: true }] }] } });
-
-var workflowStudio_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    WorkflowStudioComponent: WorkflowStudioComponent
-});
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXCCategoryProvider, AXMActivityCategoriesTreeComponent, AXMMenuProvider, AXMWorkflowActivitiesDefinitionProvider, AXMWorkflowManagementModule, AXMWorkflowManagementModuleEntityProvider, AXPCreateEntityActivity, AXPGenericWorkflowTaskProvider, AXP_GENERIC_WORKFLOW_TASK_PROVIDER_CONFIG, CartableTaskActivity, CollectSignatureActivity, CreateEntityFormActivity, HumanTaskActivity, RootConfig, ShowConfirmPopupActivity, ShowLayoutPopupActivity, ShowToastActivity, WorkflowStudioComponent };
+export { AXCCategoryProvider, AXMMenuProvider, AXMWorkflowActivitiesDefinitionProvider, AXMWorkflowManagementModule, AXMWorkflowManagementModuleEntityProvider, AXPCreateEntityActivity, AXPGenericWorkflowTaskProvider, AXP_GENERIC_WORKFLOW_TASK_PROVIDER_CONFIG, CartableTaskActivity, CollectSignatureActivity, CreateEntityFormActivity, HumanTaskActivity, RootConfig, ShowConfirmPopupActivity, ShowLayoutPopupActivity, ShowToastActivity };
 //# sourceMappingURL=acorex-modules-workflow-management.mjs.map