@masterteam/flowplus-workflow 0.0.2 → 0.0.4

package/fesm2022/masterteam-flowplus-workflow.mjs

@@ -27,7 +27,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DateField } from '@masterteam/components/date-field';
 import { ToastService } from '@masterteam/components/toast';
 import * as i1$2 from '@foblex/flow';
-import { FExternalItem, FExternalItemPreview, FFlowModule, EFMarkerType, provideFFlow, withReflowOnResize, EFReflowDeltaSource, EFReflowCollision } from '@foblex/flow';
+import { FExternalItem, FExternalItemPreview, EFResizeHandleType, FFlowModule, EFMarkerType, EFCanvasLayer, provideFFlow, withReflowOnResize, EFReflowDeltaSource, EFReflowCollision } from '@foblex/flow';
 import { Avatar } from '@masterteam/components/avatar';
 import { RadioCardsField } from '@masterteam/components/radio-cards-field';
 import { DynamicForm } from '@masterteam/forms/dynamic-form';
@@ -1244,16 +1244,16 @@ function defaultApprovalDecisionValues(routeOutputKeys) {
 function dynamicRouteOutputKeysForConfig$2(nodeType, config) {
     if (nodeType === 'ParallelStart') {
         return uniqueStrings$2(readArrayRecords$3(config['branches'])
-            .map((branch) => readString$d(branch, 'key'))
+            .map((branch) => readString$e(branch, 'key'))
             .filter((key) => !!key?.trim()));
     }
     if (nodeType === 'Switch') {
         const caseKeys = readArrayRecords$3(config['cases'])
-            .map((item) => readString$d(item, 'key'))
+            .map((item) => readString$e(item, 'key'))
             .filter((key) => !!key?.trim())
             .map((key) => switchCaseRouteKey$3(key));
-        const defaultKey = readString$d(config, 'defaultOutputKey') ??
-            readString$d(config, 'defaultCaseKey') ??
+        const defaultKey = readString$e(config, 'defaultOutputKey') ??
+            readString$e(config, 'defaultCaseKey') ??
             'default';
         return uniqueStrings$2([
             ...caseKeys,
@@ -1397,7 +1397,7 @@ function readRecord$3(value) {
         ? value
         : null;
 }
-function readString$d(record, key) {
+function readString$e(record, key) {
     const value = record?.[key];
     return typeof value === 'string' ? value : undefined;
 }
@@ -1593,19 +1593,19 @@ function automationBuilderCatalogToWorkflowCatalog(catalog) {
     const triggerTypes = (catalog.triggerTypes ?? []).map((item) => {
         const raw = asRecord$7(item);
         const type = catalogTriggerType$2(item);
-        const key = readString$c(raw, 'key') ?? type;
+        const key = readString$d(raw, 'key') ?? type;
         return {
             key,
             value: type,
             label: primaryText(item.displayName) ?? type,
             displayName: item.displayName ?? type,
             description: item.description ?? null,
-            icon: readString$c(raw, 'icon') ?? readString$c(raw, 'iconKey') ?? null,
+            icon: readString$d(raw, 'icon') ?? readString$d(raw, 'iconKey') ?? null,
             metadata: {
                 automationTriggerType: true,
                 type,
                 triggerType: type,
-                category: readString$c(raw, 'category') ?? null,
+                category: readString$d(raw, 'category') ?? null,
                 configSchema: item.configSchema ?? null,
                 authPolicySchema: item.authPolicySchema ?? null,
                 payloadSchema: item.payloadSchema ?? null,
@@ -1776,8 +1776,8 @@ function workflowMetadataRequestToAutomationMetadata(request) {
         name: primaryText(request.name) ?? 'Untitled automation',
     };
     const description = primaryText(request.description);
-    const ownerId = readString$c(metadata, 'ownerId');
-    const projectId = readString$c(metadata, 'projectId');
+    const ownerId = readString$d(metadata, 'ownerId');
+    const projectId = readString$d(metadata, 'projectId');
     if (description)
         payload.description = description;
     if (ownerId)
@@ -1793,17 +1793,17 @@ function workflowStepToAutomationNodeRequest(step, existing) {
     };
     const key = step.key ??
         existing?.key ??
-        readString$c(metadata, 'nodeKey') ??
+        readString$d(metadata, 'nodeKey') ??
         keyFromText(step.name ?? existing?.name ?? 'node');
     const type = String(step.type ?? existing?.type ?? 'SetFields');
     const mergedConfig = {
         ...readConfigFromStep(existing),
         ...readConfigFromStep(step),
     };
-    const configJson = readString$c(metadata, 'configJson') ?? stringifyJson$1(mergedConfig) ?? '{}';
+    const configJson = readString$d(metadata, 'configJson') ?? stringifyJson$1(mergedConfig) ?? '{}';
     const positionJson = layoutToJson(step.layout) ??
         layoutToJson(existing?.layout) ??
-        readString$c(metadata, 'positionJson') ??
+        readString$d(metadata, 'positionJson') ??
         stringifyJson$1(readRecord$2(metadata, 'position')) ??
         '{}';
     const nodeType = String(step.type ?? existing?.type ?? 'SetFields');
@@ -1817,7 +1817,7 @@ function workflowStepToAutomationNodeRequest(step, existing) {
         timeoutPolicyJson: jsonField(metadata, 'timeoutPolicyJson', '{}'),
         retryPolicyJson: jsonField(metadata, 'retryPolicyJson', '{}'),
         errorPolicyJson: jsonField(metadata, 'errorPolicyJson', '{}'),
-        sideEffectPolicy: readString$c(metadata, 'sideEffectPolicy') ??
+        sideEffectPolicy: readString$d(metadata, 'sideEffectPolicy') ??
             defaultSideEffectPolicyForNodeType(nodeType),
     };
 }
@@ -1850,7 +1850,7 @@ function workflowTriggerToAutomationTriggerRequest(trigger, existing) {
         ...(asRecord$7(trigger.metadata) ?? {}),
     };
     const type = String(trigger.type ?? existing?.type ?? 'ManualTrigger');
-    const key = readString$c(metadata, 'triggerKey') ??
+    const key = readString$d(metadata, 'triggerKey') ??
         trigger.webhookKey ??
         existing?.webhookKey ??
         keyFromText(`${type}_trigger`);
@@ -1860,7 +1860,20 @@ function workflowTriggerToAutomationTriggerRequest(trigger, existing) {
         ...parseJsonObject$4(trigger.configJson),
         ...readRecord$2(metadata, 'config'),
     };
-    const startNodeKey = readString$c(metadata, 'startNodeKey') ?? readString$c(config, 'startNodeKey');
+    const layout = readRecord$2(metadata, 'layout');
+    const layoutX = readNumber$5(layout, 'x');
+    const layoutY = readNumber$5(layout, 'y');
+    if (layoutX != null && layoutY != null) {
+        const ui = { ...readRecord$2(config['ui']) };
+        ui['layout'] = {
+            x: layoutX,
+            y: layoutY,
+            width: readNumber$5(layout, 'width') ?? null,
+            height: readNumber$5(layout, 'height') ?? null,
+        };
+        config['ui'] = ui;
+    }
+    const startNodeKey = readString$d(metadata, 'startNodeKey') ?? readString$d(config, 'startNodeKey');
     if (startNodeKey)
         config['startNodeKey'] = startNodeKey;
     return {
@@ -1872,7 +1885,7 @@ function workflowTriggerToAutomationTriggerRequest(trigger, existing) {
             existing?.isEnabled ??
             existing?.enabled ??
             true,
-        configJson: trigger.configJson ?? stringifyJson$1(config) ?? '{}',
+        configJson: stringifyJson$1(config) ?? '{}',
         schemaJson: trigger.schemaJson ??
             existing?.schemaJson ??
             stringifyJson$1(trigger.payloadSchema) ??
@@ -1897,37 +1910,37 @@ function workflowConnectionToAutomationRouteRequest(connection, index, existing)
     const targetStepId = readNumber$5(connectionRecord, 'targetStepId') ??
         existing?.targetStepId ??
         0;
-    const sourceNodeKey = readString$c(metadata, 'sourceNodeKey') ??
+    const sourceNodeKey = readString$d(metadata, 'sourceNodeKey') ??
         index.nodeKeyByStepId.get(sourceStepId) ??
         existing?.sourceStepKey ??
         '';
-    const targetNodeKey = readString$c(metadata, 'targetNodeKey') ??
+    const targetNodeKey = readString$d(metadata, 'targetNodeKey') ??
         index.nodeKeyByStepId.get(targetStepId) ??
         existing?.targetStepKey ??
         '';
-    const sourcePortKey = readString$c(connectionRecord, 'sourcePortKey');
+    const sourcePortKey = readString$d(connectionRecord, 'sourcePortKey');
     const sourceOutputChanged = sourcePortKey != null &&
         existing?.sourcePortKey != null &&
         normalizeRouteKey(sourcePortKey) !== normalizeRouteKey(existing.sourcePortKey);
-    const sourceOutputKey = readString$c(connectionMetadata, 'sourceOutputKey') ??
+    const sourceOutputKey = readString$d(connectionMetadata, 'sourceOutputKey') ??
         sourcePortKey ??
         existing?.sourcePortKey ??
         readSelectedActionKey(connection) ??
         '';
-    const explicitConditionJson = readString$c(connectionMetadata, 'conditionJson') ??
+    const explicitConditionJson = readString$d(connectionMetadata, 'conditionJson') ??
         readExpressionText(connection);
     const preservedConditionJson = sourceOutputChanged
         ? null
-        : (readString$c(existingMetadata, 'conditionJson') ??
+        : (readString$d(existingMetadata, 'conditionJson') ??
             existing?.expressionText ??
             null);
     const conditionJson = explicitConditionJson ??
         preservedConditionJson ??
         defaultConditionJsonForRoute(sourceOutputKey);
-    const routeType = normalizeAutomationRouteType(readString$c(connectionMetadata, 'routeType') ??
-        (sourceOutputChanged ? null : readString$c(existingMetadata, 'routeType')), sourceOutputKey, conditionJson);
+    const routeType = normalizeAutomationRouteType(readString$d(connectionMetadata, 'routeType') ??
+        (sourceOutputChanged ? null : readString$d(existingMetadata, 'routeType')), sourceOutputKey, conditionJson);
     return {
-        routeId: readString$c(metadata, 'routeId') ??
+        routeId: readString$d(metadata, 'routeId') ??
             index.routeIdByConnectionId.get(readNumber$5(connectionRecord, 'id') ?? 0) ??
             null,
         sourceNodeKey,
@@ -1942,11 +1955,11 @@ function findWorkflowStepByNodeKey(builder, nodeKey) {
     return builder.steps.find((step) => step.key === nodeKey) ?? null;
 }
 function findWorkflowTriggerByKey(builder, triggerKey) {
-    return (builder.triggers.find((trigger) => readString$c(asRecord$7(trigger.metadata), 'triggerKey') === triggerKey) ?? null);
+    return (builder.triggers.find((trigger) => readString$d(asRecord$7(trigger.metadata), 'triggerKey') === triggerKey) ?? null);
 }
 function findWorkflowConnectionForRoute(builder, route, routeId) {
     if (routeId != null) {
-        const exact = builder.connections.find((connection) => readString$c(asRecord$7(connection.metadata), 'routeId') ===
+        const exact = builder.connections.find((connection) => readString$d(asRecord$7(connection.metadata), 'routeId') ===
             String(routeId));
         if (exact)
             return exact;
@@ -1958,7 +1971,7 @@ function findWorkflowConnectionForRoute(builder, route, routeId) {
 function automationNodeToWorkflowStep(node, workflowId, index, triggerStartKeys, routeOutputsByType) {
     const raw = asRecord$7(node);
     const nodeKey = node.key || keyFromText(node.name ?? `node_${index}`);
-    const nodeType = readString$c(raw, 'type') ?? readString$c(raw, 'nodeType') ?? 'SetFields';
+    const nodeType = readString$d(raw, 'type') ?? readString$d(raw, 'nodeType') ?? 'SetFields';
     const id = readNumber$5(raw, 'nodeId') ??
         readNumber$5(raw, 'id') ??
         toWorkflowEntityId(nodeKey, `node:${workflowId}`);
@@ -2013,11 +2026,11 @@ function automationNodeToWorkflowStep(node, workflowId, index, triggerStartKeys,
 }
 function automationTriggerToWorkflowTrigger(trigger, workflowId, index) {
     const raw = asRecord$7(trigger);
-    const triggerType = readString$c(raw, 'type') ??
-        readString$c(raw, 'triggerType') ??
+    const triggerType = readString$d(raw, 'type') ??
+        readString$d(raw, 'triggerType') ??
         'ManualTrigger';
     const triggerKey = trigger.key ||
-        readString$c(raw, 'key') ||
+        readString$d(raw, 'key') ||
         keyFromText(`${triggerType}_trigger`);
     const id = readNumber$5(raw, 'triggerId') ??
         readNumber$5(raw, 'id') ??
@@ -2040,7 +2053,7 @@ function automationTriggerToWorkflowTrigger(trigger, workflowId, index) {
         name: toTranslatableText$1(trigger.name || triggerKey),
         enabled,
         isEnabled: enabled,
-        webhookKey: readString$c(config, 'webhookKey') ?? triggerKey,
+        webhookKey: readString$d(config, 'webhookKey') ?? triggerKey,
         workflowKey: triggerKey,
         triggerId: id,
         payloadSchema: parseJsonValue$2(trigger.schemaJson ?? null),
@@ -2058,7 +2071,7 @@ function automationTriggerToWorkflowTrigger(trigger, workflowId, index) {
             layout,
             schemaJson: trigger.schemaJson ?? null,
             authenticationPolicyJson: trigger.authenticationPolicyJson ?? null,
-            startNodeKey: readString$c(config, 'startNodeKey') ?? null,
+            startNodeKey: readString$d(config, 'startNodeKey') ?? null,
         },
     };
 }
@@ -2218,7 +2231,7 @@ function automationDetailToWorkflowLayout(workflowId, steps, connections, trigge
 function automationNodeTypeToWorkflowStepType(item) {
     const raw = asRecord$7(item);
     const type = catalogNodeType$1(item);
-    const key = readString$c(raw, 'key') ?? type;
+    const key = readString$d(raw, 'key') ?? type;
     const routeOutputKeys = readStringArray$7(raw, 'routeOutputKeys');
     const supportsRetry = ['HTTP', 'FlowPlusCommit', 'CallAutomation'].includes(type) ||
         !!item.defaultRetryPolicy;
@@ -2244,9 +2257,9 @@ function automationNodeTypeToWorkflowStepType(item) {
         typeKey: type,
         displayName: item.displayName ?? type,
         description: item.description ?? null,
-        category: readString$c(raw, 'category') ?? categoryForNodeType(type),
-        icon: readString$c(raw, 'icon') ??
-            readString$c(raw, 'iconKey') ??
+        category: readString$d(raw, 'category') ?? categoryForNodeType(type),
+        icon: readString$d(raw, 'icon') ??
+            readString$d(raw, 'iconKey') ??
             iconForNodeType(type),
         colorToken: item.colorToken ?? type,
         tags: [type],
@@ -2322,7 +2335,7 @@ function routeOutputKeysByNodeType(catalog) {
     for (const item of catalog?.nodeTypes ?? []) {
         const raw = asRecord$7(item);
         const type = catalogNodeType$1(item);
-        const key = readString$c(raw, 'key') ?? type;
+        const key = readString$d(raw, 'key') ?? type;
         const keys = readStringArray$7(raw, 'routeOutputKeys');
         out.set(type, keys);
         out.set(key, keys);
@@ -2349,17 +2362,17 @@ function dynamicRouteOutputKeysForConfig$1(nodeType, config) {
     if (nodeType === 'ParallelStart') {
         const branches = arrayRecords(config['branches']);
         return uniqueStrings$1(branches
-            .map((branch) => readString$c(branch, 'key'))
+            .map((branch) => readString$d(branch, 'key'))
             .filter((key) => !!key?.trim()));
     }
     if (nodeType === 'Switch') {
         const cases = arrayRecords(config['cases']);
         const caseKeys = cases
-            .map((item) => readString$c(item, 'key'))
+            .map((item) => readString$d(item, 'key'))
             .filter((key) => !!key?.trim())
             .map((key) => switchCaseRouteKey$2(key));
-        const defaultKey = readString$c(config, 'defaultOutputKey') ??
-            readString$c(config, 'defaultCaseKey') ??
+        const defaultKey = readString$d(config, 'defaultOutputKey') ??
+            readString$d(config, 'defaultCaseKey') ??
             'default';
         return uniqueStrings$1([
             ...caseKeys,
@@ -2400,7 +2413,7 @@ function readConfigFromStep(step) {
         return {};
     const metadata = asRecord$7(step.metadata);
     return stripUndefined({
-        ...parseJsonObject$4(readString$c(metadata, 'configJson')),
+        ...parseJsonObject$4(readString$d(metadata, 'configJson')),
         ...readRecord$2(metadata, 'config'),
         automated: step.automated ?? undefined,
         plugin: step.plugin ?? undefined,
@@ -2465,7 +2478,7 @@ function readTriggerStartNodeKey(trigger) {
         ...parseJsonObject$4(trigger.configJson),
         ...readRecord$2(asRecord$7(trigger), 'config'),
     };
-    return readString$c(config, 'startNodeKey') ?? null;
+    return readString$d(config, 'startNodeKey') ?? null;
 }
 function positionToLayout(workflowId, stepId, stepKey, position, index) {
     return {
@@ -2520,7 +2533,7 @@ function isWorkflowNodeLayout(layout) {
     return !!layout;
 }
 function jsonField(record, jsonKey, fallback) {
-    const existing = readString$c(record, jsonKey);
+    const existing = readString$d(record, jsonKey);
     if (existing != null)
         return existing;
     const valueKey = jsonKey.replace(/Json$/, '');
@@ -2531,14 +2544,14 @@ function readSelectedActionKey(value) {
     const selected = raw['selectedActions'];
     if (!Array.isArray(selected) || selected.length === 0)
         return null;
-    return readString$c(asRecord$7(selected[0]), 'actionKey') ?? null;
+    return readString$d(asRecord$7(selected[0]), 'actionKey') ?? null;
 }
 function readExpressionText(value) {
     const raw = asRecord$7(value);
-    return (readString$c(raw, 'expressionText') ??
-        readString$c(raw, 'expression') ??
-        readString$c(raw, 'formulaRaw') ??
-        readString$c(asRecord$7(raw['formula']), 'expression') ??
+    return (readString$d(raw, 'expressionText') ??
+        readString$d(raw, 'expression') ??
+        readString$d(raw, 'formulaRaw') ??
+        readString$d(asRecord$7(raw['formula']), 'expression') ??
         null);
 }
 function categoryForNodeType(type) {
@@ -2599,23 +2612,23 @@ function defaultSideEffectPolicyForNodeType(type) {
 }
 function catalogNodeType$1(item) {
     const raw = asRecord$7(item);
-    return (readString$c(raw, 'type') ??
-        readString$c(raw, 'nodeType') ??
-        readString$c(raw, 'key') ??
+    return (readString$d(raw, 'type') ??
+        readString$d(raw, 'nodeType') ??
+        readString$d(raw, 'key') ??
         'SetFields');
 }
 function catalogTriggerType$2(item) {
     const raw = asRecord$7(item);
-    return (readString$c(raw, 'type') ??
-        readString$c(raw, 'triggerType') ??
-        readString$c(raw, 'key') ??
+    return (readString$d(raw, 'type') ??
+        readString$d(raw, 'triggerType') ??
+        readString$d(raw, 'key') ??
         'ManualTrigger');
 }
 function namespaceKey(namespace) {
     const raw = asRecord$7(namespace);
-    return (readString$c(raw, 'key') ??
-        readString$c(raw, 'name') ??
-        readString$c(raw, 'label') ??
+    return (readString$d(raw, 'key') ??
+        readString$d(raw, 'name') ??
+        readString$d(raw, 'label') ??
         '$json');
 }
 function namespacePaths(namespace) {
@@ -2647,9 +2660,9 @@ function primaryText(value) {
         return value || null;
     if (value && typeof value === 'object') {
         const raw = value;
-        return (readString$c(raw, 'en') ??
-            readString$c(raw, 'display') ??
-            readString$c(raw, 'ar') ??
+        return (readString$d(raw, 'en') ??
+            readString$d(raw, 'display') ??
+            readString$d(raw, 'ar') ??
             null);
     }
     return null;
@@ -2657,9 +2670,9 @@ function primaryText(value) {
 function toTranslatableText$1(value) {
     if (value && typeof value === 'object' && !Array.isArray(value)) {
         const raw = value;
-        const en = readString$c(raw, 'en');
-        const ar = readString$c(raw, 'ar');
-        const display = readString$c(raw, 'display');
+        const en = readString$d(raw, 'en');
+        const ar = readString$d(raw, 'ar');
+        const display = readString$d(raw, 'display');
         return {
             ...raw,
             en: en ?? ar ?? display ?? '',
@@ -2738,7 +2751,7 @@ function asRecord$7(value) {
         return {};
     return value;
 }
-function readString$c(record, key) {
+function readString$d(record, key) {
     const value = record?.[key];
     return typeof value === 'string' ? value : undefined;
 }
@@ -2752,31 +2765,31 @@ function readBoolean$6(record, key) {
 
 function normalizeWorkflowDefinitionSummaryDto(value) {
     const raw = asRecord$6(value);
-    const moduleType = readString$b(raw, 'moduleType');
-    const primaryModuleKey = readString$b(raw, 'primaryModuleKey');
+    const moduleType = readString$c(raw, 'moduleType');
+    const primaryModuleKey = readString$c(raw, 'primaryModuleKey');
     const isPublished = readBoolean$5(raw, 'isPublished');
     const isValid = readBoolean$5(raw, 'isValid');
     return {
         ...spreadAs(raw),
         id: readNumber$4(raw, 'id'),
-        key: readString$b(raw, 'key'),
+        key: readString$c(raw, 'key'),
         name: toTranslatableText(raw['name']),
         description: toTranslatableText(raw['description']),
-        status: readString$b(raw, 'status') ?? (isPublished ? 'Published' : 'Draft'),
+        status: readString$c(raw, 'status') ?? (isPublished ? 'Published' : 'Draft'),
         isPublished,
         isValid,
         primaryModuleId: readNullableNumber(raw, 'primaryModuleId'),
         primaryModuleKey,
         moduleType,
-        primaryModuleType: readString$b(raw, 'primaryModuleType') ?? moduleType ?? primaryModuleKey,
-        operationType: readString$b(raw, 'operationType'),
-        commandName: readString$b(raw, 'commandName'),
+        primaryModuleType: readString$c(raw, 'primaryModuleType') ?? moduleType ?? primaryModuleKey,
+        operationType: readString$c(raw, 'operationType'),
+        commandName: readString$c(raw, 'commandName'),
         hasUnpublishedChanges: readNullableBoolean(raw, 'hasUnpublishedChanges'),
         version: readNullableNumber(raw, 'version'),
         draftVersion: readNullableNumber(raw, 'draftVersion'),
         publishedVersion: readNullableNumber(raw, 'publishedVersion'),
-        rowVersion: readString$b(raw, 'rowVersion'),
-        triggerType: readString$b(raw, 'triggerType'),
+        rowVersion: readString$c(raw, 'rowVersion'),
+        triggerType: readString$c(raw, 'triggerType'),
     };
 }
 function normalizeWorkflowDefinitionDto(value) {
@@ -2784,9 +2797,9 @@ function normalizeWorkflowDefinitionDto(value) {
 }
 function normalizeWorkflowTriggerDto(value) {
     const raw = asRecord$6(value);
-    const payloadSchemaJson = readString$b(raw, 'payloadSchemaJson') ?? readString$b(raw, 'payloadSchema');
+    const payloadSchemaJson = readString$c(raw, 'payloadSchemaJson') ?? readString$c(raw, 'payloadSchema');
     const metadata = readObject$3(raw, 'metadata') ?? {};
-    const parsedConfig = parseJsonObject$3(readString$b(raw, 'configJson'));
+    const parsedConfig = parseJsonObject$3(readString$c(raw, 'configJson'));
     if (parsedConfig && !metadata['config'])
         metadata['config'] = parsedConfig;
     return {
@@ -2794,8 +2807,8 @@ function normalizeWorkflowTriggerDto(value) {
         id: readNumber$4(raw, 'id'),
         workflowId: readNumber$4(raw, 'workflowId', null) ?? readNumber$4(raw, 'requestSchemaId'),
         requestSchemaId: readNullableNumber(raw, 'requestSchemaId'),
-        type: (readString$b(raw, 'type') ?? 'Manual'),
-        typeKey: readString$b(raw, 'typeKey'),
+        type: (readString$c(raw, 'type') ?? 'Manual'),
+        typeKey: readString$c(raw, 'typeKey'),
         name: toTranslatableText(raw['name']),
         enabled: readNullableBoolean(raw, 'enabled') ??
             readNullableBoolean(raw, 'isEnabled') ??
@@ -2806,24 +2819,24 @@ function normalizeWorkflowTriggerDto(value) {
         payloadSchema: parseJsonSchema(payloadSchemaJson) ??
             payloadSchemaJson,
         payloadSchemaJson,
-        initiationPropertyMappings: readString$b(raw, 'initiationPropertyMappings'),
+        initiationPropertyMappings: readString$c(raw, 'initiationPropertyMappings'),
         targetProcessSchemaId: readNullableNumber(raw, 'targetProcessSchemaId'),
         targetProcessSchemaName: toTranslatableText(raw['targetProcessSchemaName']),
-        expectedHttpMethod: readString$b(raw, 'expectedHttpMethod'),
-        workflowKey: readString$b(raw, 'workflowKey'),
+        expectedHttpMethod: readString$c(raw, 'expectedHttpMethod'),
+        workflowKey: readString$c(raw, 'workflowKey'),
         triggerId: readNullableNumber(raw, 'triggerId') ?? readNullableNumber(raw, 'id'),
         allowedContentTypes: readStringArray$6(raw, 'allowedContentTypes'),
         examplePayload: raw['examplePayload'],
-        exampleCurl: readString$b(raw, 'exampleCurl'),
+        exampleCurl: readString$c(raw, 'exampleCurl'),
         secretConfigured: readNullableBoolean(raw, 'secretConfigured') ??
             readNullableBoolean(raw, 'hasSecret') ??
             false,
         hasSecret: readNullableBoolean(raw, 'hasSecret') ??
             readNullableBoolean(raw, 'secretConfigured') ??
             false,
-        configJson: readString$b(raw, 'configJson'),
-        schemaJson: readString$b(raw, 'schemaJson'),
-        authenticationPolicyJson: readString$b(raw, 'authenticationPolicyJson'),
+        configJson: readString$c(raw, 'configJson'),
+        schemaJson: readString$c(raw, 'schemaJson'),
+        authenticationPolicyJson: readString$c(raw, 'authenticationPolicyJson'),
         metadata,
     };
 }
@@ -2836,18 +2849,18 @@ function normalizeWorkflowStepDto(value) {
         id: readNumber$4(raw, 'id'),
         requestSchemaId: readNumber$4(raw, 'requestSchemaId', null) ??
             readNumber$4(raw, 'requestSchemaId'),
-        key: readString$b(raw, 'key') ?? `step_${readNumber$4(raw, 'id')}`,
+        key: readString$c(raw, 'key') ?? `step_${readNumber$4(raw, 'id')}`,
         name: toTranslatableText(raw['name']),
         description: toTranslatableText(raw['description']),
-        type: (readString$b(raw, 'type') ?? 'UserInput'),
-        typeKey: readString$b(raw, 'typeKey'),
+        type: (readString$c(raw, 'type') ?? 'UserInput'),
+        typeKey: readString$c(raw, 'typeKey'),
         isInitial: readBoolean$5(raw, 'isInitial'),
         isSystem: readBoolean$5(raw, 'isSystem'),
         isLocked: readBoolean$5(raw, 'isLocked'),
-        systemKind: readString$b(raw, 'systemKind'),
-        targetType: readString$b(raw, 'targetType'),
-        targetValue: readString$b(raw, 'targetValue'),
-        groupSelection: readString$b(raw, 'groupSelection'),
+        systemKind: readString$c(raw, 'systemKind'),
+        targetType: readString$c(raw, 'targetType'),
+        targetValue: readString$c(raw, 'targetValue'),
+        groupSelection: readString$c(raw, 'groupSelection'),
         sla: readNullableNumber(raw, 'sla') ?? 0,
         slaHours: readNullableNumber(raw, 'slaHours'),
         metadata: readObject$3(raw, 'metadata'),
@@ -2862,7 +2875,7 @@ function normalizeWorkflowStepDto(value) {
         joinParallel: normalizeJoinParallelConfig(raw['joinParallel']),
         layout: normalizeStepLayout(raw['layout']),
         validationState: raw['validationState'] ?? null,
-        formBindingMode: readString$b(raw, 'formBindingMode'),
+        formBindingMode: readString$c(raw, 'formBindingMode'),
         formId: readNullableNumber(raw, 'formId'),
         tags: Array.isArray(raw['tags']) ? raw['tags'] : undefined,
     };
@@ -2873,9 +2886,9 @@ function normalizeWorkflowConnectionDto(value, steps = [], fallbackSelectedActio
     const targetStepId = readNumber$4(raw, 'targetStepId', null) ?? readNumber$4(raw, 'target');
     const sourceStep = steps.find((step) => step.id === sourceStepId);
     const selectedActions = normalizeSelectedActions(raw['selectedActions'], sourceStep, fallbackSelectedActions);
-    const expressionText = readString$b(raw, 'expressionText') ??
-        readString$b(raw, 'expression') ??
-        readString$b(raw, 'formulaRaw');
+    const expressionText = readString$c(raw, 'expressionText') ??
+        readString$c(raw, 'expression') ??
+        readString$c(raw, 'formulaRaw');
     return {
         ...spreadAs(raw),
         id: readNumber$4(raw, 'id'),
@@ -2885,19 +2898,19 @@ function normalizeWorkflowConnectionDto(value, steps = [], fallbackSelectedActio
         targetStepId,
         source: readNullableNumber(raw, 'source'),
         target: readNullableNumber(raw, 'target'),
-        sourceStepKey: readString$b(raw, 'sourceStepKey'),
-        targetStepKey: readString$b(raw, 'targetStepKey'),
-        sourcePortKey: readString$b(raw, 'sourcePortKey') ??
+        sourceStepKey: readString$c(raw, 'sourceStepKey'),
+        targetStepKey: readString$c(raw, 'targetStepKey'),
+        sourcePortKey: readString$c(raw, 'sourcePortKey') ??
             selectedActions[0]?.actionKey ??
             undefined,
-        targetPortKey: readString$b(raw, 'targetPortKey') ?? 'in',
+        targetPortKey: readString$c(raw, 'targetPortKey') ?? 'in',
         priority: readNullableNumber(raw, 'priority') ?? 0,
         label: toTranslatableText(raw['label']),
         formula: expressionText
             ? { expression: expressionText }
             : null,
-        formulaRaw: readString$b(raw, 'formulaRaw'),
-        expression: readString$b(raw, 'expression'),
+        formulaRaw: readString$c(raw, 'formulaRaw'),
+        expression: readString$c(raw, 'expression'),
         expressionText,
         selectedActions,
         metadata: readObject$3(raw, 'metadata'),
@@ -2939,24 +2952,24 @@ function normalizeWorkflowBuilderDto(value) {
         supports: Array.isArray(raw['supports'])
             ? raw['supports']
             : undefined,
-        rowVersion: readString$b(raw, 'rowVersion') ?? definition.rowVersion ?? null,
+        rowVersion: readString$c(raw, 'rowVersion') ?? definition.rowVersion ?? null,
     };
 }
 function normalizeWorkflowPluginDescriptorDto(value) {
     const raw = asRecord$6(value);
-    const inputSchema = parseJsonSchema(readString$b(raw, 'inputSchemaJson')) ??
+    const inputSchema = parseJsonSchema(readString$c(raw, 'inputSchemaJson')) ??
         schemaFromPluginFields(raw['inputFields']);
-    const outputSchema = parseJsonSchema(readString$b(raw, 'outputSchemaJson')) ??
+    const outputSchema = parseJsonSchema(readString$c(raw, 'outputSchemaJson')) ??
         schemaFromPluginFields(raw['outputFields']);
     return {
         ...spreadAs(raw),
-        pluginId: readString$b(raw, 'pluginId') ?? '',
+        pluginId: readString$c(raw, 'pluginId') ?? '',
         displayName: toTranslatableText(raw['displayName']),
         description: toTranslatableText(raw['description']),
         inputSchema,
         outputSchema,
-        inputSchemaJson: readString$b(raw, 'inputSchemaJson'),
-        outputSchemaJson: readString$b(raw, 'outputSchemaJson'),
+        inputSchemaJson: readString$c(raw, 'inputSchemaJson'),
+        outputSchemaJson: readString$c(raw, 'outputSchemaJson'),
         inputFields: Array.isArray(raw['inputFields'])
             ? raw['inputFields']
             : [],
@@ -2964,14 +2977,14 @@ function normalizeWorkflowPluginDescriptorDto(value) {
             ? raw['outputFields']
             : [],
         isAvailable: readNullableBoolean(raw, 'isAvailable'),
-        errorMessage: readString$b(raw, 'errorMessage'),
+        errorMessage: readString$c(raw, 'errorMessage'),
     };
 }
 function normalizeWorkflowAppDescriptorDto(value) {
     const raw = asRecord$6(value);
     return {
         ...spreadAs(raw),
-        appCode: readString$b(raw, 'appCode') ?? '',
+        appCode: readString$c(raw, 'appCode') ?? '',
         displayName: toTranslatableText(raw['displayName']),
         description: toTranslatableText(raw['description']),
         actionCount: readNullableNumber(raw, 'actionCount'),
@@ -2982,16 +2995,16 @@ function normalizeWorkflowAppActionDescriptorDto(value) {
     const inputSchema = schemaFromAppInputSchema(raw['inputSchema']);
     const outputSchema = schemaFromAppOutputSchema(raw['outputSchema']);
     const configSchema = readObject$3(raw, 'configSchema')?.['schema'] ??
-        parseJsonSchema(readString$b(raw, 'configSchemaJson'));
+        parseJsonSchema(readString$c(raw, 'configSchemaJson'));
     return {
         ...spreadAs(raw),
-        appCode: readString$b(raw, 'appCode'),
-        actionKey: readString$b(raw, 'actionKey') ?? '',
+        appCode: readString$c(raw, 'appCode'),
+        actionKey: readString$c(raw, 'actionKey') ?? '',
         displayName: toTranslatableText(raw['displayName']),
         description: toTranslatableText(raw['description']),
-        category: readString$b(raw, 'category'),
+        category: readString$c(raw, 'category'),
         configSchema: configSchema ?? null,
-        configSchemaJson: readString$b(raw, 'configSchemaJson'),
+        configSchemaJson: readString$c(raw, 'configSchemaJson'),
         runtimeInputsSchema: inputSchema,
         outputsSchema: outputSchema,
         inputSchema: Array.isArray(raw['inputSchema'])
@@ -3028,9 +3041,9 @@ function normalizeWorkflowTestRunResultDto(value) {
     return {
         ...spreadAs(raw),
         workflowId: readNullableNumber(raw, 'workflowId'),
-        testRunId: readString$b(raw, 'testRunId') ??
+        testRunId: readString$c(raw, 'testRunId') ??
             `workflow_${readNullableNumber(raw, 'workflowId') ?? 'test'}`,
-        status: readString$b(raw, 'status') ??
+        status: readString$c(raw, 'status') ??
             (readNullableBoolean(raw, 'success') === false ? 'Failed' : 'Succeeded'),
         success: readNullableBoolean(raw, 'success'),
         canStart: readNullableBoolean(raw, 'canStart'),
@@ -3248,10 +3261,10 @@ function normalizeWorkflowStepActions(value) {
         return [];
     return value.map((item) => {
         const raw = asRecord$6(item);
-        const key = readString$b(raw, 'key') ??
-            readString$b(raw, 'typeKey') ??
-            readString$b(raw, 'type') ??
-            readString$b(raw, 'statusKey') ??
+        const key = readString$c(raw, 'key') ??
+            readString$c(raw, 'typeKey') ??
+            readString$c(raw, 'type') ??
+            readString$c(raw, 'statusKey') ??
             '';
         return {
             ...spreadAs(raw),
@@ -3262,25 +3275,25 @@ function normalizeWorkflowStepActions(value) {
             stepSchemaId: readNullableNumber(raw, 'stepSchemaId') ?? undefined,
             order: readNullableNumber(raw, 'order') ?? undefined,
             key,
-            type: readString$b(raw, 'type'),
-            typeKey: readString$b(raw, 'typeKey'),
+            type: readString$c(raw, 'type'),
+            typeKey: readString$c(raw, 'typeKey'),
             label: toTranslatableText(raw['label'] ?? raw['name'] ?? key),
             name: toTranslatableText(raw['name'] ?? raw['label'] ?? key),
-            statusKey: readString$b(raw, 'statusKey'),
-            color: readString$b(raw, 'color'),
-            icon: readString$b(raw, 'icon'),
+            statusKey: readString$c(raw, 'statusKey'),
+            color: readString$c(raw, 'color'),
+            icon: readString$c(raw, 'icon'),
             requireConfirmation: readNullableBoolean(raw, 'requireConfirmation') ?? undefined,
             confirmationMessage: toTranslatableText(raw['confirmationMessage']),
             requireSignature: readNullableBoolean(raw, 'requireSignature') ?? undefined,
-            routingBehavior: readString$b(raw, 'routingBehavior'),
+            routingBehavior: readString$c(raw, 'routingBehavior'),
             routesThroughSelectedActionConnection: readNullableBoolean(raw, 'routesThroughSelectedActionConnection') ??
                 undefined,
             isTerminal: readNullableBoolean(raw, 'isTerminal') ??
-                readString$b(raw, 'routingBehavior') === 'Terminal',
+                readString$c(raw, 'routingBehavior') === 'Terminal',
             isRouteable: readNullableBoolean(raw, 'isRouteable') ??
                 readNullableBoolean(raw, 'canRoute') ??
                 readNullableBoolean(raw, 'routesThroughSelectedActionConnection') ??
-                readString$b(raw, 'routingBehavior') === 'SelectedActionConnection',
+                readString$c(raw, 'routingBehavior') === 'SelectedActionConnection',
             canRoute: readNullableBoolean(raw, 'canRoute') ??
                 readNullableBoolean(raw, 'isRouteable') ??
                 undefined,
@@ -3300,9 +3313,9 @@ function normalizeWorkflowStepProperties(value) {
                 readNullableNumber(property, 'id') ??
                 0,
             refId: readNullableNumber(raw, 'refId') ?? undefined,
-            refType: readString$b(raw, 'refType'),
-            type: readString$b(raw, 'type'),
-            propertyKey: readString$b(raw, 'propertyKey') ?? readString$b(property, 'key'),
+            refType: readString$c(raw, 'refType'),
+            type: readString$c(raw, 'type'),
+            propertyKey: readString$c(raw, 'propertyKey') ?? readString$c(property, 'key'),
             read: readNullableBoolean(raw, 'read') ??
                 readNullableBoolean(raw, 'isRead') ??
                 false,
@@ -3314,9 +3327,9 @@ function normalizeWorkflowStepProperties(value) {
             property: property
                 ? {
                     id: readNullableNumber(property, 'id'),
-                    key: readString$b(property, 'key'),
+                    key: readString$c(property, 'key'),
                     name: toTranslatableText(property['name']),
-                    viewType: readString$b(property, 'viewType'),
+                    viewType: readString$c(property, 'viewType'),
                     isRequired: readNullableBoolean(property, 'isRequired') ?? undefined,
                     isTranslatable: readNullableBoolean(property, 'isTranslatable') ?? undefined,
                 }
@@ -3330,25 +3343,25 @@ function normalizeAutomatedConfig(value) {
     const raw = asRecord$6(value);
     return {
         ...spreadAs(raw),
-        method: readString$b(raw, 'method') ?? 'POST',
-        serviceUrl: readString$b(raw, 'serviceUrl') ?? readString$b(raw, 'url'),
-        url: readString$b(raw, 'url') ?? readString$b(raw, 'serviceUrl'),
+        method: readString$c(raw, 'method') ?? 'POST',
+        serviceUrl: readString$c(raw, 'serviceUrl') ?? readString$c(raw, 'url'),
+        url: readString$c(raw, 'url') ?? readString$c(raw, 'serviceUrl'),
         timeoutSeconds: readNullableNumber(raw, 'timeoutSeconds'),
         retryCount: readNullableNumber(raw, 'retryCount'),
         retryDelaySeconds: readNullableNumber(raw, 'retryDelaySeconds'),
-        onFailureBehavior: readString$b(raw, 'onFailureBehavior') ??
-            readString$b(raw, 'failureBehavior'),
-        failureBehavior: readString$b(raw, 'failureBehavior') ??
-            readString$b(raw, 'onFailureBehavior'),
+        onFailureBehavior: readString$c(raw, 'onFailureBehavior') ??
+            readString$c(raw, 'failureBehavior'),
+        failureBehavior: readString$c(raw, 'failureBehavior') ??
+            readString$c(raw, 'onFailureBehavior'),
         headers: pairsFromUnknown(raw['headers']),
         headersMap: readStringRecord(raw['headers']),
         query: pairsFromUnknown(raw['query'] ?? raw['queryParameters'] ?? raw['queryParams']),
         queryParameters: readStringRecord(raw['queryParameters'] ?? raw['queryParams']),
         queryParams: readStringRecord(raw['queryParams'] ?? raw['queryParameters']),
-        jsonBody: readString$b(raw, 'jsonBody') ?? readString$b(raw, 'body'),
-        body: readString$b(raw, 'body') ?? readString$b(raw, 'jsonBody'),
-        bodyType: readString$b(raw, 'bodyType'),
-        bodyKind: readString$b(raw, 'bodyKind'),
+        jsonBody: readString$c(raw, 'jsonBody') ?? readString$c(raw, 'body'),
+        body: readString$c(raw, 'body') ?? readString$c(raw, 'jsonBody'),
+        bodyType: readString$c(raw, 'bodyType'),
+        bodyKind: readString$c(raw, 'bodyKind'),
         outputs: normalizeAutomatedOutputMappings(raw['outputs'] ?? raw['outputMappings']),
         outputMappings: normalizeAutomatedOutputMappings(raw['outputMappings'] ?? raw['outputs']),
         placeholders: readStringRecord(raw['placeholders']),
@@ -3367,17 +3380,17 @@ function normalizePluginConfig(value) {
         : [];
     return {
         ...spreadAs(raw),
-        pluginId: readString$b(raw, 'pluginId'),
-        inputSchemaJson: readString$b(raw, 'inputSchemaJson'),
-        outputSchemaJson: readString$b(raw, 'outputSchemaJson'),
+        pluginId: readString$c(raw, 'pluginId'),
+        inputSchemaJson: readString$c(raw, 'inputSchemaJson'),
+        outputSchemaJson: readString$c(raw, 'outputSchemaJson'),
         waitForCompletion: readNullableBoolean(raw, 'waitForCompletion') ?? true,
         timeoutSeconds: readNullableNumber(raw, 'timeoutSeconds'),
         retryCount: readNullableNumber(raw, 'retryCount'),
         retryDelaySeconds: readNullableNumber(raw, 'retryDelaySeconds'),
-        onFailureBehavior: readString$b(raw, 'onFailureBehavior') ??
-            readString$b(raw, 'failureBehavior'),
-        failureBehavior: readString$b(raw, 'failureBehavior') ??
-            readString$b(raw, 'onFailureBehavior'),
+        onFailureBehavior: readString$c(raw, 'onFailureBehavior') ??
+            readString$c(raw, 'failureBehavior'),
+        failureBehavior: readString$c(raw, 'failureBehavior') ??
+            readString$c(raw, 'onFailureBehavior'),
         skipInputValidation: readNullableBoolean(raw, 'skipInputValidation') ?? undefined,
         inputs: Array.isArray(raw['inputs']) && raw['inputs'].length > 0
             ? raw['inputs']
@@ -3404,10 +3417,10 @@ function normalizeAppActionConfig(value) {
         : [];
     return {
         ...spreadAs(raw),
-        appCode: readString$b(raw, 'appCode'),
-        actionKey: readString$b(raw, 'actionKey') ?? '',
-        configJson: readString$b(raw, 'configJson'),
-        config: parseJsonObject$3(readString$b(raw, 'configJson')) ??
+        appCode: readString$c(raw, 'appCode'),
+        actionKey: readString$c(raw, 'actionKey') ?? '',
+        configJson: readString$c(raw, 'configJson'),
+        config: parseJsonObject$3(readString$c(raw, 'configJson')) ??
             readObject$3(raw, 'config') ??
             {},
         configMappings,
@@ -3419,7 +3432,7 @@ function normalizeAppActionConfig(value) {
             ? raw['outputs']
             : outputMappings.map((mapping) => normalizeAppOutput(mapping)),
         outputMappings,
-        failureBehavior: readString$b(raw, 'failureBehavior'),
+        failureBehavior: readString$c(raw, 'failureBehavior'),
         timeoutSeconds: readNullableNumber(raw, 'timeoutSeconds'),
     };
 }
@@ -3470,7 +3483,7 @@ function normalizeJoinParallelConfig(value) {
     const anyBranchApprove = readNullableBoolean(raw, 'anyBranchApprove') ?? false;
     return {
         ...spreadAs(raw),
-        policy: readString$b(raw, 'policy') ?? (anyBranchApprove ? 'Any' : 'All'),
+        policy: readString$c(raw, 'policy') ?? (anyBranchApprove ? 'Any' : 'All'),
         anyBranchApprove,
         threshold: readNullableNumber(raw, 'threshold'),
         customCondition: raw['customCondition'] ??
@@ -3501,12 +3514,12 @@ function normalizeSelectedActions(value, sourceStep, fallbackSelectedActions = [
         return {
             stepActionId: stepActionId ?? undefined,
             actionId: stepActionId ?? undefined,
-            actionKey: readString$b(raw, 'actionKey') ??
-                readString$b(raw, 'key') ??
-                readString$b(raw, 'typeKey') ??
-                readString$b(raw, 'statusKey') ??
+            actionKey: readString$c(raw, 'actionKey') ??
+                readString$c(raw, 'key') ??
+                readString$c(raw, 'typeKey') ??
+                readString$c(raw, 'statusKey') ??
                 '',
-            key: readString$b(raw, 'key'),
+            key: readString$c(raw, 'key'),
         };
     })
         .filter((item) => item.actionKey);
@@ -3564,12 +3577,12 @@ function normalizeAutomatedOutputMappings(value) {
     return value.map((item) => {
         const raw = asRecord$6(item);
         return {
-            source: readString$b(raw, 'source') ?? readString$b(raw, 'jsonPath') ?? 'response',
-            targetPath: readString$b(raw, 'targetPath') ?? readString$b(raw, 'contextPath') ?? '',
-            jsonPath: readString$b(raw, 'jsonPath'),
-            contextPath: readString$b(raw, 'contextPath'),
-            writePolicy: readString$b(raw, 'writePolicy'),
-            valueType: readString$b(raw, 'valueType'),
+            source: readString$c(raw, 'source') ?? readString$c(raw, 'jsonPath') ?? 'response',
+            targetPath: readString$c(raw, 'targetPath') ?? readString$c(raw, 'contextPath') ?? '',
+            jsonPath: readString$c(raw, 'jsonPath'),
+            contextPath: readString$c(raw, 'contextPath'),
+            writePolicy: readString$c(raw, 'writePolicy'),
+            valueType: readString$c(raw, 'valueType'),
             isSecret: readNullableBoolean(raw, 'isSecret') ?? undefined,
         };
     });
@@ -3578,27 +3591,27 @@ function normalizePluginInput(value) {
     const raw = asRecord$6(value);
     if (readNullableNumber(raw, 'requestPropertyId') != null) {
         return {
-            field: readString$b(raw, 'pluginInputFieldName') ?? '',
+            field: readString$c(raw, 'pluginInputFieldName') ?? '',
             source: 'Property',
             value: readNullableNumber(raw, 'requestPropertyId'),
         };
     }
-    if (readString$b(raw, 'contextPath')) {
+    if (readString$c(raw, 'contextPath')) {
         return {
-            field: readString$b(raw, 'pluginInputFieldName') ?? '',
+            field: readString$c(raw, 'pluginInputFieldName') ?? '',
             source: 'Context',
-            value: readString$b(raw, 'contextPath') ?? '',
+            value: readString$c(raw, 'contextPath') ?? '',
         };
     }
-    if (readString$b(raw, 'transformExpression')) {
+    if (readString$c(raw, 'transformExpression')) {
         return {
-            field: readString$b(raw, 'pluginInputFieldName') ?? '',
+            field: readString$c(raw, 'pluginInputFieldName') ?? '',
             source: 'Expression',
-            value: readString$b(raw, 'transformExpression') ?? '',
+            value: readString$c(raw, 'transformExpression') ?? '',
         };
     }
     return {
-        field: readString$b(raw, 'pluginInputFieldName') ?? '',
+        field: readString$c(raw, 'pluginInputFieldName') ?? '',
         source: 'Static',
         value: raw['staticValue'],
     };
@@ -3606,35 +3619,35 @@ function normalizePluginInput(value) {
 function normalizePluginOutput(value) {
     const raw = asRecord$6(value);
     return {
-        field: readString$b(raw, 'pluginOutputFieldName') ?? '',
-        targetPath: readString$b(raw, 'contextPath') ?? readString$b(raw, 'targetPath') ?? '',
+        field: readString$c(raw, 'pluginOutputFieldName') ?? '',
+        targetPath: readString$c(raw, 'contextPath') ?? readString$c(raw, 'targetPath') ?? '',
     };
 }
 function normalizeAppRuntimeInput(value) {
     const raw = asRecord$6(value);
     if (readNullableNumber(raw, 'requestPropertyId') != null) {
         return {
-            field: readString$b(raw, 'fieldKey') ?? '',
+            field: readString$c(raw, 'fieldKey') ?? '',
             source: 'Property',
             value: readNullableNumber(raw, 'requestPropertyId'),
         };
     }
-    if (readString$b(raw, 'contextPath')) {
+    if (readString$c(raw, 'contextPath')) {
         return {
-            field: readString$b(raw, 'fieldKey') ?? '',
+            field: readString$c(raw, 'fieldKey') ?? '',
             source: 'Context',
-            value: readString$b(raw, 'contextPath') ?? '',
+            value: readString$c(raw, 'contextPath') ?? '',
         };
     }
-    if (readString$b(raw, 'transformExpression')) {
+    if (readString$c(raw, 'transformExpression')) {
         return {
-            field: readString$b(raw, 'fieldKey') ?? '',
+            field: readString$c(raw, 'fieldKey') ?? '',
             source: 'Expression',
-            value: readString$b(raw, 'transformExpression') ?? '',
+            value: readString$c(raw, 'transformExpression') ?? '',
         };
     }
     return {
-        field: readString$b(raw, 'fieldKey') ?? '',
+        field: readString$c(raw, 'fieldKey') ?? '',
         source: 'Static',
         value: raw['staticValue'],
     };
@@ -3642,8 +3655,8 @@ function normalizeAppRuntimeInput(value) {
 function normalizeAppOutput(value) {
     const raw = asRecord$6(value);
     return {
-        field: readString$b(raw, 'fieldKey') ?? '',
-        targetPath: readString$b(raw, 'contextPath') ?? readString$b(raw, 'targetPath') ?? '',
+        field: readString$c(raw, 'fieldKey') ?? '',
+        targetPath: readString$c(raw, 'contextPath') ?? readString$c(raw, 'targetPath') ?? '',
     };
 }
 function normalizeSubprocessPropertyMapping(value) {
@@ -3654,23 +3667,23 @@ function normalizeSubprocessPropertyMapping(value) {
         parentRequestPropertyId: readNullableNumber(raw, 'parentRequestPropertyId') ?? undefined,
         subRequestPropertyId: readNullableNumber(raw, 'subRequestPropertyId') ?? undefined,
         reverseMapping: readNullableBoolean(raw, 'reverseMapping') ?? undefined,
-        parentPath: readString$b(raw, 'parentPath') ??
+        parentPath: readString$c(raw, 'parentPath') ??
             String(readNullableNumber(raw, 'parentRequestPropertyId') ?? ''),
-        childPath: readString$b(raw, 'childPath') ??
+        childPath: readString$c(raw, 'childPath') ??
             String(readNullableNumber(raw, 'subRequestPropertyId') ?? ''),
-        direction: readString$b(raw, 'direction') ??
+        direction: readString$c(raw, 'direction') ??
             (readNullableBoolean(raw, 'reverseMapping') ? 'Both' : 'In'),
         required: readNullableBoolean(raw, 'required') ?? undefined,
-        transform: readString$b(raw, 'transform'),
+        transform: readString$c(raw, 'transform'),
     };
 }
 function normalizeSubprocessContextMapping(value) {
     const raw = asRecord$6(value);
     return {
-        parentPath: readString$b(raw, 'parentPath') ?? '',
-        childPath: readString$b(raw, 'childPath') ?? '',
-        direction: readString$b(raw, 'direction') ?? 'In',
-        transform: readString$b(raw, 'transform'),
+        parentPath: readString$c(raw, 'parentPath') ?? '',
+        childPath: readString$c(raw, 'childPath') ?? '',
+        direction: readString$c(raw, 'direction') ?? 'In',
+        transform: readString$c(raw, 'transform'),
     };
 }
 function normalizeActionsForPayload(actions) {
@@ -3721,14 +3734,14 @@ function normalizePluginInputsForPayload(mappings) {
         if ('pluginInputFieldName' in raw || 'contextPath' in raw) {
             return { ...raw };
         }
-        const source = readString$b(raw, 'source') ?? 'Context';
+        const source = readString$c(raw, 'source') ?? 'Context';
         return {
             id: 0,
-            pluginInputFieldName: readString$b(raw, 'field') ?? '',
+            pluginInputFieldName: readString$c(raw, 'field') ?? '',
             requestPropertyId: source === 'Property' ? readNullableNumber(raw, 'value') : undefined,
-            contextPath: source === 'Context' ? (readString$b(raw, 'value') ?? '') : undefined,
+            contextPath: source === 'Context' ? (readString$c(raw, 'value') ?? '') : undefined,
             staticValue: source === 'Static' ? raw['value'] : undefined,
-            transformExpression: source === 'Expression' ? (readString$b(raw, 'value') ?? '') : undefined,
+            transformExpression: source === 'Expression' ? (readString$c(raw, 'value') ?? '') : undefined,
         };
     });
 }
@@ -3742,9 +3755,9 @@ function normalizePluginOutputsForPayload(mappings) {
         }
         return {
             id: 0,
-            pluginOutputFieldName: readString$b(raw, 'field') ?? '',
-            contextPath: readString$b(raw, 'targetPath') ?? readString$b(raw, 'contextPath') ?? '',
-            transformExpression: readString$b(raw, 'transformExpression') ?? undefined,
+            pluginOutputFieldName: readString$c(raw, 'field') ?? '',
+            contextPath: readString$c(raw, 'targetPath') ?? readString$c(raw, 'contextPath') ?? '',
+            transformExpression: readString$c(raw, 'transformExpression') ?? undefined,
         };
     });
 }
@@ -3760,17 +3773,17 @@ function normalizeAppActionMappingsForPayload(mappings, kind) {
         }
         if (kind === 'output') {
             return {
-                fieldKey: readString$b(raw, 'field') ?? '',
-                contextPath: readString$b(raw, 'targetPath') ?? readString$b(raw, 'contextPath') ?? '',
+                fieldKey: readString$c(raw, 'field') ?? '',
+                contextPath: readString$c(raw, 'targetPath') ?? readString$c(raw, 'contextPath') ?? '',
             };
         }
-        const source = readString$b(raw, 'source') ?? 'Context';
+        const source = readString$c(raw, 'source') ?? 'Context';
         return {
-            fieldKey: readString$b(raw, 'field') ?? '',
+            fieldKey: readString$c(raw, 'field') ?? '',
             requestPropertyId: source === 'Property' ? readNullableNumber(raw, 'value') : undefined,
-            contextPath: source === 'Context' ? (readString$b(raw, 'value') ?? '') : undefined,
+            contextPath: source === 'Context' ? (readString$c(raw, 'value') ?? '') : undefined,
             staticValue: source === 'Static' ? raw['value'] : undefined,
-            transformExpression: source === 'Expression' ? (readString$b(raw, 'value') ?? '') : undefined,
+            transformExpression: source === 'Expression' ? (readString$c(raw, 'value') ?? '') : undefined,
         };
     });
 }
@@ -3808,7 +3821,7 @@ function normalizeContextSnapshot(value) {
     const snapshot = {};
     for (const item of value) {
         const raw = asRecord$6(item);
-        const path = readString$b(raw, 'path');
+        const path = readString$c(raw, 'path');
         if (!path)
             continue;
         snapshot[path] = raw['value'];
@@ -3822,12 +3835,12 @@ function schemaFromPluginFields(value) {
     const required = [];
     for (const item of value) {
         const raw = asRecord$6(item);
-        const key = readString$b(raw, 'name');
+        const key = readString$c(raw, 'name');
         if (!key)
             continue;
         properties[key] = {
-            type: readString$b(raw, 'type') ?? 'string',
-            description: readString$b(raw, 'description') ?? '',
+            type: readString$c(raw, 'type') ?? 'string',
+            description: readString$c(raw, 'description') ?? '',
         };
         if (readNullableBoolean(raw, 'required'))
             required.push(key);
@@ -3841,12 +3854,12 @@ function schemaFromAppInputSchema(value) {
     const required = [];
     for (const item of value) {
         const raw = asRecord$6(item);
-        const key = readString$b(raw, 'key');
+        const key = readString$c(raw, 'key');
         if (!key)
             continue;
         properties[key] = {
             type: 'string',
-            description: readString$b(raw, 'source') ?? '',
+            description: readString$c(raw, 'source') ?? '',
         };
         if (readNullableBoolean(raw, 'required'))
             required.push(key);
@@ -3859,12 +3872,12 @@ function schemaFromAppOutputSchema(value) {
     const properties = {};
     for (const item of value) {
         const raw = asRecord$6(item);
-        const key = readString$b(raw, 'key');
+        const key = readString$c(raw, 'key');
         if (!key)
             continue;
         properties[key] = {
-            type: readString$b(raw, 'type') ?? 'object',
-            description: readString$b(raw, 'description') ?? '',
+            type: readString$c(raw, 'type') ?? 'object',
+            description: readString$c(raw, 'description') ?? '',
         };
     }
     return { type: 'object', properties };
@@ -3872,9 +3885,9 @@ function schemaFromAppOutputSchema(value) {
 function toTranslatableText(value) {
     if (value && typeof value === 'object') {
         const raw = value;
-        const en = readString$b(raw, 'en');
-        const ar = readString$b(raw, 'ar');
-        const display = readString$b(raw, 'display');
+        const en = readString$c(raw, 'en');
+        const ar = readString$c(raw, 'ar');
+        const display = readString$c(raw, 'display');
         return {
             en: en ?? ar ?? display ?? '',
             ar: ar ?? en ?? display ?? '',
@@ -3889,9 +3902,9 @@ function toPrimaryText(value) {
         return value || undefined;
     if (value && typeof value === 'object') {
         const raw = value;
-        return (readString$b(raw, 'en') ??
-            readString$b(raw, 'display') ??
-            readString$b(raw, 'ar') ??
+        return (readString$c(raw, 'en') ??
+            readString$c(raw, 'display') ??
+            readString$c(raw, 'ar') ??
             undefined);
     }
     return undefined;
@@ -3913,8 +3926,8 @@ function pairsFromUnknown(value) {
         return value
             .map((item) => asRecord$6(item))
             .map((item) => ({
-            key: readString$b(item, 'key') ?? '',
-            value: readString$b(item, 'value') ?? '',
+            key: readString$c(item, 'key') ?? '',
+            value: readString$c(item, 'value') ?? '',
         }));
     }
     return Object.entries(readStringRecord(value) ?? {}).map(([key, recordValue]) => ({
@@ -3981,7 +3994,7 @@ function readObject$3(record, key) {
         return null;
     return value;
 }
-function readString$b(record, key) {
+function readString$c(record, key) {
     const value = record[key];
     return typeof value === 'string' ? value : undefined;
 }
@@ -4918,7 +4931,7 @@ function normalizePathValidation(paths, response) {
     }
     return {
         results: raw.map((item, index) => {
-            const path = readString$a(item, 'path') ?? readString$a(item, 'expression');
+            const path = readString$b(item, 'path') ?? readString$b(item, 'expression');
             const valid = readBoolean$4(item, 'isValid') ??
                 readBoolean$4(item, 'valid') ??
                 readBoolean$4(item, 'success') ??
@@ -4930,8 +4943,8 @@ function normalizePathValidation(paths, response) {
                 path: path ?? paths[index] ?? '',
                 isValid: valid,
                 isAvailable: available,
-                type: readString$a(item, 'type'),
-                message: readString$a(item, 'message') ?? readString$a(item, 'error'),
+                type: readString$b(item, 'type'),
+                message: readString$b(item, 'message') ?? readString$b(item, 'error'),
             };
         }),
     };
@@ -4950,7 +4963,7 @@ function asRecordArray(value) {
         return null;
     return value.filter((item) => !!item && typeof item === 'object' && !Array.isArray(item));
 }
-function readString$a(source, key) {
+function readString$b(source, key) {
     const value = source[key];
     return typeof value === 'string' ? value : null;
 }
@@ -5101,8 +5114,8 @@ function normalizeExecutionListResult(result) {
         ...result,
         items,
         hasMore: readBoolean$3(raw, 'hasMore') ?? result.hasMore,
-        nextCursor: readString$9(raw, 'nextCursor') ??
-            buildCursor(readString$9(raw, 'nextCursorStartedAtUtc'), readId$3(raw, 'nextCursorExecutionId')),
+        nextCursor: readString$a(raw, 'nextCursor') ??
+            buildCursor(readString$a(raw, 'nextCursorStartedAtUtc'), readId$3(raw, 'nextCursorExecutionId')),
     };
 }
 function normalizeExecutionDetail(detail) {
@@ -5116,11 +5129,11 @@ function normalizeExecutionDetail(detail) {
         ? readArray$1(raw, 'events')
         : readArray$1(raw, 'timeline')).map(normalizeExecutionEvent);
     const triggerSummary = raw['triggerSummary'] ??
-        parseJsonValue$1(readString$9(raw, 'triggerSummaryJson'));
+        parseJsonValue$1(readString$a(raw, 'triggerSummaryJson'));
     return {
         ...detail,
         ...summary,
-        triggerSummaryJson: readString$9(raw, 'triggerSummaryJson') ?? null,
+        triggerSummaryJson: readString$a(raw, 'triggerSummaryJson') ?? null,
         triggerSummary,
         nodeRuns,
         waits,
@@ -5131,7 +5144,7 @@ function normalizeExecutionDetail(detail) {
         flowPlusCommitAudits: readArray$1(raw, 'flowPlusCommitAudits'),
         approvalDecisions: readArray$1(raw, 'approvalDecisions'),
         timelineHasMore: readBoolean$3(raw, 'timelineHasMore') ?? false,
-        timelineNextAfterUtc: readString$9(raw, 'timelineNextAfterUtc') ?? null,
+        timelineNextAfterUtc: readString$a(raw, 'timelineNextAfterUtc') ?? null,
     };
 }
 function normalizeExecutionSummary(value) {
@@ -5143,18 +5156,18 @@ function normalizeExecutionSummary(value) {
         automationId: readId$3(raw, 'automationId') ?? '',
         revisionId,
         automationRevisionId: readId$3(raw, 'automationRevisionId') ?? revisionId,
-        automationName: readString$9(raw, 'automationName') ?? null,
+        automationName: readString$a(raw, 'automationName') ?? null,
         revisionNumber: readNumber$2(raw, 'revisionNumber') ?? null,
-        status: String(readString$9(raw, 'status') ?? ''),
-        triggerType: readString$9(raw, 'triggerType') ?? null,
-        triggerKey: readString$9(raw, 'triggerKey') ?? null,
-        createdAtUtc: readString$9(raw, 'createdAtUtc') ?? null,
-        startedAtUtc: readString$9(raw, 'startedAtUtc') ??
-            readString$9(raw, 'createdAtUtc') ??
+        status: String(readString$a(raw, 'status') ?? ''),
+        triggerType: readString$a(raw, 'triggerType') ?? null,
+        triggerKey: readString$a(raw, 'triggerKey') ?? null,
+        createdAtUtc: readString$a(raw, 'createdAtUtc') ?? null,
+        startedAtUtc: readString$a(raw, 'startedAtUtc') ??
+            readString$a(raw, 'createdAtUtc') ??
             null,
-        completedAtUtc: readString$9(raw, 'completedAtUtc') ?? null,
+        completedAtUtc: readString$a(raw, 'completedAtUtc') ?? null,
         durationMs: readNumber$2(raw, 'durationMs') ?? null,
-        correlationId: readString$9(raw, 'correlationId') ?? null,
+        correlationId: readString$a(raw, 'correlationId') ?? null,
     };
 }
 function normalizeNodeRun(value) {
@@ -5162,9 +5175,9 @@ function normalizeNodeRun(value) {
     return {
         ...raw,
         nodeRunId: readId$3(raw, 'nodeRunId') ?? '',
-        nodeKey: readString$9(raw, 'nodeKey') ?? '',
-        nodeType: String(readString$9(raw, 'nodeType') ?? ''),
-        status: String(readString$9(raw, 'status') ?? ''),
+        nodeKey: readString$a(raw, 'nodeKey') ?? '',
+        nodeType: String(readString$a(raw, 'nodeType') ?? ''),
+        status: String(readString$a(raw, 'status') ?? ''),
         attempts: readArray$1(raw, 'attempts').map((attempt) => {
             const attemptRaw = asRecord$5(attempt);
             return {
@@ -5173,9 +5186,9 @@ function normalizeNodeRun(value) {
                     readId$3(attemptRaw, 'nodeAttemptId') ??
                     '',
                 nodeAttemptId: readId$3(attemptRaw, 'nodeAttemptId'),
-                status: String(readString$9(attemptRaw, 'status') ?? ''),
-                errorMessage: readString$9(attemptRaw, 'errorMessage') ??
-                    readString$9(attemptRaw, 'errorJson') ??
+                status: String(readString$a(attemptRaw, 'status') ?? ''),
+                errorMessage: readString$a(attemptRaw, 'errorMessage') ??
+                    readString$a(attemptRaw, 'errorJson') ??
                     null,
             };
         }),
@@ -5187,9 +5200,9 @@ function normalizeRuntimeWait(value) {
         ...raw,
         runtimeWaitId: readId$3(raw, 'runtimeWaitId') ?? '',
         nodeRunId: readId$3(raw, 'nodeRunId') ?? null,
-        nodeKey: readString$9(raw, 'nodeKey') ?? null,
-        waitType: readString$9(raw, 'waitType') ?? '',
-        status: readString$9(raw, 'status') ?? '',
+        nodeKey: readString$a(raw, 'nodeKey') ?? null,
+        waitType: readString$a(raw, 'waitType') ?? '',
+        status: readString$a(raw, 'status') ?? '',
     };
 }
 function normalizeExecutionEvent(value) {
@@ -5197,27 +5210,27 @@ function normalizeExecutionEvent(value) {
     return {
         ...raw,
         eventId: readId$3(raw, 'eventId') ?? '',
-        eventType: readString$9(raw, 'eventType') ?? '',
-        severity: readString$9(raw, 'severity') ?? 'Info',
-        occurredAtUtc: readString$9(raw, 'occurredAtUtc') ?? '',
+        eventType: readString$a(raw, 'eventType') ?? '',
+        severity: readString$a(raw, 'severity') ?? 'Info',
+        occurredAtUtc: readString$a(raw, 'occurredAtUtc') ?? '',
         nodeRunId: readId$3(raw, 'nodeRunId') ?? null,
         nodeAttemptId: readId$3(raw, 'nodeAttemptId') ?? null,
-        correlationId: readString$9(raw, 'correlationId') ?? null,
-        data: raw['data'] ?? parseJsonValue$1(readString$9(raw, 'dataJson')),
-        dataJson: readString$9(raw, 'dataJson') ?? null,
+        correlationId: readString$a(raw, 'correlationId') ?? null,
+        data: raw['data'] ?? parseJsonValue$1(readString$a(raw, 'dataJson')),
+        dataJson: readString$a(raw, 'dataJson') ?? null,
     };
 }
 function normalizeNodeDataDetail(detail) {
     const raw = asRecord$5(detail);
     const input = normalizeDataBlob(raw['input']);
     const output = normalizeDataBlob(raw['output']);
-    const error = parseJsonValue$1(readString$9(raw, 'errorJson'));
+    const error = parseJsonValue$1(readString$a(raw, 'errorJson'));
     const summary = raw['summary'] ?? {
         input,
         output,
         error,
         replayAvailable: readBoolean$3(raw, 'replayAvailable') ?? false,
-        replayAvailabilityReason: readString$9(raw, 'replayAvailabilityReason') ?? null,
+        replayAvailabilityReason: readString$a(raw, 'replayAvailabilityReason') ?? null,
     };
     return {
         ...detail,
@@ -5225,7 +5238,7 @@ function normalizeNodeDataDetail(detail) {
         summary,
         input: raw['input'],
         output: raw['output'],
-        errorJson: readString$9(raw, 'errorJson') ?? null,
+        errorJson: readString$a(raw, 'errorJson') ?? null,
         attempts: readArray$1(raw, 'attempts').map((attempt) => {
             const attemptRaw = asRecord$5(attempt);
             return {
@@ -5233,7 +5246,7 @@ function normalizeNodeDataDetail(detail) {
                 attemptId: readId$3(attemptRaw, 'attemptId') ??
                     readId$3(attemptRaw, 'nodeAttemptId') ??
                     '',
-                status: String(readString$9(attemptRaw, 'status') ?? ''),
+                status: String(readString$a(attemptRaw, 'status') ?? ''),
             };
         }),
         logs: readArray$1(raw, 'logs').map(normalizeExecutionEvent),
@@ -5252,8 +5265,8 @@ function normalizeDataBlob(value) {
     return {
         ...raw,
         content: raw['content'] ??
-            parseJsonValue$1(readString$9(raw, 'contentJson')) ??
-            readString$9(raw, 'contentJson') ??
+            parseJsonValue$1(readString$a(raw, 'contentJson')) ??
+            readString$a(raw, 'contentJson') ??
             null,
     };
 }
@@ -5281,7 +5294,7 @@ function readArray$1(record, key) {
     const value = record[key];
     return Array.isArray(value) ? value : [];
 }
-function readString$9(record, key) {
+function readString$a(record, key) {
     const value = record[key];
     return typeof value === 'string' ? value : undefined;
 }
@@ -6720,6 +6733,43 @@ class SetLayoutAutosavePaused {
         this.paused = paused;
     }
 }
+class AddCanvasNote {
+    note;
+    static type = '[FlowplusWorkflow] Add Canvas Note';
+    constructor(note) {
+        this.note = note;
+    }
+}
+class UpdateCanvasNote {
+    noteId;
+    patch;
+    static type = '[FlowplusWorkflow] Update Canvas Note';
+    constructor(noteId, patch) {
+        this.noteId = noteId;
+        this.patch = patch;
+    }
+}
+class DeleteCanvasNote {
+    noteId;
+    static type = '[FlowplusWorkflow] Delete Canvas Note';
+    constructor(noteId) {
+        this.noteId = noteId;
+    }
+}
+class DuplicateCanvasNote {
+    noteId;
+    static type = '[FlowplusWorkflow] Duplicate Canvas Note';
+    constructor(noteId) {
+        this.noteId = noteId;
+    }
+}
+class SelectCanvasNote {
+    noteId;
+    static type = '[FlowplusWorkflow] Select Canvas Note';
+    constructor(noteId) {
+        this.noteId = noteId;
+    }
+}
 /* ============================================================
  * Validation / publish
  * ============================================================ */
@@ -6762,10 +6812,12 @@ class ClearSelection {
 class SetSelectionFromCanvas {
     stepIds;
     connectionIds;
+    canvasNoteIds;
     static type = '[FlowplusWorkflow] Set Selection From Canvas';
-    constructor(stepIds, connectionIds) {
+    constructor(stepIds, connectionIds, canvasNoteIds = []) {
         this.stepIds = stepIds;
         this.connectionIds = connectionIds;
+        this.canvasNoteIds = canvasNoteIds;
     }
 }
 class SetActiveInspectorTab {
@@ -6950,6 +7002,188 @@ class RunWorkflowTest {
     }
 }
 
+const CANVAS_NOTE_METADATA_KEY = 'canvasNotes';
+const CANVAS_NOTE_GROUP_PREFIX = 'note:';
+const CANVAS_NOTE_DEFAULT_WIDTH = 360;
+const CANVAS_NOTE_DEFAULT_HEIGHT = 220;
+const CANVAS_NOTE_MIN_WIDTH = 220;
+const CANVAS_NOTE_MIN_HEIGHT = 140;
+const CANVAS_NOTE_DEFAULT_TEXT = "## I'm a note\nDouble click to edit. **Guide**";
+const CANVAS_NOTE_COLORS = [
+    {
+        key: 'amber',
+        label: 'Amber',
+        background: '#733e0a',
+        border: '#a16207',
+        text: '#fff7ed',
+    },
+    {
+        key: 'slate',
+        label: 'Slate',
+        background: '#1f2937',
+        border: '#475569',
+        text: '#f8fafc',
+    },
+    {
+        key: 'rose',
+        label: 'Rose',
+        background: '#881337',
+        border: '#be123c',
+        text: '#fff1f2',
+    },
+    {
+        key: 'emerald',
+        label: 'Emerald',
+        background: '#064e3b',
+        border: '#059669',
+        text: '#ecfdf5',
+    },
+    {
+        key: 'blue',
+        label: 'Blue',
+        background: '#1e3a8a',
+        border: '#2563eb',
+        text: '#eff6ff',
+    },
+    {
+        key: 'violet',
+        label: 'Violet',
+        background: '#4c1d95',
+        border: '#7c3aed',
+        text: '#f5f3ff',
+    },
+    {
+        key: 'neutral',
+        label: 'Neutral',
+        background: '#262626',
+        border: '#737373',
+        text: '#fafafa',
+    },
+];
+const DEFAULT_COLOR = CANVAS_NOTE_COLORS[0];
+function canvasNoteGroupId(noteId) {
+    return `${CANVAS_NOTE_GROUP_PREFIX}${noteId}`;
+}
+function parseCanvasNoteGroupId(value) {
+    if (!value?.startsWith(CANVAS_NOTE_GROUP_PREFIX))
+        return null;
+    const id = value.slice(CANVAS_NOTE_GROUP_PREFIX.length).trim();
+    return id || null;
+}
+function resolveCanvasNoteColor(color) {
+    return (CANVAS_NOTE_COLORS.find((item) => item.key === color) ?? DEFAULT_COLOR);
+}
+function createCanvasNote(position, now = new Date().toISOString()) {
+    return {
+        id: createCanvasNoteId(),
+        text: CANVAS_NOTE_DEFAULT_TEXT,
+        color: DEFAULT_COLOR.key,
+        x: Math.round(position.x),
+        y: Math.round(position.y),
+        width: CANVAS_NOTE_DEFAULT_WIDTH,
+        height: CANVAS_NOTE_DEFAULT_HEIGHT,
+        createdAt: now,
+        updatedAt: now,
+    };
+}
+function readCanvasNotesFromLayout(layout) {
+    return normalizeCanvasNotes(layout?.metadata?.[CANVAS_NOTE_METADATA_KEY]);
+}
+function writeCanvasNotesToLayout(layout, workflowId, notes) {
+    const metadata = { ...(layout?.metadata ?? {}) };
+    metadata[CANVAS_NOTE_METADATA_KEY] = notes.map((note) => ({ ...note }));
+    return {
+        workflowId,
+        version: layout?.version ?? null,
+        nodes: layout?.nodes ?? [],
+        connections: layout?.connections ?? [],
+        viewport: layout?.viewport ?? null,
+        metadata,
+    };
+}
+function upsertCanvasNote(notes, note) {
+    const index = notes.findIndex((item) => item.id === note.id);
+    if (index < 0)
+        return [...notes, note];
+    const next = notes.slice();
+    next[index] = note;
+    return next;
+}
+function patchCanvasNote(note, patch, now = new Date().toISOString()) {
+    return {
+        ...note,
+        text: patch.text ?? note.text,
+        color: resolveCanvasNoteColor(patch.color ?? note.color).key,
+        x: normalizeNumber(patch.x, note.x),
+        y: normalizeNumber(patch.y, note.y),
+        width: Math.max(CANVAS_NOTE_MIN_WIDTH, normalizeNumber(patch.width, note.width)),
+        height: Math.max(CANVAS_NOTE_MIN_HEIGHT, normalizeNumber(patch.height, note.height)),
+        updatedAt: now,
+    };
+}
+function duplicateCanvasNote(note, now = new Date().toISOString()) {
+    return {
+        ...note,
+        id: createCanvasNoteId(),
+        x: note.x + 32,
+        y: note.y + 32,
+        createdAt: now,
+        updatedAt: now,
+    };
+}
+function normalizeCanvasNotes(value) {
+    if (!Array.isArray(value))
+        return [];
+    return value
+        .map((item) => normalizeCanvasNote(item))
+        .filter((item) => item != null);
+}
+function normalizeCanvasNote(value) {
+    if (!isRecord(value))
+        return null;
+    const id = readString$9(value, 'id');
+    if (!id)
+        return null;
+    return {
+        id,
+        text: readString$9(value, 'text') ?? CANVAS_NOTE_DEFAULT_TEXT,
+        color: resolveCanvasNoteColor(readString$9(value, 'color')).key,
+        x: normalizeNumber(value['x'], 120),
+        y: normalizeNumber(value['y'], 120),
+        width: Math.max(CANVAS_NOTE_MIN_WIDTH, normalizeNumber(value['width'], CANVAS_NOTE_DEFAULT_WIDTH)),
+        height: Math.max(CANVAS_NOTE_MIN_HEIGHT, normalizeNumber(value['height'], CANVAS_NOTE_DEFAULT_HEIGHT)),
+        createdAt: readString$9(value, 'createdAt'),
+        updatedAt: readString$9(value, 'updatedAt'),
+    };
+}
+function createCanvasNoteId() {
+    const cryptoApi = globalThis.crypto;
+    if (cryptoApi && typeof cryptoApi.randomUUID === 'function') {
+        return cryptoApi.randomUUID();
+    }
+    return `note_${Date.now().toString(36)}_${Math.random()
+        .toString(36)
+        .slice(2, 8)}`;
+}
+function normalizeNumber(value, fallback) {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return Math.round(value);
+    }
+    if (typeof value === 'string' && value.trim()) {
+        const parsed = Number(value);
+        if (Number.isFinite(parsed))
+            return Math.round(parsed);
+    }
+    return fallback;
+}
+function readString$9(record, key) {
+    const value = record[key];
+    return typeof value === 'string' && value.trim() ? value : null;
+}
+function isRecord(value) {
+    return value != null && typeof value === 'object' && !Array.isArray(value);
+}
+
 /**
  * NGXS state model for the FlowPlus design-time workflow builder.
  *
@@ -7031,6 +7265,7 @@ const FLOWPLUS_WORKFLOW_DEFAULT_STATE = {
         selection: {
             stepIds: [],
             connectionIds: [],
+            canvasNoteIds: [],
             triggerId: null,
             isWorkflowSelected: true,
             activeTab: 'overview',
@@ -7841,6 +8076,7 @@ let FlowplusWorkflowState = class FlowplusWorkflowState {
                         ? Array.from(new Set([...cur.stepIds, action.stepId]))
                         : [action.stepId],
                     connectionIds: action.append ? cur.connectionIds : [],
+                    canvasNoteIds: [],
                     triggerId: null,
                     isWorkflowSelected: false,
                     activeTab: cur.activeTab || 'overview',
@@ -8044,6 +8280,7 @@ let FlowplusWorkflowState = class FlowplusWorkflowState {
                 selection: {
                     stepIds: [],
                     connectionIds: [action.connectionId],
+                    canvasNoteIds: [],
                     triggerId: null,
                     isWorkflowSelected: false,
                     activeTab: 'configure',
@@ -8059,6 +8296,7 @@ let FlowplusWorkflowState = class FlowplusWorkflowState {
                 selection: {
                     stepIds: [],
                     connectionIds: [],
+                    canvasNoteIds: [],
                     triggerId: action.triggerId,
                     isWorkflowSelected: false,
                     activeTab: 'configure',
@@ -8257,6 +8495,7 @@ let FlowplusWorkflowState = class FlowplusWorkflowState {
         }).pipe(catchError(() => EMPTY));
     }
     triggerTimers = new Map();
+    triggerCommitSeq = new Map();
     updateTrigger(ctx, action) {
         const state = ctx.getState();
         ctx.patchState({
@@ -8287,18 +8526,24 @@ let FlowplusWorkflowState = class FlowplusWorkflowState {
         }
         const patch = ctxState.patch;
         this.triggerTimers.delete(triggerId);
+        const seq = (this.triggerCommitSeq.get(triggerId) ?? 0) + 1;
+        this.triggerCommitSeq.set(triggerId, seq);
         handleApiRequest({
             ctx,
             key: FlowplusWorkflowActionKey.UpdateTrigger,
             request$: this.defApi.updateTrigger(triggerId, patch),
             onSuccess: (server, s) => {
+                const isLatest = this.triggerCommitSeq.get(triggerId) === seq;
                 const stillEditing = this.triggerTimers.has(triggerId);
                 const hasPending = hasOtherPending(s.builder.pendingOperations);
                 const hasQueuedTriggerUpdates = this.triggerTimers.size > 0;
+                const applyServer = isLatest && !stillEditing;
                 return {
                     builder: {
                         ...s.builder,
-                        triggers: s.builder.triggers.map((trigger) => trigger.id === triggerId && !stillEditing ? server : trigger),
+                        triggers: s.builder.triggers.map((trigger) => trigger.id === triggerId && applyServer
+                            ? { ...trigger, ...server, ...patch }
+                            : trigger),
                         dirty: {
                             ...s.builder.dirty,
                             triggers: hasPending || hasQueuedTriggerUpdates,
@@ -8370,6 +8615,95 @@ let FlowplusWorkflowState = class FlowplusWorkflowState {
         }
         return undefined;
     }
+    addCanvasNote(ctx, action) {
+        const state = ctx.getState();
+        const workflowId = state.builder.workflowId;
+        if (!workflowId)
+            return;
+        const notes = upsertCanvasNote(readCanvasNotesFromLayout(state.builder.layout), action.note);
+        this.patchCanvasNotes(ctx, workflowId, notes, [action.note.id]);
+        return ctx.dispatch(new MarkLayoutDirty());
+    }
+    updateCanvasNote(ctx, action) {
+        const state = ctx.getState();
+        const workflowId = state.builder.workflowId;
+        if (!workflowId)
+            return;
+        const notes = readCanvasNotesFromLayout(state.builder.layout);
+        const next = notes.map((note) => note.id === action.noteId ? patchCanvasNote(note, action.patch) : note);
+        if (!next.some((note) => note.id === action.noteId))
+            return;
+        this.patchCanvasNotes(ctx, workflowId, next);
+        return ctx.dispatch(new MarkLayoutDirty());
+    }
+    deleteCanvasNote(ctx, action) {
+        const state = ctx.getState();
+        const workflowId = state.builder.workflowId;
+        if (!workflowId)
+            return;
+        const notes = readCanvasNotesFromLayout(state.builder.layout);
+        const next = notes.filter((note) => note.id !== action.noteId);
+        if (next.length === notes.length)
+            return;
+        const selected = state.builder.selection.canvasNoteIds.includes(action.noteId)
+            ? []
+            : state.builder.selection.canvasNoteIds;
+        this.patchCanvasNotes(ctx, workflowId, next, selected);
+        return ctx.dispatch(new MarkLayoutDirty());
+    }
+    duplicateCanvasNote(ctx, action) {
+        const state = ctx.getState();
+        const workflowId = state.builder.workflowId;
+        if (!workflowId)
+            return;
+        const notes = readCanvasNotesFromLayout(state.builder.layout);
+        const note = notes.find((item) => item.id === action.noteId);
+        if (!note)
+            return;
+        const copy = duplicateCanvasNote(note);
+        this.patchCanvasNotes(ctx, workflowId, [...notes, copy], [copy.id]);
+        return ctx.dispatch(new MarkLayoutDirty());
+    }
+    selectCanvasNote(ctx, action) {
+        const state = ctx.getState();
+        ctx.patchState({
+            builder: {
+                ...state.builder,
+                selection: {
+                    stepIds: [],
+                    connectionIds: [],
+                    canvasNoteIds: action.noteId ? [action.noteId] : [],
+                    triggerId: null,
+                    isWorkflowSelected: false,
+                    activeTab: 'overview',
+                },
+            },
+            ui: { ...state.ui, isInspectorOpen: false },
+        });
+    }
+    patchCanvasNotes(ctx, workflowId, notes, selectedNoteIds) {
+        const state = ctx.getState();
+        const selection = selectedNoteIds === undefined
+            ? state.builder.selection
+            : {
+                stepIds: [],
+                connectionIds: [],
+                canvasNoteIds: selectedNoteIds,
+                triggerId: null,
+                isWorkflowSelected: false,
+                activeTab: selectedNoteIds.length > 1 ? 'multi' : 'overview',
+            };
+        ctx.patchState({
+            builder: {
+                ...state.builder,
+                layout: writeCanvasNotesToLayout(state.builder.layout, workflowId, notes),
+                selection,
+                layoutSaveStatus: 'dirty',
+                dirty: { ...state.builder.dirty, layout: true },
+            },
+            ui: { ...state.ui, isInspectorOpen: false },
+        });
+    }
     saveLayout(ctx) {
         if (this.layoutTimer) {
             clearTimeout(this.layoutTimer);
@@ -8483,8 +8817,13 @@ let FlowplusWorkflowState = class FlowplusWorkflowState {
     setSelectionFromCanvas(ctx, action) {
         const state = ctx.getState();
         const cur = state.builder.selection;
-        const nothing = action.stepIds.length === 0 && action.connectionIds.length === 0;
-        const single = action.stepIds.length + action.connectionIds.length === 1;
+        const nothing = action.stepIds.length === 0 &&
+            action.connectionIds.length === 0 &&
+            action.canvasNoteIds.length === 0;
+        const single = action.stepIds.length +
+            action.connectionIds.length +
+            action.canvasNoteIds.length ===
+            1;
         let activeTab = cur.activeTab;
         if (nothing)
             activeTab = 'overview';
@@ -8497,12 +8836,16 @@ let FlowplusWorkflowState = class FlowplusWorkflowState {
         else if (action.connectionIds.length === 1) {
             activeTab = 'configure';
         }
+        else if (action.canvasNoteIds.length === 1) {
+            activeTab = 'overview';
+        }
         ctx.patchState({
             builder: {
                 ...state.builder,
                 selection: {
                     stepIds: action.stepIds,
                     connectionIds: action.connectionIds,
+                    canvasNoteIds: action.canvasNoteIds,
                     triggerId: null,
                     // Clicking empty canvas no longer auto-selects the workflow root —
                     // the canvas-first shell expects the inspector to close on empty
@@ -8519,7 +8862,9 @@ let FlowplusWorkflowState = class FlowplusWorkflowState {
             // empty canvas still closes whatever was open.
             ui: {
                 ...state.ui,
-                isInspectorOpen: nothing ? false : state.ui.isInspectorOpen,
+                isInspectorOpen: nothing || action.canvasNoteIds.length > 0
+                    ? false
+                    : state.ui.isInspectorOpen,
             },
         });
     }
@@ -9226,6 +9571,21 @@ __decorate([
 __decorate([
     Action(SetLayoutAutosavePaused)
 ], FlowplusWorkflowState.prototype, "setLayoutAutosavePaused", null);
+__decorate([
+    Action(AddCanvasNote)
+], FlowplusWorkflowState.prototype, "addCanvasNote", null);
+__decorate([
+    Action(UpdateCanvasNote)
+], FlowplusWorkflowState.prototype, "updateCanvasNote", null);
+__decorate([
+    Action(DeleteCanvasNote)
+], FlowplusWorkflowState.prototype, "deleteCanvasNote", null);
+__decorate([
+    Action(DuplicateCanvasNote)
+], FlowplusWorkflowState.prototype, "duplicateCanvasNote", null);
+__decorate([
+    Action(SelectCanvasNote)
+], FlowplusWorkflowState.prototype, "selectCanvasNote", null);
 __decorate([
     Action(SaveLayout)
 ], FlowplusWorkflowState.prototype, "saveLayout", null);
@@ -9438,7 +9798,7 @@ FlowplusWorkflowState = FlowplusWorkflowState_1 = __decorate([
 ], FlowplusWorkflowState);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FlowplusWorkflowState, decorators: [{
             type: Injectable
-        }], propDecorators: { loadWorkflowList: [], setStudioFilter: [], createWorkflow: [], duplicateWorkflow: [], deleteWorkflow: [], loadWorkflowBuilder: [], applyBuilderSnapshot: [], reloadWorkflowBuilder: [], clearWorkflowBuilder: [], loadWorkflowCatalog: [], setWorkflowCatalog: [], loadContextCatalog: [], loadContextCatalogForStep: [], setContextCatalog: [], updateWorkflowMetadata: [], commitWorkflowMetadata: [], setWorkflowDefinition: [], updateWorkflowResources: [], updateWorkflowVariables: [], selectStep: [], createStep: [], updateStep: [], deleteStep: [], moveStep: [], selectConnection: [], selectTrigger: [], createConnection: [], updateConnection: [], deleteConnection: [], loadTriggers: [], createTrigger: [], updateTrigger: [], deleteTrigger: [], loadLayout: [], markLayoutDirty: [], setLayoutAutosavePaused: [], saveLayout: [], validateWorkflow: [], setValidation: [], setLayout: [], publishWorkflow: [], unpublishWorkflow: [], setSelection: [], setSelectionFromCanvas: [], setActiveInspectorTab: [], setBottomPanelTab: [], setBottomPanelOpen: [], setMinimap: [], setPaletteOpen: [], setInspectorOpen: [], setCreateDialogOpen: [], setPaletteSearch: [], setCanvasViewport: [], setReadonly: [], setPendingOperation: [], clearPendingOperation: [], clearConflict: [], undoBuilderCommand: [], redoBuilderCommand: [], clearCommandHistory: [], setSelectedRuntimeTrigger: [], runAutomationTrigger: [], pollAutomationExecution: [], loadLatestAutomationExecution: [], loadAutomationExecution: [], applyAutomationExecutionDetail: [], clearAutomationRuntimeState: [], selectRuntimeNodeRun: [], runWorkflowTest: [] } });
+        }], propDecorators: { loadWorkflowList: [], setStudioFilter: [], createWorkflow: [], duplicateWorkflow: [], deleteWorkflow: [], loadWorkflowBuilder: [], applyBuilderSnapshot: [], reloadWorkflowBuilder: [], clearWorkflowBuilder: [], loadWorkflowCatalog: [], setWorkflowCatalog: [], loadContextCatalog: [], loadContextCatalogForStep: [], setContextCatalog: [], updateWorkflowMetadata: [], commitWorkflowMetadata: [], setWorkflowDefinition: [], updateWorkflowResources: [], updateWorkflowVariables: [], selectStep: [], createStep: [], updateStep: [], deleteStep: [], moveStep: [], selectConnection: [], selectTrigger: [], createConnection: [], updateConnection: [], deleteConnection: [], loadTriggers: [], createTrigger: [], updateTrigger: [], deleteTrigger: [], loadLayout: [], markLayoutDirty: [], setLayoutAutosavePaused: [], addCanvasNote: [], updateCanvasNote: [], deleteCanvasNote: [], duplicateCanvasNote: [], selectCanvasNote: [], saveLayout: [], validateWorkflow: [], setValidation: [], setLayout: [], publishWorkflow: [], unpublishWorkflow: [], setSelection: [], setSelectionFromCanvas: [], setActiveInspectorTab: [], setBottomPanelTab: [], setBottomPanelOpen: [], setMinimap: [], setPaletteOpen: [], setInspectorOpen: [], setCreateDialogOpen: [], setPaletteSearch: [], setCanvasViewport: [], setReadonly: [], setPendingOperation: [], clearPendingOperation: [], clearConflict: [], undoBuilderCommand: [], redoBuilderCommand: [], clearCommandHistory: [], setSelectedRuntimeTrigger: [], runAutomationTrigger: [], pollAutomationExecution: [], loadLatestAutomationExecution: [], loadAutomationExecution: [], applyAutomationExecutionDetail: [], clearAutomationRuntimeState: [], selectRuntimeNodeRun: [], runWorkflowTest: [] } });
 function collectRuntimeFacts(detail) {
     const nodeKeyByRunId = new Map((detail.nodeRuns ?? []).map((nodeRun) => [
         String(nodeRun.nodeRunId),
@@ -9831,6 +10191,8 @@ class FlowplusWorkflowFacade {
     selection = select(FlowplusWorkflowState.selection);
     viewport = select(FlowplusWorkflowState.viewport);
     layout = select(FlowplusWorkflowState.layout);
+    canvasNotes = computed(() => readCanvasNotesFromLayout(this.layout()), ...(ngDevMode ? [{ debugName: "canvasNotes" }] : /* istanbul ignore next */ []));
+    selectedCanvasNoteIds = computed(() => this.selection().canvasNoteIds, ...(ngDevMode ? [{ debugName: "selectedCanvasNoteIds" }] : /* istanbul ignore next */ []));
     saveStatus = select(FlowplusWorkflowState.saveStatus);
     layoutSaveStatus = select(FlowplusWorkflowState.layoutSaveStatus);
     dirtyFlags = select(FlowplusWorkflowState.dirtyFlags);
@@ -10244,20 +10606,24 @@ class FlowplusWorkflowFacade {
         return this.store.dispatch(new SetSelection({
             stepIds: [],
             connectionIds: [],
+            canvasNoteIds: [],
             triggerId: null,
             isWorkflowSelected: true,
             activeTab: 'overview',
         }));
     }
     /** Set selection from a Foblex `fSelectionChange` payload. */
-    setSelectionFromCanvas(stepIds, connectionIds) {
-        return this.store.dispatch(new SetSelectionFromCanvas(stepIds, connectionIds));
+    setSelectionFromCanvas(stepIds, connectionIds, canvasNoteIds = []) {
+        return this.store.dispatch(new SetSelectionFromCanvas(stepIds, connectionIds, canvasNoteIds));
     }
     /** Select every step (Ctrl/Cmd+A). */
     selectAll() {
         const ids = this.steps().map((s) => s.id);
         return this.store.dispatch(new SetSelectionFromCanvas(ids, []));
     }
+    selectCanvasNote(noteId) {
+        return this.store.dispatch(new SelectCanvasNote(noteId));
+    }
     setInspectorTab(tab) {
         return this.store.dispatch(new SetActiveInspectorTab(tab));
     }
@@ -10301,6 +10667,21 @@ class FlowplusWorkflowFacade {
     deleteTrigger(triggerId) {
         return this.store.dispatch(new DeleteTrigger(triggerId));
     }
+    /* -------- canvas notes -------- */
+    addCanvasNote(position) {
+        const note = createCanvasNote(position);
+        this.store.dispatch(new AddCanvasNote(note));
+        return note;
+    }
+    updateCanvasNote(noteId, patch) {
+        return this.store.dispatch(new UpdateCanvasNote(noteId, patch));
+    }
+    deleteCanvasNote(noteId) {
+        return this.store.dispatch(new DeleteCanvasNote(noteId));
+    }
+    duplicateCanvasNote(noteId) {
+        return this.store.dispatch(new DuplicateCanvasNote(noteId));
+    }
     /* -------- layout -------- */
     loadLayout() {
         return this.store.dispatch(new LoadLayout());
@@ -10346,6 +10727,28 @@ class FlowplusWorkflowFacade {
                 y: trigger.y,
             };
         }
+        let layoutForNotes = state.layout;
+        if ((args.notes?.length ?? 0) > 0) {
+            const notes = readCanvasNotesFromLayout(state.layout);
+            let notesChanged = false;
+            const nextNotes = notes.map((note) => {
+                const update = args.notes?.find((item) => item.noteId === note.id);
+                if (!update)
+                    return note;
+                const next = patchCanvasNote(note, update);
+                if (next.x !== note.x ||
+                    next.y !== note.y ||
+                    next.width !== note.width ||
+                    next.height !== note.height) {
+                    notesChanged = true;
+                }
+                return next;
+            });
+            if (notesChanged) {
+                changed = true;
+                layoutForNotes = writeCanvasNotesToLayout(state.layout, state.workflowId, nextNotes);
+            }
+        }
         if (!changed)
             return false;
         if ((args.triggers?.length ?? 0) > 0) {
@@ -10353,11 +10756,17 @@ class FlowplusWorkflowFacade {
         }
         this.store.dispatch(new SetLayout({
             workflowId: state.workflowId,
-            version: state.layout?.version ?? null,
+            version: layoutForNotes?.version ?? null,
             nodes: Array.from(nodesByStepId.values()),
-            connections: state.layout?.connections ?? [],
-            viewport: state.layout?.viewport ?? null,
-            metadata,
+            connections: layoutForNotes?.connections ?? [],
+            viewport: layoutForNotes?.viewport ?? null,
+            metadata: {
+                ...metadata,
+                ...(layoutForNotes?.metadata ?? {}),
+                ...((args.triggers?.length ?? 0) > 0
+                    ? { triggerPositions }
+                    : {}),
+            },
         }));
         if (options.scheduleSave !== false) {
             this.store.dispatch(new MarkLayoutDirty());
@@ -12468,6 +12877,19 @@ function toPolicy(main, advanced, advancedEmptyState) {
     };
 }
 
+const SCHEDULE_MODE_EXCLUSIVE_KEYS = [
+    'cron',
+    'cronExpression',
+    'intervalSeconds',
+    'everySeconds',
+    'seconds',
+    'intervalMinutes',
+    'everyMinutes',
+    'runAt',
+    'runAtUtc',
+    'oneTimeAt',
+    'at',
+];
 class AutomationSmartEditorComponent {
     step = input(null, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
     trigger = input(null, ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
@@ -12628,10 +13050,26 @@ class AutomationSmartEditorComponent {
         { value: 'hmac', label: 'HMAC' },
         { value: 'sharedSecret', label: 'Shared secret' },
     ];
-    scheduleModeOptions = [
-        { value: 'cron', label: 'Cron' },
-        { value: 'interval', label: 'Interval' },
-    ];
+    scheduleModeOptions = computed(() => {
+        const supportedModes = readStringArray$2(asRecord$4(this.scheduleOptions())['supportedModes']);
+        const modes = supportedModes.length > 0
+            ? supportedModes
+            : ['cron', 'interval', 'once'];
+        const seen = new Set();
+        return modes
+            .map((mode) => String(mode).trim())
+            .filter((mode) => {
+            const normalized = mode.toLowerCase();
+            if (!normalized || seen.has(normalized))
+                return false;
+            seen.add(normalized);
+            return true;
+        })
+            .map((mode) => ({
+            value: mode,
+            label: scheduleModeLabel(mode),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "scheduleModeOptions" }] : /* istanbul ignore next */ []));
     ifOperatorOptions = [
         { value: 'equals', label: 'Equals' },
         { value: 'notEquals', label: 'Not equals' },
@@ -12716,6 +13154,11 @@ class AutomationSmartEditorComponent {
             label: humanize$1(policy),
         })),
     ], ...(ngDevMode ? [{ debugName: "misfirePolicyOptions" }] : /* istanbul ignore next */ []));
+    scheduleMode = computed(() => normalizeScheduleMode(this.config()['mode']), ...(ngDevMode ? [{ debugName: "scheduleMode" }] : /* istanbul ignore next */ []));
+    showScheduleCron = computed(() => this.scheduleMode() === 'cron', ...(ngDevMode ? [{ debugName: "showScheduleCron" }] : /* istanbul ignore next */ []));
+    showScheduleInterval = computed(() => this.scheduleMode() === 'interval', ...(ngDevMode ? [{ debugName: "showScheduleInterval" }] : /* istanbul ignore next */ []));
+    showScheduleOnce = computed(() => this.scheduleMode() === 'once', ...(ngDevMode ? [{ debugName: "showScheduleOnce" }] : /* istanbul ignore next */ []));
+    showScheduleStartDate = computed(() => !this.showScheduleOnce(), ...(ngDevMode ? [{ debugName: "showScheduleStartDate" }] : /* istanbul ignore next */ []));
     formOptions = computed(() => [
         { value: '', label: 'Select backend form' },
         ...this.forms().map((form) => ({
@@ -13002,6 +13445,14 @@ class AutomationSmartEditorComponent {
     onConfigFieldChange(key, value) {
         this.patchConfig({ ...this.config(), [key]: coerceFieldValue(value) });
     }
+    onScheduleModeChange(value) {
+        const mode = normalizeScheduleMode(selectScalarValue(value));
+        const next = { ...this.config(), mode };
+        for (const key of SCHEDULE_MODE_EXCLUSIVE_KEYS) {
+            delete next[key];
+        }
+        this.patchConfig(next);
+    }
     onSubworkflowTargetChange(automationId) {
         const automation = this.subworkflowAutomations().find((item) => String(item.automationId) === String(automationId));
         this.patchConfig({
@@ -13807,7 +14258,7 @@ class AutomationSmartEditorComponent {
             .subscribe((result) => this.subworkflowAutomations.set(result.items ?? []));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AutomationSmartEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AutomationSmartEditorComponent, isStandalone: true, selector: "fp-automation-smart-editor", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block h-full min-h-0" }, ngImport: i0, template: "<div\n  class=\"fp-scroll flex h-full min-h-0 flex-col overflow-y-auto\"\n  fpDropData\n  [fpDropAutoInsert]=\"false\"\n  (dataDrop)=\"insertExpression($event)\"\n>\n  <div class=\"space-y-4 px-5 py-5\">\n    @if (helperError()) {\n      <div\n        class=\"rounded-lg border border-[rgb(var(--fp-warning))]/30 bg-[rgb(var(--fp-warning))]/10 px-3 py-2 text-[12px] leading-5 text-(--p-text-color)\"\n      >\n        {{ helperError() }}\n      </div>\n    }\n\n    @if (sectionInMain(\"startConnection\") && trigger()) {\n      <section\n        class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\n      >\n        <h3\n          class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\n        >\n          Start connection\n        </h3>\n        <div class=\"space-y-3 p-4\">\n          @if (startConnection().key) {\n            @if (startConnection().step) {\n              <div class=\"flex flex-wrap items-start justify-between gap-3\">\n                <div class=\"min-w-0 space-y-1\">\n                  <div class=\"text-[12px] font-semibold text-(--p-text-muted-color)\">\n                    First node connected\n                  </div>\n                  <div class=\"truncate text-[14px] font-semibold text-(--p-text-color)\">\n                    {{ startConnection().label }}\n                  </div>\n                  <div class=\"flex flex-wrap items-center gap-2 text-[12px] text-(--p-text-muted-color)\">\n                    <span>Managed on canvas</span>\n                    <span\n                      class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\"\n                    >\n                      {{ startConnection().key }}\n                    </span>\n                  </div>\n                </div>\n                <div class=\"flex shrink-0 flex-wrap gap-2\">\n                  <mt-button\n                    size=\"small\"\n                    variant=\"outlined\"\n                    severity=\"secondary\"\n                    label=\"Focus connected node\"\n                    (onClick)=\"focusStartConnection()\"\n                  />\n                </div>\n              </div>\n            } @else {\n              <div class=\"space-y-2\">\n                <div class=\"text-[14px] font-semibold text-(--p-text-color)\">\n                  No first node connected\n                </div>\n                <p class=\"m-0 text-[12px] leading-5 text-(--p-text-muted-color)\">\n                  The saved start connection points to a node key that is not on\n                  the canvas. Connect this trigger to the first node on the\n                  canvas.\n                </p>\n                <div class=\"flex flex-wrap items-center gap-2 text-[12px] text-(--p-text-muted-color)\">\n                  <span>Technical key</span>\n                  <span\n                    class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\"\n                  >\n                    {{ startConnection().key }}\n                  </span>\n                  <span>Managed on canvas</span>\n                </div>\n              </div>\n            }\n          } @else {\n            <div class=\"rounded-lg border border-dashed border-(--p-content-border-color) bg-(--p-surface-50) p-3\">\n              <div class=\"text-[14px] font-semibold text-(--p-text-color)\">\n                No first node connected\n              </div>\n              <p class=\"m-0 mt-1 text-[12px] leading-5 text-(--p-text-muted-color)\">\n                Connect this trigger to the first node on the canvas.\n              </p>\n            </div>\n          }\n        </div>\n      </section>\n    }\n\n    @switch (editorType()) {\n      @case (\"ManualTrigger\") {\n        @if (sectionInMain(\"manualTrigger\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Manual run input</div>\n          @if (hasTriggerPayloadSchema() && triggerPayloadSchema(); as schema) {\n            <div class=\"rounded-md border border-surface-200 bg-surface-0 p-3\">\n              <div class=\"fp-ae-label mb-2\">Payload schema</div>\n              <pre class=\"fp-ae-code\">{{ schemaText(schema) }}</pre>\n            </div>\n          }\n          @if (triggerPayloadSample(); as sample) {\n            <div class=\"mt-3 rounded-md border border-surface-200 bg-surface-0 p-3\">\n              <div class=\"fp-ae-label mb-2\">Sample payload</div>\n              <pre class=\"fp-ae-code\">{{ schemaText(sample) }}</pre>\n            </div>\n          }\n          @if (!hasTriggerPayloadSchema() && !triggerPayloadSample()) {\n            <p class=\"fp-ae-copy\">\n              This manual trigger has no backend-provided input schema. It can still be connected to the first step on the canvas.\n            </p>\n          }\n        </section>\n        }\n      }\n      @case (\"WebhookTrigger\") {\n        @if (sectionInMain(\"webhookSetup\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Webhook setup</div>\n          @if (webhookSetup(); as setup) {\n            <div class=\"flex gap-2\">\n              <mt-text-field\n                class=\"flex-1 font-mono\"\n                [ngModel]=\"setup.webhookUrl ?? ''\"\n                [readonly]=\"true\"\n                label=\"Webhook URL\"\n                hint=\"Backend-generated endpoint clients should call to start this trigger.\"\n              />\n              <mt-button class=\"self-end\" size=\"small\" variant=\"outlined\" label=\"Copy\" (onClick)=\"copyWebhookUrl()\" />\n            </div>\n            <div class=\"grid gap-2 md:grid-cols-2\">\n              <div class=\"fp-ae-kv\">\n                <span>Auth mode</span>\n                <strong>{{ setup.authMode ?? \"Backend default\" }}</strong>\n              </div>\n              <div class=\"fp-ae-kv\">\n                <span>Required headers</span>\n                <strong>{{ (setup.requiredHeaders ?? []).join(\", \") || \"-\" }}</strong>\n              </div>\n            </div>\n            @if (setup.hmacSigning) {\n              <p class=\"fp-ae-copy\">{{ setup.hmacSigning }}</p>\n            }\n            @if (setup.sampleRequest) {\n              <details class=\"mt-3 rounded-lg border border-(--p-content-border-color)\">\n                <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">\n                  Sample request\n                </summary>\n                <pre class=\"fp-ae-code\">{{ schemaText(setup.sampleRequest) }}</pre>\n              </details>\n            }\n          } @else {\n            <p class=\"fp-ae-copy\">\n              Webhook setup is not available for this draft yet.\n            </p>\n          }\n        </section>\n        }\n        @if (sectionInMain(\"authPolicy\") && hasAuthPolicy()) {\n          <section class=\"fp-ae-panel\">\n            <div class=\"fp-ae-section-title\">Authentication policy</div>\n            <div class=\"grid gap-3 md:grid-cols-3\">\n              <mt-select-field\n                [ngModel]=\"authPolicy()['mode'] ?? ''\"\n                (ngModelChange)=\"onAuthFieldChange('mode', $event)\"\n                label=\"Mode\"\n                hint=\"Authentication mode required by the backend webhook policy.\"\n                [options]=\"authModeOptions\"\n                optionValue=\"value\"\n                optionLabel=\"label\"\n              />\n              <mt-text-field\n                [ngModel]=\"authPolicy()['signatureHeaderName'] ?? ''\"\n                (ngModelChange)=\"onAuthFieldChange('signatureHeaderName', $event)\"\n                label=\"Signature header\"\n                hint=\"Header name that carries the webhook signature when the policy requires signed requests.\"\n              />\n              <mt-text-field\n                [ngModel]=\"authPolicy()['timestampHeaderName'] ?? ''\"\n                (ngModelChange)=\"onAuthFieldChange('timestampHeaderName', $event)\"\n                label=\"Timestamp header\"\n                hint=\"Header name that carries the request timestamp for replay protection.\"\n              />\n            </div>\n          </section>\n        }\n      }\n      @case (\"FormSubmitTrigger\") {\n        @if (sectionInMain(\"formBinding\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Form binding</div>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-select-field\n              [ngModel]=\"selectedFormId() || formBinding()?.formId || ''\"\n              (ngModelChange)=\"onFormChange($event)\"\n              label=\"Form\"\n              hint=\"Choose a backend form that will submit data into this trigger.\"\n              [options]=\"formOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-select-field\n              [ngModel]=\"selectedFormVersionId() || formBinding()?.formVersionId || ''\"\n              (ngModelChange)=\"onFormVersionChange($event)\"\n              label=\"Form version\"\n              hint=\"Persist the exact backend formVersionId. Do not type or generate IDs manually.\"\n              [options]=\"formVersionOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n          </div>\n          <div class=\"mt-3 flex flex-wrap items-center gap-2\">\n            <mt-button size=\"small\" severity=\"primary\" label=\"Save binding\" (onClick)=\"saveFormBinding()\" />\n            @if (formBinding()) {\n              <span class=\"rounded-lg bg-(--p-surface-100) px-2 py-1 font-mono text-[11px] text-(--p-text-muted-color)\">\n                {{ formBinding()!.formVersionId }}\n              </span>\n            }\n          </div>\n          @if (formSchema(); as schema) {\n            <details class=\"mt-3 rounded-lg border border-(--p-content-border-color)\">\n              <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">\n                Form schema preview\n              </summary>\n              <pre class=\"fp-ae-code\">{{ schemaText(schema.schema) }}</pre>\n            </details>\n          }\n        </section>\n        }\n      }\n      @case (\"ScheduleTrigger\") {\n        @if (sectionInMain(\"schedule\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Schedule</div>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-select-field\n              [ngModel]=\"config()['mode'] ?? 'cron'\"\n              (ngModelChange)=\"onConfigFieldChange('mode', $event)\"\n              label=\"Mode\"\n              hint=\"Pick one schedule mode: cron, interval, or once. Backend validation requires exactly one mode.\"\n              [options]=\"scheduleModeOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-select-field\n              [ngModel]=\"config()['timezone'] ?? 'UTC'\"\n              (ngModelChange)=\"onConfigFieldChange('timezone', $event)\"\n              label=\"Timezone\"\n              hint=\"Timezone used to calculate the next fire time.\"\n              [options]=\"timeZoneOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-text-field\n              class=\"font-mono\"\n              [ngModel]=\"config()['cron'] ?? ''\"\n              (ngModelChange)=\"onConfigFieldChange('cron', $event)\"\n              label=\"Cron\"\n              hint=\"Cron expression used only when mode is cron, for example 0 9 * * *.\"\n            />\n            <mt-number-field\n              [ngModel]=\"numberValue(config()['intervalSeconds'])\"\n              (ngModelChange)=\"onConfigFieldChange('intervalSeconds', $event)\"\n              label=\"Interval seconds\"\n              hint=\"Repeat interval in seconds used only when mode is interval.\"\n              [min]=\"0\"\n            />\n            <mt-date-field\n              [ngModel]=\"config()['startDate'] ?? ''\"\n              (ngModelChange)=\"onConfigFieldChange('startDate', $event)\"\n              label=\"Start date UTC\"\n              hint=\"UTC date/time used for once schedules or as the first allowed run time.\"\n              [showTime]=\"true\"\n              [showClear]=\"true\"\n              [pInputs]=\"dateTimePickerInputs\"\n            />\n            <mt-select-field\n              [ngModel]=\"config()['misfirePolicy'] ?? 'SkipMissed'\"\n              (ngModelChange)=\"onConfigFieldChange('misfirePolicy', $event)\"\n              label=\"Misfire policy\"\n              hint=\"Backend behavior when a scheduled run is missed while the automation is unavailable.\"\n              [options]=\"misfirePolicyOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n          </div>\n          <div class=\"mt-3 flex gap-2\">\n            <mt-button size=\"small\" variant=\"outlined\" label=\"Validate\" (onClick)=\"validateSchedule()\" />\n            <mt-button size=\"small\" severity=\"primary\" label=\"Preview next fire\" (onClick)=\"previewSchedule()\" />\n          </div>\n          @if (schedulePreview(); as preview) {\n            <div class=\"mt-3 rounded-lg bg-(--p-surface-100) px-3 py-2 text-[12px]\">\n              <strong class=\"text-emerald-600\">Valid</strong>\n              <span class=\"ms-2\">Next fire: {{ preview.nextFireAtUtc ?? \"-\" }}</span>\n            </div>\n          }\n        </section>\n        }\n      }\n      @case (\"SetFields\") {\n        @if (sectionInMain(\"setFields\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Set fields</div>\n          <ng-container *ngTemplateOutlet=\"mapEditor; context: { objectKey: 'fields', rows: fieldsRows(), keyLabel: 'Field', valueLabel: 'Value', addLabel: 'Add field' }\" />\n        </section>\n        }\n      }\n      @case (\"If\") {\n        @if (sectionInMain(\"condition\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Condition</div>\n          <div class=\"grid gap-3 md:grid-cols-[1fr_180px_1fr]\">\n            <mt-text-field\n              [ngModel]=\"fieldText('left')\"\n              (focusin)=\"setExpressionTarget('config:left')\"\n              (ngModelChange)=\"onConfigFieldChange('left', $event)\"\n              label=\"Left\"\n              hint=\"Left-side value or expression to compare.\"\n            />\n            <mt-select-field\n              [ngModel]=\"config()['operator'] ?? 'equals'\"\n              (ngModelChange)=\"onConfigFieldChange('operator', $event)\"\n              label=\"Operator\"\n              hint=\"Comparison operator used by the backend condition evaluator.\"\n              [options]=\"ifOperatorOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-text-field\n              [ngModel]=\"fieldText('right')\"\n              (focusin)=\"setExpressionTarget('config:right')\"\n              (ngModelChange)=\"onConfigFieldChange('right', $event)\"\n              label=\"Right\"\n              hint=\"Right-side value or expression to compare against.\"\n            />\n          </div>\n          <div class=\"mt-3 rounded-md border border-surface-200 bg-surface-0 p-3\">\n            <div class=\"fp-ae-label mb-2\">Route outputs</div>\n            <div class=\"flex flex-wrap gap-1.5\">\n              @for (key of routeOutputKeys(); track key) {\n                <span class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\">{{ key }}</span>\n              }\n            </div>\n          </div>\n        </section>\n        }\n      }\n      @case (\"HTTP\") {\n        @if (sectionInMain(\"httpRequest\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">HTTP request</div>\n          <div class=\"grid gap-3 md:grid-cols-[150px_1fr]\">\n            <mt-select-field\n              [ngModel]=\"config()['method'] ?? 'GET'\"\n              (ngModelChange)=\"onConfigFieldChange('method', $event)\"\n              label=\"Method\"\n              hint=\"HTTP method used for the outbound request.\"\n              [options]=\"httpMethodOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-text-field\n              class=\"font-mono\"\n              [ngModel]=\"config()['url'] ?? ''\"\n              (focusin)=\"setExpressionTarget('config:url')\"\n              (ngModelChange)=\"onConfigFieldChange('url', $event)\"\n              label=\"URL\"\n              hint=\"Target URL. Expressions are supported for dynamic hosts, paths, and query values.\"\n            />\n          </div>\n          <div class=\"mt-3\">\n            <ng-container *ngTemplateOutlet=\"mapEditor; context: { objectKey: 'headers', rows: headerRows(), keyLabel: 'Header', valueLabel: 'Value', addLabel: 'Add header' }\" />\n          </div>\n          <div class=\"mt-3\">\n            <ng-container *ngTemplateOutlet=\"mapEditor; context: { objectKey: 'query', rows: queryRows(), keyLabel: 'Query param', valueLabel: 'Value', addLabel: 'Add query param' }\" />\n          </div>\n          @if (supportsConfigKey('bodyMode')) {\n            <mt-select-field\n              class=\"mt-3\"\n              [ngModel]=\"config()['bodyMode'] ?? 'json'\"\n              (ngModelChange)=\"onConfigFieldChange('bodyMode', $event)\"\n              label=\"Body mode\"\n              hint=\"Backend-supported request body serialization mode.\"\n              [options]=\"httpBodyModeOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n          }\n          <mt-textarea-field\n            class=\"mt-3 w-full font-mono\"\n            [ngModel]=\"valueText(config()['body'] ?? '')\"\n            (focusin)=\"setExpressionTarget('config:body')\"\n            (ngModelChange)=\"onConfigFieldChange('body', $event)\"\n            label=\"Body\"\n            hint=\"Request body sent by the HTTP node. Use JSON or expressions when the backend schema allows it.\"\n            rows=\"6\"\n          />\n          @if (supportsConfigKey('timeoutSeconds') || supportsConfigKey('responseHandling')) {\n            <div class=\"mt-3 grid gap-3 md:grid-cols-2\">\n              @if (supportsConfigKey('timeoutSeconds')) {\n                <mt-number-field\n                  [ngModel]=\"numberValue(config()['timeoutSeconds'])\"\n                  (ngModelChange)=\"onConfigFieldChange('timeoutSeconds', $event)\"\n                  label=\"Timeout seconds\"\n                  hint=\"Request timeout when exposed by the backend schema.\"\n                  [min]=\"0\"\n                />\n              }\n              @if (supportsConfigKey('responseHandling')) {\n                <mt-text-field\n                  [ngModel]=\"config()['responseHandling'] ?? ''\"\n                  (ngModelChange)=\"onConfigFieldChange('responseHandling', $event)\"\n                  label=\"Response handling\"\n                  hint=\"Backend-supported response handling mode or expression.\"\n                />\n              }\n            </div>\n          }\n          @if (sectionInMain(\"credentials\")) {\n            <div class=\"mt-3 rounded-md border border-surface-200 bg-surface-0 p-3\">\n              <div class=\"fp-ae-label mb-2\">Credential</div>\n              <ng-container *ngTemplateOutlet=\"credentialSelector\" />\n            </div>\n          }\n        </section>\n        }\n      }\n      @case (\"Wait\") {\n        @if (sectionInMain(\"wait\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Wait</div>\n          <div class=\"grid gap-3 md:grid-cols-3\">\n            <mt-select-field\n              [ngModel]=\"config()['mode'] ?? 'duration'\"\n              (ngModelChange)=\"onConfigFieldChange('mode', $event)\"\n              label=\"Mode\"\n              hint=\"Choose whether this wait uses a duration or a specific date/time.\"\n              [options]=\"waitModeOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-number-field\n              [ngModel]=\"numberValue(config()['durationSeconds'])\"\n              (ngModelChange)=\"onConfigFieldChange('durationSeconds', $event)\"\n              label=\"Duration seconds\"\n              hint=\"How long execution should wait when mode is duration.\"\n              [min]=\"0\"\n            />\n            <mt-date-field\n              [ngModel]=\"config()['waitUntil'] ?? ''\"\n              (ngModelChange)=\"onConfigFieldChange('waitUntil', $event)\"\n              label=\"Wait until\"\n              hint=\"Date/time that resolves to when execution should resume.\"\n              [showTime]=\"true\"\n              [showClear]=\"true\"\n              [pInputs]=\"dateTimePickerInputs\"\n            />\n          </div>\n          @if (supportsConfigKey('resumePayloadSchema') || supportsConfigKey('resumePayload')) {\n            <mt-textarea-field\n              class=\"mt-3 w-full font-mono\"\n              [ngModel]=\"valueText(config()['resumePayloadSchema'] ?? config()['resumePayload'] ?? '')\"\n              (focusin)=\"setExpressionTarget('config:resumePayload')\"\n              (ngModelChange)=\"onConfigFieldChange('resumePayload', $event)\"\n              label=\"Resume payload\"\n              hint=\"Expected payload when the backend supports manual or external resume data.\"\n              rows=\"5\"\n            />\n          }\n        </section>\n        }\n      }\n      @case (\"HumanApproval\") {\n        @if (sectionInMain(\"approvalTask\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Approval task</div>\n          @if (assignmentOptions()?.providerStatus && assignmentOptions()?.providerStatus !== \"Available\") {\n            <p class=\"fp-ae-copy\">\n              Assignment provider status: {{ assignmentOptions()?.providerStatus }}.\n              The backend provider is the source of truth for available assignees.\n            </p>\n          }\n          <div class=\"grid gap-3 xl:grid-cols-3\">\n            <mt-text-field\n              [ngModel]=\"config()['title'] ?? ''\"\n              (focusin)=\"setExpressionTarget('config:title')\"\n              (ngModelChange)=\"onConfigFieldChange('title', $event)\"\n              label=\"Approval title\"\n              hint=\"Approval title shown to the assigned human approver.\"\n            />\n            <mt-select-field\n              [ngModel]=\"selectedAssignmentKey()\"\n              (ngModelChange)=\"onAssignmentOptionChange($event)\"\n              label=\"Assignment\"\n              hint=\"Backend-provided assignee, role, or group that can decide this approval.\"\n              [options]=\"assignmentSelectOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            @if (humanApprovalSupportsConfig('priority')) {\n              <mt-text-field\n                [ngModel]=\"config()['priority'] ?? ''\"\n                (ngModelChange)=\"onConfigFieldChange('priority', $event)\"\n                label=\"Priority\"\n                hint=\"Approval priority when supported by the backend schema.\"\n              />\n            }\n          </div>\n          <mt-textarea-field\n            class=\"mt-3 w-full\"\n            [ngModel]=\"config()['message'] ?? config()['instructions'] ?? ''\"\n            (focusin)=\"setExpressionTarget('config:message')\"\n            (ngModelChange)=\"onConfigFieldChange('message', $event)\"\n            label=\"Approval message\"\n            hint=\"Decision instructions shown to the approver.\"\n            rows=\"4\"\n          />\n          @if (humanApprovalSupportsConfig('dueDate') || humanApprovalSupportsConfig('dueInSeconds') || humanApprovalSupportsConfig('timeoutSeconds') || humanApprovalSupportsConfig('expiresAt') || humanApprovalSupportsConfig('commentsRequired') || humanApprovalSupportsConfig('allowReturn')) {\n            <div class=\"mt-3 grid gap-3 xl:grid-cols-4\">\n              @if (humanApprovalSupportsConfig('dueDate')) {\n                <mt-date-field\n                  [ngModel]=\"config()['dueDate'] ?? ''\"\n                  (ngModelChange)=\"onConfigFieldChange('dueDate', $event)\"\n                  label=\"Due date\"\n                  hint=\"Backend-supported approval due date.\"\n                  [showTime]=\"true\"\n                  [showClear]=\"true\"\n                  [pInputs]=\"dateTimePickerInputs\"\n                />\n              }\n              @if (humanApprovalSupportsConfig('dueInSeconds')) {\n                <mt-number-field\n                  [ngModel]=\"numberValue(config()['dueInSeconds'])\"\n                  (ngModelChange)=\"onConfigFieldChange('dueInSeconds', $event)\"\n                  label=\"Due in seconds\"\n                  hint=\"Relative approval due duration when supported by the backend schema.\"\n                  [min]=\"0\"\n                />\n              }\n              @if (humanApprovalSupportsConfig('timeoutSeconds')) {\n                <mt-number-field\n                  [ngModel]=\"numberValue(config()['timeoutSeconds'])\"\n                  (ngModelChange)=\"onConfigFieldChange('timeoutSeconds', $event)\"\n                  label=\"Timeout seconds\"\n                  hint=\"Approval timeout emitted according to backend approval runtime support.\"\n                  [min]=\"0\"\n                />\n              }\n              @if (humanApprovalSupportsConfig('expiresAt')) {\n                <mt-date-field\n                  [ngModel]=\"config()['expiresAt'] ?? ''\"\n                  (ngModelChange)=\"onConfigFieldChange('expiresAt', $event)\"\n                  label=\"Expires at\"\n                  hint=\"Backend-supported approval expiry timestamp.\"\n                  [showTime]=\"true\"\n                  [showClear]=\"true\"\n                  [pInputs]=\"dateTimePickerInputs\"\n                />\n              }\n              @if (humanApprovalSupportsConfig('commentsRequired')) {\n                <div class=\"flex min-h-[4.25rem] items-end rounded-md border border-surface-200 bg-surface-0 px-3 py-2\">\n                  <mt-toggle-field\n                    size=\"small\"\n                    label=\"Comments required\"\n                    labelPosition=\"end\"\n                    [ngModel]=\"config()['commentsRequired'] === true\"\n                    (ngModelChange)=\"onConfigFieldChange('commentsRequired', $event === true)\"\n                    hint=\"Require approver comments when the backend supports this flag.\"\n                  />\n                </div>\n              }\n              @if (humanApprovalSupportsConfig('allowReturn')) {\n                <div class=\"flex min-h-[4.25rem] items-end rounded-md border border-surface-200 bg-surface-0 px-3 py-2\">\n                  <mt-toggle-field\n                    size=\"small\"\n                    label=\"Allow return for changes\"\n                    labelPosition=\"end\"\n                    [ngModel]=\"config()['allowReturn'] !== false\"\n                    (ngModelChange)=\"onConfigFieldChange('allowReturn', $event === true)\"\n                    hint=\"Allow ReturnForChanges when the backend schema exposes this option.\"\n                  />\n                </div>\n              }\n            </div>\n          }\n          <div class=\"mt-3 space-y-3\">\n            <div class=\"fp-ae-section-title\">Decision options</div>\n            <div class=\"overflow-hidden rounded-md border border-surface-200 bg-surface-0\">\n              @if (selectedApprovalDecisionRows().length > 0) {\n                <div class=\"hidden border-b border-surface-200 bg-surface-50 px-3 py-2 text-[12px] font-semibold text-(--p-text-muted-color) xl:grid xl:grid-cols-[1.1fr_1fr_1.2fr_80px_44px] xl:gap-3\">\n                  <span>Decision label</span>\n                  <span>Canonical value</span>\n                  <span>Route output key</span>\n                  <span>Routes</span>\n                  <span>Action</span>\n                </div>\n                @for (decision of selectedApprovalDecisionRows(); track decision.value) {\n                  <div class=\"grid gap-2 border-b border-surface-100 px-3 py-3 last:border-b-0 xl:grid-cols-[1.1fr_1fr_1.2fr_80px_44px] xl:items-center xl:gap-3\">\n                    <div class=\"min-w-0\">\n                      <div class=\"text-[11px] font-semibold text-(--p-text-muted-color) xl:hidden\">Decision label</div>\n                      <div class=\"truncate text-[13px] font-semibold text-(--p-text-color)\">{{ decision.label }}</div>\n                    </div>\n                    <div class=\"min-w-0\">\n                      <div class=\"text-[11px] font-semibold text-(--p-text-muted-color) xl:hidden\">Canonical value</div>\n                      <div class=\"truncate font-mono text-[12px] text-(--p-text-color)\">{{ decision.value }}</div>\n                    </div>\n                    <div class=\"min-w-0\">\n                      <div class=\"text-[11px] font-semibold text-(--p-text-muted-color) xl:hidden\">Route output key</div>\n                      <div class=\"truncate font-mono text-[12px] text-(--p-text-muted-color)\">{{ decision.routeOutputKey }}</div>\n                    </div>\n                    <div>\n                      <div class=\"text-[11px] font-semibold text-(--p-text-muted-color) xl:hidden\">Routes</div>\n                      <div class=\"text-[13px] text-(--p-text-color)\">{{ decision.routeCount }}</div>\n                    </div>\n                    <mt-button\n                      class=\"justify-self-start xl:justify-self-end\"\n                      size=\"small\"\n                      variant=\"outlined\"\n                      severity=\"danger\"\n                      icon=\"general.trash-01\"\n                      tooltip=\"Remove decision option\"\n                      (onClick)=\"removeApprovalDecision(decision.value)\"\n                    />\n                  </div>\n                }\n              } @else {\n                <div class=\"px-3 py-4 text-[12px] text-(--p-text-muted-color)\">\n                  Add at least one backend-supported approval decision.\n                </div>\n              }\n            </div>\n            @if (approvalDecisionIssues().length > 0) {\n              <div class=\"rounded-lg border border-[rgb(var(--fp-error))]/30 bg-[rgb(var(--fp-error))]/10 px-3 py-2 text-[12px] leading-5 text-[rgb(var(--fp-error))]\">\n                @for (issue of approvalDecisionIssues(); track issue) {\n                  <div>{{ issue }}</div>\n                }\n              </div>\n            }\n            <div class=\"grid gap-2 md:grid-cols-[minmax(0,1fr)_auto]\">\n              <mt-select-field\n                [ngModel]=\"approvalDecisionToAdd()\"\n                (ngModelChange)=\"approvalDecisionToAdd.set($event)\"\n                label=\"Decision to add\"\n                hint=\"Only backend-supported decisions with matching route outputs are available.\"\n                [options]=\"addableApprovalDecisionOptions()\"\n                optionValue=\"value\"\n                optionLabel=\"label\"\n              />\n              <mt-button\n                class=\"self-end\"\n                size=\"small\"\n                variant=\"outlined\"\n                icon=\"general.plus\"\n                label=\"Add decision option\"\n                [disabled]=\"!approvalDecisionToAdd()\"\n                (onClick)=\"addApprovalDecision()\"\n              />\n            </div>\n          </div>\n          @if (humanApprovalSupportsConfig('payload') || humanApprovalSupportsConfig('context') || humanApprovalSupportsConfig('metadata')) {\n            <div class=\"mt-3 grid gap-3\">\n              @if (humanApprovalSupportsConfig('payload')) {\n                <mt-textarea-field\n                  class=\"w-full font-mono\"\n                  [ngModel]=\"valueText(config()['payload'] ?? '')\"\n                  (focusin)=\"setExpressionTarget('config:payload')\"\n                  (ngModelChange)=\"onConfigFieldChange('payload', $event)\"\n                  label=\"Payload\"\n                  hint=\"Approval task payload or context fields supported by backend schema.\"\n                  rows=\"5\"\n                />\n              }\n              @if (humanApprovalSupportsConfig('context')) {\n                <mt-textarea-field\n                  class=\"w-full font-mono\"\n                  [ngModel]=\"valueText(config()['context'] ?? '')\"\n                  (focusin)=\"setExpressionTarget('config:context')\"\n                  (ngModelChange)=\"onConfigFieldChange('context', $event)\"\n                  label=\"Context\"\n                  hint=\"Additional approval context supported by backend schema.\"\n                  rows=\"5\"\n                />\n              }\n              @if (humanApprovalSupportsConfig('metadata')) {\n                <mt-textarea-field\n                  class=\"w-full font-mono\"\n                  [ngModel]=\"valueText(config()['metadata'] ?? '')\"\n                  (focusin)=\"setExpressionTarget('config:metadata')\"\n                  (ngModelChange)=\"onConfigFieldChange('metadata', $event)\"\n                  label=\"Metadata\"\n                  hint=\"Additional approval metadata supported by the backend schema.\"\n                  rows=\"4\"\n                />\n              }\n            </div>\n          }\n          <div class=\"mt-3 flex gap-2\">\n            <mt-button size=\"small\" variant=\"outlined\" label=\"Validate assignment\" (onClick)=\"validateAssignment()\" />\n          </div>\n          @if (assignmentValidation(); as result) {\n            <div class=\"mt-3 rounded-lg bg-(--p-surface-100) px-3 py-2 text-[12px]\">\n              {{ result.isValid === false ? \"Assignment invalid\" : \"Assignment accepted by helper\" }}\n              @for (issue of resultIssues(result); track issue) {\n                <div class=\"mt-1 text-[11px] text-(--p-text-muted-color)\">{{ issue }}</div>\n              }\n            </div>\n          }\n          @if (sectionInMain(\"approvalOutput\")) {\n            <div class=\"mt-3 rounded-md border border-surface-200 bg-surface-0 p-3\">\n              <div class=\"fp-ae-label mb-2\">Output data</div>\n              <div class=\"flex flex-wrap gap-1.5\">\n                @for (field of approvalOutputFieldLabels; track field) {\n                  <span class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\">{{ field }}</span>\n                }\n              </div>\n              <div class=\"mt-3 fp-ae-label mb-2\">Approval routes</div>\n              <div class=\"flex flex-wrap gap-1.5\">\n                @for (key of routeOutputKeys(); track key) {\n                  <span class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\">{{ key }}</span>\n                }\n              </div>\n            </div>\n          }\n        </section>\n        }\n      }\n      @case (\"FlowPlusCommit\") {\n        @if (sectionInMain(\"flowplusCommit\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">FlowPlus commit</div>\n          <p class=\"fp-ae-copy\">\n            This node is the explicit module-data write boundary. Approval does\n            not commit data unless this node is reached.\n          </p>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-select-field\n              [ngModel]=\"config()['targetModule'] ?? ''\"\n              (ngModelChange)=\"onModuleChange($event)\"\n              label=\"Module\"\n              hint=\"Module whose records will be written by this explicit FlowPlus commit.\"\n              [options]=\"moduleOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-select-field\n              [ngModel]=\"config()['operation'] ?? ''\"\n              (ngModelChange)=\"onConfigFieldChange('operation', $event)\"\n              label=\"Operation\"\n              hint=\"Write operation supported by the selected backend module schema.\"\n              [options]=\"operationOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n          </div>\n          <mt-text-field\n            class=\"mt-3 font-mono\"\n            [ngModel]=\"config()['idempotencyKey'] ?? ''\"\n            (focusin)=\"setExpressionTarget('config:idempotencyKey')\"\n            (ngModelChange)=\"onConfigFieldChange('idempotencyKey', $event)\"\n            label=\"Idempotency key\"\n            hint=\"Optional stable key used by the backend to prevent duplicate writes.\"\n          />\n          @if (selectedModuleFields().length) {\n            <div class=\"mt-3 space-y-2\">\n              <div class=\"fp-ae-section-title\">Module schema</div>\n              <div class=\"grid gap-2 md:grid-cols-2\">\n                @for (field of selectedModuleFields(); track field.key) {\n                  <div class=\"fp-ae-kv\">\n                    <span>{{ field.displayName ?? field.key }}</span>\n                    <strong>{{ field.viewType ?? \"Value\" }} @if (field.required) { * }</strong>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n          <div class=\"mt-3\">\n            <ng-container *ngTemplateOutlet=\"mapEditor; context: { objectKey: 'mapping', rows: mappingRows(), keyLabel: 'Module field', valueLabel: 'Expression / value', addLabel: 'Add module field' }\" />\n          </div>\n          <div class=\"mt-3 flex gap-2\">\n            <mt-button size=\"small\" severity=\"primary\" label=\"Validate mapping\" (onClick)=\"validateCommitMapping()\" />\n          </div>\n          @if (commitValidation(); as result) {\n            <div class=\"mt-3 rounded-lg bg-(--p-surface-100) px-3 py-2 text-[12px]\">\n              {{ result.isValid === false ? \"Mapping invalid\" : \"Mapping accepted by helper\" }}\n              @for (issue of resultIssues(result); track issue) {\n                <div class=\"mt-1 text-[11px] text-(--p-text-muted-color)\">{{ issue }}</div>\n              }\n            </div>\n          }\n          @if (sectionInMain(\"credentials\")) {\n            <div class=\"mt-3 rounded-md border border-surface-200 bg-surface-0 p-3\">\n              <div class=\"fp-ae-label mb-2\">Credential</div>\n              <ng-container *ngTemplateOutlet=\"credentialSelector\" />\n            </div>\n          }\n        </section>\n        }\n      }\n      @case (\"WebhookResponse\") {\n        @if (sectionInMain(\"webhookResponse\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Webhook response</div>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-number-field\n              [ngModel]=\"numberValue(config()['statusCode']) ?? 200\"\n              (ngModelChange)=\"onConfigFieldChange('statusCode', $event)\"\n              label=\"Status code\"\n              hint=\"HTTP status code sent back by the webhook response node.\"\n              [min]=\"100\"\n              [max]=\"599\"\n            />\n            <mt-select-field\n              [ngModel]=\"config()['responseMode'] ?? 'json'\"\n              (ngModelChange)=\"onConfigFieldChange('responseMode', $event)\"\n              label=\"Response mode\"\n              hint=\"How the webhook response body should be serialized.\"\n              [options]=\"responseModeOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n          </div>\n          <div class=\"mt-3\">\n            <ng-container *ngTemplateOutlet=\"mapEditor; context: { objectKey: 'headers', rows: headerRows(), keyLabel: 'Header', valueLabel: 'Value', addLabel: 'Add header' }\" />\n          </div>\n          <mt-textarea-field\n            class=\"mt-3 w-full font-mono\"\n            [ngModel]=\"valueText(config()['body'] ?? '')\"\n            (focusin)=\"setExpressionTarget('config:body')\"\n            (ngModelChange)=\"onConfigFieldChange('body', $event)\"\n            label=\"Body\"\n            hint=\"Body returned to the webhook caller. Expressions can use current execution data.\"\n            rows=\"6\"\n          />\n        </section>\n        }\n      }\n      @case (\"CallAutomation\") {\n        @if (sectionInMain(\"callAutomation\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Subworkflow</div>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-select-field\n              [ngModel]=\"config()['targetAutomationId'] ?? ''\"\n              (ngModelChange)=\"onSubworkflowTargetChange($event)\"\n              label=\"Target automation\"\n              hint=\"Backend-provided automation candidate. Tenant and recursion validation stay on the backend.\"\n              [options]=\"subworkflowAutomationOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-select-field\n              [ngModel]=\"config()['revisionMode'] ?? 'Active'\"\n              (ngModelChange)=\"onConfigFieldChange('revisionMode', $event)\"\n              label=\"Revision mode\"\n              hint=\"Choose which published or active child revision to call.\"\n              [options]=\"revisionModeOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            @if (config()['revisionMode'] === \"SpecificRevision\") {\n              <mt-text-field\n                [ngModel]=\"config()['specificRevisionId'] ?? ''\"\n                (ngModelChange)=\"onConfigFieldChange('specificRevisionId', $event)\"\n                label=\"Specific revision id\"\n                hint=\"Required only when revision mode is Specific revision.\"\n              />\n            }\n            <mt-toggle-field\n              size=\"small\"\n              labelPosition=\"end\"\n              [ngModel]=\"config()['waitForCompletion'] !== false\"\n              (ngModelChange)=\"onConfigFieldChange('waitForCompletion', $event === true)\"\n              label=\"Wait for completion\"\n              hint=\"When disabled, the parent continues after dispatch and backend records the child linkage.\"\n            />\n          </div>\n          <div class=\"mt-3 grid gap-3 md:grid-cols-2\">\n            <mt-textarea-field\n              class=\"w-full font-mono md:col-span-2\"\n              [ngModel]=\"valueText(config()['inputMappingJson'] ?? '{}')\"\n              (focusin)=\"setExpressionTarget('config:inputMappingJson')\"\n              (ngModelChange)=\"onConfigFieldChange('inputMappingJson', $event)\"\n              label=\"Input mapping JSON\"\n              hint=\"JSON object or expression map sent into the child automation input.\"\n              rows=\"7\"\n            />\n            <mt-textarea-field\n              class=\"w-full font-mono md:col-span-2\"\n              [ngModel]=\"valueText(config()['outputMappingJson'] ?? '{}')\"\n              (focusin)=\"setExpressionTarget('config:outputMappingJson')\"\n              (ngModelChange)=\"onConfigFieldChange('outputMappingJson', $event)\"\n              label=\"Output mapping JSON\"\n              hint=\"JSON object or expression map for child output/status returned to the parent.\"\n              rows=\"7\"\n            />\n          </div>\n        </section>\n        }\n      }\n      @case (\"Subworkflow\") {\n        @if (sectionInMain(\"callAutomation\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Subworkflow</div>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-select-field\n              [ngModel]=\"config()['targetAutomationId'] ?? ''\"\n              (ngModelChange)=\"onSubworkflowTargetChange($event)\"\n              label=\"Target automation\"\n              hint=\"Backend-provided automation candidate. Tenant and recursion validation stay on the backend.\"\n              [options]=\"subworkflowAutomationOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-select-field\n              [ngModel]=\"config()['revisionMode'] ?? 'Active'\"\n              (ngModelChange)=\"onConfigFieldChange('revisionMode', $event)\"\n              label=\"Revision mode\"\n              hint=\"Choose which published or active child revision to call.\"\n              [options]=\"revisionModeOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            @if (config()['revisionMode'] === \"SpecificRevision\") {\n              <mt-text-field\n                [ngModel]=\"config()['specificRevisionId'] ?? ''\"\n                (ngModelChange)=\"onConfigFieldChange('specificRevisionId', $event)\"\n                label=\"Specific revision id\"\n                hint=\"Required only when revision mode is Specific revision.\"\n              />\n            }\n            <mt-toggle-field\n              size=\"small\"\n              labelPosition=\"end\"\n              [ngModel]=\"config()['waitForCompletion'] !== false\"\n              (ngModelChange)=\"onConfigFieldChange('waitForCompletion', $event === true)\"\n              label=\"Wait for completion\"\n              hint=\"When disabled, the parent continues after dispatch and backend records the child linkage.\"\n            />\n          </div>\n          <div class=\"mt-3 grid gap-3 md:grid-cols-2\">\n            <mt-textarea-field\n              class=\"w-full font-mono md:col-span-2\"\n              [ngModel]=\"valueText(config()['inputMappingJson'] ?? '{}')\"\n              (focusin)=\"setExpressionTarget('config:inputMappingJson')\"\n              (ngModelChange)=\"onConfigFieldChange('inputMappingJson', $event)\"\n              label=\"Input mapping JSON\"\n              hint=\"JSON object or expression map sent into the child automation input.\"\n              rows=\"7\"\n            />\n            <mt-textarea-field\n              class=\"w-full font-mono md:col-span-2\"\n              [ngModel]=\"valueText(config()['outputMappingJson'] ?? '{}')\"\n              (focusin)=\"setExpressionTarget('config:outputMappingJson')\"\n              (ngModelChange)=\"onConfigFieldChange('outputMappingJson', $event)\"\n              label=\"Output mapping JSON\"\n              hint=\"JSON object or expression map for child output/status returned to the parent.\"\n              rows=\"7\"\n            />\n          </div>\n        </section>\n        }\n      }\n      @case (\"ParallelStart\") {\n        @if (sectionInMain(\"parallelStart\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"flex items-center justify-between gap-3 border-b border-surface-200 bg-surface-50 px-4 py-3\">\n            <div class=\"fp-ae-section-title !m-0\">Parallel start</div>\n            <mt-button size=\"small\" variant=\"outlined\" icon=\"general.plus\" label=\"Add branch\" (onClick)=\"addParallelBranch()\" />\n          </div>\n          <div class=\"space-y-3 p-4\">\n            @for (branch of parallelBranches(); track branch.key; let i = $index) {\n              <div class=\"rounded-md border border-surface-200 bg-surface-0 p-3\">\n                <div class=\"grid gap-3 md:grid-cols-[160px_1fr_1fr_auto]\">\n                  <mt-text-field\n                    class=\"font-mono\"\n                    [ngModel]=\"branch.key\"\n                    (ngModelChange)=\"updateParallelBranch(i, 'key', $event)\"\n                    label=\"Branch key\"\n                    hint=\"Persisted route key. Do not use array index names.\"\n                  />\n                  <mt-text-field\n                    [ngModel]=\"branch.label\"\n                    (ngModelChange)=\"updateParallelBranch(i, 'label', $event)\"\n                    label=\"Label\"\n                    hint=\"Visual branch label. Changing it does not change existing routes.\"\n                  />\n                  <mt-text-field\n                    [ngModel]=\"branch.description\"\n                    (ngModelChange)=\"updateParallelBranch(i, 'description', $event)\"\n                    label=\"Description\"\n                    hint=\"Optional branch note for reviewers.\"\n                  />\n                  <div class=\"flex items-end gap-1\">\n                    <mt-button size=\"small\" variant=\"outlined\" icon=\"arrow.arrow-up\" tooltip=\"Move up\" (onClick)=\"moveParallelBranch(i, -1)\" />\n                    <mt-button size=\"small\" variant=\"outlined\" icon=\"arrow.arrow-down\" tooltip=\"Move down\" (onClick)=\"moveParallelBranch(i, 1)\" />\n                    <mt-button size=\"small\" variant=\"outlined\" severity=\"danger\" icon=\"general.trash-01\" tooltip=\"Remove branch\" (onClick)=\"removeParallelBranch(i)\" />\n                  </div>\n                </div>\n                <div class=\"mt-3 flex flex-wrap items-center gap-1.5 text-[11px]\">\n                  <span class=\"inline-flex h-7 items-center rounded-md border border-surface-200 bg-surface-50 px-2 font-mono font-semibold text-(--p-text-color)\">{{ branch.key }}</span>\n                  <span class=\"inline-flex h-7 items-center rounded-md border border-surface-200 bg-surface-0 px-2 font-medium text-(--p-text-muted-color)\">{{ branch.routeCount }} connected route{{ branch.routeCount === 1 ? \"\" : \"s\" }}</span>\n                </div>\n              </div>\n            }\n            @if (parallelBranches().length === 0) {\n              <p class=\"fp-ae-copy\">Add at least two stable branch keys. Backend validation blocks publish until branches are valid.</p>\n            }\n          </div>\n        </section>\n        }\n      }\n      @case (\"ParallelJoin\") {\n        @if (sectionInMain(\"parallelJoin\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Parallel join</div>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-select-field\n              [ngModel]=\"config()['joinPolicy'] ?? 'All'\"\n              (ngModelChange)=\"onConfigFieldChange('joinPolicy', $event)\"\n              label=\"Join policy\"\n              hint=\"Backend policy used to decide when branch wait is complete.\"\n              [options]=\"joinPolicyOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            @if (config()['joinPolicy'] === \"Threshold\") {\n              <mt-number-field\n                [ngModel]=\"numberValue(config()['threshold'])\"\n                (ngModelChange)=\"onConfigFieldChange('threshold', $event)\"\n                label=\"Threshold\"\n                hint=\"Minimum completed branch count required for Threshold policy.\"\n                [min]=\"1\"\n              />\n            }\n            <mt-select-field\n              [ngModel]=\"config()['aggregationStrategy'] ?? 'MergeObjects'\"\n              (ngModelChange)=\"onConfigFieldChange('aggregationStrategy', $event)\"\n              label=\"Aggregation strategy\"\n              hint=\"How backend joins branch outputs into the join node output.\"\n              [options]=\"aggregationStrategyOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-text-field\n              class=\"font-mono\"\n              [ngModel]=\"config()['outputTargetPath'] ?? ''\"\n              (focusin)=\"setExpressionTarget('config:outputTargetPath')\"\n              (ngModelChange)=\"onConfigFieldChange('outputTargetPath', $event)\"\n              label=\"Output target path\"\n              hint=\"Optional context path where joined output should be written.\"\n            />\n          </div>\n        </section>\n        }\n      }\n      @case (\"Switch\") {\n        @if (sectionInMain(\"switch\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Switch</div>\n          <div class=\"grid gap-4\">\n            <div class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_minmax(280px,0.7fr)]\">\n              <mt-select-field\n                [ngModel]=\"config()['mode'] ?? 'value'\"\n                (ngModelChange)=\"onConfigFieldChange('mode', $event)\"\n                label=\"Mode\"\n                hint=\"Backend evaluation mode: expression, rules, or source-value matching.\"\n                [options]=\"switchModeOptions\"\n                optionValue=\"value\"\n                optionLabel=\"label\"\n              />\n              <mt-toggle-field\n                class=\"self-end pb-1\"\n                size=\"small\"\n                labelPosition=\"end\"\n                [ngModel]=\"config()['firstMatch'] !== false\"\n                (ngModelChange)=\"onConfigFieldChange('firstMatch', $event === true)\"\n                label=\"First match\"\n                hint=\"Use the first matching case unless backend explicitly supports multi-match.\"\n              />\n            </div>\n            @if (showSwitchSourceValue() || showSwitchExpression()) {\n              <div class=\"grid gap-3 md:grid-cols-2\">\n                @if (showSwitchSourceValue()) {\n                  <mt-text-field\n                    [class]=\"showSwitchExpression() ? 'font-mono' : 'font-mono md:col-span-2'\"\n                    [ngModel]=\"config()['sourceValue'] ?? ''\"\n                    (focusin)=\"setExpressionTarget('config:sourceValue')\"\n                    (ngModelChange)=\"onConfigFieldChange('sourceValue', $event)\"\n                    label=\"Source value\"\n                    hint=\"Value or expression used for value matching.\"\n                  />\n                }\n                @if (showSwitchExpression()) {\n                  <mt-text-field\n                    [class]=\"showSwitchSourceValue() ? 'font-mono' : 'font-mono md:col-span-2'\"\n                    [ngModel]=\"config()['expression'] ?? ''\"\n                    (focusin)=\"setExpressionTarget('config:expression')\"\n                    (ngModelChange)=\"onConfigFieldChange('expression', $event)\"\n                    label=\"Expression\"\n                    hint=\"Expression evaluated when mode is expression or rules.\"\n                  />\n                }\n              </div>\n            }\n            <div class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_minmax(280px,0.7fr)]\">\n              @if (showSwitchDefaultOutputKey()) {\n                <mt-text-field\n                  class=\"font-mono\"\n                  [ngModel]=\"config()['defaultOutputKey'] ?? 'default'\"\n                  (ngModelChange)=\"onConfigFieldChange('defaultOutputKey', $event)\"\n                  label=\"Default output key\"\n                  hint=\"Stable default route key used when no case matches.\"\n                />\n              }\n              <mt-toggle-field\n                [class]=\"showSwitchDefaultOutputKey() ? 'self-end pb-1' : 'self-end pb-1 md:col-span-2'\"\n                size=\"small\"\n                labelPosition=\"end\"\n                [ngModel]=\"config()['includeDefaultOutput'] !== false\"\n                (ngModelChange)=\"onConfigFieldChange('includeDefaultOutput', $event === true)\"\n                label=\"Include default output\"\n                hint=\"Expose the default route output key in the canvas.\"\n              />\n            </div>\n          </div>\n        </section>\n        <section class=\"fp-ae-panel\">\n          <div class=\"flex items-center justify-between gap-3 border-b border-surface-200 bg-surface-50 px-4 py-3\">\n            <div class=\"fp-ae-section-title !m-0\">Switch cases</div>\n            <mt-button size=\"small\" variant=\"outlined\" icon=\"general.plus\" label=\"Add case\" (onClick)=\"addSwitchCase()\" />\n          </div>\n          <div class=\"space-y-3 p-4\">\n            @for (item of switchCases(); track item.key; let i = $index) {\n              <div class=\"rounded-md border border-surface-200 bg-surface-0 p-3\">\n                <div class=\"grid gap-3 md:grid-cols-[160px_1fr_1fr_auto]\">\n                  <mt-text-field\n                    class=\"font-mono\"\n                    [ngModel]=\"item.key\"\n                    (ngModelChange)=\"updateSwitchCase(i, 'key', $event)\"\n                    label=\"Case key\"\n                    hint=\"Persisted stable key. The route output becomes case_key.\"\n                  />\n                  <mt-text-field\n                    [ngModel]=\"item.label\"\n                    (ngModelChange)=\"updateSwitchCase(i, 'label', $event)\"\n                    label=\"Label\"\n                    hint=\"Visual case label. Routes stay attached to the case key.\"\n                  />\n                  <mt-text-field\n                    [ngModel]=\"item.value\"\n                    (focusin)=\"setExpressionTarget('config:cases:' + item.key + ':value')\"\n                    (ngModelChange)=\"updateSwitchCase(i, 'value', $event)\"\n                    label=\"Value\"\n                    hint=\"Expected value for value matching.\"\n                  />\n                  <div class=\"flex items-end gap-1\">\n                    <mt-button size=\"small\" variant=\"outlined\" icon=\"arrow.arrow-up\" tooltip=\"Move up\" (onClick)=\"moveSwitchCase(i, -1)\" />\n                    <mt-button size=\"small\" variant=\"outlined\" icon=\"arrow.arrow-down\" tooltip=\"Move down\" (onClick)=\"moveSwitchCase(i, 1)\" />\n                    <mt-button size=\"small\" variant=\"outlined\" severity=\"danger\" icon=\"general.trash-01\" tooltip=\"Remove case\" (onClick)=\"removeSwitchCase(i)\" />\n                  </div>\n                </div>\n                <div class=\"mt-3 grid gap-3 md:grid-cols-2\">\n                  <mt-text-field\n                    class=\"font-mono\"\n                    [ngModel]=\"item.condition\"\n                    (focusin)=\"setExpressionTarget('config:cases:' + item.key + ':condition')\"\n                    (ngModelChange)=\"updateSwitchCase(i, 'condition', $event)\"\n                    label=\"Condition\"\n                    hint=\"Optional condition for rule matching.\"\n                  />\n                  <mt-text-field\n                    class=\"font-mono\"\n                    [ngModel]=\"item.expression\"\n                    (focusin)=\"setExpressionTarget('config:cases:' + item.key + ':expression')\"\n                    (ngModelChange)=\"updateSwitchCase(i, 'expression', $event)\"\n                    label=\"Case expression\"\n                    hint=\"Optional expression for this case.\"\n                  />\n                </div>\n                <div class=\"mt-3 flex flex-wrap items-center gap-1.5 text-[11px]\">\n                  <span class=\"inline-flex h-7 items-center rounded-md border border-surface-200 bg-surface-50 px-2 font-mono font-semibold text-(--p-text-color)\">{{ item.routeKey }}</span>\n                  <span class=\"inline-flex h-7 items-center rounded-md border border-surface-200 bg-surface-0 px-2 font-medium text-(--p-text-muted-color)\">{{ item.routeCount }} connected route{{ item.routeCount === 1 ? \"\" : \"s\" }}</span>\n                  <span class=\"inline-flex h-7 items-center rounded-md border border-surface-200 bg-surface-0 px-2 font-medium text-(--p-text-muted-color)\">Visual order {{ i + 1 }}</span>\n                </div>\n              </div>\n            }\n            @if (switchCases().length === 0) {\n              <p class=\"fp-ae-copy\">Add at least one stable case key. Backend validation points routes at missing case keys if a case is deleted.</p>\n            }\n          </div>\n        </section>\n        }\n      }\n      @case (\"Stop\") {\n        @if (sectionInMain(\"stop\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">End execution</div>\n          @if (supportsConfigKey('status') || supportsConfigKey('message') || supportsConfigKey('output')) {\n            <div class=\"grid gap-3 md:grid-cols-2\">\n              @if (supportsConfigKey('status')) {\n                <mt-text-field\n                  [ngModel]=\"config()['status'] ?? ''\"\n                  (ngModelChange)=\"onConfigFieldChange('status', $event)\"\n                  label=\"Result status\"\n                  hint=\"Terminal status emitted by the backend stop node.\"\n                />\n              }\n              @if (supportsConfigKey('message')) {\n                <mt-text-field\n                  [ngModel]=\"config()['message'] ?? ''\"\n                  (focusin)=\"setExpressionTarget('config:message')\"\n                  (ngModelChange)=\"onConfigFieldChange('message', $event)\"\n                  label=\"Message\"\n                  hint=\"Optional message or reason saved with the terminal result.\"\n                />\n              }\n              @if (supportsConfigKey('output')) {\n                <mt-textarea-field\n                  class=\"w-full font-mono md:col-span-2\"\n                  [ngModel]=\"valueText(config()['output'] ?? '')\"\n                  (focusin)=\"setExpressionTarget('config:output')\"\n                  (ngModelChange)=\"onConfigFieldChange('output', $event)\"\n                  label=\"Output payload\"\n                  hint=\"Terminal output payload when exposed by the backend schema.\"\n                  rows=\"5\"\n                />\n              }\n            </div>\n          } @else {\n            <p class=\"fp-ae-copy\">\n              This terminal node has no backend-exposed settings. It ends execution when reached.\n            </p>\n          }\n        </section>\n        }\n      }\n    }\n\n    @if (sectionInMain(\"backendSchema\") && step() && editorType() !== \"HumanApproval\") {\n      <section class=\"fp-ae-panel\">\n        <div class=\"fp-ae-section-title\">Output data</div>\n        @if (outputFields().length > 0) {\n          <div class=\"grid gap-2 md:grid-cols-2\">\n            @for (field of outputFields(); track field.key) {\n              <div class=\"fp-ae-kv\">\n                <span>{{ field.label }}</span>\n                <strong>{{ field.type }}</strong>\n              </div>\n            }\n          </div>\n        }\n        @if (routeOutputKeys().length > 0) {\n          <div class=\"mt-3 fp-ae-label mb-2\">Route outputs</div>\n          <div class=\"flex flex-wrap gap-1.5\">\n            @for (key of routeOutputKeys(); track key) {\n              <span class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\">{{ key }}</span>\n            }\n          </div>\n        }\n      </section>\n    }\n\n    @if (sectionInAdvanced(\"mapping\")) {\n      <section class=\"fp-ae-panel\">\n        <div class=\"fp-ae-section-title\">Request and result mapping</div>\n        <div class=\"grid gap-3 md:grid-cols-2\">\n          <div>\n            <div class=\"fp-ae-label mb-2\">Request data</div>\n            @for (row of inputMappingRows(); track row.key) {\n              <label class=\"mb-2 block space-y-1\">\n                <span class=\"text-[11px] text-(--p-text-muted-color)\">{{ row.key }}</span>\n                <mt-text-field\n                  [ngModel]=\"valueText(row.value)\"\n                  (focusin)=\"setExpressionTarget('config:inputMapping:' + row.key)\"\n                  (ngModelChange)=\"updateJsonField('inputMappingJson', row.key, $event)\"\n                  hint=\"Expression or literal value mapped into this node input.\"\n                />\n              </label>\n            }\n          </div>\n          <div>\n            <div class=\"fp-ae-label mb-2\">Output data</div>\n            @for (row of outputMappingRows(); track row.key) {\n              <label class=\"mb-2 block space-y-1\">\n                <span class=\"text-[11px] text-(--p-text-muted-color)\">{{ row.key }}</span>\n                <mt-text-field\n                  [ngModel]=\"valueText(row.value)\"\n                  (focusin)=\"setExpressionTarget('config:outputMapping:' + row.key)\"\n                  (ngModelChange)=\"updateJsonField('outputMappingJson', row.key, $event)\"\n                  hint=\"Expression or literal value mapped from this node output.\"\n                />\n              </label>\n            }\n          </div>\n        </div>\n        @if (\n          sectionHasAdvancedEmptyState(\"mapping\") &&\n          inputMappingRows().length === 0 &&\n          outputMappingRows().length === 0\n        ) {\n          <p class=\"fp-ae-copy mt-3\">\n            This node is using backend default request and output data. Add mappings only when this step needs a custom payload.\n          </p>\n        }\n      </section>\n    }\n\n    @if (sectionInAdvanced(\"credentials\")) {\n      <section class=\"fp-ae-panel\">\n        <div class=\"fp-ae-section-title\">Auth and credentials</div>\n        <ng-container *ngTemplateOutlet=\"credentialSelector\" />\n      </section>\n    }\n\n    @if (sectionInAdvanced(\"policy\")) {\n      <section class=\"fp-ae-panel\">\n        <div class=\"fp-ae-section-title\">Retry, timeout, error policy</div>\n        <div class=\"grid gap-3 md:grid-cols-3\">\n            <mt-number-field\n              [ngModel]=\"numberValue(policyObject('timeoutPolicyJson')['timeoutSeconds'])\"\n              (ngModelChange)=\"updateJsonField('timeoutPolicyJson', 'timeoutSeconds', $event)\"\n              label=\"Timeout seconds\"\n              hint=\"Maximum runtime before the backend times out this node.\"\n              [min]=\"0\"\n            />\n          <mt-number-field\n              [ngModel]=\"numberValue(policyObject('retryPolicyJson')['maxAttempts'])\"\n              (ngModelChange)=\"updateJsonField('retryPolicyJson', 'maxAttempts', $event)\"\n              label=\"Max attempts\"\n              hint=\"Maximum retry attempts after retryable failures.\"\n              [min]=\"0\"\n            />\n            <mt-select-field\n              [ngModel]=\"policyObject('errorPolicyJson')['onFailure'] ?? ''\"\n              (ngModelChange)=\"updateJsonField('errorPolicyJson', 'onFailure', $event)\"\n              label=\"On failure\"\n              hint=\"Backend error policy to apply when this node fails.\"\n              [options]=\"errorPolicyOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n          />\n        </div>\n        @if (sectionHasAdvancedEmptyState(\"policy\")) {\n          <p class=\"fp-ae-copy mt-3\">\n            Backend defaults apply until you override a timeout, retry, or error policy here.\n          </p>\n        }\n      </section>\n    }\n\n    @if (sectionInAdvanced(\"triggerContext\") && trigger()) {\n      <details class=\"fp-ae-panel\" open>\n        <summary class=\"fp-ae-section-title cursor-pointer select-none\">\n          Trigger payload and context\n        </summary>\n        <p class=\"fp-ae-copy mt-3\">\n          Trigger payload/context is documentation for expressions only. Triggers\n          do not edit node input or output mappings here.\n        </p>\n        <div class=\"grid gap-3 md:grid-cols-2\">\n          <details class=\"rounded-lg border border-(--p-content-border-color)\">\n            <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Config schema</summary>\n            <pre class=\"fp-ae-code\">{{ schemaText(configSchema()) }}</pre>\n          </details>\n          @if (hasTriggerPayloadSchema() && triggerPayloadSchema(); as schema) {\n            <details class=\"rounded-lg border border-(--p-content-border-color)\">\n              <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Payload schema</summary>\n              <pre class=\"fp-ae-code\">{{ schemaText(schema) }}</pre>\n            </details>\n          }\n          @if (authPolicySchema()) {\n            <details class=\"rounded-lg border border-(--p-content-border-color)\">\n              <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Auth policy schema</summary>\n              <pre class=\"fp-ae-code\">{{ schemaText(authPolicySchema()) }}</pre>\n            </details>\n          }\n          @if (triggerPayloadSample(); as sample) {\n            <details class=\"rounded-lg border border-(--p-content-border-color)\">\n              <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Payload or request sample</summary>\n              <pre class=\"fp-ae-code\">{{ schemaText(sample) }}</pre>\n            </details>\n          }\n        </div>\n      </details>\n    }\n\n    @if (sectionInAdvanced(\"backendSchema\") && step()) {\n      <details class=\"fp-ae-panel\" open>\n        <summary class=\"fp-ae-section-title cursor-pointer select-none\">\n          Backend schemas and outputs\n        </summary>\n        <div class=\"mt-3 grid gap-3 md:grid-cols-2\">\n          <details class=\"rounded-lg border border-(--p-content-border-color)\">\n            <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Config schema</summary>\n            <pre class=\"fp-ae-code\">{{ schemaText(configSchema()) }}</pre>\n          </details>\n          <details class=\"rounded-lg border border-(--p-content-border-color)\">\n            <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Input schema</summary>\n            <pre class=\"fp-ae-code\">{{ schemaText(inputSchema()) }}</pre>\n          </details>\n          <details class=\"rounded-lg border border-(--p-content-border-color)\">\n            <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Output schema</summary>\n            <pre class=\"fp-ae-code\">{{ schemaText(outputSchema()) }}</pre>\n          </details>\n          <div class=\"rounded-lg border border-(--p-content-border-color) p-3\">\n            <div class=\"fp-ae-label mb-2\">Route output keys</div>\n            <div class=\"flex flex-wrap gap-1.5\">\n              @for (key of routeOutputKeys(); track key) {\n                <span class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\">{{ key }}</span>\n              }\n              @if (routeOutputKeys().length === 0) {\n                <span class=\"text-[12px] text-(--p-text-muted-color)\">No outgoing route keys</span>\n              }\n            </div>\n          </div>\n        </div>\n      </details>\n    }\n\n    @if (sectionInAdvanced(\"schemaFields\") && configRows().length > 0) {\n      <details class=\"fp-ae-panel\" open>\n        <summary class=\"fp-ae-section-title cursor-pointer select-none\">\n          Backend schema fields\n        </summary>\n        <div class=\"mt-3 grid gap-3 md:grid-cols-2\">\n          @for (field of configRows(); track field.key) {\n            <div\n              class=\"space-y-1.5\"\n              [class.md:col-span-2]=\"field.type === 'object' || field.type === 'array'\"\n            >\n              @if (field.enumValues.length) {\n                <mt-select-field\n                  [ngModel]=\"fieldValue(field.key)\"\n                  (ngModelChange)=\"onConfigFieldChange(field.key, $event)\"\n                  [label]=\"field.label + (field.required ? ' *' : '')\"\n                  [hint]=\"field.description ?? ''\"\n                  [options]=\"enumOptions(field.enumValues)\"\n                  optionValue=\"value\"\n                  optionLabel=\"label\"\n                />\n              } @else if (field.type === \"boolean\") {\n                <mt-toggle-field\n                  size=\"small\"\n                  labelPosition=\"end\"\n                  [ngModel]=\"!!fieldValue(field.key)\"\n                  (ngModelChange)=\"onConfigFieldChange(field.key, $event === true)\"\n                  [label]=\"field.label + (field.required ? ' *' : '')\"\n                  [hint]=\"field.description ?? ''\"\n                />\n              } @else if (field.type === \"number\") {\n                <mt-number-field\n                  [ngModel]=\"numberValue(fieldValue(field.key))\"\n                  (ngModelChange)=\"onConfigFieldChange(field.key, $event)\"\n                  [label]=\"field.label + (field.required ? ' *' : '')\"\n                  [hint]=\"field.description ?? ''\"\n                />\n              } @else if (field.type === \"date\") {\n                <mt-date-field\n                  [ngModel]=\"fieldValue(field.key)\"\n                  (ngModelChange)=\"onConfigFieldChange(field.key, $event)\"\n                  [label]=\"field.label + (field.required ? ' *' : '')\"\n                  [hint]=\"field.description ?? ''\"\n                  [showTime]=\"field.format !== 'date'\"\n                  [showClear]=\"true\"\n                  [pInputs]=\"dateTimePickerInputs\"\n                />\n              } @else if (field.type === \"object\" || field.type === \"array\") {\n                <mt-textarea-field\n                  class=\"w-full font-mono\"\n                  [ngModel]=\"valueText(fieldValue(field.key))\"\n                  (ngModelChange)=\"onConfigFieldChange(field.key, $event)\"\n                  [label]=\"field.label + (field.required ? ' *' : '')\"\n                  [hint]=\"field.description ?? ''\"\n                  rows=\"5\"\n                />\n              } @else {\n                <mt-text-field\n                  [ngModel]=\"fieldText(field.key)\"\n                  (focusin)=\"field.expressionEnabled && setExpressionTarget('config:' + field.key)\"\n                  (ngModelChange)=\"onConfigFieldChange(field.key, $event)\"\n                  [label]=\"field.label + (field.required ? ' *' : '')\"\n                  [hint]=\"field.description ?? ''\"\n                />\n              }\n            </div>\n          }\n        </div>\n      </details>\n    }\n  </div>\n</div>\n\n<ng-template #credentialSelector>\n  @if (credentials().length) {\n    <div class=\"space-y-2\">\n      @for (credential of credentials(); track credential.credentialRef) {\n        <label class=\"flex items-center justify-between gap-3 rounded-lg border border-(--p-content-border-color) bg-(--p-surface-50) px-3 py-2\">\n          <span class=\"min-w-0\">\n            <span class=\"block truncate text-[12px] font-semibold\">{{ credential.displayName ?? credential.credentialRef }}</span>\n            <span class=\"block truncate font-mono text-[11px] text-(--p-text-muted-color)\">\n              {{ credential.credentialRef }} / {{ credential.status ?? (credential.resolved ? \"Resolved\" : \"Unresolved\") }}\n            </span>\n          </span>\n          <span class=\"flex items-center gap-2\">\n            <mt-button\n              size=\"small\"\n              variant=\"text\"\n              label=\"Test\"\n              (onClick)=\"testCredential(credential.credentialRef)\"\n            />\n            <mt-toggle-field\n              size=\"small\"\n              [ngModel]=\"credentialRefs().includes(credential.credentialRef)\"\n              (ngModelChange)=\"toggleCredential(credential.credentialRef, $event === true)\"\n              hint=\"Attach or detach this backend credential reference. Masked secrets are preserved.\"\n            />\n          </span>\n        </label>\n      }\n    </div>\n  } @else if (sectionHasAdvancedEmptyState(\"credentials\")) {\n    <p class=\"fp-ae-copy\">\n      The backend helper did not return credential choices for this node. Existing masked references remain preserved in the saved JSON.\n    </p>\n  }\n  @if (credentialTest(); as test) {\n    <div class=\"mt-3 rounded-lg bg-(--p-surface-100) px-3 py-2 text-[12px]\">\n      {{ test.status ?? (test.succeeded ? \"Succeeded\" : \"Placeholder\") }}\n      @if (test.message) { <span>- {{ test.message }}</span> }\n    </div>\n  }\n</ng-template>\n\n<ng-template\n  #mapEditor\n  let-objectKey=\"objectKey\"\n  let-rows=\"rows\"\n  let-keyLabel=\"keyLabel\"\n  let-valueLabel=\"valueLabel\"\n  let-addLabel=\"addLabel\"\n>\n  <div class=\"space-y-2\">\n    @for (row of rows; track row.key) {\n      <div class=\"grid gap-2 md:grid-cols-[180px_1fr_auto]\">\n        <mt-text-field\n          class=\"font-mono\"\n          [ngModel]=\"row.key\"\n          (ngModelChange)=\"updateObjectRow(objectKey, row.key, $event, row.value)\"\n          [label]=\"keyLabel\"\n          hint=\"Configuration key saved to the backend JSON object.\"\n        />\n        <mt-text-field\n          class=\"font-mono\"\n          [ngModel]=\"valueText(row.value)\"\n          (focusin)=\"setExpressionTarget('config:' + objectKey + ':' + row.key)\"\n          (ngModelChange)=\"updateObjectRow(objectKey, row.key, row.key, $event)\"\n          [label]=\"valueLabel\"\n          hint=\"Configuration value. Use expressions when this field should resolve at runtime.\"\n        />\n        <mt-button\n          class=\"self-end\"\n          size=\"small\"\n          severity=\"secondary\"\n          variant=\"outlined\"\n          label=\"Remove\"\n          (onClick)=\"removeObjectRow(objectKey, row.key)\"\n        />\n      </div>\n    }\n    <mt-button\n      size=\"small\"\n      variant=\"outlined\"\n      [label]=\"addLabel || ('Add ' + keyLabel)\"\n      (onClick)=\"addObjectRow(objectKey)\"\n    />\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DateField, selector: "mt-date-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "showIcon", "showClear", "showTime", "pInputs", "required"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required", "maxLength"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "directive", type: DropDataDirective, selector: "[fpDropData]", inputs: ["fpDropAutoInsert"], outputs: ["dataDrop"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AutomationSmartEditorComponent, isStandalone: true, selector: "fp-automation-smart-editor", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block h-full min-h-0" }, ngImport: i0, template: "<div\n  class=\"fp-scroll flex h-full min-h-0 flex-col overflow-y-auto\"\n  fpDropData\n  [fpDropAutoInsert]=\"false\"\n  (dataDrop)=\"insertExpression($event)\"\n>\n  <div class=\"space-y-4 px-5 py-5\">\n    @if (helperError()) {\n      <div\n        class=\"rounded-lg border border-[rgb(var(--fp-warning))]/30 bg-[rgb(var(--fp-warning))]/10 px-3 py-2 text-[12px] leading-5 text-(--p-text-color)\"\n      >\n        {{ helperError() }}\n      </div>\n    }\n\n    @if (sectionInMain(\"startConnection\") && trigger()) {\n      <section\n        class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\n      >\n        <h3\n          class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\n        >\n          Start connection\n        </h3>\n        <div class=\"space-y-3 p-4\">\n          @if (startConnection().key) {\n            @if (startConnection().step) {\n              <div class=\"flex flex-wrap items-start justify-between gap-3\">\n                <div class=\"min-w-0 space-y-1\">\n                  <div class=\"text-[12px] font-semibold text-(--p-text-muted-color)\">\n                    First node connected\n                  </div>\n                  <div class=\"truncate text-[14px] font-semibold text-(--p-text-color)\">\n                    {{ startConnection().label }}\n                  </div>\n                  <div class=\"flex flex-wrap items-center gap-2 text-[12px] text-(--p-text-muted-color)\">\n                    <span>Managed on canvas</span>\n                    <span\n                      class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\"\n                    >\n                      {{ startConnection().key }}\n                    </span>\n                  </div>\n                </div>\n                <div class=\"flex shrink-0 flex-wrap gap-2\">\n                  <mt-button\n                    size=\"small\"\n                    variant=\"outlined\"\n                    severity=\"secondary\"\n                    label=\"Focus connected node\"\n                    (onClick)=\"focusStartConnection()\"\n                  />\n                </div>\n              </div>\n            } @else {\n              <div class=\"space-y-2\">\n                <div class=\"text-[14px] font-semibold text-(--p-text-color)\">\n                  No first node connected\n                </div>\n                <p class=\"m-0 text-[12px] leading-5 text-(--p-text-muted-color)\">\n                  The saved start connection points to a node key that is not on\n                  the canvas. Connect this trigger to the first node on the\n                  canvas.\n                </p>\n                <div class=\"flex flex-wrap items-center gap-2 text-[12px] text-(--p-text-muted-color)\">\n                  <span>Technical key</span>\n                  <span\n                    class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\"\n                  >\n                    {{ startConnection().key }}\n                  </span>\n                  <span>Managed on canvas</span>\n                </div>\n              </div>\n            }\n          } @else {\n            <div class=\"rounded-lg border border-dashed border-(--p-content-border-color) bg-(--p-surface-50) p-3\">\n              <div class=\"text-[14px] font-semibold text-(--p-text-color)\">\n                No first node connected\n              </div>\n              <p class=\"m-0 mt-1 text-[12px] leading-5 text-(--p-text-muted-color)\">\n                Connect this trigger to the first node on the canvas.\n              </p>\n            </div>\n          }\n        </div>\n      </section>\n    }\n\n    @switch (editorType()) {\n      @case (\"ManualTrigger\") {\n        @if (sectionInMain(\"manualTrigger\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Manual run input</div>\n          @if (hasTriggerPayloadSchema() && triggerPayloadSchema(); as schema) {\n            <div class=\"rounded-md border border-surface-200 bg-surface-0 p-3\">\n              <div class=\"fp-ae-label mb-2\">Payload schema</div>\n              <pre class=\"fp-ae-code\">{{ schemaText(schema) }}</pre>\n            </div>\n          }\n          @if (triggerPayloadSample(); as sample) {\n            <div class=\"mt-3 rounded-md border border-surface-200 bg-surface-0 p-3\">\n              <div class=\"fp-ae-label mb-2\">Sample payload</div>\n              <pre class=\"fp-ae-code\">{{ schemaText(sample) }}</pre>\n            </div>\n          }\n          @if (!hasTriggerPayloadSchema() && !triggerPayloadSample()) {\n            <p class=\"fp-ae-copy\">\n              This manual trigger has no backend-provided input schema. It can still be connected to the first step on the canvas.\n            </p>\n          }\n        </section>\n        }\n      }\n      @case (\"WebhookTrigger\") {\n        @if (sectionInMain(\"webhookSetup\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Webhook setup</div>\n          @if (webhookSetup(); as setup) {\n            <div class=\"flex gap-2\">\n              <mt-text-field\n                class=\"flex-1 font-mono\"\n                [ngModel]=\"setup.webhookUrl ?? ''\"\n                [readonly]=\"true\"\n                label=\"Webhook URL\"\n                hint=\"Backend-generated endpoint clients should call to start this trigger.\"\n              />\n              <mt-button class=\"self-end\" size=\"small\" variant=\"outlined\" label=\"Copy\" (onClick)=\"copyWebhookUrl()\" />\n            </div>\n            <div class=\"grid gap-2 md:grid-cols-2\">\n              <div class=\"fp-ae-kv\">\n                <span>Auth mode</span>\n                <strong>{{ setup.authMode ?? \"Backend default\" }}</strong>\n              </div>\n              <div class=\"fp-ae-kv\">\n                <span>Required headers</span>\n                <strong>{{ (setup.requiredHeaders ?? []).join(\", \") || \"-\" }}</strong>\n              </div>\n            </div>\n            @if (setup.hmacSigning) {\n              <p class=\"fp-ae-copy\">{{ setup.hmacSigning }}</p>\n            }\n            @if (setup.sampleRequest) {\n              <details class=\"mt-3 rounded-lg border border-(--p-content-border-color)\">\n                <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">\n                  Sample request\n                </summary>\n                <pre class=\"fp-ae-code\">{{ schemaText(setup.sampleRequest) }}</pre>\n              </details>\n            }\n          } @else {\n            <p class=\"fp-ae-copy\">\n              Webhook setup is not available for this draft yet.\n            </p>\n          }\n        </section>\n        }\n        @if (sectionInMain(\"authPolicy\") && hasAuthPolicy()) {\n          <section class=\"fp-ae-panel\">\n            <div class=\"fp-ae-section-title\">Authentication policy</div>\n            <div class=\"grid gap-3 md:grid-cols-3\">\n              <mt-select-field\n                [ngModel]=\"authPolicy()['mode'] ?? ''\"\n                (ngModelChange)=\"onAuthFieldChange('mode', $event)\"\n                label=\"Mode\"\n                hint=\"Authentication mode required by the backend webhook policy.\"\n                [options]=\"authModeOptions\"\n                optionValue=\"value\"\n                optionLabel=\"label\"\n              />\n              <mt-text-field\n                [ngModel]=\"authPolicy()['signatureHeaderName'] ?? ''\"\n                (ngModelChange)=\"onAuthFieldChange('signatureHeaderName', $event)\"\n                label=\"Signature header\"\n                hint=\"Header name that carries the webhook signature when the policy requires signed requests.\"\n              />\n              <mt-text-field\n                [ngModel]=\"authPolicy()['timestampHeaderName'] ?? ''\"\n                (ngModelChange)=\"onAuthFieldChange('timestampHeaderName', $event)\"\n                label=\"Timestamp header\"\n                hint=\"Header name that carries the request timestamp for replay protection.\"\n              />\n            </div>\n          </section>\n        }\n      }\n      @case (\"FormSubmitTrigger\") {\n        @if (sectionInMain(\"formBinding\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Form binding</div>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-select-field\n              [ngModel]=\"selectedFormId() || formBinding()?.formId || ''\"\n              (ngModelChange)=\"onFormChange($event)\"\n              label=\"Form\"\n              hint=\"Choose a backend form that will submit data into this trigger.\"\n              [options]=\"formOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-select-field\n              [ngModel]=\"selectedFormVersionId() || formBinding()?.formVersionId || ''\"\n              (ngModelChange)=\"onFormVersionChange($event)\"\n              label=\"Form version\"\n              hint=\"Persist the exact backend formVersionId. Do not type or generate IDs manually.\"\n              [options]=\"formVersionOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n          </div>\n          <div class=\"mt-3 flex flex-wrap items-center gap-2\">\n            <mt-button size=\"small\" severity=\"primary\" label=\"Save binding\" (onClick)=\"saveFormBinding()\" />\n            @if (formBinding()) {\n              <span class=\"rounded-lg bg-(--p-surface-100) px-2 py-1 font-mono text-[11px] text-(--p-text-muted-color)\">\n                {{ formBinding()!.formVersionId }}\n              </span>\n            }\n          </div>\n          @if (formSchema(); as schema) {\n            <details class=\"mt-3 rounded-lg border border-(--p-content-border-color)\">\n              <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">\n                Form schema preview\n              </summary>\n              <pre class=\"fp-ae-code\">{{ schemaText(schema.schema) }}</pre>\n            </details>\n          }\n        </section>\n        }\n      }\n      @case (\"ScheduleTrigger\") {\n        @if (sectionInMain(\"schedule\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Schedule</div>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-select-field\n              [ngModel]=\"scheduleMode()\"\n              (ngModelChange)=\"onScheduleModeChange($event)\"\n              label=\"Mode\"\n              hint=\"Pick one schedule mode: cron, interval, or once. Backend validation requires exactly one mode.\"\n              [options]=\"scheduleModeOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-select-field\n              [ngModel]=\"config()['timezone'] ?? 'UTC'\"\n              (ngModelChange)=\"onConfigFieldChange('timezone', $event)\"\n              label=\"Timezone\"\n              hint=\"Timezone used to calculate the next fire time.\"\n              [options]=\"timeZoneOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            @if (showScheduleCron()) {\n              <mt-text-field\n                class=\"font-mono md:col-span-2\"\n                [ngModel]=\"config()['cron'] ?? ''\"\n                (ngModelChange)=\"onConfigFieldChange('cron', $event)\"\n                label=\"Cron\"\n                hint=\"Cron expression, for example 0 9 * * *.\"\n              />\n            }\n            @if (showScheduleInterval()) {\n              <mt-number-field\n                [ngModel]=\"numberValue(config()['intervalSeconds'])\"\n                (ngModelChange)=\"onConfigFieldChange('intervalSeconds', $event)\"\n                label=\"Interval seconds\"\n                hint=\"Repeat interval in seconds.\"\n                [min]=\"0\"\n              />\n            }\n            @if (showScheduleOnce()) {\n              <mt-date-field\n                class=\"md:col-span-2\"\n                [ngModel]=\"config()['runAt'] ?? config()['runAtUtc'] ?? config()['oneTimeAt'] ?? config()['at'] ?? ''\"\n                (ngModelChange)=\"onConfigFieldChange('runAt', $event)\"\n                label=\"Run at UTC\"\n                hint=\"UTC date/time for the one-time schedule.\"\n                [showTime]=\"true\"\n                [showClear]=\"true\"\n                [pInputs]=\"dateTimePickerInputs\"\n              />\n            }\n            @if (showScheduleStartDate()) {\n              <mt-date-field\n                [ngModel]=\"config()['startDate'] ?? ''\"\n                (ngModelChange)=\"onConfigFieldChange('startDate', $event)\"\n                label=\"Start date UTC\"\n                hint=\"Optional first allowed run time for this schedule.\"\n                [showTime]=\"true\"\n                [showClear]=\"true\"\n                [pInputs]=\"dateTimePickerInputs\"\n              />\n            }\n            <mt-select-field\n              [ngModel]=\"config()['misfirePolicy'] ?? 'SkipMissed'\"\n              (ngModelChange)=\"onConfigFieldChange('misfirePolicy', $event)\"\n              label=\"Misfire policy\"\n              hint=\"Backend behavior when a scheduled run is missed while the automation is unavailable.\"\n              [options]=\"misfirePolicyOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n          </div>\n          <div class=\"mt-3 flex gap-2\">\n            <mt-button size=\"small\" variant=\"outlined\" label=\"Validate\" (onClick)=\"validateSchedule()\" />\n            <mt-button size=\"small\" severity=\"primary\" label=\"Preview next fire\" (onClick)=\"previewSchedule()\" />\n          </div>\n          @if (schedulePreview(); as preview) {\n            <div class=\"mt-3 rounded-lg bg-(--p-surface-100) px-3 py-2 text-[12px]\">\n              <strong class=\"text-emerald-600\">Valid</strong>\n              <span class=\"ms-2\">Next fire: {{ preview.nextFireAtUtc ?? \"-\" }}</span>\n            </div>\n          }\n        </section>\n        }\n      }\n      @case (\"SetFields\") {\n        @if (sectionInMain(\"setFields\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Set fields</div>\n          <ng-container *ngTemplateOutlet=\"mapEditor; context: { objectKey: 'fields', rows: fieldsRows(), keyLabel: 'Field', valueLabel: 'Value', addLabel: 'Add field' }\" />\n        </section>\n        }\n      }\n      @case (\"If\") {\n        @if (sectionInMain(\"condition\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Condition</div>\n          <div class=\"grid gap-3 md:grid-cols-[1fr_180px_1fr]\">\n            <mt-text-field\n              [ngModel]=\"fieldText('left')\"\n              (focusin)=\"setExpressionTarget('config:left')\"\n              (ngModelChange)=\"onConfigFieldChange('left', $event)\"\n              label=\"Left\"\n              hint=\"Left-side value or expression to compare.\"\n            />\n            <mt-select-field\n              [ngModel]=\"config()['operator'] ?? 'equals'\"\n              (ngModelChange)=\"onConfigFieldChange('operator', $event)\"\n              label=\"Operator\"\n              hint=\"Comparison operator used by the backend condition evaluator.\"\n              [options]=\"ifOperatorOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-text-field\n              [ngModel]=\"fieldText('right')\"\n              (focusin)=\"setExpressionTarget('config:right')\"\n              (ngModelChange)=\"onConfigFieldChange('right', $event)\"\n              label=\"Right\"\n              hint=\"Right-side value or expression to compare against.\"\n            />\n          </div>\n          <div class=\"mt-3 rounded-md border border-surface-200 bg-surface-0 p-3\">\n            <div class=\"fp-ae-label mb-2\">Route outputs</div>\n            <div class=\"flex flex-wrap gap-1.5\">\n              @for (key of routeOutputKeys(); track key) {\n                <span class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\">{{ key }}</span>\n              }\n            </div>\n          </div>\n        </section>\n        }\n      }\n      @case (\"HTTP\") {\n        @if (sectionInMain(\"httpRequest\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">HTTP request</div>\n          <div class=\"grid gap-3 md:grid-cols-[150px_1fr]\">\n            <mt-select-field\n              [ngModel]=\"config()['method'] ?? 'GET'\"\n              (ngModelChange)=\"onConfigFieldChange('method', $event)\"\n              label=\"Method\"\n              hint=\"HTTP method used for the outbound request.\"\n              [options]=\"httpMethodOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-text-field\n              class=\"font-mono\"\n              [ngModel]=\"config()['url'] ?? ''\"\n              (focusin)=\"setExpressionTarget('config:url')\"\n              (ngModelChange)=\"onConfigFieldChange('url', $event)\"\n              label=\"URL\"\n              hint=\"Target URL. Expressions are supported for dynamic hosts, paths, and query values.\"\n            />\n          </div>\n          <div class=\"mt-3\">\n            <ng-container *ngTemplateOutlet=\"mapEditor; context: { objectKey: 'headers', rows: headerRows(), keyLabel: 'Header', valueLabel: 'Value', addLabel: 'Add header' }\" />\n          </div>\n          <div class=\"mt-3\">\n            <ng-container *ngTemplateOutlet=\"mapEditor; context: { objectKey: 'query', rows: queryRows(), keyLabel: 'Query param', valueLabel: 'Value', addLabel: 'Add query param' }\" />\n          </div>\n          @if (supportsConfigKey('bodyMode')) {\n            <mt-select-field\n              class=\"mt-3\"\n              [ngModel]=\"config()['bodyMode'] ?? 'json'\"\n              (ngModelChange)=\"onConfigFieldChange('bodyMode', $event)\"\n              label=\"Body mode\"\n              hint=\"Backend-supported request body serialization mode.\"\n              [options]=\"httpBodyModeOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n          }\n          <mt-textarea-field\n            class=\"mt-3 w-full font-mono\"\n            [ngModel]=\"valueText(config()['body'] ?? '')\"\n            (focusin)=\"setExpressionTarget('config:body')\"\n            (ngModelChange)=\"onConfigFieldChange('body', $event)\"\n            label=\"Body\"\n            hint=\"Request body sent by the HTTP node. Use JSON or expressions when the backend schema allows it.\"\n            rows=\"6\"\n          />\n          @if (supportsConfigKey('timeoutSeconds') || supportsConfigKey('responseHandling')) {\n            <div class=\"mt-3 grid gap-3 md:grid-cols-2\">\n              @if (supportsConfigKey('timeoutSeconds')) {\n                <mt-number-field\n                  [ngModel]=\"numberValue(config()['timeoutSeconds'])\"\n                  (ngModelChange)=\"onConfigFieldChange('timeoutSeconds', $event)\"\n                  label=\"Timeout seconds\"\n                  hint=\"Request timeout when exposed by the backend schema.\"\n                  [min]=\"0\"\n                />\n              }\n              @if (supportsConfigKey('responseHandling')) {\n                <mt-text-field\n                  [ngModel]=\"config()['responseHandling'] ?? ''\"\n                  (ngModelChange)=\"onConfigFieldChange('responseHandling', $event)\"\n                  label=\"Response handling\"\n                  hint=\"Backend-supported response handling mode or expression.\"\n                />\n              }\n            </div>\n          }\n          @if (sectionInMain(\"credentials\")) {\n            <div class=\"mt-3 rounded-md border border-surface-200 bg-surface-0 p-3\">\n              <div class=\"fp-ae-label mb-2\">Credential</div>\n              <ng-container *ngTemplateOutlet=\"credentialSelector\" />\n            </div>\n          }\n        </section>\n        }\n      }\n      @case (\"Wait\") {\n        @if (sectionInMain(\"wait\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Wait</div>\n          <div class=\"grid gap-3 md:grid-cols-3\">\n            <mt-select-field\n              [ngModel]=\"config()['mode'] ?? 'duration'\"\n              (ngModelChange)=\"onConfigFieldChange('mode', $event)\"\n              label=\"Mode\"\n              hint=\"Choose whether this wait uses a duration or a specific date/time.\"\n              [options]=\"waitModeOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-number-field\n              [ngModel]=\"numberValue(config()['durationSeconds'])\"\n              (ngModelChange)=\"onConfigFieldChange('durationSeconds', $event)\"\n              label=\"Duration seconds\"\n              hint=\"How long execution should wait when mode is duration.\"\n              [min]=\"0\"\n            />\n            <mt-date-field\n              [ngModel]=\"config()['waitUntil'] ?? ''\"\n              (ngModelChange)=\"onConfigFieldChange('waitUntil', $event)\"\n              label=\"Wait until\"\n              hint=\"Date/time that resolves to when execution should resume.\"\n              [showTime]=\"true\"\n              [showClear]=\"true\"\n              [pInputs]=\"dateTimePickerInputs\"\n            />\n          </div>\n          @if (supportsConfigKey('resumePayloadSchema') || supportsConfigKey('resumePayload')) {\n            <mt-textarea-field\n              class=\"mt-3 w-full font-mono\"\n              [ngModel]=\"valueText(config()['resumePayloadSchema'] ?? config()['resumePayload'] ?? '')\"\n              (focusin)=\"setExpressionTarget('config:resumePayload')\"\n              (ngModelChange)=\"onConfigFieldChange('resumePayload', $event)\"\n              label=\"Resume payload\"\n              hint=\"Expected payload when the backend supports manual or external resume data.\"\n              rows=\"5\"\n            />\n          }\n        </section>\n        }\n      }\n      @case (\"HumanApproval\") {\n        @if (sectionInMain(\"approvalTask\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Approval task</div>\n          @if (assignmentOptions()?.providerStatus && assignmentOptions()?.providerStatus !== \"Available\") {\n            <p class=\"fp-ae-copy\">\n              Assignment provider status: {{ assignmentOptions()?.providerStatus }}.\n              The backend provider is the source of truth for available assignees.\n            </p>\n          }\n          <div class=\"grid gap-3 xl:grid-cols-3\">\n            <mt-text-field\n              [ngModel]=\"config()['title'] ?? ''\"\n              (focusin)=\"setExpressionTarget('config:title')\"\n              (ngModelChange)=\"onConfigFieldChange('title', $event)\"\n              label=\"Approval title\"\n              hint=\"Approval title shown to the assigned human approver.\"\n            />\n            <mt-select-field\n              [ngModel]=\"selectedAssignmentKey()\"\n              (ngModelChange)=\"onAssignmentOptionChange($event)\"\n              label=\"Assignment\"\n              hint=\"Backend-provided assignee, role, or group that can decide this approval.\"\n              [options]=\"assignmentSelectOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            @if (humanApprovalSupportsConfig('priority')) {\n              <mt-text-field\n                [ngModel]=\"config()['priority'] ?? ''\"\n                (ngModelChange)=\"onConfigFieldChange('priority', $event)\"\n                label=\"Priority\"\n                hint=\"Approval priority when supported by the backend schema.\"\n              />\n            }\n          </div>\n          <mt-textarea-field\n            class=\"mt-3 w-full\"\n            [ngModel]=\"config()['message'] ?? config()['instructions'] ?? ''\"\n            (focusin)=\"setExpressionTarget('config:message')\"\n            (ngModelChange)=\"onConfigFieldChange('message', $event)\"\n            label=\"Approval message\"\n            hint=\"Decision instructions shown to the approver.\"\n            rows=\"4\"\n          />\n          @if (humanApprovalSupportsConfig('dueDate') || humanApprovalSupportsConfig('dueInSeconds') || humanApprovalSupportsConfig('timeoutSeconds') || humanApprovalSupportsConfig('expiresAt') || humanApprovalSupportsConfig('commentsRequired') || humanApprovalSupportsConfig('allowReturn')) {\n            <div class=\"mt-3 grid gap-3 xl:grid-cols-4\">\n              @if (humanApprovalSupportsConfig('dueDate')) {\n                <mt-date-field\n                  [ngModel]=\"config()['dueDate'] ?? ''\"\n                  (ngModelChange)=\"onConfigFieldChange('dueDate', $event)\"\n                  label=\"Due date\"\n                  hint=\"Backend-supported approval due date.\"\n                  [showTime]=\"true\"\n                  [showClear]=\"true\"\n                  [pInputs]=\"dateTimePickerInputs\"\n                />\n              }\n              @if (humanApprovalSupportsConfig('dueInSeconds')) {\n                <mt-number-field\n                  [ngModel]=\"numberValue(config()['dueInSeconds'])\"\n                  (ngModelChange)=\"onConfigFieldChange('dueInSeconds', $event)\"\n                  label=\"Due in seconds\"\n                  hint=\"Relative approval due duration when supported by the backend schema.\"\n                  [min]=\"0\"\n                />\n              }\n              @if (humanApprovalSupportsConfig('timeoutSeconds')) {\n                <mt-number-field\n                  [ngModel]=\"numberValue(config()['timeoutSeconds'])\"\n                  (ngModelChange)=\"onConfigFieldChange('timeoutSeconds', $event)\"\n                  label=\"Timeout seconds\"\n                  hint=\"Approval timeout emitted according to backend approval runtime support.\"\n                  [min]=\"0\"\n                />\n              }\n              @if (humanApprovalSupportsConfig('expiresAt')) {\n                <mt-date-field\n                  [ngModel]=\"config()['expiresAt'] ?? ''\"\n                  (ngModelChange)=\"onConfigFieldChange('expiresAt', $event)\"\n                  label=\"Expires at\"\n                  hint=\"Backend-supported approval expiry timestamp.\"\n                  [showTime]=\"true\"\n                  [showClear]=\"true\"\n                  [pInputs]=\"dateTimePickerInputs\"\n                />\n              }\n              @if (humanApprovalSupportsConfig('commentsRequired')) {\n                <div class=\"flex min-h-[4.25rem] items-end rounded-md border border-surface-200 bg-surface-0 px-3 py-2\">\n                  <mt-toggle-field\n                    size=\"small\"\n                    label=\"Comments required\"\n                    labelPosition=\"end\"\n                    [ngModel]=\"config()['commentsRequired'] === true\"\n                    (ngModelChange)=\"onConfigFieldChange('commentsRequired', $event === true)\"\n                    hint=\"Require approver comments when the backend supports this flag.\"\n                  />\n                </div>\n              }\n              @if (humanApprovalSupportsConfig('allowReturn')) {\n                <div class=\"flex min-h-[4.25rem] items-end rounded-md border border-surface-200 bg-surface-0 px-3 py-2\">\n                  <mt-toggle-field\n                    size=\"small\"\n                    label=\"Allow return for changes\"\n                    labelPosition=\"end\"\n                    [ngModel]=\"config()['allowReturn'] !== false\"\n                    (ngModelChange)=\"onConfigFieldChange('allowReturn', $event === true)\"\n                    hint=\"Allow ReturnForChanges when the backend schema exposes this option.\"\n                  />\n                </div>\n              }\n            </div>\n          }\n          <div class=\"mt-3 space-y-3\">\n            <div class=\"fp-ae-section-title\">Decision options</div>\n            <div class=\"overflow-hidden rounded-md border border-surface-200 bg-surface-0\">\n              @if (selectedApprovalDecisionRows().length > 0) {\n                <div class=\"hidden border-b border-surface-200 bg-surface-50 px-3 py-2 text-[12px] font-semibold text-(--p-text-muted-color) xl:grid xl:grid-cols-[1.1fr_1fr_1.2fr_80px_44px] xl:gap-3\">\n                  <span>Decision label</span>\n                  <span>Canonical value</span>\n                  <span>Route output key</span>\n                  <span>Routes</span>\n                  <span>Action</span>\n                </div>\n                @for (decision of selectedApprovalDecisionRows(); track decision.value) {\n                  <div class=\"grid gap-2 border-b border-surface-100 px-3 py-3 last:border-b-0 xl:grid-cols-[1.1fr_1fr_1.2fr_80px_44px] xl:items-center xl:gap-3\">\n                    <div class=\"min-w-0\">\n                      <div class=\"text-[11px] font-semibold text-(--p-text-muted-color) xl:hidden\">Decision label</div>\n                      <div class=\"truncate text-[13px] font-semibold text-(--p-text-color)\">{{ decision.label }}</div>\n                    </div>\n                    <div class=\"min-w-0\">\n                      <div class=\"text-[11px] font-semibold text-(--p-text-muted-color) xl:hidden\">Canonical value</div>\n                      <div class=\"truncate font-mono text-[12px] text-(--p-text-color)\">{{ decision.value }}</div>\n                    </div>\n                    <div class=\"min-w-0\">\n                      <div class=\"text-[11px] font-semibold text-(--p-text-muted-color) xl:hidden\">Route output key</div>\n                      <div class=\"truncate font-mono text-[12px] text-(--p-text-muted-color)\">{{ decision.routeOutputKey }}</div>\n                    </div>\n                    <div>\n                      <div class=\"text-[11px] font-semibold text-(--p-text-muted-color) xl:hidden\">Routes</div>\n                      <div class=\"text-[13px] text-(--p-text-color)\">{{ decision.routeCount }}</div>\n                    </div>\n                    <mt-button\n                      class=\"justify-self-start xl:justify-self-end\"\n                      size=\"small\"\n                      variant=\"outlined\"\n                      severity=\"danger\"\n                      icon=\"general.trash-01\"\n                      tooltip=\"Remove decision option\"\n                      (onClick)=\"removeApprovalDecision(decision.value)\"\n                    />\n                  </div>\n                }\n              } @else {\n                <div class=\"px-3 py-4 text-[12px] text-(--p-text-muted-color)\">\n                  Add at least one backend-supported approval decision.\n                </div>\n              }\n            </div>\n            @if (approvalDecisionIssues().length > 0) {\n              <div class=\"rounded-lg border border-[rgb(var(--fp-error))]/30 bg-[rgb(var(--fp-error))]/10 px-3 py-2 text-[12px] leading-5 text-[rgb(var(--fp-error))]\">\n                @for (issue of approvalDecisionIssues(); track issue) {\n                  <div>{{ issue }}</div>\n                }\n              </div>\n            }\n            <div class=\"grid gap-2 md:grid-cols-[minmax(0,1fr)_auto]\">\n              <mt-select-field\n                [ngModel]=\"approvalDecisionToAdd()\"\n                (ngModelChange)=\"approvalDecisionToAdd.set($event)\"\n                label=\"Decision to add\"\n                hint=\"Only backend-supported decisions with matching route outputs are available.\"\n                [options]=\"addableApprovalDecisionOptions()\"\n                optionValue=\"value\"\n                optionLabel=\"label\"\n              />\n              <mt-button\n                class=\"self-end\"\n                size=\"small\"\n                variant=\"outlined\"\n                icon=\"general.plus\"\n                label=\"Add decision option\"\n                [disabled]=\"!approvalDecisionToAdd()\"\n                (onClick)=\"addApprovalDecision()\"\n              />\n            </div>\n          </div>\n          @if (humanApprovalSupportsConfig('payload') || humanApprovalSupportsConfig('context') || humanApprovalSupportsConfig('metadata')) {\n            <div class=\"mt-3 grid gap-3\">\n              @if (humanApprovalSupportsConfig('payload')) {\n                <mt-textarea-field\n                  class=\"w-full font-mono\"\n                  [ngModel]=\"valueText(config()['payload'] ?? '')\"\n                  (focusin)=\"setExpressionTarget('config:payload')\"\n                  (ngModelChange)=\"onConfigFieldChange('payload', $event)\"\n                  label=\"Payload\"\n                  hint=\"Approval task payload or context fields supported by backend schema.\"\n                  rows=\"5\"\n                />\n              }\n              @if (humanApprovalSupportsConfig('context')) {\n                <mt-textarea-field\n                  class=\"w-full font-mono\"\n                  [ngModel]=\"valueText(config()['context'] ?? '')\"\n                  (focusin)=\"setExpressionTarget('config:context')\"\n                  (ngModelChange)=\"onConfigFieldChange('context', $event)\"\n                  label=\"Context\"\n                  hint=\"Additional approval context supported by backend schema.\"\n                  rows=\"5\"\n                />\n              }\n              @if (humanApprovalSupportsConfig('metadata')) {\n                <mt-textarea-field\n                  class=\"w-full font-mono\"\n                  [ngModel]=\"valueText(config()['metadata'] ?? '')\"\n                  (focusin)=\"setExpressionTarget('config:metadata')\"\n                  (ngModelChange)=\"onConfigFieldChange('metadata', $event)\"\n                  label=\"Metadata\"\n                  hint=\"Additional approval metadata supported by the backend schema.\"\n                  rows=\"4\"\n                />\n              }\n            </div>\n          }\n          <div class=\"mt-3 flex gap-2\">\n            <mt-button size=\"small\" variant=\"outlined\" label=\"Validate assignment\" (onClick)=\"validateAssignment()\" />\n          </div>\n          @if (assignmentValidation(); as result) {\n            <div class=\"mt-3 rounded-lg bg-(--p-surface-100) px-3 py-2 text-[12px]\">\n              {{ result.isValid === false ? \"Assignment invalid\" : \"Assignment accepted by helper\" }}\n              @for (issue of resultIssues(result); track issue) {\n                <div class=\"mt-1 text-[11px] text-(--p-text-muted-color)\">{{ issue }}</div>\n              }\n            </div>\n          }\n          @if (sectionInMain(\"approvalOutput\")) {\n            <div class=\"mt-3 rounded-md border border-surface-200 bg-surface-0 p-3\">\n              <div class=\"fp-ae-label mb-2\">Output data</div>\n              <div class=\"flex flex-wrap gap-1.5\">\n                @for (field of approvalOutputFieldLabels; track field) {\n                  <span class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\">{{ field }}</span>\n                }\n              </div>\n              <div class=\"mt-3 fp-ae-label mb-2\">Approval routes</div>\n              <div class=\"flex flex-wrap gap-1.5\">\n                @for (key of routeOutputKeys(); track key) {\n                  <span class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\">{{ key }}</span>\n                }\n              </div>\n            </div>\n          }\n        </section>\n        }\n      }\n      @case (\"FlowPlusCommit\") {\n        @if (sectionInMain(\"flowplusCommit\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">FlowPlus commit</div>\n          <p class=\"fp-ae-copy\">\n            This node is the explicit module-data write boundary. Approval does\n            not commit data unless this node is reached.\n          </p>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-select-field\n              [ngModel]=\"config()['targetModule'] ?? ''\"\n              (ngModelChange)=\"onModuleChange($event)\"\n              label=\"Module\"\n              hint=\"Module whose records will be written by this explicit FlowPlus commit.\"\n              [options]=\"moduleOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-select-field\n              [ngModel]=\"config()['operation'] ?? ''\"\n              (ngModelChange)=\"onConfigFieldChange('operation', $event)\"\n              label=\"Operation\"\n              hint=\"Write operation supported by the selected backend module schema.\"\n              [options]=\"operationOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n          </div>\n          <mt-text-field\n            class=\"mt-3 font-mono\"\n            [ngModel]=\"config()['idempotencyKey'] ?? ''\"\n            (focusin)=\"setExpressionTarget('config:idempotencyKey')\"\n            (ngModelChange)=\"onConfigFieldChange('idempotencyKey', $event)\"\n            label=\"Idempotency key\"\n            hint=\"Optional stable key used by the backend to prevent duplicate writes.\"\n          />\n          @if (selectedModuleFields().length) {\n            <div class=\"mt-3 space-y-2\">\n              <div class=\"fp-ae-section-title\">Module schema</div>\n              <div class=\"grid gap-2 md:grid-cols-2\">\n                @for (field of selectedModuleFields(); track field.key) {\n                  <div class=\"fp-ae-kv\">\n                    <span>{{ field.displayName ?? field.key }}</span>\n                    <strong>{{ field.viewType ?? \"Value\" }} @if (field.required) { * }</strong>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n          <div class=\"mt-3\">\n            <ng-container *ngTemplateOutlet=\"mapEditor; context: { objectKey: 'mapping', rows: mappingRows(), keyLabel: 'Module field', valueLabel: 'Expression / value', addLabel: 'Add module field' }\" />\n          </div>\n          <div class=\"mt-3 flex gap-2\">\n            <mt-button size=\"small\" severity=\"primary\" label=\"Validate mapping\" (onClick)=\"validateCommitMapping()\" />\n          </div>\n          @if (commitValidation(); as result) {\n            <div class=\"mt-3 rounded-lg bg-(--p-surface-100) px-3 py-2 text-[12px]\">\n              {{ result.isValid === false ? \"Mapping invalid\" : \"Mapping accepted by helper\" }}\n              @for (issue of resultIssues(result); track issue) {\n                <div class=\"mt-1 text-[11px] text-(--p-text-muted-color)\">{{ issue }}</div>\n              }\n            </div>\n          }\n          @if (sectionInMain(\"credentials\")) {\n            <div class=\"mt-3 rounded-md border border-surface-200 bg-surface-0 p-3\">\n              <div class=\"fp-ae-label mb-2\">Credential</div>\n              <ng-container *ngTemplateOutlet=\"credentialSelector\" />\n            </div>\n          }\n        </section>\n        }\n      }\n      @case (\"WebhookResponse\") {\n        @if (sectionInMain(\"webhookResponse\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Webhook response</div>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-number-field\n              [ngModel]=\"numberValue(config()['statusCode']) ?? 200\"\n              (ngModelChange)=\"onConfigFieldChange('statusCode', $event)\"\n              label=\"Status code\"\n              hint=\"HTTP status code sent back by the webhook response node.\"\n              [min]=\"100\"\n              [max]=\"599\"\n            />\n            <mt-select-field\n              [ngModel]=\"config()['responseMode'] ?? 'json'\"\n              (ngModelChange)=\"onConfigFieldChange('responseMode', $event)\"\n              label=\"Response mode\"\n              hint=\"How the webhook response body should be serialized.\"\n              [options]=\"responseModeOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n          </div>\n          <div class=\"mt-3\">\n            <ng-container *ngTemplateOutlet=\"mapEditor; context: { objectKey: 'headers', rows: headerRows(), keyLabel: 'Header', valueLabel: 'Value', addLabel: 'Add header' }\" />\n          </div>\n          <mt-textarea-field\n            class=\"mt-3 w-full font-mono\"\n            [ngModel]=\"valueText(config()['body'] ?? '')\"\n            (focusin)=\"setExpressionTarget('config:body')\"\n            (ngModelChange)=\"onConfigFieldChange('body', $event)\"\n            label=\"Body\"\n            hint=\"Body returned to the webhook caller. Expressions can use current execution data.\"\n            rows=\"6\"\n          />\n        </section>\n        }\n      }\n      @case (\"CallAutomation\") {\n        @if (sectionInMain(\"callAutomation\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Subworkflow</div>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-select-field\n              [ngModel]=\"config()['targetAutomationId'] ?? ''\"\n              (ngModelChange)=\"onSubworkflowTargetChange($event)\"\n              label=\"Target automation\"\n              hint=\"Backend-provided automation candidate. Tenant and recursion validation stay on the backend.\"\n              [options]=\"subworkflowAutomationOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-select-field\n              [ngModel]=\"config()['revisionMode'] ?? 'Active'\"\n              (ngModelChange)=\"onConfigFieldChange('revisionMode', $event)\"\n              label=\"Revision mode\"\n              hint=\"Choose which published or active child revision to call.\"\n              [options]=\"revisionModeOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            @if (config()['revisionMode'] === \"SpecificRevision\") {\n              <mt-text-field\n                [ngModel]=\"config()['specificRevisionId'] ?? ''\"\n                (ngModelChange)=\"onConfigFieldChange('specificRevisionId', $event)\"\n                label=\"Specific revision id\"\n                hint=\"Required only when revision mode is Specific revision.\"\n              />\n            }\n            <mt-toggle-field\n              size=\"small\"\n              labelPosition=\"end\"\n              [ngModel]=\"config()['waitForCompletion'] !== false\"\n              (ngModelChange)=\"onConfigFieldChange('waitForCompletion', $event === true)\"\n              label=\"Wait for completion\"\n              hint=\"When disabled, the parent continues after dispatch and backend records the child linkage.\"\n            />\n          </div>\n          <div class=\"mt-3 grid gap-3 md:grid-cols-2\">\n            <mt-textarea-field\n              class=\"w-full font-mono md:col-span-2\"\n              [ngModel]=\"valueText(config()['inputMappingJson'] ?? '{}')\"\n              (focusin)=\"setExpressionTarget('config:inputMappingJson')\"\n              (ngModelChange)=\"onConfigFieldChange('inputMappingJson', $event)\"\n              label=\"Input mapping JSON\"\n              hint=\"JSON object or expression map sent into the child automation input.\"\n              rows=\"7\"\n            />\n            <mt-textarea-field\n              class=\"w-full font-mono md:col-span-2\"\n              [ngModel]=\"valueText(config()['outputMappingJson'] ?? '{}')\"\n              (focusin)=\"setExpressionTarget('config:outputMappingJson')\"\n              (ngModelChange)=\"onConfigFieldChange('outputMappingJson', $event)\"\n              label=\"Output mapping JSON\"\n              hint=\"JSON object or expression map for child output/status returned to the parent.\"\n              rows=\"7\"\n            />\n          </div>\n        </section>\n        }\n      }\n      @case (\"Subworkflow\") {\n        @if (sectionInMain(\"callAutomation\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Subworkflow</div>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-select-field\n              [ngModel]=\"config()['targetAutomationId'] ?? ''\"\n              (ngModelChange)=\"onSubworkflowTargetChange($event)\"\n              label=\"Target automation\"\n              hint=\"Backend-provided automation candidate. Tenant and recursion validation stay on the backend.\"\n              [options]=\"subworkflowAutomationOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-select-field\n              [ngModel]=\"config()['revisionMode'] ?? 'Active'\"\n              (ngModelChange)=\"onConfigFieldChange('revisionMode', $event)\"\n              label=\"Revision mode\"\n              hint=\"Choose which published or active child revision to call.\"\n              [options]=\"revisionModeOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            @if (config()['revisionMode'] === \"SpecificRevision\") {\n              <mt-text-field\n                [ngModel]=\"config()['specificRevisionId'] ?? ''\"\n                (ngModelChange)=\"onConfigFieldChange('specificRevisionId', $event)\"\n                label=\"Specific revision id\"\n                hint=\"Required only when revision mode is Specific revision.\"\n              />\n            }\n            <mt-toggle-field\n              size=\"small\"\n              labelPosition=\"end\"\n              [ngModel]=\"config()['waitForCompletion'] !== false\"\n              (ngModelChange)=\"onConfigFieldChange('waitForCompletion', $event === true)\"\n              label=\"Wait for completion\"\n              hint=\"When disabled, the parent continues after dispatch and backend records the child linkage.\"\n            />\n          </div>\n          <div class=\"mt-3 grid gap-3 md:grid-cols-2\">\n            <mt-textarea-field\n              class=\"w-full font-mono md:col-span-2\"\n              [ngModel]=\"valueText(config()['inputMappingJson'] ?? '{}')\"\n              (focusin)=\"setExpressionTarget('config:inputMappingJson')\"\n              (ngModelChange)=\"onConfigFieldChange('inputMappingJson', $event)\"\n              label=\"Input mapping JSON\"\n              hint=\"JSON object or expression map sent into the child automation input.\"\n              rows=\"7\"\n            />\n            <mt-textarea-field\n              class=\"w-full font-mono md:col-span-2\"\n              [ngModel]=\"valueText(config()['outputMappingJson'] ?? '{}')\"\n              (focusin)=\"setExpressionTarget('config:outputMappingJson')\"\n              (ngModelChange)=\"onConfigFieldChange('outputMappingJson', $event)\"\n              label=\"Output mapping JSON\"\n              hint=\"JSON object or expression map for child output/status returned to the parent.\"\n              rows=\"7\"\n            />\n          </div>\n        </section>\n        }\n      }\n      @case (\"ParallelStart\") {\n        @if (sectionInMain(\"parallelStart\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"flex items-center justify-between gap-3 border-b border-surface-200 bg-surface-50 px-4 py-3\">\n            <div class=\"fp-ae-section-title !m-0\">Parallel start</div>\n            <mt-button size=\"small\" variant=\"outlined\" icon=\"general.plus\" label=\"Add branch\" (onClick)=\"addParallelBranch()\" />\n          </div>\n          <div class=\"space-y-3 p-4\">\n            @for (branch of parallelBranches(); track branch.key; let i = $index) {\n              <div class=\"rounded-md border border-surface-200 bg-surface-0 p-3\">\n                <div class=\"grid gap-3 md:grid-cols-[160px_1fr_1fr_auto]\">\n                  <mt-text-field\n                    class=\"font-mono\"\n                    [ngModel]=\"branch.key\"\n                    (ngModelChange)=\"updateParallelBranch(i, 'key', $event)\"\n                    label=\"Branch key\"\n                    hint=\"Persisted route key. Do not use array index names.\"\n                  />\n                  <mt-text-field\n                    [ngModel]=\"branch.label\"\n                    (ngModelChange)=\"updateParallelBranch(i, 'label', $event)\"\n                    label=\"Label\"\n                    hint=\"Visual branch label. Changing it does not change existing routes.\"\n                  />\n                  <mt-text-field\n                    [ngModel]=\"branch.description\"\n                    (ngModelChange)=\"updateParallelBranch(i, 'description', $event)\"\n                    label=\"Description\"\n                    hint=\"Optional branch note for reviewers.\"\n                  />\n                  <div class=\"flex items-end gap-1\">\n                    <mt-button size=\"small\" variant=\"outlined\" icon=\"arrow.arrow-up\" tooltip=\"Move up\" (onClick)=\"moveParallelBranch(i, -1)\" />\n                    <mt-button size=\"small\" variant=\"outlined\" icon=\"arrow.arrow-down\" tooltip=\"Move down\" (onClick)=\"moveParallelBranch(i, 1)\" />\n                    <mt-button size=\"small\" variant=\"outlined\" severity=\"danger\" icon=\"general.trash-01\" tooltip=\"Remove branch\" (onClick)=\"removeParallelBranch(i)\" />\n                  </div>\n                </div>\n                <div class=\"mt-3 flex flex-wrap items-center gap-1.5 text-[11px]\">\n                  <span class=\"inline-flex h-7 items-center rounded-md border border-surface-200 bg-surface-50 px-2 font-mono font-semibold text-(--p-text-color)\">{{ branch.key }}</span>\n                  <span class=\"inline-flex h-7 items-center rounded-md border border-surface-200 bg-surface-0 px-2 font-medium text-(--p-text-muted-color)\">{{ branch.routeCount }} connected route{{ branch.routeCount === 1 ? \"\" : \"s\" }}</span>\n                </div>\n              </div>\n            }\n            @if (parallelBranches().length === 0) {\n              <p class=\"fp-ae-copy\">Add at least two stable branch keys. Backend validation blocks publish until branches are valid.</p>\n            }\n          </div>\n        </section>\n        }\n      }\n      @case (\"ParallelJoin\") {\n        @if (sectionInMain(\"parallelJoin\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Parallel join</div>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-select-field\n              [ngModel]=\"config()['joinPolicy'] ?? 'All'\"\n              (ngModelChange)=\"onConfigFieldChange('joinPolicy', $event)\"\n              label=\"Join policy\"\n              hint=\"Backend policy used to decide when branch wait is complete.\"\n              [options]=\"joinPolicyOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            @if (config()['joinPolicy'] === \"Threshold\") {\n              <mt-number-field\n                [ngModel]=\"numberValue(config()['threshold'])\"\n                (ngModelChange)=\"onConfigFieldChange('threshold', $event)\"\n                label=\"Threshold\"\n                hint=\"Minimum completed branch count required for Threshold policy.\"\n                [min]=\"1\"\n              />\n            }\n            <mt-select-field\n              [ngModel]=\"config()['aggregationStrategy'] ?? 'MergeObjects'\"\n              (ngModelChange)=\"onConfigFieldChange('aggregationStrategy', $event)\"\n              label=\"Aggregation strategy\"\n              hint=\"How backend joins branch outputs into the join node output.\"\n              [options]=\"aggregationStrategyOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-text-field\n              class=\"font-mono\"\n              [ngModel]=\"config()['outputTargetPath'] ?? ''\"\n              (focusin)=\"setExpressionTarget('config:outputTargetPath')\"\n              (ngModelChange)=\"onConfigFieldChange('outputTargetPath', $event)\"\n              label=\"Output target path\"\n              hint=\"Optional context path where joined output should be written.\"\n            />\n          </div>\n        </section>\n        }\n      }\n      @case (\"Switch\") {\n        @if (sectionInMain(\"switch\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Switch</div>\n          <div class=\"grid gap-4\">\n            <div class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_minmax(280px,0.7fr)]\">\n              <mt-select-field\n                [ngModel]=\"config()['mode'] ?? 'value'\"\n                (ngModelChange)=\"onConfigFieldChange('mode', $event)\"\n                label=\"Mode\"\n                hint=\"Backend evaluation mode: expression, rules, or source-value matching.\"\n                [options]=\"switchModeOptions\"\n                optionValue=\"value\"\n                optionLabel=\"label\"\n              />\n              <mt-toggle-field\n                class=\"self-end pb-1\"\n                size=\"small\"\n                labelPosition=\"end\"\n                [ngModel]=\"config()['firstMatch'] !== false\"\n                (ngModelChange)=\"onConfigFieldChange('firstMatch', $event === true)\"\n                label=\"First match\"\n                hint=\"Use the first matching case unless backend explicitly supports multi-match.\"\n              />\n            </div>\n            @if (showSwitchSourceValue() || showSwitchExpression()) {\n              <div class=\"grid gap-3 md:grid-cols-2\">\n                @if (showSwitchSourceValue()) {\n                  <mt-text-field\n                    [class]=\"showSwitchExpression() ? 'font-mono' : 'font-mono md:col-span-2'\"\n                    [ngModel]=\"config()['sourceValue'] ?? ''\"\n                    (focusin)=\"setExpressionTarget('config:sourceValue')\"\n                    (ngModelChange)=\"onConfigFieldChange('sourceValue', $event)\"\n                    label=\"Source value\"\n                    hint=\"Value or expression used for value matching.\"\n                  />\n                }\n                @if (showSwitchExpression()) {\n                  <mt-text-field\n                    [class]=\"showSwitchSourceValue() ? 'font-mono' : 'font-mono md:col-span-2'\"\n                    [ngModel]=\"config()['expression'] ?? ''\"\n                    (focusin)=\"setExpressionTarget('config:expression')\"\n                    (ngModelChange)=\"onConfigFieldChange('expression', $event)\"\n                    label=\"Expression\"\n                    hint=\"Expression evaluated when mode is expression or rules.\"\n                  />\n                }\n              </div>\n            }\n            <div class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_minmax(280px,0.7fr)]\">\n              @if (showSwitchDefaultOutputKey()) {\n                <mt-text-field\n                  class=\"font-mono\"\n                  [ngModel]=\"config()['defaultOutputKey'] ?? 'default'\"\n                  (ngModelChange)=\"onConfigFieldChange('defaultOutputKey', $event)\"\n                  label=\"Default output key\"\n                  hint=\"Stable default route key used when no case matches.\"\n                />\n              }\n              <mt-toggle-field\n                [class]=\"showSwitchDefaultOutputKey() ? 'self-end pb-1' : 'self-end pb-1 md:col-span-2'\"\n                size=\"small\"\n                labelPosition=\"end\"\n                [ngModel]=\"config()['includeDefaultOutput'] !== false\"\n                (ngModelChange)=\"onConfigFieldChange('includeDefaultOutput', $event === true)\"\n                label=\"Include default output\"\n                hint=\"Expose the default route output key in the canvas.\"\n              />\n            </div>\n          </div>\n        </section>\n        <section class=\"fp-ae-panel\">\n          <div class=\"flex items-center justify-between gap-3 border-b border-surface-200 bg-surface-50 px-4 py-3\">\n            <div class=\"fp-ae-section-title !m-0\">Switch cases</div>\n            <mt-button size=\"small\" variant=\"outlined\" icon=\"general.plus\" label=\"Add case\" (onClick)=\"addSwitchCase()\" />\n          </div>\n          <div class=\"space-y-3 p-4\">\n            @for (item of switchCases(); track item.key; let i = $index) {\n              <div class=\"rounded-md border border-surface-200 bg-surface-0 p-3\">\n                <div class=\"grid gap-3 md:grid-cols-[160px_1fr_1fr_auto]\">\n                  <mt-text-field\n                    class=\"font-mono\"\n                    [ngModel]=\"item.key\"\n                    (ngModelChange)=\"updateSwitchCase(i, 'key', $event)\"\n                    label=\"Case key\"\n                    hint=\"Persisted stable key. The route output becomes case_key.\"\n                  />\n                  <mt-text-field\n                    [ngModel]=\"item.label\"\n                    (ngModelChange)=\"updateSwitchCase(i, 'label', $event)\"\n                    label=\"Label\"\n                    hint=\"Visual case label. Routes stay attached to the case key.\"\n                  />\n                  <mt-text-field\n                    [ngModel]=\"item.value\"\n                    (focusin)=\"setExpressionTarget('config:cases:' + item.key + ':value')\"\n                    (ngModelChange)=\"updateSwitchCase(i, 'value', $event)\"\n                    label=\"Value\"\n                    hint=\"Expected value for value matching.\"\n                  />\n                  <div class=\"flex items-end gap-1\">\n                    <mt-button size=\"small\" variant=\"outlined\" icon=\"arrow.arrow-up\" tooltip=\"Move up\" (onClick)=\"moveSwitchCase(i, -1)\" />\n                    <mt-button size=\"small\" variant=\"outlined\" icon=\"arrow.arrow-down\" tooltip=\"Move down\" (onClick)=\"moveSwitchCase(i, 1)\" />\n                    <mt-button size=\"small\" variant=\"outlined\" severity=\"danger\" icon=\"general.trash-01\" tooltip=\"Remove case\" (onClick)=\"removeSwitchCase(i)\" />\n                  </div>\n                </div>\n                <div class=\"mt-3 grid gap-3 md:grid-cols-2\">\n                  <mt-text-field\n                    class=\"font-mono\"\n                    [ngModel]=\"item.condition\"\n                    (focusin)=\"setExpressionTarget('config:cases:' + item.key + ':condition')\"\n                    (ngModelChange)=\"updateSwitchCase(i, 'condition', $event)\"\n                    label=\"Condition\"\n                    hint=\"Optional condition for rule matching.\"\n                  />\n                  <mt-text-field\n                    class=\"font-mono\"\n                    [ngModel]=\"item.expression\"\n                    (focusin)=\"setExpressionTarget('config:cases:' + item.key + ':expression')\"\n                    (ngModelChange)=\"updateSwitchCase(i, 'expression', $event)\"\n                    label=\"Case expression\"\n                    hint=\"Optional expression for this case.\"\n                  />\n                </div>\n                <div class=\"mt-3 flex flex-wrap items-center gap-1.5 text-[11px]\">\n                  <span class=\"inline-flex h-7 items-center rounded-md border border-surface-200 bg-surface-50 px-2 font-mono font-semibold text-(--p-text-color)\">{{ item.routeKey }}</span>\n                  <span class=\"inline-flex h-7 items-center rounded-md border border-surface-200 bg-surface-0 px-2 font-medium text-(--p-text-muted-color)\">{{ item.routeCount }} connected route{{ item.routeCount === 1 ? \"\" : \"s\" }}</span>\n                  <span class=\"inline-flex h-7 items-center rounded-md border border-surface-200 bg-surface-0 px-2 font-medium text-(--p-text-muted-color)\">Visual order {{ i + 1 }}</span>\n                </div>\n              </div>\n            }\n            @if (switchCases().length === 0) {\n              <p class=\"fp-ae-copy\">Add at least one stable case key. Backend validation points routes at missing case keys if a case is deleted.</p>\n            }\n          </div>\n        </section>\n        }\n      }\n      @case (\"Stop\") {\n        @if (sectionInMain(\"stop\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">End execution</div>\n          @if (supportsConfigKey('status') || supportsConfigKey('message') || supportsConfigKey('output')) {\n            <div class=\"grid gap-3 md:grid-cols-2\">\n              @if (supportsConfigKey('status')) {\n                <mt-text-field\n                  [ngModel]=\"config()['status'] ?? ''\"\n                  (ngModelChange)=\"onConfigFieldChange('status', $event)\"\n                  label=\"Result status\"\n                  hint=\"Terminal status emitted by the backend stop node.\"\n                />\n              }\n              @if (supportsConfigKey('message')) {\n                <mt-text-field\n                  [ngModel]=\"config()['message'] ?? ''\"\n                  (focusin)=\"setExpressionTarget('config:message')\"\n                  (ngModelChange)=\"onConfigFieldChange('message', $event)\"\n                  label=\"Message\"\n                  hint=\"Optional message or reason saved with the terminal result.\"\n                />\n              }\n              @if (supportsConfigKey('output')) {\n                <mt-textarea-field\n                  class=\"w-full font-mono md:col-span-2\"\n                  [ngModel]=\"valueText(config()['output'] ?? '')\"\n                  (focusin)=\"setExpressionTarget('config:output')\"\n                  (ngModelChange)=\"onConfigFieldChange('output', $event)\"\n                  label=\"Output payload\"\n                  hint=\"Terminal output payload when exposed by the backend schema.\"\n                  rows=\"5\"\n                />\n              }\n            </div>\n          } @else {\n            <p class=\"fp-ae-copy\">\n              This terminal node has no backend-exposed settings. It ends execution when reached.\n            </p>\n          }\n        </section>\n        }\n      }\n    }\n\n    @if (sectionInMain(\"backendSchema\") && step() && editorType() !== \"HumanApproval\") {\n      <section class=\"fp-ae-panel\">\n        <div class=\"fp-ae-section-title\">Output data</div>\n        @if (outputFields().length > 0) {\n          <div class=\"grid gap-2 md:grid-cols-2\">\n            @for (field of outputFields(); track field.key) {\n              <div class=\"fp-ae-kv\">\n                <span>{{ field.label }}</span>\n                <strong>{{ field.type }}</strong>\n              </div>\n            }\n          </div>\n        }\n        @if (routeOutputKeys().length > 0) {\n          <div class=\"mt-3 fp-ae-label mb-2\">Route outputs</div>\n          <div class=\"flex flex-wrap gap-1.5\">\n            @for (key of routeOutputKeys(); track key) {\n              <span class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\">{{ key }}</span>\n            }\n          </div>\n        }\n      </section>\n    }\n\n    @if (sectionInAdvanced(\"mapping\")) {\n      <section class=\"fp-ae-panel\">\n        <div class=\"fp-ae-section-title\">Request and result mapping</div>\n        <div class=\"grid gap-3 md:grid-cols-2\">\n          <div>\n            <div class=\"fp-ae-label mb-2\">Request data</div>\n            @for (row of inputMappingRows(); track row.key) {\n              <label class=\"mb-2 block space-y-1\">\n                <span class=\"text-[11px] text-(--p-text-muted-color)\">{{ row.key }}</span>\n                <mt-text-field\n                  [ngModel]=\"valueText(row.value)\"\n                  (focusin)=\"setExpressionTarget('config:inputMapping:' + row.key)\"\n                  (ngModelChange)=\"updateJsonField('inputMappingJson', row.key, $event)\"\n                  hint=\"Expression or literal value mapped into this node input.\"\n                />\n              </label>\n            }\n          </div>\n          <div>\n            <div class=\"fp-ae-label mb-2\">Output data</div>\n            @for (row of outputMappingRows(); track row.key) {\n              <label class=\"mb-2 block space-y-1\">\n                <span class=\"text-[11px] text-(--p-text-muted-color)\">{{ row.key }}</span>\n                <mt-text-field\n                  [ngModel]=\"valueText(row.value)\"\n                  (focusin)=\"setExpressionTarget('config:outputMapping:' + row.key)\"\n                  (ngModelChange)=\"updateJsonField('outputMappingJson', row.key, $event)\"\n                  hint=\"Expression or literal value mapped from this node output.\"\n                />\n              </label>\n            }\n          </div>\n        </div>\n        @if (\n          sectionHasAdvancedEmptyState(\"mapping\") &&\n          inputMappingRows().length === 0 &&\n          outputMappingRows().length === 0\n        ) {\n          <p class=\"fp-ae-copy mt-3\">\n            This node is using backend default request and output data. Add mappings only when this step needs a custom payload.\n          </p>\n        }\n      </section>\n    }\n\n    @if (sectionInAdvanced(\"credentials\")) {\n      <section class=\"fp-ae-panel\">\n        <div class=\"fp-ae-section-title\">Auth and credentials</div>\n        <ng-container *ngTemplateOutlet=\"credentialSelector\" />\n      </section>\n    }\n\n    @if (sectionInAdvanced(\"policy\")) {\n      <section class=\"fp-ae-panel\">\n        <div class=\"fp-ae-section-title\">Retry, timeout, error policy</div>\n        <div class=\"grid gap-3 md:grid-cols-3\">\n            <mt-number-field\n              [ngModel]=\"numberValue(policyObject('timeoutPolicyJson')['timeoutSeconds'])\"\n              (ngModelChange)=\"updateJsonField('timeoutPolicyJson', 'timeoutSeconds', $event)\"\n              label=\"Timeout seconds\"\n              hint=\"Maximum runtime before the backend times out this node.\"\n              [min]=\"0\"\n            />\n          <mt-number-field\n              [ngModel]=\"numberValue(policyObject('retryPolicyJson')['maxAttempts'])\"\n              (ngModelChange)=\"updateJsonField('retryPolicyJson', 'maxAttempts', $event)\"\n              label=\"Max attempts\"\n              hint=\"Maximum retry attempts after retryable failures.\"\n              [min]=\"0\"\n            />\n            <mt-select-field\n              [ngModel]=\"policyObject('errorPolicyJson')['onFailure'] ?? ''\"\n              (ngModelChange)=\"updateJsonField('errorPolicyJson', 'onFailure', $event)\"\n              label=\"On failure\"\n              hint=\"Backend error policy to apply when this node fails.\"\n              [options]=\"errorPolicyOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n          />\n        </div>\n        @if (sectionHasAdvancedEmptyState(\"policy\")) {\n          <p class=\"fp-ae-copy mt-3\">\n            Backend defaults apply until you override a timeout, retry, or error policy here.\n          </p>\n        }\n      </section>\n    }\n\n    @if (sectionInAdvanced(\"triggerContext\") && trigger()) {\n      <details class=\"fp-ae-panel\" open>\n        <summary class=\"fp-ae-section-title cursor-pointer select-none\">\n          Trigger payload and context\n        </summary>\n        <p class=\"fp-ae-copy mt-3\">\n          Trigger payload/context is documentation for expressions only. Triggers\n          do not edit node input or output mappings here.\n        </p>\n        <div class=\"grid gap-3 md:grid-cols-2\">\n          <details class=\"rounded-lg border border-(--p-content-border-color)\">\n            <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Config schema</summary>\n            <pre class=\"fp-ae-code\">{{ schemaText(configSchema()) }}</pre>\n          </details>\n          @if (hasTriggerPayloadSchema() && triggerPayloadSchema(); as schema) {\n            <details class=\"rounded-lg border border-(--p-content-border-color)\">\n              <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Payload schema</summary>\n              <pre class=\"fp-ae-code\">{{ schemaText(schema) }}</pre>\n            </details>\n          }\n          @if (authPolicySchema()) {\n            <details class=\"rounded-lg border border-(--p-content-border-color)\">\n              <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Auth policy schema</summary>\n              <pre class=\"fp-ae-code\">{{ schemaText(authPolicySchema()) }}</pre>\n            </details>\n          }\n          @if (triggerPayloadSample(); as sample) {\n            <details class=\"rounded-lg border border-(--p-content-border-color)\">\n              <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Payload or request sample</summary>\n              <pre class=\"fp-ae-code\">{{ schemaText(sample) }}</pre>\n            </details>\n          }\n        </div>\n      </details>\n    }\n\n    @if (sectionInAdvanced(\"backendSchema\") && step()) {\n      <details class=\"fp-ae-panel\" open>\n        <summary class=\"fp-ae-section-title cursor-pointer select-none\">\n          Backend schemas and outputs\n        </summary>\n        <div class=\"mt-3 grid gap-3 md:grid-cols-2\">\n          <details class=\"rounded-lg border border-(--p-content-border-color)\">\n            <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Config schema</summary>\n            <pre class=\"fp-ae-code\">{{ schemaText(configSchema()) }}</pre>\n          </details>\n          <details class=\"rounded-lg border border-(--p-content-border-color)\">\n            <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Input schema</summary>\n            <pre class=\"fp-ae-code\">{{ schemaText(inputSchema()) }}</pre>\n          </details>\n          <details class=\"rounded-lg border border-(--p-content-border-color)\">\n            <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Output schema</summary>\n            <pre class=\"fp-ae-code\">{{ schemaText(outputSchema()) }}</pre>\n          </details>\n          <div class=\"rounded-lg border border-(--p-content-border-color) p-3\">\n            <div class=\"fp-ae-label mb-2\">Route output keys</div>\n            <div class=\"flex flex-wrap gap-1.5\">\n              @for (key of routeOutputKeys(); track key) {\n                <span class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\">{{ key }}</span>\n              }\n              @if (routeOutputKeys().length === 0) {\n                <span class=\"text-[12px] text-(--p-text-muted-color)\">No outgoing route keys</span>\n              }\n            </div>\n          </div>\n        </div>\n      </details>\n    }\n\n    @if (sectionInAdvanced(\"schemaFields\") && configRows().length > 0) {\n      <details class=\"fp-ae-panel\" open>\n        <summary class=\"fp-ae-section-title cursor-pointer select-none\">\n          Backend schema fields\n        </summary>\n        <div class=\"mt-3 grid gap-3 md:grid-cols-2\">\n          @for (field of configRows(); track field.key) {\n            <div\n              class=\"space-y-1.5\"\n              [class.md:col-span-2]=\"field.type === 'object' || field.type === 'array'\"\n            >\n              @if (field.enumValues.length) {\n                <mt-select-field\n                  [ngModel]=\"fieldValue(field.key)\"\n                  (ngModelChange)=\"onConfigFieldChange(field.key, $event)\"\n                  [label]=\"field.label + (field.required ? ' *' : '')\"\n                  [hint]=\"field.description ?? ''\"\n                  [options]=\"enumOptions(field.enumValues)\"\n                  optionValue=\"value\"\n                  optionLabel=\"label\"\n                />\n              } @else if (field.type === \"boolean\") {\n                <mt-toggle-field\n                  size=\"small\"\n                  labelPosition=\"end\"\n                  [ngModel]=\"!!fieldValue(field.key)\"\n                  (ngModelChange)=\"onConfigFieldChange(field.key, $event === true)\"\n                  [label]=\"field.label + (field.required ? ' *' : '')\"\n                  [hint]=\"field.description ?? ''\"\n                />\n              } @else if (field.type === \"number\") {\n                <mt-number-field\n                  [ngModel]=\"numberValue(fieldValue(field.key))\"\n                  (ngModelChange)=\"onConfigFieldChange(field.key, $event)\"\n                  [label]=\"field.label + (field.required ? ' *' : '')\"\n                  [hint]=\"field.description ?? ''\"\n                />\n              } @else if (field.type === \"date\") {\n                <mt-date-field\n                  [ngModel]=\"fieldValue(field.key)\"\n                  (ngModelChange)=\"onConfigFieldChange(field.key, $event)\"\n                  [label]=\"field.label + (field.required ? ' *' : '')\"\n                  [hint]=\"field.description ?? ''\"\n                  [showTime]=\"field.format !== 'date'\"\n                  [showClear]=\"true\"\n                  [pInputs]=\"dateTimePickerInputs\"\n                />\n              } @else if (field.type === \"object\" || field.type === \"array\") {\n                <mt-textarea-field\n                  class=\"w-full font-mono\"\n                  [ngModel]=\"valueText(fieldValue(field.key))\"\n                  (ngModelChange)=\"onConfigFieldChange(field.key, $event)\"\n                  [label]=\"field.label + (field.required ? ' *' : '')\"\n                  [hint]=\"field.description ?? ''\"\n                  rows=\"5\"\n                />\n              } @else {\n                <mt-text-field\n                  [ngModel]=\"fieldText(field.key)\"\n                  (focusin)=\"field.expressionEnabled && setExpressionTarget('config:' + field.key)\"\n                  (ngModelChange)=\"onConfigFieldChange(field.key, $event)\"\n                  [label]=\"field.label + (field.required ? ' *' : '')\"\n                  [hint]=\"field.description ?? ''\"\n                />\n              }\n            </div>\n          }\n        </div>\n      </details>\n    }\n  </div>\n</div>\n\n<ng-template #credentialSelector>\n  @if (credentials().length) {\n    <div class=\"space-y-2\">\n      @for (credential of credentials(); track credential.credentialRef) {\n        <label class=\"flex items-center justify-between gap-3 rounded-lg border border-(--p-content-border-color) bg-(--p-surface-50) px-3 py-2\">\n          <span class=\"min-w-0\">\n            <span class=\"block truncate text-[12px] font-semibold\">{{ credential.displayName ?? credential.credentialRef }}</span>\n            <span class=\"block truncate font-mono text-[11px] text-(--p-text-muted-color)\">\n              {{ credential.credentialRef }} / {{ credential.status ?? (credential.resolved ? \"Resolved\" : \"Unresolved\") }}\n            </span>\n          </span>\n          <span class=\"flex items-center gap-2\">\n            <mt-button\n              size=\"small\"\n              variant=\"text\"\n              label=\"Test\"\n              (onClick)=\"testCredential(credential.credentialRef)\"\n            />\n            <mt-toggle-field\n              size=\"small\"\n              [ngModel]=\"credentialRefs().includes(credential.credentialRef)\"\n              (ngModelChange)=\"toggleCredential(credential.credentialRef, $event === true)\"\n              hint=\"Attach or detach this backend credential reference. Masked secrets are preserved.\"\n            />\n          </span>\n        </label>\n      }\n    </div>\n  } @else if (sectionHasAdvancedEmptyState(\"credentials\")) {\n    <p class=\"fp-ae-copy\">\n      The backend helper did not return credential choices for this node. Existing masked references remain preserved in the saved JSON.\n    </p>\n  }\n  @if (credentialTest(); as test) {\n    <div class=\"mt-3 rounded-lg bg-(--p-surface-100) px-3 py-2 text-[12px]\">\n      {{ test.status ?? (test.succeeded ? \"Succeeded\" : \"Placeholder\") }}\n      @if (test.message) { <span>- {{ test.message }}</span> }\n    </div>\n  }\n</ng-template>\n\n<ng-template\n  #mapEditor\n  let-objectKey=\"objectKey\"\n  let-rows=\"rows\"\n  let-keyLabel=\"keyLabel\"\n  let-valueLabel=\"valueLabel\"\n  let-addLabel=\"addLabel\"\n>\n  <div class=\"space-y-2\">\n    @for (row of rows; track row.key) {\n      <div class=\"grid gap-2 md:grid-cols-[180px_1fr_auto]\">\n        <mt-text-field\n          class=\"font-mono\"\n          [ngModel]=\"row.key\"\n          (ngModelChange)=\"updateObjectRow(objectKey, row.key, $event, row.value)\"\n          [label]=\"keyLabel\"\n          hint=\"Configuration key saved to the backend JSON object.\"\n        />\n        <mt-text-field\n          class=\"font-mono\"\n          [ngModel]=\"valueText(row.value)\"\n          (focusin)=\"setExpressionTarget('config:' + objectKey + ':' + row.key)\"\n          (ngModelChange)=\"updateObjectRow(objectKey, row.key, row.key, $event)\"\n          [label]=\"valueLabel\"\n          hint=\"Configuration value. Use expressions when this field should resolve at runtime.\"\n        />\n        <mt-button\n          class=\"self-end\"\n          size=\"small\"\n          severity=\"secondary\"\n          variant=\"outlined\"\n          label=\"Remove\"\n          (onClick)=\"removeObjectRow(objectKey, row.key)\"\n        />\n      </div>\n    }\n    <mt-button\n      size=\"small\"\n      variant=\"outlined\"\n      [label]=\"addLabel || ('Add ' + keyLabel)\"\n      (onClick)=\"addObjectRow(objectKey)\"\n    />\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DateField, selector: "mt-date-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "showIcon", "showClear", "showTime", "pInputs", "required"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required", "maxLength"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "directive", type: DropDataDirective, selector: "[fpDropData]", inputs: ["fpDropAutoInsert"], outputs: ["dataDrop"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AutomationSmartEditorComponent, decorators: [{
             type: Component,
@@ -13823,7 +14274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         SelectField,
                         ToggleField,
                         ...DATA_PILL_DRAG,
-                    ], host: { class: 'block h-full min-h-0' }, template: "<div\n  class=\"fp-scroll flex h-full min-h-0 flex-col overflow-y-auto\"\n  fpDropData\n  [fpDropAutoInsert]=\"false\"\n  (dataDrop)=\"insertExpression($event)\"\n>\n  <div class=\"space-y-4 px-5 py-5\">\n    @if (helperError()) {\n      <div\n        class=\"rounded-lg border border-[rgb(var(--fp-warning))]/30 bg-[rgb(var(--fp-warning))]/10 px-3 py-2 text-[12px] leading-5 text-(--p-text-color)\"\n      >\n        {{ helperError() }}\n      </div>\n    }\n\n    @if (sectionInMain(\"startConnection\") && trigger()) {\n      <section\n        class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\n      >\n        <h3\n          class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\n        >\n          Start connection\n        </h3>\n        <div class=\"space-y-3 p-4\">\n          @if (startConnection().key) {\n            @if (startConnection().step) {\n              <div class=\"flex flex-wrap items-start justify-between gap-3\">\n                <div class=\"min-w-0 space-y-1\">\n                  <div class=\"text-[12px] font-semibold text-(--p-text-muted-color)\">\n                    First node connected\n                  </div>\n                  <div class=\"truncate text-[14px] font-semibold text-(--p-text-color)\">\n                    {{ startConnection().label }}\n                  </div>\n                  <div class=\"flex flex-wrap items-center gap-2 text-[12px] text-(--p-text-muted-color)\">\n                    <span>Managed on canvas</span>\n                    <span\n                      class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\"\n                    >\n                      {{ startConnection().key }}\n                    </span>\n                  </div>\n                </div>\n                <div class=\"flex shrink-0 flex-wrap gap-2\">\n                  <mt-button\n                    size=\"small\"\n                    variant=\"outlined\"\n                    severity=\"secondary\"\n                    label=\"Focus connected node\"\n                    (onClick)=\"focusStartConnection()\"\n                  />\n                </div>\n              </div>\n            } @else {\n              <div class=\"space-y-2\">\n                <div class=\"text-[14px] font-semibold text-(--p-text-color)\">\n                  No first node connected\n                </div>\n                <p class=\"m-0 text-[12px] leading-5 text-(--p-text-muted-color)\">\n                  The saved start connection points to a node key that is not on\n                  the canvas. Connect this trigger to the first node on the\n                  canvas.\n                </p>\n                <div class=\"flex flex-wrap items-center gap-2 text-[12px] text-(--p-text-muted-color)\">\n                  <span>Technical key</span>\n                  <span\n                    class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\"\n                  >\n                    {{ startConnection().key }}\n                  </span>\n                  <span>Managed on canvas</span>\n                </div>\n              </div>\n            }\n          } @else {\n            <div class=\"rounded-lg border border-dashed border-(--p-content-border-color) bg-(--p-surface-50) p-3\">\n              <div class=\"text-[14px] font-semibold text-(--p-text-color)\">\n                No first node connected\n              </div>\n              <p class=\"m-0 mt-1 text-[12px] leading-5 text-(--p-text-muted-color)\">\n                Connect this trigger to the first node on the canvas.\n              </p>\n            </div>\n          }\n        </div>\n      </section>\n    }\n\n    @switch (editorType()) {\n      @case (\"ManualTrigger\") {\n        @if (sectionInMain(\"manualTrigger\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Manual run input</div>\n          @if (hasTriggerPayloadSchema() && triggerPayloadSchema(); as schema) {\n            <div class=\"rounded-md border border-surface-200 bg-surface-0 p-3\">\n              <div class=\"fp-ae-label mb-2\">Payload schema</div>\n              <pre class=\"fp-ae-code\">{{ schemaText(schema) }}</pre>\n            </div>\n          }\n          @if (triggerPayloadSample(); as sample) {\n            <div class=\"mt-3 rounded-md border border-surface-200 bg-surface-0 p-3\">\n              <div class=\"fp-ae-label mb-2\">Sample payload</div>\n              <pre class=\"fp-ae-code\">{{ schemaText(sample) }}</pre>\n            </div>\n          }\n          @if (!hasTriggerPayloadSchema() && !triggerPayloadSample()) {\n            <p class=\"fp-ae-copy\">\n              This manual trigger has no backend-provided input schema. It can still be connected to the first step on the canvas.\n            </p>\n          }\n        </section>\n        }\n      }\n      @case (\"WebhookTrigger\") {\n        @if (sectionInMain(\"webhookSetup\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Webhook setup</div>\n          @if (webhookSetup(); as setup) {\n            <div class=\"flex gap-2\">\n              <mt-text-field\n                class=\"flex-1 font-mono\"\n                [ngModel]=\"setup.webhookUrl ?? ''\"\n                [readonly]=\"true\"\n                label=\"Webhook URL\"\n                hint=\"Backend-generated endpoint clients should call to start this trigger.\"\n              />\n              <mt-button class=\"self-end\" size=\"small\" variant=\"outlined\" label=\"Copy\" (onClick)=\"copyWebhookUrl()\" />\n            </div>\n            <div class=\"grid gap-2 md:grid-cols-2\">\n              <div class=\"fp-ae-kv\">\n                <span>Auth mode</span>\n                <strong>{{ setup.authMode ?? \"Backend default\" }}</strong>\n              </div>\n              <div class=\"fp-ae-kv\">\n                <span>Required headers</span>\n                <strong>{{ (setup.requiredHeaders ?? []).join(\", \") || \"-\" }}</strong>\n              </div>\n            </div>\n            @if (setup.hmacSigning) {\n              <p class=\"fp-ae-copy\">{{ setup.hmacSigning }}</p>\n            }\n            @if (setup.sampleRequest) {\n              <details class=\"mt-3 rounded-lg border border-(--p-content-border-color)\">\n                <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">\n                  Sample request\n                </summary>\n                <pre class=\"fp-ae-code\">{{ schemaText(setup.sampleRequest) }}</pre>\n              </details>\n            }\n          } @else {\n            <p class=\"fp-ae-copy\">\n              Webhook setup is not available for this draft yet.\n            </p>\n          }\n        </section>\n        }\n        @if (sectionInMain(\"authPolicy\") && hasAuthPolicy()) {\n          <section class=\"fp-ae-panel\">\n            <div class=\"fp-ae-section-title\">Authentication policy</div>\n            <div class=\"grid gap-3 md:grid-cols-3\">\n              <mt-select-field\n                [ngModel]=\"authPolicy()['mode'] ?? ''\"\n                (ngModelChange)=\"onAuthFieldChange('mode', $event)\"\n                label=\"Mode\"\n                hint=\"Authentication mode required by the backend webhook policy.\"\n                [options]=\"authModeOptions\"\n                optionValue=\"value\"\n                optionLabel=\"label\"\n              />\n              <mt-text-field\n                [ngModel]=\"authPolicy()['signatureHeaderName'] ?? ''\"\n                (ngModelChange)=\"onAuthFieldChange('signatureHeaderName', $event)\"\n                label=\"Signature header\"\n                hint=\"Header name that carries the webhook signature when the policy requires signed requests.\"\n              />\n              <mt-text-field\n                [ngModel]=\"authPolicy()['timestampHeaderName'] ?? ''\"\n                (ngModelChange)=\"onAuthFieldChange('timestampHeaderName', $event)\"\n                label=\"Timestamp header\"\n                hint=\"Header name that carries the request timestamp for replay protection.\"\n              />\n            </div>\n          </section>\n        }\n      }\n      @case (\"FormSubmitTrigger\") {\n        @if (sectionInMain(\"formBinding\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Form binding</div>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-select-field\n              [ngModel]=\"selectedFormId() || formBinding()?.formId || ''\"\n              (ngModelChange)=\"onFormChange($event)\"\n              label=\"Form\"\n              hint=\"Choose a backend form that will submit data into this trigger.\"\n              [options]=\"formOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-select-field\n              [ngModel]=\"selectedFormVersionId() || formBinding()?.formVersionId || ''\"\n              (ngModelChange)=\"onFormVersionChange($event)\"\n              label=\"Form version\"\n              hint=\"Persist the exact backend formVersionId. Do not type or generate IDs manually.\"\n              [options]=\"formVersionOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n          </div>\n          <div class=\"mt-3 flex flex-wrap items-center gap-2\">\n            <mt-button size=\"small\" severity=\"primary\" label=\"Save binding\" (onClick)=\"saveFormBinding()\" />\n            @if (formBinding()) {\n              <span class=\"rounded-lg bg-(--p-surface-100) px-2 py-1 font-mono text-[11px] text-(--p-text-muted-color)\">\n                {{ formBinding()!.formVersionId }}\n              </span>\n            }\n          </div>\n          @if (formSchema(); as schema) {\n            <details class=\"mt-3 rounded-lg border border-(--p-content-border-color)\">\n              <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">\n                Form schema preview\n              </summary>\n              <pre class=\"fp-ae-code\">{{ schemaText(schema.schema) }}</pre>\n            </details>\n          }\n        </section>\n        }\n      }\n      @case (\"ScheduleTrigger\") {\n        @if (sectionInMain(\"schedule\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Schedule</div>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-select-field\n              [ngModel]=\"config()['mode'] ?? 'cron'\"\n              (ngModelChange)=\"onConfigFieldChange('mode', $event)\"\n              label=\"Mode\"\n              hint=\"Pick one schedule mode: cron, interval, or once. Backend validation requires exactly one mode.\"\n              [options]=\"scheduleModeOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-select-field\n              [ngModel]=\"config()['timezone'] ?? 'UTC'\"\n              (ngModelChange)=\"onConfigFieldChange('timezone', $event)\"\n              label=\"Timezone\"\n              hint=\"Timezone used to calculate the next fire time.\"\n              [options]=\"timeZoneOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-text-field\n              class=\"font-mono\"\n              [ngModel]=\"config()['cron'] ?? ''\"\n              (ngModelChange)=\"onConfigFieldChange('cron', $event)\"\n              label=\"Cron\"\n              hint=\"Cron expression used only when mode is cron, for example 0 9 * * *.\"\n            />\n            <mt-number-field\n              [ngModel]=\"numberValue(config()['intervalSeconds'])\"\n              (ngModelChange)=\"onConfigFieldChange('intervalSeconds', $event)\"\n              label=\"Interval seconds\"\n              hint=\"Repeat interval in seconds used only when mode is interval.\"\n              [min]=\"0\"\n            />\n            <mt-date-field\n              [ngModel]=\"config()['startDate'] ?? ''\"\n              (ngModelChange)=\"onConfigFieldChange('startDate', $event)\"\n              label=\"Start date UTC\"\n              hint=\"UTC date/time used for once schedules or as the first allowed run time.\"\n              [showTime]=\"true\"\n              [showClear]=\"true\"\n              [pInputs]=\"dateTimePickerInputs\"\n            />\n            <mt-select-field\n              [ngModel]=\"config()['misfirePolicy'] ?? 'SkipMissed'\"\n              (ngModelChange)=\"onConfigFieldChange('misfirePolicy', $event)\"\n              label=\"Misfire policy\"\n              hint=\"Backend behavior when a scheduled run is missed while the automation is unavailable.\"\n              [options]=\"misfirePolicyOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n          </div>\n          <div class=\"mt-3 flex gap-2\">\n            <mt-button size=\"small\" variant=\"outlined\" label=\"Validate\" (onClick)=\"validateSchedule()\" />\n            <mt-button size=\"small\" severity=\"primary\" label=\"Preview next fire\" (onClick)=\"previewSchedule()\" />\n          </div>\n          @if (schedulePreview(); as preview) {\n            <div class=\"mt-3 rounded-lg bg-(--p-surface-100) px-3 py-2 text-[12px]\">\n              <strong class=\"text-emerald-600\">Valid</strong>\n              <span class=\"ms-2\">Next fire: {{ preview.nextFireAtUtc ?? \"-\" }}</span>\n            </div>\n          }\n        </section>\n        }\n      }\n      @case (\"SetFields\") {\n        @if (sectionInMain(\"setFields\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Set fields</div>\n          <ng-container *ngTemplateOutlet=\"mapEditor; context: { objectKey: 'fields', rows: fieldsRows(), keyLabel: 'Field', valueLabel: 'Value', addLabel: 'Add field' }\" />\n        </section>\n        }\n      }\n      @case (\"If\") {\n        @if (sectionInMain(\"condition\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Condition</div>\n          <div class=\"grid gap-3 md:grid-cols-[1fr_180px_1fr]\">\n            <mt-text-field\n              [ngModel]=\"fieldText('left')\"\n              (focusin)=\"setExpressionTarget('config:left')\"\n              (ngModelChange)=\"onConfigFieldChange('left', $event)\"\n              label=\"Left\"\n              hint=\"Left-side value or expression to compare.\"\n            />\n            <mt-select-field\n              [ngModel]=\"config()['operator'] ?? 'equals'\"\n              (ngModelChange)=\"onConfigFieldChange('operator', $event)\"\n              label=\"Operator\"\n              hint=\"Comparison operator used by the backend condition evaluator.\"\n              [options]=\"ifOperatorOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-text-field\n              [ngModel]=\"fieldText('right')\"\n              (focusin)=\"setExpressionTarget('config:right')\"\n              (ngModelChange)=\"onConfigFieldChange('right', $event)\"\n              label=\"Right\"\n              hint=\"Right-side value or expression to compare against.\"\n            />\n          </div>\n          <div class=\"mt-3 rounded-md border border-surface-200 bg-surface-0 p-3\">\n            <div class=\"fp-ae-label mb-2\">Route outputs</div>\n            <div class=\"flex flex-wrap gap-1.5\">\n              @for (key of routeOutputKeys(); track key) {\n                <span class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\">{{ key }}</span>\n              }\n            </div>\n          </div>\n        </section>\n        }\n      }\n      @case (\"HTTP\") {\n        @if (sectionInMain(\"httpRequest\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">HTTP request</div>\n          <div class=\"grid gap-3 md:grid-cols-[150px_1fr]\">\n            <mt-select-field\n              [ngModel]=\"config()['method'] ?? 'GET'\"\n              (ngModelChange)=\"onConfigFieldChange('method', $event)\"\n              label=\"Method\"\n              hint=\"HTTP method used for the outbound request.\"\n              [options]=\"httpMethodOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-text-field\n              class=\"font-mono\"\n              [ngModel]=\"config()['url'] ?? ''\"\n              (focusin)=\"setExpressionTarget('config:url')\"\n              (ngModelChange)=\"onConfigFieldChange('url', $event)\"\n              label=\"URL\"\n              hint=\"Target URL. Expressions are supported for dynamic hosts, paths, and query values.\"\n            />\n          </div>\n          <div class=\"mt-3\">\n            <ng-container *ngTemplateOutlet=\"mapEditor; context: { objectKey: 'headers', rows: headerRows(), keyLabel: 'Header', valueLabel: 'Value', addLabel: 'Add header' }\" />\n          </div>\n          <div class=\"mt-3\">\n            <ng-container *ngTemplateOutlet=\"mapEditor; context: { objectKey: 'query', rows: queryRows(), keyLabel: 'Query param', valueLabel: 'Value', addLabel: 'Add query param' }\" />\n          </div>\n          @if (supportsConfigKey('bodyMode')) {\n            <mt-select-field\n              class=\"mt-3\"\n              [ngModel]=\"config()['bodyMode'] ?? 'json'\"\n              (ngModelChange)=\"onConfigFieldChange('bodyMode', $event)\"\n              label=\"Body mode\"\n              hint=\"Backend-supported request body serialization mode.\"\n              [options]=\"httpBodyModeOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n          }\n          <mt-textarea-field\n            class=\"mt-3 w-full font-mono\"\n            [ngModel]=\"valueText(config()['body'] ?? '')\"\n            (focusin)=\"setExpressionTarget('config:body')\"\n            (ngModelChange)=\"onConfigFieldChange('body', $event)\"\n            label=\"Body\"\n            hint=\"Request body sent by the HTTP node. Use JSON or expressions when the backend schema allows it.\"\n            rows=\"6\"\n          />\n          @if (supportsConfigKey('timeoutSeconds') || supportsConfigKey('responseHandling')) {\n            <div class=\"mt-3 grid gap-3 md:grid-cols-2\">\n              @if (supportsConfigKey('timeoutSeconds')) {\n                <mt-number-field\n                  [ngModel]=\"numberValue(config()['timeoutSeconds'])\"\n                  (ngModelChange)=\"onConfigFieldChange('timeoutSeconds', $event)\"\n                  label=\"Timeout seconds\"\n                  hint=\"Request timeout when exposed by the backend schema.\"\n                  [min]=\"0\"\n                />\n              }\n              @if (supportsConfigKey('responseHandling')) {\n                <mt-text-field\n                  [ngModel]=\"config()['responseHandling'] ?? ''\"\n                  (ngModelChange)=\"onConfigFieldChange('responseHandling', $event)\"\n                  label=\"Response handling\"\n                  hint=\"Backend-supported response handling mode or expression.\"\n                />\n              }\n            </div>\n          }\n          @if (sectionInMain(\"credentials\")) {\n            <div class=\"mt-3 rounded-md border border-surface-200 bg-surface-0 p-3\">\n              <div class=\"fp-ae-label mb-2\">Credential</div>\n              <ng-container *ngTemplateOutlet=\"credentialSelector\" />\n            </div>\n          }\n        </section>\n        }\n      }\n      @case (\"Wait\") {\n        @if (sectionInMain(\"wait\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Wait</div>\n          <div class=\"grid gap-3 md:grid-cols-3\">\n            <mt-select-field\n              [ngModel]=\"config()['mode'] ?? 'duration'\"\n              (ngModelChange)=\"onConfigFieldChange('mode', $event)\"\n              label=\"Mode\"\n              hint=\"Choose whether this wait uses a duration or a specific date/time.\"\n              [options]=\"waitModeOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-number-field\n              [ngModel]=\"numberValue(config()['durationSeconds'])\"\n              (ngModelChange)=\"onConfigFieldChange('durationSeconds', $event)\"\n              label=\"Duration seconds\"\n              hint=\"How long execution should wait when mode is duration.\"\n              [min]=\"0\"\n            />\n            <mt-date-field\n              [ngModel]=\"config()['waitUntil'] ?? ''\"\n              (ngModelChange)=\"onConfigFieldChange('waitUntil', $event)\"\n              label=\"Wait until\"\n              hint=\"Date/time that resolves to when execution should resume.\"\n              [showTime]=\"true\"\n              [showClear]=\"true\"\n              [pInputs]=\"dateTimePickerInputs\"\n            />\n          </div>\n          @if (supportsConfigKey('resumePayloadSchema') || supportsConfigKey('resumePayload')) {\n            <mt-textarea-field\n              class=\"mt-3 w-full font-mono\"\n              [ngModel]=\"valueText(config()['resumePayloadSchema'] ?? config()['resumePayload'] ?? '')\"\n              (focusin)=\"setExpressionTarget('config:resumePayload')\"\n              (ngModelChange)=\"onConfigFieldChange('resumePayload', $event)\"\n              label=\"Resume payload\"\n              hint=\"Expected payload when the backend supports manual or external resume data.\"\n              rows=\"5\"\n            />\n          }\n        </section>\n        }\n      }\n      @case (\"HumanApproval\") {\n        @if (sectionInMain(\"approvalTask\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Approval task</div>\n          @if (assignmentOptions()?.providerStatus && assignmentOptions()?.providerStatus !== \"Available\") {\n            <p class=\"fp-ae-copy\">\n              Assignment provider status: {{ assignmentOptions()?.providerStatus }}.\n              The backend provider is the source of truth for available assignees.\n            </p>\n          }\n          <div class=\"grid gap-3 xl:grid-cols-3\">\n            <mt-text-field\n              [ngModel]=\"config()['title'] ?? ''\"\n              (focusin)=\"setExpressionTarget('config:title')\"\n              (ngModelChange)=\"onConfigFieldChange('title', $event)\"\n              label=\"Approval title\"\n              hint=\"Approval title shown to the assigned human approver.\"\n            />\n            <mt-select-field\n              [ngModel]=\"selectedAssignmentKey()\"\n              (ngModelChange)=\"onAssignmentOptionChange($event)\"\n              label=\"Assignment\"\n              hint=\"Backend-provided assignee, role, or group that can decide this approval.\"\n              [options]=\"assignmentSelectOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            @if (humanApprovalSupportsConfig('priority')) {\n              <mt-text-field\n                [ngModel]=\"config()['priority'] ?? ''\"\n                (ngModelChange)=\"onConfigFieldChange('priority', $event)\"\n                label=\"Priority\"\n                hint=\"Approval priority when supported by the backend schema.\"\n              />\n            }\n          </div>\n          <mt-textarea-field\n            class=\"mt-3 w-full\"\n            [ngModel]=\"config()['message'] ?? config()['instructions'] ?? ''\"\n            (focusin)=\"setExpressionTarget('config:message')\"\n            (ngModelChange)=\"onConfigFieldChange('message', $event)\"\n            label=\"Approval message\"\n            hint=\"Decision instructions shown to the approver.\"\n            rows=\"4\"\n          />\n          @if (humanApprovalSupportsConfig('dueDate') || humanApprovalSupportsConfig('dueInSeconds') || humanApprovalSupportsConfig('timeoutSeconds') || humanApprovalSupportsConfig('expiresAt') || humanApprovalSupportsConfig('commentsRequired') || humanApprovalSupportsConfig('allowReturn')) {\n            <div class=\"mt-3 grid gap-3 xl:grid-cols-4\">\n              @if (humanApprovalSupportsConfig('dueDate')) {\n                <mt-date-field\n                  [ngModel]=\"config()['dueDate'] ?? ''\"\n                  (ngModelChange)=\"onConfigFieldChange('dueDate', $event)\"\n                  label=\"Due date\"\n                  hint=\"Backend-supported approval due date.\"\n                  [showTime]=\"true\"\n                  [showClear]=\"true\"\n                  [pInputs]=\"dateTimePickerInputs\"\n                />\n              }\n              @if (humanApprovalSupportsConfig('dueInSeconds')) {\n                <mt-number-field\n                  [ngModel]=\"numberValue(config()['dueInSeconds'])\"\n                  (ngModelChange)=\"onConfigFieldChange('dueInSeconds', $event)\"\n                  label=\"Due in seconds\"\n                  hint=\"Relative approval due duration when supported by the backend schema.\"\n                  [min]=\"0\"\n                />\n              }\n              @if (humanApprovalSupportsConfig('timeoutSeconds')) {\n                <mt-number-field\n                  [ngModel]=\"numberValue(config()['timeoutSeconds'])\"\n                  (ngModelChange)=\"onConfigFieldChange('timeoutSeconds', $event)\"\n                  label=\"Timeout seconds\"\n                  hint=\"Approval timeout emitted according to backend approval runtime support.\"\n                  [min]=\"0\"\n                />\n              }\n              @if (humanApprovalSupportsConfig('expiresAt')) {\n                <mt-date-field\n                  [ngModel]=\"config()['expiresAt'] ?? ''\"\n                  (ngModelChange)=\"onConfigFieldChange('expiresAt', $event)\"\n                  label=\"Expires at\"\n                  hint=\"Backend-supported approval expiry timestamp.\"\n                  [showTime]=\"true\"\n                  [showClear]=\"true\"\n                  [pInputs]=\"dateTimePickerInputs\"\n                />\n              }\n              @if (humanApprovalSupportsConfig('commentsRequired')) {\n                <div class=\"flex min-h-[4.25rem] items-end rounded-md border border-surface-200 bg-surface-0 px-3 py-2\">\n                  <mt-toggle-field\n                    size=\"small\"\n                    label=\"Comments required\"\n                    labelPosition=\"end\"\n                    [ngModel]=\"config()['commentsRequired'] === true\"\n                    (ngModelChange)=\"onConfigFieldChange('commentsRequired', $event === true)\"\n                    hint=\"Require approver comments when the backend supports this flag.\"\n                  />\n                </div>\n              }\n              @if (humanApprovalSupportsConfig('allowReturn')) {\n                <div class=\"flex min-h-[4.25rem] items-end rounded-md border border-surface-200 bg-surface-0 px-3 py-2\">\n                  <mt-toggle-field\n                    size=\"small\"\n                    label=\"Allow return for changes\"\n                    labelPosition=\"end\"\n                    [ngModel]=\"config()['allowReturn'] !== false\"\n                    (ngModelChange)=\"onConfigFieldChange('allowReturn', $event === true)\"\n                    hint=\"Allow ReturnForChanges when the backend schema exposes this option.\"\n                  />\n                </div>\n              }\n            </div>\n          }\n          <div class=\"mt-3 space-y-3\">\n            <div class=\"fp-ae-section-title\">Decision options</div>\n            <div class=\"overflow-hidden rounded-md border border-surface-200 bg-surface-0\">\n              @if (selectedApprovalDecisionRows().length > 0) {\n                <div class=\"hidden border-b border-surface-200 bg-surface-50 px-3 py-2 text-[12px] font-semibold text-(--p-text-muted-color) xl:grid xl:grid-cols-[1.1fr_1fr_1.2fr_80px_44px] xl:gap-3\">\n                  <span>Decision label</span>\n                  <span>Canonical value</span>\n                  <span>Route output key</span>\n                  <span>Routes</span>\n                  <span>Action</span>\n                </div>\n                @for (decision of selectedApprovalDecisionRows(); track decision.value) {\n                  <div class=\"grid gap-2 border-b border-surface-100 px-3 py-3 last:border-b-0 xl:grid-cols-[1.1fr_1fr_1.2fr_80px_44px] xl:items-center xl:gap-3\">\n                    <div class=\"min-w-0\">\n                      <div class=\"text-[11px] font-semibold text-(--p-text-muted-color) xl:hidden\">Decision label</div>\n                      <div class=\"truncate text-[13px] font-semibold text-(--p-text-color)\">{{ decision.label }}</div>\n                    </div>\n                    <div class=\"min-w-0\">\n                      <div class=\"text-[11px] font-semibold text-(--p-text-muted-color) xl:hidden\">Canonical value</div>\n                      <div class=\"truncate font-mono text-[12px] text-(--p-text-color)\">{{ decision.value }}</div>\n                    </div>\n                    <div class=\"min-w-0\">\n                      <div class=\"text-[11px] font-semibold text-(--p-text-muted-color) xl:hidden\">Route output key</div>\n                      <div class=\"truncate font-mono text-[12px] text-(--p-text-muted-color)\">{{ decision.routeOutputKey }}</div>\n                    </div>\n                    <div>\n                      <div class=\"text-[11px] font-semibold text-(--p-text-muted-color) xl:hidden\">Routes</div>\n                      <div class=\"text-[13px] text-(--p-text-color)\">{{ decision.routeCount }}</div>\n                    </div>\n                    <mt-button\n                      class=\"justify-self-start xl:justify-self-end\"\n                      size=\"small\"\n                      variant=\"outlined\"\n                      severity=\"danger\"\n                      icon=\"general.trash-01\"\n                      tooltip=\"Remove decision option\"\n                      (onClick)=\"removeApprovalDecision(decision.value)\"\n                    />\n                  </div>\n                }\n              } @else {\n                <div class=\"px-3 py-4 text-[12px] text-(--p-text-muted-color)\">\n                  Add at least one backend-supported approval decision.\n                </div>\n              }\n            </div>\n            @if (approvalDecisionIssues().length > 0) {\n              <div class=\"rounded-lg border border-[rgb(var(--fp-error))]/30 bg-[rgb(var(--fp-error))]/10 px-3 py-2 text-[12px] leading-5 text-[rgb(var(--fp-error))]\">\n                @for (issue of approvalDecisionIssues(); track issue) {\n                  <div>{{ issue }}</div>\n                }\n              </div>\n            }\n            <div class=\"grid gap-2 md:grid-cols-[minmax(0,1fr)_auto]\">\n              <mt-select-field\n                [ngModel]=\"approvalDecisionToAdd()\"\n                (ngModelChange)=\"approvalDecisionToAdd.set($event)\"\n                label=\"Decision to add\"\n                hint=\"Only backend-supported decisions with matching route outputs are available.\"\n                [options]=\"addableApprovalDecisionOptions()\"\n                optionValue=\"value\"\n                optionLabel=\"label\"\n              />\n              <mt-button\n                class=\"self-end\"\n                size=\"small\"\n                variant=\"outlined\"\n                icon=\"general.plus\"\n                label=\"Add decision option\"\n                [disabled]=\"!approvalDecisionToAdd()\"\n                (onClick)=\"addApprovalDecision()\"\n              />\n            </div>\n          </div>\n          @if (humanApprovalSupportsConfig('payload') || humanApprovalSupportsConfig('context') || humanApprovalSupportsConfig('metadata')) {\n            <div class=\"mt-3 grid gap-3\">\n              @if (humanApprovalSupportsConfig('payload')) {\n                <mt-textarea-field\n                  class=\"w-full font-mono\"\n                  [ngModel]=\"valueText(config()['payload'] ?? '')\"\n                  (focusin)=\"setExpressionTarget('config:payload')\"\n                  (ngModelChange)=\"onConfigFieldChange('payload', $event)\"\n                  label=\"Payload\"\n                  hint=\"Approval task payload or context fields supported by backend schema.\"\n                  rows=\"5\"\n                />\n              }\n              @if (humanApprovalSupportsConfig('context')) {\n                <mt-textarea-field\n                  class=\"w-full font-mono\"\n                  [ngModel]=\"valueText(config()['context'] ?? '')\"\n                  (focusin)=\"setExpressionTarget('config:context')\"\n                  (ngModelChange)=\"onConfigFieldChange('context', $event)\"\n                  label=\"Context\"\n                  hint=\"Additional approval context supported by backend schema.\"\n                  rows=\"5\"\n                />\n              }\n              @if (humanApprovalSupportsConfig('metadata')) {\n                <mt-textarea-field\n                  class=\"w-full font-mono\"\n                  [ngModel]=\"valueText(config()['metadata'] ?? '')\"\n                  (focusin)=\"setExpressionTarget('config:metadata')\"\n                  (ngModelChange)=\"onConfigFieldChange('metadata', $event)\"\n                  label=\"Metadata\"\n                  hint=\"Additional approval metadata supported by the backend schema.\"\n                  rows=\"4\"\n                />\n              }\n            </div>\n          }\n          <div class=\"mt-3 flex gap-2\">\n            <mt-button size=\"small\" variant=\"outlined\" label=\"Validate assignment\" (onClick)=\"validateAssignment()\" />\n          </div>\n          @if (assignmentValidation(); as result) {\n            <div class=\"mt-3 rounded-lg bg-(--p-surface-100) px-3 py-2 text-[12px]\">\n              {{ result.isValid === false ? \"Assignment invalid\" : \"Assignment accepted by helper\" }}\n              @for (issue of resultIssues(result); track issue) {\n                <div class=\"mt-1 text-[11px] text-(--p-text-muted-color)\">{{ issue }}</div>\n              }\n            </div>\n          }\n          @if (sectionInMain(\"approvalOutput\")) {\n            <div class=\"mt-3 rounded-md border border-surface-200 bg-surface-0 p-3\">\n              <div class=\"fp-ae-label mb-2\">Output data</div>\n              <div class=\"flex flex-wrap gap-1.5\">\n                @for (field of approvalOutputFieldLabels; track field) {\n                  <span class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\">{{ field }}</span>\n                }\n              </div>\n              <div class=\"mt-3 fp-ae-label mb-2\">Approval routes</div>\n              <div class=\"flex flex-wrap gap-1.5\">\n                @for (key of routeOutputKeys(); track key) {\n                  <span class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\">{{ key }}</span>\n                }\n              </div>\n            </div>\n          }\n        </section>\n        }\n      }\n      @case (\"FlowPlusCommit\") {\n        @if (sectionInMain(\"flowplusCommit\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">FlowPlus commit</div>\n          <p class=\"fp-ae-copy\">\n            This node is the explicit module-data write boundary. Approval does\n            not commit data unless this node is reached.\n          </p>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-select-field\n              [ngModel]=\"config()['targetModule'] ?? ''\"\n              (ngModelChange)=\"onModuleChange($event)\"\n              label=\"Module\"\n              hint=\"Module whose records will be written by this explicit FlowPlus commit.\"\n              [options]=\"moduleOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-select-field\n              [ngModel]=\"config()['operation'] ?? ''\"\n              (ngModelChange)=\"onConfigFieldChange('operation', $event)\"\n              label=\"Operation\"\n              hint=\"Write operation supported by the selected backend module schema.\"\n              [options]=\"operationOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n          </div>\n          <mt-text-field\n            class=\"mt-3 font-mono\"\n            [ngModel]=\"config()['idempotencyKey'] ?? ''\"\n            (focusin)=\"setExpressionTarget('config:idempotencyKey')\"\n            (ngModelChange)=\"onConfigFieldChange('idempotencyKey', $event)\"\n            label=\"Idempotency key\"\n            hint=\"Optional stable key used by the backend to prevent duplicate writes.\"\n          />\n          @if (selectedModuleFields().length) {\n            <div class=\"mt-3 space-y-2\">\n              <div class=\"fp-ae-section-title\">Module schema</div>\n              <div class=\"grid gap-2 md:grid-cols-2\">\n                @for (field of selectedModuleFields(); track field.key) {\n                  <div class=\"fp-ae-kv\">\n                    <span>{{ field.displayName ?? field.key }}</span>\n                    <strong>{{ field.viewType ?? \"Value\" }} @if (field.required) { * }</strong>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n          <div class=\"mt-3\">\n            <ng-container *ngTemplateOutlet=\"mapEditor; context: { objectKey: 'mapping', rows: mappingRows(), keyLabel: 'Module field', valueLabel: 'Expression / value', addLabel: 'Add module field' }\" />\n          </div>\n          <div class=\"mt-3 flex gap-2\">\n            <mt-button size=\"small\" severity=\"primary\" label=\"Validate mapping\" (onClick)=\"validateCommitMapping()\" />\n          </div>\n          @if (commitValidation(); as result) {\n            <div class=\"mt-3 rounded-lg bg-(--p-surface-100) px-3 py-2 text-[12px]\">\n              {{ result.isValid === false ? \"Mapping invalid\" : \"Mapping accepted by helper\" }}\n              @for (issue of resultIssues(result); track issue) {\n                <div class=\"mt-1 text-[11px] text-(--p-text-muted-color)\">{{ issue }}</div>\n              }\n            </div>\n          }\n          @if (sectionInMain(\"credentials\")) {\n            <div class=\"mt-3 rounded-md border border-surface-200 bg-surface-0 p-3\">\n              <div class=\"fp-ae-label mb-2\">Credential</div>\n              <ng-container *ngTemplateOutlet=\"credentialSelector\" />\n            </div>\n          }\n        </section>\n        }\n      }\n      @case (\"WebhookResponse\") {\n        @if (sectionInMain(\"webhookResponse\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Webhook response</div>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-number-field\n              [ngModel]=\"numberValue(config()['statusCode']) ?? 200\"\n              (ngModelChange)=\"onConfigFieldChange('statusCode', $event)\"\n              label=\"Status code\"\n              hint=\"HTTP status code sent back by the webhook response node.\"\n              [min]=\"100\"\n              [max]=\"599\"\n            />\n            <mt-select-field\n              [ngModel]=\"config()['responseMode'] ?? 'json'\"\n              (ngModelChange)=\"onConfigFieldChange('responseMode', $event)\"\n              label=\"Response mode\"\n              hint=\"How the webhook response body should be serialized.\"\n              [options]=\"responseModeOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n          </div>\n          <div class=\"mt-3\">\n            <ng-container *ngTemplateOutlet=\"mapEditor; context: { objectKey: 'headers', rows: headerRows(), keyLabel: 'Header', valueLabel: 'Value', addLabel: 'Add header' }\" />\n          </div>\n          <mt-textarea-field\n            class=\"mt-3 w-full font-mono\"\n            [ngModel]=\"valueText(config()['body'] ?? '')\"\n            (focusin)=\"setExpressionTarget('config:body')\"\n            (ngModelChange)=\"onConfigFieldChange('body', $event)\"\n            label=\"Body\"\n            hint=\"Body returned to the webhook caller. Expressions can use current execution data.\"\n            rows=\"6\"\n          />\n        </section>\n        }\n      }\n      @case (\"CallAutomation\") {\n        @if (sectionInMain(\"callAutomation\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Subworkflow</div>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-select-field\n              [ngModel]=\"config()['targetAutomationId'] ?? ''\"\n              (ngModelChange)=\"onSubworkflowTargetChange($event)\"\n              label=\"Target automation\"\n              hint=\"Backend-provided automation candidate. Tenant and recursion validation stay on the backend.\"\n              [options]=\"subworkflowAutomationOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-select-field\n              [ngModel]=\"config()['revisionMode'] ?? 'Active'\"\n              (ngModelChange)=\"onConfigFieldChange('revisionMode', $event)\"\n              label=\"Revision mode\"\n              hint=\"Choose which published or active child revision to call.\"\n              [options]=\"revisionModeOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            @if (config()['revisionMode'] === \"SpecificRevision\") {\n              <mt-text-field\n                [ngModel]=\"config()['specificRevisionId'] ?? ''\"\n                (ngModelChange)=\"onConfigFieldChange('specificRevisionId', $event)\"\n                label=\"Specific revision id\"\n                hint=\"Required only when revision mode is Specific revision.\"\n              />\n            }\n            <mt-toggle-field\n              size=\"small\"\n              labelPosition=\"end\"\n              [ngModel]=\"config()['waitForCompletion'] !== false\"\n              (ngModelChange)=\"onConfigFieldChange('waitForCompletion', $event === true)\"\n              label=\"Wait for completion\"\n              hint=\"When disabled, the parent continues after dispatch and backend records the child linkage.\"\n            />\n          </div>\n          <div class=\"mt-3 grid gap-3 md:grid-cols-2\">\n            <mt-textarea-field\n              class=\"w-full font-mono md:col-span-2\"\n              [ngModel]=\"valueText(config()['inputMappingJson'] ?? '{}')\"\n              (focusin)=\"setExpressionTarget('config:inputMappingJson')\"\n              (ngModelChange)=\"onConfigFieldChange('inputMappingJson', $event)\"\n              label=\"Input mapping JSON\"\n              hint=\"JSON object or expression map sent into the child automation input.\"\n              rows=\"7\"\n            />\n            <mt-textarea-field\n              class=\"w-full font-mono md:col-span-2\"\n              [ngModel]=\"valueText(config()['outputMappingJson'] ?? '{}')\"\n              (focusin)=\"setExpressionTarget('config:outputMappingJson')\"\n              (ngModelChange)=\"onConfigFieldChange('outputMappingJson', $event)\"\n              label=\"Output mapping JSON\"\n              hint=\"JSON object or expression map for child output/status returned to the parent.\"\n              rows=\"7\"\n            />\n          </div>\n        </section>\n        }\n      }\n      @case (\"Subworkflow\") {\n        @if (sectionInMain(\"callAutomation\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Subworkflow</div>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-select-field\n              [ngModel]=\"config()['targetAutomationId'] ?? ''\"\n              (ngModelChange)=\"onSubworkflowTargetChange($event)\"\n              label=\"Target automation\"\n              hint=\"Backend-provided automation candidate. Tenant and recursion validation stay on the backend.\"\n              [options]=\"subworkflowAutomationOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-select-field\n              [ngModel]=\"config()['revisionMode'] ?? 'Active'\"\n              (ngModelChange)=\"onConfigFieldChange('revisionMode', $event)\"\n              label=\"Revision mode\"\n              hint=\"Choose which published or active child revision to call.\"\n              [options]=\"revisionModeOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            @if (config()['revisionMode'] === \"SpecificRevision\") {\n              <mt-text-field\n                [ngModel]=\"config()['specificRevisionId'] ?? ''\"\n                (ngModelChange)=\"onConfigFieldChange('specificRevisionId', $event)\"\n                label=\"Specific revision id\"\n                hint=\"Required only when revision mode is Specific revision.\"\n              />\n            }\n            <mt-toggle-field\n              size=\"small\"\n              labelPosition=\"end\"\n              [ngModel]=\"config()['waitForCompletion'] !== false\"\n              (ngModelChange)=\"onConfigFieldChange('waitForCompletion', $event === true)\"\n              label=\"Wait for completion\"\n              hint=\"When disabled, the parent continues after dispatch and backend records the child linkage.\"\n            />\n          </div>\n          <div class=\"mt-3 grid gap-3 md:grid-cols-2\">\n            <mt-textarea-field\n              class=\"w-full font-mono md:col-span-2\"\n              [ngModel]=\"valueText(config()['inputMappingJson'] ?? '{}')\"\n              (focusin)=\"setExpressionTarget('config:inputMappingJson')\"\n              (ngModelChange)=\"onConfigFieldChange('inputMappingJson', $event)\"\n              label=\"Input mapping JSON\"\n              hint=\"JSON object or expression map sent into the child automation input.\"\n              rows=\"7\"\n            />\n            <mt-textarea-field\n              class=\"w-full font-mono md:col-span-2\"\n              [ngModel]=\"valueText(config()['outputMappingJson'] ?? '{}')\"\n              (focusin)=\"setExpressionTarget('config:outputMappingJson')\"\n              (ngModelChange)=\"onConfigFieldChange('outputMappingJson', $event)\"\n              label=\"Output mapping JSON\"\n              hint=\"JSON object or expression map for child output/status returned to the parent.\"\n              rows=\"7\"\n            />\n          </div>\n        </section>\n        }\n      }\n      @case (\"ParallelStart\") {\n        @if (sectionInMain(\"parallelStart\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"flex items-center justify-between gap-3 border-b border-surface-200 bg-surface-50 px-4 py-3\">\n            <div class=\"fp-ae-section-title !m-0\">Parallel start</div>\n            <mt-button size=\"small\" variant=\"outlined\" icon=\"general.plus\" label=\"Add branch\" (onClick)=\"addParallelBranch()\" />\n          </div>\n          <div class=\"space-y-3 p-4\">\n            @for (branch of parallelBranches(); track branch.key; let i = $index) {\n              <div class=\"rounded-md border border-surface-200 bg-surface-0 p-3\">\n                <div class=\"grid gap-3 md:grid-cols-[160px_1fr_1fr_auto]\">\n                  <mt-text-field\n                    class=\"font-mono\"\n                    [ngModel]=\"branch.key\"\n                    (ngModelChange)=\"updateParallelBranch(i, 'key', $event)\"\n                    label=\"Branch key\"\n                    hint=\"Persisted route key. Do not use array index names.\"\n                  />\n                  <mt-text-field\n                    [ngModel]=\"branch.label\"\n                    (ngModelChange)=\"updateParallelBranch(i, 'label', $event)\"\n                    label=\"Label\"\n                    hint=\"Visual branch label. Changing it does not change existing routes.\"\n                  />\n                  <mt-text-field\n                    [ngModel]=\"branch.description\"\n                    (ngModelChange)=\"updateParallelBranch(i, 'description', $event)\"\n                    label=\"Description\"\n                    hint=\"Optional branch note for reviewers.\"\n                  />\n                  <div class=\"flex items-end gap-1\">\n                    <mt-button size=\"small\" variant=\"outlined\" icon=\"arrow.arrow-up\" tooltip=\"Move up\" (onClick)=\"moveParallelBranch(i, -1)\" />\n                    <mt-button size=\"small\" variant=\"outlined\" icon=\"arrow.arrow-down\" tooltip=\"Move down\" (onClick)=\"moveParallelBranch(i, 1)\" />\n                    <mt-button size=\"small\" variant=\"outlined\" severity=\"danger\" icon=\"general.trash-01\" tooltip=\"Remove branch\" (onClick)=\"removeParallelBranch(i)\" />\n                  </div>\n                </div>\n                <div class=\"mt-3 flex flex-wrap items-center gap-1.5 text-[11px]\">\n                  <span class=\"inline-flex h-7 items-center rounded-md border border-surface-200 bg-surface-50 px-2 font-mono font-semibold text-(--p-text-color)\">{{ branch.key }}</span>\n                  <span class=\"inline-flex h-7 items-center rounded-md border border-surface-200 bg-surface-0 px-2 font-medium text-(--p-text-muted-color)\">{{ branch.routeCount }} connected route{{ branch.routeCount === 1 ? \"\" : \"s\" }}</span>\n                </div>\n              </div>\n            }\n            @if (parallelBranches().length === 0) {\n              <p class=\"fp-ae-copy\">Add at least two stable branch keys. Backend validation blocks publish until branches are valid.</p>\n            }\n          </div>\n        </section>\n        }\n      }\n      @case (\"ParallelJoin\") {\n        @if (sectionInMain(\"parallelJoin\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Parallel join</div>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-select-field\n              [ngModel]=\"config()['joinPolicy'] ?? 'All'\"\n              (ngModelChange)=\"onConfigFieldChange('joinPolicy', $event)\"\n              label=\"Join policy\"\n              hint=\"Backend policy used to decide when branch wait is complete.\"\n              [options]=\"joinPolicyOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            @if (config()['joinPolicy'] === \"Threshold\") {\n              <mt-number-field\n                [ngModel]=\"numberValue(config()['threshold'])\"\n                (ngModelChange)=\"onConfigFieldChange('threshold', $event)\"\n                label=\"Threshold\"\n                hint=\"Minimum completed branch count required for Threshold policy.\"\n                [min]=\"1\"\n              />\n            }\n            <mt-select-field\n              [ngModel]=\"config()['aggregationStrategy'] ?? 'MergeObjects'\"\n              (ngModelChange)=\"onConfigFieldChange('aggregationStrategy', $event)\"\n              label=\"Aggregation strategy\"\n              hint=\"How backend joins branch outputs into the join node output.\"\n              [options]=\"aggregationStrategyOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-text-field\n              class=\"font-mono\"\n              [ngModel]=\"config()['outputTargetPath'] ?? ''\"\n              (focusin)=\"setExpressionTarget('config:outputTargetPath')\"\n              (ngModelChange)=\"onConfigFieldChange('outputTargetPath', $event)\"\n              label=\"Output target path\"\n              hint=\"Optional context path where joined output should be written.\"\n            />\n          </div>\n        </section>\n        }\n      }\n      @case (\"Switch\") {\n        @if (sectionInMain(\"switch\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Switch</div>\n          <div class=\"grid gap-4\">\n            <div class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_minmax(280px,0.7fr)]\">\n              <mt-select-field\n                [ngModel]=\"config()['mode'] ?? 'value'\"\n                (ngModelChange)=\"onConfigFieldChange('mode', $event)\"\n                label=\"Mode\"\n                hint=\"Backend evaluation mode: expression, rules, or source-value matching.\"\n                [options]=\"switchModeOptions\"\n                optionValue=\"value\"\n                optionLabel=\"label\"\n              />\n              <mt-toggle-field\n                class=\"self-end pb-1\"\n                size=\"small\"\n                labelPosition=\"end\"\n                [ngModel]=\"config()['firstMatch'] !== false\"\n                (ngModelChange)=\"onConfigFieldChange('firstMatch', $event === true)\"\n                label=\"First match\"\n                hint=\"Use the first matching case unless backend explicitly supports multi-match.\"\n              />\n            </div>\n            @if (showSwitchSourceValue() || showSwitchExpression()) {\n              <div class=\"grid gap-3 md:grid-cols-2\">\n                @if (showSwitchSourceValue()) {\n                  <mt-text-field\n                    [class]=\"showSwitchExpression() ? 'font-mono' : 'font-mono md:col-span-2'\"\n                    [ngModel]=\"config()['sourceValue'] ?? ''\"\n                    (focusin)=\"setExpressionTarget('config:sourceValue')\"\n                    (ngModelChange)=\"onConfigFieldChange('sourceValue', $event)\"\n                    label=\"Source value\"\n                    hint=\"Value or expression used for value matching.\"\n                  />\n                }\n                @if (showSwitchExpression()) {\n                  <mt-text-field\n                    [class]=\"showSwitchSourceValue() ? 'font-mono' : 'font-mono md:col-span-2'\"\n                    [ngModel]=\"config()['expression'] ?? ''\"\n                    (focusin)=\"setExpressionTarget('config:expression')\"\n                    (ngModelChange)=\"onConfigFieldChange('expression', $event)\"\n                    label=\"Expression\"\n                    hint=\"Expression evaluated when mode is expression or rules.\"\n                  />\n                }\n              </div>\n            }\n            <div class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_minmax(280px,0.7fr)]\">\n              @if (showSwitchDefaultOutputKey()) {\n                <mt-text-field\n                  class=\"font-mono\"\n                  [ngModel]=\"config()['defaultOutputKey'] ?? 'default'\"\n                  (ngModelChange)=\"onConfigFieldChange('defaultOutputKey', $event)\"\n                  label=\"Default output key\"\n                  hint=\"Stable default route key used when no case matches.\"\n                />\n              }\n              <mt-toggle-field\n                [class]=\"showSwitchDefaultOutputKey() ? 'self-end pb-1' : 'self-end pb-1 md:col-span-2'\"\n                size=\"small\"\n                labelPosition=\"end\"\n                [ngModel]=\"config()['includeDefaultOutput'] !== false\"\n                (ngModelChange)=\"onConfigFieldChange('includeDefaultOutput', $event === true)\"\n                label=\"Include default output\"\n                hint=\"Expose the default route output key in the canvas.\"\n              />\n            </div>\n          </div>\n        </section>\n        <section class=\"fp-ae-panel\">\n          <div class=\"flex items-center justify-between gap-3 border-b border-surface-200 bg-surface-50 px-4 py-3\">\n            <div class=\"fp-ae-section-title !m-0\">Switch cases</div>\n            <mt-button size=\"small\" variant=\"outlined\" icon=\"general.plus\" label=\"Add case\" (onClick)=\"addSwitchCase()\" />\n          </div>\n          <div class=\"space-y-3 p-4\">\n            @for (item of switchCases(); track item.key; let i = $index) {\n              <div class=\"rounded-md border border-surface-200 bg-surface-0 p-3\">\n                <div class=\"grid gap-3 md:grid-cols-[160px_1fr_1fr_auto]\">\n                  <mt-text-field\n                    class=\"font-mono\"\n                    [ngModel]=\"item.key\"\n                    (ngModelChange)=\"updateSwitchCase(i, 'key', $event)\"\n                    label=\"Case key\"\n                    hint=\"Persisted stable key. The route output becomes case_key.\"\n                  />\n                  <mt-text-field\n                    [ngModel]=\"item.label\"\n                    (ngModelChange)=\"updateSwitchCase(i, 'label', $event)\"\n                    label=\"Label\"\n                    hint=\"Visual case label. Routes stay attached to the case key.\"\n                  />\n                  <mt-text-field\n                    [ngModel]=\"item.value\"\n                    (focusin)=\"setExpressionTarget('config:cases:' + item.key + ':value')\"\n                    (ngModelChange)=\"updateSwitchCase(i, 'value', $event)\"\n                    label=\"Value\"\n                    hint=\"Expected value for value matching.\"\n                  />\n                  <div class=\"flex items-end gap-1\">\n                    <mt-button size=\"small\" variant=\"outlined\" icon=\"arrow.arrow-up\" tooltip=\"Move up\" (onClick)=\"moveSwitchCase(i, -1)\" />\n                    <mt-button size=\"small\" variant=\"outlined\" icon=\"arrow.arrow-down\" tooltip=\"Move down\" (onClick)=\"moveSwitchCase(i, 1)\" />\n                    <mt-button size=\"small\" variant=\"outlined\" severity=\"danger\" icon=\"general.trash-01\" tooltip=\"Remove case\" (onClick)=\"removeSwitchCase(i)\" />\n                  </div>\n                </div>\n                <div class=\"mt-3 grid gap-3 md:grid-cols-2\">\n                  <mt-text-field\n                    class=\"font-mono\"\n                    [ngModel]=\"item.condition\"\n                    (focusin)=\"setExpressionTarget('config:cases:' + item.key + ':condition')\"\n                    (ngModelChange)=\"updateSwitchCase(i, 'condition', $event)\"\n                    label=\"Condition\"\n                    hint=\"Optional condition for rule matching.\"\n                  />\n                  <mt-text-field\n                    class=\"font-mono\"\n                    [ngModel]=\"item.expression\"\n                    (focusin)=\"setExpressionTarget('config:cases:' + item.key + ':expression')\"\n                    (ngModelChange)=\"updateSwitchCase(i, 'expression', $event)\"\n                    label=\"Case expression\"\n                    hint=\"Optional expression for this case.\"\n                  />\n                </div>\n                <div class=\"mt-3 flex flex-wrap items-center gap-1.5 text-[11px]\">\n                  <span class=\"inline-flex h-7 items-center rounded-md border border-surface-200 bg-surface-50 px-2 font-mono font-semibold text-(--p-text-color)\">{{ item.routeKey }}</span>\n                  <span class=\"inline-flex h-7 items-center rounded-md border border-surface-200 bg-surface-0 px-2 font-medium text-(--p-text-muted-color)\">{{ item.routeCount }} connected route{{ item.routeCount === 1 ? \"\" : \"s\" }}</span>\n                  <span class=\"inline-flex h-7 items-center rounded-md border border-surface-200 bg-surface-0 px-2 font-medium text-(--p-text-muted-color)\">Visual order {{ i + 1 }}</span>\n                </div>\n              </div>\n            }\n            @if (switchCases().length === 0) {\n              <p class=\"fp-ae-copy\">Add at least one stable case key. Backend validation points routes at missing case keys if a case is deleted.</p>\n            }\n          </div>\n        </section>\n        }\n      }\n      @case (\"Stop\") {\n        @if (sectionInMain(\"stop\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">End execution</div>\n          @if (supportsConfigKey('status') || supportsConfigKey('message') || supportsConfigKey('output')) {\n            <div class=\"grid gap-3 md:grid-cols-2\">\n              @if (supportsConfigKey('status')) {\n                <mt-text-field\n                  [ngModel]=\"config()['status'] ?? ''\"\n                  (ngModelChange)=\"onConfigFieldChange('status', $event)\"\n                  label=\"Result status\"\n                  hint=\"Terminal status emitted by the backend stop node.\"\n                />\n              }\n              @if (supportsConfigKey('message')) {\n                <mt-text-field\n                  [ngModel]=\"config()['message'] ?? ''\"\n                  (focusin)=\"setExpressionTarget('config:message')\"\n                  (ngModelChange)=\"onConfigFieldChange('message', $event)\"\n                  label=\"Message\"\n                  hint=\"Optional message or reason saved with the terminal result.\"\n                />\n              }\n              @if (supportsConfigKey('output')) {\n                <mt-textarea-field\n                  class=\"w-full font-mono md:col-span-2\"\n                  [ngModel]=\"valueText(config()['output'] ?? '')\"\n                  (focusin)=\"setExpressionTarget('config:output')\"\n                  (ngModelChange)=\"onConfigFieldChange('output', $event)\"\n                  label=\"Output payload\"\n                  hint=\"Terminal output payload when exposed by the backend schema.\"\n                  rows=\"5\"\n                />\n              }\n            </div>\n          } @else {\n            <p class=\"fp-ae-copy\">\n              This terminal node has no backend-exposed settings. It ends execution when reached.\n            </p>\n          }\n        </section>\n        }\n      }\n    }\n\n    @if (sectionInMain(\"backendSchema\") && step() && editorType() !== \"HumanApproval\") {\n      <section class=\"fp-ae-panel\">\n        <div class=\"fp-ae-section-title\">Output data</div>\n        @if (outputFields().length > 0) {\n          <div class=\"grid gap-2 md:grid-cols-2\">\n            @for (field of outputFields(); track field.key) {\n              <div class=\"fp-ae-kv\">\n                <span>{{ field.label }}</span>\n                <strong>{{ field.type }}</strong>\n              </div>\n            }\n          </div>\n        }\n        @if (routeOutputKeys().length > 0) {\n          <div class=\"mt-3 fp-ae-label mb-2\">Route outputs</div>\n          <div class=\"flex flex-wrap gap-1.5\">\n            @for (key of routeOutputKeys(); track key) {\n              <span class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\">{{ key }}</span>\n            }\n          </div>\n        }\n      </section>\n    }\n\n    @if (sectionInAdvanced(\"mapping\")) {\n      <section class=\"fp-ae-panel\">\n        <div class=\"fp-ae-section-title\">Request and result mapping</div>\n        <div class=\"grid gap-3 md:grid-cols-2\">\n          <div>\n            <div class=\"fp-ae-label mb-2\">Request data</div>\n            @for (row of inputMappingRows(); track row.key) {\n              <label class=\"mb-2 block space-y-1\">\n                <span class=\"text-[11px] text-(--p-text-muted-color)\">{{ row.key }}</span>\n                <mt-text-field\n                  [ngModel]=\"valueText(row.value)\"\n                  (focusin)=\"setExpressionTarget('config:inputMapping:' + row.key)\"\n                  (ngModelChange)=\"updateJsonField('inputMappingJson', row.key, $event)\"\n                  hint=\"Expression or literal value mapped into this node input.\"\n                />\n              </label>\n            }\n          </div>\n          <div>\n            <div class=\"fp-ae-label mb-2\">Output data</div>\n            @for (row of outputMappingRows(); track row.key) {\n              <label class=\"mb-2 block space-y-1\">\n                <span class=\"text-[11px] text-(--p-text-muted-color)\">{{ row.key }}</span>\n                <mt-text-field\n                  [ngModel]=\"valueText(row.value)\"\n                  (focusin)=\"setExpressionTarget('config:outputMapping:' + row.key)\"\n                  (ngModelChange)=\"updateJsonField('outputMappingJson', row.key, $event)\"\n                  hint=\"Expression or literal value mapped from this node output.\"\n                />\n              </label>\n            }\n          </div>\n        </div>\n        @if (\n          sectionHasAdvancedEmptyState(\"mapping\") &&\n          inputMappingRows().length === 0 &&\n          outputMappingRows().length === 0\n        ) {\n          <p class=\"fp-ae-copy mt-3\">\n            This node is using backend default request and output data. Add mappings only when this step needs a custom payload.\n          </p>\n        }\n      </section>\n    }\n\n    @if (sectionInAdvanced(\"credentials\")) {\n      <section class=\"fp-ae-panel\">\n        <div class=\"fp-ae-section-title\">Auth and credentials</div>\n        <ng-container *ngTemplateOutlet=\"credentialSelector\" />\n      </section>\n    }\n\n    @if (sectionInAdvanced(\"policy\")) {\n      <section class=\"fp-ae-panel\">\n        <div class=\"fp-ae-section-title\">Retry, timeout, error policy</div>\n        <div class=\"grid gap-3 md:grid-cols-3\">\n            <mt-number-field\n              [ngModel]=\"numberValue(policyObject('timeoutPolicyJson')['timeoutSeconds'])\"\n              (ngModelChange)=\"updateJsonField('timeoutPolicyJson', 'timeoutSeconds', $event)\"\n              label=\"Timeout seconds\"\n              hint=\"Maximum runtime before the backend times out this node.\"\n              [min]=\"0\"\n            />\n          <mt-number-field\n              [ngModel]=\"numberValue(policyObject('retryPolicyJson')['maxAttempts'])\"\n              (ngModelChange)=\"updateJsonField('retryPolicyJson', 'maxAttempts', $event)\"\n              label=\"Max attempts\"\n              hint=\"Maximum retry attempts after retryable failures.\"\n              [min]=\"0\"\n            />\n            <mt-select-field\n              [ngModel]=\"policyObject('errorPolicyJson')['onFailure'] ?? ''\"\n              (ngModelChange)=\"updateJsonField('errorPolicyJson', 'onFailure', $event)\"\n              label=\"On failure\"\n              hint=\"Backend error policy to apply when this node fails.\"\n              [options]=\"errorPolicyOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n          />\n        </div>\n        @if (sectionHasAdvancedEmptyState(\"policy\")) {\n          <p class=\"fp-ae-copy mt-3\">\n            Backend defaults apply until you override a timeout, retry, or error policy here.\n          </p>\n        }\n      </section>\n    }\n\n    @if (sectionInAdvanced(\"triggerContext\") && trigger()) {\n      <details class=\"fp-ae-panel\" open>\n        <summary class=\"fp-ae-section-title cursor-pointer select-none\">\n          Trigger payload and context\n        </summary>\n        <p class=\"fp-ae-copy mt-3\">\n          Trigger payload/context is documentation for expressions only. Triggers\n          do not edit node input or output mappings here.\n        </p>\n        <div class=\"grid gap-3 md:grid-cols-2\">\n          <details class=\"rounded-lg border border-(--p-content-border-color)\">\n            <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Config schema</summary>\n            <pre class=\"fp-ae-code\">{{ schemaText(configSchema()) }}</pre>\n          </details>\n          @if (hasTriggerPayloadSchema() && triggerPayloadSchema(); as schema) {\n            <details class=\"rounded-lg border border-(--p-content-border-color)\">\n              <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Payload schema</summary>\n              <pre class=\"fp-ae-code\">{{ schemaText(schema) }}</pre>\n            </details>\n          }\n          @if (authPolicySchema()) {\n            <details class=\"rounded-lg border border-(--p-content-border-color)\">\n              <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Auth policy schema</summary>\n              <pre class=\"fp-ae-code\">{{ schemaText(authPolicySchema()) }}</pre>\n            </details>\n          }\n          @if (triggerPayloadSample(); as sample) {\n            <details class=\"rounded-lg border border-(--p-content-border-color)\">\n              <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Payload or request sample</summary>\n              <pre class=\"fp-ae-code\">{{ schemaText(sample) }}</pre>\n            </details>\n          }\n        </div>\n      </details>\n    }\n\n    @if (sectionInAdvanced(\"backendSchema\") && step()) {\n      <details class=\"fp-ae-panel\" open>\n        <summary class=\"fp-ae-section-title cursor-pointer select-none\">\n          Backend schemas and outputs\n        </summary>\n        <div class=\"mt-3 grid gap-3 md:grid-cols-2\">\n          <details class=\"rounded-lg border border-(--p-content-border-color)\">\n            <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Config schema</summary>\n            <pre class=\"fp-ae-code\">{{ schemaText(configSchema()) }}</pre>\n          </details>\n          <details class=\"rounded-lg border border-(--p-content-border-color)\">\n            <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Input schema</summary>\n            <pre class=\"fp-ae-code\">{{ schemaText(inputSchema()) }}</pre>\n          </details>\n          <details class=\"rounded-lg border border-(--p-content-border-color)\">\n            <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Output schema</summary>\n            <pre class=\"fp-ae-code\">{{ schemaText(outputSchema()) }}</pre>\n          </details>\n          <div class=\"rounded-lg border border-(--p-content-border-color) p-3\">\n            <div class=\"fp-ae-label mb-2\">Route output keys</div>\n            <div class=\"flex flex-wrap gap-1.5\">\n              @for (key of routeOutputKeys(); track key) {\n                <span class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\">{{ key }}</span>\n              }\n              @if (routeOutputKeys().length === 0) {\n                <span class=\"text-[12px] text-(--p-text-muted-color)\">No outgoing route keys</span>\n              }\n            </div>\n          </div>\n        </div>\n      </details>\n    }\n\n    @if (sectionInAdvanced(\"schemaFields\") && configRows().length > 0) {\n      <details class=\"fp-ae-panel\" open>\n        <summary class=\"fp-ae-section-title cursor-pointer select-none\">\n          Backend schema fields\n        </summary>\n        <div class=\"mt-3 grid gap-3 md:grid-cols-2\">\n          @for (field of configRows(); track field.key) {\n            <div\n              class=\"space-y-1.5\"\n              [class.md:col-span-2]=\"field.type === 'object' || field.type === 'array'\"\n            >\n              @if (field.enumValues.length) {\n                <mt-select-field\n                  [ngModel]=\"fieldValue(field.key)\"\n                  (ngModelChange)=\"onConfigFieldChange(field.key, $event)\"\n                  [label]=\"field.label + (field.required ? ' *' : '')\"\n                  [hint]=\"field.description ?? ''\"\n                  [options]=\"enumOptions(field.enumValues)\"\n                  optionValue=\"value\"\n                  optionLabel=\"label\"\n                />\n              } @else if (field.type === \"boolean\") {\n                <mt-toggle-field\n                  size=\"small\"\n                  labelPosition=\"end\"\n                  [ngModel]=\"!!fieldValue(field.key)\"\n                  (ngModelChange)=\"onConfigFieldChange(field.key, $event === true)\"\n                  [label]=\"field.label + (field.required ? ' *' : '')\"\n                  [hint]=\"field.description ?? ''\"\n                />\n              } @else if (field.type === \"number\") {\n                <mt-number-field\n                  [ngModel]=\"numberValue(fieldValue(field.key))\"\n                  (ngModelChange)=\"onConfigFieldChange(field.key, $event)\"\n                  [label]=\"field.label + (field.required ? ' *' : '')\"\n                  [hint]=\"field.description ?? ''\"\n                />\n              } @else if (field.type === \"date\") {\n                <mt-date-field\n                  [ngModel]=\"fieldValue(field.key)\"\n                  (ngModelChange)=\"onConfigFieldChange(field.key, $event)\"\n                  [label]=\"field.label + (field.required ? ' *' : '')\"\n                  [hint]=\"field.description ?? ''\"\n                  [showTime]=\"field.format !== 'date'\"\n                  [showClear]=\"true\"\n                  [pInputs]=\"dateTimePickerInputs\"\n                />\n              } @else if (field.type === \"object\" || field.type === \"array\") {\n                <mt-textarea-field\n                  class=\"w-full font-mono\"\n                  [ngModel]=\"valueText(fieldValue(field.key))\"\n                  (ngModelChange)=\"onConfigFieldChange(field.key, $event)\"\n                  [label]=\"field.label + (field.required ? ' *' : '')\"\n                  [hint]=\"field.description ?? ''\"\n                  rows=\"5\"\n                />\n              } @else {\n                <mt-text-field\n                  [ngModel]=\"fieldText(field.key)\"\n                  (focusin)=\"field.expressionEnabled && setExpressionTarget('config:' + field.key)\"\n                  (ngModelChange)=\"onConfigFieldChange(field.key, $event)\"\n                  [label]=\"field.label + (field.required ? ' *' : '')\"\n                  [hint]=\"field.description ?? ''\"\n                />\n              }\n            </div>\n          }\n        </div>\n      </details>\n    }\n  </div>\n</div>\n\n<ng-template #credentialSelector>\n  @if (credentials().length) {\n    <div class=\"space-y-2\">\n      @for (credential of credentials(); track credential.credentialRef) {\n        <label class=\"flex items-center justify-between gap-3 rounded-lg border border-(--p-content-border-color) bg-(--p-surface-50) px-3 py-2\">\n          <span class=\"min-w-0\">\n            <span class=\"block truncate text-[12px] font-semibold\">{{ credential.displayName ?? credential.credentialRef }}</span>\n            <span class=\"block truncate font-mono text-[11px] text-(--p-text-muted-color)\">\n              {{ credential.credentialRef }} / {{ credential.status ?? (credential.resolved ? \"Resolved\" : \"Unresolved\") }}\n            </span>\n          </span>\n          <span class=\"flex items-center gap-2\">\n            <mt-button\n              size=\"small\"\n              variant=\"text\"\n              label=\"Test\"\n              (onClick)=\"testCredential(credential.credentialRef)\"\n            />\n            <mt-toggle-field\n              size=\"small\"\n              [ngModel]=\"credentialRefs().includes(credential.credentialRef)\"\n              (ngModelChange)=\"toggleCredential(credential.credentialRef, $event === true)\"\n              hint=\"Attach or detach this backend credential reference. Masked secrets are preserved.\"\n            />\n          </span>\n        </label>\n      }\n    </div>\n  } @else if (sectionHasAdvancedEmptyState(\"credentials\")) {\n    <p class=\"fp-ae-copy\">\n      The backend helper did not return credential choices for this node. Existing masked references remain preserved in the saved JSON.\n    </p>\n  }\n  @if (credentialTest(); as test) {\n    <div class=\"mt-3 rounded-lg bg-(--p-surface-100) px-3 py-2 text-[12px]\">\n      {{ test.status ?? (test.succeeded ? \"Succeeded\" : \"Placeholder\") }}\n      @if (test.message) { <span>- {{ test.message }}</span> }\n    </div>\n  }\n</ng-template>\n\n<ng-template\n  #mapEditor\n  let-objectKey=\"objectKey\"\n  let-rows=\"rows\"\n  let-keyLabel=\"keyLabel\"\n  let-valueLabel=\"valueLabel\"\n  let-addLabel=\"addLabel\"\n>\n  <div class=\"space-y-2\">\n    @for (row of rows; track row.key) {\n      <div class=\"grid gap-2 md:grid-cols-[180px_1fr_auto]\">\n        <mt-text-field\n          class=\"font-mono\"\n          [ngModel]=\"row.key\"\n          (ngModelChange)=\"updateObjectRow(objectKey, row.key, $event, row.value)\"\n          [label]=\"keyLabel\"\n          hint=\"Configuration key saved to the backend JSON object.\"\n        />\n        <mt-text-field\n          class=\"font-mono\"\n          [ngModel]=\"valueText(row.value)\"\n          (focusin)=\"setExpressionTarget('config:' + objectKey + ':' + row.key)\"\n          (ngModelChange)=\"updateObjectRow(objectKey, row.key, row.key, $event)\"\n          [label]=\"valueLabel\"\n          hint=\"Configuration value. Use expressions when this field should resolve at runtime.\"\n        />\n        <mt-button\n          class=\"self-end\"\n          size=\"small\"\n          severity=\"secondary\"\n          variant=\"outlined\"\n          label=\"Remove\"\n          (onClick)=\"removeObjectRow(objectKey, row.key)\"\n        />\n      </div>\n    }\n    <mt-button\n      size=\"small\"\n      variant=\"outlined\"\n      [label]=\"addLabel || ('Add ' + keyLabel)\"\n      (onClick)=\"addObjectRow(objectKey)\"\n    />\n  </div>\n</ng-template>\n" }]
+                    ], host: { class: 'block h-full min-h-0' }, template: "<div\n  class=\"fp-scroll flex h-full min-h-0 flex-col overflow-y-auto\"\n  fpDropData\n  [fpDropAutoInsert]=\"false\"\n  (dataDrop)=\"insertExpression($event)\"\n>\n  <div class=\"space-y-4 px-5 py-5\">\n    @if (helperError()) {\n      <div\n        class=\"rounded-lg border border-[rgb(var(--fp-warning))]/30 bg-[rgb(var(--fp-warning))]/10 px-3 py-2 text-[12px] leading-5 text-(--p-text-color)\"\n      >\n        {{ helperError() }}\n      </div>\n    }\n\n    @if (sectionInMain(\"startConnection\") && trigger()) {\n      <section\n        class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\n      >\n        <h3\n          class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\n        >\n          Start connection\n        </h3>\n        <div class=\"space-y-3 p-4\">\n          @if (startConnection().key) {\n            @if (startConnection().step) {\n              <div class=\"flex flex-wrap items-start justify-between gap-3\">\n                <div class=\"min-w-0 space-y-1\">\n                  <div class=\"text-[12px] font-semibold text-(--p-text-muted-color)\">\n                    First node connected\n                  </div>\n                  <div class=\"truncate text-[14px] font-semibold text-(--p-text-color)\">\n                    {{ startConnection().label }}\n                  </div>\n                  <div class=\"flex flex-wrap items-center gap-2 text-[12px] text-(--p-text-muted-color)\">\n                    <span>Managed on canvas</span>\n                    <span\n                      class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\"\n                    >\n                      {{ startConnection().key }}\n                    </span>\n                  </div>\n                </div>\n                <div class=\"flex shrink-0 flex-wrap gap-2\">\n                  <mt-button\n                    size=\"small\"\n                    variant=\"outlined\"\n                    severity=\"secondary\"\n                    label=\"Focus connected node\"\n                    (onClick)=\"focusStartConnection()\"\n                  />\n                </div>\n              </div>\n            } @else {\n              <div class=\"space-y-2\">\n                <div class=\"text-[14px] font-semibold text-(--p-text-color)\">\n                  No first node connected\n                </div>\n                <p class=\"m-0 text-[12px] leading-5 text-(--p-text-muted-color)\">\n                  The saved start connection points to a node key that is not on\n                  the canvas. Connect this trigger to the first node on the\n                  canvas.\n                </p>\n                <div class=\"flex flex-wrap items-center gap-2 text-[12px] text-(--p-text-muted-color)\">\n                  <span>Technical key</span>\n                  <span\n                    class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\"\n                  >\n                    {{ startConnection().key }}\n                  </span>\n                  <span>Managed on canvas</span>\n                </div>\n              </div>\n            }\n          } @else {\n            <div class=\"rounded-lg border border-dashed border-(--p-content-border-color) bg-(--p-surface-50) p-3\">\n              <div class=\"text-[14px] font-semibold text-(--p-text-color)\">\n                No first node connected\n              </div>\n              <p class=\"m-0 mt-1 text-[12px] leading-5 text-(--p-text-muted-color)\">\n                Connect this trigger to the first node on the canvas.\n              </p>\n            </div>\n          }\n        </div>\n      </section>\n    }\n\n    @switch (editorType()) {\n      @case (\"ManualTrigger\") {\n        @if (sectionInMain(\"manualTrigger\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Manual run input</div>\n          @if (hasTriggerPayloadSchema() && triggerPayloadSchema(); as schema) {\n            <div class=\"rounded-md border border-surface-200 bg-surface-0 p-3\">\n              <div class=\"fp-ae-label mb-2\">Payload schema</div>\n              <pre class=\"fp-ae-code\">{{ schemaText(schema) }}</pre>\n            </div>\n          }\n          @if (triggerPayloadSample(); as sample) {\n            <div class=\"mt-3 rounded-md border border-surface-200 bg-surface-0 p-3\">\n              <div class=\"fp-ae-label mb-2\">Sample payload</div>\n              <pre class=\"fp-ae-code\">{{ schemaText(sample) }}</pre>\n            </div>\n          }\n          @if (!hasTriggerPayloadSchema() && !triggerPayloadSample()) {\n            <p class=\"fp-ae-copy\">\n              This manual trigger has no backend-provided input schema. It can still be connected to the first step on the canvas.\n            </p>\n          }\n        </section>\n        }\n      }\n      @case (\"WebhookTrigger\") {\n        @if (sectionInMain(\"webhookSetup\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Webhook setup</div>\n          @if (webhookSetup(); as setup) {\n            <div class=\"flex gap-2\">\n              <mt-text-field\n                class=\"flex-1 font-mono\"\n                [ngModel]=\"setup.webhookUrl ?? ''\"\n                [readonly]=\"true\"\n                label=\"Webhook URL\"\n                hint=\"Backend-generated endpoint clients should call to start this trigger.\"\n              />\n              <mt-button class=\"self-end\" size=\"small\" variant=\"outlined\" label=\"Copy\" (onClick)=\"copyWebhookUrl()\" />\n            </div>\n            <div class=\"grid gap-2 md:grid-cols-2\">\n              <div class=\"fp-ae-kv\">\n                <span>Auth mode</span>\n                <strong>{{ setup.authMode ?? \"Backend default\" }}</strong>\n              </div>\n              <div class=\"fp-ae-kv\">\n                <span>Required headers</span>\n                <strong>{{ (setup.requiredHeaders ?? []).join(\", \") || \"-\" }}</strong>\n              </div>\n            </div>\n            @if (setup.hmacSigning) {\n              <p class=\"fp-ae-copy\">{{ setup.hmacSigning }}</p>\n            }\n            @if (setup.sampleRequest) {\n              <details class=\"mt-3 rounded-lg border border-(--p-content-border-color)\">\n                <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">\n                  Sample request\n                </summary>\n                <pre class=\"fp-ae-code\">{{ schemaText(setup.sampleRequest) }}</pre>\n              </details>\n            }\n          } @else {\n            <p class=\"fp-ae-copy\">\n              Webhook setup is not available for this draft yet.\n            </p>\n          }\n        </section>\n        }\n        @if (sectionInMain(\"authPolicy\") && hasAuthPolicy()) {\n          <section class=\"fp-ae-panel\">\n            <div class=\"fp-ae-section-title\">Authentication policy</div>\n            <div class=\"grid gap-3 md:grid-cols-3\">\n              <mt-select-field\n                [ngModel]=\"authPolicy()['mode'] ?? ''\"\n                (ngModelChange)=\"onAuthFieldChange('mode', $event)\"\n                label=\"Mode\"\n                hint=\"Authentication mode required by the backend webhook policy.\"\n                [options]=\"authModeOptions\"\n                optionValue=\"value\"\n                optionLabel=\"label\"\n              />\n              <mt-text-field\n                [ngModel]=\"authPolicy()['signatureHeaderName'] ?? ''\"\n                (ngModelChange)=\"onAuthFieldChange('signatureHeaderName', $event)\"\n                label=\"Signature header\"\n                hint=\"Header name that carries the webhook signature when the policy requires signed requests.\"\n              />\n              <mt-text-field\n                [ngModel]=\"authPolicy()['timestampHeaderName'] ?? ''\"\n                (ngModelChange)=\"onAuthFieldChange('timestampHeaderName', $event)\"\n                label=\"Timestamp header\"\n                hint=\"Header name that carries the request timestamp for replay protection.\"\n              />\n            </div>\n          </section>\n        }\n      }\n      @case (\"FormSubmitTrigger\") {\n        @if (sectionInMain(\"formBinding\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Form binding</div>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-select-field\n              [ngModel]=\"selectedFormId() || formBinding()?.formId || ''\"\n              (ngModelChange)=\"onFormChange($event)\"\n              label=\"Form\"\n              hint=\"Choose a backend form that will submit data into this trigger.\"\n              [options]=\"formOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-select-field\n              [ngModel]=\"selectedFormVersionId() || formBinding()?.formVersionId || ''\"\n              (ngModelChange)=\"onFormVersionChange($event)\"\n              label=\"Form version\"\n              hint=\"Persist the exact backend formVersionId. Do not type or generate IDs manually.\"\n              [options]=\"formVersionOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n          </div>\n          <div class=\"mt-3 flex flex-wrap items-center gap-2\">\n            <mt-button size=\"small\" severity=\"primary\" label=\"Save binding\" (onClick)=\"saveFormBinding()\" />\n            @if (formBinding()) {\n              <span class=\"rounded-lg bg-(--p-surface-100) px-2 py-1 font-mono text-[11px] text-(--p-text-muted-color)\">\n                {{ formBinding()!.formVersionId }}\n              </span>\n            }\n          </div>\n          @if (formSchema(); as schema) {\n            <details class=\"mt-3 rounded-lg border border-(--p-content-border-color)\">\n              <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">\n                Form schema preview\n              </summary>\n              <pre class=\"fp-ae-code\">{{ schemaText(schema.schema) }}</pre>\n            </details>\n          }\n        </section>\n        }\n      }\n      @case (\"ScheduleTrigger\") {\n        @if (sectionInMain(\"schedule\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Schedule</div>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-select-field\n              [ngModel]=\"scheduleMode()\"\n              (ngModelChange)=\"onScheduleModeChange($event)\"\n              label=\"Mode\"\n              hint=\"Pick one schedule mode: cron, interval, or once. Backend validation requires exactly one mode.\"\n              [options]=\"scheduleModeOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-select-field\n              [ngModel]=\"config()['timezone'] ?? 'UTC'\"\n              (ngModelChange)=\"onConfigFieldChange('timezone', $event)\"\n              label=\"Timezone\"\n              hint=\"Timezone used to calculate the next fire time.\"\n              [options]=\"timeZoneOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            @if (showScheduleCron()) {\n              <mt-text-field\n                class=\"font-mono md:col-span-2\"\n                [ngModel]=\"config()['cron'] ?? ''\"\n                (ngModelChange)=\"onConfigFieldChange('cron', $event)\"\n                label=\"Cron\"\n                hint=\"Cron expression, for example 0 9 * * *.\"\n              />\n            }\n            @if (showScheduleInterval()) {\n              <mt-number-field\n                [ngModel]=\"numberValue(config()['intervalSeconds'])\"\n                (ngModelChange)=\"onConfigFieldChange('intervalSeconds', $event)\"\n                label=\"Interval seconds\"\n                hint=\"Repeat interval in seconds.\"\n                [min]=\"0\"\n              />\n            }\n            @if (showScheduleOnce()) {\n              <mt-date-field\n                class=\"md:col-span-2\"\n                [ngModel]=\"config()['runAt'] ?? config()['runAtUtc'] ?? config()['oneTimeAt'] ?? config()['at'] ?? ''\"\n                (ngModelChange)=\"onConfigFieldChange('runAt', $event)\"\n                label=\"Run at UTC\"\n                hint=\"UTC date/time for the one-time schedule.\"\n                [showTime]=\"true\"\n                [showClear]=\"true\"\n                [pInputs]=\"dateTimePickerInputs\"\n              />\n            }\n            @if (showScheduleStartDate()) {\n              <mt-date-field\n                [ngModel]=\"config()['startDate'] ?? ''\"\n                (ngModelChange)=\"onConfigFieldChange('startDate', $event)\"\n                label=\"Start date UTC\"\n                hint=\"Optional first allowed run time for this schedule.\"\n                [showTime]=\"true\"\n                [showClear]=\"true\"\n                [pInputs]=\"dateTimePickerInputs\"\n              />\n            }\n            <mt-select-field\n              [ngModel]=\"config()['misfirePolicy'] ?? 'SkipMissed'\"\n              (ngModelChange)=\"onConfigFieldChange('misfirePolicy', $event)\"\n              label=\"Misfire policy\"\n              hint=\"Backend behavior when a scheduled run is missed while the automation is unavailable.\"\n              [options]=\"misfirePolicyOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n          </div>\n          <div class=\"mt-3 flex gap-2\">\n            <mt-button size=\"small\" variant=\"outlined\" label=\"Validate\" (onClick)=\"validateSchedule()\" />\n            <mt-button size=\"small\" severity=\"primary\" label=\"Preview next fire\" (onClick)=\"previewSchedule()\" />\n          </div>\n          @if (schedulePreview(); as preview) {\n            <div class=\"mt-3 rounded-lg bg-(--p-surface-100) px-3 py-2 text-[12px]\">\n              <strong class=\"text-emerald-600\">Valid</strong>\n              <span class=\"ms-2\">Next fire: {{ preview.nextFireAtUtc ?? \"-\" }}</span>\n            </div>\n          }\n        </section>\n        }\n      }\n      @case (\"SetFields\") {\n        @if (sectionInMain(\"setFields\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Set fields</div>\n          <ng-container *ngTemplateOutlet=\"mapEditor; context: { objectKey: 'fields', rows: fieldsRows(), keyLabel: 'Field', valueLabel: 'Value', addLabel: 'Add field' }\" />\n        </section>\n        }\n      }\n      @case (\"If\") {\n        @if (sectionInMain(\"condition\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Condition</div>\n          <div class=\"grid gap-3 md:grid-cols-[1fr_180px_1fr]\">\n            <mt-text-field\n              [ngModel]=\"fieldText('left')\"\n              (focusin)=\"setExpressionTarget('config:left')\"\n              (ngModelChange)=\"onConfigFieldChange('left', $event)\"\n              label=\"Left\"\n              hint=\"Left-side value or expression to compare.\"\n            />\n            <mt-select-field\n              [ngModel]=\"config()['operator'] ?? 'equals'\"\n              (ngModelChange)=\"onConfigFieldChange('operator', $event)\"\n              label=\"Operator\"\n              hint=\"Comparison operator used by the backend condition evaluator.\"\n              [options]=\"ifOperatorOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-text-field\n              [ngModel]=\"fieldText('right')\"\n              (focusin)=\"setExpressionTarget('config:right')\"\n              (ngModelChange)=\"onConfigFieldChange('right', $event)\"\n              label=\"Right\"\n              hint=\"Right-side value or expression to compare against.\"\n            />\n          </div>\n          <div class=\"mt-3 rounded-md border border-surface-200 bg-surface-0 p-3\">\n            <div class=\"fp-ae-label mb-2\">Route outputs</div>\n            <div class=\"flex flex-wrap gap-1.5\">\n              @for (key of routeOutputKeys(); track key) {\n                <span class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\">{{ key }}</span>\n              }\n            </div>\n          </div>\n        </section>\n        }\n      }\n      @case (\"HTTP\") {\n        @if (sectionInMain(\"httpRequest\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">HTTP request</div>\n          <div class=\"grid gap-3 md:grid-cols-[150px_1fr]\">\n            <mt-select-field\n              [ngModel]=\"config()['method'] ?? 'GET'\"\n              (ngModelChange)=\"onConfigFieldChange('method', $event)\"\n              label=\"Method\"\n              hint=\"HTTP method used for the outbound request.\"\n              [options]=\"httpMethodOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-text-field\n              class=\"font-mono\"\n              [ngModel]=\"config()['url'] ?? ''\"\n              (focusin)=\"setExpressionTarget('config:url')\"\n              (ngModelChange)=\"onConfigFieldChange('url', $event)\"\n              label=\"URL\"\n              hint=\"Target URL. Expressions are supported for dynamic hosts, paths, and query values.\"\n            />\n          </div>\n          <div class=\"mt-3\">\n            <ng-container *ngTemplateOutlet=\"mapEditor; context: { objectKey: 'headers', rows: headerRows(), keyLabel: 'Header', valueLabel: 'Value', addLabel: 'Add header' }\" />\n          </div>\n          <div class=\"mt-3\">\n            <ng-container *ngTemplateOutlet=\"mapEditor; context: { objectKey: 'query', rows: queryRows(), keyLabel: 'Query param', valueLabel: 'Value', addLabel: 'Add query param' }\" />\n          </div>\n          @if (supportsConfigKey('bodyMode')) {\n            <mt-select-field\n              class=\"mt-3\"\n              [ngModel]=\"config()['bodyMode'] ?? 'json'\"\n              (ngModelChange)=\"onConfigFieldChange('bodyMode', $event)\"\n              label=\"Body mode\"\n              hint=\"Backend-supported request body serialization mode.\"\n              [options]=\"httpBodyModeOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n          }\n          <mt-textarea-field\n            class=\"mt-3 w-full font-mono\"\n            [ngModel]=\"valueText(config()['body'] ?? '')\"\n            (focusin)=\"setExpressionTarget('config:body')\"\n            (ngModelChange)=\"onConfigFieldChange('body', $event)\"\n            label=\"Body\"\n            hint=\"Request body sent by the HTTP node. Use JSON or expressions when the backend schema allows it.\"\n            rows=\"6\"\n          />\n          @if (supportsConfigKey('timeoutSeconds') || supportsConfigKey('responseHandling')) {\n            <div class=\"mt-3 grid gap-3 md:grid-cols-2\">\n              @if (supportsConfigKey('timeoutSeconds')) {\n                <mt-number-field\n                  [ngModel]=\"numberValue(config()['timeoutSeconds'])\"\n                  (ngModelChange)=\"onConfigFieldChange('timeoutSeconds', $event)\"\n                  label=\"Timeout seconds\"\n                  hint=\"Request timeout when exposed by the backend schema.\"\n                  [min]=\"0\"\n                />\n              }\n              @if (supportsConfigKey('responseHandling')) {\n                <mt-text-field\n                  [ngModel]=\"config()['responseHandling'] ?? ''\"\n                  (ngModelChange)=\"onConfigFieldChange('responseHandling', $event)\"\n                  label=\"Response handling\"\n                  hint=\"Backend-supported response handling mode or expression.\"\n                />\n              }\n            </div>\n          }\n          @if (sectionInMain(\"credentials\")) {\n            <div class=\"mt-3 rounded-md border border-surface-200 bg-surface-0 p-3\">\n              <div class=\"fp-ae-label mb-2\">Credential</div>\n              <ng-container *ngTemplateOutlet=\"credentialSelector\" />\n            </div>\n          }\n        </section>\n        }\n      }\n      @case (\"Wait\") {\n        @if (sectionInMain(\"wait\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Wait</div>\n          <div class=\"grid gap-3 md:grid-cols-3\">\n            <mt-select-field\n              [ngModel]=\"config()['mode'] ?? 'duration'\"\n              (ngModelChange)=\"onConfigFieldChange('mode', $event)\"\n              label=\"Mode\"\n              hint=\"Choose whether this wait uses a duration or a specific date/time.\"\n              [options]=\"waitModeOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-number-field\n              [ngModel]=\"numberValue(config()['durationSeconds'])\"\n              (ngModelChange)=\"onConfigFieldChange('durationSeconds', $event)\"\n              label=\"Duration seconds\"\n              hint=\"How long execution should wait when mode is duration.\"\n              [min]=\"0\"\n            />\n            <mt-date-field\n              [ngModel]=\"config()['waitUntil'] ?? ''\"\n              (ngModelChange)=\"onConfigFieldChange('waitUntil', $event)\"\n              label=\"Wait until\"\n              hint=\"Date/time that resolves to when execution should resume.\"\n              [showTime]=\"true\"\n              [showClear]=\"true\"\n              [pInputs]=\"dateTimePickerInputs\"\n            />\n          </div>\n          @if (supportsConfigKey('resumePayloadSchema') || supportsConfigKey('resumePayload')) {\n            <mt-textarea-field\n              class=\"mt-3 w-full font-mono\"\n              [ngModel]=\"valueText(config()['resumePayloadSchema'] ?? config()['resumePayload'] ?? '')\"\n              (focusin)=\"setExpressionTarget('config:resumePayload')\"\n              (ngModelChange)=\"onConfigFieldChange('resumePayload', $event)\"\n              label=\"Resume payload\"\n              hint=\"Expected payload when the backend supports manual or external resume data.\"\n              rows=\"5\"\n            />\n          }\n        </section>\n        }\n      }\n      @case (\"HumanApproval\") {\n        @if (sectionInMain(\"approvalTask\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Approval task</div>\n          @if (assignmentOptions()?.providerStatus && assignmentOptions()?.providerStatus !== \"Available\") {\n            <p class=\"fp-ae-copy\">\n              Assignment provider status: {{ assignmentOptions()?.providerStatus }}.\n              The backend provider is the source of truth for available assignees.\n            </p>\n          }\n          <div class=\"grid gap-3 xl:grid-cols-3\">\n            <mt-text-field\n              [ngModel]=\"config()['title'] ?? ''\"\n              (focusin)=\"setExpressionTarget('config:title')\"\n              (ngModelChange)=\"onConfigFieldChange('title', $event)\"\n              label=\"Approval title\"\n              hint=\"Approval title shown to the assigned human approver.\"\n            />\n            <mt-select-field\n              [ngModel]=\"selectedAssignmentKey()\"\n              (ngModelChange)=\"onAssignmentOptionChange($event)\"\n              label=\"Assignment\"\n              hint=\"Backend-provided assignee, role, or group that can decide this approval.\"\n              [options]=\"assignmentSelectOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            @if (humanApprovalSupportsConfig('priority')) {\n              <mt-text-field\n                [ngModel]=\"config()['priority'] ?? ''\"\n                (ngModelChange)=\"onConfigFieldChange('priority', $event)\"\n                label=\"Priority\"\n                hint=\"Approval priority when supported by the backend schema.\"\n              />\n            }\n          </div>\n          <mt-textarea-field\n            class=\"mt-3 w-full\"\n            [ngModel]=\"config()['message'] ?? config()['instructions'] ?? ''\"\n            (focusin)=\"setExpressionTarget('config:message')\"\n            (ngModelChange)=\"onConfigFieldChange('message', $event)\"\n            label=\"Approval message\"\n            hint=\"Decision instructions shown to the approver.\"\n            rows=\"4\"\n          />\n          @if (humanApprovalSupportsConfig('dueDate') || humanApprovalSupportsConfig('dueInSeconds') || humanApprovalSupportsConfig('timeoutSeconds') || humanApprovalSupportsConfig('expiresAt') || humanApprovalSupportsConfig('commentsRequired') || humanApprovalSupportsConfig('allowReturn')) {\n            <div class=\"mt-3 grid gap-3 xl:grid-cols-4\">\n              @if (humanApprovalSupportsConfig('dueDate')) {\n                <mt-date-field\n                  [ngModel]=\"config()['dueDate'] ?? ''\"\n                  (ngModelChange)=\"onConfigFieldChange('dueDate', $event)\"\n                  label=\"Due date\"\n                  hint=\"Backend-supported approval due date.\"\n                  [showTime]=\"true\"\n                  [showClear]=\"true\"\n                  [pInputs]=\"dateTimePickerInputs\"\n                />\n              }\n              @if (humanApprovalSupportsConfig('dueInSeconds')) {\n                <mt-number-field\n                  [ngModel]=\"numberValue(config()['dueInSeconds'])\"\n                  (ngModelChange)=\"onConfigFieldChange('dueInSeconds', $event)\"\n                  label=\"Due in seconds\"\n                  hint=\"Relative approval due duration when supported by the backend schema.\"\n                  [min]=\"0\"\n                />\n              }\n              @if (humanApprovalSupportsConfig('timeoutSeconds')) {\n                <mt-number-field\n                  [ngModel]=\"numberValue(config()['timeoutSeconds'])\"\n                  (ngModelChange)=\"onConfigFieldChange('timeoutSeconds', $event)\"\n                  label=\"Timeout seconds\"\n                  hint=\"Approval timeout emitted according to backend approval runtime support.\"\n                  [min]=\"0\"\n                />\n              }\n              @if (humanApprovalSupportsConfig('expiresAt')) {\n                <mt-date-field\n                  [ngModel]=\"config()['expiresAt'] ?? ''\"\n                  (ngModelChange)=\"onConfigFieldChange('expiresAt', $event)\"\n                  label=\"Expires at\"\n                  hint=\"Backend-supported approval expiry timestamp.\"\n                  [showTime]=\"true\"\n                  [showClear]=\"true\"\n                  [pInputs]=\"dateTimePickerInputs\"\n                />\n              }\n              @if (humanApprovalSupportsConfig('commentsRequired')) {\n                <div class=\"flex min-h-[4.25rem] items-end rounded-md border border-surface-200 bg-surface-0 px-3 py-2\">\n                  <mt-toggle-field\n                    size=\"small\"\n                    label=\"Comments required\"\n                    labelPosition=\"end\"\n                    [ngModel]=\"config()['commentsRequired'] === true\"\n                    (ngModelChange)=\"onConfigFieldChange('commentsRequired', $event === true)\"\n                    hint=\"Require approver comments when the backend supports this flag.\"\n                  />\n                </div>\n              }\n              @if (humanApprovalSupportsConfig('allowReturn')) {\n                <div class=\"flex min-h-[4.25rem] items-end rounded-md border border-surface-200 bg-surface-0 px-3 py-2\">\n                  <mt-toggle-field\n                    size=\"small\"\n                    label=\"Allow return for changes\"\n                    labelPosition=\"end\"\n                    [ngModel]=\"config()['allowReturn'] !== false\"\n                    (ngModelChange)=\"onConfigFieldChange('allowReturn', $event === true)\"\n                    hint=\"Allow ReturnForChanges when the backend schema exposes this option.\"\n                  />\n                </div>\n              }\n            </div>\n          }\n          <div class=\"mt-3 space-y-3\">\n            <div class=\"fp-ae-section-title\">Decision options</div>\n            <div class=\"overflow-hidden rounded-md border border-surface-200 bg-surface-0\">\n              @if (selectedApprovalDecisionRows().length > 0) {\n                <div class=\"hidden border-b border-surface-200 bg-surface-50 px-3 py-2 text-[12px] font-semibold text-(--p-text-muted-color) xl:grid xl:grid-cols-[1.1fr_1fr_1.2fr_80px_44px] xl:gap-3\">\n                  <span>Decision label</span>\n                  <span>Canonical value</span>\n                  <span>Route output key</span>\n                  <span>Routes</span>\n                  <span>Action</span>\n                </div>\n                @for (decision of selectedApprovalDecisionRows(); track decision.value) {\n                  <div class=\"grid gap-2 border-b border-surface-100 px-3 py-3 last:border-b-0 xl:grid-cols-[1.1fr_1fr_1.2fr_80px_44px] xl:items-center xl:gap-3\">\n                    <div class=\"min-w-0\">\n                      <div class=\"text-[11px] font-semibold text-(--p-text-muted-color) xl:hidden\">Decision label</div>\n                      <div class=\"truncate text-[13px] font-semibold text-(--p-text-color)\">{{ decision.label }}</div>\n                    </div>\n                    <div class=\"min-w-0\">\n                      <div class=\"text-[11px] font-semibold text-(--p-text-muted-color) xl:hidden\">Canonical value</div>\n                      <div class=\"truncate font-mono text-[12px] text-(--p-text-color)\">{{ decision.value }}</div>\n                    </div>\n                    <div class=\"min-w-0\">\n                      <div class=\"text-[11px] font-semibold text-(--p-text-muted-color) xl:hidden\">Route output key</div>\n                      <div class=\"truncate font-mono text-[12px] text-(--p-text-muted-color)\">{{ decision.routeOutputKey }}</div>\n                    </div>\n                    <div>\n                      <div class=\"text-[11px] font-semibold text-(--p-text-muted-color) xl:hidden\">Routes</div>\n                      <div class=\"text-[13px] text-(--p-text-color)\">{{ decision.routeCount }}</div>\n                    </div>\n                    <mt-button\n                      class=\"justify-self-start xl:justify-self-end\"\n                      size=\"small\"\n                      variant=\"outlined\"\n                      severity=\"danger\"\n                      icon=\"general.trash-01\"\n                      tooltip=\"Remove decision option\"\n                      (onClick)=\"removeApprovalDecision(decision.value)\"\n                    />\n                  </div>\n                }\n              } @else {\n                <div class=\"px-3 py-4 text-[12px] text-(--p-text-muted-color)\">\n                  Add at least one backend-supported approval decision.\n                </div>\n              }\n            </div>\n            @if (approvalDecisionIssues().length > 0) {\n              <div class=\"rounded-lg border border-[rgb(var(--fp-error))]/30 bg-[rgb(var(--fp-error))]/10 px-3 py-2 text-[12px] leading-5 text-[rgb(var(--fp-error))]\">\n                @for (issue of approvalDecisionIssues(); track issue) {\n                  <div>{{ issue }}</div>\n                }\n              </div>\n            }\n            <div class=\"grid gap-2 md:grid-cols-[minmax(0,1fr)_auto]\">\n              <mt-select-field\n                [ngModel]=\"approvalDecisionToAdd()\"\n                (ngModelChange)=\"approvalDecisionToAdd.set($event)\"\n                label=\"Decision to add\"\n                hint=\"Only backend-supported decisions with matching route outputs are available.\"\n                [options]=\"addableApprovalDecisionOptions()\"\n                optionValue=\"value\"\n                optionLabel=\"label\"\n              />\n              <mt-button\n                class=\"self-end\"\n                size=\"small\"\n                variant=\"outlined\"\n                icon=\"general.plus\"\n                label=\"Add decision option\"\n                [disabled]=\"!approvalDecisionToAdd()\"\n                (onClick)=\"addApprovalDecision()\"\n              />\n            </div>\n          </div>\n          @if (humanApprovalSupportsConfig('payload') || humanApprovalSupportsConfig('context') || humanApprovalSupportsConfig('metadata')) {\n            <div class=\"mt-3 grid gap-3\">\n              @if (humanApprovalSupportsConfig('payload')) {\n                <mt-textarea-field\n                  class=\"w-full font-mono\"\n                  [ngModel]=\"valueText(config()['payload'] ?? '')\"\n                  (focusin)=\"setExpressionTarget('config:payload')\"\n                  (ngModelChange)=\"onConfigFieldChange('payload', $event)\"\n                  label=\"Payload\"\n                  hint=\"Approval task payload or context fields supported by backend schema.\"\n                  rows=\"5\"\n                />\n              }\n              @if (humanApprovalSupportsConfig('context')) {\n                <mt-textarea-field\n                  class=\"w-full font-mono\"\n                  [ngModel]=\"valueText(config()['context'] ?? '')\"\n                  (focusin)=\"setExpressionTarget('config:context')\"\n                  (ngModelChange)=\"onConfigFieldChange('context', $event)\"\n                  label=\"Context\"\n                  hint=\"Additional approval context supported by backend schema.\"\n                  rows=\"5\"\n                />\n              }\n              @if (humanApprovalSupportsConfig('metadata')) {\n                <mt-textarea-field\n                  class=\"w-full font-mono\"\n                  [ngModel]=\"valueText(config()['metadata'] ?? '')\"\n                  (focusin)=\"setExpressionTarget('config:metadata')\"\n                  (ngModelChange)=\"onConfigFieldChange('metadata', $event)\"\n                  label=\"Metadata\"\n                  hint=\"Additional approval metadata supported by the backend schema.\"\n                  rows=\"4\"\n                />\n              }\n            </div>\n          }\n          <div class=\"mt-3 flex gap-2\">\n            <mt-button size=\"small\" variant=\"outlined\" label=\"Validate assignment\" (onClick)=\"validateAssignment()\" />\n          </div>\n          @if (assignmentValidation(); as result) {\n            <div class=\"mt-3 rounded-lg bg-(--p-surface-100) px-3 py-2 text-[12px]\">\n              {{ result.isValid === false ? \"Assignment invalid\" : \"Assignment accepted by helper\" }}\n              @for (issue of resultIssues(result); track issue) {\n                <div class=\"mt-1 text-[11px] text-(--p-text-muted-color)\">{{ issue }}</div>\n              }\n            </div>\n          }\n          @if (sectionInMain(\"approvalOutput\")) {\n            <div class=\"mt-3 rounded-md border border-surface-200 bg-surface-0 p-3\">\n              <div class=\"fp-ae-label mb-2\">Output data</div>\n              <div class=\"flex flex-wrap gap-1.5\">\n                @for (field of approvalOutputFieldLabels; track field) {\n                  <span class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\">{{ field }}</span>\n                }\n              </div>\n              <div class=\"mt-3 fp-ae-label mb-2\">Approval routes</div>\n              <div class=\"flex flex-wrap gap-1.5\">\n                @for (key of routeOutputKeys(); track key) {\n                  <span class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\">{{ key }}</span>\n                }\n              </div>\n            </div>\n          }\n        </section>\n        }\n      }\n      @case (\"FlowPlusCommit\") {\n        @if (sectionInMain(\"flowplusCommit\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">FlowPlus commit</div>\n          <p class=\"fp-ae-copy\">\n            This node is the explicit module-data write boundary. Approval does\n            not commit data unless this node is reached.\n          </p>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-select-field\n              [ngModel]=\"config()['targetModule'] ?? ''\"\n              (ngModelChange)=\"onModuleChange($event)\"\n              label=\"Module\"\n              hint=\"Module whose records will be written by this explicit FlowPlus commit.\"\n              [options]=\"moduleOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-select-field\n              [ngModel]=\"config()['operation'] ?? ''\"\n              (ngModelChange)=\"onConfigFieldChange('operation', $event)\"\n              label=\"Operation\"\n              hint=\"Write operation supported by the selected backend module schema.\"\n              [options]=\"operationOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n          </div>\n          <mt-text-field\n            class=\"mt-3 font-mono\"\n            [ngModel]=\"config()['idempotencyKey'] ?? ''\"\n            (focusin)=\"setExpressionTarget('config:idempotencyKey')\"\n            (ngModelChange)=\"onConfigFieldChange('idempotencyKey', $event)\"\n            label=\"Idempotency key\"\n            hint=\"Optional stable key used by the backend to prevent duplicate writes.\"\n          />\n          @if (selectedModuleFields().length) {\n            <div class=\"mt-3 space-y-2\">\n              <div class=\"fp-ae-section-title\">Module schema</div>\n              <div class=\"grid gap-2 md:grid-cols-2\">\n                @for (field of selectedModuleFields(); track field.key) {\n                  <div class=\"fp-ae-kv\">\n                    <span>{{ field.displayName ?? field.key }}</span>\n                    <strong>{{ field.viewType ?? \"Value\" }} @if (field.required) { * }</strong>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n          <div class=\"mt-3\">\n            <ng-container *ngTemplateOutlet=\"mapEditor; context: { objectKey: 'mapping', rows: mappingRows(), keyLabel: 'Module field', valueLabel: 'Expression / value', addLabel: 'Add module field' }\" />\n          </div>\n          <div class=\"mt-3 flex gap-2\">\n            <mt-button size=\"small\" severity=\"primary\" label=\"Validate mapping\" (onClick)=\"validateCommitMapping()\" />\n          </div>\n          @if (commitValidation(); as result) {\n            <div class=\"mt-3 rounded-lg bg-(--p-surface-100) px-3 py-2 text-[12px]\">\n              {{ result.isValid === false ? \"Mapping invalid\" : \"Mapping accepted by helper\" }}\n              @for (issue of resultIssues(result); track issue) {\n                <div class=\"mt-1 text-[11px] text-(--p-text-muted-color)\">{{ issue }}</div>\n              }\n            </div>\n          }\n          @if (sectionInMain(\"credentials\")) {\n            <div class=\"mt-3 rounded-md border border-surface-200 bg-surface-0 p-3\">\n              <div class=\"fp-ae-label mb-2\">Credential</div>\n              <ng-container *ngTemplateOutlet=\"credentialSelector\" />\n            </div>\n          }\n        </section>\n        }\n      }\n      @case (\"WebhookResponse\") {\n        @if (sectionInMain(\"webhookResponse\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Webhook response</div>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-number-field\n              [ngModel]=\"numberValue(config()['statusCode']) ?? 200\"\n              (ngModelChange)=\"onConfigFieldChange('statusCode', $event)\"\n              label=\"Status code\"\n              hint=\"HTTP status code sent back by the webhook response node.\"\n              [min]=\"100\"\n              [max]=\"599\"\n            />\n            <mt-select-field\n              [ngModel]=\"config()['responseMode'] ?? 'json'\"\n              (ngModelChange)=\"onConfigFieldChange('responseMode', $event)\"\n              label=\"Response mode\"\n              hint=\"How the webhook response body should be serialized.\"\n              [options]=\"responseModeOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n          </div>\n          <div class=\"mt-3\">\n            <ng-container *ngTemplateOutlet=\"mapEditor; context: { objectKey: 'headers', rows: headerRows(), keyLabel: 'Header', valueLabel: 'Value', addLabel: 'Add header' }\" />\n          </div>\n          <mt-textarea-field\n            class=\"mt-3 w-full font-mono\"\n            [ngModel]=\"valueText(config()['body'] ?? '')\"\n            (focusin)=\"setExpressionTarget('config:body')\"\n            (ngModelChange)=\"onConfigFieldChange('body', $event)\"\n            label=\"Body\"\n            hint=\"Body returned to the webhook caller. Expressions can use current execution data.\"\n            rows=\"6\"\n          />\n        </section>\n        }\n      }\n      @case (\"CallAutomation\") {\n        @if (sectionInMain(\"callAutomation\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Subworkflow</div>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-select-field\n              [ngModel]=\"config()['targetAutomationId'] ?? ''\"\n              (ngModelChange)=\"onSubworkflowTargetChange($event)\"\n              label=\"Target automation\"\n              hint=\"Backend-provided automation candidate. Tenant and recursion validation stay on the backend.\"\n              [options]=\"subworkflowAutomationOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-select-field\n              [ngModel]=\"config()['revisionMode'] ?? 'Active'\"\n              (ngModelChange)=\"onConfigFieldChange('revisionMode', $event)\"\n              label=\"Revision mode\"\n              hint=\"Choose which published or active child revision to call.\"\n              [options]=\"revisionModeOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            @if (config()['revisionMode'] === \"SpecificRevision\") {\n              <mt-text-field\n                [ngModel]=\"config()['specificRevisionId'] ?? ''\"\n                (ngModelChange)=\"onConfigFieldChange('specificRevisionId', $event)\"\n                label=\"Specific revision id\"\n                hint=\"Required only when revision mode is Specific revision.\"\n              />\n            }\n            <mt-toggle-field\n              size=\"small\"\n              labelPosition=\"end\"\n              [ngModel]=\"config()['waitForCompletion'] !== false\"\n              (ngModelChange)=\"onConfigFieldChange('waitForCompletion', $event === true)\"\n              label=\"Wait for completion\"\n              hint=\"When disabled, the parent continues after dispatch and backend records the child linkage.\"\n            />\n          </div>\n          <div class=\"mt-3 grid gap-3 md:grid-cols-2\">\n            <mt-textarea-field\n              class=\"w-full font-mono md:col-span-2\"\n              [ngModel]=\"valueText(config()['inputMappingJson'] ?? '{}')\"\n              (focusin)=\"setExpressionTarget('config:inputMappingJson')\"\n              (ngModelChange)=\"onConfigFieldChange('inputMappingJson', $event)\"\n              label=\"Input mapping JSON\"\n              hint=\"JSON object or expression map sent into the child automation input.\"\n              rows=\"7\"\n            />\n            <mt-textarea-field\n              class=\"w-full font-mono md:col-span-2\"\n              [ngModel]=\"valueText(config()['outputMappingJson'] ?? '{}')\"\n              (focusin)=\"setExpressionTarget('config:outputMappingJson')\"\n              (ngModelChange)=\"onConfigFieldChange('outputMappingJson', $event)\"\n              label=\"Output mapping JSON\"\n              hint=\"JSON object or expression map for child output/status returned to the parent.\"\n              rows=\"7\"\n            />\n          </div>\n        </section>\n        }\n      }\n      @case (\"Subworkflow\") {\n        @if (sectionInMain(\"callAutomation\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Subworkflow</div>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-select-field\n              [ngModel]=\"config()['targetAutomationId'] ?? ''\"\n              (ngModelChange)=\"onSubworkflowTargetChange($event)\"\n              label=\"Target automation\"\n              hint=\"Backend-provided automation candidate. Tenant and recursion validation stay on the backend.\"\n              [options]=\"subworkflowAutomationOptions()\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-select-field\n              [ngModel]=\"config()['revisionMode'] ?? 'Active'\"\n              (ngModelChange)=\"onConfigFieldChange('revisionMode', $event)\"\n              label=\"Revision mode\"\n              hint=\"Choose which published or active child revision to call.\"\n              [options]=\"revisionModeOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            @if (config()['revisionMode'] === \"SpecificRevision\") {\n              <mt-text-field\n                [ngModel]=\"config()['specificRevisionId'] ?? ''\"\n                (ngModelChange)=\"onConfigFieldChange('specificRevisionId', $event)\"\n                label=\"Specific revision id\"\n                hint=\"Required only when revision mode is Specific revision.\"\n              />\n            }\n            <mt-toggle-field\n              size=\"small\"\n              labelPosition=\"end\"\n              [ngModel]=\"config()['waitForCompletion'] !== false\"\n              (ngModelChange)=\"onConfigFieldChange('waitForCompletion', $event === true)\"\n              label=\"Wait for completion\"\n              hint=\"When disabled, the parent continues after dispatch and backend records the child linkage.\"\n            />\n          </div>\n          <div class=\"mt-3 grid gap-3 md:grid-cols-2\">\n            <mt-textarea-field\n              class=\"w-full font-mono md:col-span-2\"\n              [ngModel]=\"valueText(config()['inputMappingJson'] ?? '{}')\"\n              (focusin)=\"setExpressionTarget('config:inputMappingJson')\"\n              (ngModelChange)=\"onConfigFieldChange('inputMappingJson', $event)\"\n              label=\"Input mapping JSON\"\n              hint=\"JSON object or expression map sent into the child automation input.\"\n              rows=\"7\"\n            />\n            <mt-textarea-field\n              class=\"w-full font-mono md:col-span-2\"\n              [ngModel]=\"valueText(config()['outputMappingJson'] ?? '{}')\"\n              (focusin)=\"setExpressionTarget('config:outputMappingJson')\"\n              (ngModelChange)=\"onConfigFieldChange('outputMappingJson', $event)\"\n              label=\"Output mapping JSON\"\n              hint=\"JSON object or expression map for child output/status returned to the parent.\"\n              rows=\"7\"\n            />\n          </div>\n        </section>\n        }\n      }\n      @case (\"ParallelStart\") {\n        @if (sectionInMain(\"parallelStart\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"flex items-center justify-between gap-3 border-b border-surface-200 bg-surface-50 px-4 py-3\">\n            <div class=\"fp-ae-section-title !m-0\">Parallel start</div>\n            <mt-button size=\"small\" variant=\"outlined\" icon=\"general.plus\" label=\"Add branch\" (onClick)=\"addParallelBranch()\" />\n          </div>\n          <div class=\"space-y-3 p-4\">\n            @for (branch of parallelBranches(); track branch.key; let i = $index) {\n              <div class=\"rounded-md border border-surface-200 bg-surface-0 p-3\">\n                <div class=\"grid gap-3 md:grid-cols-[160px_1fr_1fr_auto]\">\n                  <mt-text-field\n                    class=\"font-mono\"\n                    [ngModel]=\"branch.key\"\n                    (ngModelChange)=\"updateParallelBranch(i, 'key', $event)\"\n                    label=\"Branch key\"\n                    hint=\"Persisted route key. Do not use array index names.\"\n                  />\n                  <mt-text-field\n                    [ngModel]=\"branch.label\"\n                    (ngModelChange)=\"updateParallelBranch(i, 'label', $event)\"\n                    label=\"Label\"\n                    hint=\"Visual branch label. Changing it does not change existing routes.\"\n                  />\n                  <mt-text-field\n                    [ngModel]=\"branch.description\"\n                    (ngModelChange)=\"updateParallelBranch(i, 'description', $event)\"\n                    label=\"Description\"\n                    hint=\"Optional branch note for reviewers.\"\n                  />\n                  <div class=\"flex items-end gap-1\">\n                    <mt-button size=\"small\" variant=\"outlined\" icon=\"arrow.arrow-up\" tooltip=\"Move up\" (onClick)=\"moveParallelBranch(i, -1)\" />\n                    <mt-button size=\"small\" variant=\"outlined\" icon=\"arrow.arrow-down\" tooltip=\"Move down\" (onClick)=\"moveParallelBranch(i, 1)\" />\n                    <mt-button size=\"small\" variant=\"outlined\" severity=\"danger\" icon=\"general.trash-01\" tooltip=\"Remove branch\" (onClick)=\"removeParallelBranch(i)\" />\n                  </div>\n                </div>\n                <div class=\"mt-3 flex flex-wrap items-center gap-1.5 text-[11px]\">\n                  <span class=\"inline-flex h-7 items-center rounded-md border border-surface-200 bg-surface-50 px-2 font-mono font-semibold text-(--p-text-color)\">{{ branch.key }}</span>\n                  <span class=\"inline-flex h-7 items-center rounded-md border border-surface-200 bg-surface-0 px-2 font-medium text-(--p-text-muted-color)\">{{ branch.routeCount }} connected route{{ branch.routeCount === 1 ? \"\" : \"s\" }}</span>\n                </div>\n              </div>\n            }\n            @if (parallelBranches().length === 0) {\n              <p class=\"fp-ae-copy\">Add at least two stable branch keys. Backend validation blocks publish until branches are valid.</p>\n            }\n          </div>\n        </section>\n        }\n      }\n      @case (\"ParallelJoin\") {\n        @if (sectionInMain(\"parallelJoin\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Parallel join</div>\n          <div class=\"grid gap-3 md:grid-cols-2\">\n            <mt-select-field\n              [ngModel]=\"config()['joinPolicy'] ?? 'All'\"\n              (ngModelChange)=\"onConfigFieldChange('joinPolicy', $event)\"\n              label=\"Join policy\"\n              hint=\"Backend policy used to decide when branch wait is complete.\"\n              [options]=\"joinPolicyOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            @if (config()['joinPolicy'] === \"Threshold\") {\n              <mt-number-field\n                [ngModel]=\"numberValue(config()['threshold'])\"\n                (ngModelChange)=\"onConfigFieldChange('threshold', $event)\"\n                label=\"Threshold\"\n                hint=\"Minimum completed branch count required for Threshold policy.\"\n                [min]=\"1\"\n              />\n            }\n            <mt-select-field\n              [ngModel]=\"config()['aggregationStrategy'] ?? 'MergeObjects'\"\n              (ngModelChange)=\"onConfigFieldChange('aggregationStrategy', $event)\"\n              label=\"Aggregation strategy\"\n              hint=\"How backend joins branch outputs into the join node output.\"\n              [options]=\"aggregationStrategyOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n            />\n            <mt-text-field\n              class=\"font-mono\"\n              [ngModel]=\"config()['outputTargetPath'] ?? ''\"\n              (focusin)=\"setExpressionTarget('config:outputTargetPath')\"\n              (ngModelChange)=\"onConfigFieldChange('outputTargetPath', $event)\"\n              label=\"Output target path\"\n              hint=\"Optional context path where joined output should be written.\"\n            />\n          </div>\n        </section>\n        }\n      }\n      @case (\"Switch\") {\n        @if (sectionInMain(\"switch\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">Switch</div>\n          <div class=\"grid gap-4\">\n            <div class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_minmax(280px,0.7fr)]\">\n              <mt-select-field\n                [ngModel]=\"config()['mode'] ?? 'value'\"\n                (ngModelChange)=\"onConfigFieldChange('mode', $event)\"\n                label=\"Mode\"\n                hint=\"Backend evaluation mode: expression, rules, or source-value matching.\"\n                [options]=\"switchModeOptions\"\n                optionValue=\"value\"\n                optionLabel=\"label\"\n              />\n              <mt-toggle-field\n                class=\"self-end pb-1\"\n                size=\"small\"\n                labelPosition=\"end\"\n                [ngModel]=\"config()['firstMatch'] !== false\"\n                (ngModelChange)=\"onConfigFieldChange('firstMatch', $event === true)\"\n                label=\"First match\"\n                hint=\"Use the first matching case unless backend explicitly supports multi-match.\"\n              />\n            </div>\n            @if (showSwitchSourceValue() || showSwitchExpression()) {\n              <div class=\"grid gap-3 md:grid-cols-2\">\n                @if (showSwitchSourceValue()) {\n                  <mt-text-field\n                    [class]=\"showSwitchExpression() ? 'font-mono' : 'font-mono md:col-span-2'\"\n                    [ngModel]=\"config()['sourceValue'] ?? ''\"\n                    (focusin)=\"setExpressionTarget('config:sourceValue')\"\n                    (ngModelChange)=\"onConfigFieldChange('sourceValue', $event)\"\n                    label=\"Source value\"\n                    hint=\"Value or expression used for value matching.\"\n                  />\n                }\n                @if (showSwitchExpression()) {\n                  <mt-text-field\n                    [class]=\"showSwitchSourceValue() ? 'font-mono' : 'font-mono md:col-span-2'\"\n                    [ngModel]=\"config()['expression'] ?? ''\"\n                    (focusin)=\"setExpressionTarget('config:expression')\"\n                    (ngModelChange)=\"onConfigFieldChange('expression', $event)\"\n                    label=\"Expression\"\n                    hint=\"Expression evaluated when mode is expression or rules.\"\n                  />\n                }\n              </div>\n            }\n            <div class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_minmax(280px,0.7fr)]\">\n              @if (showSwitchDefaultOutputKey()) {\n                <mt-text-field\n                  class=\"font-mono\"\n                  [ngModel]=\"config()['defaultOutputKey'] ?? 'default'\"\n                  (ngModelChange)=\"onConfigFieldChange('defaultOutputKey', $event)\"\n                  label=\"Default output key\"\n                  hint=\"Stable default route key used when no case matches.\"\n                />\n              }\n              <mt-toggle-field\n                [class]=\"showSwitchDefaultOutputKey() ? 'self-end pb-1' : 'self-end pb-1 md:col-span-2'\"\n                size=\"small\"\n                labelPosition=\"end\"\n                [ngModel]=\"config()['includeDefaultOutput'] !== false\"\n                (ngModelChange)=\"onConfigFieldChange('includeDefaultOutput', $event === true)\"\n                label=\"Include default output\"\n                hint=\"Expose the default route output key in the canvas.\"\n              />\n            </div>\n          </div>\n        </section>\n        <section class=\"fp-ae-panel\">\n          <div class=\"flex items-center justify-between gap-3 border-b border-surface-200 bg-surface-50 px-4 py-3\">\n            <div class=\"fp-ae-section-title !m-0\">Switch cases</div>\n            <mt-button size=\"small\" variant=\"outlined\" icon=\"general.plus\" label=\"Add case\" (onClick)=\"addSwitchCase()\" />\n          </div>\n          <div class=\"space-y-3 p-4\">\n            @for (item of switchCases(); track item.key; let i = $index) {\n              <div class=\"rounded-md border border-surface-200 bg-surface-0 p-3\">\n                <div class=\"grid gap-3 md:grid-cols-[160px_1fr_1fr_auto]\">\n                  <mt-text-field\n                    class=\"font-mono\"\n                    [ngModel]=\"item.key\"\n                    (ngModelChange)=\"updateSwitchCase(i, 'key', $event)\"\n                    label=\"Case key\"\n                    hint=\"Persisted stable key. The route output becomes case_key.\"\n                  />\n                  <mt-text-field\n                    [ngModel]=\"item.label\"\n                    (ngModelChange)=\"updateSwitchCase(i, 'label', $event)\"\n                    label=\"Label\"\n                    hint=\"Visual case label. Routes stay attached to the case key.\"\n                  />\n                  <mt-text-field\n                    [ngModel]=\"item.value\"\n                    (focusin)=\"setExpressionTarget('config:cases:' + item.key + ':value')\"\n                    (ngModelChange)=\"updateSwitchCase(i, 'value', $event)\"\n                    label=\"Value\"\n                    hint=\"Expected value for value matching.\"\n                  />\n                  <div class=\"flex items-end gap-1\">\n                    <mt-button size=\"small\" variant=\"outlined\" icon=\"arrow.arrow-up\" tooltip=\"Move up\" (onClick)=\"moveSwitchCase(i, -1)\" />\n                    <mt-button size=\"small\" variant=\"outlined\" icon=\"arrow.arrow-down\" tooltip=\"Move down\" (onClick)=\"moveSwitchCase(i, 1)\" />\n                    <mt-button size=\"small\" variant=\"outlined\" severity=\"danger\" icon=\"general.trash-01\" tooltip=\"Remove case\" (onClick)=\"removeSwitchCase(i)\" />\n                  </div>\n                </div>\n                <div class=\"mt-3 grid gap-3 md:grid-cols-2\">\n                  <mt-text-field\n                    class=\"font-mono\"\n                    [ngModel]=\"item.condition\"\n                    (focusin)=\"setExpressionTarget('config:cases:' + item.key + ':condition')\"\n                    (ngModelChange)=\"updateSwitchCase(i, 'condition', $event)\"\n                    label=\"Condition\"\n                    hint=\"Optional condition for rule matching.\"\n                  />\n                  <mt-text-field\n                    class=\"font-mono\"\n                    [ngModel]=\"item.expression\"\n                    (focusin)=\"setExpressionTarget('config:cases:' + item.key + ':expression')\"\n                    (ngModelChange)=\"updateSwitchCase(i, 'expression', $event)\"\n                    label=\"Case expression\"\n                    hint=\"Optional expression for this case.\"\n                  />\n                </div>\n                <div class=\"mt-3 flex flex-wrap items-center gap-1.5 text-[11px]\">\n                  <span class=\"inline-flex h-7 items-center rounded-md border border-surface-200 bg-surface-50 px-2 font-mono font-semibold text-(--p-text-color)\">{{ item.routeKey }}</span>\n                  <span class=\"inline-flex h-7 items-center rounded-md border border-surface-200 bg-surface-0 px-2 font-medium text-(--p-text-muted-color)\">{{ item.routeCount }} connected route{{ item.routeCount === 1 ? \"\" : \"s\" }}</span>\n                  <span class=\"inline-flex h-7 items-center rounded-md border border-surface-200 bg-surface-0 px-2 font-medium text-(--p-text-muted-color)\">Visual order {{ i + 1 }}</span>\n                </div>\n              </div>\n            }\n            @if (switchCases().length === 0) {\n              <p class=\"fp-ae-copy\">Add at least one stable case key. Backend validation points routes at missing case keys if a case is deleted.</p>\n            }\n          </div>\n        </section>\n        }\n      }\n      @case (\"Stop\") {\n        @if (sectionInMain(\"stop\")) {\n        <section class=\"fp-ae-panel\">\n          <div class=\"fp-ae-section-title\">End execution</div>\n          @if (supportsConfigKey('status') || supportsConfigKey('message') || supportsConfigKey('output')) {\n            <div class=\"grid gap-3 md:grid-cols-2\">\n              @if (supportsConfigKey('status')) {\n                <mt-text-field\n                  [ngModel]=\"config()['status'] ?? ''\"\n                  (ngModelChange)=\"onConfigFieldChange('status', $event)\"\n                  label=\"Result status\"\n                  hint=\"Terminal status emitted by the backend stop node.\"\n                />\n              }\n              @if (supportsConfigKey('message')) {\n                <mt-text-field\n                  [ngModel]=\"config()['message'] ?? ''\"\n                  (focusin)=\"setExpressionTarget('config:message')\"\n                  (ngModelChange)=\"onConfigFieldChange('message', $event)\"\n                  label=\"Message\"\n                  hint=\"Optional message or reason saved with the terminal result.\"\n                />\n              }\n              @if (supportsConfigKey('output')) {\n                <mt-textarea-field\n                  class=\"w-full font-mono md:col-span-2\"\n                  [ngModel]=\"valueText(config()['output'] ?? '')\"\n                  (focusin)=\"setExpressionTarget('config:output')\"\n                  (ngModelChange)=\"onConfigFieldChange('output', $event)\"\n                  label=\"Output payload\"\n                  hint=\"Terminal output payload when exposed by the backend schema.\"\n                  rows=\"5\"\n                />\n              }\n            </div>\n          } @else {\n            <p class=\"fp-ae-copy\">\n              This terminal node has no backend-exposed settings. It ends execution when reached.\n            </p>\n          }\n        </section>\n        }\n      }\n    }\n\n    @if (sectionInMain(\"backendSchema\") && step() && editorType() !== \"HumanApproval\") {\n      <section class=\"fp-ae-panel\">\n        <div class=\"fp-ae-section-title\">Output data</div>\n        @if (outputFields().length > 0) {\n          <div class=\"grid gap-2 md:grid-cols-2\">\n            @for (field of outputFields(); track field.key) {\n              <div class=\"fp-ae-kv\">\n                <span>{{ field.label }}</span>\n                <strong>{{ field.type }}</strong>\n              </div>\n            }\n          </div>\n        }\n        @if (routeOutputKeys().length > 0) {\n          <div class=\"mt-3 fp-ae-label mb-2\">Route outputs</div>\n          <div class=\"flex flex-wrap gap-1.5\">\n            @for (key of routeOutputKeys(); track key) {\n              <span class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\">{{ key }}</span>\n            }\n          </div>\n        }\n      </section>\n    }\n\n    @if (sectionInAdvanced(\"mapping\")) {\n      <section class=\"fp-ae-panel\">\n        <div class=\"fp-ae-section-title\">Request and result mapping</div>\n        <div class=\"grid gap-3 md:grid-cols-2\">\n          <div>\n            <div class=\"fp-ae-label mb-2\">Request data</div>\n            @for (row of inputMappingRows(); track row.key) {\n              <label class=\"mb-2 block space-y-1\">\n                <span class=\"text-[11px] text-(--p-text-muted-color)\">{{ row.key }}</span>\n                <mt-text-field\n                  [ngModel]=\"valueText(row.value)\"\n                  (focusin)=\"setExpressionTarget('config:inputMapping:' + row.key)\"\n                  (ngModelChange)=\"updateJsonField('inputMappingJson', row.key, $event)\"\n                  hint=\"Expression or literal value mapped into this node input.\"\n                />\n              </label>\n            }\n          </div>\n          <div>\n            <div class=\"fp-ae-label mb-2\">Output data</div>\n            @for (row of outputMappingRows(); track row.key) {\n              <label class=\"mb-2 block space-y-1\">\n                <span class=\"text-[11px] text-(--p-text-muted-color)\">{{ row.key }}</span>\n                <mt-text-field\n                  [ngModel]=\"valueText(row.value)\"\n                  (focusin)=\"setExpressionTarget('config:outputMapping:' + row.key)\"\n                  (ngModelChange)=\"updateJsonField('outputMappingJson', row.key, $event)\"\n                  hint=\"Expression or literal value mapped from this node output.\"\n                />\n              </label>\n            }\n          </div>\n        </div>\n        @if (\n          sectionHasAdvancedEmptyState(\"mapping\") &&\n          inputMappingRows().length === 0 &&\n          outputMappingRows().length === 0\n        ) {\n          <p class=\"fp-ae-copy mt-3\">\n            This node is using backend default request and output data. Add mappings only when this step needs a custom payload.\n          </p>\n        }\n      </section>\n    }\n\n    @if (sectionInAdvanced(\"credentials\")) {\n      <section class=\"fp-ae-panel\">\n        <div class=\"fp-ae-section-title\">Auth and credentials</div>\n        <ng-container *ngTemplateOutlet=\"credentialSelector\" />\n      </section>\n    }\n\n    @if (sectionInAdvanced(\"policy\")) {\n      <section class=\"fp-ae-panel\">\n        <div class=\"fp-ae-section-title\">Retry, timeout, error policy</div>\n        <div class=\"grid gap-3 md:grid-cols-3\">\n            <mt-number-field\n              [ngModel]=\"numberValue(policyObject('timeoutPolicyJson')['timeoutSeconds'])\"\n              (ngModelChange)=\"updateJsonField('timeoutPolicyJson', 'timeoutSeconds', $event)\"\n              label=\"Timeout seconds\"\n              hint=\"Maximum runtime before the backend times out this node.\"\n              [min]=\"0\"\n            />\n          <mt-number-field\n              [ngModel]=\"numberValue(policyObject('retryPolicyJson')['maxAttempts'])\"\n              (ngModelChange)=\"updateJsonField('retryPolicyJson', 'maxAttempts', $event)\"\n              label=\"Max attempts\"\n              hint=\"Maximum retry attempts after retryable failures.\"\n              [min]=\"0\"\n            />\n            <mt-select-field\n              [ngModel]=\"policyObject('errorPolicyJson')['onFailure'] ?? ''\"\n              (ngModelChange)=\"updateJsonField('errorPolicyJson', 'onFailure', $event)\"\n              label=\"On failure\"\n              hint=\"Backend error policy to apply when this node fails.\"\n              [options]=\"errorPolicyOptions\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n          />\n        </div>\n        @if (sectionHasAdvancedEmptyState(\"policy\")) {\n          <p class=\"fp-ae-copy mt-3\">\n            Backend defaults apply until you override a timeout, retry, or error policy here.\n          </p>\n        }\n      </section>\n    }\n\n    @if (sectionInAdvanced(\"triggerContext\") && trigger()) {\n      <details class=\"fp-ae-panel\" open>\n        <summary class=\"fp-ae-section-title cursor-pointer select-none\">\n          Trigger payload and context\n        </summary>\n        <p class=\"fp-ae-copy mt-3\">\n          Trigger payload/context is documentation for expressions only. Triggers\n          do not edit node input or output mappings here.\n        </p>\n        <div class=\"grid gap-3 md:grid-cols-2\">\n          <details class=\"rounded-lg border border-(--p-content-border-color)\">\n            <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Config schema</summary>\n            <pre class=\"fp-ae-code\">{{ schemaText(configSchema()) }}</pre>\n          </details>\n          @if (hasTriggerPayloadSchema() && triggerPayloadSchema(); as schema) {\n            <details class=\"rounded-lg border border-(--p-content-border-color)\">\n              <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Payload schema</summary>\n              <pre class=\"fp-ae-code\">{{ schemaText(schema) }}</pre>\n            </details>\n          }\n          @if (authPolicySchema()) {\n            <details class=\"rounded-lg border border-(--p-content-border-color)\">\n              <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Auth policy schema</summary>\n              <pre class=\"fp-ae-code\">{{ schemaText(authPolicySchema()) }}</pre>\n            </details>\n          }\n          @if (triggerPayloadSample(); as sample) {\n            <details class=\"rounded-lg border border-(--p-content-border-color)\">\n              <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Payload or request sample</summary>\n              <pre class=\"fp-ae-code\">{{ schemaText(sample) }}</pre>\n            </details>\n          }\n        </div>\n      </details>\n    }\n\n    @if (sectionInAdvanced(\"backendSchema\") && step()) {\n      <details class=\"fp-ae-panel\" open>\n        <summary class=\"fp-ae-section-title cursor-pointer select-none\">\n          Backend schemas and outputs\n        </summary>\n        <div class=\"mt-3 grid gap-3 md:grid-cols-2\">\n          <details class=\"rounded-lg border border-(--p-content-border-color)\">\n            <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Config schema</summary>\n            <pre class=\"fp-ae-code\">{{ schemaText(configSchema()) }}</pre>\n          </details>\n          <details class=\"rounded-lg border border-(--p-content-border-color)\">\n            <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Input schema</summary>\n            <pre class=\"fp-ae-code\">{{ schemaText(inputSchema()) }}</pre>\n          </details>\n          <details class=\"rounded-lg border border-(--p-content-border-color)\">\n            <summary class=\"cursor-pointer px-3 py-2 text-[12px] font-semibold\">Output schema</summary>\n            <pre class=\"fp-ae-code\">{{ schemaText(outputSchema()) }}</pre>\n          </details>\n          <div class=\"rounded-lg border border-(--p-content-border-color) p-3\">\n            <div class=\"fp-ae-label mb-2\">Route output keys</div>\n            <div class=\"flex flex-wrap gap-1.5\">\n              @for (key of routeOutputKeys(); track key) {\n                <span class=\"rounded-md bg-(--p-surface-100) px-2 py-1 font-mono text-[11px]\">{{ key }}</span>\n              }\n              @if (routeOutputKeys().length === 0) {\n                <span class=\"text-[12px] text-(--p-text-muted-color)\">No outgoing route keys</span>\n              }\n            </div>\n          </div>\n        </div>\n      </details>\n    }\n\n    @if (sectionInAdvanced(\"schemaFields\") && configRows().length > 0) {\n      <details class=\"fp-ae-panel\" open>\n        <summary class=\"fp-ae-section-title cursor-pointer select-none\">\n          Backend schema fields\n        </summary>\n        <div class=\"mt-3 grid gap-3 md:grid-cols-2\">\n          @for (field of configRows(); track field.key) {\n            <div\n              class=\"space-y-1.5\"\n              [class.md:col-span-2]=\"field.type === 'object' || field.type === 'array'\"\n            >\n              @if (field.enumValues.length) {\n                <mt-select-field\n                  [ngModel]=\"fieldValue(field.key)\"\n                  (ngModelChange)=\"onConfigFieldChange(field.key, $event)\"\n                  [label]=\"field.label + (field.required ? ' *' : '')\"\n                  [hint]=\"field.description ?? ''\"\n                  [options]=\"enumOptions(field.enumValues)\"\n                  optionValue=\"value\"\n                  optionLabel=\"label\"\n                />\n              } @else if (field.type === \"boolean\") {\n                <mt-toggle-field\n                  size=\"small\"\n                  labelPosition=\"end\"\n                  [ngModel]=\"!!fieldValue(field.key)\"\n                  (ngModelChange)=\"onConfigFieldChange(field.key, $event === true)\"\n                  [label]=\"field.label + (field.required ? ' *' : '')\"\n                  [hint]=\"field.description ?? ''\"\n                />\n              } @else if (field.type === \"number\") {\n                <mt-number-field\n                  [ngModel]=\"numberValue(fieldValue(field.key))\"\n                  (ngModelChange)=\"onConfigFieldChange(field.key, $event)\"\n                  [label]=\"field.label + (field.required ? ' *' : '')\"\n                  [hint]=\"field.description ?? ''\"\n                />\n              } @else if (field.type === \"date\") {\n                <mt-date-field\n                  [ngModel]=\"fieldValue(field.key)\"\n                  (ngModelChange)=\"onConfigFieldChange(field.key, $event)\"\n                  [label]=\"field.label + (field.required ? ' *' : '')\"\n                  [hint]=\"field.description ?? ''\"\n                  [showTime]=\"field.format !== 'date'\"\n                  [showClear]=\"true\"\n                  [pInputs]=\"dateTimePickerInputs\"\n                />\n              } @else if (field.type === \"object\" || field.type === \"array\") {\n                <mt-textarea-field\n                  class=\"w-full font-mono\"\n                  [ngModel]=\"valueText(fieldValue(field.key))\"\n                  (ngModelChange)=\"onConfigFieldChange(field.key, $event)\"\n                  [label]=\"field.label + (field.required ? ' *' : '')\"\n                  [hint]=\"field.description ?? ''\"\n                  rows=\"5\"\n                />\n              } @else {\n                <mt-text-field\n                  [ngModel]=\"fieldText(field.key)\"\n                  (focusin)=\"field.expressionEnabled && setExpressionTarget('config:' + field.key)\"\n                  (ngModelChange)=\"onConfigFieldChange(field.key, $event)\"\n                  [label]=\"field.label + (field.required ? ' *' : '')\"\n                  [hint]=\"field.description ?? ''\"\n                />\n              }\n            </div>\n          }\n        </div>\n      </details>\n    }\n  </div>\n</div>\n\n<ng-template #credentialSelector>\n  @if (credentials().length) {\n    <div class=\"space-y-2\">\n      @for (credential of credentials(); track credential.credentialRef) {\n        <label class=\"flex items-center justify-between gap-3 rounded-lg border border-(--p-content-border-color) bg-(--p-surface-50) px-3 py-2\">\n          <span class=\"min-w-0\">\n            <span class=\"block truncate text-[12px] font-semibold\">{{ credential.displayName ?? credential.credentialRef }}</span>\n            <span class=\"block truncate font-mono text-[11px] text-(--p-text-muted-color)\">\n              {{ credential.credentialRef }} / {{ credential.status ?? (credential.resolved ? \"Resolved\" : \"Unresolved\") }}\n            </span>\n          </span>\n          <span class=\"flex items-center gap-2\">\n            <mt-button\n              size=\"small\"\n              variant=\"text\"\n              label=\"Test\"\n              (onClick)=\"testCredential(credential.credentialRef)\"\n            />\n            <mt-toggle-field\n              size=\"small\"\n              [ngModel]=\"credentialRefs().includes(credential.credentialRef)\"\n              (ngModelChange)=\"toggleCredential(credential.credentialRef, $event === true)\"\n              hint=\"Attach or detach this backend credential reference. Masked secrets are preserved.\"\n            />\n          </span>\n        </label>\n      }\n    </div>\n  } @else if (sectionHasAdvancedEmptyState(\"credentials\")) {\n    <p class=\"fp-ae-copy\">\n      The backend helper did not return credential choices for this node. Existing masked references remain preserved in the saved JSON.\n    </p>\n  }\n  @if (credentialTest(); as test) {\n    <div class=\"mt-3 rounded-lg bg-(--p-surface-100) px-3 py-2 text-[12px]\">\n      {{ test.status ?? (test.succeeded ? \"Succeeded\" : \"Placeholder\") }}\n      @if (test.message) { <span>- {{ test.message }}</span> }\n    </div>\n  }\n</ng-template>\n\n<ng-template\n  #mapEditor\n  let-objectKey=\"objectKey\"\n  let-rows=\"rows\"\n  let-keyLabel=\"keyLabel\"\n  let-valueLabel=\"valueLabel\"\n  let-addLabel=\"addLabel\"\n>\n  <div class=\"space-y-2\">\n    @for (row of rows; track row.key) {\n      <div class=\"grid gap-2 md:grid-cols-[180px_1fr_auto]\">\n        <mt-text-field\n          class=\"font-mono\"\n          [ngModel]=\"row.key\"\n          (ngModelChange)=\"updateObjectRow(objectKey, row.key, $event, row.value)\"\n          [label]=\"keyLabel\"\n          hint=\"Configuration key saved to the backend JSON object.\"\n        />\n        <mt-text-field\n          class=\"font-mono\"\n          [ngModel]=\"valueText(row.value)\"\n          (focusin)=\"setExpressionTarget('config:' + objectKey + ':' + row.key)\"\n          (ngModelChange)=\"updateObjectRow(objectKey, row.key, row.key, $event)\"\n          [label]=\"valueLabel\"\n          hint=\"Configuration value. Use expressions when this field should resolve at runtime.\"\n        />\n        <mt-button\n          class=\"self-end\"\n          size=\"small\"\n          severity=\"secondary\"\n          variant=\"outlined\"\n          label=\"Remove\"\n          (onClick)=\"removeObjectRow(objectKey, row.key)\"\n        />\n      </div>\n    }\n    <mt-button\n      size=\"small\"\n      variant=\"outlined\"\n      [label]=\"addLabel || ('Add ' + keyLabel)\"\n      (onClick)=\"addObjectRow(objectKey)\"\n    />\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }] } });
 function schemaFieldsFrom$1(schema, locale) {
     const raw = asRecord$4(schema);
@@ -13979,6 +14430,7 @@ function normalizeSchemaType(type, format, key = '') {
     }
 }
 function coerceFieldValue(value) {
+    value = selectScalarValue(value);
     if (value instanceof Date)
         return value.toISOString();
     if (typeof value !== 'string')
@@ -14003,6 +14455,29 @@ function coerceFieldValue(value) {
         return false;
     return value;
 }
+function selectScalarValue(value) {
+    if (!value || typeof value !== 'object' || Array.isArray(value)) {
+        return value;
+    }
+    const record = value;
+    return Object.prototype.hasOwnProperty.call(record, 'value')
+        ? record['value']
+        : value;
+}
+function normalizeScheduleMode(value) {
+    const normalized = String(value ?? '').trim().toLowerCase();
+    return normalized === 'interval' || normalized === 'once' ? normalized : 'cron';
+}
+function scheduleModeLabel(mode) {
+    switch (normalizeScheduleMode(mode)) {
+        case 'interval':
+            return 'Interval';
+        case 'once':
+            return 'Once';
+        default:
+            return 'Cron';
+    }
+}
 function isDateLikeConfigKey(key) {
     const normalized = key.trim().toLowerCase();
     return (normalized.includes('date') ||
@@ -18290,6 +18765,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                 type: Output
             }] } });
 
+class CanvasNoteComponent {
+    host = inject((ElementRef));
+    note = input.required(...(ngDevMode ? [{ debugName: "note" }] : /* istanbul ignore next */ []));
+    selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    editing = input(false, ...(ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []));
+    colors = input(CANVAS_NOTE_COLORS, ...(ngDevMode ? [{ debugName: "colors" }] : /* istanbul ignore next */ []));
+    contentChange = output();
+    colorChange = output();
+    duplicate = output();
+    remove = output();
+    editStart = output();
+    editEnd = output();
+    resizeHandle = EFResizeHandleType;
+    draft = signal('', ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    textareaInputs = {
+        spellcheck: true,
+    };
+    color = computed(() => resolveCanvasNoteColor(this.note().color), ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    noteLabel = computed(() => `Canvas note ${this.note().text.split(/\r?\n/)[0] ?? ''}`.trim(), ...(ngDevMode ? [{ debugName: "noteLabel" }] : /* istanbul ignore next */ []));
+    markdownLines = computed(() => parseMarkdown(this.note().text), ...(ngDevMode ? [{ debugName: "markdownLines" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            if (this.editing())
+                return;
+            this.draft.set(this.note().text);
+        });
+        effect(() => {
+            if (!this.editing())
+                return;
+            requestAnimationFrame(() => {
+                this.host.nativeElement.querySelector('textarea')?.focus();
+            });
+        });
+    }
+    startEdit(event) {
+        event?.stopPropagation();
+        this.draft.set(this.note().text);
+        this.editStart.emit({ noteId: this.note().id });
+    }
+    updateDraft(value) {
+        this.draft.set(value ?? '');
+    }
+    finishEdit(event) {
+        event?.stopPropagation();
+        const text = this.draft().trimEnd();
+        if (text !== this.note().text) {
+            this.contentChange.emit({ noteId: this.note().id, text });
+        }
+        this.editEnd.emit({ noteId: this.note().id });
+    }
+    finishEditFromKeyboard(event) {
+        event.preventDefault();
+        this.finishEdit(event);
+    }
+    iconForColor(color) {
+        return color.key === this.note().color ? 'general.check' : undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CanvasNoteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CanvasNoteComponent, isStandalone: true, selector: "fp-canvas-note", inputs: { note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChange: "contentChange", colorChange: "colorChange", duplicate: "duplicate", remove: "remove", editStart: "editStart", editEnd: "editEnd" }, host: { attributes: { "tabindex": "0" }, properties: { "class.is-selected": "selected()", "style.width.px": "note().width", "style.height.px": "note().height", "style.--fp-note-bg": "color().background", "style.--fp-note-border": "color().border", "style.--fp-note-text": "color().text", "attr.aria-label": "noteLabel()" }, classAttribute: "fp-canvas-note-host group/note block touch-none select-none outline-none" }, ngImport: i0, template: "@if (selected()) {\n  <div\n    class=\"absolute -top-10 start-2 z-10 flex items-center gap-1.5 rounded-lg border border-(--p-content-border-color) bg-(--p-content-background)/95 px-1.5 py-1 shadow-lg backdrop-blur\"\n    role=\"toolbar\"\n    [attr.aria-label]=\"'flowplus.canvas.noteActions' | transloco\"\n    fDragBlocker\n    (pointerdown)=\"$event.stopPropagation()\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <mt-button\n      variant=\"text\"\n      severity=\"secondary\"\n      size=\"small\"\n      icon=\"general.edit-05\"\n      styleClass=\"fp-note-tool-button\"\n      [tooltip]=\"'flowplus.canvas.editNote' | transloco\"\n      (onClick)=\"startEdit($event)\"\n    />\n    <mt-button\n      variant=\"text\"\n      severity=\"secondary\"\n      size=\"small\"\n      icon=\"general.copy-05\"\n      styleClass=\"fp-note-tool-button\"\n      [tooltip]=\"'flowplus.canvas.duplicateNote' | transloco\"\n      (onClick)=\"duplicate.emit({ noteId: note().id })\"\n    />\n    <mt-button\n      variant=\"text\"\n      severity=\"danger\"\n      size=\"small\"\n      icon=\"general.trash-01\"\n      styleClass=\"fp-note-tool-button\"\n      [tooltip]=\"'flowplus.canvas.deleteNote' | transloco\"\n      (onClick)=\"remove.emit({ noteId: note().id })\"\n    />\n    <span class=\"mx-1 h-4 w-px bg-(--p-content-border-color)\"></span>\n    @for (option of colors(); track option.key) {\n      <mt-button\n        variant=\"text\"\n        severity=\"secondary\"\n        size=\"small\"\n        [icon]=\"iconForColor(option)\"\n        styleClass=\"fp-note-swatch\"\n        [style.--fp-note-swatch]=\"option.background\"\n        [attr.aria-label]=\"option.label\"\n        [tooltip]=\"option.label\"\n        (onClick)=\"colorChange.emit({ noteId: note().id, color: option.key })\"\n      />\n    }\n  </div>\n}\n\n<article\n  class=\"fp-canvas-note-card relative flex h-full w-full overflow-hidden rounded-[9px] border-2 backdrop-blur-[1px] transition-[border-color,box-shadow,transform] duration-150\"\n  (dblclick)=\"startEdit($event)\"\n>\n  @if (editing()) {\n    <div\n      class=\"flex h-full w-full flex-col p-3\"\n      fDragBlocker\n      (pointerdown)=\"$event.stopPropagation()\"\n      (click)=\"$event.stopPropagation()\"\n      (focusout)=\"finishEdit($event)\"\n    >\n      <mt-textarea-field\n        class=\"fp-note-editor min-h-0 flex-1\"\n        [field]=\"false\"\n        [rows]=\"'8'\"\n        [maxLength]=\"5000\"\n        [pInputs]=\"textareaInputs\"\n        [placeholder]=\"'flowplus.canvas.notePlaceholder' | transloco\"\n        [ngModel]=\"draft()\"\n        (ngModelChange)=\"updateDraft($event)\"\n        (keydown.control.enter)=\"finishEditFromKeyboard($event)\"\n        (keydown.meta.enter)=\"finishEditFromKeyboard($event)\"\n      />\n    </div>\n  } @else {\n    <div class=\"fp-scroll min-h-0 flex-1 overflow-auto px-5 py-4\">\n      @for (line of markdownLines(); track $index) {\n        @if (line.kind === \"empty\") {\n          <div class=\"h-3\"></div>\n        } @else {\n          <p\n            class=\"m-0 max-w-full break-words\"\n            [class.text-[28px]]=\"line.kind === 'h1'\"\n            [class.text-[24px]]=\"line.kind === 'h2'\"\n            [class.text-[15px]]=\"line.kind === 'body'\"\n            [class.font-bold]=\"line.kind !== 'body'\"\n            [class.leading-tight]=\"line.kind !== 'body'\"\n            [class.leading-6]=\"line.kind === 'body'\"\n            [class.mb-2]=\"line.kind !== 'body'\"\n            [class.mb-1]=\"line.kind === 'body'\"\n          >\n            @for (segment of line.segments; track $index) {\n              <span [class.font-bold]=\"segment.bold\">{{ segment.text }}</span>\n            }\n          </p>\n        }\n      }\n    </div>\n  }\n\n  <span\n    fResizeHandle\n    [fResizeHandleType]=\"resizeHandle.RIGHT_BOTTOM\"\n    class=\"fp-note-resize-handle absolute end-1.5 bottom-1.5 h-4 w-4 cursor-nwse-resize rounded-sm border-e-2 border-b-2 opacity-0 transition-opacity\"\n    [attr.aria-label]=\"'flowplus.canvas.resizeNote' | transloco\"\n  ></span>\n</article>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FFlowModule }, { kind: "directive", type: i1$2.FResizeHandleDirective, selector: "[fResizeHandle]", inputs: ["fResizeHandleType"] }, { kind: "directive", type: i1$2.FDragBlockerDirective, selector: "[fDragBlocker]" }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required", "maxLength"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CanvasNoteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fp-canvas-note', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        FFlowModule,
+                        TranslocoModule,
+                        Button,
+                        TextareaField,
+                        Tooltip,
+                        Icon,
+                    ], host: {
+                        class: 'fp-canvas-note-host group/note block touch-none select-none outline-none',
+                        '[class.is-selected]': 'selected()',
+                        '[style.width.px]': 'note().width',
+                        '[style.height.px]': 'note().height',
+                        '[style.--fp-note-bg]': 'color().background',
+                        '[style.--fp-note-border]': 'color().border',
+                        '[style.--fp-note-text]': 'color().text',
+                        '[attr.aria-label]': 'noteLabel()',
+                        tabindex: '0',
+                    }, template: "@if (selected()) {\n  <div\n    class=\"absolute -top-10 start-2 z-10 flex items-center gap-1.5 rounded-lg border border-(--p-content-border-color) bg-(--p-content-background)/95 px-1.5 py-1 shadow-lg backdrop-blur\"\n    role=\"toolbar\"\n    [attr.aria-label]=\"'flowplus.canvas.noteActions' | transloco\"\n    fDragBlocker\n    (pointerdown)=\"$event.stopPropagation()\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <mt-button\n      variant=\"text\"\n      severity=\"secondary\"\n      size=\"small\"\n      icon=\"general.edit-05\"\n      styleClass=\"fp-note-tool-button\"\n      [tooltip]=\"'flowplus.canvas.editNote' | transloco\"\n      (onClick)=\"startEdit($event)\"\n    />\n    <mt-button\n      variant=\"text\"\n      severity=\"secondary\"\n      size=\"small\"\n      icon=\"general.copy-05\"\n      styleClass=\"fp-note-tool-button\"\n      [tooltip]=\"'flowplus.canvas.duplicateNote' | transloco\"\n      (onClick)=\"duplicate.emit({ noteId: note().id })\"\n    />\n    <mt-button\n      variant=\"text\"\n      severity=\"danger\"\n      size=\"small\"\n      icon=\"general.trash-01\"\n      styleClass=\"fp-note-tool-button\"\n      [tooltip]=\"'flowplus.canvas.deleteNote' | transloco\"\n      (onClick)=\"remove.emit({ noteId: note().id })\"\n    />\n    <span class=\"mx-1 h-4 w-px bg-(--p-content-border-color)\"></span>\n    @for (option of colors(); track option.key) {\n      <mt-button\n        variant=\"text\"\n        severity=\"secondary\"\n        size=\"small\"\n        [icon]=\"iconForColor(option)\"\n        styleClass=\"fp-note-swatch\"\n        [style.--fp-note-swatch]=\"option.background\"\n        [attr.aria-label]=\"option.label\"\n        [tooltip]=\"option.label\"\n        (onClick)=\"colorChange.emit({ noteId: note().id, color: option.key })\"\n      />\n    }\n  </div>\n}\n\n<article\n  class=\"fp-canvas-note-card relative flex h-full w-full overflow-hidden rounded-[9px] border-2 backdrop-blur-[1px] transition-[border-color,box-shadow,transform] duration-150\"\n  (dblclick)=\"startEdit($event)\"\n>\n  @if (editing()) {\n    <div\n      class=\"flex h-full w-full flex-col p-3\"\n      fDragBlocker\n      (pointerdown)=\"$event.stopPropagation()\"\n      (click)=\"$event.stopPropagation()\"\n      (focusout)=\"finishEdit($event)\"\n    >\n      <mt-textarea-field\n        class=\"fp-note-editor min-h-0 flex-1\"\n        [field]=\"false\"\n        [rows]=\"'8'\"\n        [maxLength]=\"5000\"\n        [pInputs]=\"textareaInputs\"\n        [placeholder]=\"'flowplus.canvas.notePlaceholder' | transloco\"\n        [ngModel]=\"draft()\"\n        (ngModelChange)=\"updateDraft($event)\"\n        (keydown.control.enter)=\"finishEditFromKeyboard($event)\"\n        (keydown.meta.enter)=\"finishEditFromKeyboard($event)\"\n      />\n    </div>\n  } @else {\n    <div class=\"fp-scroll min-h-0 flex-1 overflow-auto px-5 py-4\">\n      @for (line of markdownLines(); track $index) {\n        @if (line.kind === \"empty\") {\n          <div class=\"h-3\"></div>\n        } @else {\n          <p\n            class=\"m-0 max-w-full break-words\"\n            [class.text-[28px]]=\"line.kind === 'h1'\"\n            [class.text-[24px]]=\"line.kind === 'h2'\"\n            [class.text-[15px]]=\"line.kind === 'body'\"\n            [class.font-bold]=\"line.kind !== 'body'\"\n            [class.leading-tight]=\"line.kind !== 'body'\"\n            [class.leading-6]=\"line.kind === 'body'\"\n            [class.mb-2]=\"line.kind !== 'body'\"\n            [class.mb-1]=\"line.kind === 'body'\"\n          >\n            @for (segment of line.segments; track $index) {\n              <span [class.font-bold]=\"segment.bold\">{{ segment.text }}</span>\n            }\n          </p>\n        }\n      }\n    </div>\n  }\n\n  <span\n    fResizeHandle\n    [fResizeHandleType]=\"resizeHandle.RIGHT_BOTTOM\"\n    class=\"fp-note-resize-handle absolute end-1.5 bottom-1.5 h-4 w-4 cursor-nwse-resize rounded-sm border-e-2 border-b-2 opacity-0 transition-opacity\"\n    [attr.aria-label]=\"'flowplus.canvas.resizeNote' | transloco\"\n  ></span>\n</article>\n" }]
+        }], ctorParameters: () => [], propDecorators: { note: [{ type: i0.Input, args: [{ isSignal: true, alias: "note", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], editing: [{ type: i0.Input, args: [{ isSignal: true, alias: "editing", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], contentChange: [{ type: i0.Output, args: ["contentChange"] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }], duplicate: [{ type: i0.Output, args: ["duplicate"] }], remove: [{ type: i0.Output, args: ["remove"] }], editStart: [{ type: i0.Output, args: ["editStart"] }], editEnd: [{ type: i0.Output, args: ["editEnd"] }] } });
+function parseMarkdown(text) {
+    const rawLines = text.split(/\r?\n/);
+    const lines = rawLines.length ? rawLines : [''];
+    return lines.map((line) => {
+        const trimmed = line.trim();
+        if (!trimmed)
+            return { kind: 'empty', segments: [] };
+        if (trimmed.startsWith('## ')) {
+            return {
+                kind: 'h2',
+                segments: parseInline(trimmed.slice(3).trim()),
+            };
+        }
+        if (trimmed.startsWith('# ')) {
+            return {
+                kind: 'h1',
+                segments: parseInline(trimmed.slice(2).trim()),
+            };
+        }
+        return { kind: 'body', segments: parseInline(line) };
+    });
+}
+function parseInline(text) {
+    const parts = [];
+    let rest = text;
+    while (rest.length) {
+        const start = rest.indexOf('**');
+        if (start < 0) {
+            parts.push({ text: rest, bold: false });
+            break;
+        }
+        if (start > 0) {
+            parts.push({ text: rest.slice(0, start), bold: false });
+        }
+        const afterStart = rest.slice(start + 2);
+        const end = afterStart.indexOf('**');
+        if (end < 0) {
+            parts.push({ text: rest.slice(start), bold: false });
+            break;
+        }
+        parts.push({ text: afterStart.slice(0, end), bold: true });
+        rest = afterStart.slice(end + 2);
+    }
+    return parts;
+}
+
 function canvasIssueSeverity(issues) {
     const list = issues ?? [];
     if (list.some((issue) => issue.severity === 'Error'))
@@ -19240,12 +19844,23 @@ class FlowCanvasComponent {
     canvasBackgroundClick = new EventEmitter();
     /** Add affordance → page opens the left palette (no floating popover). */
     requestAddStep = new EventEmitter();
+    noteUpdate = new EventEmitter();
+    noteDuplicate = new EventEmitter();
+    noteDelete = new EventEmitter();
     /* -------- VM signals -------- */
+    canvasLayers = [
+        EFCanvasLayer.GROUPS,
+        EFCanvasLayer.CONNECTIONS,
+        EFCanvasLayer.NODES,
+    ];
     nodes = computed(() => this.store.nodeVms(), ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+    canvasNotes = computed(() => this.store.canvasNotes(), ...(ngDevMode ? [{ debugName: "canvasNotes" }] : /* istanbul ignore next */ []));
     edges = computed(() => this.store.edgeVms(), ...(ngDevMode ? [{ debugName: "edges" }] : /* istanbul ignore next */ []));
     triggerNodes = computed(() => this.store.triggerNodeVms(), ...(ngDevMode ? [{ debugName: "triggerNodes" }] : /* istanbul ignore next */ []));
     branchLanes = computed(() => this.store.branchLaneVms(), ...(ngDevMode ? [{ debugName: "branchLanes" }] : /* istanbul ignore next */ []));
     viewport = computed(() => this.store.viewport(), ...(ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []));
+    selectedCanvasNoteIds = computed(() => this.store.selectedCanvasNoteIds(), ...(ngDevMode ? [{ debugName: "selectedCanvasNoteIds" }] : /* istanbul ignore next */ []));
+    editingNoteId = signal(null, ...(ngDevMode ? [{ debugName: "editingNoteId" }] : /* istanbul ignore next */ []));
     /**
      * Minimum world size the minimap renders. A very small value (Foblex's
      * default-ish 80) makes one or two nodes fill the whole minimap, which
@@ -19410,7 +20025,7 @@ class FlowCanvasComponent {
     }
     /** Real Foblex nodes on the canvas: steps + virtual trigger nodes. */
     totalNodeCount() {
-        return this.nodes().length + this.triggerNodes().length;
+        return (this.nodes().length + this.triggerNodes().length + this.canvasNotes().length);
     }
     /**
      * Keep the toolbar zoom label and the persisted viewport in sync with
@@ -19452,6 +20067,11 @@ class FlowCanvasComponent {
     focusTrigger(triggerId) {
         this.requestFocus(`trigger:${triggerId}`, false);
     }
+    /** Public: center + select a sticky canvas note. */
+    focusNote(noteId) {
+        this.requestFocus(canvasNoteGroupId(noteId), false);
+        this.store.selectCanvasNote(noteId);
+    }
     /**
      * Public: center + select a connection. Foblex centers nodes/groups, not
      * edges, so we center on the connection's source node and highlight the
@@ -19492,6 +20112,10 @@ class FlowCanvasComponent {
         });
     }
     canvasNodeExists(canvasNodeId) {
+        const noteId = parseCanvasNoteGroupId(canvasNodeId);
+        if (noteId) {
+            return this.canvasNotes().some((note) => note.id === noteId);
+        }
         if (canvasNodeId.startsWith('trigger:')) {
             const tid = Number(canvasNodeId.slice('trigger:'.length));
             return this.triggerNodes().some((t) => t.triggerId === tid);
@@ -19935,7 +20559,17 @@ class FlowCanvasComponent {
     onMoveNodes(event) {
         const nodePositions = [];
         const triggerPositions = [];
+        const notePositions = [];
         for (const move of event.nodes) {
+            const noteId = parseCanvasNoteGroupId(move.id);
+            if (noteId) {
+                notePositions.push({
+                    noteId,
+                    x: move.position.x,
+                    y: move.position.y,
+                });
+                continue;
+            }
             const parsed = parseNodeId(move.id);
             if (parsed.kind === 'step' && parsed.stepId != null) {
                 nodePositions.push({
@@ -19952,18 +20586,49 @@ class FlowCanvasComponent {
                 });
             }
         }
-        this.commitCanvasPositions(nodePositions, triggerPositions);
+        this.commitCanvasPositions(nodePositions, triggerPositions, notePositions);
     }
     onStepPositionChange(stepId, position) {
-        this.commitCanvasPositions([{ stepId, x: position.x, y: position.y }], []);
+        this.commitCanvasPositions([{ stepId, x: position.x, y: position.y }], [], []);
     }
     onTriggerPositionChange(triggerId, position) {
-        this.commitCanvasPositions([], [{ triggerId, x: position.x, y: position.y }]);
+        this.commitCanvasPositions([], [{ triggerId, x: position.x, y: position.y }], []);
+    }
+    onNotePositionChange(noteId, position) {
+        this.commitCanvasPositions([], [], [{ noteId, x: position.x, y: position.y }]);
+    }
+    onNoteSizeChange(noteId, size) {
+        this.noteUpdate.emit({
+            noteId,
+            patch: { width: size.width, height: size.height },
+        });
+    }
+    onNoteContentChange(event) {
+        this.noteUpdate.emit({
+            noteId: event.noteId,
+            patch: { text: event.text },
+        });
+    }
+    onNoteColorChange(event) {
+        this.noteUpdate.emit({
+            noteId: event.noteId,
+            patch: { color: event.color },
+        });
+    }
+    onNoteDuplicate(event) {
+        this.noteDuplicate.emit(event);
+    }
+    onNoteDelete(event) {
+        this.noteDelete.emit(event);
     }
-    commitCanvasPositions(nodes, triggers) {
-        if (!nodes.length && !triggers.length)
+    onNoteEditStart(noteId) {
+        this.store.selectCanvasNote(noteId);
+        this.editingNoteId.set(noteId);
+    }
+    commitCanvasPositions(nodes, triggers, notes = []) {
+        if (!nodes.length && !triggers.length && !notes.length)
             return false;
-        const changed = this.store.setLayoutPositions({ nodes, triggers }, { scheduleSave: !this.positionDragActive });
+        const changed = this.store.setLayoutPositions({ nodes, triggers, notes }, { scheduleSave: !this.positionDragActive });
         if (this.positionDragActive && changed) {
             this.positionChangedDuringDrag = true;
         }
@@ -19971,7 +20636,7 @@ class FlowCanvasComponent {
     }
     syncCanvasPositionsFromDom() {
         const positions = this.readCanvasPositionSnapshot();
-        return this.commitCanvasPositions(positions.nodes, positions.triggers);
+        return this.commitCanvasPositions(positions.nodes, positions.triggers, positions.notes);
     }
     syncStableCanvasPositions() {
         if (this.isPositionSyncSuppressed())
@@ -19982,7 +20647,7 @@ class FlowCanvasComponent {
             this.lastObservedPositionSignature = signature;
             return;
         }
-        const changed = this.commitCanvasPositions(positions.nodes, positions.triggers);
+        const changed = this.commitCanvasPositions(positions.nodes, positions.triggers, positions.notes);
         if (this.positionDragActive) {
             const shouldSave = changed || this.positionChangedDuringDrag;
             this.positionDragActive = false;
@@ -20015,7 +20680,16 @@ class FlowCanvasComponent {
                 : null;
         })
             .filter((item) => item != null);
-        return { nodes, triggers };
+        const notes = Array.from(this.hostEl.querySelectorAll('fp-canvas-note[data-fp-note]'))
+            .map((el) => {
+            const noteId = el.dataset['fpNote'];
+            const position = readTranslatePosition(el);
+            return noteId && position
+                ? { noteId, x: position.x, y: position.y }
+                : null;
+        })
+            .filter((item) => item != null);
+        return { nodes, triggers, notes };
     }
     schedulePointerPositionSync(delayMs) {
         if (this.isPositionSyncSuppressed())
@@ -20135,8 +20809,18 @@ class FlowCanvasComponent {
             if (c != null)
                 connectionIds.push(c);
         }
-        this.store.setSelectionFromCanvas(stepIds, connectionIds);
-        if (stepIds.length === 0 && connectionIds.length === 0) {
+        const canvasNoteIds = [];
+        for (const id of event.fGroupIds) {
+            const noteId = parseCanvasNoteGroupId(id);
+            if (noteId)
+                canvasNoteIds.push(noteId);
+        }
+        this.store.setSelectionFromCanvas(stepIds, connectionIds, canvasNoteIds);
+        if (!canvasNoteIds.length)
+            this.editingNoteId.set(null);
+        if (stepIds.length === 0 &&
+            connectionIds.length === 0 &&
+            canvasNoteIds.length === 0) {
             this.canvasBackgroundClick.emit();
         }
     }
@@ -20194,6 +20878,9 @@ class FlowCanvasComponent {
     isConnectionSelected(connectionId) {
         return this.selectionConnectionIds().includes(connectionId);
     }
+    canvasNoteGroupId(noteId) {
+        return canvasNoteGroupId(noteId);
+    }
     /* -------- node hover-bar forwards -------- */
     onNodeQuickAdd(e) {
         this.nodeQuickAdd.emit(e);
@@ -20247,7 +20934,7 @@ class FlowCanvasComponent {
         this.triggerStartDisconnect.emit(e);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FlowCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: FlowCanvasComponent, isStandalone: true, selector: "fp-flow-canvas", outputs: { paletteDrop: "paletteDrop", connectionCreate: "connectionCreate", connectionReassign: "connectionReassign", triggerStartConnect: "triggerStartConnect", triggerStartReassign: "triggerStartReassign", triggerStartDisconnect: "triggerStartDisconnect", connectionQuickAdd: "connectionQuickAdd", quickAddPick: "quickAddPick", autoLayoutRequested: "autoLayoutRequested", loaded: "loaded", nodeQuickAdd: "nodeQuickAdd", nodePortPlusClick: "nodePortPlusClick", nodeDuplicate: "nodeDuplicate", nodeRemove: "nodeRemove", nodeOpenDetails: "nodeOpenDetails", edgeInsertStep: "edgeInsertStep", edgeRemove: "edgeRemove", edgeEditFormula: "edgeEditFormula", edgeOpenDetails: "edgeOpenDetails", assignNodeToConnection: "assignNodeToConnection", openChildWorkflow: "openChildWorkflow", starterAddTrigger: "starterAddTrigger", triggerOpenDetails: "triggerOpenDetails", triggerExecute: "triggerExecute", triggerToggleEnabled: "triggerToggleEnabled", triggerDelete: "triggerDelete", canvasBackgroundClick: "canvasBackgroundClick", requestAddStep: "requestAddStep" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: FlowCanvasComponent, isStandalone: true, selector: "fp-flow-canvas", outputs: { paletteDrop: "paletteDrop", connectionCreate: "connectionCreate", connectionReassign: "connectionReassign", triggerStartConnect: "triggerStartConnect", triggerStartReassign: "triggerStartReassign", triggerStartDisconnect: "triggerStartDisconnect", connectionQuickAdd: "connectionQuickAdd", quickAddPick: "quickAddPick", autoLayoutRequested: "autoLayoutRequested", loaded: "loaded", nodeQuickAdd: "nodeQuickAdd", nodePortPlusClick: "nodePortPlusClick", nodeDuplicate: "nodeDuplicate", nodeRemove: "nodeRemove", nodeOpenDetails: "nodeOpenDetails", edgeInsertStep: "edgeInsertStep", edgeRemove: "edgeRemove", edgeEditFormula: "edgeEditFormula", edgeOpenDetails: "edgeOpenDetails", assignNodeToConnection: "assignNodeToConnection", openChildWorkflow: "openChildWorkflow", starterAddTrigger: "starterAddTrigger", triggerOpenDetails: "triggerOpenDetails", triggerExecute: "triggerExecute", triggerToggleEnabled: "triggerToggleEnabled", triggerDelete: "triggerDelete", canvasBackgroundClick: "canvasBackgroundClick", requestAddStep: "requestAddStep", noteUpdate: "noteUpdate", noteDuplicate: "noteDuplicate", noteDelete: "noteDelete" }, providers: [
             provideFFlow({ id: 'flowplus-builder' }, withReflowOnResize({
                 collision: EFReflowCollision.STOP,
                 deltaSource: EFReflowDeltaSource.EDGE_BASED,
@@ -20255,7 +20942,7 @@ class FlowCanvasComponent {
                 maxCascadeDepth: 8,
                 maxAbsoluteShiftPerPlan: 10000,
             })),
-        ], viewQueries: [{ propertyName: "flow", first: true, predicate: ["flow"], descendants: true, isSignal: true }, { propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: "<f-flow\n  #flow\n  fDraggable\n  [vCellSize]=\"gridCellSize\"\n  [hCellSize]=\"gridCellSize\"\n  [fCellSizeWhileDragging]=\"false\"\n  (fFullRendered)=\"onFullRendered()\"\n  (fNodesRendered)=\"onNodesRendered()\"\n  (fCreateNode)=\"onCreateNode($event)\"\n  (fCreateConnection)=\"onCreateConnection($event)\"\n  (fReassignConnection)=\"onReassignConnection($event)\"\n  (fDragStarted)=\"onDragStarted($event)\"\n  (fDragEnded)=\"onDragEnded()\"\n  (fMoveNodes)=\"onMoveNodes($event)\"\n  (fSelectionChange)=\"onSelectionChange($event)\"\n>\n  <!-- Background dot grid \u2014 its spacing is locked to the drag cell size so\n       nodes snap exactly onto the visible dots (Foblex grid-system). -->\n  <f-background>\n    <f-circle-pattern [radius]=\"gridCellSize\" />\n  </f-background>\n\n  <!-- Alignment guides + marquee selection are `f-flow` children (NOT\n       `f-canvas` children \u2014 `f-canvas` only projects connections/nodes/groups,\n       so helpers placed inside it are silently dropped). This mirrors the\n       Foblex call-center reference layout. -->\n  <f-line-alignment [fAlignThreshold]=\"20\" />\n  <f-selection-area />\n\n  <!-- Auto-pan: when dragging a node / connection near the viewport edge, the\n       canvas pans to follow, so you can wire across off-screen nodes without\n       letting go. (Foblex `f-auto-pan` plugin.) -->\n  <f-auto-pan [fEdgeThreshold]=\"36\" [fSpeed]=\"8\" />\n\n  <f-canvas\n    #canvas\n    fZoom\n    [debounceTime]=\"200\"\n    (fCanvasChange)=\"onCanvasChange($event)\"\n  >\n    <!-- Floating behavior anchors the preview at the connector boundary along\n         the center\u2192pointer axis, so a connection dragged from the \"+\" outlet\n         leaves it cleanly (NOT from its bottom edge \u2014 `fixed` defaults an AUTO\n         connectable side to bottom) and snaps to the target's nearest edge. -->\n    <f-connection-for-create\n      [fBehavior]=\"'floating'\"\n      fType=\"adaptive-curve\"\n      [fOffset]=\"0\"\n    >\n      <f-connection-marker-arrow />\n    </f-connection-for-create>\n\n    <!-- Auto-snap: while dragging a new/reassigned connection, snap to the\n         nearest connector within the threshold (forgiving connect UX). -->\n    <f-snap-connection\n      [fBehavior]=\"'floating'\"\n      fType=\"adaptive-curve\"\n      [fSnapThreshold]=\"40\"\n      [fOffset]=\"0\"\n    >\n      <f-connection-marker-arrow />\n    </f-snap-connection>\n\n    <!-- ngProjectAs is REQUIRED: `f-canvas` distributes projected content\n         into its layer containers via selective `<ng-content select=\"...\">`\n         with NO catch-all slot. A wrapper component (`fp-flow-node`, etc.)\n         does not match `[fNode]` / `f-connection` on its host, so without\n         `ngProjectAs` Foblex silently drops it and the canvas renders empty.\n         The actual Foblex directive lives on the wrapper's inner element and\n         self-registers via the mediator, so routing the wrapper into the\n         right layer is all that's needed. -->\n    @for (lane of branchLanes(); track lane.id) {\n      <div\n        ngProjectAs=\"[fGroup]\"\n        class=\"pointer-events-none absolute z-0 rounded-[14px] border border-dashed border-[color-mix(in_srgb,rgb(var(--fp-parallel))_55%,transparent)] bg-[color-mix(in_srgb,rgb(var(--fp-parallel))_8%,transparent)]\"\n        [attr.data-color-token]=\"lane.colorToken\"\n        [style.left.px]=\"lane.x\"\n        [style.top.px]=\"lane.y\"\n        [style.width.px]=\"lane.width\"\n        [style.height.px]=\"lane.height\"\n      >\n        <span\n          class=\"pointer-events-auto absolute -top-2.5 start-3 rounded-full border border-[color-mix(in_srgb,rgb(var(--fp-parallel))_40%,transparent)] bg-(--p-content-background) px-2 py-px text-[10.5px] font-semibold text-[rgb(var(--fp-parallel))]\"\n          >{{ lane.label }}</span\n        >\n      </div>\n    }\n\n    <!-- Connections are inlined here (NOT wrapped in a component) so each\n         <f-connection> is a DIRECT child of Foblex's connections container.\n         A wrapper would make `hostElement.parentElement` the wrapper instead\n         of the container, which makes Foblex's select layer-raise throw\n         \"Unknown container\" the moment an edge is selected. Same call-center\n         pattern used for nodes/triggers. -->\n    @for (edge of edges(); track edge.id) {\n      <f-connection\n        class=\"group\"\n        [attr.data-fp-edge]=\"edge.connectionId\"\n        [fConnectionId]=\"edge.id\"\n        [fOutputId]=\"edge.sourcePortId\"\n        [fInputId]=\"edge.targetPortId\"\n        [fBehavior]=\"'fixed'\"\n        [fType]=\"'adaptive-curve'\"\n        [fOffset]=\"32\"\n        fInputSide=\"calculate\"\n        [fReassignableStart]=\"edge.edgeKind !== 'triggerStart'\"\n        [fReassignDisabled]=\"edge.edgeKind === 'triggerStart'\"\n        [class.fp-edge]=\"true\"\n        [class.is-trigger-start]=\"edge.edgeKind === 'triggerStart'\"\n        [class.is-drop-target]=\"isDropTargetEdge(edge.connectionId)\"\n        [class.is-selected]=\"isConnectionSelected(edge.connectionId)\"\n        [class.is-error]=\"edge.isInvalid\"\n        [class.is-formula]=\"edge.isFormula\"\n        [class.is-runtime-active]=\"edge.runtimeState === 'active'\"\n        [class.is-runtime-completed]=\"edge.runtimeState === 'completed'\"\n        [class.is-runtime-failed]=\"edge.runtimeState === 'failed'\"\n        [class.is-runtime-waiting]=\"edge.runtimeState === 'waiting'\"\n        (dblclick)=\"\n          edge.edgeKind === 'triggerStart' && edge.triggerId != null\n            ? onTriggerOpenDetails({ triggerId: edge.triggerId })\n            : onEdgeOpenDetails({ connectionId: edge.connectionId })\n        \"\n      >\n        <!-- Arrow marker at the target \u2014 the connection carries the arrowhead;\n             the input lives on the node host (no separate input element). -->\n        <f-connection-marker-arrow [type]=\"markerEnd\" />\n\n        <!-- Editable waypoints are intentionally NOT rendered: there is no\n             backend persistence wired for manual bends, so exposing draggable\n             waypoints would silently lose the user's edits on reload. -->\n\n        <!-- Label / formula badge \u2014 pinned to the CENTER of the line\n             (connection-content position 0.5). Fades out on hover/selected so\n             the centered action box can take its place. -->\n        @if (edge.label) {\n          <div\n            fConnectionContent\n            [position]=\"0.5\"\n            class=\"pointer-events-none opacity-100 transition-opacity duration-150 group-hover:opacity-0 group-[.is-selected]:opacity-0\"\n          >\n            <span\n              class=\"inline-flex items-center gap-1.5 whitespace-nowrap rounded-full border border-[rgb(var(--fp-connector))] bg-(--p-content-background) py-1 pe-2.5 ps-2 text-[11px] font-semibold text-(--p-text-color) shadow-[0_1px_3px_rgba(15,23,42,0.1)] transition-colors group-[.is-selected]:border-(--p-primary-color) group-[.is-selected]:text-(--p-primary-color)\"\n            >\n              <span\n                class=\"size-1.5 flex-none rounded-full bg-[rgb(var(--fp-connector))] group-[.is-selected]:bg-(--p-primary-color)\"\n              ></span>\n              {{ edge.label }}\n            </span>\n          </div>\n        } @else if (edge.isFormula) {\n          <div\n            fConnectionContent\n            [position]=\"0.5\"\n            class=\"pointer-events-none opacity-100 transition-opacity duration-150 group-hover:opacity-0 group-[.is-selected]:opacity-0\"\n          >\n            <span\n              class=\"grid h-5 w-5 place-items-center rounded-full border border-(--p-content-border-color) bg-(--p-content-background) font-mono text-[12px] italic text-(--p-primary-color) shadow-sm\"\n              title=\"Conditional route\"\n              >\u0192</span\n            >\n          </div>\n        }\n\n        <!-- Centered action box \u2014 edit (opens the connection MODAL) + delete.\n             Same content anchor (position 0.5), revealed on hover/selected and\n             overlapping the label so the actions stay centered ON the line. -->\n        @if (edgeIssueCount(edge) > 0) {\n          <div\n            fConnectionContent\n            [position]=\"0.38\"\n            class=\"pointer-events-auto\"\n          >\n            <span\n              class=\"fp-node-badge grid h-[18px] w-[18px] cursor-help place-items-center rounded-sm bg-(--p-content-background) shadow-sm outline-none transition-transform focus-visible:ring-2 focus-visible:ring-(--p-primary-color)\"\n              [style.color]=\"edgeIssueColor(edge)\"\n              tabindex=\"0\"\n              role=\"img\"\n              [attr.aria-label]=\"edgeIssueTooltip(edge)\"\n              [mtTooltip]=\"edgeIssueTooltip(edge)\"\n              [tooltipStyleClass]=\"edgeIssueTooltipClass(edge)\"\n              tooltipPosition=\"top\"\n              appendTo=\"body\"\n              [escape]=\"true\"\n              [showDelay]=\"180\"\n              [hideDelay]=\"80\"\n              (pointerdown)=\"$event.stopPropagation()\"\n              (click)=\"\n                $event.stopPropagation();\n                edge.edgeKind === 'triggerStart' && edge.triggerId != null\n                  ? onTriggerOpenDetails({ triggerId: edge.triggerId })\n                  : onEdgeOpenDetails({ connectionId: edge.connectionId })\n              \"\n              (dblclick)=\"$event.stopPropagation()\"\n            >\n              <svg width=\"15\" height=\"15\" viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n                <path\n                  d=\"M10 3.4 18 16.8 2 16.8 Z\"\n                  fill=\"currentColor\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2.6\"\n                  stroke-linejoin=\"round\"\n                />\n                <rect x=\"9.05\" y=\"8\" width=\"1.9\" height=\"4.6\" rx=\"0.95\" fill=\"#fff\" />\n                <circle cx=\"10\" cy=\"14.6\" r=\"1.05\" fill=\"#fff\" />\n              </svg>\n            </span>\n          </div>\n        }\n\n        @if (edge.runtimeState && edge.runtimeTooltip) {\n          <div\n            fConnectionContent\n            [position]=\"0.62\"\n            class=\"pointer-events-auto\"\n          >\n            <span\n              class=\"inline-flex h-[18px] w-[18px] cursor-help items-center justify-center rounded-full border bg-(--p-content-background) shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-(--p-primary-color)\"\n              [class.animate-pulse]=\"edge.runtimeState === 'active'\"\n              [style.borderColor]=\"edgeRuntimeColor(edge)\"\n              [style.color]=\"edgeRuntimeColor(edge)\"\n              tabindex=\"0\"\n              role=\"status\"\n              [attr.aria-label]=\"edge.runtimeTooltip\"\n              [mtTooltip]=\"edge.runtimeTooltip\"\n              tooltipPosition=\"top\"\n              appendTo=\"body\"\n              [escape]=\"true\"\n              [showDelay]=\"180\"\n              [hideDelay]=\"80\"\n              (pointerdown)=\"$event.stopPropagation()\"\n              (click)=\"$event.stopPropagation()\"\n              (dblclick)=\"$event.stopPropagation()\"\n            >\n              <mt-icon [icon]=\"edgeRuntimeIcon(edge)\" class=\"[&_svg]:size-3\" />\n            </span>\n          </div>\n        }\n\n        <div\n          fConnectionContent\n          [position]=\"0.5\"\n          class=\"pointer-events-none opacity-0 transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100 group-[.is-selected]:pointer-events-auto group-[.is-selected]:opacity-100\"\n        >\n          <div\n            class=\"flex items-center gap-0.5 rounded-lg border border-(--p-content-border-color) bg-(--p-content-background) p-1 shadow-md\"\n            role=\"toolbar\"\n            aria-label=\"Connection actions\"\n            (pointerdown)=\"$event.stopPropagation()\"\n            (click)=\"$event.stopPropagation()\"\n          >\n            @if (edge.edgeKind === \"triggerStart\" && edge.triggerId != null) {\n              <mt-button\n                variant=\"text\"\n                severity=\"secondary\"\n                size=\"small\"\n                icon=\"general.settings-01\"\n                [tooltip]=\"'flowplus.trigger.node.configure' | transloco\"\n                (onClick)=\"onTriggerOpenDetails({ triggerId: edge.triggerId })\"\n              />\n              <mt-button\n                variant=\"text\"\n                severity=\"danger\"\n                size=\"small\"\n                icon=\"general.link-broken-01\"\n                [tooltip]=\"'flowplus.trigger.node.unlink' | transloco\"\n                (onClick)=\"\n                  onTriggerStartDisconnect({ triggerId: edge.triggerId })\n                \"\n              />\n            } @else {\n              <mt-button\n                variant=\"text\"\n                severity=\"secondary\"\n                size=\"small\"\n                icon=\"general.edit-05\"\n                [tooltip]=\"'flowplus.inspector.connection.title' | transloco\"\n                (onClick)=\"\n                  onEdgeOpenDetails({ connectionId: edge.connectionId })\n                \"\n              />\n              <mt-button\n                variant=\"text\"\n                severity=\"danger\"\n                size=\"small\"\n                icon=\"general.trash-01\"\n                [tooltip]=\"'flowplus.edge.delete' | transloco\"\n                (onClick)=\"onEdgeRemove({ connectionId: edge.connectionId })\"\n              />\n            }\n          </div>\n        </div>\n      </f-connection>\n    }\n\n    <!-- The Foblex `fNode` directive lives on the component element itself\n         (not an inner div). This keeps the node element a DIRECT child of\n         Foblex's nodes container, so `hostElement.parentElement` IS that\n         container \u2014 required by the select/move layer-raise (otherwise it\n         throws \"Unknown container\"). This is the Foblex call-center pattern;\n         the `fNode` attribute also routes it into the `[fNode]` projection\n         slot, so `ngProjectAs` is not needed. -->\n    @for (node of nodes(); track node.id) {\n      <fp-flow-node\n        fNode\n        fDragHandle\n        fNodeInput\n        [attr.data-fp-node]=\"node.stepId\"\n        [fInputId]=\"node.inputs[0]?.id\"\n        [fInputMultiple]=\"node.inputs[0]?.allowMultiple ?? true\"\n        [fInputDisabled]=\"!node.inputs.length\"\n        [fNodeId]=\"node.id\"\n        [fNodePosition]=\"{ x: node.x, y: node.y }\"\n        (fNodePositionChange)=\"onStepPositionChange(node.stepId, $event)\"\n        [node]=\"node\"\n        [connectedOutputKeys]=\"connectedOutputKeys(node.stepId)\"\n        (quickAdd)=\"onNodeQuickAdd($event)\"\n        (portPlusClick)=\"onNodePortPlus($event)\"\n        (duplicate)=\"onNodeDuplicate($event)\"\n        (remove)=\"onNodeRemove($event)\"\n        (openDetails)=\"onNodeOpenDetails($event)\"\n        (openChild)=\"onOpenChild($event)\"\n      />\n    }\n\n    @for (t of triggerNodes(); track t.triggerId) {\n      <fp-trigger-node\n        fNode\n        fDragHandle\n        [attr.data-fp-trigger]=\"t.triggerId\"\n        [fNodeId]=\"'trigger:' + t.triggerId\"\n        [fNodePosition]=\"{ x: t.x, y: t.y }\"\n        (fNodePositionChange)=\"onTriggerPositionChange(t.triggerId, $event)\"\n        [trigger]=\"t\"\n        [noFirstStep]=\"!t.startStepId\"\n        (addFirstStep)=\"onTriggerAddFirstStep($event)\"\n        (configure)=\"onTriggerOpenDetails($event)\"\n        (execute)=\"onTriggerExecute($event)\"\n        (toggleEnabled)=\"onTriggerToggleEnabled($event)\"\n        (remove)=\"onTriggerDelete($event)\"\n      />\n    }\n  </f-canvas>\n\n  <!-- Minimap \u2014 `f-flow` child (NOT inside `f-canvas`). Toggled from the\n       canvas controls; `fMinSize` keeps a couple of nodes zoomed-out enough\n       to give real spatial context. -->\n  @if (minimapVisible()) {\n    <f-minimap [fMinSize]=\"minimapMinSize\" />\n  }\n\n  @if (showStarter() && !store.loading()) {\n    <fp-starter-card\n      (addTrigger)=\"onStarterAddTrigger($event)\"\n      (directPick)=\"onStarterDirectPick($event)\"\n    />\n  }\n\n  <fp-canvas-controls\n    [zoom]=\"zoom()\"\n    [minimapVisible]=\"minimapVisible()\"\n    (zoomIn)=\"zoomIn()\"\n    (zoomOut)=\"zoomOut()\"\n    (fitView)=\"fitView()\"\n    (resetView)=\"resetView()\"\n    (toggleMinimap)=\"toggleMinimap()\"\n    (autoLayout)=\"autoLayout()\"\n  />\n</f-flow>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FFlowModule }, { kind: "component", type: i1$2.FFlowComponent, selector: "f-flow", inputs: ["fFlowId", "fCache"], outputs: ["fNodesRendered", "fFullRendered", "fLoaded"] }, { kind: "component", type: i1$2.FCanvasComponent, selector: "f-canvas", inputs: ["position", "scale", "debounceTime", "fLayers"], outputs: ["fCanvasChange"] }, { kind: "component", type: i1$2.FBackgroundComponent, selector: "f-background" }, { kind: "component", type: i1$2.FCirclePatternComponent, selector: "f-circle-pattern", inputs: ["id", "color", "radius"] }, { kind: "component", type: i1$2.FAutoPan, selector: "f-auto-pan", inputs: ["fEdgeThreshold", "fSpeed", "fAcceleration"] }, { kind: "directive", type: i1$2.FZoomDirective, selector: "f-canvas[fZoom]", inputs: ["fZoom", "fWheelTrigger", "fDblClickTrigger", "fZoomMinimum", "fZoomMaximum", "fZoomStep", "fZoomDblClickStep"] }, { kind: "component", type: i1$2.FSelectionArea, selector: "f-selection-area", inputs: ["fTrigger"] }, { kind: "directive", type: i1$2.FConnectionContent, selector: "[fConnectionContent]", inputs: ["position", "offset", "align"] }, { kind: "component", type: i1$2.FConnectionMarkerArrow, selector: "f-connection-marker-arrow", inputs: ["type"] }, { kind: "component", type: i1$2.FConnectionComponent, selector: "f-connection", inputs: ["fConnectionId", "fOutputId", "fInputId", "fRadius", "fOffset", "fBehavior", "fType", "fSelectionDisabled", "fReassignableStart", "fReassignDisabled", "fInputSide", "fOutputSide"], exportAs: ["fComponent"] }, { kind: "component", type: i1$2.FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: ["fRadius", "fOffset", "fBehavior", "fType", "fInputSide", "fOutputSide"] }, { kind: "component", type: i1$2.FSnapConnectionComponent, selector: "f-snap-connection", inputs: ["fSnapThreshold", "fRadius", "fOffset", "fBehavior", "fType", "fInputSide", "fOutputSide"] }, { kind: "directive", type: i1$2.FNodeInputDirective, selector: "[fNodeInput]", inputs: ["fInputId", "fInputCategory", "fInputMultiple", "fInputDisabled", "fInputConnectableSide"], exportAs: ["fNodeInput"] }, { kind: "component", type: i1$2.FLineAlignmentComponent, selector: "f-line-alignment", inputs: ["fAlignThreshold"], exportAs: ["fComponent"] }, { kind: "component", type: i1$2.FMinimapComponent, selector: "f-minimap", inputs: ["fMinSize", "fNodeRenderLimit"], exportAs: ["fComponent"] }, { kind: "directive", type: i1$2.FNodeDirective, selector: "[fNode]", inputs: ["fNodeId", "fNodeParentId", "fNodePosition", "fNodeSize", "fNodeRotate", "fConnectOnNode", "fMinimapClass", "fNodeDraggingDisabled", "fNodeSelectionDisabled", "fIncludePadding", "fAutoExpandOnChildHit", "fAutoSizeToFitChildren"], outputs: ["fNodePositionChange", "fNodeSizeChange", "fNodeRotateChange"], exportAs: ["fComponent"] }, { kind: "directive", type: i1$2.FDragHandleDirective, selector: "[fDragHandle]" }, { kind: "directive", type: i1$2.FDraggableDirective, selector: "f-flow[fDraggable]", inputs: ["fDraggableDisabled", "fMultiSelectTrigger", "fReassignConnectionTrigger", "fCreateConnectionTrigger", "fConnectionWaypointsTrigger", "fMoveControlPointTrigger", "fNodeResizeTrigger", "fNodeRotateTrigger", "fNodeMoveTrigger", "fCanvasMoveTrigger", "fExternalItemTrigger", "fEmitOnNodeIntersect", "vCellSize", "hCellSize", "fCellSizeWhileDragging"], outputs: ["fSelectionChange", "fNodeIntersectedWithConnections", "fNodeConnectionsIntersection", "fCreateNode", "fMoveNodes", "fReassignConnection", "fCreateConnection", "fConnectionWaypointsChanged", "fDropToGroup", "fDragStarted", "fDragEnded"], exportAs: ["fDraggable"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }, { kind: "component", type: FlowNodeComponent, selector: "fp-flow-node", inputs: ["node", "connectedOutputKeys"], outputs: ["positionChange", "nodeClick", "quickAdd", "portPlusClick", "duplicate", "remove", "testStep", "openChild", "openDetails"] }, { kind: "component", type: CanvasControlsComponent, selector: "fp-canvas-controls", inputs: ["zoom", "minimapVisible"], outputs: ["zoomIn", "zoomOut", "fitView", "resetView", "toggleMinimap", "autoLayout"] }, { kind: "component", type: StarterCardComponent, selector: "fp-starter-card", outputs: ["addTrigger", "directPick"] }, { kind: "component", type: TriggerNodeComponent, selector: "fp-trigger-node", inputs: ["trigger", "noFirstStep"], outputs: ["addFirstStep", "configure", "execute", "toggleEnabled", "remove", "positionChange"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
+        ], viewQueries: [{ propertyName: "flow", first: true, predicate: ["flow"], descendants: true, isSignal: true }, { propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: "<f-flow\n  #flow\n  fDraggable\n  [vCellSize]=\"gridCellSize\"\n  [hCellSize]=\"gridCellSize\"\n  [fCellSizeWhileDragging]=\"false\"\n  (fFullRendered)=\"onFullRendered()\"\n  (fNodesRendered)=\"onNodesRendered()\"\n  (fCreateNode)=\"onCreateNode($event)\"\n  (fCreateConnection)=\"onCreateConnection($event)\"\n  (fReassignConnection)=\"onReassignConnection($event)\"\n  (fDragStarted)=\"onDragStarted($event)\"\n  (fDragEnded)=\"onDragEnded()\"\n  (fMoveNodes)=\"onMoveNodes($event)\"\n  (fSelectionChange)=\"onSelectionChange($event)\"\n>\n  <!-- Background dot grid \u2014 its spacing is locked to the drag cell size so\n       nodes snap exactly onto the visible dots (Foblex grid-system). -->\n  <f-background>\n    <f-circle-pattern [radius]=\"gridCellSize\" />\n  </f-background>\n\n  <!-- Alignment guides + marquee selection are `f-flow` children (NOT\n       `f-canvas` children \u2014 `f-canvas` only projects connections/nodes/groups,\n       so helpers placed inside it are silently dropped). This mirrors the\n       Foblex call-center reference layout. -->\n  <f-line-alignment [fAlignThreshold]=\"20\" />\n  <f-selection-area />\n\n  <!-- Auto-pan: when dragging a node / connection near the viewport edge, the\n       canvas pans to follow, so you can wire across off-screen nodes without\n       letting go. (Foblex `f-auto-pan` plugin.) -->\n  <f-auto-pan [fEdgeThreshold]=\"36\" [fSpeed]=\"8\" />\n\n  <f-canvas\n    #canvas\n    fZoom\n    [debounceTime]=\"200\"\n    [fLayers]=\"canvasLayers\"\n    (fCanvasChange)=\"onCanvasChange($event)\"\n  >\n    <!-- Floating behavior anchors the preview at the connector boundary along\n         the center\u2192pointer axis, so a connection dragged from the \"+\" outlet\n         leaves it cleanly (NOT from its bottom edge \u2014 `fixed` defaults an AUTO\n         connectable side to bottom) and snaps to the target's nearest edge. -->\n    <f-connection-for-create\n      [fBehavior]=\"'floating'\"\n      fType=\"adaptive-curve\"\n      [fOffset]=\"0\"\n    >\n      <f-connection-marker-arrow />\n    </f-connection-for-create>\n\n    <!-- Auto-snap: while dragging a new/reassigned connection, snap to the\n         nearest connector within the threshold (forgiving connect UX). -->\n    <f-snap-connection\n      [fBehavior]=\"'floating'\"\n      fType=\"adaptive-curve\"\n      [fSnapThreshold]=\"40\"\n      [fOffset]=\"0\"\n    >\n      <f-connection-marker-arrow />\n    </f-snap-connection>\n\n    <!-- ngProjectAs is REQUIRED: `f-canvas` distributes projected content\n         into its layer containers via selective `<ng-content select=\"...\">`\n         with NO catch-all slot. A wrapper component (`fp-flow-node`, etc.)\n         does not match `[fNode]` / `f-connection` on its host, so without\n         `ngProjectAs` Foblex silently drops it and the canvas renders empty.\n         The actual Foblex directive lives on the wrapper's inner element and\n         self-registers via the mediator, so routing the wrapper into the\n         right layer is all that's needed. -->\n    @for (note of canvasNotes(); track note.id) {\n      <fp-canvas-note\n        fGroup\n        fDragHandle\n        [attr.data-fp-note]=\"note.id\"\n        [fGroupId]=\"canvasNoteGroupId(note.id)\"\n        [fGroupPosition]=\"{ x: note.x, y: note.y }\"\n        [fGroupSize]=\"{ width: note.width, height: note.height }\"\n        [fGroupDraggingDisabled]=\"editingNoteId() === note.id\"\n        [note]=\"note\"\n        [selected]=\"selectedCanvasNoteIds().includes(note.id)\"\n        [editing]=\"editingNoteId() === note.id\"\n        (fGroupPositionChange)=\"onNotePositionChange(note.id, $event)\"\n        (fGroupSizeChange)=\"onNoteSizeChange(note.id, $event)\"\n        (contentChange)=\"onNoteContentChange($event)\"\n        (colorChange)=\"onNoteColorChange($event)\"\n        (duplicate)=\"onNoteDuplicate($event)\"\n        (remove)=\"onNoteDelete($event)\"\n        (editStart)=\"onNoteEditStart($event.noteId)\"\n        (editEnd)=\"editingNoteId.set(null)\"\n      />\n    }\n\n    @for (lane of branchLanes(); track lane.id) {\n      <div\n        ngProjectAs=\"[fGroup]\"\n        class=\"pointer-events-none absolute z-0 rounded-[14px] border border-dashed border-[color-mix(in_srgb,rgb(var(--fp-parallel))_55%,transparent)] bg-[color-mix(in_srgb,rgb(var(--fp-parallel))_8%,transparent)]\"\n        [attr.data-color-token]=\"lane.colorToken\"\n        [style.left.px]=\"lane.x\"\n        [style.top.px]=\"lane.y\"\n        [style.width.px]=\"lane.width\"\n        [style.height.px]=\"lane.height\"\n      >\n        <span\n          class=\"pointer-events-auto absolute -top-2.5 start-3 rounded-full border border-[color-mix(in_srgb,rgb(var(--fp-parallel))_40%,transparent)] bg-(--p-content-background) px-2 py-px text-[10.5px] font-semibold text-[rgb(var(--fp-parallel))]\"\n          >{{ lane.label }}</span\n        >\n      </div>\n    }\n\n    <!-- Connections are inlined here (NOT wrapped in a component) so each\n         <f-connection> is a DIRECT child of Foblex's connections container.\n         A wrapper would make `hostElement.parentElement` the wrapper instead\n         of the container, which makes Foblex's select layer-raise throw\n         \"Unknown container\" the moment an edge is selected. Same call-center\n         pattern used for nodes/triggers. -->\n    @for (edge of edges(); track edge.id) {\n      <f-connection\n        class=\"group\"\n        [attr.data-fp-edge]=\"edge.connectionId\"\n        [fConnectionId]=\"edge.id\"\n        [fOutputId]=\"edge.sourcePortId\"\n        [fInputId]=\"edge.targetPortId\"\n        [fBehavior]=\"'fixed'\"\n        [fType]=\"'adaptive-curve'\"\n        [fOffset]=\"32\"\n        fInputSide=\"calculate\"\n        [fReassignableStart]=\"edge.edgeKind !== 'triggerStart'\"\n        [fReassignDisabled]=\"edge.edgeKind === 'triggerStart'\"\n        [class.fp-edge]=\"true\"\n        [class.is-trigger-start]=\"edge.edgeKind === 'triggerStart'\"\n        [class.is-drop-target]=\"isDropTargetEdge(edge.connectionId)\"\n        [class.is-selected]=\"isConnectionSelected(edge.connectionId)\"\n        [class.is-error]=\"edge.isInvalid\"\n        [class.is-formula]=\"edge.isFormula\"\n        [class.is-runtime-active]=\"edge.runtimeState === 'active'\"\n        [class.is-runtime-completed]=\"edge.runtimeState === 'completed'\"\n        [class.is-runtime-failed]=\"edge.runtimeState === 'failed'\"\n        [class.is-runtime-waiting]=\"edge.runtimeState === 'waiting'\"\n        (dblclick)=\"\n          edge.edgeKind === 'triggerStart' && edge.triggerId != null\n            ? onTriggerOpenDetails({ triggerId: edge.triggerId })\n            : onEdgeOpenDetails({ connectionId: edge.connectionId })\n        \"\n      >\n        <!-- Arrow marker at the target \u2014 the connection carries the arrowhead;\n             the input lives on the node host (no separate input element). -->\n        <f-connection-marker-arrow [type]=\"markerEnd\" />\n\n        <!-- Editable waypoints are intentionally NOT rendered: there is no\n             backend persistence wired for manual bends, so exposing draggable\n             waypoints would silently lose the user's edits on reload. -->\n\n        <!-- Label / formula badge \u2014 pinned to the CENTER of the line\n             (connection-content position 0.5). Fades out on hover/selected so\n             the centered action box can take its place. -->\n        @if (edge.label) {\n          <div\n            fConnectionContent\n            [position]=\"0.5\"\n            class=\"pointer-events-none opacity-100 transition-opacity duration-150 group-hover:opacity-0 group-[.is-selected]:opacity-0\"\n          >\n            <span\n              class=\"inline-flex items-center gap-1.5 whitespace-nowrap rounded-full border border-[rgb(var(--fp-connector))] bg-(--p-content-background) py-1 pe-2.5 ps-2 text-[11px] font-semibold text-(--p-text-color) shadow-[0_1px_3px_rgba(15,23,42,0.1)] transition-colors group-[.is-selected]:border-(--p-primary-color) group-[.is-selected]:text-(--p-primary-color)\"\n            >\n              <span\n                class=\"size-1.5 flex-none rounded-full bg-[rgb(var(--fp-connector))] group-[.is-selected]:bg-(--p-primary-color)\"\n              ></span>\n              {{ edge.label }}\n            </span>\n          </div>\n        } @else if (edge.isFormula) {\n          <div\n            fConnectionContent\n            [position]=\"0.5\"\n            class=\"pointer-events-none opacity-100 transition-opacity duration-150 group-hover:opacity-0 group-[.is-selected]:opacity-0\"\n          >\n            <span\n              class=\"grid h-5 w-5 place-items-center rounded-full border border-(--p-content-border-color) bg-(--p-content-background) font-mono text-[12px] italic text-(--p-primary-color) shadow-sm\"\n              title=\"Conditional route\"\n              >\u0192</span\n            >\n          </div>\n        }\n\n        <!-- Centered action box \u2014 edit (opens the connection MODAL) + delete.\n             Same content anchor (position 0.5), revealed on hover/selected and\n             overlapping the label so the actions stay centered ON the line. -->\n        @if (edgeIssueCount(edge) > 0) {\n          <div\n            fConnectionContent\n            [position]=\"0.38\"\n            class=\"pointer-events-auto\"\n          >\n            <span\n              class=\"fp-node-badge grid h-[18px] w-[18px] cursor-help place-items-center rounded-sm bg-(--p-content-background) shadow-sm outline-none transition-transform focus-visible:ring-2 focus-visible:ring-(--p-primary-color)\"\n              [style.color]=\"edgeIssueColor(edge)\"\n              tabindex=\"0\"\n              role=\"img\"\n              [attr.aria-label]=\"edgeIssueTooltip(edge)\"\n              [mtTooltip]=\"edgeIssueTooltip(edge)\"\n              [tooltipStyleClass]=\"edgeIssueTooltipClass(edge)\"\n              tooltipPosition=\"top\"\n              appendTo=\"body\"\n              [escape]=\"true\"\n              [showDelay]=\"180\"\n              [hideDelay]=\"80\"\n              (pointerdown)=\"$event.stopPropagation()\"\n              (click)=\"\n                $event.stopPropagation();\n                edge.edgeKind === 'triggerStart' && edge.triggerId != null\n                  ? onTriggerOpenDetails({ triggerId: edge.triggerId })\n                  : onEdgeOpenDetails({ connectionId: edge.connectionId })\n              \"\n              (dblclick)=\"$event.stopPropagation()\"\n            >\n              <svg width=\"15\" height=\"15\" viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n                <path\n                  d=\"M10 3.4 18 16.8 2 16.8 Z\"\n                  fill=\"currentColor\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2.6\"\n                  stroke-linejoin=\"round\"\n                />\n                <rect x=\"9.05\" y=\"8\" width=\"1.9\" height=\"4.6\" rx=\"0.95\" fill=\"#fff\" />\n                <circle cx=\"10\" cy=\"14.6\" r=\"1.05\" fill=\"#fff\" />\n              </svg>\n            </span>\n          </div>\n        }\n\n        @if (edge.runtimeState && edge.runtimeTooltip) {\n          <div\n            fConnectionContent\n            [position]=\"0.62\"\n            class=\"pointer-events-auto\"\n          >\n            <span\n              class=\"inline-flex h-[18px] w-[18px] cursor-help items-center justify-center rounded-full border bg-(--p-content-background) shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-(--p-primary-color)\"\n              [class.animate-pulse]=\"edge.runtimeState === 'active'\"\n              [style.borderColor]=\"edgeRuntimeColor(edge)\"\n              [style.color]=\"edgeRuntimeColor(edge)\"\n              tabindex=\"0\"\n              role=\"status\"\n              [attr.aria-label]=\"edge.runtimeTooltip\"\n              [mtTooltip]=\"edge.runtimeTooltip\"\n              tooltipPosition=\"top\"\n              appendTo=\"body\"\n              [escape]=\"true\"\n              [showDelay]=\"180\"\n              [hideDelay]=\"80\"\n              (pointerdown)=\"$event.stopPropagation()\"\n              (click)=\"$event.stopPropagation()\"\n              (dblclick)=\"$event.stopPropagation()\"\n            >\n              <mt-icon [icon]=\"edgeRuntimeIcon(edge)\" class=\"[&_svg]:size-3\" />\n            </span>\n          </div>\n        }\n\n        <div\n          fConnectionContent\n          [position]=\"0.5\"\n          class=\"pointer-events-none opacity-0 transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100 group-[.is-selected]:pointer-events-auto group-[.is-selected]:opacity-100\"\n        >\n          <div\n            class=\"flex items-center gap-0.5 rounded-lg border border-(--p-content-border-color) bg-(--p-content-background) p-1 shadow-md\"\n            role=\"toolbar\"\n            aria-label=\"Connection actions\"\n            (pointerdown)=\"$event.stopPropagation()\"\n            (click)=\"$event.stopPropagation()\"\n          >\n            @if (edge.edgeKind === \"triggerStart\" && edge.triggerId != null) {\n              <mt-button\n                variant=\"text\"\n                severity=\"secondary\"\n                size=\"small\"\n                icon=\"general.settings-01\"\n                [tooltip]=\"'flowplus.trigger.node.configure' | transloco\"\n                (onClick)=\"onTriggerOpenDetails({ triggerId: edge.triggerId })\"\n              />\n              <mt-button\n                variant=\"text\"\n                severity=\"danger\"\n                size=\"small\"\n                icon=\"general.link-broken-01\"\n                [tooltip]=\"'flowplus.trigger.node.unlink' | transloco\"\n                (onClick)=\"\n                  onTriggerStartDisconnect({ triggerId: edge.triggerId })\n                \"\n              />\n            } @else {\n              <mt-button\n                variant=\"text\"\n                severity=\"secondary\"\n                size=\"small\"\n                icon=\"general.edit-05\"\n                [tooltip]=\"'flowplus.inspector.connection.title' | transloco\"\n                (onClick)=\"\n                  onEdgeOpenDetails({ connectionId: edge.connectionId })\n                \"\n              />\n              <mt-button\n                variant=\"text\"\n                severity=\"danger\"\n                size=\"small\"\n                icon=\"general.trash-01\"\n                [tooltip]=\"'flowplus.edge.delete' | transloco\"\n                (onClick)=\"onEdgeRemove({ connectionId: edge.connectionId })\"\n              />\n            }\n          </div>\n        </div>\n      </f-connection>\n    }\n\n    <!-- The Foblex `fNode` directive lives on the component element itself\n         (not an inner div). This keeps the node element a DIRECT child of\n         Foblex's nodes container, so `hostElement.parentElement` IS that\n         container \u2014 required by the select/move layer-raise (otherwise it\n         throws \"Unknown container\"). This is the Foblex call-center pattern;\n         the `fNode` attribute also routes it into the `[fNode]` projection\n         slot, so `ngProjectAs` is not needed. -->\n    @for (node of nodes(); track node.id) {\n      <fp-flow-node\n        fNode\n        fDragHandle\n        fNodeInput\n        [attr.data-fp-node]=\"node.stepId\"\n        [fInputId]=\"node.inputs[0]?.id\"\n        [fInputMultiple]=\"node.inputs[0]?.allowMultiple ?? true\"\n        [fInputDisabled]=\"!node.inputs.length\"\n        [fNodeId]=\"node.id\"\n        [fNodePosition]=\"{ x: node.x, y: node.y }\"\n        (fNodePositionChange)=\"onStepPositionChange(node.stepId, $event)\"\n        [node]=\"node\"\n        [connectedOutputKeys]=\"connectedOutputKeys(node.stepId)\"\n        (quickAdd)=\"onNodeQuickAdd($event)\"\n        (portPlusClick)=\"onNodePortPlus($event)\"\n        (duplicate)=\"onNodeDuplicate($event)\"\n        (remove)=\"onNodeRemove($event)\"\n        (openDetails)=\"onNodeOpenDetails($event)\"\n        (openChild)=\"onOpenChild($event)\"\n      />\n    }\n\n    @for (t of triggerNodes(); track t.triggerId) {\n      <fp-trigger-node\n        fNode\n        fDragHandle\n        [attr.data-fp-trigger]=\"t.triggerId\"\n        [fNodeId]=\"'trigger:' + t.triggerId\"\n        [fNodePosition]=\"{ x: t.x, y: t.y }\"\n        (fNodePositionChange)=\"onTriggerPositionChange(t.triggerId, $event)\"\n        [trigger]=\"t\"\n        [noFirstStep]=\"!t.startStepId\"\n        (addFirstStep)=\"onTriggerAddFirstStep($event)\"\n        (configure)=\"onTriggerOpenDetails($event)\"\n        (execute)=\"onTriggerExecute($event)\"\n        (toggleEnabled)=\"onTriggerToggleEnabled($event)\"\n        (remove)=\"onTriggerDelete($event)\"\n      />\n    }\n  </f-canvas>\n\n  <!-- Minimap \u2014 `f-flow` child (NOT inside `f-canvas`). Toggled from the\n       canvas controls; `fMinSize` keeps a couple of nodes zoomed-out enough\n       to give real spatial context. -->\n  @if (minimapVisible()) {\n    <f-minimap [fMinSize]=\"minimapMinSize\" />\n  }\n\n  @if (showStarter() && !store.loading()) {\n    <fp-starter-card\n      (addTrigger)=\"onStarterAddTrigger($event)\"\n      (directPick)=\"onStarterDirectPick($event)\"\n    />\n  }\n\n  <fp-canvas-controls\n    [zoom]=\"zoom()\"\n    [minimapVisible]=\"minimapVisible()\"\n    (zoomIn)=\"zoomIn()\"\n    (zoomOut)=\"zoomOut()\"\n    (fitView)=\"fitView()\"\n    (resetView)=\"resetView()\"\n    (toggleMinimap)=\"toggleMinimap()\"\n    (autoLayout)=\"autoLayout()\"\n  />\n</f-flow>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FFlowModule }, { kind: "component", type: i1$2.FFlowComponent, selector: "f-flow", inputs: ["fFlowId", "fCache"], outputs: ["fNodesRendered", "fFullRendered", "fLoaded"] }, { kind: "component", type: i1$2.FCanvasComponent, selector: "f-canvas", inputs: ["position", "scale", "debounceTime", "fLayers"], outputs: ["fCanvasChange"] }, { kind: "component", type: i1$2.FBackgroundComponent, selector: "f-background" }, { kind: "component", type: i1$2.FCirclePatternComponent, selector: "f-circle-pattern", inputs: ["id", "color", "radius"] }, { kind: "component", type: i1$2.FAutoPan, selector: "f-auto-pan", inputs: ["fEdgeThreshold", "fSpeed", "fAcceleration"] }, { kind: "directive", type: i1$2.FZoomDirective, selector: "f-canvas[fZoom]", inputs: ["fZoom", "fWheelTrigger", "fDblClickTrigger", "fZoomMinimum", "fZoomMaximum", "fZoomStep", "fZoomDblClickStep"] }, { kind: "component", type: i1$2.FSelectionArea, selector: "f-selection-area", inputs: ["fTrigger"] }, { kind: "directive", type: i1$2.FConnectionContent, selector: "[fConnectionContent]", inputs: ["position", "offset", "align"] }, { kind: "component", type: i1$2.FConnectionMarkerArrow, selector: "f-connection-marker-arrow", inputs: ["type"] }, { kind: "component", type: i1$2.FConnectionComponent, selector: "f-connection", inputs: ["fConnectionId", "fOutputId", "fInputId", "fRadius", "fOffset", "fBehavior", "fType", "fSelectionDisabled", "fReassignableStart", "fReassignDisabled", "fInputSide", "fOutputSide"], exportAs: ["fComponent"] }, { kind: "component", type: i1$2.FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: ["fRadius", "fOffset", "fBehavior", "fType", "fInputSide", "fOutputSide"] }, { kind: "component", type: i1$2.FSnapConnectionComponent, selector: "f-snap-connection", inputs: ["fSnapThreshold", "fRadius", "fOffset", "fBehavior", "fType", "fInputSide", "fOutputSide"] }, { kind: "directive", type: i1$2.FNodeInputDirective, selector: "[fNodeInput]", inputs: ["fInputId", "fInputCategory", "fInputMultiple", "fInputDisabled", "fInputConnectableSide"], exportAs: ["fNodeInput"] }, { kind: "component", type: i1$2.FLineAlignmentComponent, selector: "f-line-alignment", inputs: ["fAlignThreshold"], exportAs: ["fComponent"] }, { kind: "component", type: i1$2.FMinimapComponent, selector: "f-minimap", inputs: ["fMinSize", "fNodeRenderLimit"], exportAs: ["fComponent"] }, { kind: "directive", type: i1$2.FGroupDirective, selector: "[fGroup]", inputs: ["fGroupId", "fGroupParentId", "fGroupPosition", "fGroupSize", "fGroupRotate", "fConnectOnNode", "fMinimapClass", "fGroupDraggingDisabled", "fGroupSelectionDisabled", "fIncludePadding", "fAutoExpandOnChildHit", "fAutoSizeToFitChildren"], outputs: ["fGroupPositionChange", "fGroupSizeChange", "fGroupRotateChange"], exportAs: ["fComponent"] }, { kind: "directive", type: i1$2.FNodeDirective, selector: "[fNode]", inputs: ["fNodeId", "fNodeParentId", "fNodePosition", "fNodeSize", "fNodeRotate", "fConnectOnNode", "fMinimapClass", "fNodeDraggingDisabled", "fNodeSelectionDisabled", "fIncludePadding", "fAutoExpandOnChildHit", "fAutoSizeToFitChildren"], outputs: ["fNodePositionChange", "fNodeSizeChange", "fNodeRotateChange"], exportAs: ["fComponent"] }, { kind: "directive", type: i1$2.FDragHandleDirective, selector: "[fDragHandle]" }, { kind: "directive", type: i1$2.FDraggableDirective, selector: "f-flow[fDraggable]", inputs: ["fDraggableDisabled", "fMultiSelectTrigger", "fReassignConnectionTrigger", "fCreateConnectionTrigger", "fConnectionWaypointsTrigger", "fMoveControlPointTrigger", "fNodeResizeTrigger", "fNodeRotateTrigger", "fNodeMoveTrigger", "fCanvasMoveTrigger", "fExternalItemTrigger", "fEmitOnNodeIntersect", "vCellSize", "hCellSize", "fCellSizeWhileDragging"], outputs: ["fSelectionChange", "fNodeIntersectedWithConnections", "fNodeConnectionsIntersection", "fCreateNode", "fMoveNodes", "fReassignConnection", "fCreateConnection", "fConnectionWaypointsChanged", "fDropToGroup", "fDragStarted", "fDragEnded"], exportAs: ["fDraggable"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }, { kind: "component", type: FlowNodeComponent, selector: "fp-flow-node", inputs: ["node", "connectedOutputKeys"], outputs: ["positionChange", "nodeClick", "quickAdd", "portPlusClick", "duplicate", "remove", "testStep", "openChild", "openDetails"] }, { kind: "component", type: CanvasControlsComponent, selector: "fp-canvas-controls", inputs: ["zoom", "minimapVisible"], outputs: ["zoomIn", "zoomOut", "fitView", "resetView", "toggleMinimap", "autoLayout"] }, { kind: "component", type: CanvasNoteComponent, selector: "fp-canvas-note", inputs: ["note", "selected", "editing", "colors"], outputs: ["contentChange", "colorChange", "duplicate", "remove", "editStart", "editEnd"] }, { kind: "component", type: StarterCardComponent, selector: "fp-starter-card", outputs: ["addTrigger", "directPick"] }, { kind: "component", type: TriggerNodeComponent, selector: "fp-trigger-node", inputs: ["trigger", "noFirstStep"], outputs: ["addFirstStep", "configure", "execute", "toggleEnabled", "remove", "positionChange"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FlowCanvasComponent, decorators: [{
             type: Component,
@@ -20267,6 +20954,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         Tooltip,
                         FlowNodeComponent,
                         CanvasControlsComponent,
+                        CanvasNoteComponent,
                         StarterCardComponent,
                         TriggerNodeComponent,
                     ], providers: [
@@ -20277,7 +20965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                             maxCascadeDepth: 8,
                             maxAbsoluteShiftPerPlan: 10000,
                         })),
-                    ], template: "<f-flow\n  #flow\n  fDraggable\n  [vCellSize]=\"gridCellSize\"\n  [hCellSize]=\"gridCellSize\"\n  [fCellSizeWhileDragging]=\"false\"\n  (fFullRendered)=\"onFullRendered()\"\n  (fNodesRendered)=\"onNodesRendered()\"\n  (fCreateNode)=\"onCreateNode($event)\"\n  (fCreateConnection)=\"onCreateConnection($event)\"\n  (fReassignConnection)=\"onReassignConnection($event)\"\n  (fDragStarted)=\"onDragStarted($event)\"\n  (fDragEnded)=\"onDragEnded()\"\n  (fMoveNodes)=\"onMoveNodes($event)\"\n  (fSelectionChange)=\"onSelectionChange($event)\"\n>\n  <!-- Background dot grid \u2014 its spacing is locked to the drag cell size so\n       nodes snap exactly onto the visible dots (Foblex grid-system). -->\n  <f-background>\n    <f-circle-pattern [radius]=\"gridCellSize\" />\n  </f-background>\n\n  <!-- Alignment guides + marquee selection are `f-flow` children (NOT\n       `f-canvas` children \u2014 `f-canvas` only projects connections/nodes/groups,\n       so helpers placed inside it are silently dropped). This mirrors the\n       Foblex call-center reference layout. -->\n  <f-line-alignment [fAlignThreshold]=\"20\" />\n  <f-selection-area />\n\n  <!-- Auto-pan: when dragging a node / connection near the viewport edge, the\n       canvas pans to follow, so you can wire across off-screen nodes without\n       letting go. (Foblex `f-auto-pan` plugin.) -->\n  <f-auto-pan [fEdgeThreshold]=\"36\" [fSpeed]=\"8\" />\n\n  <f-canvas\n    #canvas\n    fZoom\n    [debounceTime]=\"200\"\n    (fCanvasChange)=\"onCanvasChange($event)\"\n  >\n    <!-- Floating behavior anchors the preview at the connector boundary along\n         the center\u2192pointer axis, so a connection dragged from the \"+\" outlet\n         leaves it cleanly (NOT from its bottom edge \u2014 `fixed` defaults an AUTO\n         connectable side to bottom) and snaps to the target's nearest edge. -->\n    <f-connection-for-create\n      [fBehavior]=\"'floating'\"\n      fType=\"adaptive-curve\"\n      [fOffset]=\"0\"\n    >\n      <f-connection-marker-arrow />\n    </f-connection-for-create>\n\n    <!-- Auto-snap: while dragging a new/reassigned connection, snap to the\n         nearest connector within the threshold (forgiving connect UX). -->\n    <f-snap-connection\n      [fBehavior]=\"'floating'\"\n      fType=\"adaptive-curve\"\n      [fSnapThreshold]=\"40\"\n      [fOffset]=\"0\"\n    >\n      <f-connection-marker-arrow />\n    </f-snap-connection>\n\n    <!-- ngProjectAs is REQUIRED: `f-canvas` distributes projected content\n         into its layer containers via selective `<ng-content select=\"...\">`\n         with NO catch-all slot. A wrapper component (`fp-flow-node`, etc.)\n         does not match `[fNode]` / `f-connection` on its host, so without\n         `ngProjectAs` Foblex silently drops it and the canvas renders empty.\n         The actual Foblex directive lives on the wrapper's inner element and\n         self-registers via the mediator, so routing the wrapper into the\n         right layer is all that's needed. -->\n    @for (lane of branchLanes(); track lane.id) {\n      <div\n        ngProjectAs=\"[fGroup]\"\n        class=\"pointer-events-none absolute z-0 rounded-[14px] border border-dashed border-[color-mix(in_srgb,rgb(var(--fp-parallel))_55%,transparent)] bg-[color-mix(in_srgb,rgb(var(--fp-parallel))_8%,transparent)]\"\n        [attr.data-color-token]=\"lane.colorToken\"\n        [style.left.px]=\"lane.x\"\n        [style.top.px]=\"lane.y\"\n        [style.width.px]=\"lane.width\"\n        [style.height.px]=\"lane.height\"\n      >\n        <span\n          class=\"pointer-events-auto absolute -top-2.5 start-3 rounded-full border border-[color-mix(in_srgb,rgb(var(--fp-parallel))_40%,transparent)] bg-(--p-content-background) px-2 py-px text-[10.5px] font-semibold text-[rgb(var(--fp-parallel))]\"\n          >{{ lane.label }}</span\n        >\n      </div>\n    }\n\n    <!-- Connections are inlined here (NOT wrapped in a component) so each\n         <f-connection> is a DIRECT child of Foblex's connections container.\n         A wrapper would make `hostElement.parentElement` the wrapper instead\n         of the container, which makes Foblex's select layer-raise throw\n         \"Unknown container\" the moment an edge is selected. Same call-center\n         pattern used for nodes/triggers. -->\n    @for (edge of edges(); track edge.id) {\n      <f-connection\n        class=\"group\"\n        [attr.data-fp-edge]=\"edge.connectionId\"\n        [fConnectionId]=\"edge.id\"\n        [fOutputId]=\"edge.sourcePortId\"\n        [fInputId]=\"edge.targetPortId\"\n        [fBehavior]=\"'fixed'\"\n        [fType]=\"'adaptive-curve'\"\n        [fOffset]=\"32\"\n        fInputSide=\"calculate\"\n        [fReassignableStart]=\"edge.edgeKind !== 'triggerStart'\"\n        [fReassignDisabled]=\"edge.edgeKind === 'triggerStart'\"\n        [class.fp-edge]=\"true\"\n        [class.is-trigger-start]=\"edge.edgeKind === 'triggerStart'\"\n        [class.is-drop-target]=\"isDropTargetEdge(edge.connectionId)\"\n        [class.is-selected]=\"isConnectionSelected(edge.connectionId)\"\n        [class.is-error]=\"edge.isInvalid\"\n        [class.is-formula]=\"edge.isFormula\"\n        [class.is-runtime-active]=\"edge.runtimeState === 'active'\"\n        [class.is-runtime-completed]=\"edge.runtimeState === 'completed'\"\n        [class.is-runtime-failed]=\"edge.runtimeState === 'failed'\"\n        [class.is-runtime-waiting]=\"edge.runtimeState === 'waiting'\"\n        (dblclick)=\"\n          edge.edgeKind === 'triggerStart' && edge.triggerId != null\n            ? onTriggerOpenDetails({ triggerId: edge.triggerId })\n            : onEdgeOpenDetails({ connectionId: edge.connectionId })\n        \"\n      >\n        <!-- Arrow marker at the target \u2014 the connection carries the arrowhead;\n             the input lives on the node host (no separate input element). -->\n        <f-connection-marker-arrow [type]=\"markerEnd\" />\n\n        <!-- Editable waypoints are intentionally NOT rendered: there is no\n             backend persistence wired for manual bends, so exposing draggable\n             waypoints would silently lose the user's edits on reload. -->\n\n        <!-- Label / formula badge \u2014 pinned to the CENTER of the line\n             (connection-content position 0.5). Fades out on hover/selected so\n             the centered action box can take its place. -->\n        @if (edge.label) {\n          <div\n            fConnectionContent\n            [position]=\"0.5\"\n            class=\"pointer-events-none opacity-100 transition-opacity duration-150 group-hover:opacity-0 group-[.is-selected]:opacity-0\"\n          >\n            <span\n              class=\"inline-flex items-center gap-1.5 whitespace-nowrap rounded-full border border-[rgb(var(--fp-connector))] bg-(--p-content-background) py-1 pe-2.5 ps-2 text-[11px] font-semibold text-(--p-text-color) shadow-[0_1px_3px_rgba(15,23,42,0.1)] transition-colors group-[.is-selected]:border-(--p-primary-color) group-[.is-selected]:text-(--p-primary-color)\"\n            >\n              <span\n                class=\"size-1.5 flex-none rounded-full bg-[rgb(var(--fp-connector))] group-[.is-selected]:bg-(--p-primary-color)\"\n              ></span>\n              {{ edge.label }}\n            </span>\n          </div>\n        } @else if (edge.isFormula) {\n          <div\n            fConnectionContent\n            [position]=\"0.5\"\n            class=\"pointer-events-none opacity-100 transition-opacity duration-150 group-hover:opacity-0 group-[.is-selected]:opacity-0\"\n          >\n            <span\n              class=\"grid h-5 w-5 place-items-center rounded-full border border-(--p-content-border-color) bg-(--p-content-background) font-mono text-[12px] italic text-(--p-primary-color) shadow-sm\"\n              title=\"Conditional route\"\n              >\u0192</span\n            >\n          </div>\n        }\n\n        <!-- Centered action box \u2014 edit (opens the connection MODAL) + delete.\n             Same content anchor (position 0.5), revealed on hover/selected and\n             overlapping the label so the actions stay centered ON the line. -->\n        @if (edgeIssueCount(edge) > 0) {\n          <div\n            fConnectionContent\n            [position]=\"0.38\"\n            class=\"pointer-events-auto\"\n          >\n            <span\n              class=\"fp-node-badge grid h-[18px] w-[18px] cursor-help place-items-center rounded-sm bg-(--p-content-background) shadow-sm outline-none transition-transform focus-visible:ring-2 focus-visible:ring-(--p-primary-color)\"\n              [style.color]=\"edgeIssueColor(edge)\"\n              tabindex=\"0\"\n              role=\"img\"\n              [attr.aria-label]=\"edgeIssueTooltip(edge)\"\n              [mtTooltip]=\"edgeIssueTooltip(edge)\"\n              [tooltipStyleClass]=\"edgeIssueTooltipClass(edge)\"\n              tooltipPosition=\"top\"\n              appendTo=\"body\"\n              [escape]=\"true\"\n              [showDelay]=\"180\"\n              [hideDelay]=\"80\"\n              (pointerdown)=\"$event.stopPropagation()\"\n              (click)=\"\n                $event.stopPropagation();\n                edge.edgeKind === 'triggerStart' && edge.triggerId != null\n                  ? onTriggerOpenDetails({ triggerId: edge.triggerId })\n                  : onEdgeOpenDetails({ connectionId: edge.connectionId })\n              \"\n              (dblclick)=\"$event.stopPropagation()\"\n            >\n              <svg width=\"15\" height=\"15\" viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n                <path\n                  d=\"M10 3.4 18 16.8 2 16.8 Z\"\n                  fill=\"currentColor\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2.6\"\n                  stroke-linejoin=\"round\"\n                />\n                <rect x=\"9.05\" y=\"8\" width=\"1.9\" height=\"4.6\" rx=\"0.95\" fill=\"#fff\" />\n                <circle cx=\"10\" cy=\"14.6\" r=\"1.05\" fill=\"#fff\" />\n              </svg>\n            </span>\n          </div>\n        }\n\n        @if (edge.runtimeState && edge.runtimeTooltip) {\n          <div\n            fConnectionContent\n            [position]=\"0.62\"\n            class=\"pointer-events-auto\"\n          >\n            <span\n              class=\"inline-flex h-[18px] w-[18px] cursor-help items-center justify-center rounded-full border bg-(--p-content-background) shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-(--p-primary-color)\"\n              [class.animate-pulse]=\"edge.runtimeState === 'active'\"\n              [style.borderColor]=\"edgeRuntimeColor(edge)\"\n              [style.color]=\"edgeRuntimeColor(edge)\"\n              tabindex=\"0\"\n              role=\"status\"\n              [attr.aria-label]=\"edge.runtimeTooltip\"\n              [mtTooltip]=\"edge.runtimeTooltip\"\n              tooltipPosition=\"top\"\n              appendTo=\"body\"\n              [escape]=\"true\"\n              [showDelay]=\"180\"\n              [hideDelay]=\"80\"\n              (pointerdown)=\"$event.stopPropagation()\"\n              (click)=\"$event.stopPropagation()\"\n              (dblclick)=\"$event.stopPropagation()\"\n            >\n              <mt-icon [icon]=\"edgeRuntimeIcon(edge)\" class=\"[&_svg]:size-3\" />\n            </span>\n          </div>\n        }\n\n        <div\n          fConnectionContent\n          [position]=\"0.5\"\n          class=\"pointer-events-none opacity-0 transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100 group-[.is-selected]:pointer-events-auto group-[.is-selected]:opacity-100\"\n        >\n          <div\n            class=\"flex items-center gap-0.5 rounded-lg border border-(--p-content-border-color) bg-(--p-content-background) p-1 shadow-md\"\n            role=\"toolbar\"\n            aria-label=\"Connection actions\"\n            (pointerdown)=\"$event.stopPropagation()\"\n            (click)=\"$event.stopPropagation()\"\n          >\n            @if (edge.edgeKind === \"triggerStart\" && edge.triggerId != null) {\n              <mt-button\n                variant=\"text\"\n                severity=\"secondary\"\n                size=\"small\"\n                icon=\"general.settings-01\"\n                [tooltip]=\"'flowplus.trigger.node.configure' | transloco\"\n                (onClick)=\"onTriggerOpenDetails({ triggerId: edge.triggerId })\"\n              />\n              <mt-button\n                variant=\"text\"\n                severity=\"danger\"\n                size=\"small\"\n                icon=\"general.link-broken-01\"\n                [tooltip]=\"'flowplus.trigger.node.unlink' | transloco\"\n                (onClick)=\"\n                  onTriggerStartDisconnect({ triggerId: edge.triggerId })\n                \"\n              />\n            } @else {\n              <mt-button\n                variant=\"text\"\n                severity=\"secondary\"\n                size=\"small\"\n                icon=\"general.edit-05\"\n                [tooltip]=\"'flowplus.inspector.connection.title' | transloco\"\n                (onClick)=\"\n                  onEdgeOpenDetails({ connectionId: edge.connectionId })\n                \"\n              />\n              <mt-button\n                variant=\"text\"\n                severity=\"danger\"\n                size=\"small\"\n                icon=\"general.trash-01\"\n                [tooltip]=\"'flowplus.edge.delete' | transloco\"\n                (onClick)=\"onEdgeRemove({ connectionId: edge.connectionId })\"\n              />\n            }\n          </div>\n        </div>\n      </f-connection>\n    }\n\n    <!-- The Foblex `fNode` directive lives on the component element itself\n         (not an inner div). This keeps the node element a DIRECT child of\n         Foblex's nodes container, so `hostElement.parentElement` IS that\n         container \u2014 required by the select/move layer-raise (otherwise it\n         throws \"Unknown container\"). This is the Foblex call-center pattern;\n         the `fNode` attribute also routes it into the `[fNode]` projection\n         slot, so `ngProjectAs` is not needed. -->\n    @for (node of nodes(); track node.id) {\n      <fp-flow-node\n        fNode\n        fDragHandle\n        fNodeInput\n        [attr.data-fp-node]=\"node.stepId\"\n        [fInputId]=\"node.inputs[0]?.id\"\n        [fInputMultiple]=\"node.inputs[0]?.allowMultiple ?? true\"\n        [fInputDisabled]=\"!node.inputs.length\"\n        [fNodeId]=\"node.id\"\n        [fNodePosition]=\"{ x: node.x, y: node.y }\"\n        (fNodePositionChange)=\"onStepPositionChange(node.stepId, $event)\"\n        [node]=\"node\"\n        [connectedOutputKeys]=\"connectedOutputKeys(node.stepId)\"\n        (quickAdd)=\"onNodeQuickAdd($event)\"\n        (portPlusClick)=\"onNodePortPlus($event)\"\n        (duplicate)=\"onNodeDuplicate($event)\"\n        (remove)=\"onNodeRemove($event)\"\n        (openDetails)=\"onNodeOpenDetails($event)\"\n        (openChild)=\"onOpenChild($event)\"\n      />\n    }\n\n    @for (t of triggerNodes(); track t.triggerId) {\n      <fp-trigger-node\n        fNode\n        fDragHandle\n        [attr.data-fp-trigger]=\"t.triggerId\"\n        [fNodeId]=\"'trigger:' + t.triggerId\"\n        [fNodePosition]=\"{ x: t.x, y: t.y }\"\n        (fNodePositionChange)=\"onTriggerPositionChange(t.triggerId, $event)\"\n        [trigger]=\"t\"\n        [noFirstStep]=\"!t.startStepId\"\n        (addFirstStep)=\"onTriggerAddFirstStep($event)\"\n        (configure)=\"onTriggerOpenDetails($event)\"\n        (execute)=\"onTriggerExecute($event)\"\n        (toggleEnabled)=\"onTriggerToggleEnabled($event)\"\n        (remove)=\"onTriggerDelete($event)\"\n      />\n    }\n  </f-canvas>\n\n  <!-- Minimap \u2014 `f-flow` child (NOT inside `f-canvas`). Toggled from the\n       canvas controls; `fMinSize` keeps a couple of nodes zoomed-out enough\n       to give real spatial context. -->\n  @if (minimapVisible()) {\n    <f-minimap [fMinSize]=\"minimapMinSize\" />\n  }\n\n  @if (showStarter() && !store.loading()) {\n    <fp-starter-card\n      (addTrigger)=\"onStarterAddTrigger($event)\"\n      (directPick)=\"onStarterDirectPick($event)\"\n    />\n  }\n\n  <fp-canvas-controls\n    [zoom]=\"zoom()\"\n    [minimapVisible]=\"minimapVisible()\"\n    (zoomIn)=\"zoomIn()\"\n    (zoomOut)=\"zoomOut()\"\n    (fitView)=\"fitView()\"\n    (resetView)=\"resetView()\"\n    (toggleMinimap)=\"toggleMinimap()\"\n    (autoLayout)=\"autoLayout()\"\n  />\n</f-flow>\n" }]
+                    ], template: "<f-flow\n  #flow\n  fDraggable\n  [vCellSize]=\"gridCellSize\"\n  [hCellSize]=\"gridCellSize\"\n  [fCellSizeWhileDragging]=\"false\"\n  (fFullRendered)=\"onFullRendered()\"\n  (fNodesRendered)=\"onNodesRendered()\"\n  (fCreateNode)=\"onCreateNode($event)\"\n  (fCreateConnection)=\"onCreateConnection($event)\"\n  (fReassignConnection)=\"onReassignConnection($event)\"\n  (fDragStarted)=\"onDragStarted($event)\"\n  (fDragEnded)=\"onDragEnded()\"\n  (fMoveNodes)=\"onMoveNodes($event)\"\n  (fSelectionChange)=\"onSelectionChange($event)\"\n>\n  <!-- Background dot grid \u2014 its spacing is locked to the drag cell size so\n       nodes snap exactly onto the visible dots (Foblex grid-system). -->\n  <f-background>\n    <f-circle-pattern [radius]=\"gridCellSize\" />\n  </f-background>\n\n  <!-- Alignment guides + marquee selection are `f-flow` children (NOT\n       `f-canvas` children \u2014 `f-canvas` only projects connections/nodes/groups,\n       so helpers placed inside it are silently dropped). This mirrors the\n       Foblex call-center reference layout. -->\n  <f-line-alignment [fAlignThreshold]=\"20\" />\n  <f-selection-area />\n\n  <!-- Auto-pan: when dragging a node / connection near the viewport edge, the\n       canvas pans to follow, so you can wire across off-screen nodes without\n       letting go. (Foblex `f-auto-pan` plugin.) -->\n  <f-auto-pan [fEdgeThreshold]=\"36\" [fSpeed]=\"8\" />\n\n  <f-canvas\n    #canvas\n    fZoom\n    [debounceTime]=\"200\"\n    [fLayers]=\"canvasLayers\"\n    (fCanvasChange)=\"onCanvasChange($event)\"\n  >\n    <!-- Floating behavior anchors the preview at the connector boundary along\n         the center\u2192pointer axis, so a connection dragged from the \"+\" outlet\n         leaves it cleanly (NOT from its bottom edge \u2014 `fixed` defaults an AUTO\n         connectable side to bottom) and snaps to the target's nearest edge. -->\n    <f-connection-for-create\n      [fBehavior]=\"'floating'\"\n      fType=\"adaptive-curve\"\n      [fOffset]=\"0\"\n    >\n      <f-connection-marker-arrow />\n    </f-connection-for-create>\n\n    <!-- Auto-snap: while dragging a new/reassigned connection, snap to the\n         nearest connector within the threshold (forgiving connect UX). -->\n    <f-snap-connection\n      [fBehavior]=\"'floating'\"\n      fType=\"adaptive-curve\"\n      [fSnapThreshold]=\"40\"\n      [fOffset]=\"0\"\n    >\n      <f-connection-marker-arrow />\n    </f-snap-connection>\n\n    <!-- ngProjectAs is REQUIRED: `f-canvas` distributes projected content\n         into its layer containers via selective `<ng-content select=\"...\">`\n         with NO catch-all slot. A wrapper component (`fp-flow-node`, etc.)\n         does not match `[fNode]` / `f-connection` on its host, so without\n         `ngProjectAs` Foblex silently drops it and the canvas renders empty.\n         The actual Foblex directive lives on the wrapper's inner element and\n         self-registers via the mediator, so routing the wrapper into the\n         right layer is all that's needed. -->\n    @for (note of canvasNotes(); track note.id) {\n      <fp-canvas-note\n        fGroup\n        fDragHandle\n        [attr.data-fp-note]=\"note.id\"\n        [fGroupId]=\"canvasNoteGroupId(note.id)\"\n        [fGroupPosition]=\"{ x: note.x, y: note.y }\"\n        [fGroupSize]=\"{ width: note.width, height: note.height }\"\n        [fGroupDraggingDisabled]=\"editingNoteId() === note.id\"\n        [note]=\"note\"\n        [selected]=\"selectedCanvasNoteIds().includes(note.id)\"\n        [editing]=\"editingNoteId() === note.id\"\n        (fGroupPositionChange)=\"onNotePositionChange(note.id, $event)\"\n        (fGroupSizeChange)=\"onNoteSizeChange(note.id, $event)\"\n        (contentChange)=\"onNoteContentChange($event)\"\n        (colorChange)=\"onNoteColorChange($event)\"\n        (duplicate)=\"onNoteDuplicate($event)\"\n        (remove)=\"onNoteDelete($event)\"\n        (editStart)=\"onNoteEditStart($event.noteId)\"\n        (editEnd)=\"editingNoteId.set(null)\"\n      />\n    }\n\n    @for (lane of branchLanes(); track lane.id) {\n      <div\n        ngProjectAs=\"[fGroup]\"\n        class=\"pointer-events-none absolute z-0 rounded-[14px] border border-dashed border-[color-mix(in_srgb,rgb(var(--fp-parallel))_55%,transparent)] bg-[color-mix(in_srgb,rgb(var(--fp-parallel))_8%,transparent)]\"\n        [attr.data-color-token]=\"lane.colorToken\"\n        [style.left.px]=\"lane.x\"\n        [style.top.px]=\"lane.y\"\n        [style.width.px]=\"lane.width\"\n        [style.height.px]=\"lane.height\"\n      >\n        <span\n          class=\"pointer-events-auto absolute -top-2.5 start-3 rounded-full border border-[color-mix(in_srgb,rgb(var(--fp-parallel))_40%,transparent)] bg-(--p-content-background) px-2 py-px text-[10.5px] font-semibold text-[rgb(var(--fp-parallel))]\"\n          >{{ lane.label }}</span\n        >\n      </div>\n    }\n\n    <!-- Connections are inlined here (NOT wrapped in a component) so each\n         <f-connection> is a DIRECT child of Foblex's connections container.\n         A wrapper would make `hostElement.parentElement` the wrapper instead\n         of the container, which makes Foblex's select layer-raise throw\n         \"Unknown container\" the moment an edge is selected. Same call-center\n         pattern used for nodes/triggers. -->\n    @for (edge of edges(); track edge.id) {\n      <f-connection\n        class=\"group\"\n        [attr.data-fp-edge]=\"edge.connectionId\"\n        [fConnectionId]=\"edge.id\"\n        [fOutputId]=\"edge.sourcePortId\"\n        [fInputId]=\"edge.targetPortId\"\n        [fBehavior]=\"'fixed'\"\n        [fType]=\"'adaptive-curve'\"\n        [fOffset]=\"32\"\n        fInputSide=\"calculate\"\n        [fReassignableStart]=\"edge.edgeKind !== 'triggerStart'\"\n        [fReassignDisabled]=\"edge.edgeKind === 'triggerStart'\"\n        [class.fp-edge]=\"true\"\n        [class.is-trigger-start]=\"edge.edgeKind === 'triggerStart'\"\n        [class.is-drop-target]=\"isDropTargetEdge(edge.connectionId)\"\n        [class.is-selected]=\"isConnectionSelected(edge.connectionId)\"\n        [class.is-error]=\"edge.isInvalid\"\n        [class.is-formula]=\"edge.isFormula\"\n        [class.is-runtime-active]=\"edge.runtimeState === 'active'\"\n        [class.is-runtime-completed]=\"edge.runtimeState === 'completed'\"\n        [class.is-runtime-failed]=\"edge.runtimeState === 'failed'\"\n        [class.is-runtime-waiting]=\"edge.runtimeState === 'waiting'\"\n        (dblclick)=\"\n          edge.edgeKind === 'triggerStart' && edge.triggerId != null\n            ? onTriggerOpenDetails({ triggerId: edge.triggerId })\n            : onEdgeOpenDetails({ connectionId: edge.connectionId })\n        \"\n      >\n        <!-- Arrow marker at the target \u2014 the connection carries the arrowhead;\n             the input lives on the node host (no separate input element). -->\n        <f-connection-marker-arrow [type]=\"markerEnd\" />\n\n        <!-- Editable waypoints are intentionally NOT rendered: there is no\n             backend persistence wired for manual bends, so exposing draggable\n             waypoints would silently lose the user's edits on reload. -->\n\n        <!-- Label / formula badge \u2014 pinned to the CENTER of the line\n             (connection-content position 0.5). Fades out on hover/selected so\n             the centered action box can take its place. -->\n        @if (edge.label) {\n          <div\n            fConnectionContent\n            [position]=\"0.5\"\n            class=\"pointer-events-none opacity-100 transition-opacity duration-150 group-hover:opacity-0 group-[.is-selected]:opacity-0\"\n          >\n            <span\n              class=\"inline-flex items-center gap-1.5 whitespace-nowrap rounded-full border border-[rgb(var(--fp-connector))] bg-(--p-content-background) py-1 pe-2.5 ps-2 text-[11px] font-semibold text-(--p-text-color) shadow-[0_1px_3px_rgba(15,23,42,0.1)] transition-colors group-[.is-selected]:border-(--p-primary-color) group-[.is-selected]:text-(--p-primary-color)\"\n            >\n              <span\n                class=\"size-1.5 flex-none rounded-full bg-[rgb(var(--fp-connector))] group-[.is-selected]:bg-(--p-primary-color)\"\n              ></span>\n              {{ edge.label }}\n            </span>\n          </div>\n        } @else if (edge.isFormula) {\n          <div\n            fConnectionContent\n            [position]=\"0.5\"\n            class=\"pointer-events-none opacity-100 transition-opacity duration-150 group-hover:opacity-0 group-[.is-selected]:opacity-0\"\n          >\n            <span\n              class=\"grid h-5 w-5 place-items-center rounded-full border border-(--p-content-border-color) bg-(--p-content-background) font-mono text-[12px] italic text-(--p-primary-color) shadow-sm\"\n              title=\"Conditional route\"\n              >\u0192</span\n            >\n          </div>\n        }\n\n        <!-- Centered action box \u2014 edit (opens the connection MODAL) + delete.\n             Same content anchor (position 0.5), revealed on hover/selected and\n             overlapping the label so the actions stay centered ON the line. -->\n        @if (edgeIssueCount(edge) > 0) {\n          <div\n            fConnectionContent\n            [position]=\"0.38\"\n            class=\"pointer-events-auto\"\n          >\n            <span\n              class=\"fp-node-badge grid h-[18px] w-[18px] cursor-help place-items-center rounded-sm bg-(--p-content-background) shadow-sm outline-none transition-transform focus-visible:ring-2 focus-visible:ring-(--p-primary-color)\"\n              [style.color]=\"edgeIssueColor(edge)\"\n              tabindex=\"0\"\n              role=\"img\"\n              [attr.aria-label]=\"edgeIssueTooltip(edge)\"\n              [mtTooltip]=\"edgeIssueTooltip(edge)\"\n              [tooltipStyleClass]=\"edgeIssueTooltipClass(edge)\"\n              tooltipPosition=\"top\"\n              appendTo=\"body\"\n              [escape]=\"true\"\n              [showDelay]=\"180\"\n              [hideDelay]=\"80\"\n              (pointerdown)=\"$event.stopPropagation()\"\n              (click)=\"\n                $event.stopPropagation();\n                edge.edgeKind === 'triggerStart' && edge.triggerId != null\n                  ? onTriggerOpenDetails({ triggerId: edge.triggerId })\n                  : onEdgeOpenDetails({ connectionId: edge.connectionId })\n              \"\n              (dblclick)=\"$event.stopPropagation()\"\n            >\n              <svg width=\"15\" height=\"15\" viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n                <path\n                  d=\"M10 3.4 18 16.8 2 16.8 Z\"\n                  fill=\"currentColor\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2.6\"\n                  stroke-linejoin=\"round\"\n                />\n                <rect x=\"9.05\" y=\"8\" width=\"1.9\" height=\"4.6\" rx=\"0.95\" fill=\"#fff\" />\n                <circle cx=\"10\" cy=\"14.6\" r=\"1.05\" fill=\"#fff\" />\n              </svg>\n            </span>\n          </div>\n        }\n\n        @if (edge.runtimeState && edge.runtimeTooltip) {\n          <div\n            fConnectionContent\n            [position]=\"0.62\"\n            class=\"pointer-events-auto\"\n          >\n            <span\n              class=\"inline-flex h-[18px] w-[18px] cursor-help items-center justify-center rounded-full border bg-(--p-content-background) shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-(--p-primary-color)\"\n              [class.animate-pulse]=\"edge.runtimeState === 'active'\"\n              [style.borderColor]=\"edgeRuntimeColor(edge)\"\n              [style.color]=\"edgeRuntimeColor(edge)\"\n              tabindex=\"0\"\n              role=\"status\"\n              [attr.aria-label]=\"edge.runtimeTooltip\"\n              [mtTooltip]=\"edge.runtimeTooltip\"\n              tooltipPosition=\"top\"\n              appendTo=\"body\"\n              [escape]=\"true\"\n              [showDelay]=\"180\"\n              [hideDelay]=\"80\"\n              (pointerdown)=\"$event.stopPropagation()\"\n              (click)=\"$event.stopPropagation()\"\n              (dblclick)=\"$event.stopPropagation()\"\n            >\n              <mt-icon [icon]=\"edgeRuntimeIcon(edge)\" class=\"[&_svg]:size-3\" />\n            </span>\n          </div>\n        }\n\n        <div\n          fConnectionContent\n          [position]=\"0.5\"\n          class=\"pointer-events-none opacity-0 transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100 group-[.is-selected]:pointer-events-auto group-[.is-selected]:opacity-100\"\n        >\n          <div\n            class=\"flex items-center gap-0.5 rounded-lg border border-(--p-content-border-color) bg-(--p-content-background) p-1 shadow-md\"\n            role=\"toolbar\"\n            aria-label=\"Connection actions\"\n            (pointerdown)=\"$event.stopPropagation()\"\n            (click)=\"$event.stopPropagation()\"\n          >\n            @if (edge.edgeKind === \"triggerStart\" && edge.triggerId != null) {\n              <mt-button\n                variant=\"text\"\n                severity=\"secondary\"\n                size=\"small\"\n                icon=\"general.settings-01\"\n                [tooltip]=\"'flowplus.trigger.node.configure' | transloco\"\n                (onClick)=\"onTriggerOpenDetails({ triggerId: edge.triggerId })\"\n              />\n              <mt-button\n                variant=\"text\"\n                severity=\"danger\"\n                size=\"small\"\n                icon=\"general.link-broken-01\"\n                [tooltip]=\"'flowplus.trigger.node.unlink' | transloco\"\n                (onClick)=\"\n                  onTriggerStartDisconnect({ triggerId: edge.triggerId })\n                \"\n              />\n            } @else {\n              <mt-button\n                variant=\"text\"\n                severity=\"secondary\"\n                size=\"small\"\n                icon=\"general.edit-05\"\n                [tooltip]=\"'flowplus.inspector.connection.title' | transloco\"\n                (onClick)=\"\n                  onEdgeOpenDetails({ connectionId: edge.connectionId })\n                \"\n              />\n              <mt-button\n                variant=\"text\"\n                severity=\"danger\"\n                size=\"small\"\n                icon=\"general.trash-01\"\n                [tooltip]=\"'flowplus.edge.delete' | transloco\"\n                (onClick)=\"onEdgeRemove({ connectionId: edge.connectionId })\"\n              />\n            }\n          </div>\n        </div>\n      </f-connection>\n    }\n\n    <!-- The Foblex `fNode` directive lives on the component element itself\n         (not an inner div). This keeps the node element a DIRECT child of\n         Foblex's nodes container, so `hostElement.parentElement` IS that\n         container \u2014 required by the select/move layer-raise (otherwise it\n         throws \"Unknown container\"). This is the Foblex call-center pattern;\n         the `fNode` attribute also routes it into the `[fNode]` projection\n         slot, so `ngProjectAs` is not needed. -->\n    @for (node of nodes(); track node.id) {\n      <fp-flow-node\n        fNode\n        fDragHandle\n        fNodeInput\n        [attr.data-fp-node]=\"node.stepId\"\n        [fInputId]=\"node.inputs[0]?.id\"\n        [fInputMultiple]=\"node.inputs[0]?.allowMultiple ?? true\"\n        [fInputDisabled]=\"!node.inputs.length\"\n        [fNodeId]=\"node.id\"\n        [fNodePosition]=\"{ x: node.x, y: node.y }\"\n        (fNodePositionChange)=\"onStepPositionChange(node.stepId, $event)\"\n        [node]=\"node\"\n        [connectedOutputKeys]=\"connectedOutputKeys(node.stepId)\"\n        (quickAdd)=\"onNodeQuickAdd($event)\"\n        (portPlusClick)=\"onNodePortPlus($event)\"\n        (duplicate)=\"onNodeDuplicate($event)\"\n        (remove)=\"onNodeRemove($event)\"\n        (openDetails)=\"onNodeOpenDetails($event)\"\n        (openChild)=\"onOpenChild($event)\"\n      />\n    }\n\n    @for (t of triggerNodes(); track t.triggerId) {\n      <fp-trigger-node\n        fNode\n        fDragHandle\n        [attr.data-fp-trigger]=\"t.triggerId\"\n        [fNodeId]=\"'trigger:' + t.triggerId\"\n        [fNodePosition]=\"{ x: t.x, y: t.y }\"\n        (fNodePositionChange)=\"onTriggerPositionChange(t.triggerId, $event)\"\n        [trigger]=\"t\"\n        [noFirstStep]=\"!t.startStepId\"\n        (addFirstStep)=\"onTriggerAddFirstStep($event)\"\n        (configure)=\"onTriggerOpenDetails($event)\"\n        (execute)=\"onTriggerExecute($event)\"\n        (toggleEnabled)=\"onTriggerToggleEnabled($event)\"\n        (remove)=\"onTriggerDelete($event)\"\n      />\n    }\n  </f-canvas>\n\n  <!-- Minimap \u2014 `f-flow` child (NOT inside `f-canvas`). Toggled from the\n       canvas controls; `fMinSize` keeps a couple of nodes zoomed-out enough\n       to give real spatial context. -->\n  @if (minimapVisible()) {\n    <f-minimap [fMinSize]=\"minimapMinSize\" />\n  }\n\n  @if (showStarter() && !store.loading()) {\n    <fp-starter-card\n      (addTrigger)=\"onStarterAddTrigger($event)\"\n      (directPick)=\"onStarterDirectPick($event)\"\n    />\n  }\n\n  <fp-canvas-controls\n    [zoom]=\"zoom()\"\n    [minimapVisible]=\"minimapVisible()\"\n    (zoomIn)=\"zoomIn()\"\n    (zoomOut)=\"zoomOut()\"\n    (fitView)=\"fitView()\"\n    (resetView)=\"resetView()\"\n    (toggleMinimap)=\"toggleMinimap()\"\n    (autoLayout)=\"autoLayout()\"\n  />\n</f-flow>\n" }]
         }], ctorParameters: () => [], propDecorators: { flow: [{ type: i0.ViewChild, args: ['flow', { isSignal: true }] }], canvas: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }], paletteDrop: [{
                 type: Output
             }], connectionCreate: [{
@@ -20334,6 +21022,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                 type: Output
             }], requestAddStep: [{
                 type: Output
+            }], noteUpdate: [{
+                type: Output
+            }], noteDuplicate: [{
+                type: Output
+            }], noteDelete: [{
+                type: Output
             }] } });
 function triggerStarterKindMatchesCatalogItem(kind, item) {
     const metadata = item.metadata && typeof item.metadata === 'object'
@@ -20359,7 +21053,8 @@ function readTranslatePosition(el) {
 function isCanvasPositionElement(target) {
     return (target instanceof HTMLElement &&
         (target.matches('fp-flow-node[data-fp-node]') ||
-            target.matches('fp-trigger-node[data-fp-trigger]')));
+            target.matches('fp-trigger-node[data-fp-trigger]') ||
+            target.matches('fp-canvas-note[data-fp-note]')));
 }
 function normalizeOutputPortKey(portKey, fallback) {
     const key = portKey || fallback;
@@ -20526,6 +21221,8 @@ class PaletteComponent {
     add = new EventEmitter();
     /** Add a trigger from the "Add another trigger" section. */
     addTrigger = new EventEmitter();
+    /** Add a sticky canvas note directly from the rail. */
+    addNote = new EventEmitter();
     searchModel = '';
     /** Two-level navigation state. */
     view = signal('root', ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
@@ -20624,6 +21321,9 @@ class PaletteComponent {
     openTriggers() {
         this.view.set('triggers');
     }
+    addCanvasNote() {
+        this.addNote.emit();
+    }
     back() {
         this.view.set('root');
         this.activeCategory.set(null);
@@ -20729,7 +21429,7 @@ class PaletteComponent {
         return v && v !== key ? v : fallback;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: PaletteComponent, isStandalone: true, selector: "fp-palette", outputs: { closeRequested: "closeRequested", openRequested: "openRequested", add: "add", addTrigger: "addTrigger" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)" }, classAttribute: "block absolute top-0 bottom-0 start-0 w-11 z-[5] overflow-visible bg-(--p-surface-200) dark:bg-(--p-surface-800) border-e border-(--p-content-border-color)" }, ngImport: i0, template: "<div\r\n  class=\"flex h-full w-11 flex-col items-center gap-2 bg-transparent py-3\"\r\n  role=\"toolbar\"\r\n  [attr.aria-label]=\"'flowplus.palette.rail' | transloco\"\r\n>\r\n  <mt-button\n    variant=\"text\"\n    severity=\"secondary\"\n    size=\"small\"\n    [icon]=\"isExpanded() ? 'general.x-close' : 'general.plus'\"\n    [styleClass]=\"\n      isExpanded()\n        ? 'fp-palette-rail-button is-active'\n        : 'fp-palette-rail-button'\n    \"\n    [attr.aria-label]=\"'flowplus.palette.toggle' | transloco\"\n    [mtTooltip]=\"'flowplus.palette.toggle' | transloco\"\n    tooltipPosition=\"right\"\n    appendTo=\"body\"\n    [showDelay]=\"220\"\n    [hideDelay]=\"80\"\n    (onClick)=\"isExpanded() ? closeDrawer() : openDrawer()\"\n  />\n\n  <mt-button\n    variant=\"text\"\n    severity=\"secondary\"\n    size=\"small\"\n    icon=\"general.search-md\"\n    [styleClass]=\"\n      isExpanded()\n        ? 'fp-palette-rail-button is-active'\n        : 'fp-palette-rail-button'\n    \"\n    [attr.aria-label]=\"'flowplus.palette.search' | transloco\"\n    [mtTooltip]=\"'flowplus.palette.search' | transloco\"\n    tooltipPosition=\"right\"\n    appendTo=\"body\"\n    [showDelay]=\"220\"\n    [hideDelay]=\"80\"\n    (onClick)=\"openDrawer()\"\n  />\n</div>\r\n\r\n@if (isExpanded()) {\r\n  <aside\r\n    class=\"absolute start-11 top-0 bottom-10 z-[6] flex w-80 min-h-0 flex-col overflow-hidden border-e border-(--p-content-border-color) bg-(--p-surface-50) shadow-lg animate-[fp-palette-slide-in_280ms_cubic-bezier(0,0,0.2,1)_both] rtl:animate-[fp-palette-slide-in-rtl_280ms_cubic-bezier(0,0,0.2,1)_both]\"\r\n    role=\"complementary\"\r\n    [attr.aria-label]=\"'flowplus.palette.title' | transloco\"\r\n  >\r\n    <header class=\"flex flex-col gap-2.5 px-3 pt-3 pb-2.5\">\r\n      <div class=\"flex items-center gap-2\">\r\n        @if (!searching() && view() !== \"root\") {\r\n          <mt-button\n            variant=\"text\"\n            severity=\"secondary\"\n            size=\"small\"\n            icon=\"arrow.chevron-left\"\n            styleClass=\"fp-palette-back-button\"\n            (onClick)=\"back()\"\n            [attr.aria-label]=\"'flowplus.palette.back' | transloco\"\n            [mtTooltip]=\"'flowplus.palette.back' | transloco\"\n            tooltipPosition=\"right\"\n            appendTo=\"body\"\n            [showDelay]=\"220\"\n            [hideDelay]=\"80\"\n          />\n        }\r\n        <h3\r\n          class=\"min-w-0 flex-1 truncate text-[13.5px] font-bold text-(--p-text-color)\"\r\n        >\r\n          {{ headerTitle() }}\r\n        </h3>\r\n      </div>\r\n\r\n      <mt-text-field\r\n        [(ngModel)]=\"searchModel\"\r\n        (ngModelChange)=\"onSearchChange($event)\"\r\n        [placeholder]=\"'flowplus.palette.search' | transloco\"\r\n        icon=\"general.search-md\"\r\n      />\r\n    </header>\r\n\r\n    <div\r\n      class=\"fp-scroll fp-pal-list flex flex-1 flex-col gap-0.5 overflow-y-auto px-2.5 pt-1 pb-6\"\r\n      role=\"list\"\r\n    >\r\n      @if (searching() && view() !== \"triggers\") {\n        @for (item of searchResults(); track paletteItemKey(item, $index)) {\r\n          <div\r\n            fExternalItem\n            [fData]=\"item\"\n            [fExternalItemId]=\"paletteItemKey(item, $index)\"\n            [fPreviewMatchSize]=\"false\"\n            class=\"group/item !flex w-full cursor-grab touch-none select-none items-center gap-3 rounded-lg px-2.5 py-2.5 transition-colors hover:bg-(--p-surface-100) active:cursor-grabbing focus-visible:bg-(--p-surface-100) focus-visible:outline-none\"\n            role=\"button\"\r\n            tabindex=\"0\"\r\n            [attr.title]=\"\r\n              resolve(item.description) || resolve(item.displayName)\r\n            \"\r\n            (click)=\"pickStep(item)\"\n            (keydown.enter)=\"pickStep(item)\"\n          >\n            <ng-template fExternalItemPreview>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  stepDragPreview;\n                  context: { $implicit: item }\n                \"\n              />\n            </ng-template>\n            <mt-avatar\n              shape=\"square\"\n              [icon]=\"iconFor(item)\"\n              [style.--fp-avatar-color]=\"severityFor(item).color\"\r\n              [style.--fp-avatar-bg]=\"severityFor(item).bg\"\r\n            />\r\n            <div class=\"min-w-0 flex-1\">\r\n              <div\r\n                class=\"truncate text-[13px] font-semibold text-(--p-text-color)\"\r\n              >\r\n                {{ resolve(item.displayName) }}\r\n              </div>\r\n              @if (item.description) {\r\n                <div\r\n                  class=\"line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\r\n                >\r\n                  {{ resolve(item.description) }}\r\n                </div>\r\n              }\r\n            </div>\r\n            <mt-icon\r\n              class=\"flex-none text-(--p-text-muted-color)/40 transition-colors group-hover/item:text-(--p-text-muted-color) [&_svg]:size-4\"\r\n              icon=\"general.dots-grid\"\r\n            />\r\n          </div>\r\n        }\r\n        @if (searchResults().length === 0) {\r\n          <ng-container *ngTemplateOutlet=\"emptyRow\" />\r\n        }\r\n      } @else if (view() === \"triggers\") {\n        @for (option of visibleTriggerOptions(); track option.key) {\n          <div\n            fExternalItem\n            [fData]=\"triggerPaletteItem(option)\"\n            [fExternalItemId]=\"triggerPaletteItemKey(option, $index)\"\n            [fPreviewMatchSize]=\"false\"\n            class=\"group/item !flex w-full cursor-grab touch-none select-none items-center gap-3 rounded-lg px-2.5 py-2.5 text-start transition-colors hover:bg-(--p-surface-100) active:cursor-grabbing focus-visible:bg-(--p-surface-100) focus-visible:outline-none\"\n            role=\"button\"\n            tabindex=\"0\"\n            [attr.title]=\"\n              resolve(option.description) || resolve(option.displayName)\n            \"\n            (click)=\"pickTrigger(option)\"\n            (keydown.enter)=\"pickTrigger(option)\"\n          >\n            <ng-template fExternalItemPreview>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  triggerDragPreview;\n                  context: { $implicit: option }\n                \"\n              />\n            </ng-template>\n            <mt-avatar\n              shape=\"square\"\n              [icon]=\"triggerIconFor(option)\"\n              [style.--fp-avatar-color]=\"triggerOptionVars(option).color\"\n              [style.--fp-avatar-bg]=\"triggerOptionVars(option).bg\"\r\n            />\r\n            <span class=\"min-w-0 flex-1\">\r\n              <span\r\n                class=\"block truncate text-[13px] font-semibold text-(--p-text-color)\"\r\n                >{{ resolve(option.displayName) }}</span\r\n              >\r\n              @if (option.description) {\r\n                <span\r\n                  class=\"block line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\r\n                  >{{ resolve(option.description) }}</span\r\n                >\n              }\n            </span>\n            <mt-icon\n              class=\"flex-none text-(--p-text-muted-color)/40 transition-colors group-hover/item:text-(--p-text-muted-color) [&_svg]:size-4\"\n              icon=\"general.dots-grid\"\n            />\n          </div>\n        }\n        @if (visibleTriggerOptions().length === 0) {\n          <ng-container *ngTemplateOutlet=\"emptyRow\" />\n        }\n      } @else if (view() === \"category\") {\n        @for (item of activeItems(); track paletteItemKey(item, $index)) {\r\n          <div\r\n            fExternalItem\n            [fData]=\"item\"\n            [fExternalItemId]=\"paletteItemKey(item, $index)\"\n            [fPreviewMatchSize]=\"false\"\n            class=\"group/item !flex w-full cursor-grab touch-none select-none items-center gap-3 rounded-lg px-2.5 py-2.5 transition-colors hover:bg-(--p-surface-100) active:cursor-grabbing focus-visible:bg-(--p-surface-100) focus-visible:outline-none\"\n            role=\"button\"\r\n            tabindex=\"0\"\r\n            [attr.title]=\"\r\n              resolve(item.description) || resolve(item.displayName)\r\n            \"\r\n            (click)=\"pickStep(item)\"\n            (keydown.enter)=\"pickStep(item)\"\n          >\n            <ng-template fExternalItemPreview>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  stepDragPreview;\n                  context: { $implicit: item }\n                \"\n              />\n            </ng-template>\n            <mt-avatar\n              shape=\"square\"\n              [icon]=\"iconFor(item)\"\n              [style.--fp-avatar-color]=\"severityFor(item).color\"\r\n              [style.--fp-avatar-bg]=\"severityFor(item).bg\"\r\n            />\r\n            <div class=\"min-w-0 flex-1\">\r\n              <div\r\n                class=\"truncate text-[13px] font-semibold text-(--p-text-color)\"\r\n              >\r\n                {{ resolve(item.displayName) }}\r\n              </div>\r\n              @if (item.description) {\r\n                <div\r\n                  class=\"line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\r\n                >\r\n                  {{ resolve(item.description) }}\r\n                </div>\r\n              }\r\n            </div>\r\n            <mt-icon\r\n              class=\"flex-none text-(--p-text-muted-color)/40 transition-colors group-hover/item:text-(--p-text-muted-color) [&_svg]:size-4\"\r\n              icon=\"general.dots-grid\"\r\n            />\r\n          </div>\r\n        }\r\n      } @else {\r\n        @for (group of groups(); track group.category) {\r\n          <div\n            role=\"button\"\n            tabindex=\"0\"\n            class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-2.5 py-2.5 text-start transition-colors hover:bg-(--p-surface-100) focus-visible:bg-(--p-surface-100) focus-visible:outline-none\"\n            (click)=\"openCategory(group.category)\"\n            (keydown.enter)=\"openCategory(group.category)\"\n            (keydown.space)=\"$event.preventDefault(); openCategory(group.category)\"\n          >\n            <mt-avatar\r\n              shape=\"square\"\r\n              [icon]=\"group.icon\"\r\n              [style.--fp-avatar-color]=\"group.color\"\r\n              [style.--fp-avatar-bg]=\"group.bg\"\r\n            />\r\n            <span class=\"min-w-0 flex-1\">\r\n              <span\r\n                class=\"block truncate text-[13px] font-semibold text-(--p-text-color)\"\r\n                >{{ group.label }}</span\r\n              >\r\n              <span\r\n                class=\"block line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\r\n                >{{ group.description }}</span\r\n              >\r\n            </span>\r\n            <mt-icon\n              class=\"flex-none text-(--p-text-muted-color) [&_svg]:size-4 rtl:rotate-180\"\n              icon=\"arrow.chevron-right\"\n            />\n          </div>\n        }\n\n        @if (groups().length === 0) {\n          <ng-container *ngTemplateOutlet=\"emptyRow\" />\n        } @else {\n          <div class=\"mx-2.5 my-1.5 h-px bg-(--p-content-border-color)\"></div>\n          <div\n            role=\"button\"\n            tabindex=\"0\"\n            class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-2.5 py-2.5 text-start transition-colors hover:bg-(--p-surface-100) focus-visible:bg-(--p-surface-100) focus-visible:outline-none\"\n            (click)=\"openTriggers()\"\n            (keydown.enter)=\"openTriggers()\"\n            (keydown.space)=\"$event.preventDefault(); openTriggers()\"\n          >\n            <mt-avatar\r\n              shape=\"square\"\r\n              icon=\"general.zap-fast\"\r\n              [style.--fp-avatar-color]=\"triggerVars().color\"\r\n              [style.--fp-avatar-bg]=\"triggerVars().bg\"\r\n            />\r\n            <span class=\"min-w-0 flex-1\">\r\n              <span\r\n                class=\"block truncate text-[13px] font-semibold text-(--p-text-color)\"\r\n                >{{ \"flowplus.palette.addAnotherTrigger\" | transloco }}</span\r\n              >\r\n              <span\r\n                class=\"block line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\r\n                >{{\r\n                  \"flowplus.palette.addAnotherTriggerDesc\" | transloco\r\n                }}</span\r\n              >\r\n            </span>\r\n            <mt-icon\n              class=\"flex-none text-(--p-text-muted-color) [&_svg]:size-4 rtl:rotate-180\"\n              icon=\"arrow.chevron-right\"\n            />\n          </div>\n        }\n      }\r\n    </div>\r\n  </aside>\r\n}\r\n\r\n<ng-template #emptyRow>\r\n  <div\r\n    class=\"flex flex-col items-center justify-center px-6 py-8 text-center text-(--p-text-muted-color)\"\r\n  >\r\n    <p>{{ \"flowplus.common.empty\" | transloco }}</p>\r\n  </div>\n</ng-template>\n\n<ng-template #stepDragPreview let-item>\n  <div\n    class=\"pointer-events-none w-[280px] overflow-hidden rounded-xl border border-[color-mix(in_srgb,var(--fp-avatar-color)_28%,var(--p-content-border-color))] bg-(--p-content-background)/95 text-(--p-text-color) shadow-[0_18px_36px_rgba(15,23,42,0.18),0_2px_8px_rgba(15,23,42,0.08)] ring-1 ring-white/60 backdrop-blur-md dark:ring-white/10\"\n    [style.--fp-avatar-color]=\"severityFor(item).color\"\n    [style.--fp-avatar-bg]=\"severityFor(item).bg\"\n  >\n    <div class=\"flex items-start gap-3 p-3\">\n      <span\n        class=\"grid h-11 w-11 flex-none place-items-center rounded-xl bg-[var(--fp-avatar-bg)] text-[var(--fp-avatar-color)] shadow-inner ring-1 ring-[color-mix(in_srgb,var(--fp-avatar-color)_24%,transparent)] [&_.p-avatar]:bg-transparent [&_.p-avatar]:text-inherit [&_mt-icon]:size-5 [&_svg]:size-5\"\n      >\n        <mt-avatar size=\"normal\" shape=\"square\" [icon]=\"iconFor(item)\" />\n      </span>\n      <span class=\"min-w-0 flex-1\">\n        <span class=\"block truncate text-[13.5px] font-bold leading-5\">\n          {{ resolve(item.displayName) }}\n        </span>\n        @if (item.description) {\n          <span\n            class=\"mt-0.5 block line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\n          >\n            {{ resolve(item.description) }}\n          </span>\n        }\n      </span>\n    </div>\n    <div\n      class=\"flex items-center justify-between border-t border-(--p-content-border-color)/70 bg-[color-mix(in_srgb,var(--fp-avatar-color)_7%,transparent)] px-3 py-2\"\n    >\n      <span\n        class=\"max-w-[150px] truncate text-[10.5px] font-semibold text-(--p-text-muted-color)\"\n      >\n        {{ item.category || item.type }}\n      </span>\n      <span\n        class=\"inline-flex items-center gap-1 rounded-full bg-(--p-content-background) px-2 py-0.5 text-[10.5px] font-semibold text-[var(--fp-avatar-color)] shadow-sm\"\n      >\n        <mt-icon icon=\"general.plus\" class=\"[&_svg]:size-3\" />\n        Drop to add\n      </span>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #triggerDragPreview let-option>\n  <div\n    class=\"pointer-events-none w-[280px] overflow-hidden rounded-xl border border-[color-mix(in_srgb,rgb(var(--fp-app-action))_30%,var(--p-content-border-color))] bg-(--p-content-background)/95 text-(--p-text-color) shadow-[0_18px_36px_rgba(245,158,11,0.20),0_2px_8px_rgba(15,23,42,0.08)] ring-1 ring-white/60 backdrop-blur-md dark:ring-white/10\"\n  >\n    <div class=\"flex items-start gap-3 p-3\">\n      <span\n        class=\"grid h-11 w-11 flex-none place-items-center rounded-xl bg-[color-mix(in_srgb,rgb(var(--fp-app-action))_16%,transparent)] text-[rgb(var(--fp-app-action))] shadow-inner ring-1 ring-[color-mix(in_srgb,rgb(var(--fp-app-action))_24%,transparent)] [&_.p-avatar]:bg-transparent [&_.p-avatar]:text-inherit [&_mt-icon]:size-5 [&_svg]:size-5\"\n      >\n        <mt-avatar\n          size=\"normal\"\n          shape=\"square\"\n          [icon]=\"triggerIconFor(option)\"\n        />\n      </span>\n      <span class=\"min-w-0 flex-1\">\n        <span class=\"block truncate text-[13.5px] font-bold leading-5\">\n          {{ resolve(option.displayName) }}\n        </span>\n        @if (option.description) {\n          <span\n            class=\"mt-0.5 block line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\n          >\n            {{ resolve(option.description) }}\n          </span>\n        }\n      </span>\n    </div>\n    <div\n      class=\"flex items-center justify-between border-t border-(--p-content-border-color)/70 bg-[color-mix(in_srgb,rgb(var(--fp-app-action))_8%,transparent)] px-3 py-2\"\n    >\n      <span\n        class=\"max-w-[150px] truncate text-[10.5px] font-semibold text-(--p-text-muted-color)\"\n      >\n        Trigger\n      </span>\n      <span\n        class=\"inline-flex items-center gap-1 rounded-full bg-(--p-content-background) px-2 py-0.5 text-[10.5px] font-semibold text-[rgb(var(--fp-app-action))] shadow-sm\"\n      >\n        <mt-icon icon=\"general.plus\" class=\"[&_svg]:size-3\" />\n        Drop to add\n      </span>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }, { kind: "directive", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: PaletteComponent, isStandalone: true, selector: "fp-palette", outputs: { closeRequested: "closeRequested", openRequested: "openRequested", add: "add", addTrigger: "addTrigger", addNote: "addNote" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)" }, classAttribute: "block absolute top-0 bottom-0 start-0 w-11 z-[5] overflow-visible bg-(--p-surface-200) dark:bg-(--p-surface-800) border-e border-(--p-content-border-color)" }, ngImport: i0, template: "<div\r\n  class=\"flex h-full w-11 flex-col items-center gap-2 bg-transparent py-3\"\r\n  role=\"toolbar\"\r\n  [attr.aria-label]=\"'flowplus.palette.rail' | transloco\"\r\n>\r\n  <mt-button\n    variant=\"text\"\n    severity=\"secondary\"\n    size=\"small\"\n    [icon]=\"isExpanded() ? 'general.x-close' : 'general.plus'\"\n    [styleClass]=\"\n      isExpanded()\n        ? 'fp-palette-rail-button is-active'\n        : 'fp-palette-rail-button'\n    \"\n    [attr.aria-label]=\"'flowplus.palette.toggle' | transloco\"\n    [mtTooltip]=\"'flowplus.palette.toggle' | transloco\"\n    tooltipPosition=\"right\"\n    appendTo=\"body\"\n    [showDelay]=\"220\"\n    [hideDelay]=\"80\"\n    (onClick)=\"isExpanded() ? closeDrawer() : openDrawer()\"\n  />\n\n  <mt-button\n    variant=\"text\"\n    severity=\"secondary\"\n    size=\"small\"\n    icon=\"general.search-md\"\n    [styleClass]=\"\n      isExpanded()\n        ? 'fp-palette-rail-button is-active'\n        : 'fp-palette-rail-button'\n    \"\n    [attr.aria-label]=\"'flowplus.palette.search' | transloco\"\n    [mtTooltip]=\"'flowplus.palette.search' | transloco\"\n    tooltipPosition=\"right\"\n    appendTo=\"body\"\n    [showDelay]=\"220\"\n    [hideDelay]=\"80\"\n    (onClick)=\"openDrawer()\"\n  />\n\n  <mt-button\n    variant=\"text\"\n    severity=\"secondary\"\n    size=\"small\"\n    icon=\"communication.annotation-plus\"\n    styleClass=\"fp-palette-rail-button\"\n    [attr.aria-label]=\"'flowplus.canvas.addNote' | transloco\"\n    [mtTooltip]=\"'flowplus.canvas.addNote' | transloco\"\n    tooltipPosition=\"right\"\n    appendTo=\"body\"\n    [showDelay]=\"220\"\n    [hideDelay]=\"80\"\n    (onClick)=\"addCanvasNote()\"\n  />\n</div>\n\r\n@if (isExpanded()) {\r\n  <aside\r\n    class=\"absolute start-11 top-0 bottom-10 z-[6] flex w-80 min-h-0 flex-col overflow-hidden border-e border-(--p-content-border-color) bg-(--p-surface-50) shadow-lg animate-[fp-palette-slide-in_280ms_cubic-bezier(0,0,0.2,1)_both] rtl:animate-[fp-palette-slide-in-rtl_280ms_cubic-bezier(0,0,0.2,1)_both]\"\r\n    role=\"complementary\"\r\n    [attr.aria-label]=\"'flowplus.palette.title' | transloco\"\r\n  >\r\n    <header class=\"flex flex-col gap-2.5 px-3 pt-3 pb-2.5\">\r\n      <div class=\"flex items-center gap-2\">\r\n        @if (!searching() && view() !== \"root\") {\r\n          <mt-button\n            variant=\"text\"\n            severity=\"secondary\"\n            size=\"small\"\n            icon=\"arrow.chevron-left\"\n            styleClass=\"fp-palette-back-button\"\n            (onClick)=\"back()\"\n            [attr.aria-label]=\"'flowplus.palette.back' | transloco\"\n            [mtTooltip]=\"'flowplus.palette.back' | transloco\"\n            tooltipPosition=\"right\"\n            appendTo=\"body\"\n            [showDelay]=\"220\"\n            [hideDelay]=\"80\"\n          />\n        }\r\n        <h3\r\n          class=\"min-w-0 flex-1 truncate text-[13.5px] font-bold text-(--p-text-color)\"\r\n        >\r\n          {{ headerTitle() }}\r\n        </h3>\r\n      </div>\r\n\r\n      <mt-text-field\r\n        [(ngModel)]=\"searchModel\"\r\n        (ngModelChange)=\"onSearchChange($event)\"\r\n        [placeholder]=\"'flowplus.palette.search' | transloco\"\r\n        icon=\"general.search-md\"\r\n      />\r\n    </header>\r\n\r\n    <div\r\n      class=\"fp-scroll fp-pal-list flex flex-1 flex-col gap-0.5 overflow-y-auto px-2.5 pt-1 pb-6\"\r\n      role=\"list\"\r\n    >\r\n      @if (searching() && view() !== \"triggers\") {\n        @for (item of searchResults(); track paletteItemKey(item, $index)) {\r\n          <div\r\n            fExternalItem\n            [fData]=\"item\"\n            [fExternalItemId]=\"paletteItemKey(item, $index)\"\n            [fPreviewMatchSize]=\"false\"\n            class=\"group/item !flex w-full cursor-grab touch-none select-none items-center gap-3 rounded-lg px-2.5 py-2.5 transition-colors hover:bg-(--p-surface-100) active:cursor-grabbing focus-visible:bg-(--p-surface-100) focus-visible:outline-none\"\n            role=\"button\"\r\n            tabindex=\"0\"\r\n            [attr.title]=\"\r\n              resolve(item.description) || resolve(item.displayName)\r\n            \"\r\n            (click)=\"pickStep(item)\"\n            (keydown.enter)=\"pickStep(item)\"\n          >\n            <ng-template fExternalItemPreview>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  stepDragPreview;\n                  context: { $implicit: item }\n                \"\n              />\n            </ng-template>\n            <mt-avatar\n              shape=\"square\"\n              [icon]=\"iconFor(item)\"\n              [style.--fp-avatar-color]=\"severityFor(item).color\"\r\n              [style.--fp-avatar-bg]=\"severityFor(item).bg\"\r\n            />\r\n            <div class=\"min-w-0 flex-1\">\r\n              <div\r\n                class=\"truncate text-[13px] font-semibold text-(--p-text-color)\"\r\n              >\r\n                {{ resolve(item.displayName) }}\r\n              </div>\r\n              @if (item.description) {\r\n                <div\r\n                  class=\"line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\r\n                >\r\n                  {{ resolve(item.description) }}\r\n                </div>\r\n              }\r\n            </div>\r\n            <mt-icon\r\n              class=\"flex-none text-(--p-text-muted-color)/40 transition-colors group-hover/item:text-(--p-text-muted-color) [&_svg]:size-4\"\r\n              icon=\"general.dots-grid\"\r\n            />\r\n          </div>\r\n        }\r\n        @if (searchResults().length === 0) {\r\n          <ng-container *ngTemplateOutlet=\"emptyRow\" />\r\n        }\r\n      } @else if (view() === \"triggers\") {\n        @for (option of visibleTriggerOptions(); track option.key) {\n          <div\n            fExternalItem\n            [fData]=\"triggerPaletteItem(option)\"\n            [fExternalItemId]=\"triggerPaletteItemKey(option, $index)\"\n            [fPreviewMatchSize]=\"false\"\n            class=\"group/item !flex w-full cursor-grab touch-none select-none items-center gap-3 rounded-lg px-2.5 py-2.5 text-start transition-colors hover:bg-(--p-surface-100) active:cursor-grabbing focus-visible:bg-(--p-surface-100) focus-visible:outline-none\"\n            role=\"button\"\n            tabindex=\"0\"\n            [attr.title]=\"\n              resolve(option.description) || resolve(option.displayName)\n            \"\n            (click)=\"pickTrigger(option)\"\n            (keydown.enter)=\"pickTrigger(option)\"\n          >\n            <ng-template fExternalItemPreview>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  triggerDragPreview;\n                  context: { $implicit: option }\n                \"\n              />\n            </ng-template>\n            <mt-avatar\n              shape=\"square\"\n              [icon]=\"triggerIconFor(option)\"\n              [style.--fp-avatar-color]=\"triggerOptionVars(option).color\"\n              [style.--fp-avatar-bg]=\"triggerOptionVars(option).bg\"\r\n            />\r\n            <span class=\"min-w-0 flex-1\">\r\n              <span\r\n                class=\"block truncate text-[13px] font-semibold text-(--p-text-color)\"\r\n                >{{ resolve(option.displayName) }}</span\r\n              >\r\n              @if (option.description) {\r\n                <span\r\n                  class=\"block line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\r\n                  >{{ resolve(option.description) }}</span\r\n                >\n              }\n            </span>\n            <mt-icon\n              class=\"flex-none text-(--p-text-muted-color)/40 transition-colors group-hover/item:text-(--p-text-muted-color) [&_svg]:size-4\"\n              icon=\"general.dots-grid\"\n            />\n          </div>\n        }\n        @if (visibleTriggerOptions().length === 0) {\n          <ng-container *ngTemplateOutlet=\"emptyRow\" />\n        }\n      } @else if (view() === \"category\") {\n        @for (item of activeItems(); track paletteItemKey(item, $index)) {\r\n          <div\r\n            fExternalItem\n            [fData]=\"item\"\n            [fExternalItemId]=\"paletteItemKey(item, $index)\"\n            [fPreviewMatchSize]=\"false\"\n            class=\"group/item !flex w-full cursor-grab touch-none select-none items-center gap-3 rounded-lg px-2.5 py-2.5 transition-colors hover:bg-(--p-surface-100) active:cursor-grabbing focus-visible:bg-(--p-surface-100) focus-visible:outline-none\"\n            role=\"button\"\r\n            tabindex=\"0\"\r\n            [attr.title]=\"\r\n              resolve(item.description) || resolve(item.displayName)\r\n            \"\r\n            (click)=\"pickStep(item)\"\n            (keydown.enter)=\"pickStep(item)\"\n          >\n            <ng-template fExternalItemPreview>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  stepDragPreview;\n                  context: { $implicit: item }\n                \"\n              />\n            </ng-template>\n            <mt-avatar\n              shape=\"square\"\n              [icon]=\"iconFor(item)\"\n              [style.--fp-avatar-color]=\"severityFor(item).color\"\r\n              [style.--fp-avatar-bg]=\"severityFor(item).bg\"\r\n            />\r\n            <div class=\"min-w-0 flex-1\">\r\n              <div\r\n                class=\"truncate text-[13px] font-semibold text-(--p-text-color)\"\r\n              >\r\n                {{ resolve(item.displayName) }}\r\n              </div>\r\n              @if (item.description) {\r\n                <div\r\n                  class=\"line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\r\n                >\r\n                  {{ resolve(item.description) }}\r\n                </div>\r\n              }\r\n            </div>\r\n            <mt-icon\r\n              class=\"flex-none text-(--p-text-muted-color)/40 transition-colors group-hover/item:text-(--p-text-muted-color) [&_svg]:size-4\"\r\n              icon=\"general.dots-grid\"\r\n            />\r\n          </div>\r\n        }\r\n      } @else {\r\n        @for (group of groups(); track group.category) {\r\n          <div\n            role=\"button\"\n            tabindex=\"0\"\n            class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-2.5 py-2.5 text-start transition-colors hover:bg-(--p-surface-100) focus-visible:bg-(--p-surface-100) focus-visible:outline-none\"\n            (click)=\"openCategory(group.category)\"\n            (keydown.enter)=\"openCategory(group.category)\"\n            (keydown.space)=\"$event.preventDefault(); openCategory(group.category)\"\n          >\n            <mt-avatar\r\n              shape=\"square\"\r\n              [icon]=\"group.icon\"\r\n              [style.--fp-avatar-color]=\"group.color\"\r\n              [style.--fp-avatar-bg]=\"group.bg\"\r\n            />\r\n            <span class=\"min-w-0 flex-1\">\r\n              <span\r\n                class=\"block truncate text-[13px] font-semibold text-(--p-text-color)\"\r\n                >{{ group.label }}</span\r\n              >\r\n              <span\r\n                class=\"block line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\r\n                >{{ group.description }}</span\r\n              >\r\n            </span>\r\n            <mt-icon\n              class=\"flex-none text-(--p-text-muted-color) [&_svg]:size-4 rtl:rotate-180\"\n              icon=\"arrow.chevron-right\"\n            />\n          </div>\n        }\n\n        @if (groups().length === 0) {\n          <ng-container *ngTemplateOutlet=\"emptyRow\" />\n        } @else {\n          <div class=\"mx-2.5 my-1.5 h-px bg-(--p-content-border-color)\"></div>\n          <div\n            role=\"button\"\n            tabindex=\"0\"\n            class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-2.5 py-2.5 text-start transition-colors hover:bg-(--p-surface-100) focus-visible:bg-(--p-surface-100) focus-visible:outline-none\"\n            (click)=\"openTriggers()\"\n            (keydown.enter)=\"openTriggers()\"\n            (keydown.space)=\"$event.preventDefault(); openTriggers()\"\n          >\n            <mt-avatar\r\n              shape=\"square\"\r\n              icon=\"general.zap-fast\"\r\n              [style.--fp-avatar-color]=\"triggerVars().color\"\r\n              [style.--fp-avatar-bg]=\"triggerVars().bg\"\r\n            />\r\n            <span class=\"min-w-0 flex-1\">\r\n              <span\r\n                class=\"block truncate text-[13px] font-semibold text-(--p-text-color)\"\r\n                >{{ \"flowplus.palette.addAnotherTrigger\" | transloco }}</span\r\n              >\r\n              <span\r\n                class=\"block line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\r\n                >{{\r\n                  \"flowplus.palette.addAnotherTriggerDesc\" | transloco\r\n                }}</span\r\n              >\r\n            </span>\r\n            <mt-icon\n              class=\"flex-none text-(--p-text-muted-color) [&_svg]:size-4 rtl:rotate-180\"\n              icon=\"arrow.chevron-right\"\n            />\n          </div>\n        }\n      }\r\n    </div>\r\n  </aside>\r\n}\r\n\r\n<ng-template #emptyRow>\r\n  <div\r\n    class=\"flex flex-col items-center justify-center px-6 py-8 text-center text-(--p-text-muted-color)\"\r\n  >\r\n    <p>{{ \"flowplus.common.empty\" | transloco }}</p>\r\n  </div>\n</ng-template>\n\n<ng-template #stepDragPreview let-item>\n  <div\n    class=\"pointer-events-none w-[280px] overflow-hidden rounded-xl border border-[color-mix(in_srgb,var(--fp-avatar-color)_28%,var(--p-content-border-color))] bg-(--p-content-background)/95 text-(--p-text-color) shadow-[0_18px_36px_rgba(15,23,42,0.18),0_2px_8px_rgba(15,23,42,0.08)] ring-1 ring-white/60 backdrop-blur-md dark:ring-white/10\"\n    [style.--fp-avatar-color]=\"severityFor(item).color\"\n    [style.--fp-avatar-bg]=\"severityFor(item).bg\"\n  >\n    <div class=\"flex items-start gap-3 p-3\">\n      <span\n        class=\"grid h-11 w-11 flex-none place-items-center rounded-xl bg-[var(--fp-avatar-bg)] text-[var(--fp-avatar-color)] shadow-inner ring-1 ring-[color-mix(in_srgb,var(--fp-avatar-color)_24%,transparent)] [&_.p-avatar]:bg-transparent [&_.p-avatar]:text-inherit [&_mt-icon]:size-5 [&_svg]:size-5\"\n      >\n        <mt-avatar size=\"normal\" shape=\"square\" [icon]=\"iconFor(item)\" />\n      </span>\n      <span class=\"min-w-0 flex-1\">\n        <span class=\"block truncate text-[13.5px] font-bold leading-5\">\n          {{ resolve(item.displayName) }}\n        </span>\n        @if (item.description) {\n          <span\n            class=\"mt-0.5 block line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\n          >\n            {{ resolve(item.description) }}\n          </span>\n        }\n      </span>\n    </div>\n    <div\n      class=\"flex items-center justify-between border-t border-(--p-content-border-color)/70 bg-[color-mix(in_srgb,var(--fp-avatar-color)_7%,transparent)] px-3 py-2\"\n    >\n      <span\n        class=\"max-w-[150px] truncate text-[10.5px] font-semibold text-(--p-text-muted-color)\"\n      >\n        {{ item.category || item.type }}\n      </span>\n      <span\n        class=\"inline-flex items-center gap-1 rounded-full bg-(--p-content-background) px-2 py-0.5 text-[10.5px] font-semibold text-[var(--fp-avatar-color)] shadow-sm\"\n      >\n        <mt-icon icon=\"general.plus\" class=\"[&_svg]:size-3\" />\n        Drop to add\n      </span>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #triggerDragPreview let-option>\n  <div\n    class=\"pointer-events-none w-[280px] overflow-hidden rounded-xl border border-[color-mix(in_srgb,rgb(var(--fp-app-action))_30%,var(--p-content-border-color))] bg-(--p-content-background)/95 text-(--p-text-color) shadow-[0_18px_36px_rgba(245,158,11,0.20),0_2px_8px_rgba(15,23,42,0.08)] ring-1 ring-white/60 backdrop-blur-md dark:ring-white/10\"\n  >\n    <div class=\"flex items-start gap-3 p-3\">\n      <span\n        class=\"grid h-11 w-11 flex-none place-items-center rounded-xl bg-[color-mix(in_srgb,rgb(var(--fp-app-action))_16%,transparent)] text-[rgb(var(--fp-app-action))] shadow-inner ring-1 ring-[color-mix(in_srgb,rgb(var(--fp-app-action))_24%,transparent)] [&_.p-avatar]:bg-transparent [&_.p-avatar]:text-inherit [&_mt-icon]:size-5 [&_svg]:size-5\"\n      >\n        <mt-avatar\n          size=\"normal\"\n          shape=\"square\"\n          [icon]=\"triggerIconFor(option)\"\n        />\n      </span>\n      <span class=\"min-w-0 flex-1\">\n        <span class=\"block truncate text-[13.5px] font-bold leading-5\">\n          {{ resolve(option.displayName) }}\n        </span>\n        @if (option.description) {\n          <span\n            class=\"mt-0.5 block line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\n          >\n            {{ resolve(option.description) }}\n          </span>\n        }\n      </span>\n    </div>\n    <div\n      class=\"flex items-center justify-between border-t border-(--p-content-border-color)/70 bg-[color-mix(in_srgb,rgb(var(--fp-app-action))_8%,transparent)] px-3 py-2\"\n    >\n      <span\n        class=\"max-w-[150px] truncate text-[10.5px] font-semibold text-(--p-text-muted-color)\"\n      >\n        Trigger\n      </span>\n      <span\n        class=\"inline-flex items-center gap-1 rounded-full bg-(--p-content-background) px-2 py-0.5 text-[10.5px] font-semibold text-[rgb(var(--fp-app-action))] shadow-sm\"\n      >\n        <mt-icon icon=\"general.plus\" class=\"[&_svg]:size-3\" />\n        Drop to add\n      </span>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }, { kind: "directive", type: 
                 // Native Foblex external-item drag (clone preview, like the official
                 // add-node-from-palette example).
                 FExternalItem, selector: "[fExternalItem]", inputs: ["fExternalItemId", "fData", "fDisabled", "fPreview", "fPreviewMatchSize", "fPlaceholder"], outputs: ["fPreviewChange", "fPlaceholderChange"] }, { kind: "directive", type: FExternalItemPreview, selector: "ng-template[fExternalItemPreview]" }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
@@ -20751,7 +21451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         FExternalItemPreview,
                     ], host: {
                         class: 'block absolute top-0 bottom-0 start-0 w-11 z-[5] overflow-visible bg-(--p-surface-200) dark:bg-(--p-surface-800) border-e border-(--p-content-border-color)',
-                    }, template: "<div\r\n  class=\"flex h-full w-11 flex-col items-center gap-2 bg-transparent py-3\"\r\n  role=\"toolbar\"\r\n  [attr.aria-label]=\"'flowplus.palette.rail' | transloco\"\r\n>\r\n  <mt-button\n    variant=\"text\"\n    severity=\"secondary\"\n    size=\"small\"\n    [icon]=\"isExpanded() ? 'general.x-close' : 'general.plus'\"\n    [styleClass]=\"\n      isExpanded()\n        ? 'fp-palette-rail-button is-active'\n        : 'fp-palette-rail-button'\n    \"\n    [attr.aria-label]=\"'flowplus.palette.toggle' | transloco\"\n    [mtTooltip]=\"'flowplus.palette.toggle' | transloco\"\n    tooltipPosition=\"right\"\n    appendTo=\"body\"\n    [showDelay]=\"220\"\n    [hideDelay]=\"80\"\n    (onClick)=\"isExpanded() ? closeDrawer() : openDrawer()\"\n  />\n\n  <mt-button\n    variant=\"text\"\n    severity=\"secondary\"\n    size=\"small\"\n    icon=\"general.search-md\"\n    [styleClass]=\"\n      isExpanded()\n        ? 'fp-palette-rail-button is-active'\n        : 'fp-palette-rail-button'\n    \"\n    [attr.aria-label]=\"'flowplus.palette.search' | transloco\"\n    [mtTooltip]=\"'flowplus.palette.search' | transloco\"\n    tooltipPosition=\"right\"\n    appendTo=\"body\"\n    [showDelay]=\"220\"\n    [hideDelay]=\"80\"\n    (onClick)=\"openDrawer()\"\n  />\n</div>\r\n\r\n@if (isExpanded()) {\r\n  <aside\r\n    class=\"absolute start-11 top-0 bottom-10 z-[6] flex w-80 min-h-0 flex-col overflow-hidden border-e border-(--p-content-border-color) bg-(--p-surface-50) shadow-lg animate-[fp-palette-slide-in_280ms_cubic-bezier(0,0,0.2,1)_both] rtl:animate-[fp-palette-slide-in-rtl_280ms_cubic-bezier(0,0,0.2,1)_both]\"\r\n    role=\"complementary\"\r\n    [attr.aria-label]=\"'flowplus.palette.title' | transloco\"\r\n  >\r\n    <header class=\"flex flex-col gap-2.5 px-3 pt-3 pb-2.5\">\r\n      <div class=\"flex items-center gap-2\">\r\n        @if (!searching() && view() !== \"root\") {\r\n          <mt-button\n            variant=\"text\"\n            severity=\"secondary\"\n            size=\"small\"\n            icon=\"arrow.chevron-left\"\n            styleClass=\"fp-palette-back-button\"\n            (onClick)=\"back()\"\n            [attr.aria-label]=\"'flowplus.palette.back' | transloco\"\n            [mtTooltip]=\"'flowplus.palette.back' | transloco\"\n            tooltipPosition=\"right\"\n            appendTo=\"body\"\n            [showDelay]=\"220\"\n            [hideDelay]=\"80\"\n          />\n        }\r\n        <h3\r\n          class=\"min-w-0 flex-1 truncate text-[13.5px] font-bold text-(--p-text-color)\"\r\n        >\r\n          {{ headerTitle() }}\r\n        </h3>\r\n      </div>\r\n\r\n      <mt-text-field\r\n        [(ngModel)]=\"searchModel\"\r\n        (ngModelChange)=\"onSearchChange($event)\"\r\n        [placeholder]=\"'flowplus.palette.search' | transloco\"\r\n        icon=\"general.search-md\"\r\n      />\r\n    </header>\r\n\r\n    <div\r\n      class=\"fp-scroll fp-pal-list flex flex-1 flex-col gap-0.5 overflow-y-auto px-2.5 pt-1 pb-6\"\r\n      role=\"list\"\r\n    >\r\n      @if (searching() && view() !== \"triggers\") {\n        @for (item of searchResults(); track paletteItemKey(item, $index)) {\r\n          <div\r\n            fExternalItem\n            [fData]=\"item\"\n            [fExternalItemId]=\"paletteItemKey(item, $index)\"\n            [fPreviewMatchSize]=\"false\"\n            class=\"group/item !flex w-full cursor-grab touch-none select-none items-center gap-3 rounded-lg px-2.5 py-2.5 transition-colors hover:bg-(--p-surface-100) active:cursor-grabbing focus-visible:bg-(--p-surface-100) focus-visible:outline-none\"\n            role=\"button\"\r\n            tabindex=\"0\"\r\n            [attr.title]=\"\r\n              resolve(item.description) || resolve(item.displayName)\r\n            \"\r\n            (click)=\"pickStep(item)\"\n            (keydown.enter)=\"pickStep(item)\"\n          >\n            <ng-template fExternalItemPreview>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  stepDragPreview;\n                  context: { $implicit: item }\n                \"\n              />\n            </ng-template>\n            <mt-avatar\n              shape=\"square\"\n              [icon]=\"iconFor(item)\"\n              [style.--fp-avatar-color]=\"severityFor(item).color\"\r\n              [style.--fp-avatar-bg]=\"severityFor(item).bg\"\r\n            />\r\n            <div class=\"min-w-0 flex-1\">\r\n              <div\r\n                class=\"truncate text-[13px] font-semibold text-(--p-text-color)\"\r\n              >\r\n                {{ resolve(item.displayName) }}\r\n              </div>\r\n              @if (item.description) {\r\n                <div\r\n                  class=\"line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\r\n                >\r\n                  {{ resolve(item.description) }}\r\n                </div>\r\n              }\r\n            </div>\r\n            <mt-icon\r\n              class=\"flex-none text-(--p-text-muted-color)/40 transition-colors group-hover/item:text-(--p-text-muted-color) [&_svg]:size-4\"\r\n              icon=\"general.dots-grid\"\r\n            />\r\n          </div>\r\n        }\r\n        @if (searchResults().length === 0) {\r\n          <ng-container *ngTemplateOutlet=\"emptyRow\" />\r\n        }\r\n      } @else if (view() === \"triggers\") {\n        @for (option of visibleTriggerOptions(); track option.key) {\n          <div\n            fExternalItem\n            [fData]=\"triggerPaletteItem(option)\"\n            [fExternalItemId]=\"triggerPaletteItemKey(option, $index)\"\n            [fPreviewMatchSize]=\"false\"\n            class=\"group/item !flex w-full cursor-grab touch-none select-none items-center gap-3 rounded-lg px-2.5 py-2.5 text-start transition-colors hover:bg-(--p-surface-100) active:cursor-grabbing focus-visible:bg-(--p-surface-100) focus-visible:outline-none\"\n            role=\"button\"\n            tabindex=\"0\"\n            [attr.title]=\"\n              resolve(option.description) || resolve(option.displayName)\n            \"\n            (click)=\"pickTrigger(option)\"\n            (keydown.enter)=\"pickTrigger(option)\"\n          >\n            <ng-template fExternalItemPreview>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  triggerDragPreview;\n                  context: { $implicit: option }\n                \"\n              />\n            </ng-template>\n            <mt-avatar\n              shape=\"square\"\n              [icon]=\"triggerIconFor(option)\"\n              [style.--fp-avatar-color]=\"triggerOptionVars(option).color\"\n              [style.--fp-avatar-bg]=\"triggerOptionVars(option).bg\"\r\n            />\r\n            <span class=\"min-w-0 flex-1\">\r\n              <span\r\n                class=\"block truncate text-[13px] font-semibold text-(--p-text-color)\"\r\n                >{{ resolve(option.displayName) }}</span\r\n              >\r\n              @if (option.description) {\r\n                <span\r\n                  class=\"block line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\r\n                  >{{ resolve(option.description) }}</span\r\n                >\n              }\n            </span>\n            <mt-icon\n              class=\"flex-none text-(--p-text-muted-color)/40 transition-colors group-hover/item:text-(--p-text-muted-color) [&_svg]:size-4\"\n              icon=\"general.dots-grid\"\n            />\n          </div>\n        }\n        @if (visibleTriggerOptions().length === 0) {\n          <ng-container *ngTemplateOutlet=\"emptyRow\" />\n        }\n      } @else if (view() === \"category\") {\n        @for (item of activeItems(); track paletteItemKey(item, $index)) {\r\n          <div\r\n            fExternalItem\n            [fData]=\"item\"\n            [fExternalItemId]=\"paletteItemKey(item, $index)\"\n            [fPreviewMatchSize]=\"false\"\n            class=\"group/item !flex w-full cursor-grab touch-none select-none items-center gap-3 rounded-lg px-2.5 py-2.5 transition-colors hover:bg-(--p-surface-100) active:cursor-grabbing focus-visible:bg-(--p-surface-100) focus-visible:outline-none\"\n            role=\"button\"\r\n            tabindex=\"0\"\r\n            [attr.title]=\"\r\n              resolve(item.description) || resolve(item.displayName)\r\n            \"\r\n            (click)=\"pickStep(item)\"\n            (keydown.enter)=\"pickStep(item)\"\n          >\n            <ng-template fExternalItemPreview>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  stepDragPreview;\n                  context: { $implicit: item }\n                \"\n              />\n            </ng-template>\n            <mt-avatar\n              shape=\"square\"\n              [icon]=\"iconFor(item)\"\n              [style.--fp-avatar-color]=\"severityFor(item).color\"\r\n              [style.--fp-avatar-bg]=\"severityFor(item).bg\"\r\n            />\r\n            <div class=\"min-w-0 flex-1\">\r\n              <div\r\n                class=\"truncate text-[13px] font-semibold text-(--p-text-color)\"\r\n              >\r\n                {{ resolve(item.displayName) }}\r\n              </div>\r\n              @if (item.description) {\r\n                <div\r\n                  class=\"line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\r\n                >\r\n                  {{ resolve(item.description) }}\r\n                </div>\r\n              }\r\n            </div>\r\n            <mt-icon\r\n              class=\"flex-none text-(--p-text-muted-color)/40 transition-colors group-hover/item:text-(--p-text-muted-color) [&_svg]:size-4\"\r\n              icon=\"general.dots-grid\"\r\n            />\r\n          </div>\r\n        }\r\n      } @else {\r\n        @for (group of groups(); track group.category) {\r\n          <div\n            role=\"button\"\n            tabindex=\"0\"\n            class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-2.5 py-2.5 text-start transition-colors hover:bg-(--p-surface-100) focus-visible:bg-(--p-surface-100) focus-visible:outline-none\"\n            (click)=\"openCategory(group.category)\"\n            (keydown.enter)=\"openCategory(group.category)\"\n            (keydown.space)=\"$event.preventDefault(); openCategory(group.category)\"\n          >\n            <mt-avatar\r\n              shape=\"square\"\r\n              [icon]=\"group.icon\"\r\n              [style.--fp-avatar-color]=\"group.color\"\r\n              [style.--fp-avatar-bg]=\"group.bg\"\r\n            />\r\n            <span class=\"min-w-0 flex-1\">\r\n              <span\r\n                class=\"block truncate text-[13px] font-semibold text-(--p-text-color)\"\r\n                >{{ group.label }}</span\r\n              >\r\n              <span\r\n                class=\"block line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\r\n                >{{ group.description }}</span\r\n              >\r\n            </span>\r\n            <mt-icon\n              class=\"flex-none text-(--p-text-muted-color) [&_svg]:size-4 rtl:rotate-180\"\n              icon=\"arrow.chevron-right\"\n            />\n          </div>\n        }\n\n        @if (groups().length === 0) {\n          <ng-container *ngTemplateOutlet=\"emptyRow\" />\n        } @else {\n          <div class=\"mx-2.5 my-1.5 h-px bg-(--p-content-border-color)\"></div>\n          <div\n            role=\"button\"\n            tabindex=\"0\"\n            class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-2.5 py-2.5 text-start transition-colors hover:bg-(--p-surface-100) focus-visible:bg-(--p-surface-100) focus-visible:outline-none\"\n            (click)=\"openTriggers()\"\n            (keydown.enter)=\"openTriggers()\"\n            (keydown.space)=\"$event.preventDefault(); openTriggers()\"\n          >\n            <mt-avatar\r\n              shape=\"square\"\r\n              icon=\"general.zap-fast\"\r\n              [style.--fp-avatar-color]=\"triggerVars().color\"\r\n              [style.--fp-avatar-bg]=\"triggerVars().bg\"\r\n            />\r\n            <span class=\"min-w-0 flex-1\">\r\n              <span\r\n                class=\"block truncate text-[13px] font-semibold text-(--p-text-color)\"\r\n                >{{ \"flowplus.palette.addAnotherTrigger\" | transloco }}</span\r\n              >\r\n              <span\r\n                class=\"block line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\r\n                >{{\r\n                  \"flowplus.palette.addAnotherTriggerDesc\" | transloco\r\n                }}</span\r\n              >\r\n            </span>\r\n            <mt-icon\n              class=\"flex-none text-(--p-text-muted-color) [&_svg]:size-4 rtl:rotate-180\"\n              icon=\"arrow.chevron-right\"\n            />\n          </div>\n        }\n      }\r\n    </div>\r\n  </aside>\r\n}\r\n\r\n<ng-template #emptyRow>\r\n  <div\r\n    class=\"flex flex-col items-center justify-center px-6 py-8 text-center text-(--p-text-muted-color)\"\r\n  >\r\n    <p>{{ \"flowplus.common.empty\" | transloco }}</p>\r\n  </div>\n</ng-template>\n\n<ng-template #stepDragPreview let-item>\n  <div\n    class=\"pointer-events-none w-[280px] overflow-hidden rounded-xl border border-[color-mix(in_srgb,var(--fp-avatar-color)_28%,var(--p-content-border-color))] bg-(--p-content-background)/95 text-(--p-text-color) shadow-[0_18px_36px_rgba(15,23,42,0.18),0_2px_8px_rgba(15,23,42,0.08)] ring-1 ring-white/60 backdrop-blur-md dark:ring-white/10\"\n    [style.--fp-avatar-color]=\"severityFor(item).color\"\n    [style.--fp-avatar-bg]=\"severityFor(item).bg\"\n  >\n    <div class=\"flex items-start gap-3 p-3\">\n      <span\n        class=\"grid h-11 w-11 flex-none place-items-center rounded-xl bg-[var(--fp-avatar-bg)] text-[var(--fp-avatar-color)] shadow-inner ring-1 ring-[color-mix(in_srgb,var(--fp-avatar-color)_24%,transparent)] [&_.p-avatar]:bg-transparent [&_.p-avatar]:text-inherit [&_mt-icon]:size-5 [&_svg]:size-5\"\n      >\n        <mt-avatar size=\"normal\" shape=\"square\" [icon]=\"iconFor(item)\" />\n      </span>\n      <span class=\"min-w-0 flex-1\">\n        <span class=\"block truncate text-[13.5px] font-bold leading-5\">\n          {{ resolve(item.displayName) }}\n        </span>\n        @if (item.description) {\n          <span\n            class=\"mt-0.5 block line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\n          >\n            {{ resolve(item.description) }}\n          </span>\n        }\n      </span>\n    </div>\n    <div\n      class=\"flex items-center justify-between border-t border-(--p-content-border-color)/70 bg-[color-mix(in_srgb,var(--fp-avatar-color)_7%,transparent)] px-3 py-2\"\n    >\n      <span\n        class=\"max-w-[150px] truncate text-[10.5px] font-semibold text-(--p-text-muted-color)\"\n      >\n        {{ item.category || item.type }}\n      </span>\n      <span\n        class=\"inline-flex items-center gap-1 rounded-full bg-(--p-content-background) px-2 py-0.5 text-[10.5px] font-semibold text-[var(--fp-avatar-color)] shadow-sm\"\n      >\n        <mt-icon icon=\"general.plus\" class=\"[&_svg]:size-3\" />\n        Drop to add\n      </span>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #triggerDragPreview let-option>\n  <div\n    class=\"pointer-events-none w-[280px] overflow-hidden rounded-xl border border-[color-mix(in_srgb,rgb(var(--fp-app-action))_30%,var(--p-content-border-color))] bg-(--p-content-background)/95 text-(--p-text-color) shadow-[0_18px_36px_rgba(245,158,11,0.20),0_2px_8px_rgba(15,23,42,0.08)] ring-1 ring-white/60 backdrop-blur-md dark:ring-white/10\"\n  >\n    <div class=\"flex items-start gap-3 p-3\">\n      <span\n        class=\"grid h-11 w-11 flex-none place-items-center rounded-xl bg-[color-mix(in_srgb,rgb(var(--fp-app-action))_16%,transparent)] text-[rgb(var(--fp-app-action))] shadow-inner ring-1 ring-[color-mix(in_srgb,rgb(var(--fp-app-action))_24%,transparent)] [&_.p-avatar]:bg-transparent [&_.p-avatar]:text-inherit [&_mt-icon]:size-5 [&_svg]:size-5\"\n      >\n        <mt-avatar\n          size=\"normal\"\n          shape=\"square\"\n          [icon]=\"triggerIconFor(option)\"\n        />\n      </span>\n      <span class=\"min-w-0 flex-1\">\n        <span class=\"block truncate text-[13.5px] font-bold leading-5\">\n          {{ resolve(option.displayName) }}\n        </span>\n        @if (option.description) {\n          <span\n            class=\"mt-0.5 block line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\n          >\n            {{ resolve(option.description) }}\n          </span>\n        }\n      </span>\n    </div>\n    <div\n      class=\"flex items-center justify-between border-t border-(--p-content-border-color)/70 bg-[color-mix(in_srgb,rgb(var(--fp-app-action))_8%,transparent)] px-3 py-2\"\n    >\n      <span\n        class=\"max-w-[150px] truncate text-[10.5px] font-semibold text-(--p-text-muted-color)\"\n      >\n        Trigger\n      </span>\n      <span\n        class=\"inline-flex items-center gap-1 rounded-full bg-(--p-content-background) px-2 py-0.5 text-[10.5px] font-semibold text-[rgb(var(--fp-app-action))] shadow-sm\"\n      >\n        <mt-icon icon=\"general.plus\" class=\"[&_svg]:size-3\" />\n        Drop to add\n      </span>\n    </div>\n  </div>\n</ng-template>\n" }]
+                    }, template: "<div\r\n  class=\"flex h-full w-11 flex-col items-center gap-2 bg-transparent py-3\"\r\n  role=\"toolbar\"\r\n  [attr.aria-label]=\"'flowplus.palette.rail' | transloco\"\r\n>\r\n  <mt-button\n    variant=\"text\"\n    severity=\"secondary\"\n    size=\"small\"\n    [icon]=\"isExpanded() ? 'general.x-close' : 'general.plus'\"\n    [styleClass]=\"\n      isExpanded()\n        ? 'fp-palette-rail-button is-active'\n        : 'fp-palette-rail-button'\n    \"\n    [attr.aria-label]=\"'flowplus.palette.toggle' | transloco\"\n    [mtTooltip]=\"'flowplus.palette.toggle' | transloco\"\n    tooltipPosition=\"right\"\n    appendTo=\"body\"\n    [showDelay]=\"220\"\n    [hideDelay]=\"80\"\n    (onClick)=\"isExpanded() ? closeDrawer() : openDrawer()\"\n  />\n\n  <mt-button\n    variant=\"text\"\n    severity=\"secondary\"\n    size=\"small\"\n    icon=\"general.search-md\"\n    [styleClass]=\"\n      isExpanded()\n        ? 'fp-palette-rail-button is-active'\n        : 'fp-palette-rail-button'\n    \"\n    [attr.aria-label]=\"'flowplus.palette.search' | transloco\"\n    [mtTooltip]=\"'flowplus.palette.search' | transloco\"\n    tooltipPosition=\"right\"\n    appendTo=\"body\"\n    [showDelay]=\"220\"\n    [hideDelay]=\"80\"\n    (onClick)=\"openDrawer()\"\n  />\n\n  <mt-button\n    variant=\"text\"\n    severity=\"secondary\"\n    size=\"small\"\n    icon=\"communication.annotation-plus\"\n    styleClass=\"fp-palette-rail-button\"\n    [attr.aria-label]=\"'flowplus.canvas.addNote' | transloco\"\n    [mtTooltip]=\"'flowplus.canvas.addNote' | transloco\"\n    tooltipPosition=\"right\"\n    appendTo=\"body\"\n    [showDelay]=\"220\"\n    [hideDelay]=\"80\"\n    (onClick)=\"addCanvasNote()\"\n  />\n</div>\n\r\n@if (isExpanded()) {\r\n  <aside\r\n    class=\"absolute start-11 top-0 bottom-10 z-[6] flex w-80 min-h-0 flex-col overflow-hidden border-e border-(--p-content-border-color) bg-(--p-surface-50) shadow-lg animate-[fp-palette-slide-in_280ms_cubic-bezier(0,0,0.2,1)_both] rtl:animate-[fp-palette-slide-in-rtl_280ms_cubic-bezier(0,0,0.2,1)_both]\"\r\n    role=\"complementary\"\r\n    [attr.aria-label]=\"'flowplus.palette.title' | transloco\"\r\n  >\r\n    <header class=\"flex flex-col gap-2.5 px-3 pt-3 pb-2.5\">\r\n      <div class=\"flex items-center gap-2\">\r\n        @if (!searching() && view() !== \"root\") {\r\n          <mt-button\n            variant=\"text\"\n            severity=\"secondary\"\n            size=\"small\"\n            icon=\"arrow.chevron-left\"\n            styleClass=\"fp-palette-back-button\"\n            (onClick)=\"back()\"\n            [attr.aria-label]=\"'flowplus.palette.back' | transloco\"\n            [mtTooltip]=\"'flowplus.palette.back' | transloco\"\n            tooltipPosition=\"right\"\n            appendTo=\"body\"\n            [showDelay]=\"220\"\n            [hideDelay]=\"80\"\n          />\n        }\r\n        <h3\r\n          class=\"min-w-0 flex-1 truncate text-[13.5px] font-bold text-(--p-text-color)\"\r\n        >\r\n          {{ headerTitle() }}\r\n        </h3>\r\n      </div>\r\n\r\n      <mt-text-field\r\n        [(ngModel)]=\"searchModel\"\r\n        (ngModelChange)=\"onSearchChange($event)\"\r\n        [placeholder]=\"'flowplus.palette.search' | transloco\"\r\n        icon=\"general.search-md\"\r\n      />\r\n    </header>\r\n\r\n    <div\r\n      class=\"fp-scroll fp-pal-list flex flex-1 flex-col gap-0.5 overflow-y-auto px-2.5 pt-1 pb-6\"\r\n      role=\"list\"\r\n    >\r\n      @if (searching() && view() !== \"triggers\") {\n        @for (item of searchResults(); track paletteItemKey(item, $index)) {\r\n          <div\r\n            fExternalItem\n            [fData]=\"item\"\n            [fExternalItemId]=\"paletteItemKey(item, $index)\"\n            [fPreviewMatchSize]=\"false\"\n            class=\"group/item !flex w-full cursor-grab touch-none select-none items-center gap-3 rounded-lg px-2.5 py-2.5 transition-colors hover:bg-(--p-surface-100) active:cursor-grabbing focus-visible:bg-(--p-surface-100) focus-visible:outline-none\"\n            role=\"button\"\r\n            tabindex=\"0\"\r\n            [attr.title]=\"\r\n              resolve(item.description) || resolve(item.displayName)\r\n            \"\r\n            (click)=\"pickStep(item)\"\n            (keydown.enter)=\"pickStep(item)\"\n          >\n            <ng-template fExternalItemPreview>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  stepDragPreview;\n                  context: { $implicit: item }\n                \"\n              />\n            </ng-template>\n            <mt-avatar\n              shape=\"square\"\n              [icon]=\"iconFor(item)\"\n              [style.--fp-avatar-color]=\"severityFor(item).color\"\r\n              [style.--fp-avatar-bg]=\"severityFor(item).bg\"\r\n            />\r\n            <div class=\"min-w-0 flex-1\">\r\n              <div\r\n                class=\"truncate text-[13px] font-semibold text-(--p-text-color)\"\r\n              >\r\n                {{ resolve(item.displayName) }}\r\n              </div>\r\n              @if (item.description) {\r\n                <div\r\n                  class=\"line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\r\n                >\r\n                  {{ resolve(item.description) }}\r\n                </div>\r\n              }\r\n            </div>\r\n            <mt-icon\r\n              class=\"flex-none text-(--p-text-muted-color)/40 transition-colors group-hover/item:text-(--p-text-muted-color) [&_svg]:size-4\"\r\n              icon=\"general.dots-grid\"\r\n            />\r\n          </div>\r\n        }\r\n        @if (searchResults().length === 0) {\r\n          <ng-container *ngTemplateOutlet=\"emptyRow\" />\r\n        }\r\n      } @else if (view() === \"triggers\") {\n        @for (option of visibleTriggerOptions(); track option.key) {\n          <div\n            fExternalItem\n            [fData]=\"triggerPaletteItem(option)\"\n            [fExternalItemId]=\"triggerPaletteItemKey(option, $index)\"\n            [fPreviewMatchSize]=\"false\"\n            class=\"group/item !flex w-full cursor-grab touch-none select-none items-center gap-3 rounded-lg px-2.5 py-2.5 text-start transition-colors hover:bg-(--p-surface-100) active:cursor-grabbing focus-visible:bg-(--p-surface-100) focus-visible:outline-none\"\n            role=\"button\"\n            tabindex=\"0\"\n            [attr.title]=\"\n              resolve(option.description) || resolve(option.displayName)\n            \"\n            (click)=\"pickTrigger(option)\"\n            (keydown.enter)=\"pickTrigger(option)\"\n          >\n            <ng-template fExternalItemPreview>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  triggerDragPreview;\n                  context: { $implicit: option }\n                \"\n              />\n            </ng-template>\n            <mt-avatar\n              shape=\"square\"\n              [icon]=\"triggerIconFor(option)\"\n              [style.--fp-avatar-color]=\"triggerOptionVars(option).color\"\n              [style.--fp-avatar-bg]=\"triggerOptionVars(option).bg\"\r\n            />\r\n            <span class=\"min-w-0 flex-1\">\r\n              <span\r\n                class=\"block truncate text-[13px] font-semibold text-(--p-text-color)\"\r\n                >{{ resolve(option.displayName) }}</span\r\n              >\r\n              @if (option.description) {\r\n                <span\r\n                  class=\"block line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\r\n                  >{{ resolve(option.description) }}</span\r\n                >\n              }\n            </span>\n            <mt-icon\n              class=\"flex-none text-(--p-text-muted-color)/40 transition-colors group-hover/item:text-(--p-text-muted-color) [&_svg]:size-4\"\n              icon=\"general.dots-grid\"\n            />\n          </div>\n        }\n        @if (visibleTriggerOptions().length === 0) {\n          <ng-container *ngTemplateOutlet=\"emptyRow\" />\n        }\n      } @else if (view() === \"category\") {\n        @for (item of activeItems(); track paletteItemKey(item, $index)) {\r\n          <div\r\n            fExternalItem\n            [fData]=\"item\"\n            [fExternalItemId]=\"paletteItemKey(item, $index)\"\n            [fPreviewMatchSize]=\"false\"\n            class=\"group/item !flex w-full cursor-grab touch-none select-none items-center gap-3 rounded-lg px-2.5 py-2.5 transition-colors hover:bg-(--p-surface-100) active:cursor-grabbing focus-visible:bg-(--p-surface-100) focus-visible:outline-none\"\n            role=\"button\"\r\n            tabindex=\"0\"\r\n            [attr.title]=\"\r\n              resolve(item.description) || resolve(item.displayName)\r\n            \"\r\n            (click)=\"pickStep(item)\"\n            (keydown.enter)=\"pickStep(item)\"\n          >\n            <ng-template fExternalItemPreview>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  stepDragPreview;\n                  context: { $implicit: item }\n                \"\n              />\n            </ng-template>\n            <mt-avatar\n              shape=\"square\"\n              [icon]=\"iconFor(item)\"\n              [style.--fp-avatar-color]=\"severityFor(item).color\"\r\n              [style.--fp-avatar-bg]=\"severityFor(item).bg\"\r\n            />\r\n            <div class=\"min-w-0 flex-1\">\r\n              <div\r\n                class=\"truncate text-[13px] font-semibold text-(--p-text-color)\"\r\n              >\r\n                {{ resolve(item.displayName) }}\r\n              </div>\r\n              @if (item.description) {\r\n                <div\r\n                  class=\"line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\r\n                >\r\n                  {{ resolve(item.description) }}\r\n                </div>\r\n              }\r\n            </div>\r\n            <mt-icon\r\n              class=\"flex-none text-(--p-text-muted-color)/40 transition-colors group-hover/item:text-(--p-text-muted-color) [&_svg]:size-4\"\r\n              icon=\"general.dots-grid\"\r\n            />\r\n          </div>\r\n        }\r\n      } @else {\r\n        @for (group of groups(); track group.category) {\r\n          <div\n            role=\"button\"\n            tabindex=\"0\"\n            class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-2.5 py-2.5 text-start transition-colors hover:bg-(--p-surface-100) focus-visible:bg-(--p-surface-100) focus-visible:outline-none\"\n            (click)=\"openCategory(group.category)\"\n            (keydown.enter)=\"openCategory(group.category)\"\n            (keydown.space)=\"$event.preventDefault(); openCategory(group.category)\"\n          >\n            <mt-avatar\r\n              shape=\"square\"\r\n              [icon]=\"group.icon\"\r\n              [style.--fp-avatar-color]=\"group.color\"\r\n              [style.--fp-avatar-bg]=\"group.bg\"\r\n            />\r\n            <span class=\"min-w-0 flex-1\">\r\n              <span\r\n                class=\"block truncate text-[13px] font-semibold text-(--p-text-color)\"\r\n                >{{ group.label }}</span\r\n              >\r\n              <span\r\n                class=\"block line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\r\n                >{{ group.description }}</span\r\n              >\r\n            </span>\r\n            <mt-icon\n              class=\"flex-none text-(--p-text-muted-color) [&_svg]:size-4 rtl:rotate-180\"\n              icon=\"arrow.chevron-right\"\n            />\n          </div>\n        }\n\n        @if (groups().length === 0) {\n          <ng-container *ngTemplateOutlet=\"emptyRow\" />\n        } @else {\n          <div class=\"mx-2.5 my-1.5 h-px bg-(--p-content-border-color)\"></div>\n          <div\n            role=\"button\"\n            tabindex=\"0\"\n            class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-2.5 py-2.5 text-start transition-colors hover:bg-(--p-surface-100) focus-visible:bg-(--p-surface-100) focus-visible:outline-none\"\n            (click)=\"openTriggers()\"\n            (keydown.enter)=\"openTriggers()\"\n            (keydown.space)=\"$event.preventDefault(); openTriggers()\"\n          >\n            <mt-avatar\r\n              shape=\"square\"\r\n              icon=\"general.zap-fast\"\r\n              [style.--fp-avatar-color]=\"triggerVars().color\"\r\n              [style.--fp-avatar-bg]=\"triggerVars().bg\"\r\n            />\r\n            <span class=\"min-w-0 flex-1\">\r\n              <span\r\n                class=\"block truncate text-[13px] font-semibold text-(--p-text-color)\"\r\n                >{{ \"flowplus.palette.addAnotherTrigger\" | transloco }}</span\r\n              >\r\n              <span\r\n                class=\"block line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\r\n                >{{\r\n                  \"flowplus.palette.addAnotherTriggerDesc\" | transloco\r\n                }}</span\r\n              >\r\n            </span>\r\n            <mt-icon\n              class=\"flex-none text-(--p-text-muted-color) [&_svg]:size-4 rtl:rotate-180\"\n              icon=\"arrow.chevron-right\"\n            />\n          </div>\n        }\n      }\r\n    </div>\r\n  </aside>\r\n}\r\n\r\n<ng-template #emptyRow>\r\n  <div\r\n    class=\"flex flex-col items-center justify-center px-6 py-8 text-center text-(--p-text-muted-color)\"\r\n  >\r\n    <p>{{ \"flowplus.common.empty\" | transloco }}</p>\r\n  </div>\n</ng-template>\n\n<ng-template #stepDragPreview let-item>\n  <div\n    class=\"pointer-events-none w-[280px] overflow-hidden rounded-xl border border-[color-mix(in_srgb,var(--fp-avatar-color)_28%,var(--p-content-border-color))] bg-(--p-content-background)/95 text-(--p-text-color) shadow-[0_18px_36px_rgba(15,23,42,0.18),0_2px_8px_rgba(15,23,42,0.08)] ring-1 ring-white/60 backdrop-blur-md dark:ring-white/10\"\n    [style.--fp-avatar-color]=\"severityFor(item).color\"\n    [style.--fp-avatar-bg]=\"severityFor(item).bg\"\n  >\n    <div class=\"flex items-start gap-3 p-3\">\n      <span\n        class=\"grid h-11 w-11 flex-none place-items-center rounded-xl bg-[var(--fp-avatar-bg)] text-[var(--fp-avatar-color)] shadow-inner ring-1 ring-[color-mix(in_srgb,var(--fp-avatar-color)_24%,transparent)] [&_.p-avatar]:bg-transparent [&_.p-avatar]:text-inherit [&_mt-icon]:size-5 [&_svg]:size-5\"\n      >\n        <mt-avatar size=\"normal\" shape=\"square\" [icon]=\"iconFor(item)\" />\n      </span>\n      <span class=\"min-w-0 flex-1\">\n        <span class=\"block truncate text-[13.5px] font-bold leading-5\">\n          {{ resolve(item.displayName) }}\n        </span>\n        @if (item.description) {\n          <span\n            class=\"mt-0.5 block line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\n          >\n            {{ resolve(item.description) }}\n          </span>\n        }\n      </span>\n    </div>\n    <div\n      class=\"flex items-center justify-between border-t border-(--p-content-border-color)/70 bg-[color-mix(in_srgb,var(--fp-avatar-color)_7%,transparent)] px-3 py-2\"\n    >\n      <span\n        class=\"max-w-[150px] truncate text-[10.5px] font-semibold text-(--p-text-muted-color)\"\n      >\n        {{ item.category || item.type }}\n      </span>\n      <span\n        class=\"inline-flex items-center gap-1 rounded-full bg-(--p-content-background) px-2 py-0.5 text-[10.5px] font-semibold text-[var(--fp-avatar-color)] shadow-sm\"\n      >\n        <mt-icon icon=\"general.plus\" class=\"[&_svg]:size-3\" />\n        Drop to add\n      </span>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #triggerDragPreview let-option>\n  <div\n    class=\"pointer-events-none w-[280px] overflow-hidden rounded-xl border border-[color-mix(in_srgb,rgb(var(--fp-app-action))_30%,var(--p-content-border-color))] bg-(--p-content-background)/95 text-(--p-text-color) shadow-[0_18px_36px_rgba(245,158,11,0.20),0_2px_8px_rgba(15,23,42,0.08)] ring-1 ring-white/60 backdrop-blur-md dark:ring-white/10\"\n  >\n    <div class=\"flex items-start gap-3 p-3\">\n      <span\n        class=\"grid h-11 w-11 flex-none place-items-center rounded-xl bg-[color-mix(in_srgb,rgb(var(--fp-app-action))_16%,transparent)] text-[rgb(var(--fp-app-action))] shadow-inner ring-1 ring-[color-mix(in_srgb,rgb(var(--fp-app-action))_24%,transparent)] [&_.p-avatar]:bg-transparent [&_.p-avatar]:text-inherit [&_mt-icon]:size-5 [&_svg]:size-5\"\n      >\n        <mt-avatar\n          size=\"normal\"\n          shape=\"square\"\n          [icon]=\"triggerIconFor(option)\"\n        />\n      </span>\n      <span class=\"min-w-0 flex-1\">\n        <span class=\"block truncate text-[13.5px] font-bold leading-5\">\n          {{ resolve(option.displayName) }}\n        </span>\n        @if (option.description) {\n          <span\n            class=\"mt-0.5 block line-clamp-2 text-[11.5px] leading-[1.45] text-(--p-text-muted-color)\"\n          >\n            {{ resolve(option.description) }}\n          </span>\n        }\n      </span>\n    </div>\n    <div\n      class=\"flex items-center justify-between border-t border-(--p-content-border-color)/70 bg-[color-mix(in_srgb,rgb(var(--fp-app-action))_8%,transparent)] px-3 py-2\"\n    >\n      <span\n        class=\"max-w-[150px] truncate text-[10.5px] font-semibold text-(--p-text-muted-color)\"\n      >\n        Trigger\n      </span>\n      <span\n        class=\"inline-flex items-center gap-1 rounded-full bg-(--p-content-background) px-2 py-0.5 text-[10.5px] font-semibold text-[rgb(var(--fp-app-action))] shadow-sm\"\n      >\n        <mt-icon icon=\"general.plus\" class=\"[&_svg]:size-3\" />\n        Drop to add\n      </span>\n    </div>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { onDocumentPointerDown: [{
                 type: HostListener,
                 args: ['document:pointerdown', ['$event']]
@@ -20763,6 +21463,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                 type: Output
             }], addTrigger: [{
                 type: Output
+            }], addNote: [{
+                type: Output
             }] } });
 
 class BuilderTopbarComponent {
@@ -20973,6 +21675,9 @@ const TRIGGER_COLUMN_X = 40;
 const TRIGGER_COLUMN_TOP = 60;
 const TRIGGER_ROW_GAP = 200;
 const STEP_COLUMN_OFFSET_X = 360;
+const CANVAS_NOTE_AUTOLAYOUT_PADDING = 48;
+const TRIGGER_NOTE_WIDTH = 180;
+const TRIGGER_NOTE_HEIGHT = 132;
 class WorkflowBuilderPageComponent {
     store = inject(FlowplusWorkflowFacade);
     /** The Foblex canvas adapter — used to drive real fit/center/select. */
@@ -21691,24 +22396,33 @@ class WorkflowBuilderPageComponent {
             englishName = item.displayName;
         }
         const beforeIds = new Set(this.store.triggers().map((t) => t.id));
+        const layout = {
+            x: event.position.x,
+            y: event.position.y,
+        };
+        const config = {
+            ui: { layout },
+        };
         this.afterDispatch(this.store.createTrigger({
             type: triggerType,
             enabled: true,
             name: englishName,
+            configJson: JSON.stringify(config),
             metadata: {
                 triggerKey,
                 catalogKey,
-                layout: {
-                    x: event.position.x,
-                    y: event.position.y,
-                },
+                config,
+                configJson: JSON.stringify(config),
+                layout,
             },
         }), () => {
             const created = this.store
                 .triggers()
                 .find((t) => t.id > 0 && !beforeIds.has(t.id));
-            if (created)
+            if (created) {
+                this.store.setTriggerPosition(created.id, layout.x, layout.y);
                 this.canvas()?.focusTrigger(created.id);
+            }
         });
     }
     /**
@@ -21870,6 +22584,20 @@ class WorkflowBuilderPageComponent {
         this.clearTransientAddIntent();
         this.store.setPaletteOpen(false);
     }
+    onAddCanvasNote() {
+        this.clearTransientAddIntent();
+        const note = this.store.addCanvasNote(this.canvas()?.flowCenter() ?? { x: 160, y: 160 });
+        this.canvas()?.focusNote(note.id);
+    }
+    onCanvasNoteUpdate(event) {
+        this.store.updateCanvasNote(event.noteId, event.patch);
+    }
+    onCanvasNoteDuplicate(event) {
+        this.store.duplicateCanvasNote(event.noteId);
+    }
+    onCanvasNoteDelete(event) {
+        this.store.deleteCanvasNote(event.noteId);
+    }
     onCanvasBackgroundClick() {
         // Click on empty canvas background closes the editor modal + palette drawer
         // so the user has the full canvas back.
@@ -21933,6 +22661,7 @@ class WorkflowBuilderPageComponent {
         const s = this.store.builderState();
         if (!s.workflowId)
             return;
+        const noteMembers = this.canvasNoteAutoLayoutMembers();
         // Triggers are virtual nodes the Dagre engine doesn't see. Place them in
         // a clean left column (entry points, left→right flow) so they never sit
         // on top of step nodes.
@@ -21955,19 +22684,109 @@ class WorkflowBuilderPageComponent {
             connections: s.connections,
             nodeSize: (step) => nodeSizeById.get(step.id) ?? null,
         });
+        const nextNodePositions = layout.nodes.map((n) => ({
+            stepId: n.stepId,
+            x: n.x + stepOffsetX,
+            y: n.y,
+        }));
+        const notePositions = this.canvasNoteAutoLayoutPositions(noteMembers, nextNodePositions, triggerPositions);
         this.canvas()?.suspendPositionSync();
         this.store.setLayoutPositions({
             triggers: triggerPositions,
-            nodes: layout.nodes.map((n) => ({
-                stepId: n.stepId,
-                x: n.x + stepOffsetX,
-                y: n.y,
-            })),
+            nodes: nextNodePositions,
+            notes: notePositions,
         });
         // Positions just changed — snap the viewport to the arranged graph once
         // it re-renders.
         this.canvas()?.armInitialFit();
     }
+    canvasNoteAutoLayoutMembers() {
+        const itemRects = this.currentCanvasItemRects();
+        const members = new Map();
+        for (const note of this.store.canvasNotes()) {
+            const noteRect = {
+                id: note.id,
+                x: note.x,
+                y: note.y,
+                width: note.width,
+                height: note.height,
+            };
+            const overlapped = itemRects
+                .filter((rect) => rectsOverlap(noteRect, rect))
+                .map((rect) => rect.id);
+            if (overlapped.length)
+                members.set(note.id, overlapped);
+        }
+        return members;
+    }
+    canvasNoteAutoLayoutPositions(members, nodes, triggers) {
+        if (!members.size)
+            return [];
+        const nextRects = this.nextCanvasItemRects(nodes, triggers);
+        const notes = this.store.canvasNotes();
+        const updates = [];
+        for (const note of notes) {
+            const ids = members.get(note.id);
+            if (!ids?.length)
+                continue;
+            const rects = ids
+                .map((id) => nextRects.get(id))
+                .filter((rect) => rect != null);
+            const bounds = boundsForRects(rects);
+            if (!bounds)
+                continue;
+            updates.push({
+                noteId: note.id,
+                x: bounds.x - CANVAS_NOTE_AUTOLAYOUT_PADDING,
+                y: bounds.y - CANVAS_NOTE_AUTOLAYOUT_PADDING,
+                width: bounds.width + CANVAS_NOTE_AUTOLAYOUT_PADDING * 2,
+                height: bounds.height + CANVAS_NOTE_AUTOLAYOUT_PADDING * 2,
+            });
+        }
+        return updates;
+    }
+    currentCanvasItemRects() {
+        return [
+            ...this.store.nodeVms().map((node) => ({
+                id: `step:${node.stepId}`,
+                x: node.x,
+                y: node.y,
+                width: node.width ?? 250,
+                height: node.height ?? 116,
+            })),
+            ...this.store.triggerNodeVms().map((trigger) => ({
+                id: `trigger:${trigger.triggerId}`,
+                x: trigger.x,
+                y: trigger.y,
+                width: TRIGGER_NOTE_WIDTH,
+                height: TRIGGER_NOTE_HEIGHT,
+            })),
+        ];
+    }
+    nextCanvasItemRects(nodes, triggers) {
+        const currentNodes = new Map(this.store.nodeVms().map((node) => [node.stepId, node]));
+        const rects = new Map();
+        for (const node of nodes) {
+            const vm = currentNodes.get(node.stepId);
+            rects.set(`step:${node.stepId}`, {
+                id: `step:${node.stepId}`,
+                x: node.x,
+                y: node.y,
+                width: vm?.width ?? 250,
+                height: vm?.height ?? 116,
+            });
+        }
+        for (const trigger of triggers) {
+            rects.set(`trigger:${trigger.triggerId}`, {
+                id: `trigger:${trigger.triggerId}`,
+                x: trigger.x,
+                y: trigger.y,
+                width: TRIGGER_NOTE_WIDTH,
+                height: TRIGGER_NOTE_HEIGHT,
+            });
+        }
+        return rects;
+    }
     deleteSelection() {
         const sel = this.store.selection();
         for (const stepId of sel.stepIds) {
@@ -21978,6 +22797,8 @@ class WorkflowBuilderPageComponent {
         }
         for (const connId of sel.connectionIds)
             this.store.deleteConnection(connId);
+        for (const noteId of sel.canvasNoteIds)
+            this.store.deleteCanvasNote(noteId);
     }
     /* -------- node hover-bar actions (Phase 3) -------- */
     onNodeQuickAdd(e) {
@@ -22216,7 +23037,7 @@ class WorkflowBuilderPageComponent {
         this.store.setInspectorOpen(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkflowBuilderPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkflowBuilderPageComponent, isStandalone: true, selector: "fp-workflow-builder-page", viewQueries: [{ propertyName: "canvas", first: true, predicate: FlowCanvasComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"relative flex h-full min-h-full w-full flex-col overflow-hidden bg-(--p-surface-50) text-(--p-text-color)\"\n  id=\"fp-builder-root\"\n>\n  <fp-builder-topbar\n    (validate)=\"onValidate()\"\n    (testRun)=\"onOpenTestRun()\"\n    (publish)=\"onPublish()\"\n    (unpublish)=\"onUnpublish()\"\n    (openSettings)=\"onOpenSettings()\"\n    (toggleNodeFinder)=\"onTogglePalette()\"\n  />\n\n  <div\n    class=\"relative min-h-0 flex-1 overflow-hidden\"\n    id=\"fp-workspace-root\"\n    [class.is-bottom-open]=\"store.ui().bottomPanelOpen\"\n    [class.is-palette-expanded]=\"store.ui().paletteOpen\"\n  >\n    @if (store.busy()) {\n      <div\n        class=\"pointer-events-none absolute inset-x-0 top-0 z-[7] h-0.5 overflow-hidden bg-(--p-primary-color)/15\"\n        role=\"status\"\n        aria-label=\"Working...\"\n      >\n        <div\n          class=\"h-full w-[30%] bg-(--p-primary-color) animate-[fp-busy-bar-slide_1.1s_cubic-bezier(0.4,0,0.2,1)_infinite]\"\n        ></div>\n      </div>\n    }\n\n    <fp-palette\n      (openRequested)=\"onOpenPaletteFromRail()\"\n      (closeRequested)=\"onClosePalette()\"\n      (add)=\"onPaletteAdd($event)\"\n      (addTrigger)=\"onPaletteAddTrigger($event)\"\n    />\n\n    <main class=\"absolute inset-0 overflow-hidden bg-(--p-surface-50)\">\n      <fp-flow-canvas\n        (paletteDrop)=\"onPaletteDrop($event)\"\n        (connectionCreate)=\"onConnectionCreate($event)\"\n        (connectionReassign)=\"onConnectionReassign($event)\"\n        (triggerStartConnect)=\"onTriggerStartConnect($event)\"\n        (triggerStartReassign)=\"onTriggerStartReassign($event)\"\n        (triggerStartDisconnect)=\"onTriggerStartDisconnect($event)\"\n        (connectionQuickAdd)=\"onConnectionQuickAdd($event)\"\n        (quickAddPick)=\"onQuickAddPick($event)\"\n        (autoLayoutRequested)=\"autoLayout()\"\n        (nodeQuickAdd)=\"onNodeQuickAdd($event)\"\n        (nodePortPlusClick)=\"onNodePortPlusClick($event)\"\n        (nodeDuplicate)=\"onNodeDuplicate($event)\"\n        (nodeRemove)=\"onNodeRemove($event)\"\n        (nodeOpenDetails)=\"onNodeOpenDetails($event)\"\n        (edgeInsertStep)=\"onEdgeInsertStep($event)\"\n        (edgeRemove)=\"onEdgeRemove($event)\"\n        (edgeEditFormula)=\"onEdgeEditFormula($event)\"\n        (edgeOpenDetails)=\"onEdgeOpenDetails($event)\"\n        (assignNodeToConnection)=\"onAssignNodeToConnection($event)\"\n        (openChildWorkflow)=\"onOpenChildWorkflow($event)\"\n        (starterAddTrigger)=\"onStarterAddTrigger($event)\"\n        (triggerOpenDetails)=\"onTriggerOpenDetails($event)\"\n        (triggerExecute)=\"onTriggerExecute($event)\"\n        (triggerToggleEnabled)=\"onTriggerToggleEnabled($event)\"\n        (triggerDelete)=\"onTriggerDelete($event)\"\n        (requestAddStep)=\"onRequestAddStep($event)\"\n        (canvasBackgroundClick)=\"onCanvasBackgroundClick()\"\n      />\n\n      @if (store.loading()) {\n        <div\n          class=\"pointer-events-none absolute inset-0 z-[7] flex flex-col items-center justify-center gap-3.5 bg-(--p-surface-50)/70 text-[12.5px] text-(--p-text-muted-color) backdrop-blur-[2px] animate-[fp-fade-in_240ms_ease-out]\"\n          role=\"status\"\n          aria-live=\"polite\"\n        >\n          <div\n            class=\"h-9 w-9 rounded-full border-[3px] border-(--p-primary-color)/20 border-t-(--p-primary-color) animate-[fp-loading-spin_720ms_linear_infinite]\"\n            aria-hidden=\"true\"\n          ></div>\n          <span>{{ \"flowplus.common.loading\" | transloco }}</span>\n        </div>\n      }\n    </main>\n\n    <fp-bottom-panel\n      [class.h-96]=\"store.ui().bottomPanelOpen\"\n      [class.h-10]=\"!store.ui().bottomPanelOpen\"\n      (focus)=\"onFocusIssue($event)\"\n    />\n  </div>\n\n  <fp-command-palette\n    [open]=\"commandPaletteOpen()\"\n    [actions]=\"commandPaletteActions()\"\n    (pick)=\"onCommandPalettePick($event)\"\n    (dismiss)=\"closeCommandPalette()\"\n  />\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: BuilderTopbarComponent, selector: "fp-builder-topbar", outputs: ["validate", "testRun", "publish", "unpublish", "openSettings", "toggleNodeFinder"] }, { kind: "component", type: PaletteComponent, selector: "fp-palette", outputs: ["closeRequested", "openRequested", "add", "addTrigger"] }, { kind: "component", type: FlowCanvasComponent, selector: "fp-flow-canvas", outputs: ["paletteDrop", "connectionCreate", "connectionReassign", "triggerStartConnect", "triggerStartReassign", "triggerStartDisconnect", "connectionQuickAdd", "quickAddPick", "autoLayoutRequested", "loaded", "nodeQuickAdd", "nodePortPlusClick", "nodeDuplicate", "nodeRemove", "nodeOpenDetails", "edgeInsertStep", "edgeRemove", "edgeEditFormula", "edgeOpenDetails", "assignNodeToConnection", "openChildWorkflow", "starterAddTrigger", "triggerOpenDetails", "triggerExecute", "triggerToggleEnabled", "triggerDelete", "canvasBackgroundClick", "requestAddStep"] }, { kind: "component", type: BottomPanelComponent, selector: "fp-bottom-panel", outputs: ["focus"] }, { kind: "component", type: CommandPaletteComponent, selector: "fp-command-palette", inputs: ["open", "actions"], outputs: ["pick", "dismiss"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkflowBuilderPageComponent, isStandalone: true, selector: "fp-workflow-builder-page", viewQueries: [{ propertyName: "canvas", first: true, predicate: FlowCanvasComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"relative flex h-full min-h-full w-full flex-col overflow-hidden bg-(--p-surface-50) text-(--p-text-color)\"\n  id=\"fp-builder-root\"\n>\n  <fp-builder-topbar\n    (validate)=\"onValidate()\"\n    (testRun)=\"onOpenTestRun()\"\n    (publish)=\"onPublish()\"\n    (unpublish)=\"onUnpublish()\"\n    (openSettings)=\"onOpenSettings()\"\n    (toggleNodeFinder)=\"onTogglePalette()\"\n  />\n\n  <div\n    class=\"relative min-h-0 flex-1 overflow-hidden\"\n    id=\"fp-workspace-root\"\n    [class.is-bottom-open]=\"store.ui().bottomPanelOpen\"\n    [class.is-palette-expanded]=\"store.ui().paletteOpen\"\n  >\n    @if (store.busy()) {\n      <div\n        class=\"pointer-events-none absolute inset-x-0 top-0 z-[7] h-0.5 overflow-hidden bg-(--p-primary-color)/15\"\n        role=\"status\"\n        aria-label=\"Working...\"\n      >\n        <div\n          class=\"h-full w-[30%] bg-(--p-primary-color) animate-[fp-busy-bar-slide_1.1s_cubic-bezier(0.4,0,0.2,1)_infinite]\"\n        ></div>\n      </div>\n    }\n\n    <fp-palette\n      (openRequested)=\"onOpenPaletteFromRail()\"\n      (closeRequested)=\"onClosePalette()\"\n      (add)=\"onPaletteAdd($event)\"\n      (addTrigger)=\"onPaletteAddTrigger($event)\"\n      (addNote)=\"onAddCanvasNote()\"\n    />\n\n    <main class=\"absolute inset-0 overflow-hidden bg-(--p-surface-50)\">\n      <fp-flow-canvas\n        (paletteDrop)=\"onPaletteDrop($event)\"\n        (connectionCreate)=\"onConnectionCreate($event)\"\n        (connectionReassign)=\"onConnectionReassign($event)\"\n        (triggerStartConnect)=\"onTriggerStartConnect($event)\"\n        (triggerStartReassign)=\"onTriggerStartReassign($event)\"\n        (triggerStartDisconnect)=\"onTriggerStartDisconnect($event)\"\n        (connectionQuickAdd)=\"onConnectionQuickAdd($event)\"\n        (quickAddPick)=\"onQuickAddPick($event)\"\n        (autoLayoutRequested)=\"autoLayout()\"\n        (nodeQuickAdd)=\"onNodeQuickAdd($event)\"\n        (nodePortPlusClick)=\"onNodePortPlusClick($event)\"\n        (nodeDuplicate)=\"onNodeDuplicate($event)\"\n        (nodeRemove)=\"onNodeRemove($event)\"\n        (nodeOpenDetails)=\"onNodeOpenDetails($event)\"\n        (edgeInsertStep)=\"onEdgeInsertStep($event)\"\n        (edgeRemove)=\"onEdgeRemove($event)\"\n        (edgeEditFormula)=\"onEdgeEditFormula($event)\"\n        (edgeOpenDetails)=\"onEdgeOpenDetails($event)\"\n        (assignNodeToConnection)=\"onAssignNodeToConnection($event)\"\n        (openChildWorkflow)=\"onOpenChildWorkflow($event)\"\n        (starterAddTrigger)=\"onStarterAddTrigger($event)\"\n        (triggerOpenDetails)=\"onTriggerOpenDetails($event)\"\n        (triggerExecute)=\"onTriggerExecute($event)\"\n        (triggerToggleEnabled)=\"onTriggerToggleEnabled($event)\"\n        (triggerDelete)=\"onTriggerDelete($event)\"\n        (requestAddStep)=\"onRequestAddStep($event)\"\n        (noteUpdate)=\"onCanvasNoteUpdate($event)\"\n        (noteDuplicate)=\"onCanvasNoteDuplicate($event)\"\n        (noteDelete)=\"onCanvasNoteDelete($event)\"\n        (canvasBackgroundClick)=\"onCanvasBackgroundClick()\"\n      />\n\n      @if (store.loading()) {\n        <div\n          class=\"pointer-events-none absolute inset-0 z-[7] flex flex-col items-center justify-center gap-3.5 bg-(--p-surface-50)/70 text-[12.5px] text-(--p-text-muted-color) backdrop-blur-[2px] animate-[fp-fade-in_240ms_ease-out]\"\n          role=\"status\"\n          aria-live=\"polite\"\n        >\n          <div\n            class=\"h-9 w-9 rounded-full border-[3px] border-(--p-primary-color)/20 border-t-(--p-primary-color) animate-[fp-loading-spin_720ms_linear_infinite]\"\n            aria-hidden=\"true\"\n          ></div>\n          <span>{{ \"flowplus.common.loading\" | transloco }}</span>\n        </div>\n      }\n    </main>\n\n    <fp-bottom-panel\n      [class.h-96]=\"store.ui().bottomPanelOpen\"\n      [class.h-10]=\"!store.ui().bottomPanelOpen\"\n      (focus)=\"onFocusIssue($event)\"\n    />\n  </div>\n\n  <fp-command-palette\n    [open]=\"commandPaletteOpen()\"\n    [actions]=\"commandPaletteActions()\"\n    (pick)=\"onCommandPalettePick($event)\"\n    (dismiss)=\"closeCommandPalette()\"\n  />\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: BuilderTopbarComponent, selector: "fp-builder-topbar", outputs: ["validate", "testRun", "publish", "unpublish", "openSettings", "toggleNodeFinder"] }, { kind: "component", type: PaletteComponent, selector: "fp-palette", outputs: ["closeRequested", "openRequested", "add", "addTrigger", "addNote"] }, { kind: "component", type: FlowCanvasComponent, selector: "fp-flow-canvas", outputs: ["paletteDrop", "connectionCreate", "connectionReassign", "triggerStartConnect", "triggerStartReassign", "triggerStartDisconnect", "connectionQuickAdd", "quickAddPick", "autoLayoutRequested", "loaded", "nodeQuickAdd", "nodePortPlusClick", "nodeDuplicate", "nodeRemove", "nodeOpenDetails", "edgeInsertStep", "edgeRemove", "edgeEditFormula", "edgeOpenDetails", "assignNodeToConnection", "openChildWorkflow", "starterAddTrigger", "triggerOpenDetails", "triggerExecute", "triggerToggleEnabled", "triggerDelete", "canvasBackgroundClick", "requestAddStep", "noteUpdate", "noteDuplicate", "noteDelete"] }, { kind: "component", type: BottomPanelComponent, selector: "fp-bottom-panel", outputs: ["focus"] }, { kind: "component", type: CommandPaletteComponent, selector: "fp-command-palette", inputs: ["open", "actions"], outputs: ["pick", "dismiss"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkflowBuilderPageComponent, decorators: [{
             type: Component,
@@ -22228,7 +23049,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         FlowCanvasComponent,
                         BottomPanelComponent,
                         CommandPaletteComponent,
-                    ], template: "<div\n  class=\"relative flex h-full min-h-full w-full flex-col overflow-hidden bg-(--p-surface-50) text-(--p-text-color)\"\n  id=\"fp-builder-root\"\n>\n  <fp-builder-topbar\n    (validate)=\"onValidate()\"\n    (testRun)=\"onOpenTestRun()\"\n    (publish)=\"onPublish()\"\n    (unpublish)=\"onUnpublish()\"\n    (openSettings)=\"onOpenSettings()\"\n    (toggleNodeFinder)=\"onTogglePalette()\"\n  />\n\n  <div\n    class=\"relative min-h-0 flex-1 overflow-hidden\"\n    id=\"fp-workspace-root\"\n    [class.is-bottom-open]=\"store.ui().bottomPanelOpen\"\n    [class.is-palette-expanded]=\"store.ui().paletteOpen\"\n  >\n    @if (store.busy()) {\n      <div\n        class=\"pointer-events-none absolute inset-x-0 top-0 z-[7] h-0.5 overflow-hidden bg-(--p-primary-color)/15\"\n        role=\"status\"\n        aria-label=\"Working...\"\n      >\n        <div\n          class=\"h-full w-[30%] bg-(--p-primary-color) animate-[fp-busy-bar-slide_1.1s_cubic-bezier(0.4,0,0.2,1)_infinite]\"\n        ></div>\n      </div>\n    }\n\n    <fp-palette\n      (openRequested)=\"onOpenPaletteFromRail()\"\n      (closeRequested)=\"onClosePalette()\"\n      (add)=\"onPaletteAdd($event)\"\n      (addTrigger)=\"onPaletteAddTrigger($event)\"\n    />\n\n    <main class=\"absolute inset-0 overflow-hidden bg-(--p-surface-50)\">\n      <fp-flow-canvas\n        (paletteDrop)=\"onPaletteDrop($event)\"\n        (connectionCreate)=\"onConnectionCreate($event)\"\n        (connectionReassign)=\"onConnectionReassign($event)\"\n        (triggerStartConnect)=\"onTriggerStartConnect($event)\"\n        (triggerStartReassign)=\"onTriggerStartReassign($event)\"\n        (triggerStartDisconnect)=\"onTriggerStartDisconnect($event)\"\n        (connectionQuickAdd)=\"onConnectionQuickAdd($event)\"\n        (quickAddPick)=\"onQuickAddPick($event)\"\n        (autoLayoutRequested)=\"autoLayout()\"\n        (nodeQuickAdd)=\"onNodeQuickAdd($event)\"\n        (nodePortPlusClick)=\"onNodePortPlusClick($event)\"\n        (nodeDuplicate)=\"onNodeDuplicate($event)\"\n        (nodeRemove)=\"onNodeRemove($event)\"\n        (nodeOpenDetails)=\"onNodeOpenDetails($event)\"\n        (edgeInsertStep)=\"onEdgeInsertStep($event)\"\n        (edgeRemove)=\"onEdgeRemove($event)\"\n        (edgeEditFormula)=\"onEdgeEditFormula($event)\"\n        (edgeOpenDetails)=\"onEdgeOpenDetails($event)\"\n        (assignNodeToConnection)=\"onAssignNodeToConnection($event)\"\n        (openChildWorkflow)=\"onOpenChildWorkflow($event)\"\n        (starterAddTrigger)=\"onStarterAddTrigger($event)\"\n        (triggerOpenDetails)=\"onTriggerOpenDetails($event)\"\n        (triggerExecute)=\"onTriggerExecute($event)\"\n        (triggerToggleEnabled)=\"onTriggerToggleEnabled($event)\"\n        (triggerDelete)=\"onTriggerDelete($event)\"\n        (requestAddStep)=\"onRequestAddStep($event)\"\n        (canvasBackgroundClick)=\"onCanvasBackgroundClick()\"\n      />\n\n      @if (store.loading()) {\n        <div\n          class=\"pointer-events-none absolute inset-0 z-[7] flex flex-col items-center justify-center gap-3.5 bg-(--p-surface-50)/70 text-[12.5px] text-(--p-text-muted-color) backdrop-blur-[2px] animate-[fp-fade-in_240ms_ease-out]\"\n          role=\"status\"\n          aria-live=\"polite\"\n        >\n          <div\n            class=\"h-9 w-9 rounded-full border-[3px] border-(--p-primary-color)/20 border-t-(--p-primary-color) animate-[fp-loading-spin_720ms_linear_infinite]\"\n            aria-hidden=\"true\"\n          ></div>\n          <span>{{ \"flowplus.common.loading\" | transloco }}</span>\n        </div>\n      }\n    </main>\n\n    <fp-bottom-panel\n      [class.h-96]=\"store.ui().bottomPanelOpen\"\n      [class.h-10]=\"!store.ui().bottomPanelOpen\"\n      (focus)=\"onFocusIssue($event)\"\n    />\n  </div>\n\n  <fp-command-palette\n    [open]=\"commandPaletteOpen()\"\n    [actions]=\"commandPaletteActions()\"\n    (pick)=\"onCommandPalettePick($event)\"\n    (dismiss)=\"closeCommandPalette()\"\n  />\n</div>\n" }]
+                    ], template: "<div\n  class=\"relative flex h-full min-h-full w-full flex-col overflow-hidden bg-(--p-surface-50) text-(--p-text-color)\"\n  id=\"fp-builder-root\"\n>\n  <fp-builder-topbar\n    (validate)=\"onValidate()\"\n    (testRun)=\"onOpenTestRun()\"\n    (publish)=\"onPublish()\"\n    (unpublish)=\"onUnpublish()\"\n    (openSettings)=\"onOpenSettings()\"\n    (toggleNodeFinder)=\"onTogglePalette()\"\n  />\n\n  <div\n    class=\"relative min-h-0 flex-1 overflow-hidden\"\n    id=\"fp-workspace-root\"\n    [class.is-bottom-open]=\"store.ui().bottomPanelOpen\"\n    [class.is-palette-expanded]=\"store.ui().paletteOpen\"\n  >\n    @if (store.busy()) {\n      <div\n        class=\"pointer-events-none absolute inset-x-0 top-0 z-[7] h-0.5 overflow-hidden bg-(--p-primary-color)/15\"\n        role=\"status\"\n        aria-label=\"Working...\"\n      >\n        <div\n          class=\"h-full w-[30%] bg-(--p-primary-color) animate-[fp-busy-bar-slide_1.1s_cubic-bezier(0.4,0,0.2,1)_infinite]\"\n        ></div>\n      </div>\n    }\n\n    <fp-palette\n      (openRequested)=\"onOpenPaletteFromRail()\"\n      (closeRequested)=\"onClosePalette()\"\n      (add)=\"onPaletteAdd($event)\"\n      (addTrigger)=\"onPaletteAddTrigger($event)\"\n      (addNote)=\"onAddCanvasNote()\"\n    />\n\n    <main class=\"absolute inset-0 overflow-hidden bg-(--p-surface-50)\">\n      <fp-flow-canvas\n        (paletteDrop)=\"onPaletteDrop($event)\"\n        (connectionCreate)=\"onConnectionCreate($event)\"\n        (connectionReassign)=\"onConnectionReassign($event)\"\n        (triggerStartConnect)=\"onTriggerStartConnect($event)\"\n        (triggerStartReassign)=\"onTriggerStartReassign($event)\"\n        (triggerStartDisconnect)=\"onTriggerStartDisconnect($event)\"\n        (connectionQuickAdd)=\"onConnectionQuickAdd($event)\"\n        (quickAddPick)=\"onQuickAddPick($event)\"\n        (autoLayoutRequested)=\"autoLayout()\"\n        (nodeQuickAdd)=\"onNodeQuickAdd($event)\"\n        (nodePortPlusClick)=\"onNodePortPlusClick($event)\"\n        (nodeDuplicate)=\"onNodeDuplicate($event)\"\n        (nodeRemove)=\"onNodeRemove($event)\"\n        (nodeOpenDetails)=\"onNodeOpenDetails($event)\"\n        (edgeInsertStep)=\"onEdgeInsertStep($event)\"\n        (edgeRemove)=\"onEdgeRemove($event)\"\n        (edgeEditFormula)=\"onEdgeEditFormula($event)\"\n        (edgeOpenDetails)=\"onEdgeOpenDetails($event)\"\n        (assignNodeToConnection)=\"onAssignNodeToConnection($event)\"\n        (openChildWorkflow)=\"onOpenChildWorkflow($event)\"\n        (starterAddTrigger)=\"onStarterAddTrigger($event)\"\n        (triggerOpenDetails)=\"onTriggerOpenDetails($event)\"\n        (triggerExecute)=\"onTriggerExecute($event)\"\n        (triggerToggleEnabled)=\"onTriggerToggleEnabled($event)\"\n        (triggerDelete)=\"onTriggerDelete($event)\"\n        (requestAddStep)=\"onRequestAddStep($event)\"\n        (noteUpdate)=\"onCanvasNoteUpdate($event)\"\n        (noteDuplicate)=\"onCanvasNoteDuplicate($event)\"\n        (noteDelete)=\"onCanvasNoteDelete($event)\"\n        (canvasBackgroundClick)=\"onCanvasBackgroundClick()\"\n      />\n\n      @if (store.loading()) {\n        <div\n          class=\"pointer-events-none absolute inset-0 z-[7] flex flex-col items-center justify-center gap-3.5 bg-(--p-surface-50)/70 text-[12.5px] text-(--p-text-muted-color) backdrop-blur-[2px] animate-[fp-fade-in_240ms_ease-out]\"\n          role=\"status\"\n          aria-live=\"polite\"\n        >\n          <div\n            class=\"h-9 w-9 rounded-full border-[3px] border-(--p-primary-color)/20 border-t-(--p-primary-color) animate-[fp-loading-spin_720ms_linear_infinite]\"\n            aria-hidden=\"true\"\n          ></div>\n          <span>{{ \"flowplus.common.loading\" | transloco }}</span>\n        </div>\n      }\n    </main>\n\n    <fp-bottom-panel\n      [class.h-96]=\"store.ui().bottomPanelOpen\"\n      [class.h-10]=\"!store.ui().bottomPanelOpen\"\n      (focus)=\"onFocusIssue($event)\"\n    />\n  </div>\n\n  <fp-command-palette\n    [open]=\"commandPaletteOpen()\"\n    [actions]=\"commandPaletteActions()\"\n    (pick)=\"onCommandPalettePick($event)\"\n    (dismiss)=\"closeCommandPalette()\"\n  />\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { canvas: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FlowCanvasComponent), { isSignal: true }] }] } });
 function readObject(value) {
     return value && typeof value === 'object' && !Array.isArray(value)
@@ -22333,6 +23154,27 @@ function uniqueStrings(values) {
     }
     return out;
 }
+function rectsOverlap(a, b) {
+    return !(a.x + a.width < b.x ||
+        b.x + b.width < a.x ||
+        a.y + a.height < b.y ||
+        b.y + b.height < a.y);
+}
+function boundsForRects(rects) {
+    if (!rects.length)
+        return null;
+    const minX = Math.min(...rects.map((rect) => rect.x));
+    const minY = Math.min(...rects.map((rect) => rect.y));
+    const maxX = Math.max(...rects.map((rect) => rect.x + rect.width));
+    const maxY = Math.max(...rects.map((rect) => rect.y + rect.height));
+    return {
+        id: 'bounds',
+        x: minX,
+        y: minY,
+        width: maxX - minX,
+        height: maxY - minY,
+    };
+}
 function readString$1(record, key) {
     const value = record[key];
     return typeof value === 'string' && value.trim() ? value : null;
@@ -23166,5 +24008,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { APP_STATES, ApplyAutomationExecutionDetail, ApplyBuilderCommand, ApplyBuilderSnapshot, AutomationBuilderCatalogApiService, AutomationDesignApiService, AutomationExecutionApiService, AutomationExecutionsPageComponent, BottomPanelComponent, BuilderTopbarComponent, ClearAutomationRuntimeState, ClearCommandHistory, ClearConflict, ClearPendingOperation, ClearSelection, ClearWorkflowBuilder, CommitStepUpdates, CommitWorkflowMetadata, ConnectionCreated, ConnectionCreationFailed, ContextPickerComponent, ContextPillButtonComponent, ContextPillComponent, CreateConnection, CreateStep, CreateTrigger, CreateWorkflow, DagreFlowLayoutEngine, DeleteConnection, DeleteStep, DeleteTrigger, DeleteWorkflow, DuplicateWorkflow, EndpointBuilder, FLOWPLUS_FORM_DESIGNER_ADAPTER, FLOWPLUS_WORKFLOW_CONFIG, FLOWPLUS_WORKFLOW_DEFAULT_RUNTIME, FLOWPLUS_WORKFLOW_DEFAULT_STATE, FLOWPLUS_WORKFLOW_NAVIGATION, FLOWPLUS_WORKFLOW_ROUTES, FLOW_NODE_BASE_HEIGHT, FLOW_NODE_CARD_WIDTH, FLOW_NODE_MULTI_OUTPUT_GAP, FLOW_NODE_OUTPUT_SIZE, FlowCanvasComponent, FlowNodeComponent, FlowplusWorkflowActionKey, FlowplusWorkflowFacade, FlowplusWorkflowNavigationService, FlowplusWorkflowOverlayService, FlowplusWorkflowState, InspectorShellComponent, KeyboardShortcutsService, LOCAL_FALLBACK_CATALOG, LoadAutomationExecution, LoadContextCatalog, LoadContextCatalogForStep, LoadLatestAutomationExecution, LoadLayout, LoadTriggers, LoadWorkflowBuilder, LoadWorkflowCatalog, LoadWorkflowList, MarkLayoutDirty, MoveStep, NODE_COLOR_TOKEN, NODE_DEFAULT_ICON, NODE_MT_ICON, NoopFlowplusFormDesignerAdapter, PaletteComponent, PaletteDragSourceDirective, PollAutomationExecution, ProblemsPanelComponent, ProcessCreateDialogComponent, PublishWorkflow, RedoBuilderCommand, ReloadWorkflowBuilder, RunAutomationTrigger, RunWorkflowTest, SaveLayout, SelectConnection, SelectRuntimeNodeRun, SelectStep, SelectTrigger, SetActiveInspectorTab, SetBottomPanelOpen, SetBottomPanelTab, SetCanvasViewport, SetContextCatalog, SetCreateDialogOpen, SetInspectorOpen, SetLayout, SetLayoutAutosavePaused, SetMinimap, SetPaletteOpen, SetPaletteSearch, SetPendingOperation, SetReadonly, SetSelectedRuntimeTrigger, SetSelection, SetSelectionFromCanvas, SetStudioFilter, SetValidation, SetWorkflowCatalog, SetWorkflowDefinition, StepCreated, StepCreationFailed, TRIGGER_MT_ICON, TestRunPanelComponent, UnconfiguredFormDesignerAdapter, UndoBuilderCommand, UnpublishWorkflow, UpdateConnection, UpdateStep, UpdateTrigger, UpdateWorkflowMetadata, UpdateWorkflowResources, UpdateWorkflowVariables, ValidateWorkflow, WorkflowBuilderPageComponent, WorkflowCatalogApiService, WorkflowContextApiService, WorkflowDebugApiService, WorkflowDefinitionApiService, WorkflowFormApiService, WorkflowRunDebuggerPageComponent, WorkflowRuntimeApiService, WorkflowStudioPageComponent, WorkflowValidationApiService, applyBuilderSnapshot, avatarSeverityForStep, avatarSeverityForTrigger, canonicalTriggerTypeForStarterKind, coerceTranslatable, colorVarFor, computeBranchLanes, computeSaveStatus, connectionCanvasId, derivePortsForStep, extractMessage, flowNodeCardHeightForOutputs, flowNodeLayoutHeightForOutputs, flowNodeOutputCenterY, flowNodeOutputStackHeight, fromWorkflowConnectionDomain, fromWorkflowStepDomain, hasOtherPending, iconFor, indexValidationByConnectionId, indexValidationByStepId, indexValidationByTriggerId, inputPortId, isEntityDirty, mapHttpError, mtIconForStep, mtIconForTrigger, newClientMutationId, nextOperationId, nodeCanvasId, outputPortId, parseConnectionId, parseNodeId, parsePortId, parseTriggerOutputPortId, parseTriggerStartConnectionId, patchLayoutPosition, patchTriggerLayoutPosition, provideFlowplusFormDesignerAdapter, provideFlowplusWorkflow, provideFlowplusWorkflowNavigation, provideFlowplusWorkflowNavigationDefaults, readRecord, removeStepWithEdges, resolveTranslatable, resolveTriggerStartNodeKey, resolveTriggerStartStep, resolveTriggerStartStepId, resolveWorkflowTriggerKey, savingOrSaved, tempNodeCanvasId, toWorkflowConnectionDomain, toWorkflowDefinitionDomain, toWorkflowStepDomain, toWorkflowTriggerDomain, triggerCanvasId, triggerOutputPortId, triggerStartConnectionCanvasId, triggerStarterKindFor, unwrap, unwrapApiData, upsertConnection, upsertStep };
+export { APP_STATES, AddCanvasNote, ApplyAutomationExecutionDetail, ApplyBuilderCommand, ApplyBuilderSnapshot, AutomationBuilderCatalogApiService, AutomationDesignApiService, AutomationExecutionApiService, AutomationExecutionsPageComponent, BottomPanelComponent, BuilderTopbarComponent, ClearAutomationRuntimeState, ClearCommandHistory, ClearConflict, ClearPendingOperation, ClearSelection, ClearWorkflowBuilder, CommitStepUpdates, CommitWorkflowMetadata, ConnectionCreated, ConnectionCreationFailed, ContextPickerComponent, ContextPillButtonComponent, ContextPillComponent, CreateConnection, CreateStep, CreateTrigger, CreateWorkflow, DagreFlowLayoutEngine, DeleteCanvasNote, DeleteConnection, DeleteStep, DeleteTrigger, DeleteWorkflow, DuplicateCanvasNote, DuplicateWorkflow, EndpointBuilder, FLOWPLUS_FORM_DESIGNER_ADAPTER, FLOWPLUS_WORKFLOW_CONFIG, FLOWPLUS_WORKFLOW_DEFAULT_RUNTIME, FLOWPLUS_WORKFLOW_DEFAULT_STATE, FLOWPLUS_WORKFLOW_NAVIGATION, FLOWPLUS_WORKFLOW_ROUTES, FLOW_NODE_BASE_HEIGHT, FLOW_NODE_CARD_WIDTH, FLOW_NODE_MULTI_OUTPUT_GAP, FLOW_NODE_OUTPUT_SIZE, FlowCanvasComponent, FlowNodeComponent, FlowplusWorkflowActionKey, FlowplusWorkflowFacade, FlowplusWorkflowNavigationService, FlowplusWorkflowOverlayService, FlowplusWorkflowState, InspectorShellComponent, KeyboardShortcutsService, LOCAL_FALLBACK_CATALOG, LoadAutomationExecution, LoadContextCatalog, LoadContextCatalogForStep, LoadLatestAutomationExecution, LoadLayout, LoadTriggers, LoadWorkflowBuilder, LoadWorkflowCatalog, LoadWorkflowList, MarkLayoutDirty, MoveStep, NODE_COLOR_TOKEN, NODE_DEFAULT_ICON, NODE_MT_ICON, NoopFlowplusFormDesignerAdapter, PaletteComponent, PaletteDragSourceDirective, PollAutomationExecution, ProblemsPanelComponent, ProcessCreateDialogComponent, PublishWorkflow, RedoBuilderCommand, ReloadWorkflowBuilder, RunAutomationTrigger, RunWorkflowTest, SaveLayout, SelectCanvasNote, SelectConnection, SelectRuntimeNodeRun, SelectStep, SelectTrigger, SetActiveInspectorTab, SetBottomPanelOpen, SetBottomPanelTab, SetCanvasViewport, SetContextCatalog, SetCreateDialogOpen, SetInspectorOpen, SetLayout, SetLayoutAutosavePaused, SetMinimap, SetPaletteOpen, SetPaletteSearch, SetPendingOperation, SetReadonly, SetSelectedRuntimeTrigger, SetSelection, SetSelectionFromCanvas, SetStudioFilter, SetValidation, SetWorkflowCatalog, SetWorkflowDefinition, StepCreated, StepCreationFailed, TRIGGER_MT_ICON, TestRunPanelComponent, UnconfiguredFormDesignerAdapter, UndoBuilderCommand, UnpublishWorkflow, UpdateCanvasNote, UpdateConnection, UpdateStep, UpdateTrigger, UpdateWorkflowMetadata, UpdateWorkflowResources, UpdateWorkflowVariables, ValidateWorkflow, WorkflowBuilderPageComponent, WorkflowCatalogApiService, WorkflowContextApiService, WorkflowDebugApiService, WorkflowDefinitionApiService, WorkflowFormApiService, WorkflowRunDebuggerPageComponent, WorkflowRuntimeApiService, WorkflowStudioPageComponent, WorkflowValidationApiService, applyBuilderSnapshot, avatarSeverityForStep, avatarSeverityForTrigger, canonicalTriggerTypeForStarterKind, coerceTranslatable, colorVarFor, computeBranchLanes, computeSaveStatus, connectionCanvasId, derivePortsForStep, extractMessage, flowNodeCardHeightForOutputs, flowNodeLayoutHeightForOutputs, flowNodeOutputCenterY, flowNodeOutputStackHeight, fromWorkflowConnectionDomain, fromWorkflowStepDomain, hasOtherPending, iconFor, indexValidationByConnectionId, indexValidationByStepId, indexValidationByTriggerId, inputPortId, isEntityDirty, mapHttpError, mtIconForStep, mtIconForTrigger, newClientMutationId, nextOperationId, nodeCanvasId, outputPortId, parseConnectionId, parseNodeId, parsePortId, parseTriggerOutputPortId, parseTriggerStartConnectionId, patchLayoutPosition, patchTriggerLayoutPosition, provideFlowplusFormDesignerAdapter, provideFlowplusWorkflow, provideFlowplusWorkflowNavigation, provideFlowplusWorkflowNavigationDefaults, readRecord, removeStepWithEdges, resolveTranslatable, resolveTriggerStartNodeKey, resolveTriggerStartStep, resolveTriggerStartStepId, resolveWorkflowTriggerKey, savingOrSaved, tempNodeCanvasId, toWorkflowConnectionDomain, toWorkflowDefinitionDomain, toWorkflowStepDomain, toWorkflowTriggerDomain, triggerCanvasId, triggerOutputPortId, triggerStartConnectionCanvasId, triggerStarterKindFor, unwrap, unwrapApiData, upsertConnection, upsertStep };
 //# sourceMappingURL=masterteam-flowplus-workflow.mjs.map