@epistola.app/valtimo-plugin 0.9.4 → 0.11.0

package/fesm2022/epistola.app-valtimo-plugin.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, Output, Input, Component, ChangeDetectionStrategy, inject, NgModule, ENVIRONMENT_INITIALIZER, Injector } from '@angular/core';
 import * as i1 from '@angular/common/http';
-import { HttpHeaders, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HttpHeaders, HttpClientModule } from '@angular/common/http';
 import * as i2 from '@valtimo/shared';
 import { ROLE_ADMIN } from '@valtimo/shared';
 import { of, BehaviorSubject, combineLatest, take, Subject, debounceTime, takeUntil, merge } from 'rxjs';
@@ -12,21 +12,56 @@ import { CommonModule } from '@angular/common';
 import * as i2$1 from '@valtimo/plugin';
 import { PluginTranslatePipeModule } from '@valtimo/plugin';
 import { startWith, delay, shareReplay, take as take$1, takeUntil as takeUntil$1, filter, map, distinctUntilChanged, tap, switchMap, catchError, debounceTime as debounceTime$1 } from 'rxjs/operators';
-import * as i2$2 from '@angular/forms';
+import * as i3$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as _jsonata from 'jsonata';
-import * as i2$3 from '@valtimo/process-link';
-import * as i2$4 from '@angular/platform-browser';
-import * as i5 from '@formio/angular';
+import * as i2$2 from '@valtimo/process-link';
+import * as i2$3 from '@angular/platform-browser';
+import * as i4 from '@formio/angular';
 import { FormioModule } from '@formio/angular';
-import * as i2$5 from '@angular/router';
+import * as i2$4 from '@angular/router';
 import { RouterModule, Router } from '@angular/router';
-import * as i5$1 from 'carbon-components-angular/tabs';
+import * as i5 from 'carbon-components-angular/tabs';
 import { TabsModule } from 'carbon-components-angular/tabs';
 import * as i6 from 'carbon-components-angular/tag';
 import { TagModule } from 'carbon-components-angular/tag';
 import { AuthGuardService } from '@valtimo/security';
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 function initialResource(empty) {
     return { data: empty, loading: false, error: null };
 }
@@ -40,6 +75,95 @@ function errorResource(current, error) {
     return { data: current, loading: false, error };
 }
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 /**
  * Service for Epistola plugin administrative operations.
  * Provides health checks, version info, and usage overview.
@@ -88,10 +212,11 @@ class EpistolaAdminService {
         return this.http.post(`${this.apiEndpoint}/pending/${encodeURIComponent(executionId)}/reconcile`, null);
     }
     /**
-     * Get the latest BPMN race-safety validation violations across deployed
-     * process definitions. Empty list = healthy.
+     * Get the latest BPMN race-safety validation report across deployed process
+     * definitions: the violations (empty = healthy) plus when it was last checked
+     * and how often it refreshes.
      */
-    getValidationViolations() {
+    getValidationReport() {
         return this.http.get(`${this.apiEndpoint}/validations`);
     }
     /**
@@ -126,6 +251,24 @@ class EpistolaAdminService {
             responseType: 'blob',
         });
     }
+    // ---- TEMPORARY (removed in 1.0.0): task-id carrier detection + repair ----
+    /** Forms whose Epistola components are missing the task-id carrier. */
+    getFormCarrierIssues() {
+        return this.http.get(`${this.apiEndpoint}/forms/carrier-issues`);
+    }
+    /** Inject the task-id carrier into a single form's Epistola components. */
+    repairFormCarrier(formId) {
+        return this.http.post(`${this.apiEndpoint}/forms/${encodeURIComponent(formId)}/repair-carrier`, null);
+    }
+    /** Repair every flagged form. */
+    repairAllFormCarriers() {
+        return this.http.post(`${this.apiEndpoint}/forms/repair-carrier`, null);
+    }
+    // ---- TEMPORARY: legacy override-mapping format detection ----
+    /** Forms whose preview components still use the legacy override-mapping object format. */
+    getLegacyOverrideForms() {
+        return this.http.get(`${this.apiEndpoint}/forms/legacy-override`);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminService, deps: [{ token: i1.HttpClient }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminService });
 }
@@ -133,6 +276,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.ConfigService }] });
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 /**
  * Registers the Epistola admin page menu item under the Admin > Other section.
  * Instantiated eagerly via ENVIRONMENT_INITIALIZER so the menu item
@@ -169,6 +329,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: i3.MenuService }] });
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 /**
  * Service for interacting with Epistola plugin API endpoints.
  * Provides methods to fetch templates, environments, variants,
@@ -236,6 +413,16 @@ class EpistolaPluginService {
             params: { processDefinitionKey },
         });
     }
+    /**
+     * Get the raw `dataMapping` JSONata of a generate-document process link, identified by its
+     * process definition key and activity id. The override builder extracts the referenced
+     * `$doc`/`$pv` paths from it to guide the author. Returns an empty mapping when unresolved.
+     */
+    getProcessLinkMapping(processDefinitionKey, activityId) {
+        return this.http.get(`${this.apiEndpoint}/process-link-mapping`, {
+            params: { processDefinitionKey, activityId },
+        });
+    }
     /**
      * Get variable suggestions for JSONata autocompletion.
      */
@@ -262,13 +449,13 @@ class EpistolaPluginService {
     /**
      * Get a dynamically generated Formio form for retrying a failed document generation.
      *
+     * The backend derives the process instance and case document from the authorized task,
+     * so only the task id (and optionally the source activity) is sent.
+     *
      * @param taskId Operaton user task id (required — backend authorizes via OperatonTask:VIEW)
      */
-    getRetryForm(taskId, processInstanceId, documentId, sourceActivityId) {
-        const params = { taskId, processInstanceId };
-        if (documentId) {
-            params['documentId'] = documentId;
-        }
+    getRetryForm(taskId, sourceActivityId) {
+        const params = { taskId };
         if (sourceActivityId) {
             params['sourceActivityId'] = sourceActivityId;
         }
@@ -327,107 +514,158 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.ConfigService }] });
 
-/**
- * Holds the currently-open Operaton user task instance id so that custom
- * Formio components rendered inside a Valtimo task form (preview, download,
- * retry-form) can include it in backend requests for PBAC.
- *
- * Populated by {@link EpistolaTaskContextInterceptor}, which sniffs Valtimo's
- * canonical "load process link for task" GET (`/api/v2/process-link/task/{taskId}`)
- * — the request always fires when a task opens, before the form renders.
- *
- * <p><b>Why this exists:</b> Valtimo 13.21 does not expose the active task
- * instance id through any service that custom Formio components can inject
- * (`FormIoStateService` carries documentId and processInstanceId only;
- * `TaskDetailContentComponent.taskInstanceId$` is private to that component
- * and Formio elements live in their own injector tree). This service is a
- * workaround until upstream exposes `taskInstanceId` via `FormIoStateService`.
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
  */
-class EpistolaTaskContextService {
-    _taskInstanceId$ = new BehaviorSubject(null);
-    taskInstanceId$ = this._taskInstanceId$.asObservable();
-    get taskInstanceId() {
-        return this._taskInstanceId$.value;
-    }
-    setTaskInstanceId(id) {
-        this._taskInstanceId$.next(id);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaTaskContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaTaskContextService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaTaskContextService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
 /**
- * Pure helpers for {@link EpistolaTaskContextInterceptor}, extracted so they
- * can be unit-tested without pulling in {@code @angular/core} (which ts-jest
- * cannot transform without {@code jest-preset-angular}).
+ * Helpers for reading the active user task's id out of a Valtimo task form that was
+ * prefilled server-side by the {@code epistola:} value resolver (see the backend
+ * {@code EpistolaTaskValueResolverFactory}).
+ *
+ * <p>Background: the Epistola Formio components need the id of the user task whose form
+ * they're rendered in, to authorize their backend requests ({@code OperatonTask:VIEW}).
+ * Valtimo exposes no service that carries the task id to a custom Formio component at
+ * runtime, and earlier URL-sniffing only worked in the direct task-open flow (the
+ * task-list / case-detail flow bulk-fetches process links and never fires the per-task
+ * call).
+ *
+ * <p>Form prefill, however, runs server-side in every flow. A form field with
+ * {@code properties.sourceKey = "epistola:taskId"} is filled with the task id at prefill
+ * time (by the backend {@code EpistolaTaskValueResolverFactory}); this helper reads it back
+ * from the Formio root — robustly, regardless of how the task was opened.
  */
+/** The value-resolver source key that yields the current task id at prefill time. */
+const PREFILLED_TASK_ID_SOURCE_KEY = 'epistola:taskId';
+/** Conventional key of the hidden carrier field that holds the prefilled task id. */
+const PREFILLED_TASK_ID_DATA_KEY = 'epistolaTaskId';
 /**
- * Pattern Valtimo uses for the canonical task-open call:
- * {@code GET /api/v2/process-link/task/{taskInstanceId}}.
+ * Hidden Formio child component that carries the prefilled task id. It is embedded as a
+ * nested component inside each Epistola task component's schema, so dropping that component
+ * brings the carrier with it — the form author never adds a separate field. Valtimo's
+ * server-side prefill fills its {@code defaultValue} from the {@code epistola:taskId}
+ * value resolver; {@link readPrefilledTaskId} reads it back from the form definition.
  *
- * Captures the {@code taskInstanceId} (UUID v4-style 36-character hyphenated
- * hex string). Anchored at the end of the URL or at a query-string delimiter
- * so we don't accidentally match a longer trailing segment.
+ * {@code persistent: false} keeps the value out of the submission, so the task id never
+ * lands in the case document / process variables.
  */
-const TASK_PROCESS_LINK_PATTERN = /\/api\/v2\/process-link\/task\/([0-9a-fA-F-]{36})(?:\?|$)/;
+const PREFILLED_TASK_ID_CARRIER = {
+    type: 'hidden',
+    key: PREFILLED_TASK_ID_DATA_KEY,
+    input: true,
+    persistent: false,
+    label: 'Epistola Task Id',
+    properties: { sourceKey: PREFILLED_TASK_ID_SOURCE_KEY },
+};
 /**
- * Returns the captured {@code taskInstanceId} from a Valtimo task-open
- * request URL, or {@code null} if the request does not match.
+ * Reads the prefilled task id from a Formio webform/wizard root, or null when absent.
+ *
+ * Looks in two places, in order:
+ *  1. The (prefilled) form definition — any component whose {@code properties.sourceKey}
+ *     is {@code epistola:taskId} carries the task id in its {@code defaultValue}. This works
+ *     even when the carrier is a hidden field that Formio doesn't surface into submission data.
+ *  2. The submission data under {@link PREFILLED_TASK_ID_DATA_KEY}, for a rendered sibling
+ *     hidden field whose value Formio copied into {@code root.data}.
  */
-function extractTaskInstanceIdFromUrl(method, url) {
-    if (method !== 'GET')
+function readPrefilledTaskId(root) {
+    if (!root) {
         return null;
-    const match = TASK_PROCESS_LINK_PATTERN.exec(url);
-    return match ? match[1] : null;
+    }
+    const fromForm = findSourceKeyDefaultValue(root.form, PREFILLED_TASK_ID_SOURCE_KEY);
+    if (typeof fromForm === 'string' && fromForm.length > 0) {
+        return fromForm;
+    }
+    const fromData = root.data?.[PREFILLED_TASK_ID_DATA_KEY];
+    if (typeof fromData === 'string' && fromData.length > 0) {
+        return fromData;
+    }
+    return null;
 }
-
 /**
- * Sniffs Valtimo's task-open signal and pushes the active taskInstanceId into
- * {@link EpistolaTaskContextService}. The signal is the canonical
- * {@code GET /api/v2/process-link/task/{taskId}} call that
- * {@code TaskDetailContentComponent.loadTaskDetails(...)} fires unconditionally
- * before any task form is rendered (see @valtimo/task internals).
- *
- * <p>This interceptor does <b>not</b> modify the outgoing request. It only
- * captures the taskId from the URL.
- *
- * <p>Workaround for Valtimo 13.21 not exposing taskInstanceId through any
- * injectable service. Remove once upstream adds e.g.
- * {@code FormIoStateService.setTaskInstanceId(...)}.
- *
- * <p>The actual URL-matching logic lives in
- * {@link extractTaskInstanceIdFromUrl} so it can be unit-tested without an
- * Angular harness.
+ * Deep-walks a form definition node looking for a component whose
+ * {@code properties.sourceKey} equals {@code sourceKey}, and returns its
+ * {@code defaultValue} (the prefilled value). Returns null when not found.
  */
-class EpistolaTaskContextInterceptor {
-    taskContext;
-    constructor(taskContext) {
-        this.taskContext = taskContext;
-    }
-    intercept(request, next) {
-        const taskId = extractTaskInstanceIdFromUrl(request.method, request.url);
-        if (taskId !== null && taskId !== this.taskContext.taskInstanceId) {
-            this.taskContext.setTaskInstanceId(taskId);
+function findSourceKeyDefaultValue(node, sourceKey) {
+    if (Array.isArray(node)) {
+        for (const item of node) {
+            const found = findSourceKeyDefaultValue(item, sourceKey);
+            if (found != null) {
+                return found;
+            }
+        }
+        return null;
+    }
+    if (node && typeof node === 'object') {
+        if (node.properties?.sourceKey === sourceKey && typeof node.defaultValue === 'string') {
+            return node.defaultValue;
+        }
+        for (const key of Object.keys(node)) {
+            const found = findSourceKeyDefaultValue(node[key], sourceKey);
+            if (found != null) {
+                return found;
+            }
         }
-        return next.handle(request);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaTaskContextInterceptor, deps: [{ token: EpistolaTaskContextService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaTaskContextInterceptor });
+    return null;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaTaskContextInterceptor, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: EpistolaTaskContextService }] });
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 class EpistolaConfigurationComponent {
     save$;
     disabled$;
     pluginId;
     prefillConfiguration$;
     valid = new EventEmitter();
+    // Framework's PluginConfigurationData (index type) to satisfy the invariant
+    // EventEmitter contract under strict mode; emitted values remain the typed config.
     configuration = new EventEmitter();
     /** Epistola slug pattern: lowercase alphanumeric with hyphens, no leading/trailing hyphens. */
     static SLUG_PATTERN = /^[a-z][a-z0-9]*(-[a-z0-9]+)*$/;
@@ -476,7 +714,7 @@ class EpistolaConfigurationComponent {
             combineLatest([this.formValue$, this.valid$])
                 .pipe(take(1))
                 .subscribe(([formValue, valid]) => {
-                if (valid) {
+                if (valid && formValue) {
                     this.configuration.emit(formValue);
                 }
             });
@@ -502,12 +740,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Output
             }] } });
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 /**
  * Shared state for the JSONata completion provider.
  * Updated by the editor component when suggestions/functions change.
  */
 const jsonataCompletionData = {
-    suggestions: null,
+    // Context variables in scope, keyed by name (without the `$`), each mapping to
+    // its known field/path suggestions. The completion provider derives both the
+    // `$`-variable list and the `$<name>.` field list from this — adding a new
+    // context variable needs no provider change, just another key here.
+    // e.g. { doc: ['name', 'address.street'], pv: ['amount'], form: ['voornaam'] }
+    variables: {},
     functions: [],
 };
 /**
@@ -590,7 +850,8 @@ function registerJsonataLanguage(monaco) {
             const CompletionItemKind = monaco.languages.CompletionItemKind;
             // After "$" — suggest variables and functions
             if (textUntilPosition.endsWith('$')) {
-                suggestions.push(...['doc', 'pv', 'case'].map((v) => ({
+                // Variables are whatever the host put in scope (doc/pv/case/form/…).
+                suggestions.push(...Object.keys(jsonataCompletionData.variables).map((v) => ({
                     label: `$${v}`,
                     kind: CompletionItemKind.Variable,
                     insertText: v,
@@ -645,27 +906,20 @@ function registerJsonataLanguage(monaco) {
                     });
                 }
             }
-            // After "$doc." — suggest document paths
-            if (/\$doc\.\s*$/.test(textUntilPosition) || /\$doc\.[a-zA-Z_]*$/.test(textUntilPosition)) {
-                const docPaths = jsonataCompletionData.suggestions?.doc || [];
-                for (const path of docPaths) {
+            // After "$<name>." — suggest that variable's fields. The variable name is
+            // captured generically, so doc/pv/case/form/… all work from one branch.
+            const fieldMatch = textUntilPosition.match(/\$([a-zA-Z_]\w*)\.[a-zA-Z_]*$/);
+            if (fieldMatch) {
+                const fields = jsonataCompletionData.variables[fieldMatch[1]] || [];
+                for (const field of fields) {
                     suggestions.push({
-                        label: path,
+                        label: field,
                         kind: CompletionItemKind.Field,
-                        insertText: path,
-                        detail: 'Document field',
-                    });
-                }
-            }
-            // After "$pv." — suggest process variables
-            if (/\$pv\.\s*$/.test(textUntilPosition) || /\$pv\.[a-zA-Z_]*$/.test(textUntilPosition)) {
-                const pvNames = jsonataCompletionData.suggestions?.pv || [];
-                for (const name of pvNames) {
-                    suggestions.push({
-                        label: name,
-                        kind: CompletionItemKind.Variable,
-                        insertText: name,
-                        detail: 'Process variable',
+                        // Path-style suggestions (doc/pv: `a.b`, `a[].b`) insert as-is; keys
+                        // with characters invalid in a bare JSONata name (e.g. "pv:motivation")
+                        // are backtick-quoted so they resolve as a single property.
+                        insertText: /[^A-Za-z0-9_.[\]]/.test(field) ? '`' + field + '`' : field,
+                        detail: `$${fieldMatch[1]} field`,
                     });
                 }
             }
@@ -674,12 +928,37 @@ function registerJsonataLanguage(monaco) {
     });
 }
 
-const jsonata$1 = _jsonata.default || _jsonata;
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+const jsonata$4 = _jsonata.default || _jsonata;
 class JsonataEditorComponent {
     expression = '';
     disabled = false;
-    suggestions = null;
+    /**
+     * Context variables in scope, keyed by name (without `$`), each mapping to its
+     * field/path suggestions — e.g. `{ doc: [...], pv: [...] }` for the data
+     * mapping, `{ form: [...] }` for the override builder. Drives both the
+     * `$`-variable list and `$<name>.` field completion.
+     */
+    contextVariables = {};
     functions = [];
+    /** Footer hint listing the context variables in scope. */
+    variablesHint = '$doc · $pv · $case';
     expressionChange = new EventEmitter();
     validChange = new EventEmitter();
     editorModel = { value: '', language: 'jsonata' };
@@ -709,8 +988,8 @@ class JsonataEditorComponent {
             this.editorModel = { value: this.expression || '', language: 'jsonata' };
             this.validate$.next(this.expression);
         }
-        if (changes['suggestions']) {
-            jsonataCompletionData.suggestions = this.suggestions;
+        if (changes['contextVariables']) {
+            jsonataCompletionData.variables = this.contextVariables || {};
         }
         if (changes['functions']) {
             jsonataCompletionData.functions = this.functions;
@@ -738,7 +1017,7 @@ class JsonataEditorComponent {
         if (m) {
             registerJsonataLanguage(m);
             this.languageRegistered = true;
-            jsonataCompletionData.suggestions = this.suggestions;
+            jsonataCompletionData.variables = this.contextVariables || {};
             jsonataCompletionData.functions = this.functions;
         }
     }
@@ -749,7 +1028,7 @@ class JsonataEditorComponent {
             return;
         }
         try {
-            jsonata$1(value);
+            jsonata$4(value);
             this.error = null;
             this.validChange.emit(true);
         }
@@ -759,7 +1038,7 @@ class JsonataEditorComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: JsonataEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: JsonataEditorComponent, isStandalone: true, selector: "epistola-jsonata-editor", inputs: { expression: "expression", disabled: "disabled", suggestions: "suggestions", functions: "functions" }, outputs: { expressionChange: "expressionChange", validChange: "validChange" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: JsonataEditorComponent, isStandalone: true, selector: "epistola-jsonata-editor", inputs: { expression: "expression", disabled: "disabled", contextVariables: "contextVariables", functions: "functions", variablesHint: "variablesHint" }, outputs: { expressionChange: "expressionChange", validChange: "validChange" }, usesOnChanges: true, ngImport: i0, template: `
     <div class="jsonata-editor">
       <valtimo-editor
         [model]="editorModel"
@@ -772,7 +1051,7 @@ class JsonataEditorComponent {
       <div class="jsonata-editor__footer">
         <span *ngIf="error" class="jsonata-editor__error">{{ error }}</span>
         <span *ngIf="!error && expression" class="jsonata-editor__valid">&#x2713;</span>
-        <span class="jsonata-editor__variables">$doc · $pv · $case</span>
+        <span class="jsonata-editor__variables">{{ variablesHint }}</span>
       </div>
     </div>
   `, isInline: true, styles: [".jsonata-editor__footer{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:.8em}.jsonata-editor__error{color:#da1e28}.jsonata-editor__valid{color:#198038}.jsonata-editor__variables{margin-left:auto;color:#8d8d8d;font-family:monospace}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i3.EditorComponent, selector: "valtimo-editor", inputs: ["editorOptions", "model", "disabled", "formatOnLoad", "widthPx", "heightPx", "heightStyle", "jsonSchema", "fitPage", "fitPageSpaceAdjustment"], outputs: ["validEvent", "valueChangeEvent"] }] });
@@ -792,7 +1071,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
       <div class="jsonata-editor__footer">
         <span *ngIf="error" class="jsonata-editor__error">{{ error }}</span>
         <span *ngIf="!error && expression" class="jsonata-editor__valid">&#x2713;</span>
-        <span class="jsonata-editor__variables">$doc · $pv · $case</span>
+        <span class="jsonata-editor__variables">{{ variablesHint }}</span>
       </div>
     </div>
   `, styles: [".jsonata-editor__footer{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:.8em}.jsonata-editor__error{color:#da1e28}.jsonata-editor__valid{color:#198038}.jsonata-editor__variables{margin-left:auto;color:#8d8d8d;font-family:monospace}\n"] }]
@@ -800,16 +1079,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }], disabled: [{
                 type: Input
-            }], suggestions: [{
+            }], contextVariables: [{
                 type: Input
             }], functions: [{
                 type: Input
+            }], variablesHint: [{
+                type: Input
             }], expressionChange: [{
                 type: Output
             }], validChange: [{
                 type: Output
             }] } });
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 class ExpectedStructureComponent {
     templateFields = [];
     structureText = '{}';
@@ -874,6 +1172,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }] } });
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 class BuilderFieldComponent {
     field;
     path = [];
@@ -953,7 +1268,7 @@ class BuilderFieldComponent {
         ></epistola-builder-field>
       </div>
     </div>
-  `, isInline: true, styles: [".builder-field{margin-bottom:4px}.builder-field__name{margin-bottom:2px}.builder-field__name--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.builder-field__name--clickable:hover{color:#0f62fe}.builder-field__chevron{font-size:.7em;margin-right:4px}.builder-field__label{font-weight:500;font-size:.9em}.builder-field__required{color:#da1e28;margin-left:2px}.builder-field__type{color:#8d8d8d;font-size:.8em;margin-left:4px}.builder-field__value{display:flex;align-items:center;gap:4px}.builder-field__input{flex:1;padding:6px 8px;border:1px solid #e0e0e0;border-radius:4px;font-size:.85em;font-family:IBM Plex Mono,monospace}.builder-field__input:focus{outline:2px solid #0f62fe;border-color:#0f62fe}.builder-field__input--raw{background:#f4f4f4}.builder-field__mode-toggle{width:28px;height:28px;border:1px solid #e0e0e0;border-radius:4px;background:#fff;cursor:pointer;font-family:monospace;font-size:.8em;display:flex;align-items:center;justify-content:center}.builder-field__mode-toggle:hover{background:#f4f4f4}.builder-field__children{border-left:2px solid #e0e0e0;padding-left:12px;margin-top:4px}\n"], dependencies: [{ kind: "component", type: BuilderFieldComponent, selector: "epistola-builder-field", inputs: ["field", "path", "suggestions", "disabled", "collapsed", "required", "collapsedPaths"], outputs: ["valueChange", "modeToggle", "collapseToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+  `, isInline: true, styles: [".builder-field{margin-bottom:4px}.builder-field__name{margin-bottom:2px}.builder-field__name--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.builder-field__name--clickable:hover{color:#0f62fe}.builder-field__chevron{font-size:.7em;margin-right:4px}.builder-field__label{font-weight:500;font-size:.9em}.builder-field__required{color:#da1e28;margin-left:2px}.builder-field__type{color:#8d8d8d;font-size:.8em;margin-left:4px}.builder-field__value{display:flex;align-items:center;gap:4px}.builder-field__input{flex:1;padding:6px 8px;border:1px solid #e0e0e0;border-radius:4px;font-size:.85em;font-family:IBM Plex Mono,monospace}.builder-field__input:focus{outline:2px solid #0f62fe;border-color:#0f62fe}.builder-field__input--raw{background:#f4f4f4}.builder-field__mode-toggle{width:28px;height:28px;border:1px solid #e0e0e0;border-radius:4px;background:#fff;cursor:pointer;font-family:monospace;font-size:.8em;display:flex;align-items:center;justify-content:center}.builder-field__mode-toggle:hover{background:#f4f4f4}.builder-field__children{border-left:2px solid #e0e0e0;padding-left:12px;margin-top:4px}\n"], dependencies: [{ kind: "component", type: BuilderFieldComponent, selector: "epistola-builder-field", inputs: ["field", "path", "suggestions", "disabled", "collapsed", "required", "collapsedPaths"], outputs: ["valueChange", "modeToggle", "collapseToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BuilderFieldComponent, decorators: [{
             type: Component,
@@ -1044,7 +1359,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Output
             }] } });
 
-const jsonata = _jsonata.default || _jsonata;
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+const jsonata$3 = _jsonata.default || _jsonata;
 /**
  * Parse a JSONata expression into BuilderField array.
  * Only supports top-level object literals with simple path references or nested objects.
@@ -1055,7 +1387,7 @@ function parseJsonataToBuilder(expression) {
         return [];
     }
     try {
-        const ast = jsonata(expression).ast();
+        const ast = jsonata$3(expression).ast();
         if (ast.type === 'unary' && ast.value === '{') {
             return parseObjectEntries(ast.lhs, expression);
         }
@@ -1201,6 +1533,23 @@ function formatFieldEntry(field, indent = '  ') {
     return `${indent}"${field.name}": ${value}`;
 }
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 class MappingBuilderComponent {
     expression = '';
     templateFields = [];
@@ -1402,6 +1751,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Output
             }] } });
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 class MappingPreviewComponent {
     epistolaPluginService;
     expression = '';
@@ -1536,7 +1902,7 @@ class MappingPreviewComponent {
         <strong>{{ missingRequired.join(', ') }}</strong>
       </div>
     </div>
-  `, isInline: true, styles: [".preview{border:1px solid #e0e0e0;border-radius:4px;margin-top:16px;overflow:hidden}.preview__header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#f4f4f4;border-bottom:1px solid #e0e0e0}.preview__title{font-weight:600;font-size:.85em}.preview__controls{display:flex;gap:4px}.preview__doc-input{padding:4px 8px;border:1px solid #e0e0e0;border-radius:4px;font-size:.8em;width:220px;font-family:monospace}.preview__run-btn{padding:4px 10px;border:1px solid #0f62fe;border-radius:4px;background:#0f62fe;color:#fff;cursor:pointer;font-size:.8em}.preview__run-btn:disabled{opacity:.4;cursor:not-allowed}.preview__panels{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#e0e0e0}.preview__panel{background:#fff;padding:8px 12px;min-height:80px}.preview__panel-label{font-size:.75em;color:#6f6f6f;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.preview__code{font-family:IBM Plex Mono,monospace;font-size:.8em;line-height:1.4;margin:0;white-space:pre-wrap;word-break:break-word}.preview__loading{color:#8d8d8d}.preview__error{color:#da1e28;font-size:.85em}.preview__placeholder{color:#8d8d8d;font-size:.85em;font-style:italic}.preview__warnings{padding:8px 12px;background:#fff8e1;border-top:1px solid #e0e0e0;font-size:.85em;color:#663c00}.preview__warning-icon{margin-right:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }] });
+  `, isInline: true, styles: [".preview{border:1px solid #e0e0e0;border-radius:4px;margin-top:16px;overflow:hidden}.preview__header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#f4f4f4;border-bottom:1px solid #e0e0e0}.preview__title{font-weight:600;font-size:.85em}.preview__controls{display:flex;gap:4px}.preview__doc-input{padding:4px 8px;border:1px solid #e0e0e0;border-radius:4px;font-size:.8em;width:220px;font-family:monospace}.preview__run-btn{padding:4px 10px;border:1px solid #0f62fe;border-radius:4px;background:#0f62fe;color:#fff;cursor:pointer;font-size:.8em}.preview__run-btn:disabled{opacity:.4;cursor:not-allowed}.preview__panels{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#e0e0e0}.preview__panel{background:#fff;padding:8px 12px;min-height:80px}.preview__panel-label{font-size:.75em;color:#6f6f6f;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.preview__code{font-family:IBM Plex Mono,monospace;font-size:.8em;line-height:1.4;margin:0;white-space:pre-wrap;word-break:break-word}.preview__loading{color:#8d8d8d}.preview__error{color:#da1e28;font-size:.85em}.preview__placeholder{color:#8d8d8d;font-size:.85em;font-style:italic}.preview__warnings{padding:8px 12px;background:#fff8e1;border-top:1px solid #e0e0e0;font-size:.85em;color:#663c00}.preview__warning-icon{margin-right:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MappingPreviewComponent, decorators: [{
             type: Component,
@@ -1607,7 +1973,227 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }] } });
 
-const FORM_REF_PREFIX$1 = 'form:';
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+const jsonata$2 = _jsonata.default || _jsonata;
+const BARE_IDENTIFIER = /^[A-Za-z_][A-Za-z0-9_]*$/;
+/**
+ * Render a `$form` reference for a form-field key. Keys that aren't bare
+ * identifiers (e.g. `pv:motivation`) are backtick-quoted so JSONata treats the
+ * whole key as a single property name — matching the old flat `formData[key]`
+ * lookup rather than a nested path traversal.
+ */
+function formRef(key) {
+    return BARE_IDENTIFIER.test(key) ? `$form.${key}` : '$form.`' + key + '`';
+}
+function insert(tree, segments, leaf) {
+    let node = tree;
+    for (let i = 0; i < segments.length - 1; i++) {
+        const seg = segments[i];
+        if (typeof node[seg] !== 'object') {
+            node[seg] = {};
+        }
+        node = node[seg];
+    }
+    node[segments[segments.length - 1]] = leaf;
+}
+function emit(node, indent) {
+    if (typeof node === 'string') {
+        return node;
+    }
+    const inner = indent + '  ';
+    const entries = Object.entries(node).map(([key, value]) => `${inner}"${key}": ${emit(value, inner)}`);
+    return `{\n${entries.join(',\n')}\n${indent}}`;
+}
+/**
+ * Serialize simple-table rows into a JSONata expression that maps `$form` onto
+ * a `{ doc, pv }` overlay. Dot-notation input paths expand into nested object
+ * literals (so `beslissing.tekst` becomes `{ "beslissing": { "tekst": ... } }`),
+ * preserving the legacy override semantics.
+ */
+function serializeOverrideRows(rows) {
+    const scopes = {};
+    for (const row of rows) {
+        if (!row.inputPath || !row.formFieldKey)
+            continue;
+        if (row.scope !== 'doc' && row.scope !== 'pv')
+            continue;
+        if (typeof scopes[row.scope] !== 'object') {
+            scopes[row.scope] = {};
+        }
+        insert(scopes[row.scope], row.inputPath.split('.'), formRef(row.formFieldKey));
+    }
+    if (Object.keys(scopes).length === 0) {
+        return '';
+    }
+    return emit(scopes, '');
+}
+/**
+ * Parse a JSONata override expression back into simple-table rows, or `null`
+ * when the expression is richer than the simple table can represent (anything
+ * beyond `doc`/`pv` objects whose leaves are plain `$form.<key>` references).
+ * A `null` result is the builder's signal to fall back to advanced mode.
+ */
+function parseOverrideJsonata(expression) {
+    if (!expression || !expression.trim()) {
+        return [];
+    }
+    let ast;
+    try {
+        ast = jsonata$2(expression).ast();
+    }
+    catch {
+        return null;
+    }
+    if (!(ast?.type === 'unary' && ast.value === '{')) {
+        return null;
+    }
+    const rows = [];
+    for (const entry of ast.lhs || []) {
+        const scope = entry?.[0]?.value;
+        const valueNode = entry?.[1];
+        if (scope !== 'doc' && scope !== 'pv') {
+            return null;
+        }
+        if (!(valueNode?.type === 'unary' && valueNode.value === '{')) {
+            return null;
+        }
+        if (!collectLeaves(valueNode.lhs || [], [], scope, rows)) {
+            return null;
+        }
+    }
+    return rows;
+}
+function collectLeaves(entries, prefix, scope, rows) {
+    for (const [keyNode, valueNode] of entries) {
+        const segment = keyNode?.value;
+        if (typeof segment !== 'string') {
+            return false;
+        }
+        const path = [...prefix, segment];
+        if (valueNode?.type === 'unary' && valueNode.value === '{') {
+            if (!collectLeaves(valueNode.lhs || [], path, scope, rows)) {
+                return false;
+            }
+        }
+        else {
+            const formFieldKey = formKeyOf(valueNode);
+            if (formFieldKey === null) {
+                return false;
+            }
+            rows.push({ scope, inputPath: path.join('.'), formFieldKey });
+        }
+    }
+    return true;
+}
+/** Extract the form-field key from a `$form.<key>` path node, or null. */
+function formKeyOf(node) {
+    if (node?.type === 'path' &&
+        node.steps?.length === 2 &&
+        node.steps[0].type === 'variable' &&
+        node.steps[0].value === 'form' &&
+        typeof node.steps[1]?.value === 'string') {
+        return node.steps[1].value;
+    }
+    return null;
+}
+/** Whether the expression can be edited in the simple table (round-trippable). */
+function isRoundTrippable(expression) {
+    return parseOverrideJsonata(expression) !== null;
+}
+
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+/**
+ * Prefix that marked a form-field reference in the legacy override-mapping
+ * object format (e.g. `"form:motivationField"`).
+ */
+const FORM_REF_PREFIX = 'form:';
+/**
+ * Whether a stored override-mapping value is in the legacy **object** format
+ * (`{ scope: { inputPath: "form:fieldKey" } }`) rather than the new JSONata
+ * **string** format.
+ */
+function isLegacyOverrideMapping(value) {
+    return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+/**
+ * TEMPORARY migration shim.
+ *
+ * Converts a legacy override-mapping object into the equivalent JSONata string
+ * over `$form`. Funnelling every legacy value through this one function keeps
+ * the rest of the codebase JSONata-only.
+ *
+ * @deprecated Remove once all deployed forms have been re-saved in the JSONata
+ *   format. The admin page's "legacy override format" warning tracks which
+ *   forms still need migrating.
+ */
+function legacyOverrideToJsonata(mapping) {
+    const rows = [];
+    for (const [scope, fields] of Object.entries(mapping || {})) {
+        if (scope !== 'doc' && scope !== 'pv')
+            continue;
+        if (!fields || typeof fields !== 'object')
+            continue;
+        for (const [inputPath, ref] of Object.entries(fields)) {
+            const raw = String(ref);
+            const formFieldKey = raw.startsWith(FORM_REF_PREFIX)
+                ? raw.substring(FORM_REF_PREFIX.length)
+                : raw;
+            rows.push({ scope, inputPath, formFieldKey });
+        }
+    }
+    return serializeOverrideRows(rows);
+}
+
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+const jsonata$1 = _jsonata.default || _jsonata;
 /**
  * Detect if a string value is a JSONata expression (vs a plain literal).
  * Checks for characters that indicate JSONata operators: $, &, (, {, ?, [
@@ -1635,32 +2221,98 @@ function expandDotNotation(flat) {
     return result;
 }
 /**
- * Given an override mapping (scope -> { inputPath -> "form:<componentKey>" })
- * and form data, produce the inputOverrides object for the backend.
- * The "form:" prefix identifies form field references; the remainder is the Formio component key.
+ * A preview is "override-driven" when it has a non-empty override mapping: its
+ * input data comes from the form via the mapping, so it must wait for that data
+ * before it can render. Previews without a mapping load straight from the base
+ * doc/case data.
  */
-function computeInputOverrides(mapping, formData) {
-    const result = {};
-    for (const [scope, fields] of Object.entries(mapping)) {
-        if (scope !== 'doc' && scope !== 'pv')
-            continue;
-        const flatOverrides = {};
-        for (const [inputPath, ref] of Object.entries(fields)) {
-            const formFieldKey = String(ref).startsWith(FORM_REF_PREFIX$1)
-                ? String(ref).substring(FORM_REF_PREFIX$1.length)
-                : String(ref);
-            const value = formData[formFieldKey];
-            if (value !== undefined) {
-                flatOverrides[inputPath] = value;
-            }
-        }
-        if (Object.keys(flatOverrides).length > 0) {
-            result[scope] = expandDotNotation(flatOverrides);
+function isOverrideDriven(mapping) {
+    if (!mapping)
+        return false;
+    if (typeof mapping === 'string')
+        return mapping.trim().length > 0;
+    return Object.keys(mapping).length > 0;
+}
+/**
+ * Whether the computed input overrides carry any usable data yet.
+ */
+function hasUsableOverrides(overrides) {
+    return !!overrides && Object.keys(overrides).length > 0;
+}
+/**
+ * Decide whether a preview request should fire given the configured override
+ * mapping and the currently computed overrides.
+ *
+ * - Override-driven previews only load once the mapped form data is present;
+ *   before that they show a "complete the form" placeholder and fire nothing
+ *   (avoids a doomed request that Epistola rejects with a 400 for missing
+ *   required fields).
+ * - Previews without a mapping always load (base data is the whole input).
+ */
+function shouldLoadPreview(mapping, overrides) {
+    if (isOverrideDriven(mapping)) {
+        return hasUsableOverrides(overrides);
+    }
+    return true;
+}
+/**
+ * Given an override mapping and the live form data, produce the inputOverrides
+ * object (`{ doc, pv }`) the backend overlays onto the real document / process
+ * variables before the data mapping runs.
+ *
+ * The mapping is a JSONata expression over `$form`; legacy `form:`-ref objects
+ * are converted on the fly via {@link legacyOverrideToJsonata}. Evaluation is
+ * asynchronous because `jsonata().evaluate()` returns a Promise. Only `doc` and
+ * `pv` scopes (with at least one resolved field) are kept — matching what the
+ * backend consumes.
+ */
+async function computeInputOverrides(mapping, formData) {
+    if (!mapping) {
+        return {};
+    }
+    const expression = isLegacyOverrideMapping(mapping)
+        ? legacyOverrideToJsonata(mapping)
+        : String(mapping);
+    if (!expression.trim()) {
+        return {};
+    }
+    let evaluated;
+    try {
+        evaluated = await jsonata$1(expression).evaluate({}, { form: formData ?? {} });
+    }
+    catch {
+        return {};
+    }
+    if (!evaluated || typeof evaluated !== 'object' || Array.isArray(evaluated)) {
+        return {};
+    }
+    const result = {};
+    for (const scope of ['doc', 'pv']) {
+        const value = evaluated[scope];
+        if (value && typeof value === 'object' && Object.keys(value).length > 0) {
+            result[scope] = value;
         }
     }
     return result;
 }
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 class GenerateDocumentConfigurationComponent {
     epistolaPluginService;
     processLinkStateService;
@@ -1672,6 +2324,8 @@ class GenerateDocumentConfigurationComponent {
     selectedPluginConfigurationData$;
     context$;
     valid = new EventEmitter();
+    // Framework's FunctionConfigurationData (index type) to satisfy the invariant
+    // EventEmitter contract under strict mode; emitted values remain the typed config.
     configuration = new EventEmitter();
     catalogs$ = new BehaviorSubject(initialResource([]));
     templates$ = new BehaviorSubject(initialResource([]));
@@ -1718,6 +2372,8 @@ class GenerateDocumentConfigurationComponent {
     processVariables = [];
     expressionFunctions = [];
     variableSuggestions = null;
+    /** Context variables for the JSONata editor's autocomplete ($doc/$pv/$case). */
+    editorContextVariables = { doc: [], pv: [], case: [] };
     prefillDataMapping = {};
     validationErrors$ = new BehaviorSubject([]);
     destroy$ = new Subject();
@@ -2031,6 +2687,12 @@ class GenerateDocumentConfigurationComponent {
             .pipe(takeUntil$1(this.destroy$), catchError(() => of({ doc: [], pv: [] })))
             .subscribe((suggestions) => {
             this.variableSuggestions = suggestions;
+            // `$case` is a valid (currently-empty) binding — keep it offered.
+            this.editorContextVariables = {
+                doc: suggestions.doc || [],
+                pv: suggestions.pv || [],
+                case: [],
+            };
             this.cdr.markForCheck();
         });
     }
@@ -2123,8 +2785,8 @@ class GenerateDocumentConfigurationComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GenerateDocumentConfigurationComponent, deps: [{ token: EpistolaPluginService }, { token: i2$3.ProcessLinkStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: GenerateDocumentConfigurationComponent, isStandalone: true, selector: "epistola-generate-document-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$", selectedPluginConfigurationData$: "selectedPluginConfigurationData$", context$: "context$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"{\n    disabled: disabled$ | async,\n    prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n    catalogs: catalogs$ | async,\n    templates: templates$ | async,\n    variants: variants$ | async,\n    environments: environments$ | async,\n    templateFields: templateFields$ | async,\n    selectedCatalogId: selectedCatalogId$ | async,\n    selectedTemplateId: selectedTemplateId$ | async,\n    validationErrors: validationErrors$ | async,\n  } as obs\"\n>\n  <div\n    *ngIf=\"obs.validationErrors && obs.validationErrors.length > 0\"\n    class=\"jsonata-validation-errors\"\n  >\n    <strong>{{ 'jsonataValidationErrorsHeading' | pluginTranslate: pluginId | async }}</strong>\n    <ul>\n      <li *ngFor=\"let err of obs.validationErrors\">\n        <code>{{ err.field }}</code\n        >: {{ err.message }}\n      </li>\n    </ul>\n  </div>\n  <v-select\n    name=\"catalogId\"\n    [title]=\"'catalogId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'catalogIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.catalogs.data\"\n    [defaultSelectionId]=\"obs.prefill?.catalogId\"\n    [disabled]=\"obs.disabled || obs.catalogs.loading\"\n    [required]=\"true\"\n    [loading]=\"obs.catalogs.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.catalogs.error\" class=\"loading-error\">{{ obs.catalogs.error }}</div>\n\n  <v-select\n    name=\"templateId\"\n    [title]=\"'templateId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'templateIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.templates.data\"\n    [defaultSelectionId]=\"obs.prefill?.templateId\"\n    [clearSelectionSubject$]=\"clearTemplateId$\"\n    [disabled]=\"obs.disabled || obs.templates.loading || !obs.selectedCatalogId\"\n    [required]=\"true\"\n    [loading]=\"obs.templates.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.templates.error\" class=\"loading-error\">{{ obs.templates.error }}</div>\n\n  <!-- Variant selection mode toggle -->\n  <div class=\"variant-mode-toggle\" *ngIf=\"obs.selectedTemplateId\">\n    <label class=\"variant-mode-label\">{{\n      'variantSelectionMode' | pluginTranslate: pluginId | async\n    }}</label>\n    <div class=\"variant-mode-buttons\">\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'explicit'\"\n        (click)=\"onVariantSelectionModeChange('explicit')\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'selectByVariant' | pluginTranslate: pluginId | async }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'attributes'\"\n        (click)=\"onVariantSelectionModeChange('attributes')\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'selectByAttributes' | pluginTranslate: pluginId | async }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Explicit variant selection (dropdown or expression) -->\n  <!--\n    The v-select / v-input here is intentionally NOT named into the v-form: v-form's\n    @ContentChildren queries default to descendants:false and would skip anything nested\n    in this `field-with-fx` wrapper. The value is tracked via (selectedChange)/(valueChange)\n    on the component, see variantIdValue / filenameValue.\n  -->\n  <div *ngIf=\"variantSelectionMode === 'explicit'\" class=\"field-with-fx\">\n    <v-select\n      *ngIf=\"!variantIdExpressionMode\"\n      [title]=\"'variantId' | pluginTranslate: pluginId | async\"\n      [tooltip]=\"'variantIdTooltip' | pluginTranslate: pluginId | async\"\n      [margin]=\"true\"\n      [items]=\"obs.variants.data\"\n      [defaultSelectionId]=\"variantIdValue\"\n      [clearSelectionSubject$]=\"clearVariantId$\"\n      (selectedChange)=\"onVariantIdValueChange($event)\"\n      [disabled]=\"obs.disabled || obs.variants.loading || !obs.selectedTemplateId\"\n      [required]=\"false\"\n      [loading]=\"obs.variants.loading\"\n    >\n    </v-select>\n    <div *ngIf=\"variantIdExpressionMode\" class=\"fx-input-group\">\n      <label class=\"fx-input-label\">{{ 'variantId' | pluginTranslate: pluginId | async }}</label>\n      <input\n        type=\"text\"\n        class=\"fx-input\"\n        [ngModel]=\"variantIdExpression\"\n        (ngModelChange)=\"variantIdExpression = $event; onVariantIdExpressionChange()\"\n        [disabled]=\"obs.disabled\"\n        placeholder=\"$pv.letterType\"\n      />\n    </div>\n    <button\n      type=\"button\"\n      class=\"fx-toggle\"\n      (click)=\"toggleVariantIdExpressionMode()\"\n      [disabled]=\"obs.disabled\"\n      [title]=\"variantIdExpressionMode ? 'Switch to dropdown' : 'Switch to expression'\"\n    >\n      {{ variantIdExpressionMode ? '\u00B7' : 'fx' }}\n    </button>\n  </div>\n  <div *ngIf=\"obs.variants.error\" class=\"loading-error\">{{ obs.variants.error }}</div>\n\n  <!-- Attribute-based variant selection -->\n  <div\n    *ngIf=\"variantSelectionMode === 'attributes' && obs.selectedTemplateId\"\n    class=\"variant-attributes-section\"\n  >\n    <label class=\"variant-attributes-label\">{{\n      'variantAttributes' | pluginTranslate: pluginId | async\n    }}</label>\n    <div class=\"variant-attributes-list\">\n      <div\n        *ngFor=\"let entry of variantAttributeEntries; let i = index\"\n        class=\"variant-attribute-row\"\n      >\n        <select\n          *ngIf=\"!entry._customKey\"\n          class=\"variant-attribute-input\"\n          [ngModel]=\"entry.key\"\n          (ngModelChange)=\"onKeySelected(entry, $event)\"\n          [disabled]=\"obs.disabled\"\n        >\n          <option value=\"\" disabled>\n            {{ 'attributeKey' | pluginTranslate: pluginId | async }}\n          </option>\n          <option *ngFor=\"let key of availableAttributeKeys\" [value]=\"key\">{{ key }}</option>\n          <option value=\"__custom__\">\n            {{ 'attributeKeyCustom' | pluginTranslate: pluginId | async }}\n          </option>\n        </select>\n        <div *ngIf=\"entry._customKey\" class=\"custom-key-input\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [placeholder]=\"'attributeKey' | pluginTranslate: pluginId | async\"\n            [(ngModel)]=\"entry.key\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button\n            type=\"button\"\n            class=\"custom-key-cancel\"\n            (click)=\"cancelCustomKey(entry)\"\n            [disabled]=\"obs.disabled\"\n          >\n            &times;\n          </button>\n        </div>\n        <div class=\"attribute-value-with-fx\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [class.fx-input]=\"entry._expressionMode\"\n            [placeholder]=\"\n              entry._expressionMode\n                ? '$pv.language'\n                : ('attributeValue' | pluginTranslate: pluginId | async)\n            \"\n            [(ngModel)]=\"entry.value\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button\n            type=\"button\"\n            class=\"fx-toggle fx-toggle--inline\"\n            (click)=\"entry._expressionMode = !entry._expressionMode\"\n            [disabled]=\"obs.disabled\"\n            [title]=\"entry._expressionMode ? 'Switch to plain value' : 'Switch to expression'\"\n          >\n            {{ entry._expressionMode ? '\u00B7' : 'fx' }}\n          </button>\n        </div>\n        <label class=\"variant-attribute-required-toggle\">\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"entry.required\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <span class=\"required-label\">{{\n            (entry.required ? 'attributeRequired' : 'attributePreferred')\n              | pluginTranslate: pluginId\n              | async\n          }}</span>\n        </label>\n        <button\n          type=\"button\"\n          class=\"variant-attribute-remove-btn\"\n          (click)=\"removeAttributeEntry(i)\"\n          [disabled]=\"obs.disabled\"\n          title=\"{{ 'removeAttribute' | pluginTranslate: pluginId | async }}\"\n        >\n          &times;\n        </button>\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      class=\"variant-attribute-add-btn\"\n      (click)=\"addAttributeEntry()\"\n      [disabled]=\"obs.disabled\"\n    >\n      + {{ 'addAttribute' | pluginTranslate: pluginId | async }}\n    </button>\n  </div>\n\n  <v-select\n    name=\"environmentId\"\n    [title]=\"'environmentId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'environmentIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.environments.data\"\n    [defaultSelectionId]=\"obs.prefill?.environmentId\"\n    [disabled]=\"obs.disabled || obs.environments.loading\"\n    [required]=\"false\"\n    [loading]=\"obs.environments.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.environments.error\" class=\"loading-error\">{{ obs.environments.error }}</div>\n\n  <v-select\n    name=\"outputFormat\"\n    [title]=\"'outputFormat' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'outputFormatTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"outputFormatOptions\"\n    [defaultSelectionId]=\"obs.prefill?.outputFormat || 'PDF'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-select>\n\n  <div class=\"field-with-fx\">\n    <v-input\n      *ngIf=\"!filenameExpressionMode\"\n      [title]=\"'filename' | pluginTranslate: pluginId | async\"\n      [tooltip]=\"'filenameTooltip' | pluginTranslate: pluginId | async\"\n      [margin]=\"true\"\n      [defaultValue]=\"filenameValue\"\n      (valueChange)=\"onFilenameValueChange($event)\"\n      [disabled]=\"obs.disabled\"\n      [required]=\"true\"\n    >\n    </v-input>\n    <div *ngIf=\"filenameExpressionMode\" class=\"fx-input-group\">\n      <label class=\"fx-input-label\">{{ 'filename' | pluginTranslate: pluginId | async }}</label>\n      <input\n        type=\"text\"\n        class=\"fx-input\"\n        [ngModel]=\"filenameExpression\"\n        (ngModelChange)=\"filenameExpression = $event; onFilenameExpressionChange()\"\n        [disabled]=\"obs.disabled\"\n        placeholder='\"besluit-\" & $doc.name & \".pdf\"'\n      />\n    </div>\n    <button\n      type=\"button\"\n      class=\"fx-toggle\"\n      (click)=\"toggleFilenameExpressionMode()\"\n      [disabled]=\"obs.disabled\"\n      [title]=\"filenameExpressionMode ? 'Switch to plain input' : 'Switch to expression'\"\n    >\n      {{ filenameExpressionMode ? '\u00B7' : 'fx' }}\n    </button>\n  </div>\n\n  <v-input\n    name=\"correlationId\"\n    [title]=\"'correlationId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'correlationIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.correlationId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"resultProcessVariable\"\n    [title]=\"'resultProcessVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'resultProcessVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.resultProcessVariable\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n\n<div *ngIf=\"(templateFields$ | async)?.error as templateFieldsError\" class=\"loading-error\">\n  {{ templateFieldsError }}\n</div>\n\n<div *ngIf=\"selectedTemplateId$ | async\" class=\"mapping-section\">\n  <h5 class=\"mapping-section__title\">\n    {{ 'dataMappingTitle' | pluginTranslate: pluginId | async }}\n  </h5>\n  <p class=\"mapping-section__description\">\n    {{ 'dataMappingDescription' | pluginTranslate: pluginId | async }}\n  </p>\n  <div class=\"mapping-mode-toggle\">\n    <button\n      class=\"mapping-mode-toggle__btn\"\n      [class.mapping-mode-toggle__btn--active]=\"mappingMode === 'simple'\"\n      (click)=\"mappingMode = 'simple'\"\n    >\n      {{ 'mappingModeSimple' | pluginTranslate: pluginId | async }}\n    </button>\n    <button\n      class=\"mapping-mode-toggle__btn\"\n      [class.mapping-mode-toggle__btn--active]=\"mappingMode === 'advanced'\"\n      (click)=\"mappingMode = 'advanced'\"\n    >\n      {{ 'mappingModeAdvanced' | pluginTranslate: pluginId | async }}\n    </button>\n  </div>\n\n  <!-- Editor area (full width) -->\n  <epistola-mapping-builder\n    *ngIf=\"mappingMode === 'simple'\"\n    [expression]=\"dataMapping$ | async\"\n    [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n    [suggestions]=\"variableSuggestions\"\n    [disabled]=\"!!(disabled$ | async)\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-mapping-builder>\n\n  <epistola-jsonata-editor\n    *ngIf=\"mappingMode === 'advanced'\"\n    [expression]=\"dataMapping$ | async\"\n    [disabled]=\"!!(disabled$ | async)\"\n    [suggestions]=\"variableSuggestions\"\n    [functions]=\"expressionFunctions\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-jsonata-editor>\n\n  <!-- Bottom tabs: Schema + Preview (collapsible) -->\n  <div class=\"mapping-tools\" [class.mapping-tools--collapsed]=\"toolsCollapsed\">\n    <div class=\"mapping-tools__header\" (click)=\"toolsCollapsed = !toolsCollapsed\">\n      <span class=\"mapping-tools__chevron\">{{ toolsCollapsed ? '&#x25B6;' : '&#x25BC;' }}</span>\n      <span>{{ 'mappingTools' | pluginTranslate: pluginId | async }}</span>\n    </div>\n    <div *ngIf=\"!toolsCollapsed\" class=\"mapping-tools__content\">\n      <div class=\"mapping-tools__tabs\">\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'schema'\"\n          (click)=\"activeToolTab = 'schema'\"\n        >\n          {{ 'expectedStructure' | pluginTranslate: pluginId | async }}\n        </button>\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'preview'\"\n          (click)=\"activeToolTab = 'preview'\"\n        >\n          {{ 'previewTitle' | pluginTranslate: pluginId | async }}\n        </button>\n      </div>\n\n      <epistola-expected-structure\n        *ngIf=\"activeToolTab === 'schema'\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n      ></epistola-expected-structure>\n\n      <epistola-mapping-preview\n        *ngIf=\"activeToolTab === 'preview'\"\n        [expression]=\"dataMapping$ | async\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n        [caseDefinitionKey]=\"caseDefinitionKey\"\n      ></epistola-mapping-preview>\n    </div>\n  </div>\n</div>\n", styles: [".loading-error{padding:.25rem .75rem;font-size:.8125rem;color:#dc3545}.jsonata-validation-errors{margin-bottom:1rem;padding:.75rem 1rem;border:1px solid #dc3545;border-radius:4px;background:#fdf3f4;color:#dc3545;font-size:.875rem}.jsonata-validation-errors ul{margin:.5rem 0 0;padding-left:1.25rem}.jsonata-validation-errors code{background:#dc35451a;padding:0 .25rem;border-radius:2px;font-family:monospace}.validation-summary{margin-top:.5rem;padding:.5rem .75rem;border-radius:4px;font-size:.875rem}.validation-summary .validation-complete{color:#198754}.validation-summary .validation-incomplete{color:#dc3545;font-weight:500}.variant-mode-toggle{margin-bottom:1rem;padding:0 .75rem}.variant-mode-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-mode-buttons{display:flex;gap:0;border:1px solid #d1d5db;border-radius:4px;overflow:hidden;width:fit-content}.variant-mode-btn{padding:.375rem .75rem;font-size:.8125rem;background:#fff;border:none;border-right:1px solid #d1d5db;cursor:pointer;color:#374151;transition:background-color .15s,color .15s}.variant-mode-btn:last-child{border-right:none}.variant-mode-btn:hover:not([disabled]){background:#f3f4f6}.variant-mode-btn.active{background:#2563eb;color:#fff}.variant-mode-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attributes-section{margin-bottom:1rem;padding:0 .75rem}.variant-attributes-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-attributes-list{display:flex;flex-direction:column;gap:.375rem}.variant-attribute-row{display:flex;gap:.375rem;align-items:center}.variant-attribute-input{flex:1;padding:.375rem .5rem;font-size:.8125rem;border:1px solid #d1d5db;border-radius:4px;outline:none}.variant-attribute-input:focus{border-color:#2563eb;box-shadow:0 0 0 1px #2563eb}.variant-attribute-input[disabled]{opacity:.5;background:#f9fafb}.custom-key-input{display:flex;flex:1;gap:.25rem}.custom-key-input .variant-attribute-input{flex:1}.custom-key-cancel{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.custom-key-cancel:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.custom-key-cancel[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-required-toggle{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#374151;white-space:nowrap;cursor:pointer}.variant-attribute-required-toggle input[type=checkbox]{margin:0;cursor:pointer}.variant-attribute-required-toggle .required-label{-webkit-user-select:none;user-select:none}.variant-attribute-remove-btn{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-remove-btn:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.variant-attribute-remove-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-add-btn{margin-top:.375rem;padding:.25rem .5rem;font-size:.8125rem;background:none;border:1px dashed #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-add-btn:hover:not([disabled]){color:#2563eb;border-color:#2563eb}.variant-attribute-add-btn[disabled]{opacity:.5;cursor:not-allowed}.field-with-fx{display:flex;align-items:flex-start;gap:4px}.field-with-fx>*:first-child{flex:1;min-width:0}.fx-toggle{width:28px;height:28px;margin-top:22px;border:1px solid #e0e0e0;border-radius:4px;background:#fff;cursor:pointer;font-family:monospace;font-size:.8em;display:flex;align-items:center;justify-content:center;flex-shrink:0}.fx-toggle:hover{background:#f4f4f4}.fx-toggle--inline{margin-top:0}.fx-input-group{flex:1;min-width:0;margin-bottom:.75rem}.fx-input-label{display:block;font-size:.875rem;margin-bottom:.25rem;color:#525252}.fx-input{width:100%;border:1px solid #8d8d8d;border-radius:0;padding:.4rem .75rem;font-family:monospace;font-size:.875rem;background:#f4f4f4}.attribute-value-with-fx{display:flex;align-items:center;gap:4px;flex:1;min-width:0}.attribute-value-with-fx>input{flex:1;min-width:0}.mapping-section{margin-top:1rem}.mapping-section__title{font-size:1rem;font-weight:600;margin:0 0 4px}.mapping-section__description{font-size:.85em;color:#6f6f6f;margin:0 0 12px}.mapping-mode-toggle{display:flex;gap:0;margin-bottom:12px}.mapping-mode-toggle__btn{padding:6px 16px;border:1px solid #e0e0e0;background:#fff;font-size:.85em;cursor:pointer}.mapping-mode-toggle__btn:first-child{border-radius:4px 0 0 4px}.mapping-mode-toggle__btn:last-child{border-radius:0 4px 4px 0;border-left:none}.mapping-mode-toggle__btn--active{background:#0f62fe;color:#fff;border-color:#0f62fe}.mapping-tools{margin-top:12px;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden}.mapping-tools__header{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#f4f4f4;cursor:pointer;font-size:.85em;font-weight:500;-webkit-user-select:none;user-select:none}.mapping-tools__header:hover{background:#e8e8e8}.mapping-tools__chevron{font-size:.7em}.mapping-tools__content{border-top:1px solid #e0e0e0}.mapping-tools__tabs{display:flex;border-bottom:1px solid #e0e0e0}.mapping-tools__tab{padding:6px 16px;border:none;background:transparent;font-size:.8em;cursor:pointer;border-bottom:2px solid transparent}.mapping-tools__tab--active{border-bottom-color:#0f62fe;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "component", type: ExpectedStructureComponent, selector: "epistola-expected-structure", inputs: ["templateFields"] }, { kind: "component", type: JsonataEditorComponent, selector: "epistola-jsonata-editor", inputs: ["expression", "disabled", "suggestions", "functions"], outputs: ["expressionChange", "validChange"] }, { kind: "component", type: MappingBuilderComponent, selector: "epistola-mapping-builder", inputs: ["expression", "templateFields", "suggestions", "disabled"], outputs: ["expressionChange"] }, { kind: "component", type: MappingPreviewComponent, selector: "epistola-mapping-preview", inputs: ["expression", "templateFields", "caseDefinitionKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GenerateDocumentConfigurationComponent, deps: [{ token: EpistolaPluginService }, { token: i2$2.ProcessLinkStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: GenerateDocumentConfigurationComponent, isStandalone: true, selector: "epistola-generate-document-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$", selectedPluginConfigurationData$: "selectedPluginConfigurationData$", context$: "context$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"{\n    disabled: disabled$ | async,\n    prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n    catalogs: catalogs$ | async,\n    templates: templates$ | async,\n    variants: variants$ | async,\n    environments: environments$ | async,\n    templateFields: templateFields$ | async,\n    selectedCatalogId: selectedCatalogId$ | async,\n    selectedTemplateId: selectedTemplateId$ | async,\n    validationErrors: validationErrors$ | async,\n  } as obs\"\n>\n  <div\n    *ngIf=\"obs.validationErrors && obs.validationErrors.length > 0\"\n    class=\"jsonata-validation-errors\"\n  >\n    <strong>{{ 'jsonataValidationErrorsHeading' | pluginTranslate: pluginId | async }}</strong>\n    <ul>\n      <li *ngFor=\"let err of obs.validationErrors\">\n        <code>{{ err.field }}</code\n        >: {{ err.message }}\n      </li>\n    </ul>\n  </div>\n  <v-select\n    name=\"catalogId\"\n    [title]=\"'catalogId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'catalogIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.catalogs.data\"\n    [defaultSelectionId]=\"obs.prefill?.catalogId\"\n    [disabled]=\"obs.disabled || obs.catalogs.loading\"\n    [required]=\"true\"\n    [loading]=\"obs.catalogs.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.catalogs.error\" class=\"loading-error\">{{ obs.catalogs.error }}</div>\n\n  <v-select\n    name=\"templateId\"\n    [title]=\"'templateId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'templateIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.templates.data\"\n    [defaultSelectionId]=\"obs.prefill?.templateId\"\n    [clearSelectionSubject$]=\"clearTemplateId$\"\n    [disabled]=\"obs.disabled || obs.templates.loading || !obs.selectedCatalogId\"\n    [required]=\"true\"\n    [loading]=\"obs.templates.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.templates.error\" class=\"loading-error\">{{ obs.templates.error }}</div>\n\n  <!-- Variant selection mode toggle -->\n  <div class=\"variant-mode-toggle\" *ngIf=\"obs.selectedTemplateId\">\n    <label class=\"variant-mode-label\">{{\n      'variantSelectionMode' | pluginTranslate: pluginId | async\n    }}</label>\n    <div class=\"variant-mode-buttons\">\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'explicit'\"\n        (click)=\"onVariantSelectionModeChange('explicit')\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'selectByVariant' | pluginTranslate: pluginId | async }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'attributes'\"\n        (click)=\"onVariantSelectionModeChange('attributes')\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'selectByAttributes' | pluginTranslate: pluginId | async }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Explicit variant selection (dropdown or expression) -->\n  <!--\n    The v-select / v-input here is intentionally NOT named into the v-form: v-form's\n    @ContentChildren queries default to descendants:false and would skip anything nested\n    in this `field-with-fx` wrapper. The value is tracked via (selectedChange)/(valueChange)\n    on the component, see variantIdValue / filenameValue.\n  -->\n  <div *ngIf=\"variantSelectionMode === 'explicit'\" class=\"field-with-fx\">\n    <v-select\n      *ngIf=\"!variantIdExpressionMode\"\n      [title]=\"'variantId' | pluginTranslate: pluginId | async\"\n      [tooltip]=\"'variantIdTooltip' | pluginTranslate: pluginId | async\"\n      [margin]=\"true\"\n      [items]=\"obs.variants.data\"\n      [defaultSelectionId]=\"variantIdValue\"\n      [clearSelectionSubject$]=\"clearVariantId$\"\n      (selectedChange)=\"onVariantIdValueChange($event)\"\n      [disabled]=\"obs.disabled || obs.variants.loading || !obs.selectedTemplateId\"\n      [required]=\"false\"\n      [loading]=\"obs.variants.loading\"\n    >\n    </v-select>\n    <div *ngIf=\"variantIdExpressionMode\" class=\"fx-input-group\">\n      <label class=\"fx-input-label\">{{ 'variantId' | pluginTranslate: pluginId | async }}</label>\n      <input\n        type=\"text\"\n        class=\"fx-input\"\n        [ngModel]=\"variantIdExpression\"\n        (ngModelChange)=\"variantIdExpression = $event; onVariantIdExpressionChange()\"\n        [disabled]=\"obs.disabled\"\n        placeholder=\"$pv.letterType\"\n      />\n    </div>\n    <button\n      type=\"button\"\n      class=\"fx-toggle\"\n      (click)=\"toggleVariantIdExpressionMode()\"\n      [disabled]=\"obs.disabled\"\n      [title]=\"variantIdExpressionMode ? 'Switch to dropdown' : 'Switch to expression'\"\n    >\n      {{ variantIdExpressionMode ? '\u00B7' : 'fx' }}\n    </button>\n  </div>\n  <div *ngIf=\"obs.variants.error\" class=\"loading-error\">{{ obs.variants.error }}</div>\n\n  <!-- Attribute-based variant selection -->\n  <div\n    *ngIf=\"variantSelectionMode === 'attributes' && obs.selectedTemplateId\"\n    class=\"variant-attributes-section\"\n  >\n    <label class=\"variant-attributes-label\">{{\n      'variantAttributes' | pluginTranslate: pluginId | async\n    }}</label>\n    <div class=\"variant-attributes-list\">\n      <div\n        *ngFor=\"let entry of variantAttributeEntries; let i = index\"\n        class=\"variant-attribute-row\"\n      >\n        <select\n          *ngIf=\"!entry._customKey\"\n          class=\"variant-attribute-input\"\n          [ngModel]=\"entry.key\"\n          (ngModelChange)=\"onKeySelected(entry, $event)\"\n          [disabled]=\"obs.disabled\"\n        >\n          <option value=\"\" disabled>\n            {{ 'attributeKey' | pluginTranslate: pluginId | async }}\n          </option>\n          <option *ngFor=\"let key of availableAttributeKeys\" [value]=\"key\">{{ key }}</option>\n          <option value=\"__custom__\">\n            {{ 'attributeKeyCustom' | pluginTranslate: pluginId | async }}\n          </option>\n        </select>\n        <div *ngIf=\"entry._customKey\" class=\"custom-key-input\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [placeholder]=\"'attributeKey' | pluginTranslate: pluginId | async\"\n            [(ngModel)]=\"entry.key\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button\n            type=\"button\"\n            class=\"custom-key-cancel\"\n            (click)=\"cancelCustomKey(entry)\"\n            [disabled]=\"obs.disabled\"\n          >\n            &times;\n          </button>\n        </div>\n        <div class=\"attribute-value-with-fx\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [class.fx-input]=\"entry._expressionMode\"\n            [placeholder]=\"\n              entry._expressionMode\n                ? '$pv.language'\n                : ('attributeValue' | pluginTranslate: pluginId | async)\n            \"\n            [(ngModel)]=\"entry.value\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button\n            type=\"button\"\n            class=\"fx-toggle fx-toggle--inline\"\n            (click)=\"entry._expressionMode = !entry._expressionMode\"\n            [disabled]=\"obs.disabled\"\n            [title]=\"entry._expressionMode ? 'Switch to plain value' : 'Switch to expression'\"\n          >\n            {{ entry._expressionMode ? '\u00B7' : 'fx' }}\n          </button>\n        </div>\n        <label class=\"variant-attribute-required-toggle\">\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"entry.required\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <span class=\"required-label\">{{\n            (entry.required ? 'attributeRequired' : 'attributePreferred')\n              | pluginTranslate: pluginId\n              | async\n          }}</span>\n        </label>\n        <button\n          type=\"button\"\n          class=\"variant-attribute-remove-btn\"\n          (click)=\"removeAttributeEntry(i)\"\n          [disabled]=\"obs.disabled\"\n          title=\"{{ 'removeAttribute' | pluginTranslate: pluginId | async }}\"\n        >\n          &times;\n        </button>\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      class=\"variant-attribute-add-btn\"\n      (click)=\"addAttributeEntry()\"\n      [disabled]=\"obs.disabled\"\n    >\n      + {{ 'addAttribute' | pluginTranslate: pluginId | async }}\n    </button>\n  </div>\n\n  <v-select\n    name=\"environmentId\"\n    [title]=\"'environmentId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'environmentIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.environments.data\"\n    [defaultSelectionId]=\"obs.prefill?.environmentId\"\n    [disabled]=\"obs.disabled || obs.environments.loading\"\n    [required]=\"false\"\n    [loading]=\"obs.environments.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.environments.error\" class=\"loading-error\">{{ obs.environments.error }}</div>\n\n  <v-select\n    name=\"outputFormat\"\n    [title]=\"'outputFormat' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'outputFormatTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"outputFormatOptions\"\n    [defaultSelectionId]=\"obs.prefill?.outputFormat || 'PDF'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-select>\n\n  <div class=\"field-with-fx\">\n    <v-input\n      *ngIf=\"!filenameExpressionMode\"\n      [title]=\"'filename' | pluginTranslate: pluginId | async\"\n      [tooltip]=\"'filenameTooltip' | pluginTranslate: pluginId | async\"\n      [margin]=\"true\"\n      [defaultValue]=\"filenameValue\"\n      (valueChange)=\"onFilenameValueChange($event)\"\n      [disabled]=\"obs.disabled\"\n      [required]=\"true\"\n    >\n    </v-input>\n    <div *ngIf=\"filenameExpressionMode\" class=\"fx-input-group\">\n      <label class=\"fx-input-label\">{{ 'filename' | pluginTranslate: pluginId | async }}</label>\n      <input\n        type=\"text\"\n        class=\"fx-input\"\n        [ngModel]=\"filenameExpression\"\n        (ngModelChange)=\"filenameExpression = $event; onFilenameExpressionChange()\"\n        [disabled]=\"obs.disabled\"\n        placeholder='\"besluit-\" & $doc.name & \".pdf\"'\n      />\n    </div>\n    <button\n      type=\"button\"\n      class=\"fx-toggle\"\n      (click)=\"toggleFilenameExpressionMode()\"\n      [disabled]=\"obs.disabled\"\n      [title]=\"filenameExpressionMode ? 'Switch to plain input' : 'Switch to expression'\"\n    >\n      {{ filenameExpressionMode ? '\u00B7' : 'fx' }}\n    </button>\n  </div>\n\n  <v-input\n    name=\"correlationId\"\n    [title]=\"'correlationId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'correlationIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.correlationId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"resultProcessVariable\"\n    [title]=\"'resultProcessVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'resultProcessVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.resultProcessVariable\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n\n<div *ngIf=\"(templateFields$ | async)?.error as templateFieldsError\" class=\"loading-error\">\n  {{ templateFieldsError }}\n</div>\n\n<div *ngIf=\"selectedTemplateId$ | async\" class=\"mapping-section\">\n  <h5 class=\"mapping-section__title\">\n    {{ 'dataMappingTitle' | pluginTranslate: pluginId | async }}\n  </h5>\n  <p class=\"mapping-section__description\">\n    {{ 'dataMappingDescription' | pluginTranslate: pluginId | async }}\n  </p>\n  <div class=\"mapping-mode-toggle\">\n    <button\n      class=\"mapping-mode-toggle__btn\"\n      [class.mapping-mode-toggle__btn--active]=\"mappingMode === 'simple'\"\n      (click)=\"mappingMode = 'simple'\"\n    >\n      {{ 'mappingModeSimple' | pluginTranslate: pluginId | async }}\n    </button>\n    <button\n      class=\"mapping-mode-toggle__btn\"\n      [class.mapping-mode-toggle__btn--active]=\"mappingMode === 'advanced'\"\n      (click)=\"mappingMode = 'advanced'\"\n    >\n      {{ 'mappingModeAdvanced' | pluginTranslate: pluginId | async }}\n    </button>\n  </div>\n\n  <!-- Editor area (full width) -->\n  <epistola-mapping-builder\n    *ngIf=\"mappingMode === 'simple'\"\n    [expression]=\"dataMapping$ | async\"\n    [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n    [suggestions]=\"variableSuggestions\"\n    [disabled]=\"!!(disabled$ | async)\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-mapping-builder>\n\n  <epistola-jsonata-editor\n    *ngIf=\"mappingMode === 'advanced'\"\n    [expression]=\"dataMapping$ | async\"\n    [disabled]=\"!!(disabled$ | async)\"\n    [contextVariables]=\"editorContextVariables\"\n    [functions]=\"expressionFunctions\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-jsonata-editor>\n\n  <!-- Bottom tabs: Schema + Preview (collapsible) -->\n  <div class=\"mapping-tools\" [class.mapping-tools--collapsed]=\"toolsCollapsed\">\n    <div class=\"mapping-tools__header\" (click)=\"toolsCollapsed = !toolsCollapsed\">\n      <span class=\"mapping-tools__chevron\">{{ toolsCollapsed ? '&#x25B6;' : '&#x25BC;' }}</span>\n      <span>{{ 'mappingTools' | pluginTranslate: pluginId | async }}</span>\n    </div>\n    <div *ngIf=\"!toolsCollapsed\" class=\"mapping-tools__content\">\n      <div class=\"mapping-tools__tabs\">\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'schema'\"\n          (click)=\"activeToolTab = 'schema'\"\n        >\n          {{ 'expectedStructure' | pluginTranslate: pluginId | async }}\n        </button>\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'preview'\"\n          (click)=\"activeToolTab = 'preview'\"\n        >\n          {{ 'previewTitle' | pluginTranslate: pluginId | async }}\n        </button>\n      </div>\n\n      <epistola-expected-structure\n        *ngIf=\"activeToolTab === 'schema'\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n      ></epistola-expected-structure>\n\n      <epistola-mapping-preview\n        *ngIf=\"activeToolTab === 'preview'\"\n        [expression]=\"dataMapping$ | async\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n        [caseDefinitionKey]=\"caseDefinitionKey\"\n      ></epistola-mapping-preview>\n    </div>\n  </div>\n</div>\n", styles: [".loading-error{padding:.25rem .75rem;font-size:.8125rem;color:#dc3545}.jsonata-validation-errors{margin-bottom:1rem;padding:.75rem 1rem;border:1px solid #dc3545;border-radius:4px;background:#fdf3f4;color:#dc3545;font-size:.875rem}.jsonata-validation-errors ul{margin:.5rem 0 0;padding-left:1.25rem}.jsonata-validation-errors code{background:#dc35451a;padding:0 .25rem;border-radius:2px;font-family:monospace}.validation-summary{margin-top:.5rem;padding:.5rem .75rem;border-radius:4px;font-size:.875rem}.validation-summary .validation-complete{color:#198754}.validation-summary .validation-incomplete{color:#dc3545;font-weight:500}.variant-mode-toggle{margin-bottom:1rem;padding:0 .75rem}.variant-mode-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-mode-buttons{display:flex;gap:0;border:1px solid #d1d5db;border-radius:4px;overflow:hidden;width:fit-content}.variant-mode-btn{padding:.375rem .75rem;font-size:.8125rem;background:#fff;border:none;border-right:1px solid #d1d5db;cursor:pointer;color:#374151;transition:background-color .15s,color .15s}.variant-mode-btn:last-child{border-right:none}.variant-mode-btn:hover:not([disabled]){background:#f3f4f6}.variant-mode-btn.active{background:#2563eb;color:#fff}.variant-mode-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attributes-section{margin-bottom:1rem;padding:0 .75rem}.variant-attributes-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-attributes-list{display:flex;flex-direction:column;gap:.375rem}.variant-attribute-row{display:flex;gap:.375rem;align-items:center}.variant-attribute-input{flex:1;padding:.375rem .5rem;font-size:.8125rem;border:1px solid #d1d5db;border-radius:4px;outline:none}.variant-attribute-input:focus{border-color:#2563eb;box-shadow:0 0 0 1px #2563eb}.variant-attribute-input[disabled]{opacity:.5;background:#f9fafb}.custom-key-input{display:flex;flex:1;gap:.25rem}.custom-key-input .variant-attribute-input{flex:1}.custom-key-cancel{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.custom-key-cancel:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.custom-key-cancel[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-required-toggle{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#374151;white-space:nowrap;cursor:pointer}.variant-attribute-required-toggle input[type=checkbox]{margin:0;cursor:pointer}.variant-attribute-required-toggle .required-label{-webkit-user-select:none;user-select:none}.variant-attribute-remove-btn{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-remove-btn:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.variant-attribute-remove-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-add-btn{margin-top:.375rem;padding:.25rem .5rem;font-size:.8125rem;background:none;border:1px dashed #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-add-btn:hover:not([disabled]){color:#2563eb;border-color:#2563eb}.variant-attribute-add-btn[disabled]{opacity:.5;cursor:not-allowed}.field-with-fx{display:flex;align-items:flex-start;gap:4px}.field-with-fx>*:first-child{flex:1;min-width:0}.fx-toggle{width:28px;height:28px;margin-top:22px;border:1px solid #e0e0e0;border-radius:4px;background:#fff;cursor:pointer;font-family:monospace;font-size:.8em;display:flex;align-items:center;justify-content:center;flex-shrink:0}.fx-toggle:hover{background:#f4f4f4}.fx-toggle--inline{margin-top:0}.fx-input-group{flex:1;min-width:0;margin-bottom:.75rem}.fx-input-label{display:block;font-size:.875rem;margin-bottom:.25rem;color:#525252}.fx-input{width:100%;border:1px solid #8d8d8d;border-radius:0;padding:.4rem .75rem;font-family:monospace;font-size:.875rem;background:#f4f4f4}.attribute-value-with-fx{display:flex;align-items:center;gap:4px;flex:1;min-width:0}.attribute-value-with-fx>input{flex:1;min-width:0}.mapping-section{margin-top:1rem}.mapping-section__title{font-size:1rem;font-weight:600;margin:0 0 4px}.mapping-section__description{font-size:.85em;color:#6f6f6f;margin:0 0 12px}.mapping-mode-toggle{display:flex;gap:0;margin-bottom:12px}.mapping-mode-toggle__btn{padding:6px 16px;border:1px solid #e0e0e0;background:#fff;font-size:.85em;cursor:pointer}.mapping-mode-toggle__btn:first-child{border-radius:4px 0 0 4px}.mapping-mode-toggle__btn:last-child{border-radius:0 4px 4px 0;border-left:none}.mapping-mode-toggle__btn--active{background:#0f62fe;color:#fff;border-color:#0f62fe}.mapping-tools{margin-top:12px;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden}.mapping-tools__header{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#f4f4f4;cursor:pointer;font-size:.85em;font-weight:500;-webkit-user-select:none;user-select:none}.mapping-tools__header:hover{background:#e8e8e8}.mapping-tools__chevron{font-size:.7em}.mapping-tools__content{border-top:1px solid #e0e0e0}.mapping-tools__tabs{display:flex;border-bottom:1px solid #e0e0e0}.mapping-tools__tab{padding:6px 16px;border:none;background:transparent;font-size:.8em;cursor:pointer;border-bottom:2px solid transparent}.mapping-tools__tab--active{border-bottom-color:#0f62fe;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "component", type: ExpectedStructureComponent, selector: "epistola-expected-structure", inputs: ["templateFields"] }, { kind: "component", type: JsonataEditorComponent, selector: "epistola-jsonata-editor", inputs: ["expression", "disabled", "contextVariables", "functions", "variablesHint"], outputs: ["expressionChange", "validChange"] }, { kind: "component", type: MappingBuilderComponent, selector: "epistola-mapping-builder", inputs: ["expression", "templateFields", "suggestions", "disabled"], outputs: ["expressionChange"] }, { kind: "component", type: MappingPreviewComponent, selector: "epistola-mapping-preview", inputs: ["expression", "templateFields", "caseDefinitionKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GenerateDocumentConfigurationComponent, decorators: [{
             type: Component,
@@ -2139,8 +2801,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         JsonataEditorComponent,
                         MappingBuilderComponent,
                         MappingPreviewComponent,
-                    ], template: "<v-form\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"{\n    disabled: disabled$ | async,\n    prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n    catalogs: catalogs$ | async,\n    templates: templates$ | async,\n    variants: variants$ | async,\n    environments: environments$ | async,\n    templateFields: templateFields$ | async,\n    selectedCatalogId: selectedCatalogId$ | async,\n    selectedTemplateId: selectedTemplateId$ | async,\n    validationErrors: validationErrors$ | async,\n  } as obs\"\n>\n  <div\n    *ngIf=\"obs.validationErrors && obs.validationErrors.length > 0\"\n    class=\"jsonata-validation-errors\"\n  >\n    <strong>{{ 'jsonataValidationErrorsHeading' | pluginTranslate: pluginId | async }}</strong>\n    <ul>\n      <li *ngFor=\"let err of obs.validationErrors\">\n        <code>{{ err.field }}</code\n        >: {{ err.message }}\n      </li>\n    </ul>\n  </div>\n  <v-select\n    name=\"catalogId\"\n    [title]=\"'catalogId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'catalogIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.catalogs.data\"\n    [defaultSelectionId]=\"obs.prefill?.catalogId\"\n    [disabled]=\"obs.disabled || obs.catalogs.loading\"\n    [required]=\"true\"\n    [loading]=\"obs.catalogs.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.catalogs.error\" class=\"loading-error\">{{ obs.catalogs.error }}</div>\n\n  <v-select\n    name=\"templateId\"\n    [title]=\"'templateId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'templateIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.templates.data\"\n    [defaultSelectionId]=\"obs.prefill?.templateId\"\n    [clearSelectionSubject$]=\"clearTemplateId$\"\n    [disabled]=\"obs.disabled || obs.templates.loading || !obs.selectedCatalogId\"\n    [required]=\"true\"\n    [loading]=\"obs.templates.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.templates.error\" class=\"loading-error\">{{ obs.templates.error }}</div>\n\n  <!-- Variant selection mode toggle -->\n  <div class=\"variant-mode-toggle\" *ngIf=\"obs.selectedTemplateId\">\n    <label class=\"variant-mode-label\">{{\n      'variantSelectionMode' | pluginTranslate: pluginId | async\n    }}</label>\n    <div class=\"variant-mode-buttons\">\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'explicit'\"\n        (click)=\"onVariantSelectionModeChange('explicit')\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'selectByVariant' | pluginTranslate: pluginId | async }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'attributes'\"\n        (click)=\"onVariantSelectionModeChange('attributes')\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'selectByAttributes' | pluginTranslate: pluginId | async }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Explicit variant selection (dropdown or expression) -->\n  <!--\n    The v-select / v-input here is intentionally NOT named into the v-form: v-form's\n    @ContentChildren queries default to descendants:false and would skip anything nested\n    in this `field-with-fx` wrapper. The value is tracked via (selectedChange)/(valueChange)\n    on the component, see variantIdValue / filenameValue.\n  -->\n  <div *ngIf=\"variantSelectionMode === 'explicit'\" class=\"field-with-fx\">\n    <v-select\n      *ngIf=\"!variantIdExpressionMode\"\n      [title]=\"'variantId' | pluginTranslate: pluginId | async\"\n      [tooltip]=\"'variantIdTooltip' | pluginTranslate: pluginId | async\"\n      [margin]=\"true\"\n      [items]=\"obs.variants.data\"\n      [defaultSelectionId]=\"variantIdValue\"\n      [clearSelectionSubject$]=\"clearVariantId$\"\n      (selectedChange)=\"onVariantIdValueChange($event)\"\n      [disabled]=\"obs.disabled || obs.variants.loading || !obs.selectedTemplateId\"\n      [required]=\"false\"\n      [loading]=\"obs.variants.loading\"\n    >\n    </v-select>\n    <div *ngIf=\"variantIdExpressionMode\" class=\"fx-input-group\">\n      <label class=\"fx-input-label\">{{ 'variantId' | pluginTranslate: pluginId | async }}</label>\n      <input\n        type=\"text\"\n        class=\"fx-input\"\n        [ngModel]=\"variantIdExpression\"\n        (ngModelChange)=\"variantIdExpression = $event; onVariantIdExpressionChange()\"\n        [disabled]=\"obs.disabled\"\n        placeholder=\"$pv.letterType\"\n      />\n    </div>\n    <button\n      type=\"button\"\n      class=\"fx-toggle\"\n      (click)=\"toggleVariantIdExpressionMode()\"\n      [disabled]=\"obs.disabled\"\n      [title]=\"variantIdExpressionMode ? 'Switch to dropdown' : 'Switch to expression'\"\n    >\n      {{ variantIdExpressionMode ? '\u00B7' : 'fx' }}\n    </button>\n  </div>\n  <div *ngIf=\"obs.variants.error\" class=\"loading-error\">{{ obs.variants.error }}</div>\n\n  <!-- Attribute-based variant selection -->\n  <div\n    *ngIf=\"variantSelectionMode === 'attributes' && obs.selectedTemplateId\"\n    class=\"variant-attributes-section\"\n  >\n    <label class=\"variant-attributes-label\">{{\n      'variantAttributes' | pluginTranslate: pluginId | async\n    }}</label>\n    <div class=\"variant-attributes-list\">\n      <div\n        *ngFor=\"let entry of variantAttributeEntries; let i = index\"\n        class=\"variant-attribute-row\"\n      >\n        <select\n          *ngIf=\"!entry._customKey\"\n          class=\"variant-attribute-input\"\n          [ngModel]=\"entry.key\"\n          (ngModelChange)=\"onKeySelected(entry, $event)\"\n          [disabled]=\"obs.disabled\"\n        >\n          <option value=\"\" disabled>\n            {{ 'attributeKey' | pluginTranslate: pluginId | async }}\n          </option>\n          <option *ngFor=\"let key of availableAttributeKeys\" [value]=\"key\">{{ key }}</option>\n          <option value=\"__custom__\">\n            {{ 'attributeKeyCustom' | pluginTranslate: pluginId | async }}\n          </option>\n        </select>\n        <div *ngIf=\"entry._customKey\" class=\"custom-key-input\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [placeholder]=\"'attributeKey' | pluginTranslate: pluginId | async\"\n            [(ngModel)]=\"entry.key\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button\n            type=\"button\"\n            class=\"custom-key-cancel\"\n            (click)=\"cancelCustomKey(entry)\"\n            [disabled]=\"obs.disabled\"\n          >\n            &times;\n          </button>\n        </div>\n        <div class=\"attribute-value-with-fx\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [class.fx-input]=\"entry._expressionMode\"\n            [placeholder]=\"\n              entry._expressionMode\n                ? '$pv.language'\n                : ('attributeValue' | pluginTranslate: pluginId | async)\n            \"\n            [(ngModel)]=\"entry.value\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button\n            type=\"button\"\n            class=\"fx-toggle fx-toggle--inline\"\n            (click)=\"entry._expressionMode = !entry._expressionMode\"\n            [disabled]=\"obs.disabled\"\n            [title]=\"entry._expressionMode ? 'Switch to plain value' : 'Switch to expression'\"\n          >\n            {{ entry._expressionMode ? '\u00B7' : 'fx' }}\n          </button>\n        </div>\n        <label class=\"variant-attribute-required-toggle\">\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"entry.required\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <span class=\"required-label\">{{\n            (entry.required ? 'attributeRequired' : 'attributePreferred')\n              | pluginTranslate: pluginId\n              | async\n          }}</span>\n        </label>\n        <button\n          type=\"button\"\n          class=\"variant-attribute-remove-btn\"\n          (click)=\"removeAttributeEntry(i)\"\n          [disabled]=\"obs.disabled\"\n          title=\"{{ 'removeAttribute' | pluginTranslate: pluginId | async }}\"\n        >\n          &times;\n        </button>\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      class=\"variant-attribute-add-btn\"\n      (click)=\"addAttributeEntry()\"\n      [disabled]=\"obs.disabled\"\n    >\n      + {{ 'addAttribute' | pluginTranslate: pluginId | async }}\n    </button>\n  </div>\n\n  <v-select\n    name=\"environmentId\"\n    [title]=\"'environmentId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'environmentIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.environments.data\"\n    [defaultSelectionId]=\"obs.prefill?.environmentId\"\n    [disabled]=\"obs.disabled || obs.environments.loading\"\n    [required]=\"false\"\n    [loading]=\"obs.environments.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.environments.error\" class=\"loading-error\">{{ obs.environments.error }}</div>\n\n  <v-select\n    name=\"outputFormat\"\n    [title]=\"'outputFormat' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'outputFormatTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"outputFormatOptions\"\n    [defaultSelectionId]=\"obs.prefill?.outputFormat || 'PDF'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-select>\n\n  <div class=\"field-with-fx\">\n    <v-input\n      *ngIf=\"!filenameExpressionMode\"\n      [title]=\"'filename' | pluginTranslate: pluginId | async\"\n      [tooltip]=\"'filenameTooltip' | pluginTranslate: pluginId | async\"\n      [margin]=\"true\"\n      [defaultValue]=\"filenameValue\"\n      (valueChange)=\"onFilenameValueChange($event)\"\n      [disabled]=\"obs.disabled\"\n      [required]=\"true\"\n    >\n    </v-input>\n    <div *ngIf=\"filenameExpressionMode\" class=\"fx-input-group\">\n      <label class=\"fx-input-label\">{{ 'filename' | pluginTranslate: pluginId | async }}</label>\n      <input\n        type=\"text\"\n        class=\"fx-input\"\n        [ngModel]=\"filenameExpression\"\n        (ngModelChange)=\"filenameExpression = $event; onFilenameExpressionChange()\"\n        [disabled]=\"obs.disabled\"\n        placeholder='\"besluit-\" & $doc.name & \".pdf\"'\n      />\n    </div>\n    <button\n      type=\"button\"\n      class=\"fx-toggle\"\n      (click)=\"toggleFilenameExpressionMode()\"\n      [disabled]=\"obs.disabled\"\n      [title]=\"filenameExpressionMode ? 'Switch to plain input' : 'Switch to expression'\"\n    >\n      {{ filenameExpressionMode ? '\u00B7' : 'fx' }}\n    </button>\n  </div>\n\n  <v-input\n    name=\"correlationId\"\n    [title]=\"'correlationId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'correlationIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.correlationId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"resultProcessVariable\"\n    [title]=\"'resultProcessVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'resultProcessVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.resultProcessVariable\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n\n<div *ngIf=\"(templateFields$ | async)?.error as templateFieldsError\" class=\"loading-error\">\n  {{ templateFieldsError }}\n</div>\n\n<div *ngIf=\"selectedTemplateId$ | async\" class=\"mapping-section\">\n  <h5 class=\"mapping-section__title\">\n    {{ 'dataMappingTitle' | pluginTranslate: pluginId | async }}\n  </h5>\n  <p class=\"mapping-section__description\">\n    {{ 'dataMappingDescription' | pluginTranslate: pluginId | async }}\n  </p>\n  <div class=\"mapping-mode-toggle\">\n    <button\n      class=\"mapping-mode-toggle__btn\"\n      [class.mapping-mode-toggle__btn--active]=\"mappingMode === 'simple'\"\n      (click)=\"mappingMode = 'simple'\"\n    >\n      {{ 'mappingModeSimple' | pluginTranslate: pluginId | async }}\n    </button>\n    <button\n      class=\"mapping-mode-toggle__btn\"\n      [class.mapping-mode-toggle__btn--active]=\"mappingMode === 'advanced'\"\n      (click)=\"mappingMode = 'advanced'\"\n    >\n      {{ 'mappingModeAdvanced' | pluginTranslate: pluginId | async }}\n    </button>\n  </div>\n\n  <!-- Editor area (full width) -->\n  <epistola-mapping-builder\n    *ngIf=\"mappingMode === 'simple'\"\n    [expression]=\"dataMapping$ | async\"\n    [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n    [suggestions]=\"variableSuggestions\"\n    [disabled]=\"!!(disabled$ | async)\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-mapping-builder>\n\n  <epistola-jsonata-editor\n    *ngIf=\"mappingMode === 'advanced'\"\n    [expression]=\"dataMapping$ | async\"\n    [disabled]=\"!!(disabled$ | async)\"\n    [suggestions]=\"variableSuggestions\"\n    [functions]=\"expressionFunctions\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-jsonata-editor>\n\n  <!-- Bottom tabs: Schema + Preview (collapsible) -->\n  <div class=\"mapping-tools\" [class.mapping-tools--collapsed]=\"toolsCollapsed\">\n    <div class=\"mapping-tools__header\" (click)=\"toolsCollapsed = !toolsCollapsed\">\n      <span class=\"mapping-tools__chevron\">{{ toolsCollapsed ? '&#x25B6;' : '&#x25BC;' }}</span>\n      <span>{{ 'mappingTools' | pluginTranslate: pluginId | async }}</span>\n    </div>\n    <div *ngIf=\"!toolsCollapsed\" class=\"mapping-tools__content\">\n      <div class=\"mapping-tools__tabs\">\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'schema'\"\n          (click)=\"activeToolTab = 'schema'\"\n        >\n          {{ 'expectedStructure' | pluginTranslate: pluginId | async }}\n        </button>\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'preview'\"\n          (click)=\"activeToolTab = 'preview'\"\n        >\n          {{ 'previewTitle' | pluginTranslate: pluginId | async }}\n        </button>\n      </div>\n\n      <epistola-expected-structure\n        *ngIf=\"activeToolTab === 'schema'\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n      ></epistola-expected-structure>\n\n      <epistola-mapping-preview\n        *ngIf=\"activeToolTab === 'preview'\"\n        [expression]=\"dataMapping$ | async\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n        [caseDefinitionKey]=\"caseDefinitionKey\"\n      ></epistola-mapping-preview>\n    </div>\n  </div>\n</div>\n", styles: [".loading-error{padding:.25rem .75rem;font-size:.8125rem;color:#dc3545}.jsonata-validation-errors{margin-bottom:1rem;padding:.75rem 1rem;border:1px solid #dc3545;border-radius:4px;background:#fdf3f4;color:#dc3545;font-size:.875rem}.jsonata-validation-errors ul{margin:.5rem 0 0;padding-left:1.25rem}.jsonata-validation-errors code{background:#dc35451a;padding:0 .25rem;border-radius:2px;font-family:monospace}.validation-summary{margin-top:.5rem;padding:.5rem .75rem;border-radius:4px;font-size:.875rem}.validation-summary .validation-complete{color:#198754}.validation-summary .validation-incomplete{color:#dc3545;font-weight:500}.variant-mode-toggle{margin-bottom:1rem;padding:0 .75rem}.variant-mode-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-mode-buttons{display:flex;gap:0;border:1px solid #d1d5db;border-radius:4px;overflow:hidden;width:fit-content}.variant-mode-btn{padding:.375rem .75rem;font-size:.8125rem;background:#fff;border:none;border-right:1px solid #d1d5db;cursor:pointer;color:#374151;transition:background-color .15s,color .15s}.variant-mode-btn:last-child{border-right:none}.variant-mode-btn:hover:not([disabled]){background:#f3f4f6}.variant-mode-btn.active{background:#2563eb;color:#fff}.variant-mode-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attributes-section{margin-bottom:1rem;padding:0 .75rem}.variant-attributes-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-attributes-list{display:flex;flex-direction:column;gap:.375rem}.variant-attribute-row{display:flex;gap:.375rem;align-items:center}.variant-attribute-input{flex:1;padding:.375rem .5rem;font-size:.8125rem;border:1px solid #d1d5db;border-radius:4px;outline:none}.variant-attribute-input:focus{border-color:#2563eb;box-shadow:0 0 0 1px #2563eb}.variant-attribute-input[disabled]{opacity:.5;background:#f9fafb}.custom-key-input{display:flex;flex:1;gap:.25rem}.custom-key-input .variant-attribute-input{flex:1}.custom-key-cancel{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.custom-key-cancel:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.custom-key-cancel[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-required-toggle{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#374151;white-space:nowrap;cursor:pointer}.variant-attribute-required-toggle input[type=checkbox]{margin:0;cursor:pointer}.variant-attribute-required-toggle .required-label{-webkit-user-select:none;user-select:none}.variant-attribute-remove-btn{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-remove-btn:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.variant-attribute-remove-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-add-btn{margin-top:.375rem;padding:.25rem .5rem;font-size:.8125rem;background:none;border:1px dashed #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-add-btn:hover:not([disabled]){color:#2563eb;border-color:#2563eb}.variant-attribute-add-btn[disabled]{opacity:.5;cursor:not-allowed}.field-with-fx{display:flex;align-items:flex-start;gap:4px}.field-with-fx>*:first-child{flex:1;min-width:0}.fx-toggle{width:28px;height:28px;margin-top:22px;border:1px solid #e0e0e0;border-radius:4px;background:#fff;cursor:pointer;font-family:monospace;font-size:.8em;display:flex;align-items:center;justify-content:center;flex-shrink:0}.fx-toggle:hover{background:#f4f4f4}.fx-toggle--inline{margin-top:0}.fx-input-group{flex:1;min-width:0;margin-bottom:.75rem}.fx-input-label{display:block;font-size:.875rem;margin-bottom:.25rem;color:#525252}.fx-input{width:100%;border:1px solid #8d8d8d;border-radius:0;padding:.4rem .75rem;font-family:monospace;font-size:.875rem;background:#f4f4f4}.attribute-value-with-fx{display:flex;align-items:center;gap:4px;flex:1;min-width:0}.attribute-value-with-fx>input{flex:1;min-width:0}.mapping-section{margin-top:1rem}.mapping-section__title{font-size:1rem;font-weight:600;margin:0 0 4px}.mapping-section__description{font-size:.85em;color:#6f6f6f;margin:0 0 12px}.mapping-mode-toggle{display:flex;gap:0;margin-bottom:12px}.mapping-mode-toggle__btn{padding:6px 16px;border:1px solid #e0e0e0;background:#fff;font-size:.85em;cursor:pointer}.mapping-mode-toggle__btn:first-child{border-radius:4px 0 0 4px}.mapping-mode-toggle__btn:last-child{border-radius:0 4px 4px 0;border-left:none}.mapping-mode-toggle__btn--active{background:#0f62fe;color:#fff;border-color:#0f62fe}.mapping-tools{margin-top:12px;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden}.mapping-tools__header{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#f4f4f4;cursor:pointer;font-size:.85em;font-weight:500;-webkit-user-select:none;user-select:none}.mapping-tools__header:hover{background:#e8e8e8}.mapping-tools__chevron{font-size:.7em}.mapping-tools__content{border-top:1px solid #e0e0e0}.mapping-tools__tabs{display:flex;border-bottom:1px solid #e0e0e0}.mapping-tools__tab{padding:6px 16px;border:none;background:transparent;font-size:.8em;cursor:pointer;border-bottom:2px solid transparent}.mapping-tools__tab--active{border-bottom-color:#0f62fe;font-weight:500}\n"] }]
-        }], ctorParameters: () => [{ type: EpistolaPluginService }, { type: i2$3.ProcessLinkStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { save$: [{
+                    ], template: "<v-form\n  (valueChange)=\"formValueChange($event)\"\n  *ngIf=\"{\n    disabled: disabled$ | async,\n    prefill: prefillConfiguration$ ? (prefillConfiguration$ | async) : null,\n    catalogs: catalogs$ | async,\n    templates: templates$ | async,\n    variants: variants$ | async,\n    environments: environments$ | async,\n    templateFields: templateFields$ | async,\n    selectedCatalogId: selectedCatalogId$ | async,\n    selectedTemplateId: selectedTemplateId$ | async,\n    validationErrors: validationErrors$ | async,\n  } as obs\"\n>\n  <div\n    *ngIf=\"obs.validationErrors && obs.validationErrors.length > 0\"\n    class=\"jsonata-validation-errors\"\n  >\n    <strong>{{ 'jsonataValidationErrorsHeading' | pluginTranslate: pluginId | async }}</strong>\n    <ul>\n      <li *ngFor=\"let err of obs.validationErrors\">\n        <code>{{ err.field }}</code\n        >: {{ err.message }}\n      </li>\n    </ul>\n  </div>\n  <v-select\n    name=\"catalogId\"\n    [title]=\"'catalogId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'catalogIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.catalogs.data\"\n    [defaultSelectionId]=\"obs.prefill?.catalogId\"\n    [disabled]=\"obs.disabled || obs.catalogs.loading\"\n    [required]=\"true\"\n    [loading]=\"obs.catalogs.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.catalogs.error\" class=\"loading-error\">{{ obs.catalogs.error }}</div>\n\n  <v-select\n    name=\"templateId\"\n    [title]=\"'templateId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'templateIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.templates.data\"\n    [defaultSelectionId]=\"obs.prefill?.templateId\"\n    [clearSelectionSubject$]=\"clearTemplateId$\"\n    [disabled]=\"obs.disabled || obs.templates.loading || !obs.selectedCatalogId\"\n    [required]=\"true\"\n    [loading]=\"obs.templates.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.templates.error\" class=\"loading-error\">{{ obs.templates.error }}</div>\n\n  <!-- Variant selection mode toggle -->\n  <div class=\"variant-mode-toggle\" *ngIf=\"obs.selectedTemplateId\">\n    <label class=\"variant-mode-label\">{{\n      'variantSelectionMode' | pluginTranslate: pluginId | async\n    }}</label>\n    <div class=\"variant-mode-buttons\">\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'explicit'\"\n        (click)=\"onVariantSelectionModeChange('explicit')\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'selectByVariant' | pluginTranslate: pluginId | async }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"variant-mode-btn\"\n        [class.active]=\"variantSelectionMode === 'attributes'\"\n        (click)=\"onVariantSelectionModeChange('attributes')\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'selectByAttributes' | pluginTranslate: pluginId | async }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Explicit variant selection (dropdown or expression) -->\n  <!--\n    The v-select / v-input here is intentionally NOT named into the v-form: v-form's\n    @ContentChildren queries default to descendants:false and would skip anything nested\n    in this `field-with-fx` wrapper. The value is tracked via (selectedChange)/(valueChange)\n    on the component, see variantIdValue / filenameValue.\n  -->\n  <div *ngIf=\"variantSelectionMode === 'explicit'\" class=\"field-with-fx\">\n    <v-select\n      *ngIf=\"!variantIdExpressionMode\"\n      [title]=\"'variantId' | pluginTranslate: pluginId | async\"\n      [tooltip]=\"'variantIdTooltip' | pluginTranslate: pluginId | async\"\n      [margin]=\"true\"\n      [items]=\"obs.variants.data\"\n      [defaultSelectionId]=\"variantIdValue\"\n      [clearSelectionSubject$]=\"clearVariantId$\"\n      (selectedChange)=\"onVariantIdValueChange($event)\"\n      [disabled]=\"obs.disabled || obs.variants.loading || !obs.selectedTemplateId\"\n      [required]=\"false\"\n      [loading]=\"obs.variants.loading\"\n    >\n    </v-select>\n    <div *ngIf=\"variantIdExpressionMode\" class=\"fx-input-group\">\n      <label class=\"fx-input-label\">{{ 'variantId' | pluginTranslate: pluginId | async }}</label>\n      <input\n        type=\"text\"\n        class=\"fx-input\"\n        [ngModel]=\"variantIdExpression\"\n        (ngModelChange)=\"variantIdExpression = $event; onVariantIdExpressionChange()\"\n        [disabled]=\"obs.disabled\"\n        placeholder=\"$pv.letterType\"\n      />\n    </div>\n    <button\n      type=\"button\"\n      class=\"fx-toggle\"\n      (click)=\"toggleVariantIdExpressionMode()\"\n      [disabled]=\"obs.disabled\"\n      [title]=\"variantIdExpressionMode ? 'Switch to dropdown' : 'Switch to expression'\"\n    >\n      {{ variantIdExpressionMode ? '\u00B7' : 'fx' }}\n    </button>\n  </div>\n  <div *ngIf=\"obs.variants.error\" class=\"loading-error\">{{ obs.variants.error }}</div>\n\n  <!-- Attribute-based variant selection -->\n  <div\n    *ngIf=\"variantSelectionMode === 'attributes' && obs.selectedTemplateId\"\n    class=\"variant-attributes-section\"\n  >\n    <label class=\"variant-attributes-label\">{{\n      'variantAttributes' | pluginTranslate: pluginId | async\n    }}</label>\n    <div class=\"variant-attributes-list\">\n      <div\n        *ngFor=\"let entry of variantAttributeEntries; let i = index\"\n        class=\"variant-attribute-row\"\n      >\n        <select\n          *ngIf=\"!entry._customKey\"\n          class=\"variant-attribute-input\"\n          [ngModel]=\"entry.key\"\n          (ngModelChange)=\"onKeySelected(entry, $event)\"\n          [disabled]=\"obs.disabled\"\n        >\n          <option value=\"\" disabled>\n            {{ 'attributeKey' | pluginTranslate: pluginId | async }}\n          </option>\n          <option *ngFor=\"let key of availableAttributeKeys\" [value]=\"key\">{{ key }}</option>\n          <option value=\"__custom__\">\n            {{ 'attributeKeyCustom' | pluginTranslate: pluginId | async }}\n          </option>\n        </select>\n        <div *ngIf=\"entry._customKey\" class=\"custom-key-input\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [placeholder]=\"'attributeKey' | pluginTranslate: pluginId | async\"\n            [(ngModel)]=\"entry.key\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button\n            type=\"button\"\n            class=\"custom-key-cancel\"\n            (click)=\"cancelCustomKey(entry)\"\n            [disabled]=\"obs.disabled\"\n          >\n            &times;\n          </button>\n        </div>\n        <div class=\"attribute-value-with-fx\">\n          <input\n            type=\"text\"\n            class=\"variant-attribute-input\"\n            [class.fx-input]=\"entry._expressionMode\"\n            [placeholder]=\"\n              entry._expressionMode\n                ? '$pv.language'\n                : ('attributeValue' | pluginTranslate: pluginId | async)\n            \"\n            [(ngModel)]=\"entry.value\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <button\n            type=\"button\"\n            class=\"fx-toggle fx-toggle--inline\"\n            (click)=\"entry._expressionMode = !entry._expressionMode\"\n            [disabled]=\"obs.disabled\"\n            [title]=\"entry._expressionMode ? 'Switch to plain value' : 'Switch to expression'\"\n          >\n            {{ entry._expressionMode ? '\u00B7' : 'fx' }}\n          </button>\n        </div>\n        <label class=\"variant-attribute-required-toggle\">\n          <input\n            type=\"checkbox\"\n            [(ngModel)]=\"entry.required\"\n            (ngModelChange)=\"onAttributeEntryChange()\"\n            [disabled]=\"obs.disabled\"\n          />\n          <span class=\"required-label\">{{\n            (entry.required ? 'attributeRequired' : 'attributePreferred')\n              | pluginTranslate: pluginId\n              | async\n          }}</span>\n        </label>\n        <button\n          type=\"button\"\n          class=\"variant-attribute-remove-btn\"\n          (click)=\"removeAttributeEntry(i)\"\n          [disabled]=\"obs.disabled\"\n          title=\"{{ 'removeAttribute' | pluginTranslate: pluginId | async }}\"\n        >\n          &times;\n        </button>\n      </div>\n    </div>\n    <button\n      type=\"button\"\n      class=\"variant-attribute-add-btn\"\n      (click)=\"addAttributeEntry()\"\n      [disabled]=\"obs.disabled\"\n    >\n      + {{ 'addAttribute' | pluginTranslate: pluginId | async }}\n    </button>\n  </div>\n\n  <v-select\n    name=\"environmentId\"\n    [title]=\"'environmentId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'environmentIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"obs.environments.data\"\n    [defaultSelectionId]=\"obs.prefill?.environmentId\"\n    [disabled]=\"obs.disabled || obs.environments.loading\"\n    [required]=\"false\"\n    [loading]=\"obs.environments.loading\"\n  >\n  </v-select>\n  <div *ngIf=\"obs.environments.error\" class=\"loading-error\">{{ obs.environments.error }}</div>\n\n  <v-select\n    name=\"outputFormat\"\n    [title]=\"'outputFormat' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'outputFormatTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"outputFormatOptions\"\n    [defaultSelectionId]=\"obs.prefill?.outputFormat || 'PDF'\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-select>\n\n  <div class=\"field-with-fx\">\n    <v-input\n      *ngIf=\"!filenameExpressionMode\"\n      [title]=\"'filename' | pluginTranslate: pluginId | async\"\n      [tooltip]=\"'filenameTooltip' | pluginTranslate: pluginId | async\"\n      [margin]=\"true\"\n      [defaultValue]=\"filenameValue\"\n      (valueChange)=\"onFilenameValueChange($event)\"\n      [disabled]=\"obs.disabled\"\n      [required]=\"true\"\n    >\n    </v-input>\n    <div *ngIf=\"filenameExpressionMode\" class=\"fx-input-group\">\n      <label class=\"fx-input-label\">{{ 'filename' | pluginTranslate: pluginId | async }}</label>\n      <input\n        type=\"text\"\n        class=\"fx-input\"\n        [ngModel]=\"filenameExpression\"\n        (ngModelChange)=\"filenameExpression = $event; onFilenameExpressionChange()\"\n        [disabled]=\"obs.disabled\"\n        placeholder='\"besluit-\" & $doc.name & \".pdf\"'\n      />\n    </div>\n    <button\n      type=\"button\"\n      class=\"fx-toggle\"\n      (click)=\"toggleFilenameExpressionMode()\"\n      [disabled]=\"obs.disabled\"\n      [title]=\"filenameExpressionMode ? 'Switch to plain input' : 'Switch to expression'\"\n    >\n      {{ filenameExpressionMode ? '\u00B7' : 'fx' }}\n    </button>\n  </div>\n\n  <v-input\n    name=\"correlationId\"\n    [title]=\"'correlationId' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'correlationIdTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.correlationId\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"false\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"resultProcessVariable\"\n    [title]=\"'resultProcessVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'resultProcessVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"obs.prefill?.resultProcessVariable\"\n    [disabled]=\"obs.disabled\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n\n<div *ngIf=\"(templateFields$ | async)?.error as templateFieldsError\" class=\"loading-error\">\n  {{ templateFieldsError }}\n</div>\n\n<div *ngIf=\"selectedTemplateId$ | async\" class=\"mapping-section\">\n  <h5 class=\"mapping-section__title\">\n    {{ 'dataMappingTitle' | pluginTranslate: pluginId | async }}\n  </h5>\n  <p class=\"mapping-section__description\">\n    {{ 'dataMappingDescription' | pluginTranslate: pluginId | async }}\n  </p>\n  <div class=\"mapping-mode-toggle\">\n    <button\n      class=\"mapping-mode-toggle__btn\"\n      [class.mapping-mode-toggle__btn--active]=\"mappingMode === 'simple'\"\n      (click)=\"mappingMode = 'simple'\"\n    >\n      {{ 'mappingModeSimple' | pluginTranslate: pluginId | async }}\n    </button>\n    <button\n      class=\"mapping-mode-toggle__btn\"\n      [class.mapping-mode-toggle__btn--active]=\"mappingMode === 'advanced'\"\n      (click)=\"mappingMode = 'advanced'\"\n    >\n      {{ 'mappingModeAdvanced' | pluginTranslate: pluginId | async }}\n    </button>\n  </div>\n\n  <!-- Editor area (full width) -->\n  <epistola-mapping-builder\n    *ngIf=\"mappingMode === 'simple'\"\n    [expression]=\"dataMapping$ | async\"\n    [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n    [suggestions]=\"variableSuggestions\"\n    [disabled]=\"!!(disabled$ | async)\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-mapping-builder>\n\n  <epistola-jsonata-editor\n    *ngIf=\"mappingMode === 'advanced'\"\n    [expression]=\"dataMapping$ | async\"\n    [disabled]=\"!!(disabled$ | async)\"\n    [contextVariables]=\"editorContextVariables\"\n    [functions]=\"expressionFunctions\"\n    (expressionChange)=\"onDataMappingChange($event)\"\n  ></epistola-jsonata-editor>\n\n  <!-- Bottom tabs: Schema + Preview (collapsible) -->\n  <div class=\"mapping-tools\" [class.mapping-tools--collapsed]=\"toolsCollapsed\">\n    <div class=\"mapping-tools__header\" (click)=\"toolsCollapsed = !toolsCollapsed\">\n      <span class=\"mapping-tools__chevron\">{{ toolsCollapsed ? '&#x25B6;' : '&#x25BC;' }}</span>\n      <span>{{ 'mappingTools' | pluginTranslate: pluginId | async }}</span>\n    </div>\n    <div *ngIf=\"!toolsCollapsed\" class=\"mapping-tools__content\">\n      <div class=\"mapping-tools__tabs\">\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'schema'\"\n          (click)=\"activeToolTab = 'schema'\"\n        >\n          {{ 'expectedStructure' | pluginTranslate: pluginId | async }}\n        </button>\n        <button\n          class=\"mapping-tools__tab\"\n          [class.mapping-tools__tab--active]=\"activeToolTab === 'preview'\"\n          (click)=\"activeToolTab = 'preview'\"\n        >\n          {{ 'previewTitle' | pluginTranslate: pluginId | async }}\n        </button>\n      </div>\n\n      <epistola-expected-structure\n        *ngIf=\"activeToolTab === 'schema'\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n      ></epistola-expected-structure>\n\n      <epistola-mapping-preview\n        *ngIf=\"activeToolTab === 'preview'\"\n        [expression]=\"dataMapping$ | async\"\n        [templateFields]=\"(templateFields$ | async)?.data ?? []\"\n        [caseDefinitionKey]=\"caseDefinitionKey\"\n      ></epistola-mapping-preview>\n    </div>\n  </div>\n</div>\n", styles: [".loading-error{padding:.25rem .75rem;font-size:.8125rem;color:#dc3545}.jsonata-validation-errors{margin-bottom:1rem;padding:.75rem 1rem;border:1px solid #dc3545;border-radius:4px;background:#fdf3f4;color:#dc3545;font-size:.875rem}.jsonata-validation-errors ul{margin:.5rem 0 0;padding-left:1.25rem}.jsonata-validation-errors code{background:#dc35451a;padding:0 .25rem;border-radius:2px;font-family:monospace}.validation-summary{margin-top:.5rem;padding:.5rem .75rem;border-radius:4px;font-size:.875rem}.validation-summary .validation-complete{color:#198754}.validation-summary .validation-incomplete{color:#dc3545;font-weight:500}.variant-mode-toggle{margin-bottom:1rem;padding:0 .75rem}.variant-mode-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-mode-buttons{display:flex;gap:0;border:1px solid #d1d5db;border-radius:4px;overflow:hidden;width:fit-content}.variant-mode-btn{padding:.375rem .75rem;font-size:.8125rem;background:#fff;border:none;border-right:1px solid #d1d5db;cursor:pointer;color:#374151;transition:background-color .15s,color .15s}.variant-mode-btn:last-child{border-right:none}.variant-mode-btn:hover:not([disabled]){background:#f3f4f6}.variant-mode-btn.active{background:#2563eb;color:#fff}.variant-mode-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attributes-section{margin-bottom:1rem;padding:0 .75rem}.variant-attributes-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.variant-attributes-list{display:flex;flex-direction:column;gap:.375rem}.variant-attribute-row{display:flex;gap:.375rem;align-items:center}.variant-attribute-input{flex:1;padding:.375rem .5rem;font-size:.8125rem;border:1px solid #d1d5db;border-radius:4px;outline:none}.variant-attribute-input:focus{border-color:#2563eb;box-shadow:0 0 0 1px #2563eb}.variant-attribute-input[disabled]{opacity:.5;background:#f9fafb}.custom-key-input{display:flex;flex:1;gap:.25rem}.custom-key-input .variant-attribute-input{flex:1}.custom-key-cancel{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.custom-key-cancel:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.custom-key-cancel[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-required-toggle{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#374151;white-space:nowrap;cursor:pointer}.variant-attribute-required-toggle input[type=checkbox]{margin:0;cursor:pointer}.variant-attribute-required-toggle .required-label{-webkit-user-select:none;user-select:none}.variant-attribute-remove-btn{padding:.25rem .5rem;font-size:1rem;line-height:1;background:none;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-remove-btn:hover:not([disabled]){color:#dc3545;border-color:#dc3545}.variant-attribute-remove-btn[disabled]{opacity:.5;cursor:not-allowed}.variant-attribute-add-btn{margin-top:.375rem;padding:.25rem .5rem;font-size:.8125rem;background:none;border:1px dashed #d1d5db;border-radius:4px;cursor:pointer;color:#6b7280}.variant-attribute-add-btn:hover:not([disabled]){color:#2563eb;border-color:#2563eb}.variant-attribute-add-btn[disabled]{opacity:.5;cursor:not-allowed}.field-with-fx{display:flex;align-items:flex-start;gap:4px}.field-with-fx>*:first-child{flex:1;min-width:0}.fx-toggle{width:28px;height:28px;margin-top:22px;border:1px solid #e0e0e0;border-radius:4px;background:#fff;cursor:pointer;font-family:monospace;font-size:.8em;display:flex;align-items:center;justify-content:center;flex-shrink:0}.fx-toggle:hover{background:#f4f4f4}.fx-toggle--inline{margin-top:0}.fx-input-group{flex:1;min-width:0;margin-bottom:.75rem}.fx-input-label{display:block;font-size:.875rem;margin-bottom:.25rem;color:#525252}.fx-input{width:100%;border:1px solid #8d8d8d;border-radius:0;padding:.4rem .75rem;font-family:monospace;font-size:.875rem;background:#f4f4f4}.attribute-value-with-fx{display:flex;align-items:center;gap:4px;flex:1;min-width:0}.attribute-value-with-fx>input{flex:1;min-width:0}.mapping-section{margin-top:1rem}.mapping-section__title{font-size:1rem;font-weight:600;margin:0 0 4px}.mapping-section__description{font-size:.85em;color:#6f6f6f;margin:0 0 12px}.mapping-mode-toggle{display:flex;gap:0;margin-bottom:12px}.mapping-mode-toggle__btn{padding:6px 16px;border:1px solid #e0e0e0;background:#fff;font-size:.85em;cursor:pointer}.mapping-mode-toggle__btn:first-child{border-radius:4px 0 0 4px}.mapping-mode-toggle__btn:last-child{border-radius:0 4px 4px 0;border-left:none}.mapping-mode-toggle__btn--active{background:#0f62fe;color:#fff;border-color:#0f62fe}.mapping-tools{margin-top:12px;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden}.mapping-tools__header{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#f4f4f4;cursor:pointer;font-size:.85em;font-weight:500;-webkit-user-select:none;user-select:none}.mapping-tools__header:hover{background:#e8e8e8}.mapping-tools__chevron{font-size:.7em}.mapping-tools__content{border-top:1px solid #e0e0e0}.mapping-tools__tabs{display:flex;border-bottom:1px solid #e0e0e0}.mapping-tools__tab{padding:6px 16px;border:none;background:transparent;font-size:.8em;cursor:pointer;border-bottom:2px solid transparent}.mapping-tools__tab--active{border-bottom-color:#0f62fe;font-weight:500}\n"] }]
+        }], ctorParameters: () => [{ type: EpistolaPluginService }, { type: i2$2.ProcessLinkStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { save$: [{
                 type: Input
             }], disabled$: [{
                 type: Input
@@ -2158,12 +2820,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Output
             }] } });
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 class CheckJobStatusConfigurationComponent {
     save$;
     disabled$;
     pluginId;
     prefillConfiguration$;
     valid = new EventEmitter();
+    // Typed as the framework's FunctionConfigurationData (an index type) to match the
+    // FunctionConfigurationComponent contract under strict mode — EventEmitter is invariant,
+    // so a narrower generic isn't assignable. Emitted values are still the typed config.
     configuration = new EventEmitter();
     saveSubscription;
     formValue$ = new BehaviorSubject(null);
@@ -2225,12 +2907,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Output
             }] } });
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+const DEFAULT_STORAGE_TARGET = 'TEMPORARY_RESOURCE';
+/** Normalize a (possibly undefined) storageTarget to a concrete target, applying the default. */
+function resolveStorageTarget(target) {
+    return target === 'PROCESS_VARIABLE' ? 'PROCESS_VARIABLE' : DEFAULT_STORAGE_TARGET;
+}
+/**
+ * A config is valid when the input variable and the output variable that matches the chosen
+ * storage target are both set.
+ */
+function isDownloadDocumentConfigValid(config) {
+    if (!config?.documentVariable) {
+        return false;
+    }
+    return resolveStorageTarget(config.storageTarget) === 'PROCESS_VARIABLE'
+        ? !!config.contentVariable
+        : !!config.resourceIdVariable;
+}
+
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 class DownloadDocumentConfigurationComponent {
     save$;
     disabled$;
     pluginId;
     prefillConfiguration$;
     valid = new EventEmitter();
+    // Framework's FunctionConfigurationData (index type) to satisfy the invariant
+    // EventEmitter contract under strict mode; emitted values remain the typed config.
     configuration = new EventEmitter();
     saveSubscription;
     formValue$ = new BehaviorSubject(null);
@@ -2243,11 +2979,24 @@ class DownloadDocumentConfigurationComponent {
     resolvedPrefill = {};
     prefillResolved$ = new BehaviorSubject(false);
     safeDisabled$;
+    /**
+     * Static option set for the storage target. Values match the backend
+     * {@code DocumentStorageTarget} enum constants; labels are explained further via the
+     * translated field title/tooltip.
+     */
+    storageTargetOptions = [
+        { id: 'TEMPORARY_RESOURCE', text: 'Temporary resource storage' },
+        { id: 'PROCESS_VARIABLE', text: 'Process variable (inline bytes)' },
+    ];
+    defaultStorageTarget = DEFAULT_STORAGE_TARGET;
+    /** Drives which output-variable field is shown (resource id vs inline content). */
+    selectedTarget$ = new BehaviorSubject(this.defaultStorageTarget);
     ngOnInit() {
         this.safeDisabled$ = this.disabled$.pipe(startWith(true), delay(0));
         const prefill$ = this.prefillConfiguration$ ?? of({});
         prefill$.pipe(take(1)).subscribe((prefill) => {
             this.resolvedPrefill = prefill ?? {};
+            this.selectedTarget$.next(resolveStorageTarget(this.resolvedPrefill.storageTarget));
             this.prefillResolved$.next(true);
         });
         this.openSaveSubscription();
@@ -2257,11 +3006,14 @@ class DownloadDocumentConfigurationComponent {
     }
     formValueChange(formOutput) {
         const formValue = formOutput;
+        if (formValue?.storageTarget) {
+            this.selectedTarget$.next(formValue.storageTarget);
+        }
         this.formValue$.next(formValue);
         this.handleValid(formValue);
     }
     handleValid(formValue) {
-        const valid = !!(formValue?.documentVariable && formValue?.contentVariable);
+        const valid = isDownloadDocumentConfigValid(formValue);
         this.valid$.next(valid);
         this.valid.emit(valid);
     }
@@ -2277,11 +3029,11 @@ class DownloadDocumentConfigurationComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DownloadDocumentConfigurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: DownloadDocumentConfigurationComponent, isStandalone: true, selector: "epistola-download-document-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form (valueChange)=\"formValueChange($event)\" *ngIf=\"prefillResolved$ | async\">\n  <v-input\n    name=\"documentVariable\"\n    [title]=\"'documentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.documentVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"contentVariable\"\n    [title]=\"'contentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'contentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.contentVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: DownloadDocumentConfigurationComponent, isStandalone: true, selector: "epistola-download-document-configuration", inputs: { save$: "save$", disabled$: "disabled$", pluginId: "pluginId", prefillConfiguration$: "prefillConfiguration$" }, outputs: { valid: "valid", configuration: "configuration" }, ngImport: i0, template: "<v-form (valueChange)=\"formValueChange($event)\" *ngIf=\"prefillResolved$ | async\">\n  <v-input\n    name=\"documentVariable\"\n    [title]=\"'documentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.documentVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-select\n    name=\"storageTarget\"\n    [title]=\"'storageTarget' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'storageTargetTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"storageTargetOptions\"\n    [defaultSelectionId]=\"resolvedPrefill?.storageTarget || defaultStorageTarget\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-select>\n\n  <v-input\n    *ngIf=\"(selectedTarget$ | async) === 'TEMPORARY_RESOURCE'\"\n    name=\"resourceIdVariable\"\n    [title]=\"'resourceIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'resourceIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.resourceIdVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    *ngIf=\"(selectedTarget$ | async) === 'PROCESS_VARIABLE'\"\n    name=\"contentVariable\"\n    [title]=\"'contentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'contentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.contentVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DownloadDocumentConfigurationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'epistola-download-document-configuration', standalone: true, imports: [CommonModule, PluginTranslatePipeModule, FormModule, InputModule], template: "<v-form (valueChange)=\"formValueChange($event)\" *ngIf=\"prefillResolved$ | async\">\n  <v-input\n    name=\"documentVariable\"\n    [title]=\"'documentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.documentVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    name=\"contentVariable\"\n    [title]=\"'contentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'contentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.contentVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n" }]
+            args: [{ selector: 'epistola-download-document-configuration', standalone: true, imports: [CommonModule, PluginTranslatePipeModule, FormModule, InputModule, SelectModule], template: "<v-form (valueChange)=\"formValueChange($event)\" *ngIf=\"prefillResolved$ | async\">\n  <v-input\n    name=\"documentVariable\"\n    [title]=\"'documentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'documentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.documentVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-select\n    name=\"storageTarget\"\n    [title]=\"'storageTarget' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'storageTargetTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [items]=\"storageTargetOptions\"\n    [defaultSelectionId]=\"resolvedPrefill?.storageTarget || defaultStorageTarget\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-select>\n\n  <v-input\n    *ngIf=\"(selectedTarget$ | async) === 'TEMPORARY_RESOURCE'\"\n    name=\"resourceIdVariable\"\n    [title]=\"'resourceIdVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'resourceIdVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.resourceIdVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n\n  <v-input\n    *ngIf=\"(selectedTarget$ | async) === 'PROCESS_VARIABLE'\"\n    name=\"contentVariable\"\n    [title]=\"'contentVariable' | pluginTranslate: pluginId | async\"\n    [tooltip]=\"'contentVariableTooltip' | pluginTranslate: pluginId | async\"\n    [margin]=\"true\"\n    [defaultValue]=\"resolvedPrefill?.contentVariable\"\n    [disabled]=\"safeDisabled$ | async\"\n    [required]=\"true\"\n  >\n  </v-input>\n</v-form>\n" }]
         }], propDecorators: { save$: [{
                 type: Input
             }], disabled$: [{
@@ -2296,6 +3048,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Output
             }] } });
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 /**
  * Unified Formio component for the after-generation Epistola PDF UX. Reads
  * the PDF id and tenant id from named process variables on the caller's
@@ -2316,7 +3085,6 @@ class EpistolaDocumentComponent {
     epistolaPluginService;
     sanitizer;
     formIoStateService;
-    taskContext;
     cdr;
     value;
     valueChange = new EventEmitter();
@@ -2337,6 +3105,11 @@ class EpistolaDocumentComponent {
     tenantIdVariable = 'epistolaTenantId';
     /** Filename used for the download disposition. */
     filename = 'document.pdf';
+    /**
+     * Task id forwarded by the Formio wrapper from the server-prefilled form
+     * ({@code epistola:taskId} value resolver), populated in every Valtimo task-open flow.
+     */
+    taskInstanceId;
     loading = false;
     downloading = false;
     error = null;
@@ -2346,18 +3119,21 @@ class EpistolaDocumentComponent {
     get designMode() {
         return !this.formIoStateService.documentId;
     }
-    constructor(epistolaPluginService, sanitizer, formIoStateService, taskContext, cdr) {
+    constructor(epistolaPluginService, sanitizer, formIoStateService, cdr) {
         this.epistolaPluginService = epistolaPluginService;
         this.sanitizer = sanitizer;
         this.formIoStateService = formIoStateService;
-        this.taskContext = taskContext;
         this.cdr = cdr;
     }
-    ngOnInit() {
-        if (this.designMode) {
+    ngOnChanges(changes) {
+        if (this.designMode || this.display === 'button') {
             return;
         }
-        if (this.display !== 'button') {
+        // The Formio wrapper sets taskInstanceId around attach, so it can arrive after the
+        // first change — (re)load the inline document once it's available instead of leaving
+        // the "Document is alleen beschikbaar binnen een taak" message until a manual refresh.
+        // (For display="button" the download() click reads the task id on demand.)
+        if (changes['taskInstanceId'] && this.taskInstanceId) {
             this.loadInline();
         }
     }
@@ -2424,7 +3200,7 @@ class EpistolaDocumentComponent {
         });
     }
     buildRequest(disposition) {
-        const taskId = this.taskContext.taskInstanceId;
+        const taskId = this.taskInstanceId ?? null;
         const caseDocumentId = this.formIoStateService.documentId;
         if (!taskId || !caseDocumentId) {
             this.error = 'Document is alleen beschikbaar binnen een taak.';
@@ -2447,8 +3223,8 @@ class EpistolaDocumentComponent {
             this.previewUrl = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaDocumentComponent, deps: [{ token: EpistolaPluginService }, { token: i2$4.DomSanitizer }, { token: i3.FormIoStateService }, { token: EpistolaTaskContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaDocumentComponent, isStandalone: true, selector: "epistola-document-component", inputs: { value: "value", disabled: "disabled", label: "label", display: "display", documentVariable: "documentVariable", tenantIdVariable: "tenantIdVariable", filename: "filename" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaDocumentComponent, deps: [{ token: EpistolaPluginService }, { token: i2$3.DomSanitizer }, { token: i3.FormIoStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaDocumentComponent, isStandalone: true, selector: "epistola-document-component", inputs: { value: "value", disabled: "disabled", label: "label", display: "display", documentVariable: "documentVariable", tenantIdVariable: "tenantIdVariable", filename: "filename", taskInstanceId: "taskInstanceId" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
     <!-- Design-time placeholder -->
     <div *ngIf="designMode" class="epistola-doc-panel">
       <div class="doc-header">
@@ -2603,7 +3379,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
       </div>
     </div>
   `, styles: [".epistola-doc-panel{border:1px solid #dee2e6;border-radius:4px;background:#f8f9fa;display:flex;flex-direction:column}.doc-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-bottom:1px solid #dee2e6;font-weight:700;color:#495057}.doc-controls{display:flex;gap:.25rem}.doc-icon-btn{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.25rem .5rem;font-size:.9rem;cursor:pointer}.doc-icon-btn:hover:not(:disabled){background:#e9ecef}.doc-icon-btn:disabled{opacity:.5;cursor:not-allowed}.doc-body{display:flex;flex-direction:column;min-height:500px}.doc-loading,.doc-unavailable{padding:2rem;text-align:center;color:#6c757d;font-style:italic}.doc-unavailable i{margin-right:.25rem}.doc-pdf{width:100%;flex:1;min-height:500px}.design-info{padding:1rem;min-height:auto}.design-section{margin-bottom:.5rem}.design-label{font-size:.7rem;text-transform:uppercase;color:#868e96;font-weight:600;letter-spacing:.05em}.design-value{font-family:monospace;font-size:.85rem;color:#212529;margin-bottom:.25rem}.design-tag{font-size:.7rem;font-weight:400;color:#6c757d;font-style:italic}\n"] }]
-        }], ctorParameters: () => [{ type: EpistolaPluginService }, { type: i2$4.DomSanitizer }, { type: i3.FormIoStateService }, { type: EpistolaTaskContextService }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
+        }], ctorParameters: () => [{ type: EpistolaPluginService }, { type: i2$3.DomSanitizer }, { type: i3.FormIoStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], valueChange: [{
                 type: Output
@@ -2619,19 +3395,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }], filename: [{
                 type: Input
+            }], taskInstanceId: [{
+                type: Input
             }] } });
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 class EpistolaRetryFormComponent {
     epistolaPluginService;
-    formIoStateService;
     cdr;
     sanitizer;
-    taskContext;
     value;
     valueChange = new EventEmitter();
     disabled = false;
     label = 'Document Data';
     sourceActivityId;
+    /**
+     * Task id forwarded by the Formio wrapper from the server-prefilled form
+     * ({@code epistola:taskId} value resolver), populated in every Valtimo task-open flow.
+     */
+    taskInstanceId;
     formDefinition;
     submission;
     loading = true;
@@ -2646,17 +3444,14 @@ class EpistolaRetryFormComponent {
     previewSubject = new Subject();
     currentBlobUrl = null;
     resolvedSourceActivityId;
-    processDefinitionKey;
     formOptions = {
         noAlerts: true,
         buttonSettings: { showCancel: false, showSubmit: false, showPrevious: false, showNext: false },
     };
-    constructor(epistolaPluginService, formIoStateService, cdr, sanitizer, taskContext) {
+    constructor(epistolaPluginService, cdr, sanitizer) {
         this.epistolaPluginService = epistolaPluginService;
-        this.formIoStateService = formIoStateService;
         this.cdr = cdr;
         this.sanitizer = sanitizer;
-        this.taskContext = taskContext;
         // Debounce preview calls
         this.previewSubscription = this.previewSubject.pipe(debounceTime$1(1500)).subscribe((data) => {
             this.loadPreview(data);
@@ -2666,6 +3461,13 @@ class EpistolaRetryFormComponent {
         if (!this.loaded) {
             this.loaded = true;
             this.loadForm();
+            return;
+        }
+        // The Formio wrapper sets taskInstanceId after attach, so it can land after the
+        // first render — if the form failed to load for lack of a task id, retry once it
+        // arrives instead of leaving the "only available from within a user task" message.
+        if (changes['taskInstanceId'] && this.taskInstanceId && !this.formDefinition) {
+            this.loadForm();
         }
     }
     ngOnDestroy() {
@@ -2689,11 +3491,8 @@ class EpistolaRetryFormComponent {
         }
     }
     loadPreview(formData) {
-        const documentId = this.formIoStateService.documentId;
-        const processInstanceId = this.formIoStateService.processInstanceId;
-        if (!documentId || !processInstanceId)
-            return;
-        const taskId = this.taskContext.taskInstanceId;
+        // The backend derives the process instance and case document from the task.
+        const taskId = this.taskInstanceId ?? null;
         if (!taskId) {
             this.previewError = 'Preview is only available from within a user task.';
             this.cdr.markForCheck();
@@ -2710,8 +3509,6 @@ class EpistolaRetryFormComponent {
         this.epistolaPluginService
             .previewToBlob({
             taskId,
-            documentId,
-            processInstanceId,
             sourceActivityId: this.sourceActivityId || null,
             overrides: formData,
         })
@@ -2748,15 +3545,8 @@ class EpistolaRetryFormComponent {
         });
     }
     loadForm() {
-        const processInstanceId = this.formIoStateService.processInstanceId;
-        const documentId = this.formIoStateService.documentId;
-        if (!processInstanceId) {
-            this.error = 'Could not determine process instance ID.';
-            this.loading = false;
-            this.cdr.markForCheck();
-            return;
-        }
-        const taskId = this.taskContext.taskInstanceId;
+        // The backend derives the process instance and case document from the task.
+        const taskId = this.taskInstanceId ?? null;
         if (!taskId) {
             this.error = 'Retry form is only available from within a user task.';
             this.loading = false;
@@ -2764,7 +3554,7 @@ class EpistolaRetryFormComponent {
             return;
         }
         this.loadSubscription = this.epistolaPluginService
-            .getRetryForm(taskId, processInstanceId, documentId ?? undefined, this.sourceActivityId)
+            .getRetryForm(taskId, this.sourceActivityId)
             .subscribe({
             next: (form) => {
                 this.formDefinition = form;
@@ -2787,8 +3577,8 @@ class EpistolaRetryFormComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaRetryFormComponent, deps: [{ token: EpistolaPluginService }, { token: i3.FormIoStateService }, { token: i0.ChangeDetectorRef }, { token: i2$4.DomSanitizer }, { token: EpistolaTaskContextService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaRetryFormComponent, isStandalone: true, selector: "epistola-retry-form-component", inputs: { value: "value", disabled: "disabled", label: "label", sourceActivityId: "sourceActivityId" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaRetryFormComponent, deps: [{ token: EpistolaPluginService }, { token: i0.ChangeDetectorRef }, { token: i2$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaRetryFormComponent, isStandalone: true, selector: "epistola-retry-form-component", inputs: { value: "value", disabled: "disabled", label: "label", sourceActivityId: "sourceActivityId", taskInstanceId: "taskInstanceId" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
     <div *ngIf="loading" class="epistola-retry-loading">Loading form...</div>
     <div *ngIf="error" class="epistola-retry-error">{{ error }}</div>
     <div
@@ -2826,7 +3616,7 @@ class EpistolaRetryFormComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, styles: [".epistola-retry-loading{padding:1rem;color:#6c757d}.epistola-retry-error{padding:.5rem;color:#dc3545}.epistola-retry-container{display:flex;gap:1rem}.epistola-retry-form{flex:2;min-width:0}.epistola-retry-preview{flex:1;min-width:0;border:1px solid #dee2e6;border-radius:4px;padding:1rem;background:#f8f9fa;display:flex;flex-direction:column}.preview-expanded .epistola-retry-preview{flex:1}.preview-header{display:flex;justify-content:space-between;align-items:center;font-weight:700;margin-bottom:.5rem;color:#495057}.preview-toggle{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.2rem .5rem;font-size:.75rem;cursor:pointer}.preview-toggle:hover{background:#e9ecef}.preview-loading{color:#6c757d;font-style:italic}.preview-pdf{width:100%;flex:1;min-height:500px}.preview-expanded .preview-pdf{min-height:80vh}.preview-error{color:#dc3545}.preview-empty{color:#6c757d;font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormioModule }, { kind: "component", type: i5.FormioComponent, selector: "formio" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".epistola-retry-loading{padding:1rem;color:#6c757d}.epistola-retry-error{padding:.5rem;color:#dc3545}.epistola-retry-container{display:flex;gap:1rem}.epistola-retry-form{flex:2;min-width:0}.epistola-retry-preview{flex:1;min-width:0;border:1px solid #dee2e6;border-radius:4px;padding:1rem;background:#f8f9fa;display:flex;flex-direction:column}.preview-expanded .epistola-retry-preview{flex:1}.preview-header{display:flex;justify-content:space-between;align-items:center;font-weight:700;margin-bottom:.5rem;color:#495057}.preview-toggle{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.2rem .5rem;font-size:.75rem;cursor:pointer}.preview-toggle:hover{background:#e9ecef}.preview-loading{color:#6c757d;font-style:italic}.preview-pdf{width:100%;flex:1;min-height:500px}.preview-expanded .preview-pdf{min-height:80vh}.preview-error{color:#dc3545}.preview-empty{color:#6c757d;font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormioModule }, { kind: "component", type: i4.FormioComponent, selector: "formio" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaRetryFormComponent, decorators: [{
             type: Component,
@@ -2869,7 +3659,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
       </div>
     </div>
   `, styles: [".epistola-retry-loading{padding:1rem;color:#6c757d}.epistola-retry-error{padding:.5rem;color:#dc3545}.epistola-retry-container{display:flex;gap:1rem}.epistola-retry-form{flex:2;min-width:0}.epistola-retry-preview{flex:1;min-width:0;border:1px solid #dee2e6;border-radius:4px;padding:1rem;background:#f8f9fa;display:flex;flex-direction:column}.preview-expanded .epistola-retry-preview{flex:1}.preview-header{display:flex;justify-content:space-between;align-items:center;font-weight:700;margin-bottom:.5rem;color:#495057}.preview-toggle{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.2rem .5rem;font-size:.75rem;cursor:pointer}.preview-toggle:hover{background:#e9ecef}.preview-loading{color:#6c757d;font-style:italic}.preview-pdf{width:100%;flex:1;min-height:500px}.preview-expanded .preview-pdf{min-height:80vh}.preview-error{color:#dc3545}.preview-empty{color:#6c757d;font-style:italic}\n"] }]
-        }], ctorParameters: () => [{ type: EpistolaPluginService }, { type: i3.FormIoStateService }, { type: i0.ChangeDetectorRef }, { type: i2$4.DomSanitizer }, { type: EpistolaTaskContextService }], propDecorators: { value: [{
+        }], ctorParameters: () => [{ type: EpistolaPluginService }, { type: i0.ChangeDetectorRef }, { type: i2$3.DomSanitizer }], propDecorators: { value: [{
                 type: Input
             }], valueChange: [{
                 type: Output
@@ -2879,21 +3669,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }], sourceActivityId: [{
                 type: Input
+            }], taskInstanceId: [{
+                type: Input
             }] } });
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 class EpistolaDocumentPreviewComponent {
     epistolaPluginService;
     sanitizer;
     formIoStateService;
     cdr;
-    taskContext;
     value;
     valueChange = new EventEmitter();
     disabled = false;
     label = 'Document Preview';
     processDefinitionKey;
     sourceActivityId;
+    /**
+     * The override mapping: a JSONata expression string over `$form`, or — for
+     * not-yet-re-saved forms — the legacy `form:`-ref object.
+     */
     overrideMapping;
+    /**
+     * Task id forwarded by the Formio wrapper from the server-prefilled form
+     * ({@code epistola:taskId} value resolver), populated in every Valtimo task-open flow.
+     */
+    taskInstanceId;
+    /**
+     * The computed input overrides (`{ doc, pv }`) the preview renders with, pushed
+     * by the Formio wrapper. Kept separate from the Formio `value`: Valtimo's custom
+     * component bridge only mirrors `value` to the DOM (never to Formio's data
+     * model), so Formio resets it to `emptyValue` on every redraw — which would
+     * cancel the preview. This dedicated input is never touched by Formio.
+     */
+    inputOverrides;
+    /**
+     * Forces the Formio wrapper to recompute the input overrides from the live form
+     * data. Set by the wrapper for override-driven previews; lets the Refresh button
+     * work before the first change (e.g. on initial load with pre-filled fields).
+     */
+    requestOverrides;
+    /**
+     * Current auto-refresh state, forwarded by the wrapper (seeded from the builder's
+     * `autoRefresh` option, default on). Seeds the header toggle's initial state.
+     */
+    autoRefresh;
+    /**
+     * Tells the wrapper to enable/disable auto-refresh (recompute on change/blur).
+     * Set by the wrapper for override-driven previews; called by the header toggle.
+     */
+    setAutoRefresh;
+    /** Runtime state of the header auto-refresh toggle. */
+    autoRefreshEnabled = true;
     loading = false;
     error = null;
     previewUrl = null;
@@ -2901,31 +3744,35 @@ class EpistolaDocumentPreviewComponent {
     initialized = false;
     currentBlobUrl = null;
     previewSubscription;
-    constructor(epistolaPluginService, sanitizer, formIoStateService, cdr, taskContext) {
+    constructor(epistolaPluginService, sanitizer, formIoStateService, cdr) {
         this.epistolaPluginService = epistolaPluginService;
         this.sanitizer = sanitizer;
         this.formIoStateService = formIoStateService;
         this.cdr = cdr;
-        this.taskContext = taskContext;
     }
     /**
-     * Resolve the active task id from {@link EpistolaTaskContextService}, populated
-     * by {@code EpistolaTaskContextInterceptor} on the canonical Valtimo task-open
-     * call. Returns null when used outside a task context (e.g. Formio builder).
+     * The active task id, forwarded by the Formio wrapper from the server-prefilled
+     * form ({@code epistola:taskId} value resolver). Null outside a task context
+     * (e.g. Formio builder), in which case the component fails closed.
      */
     get currentTaskId() {
-        return this.taskContext.taskInstanceId;
+        return this.taskInstanceId ?? null;
     }
-    get overrideMappingScopes() {
-        return this.overrideMapping ? Object.keys(this.overrideMapping) : [];
-    }
-    overrideMappingEntries(scope) {
-        const fields = this.overrideMapping?.[scope];
-        if (!fields || typeof fields !== 'object')
-            return [];
-        return Object.entries(fields).map(([path, field]) => ({ path, field: String(field) }));
+    /**
+     * The override mapping as a JSONata expression for the design-mode summary.
+     * Legacy `form:`-ref objects are converted on the fly for display.
+     */
+    get overrideExpression() {
+        const mapping = this.overrideMapping;
+        if (!mapping)
+            return '';
+        return isLegacyOverrideMapping(mapping) ? legacyOverrideToJsonata(mapping) : String(mapping);
     }
     ngOnChanges(changes) {
+        // Seed the runtime auto-refresh toggle from the wrapper-forwarded state.
+        if (changes['autoRefresh']) {
+            this.autoRefreshEnabled = this.autoRefresh !== false;
+        }
         if (!this.initialized) {
             this.initialized = true;
             // Detect design mode: no runtime context (Formio builder)
@@ -2940,12 +3787,17 @@ class EpistolaDocumentPreviewComponent {
                 this.cdr.markForCheck();
                 return;
             }
-            this.loadPreview();
+            this.triggerPreview();
             return;
         }
-        // React to value changes (input overrides from the Formio wrapper).
-        if (changes['value']) {
-            this.loadPreview();
+        if (this.designMode)
+            return;
+        // React to input-override changes, and to the task id arriving late: the Formio
+        // wrapper sets taskInstanceId after attach, so it can land after the first render —
+        // re-run the preview once it does, instead of leaving the "only available from
+        // within a user task" message until a manual refresh.
+        if (changes['inputOverrides'] || changes['taskInstanceId']) {
+            this.triggerPreview();
         }
     }
     ngOnDestroy() {
@@ -2953,31 +3805,58 @@ class EpistolaDocumentPreviewComponent {
         this.revokeBlobUrl();
     }
     refresh() {
+        // For an override-driven preview whose value isn't ready yet (e.g. initial load
+        // before the overrides have been computed), recompute from the live form data;
+        // the resulting value change drives the preview. Otherwise re-fetch directly.
+        if (this.requestOverrides && !shouldLoadPreview(this.overrideMapping, this.inputOverrides)) {
+            this.requestOverrides();
+            return;
+        }
+        this.triggerPreview();
+    }
+    /** Toggle auto-refresh for this session; flipping it on triggers an immediate refresh. */
+    onToggleAutoRefresh(event) {
+        const enabled = event.target.checked;
+        this.autoRefreshEnabled = enabled;
+        // The wrapper owns the change/blur listeners, so it must learn about the flip;
+        // turning it on recomputes immediately (handled wrapper-side).
+        this.setAutoRefresh?.(enabled);
+        this.cdr.markForCheck();
+    }
+    /**
+     * Load the preview only when there is enough data for it. Override-driven
+     * previews (those with an override mapping) wait until the mapped form data
+     * has been computed; until then they show a placeholder rather than firing a
+     * request that Epistola would reject with a 400 for missing required fields.
+     */
+    triggerPreview() {
+        if (!shouldLoadPreview(this.overrideMapping, this.inputOverrides)) {
+            this.showWaitingForInput();
+            return;
+        }
         this.loadPreview();
     }
+    showWaitingForInput() {
+        this.revokeBlobUrl();
+        this.previewSubscription?.unsubscribe();
+        this.previewUrl = null;
+        this.loading = false;
+        this.error = 'Complete the form to generate a preview.';
+        this.cdr.markForCheck();
+    }
     /**
      * Preview using the explicitly configured process link + input overrides.
      * Requires a runtime task context — the backend authorizes the request against
      * the task's process instance and case document, so all three ids must match.
      */
     loadPreview() {
-        const documentId = this.formIoStateService.documentId;
-        if (!documentId) {
-            this.error = 'Could not determine document ID from context.';
-            this.cdr.markForCheck();
-            return;
-        }
         if (!this.sourceActivityId) {
             this.error = 'Preview is not configured: set the source activity on the form component.';
             this.cdr.markForCheck();
             return;
         }
-        const processInstanceId = this.formIoStateService.processInstanceId;
-        if (!processInstanceId) {
-            this.error = 'Preview is only available from within a running process.';
-            this.cdr.markForCheck();
-            return;
-        }
+        // The backend derives the process instance and case document from the task, so the
+        // task id is the only runtime context the request carries.
         const taskId = this.currentTaskId;
         if (!taskId) {
             this.error = 'Preview is only available from within a user task.';
@@ -2992,11 +3871,8 @@ class EpistolaDocumentPreviewComponent {
         this.previewSubscription = this.epistolaPluginService
             .previewToBlob({
             taskId,
-            documentId,
-            processDefinitionKey: this.processDefinitionKey || null,
-            processInstanceId,
             sourceActivityId: this.sourceActivityId,
-            inputOverrides: this.value || null,
+            inputOverrides: this.inputOverrides || null,
             overrides: null,
         })
             .subscribe({
@@ -3039,8 +3915,8 @@ class EpistolaDocumentPreviewComponent {
             this.previewUrl = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaDocumentPreviewComponent, deps: [{ token: EpistolaPluginService }, { token: i2$4.DomSanitizer }, { token: i3.FormIoStateService }, { token: i0.ChangeDetectorRef }, { token: EpistolaTaskContextService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaDocumentPreviewComponent, isStandalone: true, selector: "epistola-document-preview-component", inputs: { value: "value", disabled: "disabled", label: "label", processDefinitionKey: "processDefinitionKey", sourceActivityId: "sourceActivityId", overrideMapping: "overrideMapping" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaDocumentPreviewComponent, deps: [{ token: EpistolaPluginService }, { token: i2$3.DomSanitizer }, { token: i3.FormIoStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaDocumentPreviewComponent, isStandalone: true, selector: "epistola-document-preview-component", inputs: { value: "value", disabled: "disabled", label: "label", processDefinitionKey: "processDefinitionKey", sourceActivityId: "sourceActivityId", overrideMapping: "overrideMapping", taskInstanceId: "taskInstanceId", inputOverrides: "inputOverrides", requestOverrides: "requestOverrides", autoRefresh: "autoRefresh", setAutoRefresh: "setAutoRefresh" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
     <!-- Design-time view: show configuration summary when no runtime context -->
     <div *ngIf="designMode" class="epistola-preview-panel">
       <div class="preview-header">
@@ -3053,16 +3929,9 @@ class EpistolaDocumentPreviewComponent {
           <div class="design-label">Activity</div>
           <div class="design-value">{{ sourceActivityId }}</div>
         </div>
-        <div class="design-section" *ngIf="overrideMapping">
-          <div class="design-label">Input Overrides</div>
-          <div *ngFor="let scope of overrideMappingScopes" class="design-mapping">
-            <div *ngFor="let entry of overrideMappingEntries(scope)" class="design-entry">
-              <span class="design-scope">{{ scope }}</span
-              >.{{ entry.path }}
-              <i class="mdi mdi-arrow-left"></i>
-              <span class="design-field">{{ entry.field }}</span>
-            </div>
-          </div>
+        <div class="design-section" *ngIf="overrideExpression">
+          <div class="design-label">Input Overrides ($form)</div>
+          <pre class="design-expression">{{ overrideExpression }}</pre>
         </div>
         <div *ngIf="!sourceActivityId" class="design-unconfigured">
           Auto-discover mode (no process link configured)
@@ -3075,6 +3944,18 @@ class EpistolaDocumentPreviewComponent {
       <div class="preview-header">
         <span>{{ label || 'Document Preview' }}</span>
         <div class="preview-controls">
+          <label
+            *ngIf="overrideMapping"
+            class="preview-autorefresh"
+            title="Automatically refresh the preview as you fill in the form"
+          >
+            <input
+              type="checkbox"
+              [checked]="autoRefreshEnabled"
+              (change)="onToggleAutoRefresh($event)"
+            />
+            Auto-refresh
+          </label>
           <button type="button" class="preview-refresh" [disabled]="loading" (click)="refresh()">
             <i class="mdi mdi-refresh mr-1"></i>
             {{ loading ? 'Generating...' : 'Refresh' }}
@@ -3097,7 +3978,7 @@ class EpistolaDocumentPreviewComponent {
         </object>
       </div>
     </div>
-  `, isInline: true, styles: [".epistola-preview-panel{border:1px solid #dee2e6;border-radius:4px;background:#f8f9fa;display:flex;flex-direction:column}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-bottom:1px solid #dee2e6;font-weight:700;color:#495057;flex-wrap:wrap;gap:.5rem}.preview-controls{display:flex;align-items:center;gap:.5rem}.preview-select{border:1px solid #ced4da;border-radius:4px;padding:.25rem .5rem;font-size:.8rem;background:#fff;max-width:300px}.preview-refresh{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.25rem .75rem;font-size:.8rem;cursor:pointer;display:flex;align-items:center;white-space:nowrap}.preview-refresh:hover:not(:disabled){background:#e9ecef}.preview-refresh:disabled{opacity:.5;cursor:not-allowed}.preview-body{display:flex;flex-direction:column;min-height:500px}.preview-loading{padding:2rem;text-align:center;color:#6c757d;font-style:italic}.preview-unavailable{padding:1.5rem;text-align:center;color:#6c757d;font-style:italic}.preview-unavailable i{margin-right:.25rem}.preview-pdf{width:100%;flex:1;min-height:500px}.preview-empty{padding:2rem;text-align:center;color:#6c757d;font-style:italic}.design-info{padding:1rem;min-height:auto}.design-section{margin-bottom:.75rem}.design-label{font-size:.7rem;text-transform:uppercase;color:#868e96;font-weight:600;letter-spacing:.05em}.design-value{font-family:monospace;font-size:.85rem;color:#212529;margin-bottom:.25rem}.design-mapping{margin-top:.25rem}.design-entry{font-family:monospace;font-size:.8rem;color:#495057;padding:.15rem 0}.design-scope{color:#0d6efd}.design-field{color:#198754}.design-entry i{font-size:.7rem;margin:0 .25rem;color:#adb5bd}.design-unconfigured{color:#6c757d;font-style:italic;font-size:.85rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".epistola-preview-panel{border:1px solid #dee2e6;border-radius:4px;background:#f8f9fa;display:flex;flex-direction:column}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-bottom:1px solid #dee2e6;font-weight:700;color:#495057;flex-wrap:wrap;gap:.5rem}.preview-controls{display:flex;align-items:center;gap:.75rem}.preview-autorefresh{display:flex;align-items:center;gap:.3rem;font-size:.8rem;font-weight:400;color:#495057;cursor:pointer;margin:0;white-space:nowrap}.preview-autorefresh input{cursor:pointer;margin:0}.preview-select{border:1px solid #ced4da;border-radius:4px;padding:.25rem .5rem;font-size:.8rem;background:#fff;max-width:300px}.preview-refresh{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.25rem .75rem;font-size:.8rem;cursor:pointer;display:flex;align-items:center;white-space:nowrap}.preview-refresh:hover:not(:disabled){background:#e9ecef}.preview-refresh:disabled{opacity:.5;cursor:not-allowed}.preview-body{display:flex;flex-direction:column;min-height:500px}.preview-loading{padding:2rem;text-align:center;color:#6c757d;font-style:italic}.preview-unavailable{padding:1.5rem;text-align:center;color:#6c757d;font-style:italic}.preview-unavailable i{margin-right:.25rem}.preview-pdf{width:100%;flex:1;min-height:500px}.preview-empty{padding:2rem;text-align:center;color:#6c757d;font-style:italic}.design-info{padding:1rem;min-height:auto}.design-section{margin-bottom:.75rem}.design-label{font-size:.7rem;text-transform:uppercase;color:#868e96;font-weight:600;letter-spacing:.05em}.design-value{font-family:monospace;font-size:.85rem;color:#212529;margin-bottom:.25rem}.design-expression{font-family:monospace;font-size:.8rem;color:#212529;background:#eef0f2;border-radius:4px;padding:.5rem;margin:.25rem 0 0;white-space:pre-wrap;word-break:break-word}.design-unconfigured{color:#6c757d;font-style:italic;font-size:.85rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaDocumentPreviewComponent, decorators: [{
             type: Component,
@@ -3114,16 +3995,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           <div class="design-label">Activity</div>
           <div class="design-value">{{ sourceActivityId }}</div>
         </div>
-        <div class="design-section" *ngIf="overrideMapping">
-          <div class="design-label">Input Overrides</div>
-          <div *ngFor="let scope of overrideMappingScopes" class="design-mapping">
-            <div *ngFor="let entry of overrideMappingEntries(scope)" class="design-entry">
-              <span class="design-scope">{{ scope }}</span
-              >.{{ entry.path }}
-              <i class="mdi mdi-arrow-left"></i>
-              <span class="design-field">{{ entry.field }}</span>
-            </div>
-          </div>
+        <div class="design-section" *ngIf="overrideExpression">
+          <div class="design-label">Input Overrides ($form)</div>
+          <pre class="design-expression">{{ overrideExpression }}</pre>
         </div>
         <div *ngIf="!sourceActivityId" class="design-unconfigured">
           Auto-discover mode (no process link configured)
@@ -3136,6 +4010,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
       <div class="preview-header">
         <span>{{ label || 'Document Preview' }}</span>
         <div class="preview-controls">
+          <label
+            *ngIf="overrideMapping"
+            class="preview-autorefresh"
+            title="Automatically refresh the preview as you fill in the form"
+          >
+            <input
+              type="checkbox"
+              [checked]="autoRefreshEnabled"
+              (change)="onToggleAutoRefresh($event)"
+            />
+            Auto-refresh
+          </label>
           <button type="button" class="preview-refresh" [disabled]="loading" (click)="refresh()">
             <i class="mdi mdi-refresh mr-1"></i>
             {{ loading ? 'Generating...' : 'Refresh' }}
@@ -3158,8 +4044,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         </object>
       </div>
     </div>
-  `, styles: [".epistola-preview-panel{border:1px solid #dee2e6;border-radius:4px;background:#f8f9fa;display:flex;flex-direction:column}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-bottom:1px solid #dee2e6;font-weight:700;color:#495057;flex-wrap:wrap;gap:.5rem}.preview-controls{display:flex;align-items:center;gap:.5rem}.preview-select{border:1px solid #ced4da;border-radius:4px;padding:.25rem .5rem;font-size:.8rem;background:#fff;max-width:300px}.preview-refresh{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.25rem .75rem;font-size:.8rem;cursor:pointer;display:flex;align-items:center;white-space:nowrap}.preview-refresh:hover:not(:disabled){background:#e9ecef}.preview-refresh:disabled{opacity:.5;cursor:not-allowed}.preview-body{display:flex;flex-direction:column;min-height:500px}.preview-loading{padding:2rem;text-align:center;color:#6c757d;font-style:italic}.preview-unavailable{padding:1.5rem;text-align:center;color:#6c757d;font-style:italic}.preview-unavailable i{margin-right:.25rem}.preview-pdf{width:100%;flex:1;min-height:500px}.preview-empty{padding:2rem;text-align:center;color:#6c757d;font-style:italic}.design-info{padding:1rem;min-height:auto}.design-section{margin-bottom:.75rem}.design-label{font-size:.7rem;text-transform:uppercase;color:#868e96;font-weight:600;letter-spacing:.05em}.design-value{font-family:monospace;font-size:.85rem;color:#212529;margin-bottom:.25rem}.design-mapping{margin-top:.25rem}.design-entry{font-family:monospace;font-size:.8rem;color:#495057;padding:.15rem 0}.design-scope{color:#0d6efd}.design-field{color:#198754}.design-entry i{font-size:.7rem;margin:0 .25rem;color:#adb5bd}.design-unconfigured{color:#6c757d;font-style:italic;font-size:.85rem}\n"] }]
-        }], ctorParameters: () => [{ type: EpistolaPluginService }, { type: i2$4.DomSanitizer }, { type: i3.FormIoStateService }, { type: i0.ChangeDetectorRef }, { type: EpistolaTaskContextService }], propDecorators: { value: [{
+  `, styles: [".epistola-preview-panel{border:1px solid #dee2e6;border-radius:4px;background:#f8f9fa;display:flex;flex-direction:column}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-bottom:1px solid #dee2e6;font-weight:700;color:#495057;flex-wrap:wrap;gap:.5rem}.preview-controls{display:flex;align-items:center;gap:.75rem}.preview-autorefresh{display:flex;align-items:center;gap:.3rem;font-size:.8rem;font-weight:400;color:#495057;cursor:pointer;margin:0;white-space:nowrap}.preview-autorefresh input{cursor:pointer;margin:0}.preview-select{border:1px solid #ced4da;border-radius:4px;padding:.25rem .5rem;font-size:.8rem;background:#fff;max-width:300px}.preview-refresh{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.25rem .75rem;font-size:.8rem;cursor:pointer;display:flex;align-items:center;white-space:nowrap}.preview-refresh:hover:not(:disabled){background:#e9ecef}.preview-refresh:disabled{opacity:.5;cursor:not-allowed}.preview-body{display:flex;flex-direction:column;min-height:500px}.preview-loading{padding:2rem;text-align:center;color:#6c757d;font-style:italic}.preview-unavailable{padding:1.5rem;text-align:center;color:#6c757d;font-style:italic}.preview-unavailable i{margin-right:.25rem}.preview-pdf{width:100%;flex:1;min-height:500px}.preview-empty{padding:2rem;text-align:center;color:#6c757d;font-style:italic}.design-info{padding:1rem;min-height:auto}.design-section{margin-bottom:.75rem}.design-label{font-size:.7rem;text-transform:uppercase;color:#868e96;font-weight:600;letter-spacing:.05em}.design-value{font-family:monospace;font-size:.85rem;color:#212529;margin-bottom:.25rem}.design-expression{font-family:monospace;font-size:.8rem;color:#212529;background:#eef0f2;border-radius:4px;padding:.5rem;margin:.25rem 0 0;white-space:pre-wrap;word-break:break-word}.design-unconfigured{color:#6c757d;font-style:italic;font-size:.85rem}\n"] }]
+        }], ctorParameters: () => [{ type: EpistolaPluginService }, { type: i2$3.DomSanitizer }, { type: i3.FormIoStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], valueChange: [{
                 type: Output
@@ -3173,8 +4059,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }], overrideMapping: [{
                 type: Input
+            }], taskInstanceId: [{
+                type: Input
+            }], inputOverrides: [{
+                type: Input
+            }], requestOverrides: [{
+                type: Input
+            }], autoRefresh: [{
+                type: Input
+            }], setAutoRefresh: [{
+                type: Input
             }] } });
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 class EpistolaAdminPageComponent {
     adminService;
     route;
@@ -3182,18 +4095,28 @@ class EpistolaAdminPageComponent {
     cards = [];
     selectedCard = null;
     activeTab = 'actions';
+    // NOTE: the 'forms' tab is TEMPORARY (remove in 1.0.0) — see the carrier-repair block below.
     overviewTab = 'configurations';
     loading = false;
     pluginVersion = null;
     changelog = null;
     changelogLoading = false;
-    validationViolations = [];
+    validationReport = null;
     reconcilingExecutionIds = new Set();
     reconcileFeedback = null;
     catalogs = [];
     catalogsLoading = false;
     redeployingSlugs = new Set();
     catalogFeedback = null;
+    // TEMPORARY (removed in 1.0.0): task-id carrier detection + repair.
+    formIssues = null;
+    formIssuesLoading = false;
+    repairingFormIds = new Set();
+    repairingAll = false;
+    formFeedback = null;
+    // TEMPORARY: forms still using the legacy override-mapping object format.
+    legacyOverrideForms = null;
+    legacyOverrideLoading = false;
     connectionStatuses = [];
     usageEntries = [];
     pendingJobs = [];
@@ -3206,6 +4129,22 @@ class EpistolaAdminPageComponent {
         this.route = route;
         this.router = router;
     }
+    /** Violations from the latest report (empty when healthy or not yet loaded). */
+    get validationViolations() {
+        return this.validationReport?.violations ?? [];
+    }
+    /** Scan cadence in whole minutes, for the "refreshes every N min" note. */
+    get refreshIntervalMinutes() {
+        return Math.round((this.validationReport?.refreshIntervalMs ?? 600000) / 60000);
+    }
+    /** Combined "forms needing attention" count for the tab badge (carrier + legacy override). */
+    get formsAttentionCount() {
+        return (this.formIssues?.length ?? 0) + (this.legacyOverrideForms?.length ?? 0);
+    }
+    /** Whether the forms tab has loaded at least one of its two scans. */
+    get formsScanLoaded() {
+        return this.formIssues !== null || this.legacyOverrideForms !== null;
+    }
     ngOnInit() {
         this.deepLinkConfigId = this.route.snapshot.queryParamMap.get('configurationId');
         const tab = this.route.snapshot.queryParamMap.get('tab');
@@ -3232,11 +4171,96 @@ class EpistolaAdminPageComponent {
         this.activeTab = tab;
         this.updateUrl(this.selectedCard?.configurationId ?? null, tab);
     }
+    // 'forms' is TEMPORARY (remove in 1.0.0).
     setOverviewTab(tab) {
         this.overviewTab = tab;
         if (tab === 'changelog' && this.changelog === null && !this.changelogLoading) {
             this.loadChangelog();
         }
+        if (tab === 'forms' && this.formIssues === null && !this.formIssuesLoading) {
+            this.loadFormIssues();
+        }
+        if (tab === 'forms' && this.legacyOverrideForms === null && !this.legacyOverrideLoading) {
+            this.loadLegacyOverrideForms();
+        }
+    }
+    // ---- TEMPORARY: legacy override-mapping format detection ----
+    loadLegacyOverrideForms() {
+        this.legacyOverrideLoading = true;
+        this.adminService.getLegacyOverrideForms().subscribe({
+            next: (forms) => {
+                this.legacyOverrideForms = forms;
+                this.legacyOverrideLoading = false;
+            },
+            error: () => {
+                this.legacyOverrideForms = [];
+                this.legacyOverrideLoading = false;
+            },
+        });
+    }
+    // ---- TEMPORARY (removed in 1.0.0): task-id carrier detection + repair ----
+    loadFormIssues() {
+        this.formIssuesLoading = true;
+        this.formFeedback = null;
+        this.adminService.getFormCarrierIssues().subscribe({
+            next: (issues) => {
+                this.formIssues = issues;
+                this.formIssuesLoading = false;
+            },
+            error: () => {
+                this.formIssues = [];
+                this.formIssuesLoading = false;
+            },
+        });
+    }
+    isRepairingForm(issue) {
+        return this.repairingFormIds.has(issue.formId);
+    }
+    repairForm(issue) {
+        if (this.repairingFormIds.has(issue.formId)) {
+            return;
+        }
+        this.repairingFormIds.add(issue.formId);
+        this.formFeedback = null;
+        this.adminService.repairFormCarrier(issue.formId).subscribe({
+            next: (result) => {
+                this.repairingFormIds.delete(issue.formId);
+                this.formFeedback = {
+                    formId: issue.formId,
+                    type: 'success',
+                    message: `OK — ${result.componentsPatched} component(s) patched`,
+                };
+                this.loadFormIssues();
+            },
+            error: (err) => {
+                this.repairingFormIds.delete(issue.formId);
+                const message = err?.error?.errorMessage ?? err?.error?.message ?? err?.message ?? 'unknown error';
+                this.formFeedback = { formId: issue.formId, type: 'error', message };
+            },
+        });
+    }
+    repairAllForms() {
+        if (this.repairingAll) {
+            return;
+        }
+        this.repairingAll = true;
+        this.formFeedback = null;
+        this.adminService.repairAllFormCarriers().subscribe({
+            next: (summary) => {
+                this.repairingAll = false;
+                this.formFeedback = {
+                    formId: 'all',
+                    type: summary.failed > 0 ? 'error' : 'success',
+                    message: `Repaired ${summary.formsRepaired} form(s), ${summary.componentsPatched} component(s)${summary.failed > 0 ? `, ${summary.failed} failed` : ''}`,
+                };
+                this.loadFormIssues();
+            },
+            error: (err) => {
+                this.repairingAll = false;
+                const message = err?.error?.message ?? err?.message ?? 'unknown error';
+                this.formFeedback = { formId: 'all', type: 'error', message };
+            },
+        });
     }
     loadChangelog() {
         this.changelogLoading = true;
@@ -3425,14 +4449,14 @@ class EpistolaAdminPageComponent {
                 this.tryBuildCards();
             },
         });
-        // Validation violations are independent of cards — load alongside but don't
-        // gate the loading flag on them.
-        this.adminService.getValidationViolations().subscribe({
-            next: (violations) => {
-                this.validationViolations = violations;
+        // Validation report is independent of cards — load alongside but don't
+        // gate the loading flag on it.
+        this.adminService.getValidationReport().subscribe({
+            next: (report) => {
+                this.validationReport = report;
             },
             error: () => {
-                this.validationViolations = [];
+                this.validationReport = null;
             },
         });
     }
@@ -3476,14 +4500,31 @@ class EpistolaAdminPageComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminPageComponent, deps: [{ token: EpistolaAdminService }, { token: i2$5.ActivatedRoute }, { token: i2$5.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaAdminPageComponent, isStandalone: true, selector: "epistola-admin-page", ngImport: i0, template: "<div class=\"epistola-admin\">\n  <!-- Overview: tabs (no configuration selected) -->\n  <ng-container *ngIf=\"!selectedCard\">\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\n      <div class=\"d-flex align-items-center\">\n        <h5 class=\"mb-0\">{{ 'epistolaAdminOverview' | pluginTranslate: 'epistola' | async }}</h5>\n        <span *ngIf=\"pluginVersion\" class=\"version-badge ms-2\">v{{ pluginVersion }}</span>\n      </div>\n      <button class=\"btn btn-outline-primary btn-sm\" (click)=\"refresh()\" [disabled]=\"loading\">\n        {{ 'epistolaAdminRefresh' | pluginTranslate: 'epistola' | async }}\n      </button>\n    </div>\n\n    <ng-template #configurationsHeading>\n      {{ 'epistolaAdminConfigurations' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ cards.length }}</cds-tag>\n    </ng-template>\n\n    <ng-template #validationsHeading>\n      {{ 'epistolaAdminValidations' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" [type]=\"validationViolations.length > 0 ? 'red' : 'gray'\" class=\"ms-1\">\n        {{ validationViolations.length }}\n      </cds-tag>\n    </ng-template>\n\n    <ng-template #changelogHeading>\n      {{ 'epistolaAdminChangelog' | pluginTranslate: 'epistola' | async }}\n    </ng-template>\n\n    <cds-tabs [cacheActive]=\"true\" type=\"contained\">\n      <cds-tab\n        [heading]=\"configurationsHeading\"\n        [active]=\"overviewTab === 'configurations'\"\n        (selected)=\"setOverviewTab('configurations')\"\n      >\n        <div *ngIf=\"loading\" class=\"text-muted mt-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!loading && cards.length === 0\" class=\"text-muted mt-3\">\n          {{ 'epistolaAdminNoConfigurations' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!loading && cards.length > 0\" class=\"card-grid\">\n          <div\n            *ngFor=\"let card of cards\"\n            class=\"config-card\"\n            [class.config-card--ok]=\"card.reachable && card.problemCount === 0\"\n            [class.config-card--warning]=\"card.reachable && card.problemCount > 0\"\n            [class.config-card--error]=\"!card.reachable\"\n            (click)=\"selectConfiguration(card)\"\n          >\n            <div class=\"config-card__header\">\n              <span\n                class=\"status-dot\"\n                [class.status-dot--ok]=\"card.reachable\"\n                [class.status-dot--error]=\"!card.reachable\"\n              >\n              </span>\n              <h5 class=\"config-card__title\">{{ card.configurationTitle }}</h5>\n            </div>\n\n            <div class=\"config-card__body\">\n              <div class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminTenantId' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <code class=\"config-card__value\">{{ card.tenantId }}</code>\n              </div>\n              <div class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminStatus' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <cds-tag size=\"sm\" [type]=\"card.reachable ? 'green' : 'red'\">\n                  {{\n                    card.reachable\n                      ? ('epistolaAdminConnected' | pluginTranslate: 'epistola' | async)\n                      : ('epistolaAdminUnreachable' | pluginTranslate: 'epistola' | async)\n                  }}\n                </cds-tag>\n              </div>\n              <div *ngIf=\"card.serverVersion\" class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminServerVersion' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <span class=\"config-card__value\">{{ card.serverVersion }}</span>\n              </div>\n              <div class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminPluginActions' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <span class=\"config-card__value\">{{ card.usageCount }}</span>\n              </div>\n              <div *ngIf=\"card.pendingJobs.length > 0\" class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminPendingJobs' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <cds-tag size=\"sm\" type=\"blue\">{{ card.pendingJobs.length }}</cds-tag>\n              </div>\n              <div *ngIf=\"card.problemCount > 0\" class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminProblems' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <cds-tag size=\"sm\" type=\"red\">{{ card.problemCount }}</cds-tag>\n              </div>\n            </div>\n\n            <div class=\"config-card__footer\">\n              <span class=\"config-card__latency\">{{ card.latencyMs }} ms</span>\n            </div>\n          </div>\n        </div>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"validationsHeading\"\n        [active]=\"overviewTab === 'validations'\"\n        (selected)=\"setOverviewTab('validations')\"\n      >\n        <div *ngIf=\"validationViolations.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoValidations' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"validationViolations.length > 0\" class=\"mt-3\">\n          <p class=\"text-muted mb-3\">\n            {{ 'epistolaAdminValidationWarningBody' | pluginTranslate: 'epistola' | async }}\n          </p>\n          <table class=\"table table-striped\">\n            <thead>\n              <tr>\n                <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n                <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n                <th>{{ 'epistolaAdminValidationCode' | pluginTranslate: 'epistola' | async }}</th>\n                <th>\n                  {{ 'epistolaAdminValidationMessage' | pluginTranslate: 'epistola' | async }}\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let v of validationViolations\">\n                <td>\n                  {{ v.processDefinitionName || v.processDefinitionKey }}\n                  <div *ngIf=\"v.processDefinitionName\" class=\"text-muted small\">\n                    <code>{{ v.processDefinitionKey }}</code>\n                  </div>\n                </td>\n                <td>\n                  <code>{{ v.activityId }}</code>\n                </td>\n                <td>\n                  <cds-tag size=\"sm\" type=\"red\">{{ v.code }}</cds-tag>\n                </td>\n                <td>{{ v.message }}</td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"changelogHeading\"\n        [active]=\"overviewTab === 'changelog'\"\n        (selected)=\"setOverviewTab('changelog')\"\n      >\n        <div class=\"d-flex align-items-center mt-3 mb-3\">\n          <span class=\"text-muted me-2\">{{\n            'epistolaAdminRunningVersion' | pluginTranslate: 'epistola' | async\n          }}</span>\n          <cds-tag size=\"sm\" type=\"blue\">v{{ pluginVersion || '\u2014' }}</cds-tag>\n        </div>\n\n        <div *ngIf=\"changelogLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!changelogLoading && changelog && changelog.length === 0\"\n          class=\"text-muted mb-3\"\n        >\n          {{ 'epistolaAdminNoChangelog' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!changelogLoading && changelog && changelog.length > 0\"\n          class=\"epistola-changelog\"\n        >\n          <section *ngFor=\"let release of changelog\" class=\"changelog-release\">\n            <div class=\"changelog-release__header\">\n              <cds-tag size=\"sm\" type=\"purple\">{{ release.version }}</cds-tag>\n              <span *ngIf=\"release.date\" class=\"text-muted ms-2\">{{ release.date }}</span>\n            </div>\n            <div *ngFor=\"let section of release.sections\" class=\"changelog-section\">\n              <h6 class=\"changelog-section__title\">{{ section.title }}</h6>\n              <ul class=\"changelog-section__items\">\n                <li *ngFor=\"let item of section.items\">{{ item }}</li>\n              </ul>\n            </div>\n          </section>\n        </div>\n      </cds-tab>\n    </cds-tabs>\n  </ng-container>\n\n  <!-- Detail view: selected configuration -->\n  <ng-container *ngIf=\"selectedCard\">\n    <div class=\"detail-header mb-3\">\n      <button class=\"btn btn-link btn-sm p-0\" (click)=\"backToOverview()\">\n        &larr; {{ 'epistolaAdminBackToOverview' | pluginTranslate: 'epistola' | async }}\n      </button>\n    </div>\n\n    <div class=\"detail-summary mb-4\">\n      <h4>\n        <span\n          class=\"status-dot me-2\"\n          [class.status-dot--ok]=\"selectedCard.reachable\"\n          [class.status-dot--error]=\"!selectedCard.reachable\"\n        >\n        </span>\n        {{ selectedCard.configurationTitle }}\n      </h4>\n\n      <table class=\"table table-sm detail-info-table\">\n        <tbody>\n          <tr>\n            <th>{{ 'epistolaAdminTenantId' | pluginTranslate: 'epistola' | async }}</th>\n            <td>\n              <code>{{ selectedCard.tenantId }}</code>\n            </td>\n          </tr>\n          <tr>\n            <th>{{ 'epistolaAdminStatus' | pluginTranslate: 'epistola' | async }}</th>\n            <td>\n              <cds-tag size=\"sm\" [type]=\"selectedCard.reachable ? 'green' : 'red'\">\n                {{\n                  selectedCard.reachable\n                    ? ('epistolaAdminConnected' | pluginTranslate: 'epistola' | async)\n                    : ('epistolaAdminUnreachable' | pluginTranslate: 'epistola' | async)\n                }}\n              </cds-tag>\n              <span class=\"text-muted ms-2\">{{ selectedCard.latencyMs }} ms</span>\n            </td>\n          </tr>\n          <tr *ngIf=\"selectedCard.serverVersion\">\n            <th>{{ 'epistolaAdminServerVersion' | pluginTranslate: 'epistola' | async }}</th>\n            <td>{{ selectedCard.serverVersion }}</td>\n          </tr>\n          <tr *ngIf=\"selectedCard.errorMessage\">\n            <th>{{ 'epistolaAdminError' | pluginTranslate: 'epistola' | async }}</th>\n            <td class=\"text-danger\">{{ selectedCard.errorMessage }}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <!-- Tabs -->\n    <ng-template #actionsHeading>\n      {{ 'epistolaAdminPluginActions' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ selectedCard.usageEntries.length }}</cds-tag>\n    </ng-template>\n\n    <ng-template #pendingHeading>\n      {{ 'epistolaAdminPendingJobs' | pluginTranslate: 'epistola' | async }}\n      <cds-tag\n        size=\"sm\"\n        [type]=\"selectedCard.pendingJobs.length > 0 ? 'blue' : 'gray'\"\n        class=\"ms-1\"\n      >\n        {{ selectedCard.pendingJobs.length }}\n      </cds-tag>\n    </ng-template>\n\n    <ng-template #catalogsHeading>\n      {{ 'epistolaAdminCatalogs' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ catalogs.length }}</cds-tag>\n    </ng-template>\n\n    <cds-tabs [cacheActive]=\"true\" type=\"contained\">\n      <cds-tab\n        [heading]=\"actionsHeading\"\n        [active]=\"activeTab === 'actions'\"\n        (selected)=\"setActiveTab('actions')\"\n      >\n        <div *ngIf=\"selectedCard.usageEntries.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoUsageForConfig' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"selectedCard.usageEntries.length > 0\" class=\"table table-striped mt-3\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminCase' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminAction' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminProblems' | pluginTranslate: 'epistola' | async }}</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr\n              *ngFor=\"let entry of selectedCard.usageEntries\"\n              [class.table-warning]=\"entry.problems.length > 0\"\n            >\n              <td>{{ entry.caseDefinitionKey || '-' }}</td>\n              <td>\n                <a\n                  *ngIf=\"entry.caseDefinitionKey && entry.caseDefinitionVersionTag\"\n                  [routerLink]=\"[\n                    '/case-management',\n                    'case',\n                    entry.caseDefinitionKey,\n                    'version',\n                    entry.caseDefinitionVersionTag,\n                    'processes',\n                    entry.processDefinitionKey,\n                  ]\"\n                  class=\"usage-link\"\n                >\n                  {{ entry.processDefinitionName }}\n                </a>\n                <span *ngIf=\"!entry.caseDefinitionKey || !entry.caseDefinitionVersionTag\">\n                  {{ entry.processDefinitionName }}\n                </span>\n              </td>\n              <td>{{ entry.activityName }}</td>\n              <td>\n                <code>{{ entry.actionKey }}</code>\n              </td>\n              <td>\n                <cds-tag *ngIf=\"entry.problems.length === 0\" size=\"sm\" type=\"green\">OK</cds-tag>\n                <cds-tag\n                  *ngFor=\"let problem of entry.problems\"\n                  size=\"sm\"\n                  type=\"red\"\n                  class=\"d-block mb-1\"\n                >\n                  {{ problem }}\n                </cds-tag>\n              </td>\n              <td>\n                <button\n                  class=\"btn btn-sm btn-outline-secondary\"\n                  (click)=\"exportProcessLink(entry)\"\n                  [title]=\"'epistolaAdminExport' | pluginTranslate: 'epistola' | async\"\n                >\n                  &#x2913;\n                </button>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"pendingHeading\"\n        [active]=\"activeTab === 'pending'\"\n        (selected)=\"setActiveTab('pending')\"\n      >\n        <div *ngIf=\"selectedCard.pendingJobs.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoPendingJobs' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"selectedCard.pendingJobs.length > 0\" class=\"table table-striped mt-3\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminRequestId' | pluginTranslate: 'epistola' | async }}</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let job of selectedCard.pendingJobs\">\n              <td>{{ job.processDefinitionName }}</td>\n              <td>{{ job.activityName }}</td>\n              <td>\n                <code>{{ job.requestId }}</code>\n              </td>\n              <td class=\"text-end\">\n                <button\n                  class=\"btn btn-sm btn-outline-primary\"\n                  (click)=\"reconcilePending(job)\"\n                  [disabled]=\"isReconciling(job)\"\n                  [title]=\"'epistolaAdminReconcileTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  <span *ngIf=\"!isReconciling(job)\">\n                    {{ 'epistolaAdminReconcile' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                  <span *ngIf=\"isReconciling(job)\">\n                    {{ 'epistolaAdminReconciling' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                </button>\n                <div\n                  *ngIf=\"reconcileFeedback && reconcileFeedback.executionId === job.executionId\"\n                  class=\"reconcile-feedback small mt-1\"\n                  [class.text-success]=\"reconcileFeedback.type === 'success'\"\n                  [class.text-warning]=\"reconcileFeedback.type === 'pending'\"\n                  [class.text-danger]=\"reconcileFeedback.type === 'error'\"\n                >\n                  {{ reconcileFeedback.message }}\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"catalogsHeading\"\n        [active]=\"activeTab === 'catalogs'\"\n        (selected)=\"setActiveTab('catalogs')\"\n      >\n        <p class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminCatalogsIntro' | pluginTranslate: 'epistola' | async }}\n        </p>\n\n        <div *ngIf=\"catalogsLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!catalogsLoading && catalogs.length === 0\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminNoCatalogs' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"!catalogsLoading && catalogs.length > 0\" class=\"table table-striped\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminCatalogSlug' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminCatalogVersion' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminCatalogStatus' | pluginTranslate: 'epistola' | async }}</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let catalog of catalogs\">\n              <td>\n                <code>{{ catalog.slug }}</code>\n              </td>\n              <td>{{ catalog.version }}</td>\n              <td>\n                <cds-tag *ngIf=\"catalog.status === 'IN_EPISTOLA'\" size=\"sm\" type=\"green\">\n                  {{ 'epistolaAdminCatalogInEpistola' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n                <cds-tag *ngIf=\"catalog.status === 'NOT_IN_EPISTOLA'\" size=\"sm\" type=\"red\">\n                  {{ 'epistolaAdminCatalogNotInEpistola' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n                <cds-tag *ngIf=\"catalog.status === 'UNKNOWN'\" size=\"sm\" type=\"gray\">\n                  {{ 'epistolaAdminCatalogStatusUnknown' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n              </td>\n              <td class=\"text-end\">\n                <button\n                  class=\"btn btn-sm btn-outline-primary\"\n                  (click)=\"redeployCatalog(catalog)\"\n                  [disabled]=\"isRedeploying(catalog)\"\n                  [title]=\"'epistolaAdminRedeployTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  <span *ngIf=\"!isRedeploying(catalog)\">\n                    {{ 'epistolaAdminRedeploy' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                  <span *ngIf=\"isRedeploying(catalog)\">\n                    {{ 'epistolaAdminRedeploying' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                </button>\n                <div\n                  *ngIf=\"catalogFeedback && catalogFeedback.slug === catalog.slug\"\n                  class=\"reconcile-feedback small mt-1\"\n                  [class.text-success]=\"catalogFeedback.type === 'success'\"\n                  [class.text-danger]=\"catalogFeedback.type === 'error'\"\n                >\n                  {{ catalogFeedback.message }}\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n    </cds-tabs>\n  </ng-container>\n</div>\n", styles: [".epistola-admin{padding:1.5rem}.epistola-admin .version-badge{font-size:.75rem;font-weight:500;padding:.2em .6em;border-radius:4px;background-color:#e8e8e8;color:#525252}.epistola-admin .badge{font-size:.85em;padding:.35em .65em}.epistola-admin code{font-size:.9em;color:#525252}.epistola-admin table th{font-weight:600;white-space:nowrap}.epistola-admin .status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.5rem;flex-shrink:0;background-color:#adb5bd}.epistola-admin .status-dot--ok{background-color:#198754}.epistola-admin .status-dot--error{background-color:#dc3545}.epistola-admin .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}.epistola-admin .config-card{border:1px solid #dee2e6;border-radius:8px;padding:1.25rem;cursor:pointer;transition:box-shadow .15s ease,border-color .15s ease;background:#fff}.epistola-admin .config-card:hover{box-shadow:0 2px 8px #0000001a}.epistola-admin .config-card--ok{border-left:4px solid #198754}.epistola-admin .config-card--warning{border-left:4px solid #ffc107}.epistola-admin .config-card--error{border-left:4px solid #dc3545}.epistola-admin .config-card__header{display:flex;align-items:center;margin-bottom:1rem}.epistola-admin .config-card__title{margin:0;font-size:1.05rem;font-weight:600;color:#161616}.epistola-admin .config-card__body{display:flex;flex-direction:column;gap:.5rem}.epistola-admin .config-card__field{display:flex;justify-content:space-between;align-items:center}.epistola-admin .config-card__label{font-size:.875rem;color:#6c757d}.epistola-admin .config-card__value{font-size:.875rem;color:#161616}.epistola-admin .config-card__footer{margin-top:1rem;padding-top:.75rem;border-top:1px solid #f0f0f0;text-align:right}.epistola-admin .config-card__latency{font-size:.8rem;color:#adb5bd}.epistola-admin .usage-link{color:#0f62fe;text-decoration:none}.epistola-admin .usage-link:hover{text-decoration:underline}.epistola-admin .detail-info-table{max-width:500px}.epistola-admin .detail-info-table th{width:140px}.epistola-admin .detail-summary{padding:1rem 0;border-bottom:1px solid #dee2e6}.epistola-admin .epistola-changelog{max-height:60vh;overflow:auto;padding:.5rem 1rem;border:1px solid #dee2e6;border-radius:4px}.epistola-admin .epistola-changelog .changelog-release{padding:.75rem 0}.epistola-admin .epistola-changelog .changelog-release+.changelog-release{border-top:1px solid #eee}.epistola-admin .epistola-changelog .changelog-release__header{display:flex;align-items:center;margin-bottom:.5rem}.epistola-admin .epistola-changelog .changelog-section{margin:.25rem 0 .75rem}.epistola-admin .epistola-changelog .changelog-section__title{font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:#6f6f6f;margin-bottom:.25rem}.epistola-admin .epistola-changelog .changelog-section__items{margin:0;padding-left:1.25rem;font-size:.8125rem;line-height:1.5}.epistola-admin .epistola-changelog .changelog-section__items li{margin-bottom:.25rem;word-break:break-word}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i5$1.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i5$1.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i6.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminPageComponent, deps: [{ token: EpistolaAdminService }, { token: i2$4.ActivatedRoute }, { token: i2$4.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaAdminPageComponent, isStandalone: true, selector: "epistola-admin-page", ngImport: i0, template: "<div class=\"epistola-admin\">\n  <!-- Overview: tabs (no configuration selected) -->\n  <ng-container *ngIf=\"!selectedCard\">\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\n      <div class=\"d-flex align-items-center\">\n        <h5 class=\"mb-0\">{{ 'epistolaAdminOverview' | pluginTranslate: 'epistola' | async }}</h5>\n        <span *ngIf=\"pluginVersion\" class=\"version-badge ms-2\">v{{ pluginVersion }}</span>\n      </div>\n      <button class=\"btn btn-outline-primary btn-sm\" (click)=\"refresh()\" [disabled]=\"loading\">\n        {{ 'epistolaAdminRefresh' | pluginTranslate: 'epistola' | async }}\n      </button>\n    </div>\n\n    <ng-template #configurationsHeading>\n      {{ 'epistolaAdminConfigurations' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ cards.length }}</cds-tag>\n    </ng-template>\n\n    <ng-template #validationsHeading>\n      {{ 'epistolaAdminValidations' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" [type]=\"validationViolations.length > 0 ? 'red' : 'gray'\" class=\"ms-1\">\n        {{ validationViolations.length }}\n      </cds-tag>\n    </ng-template>\n\n    <ng-template #changelogHeading>\n      {{ 'epistolaAdminChangelog' | pluginTranslate: 'epistola' | async }}\n    </ng-template>\n\n    <!-- TEMPORARY (removed in 1.0.0): forms missing the task-id carrier -->\n    <ng-template #formsHeading>\n      {{ 'epistolaAdminForms' | pluginTranslate: 'epistola' | async }}\n      <cds-tag\n        *ngIf=\"formsScanLoaded\"\n        size=\"sm\"\n        [type]=\"formsAttentionCount > 0 ? 'red' : 'gray'\"\n        class=\"ms-1\"\n        >{{ formsAttentionCount }}</cds-tag\n      >\n    </ng-template>\n\n    <cds-tabs [cacheActive]=\"true\" type=\"contained\">\n      <cds-tab\n        [heading]=\"configurationsHeading\"\n        [active]=\"overviewTab === 'configurations'\"\n        (selected)=\"setOverviewTab('configurations')\"\n      >\n        <div *ngIf=\"loading\" class=\"text-muted mt-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!loading && cards.length === 0\" class=\"text-muted mt-3\">\n          {{ 'epistolaAdminNoConfigurations' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!loading && cards.length > 0\" class=\"card-grid\">\n          <div\n            *ngFor=\"let card of cards\"\n            class=\"config-card\"\n            [class.config-card--ok]=\"card.reachable && card.problemCount === 0\"\n            [class.config-card--warning]=\"card.reachable && card.problemCount > 0\"\n            [class.config-card--error]=\"!card.reachable\"\n            (click)=\"selectConfiguration(card)\"\n          >\n            <div class=\"config-card__header\">\n              <span\n                class=\"status-dot\"\n                [class.status-dot--ok]=\"card.reachable\"\n                [class.status-dot--error]=\"!card.reachable\"\n              >\n              </span>\n              <h5 class=\"config-card__title\">{{ card.configurationTitle }}</h5>\n            </div>\n\n            <div class=\"config-card__body\">\n              <div class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminTenantId' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <code class=\"config-card__value\">{{ card.tenantId }}</code>\n              </div>\n              <div class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminStatus' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <cds-tag size=\"sm\" [type]=\"card.reachable ? 'green' : 'red'\">\n                  {{\n                    card.reachable\n                      ? ('epistolaAdminConnected' | pluginTranslate: 'epistola' | async)\n                      : ('epistolaAdminUnreachable' | pluginTranslate: 'epistola' | async)\n                  }}\n                </cds-tag>\n              </div>\n              <div *ngIf=\"card.serverVersion\" class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminServerVersion' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <span class=\"config-card__value\">{{ card.serverVersion }}</span>\n              </div>\n              <div class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminPluginActions' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <span class=\"config-card__value\">{{ card.usageCount }}</span>\n              </div>\n              <div *ngIf=\"card.pendingJobs.length > 0\" class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminPendingJobs' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <cds-tag size=\"sm\" type=\"blue\">{{ card.pendingJobs.length }}</cds-tag>\n              </div>\n              <div *ngIf=\"card.problemCount > 0\" class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminProblems' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <cds-tag size=\"sm\" type=\"red\">{{ card.problemCount }}</cds-tag>\n              </div>\n            </div>\n\n            <div class=\"config-card__footer\">\n              <span class=\"config-card__latency\">{{ card.latencyMs }} ms</span>\n            </div>\n          </div>\n        </div>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"validationsHeading\"\n        [active]=\"overviewTab === 'validations'\"\n        (selected)=\"setOverviewTab('validations')\"\n      >\n        <div class=\"text-muted small mt-3\">\n          <div>\n            {{ 'epistolaAdminValidationLastChecked' | pluginTranslate: 'epistola' | async }}:\n            <ng-container *ngIf=\"validationReport?.lastCheckedAt; else notYetRun\">\n              {{ validationReport?.lastCheckedAt | date: 'medium' }}\n            </ng-container>\n            <ng-template #notYetRun>\n              {{ 'epistolaAdminValidationNotYetRun' | pluginTranslate: 'epistola' | async }}\n            </ng-template>\n            \u00B7 {{ 'epistolaAdminValidationAutoRefresh' | pluginTranslate: 'epistola' | async }}\n            {{ refreshIntervalMinutes }} min.\n          </div>\n          <div>\n            {{ 'epistolaAdminValidationLatestVersionNote' | pluginTranslate: 'epistola' | async }}\n          </div>\n        </div>\n\n        <div *ngIf=\"validationViolations.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoValidations' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"validationViolations.length > 0\" class=\"mt-3\">\n          <p class=\"text-muted mb-3\">\n            {{ 'epistolaAdminValidationWarningBody' | pluginTranslate: 'epistola' | async }}\n          </p>\n          <table class=\"table table-striped\">\n            <thead>\n              <tr>\n                <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n                <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n                <th>{{ 'epistolaAdminValidationCode' | pluginTranslate: 'epistola' | async }}</th>\n                <th>\n                  {{ 'epistolaAdminValidationMessage' | pluginTranslate: 'epistola' | async }}\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let v of validationViolations\">\n                <td>\n                  {{ v.processDefinitionName || v.processDefinitionKey }}\n                  <div *ngIf=\"v.processDefinitionName\" class=\"text-muted small\">\n                    <code>{{ v.processDefinitionKey }}</code>\n                  </div>\n                </td>\n                <td>\n                  <code>{{ v.activityId }}</code>\n                </td>\n                <td>\n                  <cds-tag size=\"sm\" type=\"red\">{{ v.code }}</cds-tag>\n                </td>\n                <td>{{ v.message }}</td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"changelogHeading\"\n        [active]=\"overviewTab === 'changelog'\"\n        (selected)=\"setOverviewTab('changelog')\"\n      >\n        <div class=\"d-flex align-items-center mt-3 mb-3\">\n          <span class=\"text-muted me-2\">{{\n            'epistolaAdminRunningVersion' | pluginTranslate: 'epistola' | async\n          }}</span>\n          <cds-tag size=\"sm\" type=\"blue\">v{{ pluginVersion || '\u2014' }}</cds-tag>\n        </div>\n\n        <div *ngIf=\"changelogLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!changelogLoading && changelog && changelog.length === 0\"\n          class=\"text-muted mb-3\"\n        >\n          {{ 'epistolaAdminNoChangelog' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!changelogLoading && changelog && changelog.length > 0\"\n          class=\"epistola-changelog\"\n        >\n          <section *ngFor=\"let release of changelog\" class=\"changelog-release\">\n            <div class=\"changelog-release__header\">\n              <cds-tag size=\"sm\" type=\"purple\">{{ release.version }}</cds-tag>\n              <span *ngIf=\"release.date\" class=\"text-muted ms-2\">{{ release.date }}</span>\n            </div>\n            <div *ngFor=\"let section of release.sections\" class=\"changelog-section\">\n              <h6 class=\"changelog-section__title\">{{ section.title }}</h6>\n              <ul class=\"changelog-section__items\">\n                <li *ngFor=\"let item of section.items\">{{ item }}</li>\n              </ul>\n            </div>\n          </section>\n        </div>\n      </cds-tab>\n\n      <!-- TEMPORARY (removed in 1.0.0): forms missing the task-id carrier -->\n      <cds-tab\n        [heading]=\"formsHeading\"\n        [active]=\"overviewTab === 'forms'\"\n        (selected)=\"setOverviewTab('forms')\"\n      >\n        <p class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminFormsIntro' | pluginTranslate: 'epistola' | async }}\n        </p>\n\n        <div *ngIf=\"formIssuesLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!formIssuesLoading && formIssues && formIssues.length === 0\"\n          class=\"text-muted mb-3\"\n        >\n          {{ 'epistolaAdminNoFormIssues' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!formIssuesLoading && formIssues && formIssues.length > 0\">\n          <div class=\"mb-2\">\n            <button\n              class=\"btn btn-sm btn-primary\"\n              (click)=\"repairAllForms()\"\n              [disabled]=\"repairingAll\"\n            >\n              {{\n                (repairingAll ? 'epistolaAdminRepairing' : 'epistolaAdminRepairAll')\n                  | pluginTranslate: 'epistola'\n                  | async\n              }}\n            </button>\n            <span\n              *ngIf=\"formFeedback && formFeedback.formId === 'all'\"\n              class=\"small ms-2\"\n              [class.text-success]=\"formFeedback.type === 'success'\"\n              [class.text-danger]=\"formFeedback.type === 'error'\"\n              >{{ formFeedback.message }}</span\n            >\n          </div>\n\n          <table class=\"table table-striped\">\n            <thead>\n              <tr>\n                <th>{{ 'epistolaAdminFormName' | pluginTranslate: 'epistola' | async }}</th>\n                <th>{{ 'epistolaAdminFormMissing' | pluginTranslate: 'epistola' | async }}</th>\n                <th></th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let issue of formIssues\">\n                <td>\n                  <code>{{ issue.name }}</code>\n                  <cds-tag\n                    *ngIf=\"issue.readOnly\"\n                    size=\"sm\"\n                    type=\"warm-gray\"\n                    class=\"ms-1\"\n                    [title]=\"'epistolaAdminFormReadOnlyHint' | pluginTranslate: 'epistola' | async\"\n                    >{{\n                      'epistolaAdminFormReadOnly' | pluginTranslate: 'epistola' | async\n                    }}</cds-tag\n                  >\n                </td>\n                <td>{{ issue.missingComponents }}</td>\n                <td class=\"text-end\">\n                  <button\n                    class=\"btn btn-sm btn-outline-primary\"\n                    (click)=\"repairForm(issue)\"\n                    [disabled]=\"isRepairingForm(issue)\"\n                    [title]=\"'epistolaAdminRepairTooltip' | pluginTranslate: 'epistola' | async\"\n                  >\n                    {{\n                      (isRepairingForm(issue) ? 'epistolaAdminRepairing' : 'epistolaAdminRepair')\n                        | pluginTranslate: 'epistola'\n                        | async\n                    }}\n                  </button>\n                  <div\n                    *ngIf=\"formFeedback && formFeedback.formId === issue.formId\"\n                    class=\"small mt-1\"\n                    [class.text-success]=\"formFeedback.type === 'success'\"\n                    [class.text-danger]=\"formFeedback.type === 'error'\"\n                  >\n                    {{ formFeedback.message }}\n                  </div>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n\n        <!-- TEMPORARY: forms still using the legacy override-mapping object format -->\n        <hr class=\"my-4\" />\n        <h5 class=\"mb-1\">\n          {{ 'epistolaAdminLegacyOverrideTitle' | pluginTranslate: 'epistola' | async }}\n        </h5>\n        <p class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLegacyOverrideIntro' | pluginTranslate: 'epistola' | async }}\n        </p>\n\n        <div *ngIf=\"legacyOverrideLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!legacyOverrideLoading && legacyOverrideForms && legacyOverrideForms.length === 0\"\n          class=\"text-muted mb-3\"\n        >\n          {{ 'epistolaAdminNoLegacyOverride' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table\n          *ngIf=\"!legacyOverrideLoading && legacyOverrideForms && legacyOverrideForms.length > 0\"\n          class=\"table table-striped\"\n        >\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminFormName' | pluginTranslate: 'epistola' | async }}</th>\n              <th>\n                {{ 'epistolaAdminLegacyOverrideComponents' | pluginTranslate: 'epistola' | async }}\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let form of legacyOverrideForms\">\n              <td>\n                <code>{{ form.name }}</code>\n                <cds-tag\n                  *ngIf=\"form.readOnly\"\n                  size=\"sm\"\n                  type=\"warm-gray\"\n                  class=\"ms-1\"\n                  [title]=\"'epistolaAdminFormReadOnlyHint' | pluginTranslate: 'epistola' | async\"\n                  >{{ 'epistolaAdminFormReadOnly' | pluginTranslate: 'epistola' | async }}</cds-tag\n                >\n              </td>\n              <td>{{ form.legacyComponents }}</td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n    </cds-tabs>\n  </ng-container>\n\n  <!-- Detail view: selected configuration -->\n  <ng-container *ngIf=\"selectedCard\">\n    <div class=\"detail-header mb-3\">\n      <button class=\"btn btn-link btn-sm p-0\" (click)=\"backToOverview()\">\n        &larr; {{ 'epistolaAdminBackToOverview' | pluginTranslate: 'epistola' | async }}\n      </button>\n    </div>\n\n    <div class=\"detail-summary mb-4\">\n      <h4>\n        <span\n          class=\"status-dot me-2\"\n          [class.status-dot--ok]=\"selectedCard.reachable\"\n          [class.status-dot--error]=\"!selectedCard.reachable\"\n        >\n        </span>\n        {{ selectedCard.configurationTitle }}\n      </h4>\n\n      <table class=\"table table-sm detail-info-table\">\n        <tbody>\n          <tr>\n            <th>{{ 'epistolaAdminTenantId' | pluginTranslate: 'epistola' | async }}</th>\n            <td>\n              <code>{{ selectedCard.tenantId }}</code>\n            </td>\n          </tr>\n          <tr>\n            <th>{{ 'epistolaAdminStatus' | pluginTranslate: 'epistola' | async }}</th>\n            <td>\n              <cds-tag size=\"sm\" [type]=\"selectedCard.reachable ? 'green' : 'red'\">\n                {{\n                  selectedCard.reachable\n                    ? ('epistolaAdminConnected' | pluginTranslate: 'epistola' | async)\n                    : ('epistolaAdminUnreachable' | pluginTranslate: 'epistola' | async)\n                }}\n              </cds-tag>\n              <span class=\"text-muted ms-2\">{{ selectedCard.latencyMs }} ms</span>\n            </td>\n          </tr>\n          <tr *ngIf=\"selectedCard.serverVersion\">\n            <th>{{ 'epistolaAdminServerVersion' | pluginTranslate: 'epistola' | async }}</th>\n            <td>{{ selectedCard.serverVersion }}</td>\n          </tr>\n          <tr *ngIf=\"selectedCard.errorMessage\">\n            <th>{{ 'epistolaAdminError' | pluginTranslate: 'epistola' | async }}</th>\n            <td class=\"text-danger\">{{ selectedCard.errorMessage }}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <!-- Tabs -->\n    <ng-template #actionsHeading>\n      {{ 'epistolaAdminPluginActions' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ selectedCard.usageEntries.length }}</cds-tag>\n    </ng-template>\n\n    <ng-template #pendingHeading>\n      {{ 'epistolaAdminPendingJobs' | pluginTranslate: 'epistola' | async }}\n      <cds-tag\n        size=\"sm\"\n        [type]=\"selectedCard.pendingJobs.length > 0 ? 'blue' : 'gray'\"\n        class=\"ms-1\"\n      >\n        {{ selectedCard.pendingJobs.length }}\n      </cds-tag>\n    </ng-template>\n\n    <ng-template #catalogsHeading>\n      {{ 'epistolaAdminCatalogs' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ catalogs.length }}</cds-tag>\n    </ng-template>\n\n    <cds-tabs [cacheActive]=\"true\" type=\"contained\">\n      <cds-tab\n        [heading]=\"actionsHeading\"\n        [active]=\"activeTab === 'actions'\"\n        (selected)=\"setActiveTab('actions')\"\n      >\n        <div *ngIf=\"selectedCard.usageEntries.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoUsageForConfig' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"selectedCard.usageEntries.length > 0\" class=\"table table-striped mt-3\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminCase' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminAction' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminProblems' | pluginTranslate: 'epistola' | async }}</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr\n              *ngFor=\"let entry of selectedCard.usageEntries\"\n              [class.table-warning]=\"entry.problems.length > 0\"\n            >\n              <td>{{ entry.caseDefinitionKey || '-' }}</td>\n              <td>\n                <a\n                  *ngIf=\"entry.caseDefinitionKey && entry.caseDefinitionVersionTag\"\n                  [routerLink]=\"[\n                    '/case-management',\n                    'case',\n                    entry.caseDefinitionKey,\n                    'version',\n                    entry.caseDefinitionVersionTag,\n                    'processes',\n                    entry.processDefinitionKey,\n                  ]\"\n                  class=\"usage-link\"\n                >\n                  {{ entry.processDefinitionName }}\n                </a>\n                <span *ngIf=\"!entry.caseDefinitionKey || !entry.caseDefinitionVersionTag\">\n                  {{ entry.processDefinitionName }}\n                </span>\n              </td>\n              <td>{{ entry.activityName }}</td>\n              <td>\n                <code>{{ entry.actionKey }}</code>\n              </td>\n              <td>\n                <cds-tag *ngIf=\"entry.problems.length === 0\" size=\"sm\" type=\"green\">OK</cds-tag>\n                <cds-tag\n                  *ngFor=\"let problem of entry.problems\"\n                  size=\"sm\"\n                  type=\"red\"\n                  class=\"d-block mb-1\"\n                >\n                  {{ problem }}\n                </cds-tag>\n              </td>\n              <td>\n                <button\n                  class=\"btn btn-sm btn-outline-secondary\"\n                  (click)=\"exportProcessLink(entry)\"\n                  [title]=\"'epistolaAdminExport' | pluginTranslate: 'epistola' | async\"\n                >\n                  &#x2913;\n                </button>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"pendingHeading\"\n        [active]=\"activeTab === 'pending'\"\n        (selected)=\"setActiveTab('pending')\"\n      >\n        <div *ngIf=\"selectedCard.pendingJobs.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoPendingJobs' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"selectedCard.pendingJobs.length > 0\" class=\"table table-striped mt-3\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminStatus' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminRequestId' | pluginTranslate: 'epistola' | async }}</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let job of selectedCard.pendingJobs\">\n              <td>{{ job.processDefinitionName }}</td>\n              <td>{{ job.activityName }}</td>\n              <td>\n                <cds-tag\n                  *ngIf=\"job.status === 'UNWIRED'; else waitingTag\"\n                  size=\"sm\"\n                  type=\"red\"\n                  [title]=\"'epistolaAdminUnwiredTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  {{ 'epistolaAdminStatusUnwired' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n                <ng-template #waitingTag>\n                  <cds-tag size=\"sm\" type=\"blue\">\n                    {{ 'epistolaAdminStatusWaiting' | pluginTranslate: 'epistola' | async }}\n                  </cds-tag>\n                </ng-template>\n              </td>\n              <td>\n                <code *ngIf=\"job.status !== 'UNWIRED'\">{{ job.requestId }}</code>\n                <span *ngIf=\"job.status === 'UNWIRED'\" class=\"text-muted\">\u2014</span>\n              </td>\n              <td class=\"text-end\">\n                <button\n                  *ngIf=\"job.status !== 'UNWIRED'\"\n                  class=\"btn btn-sm btn-outline-primary\"\n                  (click)=\"reconcilePending(job)\"\n                  [disabled]=\"isReconciling(job)\"\n                  [title]=\"'epistolaAdminReconcileTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  <span *ngIf=\"!isReconciling(job)\">\n                    {{ 'epistolaAdminReconcile' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                  <span *ngIf=\"isReconciling(job)\">\n                    {{ 'epistolaAdminReconciling' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                </button>\n                <span\n                  *ngIf=\"job.status === 'UNWIRED'\"\n                  class=\"text-muted small\"\n                  [title]=\"'epistolaAdminUnwiredTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  {{ 'epistolaAdminUnwiredHint' | pluginTranslate: 'epistola' | async }}\n                </span>\n                <div\n                  *ngIf=\"reconcileFeedback && reconcileFeedback.executionId === job.executionId\"\n                  class=\"reconcile-feedback small mt-1\"\n                  [class.text-success]=\"reconcileFeedback.type === 'success'\"\n                  [class.text-warning]=\"reconcileFeedback.type === 'pending'\"\n                  [class.text-danger]=\"reconcileFeedback.type === 'error'\"\n                >\n                  {{ reconcileFeedback.message }}\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"catalogsHeading\"\n        [active]=\"activeTab === 'catalogs'\"\n        (selected)=\"setActiveTab('catalogs')\"\n      >\n        <p class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminCatalogsIntro' | pluginTranslate: 'epistola' | async }}\n        </p>\n\n        <div *ngIf=\"catalogsLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!catalogsLoading && catalogs.length === 0\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminNoCatalogs' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"!catalogsLoading && catalogs.length > 0\" class=\"table table-striped\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminCatalogSlug' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminCatalogVersion' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminCatalogStatus' | pluginTranslate: 'epistola' | async }}</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let catalog of catalogs\">\n              <td>\n                <code>{{ catalog.slug }}</code>\n              </td>\n              <td>{{ catalog.version }}</td>\n              <td>\n                <cds-tag *ngIf=\"catalog.status === 'IN_EPISTOLA'\" size=\"sm\" type=\"green\">\n                  {{ 'epistolaAdminCatalogInEpistola' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n                <cds-tag *ngIf=\"catalog.status === 'NOT_IN_EPISTOLA'\" size=\"sm\" type=\"red\">\n                  {{ 'epistolaAdminCatalogNotInEpistola' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n                <cds-tag *ngIf=\"catalog.status === 'UNKNOWN'\" size=\"sm\" type=\"gray\">\n                  {{ 'epistolaAdminCatalogStatusUnknown' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n              </td>\n              <td class=\"text-end\">\n                <button\n                  class=\"btn btn-sm btn-outline-primary\"\n                  (click)=\"redeployCatalog(catalog)\"\n                  [disabled]=\"isRedeploying(catalog)\"\n                  [title]=\"'epistolaAdminRedeployTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  <span *ngIf=\"!isRedeploying(catalog)\">\n                    {{ 'epistolaAdminRedeploy' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                  <span *ngIf=\"isRedeploying(catalog)\">\n                    {{ 'epistolaAdminRedeploying' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                </button>\n                <div\n                  *ngIf=\"catalogFeedback && catalogFeedback.slug === catalog.slug\"\n                  class=\"reconcile-feedback small mt-1\"\n                  [class.text-success]=\"catalogFeedback.type === 'success'\"\n                  [class.text-danger]=\"catalogFeedback.type === 'error'\"\n                >\n                  {{ catalogFeedback.message }}\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n    </cds-tabs>\n  </ng-container>\n</div>\n", styles: [".epistola-admin{padding:1.5rem}.epistola-admin .version-badge{font-size:.75rem;font-weight:500;padding:.2em .6em;border-radius:4px;background-color:#e8e8e8;color:#525252}.epistola-admin .badge{font-size:.85em;padding:.35em .65em}.epistola-admin code{font-size:.9em;color:#525252}.epistola-admin table th{font-weight:600;white-space:nowrap}.epistola-admin .status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.5rem;flex-shrink:0;background-color:#adb5bd}.epistola-admin .status-dot--ok{background-color:#198754}.epistola-admin .status-dot--error{background-color:#dc3545}.epistola-admin .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}.epistola-admin .config-card{border:1px solid #dee2e6;border-radius:8px;padding:1.25rem;cursor:pointer;transition:box-shadow .15s ease,border-color .15s ease;background:#fff}.epistola-admin .config-card:hover{box-shadow:0 2px 8px #0000001a}.epistola-admin .config-card--ok{border-left:4px solid #198754}.epistola-admin .config-card--warning{border-left:4px solid #ffc107}.epistola-admin .config-card--error{border-left:4px solid #dc3545}.epistola-admin .config-card__header{display:flex;align-items:center;margin-bottom:1rem}.epistola-admin .config-card__title{margin:0;font-size:1.05rem;font-weight:600;color:#161616}.epistola-admin .config-card__body{display:flex;flex-direction:column;gap:.5rem}.epistola-admin .config-card__field{display:flex;justify-content:space-between;align-items:center}.epistola-admin .config-card__label{font-size:.875rem;color:#6c757d}.epistola-admin .config-card__value{font-size:.875rem;color:#161616}.epistola-admin .config-card__footer{margin-top:1rem;padding-top:.75rem;border-top:1px solid #f0f0f0;text-align:right}.epistola-admin .config-card__latency{font-size:.8rem;color:#adb5bd}.epistola-admin .usage-link{color:#0f62fe;text-decoration:none}.epistola-admin .usage-link:hover{text-decoration:underline}.epistola-admin .detail-info-table{max-width:500px}.epistola-admin .detail-info-table th{width:140px}.epistola-admin .detail-summary{padding:1rem 0;border-bottom:1px solid #dee2e6}.epistola-admin .epistola-changelog{max-height:60vh;overflow:auto;padding:.5rem 1rem;border:1px solid #dee2e6;border-radius:4px}.epistola-admin .epistola-changelog .changelog-release{padding:.75rem 0}.epistola-admin .epistola-changelog .changelog-release+.changelog-release{border-top:1px solid #eee}.epistola-admin .epistola-changelog .changelog-release__header{display:flex;align-items:center;margin-bottom:.5rem}.epistola-admin .epistola-changelog .changelog-section{margin:.25rem 0 .75rem}.epistola-admin .epistola-changelog .changelog-section__title{font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:#6f6f6f;margin-bottom:.25rem}.epistola-admin .epistola-changelog .changelog-section__items{margin:0;padding-left:1.25rem;font-size:.8125rem;line-height:1.5}.epistola-admin .epistola-changelog .changelog-section__items li{margin-bottom:.25rem;word-break:break-word}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PluginTranslatePipeModule }, { kind: "pipe", type: i2$1.PluginTranslatePipe, name: "pluginTranslate" }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i5.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i5.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i6.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'epistola-admin-page', standalone: true, imports: [CommonModule, RouterModule, PluginTranslatePipeModule, TabsModule, TagModule], template: "<div class=\"epistola-admin\">\n  <!-- Overview: tabs (no configuration selected) -->\n  <ng-container *ngIf=\"!selectedCard\">\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\n      <div class=\"d-flex align-items-center\">\n        <h5 class=\"mb-0\">{{ 'epistolaAdminOverview' | pluginTranslate: 'epistola' | async }}</h5>\n        <span *ngIf=\"pluginVersion\" class=\"version-badge ms-2\">v{{ pluginVersion }}</span>\n      </div>\n      <button class=\"btn btn-outline-primary btn-sm\" (click)=\"refresh()\" [disabled]=\"loading\">\n        {{ 'epistolaAdminRefresh' | pluginTranslate: 'epistola' | async }}\n      </button>\n    </div>\n\n    <ng-template #configurationsHeading>\n      {{ 'epistolaAdminConfigurations' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ cards.length }}</cds-tag>\n    </ng-template>\n\n    <ng-template #validationsHeading>\n      {{ 'epistolaAdminValidations' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" [type]=\"validationViolations.length > 0 ? 'red' : 'gray'\" class=\"ms-1\">\n        {{ validationViolations.length }}\n      </cds-tag>\n    </ng-template>\n\n    <ng-template #changelogHeading>\n      {{ 'epistolaAdminChangelog' | pluginTranslate: 'epistola' | async }}\n    </ng-template>\n\n    <cds-tabs [cacheActive]=\"true\" type=\"contained\">\n      <cds-tab\n        [heading]=\"configurationsHeading\"\n        [active]=\"overviewTab === 'configurations'\"\n        (selected)=\"setOverviewTab('configurations')\"\n      >\n        <div *ngIf=\"loading\" class=\"text-muted mt-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!loading && cards.length === 0\" class=\"text-muted mt-3\">\n          {{ 'epistolaAdminNoConfigurations' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!loading && cards.length > 0\" class=\"card-grid\">\n          <div\n            *ngFor=\"let card of cards\"\n            class=\"config-card\"\n            [class.config-card--ok]=\"card.reachable && card.problemCount === 0\"\n            [class.config-card--warning]=\"card.reachable && card.problemCount > 0\"\n            [class.config-card--error]=\"!card.reachable\"\n            (click)=\"selectConfiguration(card)\"\n          >\n            <div class=\"config-card__header\">\n              <span\n                class=\"status-dot\"\n                [class.status-dot--ok]=\"card.reachable\"\n                [class.status-dot--error]=\"!card.reachable\"\n              >\n              </span>\n              <h5 class=\"config-card__title\">{{ card.configurationTitle }}</h5>\n            </div>\n\n            <div class=\"config-card__body\">\n              <div class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminTenantId' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <code class=\"config-card__value\">{{ card.tenantId }}</code>\n              </div>\n              <div class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminStatus' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <cds-tag size=\"sm\" [type]=\"card.reachable ? 'green' : 'red'\">\n                  {{\n                    card.reachable\n                      ? ('epistolaAdminConnected' | pluginTranslate: 'epistola' | async)\n                      : ('epistolaAdminUnreachable' | pluginTranslate: 'epistola' | async)\n                  }}\n                </cds-tag>\n              </div>\n              <div *ngIf=\"card.serverVersion\" class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminServerVersion' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <span class=\"config-card__value\">{{ card.serverVersion }}</span>\n              </div>\n              <div class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminPluginActions' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <span class=\"config-card__value\">{{ card.usageCount }}</span>\n              </div>\n              <div *ngIf=\"card.pendingJobs.length > 0\" class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminPendingJobs' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <cds-tag size=\"sm\" type=\"blue\">{{ card.pendingJobs.length }}</cds-tag>\n              </div>\n              <div *ngIf=\"card.problemCount > 0\" class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminProblems' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <cds-tag size=\"sm\" type=\"red\">{{ card.problemCount }}</cds-tag>\n              </div>\n            </div>\n\n            <div class=\"config-card__footer\">\n              <span class=\"config-card__latency\">{{ card.latencyMs }} ms</span>\n            </div>\n          </div>\n        </div>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"validationsHeading\"\n        [active]=\"overviewTab === 'validations'\"\n        (selected)=\"setOverviewTab('validations')\"\n      >\n        <div *ngIf=\"validationViolations.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoValidations' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"validationViolations.length > 0\" class=\"mt-3\">\n          <p class=\"text-muted mb-3\">\n            {{ 'epistolaAdminValidationWarningBody' | pluginTranslate: 'epistola' | async }}\n          </p>\n          <table class=\"table table-striped\">\n            <thead>\n              <tr>\n                <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n                <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n                <th>{{ 'epistolaAdminValidationCode' | pluginTranslate: 'epistola' | async }}</th>\n                <th>\n                  {{ 'epistolaAdminValidationMessage' | pluginTranslate: 'epistola' | async }}\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let v of validationViolations\">\n                <td>\n                  {{ v.processDefinitionName || v.processDefinitionKey }}\n                  <div *ngIf=\"v.processDefinitionName\" class=\"text-muted small\">\n                    <code>{{ v.processDefinitionKey }}</code>\n                  </div>\n                </td>\n                <td>\n                  <code>{{ v.activityId }}</code>\n                </td>\n                <td>\n                  <cds-tag size=\"sm\" type=\"red\">{{ v.code }}</cds-tag>\n                </td>\n                <td>{{ v.message }}</td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"changelogHeading\"\n        [active]=\"overviewTab === 'changelog'\"\n        (selected)=\"setOverviewTab('changelog')\"\n      >\n        <div class=\"d-flex align-items-center mt-3 mb-3\">\n          <span class=\"text-muted me-2\">{{\n            'epistolaAdminRunningVersion' | pluginTranslate: 'epistola' | async\n          }}</span>\n          <cds-tag size=\"sm\" type=\"blue\">v{{ pluginVersion || '\u2014' }}</cds-tag>\n        </div>\n\n        <div *ngIf=\"changelogLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!changelogLoading && changelog && changelog.length === 0\"\n          class=\"text-muted mb-3\"\n        >\n          {{ 'epistolaAdminNoChangelog' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!changelogLoading && changelog && changelog.length > 0\"\n          class=\"epistola-changelog\"\n        >\n          <section *ngFor=\"let release of changelog\" class=\"changelog-release\">\n            <div class=\"changelog-release__header\">\n              <cds-tag size=\"sm\" type=\"purple\">{{ release.version }}</cds-tag>\n              <span *ngIf=\"release.date\" class=\"text-muted ms-2\">{{ release.date }}</span>\n            </div>\n            <div *ngFor=\"let section of release.sections\" class=\"changelog-section\">\n              <h6 class=\"changelog-section__title\">{{ section.title }}</h6>\n              <ul class=\"changelog-section__items\">\n                <li *ngFor=\"let item of section.items\">{{ item }}</li>\n              </ul>\n            </div>\n          </section>\n        </div>\n      </cds-tab>\n    </cds-tabs>\n  </ng-container>\n\n  <!-- Detail view: selected configuration -->\n  <ng-container *ngIf=\"selectedCard\">\n    <div class=\"detail-header mb-3\">\n      <button class=\"btn btn-link btn-sm p-0\" (click)=\"backToOverview()\">\n        &larr; {{ 'epistolaAdminBackToOverview' | pluginTranslate: 'epistola' | async }}\n      </button>\n    </div>\n\n    <div class=\"detail-summary mb-4\">\n      <h4>\n        <span\n          class=\"status-dot me-2\"\n          [class.status-dot--ok]=\"selectedCard.reachable\"\n          [class.status-dot--error]=\"!selectedCard.reachable\"\n        >\n        </span>\n        {{ selectedCard.configurationTitle }}\n      </h4>\n\n      <table class=\"table table-sm detail-info-table\">\n        <tbody>\n          <tr>\n            <th>{{ 'epistolaAdminTenantId' | pluginTranslate: 'epistola' | async }}</th>\n            <td>\n              <code>{{ selectedCard.tenantId }}</code>\n            </td>\n          </tr>\n          <tr>\n            <th>{{ 'epistolaAdminStatus' | pluginTranslate: 'epistola' | async }}</th>\n            <td>\n              <cds-tag size=\"sm\" [type]=\"selectedCard.reachable ? 'green' : 'red'\">\n                {{\n                  selectedCard.reachable\n                    ? ('epistolaAdminConnected' | pluginTranslate: 'epistola' | async)\n                    : ('epistolaAdminUnreachable' | pluginTranslate: 'epistola' | async)\n                }}\n              </cds-tag>\n              <span class=\"text-muted ms-2\">{{ selectedCard.latencyMs }} ms</span>\n            </td>\n          </tr>\n          <tr *ngIf=\"selectedCard.serverVersion\">\n            <th>{{ 'epistolaAdminServerVersion' | pluginTranslate: 'epistola' | async }}</th>\n            <td>{{ selectedCard.serverVersion }}</td>\n          </tr>\n          <tr *ngIf=\"selectedCard.errorMessage\">\n            <th>{{ 'epistolaAdminError' | pluginTranslate: 'epistola' | async }}</th>\n            <td class=\"text-danger\">{{ selectedCard.errorMessage }}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <!-- Tabs -->\n    <ng-template #actionsHeading>\n      {{ 'epistolaAdminPluginActions' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ selectedCard.usageEntries.length }}</cds-tag>\n    </ng-template>\n\n    <ng-template #pendingHeading>\n      {{ 'epistolaAdminPendingJobs' | pluginTranslate: 'epistola' | async }}\n      <cds-tag\n        size=\"sm\"\n        [type]=\"selectedCard.pendingJobs.length > 0 ? 'blue' : 'gray'\"\n        class=\"ms-1\"\n      >\n        {{ selectedCard.pendingJobs.length }}\n      </cds-tag>\n    </ng-template>\n\n    <ng-template #catalogsHeading>\n      {{ 'epistolaAdminCatalogs' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ catalogs.length }}</cds-tag>\n    </ng-template>\n\n    <cds-tabs [cacheActive]=\"true\" type=\"contained\">\n      <cds-tab\n        [heading]=\"actionsHeading\"\n        [active]=\"activeTab === 'actions'\"\n        (selected)=\"setActiveTab('actions')\"\n      >\n        <div *ngIf=\"selectedCard.usageEntries.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoUsageForConfig' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"selectedCard.usageEntries.length > 0\" class=\"table table-striped mt-3\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminCase' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminAction' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminProblems' | pluginTranslate: 'epistola' | async }}</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr\n              *ngFor=\"let entry of selectedCard.usageEntries\"\n              [class.table-warning]=\"entry.problems.length > 0\"\n            >\n              <td>{{ entry.caseDefinitionKey || '-' }}</td>\n              <td>\n                <a\n                  *ngIf=\"entry.caseDefinitionKey && entry.caseDefinitionVersionTag\"\n                  [routerLink]=\"[\n                    '/case-management',\n                    'case',\n                    entry.caseDefinitionKey,\n                    'version',\n                    entry.caseDefinitionVersionTag,\n                    'processes',\n                    entry.processDefinitionKey,\n                  ]\"\n                  class=\"usage-link\"\n                >\n                  {{ entry.processDefinitionName }}\n                </a>\n                <span *ngIf=\"!entry.caseDefinitionKey || !entry.caseDefinitionVersionTag\">\n                  {{ entry.processDefinitionName }}\n                </span>\n              </td>\n              <td>{{ entry.activityName }}</td>\n              <td>\n                <code>{{ entry.actionKey }}</code>\n              </td>\n              <td>\n                <cds-tag *ngIf=\"entry.problems.length === 0\" size=\"sm\" type=\"green\">OK</cds-tag>\n                <cds-tag\n                  *ngFor=\"let problem of entry.problems\"\n                  size=\"sm\"\n                  type=\"red\"\n                  class=\"d-block mb-1\"\n                >\n                  {{ problem }}\n                </cds-tag>\n              </td>\n              <td>\n                <button\n                  class=\"btn btn-sm btn-outline-secondary\"\n                  (click)=\"exportProcessLink(entry)\"\n                  [title]=\"'epistolaAdminExport' | pluginTranslate: 'epistola' | async\"\n                >\n                  &#x2913;\n                </button>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"pendingHeading\"\n        [active]=\"activeTab === 'pending'\"\n        (selected)=\"setActiveTab('pending')\"\n      >\n        <div *ngIf=\"selectedCard.pendingJobs.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoPendingJobs' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"selectedCard.pendingJobs.length > 0\" class=\"table table-striped mt-3\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminRequestId' | pluginTranslate: 'epistola' | async }}</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let job of selectedCard.pendingJobs\">\n              <td>{{ job.processDefinitionName }}</td>\n              <td>{{ job.activityName }}</td>\n              <td>\n                <code>{{ job.requestId }}</code>\n              </td>\n              <td class=\"text-end\">\n                <button\n                  class=\"btn btn-sm btn-outline-primary\"\n                  (click)=\"reconcilePending(job)\"\n                  [disabled]=\"isReconciling(job)\"\n                  [title]=\"'epistolaAdminReconcileTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  <span *ngIf=\"!isReconciling(job)\">\n                    {{ 'epistolaAdminReconcile' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                  <span *ngIf=\"isReconciling(job)\">\n                    {{ 'epistolaAdminReconciling' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                </button>\n                <div\n                  *ngIf=\"reconcileFeedback && reconcileFeedback.executionId === job.executionId\"\n                  class=\"reconcile-feedback small mt-1\"\n                  [class.text-success]=\"reconcileFeedback.type === 'success'\"\n                  [class.text-warning]=\"reconcileFeedback.type === 'pending'\"\n                  [class.text-danger]=\"reconcileFeedback.type === 'error'\"\n                >\n                  {{ reconcileFeedback.message }}\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"catalogsHeading\"\n        [active]=\"activeTab === 'catalogs'\"\n        (selected)=\"setActiveTab('catalogs')\"\n      >\n        <p class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminCatalogsIntro' | pluginTranslate: 'epistola' | async }}\n        </p>\n\n        <div *ngIf=\"catalogsLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!catalogsLoading && catalogs.length === 0\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminNoCatalogs' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"!catalogsLoading && catalogs.length > 0\" class=\"table table-striped\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminCatalogSlug' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminCatalogVersion' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminCatalogStatus' | pluginTranslate: 'epistola' | async }}</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let catalog of catalogs\">\n              <td>\n                <code>{{ catalog.slug }}</code>\n              </td>\n              <td>{{ catalog.version }}</td>\n              <td>\n                <cds-tag *ngIf=\"catalog.status === 'IN_EPISTOLA'\" size=\"sm\" type=\"green\">\n                  {{ 'epistolaAdminCatalogInEpistola' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n                <cds-tag *ngIf=\"catalog.status === 'NOT_IN_EPISTOLA'\" size=\"sm\" type=\"red\">\n                  {{ 'epistolaAdminCatalogNotInEpistola' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n                <cds-tag *ngIf=\"catalog.status === 'UNKNOWN'\" size=\"sm\" type=\"gray\">\n                  {{ 'epistolaAdminCatalogStatusUnknown' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n              </td>\n              <td class=\"text-end\">\n                <button\n                  class=\"btn btn-sm btn-outline-primary\"\n                  (click)=\"redeployCatalog(catalog)\"\n                  [disabled]=\"isRedeploying(catalog)\"\n                  [title]=\"'epistolaAdminRedeployTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  <span *ngIf=\"!isRedeploying(catalog)\">\n                    {{ 'epistolaAdminRedeploy' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                  <span *ngIf=\"isRedeploying(catalog)\">\n                    {{ 'epistolaAdminRedeploying' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                </button>\n                <div\n                  *ngIf=\"catalogFeedback && catalogFeedback.slug === catalog.slug\"\n                  class=\"reconcile-feedback small mt-1\"\n                  [class.text-success]=\"catalogFeedback.type === 'success'\"\n                  [class.text-danger]=\"catalogFeedback.type === 'error'\"\n                >\n                  {{ catalogFeedback.message }}\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n    </cds-tabs>\n  </ng-container>\n</div>\n", styles: [".epistola-admin{padding:1.5rem}.epistola-admin .version-badge{font-size:.75rem;font-weight:500;padding:.2em .6em;border-radius:4px;background-color:#e8e8e8;color:#525252}.epistola-admin .badge{font-size:.85em;padding:.35em .65em}.epistola-admin code{font-size:.9em;color:#525252}.epistola-admin table th{font-weight:600;white-space:nowrap}.epistola-admin .status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.5rem;flex-shrink:0;background-color:#adb5bd}.epistola-admin .status-dot--ok{background-color:#198754}.epistola-admin .status-dot--error{background-color:#dc3545}.epistola-admin .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}.epistola-admin .config-card{border:1px solid #dee2e6;border-radius:8px;padding:1.25rem;cursor:pointer;transition:box-shadow .15s ease,border-color .15s ease;background:#fff}.epistola-admin .config-card:hover{box-shadow:0 2px 8px #0000001a}.epistola-admin .config-card--ok{border-left:4px solid #198754}.epistola-admin .config-card--warning{border-left:4px solid #ffc107}.epistola-admin .config-card--error{border-left:4px solid #dc3545}.epistola-admin .config-card__header{display:flex;align-items:center;margin-bottom:1rem}.epistola-admin .config-card__title{margin:0;font-size:1.05rem;font-weight:600;color:#161616}.epistola-admin .config-card__body{display:flex;flex-direction:column;gap:.5rem}.epistola-admin .config-card__field{display:flex;justify-content:space-between;align-items:center}.epistola-admin .config-card__label{font-size:.875rem;color:#6c757d}.epistola-admin .config-card__value{font-size:.875rem;color:#161616}.epistola-admin .config-card__footer{margin-top:1rem;padding-top:.75rem;border-top:1px solid #f0f0f0;text-align:right}.epistola-admin .config-card__latency{font-size:.8rem;color:#adb5bd}.epistola-admin .usage-link{color:#0f62fe;text-decoration:none}.epistola-admin .usage-link:hover{text-decoration:underline}.epistola-admin .detail-info-table{max-width:500px}.epistola-admin .detail-info-table th{width:140px}.epistola-admin .detail-summary{padding:1rem 0;border-bottom:1px solid #dee2e6}.epistola-admin .epistola-changelog{max-height:60vh;overflow:auto;padding:.5rem 1rem;border:1px solid #dee2e6;border-radius:4px}.epistola-admin .epistola-changelog .changelog-release{padding:.75rem 0}.epistola-admin .epistola-changelog .changelog-release+.changelog-release{border-top:1px solid #eee}.epistola-admin .epistola-changelog .changelog-release__header{display:flex;align-items:center;margin-bottom:.5rem}.epistola-admin .epistola-changelog .changelog-section{margin:.25rem 0 .75rem}.epistola-admin .epistola-changelog .changelog-section__title{font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:#6f6f6f;margin-bottom:.25rem}.epistola-admin .epistola-changelog .changelog-section__items{margin:0;padding-left:1.25rem;font-size:.8125rem;line-height:1.5}.epistola-admin .epistola-changelog .changelog-section__items li{margin-bottom:.25rem;word-break:break-word}\n"] }]
-        }], ctorParameters: () => [{ type: EpistolaAdminService }, { type: i2$5.ActivatedRoute }, { type: i2$5.Router }] });
+            args: [{ selector: 'epistola-admin-page', standalone: true, imports: [CommonModule, RouterModule, PluginTranslatePipeModule, TabsModule, TagModule], template: "<div class=\"epistola-admin\">\n  <!-- Overview: tabs (no configuration selected) -->\n  <ng-container *ngIf=\"!selectedCard\">\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\n      <div class=\"d-flex align-items-center\">\n        <h5 class=\"mb-0\">{{ 'epistolaAdminOverview' | pluginTranslate: 'epistola' | async }}</h5>\n        <span *ngIf=\"pluginVersion\" class=\"version-badge ms-2\">v{{ pluginVersion }}</span>\n      </div>\n      <button class=\"btn btn-outline-primary btn-sm\" (click)=\"refresh()\" [disabled]=\"loading\">\n        {{ 'epistolaAdminRefresh' | pluginTranslate: 'epistola' | async }}\n      </button>\n    </div>\n\n    <ng-template #configurationsHeading>\n      {{ 'epistolaAdminConfigurations' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ cards.length }}</cds-tag>\n    </ng-template>\n\n    <ng-template #validationsHeading>\n      {{ 'epistolaAdminValidations' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" [type]=\"validationViolations.length > 0 ? 'red' : 'gray'\" class=\"ms-1\">\n        {{ validationViolations.length }}\n      </cds-tag>\n    </ng-template>\n\n    <ng-template #changelogHeading>\n      {{ 'epistolaAdminChangelog' | pluginTranslate: 'epistola' | async }}\n    </ng-template>\n\n    <!-- TEMPORARY (removed in 1.0.0): forms missing the task-id carrier -->\n    <ng-template #formsHeading>\n      {{ 'epistolaAdminForms' | pluginTranslate: 'epistola' | async }}\n      <cds-tag\n        *ngIf=\"formsScanLoaded\"\n        size=\"sm\"\n        [type]=\"formsAttentionCount > 0 ? 'red' : 'gray'\"\n        class=\"ms-1\"\n        >{{ formsAttentionCount }}</cds-tag\n      >\n    </ng-template>\n\n    <cds-tabs [cacheActive]=\"true\" type=\"contained\">\n      <cds-tab\n        [heading]=\"configurationsHeading\"\n        [active]=\"overviewTab === 'configurations'\"\n        (selected)=\"setOverviewTab('configurations')\"\n      >\n        <div *ngIf=\"loading\" class=\"text-muted mt-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!loading && cards.length === 0\" class=\"text-muted mt-3\">\n          {{ 'epistolaAdminNoConfigurations' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!loading && cards.length > 0\" class=\"card-grid\">\n          <div\n            *ngFor=\"let card of cards\"\n            class=\"config-card\"\n            [class.config-card--ok]=\"card.reachable && card.problemCount === 0\"\n            [class.config-card--warning]=\"card.reachable && card.problemCount > 0\"\n            [class.config-card--error]=\"!card.reachable\"\n            (click)=\"selectConfiguration(card)\"\n          >\n            <div class=\"config-card__header\">\n              <span\n                class=\"status-dot\"\n                [class.status-dot--ok]=\"card.reachable\"\n                [class.status-dot--error]=\"!card.reachable\"\n              >\n              </span>\n              <h5 class=\"config-card__title\">{{ card.configurationTitle }}</h5>\n            </div>\n\n            <div class=\"config-card__body\">\n              <div class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminTenantId' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <code class=\"config-card__value\">{{ card.tenantId }}</code>\n              </div>\n              <div class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminStatus' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <cds-tag size=\"sm\" [type]=\"card.reachable ? 'green' : 'red'\">\n                  {{\n                    card.reachable\n                      ? ('epistolaAdminConnected' | pluginTranslate: 'epistola' | async)\n                      : ('epistolaAdminUnreachable' | pluginTranslate: 'epistola' | async)\n                  }}\n                </cds-tag>\n              </div>\n              <div *ngIf=\"card.serverVersion\" class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminServerVersion' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <span class=\"config-card__value\">{{ card.serverVersion }}</span>\n              </div>\n              <div class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminPluginActions' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <span class=\"config-card__value\">{{ card.usageCount }}</span>\n              </div>\n              <div *ngIf=\"card.pendingJobs.length > 0\" class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminPendingJobs' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <cds-tag size=\"sm\" type=\"blue\">{{ card.pendingJobs.length }}</cds-tag>\n              </div>\n              <div *ngIf=\"card.problemCount > 0\" class=\"config-card__field\">\n                <span class=\"config-card__label\">{{\n                  'epistolaAdminProblems' | pluginTranslate: 'epistola' | async\n                }}</span>\n                <cds-tag size=\"sm\" type=\"red\">{{ card.problemCount }}</cds-tag>\n              </div>\n            </div>\n\n            <div class=\"config-card__footer\">\n              <span class=\"config-card__latency\">{{ card.latencyMs }} ms</span>\n            </div>\n          </div>\n        </div>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"validationsHeading\"\n        [active]=\"overviewTab === 'validations'\"\n        (selected)=\"setOverviewTab('validations')\"\n      >\n        <div class=\"text-muted small mt-3\">\n          <div>\n            {{ 'epistolaAdminValidationLastChecked' | pluginTranslate: 'epistola' | async }}:\n            <ng-container *ngIf=\"validationReport?.lastCheckedAt; else notYetRun\">\n              {{ validationReport?.lastCheckedAt | date: 'medium' }}\n            </ng-container>\n            <ng-template #notYetRun>\n              {{ 'epistolaAdminValidationNotYetRun' | pluginTranslate: 'epistola' | async }}\n            </ng-template>\n            \u00B7 {{ 'epistolaAdminValidationAutoRefresh' | pluginTranslate: 'epistola' | async }}\n            {{ refreshIntervalMinutes }} min.\n          </div>\n          <div>\n            {{ 'epistolaAdminValidationLatestVersionNote' | pluginTranslate: 'epistola' | async }}\n          </div>\n        </div>\n\n        <div *ngIf=\"validationViolations.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoValidations' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"validationViolations.length > 0\" class=\"mt-3\">\n          <p class=\"text-muted mb-3\">\n            {{ 'epistolaAdminValidationWarningBody' | pluginTranslate: 'epistola' | async }}\n          </p>\n          <table class=\"table table-striped\">\n            <thead>\n              <tr>\n                <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n                <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n                <th>{{ 'epistolaAdminValidationCode' | pluginTranslate: 'epistola' | async }}</th>\n                <th>\n                  {{ 'epistolaAdminValidationMessage' | pluginTranslate: 'epistola' | async }}\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let v of validationViolations\">\n                <td>\n                  {{ v.processDefinitionName || v.processDefinitionKey }}\n                  <div *ngIf=\"v.processDefinitionName\" class=\"text-muted small\">\n                    <code>{{ v.processDefinitionKey }}</code>\n                  </div>\n                </td>\n                <td>\n                  <code>{{ v.activityId }}</code>\n                </td>\n                <td>\n                  <cds-tag size=\"sm\" type=\"red\">{{ v.code }}</cds-tag>\n                </td>\n                <td>{{ v.message }}</td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"changelogHeading\"\n        [active]=\"overviewTab === 'changelog'\"\n        (selected)=\"setOverviewTab('changelog')\"\n      >\n        <div class=\"d-flex align-items-center mt-3 mb-3\">\n          <span class=\"text-muted me-2\">{{\n            'epistolaAdminRunningVersion' | pluginTranslate: 'epistola' | async\n          }}</span>\n          <cds-tag size=\"sm\" type=\"blue\">v{{ pluginVersion || '\u2014' }}</cds-tag>\n        </div>\n\n        <div *ngIf=\"changelogLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!changelogLoading && changelog && changelog.length === 0\"\n          class=\"text-muted mb-3\"\n        >\n          {{ 'epistolaAdminNoChangelog' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!changelogLoading && changelog && changelog.length > 0\"\n          class=\"epistola-changelog\"\n        >\n          <section *ngFor=\"let release of changelog\" class=\"changelog-release\">\n            <div class=\"changelog-release__header\">\n              <cds-tag size=\"sm\" type=\"purple\">{{ release.version }}</cds-tag>\n              <span *ngIf=\"release.date\" class=\"text-muted ms-2\">{{ release.date }}</span>\n            </div>\n            <div *ngFor=\"let section of release.sections\" class=\"changelog-section\">\n              <h6 class=\"changelog-section__title\">{{ section.title }}</h6>\n              <ul class=\"changelog-section__items\">\n                <li *ngFor=\"let item of section.items\">{{ item }}</li>\n              </ul>\n            </div>\n          </section>\n        </div>\n      </cds-tab>\n\n      <!-- TEMPORARY (removed in 1.0.0): forms missing the task-id carrier -->\n      <cds-tab\n        [heading]=\"formsHeading\"\n        [active]=\"overviewTab === 'forms'\"\n        (selected)=\"setOverviewTab('forms')\"\n      >\n        <p class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminFormsIntro' | pluginTranslate: 'epistola' | async }}\n        </p>\n\n        <div *ngIf=\"formIssuesLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!formIssuesLoading && formIssues && formIssues.length === 0\"\n          class=\"text-muted mb-3\"\n        >\n          {{ 'epistolaAdminNoFormIssues' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!formIssuesLoading && formIssues && formIssues.length > 0\">\n          <div class=\"mb-2\">\n            <button\n              class=\"btn btn-sm btn-primary\"\n              (click)=\"repairAllForms()\"\n              [disabled]=\"repairingAll\"\n            >\n              {{\n                (repairingAll ? 'epistolaAdminRepairing' : 'epistolaAdminRepairAll')\n                  | pluginTranslate: 'epistola'\n                  | async\n              }}\n            </button>\n            <span\n              *ngIf=\"formFeedback && formFeedback.formId === 'all'\"\n              class=\"small ms-2\"\n              [class.text-success]=\"formFeedback.type === 'success'\"\n              [class.text-danger]=\"formFeedback.type === 'error'\"\n              >{{ formFeedback.message }}</span\n            >\n          </div>\n\n          <table class=\"table table-striped\">\n            <thead>\n              <tr>\n                <th>{{ 'epistolaAdminFormName' | pluginTranslate: 'epistola' | async }}</th>\n                <th>{{ 'epistolaAdminFormMissing' | pluginTranslate: 'epistola' | async }}</th>\n                <th></th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let issue of formIssues\">\n                <td>\n                  <code>{{ issue.name }}</code>\n                  <cds-tag\n                    *ngIf=\"issue.readOnly\"\n                    size=\"sm\"\n                    type=\"warm-gray\"\n                    class=\"ms-1\"\n                    [title]=\"'epistolaAdminFormReadOnlyHint' | pluginTranslate: 'epistola' | async\"\n                    >{{\n                      'epistolaAdminFormReadOnly' | pluginTranslate: 'epistola' | async\n                    }}</cds-tag\n                  >\n                </td>\n                <td>{{ issue.missingComponents }}</td>\n                <td class=\"text-end\">\n                  <button\n                    class=\"btn btn-sm btn-outline-primary\"\n                    (click)=\"repairForm(issue)\"\n                    [disabled]=\"isRepairingForm(issue)\"\n                    [title]=\"'epistolaAdminRepairTooltip' | pluginTranslate: 'epistola' | async\"\n                  >\n                    {{\n                      (isRepairingForm(issue) ? 'epistolaAdminRepairing' : 'epistolaAdminRepair')\n                        | pluginTranslate: 'epistola'\n                        | async\n                    }}\n                  </button>\n                  <div\n                    *ngIf=\"formFeedback && formFeedback.formId === issue.formId\"\n                    class=\"small mt-1\"\n                    [class.text-success]=\"formFeedback.type === 'success'\"\n                    [class.text-danger]=\"formFeedback.type === 'error'\"\n                  >\n                    {{ formFeedback.message }}\n                  </div>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n\n        <!-- TEMPORARY: forms still using the legacy override-mapping object format -->\n        <hr class=\"my-4\" />\n        <h5 class=\"mb-1\">\n          {{ 'epistolaAdminLegacyOverrideTitle' | pluginTranslate: 'epistola' | async }}\n        </h5>\n        <p class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLegacyOverrideIntro' | pluginTranslate: 'epistola' | async }}\n        </p>\n\n        <div *ngIf=\"legacyOverrideLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div\n          *ngIf=\"!legacyOverrideLoading && legacyOverrideForms && legacyOverrideForms.length === 0\"\n          class=\"text-muted mb-3\"\n        >\n          {{ 'epistolaAdminNoLegacyOverride' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table\n          *ngIf=\"!legacyOverrideLoading && legacyOverrideForms && legacyOverrideForms.length > 0\"\n          class=\"table table-striped\"\n        >\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminFormName' | pluginTranslate: 'epistola' | async }}</th>\n              <th>\n                {{ 'epistolaAdminLegacyOverrideComponents' | pluginTranslate: 'epistola' | async }}\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let form of legacyOverrideForms\">\n              <td>\n                <code>{{ form.name }}</code>\n                <cds-tag\n                  *ngIf=\"form.readOnly\"\n                  size=\"sm\"\n                  type=\"warm-gray\"\n                  class=\"ms-1\"\n                  [title]=\"'epistolaAdminFormReadOnlyHint' | pluginTranslate: 'epistola' | async\"\n                  >{{ 'epistolaAdminFormReadOnly' | pluginTranslate: 'epistola' | async }}</cds-tag\n                >\n              </td>\n              <td>{{ form.legacyComponents }}</td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n    </cds-tabs>\n  </ng-container>\n\n  <!-- Detail view: selected configuration -->\n  <ng-container *ngIf=\"selectedCard\">\n    <div class=\"detail-header mb-3\">\n      <button class=\"btn btn-link btn-sm p-0\" (click)=\"backToOverview()\">\n        &larr; {{ 'epistolaAdminBackToOverview' | pluginTranslate: 'epistola' | async }}\n      </button>\n    </div>\n\n    <div class=\"detail-summary mb-4\">\n      <h4>\n        <span\n          class=\"status-dot me-2\"\n          [class.status-dot--ok]=\"selectedCard.reachable\"\n          [class.status-dot--error]=\"!selectedCard.reachable\"\n        >\n        </span>\n        {{ selectedCard.configurationTitle }}\n      </h4>\n\n      <table class=\"table table-sm detail-info-table\">\n        <tbody>\n          <tr>\n            <th>{{ 'epistolaAdminTenantId' | pluginTranslate: 'epistola' | async }}</th>\n            <td>\n              <code>{{ selectedCard.tenantId }}</code>\n            </td>\n          </tr>\n          <tr>\n            <th>{{ 'epistolaAdminStatus' | pluginTranslate: 'epistola' | async }}</th>\n            <td>\n              <cds-tag size=\"sm\" [type]=\"selectedCard.reachable ? 'green' : 'red'\">\n                {{\n                  selectedCard.reachable\n                    ? ('epistolaAdminConnected' | pluginTranslate: 'epistola' | async)\n                    : ('epistolaAdminUnreachable' | pluginTranslate: 'epistola' | async)\n                }}\n              </cds-tag>\n              <span class=\"text-muted ms-2\">{{ selectedCard.latencyMs }} ms</span>\n            </td>\n          </tr>\n          <tr *ngIf=\"selectedCard.serverVersion\">\n            <th>{{ 'epistolaAdminServerVersion' | pluginTranslate: 'epistola' | async }}</th>\n            <td>{{ selectedCard.serverVersion }}</td>\n          </tr>\n          <tr *ngIf=\"selectedCard.errorMessage\">\n            <th>{{ 'epistolaAdminError' | pluginTranslate: 'epistola' | async }}</th>\n            <td class=\"text-danger\">{{ selectedCard.errorMessage }}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <!-- Tabs -->\n    <ng-template #actionsHeading>\n      {{ 'epistolaAdminPluginActions' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ selectedCard.usageEntries.length }}</cds-tag>\n    </ng-template>\n\n    <ng-template #pendingHeading>\n      {{ 'epistolaAdminPendingJobs' | pluginTranslate: 'epistola' | async }}\n      <cds-tag\n        size=\"sm\"\n        [type]=\"selectedCard.pendingJobs.length > 0 ? 'blue' : 'gray'\"\n        class=\"ms-1\"\n      >\n        {{ selectedCard.pendingJobs.length }}\n      </cds-tag>\n    </ng-template>\n\n    <ng-template #catalogsHeading>\n      {{ 'epistolaAdminCatalogs' | pluginTranslate: 'epistola' | async }}\n      <cds-tag size=\"sm\" type=\"gray\" class=\"ms-1\">{{ catalogs.length }}</cds-tag>\n    </ng-template>\n\n    <cds-tabs [cacheActive]=\"true\" type=\"contained\">\n      <cds-tab\n        [heading]=\"actionsHeading\"\n        [active]=\"activeTab === 'actions'\"\n        (selected)=\"setActiveTab('actions')\"\n      >\n        <div *ngIf=\"selectedCard.usageEntries.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoUsageForConfig' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"selectedCard.usageEntries.length > 0\" class=\"table table-striped mt-3\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminCase' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminAction' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminProblems' | pluginTranslate: 'epistola' | async }}</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr\n              *ngFor=\"let entry of selectedCard.usageEntries\"\n              [class.table-warning]=\"entry.problems.length > 0\"\n            >\n              <td>{{ entry.caseDefinitionKey || '-' }}</td>\n              <td>\n                <a\n                  *ngIf=\"entry.caseDefinitionKey && entry.caseDefinitionVersionTag\"\n                  [routerLink]=\"[\n                    '/case-management',\n                    'case',\n                    entry.caseDefinitionKey,\n                    'version',\n                    entry.caseDefinitionVersionTag,\n                    'processes',\n                    entry.processDefinitionKey,\n                  ]\"\n                  class=\"usage-link\"\n                >\n                  {{ entry.processDefinitionName }}\n                </a>\n                <span *ngIf=\"!entry.caseDefinitionKey || !entry.caseDefinitionVersionTag\">\n                  {{ entry.processDefinitionName }}\n                </span>\n              </td>\n              <td>{{ entry.activityName }}</td>\n              <td>\n                <code>{{ entry.actionKey }}</code>\n              </td>\n              <td>\n                <cds-tag *ngIf=\"entry.problems.length === 0\" size=\"sm\" type=\"green\">OK</cds-tag>\n                <cds-tag\n                  *ngFor=\"let problem of entry.problems\"\n                  size=\"sm\"\n                  type=\"red\"\n                  class=\"d-block mb-1\"\n                >\n                  {{ problem }}\n                </cds-tag>\n              </td>\n              <td>\n                <button\n                  class=\"btn btn-sm btn-outline-secondary\"\n                  (click)=\"exportProcessLink(entry)\"\n                  [title]=\"'epistolaAdminExport' | pluginTranslate: 'epistola' | async\"\n                >\n                  &#x2913;\n                </button>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"pendingHeading\"\n        [active]=\"activeTab === 'pending'\"\n        (selected)=\"setActiveTab('pending')\"\n      >\n        <div *ngIf=\"selectedCard.pendingJobs.length === 0\" class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminNoPendingJobs' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"selectedCard.pendingJobs.length > 0\" class=\"table table-striped mt-3\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminProcess' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminActivity' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminStatus' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminRequestId' | pluginTranslate: 'epistola' | async }}</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let job of selectedCard.pendingJobs\">\n              <td>{{ job.processDefinitionName }}</td>\n              <td>{{ job.activityName }}</td>\n              <td>\n                <cds-tag\n                  *ngIf=\"job.status === 'UNWIRED'; else waitingTag\"\n                  size=\"sm\"\n                  type=\"red\"\n                  [title]=\"'epistolaAdminUnwiredTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  {{ 'epistolaAdminStatusUnwired' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n                <ng-template #waitingTag>\n                  <cds-tag size=\"sm\" type=\"blue\">\n                    {{ 'epistolaAdminStatusWaiting' | pluginTranslate: 'epistola' | async }}\n                  </cds-tag>\n                </ng-template>\n              </td>\n              <td>\n                <code *ngIf=\"job.status !== 'UNWIRED'\">{{ job.requestId }}</code>\n                <span *ngIf=\"job.status === 'UNWIRED'\" class=\"text-muted\">\u2014</span>\n              </td>\n              <td class=\"text-end\">\n                <button\n                  *ngIf=\"job.status !== 'UNWIRED'\"\n                  class=\"btn btn-sm btn-outline-primary\"\n                  (click)=\"reconcilePending(job)\"\n                  [disabled]=\"isReconciling(job)\"\n                  [title]=\"'epistolaAdminReconcileTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  <span *ngIf=\"!isReconciling(job)\">\n                    {{ 'epistolaAdminReconcile' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                  <span *ngIf=\"isReconciling(job)\">\n                    {{ 'epistolaAdminReconciling' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                </button>\n                <span\n                  *ngIf=\"job.status === 'UNWIRED'\"\n                  class=\"text-muted small\"\n                  [title]=\"'epistolaAdminUnwiredTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  {{ 'epistolaAdminUnwiredHint' | pluginTranslate: 'epistola' | async }}\n                </span>\n                <div\n                  *ngIf=\"reconcileFeedback && reconcileFeedback.executionId === job.executionId\"\n                  class=\"reconcile-feedback small mt-1\"\n                  [class.text-success]=\"reconcileFeedback.type === 'success'\"\n                  [class.text-warning]=\"reconcileFeedback.type === 'pending'\"\n                  [class.text-danger]=\"reconcileFeedback.type === 'error'\"\n                >\n                  {{ reconcileFeedback.message }}\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n\n      <cds-tab\n        [heading]=\"catalogsHeading\"\n        [active]=\"activeTab === 'catalogs'\"\n        (selected)=\"setActiveTab('catalogs')\"\n      >\n        <p class=\"text-muted mt-3 mb-3\">\n          {{ 'epistolaAdminCatalogsIntro' | pluginTranslate: 'epistola' | async }}\n        </p>\n\n        <div *ngIf=\"catalogsLoading\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminLoading' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <div *ngIf=\"!catalogsLoading && catalogs.length === 0\" class=\"text-muted mb-3\">\n          {{ 'epistolaAdminNoCatalogs' | pluginTranslate: 'epistola' | async }}\n        </div>\n\n        <table *ngIf=\"!catalogsLoading && catalogs.length > 0\" class=\"table table-striped\">\n          <thead>\n            <tr>\n              <th>{{ 'epistolaAdminCatalogSlug' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminCatalogVersion' | pluginTranslate: 'epistola' | async }}</th>\n              <th>{{ 'epistolaAdminCatalogStatus' | pluginTranslate: 'epistola' | async }}</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let catalog of catalogs\">\n              <td>\n                <code>{{ catalog.slug }}</code>\n              </td>\n              <td>{{ catalog.version }}</td>\n              <td>\n                <cds-tag *ngIf=\"catalog.status === 'IN_EPISTOLA'\" size=\"sm\" type=\"green\">\n                  {{ 'epistolaAdminCatalogInEpistola' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n                <cds-tag *ngIf=\"catalog.status === 'NOT_IN_EPISTOLA'\" size=\"sm\" type=\"red\">\n                  {{ 'epistolaAdminCatalogNotInEpistola' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n                <cds-tag *ngIf=\"catalog.status === 'UNKNOWN'\" size=\"sm\" type=\"gray\">\n                  {{ 'epistolaAdminCatalogStatusUnknown' | pluginTranslate: 'epistola' | async }}\n                </cds-tag>\n              </td>\n              <td class=\"text-end\">\n                <button\n                  class=\"btn btn-sm btn-outline-primary\"\n                  (click)=\"redeployCatalog(catalog)\"\n                  [disabled]=\"isRedeploying(catalog)\"\n                  [title]=\"'epistolaAdminRedeployTooltip' | pluginTranslate: 'epistola' | async\"\n                >\n                  <span *ngIf=\"!isRedeploying(catalog)\">\n                    {{ 'epistolaAdminRedeploy' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                  <span *ngIf=\"isRedeploying(catalog)\">\n                    {{ 'epistolaAdminRedeploying' | pluginTranslate: 'epistola' | async }}\n                  </span>\n                </button>\n                <div\n                  *ngIf=\"catalogFeedback && catalogFeedback.slug === catalog.slug\"\n                  class=\"reconcile-feedback small mt-1\"\n                  [class.text-success]=\"catalogFeedback.type === 'success'\"\n                  [class.text-danger]=\"catalogFeedback.type === 'error'\"\n                >\n                  {{ catalogFeedback.message }}\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </cds-tab>\n    </cds-tabs>\n  </ng-container>\n</div>\n", styles: [".epistola-admin{padding:1.5rem}.epistola-admin .version-badge{font-size:.75rem;font-weight:500;padding:.2em .6em;border-radius:4px;background-color:#e8e8e8;color:#525252}.epistola-admin .badge{font-size:.85em;padding:.35em .65em}.epistola-admin code{font-size:.9em;color:#525252}.epistola-admin table th{font-weight:600;white-space:nowrap}.epistola-admin .status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.5rem;flex-shrink:0;background-color:#adb5bd}.epistola-admin .status-dot--ok{background-color:#198754}.epistola-admin .status-dot--error{background-color:#dc3545}.epistola-admin .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}.epistola-admin .config-card{border:1px solid #dee2e6;border-radius:8px;padding:1.25rem;cursor:pointer;transition:box-shadow .15s ease,border-color .15s ease;background:#fff}.epistola-admin .config-card:hover{box-shadow:0 2px 8px #0000001a}.epistola-admin .config-card--ok{border-left:4px solid #198754}.epistola-admin .config-card--warning{border-left:4px solid #ffc107}.epistola-admin .config-card--error{border-left:4px solid #dc3545}.epistola-admin .config-card__header{display:flex;align-items:center;margin-bottom:1rem}.epistola-admin .config-card__title{margin:0;font-size:1.05rem;font-weight:600;color:#161616}.epistola-admin .config-card__body{display:flex;flex-direction:column;gap:.5rem}.epistola-admin .config-card__field{display:flex;justify-content:space-between;align-items:center}.epistola-admin .config-card__label{font-size:.875rem;color:#6c757d}.epistola-admin .config-card__value{font-size:.875rem;color:#161616}.epistola-admin .config-card__footer{margin-top:1rem;padding-top:.75rem;border-top:1px solid #f0f0f0;text-align:right}.epistola-admin .config-card__latency{font-size:.8rem;color:#adb5bd}.epistola-admin .usage-link{color:#0f62fe;text-decoration:none}.epistola-admin .usage-link:hover{text-decoration:underline}.epistola-admin .detail-info-table{max-width:500px}.epistola-admin .detail-info-table th{width:140px}.epistola-admin .detail-summary{padding:1rem 0;border-bottom:1px solid #dee2e6}.epistola-admin .epistola-changelog{max-height:60vh;overflow:auto;padding:.5rem 1rem;border:1px solid #dee2e6;border-radius:4px}.epistola-admin .epistola-changelog .changelog-release{padding:.75rem 0}.epistola-admin .epistola-changelog .changelog-release+.changelog-release{border-top:1px solid #eee}.epistola-admin .epistola-changelog .changelog-release__header{display:flex;align-items:center;margin-bottom:.5rem}.epistola-admin .epistola-changelog .changelog-section{margin:.25rem 0 .75rem}.epistola-admin .epistola-changelog .changelog-section__title{font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:#6f6f6f;margin-bottom:.25rem}.epistola-admin .epistola-changelog .changelog-section__items{margin:0;padding-left:1.25rem;font-size:.8125rem;line-height:1.5}.epistola-admin .epistola-changelog .changelog-section__items li{margin-bottom:.25rem;word-break:break-word}\n"] }]
+        }], ctorParameters: () => [{ type: EpistolaAdminService }, { type: i2$4.ActivatedRoute }, { type: i2$4.Router }] });
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 function isRuntimeWindow(value) {
     return typeof value === 'object' && value !== null;
 }
@@ -3513,12 +4554,46 @@ function isEpistolaEnabled() {
     return flag !== false && flag !== 'false';
 }
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 const epistolaEnabledGuard = () => {
     if (isEpistolaEnabled())
         return true;
     return inject(Router).parseUrl('/');
 };
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 const routes = [
     {
         path: 'epistola',
@@ -3529,7 +4604,7 @@ const routes = [
 ];
 class EpistolaAdminRoutingModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminRoutingModule, imports: [i2$5.RouterModule], exports: [RouterModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminRoutingModule, imports: [i2$4.RouterModule], exports: [RouterModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaAdminRoutingModule, decorators: [{
@@ -3540,6 +4615,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 }]
         }] });
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 const EPISTOLA_DOCUMENT_OPTIONS = {
     type: 'epistola-document',
     selector: 'epistola-document-element',
@@ -3547,15 +4639,146 @@ const EPISTOLA_DOCUMENT_OPTIONS = {
     group: 'basic',
     icon: 'file-pdf-o',
     emptyValue: null,
-    fieldOptions: ['label', 'display', 'documentVariable', 'tenantIdVariable', 'filename'],
+    // tenantIdVariable is intentionally absent: it is not author-configurable in the builder
+    // (the tenant is process-wide, always the default), and Valtimo copies every fieldOptions
+    // key onto the element unconditionally — listing it would overwrite the component's
+    // `epistolaTenantId` @Input() default with `undefined` and break the download.
+    fieldOptions: ['label', 'display', 'documentVariable', 'filename'],
+    // Embed the hidden task-id carrier so dropping this component is enough — no separate
+    // field for the author to add. Valtimo prefills it server-side via the epistola: resolver.
+    schema: { components: [PREFILLED_TASK_ID_CARRIER] },
+    // Minimal edit form: only the five properties this component actually reads (its
+    // @Input()s / fieldOptions). A flat `components` array (no `tabs` wrapper) replaces the
+    // inherited stock text-field dialog (Display/Data/Validation/API/Conditional/Logic/Layout)
+    // entirely. Keys must match the @Input() names verbatim so the fieldOptions copy works.
+    editForm: () => ({
+        components: [
+            {
+                type: 'textfield',
+                key: 'label',
+                label: 'Label',
+                weight: 10,
+                defaultValue: 'Document',
+            },
+            {
+                type: 'select',
+                key: 'display',
+                label: 'Display',
+                weight: 20,
+                defaultValue: 'both',
+                dataSrc: 'values',
+                data: {
+                    values: [
+                        { label: 'Inline preview', value: 'inline' },
+                        { label: 'Download button', value: 'button' },
+                        { label: 'Both', value: 'both' },
+                    ],
+                },
+            },
+            {
+                type: 'textfield',
+                key: 'documentVariable',
+                label: 'Document variable',
+                weight: 30,
+                defaultValue: 'epistolaResult',
+                tooltip: 'Name of the process variable holding the Epistola result (PDF id).',
+            },
+            {
+                type: 'textfield',
+                key: 'filename',
+                label: 'Filename',
+                weight: 40,
+                defaultValue: 'document.pdf',
+                tooltip: 'Filename used for the download (Content-Disposition).',
+            },
+        ],
+    }),
 };
 function registerEpistolaDocumentComponent(injector) {
     if (customElements.get(EPISTOLA_DOCUMENT_OPTIONS.selector)) {
         return;
     }
     registerCustomFormioComponent(EPISTOLA_DOCUMENT_OPTIONS, EpistolaDocumentComponent, injector);
+    // Extend the base class to forward the server-prefilled task id (epistola: value
+    // resolver) to the Angular element, so the download authorizes against the exact task in
+    // every Valtimo task-open flow.
+    const Formio = window.Formio;
+    const BaseComponent = Formio?.Components?.components?.[EPISTOLA_DOCUMENT_OPTIONS.type];
+    if (!BaseComponent) {
+        return;
+    }
+    class EpistolaDocumentWithTaskContext extends BaseComponent {
+        attach(element) {
+            const result = super.attach(element);
+            if (this._customAngularElement) {
+                const prefilledTaskId = readPrefilledTaskId(this.root);
+                if (prefilledTaskId) {
+                    this._customAngularElement['taskInstanceId'] = prefilledTaskId;
+                }
+            }
+            return result;
+        }
+    }
+    Formio.Components.setComponent(EPISTOLA_DOCUMENT_OPTIONS.type, EpistolaDocumentWithTaskContext);
 }
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+/**
+ * Hides a registered custom Formio component from the builder's component palette,
+ * while keeping it fully usable inside other components' `editForm`s and at runtime.
+ *
+ * Formio's `WebformBuilder` only adds a component to the palette when
+ * `component.builderInfo && component.builderInfo.schema` is truthy. Overriding the
+ * registered class's static `builderInfo` getter to `false` therefore removes it from
+ * the palette. Runtime instantiation and editForm usage don't consult `builderInfo`,
+ * so they are unaffected.
+ *
+ * Call this AFTER the component is registered (and after any `setComponent` re-registration),
+ * so it targets the final class in `Formio.Components.components[type]`.
+ */
+function hideFormioComponentFromBuilder(type) {
+    const registered = window.Formio?.Components?.components?.[type];
+    if (registered) {
+        Object.defineProperty(registered, 'builderInfo', {
+            get: () => false,
+            configurable: true,
+        });
+    }
+}
+
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 const EPISTOLA_RETRY_FORM_OPTIONS = {
     type: 'epistola-retry-form',
     selector: 'epistola-retry-form-element',
@@ -3564,13 +4787,60 @@ const EPISTOLA_RETRY_FORM_OPTIONS = {
     icon: 'refresh',
     emptyValue: null,
     fieldOptions: ['sourceActivityId', 'label'], // sourceActivityId is optional (set via BPMN input parameter)
+    // Embed the hidden task-id carrier so dropping this component is enough — no separate
+    // field for the author to add. Valtimo prefills it server-side via the epistola: resolver.
+    schema: { components: [PREFILLED_TASK_ID_CARRIER] },
 };
 function registerEpistolaRetryFormComponent(injector) {
-    if (!customElements.get(EPISTOLA_RETRY_FORM_OPTIONS.selector)) {
-        registerCustomFormioComponent(EPISTOLA_RETRY_FORM_OPTIONS, EpistolaRetryFormComponent, injector);
+    if (customElements.get(EPISTOLA_RETRY_FORM_OPTIONS.selector)) {
+        return;
+    }
+    registerCustomFormioComponent(EPISTOLA_RETRY_FORM_OPTIONS, EpistolaRetryFormComponent, injector);
+    // Extend the base class to forward the server-prefilled task id (epistola: value
+    // resolver) to the Angular element, so the retry form authorizes against the exact task in
+    // every Valtimo task-open flow.
+    const Formio = window.Formio;
+    const BaseComponent = Formio?.Components?.components?.[EPISTOLA_RETRY_FORM_OPTIONS.type];
+    if (!BaseComponent) {
+        return;
     }
+    class EpistolaRetryFormWithTaskContext extends BaseComponent {
+        attach(element) {
+            const result = super.attach(element);
+            if (this._customAngularElement) {
+                const prefilledTaskId = readPrefilledTaskId(this.root);
+                if (prefilledTaskId) {
+                    this._customAngularElement['taskInstanceId'] = prefilledTaskId;
+                }
+            }
+            return result;
+        }
+    }
+    Formio.Components.setComponent(EPISTOLA_RETRY_FORM_OPTIONS.type, EpistolaRetryFormWithTaskContext);
+    // Part of the plugin's auto-deployed retry form, not a drop-anywhere component — hide it
+    // from the builder palette. It still renders wherever it's already present in a form.
+    hideFormioComponentFromBuilder(EPISTOLA_RETRY_FORM_OPTIONS.type);
 }
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+/** Default debounce for the auto-refresh, in milliseconds. */
+const DEFAULT_REFRESH_DEBOUNCE_MS = 1500;
 const EPISTOLA_DOCUMENT_PREVIEW_OPTIONS = {
     type: 'epistola-document-preview',
     selector: 'epistola-document-preview-element',
@@ -3579,6 +4849,9 @@ const EPISTOLA_DOCUMENT_PREVIEW_OPTIONS = {
     icon: 'file-pdf-o',
     emptyValue: null,
     fieldOptions: ['label', 'processDefinitionKey', 'sourceActivityId', 'overrideMapping'],
+    // Embed the hidden task-id carrier so dropping this component is enough — no separate
+    // field for the author to add. Valtimo prefills it server-side via the epistola: resolver.
+    schema: { components: [PREFILLED_TASK_ID_CARRIER] },
     editForm: () => ({
         components: [
             {
@@ -3594,6 +4867,23 @@ const EPISTOLA_DOCUMENT_PREVIEW_OPTIONS = {
                 label: 'Input Overrides',
                 weight: 20,
             },
+            {
+                type: 'checkbox',
+                key: 'autoRefresh',
+                label: 'Auto-refresh preview as the form is filled in',
+                tooltip: 'When on, the preview refreshes automatically while the form is edited — debounced, and only when a field loses focus, not on every keystroke. Turn off to refresh only with the Refresh button.',
+                defaultValue: true,
+                weight: 30,
+            },
+            {
+                type: 'number',
+                key: 'refreshDebounceMs',
+                label: 'Auto-refresh debounce (ms)',
+                tooltip: 'How long to wait after the last change before refreshing. Higher values feel calmer; lower values feel more responsive.',
+                defaultValue: DEFAULT_REFRESH_DEBOUNCE_MS,
+                weight: 40,
+                conditional: { show: true, when: 'autoRefresh', eq: 'true' },
+            },
         ],
     }),
 };
@@ -3614,7 +4904,39 @@ function registerEpistolaDocumentPreviewComponent(injector) {
     class PreviewWithOverrides extends BasePreviewComponent {
         _debounceTimer = null;
         _changeListenerAttached = false;
+        _changeHandler = null;
+        _blurHandler = null;
+        _blurTarget = null;
+        _destroyed = false;
+        _debounceMs = DEFAULT_REFRESH_DEBOUNCE_MS;
+        // Serialized form of the last value pushed, so we skip re-rendering the preview
+        // when a change recomputes to the same overrides (e.g. typing in a field that
+        // isn't part of the mapping). undefined = nothing pushed yet.
+        _lastPushedJson = undefined;
+        // Whether the last compute produced usable overrides. Drives the initial-paint
+        // retry below: it stops once the form data is present.
+        _hasUsableValue = false;
+        // Timers for the initial-paint retry — Valtimo can prefill form data
+        // asynchronously after the component mounts, sometimes without a change event.
+        _initialPaintTimers = [];
+        // Whether auto-refresh (recompute on change/blur) is currently active. Seeded
+        // once from the builder's autoRefresh option, then toggled at runtime by the
+        // end-user via the preview header. Persisted across redraws (only seeded once).
+        _autoRefreshEnabled = true;
+        _autoRefreshInitialized = false;
         attach(element) {
+            // Formio detaches and re-attaches components on every redraw — not only at
+            // teardown — so a re-attach means the component is alive again. Clear the
+            // destroyed flag here; it only stays set when detach() is the final call
+            // (genuine teardown, e.g. task completion), which is what suppresses the
+            // post-submit preview.
+            this._destroyed = false;
+            // Seed the runtime auto-refresh state from the builder option, once. Re-attach
+            // (redraw) must not clobber a choice the end-user made via the header toggle.
+            if (!this._autoRefreshInitialized) {
+                this._autoRefreshEnabled = this.component?.autoRefresh !== false;
+                this._autoRefreshInitialized = true;
+            }
             // Bidirectional sync between processLinkSelection object and separate properties.
             // The editForm uses processLinkSelection (single field), while the component
             // config and Angular inputs use processDefinitionKey + sourceActivityId.
@@ -3634,78 +4956,436 @@ function registerEpistolaDocumentPreviewComponent(injector) {
                 this._customAngularElement['processDefinitionKey'] =
                     this.component.processDefinitionKey || '';
                 this._customAngularElement['sourceActivityId'] = this.component.sourceActivityId || '';
+                // Forward the server-prefilled task id (epistola: value resolver) so the
+                // component authorizes against the exact task in every Valtimo task-open flow.
+                const prefilledTaskId = readPrefilledTaskId(this.root);
+                if (prefilledTaskId) {
+                    this._customAngularElement['taskInstanceId'] = prefilledTaskId;
+                }
+                if (this.component?.overrideMapping) {
+                    // Let the component's Refresh button force a recompute from the live form
+                    // data, so it works before the first change (e.g. on initial load with
+                    // pre-filled fields) rather than reading a not-yet-populated value.
+                    this._customAngularElement['requestOverrides'] = () => this._computeAndSetOverrides(true);
+                    // Reflect the current auto-refresh state to the header toggle (current
+                    // state, not the builder default — so a redraw keeps the user's choice),
+                    // and let the toggle flip it. Turning it on does an immediate refresh.
+                    this._customAngularElement['autoRefresh'] = this._autoRefreshEnabled;
+                    this._customAngularElement['setAutoRefresh'] = (enabled) => {
+                        this._autoRefreshEnabled = enabled;
+                        if (enabled) {
+                            this._computeAndSetOverrides(true);
+                        }
+                    };
+                }
             }
-            // Listen to form changes and compute input overrides from the mapping
+            // Compute input overrides from the mapping and wire up the live listeners.
             if (this.root && this.component?.overrideMapping && !this._changeListenerAttached) {
                 this._changeListenerAttached = true;
-                this.root.on('change', () => {
-                    this._computeAndSetOverrides();
-                });
-                // Compute initial value
-                this._computeAndSetOverrides();
+                this._debounceMs = this._resolveDebounceMs();
+                // Compute the initial overrides immediately (no debounce) so a pre-filled
+                // form paints its preview without the debounce delay. This runs regardless
+                // of the auto-refresh state, so the preview still shows once on open.
+                this._computeAndSetOverrides(true);
+                // Valtimo can prefill the form data asynchronously after the component
+                // mounts, sometimes without a change event we can hook — so the single
+                // compute above may see empty data. Re-attempt a few times over ~2s until
+                // usable overrides appear, so a pre-filled form previews itself without a
+                // manual edit or Refresh click. Each attempt is skipped once the data is in.
+                this._initialPaintTimers = [400, 1000, 2000].map((ms) => setTimeout(() => {
+                    if (!this._hasUsableValue && !this._destroyed) {
+                        void this._runCompute();
+                    }
+                }, ms));
+                // Always wire the change + blur listeners; the runtime auto-refresh toggle
+                // (_autoRefreshEnabled) gates whether they actually recompute, so the
+                // end-user can switch it on/off live without re-attaching anything.
+                //
+                // Debounced recompute on any form change — collapses bursts of edits and,
+                // together with the dedup, only re-renders when the mapped data changes.
+                this._changeHandler = () => {
+                    if (this._autoRefreshEnabled)
+                        this._computeAndSetOverrides();
+                };
+                this.root.on('change', this._changeHandler);
+                // Flush immediately when a field loses focus. `focusout` bubbles (unlike
+                // `blur`), so one listener on the form root catches every input — and it
+                // fires on blur rather than on each keystroke, which keeps the refresh from
+                // feeling hectic.
+                const formEl = this.root?.element;
+                if (formEl?.addEventListener) {
+                    this._blurHandler = () => {
+                        if (this._autoRefreshEnabled)
+                            this._computeAndSetOverrides(true);
+                    };
+                    formEl.addEventListener('focusout', this._blurHandler);
+                    this._blurTarget = formEl;
+                }
             }
             return result;
         }
-        _computeAndSetOverrides() {
+        // Tear down the change listener and any pending debounce so a preview is never
+        // fired after the form is unmounted (e.g. on task completion). Without this the
+        // 1.5s debounce can outlive submit and POST /preview with reset/incomplete data,
+        // which Epistola rejects with a 400.
+        detach() {
+            this._destroyed = true;
             if (this._debounceTimer) {
                 clearTimeout(this._debounceTimer);
+                this._debounceTimer = null;
             }
-            this._debounceTimer = setTimeout(() => {
-                const mapping = this.component?.overrideMapping;
-                const formData = this.root?.data;
-                if (mapping && formData) {
-                    const overrides = computeInputOverrides(mapping, formData);
-                    if (Object.keys(overrides).length > 0) {
-                        this.setValue(overrides);
-                    }
-                }
-            }, 1500);
+            this._initialPaintTimers.forEach((t) => clearTimeout(t));
+            this._initialPaintTimers = [];
+            this._hasUsableValue = false;
+            if (this._changeHandler && this.root?.off) {
+                this.root.off('change', this._changeHandler);
+                this._changeHandler = null;
+            }
+            if (this._blurHandler && this._blurTarget?.removeEventListener) {
+                this._blurTarget.removeEventListener('focusout', this._blurHandler);
+                this._blurHandler = null;
+                this._blurTarget = null;
+            }
+            this._changeListenerAttached = false;
+            this._lastPushedJson = undefined;
+            return super.detach();
+        }
+        _computeAndSetOverrides(immediate = false) {
+            if (this._debounceTimer) {
+                clearTimeout(this._debounceTimer);
+            }
+            this._debounceTimer = setTimeout(() => void this._runCompute(), immediate ? 0 : this._debounceMs);
+        }
+        // Compute the input overrides from the live form data and push them to the
+        // component (deduped). Separated from the debounce scheduling so the
+        // initial-paint retry can invoke it directly without another timer hop.
+        async _runCompute() {
+            // Skip if the form is being/has been submitted or the component is gone —
+            // those previews would run with incomplete/reset data and 400 from Epistola.
+            if (this._destroyed || this.root?.submitting || this.root?.submitted) {
+                return;
+            }
+            const mapping = this.component?.overrideMapping;
+            const formData = this.root?.data;
+            if (!mapping || !formData) {
+                return;
+            }
+            // computeInputOverrides evaluates a JSONata expression (async). Re-check
+            // the submit/teardown guards after the await — they can flip while the
+            // promise is in flight.
+            const overrides = await computeInputOverrides(mapping, formData);
+            if (this._destroyed || this.root?.submitting || this.root?.submitted) {
+                return;
+            }
+            // Push null when there's nothing usable yet so the component reverts to
+            // its "complete the form" placeholder instead of keeping a stale preview.
+            const next = Object.keys(overrides).length > 0 ? overrides : null;
+            // Track whether the data is in yet (stops the initial-paint retry).
+            this._hasUsableValue = next !== null;
+            // Dedup: only push (and re-render) when the computed overrides actually
+            // changed since the last push. A change/blur that doesn't affect the
+            // mapped data recomputes to the same value and is dropped here.
+            const nextJson = JSON.stringify(next);
+            if (nextJson === this._lastPushedJson) {
+                return;
+            }
+            this._lastPushedJson = nextJson;
+            this._pushOverrides(next);
+        }
+        // Push the computed overrides to the Angular component via a dedicated input.
+        // NOT Formio's setValue: Valtimo's bridge only mirrors `value` to the DOM and
+        // never to Formio's data model, so Formio resets it to emptyValue on the next
+        // redraw — which would cancel the preview. A plain element property is left
+        // untouched by Formio and so sticks.
+        _pushOverrides(value) {
+            if (this._customAngularElement) {
+                this._customAngularElement['inputOverrides'] = value;
+            }
+        }
+        /**
+         * Resolve the configured auto-refresh debounce (ms), falling back to the
+         * default for missing or non-numeric/negative values.
+         */
+        _resolveDebounceMs() {
+            const configured = Number(this.component?.refreshDebounceMs);
+            return Number.isFinite(configured) && configured >= 0
+                ? configured
+                : DEFAULT_REFRESH_DEBOUNCE_MS;
         }
     }
     // Re-register with the extended class
     Formio.Components.setComponent(EPISTOLA_DOCUMENT_PREVIEW_OPTIONS.type, PreviewWithOverrides);
 }
 
-const FORM_REF_PREFIX = 'form:';
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+const jsonata = _jsonata.default || _jsonata;
+const SCOPES = ['doc', 'pv', 'case'];
+function isScope(value) {
+    return typeof value === 'string' && SCOPES.includes(value);
+}
+/**
+ * Statically extract every `$doc`/`$pv`/`$case` path referenced anywhere in a JSONata
+ * expression. Used to surface — informationally — which inputs a template's data mapping
+ * consumes, so the override-builder author sees what is worth overriding during preview.
+ *
+ * This is a best-effort static read: paths built dynamically (`$lookup`, custom functions,
+ * computed keys) can't be resolved and simply won't appear. Treat the result as suggestions,
+ * never as validation — an empty result (e.g. on a parse error) means "nothing to suggest".
+ *
+ * Generalizes the variable-path primitive in `utils/jsonata-converter.ts` (`classifyValue`)
+ * to recurse over the whole AST rather than only top-level object values.
+ */
+function extractReferencedPaths(expression) {
+    if (!expression || !expression.trim()) {
+        return [];
+    }
+    let ast;
+    try {
+        ast = jsonata(expression).ast();
+    }
+    catch {
+        return [];
+    }
+    const seen = new Map();
+    walk(ast, seen);
+    return [...seen.values()].sort((a, b) => a.scope.localeCompare(b.scope) || a.path.localeCompare(b.path));
+}
+function record(node, seen) {
+    // Two shapes carry a scope reference:
+    //  - a bare `variable` node (`$doc`), where the scope is `node.value` and the path is empty;
+    //  - a `path` node whose first step is the `$<scope>` variable, followed by the property
+    //    names: `$doc.aanvrager.naam` → steps [doc, aanvrager, naam].
+    const scope = node?.type === 'variable' ? node.value : node?.steps?.[0]?.value;
+    if (!isScope(scope)) {
+        return;
+    }
+    const path = (node.steps ?? [])
+        .slice(1)
+        .map((step) => step?.value)
+        .filter((segment) => typeof segment === 'string')
+        .join('.');
+    const key = `${scope}.${path}`;
+    if (!seen.has(key)) {
+        seen.set(key, { scope, path });
+    }
+}
+/** Recursively walk every child node, recording any `$doc`/`$pv`/`$case` path reference. */
+function walk(node, seen) {
+    if (!node || typeof node !== 'object') {
+        return;
+    }
+    // A bare scope variable with no property access, e.g. `$spread($doc)`.
+    if (node.type === 'variable') {
+        if (isScope(node.value)) {
+            record(node, seen);
+        }
+        return;
+    }
+    // A path rooted at a scope variable, e.g. `$doc.aanvrager.naam`. Record the whole path,
+    // then walk only the filters/predicates attached to its steps — not the variable/name
+    // steps themselves, which would otherwise re-record the leading scope with an empty path.
+    if (node.type === 'path' &&
+        node.steps?.[0]?.type === 'variable' &&
+        isScope(node.steps[0].value)) {
+        record(node, seen);
+        for (const step of node.steps) {
+            walkValue(step?.predicate, seen);
+            walkValue(step?.stages, seen);
+            walkValue(step?.group, seen);
+        }
+        return;
+    }
+    // Generic recursion into every structural child the dashjoin AST uses. Object literals
+    // carry their entries as `lhs` = array of [keyNode, valueNode] pairs.
+    for (const child of [
+        node.lhs,
+        node.rhs,
+        node.condition,
+        node.then,
+        node.else,
+        node.procedure,
+        node.group,
+        node.pattern,
+        node.update,
+        node.delete,
+    ]) {
+        walkValue(child, seen);
+    }
+    for (const list of [
+        node.steps,
+        node.arguments,
+        node.stages,
+        node.expressions,
+        node.terms,
+        node.predicate,
+    ]) {
+        walkValue(list, seen);
+    }
+}
+/** Walk a value that may be a node, an array of nodes, or an array of [key, value] pairs. */
+function walkValue(value, seen) {
+    if (Array.isArray(value)) {
+        for (const item of value) {
+            walkValue(item, seen);
+        }
+    }
+    else {
+        walk(value, seen);
+    }
+}
+
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 class EpistolaOverrideBuilderComponent {
     cdr;
+    pluginService;
     value;
     valueChange = new EventEmitter();
     disabled = false;
     label = 'Input Overrides';
     availableFields = [];
+    /**
+     * Identify the selected generate-document process link, forwarded from the
+     * preview component's editForm. Used to fetch the link's data mapping and
+     * surface which `$doc`/`$pv` paths it consumes — purely informational guidance.
+     */
+    processDefinitionKey = '';
+    sourceActivityId = '';
     rows = [];
     advancedMode = false;
-    jsonText = '';
-    jsonError = null;
+    /** True when the current expression can't be represented by the simple table. */
+    simpleUnavailable = false;
+    expression = '';
+    /** `$doc`/`$pv`/`$case` paths the selected template's data mapping references. */
+    referencedPaths = [];
+    exampleExpression = '{ "doc": { "naam": $form.voornaam & \' \' & $form.achternaam } }';
     initialized = false;
-    constructor(cdr) {
+    destroy$ = new Subject();
+    /** Link last fetched, so we refetch only when the selected process link changes. */
+    lastFetchedLinkKey = null;
+    constructor(cdr, pluginService) {
         this.cdr = cdr;
+        this.pluginService = pluginService;
+    }
+    get formFieldKeys() {
+        return this.availableFields.map((f) => f.key);
     }
-    ngOnChanges() {
-        if (!this.initialized && this.value) {
+    get hasReferencedPaths() {
+        return this.referencedPaths.length > 0;
+    }
+    /** Referenced paths for a scope, excluding whole-scope refs (empty path) that aren't completions. */
+    referencedPathsForScope(scope) {
+        return this.referencedPaths.filter((p) => p.scope === scope && p.path).map((p) => p.path);
+    }
+    /** Autocomplete context for the advanced editor: form fields plus the mapping's referenced paths. */
+    get editorContextVariables() {
+        return {
+            form: this.formFieldKeys,
+            doc: this.referencedPathsForScope('doc'),
+            pv: this.referencedPathsForScope('pv'),
+            case: this.referencedPathsForScope('case'),
+        };
+    }
+    /** Render a referenced path as a `$scope.path` reference (or `$scope` for a whole-scope ref). */
+    formatReferencedPath(ref) {
+        return ref.path ? `$${ref.scope}.${ref.path}` : `$${ref.scope}`;
+    }
+    ngOnChanges(_changes) {
+        if (!this.initialized && this.value != null) {
             this.initialized = true;
-            this.rows = this.mappingToRows(this.value);
-            this.jsonText = JSON.stringify(this.value, null, 2);
+            // Migrate a legacy object value to JSONata once, and persist it upward so
+            // the form is saved in the new format. Everything below works on a string.
+            if (isLegacyOverrideMapping(this.value)) {
+                this.expression = legacyOverrideToJsonata(this.value);
+                this.value = this.expression || null;
+                this.valueChange.emit(this.value);
+            }
+            else {
+                this.expression = String(this.value);
+            }
+            this.loadFromExpression(this.expression);
         }
+        this.refreshReferencedPaths();
         this.cdr.markForCheck();
     }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    /**
+     * Fetch the selected process link's data mapping and extract the `$doc`/`$pv`/`$case`
+     * paths it references, so the author sees what this template consumes. Refetches only
+     * when the selected link changes; clears when no link is selected. Best-effort and
+     * non-blocking — a failed fetch simply shows no suggestions.
+     */
+    refreshReferencedPaths() {
+        const linkKey = this.processDefinitionKey && this.sourceActivityId
+            ? `${this.processDefinitionKey}::${this.sourceActivityId}`
+            : null;
+        if (!linkKey) {
+            if (this.lastFetchedLinkKey !== null) {
+                this.lastFetchedLinkKey = null;
+                this.referencedPaths = [];
+            }
+            return;
+        }
+        if (linkKey === this.lastFetchedLinkKey) {
+            return;
+        }
+        this.lastFetchedLinkKey = linkKey;
+        this.pluginService
+            .getProcessLinkMapping(this.processDefinitionKey, this.sourceActivityId)
+            .pipe(takeUntil$1(this.destroy$), catchError(() => of({ dataMapping: '' })))
+            .subscribe((mapping) => {
+            this.referencedPaths = extractReferencedPaths(mapping.dataMapping);
+            this.cdr.markForCheck();
+        });
+    }
     toggleMode() {
-        this.advancedMode = !this.advancedMode;
         if (this.advancedMode) {
-            const mapping = this.rowsToMapping();
-            this.jsonText = Object.keys(mapping).length > 0 ? JSON.stringify(mapping, null, 2) : '';
-            this.jsonError = null;
+            // Advanced -> simple: only possible when the expression round-trips.
+            const parsed = parseOverrideJsonata(this.expression);
+            if (parsed === null) {
+                this.simpleUnavailable = true;
+                return;
+            }
+            this.rows = parsed;
+            this.simpleUnavailable = false;
+            this.advancedMode = false;
         }
         else {
-            try {
-                const parsed = this.jsonText.trim() ? JSON.parse(this.jsonText) : {};
-                this.rows = this.mappingToRows(parsed);
-                this.jsonError = null;
-            }
-            catch {
-                // Keep current rows if JSON is invalid
-            }
+            this.advancedMode = true;
         }
     }
     addRow() {
@@ -3715,65 +5395,105 @@ class EpistolaOverrideBuilderComponent {
         this.rows.splice(index, 1);
         this.emitChange();
     }
+    /** Simple-table change: serialize rows back to a JSONata expression. */
     emitChange() {
-        const mapping = this.rowsToMapping();
-        this.value = Object.keys(mapping).length > 0 ? mapping : null;
-        this.valueChange.emit(this.value);
-    }
-    onJsonChange(text) {
-        this.jsonText = text;
-        if (!text.trim()) {
-            this.jsonError = null;
-            this.value = null;
-            this.valueChange.emit(null);
-            return;
-        }
-        try {
-            const parsed = JSON.parse(text);
-            this.jsonError = null;
-            this.value = parsed;
-            this.valueChange.emit(parsed);
+        this.expression = serializeOverrideRows(this.rows);
+        this.emit(this.expression);
+    }
+    /** Advanced-editor change. */
+    onExpressionChange(expr) {
+        this.expression = expr;
+        this.simpleUnavailable = parseOverrideJsonata(expr) === null;
+        this.emit(expr);
+    }
+    loadFromExpression(expression) {
+        const parsed = parseOverrideJsonata(expression);
+        if (parsed === null) {
+            // Richer than the simple table can show — start in advanced mode.
+            this.simpleUnavailable = true;
+            this.advancedMode = true;
+            this.rows = [];
         }
-        catch (e) {
-            this.jsonError = 'Invalid JSON';
+        else {
+            this.simpleUnavailable = false;
+            this.rows = parsed;
         }
     }
-    rowsToMapping() {
-        const mapping = {};
-        for (const row of this.rows) {
-            if (row.inputPath && row.formFieldKey) {
-                if (!mapping[row.scope]) {
-                    mapping[row.scope] = {};
-                }
-                mapping[row.scope][row.inputPath] = FORM_REF_PREFIX + row.formFieldKey;
-            }
-        }
-        return mapping;
-    }
-    mappingToRows(mapping) {
-        const rows = [];
-        for (const [scope, fields] of Object.entries(mapping)) {
-            if (scope === 'doc' || scope === 'pv') {
-                for (const [path, ref] of Object.entries(fields)) {
-                    const formFieldKey = String(ref).startsWith(FORM_REF_PREFIX)
-                        ? String(ref).substring(FORM_REF_PREFIX.length)
-                        : String(ref);
-                    rows.push({ scope, inputPath: path, formFieldKey });
-                }
-            }
-        }
-        return rows;
+    emit(expression) {
+        const next = expression && expression.trim() ? expression : null;
+        this.value = next;
+        this.valueChange.emit(next);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaOverrideBuilderComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaOverrideBuilderComponent, isStandalone: true, selector: "epistola-override-builder-component", inputs: { value: "value", disabled: "disabled", label: "label", availableFields: "availableFields" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaOverrideBuilderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: EpistolaPluginService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: EpistolaOverrideBuilderComponent, isStandalone: true, selector: "epistola-override-builder-component", inputs: { value: "value", disabled: "disabled", label: "label", availableFields: "availableFields", processDefinitionKey: "processDefinitionKey", sourceActivityId: "sourceActivityId" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
     <div class="override-builder">
       <div class="builder-header">
         <span class="builder-label">{{ label || 'Input Overrides' }}</span>
-        <button type="button" class="mode-toggle" (click)="toggleMode()">
+        <button
+          type="button"
+          class="mode-toggle"
+          [disabled]="simpleUnavailable && !advancedMode"
+          (click)="toggleMode()"
+        >
           {{ advancedMode ? 'Simple' : 'Advanced' }}
         </button>
       </div>
 
+      <!-- Inline guidance for the author -->
+      <p class="builder-intro">
+        Make the preview reflect what the user is typing — <em>before</em> they submit — by feeding
+        live form values into the document inputs.
+      </p>
+      <details class="builder-help">
+        <summary>When should I map a field?</summary>
+        <ul>
+          <li>
+            <strong>Map</strong> a field when its value ends up in the generated document — i.e. the
+            template's data mapping reads that <code>doc</code>/<code>pv</code> path. The preview
+            then updates live as the field is filled in.
+          </li>
+          <li>
+            <strong>Don't map</strong> fields that don't affect the document, or values that are
+            already saved on the case/process before this task — those are read from the real data
+            automatically.
+          </li>
+          <li>
+            Overriding a path the template never reads has <strong>no effect</strong> on the
+            preview.
+          </li>
+        </ul>
+        <p class="builder-help__how">
+          <strong>How it works:</strong> <code>$form</code> holds the current form values; the
+          mapping returns a <code>{{ '{' }} doc, pv {{ '}' }}</code> overlay used
+          <strong>only for the preview</strong>. The actual document is always generated from the
+          real saved data after the form is submitted.
+        </p>
+      </details>
+
+      <!-- Variables the selected template's mapping consumes (read-only guidance) -->
+      <details *ngIf="hasReferencedPaths" class="used-by-template">
+        <summary class="used-by-template__label">
+          Used by this template ({{ referencedPaths.length }})
+        </summary>
+        <p class="used-by-template__hint">
+          This template's data mapping reads these inputs — the paths worth overriding for the
+          preview.
+        </p>
+        <ul class="used-by-template__list">
+          <li *ngFor="let ref of referencedPaths">
+            <code>{{ formatReferencedPath(ref) }}</code>
+          </li>
+        </ul>
+      </details>
+
+      <!-- Per-scope autocomplete options for the Input Path column -->
+      <datalist id="epistola-override-paths-doc">
+        <option *ngFor="let p of referencedPathsForScope('doc')" [value]="p"></option>
+      </datalist>
+      <datalist id="epistola-override-paths-pv">
+        <option *ngFor="let p of referencedPathsForScope('pv')" [value]="p"></option>
+      </datalist>
+
       <!-- Simple mode: table -->
       <div *ngIf="!advancedMode" class="builder-table">
         <div *ngIf="rows.length > 0" class="table-header">
@@ -3792,6 +5512,7 @@ class EpistolaOverrideBuilderComponent {
             type="text"
             [(ngModel)]="row.inputPath"
             (ngModelChange)="emitChange()"
+            [attr.list]="'epistola-override-paths-' + row.scope"
             placeholder="e.g. beslissing.tekst"
           />
           <!-- Dropdown when form fields are available, text input as fallback -->
@@ -3823,31 +5544,96 @@ class EpistolaOverrideBuilderComponent {
         </button>
       </div>
 
-      <!-- Advanced mode: JSON editor -->
+      <!-- Advanced mode: JSONata editor over $form -->
       <div *ngIf="advancedMode" class="builder-advanced">
-        <textarea
-          class="json-editor"
-          [ngModel]="jsonText"
-          (ngModelChange)="onJsonChange($event)"
-          placeholder='{ "pv": { "motivation": "form:pv:motivation" } }'
-          rows="6"
-        ></textarea>
-        <div *ngIf="jsonError" class="json-error">{{ jsonError }}</div>
+        <div *ngIf="simpleUnavailable" class="advanced-note">
+          This expression is too rich for the simple table — edit it here.
+        </div>
+        <epistola-jsonata-editor
+          [expression]="expression"
+          [contextVariables]="editorContextVariables"
+          variablesHint="$form"
+          (expressionChange)="onExpressionChange($event)"
+        ></epistola-jsonata-editor>
+        <div class="advanced-hint">
+          Map form fields onto a <code>{{ '{' }} doc, pv {{ '}' }}</code> overlay, e.g.
+          <code>{{ exampleExpression }}</code>
+        </div>
       </div>
     </div>
-  `, isInline: true, styles: [".override-builder{border:1px solid #dee2e6;border-radius:4px;padding:.75rem;background:#f8f9fa}.builder-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.builder-label{font-weight:600;font-size:.85rem;color:#495057}.mode-toggle{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.15rem .5rem;font-size:.75rem;cursor:pointer}.mode-toggle:hover{background:#e9ecef}.table-header{display:flex;gap:.5rem;padding:.25rem 0;font-size:.75rem;color:#6c757d;font-weight:600}.table-row{display:flex;gap:.5rem;margin-bottom:.25rem;align-items:center}.col-scope{width:70px;flex-shrink:0}.col-path,.col-field{flex:1;min-width:0}.col-action{width:30px;flex-shrink:0}.table-row select,.table-row input{border:1px solid #ced4da;border-radius:4px;padding:.25rem .4rem;font-size:.8rem;background:#fff}.remove-btn{background:none;border:none;color:#dc3545;cursor:pointer;padding:.25rem;font-size:.9rem}.remove-btn:hover{color:#a71d2a}.add-btn{background:none;border:1px dashed #6c757d;border-radius:4px;color:#6c757d;padding:.25rem .75rem;font-size:.8rem;cursor:pointer;margin-top:.25rem;display:flex;align-items:center}.add-btn:hover{background:#e9ecef;border-color:#495057}.json-editor{width:100%;border:1px solid #ced4da;border-radius:4px;padding:.5rem;font-family:monospace;font-size:.8rem;resize:vertical;background:#fff}.json-error{color:#dc3545;font-size:.75rem;margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".override-builder{border:1px solid #dee2e6;border-radius:4px;padding:.75rem;background:#f8f9fa}.builder-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.builder-label{font-weight:600;font-size:.85rem;color:#495057}.builder-intro{font-size:.78rem;color:#495057;margin:0 0 .4rem;line-height:1.4}.builder-help{margin:0 0 .6rem;font-size:.76rem;color:#6c757d}.builder-help>summary{cursor:pointer;color:#0d6efd;font-size:.76rem;-webkit-user-select:none;user-select:none}.builder-help ul{margin:.35rem 0;padding-left:1.1rem;line-height:1.45}.builder-help li{margin-bottom:.2rem}.builder-help__how{margin:.35rem 0 0;line-height:1.45}.builder-help code{background:#eef0f2;border-radius:3px;padding:0 .2rem}.used-by-template{border:1px solid #d6e4ff;background:#f0f6ff;border-radius:4px;padding:.5rem .6rem;margin:0 0 .6rem}.used-by-template__label{font-weight:600;font-size:.78rem;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.used-by-template[open] .used-by-template__label{margin-bottom:.1rem}.used-by-template__hint{margin:.2rem 0 .4rem;font-size:.74rem;color:#6c757d;line-height:1.4}.used-by-template__list{margin:0;padding-left:1.1rem;display:flex;flex-wrap:wrap;gap:.15rem 1rem;list-style:none}.used-by-template__list code{background:#e2ecff;border-radius:3px;padding:0 .25rem;font-size:.76rem;color:#0d4a9c}.mode-toggle{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.15rem .5rem;font-size:.75rem;cursor:pointer}.mode-toggle:hover:not(:disabled){background:#e9ecef}.mode-toggle:disabled{opacity:.5;cursor:not-allowed}.table-header{display:flex;gap:.5rem;padding:.25rem 0;font-size:.75rem;color:#6c757d;font-weight:600}.table-row{display:flex;gap:.5rem;margin-bottom:.25rem;align-items:center}.col-scope{width:70px;flex-shrink:0}.col-path,.col-field{flex:1;min-width:0}.col-action{width:30px;flex-shrink:0}.table-row select,.table-row input{border:1px solid #ced4da;border-radius:4px;padding:.25rem .4rem;font-size:.8rem;background:#fff}.remove-btn{background:none;border:none;color:#dc3545;cursor:pointer;padding:.25rem;font-size:.9rem}.remove-btn:hover{color:#a71d2a}.add-btn{background:none;border:1px dashed #6c757d;border-radius:4px;color:#6c757d;padding:.25rem .75rem;font-size:.8rem;cursor:pointer;margin-top:.25rem;display:flex;align-items:center}.add-btn:hover{background:#e9ecef;border-color:#495057}.advanced-note{color:#b54708;font-size:.75rem;margin-bottom:.4rem}.advanced-hint{color:#6c757d;font-size:.72rem;margin-top:.35rem;line-height:1.4}.advanced-hint code{background:#eef0f2;border-radius:3px;padding:0 .2rem;font-size:.95em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: JsonataEditorComponent, selector: "epistola-jsonata-editor", inputs: ["expression", "disabled", "contextVariables", "functions", "variablesHint"], outputs: ["expressionChange", "validChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaOverrideBuilderComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, FormsModule], selector: 'epistola-override-builder-component', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ standalone: true, imports: [CommonModule, FormsModule, JsonataEditorComponent], selector: 'epistola-override-builder-component', changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="override-builder">
       <div class="builder-header">
         <span class="builder-label">{{ label || 'Input Overrides' }}</span>
-        <button type="button" class="mode-toggle" (click)="toggleMode()">
+        <button
+          type="button"
+          class="mode-toggle"
+          [disabled]="simpleUnavailable && !advancedMode"
+          (click)="toggleMode()"
+        >
           {{ advancedMode ? 'Simple' : 'Advanced' }}
         </button>
       </div>
 
+      <!-- Inline guidance for the author -->
+      <p class="builder-intro">
+        Make the preview reflect what the user is typing — <em>before</em> they submit — by feeding
+        live form values into the document inputs.
+      </p>
+      <details class="builder-help">
+        <summary>When should I map a field?</summary>
+        <ul>
+          <li>
+            <strong>Map</strong> a field when its value ends up in the generated document — i.e. the
+            template's data mapping reads that <code>doc</code>/<code>pv</code> path. The preview
+            then updates live as the field is filled in.
+          </li>
+          <li>
+            <strong>Don't map</strong> fields that don't affect the document, or values that are
+            already saved on the case/process before this task — those are read from the real data
+            automatically.
+          </li>
+          <li>
+            Overriding a path the template never reads has <strong>no effect</strong> on the
+            preview.
+          </li>
+        </ul>
+        <p class="builder-help__how">
+          <strong>How it works:</strong> <code>$form</code> holds the current form values; the
+          mapping returns a <code>{{ '{' }} doc, pv {{ '}' }}</code> overlay used
+          <strong>only for the preview</strong>. The actual document is always generated from the
+          real saved data after the form is submitted.
+        </p>
+      </details>
+
+      <!-- Variables the selected template's mapping consumes (read-only guidance) -->
+      <details *ngIf="hasReferencedPaths" class="used-by-template">
+        <summary class="used-by-template__label">
+          Used by this template ({{ referencedPaths.length }})
+        </summary>
+        <p class="used-by-template__hint">
+          This template's data mapping reads these inputs — the paths worth overriding for the
+          preview.
+        </p>
+        <ul class="used-by-template__list">
+          <li *ngFor="let ref of referencedPaths">
+            <code>{{ formatReferencedPath(ref) }}</code>
+          </li>
+        </ul>
+      </details>
+
+      <!-- Per-scope autocomplete options for the Input Path column -->
+      <datalist id="epistola-override-paths-doc">
+        <option *ngFor="let p of referencedPathsForScope('doc')" [value]="p"></option>
+      </datalist>
+      <datalist id="epistola-override-paths-pv">
+        <option *ngFor="let p of referencedPathsForScope('pv')" [value]="p"></option>
+      </datalist>
+
       <!-- Simple mode: table -->
       <div *ngIf="!advancedMode" class="builder-table">
         <div *ngIf="rows.length > 0" class="table-header">
@@ -3866,6 +5652,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             type="text"
             [(ngModel)]="row.inputPath"
             (ngModelChange)="emitChange()"
+            [attr.list]="'epistola-override-paths-' + row.scope"
             placeholder="e.g. beslissing.tekst"
           />
           <!-- Dropdown when form fields are available, text input as fallback -->
@@ -3897,20 +5684,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         </button>
       </div>
 
-      <!-- Advanced mode: JSON editor -->
+      <!-- Advanced mode: JSONata editor over $form -->
       <div *ngIf="advancedMode" class="builder-advanced">
-        <textarea
-          class="json-editor"
-          [ngModel]="jsonText"
-          (ngModelChange)="onJsonChange($event)"
-          placeholder='{ "pv": { "motivation": "form:pv:motivation" } }'
-          rows="6"
-        ></textarea>
-        <div *ngIf="jsonError" class="json-error">{{ jsonError }}</div>
+        <div *ngIf="simpleUnavailable" class="advanced-note">
+          This expression is too rich for the simple table — edit it here.
+        </div>
+        <epistola-jsonata-editor
+          [expression]="expression"
+          [contextVariables]="editorContextVariables"
+          variablesHint="$form"
+          (expressionChange)="onExpressionChange($event)"
+        ></epistola-jsonata-editor>
+        <div class="advanced-hint">
+          Map form fields onto a <code>{{ '{' }} doc, pv {{ '}' }}</code> overlay, e.g.
+          <code>{{ exampleExpression }}</code>
+        </div>
       </div>
     </div>
-  `, styles: [".override-builder{border:1px solid #dee2e6;border-radius:4px;padding:.75rem;background:#f8f9fa}.builder-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.builder-label{font-weight:600;font-size:.85rem;color:#495057}.mode-toggle{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.15rem .5rem;font-size:.75rem;cursor:pointer}.mode-toggle:hover{background:#e9ecef}.table-header{display:flex;gap:.5rem;padding:.25rem 0;font-size:.75rem;color:#6c757d;font-weight:600}.table-row{display:flex;gap:.5rem;margin-bottom:.25rem;align-items:center}.col-scope{width:70px;flex-shrink:0}.col-path,.col-field{flex:1;min-width:0}.col-action{width:30px;flex-shrink:0}.table-row select,.table-row input{border:1px solid #ced4da;border-radius:4px;padding:.25rem .4rem;font-size:.8rem;background:#fff}.remove-btn{background:none;border:none;color:#dc3545;cursor:pointer;padding:.25rem;font-size:.9rem}.remove-btn:hover{color:#a71d2a}.add-btn{background:none;border:1px dashed #6c757d;border-radius:4px;color:#6c757d;padding:.25rem .75rem;font-size:.8rem;cursor:pointer;margin-top:.25rem;display:flex;align-items:center}.add-btn:hover{background:#e9ecef;border-color:#495057}.json-editor{width:100%;border:1px solid #ced4da;border-radius:4px;padding:.5rem;font-family:monospace;font-size:.8rem;resize:vertical;background:#fff}.json-error{color:#dc3545;font-size:.75rem;margin-top:.25rem}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
+  `, styles: [".override-builder{border:1px solid #dee2e6;border-radius:4px;padding:.75rem;background:#f8f9fa}.builder-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.builder-label{font-weight:600;font-size:.85rem;color:#495057}.builder-intro{font-size:.78rem;color:#495057;margin:0 0 .4rem;line-height:1.4}.builder-help{margin:0 0 .6rem;font-size:.76rem;color:#6c757d}.builder-help>summary{cursor:pointer;color:#0d6efd;font-size:.76rem;-webkit-user-select:none;user-select:none}.builder-help ul{margin:.35rem 0;padding-left:1.1rem;line-height:1.45}.builder-help li{margin-bottom:.2rem}.builder-help__how{margin:.35rem 0 0;line-height:1.45}.builder-help code{background:#eef0f2;border-radius:3px;padding:0 .2rem}.used-by-template{border:1px solid #d6e4ff;background:#f0f6ff;border-radius:4px;padding:.5rem .6rem;margin:0 0 .6rem}.used-by-template__label{font-weight:600;font-size:.78rem;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.used-by-template[open] .used-by-template__label{margin-bottom:.1rem}.used-by-template__hint{margin:.2rem 0 .4rem;font-size:.74rem;color:#6c757d;line-height:1.4}.used-by-template__list{margin:0;padding-left:1.1rem;display:flex;flex-wrap:wrap;gap:.15rem 1rem;list-style:none}.used-by-template__list code{background:#e2ecff;border-radius:3px;padding:0 .25rem;font-size:.76rem;color:#0d4a9c}.mode-toggle{background:none;border:1px solid #6c757d;border-radius:4px;color:#6c757d;padding:.15rem .5rem;font-size:.75rem;cursor:pointer}.mode-toggle:hover:not(:disabled){background:#e9ecef}.mode-toggle:disabled{opacity:.5;cursor:not-allowed}.table-header{display:flex;gap:.5rem;padding:.25rem 0;font-size:.75rem;color:#6c757d;font-weight:600}.table-row{display:flex;gap:.5rem;margin-bottom:.25rem;align-items:center}.col-scope{width:70px;flex-shrink:0}.col-path,.col-field{flex:1;min-width:0}.col-action{width:30px;flex-shrink:0}.table-row select,.table-row input{border:1px solid #ced4da;border-radius:4px;padding:.25rem .4rem;font-size:.8rem;background:#fff}.remove-btn{background:none;border:none;color:#dc3545;cursor:pointer;padding:.25rem;font-size:.9rem}.remove-btn:hover{color:#a71d2a}.add-btn{background:none;border:1px dashed #6c757d;border-radius:4px;color:#6c757d;padding:.25rem .75rem;font-size:.8rem;cursor:pointer;margin-top:.25rem;display:flex;align-items:center}.add-btn:hover{background:#e9ecef;border-color:#495057}.advanced-note{color:#b54708;font-size:.75rem;margin-bottom:.4rem}.advanced-hint{color:#6c757d;font-size:.72rem;margin-top:.35rem;line-height:1.4}.advanced-hint code{background:#eef0f2;border-radius:3px;padding:0 .2rem;font-size:.95em}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: EpistolaPluginService }], propDecorators: { value: [{
                 type: Input
             }], valueChange: [{
                 type: Output
@@ -3920,8 +5712,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }], availableFields: [{
                 type: Input
+            }], processDefinitionKey: [{
+                type: Input
+            }], sourceActivityId: [{
+                type: Input
             }] } });
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 const EPISTOLA_OVERRIDE_BUILDER_OPTIONS = {
     type: 'epistola-override-builder',
     selector: 'epistola-override-builder-element',
@@ -3929,7 +5742,7 @@ const EPISTOLA_OVERRIDE_BUILDER_OPTIONS = {
     group: 'basic',
     icon: 'list',
     emptyValue: null,
-    fieldOptions: ['label', 'availableFields'],
+    fieldOptions: ['label', 'availableFields', 'processDefinitionKey', 'sourceActivityId'],
 };
 /**
  * Recursively collect input field keys and labels from a Formio component tree.
@@ -3967,12 +5780,45 @@ function registerEpistolaOverrideBuilderComponent(injector) {
     const BaseComponent = Formio.Components.components[EPISTOLA_OVERRIDE_BUILDER_OPTIONS.type];
     if (!BaseComponent)
         return;
-    // Extend the base class to pass available form fields to the Angular component
+    // Extend the base class to pass available form fields and the selected process link
+    // to the Angular component.
     class OverrideBuilderWithFields extends BaseComponent {
+        _selectionChangeHandler = null;
         attach(element) {
-            // Set form fields on the component BEFORE super.attach() reads fieldOptions
+            // Set inputs on the component BEFORE super.attach() reads fieldOptions.
             this.component.availableFields = this._extractFormFields();
-            return super.attach(element);
+            this._applyProcessLinkSelection();
+            const result = super.attach(element);
+            // The override builder lives in the preview component's editForm alongside the
+            // process-link selector (key `processLinkSelection`). When the author changes the
+            // selected link, push the new identity straight to the Angular element so it can
+            // refetch the link's data mapping — Formio doesn't always redraw this widget on a
+            // sibling change. Mirrors the listener lifecycle in epistola-document-preview.formio.ts.
+            if (this.root?.on && !this._selectionChangeHandler) {
+                this._selectionChangeHandler = () => {
+                    const selection = this.root?.data?.processLinkSelection;
+                    if (this._customAngularElement) {
+                        this._customAngularElement['processDefinitionKey'] =
+                            selection?.processDefinitionKey || '';
+                        this._customAngularElement['sourceActivityId'] = selection?.sourceActivityId || '';
+                    }
+                };
+                this.root.on('change', this._selectionChangeHandler);
+            }
+            return result;
+        }
+        detach() {
+            if (this._selectionChangeHandler && this.root?.off) {
+                this.root.off('change', this._selectionChangeHandler);
+                this._selectionChangeHandler = null;
+            }
+            return super.detach();
+        }
+        _applyProcessLinkSelection() {
+            // The editForm dialog stores the selected link under `processLinkSelection`.
+            const selection = this.root?.data?.processLinkSelection;
+            this.component.processDefinitionKey = selection?.processDefinitionKey || '';
+            this.component.sourceActivityId = selection?.sourceActivityId || '';
         }
         _extractFormFields() {
             // The Formio builder passes the main form schema as options.editForm
@@ -3986,8 +5832,27 @@ function registerEpistolaOverrideBuilderComponent(injector) {
     }
     // Re-register with the extended class
     Formio.Components.setComponent(EPISTOLA_OVERRIDE_BUILDER_OPTIONS.type, OverrideBuilderWithFields);
+    // Internal editForm widget — not a standalone form field. Hide it from the builder palette.
+    hideFormioComponentFromBuilder(EPISTOLA_OVERRIDE_BUILDER_OPTIONS.type);
 }
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 /**
  * The plugin action definition key the backend serializes for generate-document
  * process links. It carries the `epistola-` prefix — see `EPISTOLA_ACTION_KEYS`
@@ -4000,6 +5865,23 @@ function filterGenerateDocumentEntries(entries) {
     return entries.filter((e) => e.actionKey === GENERATE_DOCUMENT_ACTION_KEY);
 }
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 class EpistolaProcessLinkSelectorComponent {
     adminService;
     cdr;
@@ -4082,7 +5964,7 @@ class EpistolaProcessLinkSelectorComponent {
       </select>
       <div *ngIf="error" class="selector-error">{{ error }}</div>
     </div>
-  `, isInline: true, styles: [".process-link-selector{margin-bottom:.5rem}.selector-label{display:block;font-weight:600;font-size:.85rem;color:#495057;margin-bottom:.25rem}.selector-dropdown{width:100%;border:1px solid #ced4da;border-radius:4px;padding:.4rem .5rem;font-size:.85rem;background:#fff}.selector-error{color:#dc3545;font-size:.75rem;margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".process-link-selector{margin-bottom:.5rem}.selector-label{display:block;font-weight:600;font-size:.85rem;color:#495057;margin-bottom:.25rem}.selector-dropdown{width:100%;border:1px solid #ced4da;border-radius:4px;padding:.4rem .5rem;font-size:.85rem;background:#fff}.selector-error{color:#dc3545;font-size:.75rem;margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EpistolaProcessLinkSelectorComponent, decorators: [{
             type: Component,
@@ -4113,6 +5995,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }] } });
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 const EPISTOLA_PROCESS_LINK_SELECTOR_OPTIONS = {
     type: 'epistola-process-link-selector',
     selector: 'epistola-process-link-selector-element',
@@ -4125,9 +6024,28 @@ const EPISTOLA_PROCESS_LINK_SELECTOR_OPTIONS = {
 function registerEpistolaProcessLinkSelectorComponent(injector) {
     if (!customElements.get(EPISTOLA_PROCESS_LINK_SELECTOR_OPTIONS.selector)) {
         registerCustomFormioComponent(EPISTOLA_PROCESS_LINK_SELECTOR_OPTIONS, EpistolaProcessLinkSelectorComponent, injector);
+        // Internal editForm widget — not a standalone form field. Hide it from the builder palette.
+        hideFormioComponentFromBuilder(EPISTOLA_PROCESS_LINK_SELECTOR_OPTIONS.type);
     }
 }
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 class EpistolaPluginModule {
     // Kept for back-compat with hosts that follow the README's `forRoot()`
     // setup. The providers above are now module-level so `imports: [EpistolaPluginModule]`
@@ -4162,11 +6080,6 @@ class EpistolaPluginModule {
             EpistolaPluginService,
             EpistolaAdminService,
             EpistolaMenuService,
-            {
-                provide: HTTP_INTERCEPTORS,
-                useClass: EpistolaTaskContextInterceptor,
-                multi: true,
-            },
             {
                 provide: ENVIRONMENT_INITIALIZER,
                 multi: true,
@@ -4233,11 +6146,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         EpistolaPluginService,
                         EpistolaAdminService,
                         EpistolaMenuService,
-                        {
-                            provide: HTTP_INTERCEPTORS,
-                            useClass: EpistolaTaskContextInterceptor,
-                            multi: true,
-                        },
                         {
                             provide: ENVIRONMENT_INITIALIZER,
                             multi: true,
@@ -4258,8 +6166,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 }]
         }] });
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 const EPISTOLA_PLUGIN_LOGO_BASE64 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgMTIwIiB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCI+CiAgPCEtLSBTdGFjayBiYXNlIC0tPgogIDxyZWN0IHg9IjM2IiB5PSIxNiIgd2lkdGg9IjU0IiBoZWlnaHQ9IjcwIiByeD0iMyIgZmlsbD0iI2U2YzJiMCIgc3Ryb2tlPSIjNGYyZjJiIiBzdHJva2Utd2lkdGg9IjIiIHRyYW5zZm9ybT0icm90YXRlKDUgNjMgNTEpIi8+CiAgPHJlY3QgeD0iMzIiIHk9IjIyIiB3aWR0aD0iNTQiIGhlaWdodD0iNzAiIHJ4PSIzIiBmaWxsPSIjZjBkOGM4IiBzdHJva2U9IiM0ZjJmMmIiIHN0cm9rZS13aWR0aD0iMiIvPgogIDxyZWN0IHg9IjI4IiB5PSIyOCIgd2lkdGg9IjU0IiBoZWlnaHQ9IjcwIiByeD0iMyIgZmlsbD0iI2Y1ZWJlMyIgc3Ryb2tlPSIjNGYyZjJiIiBzdHJva2Utd2lkdGg9IjIuNSIvPgogIDxsaW5lIHgxPSIzOCIgeTE9IjQ0IiB4Mj0iNzIiIHkyPSI0NCIgc3Ryb2tlPSIjYzRhODgyIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDxsaW5lIHgxPSIzOCIgeTE9IjU0IiB4Mj0iNzIiIHkyPSI1NCIgc3Ryb2tlPSIjYzRhODgyIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDxsaW5lIHgxPSIzOCIgeTE9IjY0IiB4Mj0iNTgiIHkyPSI2NCIgc3Ryb2tlPSIjYzRhODgyIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDwhLS0gV2F4IHNlYWwgd2l0aCBjaGVja21hcmsgLS0+CiAgPGNpcmNsZSBjeD0iNTUiIGN5PSI4NCIgcj0iMTUiIGZpbGw9IiNiODVjM2MiIHN0cm9rZT0iIzRmMmYyYiIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgPGNpcmNsZSBjeD0iNTUiIGN5PSI4NCIgcj0iMTAuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDQ4MzZhIiBzdHJva2Utd2lkdGg9IjEiLz4KICA8cG9seWxpbmUgcG9pbnRzPSI0OSw4NCA1Myw4OSA2Miw3OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNGYyZjJiIiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=';
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 const EPISTOLA_PLUGIN_ID = 'epistola';
 const DISABLED_EPISTOLA_PLUGIN_ID = '__epistola_disabled__';
 const epistolaPluginSpecification = {
@@ -4382,8 +6342,12 @@ const epistolaPluginSpecification = {
             'epistola-download-document': 'Download Document',
             documentVariable: 'Document Variabele',
             documentVariableTooltip: 'Naam van de procesvariabele met het Epistola resultaat. Mag een String document ID zijn (legacy) of een rich-result object met een documentId-veld; de actie haalt het document ID eruit.',
+            storageTarget: 'Opslagdoel',
+            storageTargetTooltip: 'Waar het gedownloade PDF wordt opgeslagen. "Tijdelijke resource-opslag" (aanbevolen) zet alleen een resource-id in de variabele — geschikt om door te geven aan documenten-api:store-temp-document. "Procesvariabele" zet de ruwe bytes inline in de variabele (alleen voor kleine, niet-gevoelige documenten; deze worden in de taakrespons meegestuurd).',
+            resourceIdVariable: 'Resource-ID Variabele',
+            resourceIdVariableTooltip: 'Naam van de procesvariabele waarin het tijdelijke resource-id wordt opgeslagen (geef deze door aan documenten-api:store-temp-document).',
             contentVariable: 'Inhoud Variabele',
-            contentVariableTooltip: 'Naam van de procesvariabele waarin de documentinhoud (Base64) wordt opgeslagen',
+            contentVariableTooltip: 'Naam van de procesvariabele waarin de ruwe PDF-bytes inline worden opgeslagen (alleen voor kleine, niet-gevoelige documenten).',
             // Admin page
             epistolaAdminOverview: 'Overzicht',
             epistolaAdminRefresh: 'Vernieuwen',
@@ -4411,6 +6375,10 @@ const epistolaPluginSpecification = {
             epistolaAdminReconcile: 'Hersynchroniseer',
             epistolaAdminReconciling: 'Bezig...',
             epistolaAdminReconcileTooltip: 'Vraag de huidige status op bij Epistola en hervat het wachtende proces als het klaar is.',
+            epistolaAdminStatusWaiting: 'Wachtend',
+            epistolaAdminStatusUnwired: 'Vastgelopen',
+            epistolaAdminUnwiredTooltip: 'Deze taak heeft geen correlatie-token (epistolaWaitFor), dus de collector kan hem nooit hervatten — het proces is vastgelopen. Meestal een dubbelzinnig samengevoegd catch event (zie BPMN-validatie). Op te lossen in het procesmodel; hersynchroniseren werkt hier niet.',
+            epistolaAdminUnwiredHint: 'Niet te hersynchroniseren',
             epistolaAdminConfigurations: 'Configuraties',
             epistolaAdminValidations: 'BPMN-validatie',
             epistolaAdminNoValidations: 'Geen race-onveilige procesdefinities gevonden. Alles ziet er goed uit.',
@@ -4418,6 +6386,10 @@ const epistolaPluginSpecification = {
             epistolaAdminValidationWarningBody: 'In deze procesdefinities is de grens tussen de generate-document service task en de EpistolaDocumentGenerated catch event niet synchroon. Resultaten kunnen verloren gaan; gebruik in dat geval de Hersynchroniseer-knop in de Wachtende taken-tab.',
             epistolaAdminValidationCode: 'Code',
             epistolaAdminValidationMessage: 'Bericht',
+            epistolaAdminValidationLastChecked: 'Laatst gecontroleerd',
+            epistolaAdminValidationNotYetRun: 'nog niet uitgevoerd',
+            epistolaAdminValidationAutoRefresh: 'automatisch opnieuw gecontroleerd, ongeveer elke',
+            epistolaAdminValidationLatestVersionNote: 'Alleen de meest recente versie van elke procesdefinitie wordt gecontroleerd; oudere versies met nog lopende instanties kunnen problemen hebben die hier niet worden getoond.',
             epistolaAdminCatalogs: 'Catalogi',
             epistolaAdminCatalogsIntro: 'Catalogi op het classpath van de applicatie. Deze worden bij het opstarten automatisch uitgerold; gebruik Opnieuw uitrollen om een catalogus handmatig (geforceerd) naar deze Epistola-omgeving te sturen, bijvoorbeeld als de automatische uitrol is mislukt.',
             epistolaAdminNoCatalogs: 'Geen catalogi gevonden op het classpath.',
@@ -4433,6 +6405,23 @@ const epistolaPluginSpecification = {
             epistolaAdminChangelog: 'Changelog',
             epistolaAdminRunningVersion: 'Actieve plugin-versie:',
             epistolaAdminNoChangelog: 'Geen changelog beschikbaar in deze build.',
+            // TEMPORARY (remove in 1.0.0): task-id carrier repair (admin "Forms" tab)
+            epistolaAdminForms: 'Formulieren',
+            epistolaAdminFormsIntro: 'Formulieren met een Epistola-component dat het verborgen task-id veld mist. Zonder dat veld werkt het voorbeeld/downloaden/opnieuw genereren niet in elke taak-openflow. Herstel voegt het veld toe.',
+            epistolaAdminFormName: 'Formulier',
+            epistolaAdminFormMissing: 'Ontbrekende componenten',
+            epistolaAdminFormReadOnly: 'Alleen-lezen',
+            epistolaAdminFormReadOnlyHint: 'Dit formulier komt van het classpath en wordt bij de volgende herstart teruggezet naar de bron. Voeg het veld toe aan de bron (component opnieuw plaatsen) voor een blijvende oplossing.',
+            epistolaAdminRepair: 'Herstellen',
+            epistolaAdminRepairAll: 'Alles herstellen',
+            epistolaAdminRepairing: 'Bezig...',
+            epistolaAdminRepairTooltip: 'Voeg het verborgen task-id veld toe aan alle Epistola-componenten in dit formulier.',
+            epistolaAdminNoFormIssues: 'Geen formulieren met een ontbrekend task-id veld gevonden.',
+            // TEMPORARY: legacy override-mapping format detection (admin "Forms" tab)
+            epistolaAdminLegacyOverrideTitle: 'Verouderd invoer-override formaat',
+            epistolaAdminLegacyOverrideIntro: 'Formulieren waarvan een document-voorbeeldcomponent de invoer-overrides nog als object opslaat ("form:"-verwijzingen) in plaats van als JSONata-expressie over $form. Ze blijven werken, maar worden pas naar het nieuwe formaat omgezet als je het formulier opnieuw opslaat in de formulierbouwer.',
+            epistolaAdminLegacyOverrideComponents: 'Verouderde componenten',
+            epistolaAdminNoLegacyOverride: 'Geen formulieren met het verouderde override-formaat gevonden.',
         },
         en: {
             title: 'Epistola Document Suite',
@@ -4538,8 +6527,12 @@ const epistolaPluginSpecification = {
             'epistola-download-document': 'Download Document',
             documentVariable: 'Document Variable',
             documentVariableTooltip: 'Name of the process variable holding the Epistola result. May be a String document id (legacy) or a rich result object with a `documentId` key — the action extracts the document id from it.',
+            storageTarget: 'Storage Target',
+            storageTargetTooltip: 'Where the downloaded PDF is stored. "Temporary resource storage" (recommended) writes only a resource id to the variable — ready to hand to documenten-api:store-temp-document. "Process variable" writes the raw bytes inline (small, non-sensitive documents only; they are included in the task response).',
+            resourceIdVariable: 'Resource ID Variable',
+            resourceIdVariableTooltip: 'Name of the process variable to store the temporary resource id in (hand this to documenten-api:store-temp-document).',
             contentVariable: 'Content Variable',
-            contentVariableTooltip: 'Name of the process variable to store the document content (Base64) in',
+            contentVariableTooltip: 'Name of the process variable to store the raw PDF bytes inline in (small, non-sensitive documents only).',
             // Admin page
             epistolaAdminOverview: 'Overview',
             epistolaAdminRefresh: 'Refresh',
@@ -4567,6 +6560,10 @@ const epistolaPluginSpecification = {
             epistolaAdminReconcile: 'Reconcile',
             epistolaAdminReconciling: 'Reconciling...',
             epistolaAdminReconcileTooltip: "Ask Epistola for this job's current status and resume the waiting process if it has finished.",
+            epistolaAdminStatusWaiting: 'Waiting',
+            epistolaAdminStatusUnwired: 'Stuck',
+            epistolaAdminUnwiredTooltip: 'This wait has no correlation token (epistolaWaitFor), so the collector can never resume it — the process is stuck. Usually an ambiguous merged catch event (see BPMN validation). Fix it in the process model; reconcile cannot recover it.',
+            epistolaAdminUnwiredHint: 'Cannot reconcile',
             epistolaAdminConfigurations: 'Configurations',
             epistolaAdminValidations: 'BPMN validation',
             epistolaAdminNoValidations: 'No race-unsafe process definitions detected. Everything looks good.',
@@ -4574,6 +6571,10 @@ const epistolaPluginSpecification = {
             epistolaAdminValidationWarningBody: 'These process definitions have a non-synchronous boundary between the generate-document service task and the EpistolaDocumentGenerated catch event. Results can be missed; use the Reconcile button on the Pending Jobs tab to recover.',
             epistolaAdminValidationCode: 'Code',
             epistolaAdminValidationMessage: 'Message',
+            epistolaAdminValidationLastChecked: 'Last checked',
+            epistolaAdminValidationNotYetRun: 'not yet run',
+            epistolaAdminValidationAutoRefresh: 'automatically re-checked roughly every',
+            epistolaAdminValidationLatestVersionNote: "Only the latest deployed version of each process definition is checked; older versions with running instances may have problems that aren't shown here.",
             epistolaAdminCatalogs: 'Catalogs',
             epistolaAdminCatalogsIntro: 'Catalogs on the application classpath. These are deployed automatically on startup; use Redeploy to manually (force) push one to this Epistola installation — for example when the automatic startup deploy failed.',
             epistolaAdminNoCatalogs: 'No catalogs found on the classpath.',
@@ -4589,10 +6590,44 @@ const epistolaPluginSpecification = {
             epistolaAdminChangelog: 'Changelog',
             epistolaAdminRunningVersion: 'Running plugin version:',
             epistolaAdminNoChangelog: 'No changelog available in this build.',
+            // TEMPORARY (remove in 1.0.0): task-id carrier repair (admin "Forms" tab)
+            epistolaAdminForms: 'Forms',
+            epistolaAdminFormsIntro: 'Forms with an Epistola component that is missing the hidden task-id field. Without it, preview/download/retry do not work in every task-open flow. Repair adds the field.',
+            epistolaAdminFormName: 'Form',
+            epistolaAdminFormMissing: 'Missing components',
+            epistolaAdminFormReadOnly: 'Read-only',
+            epistolaAdminFormReadOnlyHint: 'This form is deployed from the classpath and is reconciled to its source on the next restart. Add the field to the source (re-drop the component) for a permanent fix.',
+            epistolaAdminRepair: 'Repair',
+            epistolaAdminRepairAll: 'Repair all',
+            epistolaAdminRepairing: 'Working...',
+            epistolaAdminRepairTooltip: 'Add the hidden task-id field to all Epistola components in this form.',
+            epistolaAdminNoFormIssues: 'No forms with a missing task-id field found.',
+            // TEMPORARY: legacy override-mapping format detection (admin "Forms" tab)
+            epistolaAdminLegacyOverrideTitle: 'Legacy input-override format',
+            epistolaAdminLegacyOverrideIntro: 'Forms whose document-preview component still stores input overrides as an object ("form:" references) instead of a JSONata expression over $form. They keep working, but only migrate to the new format once you re-save the form in the form builder.',
+            epistolaAdminLegacyOverrideComponents: 'Legacy components',
+            epistolaAdminNoLegacyOverride: 'No forms using the legacy override format found.',
         },
     },
 };
 
+/*
+ * Copyright 2025 Epistola.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: EUPL-1.2
+ */
 /*
  * Public API Surface of epistola plugin
  */
@@ -4601,5 +6636,5 @@ const epistolaPluginSpecification = {
  * Generated bundle index. Do not edit.
  */
 
-export { CheckJobStatusConfigurationComponent, DownloadDocumentConfigurationComponent, EPISTOLA_DOCUMENT_OPTIONS, EPISTOLA_DOCUMENT_PREVIEW_OPTIONS, EPISTOLA_OVERRIDE_BUILDER_OPTIONS, EPISTOLA_PROCESS_LINK_SELECTOR_OPTIONS, EPISTOLA_RETRY_FORM_OPTIONS, EpistolaAdminPageComponent, EpistolaAdminRoutingModule, EpistolaAdminService, EpistolaConfigurationComponent, EpistolaDocumentComponent, EpistolaDocumentPreviewComponent, EpistolaMenuService, EpistolaOverrideBuilderComponent, EpistolaPluginModule, EpistolaPluginService, EpistolaProcessLinkSelectorComponent, EpistolaRetryFormComponent, EpistolaTaskContextInterceptor, EpistolaTaskContextService, GenerateDocumentConfigurationComponent, JsonataEditorComponent, MappingBuilderComponent, epistolaPluginSpecification, errorResource, initialResource, isEpistolaEnabled, loadingResource, registerEpistolaDocumentComponent, registerEpistolaDocumentPreviewComponent, registerEpistolaOverrideBuilderComponent, registerEpistolaProcessLinkSelectorComponent, registerEpistolaRetryFormComponent, successResource };
+export { CheckJobStatusConfigurationComponent, DownloadDocumentConfigurationComponent, EPISTOLA_DOCUMENT_OPTIONS, EPISTOLA_DOCUMENT_PREVIEW_OPTIONS, EPISTOLA_OVERRIDE_BUILDER_OPTIONS, EPISTOLA_PROCESS_LINK_SELECTOR_OPTIONS, EPISTOLA_RETRY_FORM_OPTIONS, EpistolaAdminPageComponent, EpistolaAdminRoutingModule, EpistolaAdminService, EpistolaConfigurationComponent, EpistolaDocumentComponent, EpistolaDocumentPreviewComponent, EpistolaMenuService, EpistolaOverrideBuilderComponent, EpistolaPluginModule, EpistolaPluginService, EpistolaProcessLinkSelectorComponent, EpistolaRetryFormComponent, GenerateDocumentConfigurationComponent, JsonataEditorComponent, MappingBuilderComponent, PREFILLED_TASK_ID_CARRIER, PREFILLED_TASK_ID_DATA_KEY, PREFILLED_TASK_ID_SOURCE_KEY, epistolaPluginSpecification, errorResource, initialResource, isEpistolaEnabled, loadingResource, readPrefilledTaskId, registerEpistolaDocumentComponent, registerEpistolaDocumentPreviewComponent, registerEpistolaOverrideBuilderComponent, registerEpistolaProcessLinkSelectorComponent, registerEpistolaRetryFormComponent, successResource };
 //# sourceMappingURL=epistola.app-valtimo-plugin.mjs.map