@esfaenza/flow-builder 20.3.41 → 20.3.42

package/fesm2022/esfaenza-flow-builder.mjs

@@ -3268,30 +3268,63 @@ class FlowDocumentStore {
         if (!oldName || !newName || oldName === newName) {
             return;
         }
+        const reference = this.nodeByName().get(oldName);
         this.update((draft) => {
-            const reference = this.nodeByName().get(oldName);
-            if (reference) {
-                const list = draft[reference.collection];
-                const node = list?.[reference.index];
-                if (node) {
-                    node.name = newName;
-                }
+            FlowDocumentStore.applyRename(draft, reference, oldName, newName);
+        });
+    }
+    /**
+     * Etichetta **e** nome tecnico in una sola mutazione.
+     *
+     * Serve al nome che segue l'etichetta di un elemento appena creato (§3.3): farlo con due
+     * `update` scriverebbe due passi di storico per ogni battuta, e l'annulla riporterebbe
+     * indietro il nome lasciando l'etichetta nuova — uno stato che non e' mai esistito. Con
+     * `newName` assente e' un semplice cambio di etichetta.
+     */
+    relabelNode(name, label, newName) {
+        const reference = this.nodeByName().get(name);
+        if (!reference) {
+            return;
+        }
+        this.update((draft) => {
+            const list = draft[reference.collection];
+            const node = list?.[reference.index];
+            if (!node) {
+                return;
             }
-            FlowDocumentStore.rewriteReferences(draft, oldName, newName);
-            /**
-             * I `members` di un riquadro **non** sono riferimenti (§3.6, regola 1) e per questo non
-             * stanno in `FLOW_REFERENCE_FIELDS`: sono appartenenza, e la tiene allineata l'editor. Ma
-             * portano dei nomi di node, quindi una rinomina che li salta lascia un
-             * `GROUP_MEMBER_UNKNOWN` su un node che esiste ancora — cioe' un avviso che accusa un
-             * gesto legittimo.
-             */
-            for (const group of draft.groups ?? []) {
-                if (group.members?.includes(oldName)) {
-                    group.members = group.members.map((member) => (member === oldName ? newName : member));
-                }
+            node.label = label || undefined;
+            if (newName && newName !== name) {
+                FlowDocumentStore.applyRename(draft, reference, name, newName);
             }
         });
     }
+    /**
+     * Il corpo della rinomina, sul draft: nome del node, riferimenti, appartenenza ai riquadri.
+     * `reference` va risolto **prima** dell'`update`, perche' l'indice viene dal documento
+     * corrente e dentro il mutatore i signal derivati sono ancora quelli di prima.
+     */
+    static applyRename(draft, reference, oldName, newName) {
+        if (reference) {
+            const list = draft[reference.collection];
+            const node = list?.[reference.index];
+            if (node) {
+                node.name = newName;
+            }
+        }
+        FlowDocumentStore.rewriteReferences(draft, oldName, newName);
+        /**
+         * I `members` di un riquadro **non** sono riferimenti (§3.6, regola 1) e per questo non
+         * stanno in `FLOW_REFERENCE_FIELDS`: sono appartenenza, e la tiene allineata l'editor. Ma
+         * portano dei nomi di node, quindi una rinomina che li salta lascia un
+         * `GROUP_MEMBER_UNKNOWN` su un node che esiste ancora — cioe' un avviso che accusa un
+         * gesto legittimo.
+         */
+        for (const group of draft.groups ?? []) {
+            if (group.members?.includes(oldName)) {
+                group.members = group.members.map((member) => (member === oldName ? newName : member));
+            }
+        }
+    }
     /**
      * §5.2 — rinomina un campo di screen dinamico riscrivendo i riferimenti che lo usano.
      *
@@ -14415,6 +14448,9 @@ class ElementInspectorComponent {
     store = inject(FlowDocumentStore);
     dictionaries = inject(FlowDictionaryStore);
     validation = inject(FlowValidationStore);
+    injector = inject(Injector);
+    /** L'etichetta: e' il primo campo di un elemento nuovo, e prende il focus da se'. */
+    labelInput = viewChild('labelInput', ...(ngDevMode ? [{ debugName: "labelInput" }] : []));
     /** Il nome dell'elemento selezionato; `$start` per lo Start. */
     selectedName = input(null, ...(ngDevMode ? [{ debugName: "selectedName" }] : []));
     /**
@@ -14482,6 +14518,139 @@ class ElementInspectorComponent {
         this.issuesExpanded.update((expanded) => !expanded);
     }
     pendingName = signal(null, ...(ngDevMode ? [{ debugName: "pendingName" }] : []));
+    // ------------------------------------------------------- nome tecnico in composizione
+    //
+    // Il campo del nome ha due presentazioni, e la differenza sta in cosa si sta facendo.
+    //
+    // Su un elemento **già nominato** il nome e' in sola lettura dietro il comando «Rinomina»:
+    // cambiarlo riscrive i riferimenti di tutto il documento (§13.8) e non e' un gesto da fare
+    // per sbaglio. Su un elemento **appena creato** — cioe' senza etichetta — il nome non e'
+    // ancora niente: nel documento c'e' un nome provvisorio soltanto perche' il nome e' la
+    // chiave (§3.3), il campo lo mostra **vuoto** e lo costruisce dall'etichetta mentre la si
+    // digita, con spazi e caratteri non ammessi sostituiti da `_`.
+    /**
+     * L'elemento il cui nome si sta ancora componendo, e cosa c'e' scritto nel campo.
+     *
+     * `draft: null` e' «segue l'etichetta», che e' lo stato iniziale e quello in cui si torna
+     * svuotando il campo. `element` segue le rinomine: senza, la prima battuta sull'etichetta —
+     * che rinomina — farebbe ripartire lo stato da capo e il campo tornerebbe a seguire una
+     * scelta che l'utente aveva già disfatto.
+     */
+    composing = signal(null, ...(ngDevMode ? [{ debugName: "composing" }] : []));
+    /** Il nome si compone qui invece di stare dietro il comando di rinomina. */
+    isComposingName = computed(() => {
+        const state = this.composing();
+        return !!state && !!this.selectedName() && state.element === this.selectedName();
+    }, ...(ngDevMode ? [{ debugName: "isComposingName" }] : []));
+    /** Cio' che si vede nel campo: vuoto finche' non c'e' un'etichetta da cui costruirlo. */
+    composedName = computed(() => {
+        const state = this.composing();
+        if (!state) {
+            return '';
+        }
+        if (state.draft !== null) {
+            return state.draft;
+        }
+        return this.node()?.label ? (this.selectedName() ?? '') : '';
+    }, ...(ngDevMode ? [{ debugName: "composedName" }] : []));
+    composedNameError = computed(() => {
+        const draft = this.composing()?.draft;
+        if (!draft) {
+            // Vuoto non e' un errore: e' la richiesta di tornare a seguire l'etichetta.
+            return null;
+        }
+        const check = checkFlowName(draft, this.store.usedNames(), this.selectedName());
+        return check.isValid ? null : (check.message ?? 'Nome non valido.');
+    }, ...(ngDevMode ? [{ debugName: "composedNameError" }] : []));
+    constructor() {
+        effect(() => {
+            const name = this.selectedName();
+            // Solo il cambio di elemento conta: leggere il node dentro l'effetto lo farebbe
+            // ripartire a ogni battuta, e lo stato del campo si perderebbe.
+            untracked(() => this.seedComposing(name));
+        });
+    }
+    /**
+     * Un elemento **senza etichetta** e' un elemento che nessuno ha ancora nominato: il campo del
+     * nome parte vuoto e segue l'etichetta. Uno che ce l'ha e' un elemento vero, e il suo nome si
+     * cambia solo col comando di rinomina, che dice prima quanti riferimenti riscrivera'.
+     */
+    seedComposing(name) {
+        const state = this.composing();
+        if (state && state.element === name) {
+            // Rinomina, non cambio di elemento: cio' che si sta scrivendo va conservato.
+            return;
+        }
+        const node = this.node();
+        if (!name || this.isStart() || !node || node.label) {
+            this.composing.set(null);
+            return;
+        }
+        this.composing.set({ element: name, draft: null });
+        /**
+         * Il primo campo di un elemento nuovo e' l'etichetta, ed e' da lì che viene il nome: il
+         * focus ci va da se'. `afterNextRender` e non un rinvio al task successivo — quello scatta
+         * prima del refresh della view, la query e' ancora vuota e non accade niente.
+         */
+        afterNextRender(() => this.labelInput()?.nativeElement.focus(), { injector: this.injector });
+    }
+    /**
+     * Il nome scritto a mano: smette di seguire l'etichetta e, appena e' valido, diventa il nome
+     * dell'elemento. Un nome intermedio non valido resta nel campo senza toccare il documento —
+     * ricopiarci sopra il nome corrente impedirebbe di digitare.
+     */
+    onComposedNameInput(value) {
+        const current = this.selectedName();
+        if (!this.isComposingName() || !current) {
+            return;
+        }
+        const draft = value.trim() ? value : null;
+        this.composing.set({ element: current, draft });
+        if (draft === null) {
+            // Svuotato: torna a seguire l'etichetta, ed e' l'unico modo di disfare un nome scritto
+            // a mano senza chiudere e riaprire il form.
+            this.applyDerivedName(this.node()?.label);
+            return;
+        }
+        const trimmed = draft.trim();
+        if (trimmed !== current && checkFlowName(trimmed, this.store.usedNames(), current).isValid) {
+            this.store.renameNode(current, trimmed);
+            this.composing.set({ element: trimmed, draft });
+            this.renamed.emit(trimmed);
+        }
+    }
+    /**
+     * Il nome costruito dall'etichetta (§3.3): spazi e caratteri non ammessi diventano `_`, i
+     * diacritici cadono e un nome già preso prende un suffisso.
+     *
+     * Etichetta vuota → `null`, cioe' resta il nome provvisorio con cui l'elemento e' nato: il
+     * documento non puo' stare senza, perche' il nome e' la chiave di tutto (§3.3).
+     */
+    deriveName(label, currentName) {
+        const base = slugifyFlowName(label);
+        if (!base) {
+            return null;
+        }
+        // Il proprio nome non conta come «già usato»: senza toglierlo, `Approva` diventerebbe
+        // `Approva_1` alla prima battuta che non cambia lo slug.
+        const used = Array.from(this.store.usedNames()).filter((name) => name.toLowerCase() !== currentName.toLowerCase());
+        const derived = uniqueFlowName(base, used);
+        return derived === currentName ? null : derived;
+    }
+    /** Rimette il nome a seguire l'etichetta, dopo che il campo e' stato svuotato. */
+    applyDerivedName(label) {
+        const current = this.selectedName();
+        if (!current) {
+            return;
+        }
+        const derived = this.deriveName(label ?? '', current);
+        if (!derived) {
+            return;
+        }
+        this.store.renameNode(current, derived);
+        this.composing.set({ element: derived, draft: null });
+        this.renamed.emit(derived);
+    }
     nameError = computed(() => {
         const pending = this.pendingName();
         if (pending === null) {
@@ -14534,9 +14703,24 @@ class ElementInspectorComponent {
         if (!name || this.isStart()) {
             return;
         }
-        this.store.updateNode(name, (node) => {
-            node.label = value || undefined;
-        });
+        const state = this.composing();
+        if (!state || state.element !== name || state.draft !== null) {
+            this.store.updateNode(name, (node) => {
+                node.label = value || undefined;
+            });
+            return;
+        }
+        /**
+         * Il nome sta ancora seguendo l'etichetta: le due modifiche sono **un** gesto e vanno in
+         * una mutazione sola, altrimenti l'annulla riporta indietro il nome lasciando l'etichetta
+         * nuova — cioe' uno stato che non e' mai esistito.
+         */
+        const derived = this.deriveName(value, name);
+        this.store.relabelNode(name, value, derived);
+        if (derived) {
+            this.composing.set({ element: derived, draft: null });
+            this.renamed.emit(derived);
+        }
     }
     setDescription(value) {
         const name = this.selectedName();
@@ -14576,7 +14760,7 @@ class ElementInspectorComponent {
         return { x: node?.locationX ?? 0, y: node?.locationY ?? 0 };
     }, ...(ngDevMode ? [{ debugName: "position" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: ElementInspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.28", type: ElementInspectorComponent, isStandalone: true, selector: "fb-element-inspector", inputs: { selectedName: { classPropertyName: "selectedName", publicName: "selectedName", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, initialFieldPath: { classPropertyName: "initialFieldPath", publicName: "initialFieldPath", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", removeRequested: "removeRequested", duplicateRequested: "duplicateRequested", renamed: "renamed" }, ngImport: i0, template: "@if (!selectedName()) {\r\n  <p class=\"fb-inspector__empty\">\r\n    Seleziona un elemento sul canvas per modificarlo, oppure trascina un elemento dalla palette.\r\n  </p>\r\n} @else {\r\n  @if (showHeader()) {\r\n    <header class=\"fb-inspector__header\">\r\n      <div>\r\n        <span class=\"fb-inspector__type\">{{ typeLabel() }}</span>\r\n        <h2 class=\"fb-inspector__title\">\r\n          {{ isStart() ? 'Avvio del flow' : node()?.label || selectedName() }}\r\n        </h2>\r\n      </div>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" aria-label=\"Chiudi\" (click)=\"close()\">\r\n        \u00D7\r\n      </button>\r\n    </header>\r\n  }\r\n\r\n  <div class=\"fb-inspector__body\">\r\n    @if (issues().length) {\r\n      <ul class=\"fb-inspector__issues\">\r\n        <!-- `$index`: due rilievi con lo stesso codice e lo stesso path sono possibili. -->\r\n        @for (issue of visibleIssues(); track $index) {\r\n          <li\r\n            class=\"fb-inspector__issue\"\r\n            [class.fb-inspector__issue--error]=\"issue.severity === 'Error'\"\r\n            [class.fb-inspector__issue--warning]=\"issue.severity === 'Warning'\"\r\n          >\r\n            <span class=\"fb-inspector__issue-code\">{{ issue.code }}</span>\r\n            {{ issue.message }}\r\n            @if (issue.path) {\r\n              <span class=\"fb-inspector__issue-path\">{{ issue.path }}</span>\r\n            }\r\n          </li>\r\n        }\r\n      </ul>\r\n      @if (hiddenIssueCount() > 0 || issuesExpanded()) {\r\n        <!-- Sei rilievi in cima riempivano la finestra prima del primo campo: si chiedono. -->\r\n        <button type=\"button\" class=\"fb-inspector__issues-more\" (click)=\"toggleIssues()\">\r\n          @if (issuesExpanded()) {\r\n            Mostra meno\r\n          } @else {\r\n            Altri {{ hiddenIssueCount() }} rilievi su questo elemento\r\n          }\r\n        </button>\r\n      }\r\n    }\r\n\r\n    @if (isUnsupported()) {\r\n      <p class=\"fb-callout fb-callout--error\">\r\n        Questo tipo di elemento non e\u2019 supportato dal motore: il flow che lo contiene non parte\r\n        (ELEMENT_NOT_SUPPORTED). Non e\u2019 creabile dalla palette; se e\u2019 arrivato da un documento importato,\r\n        va rimosso.\r\n      </p>\r\n    }\r\n\r\n    @if (!isStart()) {\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Etichetta</label>\r\n        <input\r\n          class=\"fb-input\"\r\n          [value]=\"$any(node()?.label) || ''\"\r\n          placeholder=\"Nome mostrato sul canvas\"\r\n          (input)=\"setLabel($any($event.target).value)\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Nome tecnico</label>\r\n        @if (pendingName() === null) {\r\n          <div class=\"fb-field__row\">\r\n            <input class=\"fb-input fb-input--mono\" [value]=\"selectedName() || ''\" readonly />\r\n            <button type=\"button\" class=\"fb-btn\" (click)=\"startRename()\">Rinomina</button>\r\n          </div>\r\n          <p class=\"fb-field__hint\">\r\n            \u00C8 l\u2019identificatore con cui i riferimenti raggiungono questo elemento.\r\n            @if (referenceCount() > 1) {\r\n              Compare {{ referenceCount() }} volte nel documento.\r\n            }\r\n          </p>\r\n        } @else {\r\n          <input\r\n            class=\"fb-input fb-input--mono\"\r\n            [class.fb-input--invalid]=\"!!nameError()\"\r\n            [value]=\"pendingName() || ''\"\r\n            (input)=\"onPendingNameInput($any($event.target).value)\"\r\n          />\r\n          @if (nameError()) {\r\n            <p class=\"fb-field__error\">{{ nameError() }}</p>\r\n          } @else {\r\n            <p class=\"fb-field__hint fb-field__hint--warn\">\r\n              La rinomina riscrive tutti i riferimenti che puntano a questo elemento\r\n              ({{ referenceCount() }} occorrenze): nessuna primitiva del backend lo fa, lo fa l\u2019editor.\r\n            </p>\r\n          }\r\n          <div class=\"fb-field__row\">\r\n            <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"!canRename()\" (click)=\"applyRename()\">\r\n              Applica\r\n            </button>\r\n            <button type=\"button\" class=\"fb-btn\" (click)=\"suggestNameFromLabel()\">Genera dalla label</button>\r\n            <button type=\"button\" class=\"fb-btn fb-btn--ghost\" (click)=\"cancelRename()\">Annulla</button>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Descrizione</label>\r\n        <textarea\r\n          class=\"fb-textarea\"\r\n          [value]=\"$any(node()?.description) || ''\"\r\n          (input)=\"setDescription($any($event.target).value)\"\r\n        ></textarea>\r\n      </div>\r\n    }\r\n\r\n    <p class=\"fb-inspector__position\">\r\n      Posizione sul canvas: {{ position().x }}, {{ position().y }}\r\n    </p>\r\n\r\n    <hr class=\"fb-inspector__divider\" />\r\n\r\n    @if (isStart()) {\r\n      <fb-start-inspector />\r\n    } @else if (node()) {\r\n      @switch (type()) {\r\n        @case ('Screen') {\r\n          <fb-screen-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('DynamicScreen') {\r\n          <fb-dynamic-screen-inspector\r\n            [name]=\"selectedName()!\"\r\n            [node]=\"node()!\"\r\n            [initialSelection]=\"initialFieldPath()\"\r\n          />\r\n        }\r\n        @case ('Assignment') {\r\n          <fb-assignment-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Decision') {\r\n          <fb-decision-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Loop') {\r\n          <fb-loop-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('CollectionProcessor') {\r\n          <fb-collection-processor-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('CustomError') {\r\n          <fb-custom-error-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Wait') {\r\n          <fb-wait-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('RecordLookup') {\r\n          <fb-record-lookup-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('RecordCreate') {\r\n          <fb-record-write-inspector [name]=\"selectedName()!\" [node]=\"node()!\" type=\"RecordCreate\" />\r\n        }\r\n        @case ('RecordUpdate') {\r\n          <fb-record-write-inspector [name]=\"selectedName()!\" [node]=\"node()!\" type=\"RecordUpdate\" />\r\n        }\r\n        @case ('RecordDelete') {\r\n          <fb-record-write-inspector [name]=\"selectedName()!\" [node]=\"node()!\" type=\"RecordDelete\" />\r\n        }\r\n        @case ('RecordRollback') {\r\n          <fb-record-rollback-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('ActionCall') {\r\n          <fb-action-call-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('ScriptCall') {\r\n          <fb-script-call-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Subflow') {\r\n          <fb-subflow-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Transform') {\r\n          <fb-transform-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('OrchestratedStage') {\r\n          <fb-orchestrated-stage-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @default {\r\n          <p class=\"fb-callout fb-callout--warn\">\r\n            Nessun form specifico per il tipo \u00AB{{ type() }}\u00BB: i campi comuni sono modificabili qui sopra.\r\n          </p>\r\n        }\r\n      }\r\n    }\r\n\r\n    @if (!isStart()) {\r\n      <hr class=\"fb-inspector__divider\" />\r\n      <div class=\"fb-field__row\">\r\n        <button type=\"button\" class=\"fb-btn\" (click)=\"requestDuplicate()\">Duplica</button>\r\n        <button type=\"button\" class=\"fb-btn fb-btn--danger\" (click)=\"requestRemove()\">Elimina</button>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--fb-surface, #fff)}.fb-inspector__empty{margin:16px 12px;font-size:12px;line-height:1.5;color:var(--fb-text-muted, #667085)}.fb-inspector__header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee)}.fb-inspector__type{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fb-text-subtle, #98a2b3)}.fb-inspector__title{margin:2px 0 0;font-size:14px;font-weight:600;color:var(--fb-text, #1d2939)}.fb-inspector__body{flex:1;min-height:0;overflow-y:auto;padding:14px}.fb-inspector__issues{margin:0 0 12px;padding:0;list-style:none}.fb-inspector__issue{margin-bottom:4px;padding:6px 8px;border-left:3px solid var(--fb-text-subtle, #98a2b3);border-radius:3px;background:var(--fb-surface-alt, #f8f9fb);font-size:11px;line-height:1.4;color:var(--fb-text, #1d2939)}.fb-inspector__issue--error{border-left-color:var(--fb-error, #c9372c)}.fb-inspector__issue--warning{border-left-color:var(--fb-warning, #b7791f)}.fb-inspector__issue-code{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;color:var(--fb-text-subtle, #98a2b3)}.fb-inspector__issue-path{display:block;margin-top:2px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;color:var(--fb-text-muted, #667085)}.fb-inspector__position{margin:0;font-size:10px;color:var(--fb-text-subtle, #98a2b3)}.fb-inspector__divider{margin:12px 0;border:0;border-top:1px solid var(--fb-border-subtle, #e6e9ee)}.fb-inspector__issues-more{display:block;margin:-4px 0 10px;padding:2px 0;border:0;background:none;color:var(--fb-accent, #4f6ef7);font:inherit;font-size:11px;cursor:pointer}.fb-inspector__issues-more:hover{text-decoration:underline}\n"], dependencies: [{ kind: "component", type: ActionCallInspectorComponent, selector: "fb-action-call-inspector" }, { kind: "component", type: AssignmentInspectorComponent, selector: "fb-assignment-inspector" }, { kind: "component", type: CollectionProcessorInspectorComponent, selector: "fb-collection-processor-inspector" }, { kind: "component", type: CustomErrorInspectorComponent, selector: "fb-custom-error-inspector" }, { kind: "component", type: DecisionInspectorComponent, selector: "fb-decision-inspector" }, { kind: "component", type: DynamicScreenInspectorComponent, selector: "fb-dynamic-screen-inspector", inputs: ["initialSelection"] }, { kind: "component", type: LoopInspectorComponent, selector: "fb-loop-inspector" }, { kind: "component", type: OrchestratedStageInspectorComponent, selector: "fb-orchestrated-stage-inspector" }, { kind: "component", type: RecordLookupInspectorComponent, selector: "fb-record-lookup-inspector" }, { kind: "component", type: RecordRollbackInspectorComponent, selector: "fb-record-rollback-inspector" }, { kind: "component", type: RecordWriteInspectorComponent, selector: "fb-record-write-inspector", inputs: ["type"] }, { kind: "component", type: ScreenInspectorComponent, selector: "fb-screen-inspector" }, { kind: "component", type: ScriptCallInspectorComponent, selector: "fb-script-call-inspector" }, { kind: "component", type: StartInspectorComponent, selector: "fb-start-inspector" }, { kind: "component", type: SubflowInspectorComponent, selector: "fb-subflow-inspector" }, { kind: "component", type: TransformInspectorComponent, selector: "fb-transform-inspector" }, { kind: "component", type: WaitInspectorComponent, selector: "fb-wait-inspector" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.28", type: ElementInspectorComponent, isStandalone: true, selector: "fb-element-inspector", inputs: { selectedName: { classPropertyName: "selectedName", publicName: "selectedName", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, initialFieldPath: { classPropertyName: "initialFieldPath", publicName: "initialFieldPath", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", removeRequested: "removeRequested", duplicateRequested: "duplicateRequested", renamed: "renamed" }, viewQueries: [{ propertyName: "labelInput", first: true, predicate: ["labelInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!selectedName()) {\r\n  <p class=\"fb-inspector__empty\">\r\n    Seleziona un elemento sul canvas per modificarlo, oppure trascina un elemento dalla palette.\r\n  </p>\r\n} @else {\r\n  @if (showHeader()) {\r\n    <header class=\"fb-inspector__header\">\r\n      <div>\r\n        <span class=\"fb-inspector__type\">{{ typeLabel() }}</span>\r\n        <h2 class=\"fb-inspector__title\">\r\n          {{ isStart() ? 'Avvio del flow' : node()?.label || selectedName() }}\r\n        </h2>\r\n      </div>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" aria-label=\"Chiudi\" (click)=\"close()\">\r\n        \u00D7\r\n      </button>\r\n    </header>\r\n  }\r\n\r\n  <div class=\"fb-inspector__body\">\r\n    @if (issues().length) {\r\n      <ul class=\"fb-inspector__issues\">\r\n        <!-- `$index`: due rilievi con lo stesso codice e lo stesso path sono possibili. -->\r\n        @for (issue of visibleIssues(); track $index) {\r\n          <li\r\n            class=\"fb-inspector__issue\"\r\n            [class.fb-inspector__issue--error]=\"issue.severity === 'Error'\"\r\n            [class.fb-inspector__issue--warning]=\"issue.severity === 'Warning'\"\r\n          >\r\n            <span class=\"fb-inspector__issue-code\">{{ issue.code }}</span>\r\n            {{ issue.message }}\r\n            @if (issue.path) {\r\n              <span class=\"fb-inspector__issue-path\">{{ issue.path }}</span>\r\n            }\r\n          </li>\r\n        }\r\n      </ul>\r\n      @if (hiddenIssueCount() > 0 || issuesExpanded()) {\r\n        <!-- Sei rilievi in cima riempivano la finestra prima del primo campo: si chiedono. -->\r\n        <button type=\"button\" class=\"fb-inspector__issues-more\" (click)=\"toggleIssues()\">\r\n          @if (issuesExpanded()) {\r\n            Mostra meno\r\n          } @else {\r\n            Altri {{ hiddenIssueCount() }} rilievi su questo elemento\r\n          }\r\n        </button>\r\n      }\r\n    }\r\n\r\n    @if (isUnsupported()) {\r\n      <p class=\"fb-callout fb-callout--error\">\r\n        Questo tipo di elemento non e\u2019 supportato dal motore: il flow che lo contiene non parte\r\n        (ELEMENT_NOT_SUPPORTED). Non e\u2019 creabile dalla palette; se e\u2019 arrivato da un documento importato,\r\n        va rimosso.\r\n      </p>\r\n    }\r\n\r\n    @if (!isStart()) {\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Etichetta</label>\r\n        <input\r\n          #labelInput\r\n          class=\"fb-input\"\r\n          [value]=\"$any(node()?.label) || ''\"\r\n          placeholder=\"Nome mostrato sul canvas\"\r\n          (input)=\"setLabel($any($event.target).value)\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Nome tecnico</label>\r\n        <!--\r\n          Elemento appena creato: il nome non e\u2019 ancora niente, si costruisce dall\u2019etichetta e\r\n          si puo\u2019 scrivere a mano. Su un elemento gi\u00E0 nominato, invece, cambiare il nome riscrive\r\n          i riferimenti di tutto il documento (\u00A713.8) e sta dietro il comando \u00ABRinomina\u00BB.\r\n        -->\r\n        @if (isComposingName()) {\r\n          <input\r\n            class=\"fb-input fb-input--mono\"\r\n            [class.fb-input--invalid]=\"!!composedNameError()\"\r\n            [value]=\"composedName()\"\r\n            placeholder=\"si genera dall\u2019etichetta\"\r\n            aria-label=\"Nome tecnico\"\r\n            (input)=\"onComposedNameInput($any($event.target).value)\"\r\n          />\r\n          @if (composedNameError()) {\r\n            <p class=\"fb-field__error\">{{ composedNameError() }}</p>\r\n          } @else {\r\n            <p class=\"fb-field__hint\">\r\n              \u00C8 l\u2019identificatore con cui i riferimenti raggiungono questo elemento: si costruisce\r\n              dall\u2019etichetta finch\u00E9 non lo si scrive a mano, e svuotandolo torna a seguirla.\r\n              @if (!composedName()) {\r\n                Finch\u00E9 resta vuoto vale \u00AB{{ selectedName() }}\u00BB.\r\n              }\r\n            </p>\r\n          }\r\n        } @else if (pendingName() === null) {\r\n          <div class=\"fb-field__row\">\r\n            <input class=\"fb-input fb-input--mono\" [value]=\"selectedName() || ''\" readonly />\r\n            <button type=\"button\" class=\"fb-btn\" (click)=\"startRename()\">Rinomina</button>\r\n          </div>\r\n          <p class=\"fb-field__hint\">\r\n            \u00C8 l\u2019identificatore con cui i riferimenti raggiungono questo elemento.\r\n            @if (referenceCount() > 1) {\r\n              Compare {{ referenceCount() }} volte nel documento.\r\n            }\r\n          </p>\r\n        } @else {\r\n          <input\r\n            class=\"fb-input fb-input--mono\"\r\n            [class.fb-input--invalid]=\"!!nameError()\"\r\n            [value]=\"pendingName() || ''\"\r\n            (input)=\"onPendingNameInput($any($event.target).value)\"\r\n          />\r\n          @if (nameError()) {\r\n            <p class=\"fb-field__error\">{{ nameError() }}</p>\r\n          } @else {\r\n            <p class=\"fb-field__hint fb-field__hint--warn\">\r\n              La rinomina riscrive tutti i riferimenti che puntano a questo elemento\r\n              ({{ referenceCount() }} occorrenze): nessuna primitiva del backend lo fa, lo fa l\u2019editor.\r\n            </p>\r\n          }\r\n          <div class=\"fb-field__row\">\r\n            <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"!canRename()\" (click)=\"applyRename()\">\r\n              Applica\r\n            </button>\r\n            <button type=\"button\" class=\"fb-btn\" (click)=\"suggestNameFromLabel()\">Genera dalla label</button>\r\n            <button type=\"button\" class=\"fb-btn fb-btn--ghost\" (click)=\"cancelRename()\">Annulla</button>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Descrizione</label>\r\n        <textarea\r\n          class=\"fb-textarea\"\r\n          [value]=\"$any(node()?.description) || ''\"\r\n          (input)=\"setDescription($any($event.target).value)\"\r\n        ></textarea>\r\n      </div>\r\n    }\r\n\r\n    <p class=\"fb-inspector__position\">\r\n      Posizione sul canvas: {{ position().x }}, {{ position().y }}\r\n    </p>\r\n\r\n    <hr class=\"fb-inspector__divider\" />\r\n\r\n    @if (isStart()) {\r\n      <fb-start-inspector />\r\n    } @else if (node()) {\r\n      @switch (type()) {\r\n        @case ('Screen') {\r\n          <fb-screen-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('DynamicScreen') {\r\n          <fb-dynamic-screen-inspector\r\n            [name]=\"selectedName()!\"\r\n            [node]=\"node()!\"\r\n            [initialSelection]=\"initialFieldPath()\"\r\n          />\r\n        }\r\n        @case ('Assignment') {\r\n          <fb-assignment-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Decision') {\r\n          <fb-decision-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Loop') {\r\n          <fb-loop-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('CollectionProcessor') {\r\n          <fb-collection-processor-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('CustomError') {\r\n          <fb-custom-error-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Wait') {\r\n          <fb-wait-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('RecordLookup') {\r\n          <fb-record-lookup-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('RecordCreate') {\r\n          <fb-record-write-inspector [name]=\"selectedName()!\" [node]=\"node()!\" type=\"RecordCreate\" />\r\n        }\r\n        @case ('RecordUpdate') {\r\n          <fb-record-write-inspector [name]=\"selectedName()!\" [node]=\"node()!\" type=\"RecordUpdate\" />\r\n        }\r\n        @case ('RecordDelete') {\r\n          <fb-record-write-inspector [name]=\"selectedName()!\" [node]=\"node()!\" type=\"RecordDelete\" />\r\n        }\r\n        @case ('RecordRollback') {\r\n          <fb-record-rollback-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('ActionCall') {\r\n          <fb-action-call-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('ScriptCall') {\r\n          <fb-script-call-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Subflow') {\r\n          <fb-subflow-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Transform') {\r\n          <fb-transform-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('OrchestratedStage') {\r\n          <fb-orchestrated-stage-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @default {\r\n          <p class=\"fb-callout fb-callout--warn\">\r\n            Nessun form specifico per il tipo \u00AB{{ type() }}\u00BB: i campi comuni sono modificabili qui sopra.\r\n          </p>\r\n        }\r\n      }\r\n    }\r\n\r\n    @if (!isStart()) {\r\n      <hr class=\"fb-inspector__divider\" />\r\n      <div class=\"fb-field__row\">\r\n        <button type=\"button\" class=\"fb-btn\" (click)=\"requestDuplicate()\">Duplica</button>\r\n        <button type=\"button\" class=\"fb-btn fb-btn--danger\" (click)=\"requestRemove()\">Elimina</button>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--fb-surface, #fff)}.fb-inspector__empty{margin:16px 12px;font-size:12px;line-height:1.5;color:var(--fb-text-muted, #667085)}.fb-inspector__header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee)}.fb-inspector__type{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fb-text-subtle, #98a2b3)}.fb-inspector__title{margin:2px 0 0;font-size:14px;font-weight:600;color:var(--fb-text, #1d2939)}.fb-inspector__body{flex:1;min-height:0;overflow-y:auto;padding:14px}.fb-inspector__issues{margin:0 0 12px;padding:0;list-style:none}.fb-inspector__issue{margin-bottom:4px;padding:6px 8px;border-left:3px solid var(--fb-text-subtle, #98a2b3);border-radius:3px;background:var(--fb-surface-alt, #f8f9fb);font-size:11px;line-height:1.4;color:var(--fb-text, #1d2939)}.fb-inspector__issue--error{border-left-color:var(--fb-error, #c9372c)}.fb-inspector__issue--warning{border-left-color:var(--fb-warning, #b7791f)}.fb-inspector__issue-code{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;color:var(--fb-text-subtle, #98a2b3)}.fb-inspector__issue-path{display:block;margin-top:2px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;color:var(--fb-text-muted, #667085)}.fb-inspector__position{margin:0;font-size:10px;color:var(--fb-text-subtle, #98a2b3)}.fb-inspector__divider{margin:12px 0;border:0;border-top:1px solid var(--fb-border-subtle, #e6e9ee)}.fb-inspector__issues-more{display:block;margin:-4px 0 10px;padding:2px 0;border:0;background:none;color:var(--fb-accent, #4f6ef7);font:inherit;font-size:11px;cursor:pointer}.fb-inspector__issues-more:hover{text-decoration:underline}\n"], dependencies: [{ kind: "component", type: ActionCallInspectorComponent, selector: "fb-action-call-inspector" }, { kind: "component", type: AssignmentInspectorComponent, selector: "fb-assignment-inspector" }, { kind: "component", type: CollectionProcessorInspectorComponent, selector: "fb-collection-processor-inspector" }, { kind: "component", type: CustomErrorInspectorComponent, selector: "fb-custom-error-inspector" }, { kind: "component", type: DecisionInspectorComponent, selector: "fb-decision-inspector" }, { kind: "component", type: DynamicScreenInspectorComponent, selector: "fb-dynamic-screen-inspector", inputs: ["initialSelection"] }, { kind: "component", type: LoopInspectorComponent, selector: "fb-loop-inspector" }, { kind: "component", type: OrchestratedStageInspectorComponent, selector: "fb-orchestrated-stage-inspector" }, { kind: "component", type: RecordLookupInspectorComponent, selector: "fb-record-lookup-inspector" }, { kind: "component", type: RecordRollbackInspectorComponent, selector: "fb-record-rollback-inspector" }, { kind: "component", type: RecordWriteInspectorComponent, selector: "fb-record-write-inspector", inputs: ["type"] }, { kind: "component", type: ScreenInspectorComponent, selector: "fb-screen-inspector" }, { kind: "component", type: ScriptCallInspectorComponent, selector: "fb-script-call-inspector" }, { kind: "component", type: StartInspectorComponent, selector: "fb-start-inspector" }, { kind: "component", type: SubflowInspectorComponent, selector: "fb-subflow-inspector" }, { kind: "component", type: TransformInspectorComponent, selector: "fb-transform-inspector" }, { kind: "component", type: WaitInspectorComponent, selector: "fb-wait-inspector" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: ElementInspectorComponent, decorators: [{
             type: Component,
@@ -14598,8 +14782,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImpo
                         SubflowInspectorComponent,
                         TransformInspectorComponent,
                         WaitInspectorComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!selectedName()) {\r\n  <p class=\"fb-inspector__empty\">\r\n    Seleziona un elemento sul canvas per modificarlo, oppure trascina un elemento dalla palette.\r\n  </p>\r\n} @else {\r\n  @if (showHeader()) {\r\n    <header class=\"fb-inspector__header\">\r\n      <div>\r\n        <span class=\"fb-inspector__type\">{{ typeLabel() }}</span>\r\n        <h2 class=\"fb-inspector__title\">\r\n          {{ isStart() ? 'Avvio del flow' : node()?.label || selectedName() }}\r\n        </h2>\r\n      </div>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" aria-label=\"Chiudi\" (click)=\"close()\">\r\n        \u00D7\r\n      </button>\r\n    </header>\r\n  }\r\n\r\n  <div class=\"fb-inspector__body\">\r\n    @if (issues().length) {\r\n      <ul class=\"fb-inspector__issues\">\r\n        <!-- `$index`: due rilievi con lo stesso codice e lo stesso path sono possibili. -->\r\n        @for (issue of visibleIssues(); track $index) {\r\n          <li\r\n            class=\"fb-inspector__issue\"\r\n            [class.fb-inspector__issue--error]=\"issue.severity === 'Error'\"\r\n            [class.fb-inspector__issue--warning]=\"issue.severity === 'Warning'\"\r\n          >\r\n            <span class=\"fb-inspector__issue-code\">{{ issue.code }}</span>\r\n            {{ issue.message }}\r\n            @if (issue.path) {\r\n              <span class=\"fb-inspector__issue-path\">{{ issue.path }}</span>\r\n            }\r\n          </li>\r\n        }\r\n      </ul>\r\n      @if (hiddenIssueCount() > 0 || issuesExpanded()) {\r\n        <!-- Sei rilievi in cima riempivano la finestra prima del primo campo: si chiedono. -->\r\n        <button type=\"button\" class=\"fb-inspector__issues-more\" (click)=\"toggleIssues()\">\r\n          @if (issuesExpanded()) {\r\n            Mostra meno\r\n          } @else {\r\n            Altri {{ hiddenIssueCount() }} rilievi su questo elemento\r\n          }\r\n        </button>\r\n      }\r\n    }\r\n\r\n    @if (isUnsupported()) {\r\n      <p class=\"fb-callout fb-callout--error\">\r\n        Questo tipo di elemento non e\u2019 supportato dal motore: il flow che lo contiene non parte\r\n        (ELEMENT_NOT_SUPPORTED). Non e\u2019 creabile dalla palette; se e\u2019 arrivato da un documento importato,\r\n        va rimosso.\r\n      </p>\r\n    }\r\n\r\n    @if (!isStart()) {\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Etichetta</label>\r\n        <input\r\n          class=\"fb-input\"\r\n          [value]=\"$any(node()?.label) || ''\"\r\n          placeholder=\"Nome mostrato sul canvas\"\r\n          (input)=\"setLabel($any($event.target).value)\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Nome tecnico</label>\r\n        @if (pendingName() === null) {\r\n          <div class=\"fb-field__row\">\r\n            <input class=\"fb-input fb-input--mono\" [value]=\"selectedName() || ''\" readonly />\r\n            <button type=\"button\" class=\"fb-btn\" (click)=\"startRename()\">Rinomina</button>\r\n          </div>\r\n          <p class=\"fb-field__hint\">\r\n            \u00C8 l\u2019identificatore con cui i riferimenti raggiungono questo elemento.\r\n            @if (referenceCount() > 1) {\r\n              Compare {{ referenceCount() }} volte nel documento.\r\n            }\r\n          </p>\r\n        } @else {\r\n          <input\r\n            class=\"fb-input fb-input--mono\"\r\n            [class.fb-input--invalid]=\"!!nameError()\"\r\n            [value]=\"pendingName() || ''\"\r\n            (input)=\"onPendingNameInput($any($event.target).value)\"\r\n          />\r\n          @if (nameError()) {\r\n            <p class=\"fb-field__error\">{{ nameError() }}</p>\r\n          } @else {\r\n            <p class=\"fb-field__hint fb-field__hint--warn\">\r\n              La rinomina riscrive tutti i riferimenti che puntano a questo elemento\r\n              ({{ referenceCount() }} occorrenze): nessuna primitiva del backend lo fa, lo fa l\u2019editor.\r\n            </p>\r\n          }\r\n          <div class=\"fb-field__row\">\r\n            <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"!canRename()\" (click)=\"applyRename()\">\r\n              Applica\r\n            </button>\r\n            <button type=\"button\" class=\"fb-btn\" (click)=\"suggestNameFromLabel()\">Genera dalla label</button>\r\n            <button type=\"button\" class=\"fb-btn fb-btn--ghost\" (click)=\"cancelRename()\">Annulla</button>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Descrizione</label>\r\n        <textarea\r\n          class=\"fb-textarea\"\r\n          [value]=\"$any(node()?.description) || ''\"\r\n          (input)=\"setDescription($any($event.target).value)\"\r\n        ></textarea>\r\n      </div>\r\n    }\r\n\r\n    <p class=\"fb-inspector__position\">\r\n      Posizione sul canvas: {{ position().x }}, {{ position().y }}\r\n    </p>\r\n\r\n    <hr class=\"fb-inspector__divider\" />\r\n\r\n    @if (isStart()) {\r\n      <fb-start-inspector />\r\n    } @else if (node()) {\r\n      @switch (type()) {\r\n        @case ('Screen') {\r\n          <fb-screen-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('DynamicScreen') {\r\n          <fb-dynamic-screen-inspector\r\n            [name]=\"selectedName()!\"\r\n            [node]=\"node()!\"\r\n            [initialSelection]=\"initialFieldPath()\"\r\n          />\r\n        }\r\n        @case ('Assignment') {\r\n          <fb-assignment-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Decision') {\r\n          <fb-decision-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Loop') {\r\n          <fb-loop-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('CollectionProcessor') {\r\n          <fb-collection-processor-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('CustomError') {\r\n          <fb-custom-error-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Wait') {\r\n          <fb-wait-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('RecordLookup') {\r\n          <fb-record-lookup-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('RecordCreate') {\r\n          <fb-record-write-inspector [name]=\"selectedName()!\" [node]=\"node()!\" type=\"RecordCreate\" />\r\n        }\r\n        @case ('RecordUpdate') {\r\n          <fb-record-write-inspector [name]=\"selectedName()!\" [node]=\"node()!\" type=\"RecordUpdate\" />\r\n        }\r\n        @case ('RecordDelete') {\r\n          <fb-record-write-inspector [name]=\"selectedName()!\" [node]=\"node()!\" type=\"RecordDelete\" />\r\n        }\r\n        @case ('RecordRollback') {\r\n          <fb-record-rollback-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('ActionCall') {\r\n          <fb-action-call-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('ScriptCall') {\r\n          <fb-script-call-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Subflow') {\r\n          <fb-subflow-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Transform') {\r\n          <fb-transform-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('OrchestratedStage') {\r\n          <fb-orchestrated-stage-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @default {\r\n          <p class=\"fb-callout fb-callout--warn\">\r\n            Nessun form specifico per il tipo \u00AB{{ type() }}\u00BB: i campi comuni sono modificabili qui sopra.\r\n          </p>\r\n        }\r\n      }\r\n    }\r\n\r\n    @if (!isStart()) {\r\n      <hr class=\"fb-inspector__divider\" />\r\n      <div class=\"fb-field__row\">\r\n        <button type=\"button\" class=\"fb-btn\" (click)=\"requestDuplicate()\">Duplica</button>\r\n        <button type=\"button\" class=\"fb-btn fb-btn--danger\" (click)=\"requestRemove()\">Elimina</button>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--fb-surface, #fff)}.fb-inspector__empty{margin:16px 12px;font-size:12px;line-height:1.5;color:var(--fb-text-muted, #667085)}.fb-inspector__header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee)}.fb-inspector__type{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fb-text-subtle, #98a2b3)}.fb-inspector__title{margin:2px 0 0;font-size:14px;font-weight:600;color:var(--fb-text, #1d2939)}.fb-inspector__body{flex:1;min-height:0;overflow-y:auto;padding:14px}.fb-inspector__issues{margin:0 0 12px;padding:0;list-style:none}.fb-inspector__issue{margin-bottom:4px;padding:6px 8px;border-left:3px solid var(--fb-text-subtle, #98a2b3);border-radius:3px;background:var(--fb-surface-alt, #f8f9fb);font-size:11px;line-height:1.4;color:var(--fb-text, #1d2939)}.fb-inspector__issue--error{border-left-color:var(--fb-error, #c9372c)}.fb-inspector__issue--warning{border-left-color:var(--fb-warning, #b7791f)}.fb-inspector__issue-code{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;color:var(--fb-text-subtle, #98a2b3)}.fb-inspector__issue-path{display:block;margin-top:2px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;color:var(--fb-text-muted, #667085)}.fb-inspector__position{margin:0;font-size:10px;color:var(--fb-text-subtle, #98a2b3)}.fb-inspector__divider{margin:12px 0;border:0;border-top:1px solid var(--fb-border-subtle, #e6e9ee)}.fb-inspector__issues-more{display:block;margin:-4px 0 10px;padding:2px 0;border:0;background:none;color:var(--fb-accent, #4f6ef7);font:inherit;font-size:11px;cursor:pointer}.fb-inspector__issues-more:hover{text-decoration:underline}\n"] }]
-        }], propDecorators: { selectedName: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedName", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], initialFieldPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFieldPath", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], removeRequested: [{ type: i0.Output, args: ["removeRequested"] }], duplicateRequested: [{ type: i0.Output, args: ["duplicateRequested"] }], renamed: [{ type: i0.Output, args: ["renamed"] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!selectedName()) {\r\n  <p class=\"fb-inspector__empty\">\r\n    Seleziona un elemento sul canvas per modificarlo, oppure trascina un elemento dalla palette.\r\n  </p>\r\n} @else {\r\n  @if (showHeader()) {\r\n    <header class=\"fb-inspector__header\">\r\n      <div>\r\n        <span class=\"fb-inspector__type\">{{ typeLabel() }}</span>\r\n        <h2 class=\"fb-inspector__title\">\r\n          {{ isStart() ? 'Avvio del flow' : node()?.label || selectedName() }}\r\n        </h2>\r\n      </div>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" aria-label=\"Chiudi\" (click)=\"close()\">\r\n        \u00D7\r\n      </button>\r\n    </header>\r\n  }\r\n\r\n  <div class=\"fb-inspector__body\">\r\n    @if (issues().length) {\r\n      <ul class=\"fb-inspector__issues\">\r\n        <!-- `$index`: due rilievi con lo stesso codice e lo stesso path sono possibili. -->\r\n        @for (issue of visibleIssues(); track $index) {\r\n          <li\r\n            class=\"fb-inspector__issue\"\r\n            [class.fb-inspector__issue--error]=\"issue.severity === 'Error'\"\r\n            [class.fb-inspector__issue--warning]=\"issue.severity === 'Warning'\"\r\n          >\r\n            <span class=\"fb-inspector__issue-code\">{{ issue.code }}</span>\r\n            {{ issue.message }}\r\n            @if (issue.path) {\r\n              <span class=\"fb-inspector__issue-path\">{{ issue.path }}</span>\r\n            }\r\n          </li>\r\n        }\r\n      </ul>\r\n      @if (hiddenIssueCount() > 0 || issuesExpanded()) {\r\n        <!-- Sei rilievi in cima riempivano la finestra prima del primo campo: si chiedono. -->\r\n        <button type=\"button\" class=\"fb-inspector__issues-more\" (click)=\"toggleIssues()\">\r\n          @if (issuesExpanded()) {\r\n            Mostra meno\r\n          } @else {\r\n            Altri {{ hiddenIssueCount() }} rilievi su questo elemento\r\n          }\r\n        </button>\r\n      }\r\n    }\r\n\r\n    @if (isUnsupported()) {\r\n      <p class=\"fb-callout fb-callout--error\">\r\n        Questo tipo di elemento non e\u2019 supportato dal motore: il flow che lo contiene non parte\r\n        (ELEMENT_NOT_SUPPORTED). Non e\u2019 creabile dalla palette; se e\u2019 arrivato da un documento importato,\r\n        va rimosso.\r\n      </p>\r\n    }\r\n\r\n    @if (!isStart()) {\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Etichetta</label>\r\n        <input\r\n          #labelInput\r\n          class=\"fb-input\"\r\n          [value]=\"$any(node()?.label) || ''\"\r\n          placeholder=\"Nome mostrato sul canvas\"\r\n          (input)=\"setLabel($any($event.target).value)\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Nome tecnico</label>\r\n        <!--\r\n          Elemento appena creato: il nome non e\u2019 ancora niente, si costruisce dall\u2019etichetta e\r\n          si puo\u2019 scrivere a mano. Su un elemento gi\u00E0 nominato, invece, cambiare il nome riscrive\r\n          i riferimenti di tutto il documento (\u00A713.8) e sta dietro il comando \u00ABRinomina\u00BB.\r\n        -->\r\n        @if (isComposingName()) {\r\n          <input\r\n            class=\"fb-input fb-input--mono\"\r\n            [class.fb-input--invalid]=\"!!composedNameError()\"\r\n            [value]=\"composedName()\"\r\n            placeholder=\"si genera dall\u2019etichetta\"\r\n            aria-label=\"Nome tecnico\"\r\n            (input)=\"onComposedNameInput($any($event.target).value)\"\r\n          />\r\n          @if (composedNameError()) {\r\n            <p class=\"fb-field__error\">{{ composedNameError() }}</p>\r\n          } @else {\r\n            <p class=\"fb-field__hint\">\r\n              \u00C8 l\u2019identificatore con cui i riferimenti raggiungono questo elemento: si costruisce\r\n              dall\u2019etichetta finch\u00E9 non lo si scrive a mano, e svuotandolo torna a seguirla.\r\n              @if (!composedName()) {\r\n                Finch\u00E9 resta vuoto vale \u00AB{{ selectedName() }}\u00BB.\r\n              }\r\n            </p>\r\n          }\r\n        } @else if (pendingName() === null) {\r\n          <div class=\"fb-field__row\">\r\n            <input class=\"fb-input fb-input--mono\" [value]=\"selectedName() || ''\" readonly />\r\n            <button type=\"button\" class=\"fb-btn\" (click)=\"startRename()\">Rinomina</button>\r\n          </div>\r\n          <p class=\"fb-field__hint\">\r\n            \u00C8 l\u2019identificatore con cui i riferimenti raggiungono questo elemento.\r\n            @if (referenceCount() > 1) {\r\n              Compare {{ referenceCount() }} volte nel documento.\r\n            }\r\n          </p>\r\n        } @else {\r\n          <input\r\n            class=\"fb-input fb-input--mono\"\r\n            [class.fb-input--invalid]=\"!!nameError()\"\r\n            [value]=\"pendingName() || ''\"\r\n            (input)=\"onPendingNameInput($any($event.target).value)\"\r\n          />\r\n          @if (nameError()) {\r\n            <p class=\"fb-field__error\">{{ nameError() }}</p>\r\n          } @else {\r\n            <p class=\"fb-field__hint fb-field__hint--warn\">\r\n              La rinomina riscrive tutti i riferimenti che puntano a questo elemento\r\n              ({{ referenceCount() }} occorrenze): nessuna primitiva del backend lo fa, lo fa l\u2019editor.\r\n            </p>\r\n          }\r\n          <div class=\"fb-field__row\">\r\n            <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"!canRename()\" (click)=\"applyRename()\">\r\n              Applica\r\n            </button>\r\n            <button type=\"button\" class=\"fb-btn\" (click)=\"suggestNameFromLabel()\">Genera dalla label</button>\r\n            <button type=\"button\" class=\"fb-btn fb-btn--ghost\" (click)=\"cancelRename()\">Annulla</button>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Descrizione</label>\r\n        <textarea\r\n          class=\"fb-textarea\"\r\n          [value]=\"$any(node()?.description) || ''\"\r\n          (input)=\"setDescription($any($event.target).value)\"\r\n        ></textarea>\r\n      </div>\r\n    }\r\n\r\n    <p class=\"fb-inspector__position\">\r\n      Posizione sul canvas: {{ position().x }}, {{ position().y }}\r\n    </p>\r\n\r\n    <hr class=\"fb-inspector__divider\" />\r\n\r\n    @if (isStart()) {\r\n      <fb-start-inspector />\r\n    } @else if (node()) {\r\n      @switch (type()) {\r\n        @case ('Screen') {\r\n          <fb-screen-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('DynamicScreen') {\r\n          <fb-dynamic-screen-inspector\r\n            [name]=\"selectedName()!\"\r\n            [node]=\"node()!\"\r\n            [initialSelection]=\"initialFieldPath()\"\r\n          />\r\n        }\r\n        @case ('Assignment') {\r\n          <fb-assignment-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Decision') {\r\n          <fb-decision-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Loop') {\r\n          <fb-loop-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('CollectionProcessor') {\r\n          <fb-collection-processor-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('CustomError') {\r\n          <fb-custom-error-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Wait') {\r\n          <fb-wait-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('RecordLookup') {\r\n          <fb-record-lookup-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('RecordCreate') {\r\n          <fb-record-write-inspector [name]=\"selectedName()!\" [node]=\"node()!\" type=\"RecordCreate\" />\r\n        }\r\n        @case ('RecordUpdate') {\r\n          <fb-record-write-inspector [name]=\"selectedName()!\" [node]=\"node()!\" type=\"RecordUpdate\" />\r\n        }\r\n        @case ('RecordDelete') {\r\n          <fb-record-write-inspector [name]=\"selectedName()!\" [node]=\"node()!\" type=\"RecordDelete\" />\r\n        }\r\n        @case ('RecordRollback') {\r\n          <fb-record-rollback-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('ActionCall') {\r\n          <fb-action-call-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('ScriptCall') {\r\n          <fb-script-call-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Subflow') {\r\n          <fb-subflow-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Transform') {\r\n          <fb-transform-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('OrchestratedStage') {\r\n          <fb-orchestrated-stage-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @default {\r\n          <p class=\"fb-callout fb-callout--warn\">\r\n            Nessun form specifico per il tipo \u00AB{{ type() }}\u00BB: i campi comuni sono modificabili qui sopra.\r\n          </p>\r\n        }\r\n      }\r\n    }\r\n\r\n    @if (!isStart()) {\r\n      <hr class=\"fb-inspector__divider\" />\r\n      <div class=\"fb-field__row\">\r\n        <button type=\"button\" class=\"fb-btn\" (click)=\"requestDuplicate()\">Duplica</button>\r\n        <button type=\"button\" class=\"fb-btn fb-btn--danger\" (click)=\"requestRemove()\">Elimina</button>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--fb-surface, #fff)}.fb-inspector__empty{margin:16px 12px;font-size:12px;line-height:1.5;color:var(--fb-text-muted, #667085)}.fb-inspector__header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee)}.fb-inspector__type{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fb-text-subtle, #98a2b3)}.fb-inspector__title{margin:2px 0 0;font-size:14px;font-weight:600;color:var(--fb-text, #1d2939)}.fb-inspector__body{flex:1;min-height:0;overflow-y:auto;padding:14px}.fb-inspector__issues{margin:0 0 12px;padding:0;list-style:none}.fb-inspector__issue{margin-bottom:4px;padding:6px 8px;border-left:3px solid var(--fb-text-subtle, #98a2b3);border-radius:3px;background:var(--fb-surface-alt, #f8f9fb);font-size:11px;line-height:1.4;color:var(--fb-text, #1d2939)}.fb-inspector__issue--error{border-left-color:var(--fb-error, #c9372c)}.fb-inspector__issue--warning{border-left-color:var(--fb-warning, #b7791f)}.fb-inspector__issue-code{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;color:var(--fb-text-subtle, #98a2b3)}.fb-inspector__issue-path{display:block;margin-top:2px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;color:var(--fb-text-muted, #667085)}.fb-inspector__position{margin:0;font-size:10px;color:var(--fb-text-subtle, #98a2b3)}.fb-inspector__divider{margin:12px 0;border:0;border-top:1px solid var(--fb-border-subtle, #e6e9ee)}.fb-inspector__issues-more{display:block;margin:-4px 0 10px;padding:2px 0;border:0;background:none;color:var(--fb-accent, #4f6ef7);font:inherit;font-size:11px;cursor:pointer}.fb-inspector__issues-more:hover{text-decoration:underline}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { labelInput: [{ type: i0.ViewChild, args: ['labelInput', { isSignal: true }] }], selectedName: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedName", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], initialFieldPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFieldPath", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], removeRequested: [{ type: i0.Output, args: ["removeRequested"] }], duplicateRequested: [{ type: i0.Output, args: ["duplicateRequested"] }], renamed: [{ type: i0.Output, args: ["renamed"] }] } });
 
 /**
  * Il vincolo di spostamento delle finestre trascinabili dell'editor.
@@ -14714,12 +14898,25 @@ class ElementDialogComponent {
         const node = this.reference()?.node;
         return node?.label || this.selectedName() || '';
     }, ...(ngDevMode ? [{ debugName: "title" }] : []));
+    /**
+     * L'ultimo nome adottato da una rinomina.
+     *
+     * La selezione dell'editor **e' il nome**, quindi una rinomina cambia `selectedName` senza
+     * che l'elemento sia cambiato. Senza distinguere i due casi il nome che si costruisce
+     * dall'etichetta mentre la si digita riportava il focus sul pannello a ogni battuta, e
+     * l'etichetta si scriveva una lettera alla volta.
+     */
+    renamedTo;
     constructor() {
         // Il focus entra nella dialog quando cambia elemento: da tastiera si arriva subito ai
         // campi, e `Esc` chiude senza dover prima cliccare dentro.
         effect(() => {
             const name = this.selectedName();
             const panel = this.panel()?.nativeElement;
+            if (name && name === this.renamedTo) {
+                this.renamedTo = undefined;
+                return;
+            }
             if (name && panel) {
                 panel.focus({ preventScroll: true });
             }
@@ -14737,6 +14934,7 @@ class ElementDialogComponent {
         this.duplicateRequested.emit(name);
     }
     onRenamed(name) {
+        this.renamedTo = name;
         this.renamed.emit(name);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: ElementDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -16902,12 +17100,36 @@ class FlowBuilderComponent {
             definition.interviewLabel = value || undefined;
         });
     }
+    /**
+     * Il tipo di flow si sceglie **alla creazione**, e su un flow salvato non si tocca.
+     *
+     * Non e' una preferenza: decide quali globali esistono (`$Record` non c'e' in uno screen
+     * flow, §4.1), quali elementi sono ammessi (§13.6) e come il motore lo esegue. Cambiarlo su
+     * un documento già scritto lo lascia pieno di riferimenti a cose che da quel momento non
+     * esistono — e nessuna primitiva del backend rimedia. Il comando non c'e' nemmeno
+     * nell'interfaccia; il controllo qui e' perché la chiamata resta pubblica.
+     */
     setProcessType(value) {
+        if (!this.session.isNew()) {
+            return;
+        }
         this.store.updateHeader((definition) => {
             definition.processType = value;
         });
     }
     processTypes = computed(() => this.dictionaries.processTypes(), ...(ngDevMode ? [{ debugName: "processTypes" }] : []));
+    /**
+     * Il tipo scritto per esteso, per il flow salvato dove non e' più una scelta. Fuori catalogo
+     * si mostra il valore grezzo: e' del backend, non nostro da correggere (vedi
+     * {@link isProcessTypeOutOfCatalog}).
+     */
+    processTypeLabel = computed(() => {
+        const current = this.store.document().processType;
+        if (!current) {
+            return '— tipo di flow —';
+        }
+        return this.processTypes().find((type) => type.value === current)?.label ?? current;
+    }, ...(ngDevMode ? [{ debugName: "processTypeLabel" }] : []));
     /**
      * Il `processType` del documento non e' fra quelli del dizionario. Non e' un caso di scuola:
      * basta che il dizionario arrivi senza `processTypes`, o che il backend salvi una scrittura
@@ -17098,21 +17320,26 @@ class FlowBuilderComponent {
             return;
         }
         /**
-         * Su un tipo a varianti la label e' quella della variante: un node chiamato «Ordina o
-         * filtra» non dice cosa fa, e da lì viene anche il nome tecnico. Se la palette non ha
-         * passato nessuna variante — dizionario non disponibile — si prende la prima dichiarata,
-         * così l'elemento nasce comunque completo (§5.6).
+         * Su un tipo a varianti il nome provvisorio viene dalla variante: un node chiamato
+         * «Ordina o filtra» non dice cosa fa. Se la palette non ha passato nessuna variante —
+         * dizionario non disponibile — si prende la prima dichiarata, così l'elemento nasce
+         * comunque completo (§5.6).
          */
         const variants = this.dictionaries.variantsOf(type);
         const chosenVariant = variant ?? variants[0]?.value;
-        const label = chosenVariant
+        const typeLabel = chosenVariant
             ? this.dictionaries.variantLabelOf(type, chosenVariant) || this.dictionaries.labelOf(type)
             : this.dictionaries.labelOf(type);
-        // Il nome si genera dalla label e si verifica contro node **e** risorse (§3.3, §11).
-        const name = uniqueFlowName(label, this.store.usedNames());
+        /**
+         * L'elemento nasce **senza etichetta**: nominarlo e' la prima cosa che si fa nel suo form,
+         * e il nome tecnico si costruisce da lì mentre la si digita. Il nome invece non può stare
+         * vuoto nemmeno un istante — e' la chiave con cui il documento lo raggiunge (§3.3) —
+         * quindi ne nasce uno provvisorio dal tipo, verificato contro node **e** risorse (§11):
+         * e' anche cio' che il canvas mostra al posto del titolo finché l'etichetta non c'e'.
+         */
+        const name = uniqueFlowName(typeLabel, this.store.usedNames());
         const node = {
             name,
-            label,
             locationX: Math.round(x),
             locationY: Math.round(y),
             ...variantPresetOf(type, chosenVariant),
@@ -17473,10 +17700,41 @@ class FlowBuilderComponent {
         }
     }
     undo() {
-        this.store.undo();
+        this.stepHistory(() => this.store.undo());
     }
     redo() {
-        this.store.redo();
+        this.stepHistory(() => this.store.redo());
+    }
+    /**
+     * Un passo di storico, con la selezione che lo segue.
+     *
+     * La selezione dell'editor **e' il nome** (§3.3), e un annulla può riportare indietro una
+     * rinomina — succede a ogni battuta sull'etichetta di un elemento appena creato, dove il nome
+     * la segue. Il nome selezionato allora non esiste più: l'inspector resta puntato sul vuoto, il
+     * form del tipo sparisce e l'intestazione mostra un nome che nel documento non c'è. L'annulla
+     * però non sposta gli elementi nella loro collection, quindi **dove** stavano — collection e
+     * indice — e' la traccia che sopravvive: dopo il passo si adotta il nome che si trova lì.
+     */
+    stepHistory(step) {
+        const selected = this.selectedName();
+        const before = selected ? this.store.nodeByName().get(selected) : undefined;
+        step();
+        if (!selected || this.store.nodeByName().has(selected)) {
+            return;
+        }
+        const restored = before
+            ? this.store
+                .nodes()
+                .find((entry) => entry.collection === before.collection && entry.index === before.index)
+            : undefined;
+        this.selectedName.set(restored?.name ?? START_NODE_NAME);
+        this.selectedNames.update((names) => restored
+            ? names.map((name) => (name === selected ? restored.name : name))
+            : names.filter((name) => name !== selected));
+        if (!restored) {
+            // L'elemento non c'e' proprio piu': una dialog aperta sul vuoto non ha senso.
+            this.isDialogOpen.set(false);
+        }
     }
     // -------------------------------------------------------------------------
     // Salvataggio e ciclo di vita
@@ -17838,7 +18096,7 @@ class FlowBuilderComponent {
             FormulaValidationService,
             FlowEditorSession,
             FlowLayoutService,
-        ], viewQueries: [{ propertyName: "canvas", first: true, predicate: FlowCanvasComponent, descendants: true, isSignal: true }, { propertyName: "search", first: true, predicate: FlowSearchComponent, descendants: true, isSignal: true }, { propertyName: "copyNameInput", first: true, predicate: ["copyNameInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fb-builder\" [attr.data-fb-theme]=\"null\">\r\n  <header class=\"fb-top\">\r\n    <div class=\"fb-top__identity\">\r\n      <input\r\n        class=\"fb-top__label\"\r\n        [value]=\"document().label || ''\"\r\n        placeholder=\"Nome del flow\"\r\n        aria-label=\"Nome del flow\"\r\n        [disabled]=\"!isEditable()\"\r\n        (input)=\"setLabel($any($event.target).value)\"\r\n      />\r\n      <div class=\"fb-top__meta\">\r\n        <input\r\n          class=\"fb-top__name\"\r\n          [value]=\"document().fullName || ''\"\r\n          placeholder=\"NomeTecnico\"\r\n          aria-label=\"Nome tecnico del flow\"\r\n          [disabled]=\"!isEditable()\"\r\n          (input)=\"setFullName($any($event.target).value)\"\r\n        />\r\n        <select\r\n          class=\"fb-top__process\"\r\n          [fbValue]=\"document().processType || ''\"\r\n          aria-label=\"Tipo di flow\"\r\n          [disabled]=\"!isEditable()\"\r\n          (change)=\"setProcessType($any($event.target).value)\"\r\n        >\r\n          <!--\r\n            Il segnaposto esiste perche' un `<select>` senza opzione corrispondente non e'\r\n            \u00ABvuoto\u00BB: e' a `selectedIndex = -1`, e mostra una casella bianca. Su un flow nuovo\r\n            (`processType` non ancora scelto) e' questa la riga che si vede, disabilitata\r\n            perche' non e' un valore valido da salvare.\r\n          -->\r\n          @if (!document().processType) {\r\n            <option value=\"\" disabled>\u2014 tipo di flow \u2014</option>\r\n          }\r\n          @for (type of processTypes(); track type.value) {\r\n            <option [value]=\"type.value\">{{ type.label }}</option>\r\n          }\r\n          <!--\r\n            Il tipo del documento che il dizionario non conosce: senza questa opzione la select\r\n            resta bianca su un flow che il backend ha salvato con un `processType` fuori\r\n            catalogo (o quando `processTypes` manca dalla risposta dei dizionari), e sembra che\r\n            l'editor non abbia ricaricato il flow. Va mostrato **senza** riscrivere il\r\n            documento: il valore e' del backend, non nostro da correggere.\r\n          -->\r\n          @if (isProcessTypeOutOfCatalog()) {\r\n            <option [value]=\"document().processType\">{{ document().processType }} (fuori catalogo)</option>\r\n          }\r\n        </select>\r\n        <span class=\"fb-top__status\">{{ statusLabel() }}</span>\r\n        @if (session.version() != null) {\r\n          <span class=\"fb-top__version\">v{{ session.version() }}</span>\r\n        }\r\n        @if (isDirty()) {\r\n          <span class=\"fb-top__dirty\" title=\"Ci sono modifiche non salvate\">modificato</span>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <!--\r\n      La ricerca **nel documento**: e\u2019 l\u2019unico modo di arrivare a un elemento su un flow che non\r\n      sta in una schermata. Non e\u2019 la casella della palette, che filtra i tipi da aggiungere.\r\n    -->\r\n    <fb-flow-search (picked)=\"onSearchPicked($event)\" />\r\n\r\n    <div class=\"fb-top__actions\">\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"!canUndo()\" aria-label=\"Annulla\" (click)=\"undo()\">\u21B6</button>\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"!canRedo()\" aria-label=\"Ripeti\" (click)=\"redo()\">\u21B7</button>\r\n      <button type=\"button\" class=\"fb-btn\" title=\"Ricalcola le posizioni\" (click)=\"autoLayout()\">Riordina</button>\r\n      <!--\r\n        Un riquadro e\u2019 un commento sul canvas (\u00A73.6): non viene eseguito, quindi il comando sta\r\n        qui accanto a \u00ABRiordina\u00BB e non nella palette degli elementi. Nasce attorno a cio\u2019 che e\u2019\r\n        selezionato, che e\u2019 il gesto per cui serve.\r\n      -->\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"!isEditable()\"\r\n        [title]=\"\r\n          canCopy()\r\n            ? 'Racchiudi gli elementi selezionati in un riquadro di commento'\r\n            : 'Crea un riquadro di commento vuoto: non cambia il comportamento del flow'\r\n        \"\r\n        aria-label=\"Nuovo riquadro di raggruppamento\"\r\n        (click)=\"createGroup()\"\r\n      >\r\n        \u2B1A\r\n      </button>\r\n\r\n      <!--\r\n        Copia e incolla stanno **anche** qui e non solo sui tasti: una scorciatoia che nessuno\r\n        annuncia non esiste. Il titolo la dice, cos\u00EC si impara usandola una volta.\r\n        L\u2019incolla e\u2019 acceso anche con la selezione vuota: cio\u2019 che si incolla sta negli appunti,\r\n        e puo\u2019 venire da un altro flow.\r\n      -->\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"!canCopy()\"\r\n        title=\"Copia gli elementi selezionati, con le risorse che usano (Ctrl+C)\"\r\n        aria-label=\"Copia gli elementi selezionati\"\r\n        (click)=\"copySelection()\"\r\n      >\r\n        \u29C9\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"!canPaste() || !isEditable()\"\r\n        title=\"Incolla gli elementi copiati, anche da un altro flow (Ctrl+V)\"\r\n        aria-label=\"Incolla gli elementi copiati\"\r\n        (click)=\"startPaste()\"\r\n      >\r\n        \u2398\r\n      </button>\r\n      @if (isDialogMode()) {\r\n        <!-- Il doppio click sul node fa la stessa cosa, ma non si vede: questo comando s\u00EC. -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-btn\"\r\n          [disabled]=\"!selectedName()\"\r\n          title=\"Apri il dettaglio dell\u2019elemento selezionato\"\r\n          (click)=\"openSelectedElement()\"\r\n        >\r\n          Dettaglio\r\n        </button>\r\n      }\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"isBusy()\" (click)=\"validateNow()\">Valida</button>\r\n\r\n      <!--\r\n        Esegui e Debug non eseguono niente qui dentro: raccolgono i valori di ingresso e li\r\n        consegnano all\u2019applicazione ospite. Si esegue la versione **salvata**, quindi su un flow\r\n        mai scritto sono spenti e il titolo dice perche\u2019.\r\n      -->\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"!canRun()\"\r\n        [title]=\"canRun() ? 'Esegui il flow salvato' : 'Salva il flow prima di eseguirlo'\"\r\n        (click)=\"openRun('run')\"\r\n      >\r\n        Esegui\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"!canRun()\"\r\n        [title]=\"canRun() ? 'Esegui il flow salvato in debug' : 'Salva il flow prima di eseguirlo'\"\r\n        (click)=\"openRun('debug')\"\r\n      >\r\n        Debug\r\n      </button>\r\n\r\n      @switch (primaryCommand()) {\r\n        @case ('newVersion') {\r\n          <!-- Su una versione non modificabile il comando primario e' \"Nuova versione\" (\u00A78.1). -->\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"createNewVersion()\">\r\n            Nuova versione\r\n          </button>\r\n        }\r\n        @case ('create') {\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"save()\">\r\n            Crea\r\n          </button>\r\n        }\r\n        @default {\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"save()\">\r\n            Salva\r\n          </button>\r\n        }\r\n      }\r\n\r\n      @if (canDuplicate()) {\r\n        <!-- \u00A76.2 \u00ABDuplica\u00BB: il flow sotto un altro nome, alla versione 1. -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-btn\"\r\n          [disabled]=\"isBusy()\"\r\n          title=\"Salva una copia con un altro nome\"\r\n          (click)=\"startCopy()\"\r\n        >\r\n          Duplica\u2026\r\n        </button>\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"isBusy() || !canActivate()\"\r\n        [title]=\"\r\n          canActivate()\r\n            ? 'Attiva questa versione'\r\n            : 'L\u2019attivazione esige zero errori: correggili nel pannello dei problemi'\r\n        \"\r\n        (click)=\"activate()\"\r\n      >\r\n        Attiva\r\n      </button>\r\n    </div>\r\n  </header>\r\n\r\n  @if (conflict()) {\r\n    <!-- \u00A79.3: qualcun altro ha salvato. Due strade, entrambe offerte. -->\r\n    <div class=\"fb-banner fb-banner--warn\" role=\"alert\">\r\n      <span>\r\n        {{ conflict()?.message }}\r\n        @if (conflict()?.conflictingAuthor) {\r\n          Ha salvato {{ conflict()?.conflictingAuthor }}.\r\n        }\r\n      </span>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--icon\" (click)=\"reloadAfterConflict()\">Ricarica</button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--icon\" (click)=\"saveAsNewVersionAfterConflict()\">\r\n        Salva come nuova versione\r\n      </button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" (click)=\"dismissConflict()\">\u00D7</button>\r\n    </div>\r\n  }\r\n\r\n  @if (isCopyOpen()) {\r\n    <!--\r\n      Il nome si chiede prima di scrivere: e\u2019 l\u2019unico dato che il backend non puo\u2019 inventare, e\r\n      un doppione lo rifiuta con AlreadyExists (\u00A76.2). Invio conferma, Esc annulla.\r\n    -->\r\n    <div class=\"fb-banner fb-copy\" role=\"group\" aria-label=\"Duplica il flow\">\r\n      <label class=\"fb-copy__field\">\r\n        <span class=\"fb-copy__caption\">Nome tecnico della copia</span>\r\n        <input\r\n          #copyNameInput\r\n          class=\"fb-copy__input\"\r\n          [value]=\"copyName()\"\r\n          placeholder=\"NomeTecnico_Copia\"\r\n          (input)=\"setCopyName($any($event.target).value)\"\r\n          (keydown.enter)=\"confirmCopy()\"\r\n          (keydown.escape)=\"cancelCopy()\"\r\n        />\r\n      </label>\r\n      <label class=\"fb-copy__field\">\r\n        <span class=\"fb-copy__caption\">Nome visibile</span>\r\n        <input\r\n          class=\"fb-copy__input\"\r\n          [value]=\"copyLabel()\"\r\n          placeholder=\"(facoltativo)\"\r\n          (input)=\"setCopyLabel($any($event.target).value)\"\r\n          (keydown.enter)=\"confirmCopy()\"\r\n          (keydown.escape)=\"cancelCopy()\"\r\n        />\r\n      </label>\r\n      <span class=\"fb-copy__hint\" [class.fb-copy__hint--error]=\"!!copyNameProblem()\">\r\n        {{ copyNameProblem() || copyHint() }}\r\n      </span>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn fb-btn--primary fb-btn--icon\"\r\n        [disabled]=\"isBusy() || !!copyNameProblem()\"\r\n        (click)=\"confirmCopy()\"\r\n      >\r\n        Duplica\r\n      </button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" (click)=\"cancelCopy()\">Annulla</button>\r\n    </div>\r\n  }\r\n\r\n  @if (notice()) {\r\n    <div\r\n      class=\"fb-banner\"\r\n      [class.fb-banner--error]=\"notice()?.kind === 'error'\"\r\n      role=\"status\"\r\n    >\r\n      <span>{{ notice()?.message }}</span>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" aria-label=\"Chiudi\" (click)=\"dismissNotice()\">\r\n        \u00D7\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (hasScreensInAutoLaunched()) {\r\n    <div class=\"fb-banner fb-banner--error\">\r\n      Un flow AutoLaunched che contiene screen e\u2019 un errore di validazione: non c\u2019e\u2019 nessuno a cui mostrarli.\r\n    </div>\r\n  }\r\n  @if (isOrchestrationWithoutStages()) {\r\n    <div class=\"fb-banner fb-banner--warn\">\r\n      Un flow Orchestration senza stage di orchestrazione viene segnalato dalla validazione\r\n      (ORCHESTRATION_WITHOUT_STAGES).\r\n    </div>\r\n  }\r\n  @if (hasNoScreensInScreenFlow()) {\r\n    <div class=\"fb-banner fb-banner--warn\">\r\n      Un flow di tipo Screen senza nessuno screen viene segnalato dalla validazione.\r\n    </div>\r\n  }\r\n  @if (!isEditable()) {\r\n    <div class=\"fb-banner\">\r\n      Questa versione e\u2019 in sola lettura: per modificarla creane una nuova.\r\n    </div>\r\n  }\r\n\r\n  <div class=\"fb-main\">\r\n    <aside class=\"fb-main__palette\">\r\n      <fb-element-palette [processType]=\"document().processType\" (elementPicked)=\"onElementPicked($event)\" />\r\n    </aside>\r\n\r\n    <div class=\"fb-main__center\">\r\n      <fb-flow-canvas\r\n        class=\"fb-main__canvas\"\r\n        [selectedName]=\"selectedName()\"\r\n        [selectedNames]=\"selectedNames()\"\r\n        [selectedGroupName]=\"selectedGroupName()\"\r\n        [outline]=\"outline()\"\r\n        [isEditable]=\"isEditable()\"\r\n        (selectionChange)=\"onSelectionChange($event)\"\r\n        (nodeOpened)=\"onNodeOpened($event)\"\r\n        (nodeRemoveRequested)=\"onRemoveNode($event)\"\r\n        (nodeDuplicateRequested)=\"onDuplicateNode($event)\"\r\n        (elementDropped)=\"onElementDropped($event)\"\r\n        (groupSelected)=\"onGroupSelected($event)\"\r\n        (groupRemoveRequested)=\"onGroupRemoved($event)\"\r\n      />\r\n\r\n      @if (showProblems()) {\r\n        <fb-problems-panel\r\n          class=\"fb-main__problems\"\r\n          (elementFocused)=\"revealIssueElement($event)\"\r\n          (elementOpened)=\"openIssueElement($event)\"\r\n          (closed)=\"toggleProblems()\"\r\n        />\r\n      } @else {\r\n        <button type=\"button\" class=\"fb-main__problems-toggle\" (click)=\"toggleProblems()\">\r\n          Problemi\r\n          @if (errorCount()) {\r\n            <span class=\"fb-main__count fb-main__count--error\">{{ errorCount() }}</span>\r\n          }\r\n          @if (warningCount()) {\r\n            <span class=\"fb-main__count fb-main__count--warn\">{{ warningCount() }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <aside class=\"fb-main__side\">\r\n      <nav class=\"fb-side__tabs\" aria-label=\"Pannelli\">\r\n        @if (!isDialogMode()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fb-side__tab\"\r\n            [class.fb-side__tab--active]=\"sidePanel() === 'inspector'\"\r\n            (click)=\"setPanel('inspector')\"\r\n          >\r\n            Elemento\r\n          </button>\r\n        }\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'resources'\"\r\n          (click)=\"setPanel('resources')\"\r\n        >\r\n          Risorse\r\n        </button>\r\n        <!--\r\n          I riquadri (\u00A73.6). Il tab porta il conteggio perche\u2019 e\u2019 l\u2019unico modo di sapere che un\r\n          flow ne ha, quando sono chiusi o fuori dalla vista.\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'groups'\"\r\n          (click)=\"setPanel('groups')\"\r\n        >\r\n          Riquadri\r\n          @if (store.groups().length) {\r\n            <span class=\"fb-main__count\">{{ store.groups().length }}</span>\r\n          }\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'versions'\"\r\n          (click)=\"setPanel('versions')\"\r\n        >\r\n          Versioni\r\n        </button>\r\n        <!--\r\n          Il pannello dell\u2019ultima esecuzione. \u00C8 l\u2019unico posto in cui si vede la traccia di un\r\n          flow **senza schermate**: l\u00EC il runtime non apre nessuna interfaccia, e senza questo\r\n          tab non ci sarebbe niente da guardare.\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'debug'\"\r\n          (click)=\"setPanel('debug')\"\r\n        >\r\n          Debug\r\n          @if (isRunning()) {\r\n            <span class=\"fb-side__tab-dot\" aria-label=\"esecuzione in corso\"></span>\r\n          }\r\n        </button>\r\n      </nav>\r\n\r\n      <div class=\"fb-side__content\">\r\n        @switch (sidePanel()) {\r\n          @case ('inspector') {\r\n            <fb-element-inspector\r\n              [selectedName]=\"selectedName()\"\r\n              [initialFieldPath]=\"pendingFieldPath()\"\r\n              (removeRequested)=\"onRemoveNode($event)\"\r\n              (duplicateRequested)=\"onDuplicateNode($event)\"\r\n              (renamed)=\"onNodeRenamed($event)\"\r\n              (closed)=\"setPanel('resources')\"\r\n            />\r\n          }\r\n          @case ('resources') {\r\n            <fb-resource-panel\r\n              [target]=\"resourceTarget()\"\r\n              [editing]=\"editingResource()\"\r\n              (editRequested)=\"onResourceEditRequested($event)\"\r\n              (closed)=\"setPanel('inspector')\"\r\n            />\r\n          }\r\n          @case ('groups') {\r\n            <fb-group-panel\r\n              [isEditable]=\"isEditable()\"\r\n              [selectedNodeNames]=\"selectedNames()\"\r\n              [target]=\"groupTarget()\"\r\n              (createRequested)=\"createGroup()\"\r\n              (memberFocused)=\"focusMember($event)\"\r\n              (closed)=\"setPanel('resources')\"\r\n            />\r\n          }\r\n          @case ('versions') {\r\n            <fb-version-panel\r\n              (versionOpened)=\"openVersion($event)\"\r\n              (notice)=\"showNotice($event)\"\r\n              (closed)=\"setPanel('inspector')\"\r\n            />\r\n          }\r\n          @case ('debug') {\r\n            <!-- Evidenzia sul canvas senza rubare il pannello: la traccia si sta leggendo. -->\r\n            <fb-debug-panel\r\n              [outcome]=\"shownOutcome()\"\r\n              [wasDebug]=\"wasRunInDebug()\"\r\n              [isRunning]=\"isRunning()\"\r\n              (elementFocused)=\"highlightElement($event)\"\r\n              (cleared)=\"clearRunOutcome()\"\r\n              (closed)=\"setPanel('inspector')\"\r\n            />\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <footer class=\"fb-side__footer\">\r\n        <label class=\"fb-btn fb-btn--icon\">\r\n          Importa JSON\r\n          <input type=\"file\" accept=\"application/json,.json\" hidden (change)=\"onFileSelected($event)\" />\r\n        </label>\r\n      </footer>\r\n    </aside>\r\n  </div>\r\n\r\n  @if (pastePreview(); as preview) {\r\n    <!--\r\n      L\u2019incolla passa da una conferma perche\u2019 non e\u2019 mai una copia identica: nomi gi\u00E0 presi,\r\n      risorse che qui non esistono, riferimenti che restano orfani. Il piano e\u2019 gi\u00E0 calcolato,\r\n      la finestra lo mostra e basta.\r\n    -->\r\n    <fb-paste-dialog\r\n      [payload]=\"preview.payload\"\r\n      [plan]=\"preview.plan\"\r\n      (confirmed)=\"confirmPaste($event)\"\r\n      (cancelled)=\"cancelPaste()\"\r\n    />\r\n  }\r\n\r\n  @if (runMode(); as mode) {\r\n    <!--\r\n      La finestra degli ingressi. Non avvia niente e non chiama niente: raccoglie i valori e li\r\n      annuncia con `runRequested`, perche\u2019 l\u2019unico a sapere dove gira il motore e\u2019 l\u2019ospite.\r\n    -->\r\n    <fb-run-dialog\r\n      [mode]=\"mode\"\r\n      [flowName]=\"session.flowName()\"\r\n      [version]=\"session.version()\"\r\n      [isDirty]=\"isDirty()\"\r\n      [isBusy]=\"isRunning()\"\r\n      (confirmed)=\"confirmRun($event)\"\r\n      (cancelled)=\"closeRun()\"\r\n    />\r\n  }\r\n\r\n  @if (editingResource(); as edit) {\r\n    <!--\r\n      La finestra di una risorsa. Sta qui e non dentro il pannello per una ragione sola: nella\r\n      colonna laterale la ritaglierebbe lo scorrimento.\r\n    -->\r\n    <fb-resource-dialog [edit]=\"edit\" (closed)=\"onResourceEditRequested(null)\" />\r\n  }\r\n\r\n  @if (isDialogMode() && isDialogOpen() && selectedName()) {\r\n    <!-- La dialog sta dentro il builder, non nel body: la libreria e\u2019 innestabile. -->\r\n    <fb-element-dialog\r\n      [selectedName]=\"selectedName()\"\r\n      [initialFieldPath]=\"pendingFieldPath()\"\r\n      (closed)=\"closeDialog()\"\r\n      (removeRequested)=\"onRemoveNode($event)\"\r\n      (duplicateRequested)=\"onDuplicateNode($event)\"\r\n      (renamed)=\"onNodeRenamed($event)\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%;min-height:0;font:inherit;color:var(--fb-text, #1d2939)}.fb-builder{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;background:var(--fb-surface, #fff)}.fb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-bottom:1px solid var(--fb-border, #e2e5eb);background:var(--fb-surface, #fff)}.fb-top__identity{min-width:0}.fb-top__label{width:100%;max-width:420px;padding:2px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--fb-text, #1d2939);font:inherit;font-size:15px;font-weight:600}.fb-top__label:hover:not(:disabled),.fb-top__label:focus-visible{border-color:var(--fb-border, #d6dae1);background:var(--fb-surface, #fff)}.fb-top__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px}.fb-top__name{width:180px;padding:1px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--fb-text-muted, #667085);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.fb-top__name:hover:not(:disabled),.fb-top__name:focus-visible{border-color:var(--fb-border, #d6dae1)}.fb-top__process{padding:1px 4px;border:1px solid var(--fb-border-subtle, #e6e9ee);border-radius:4px;background:transparent;color:var(--fb-text-muted, #667085);font:inherit;font-size:11px}.fb-top__status,.fb-top__version,.fb-top__dirty{padding:2px 7px;border-radius:999px;background:var(--fb-surface-sunken, #eef0f4);color:var(--fb-text-muted, #6b7086);font-size:10px;font-weight:600}.fb-top__version{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.fb-top__dirty{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-top__actions{display:flex;flex-wrap:wrap;gap:4px}.fb-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee);background:color-mix(in srgb,var(--fb-accent, #2f6feb) 7%,transparent);font-size:11px}.fb-banner--warn{background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-banner--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 10%,transparent);color:var(--fb-error, #c9372c)}.fb-banner>span{flex:1;min-width:200px}.fb-copy__field{display:flex;align-items:center;gap:6px}.fb-copy__caption{color:var(--fb-text-muted, #667085);white-space:nowrap}.fb-copy__input{width:180px;padding:2px 5px;border:1px solid var(--fb-border, #d6dae1);border-radius:4px;background:var(--fb-surface, #fff);color:var(--fb-text, #1d2939);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.fb-copy__hint{flex:1;min-width:180px;color:var(--fb-text-muted, #667085)}.fb-copy__hint--error{color:var(--fb-error, #c9372c)}.fb-main{display:flex;flex:1;min-height:0}.fb-main__palette{flex:0 0 190px;min-width:0}.fb-main__center{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0}.fb-main__canvas{flex:1;min-height:0}.fb-main__problems{flex:0 0 auto;height:220px}.fb-main__problems-toggle{display:flex;align-items:center;gap:6px;padding:4px 12px;border:0;border-top:1px solid var(--fb-border, #d6dae1);background:var(--fb-surface-alt, #f8f9fb);color:var(--fb-text-muted, #667085);font:inherit;font-size:11px;cursor:pointer}.fb-main__count{padding:0 5px;border-radius:8px;background:var(--fb-border, #d6dae1);font-size:9px;font-weight:700}.fb-main__count--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 16%,transparent);color:var(--fb-error, #c9372c)}.fb-main__count--warn{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-main__side{display:flex;flex-direction:column;flex:0 0 340px;min-width:0;min-height:0;border-left:1px solid var(--fb-border, #d6dae1);background:var(--fb-surface, #fff)}.fb-side__tabs{display:flex;gap:2px;margin:8px 10px;padding:3px;border-radius:var(--fb-radius, 10px);background:var(--fb-surface-sunken, #eef0f4)}.fb-side__tab{flex:1;padding:5px 8px;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-muted, #6b7086);font:inherit;font-size:11px;cursor:pointer;transition:background .12s ease,color .12s ease}.fb-side__tab-dot{display:inline-block;width:6px;height:6px;margin-left:4px;border-radius:50%;background:var(--fb-accent, #2f6feb);vertical-align:middle}.fb-side__tab:hover:not(.fb-side__tab--active){color:var(--fb-text, #1a1c23)}.fb-side__tab--active{background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));color:var(--fb-text, #1a1c23);font-weight:600}.fb-side__content{flex:1;min-height:0;border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-side__content>*{height:100%}.fb-side__footer{display:flex;gap:6px;padding:6px 8px;border-top:1px solid var(--fb-border-subtle, #e6e9ee)}@media(max-width:1200px){.fb-main__palette{flex-basis:150px}.fb-main__side{flex-basis:290px}}\n"], dependencies: [{ kind: "component", type: DebugPanelComponent, selector: "fb-debug-panel", inputs: ["outcome", "wasDebug", "isRunning"], outputs: ["closed", "elementFocused", "cleared"] }, { kind: "component", type: ElementDialogComponent, selector: "fb-element-dialog", inputs: ["selectedName", "initialFieldPath"], outputs: ["closed", "removeRequested", "duplicateRequested", "renamed"] }, { kind: "component", type: ElementInspectorComponent, selector: "fb-element-inspector", inputs: ["selectedName", "showHeader", "initialFieldPath"], outputs: ["closed", "removeRequested", "duplicateRequested", "renamed"] }, { kind: "component", type: ElementPaletteComponent, selector: "fb-element-palette", inputs: ["processType"], outputs: ["elementPicked"] }, { kind: "component", type: FlowCanvasComponent, selector: "fb-flow-canvas", inputs: ["selectedName", "selectedGroupName", "selectedNames", "outline", "isEditable"], outputs: ["selectionChange", "nodeOpened", "nodeRemoveRequested", "nodeDuplicateRequested", "groupSelected", "groupRemoveRequested", "elementDropped"] }, { kind: "component", type: FlowSearchComponent, selector: "fb-flow-search", outputs: ["picked"] }, { kind: "component", type: GroupPanelComponent, selector: "fb-group-panel", inputs: ["isEditable", "selectedNodeNames", "target"], outputs: ["closed", "createRequested", "memberFocused"] }, { kind: "component", type: PasteDialogComponent, selector: "fb-paste-dialog", inputs: ["payload", "plan"], outputs: ["confirmed", "cancelled"] }, { kind: "component", type: ProblemsPanelComponent, selector: "fb-problems-panel", outputs: ["elementFocused", "elementOpened", "closed"] }, { kind: "component", type: ResourceDialogComponent, selector: "fb-resource-dialog", inputs: ["edit"], outputs: ["closed"] }, { kind: "component", type: ResourcePanelComponent, selector: "fb-resource-panel", inputs: ["target", "editing"], outputs: ["closed", "editRequested"] }, { kind: "component", type: RunDialogComponent, selector: "fb-run-dialog", inputs: ["mode", "flowName", "version", "isDirty", "isBusy"], outputs: ["confirmed", "cancelled"] }, { kind: "component", type: VersionPanelComponent, selector: "fb-version-panel", outputs: ["closed", "versionOpened", "notice"] }, { kind: "directive", type: SelectValueDirective, selector: "select[fbValue]", inputs: ["fbValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "canvas", first: true, predicate: FlowCanvasComponent, descendants: true, isSignal: true }, { propertyName: "search", first: true, predicate: FlowSearchComponent, descendants: true, isSignal: true }, { propertyName: "copyNameInput", first: true, predicate: ["copyNameInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fb-builder\" [attr.data-fb-theme]=\"null\">\r\n  <header class=\"fb-top\">\r\n    <div class=\"fb-top__identity\">\r\n      <input\r\n        class=\"fb-top__label\"\r\n        [value]=\"document().label || ''\"\r\n        placeholder=\"Nome del flow\"\r\n        aria-label=\"Nome del flow\"\r\n        [disabled]=\"!isEditable()\"\r\n        (input)=\"setLabel($any($event.target).value)\"\r\n      />\r\n      <div class=\"fb-top__meta\">\r\n        <input\r\n          class=\"fb-top__name\"\r\n          [value]=\"document().fullName || ''\"\r\n          placeholder=\"NomeTecnico\"\r\n          aria-label=\"Nome tecnico del flow\"\r\n          [disabled]=\"!isEditable()\"\r\n          (input)=\"setFullName($any($event.target).value)\"\r\n        />\r\n        <!--\r\n          Il tipo di flow si sceglie **alla creazione** e poi non si tocca pi\u00F9: decide quali\r\n          globali esistono (\u00A74.1), quali elementi sono ammessi e come il motore esegue il flow,\r\n          e cambiarlo su un documento gi\u00E0 scritto lo lascia pieno di riferimenti che non\r\n          esistono. Su un flow salvato resta quindi un\u2019etichetta, non un comando.\r\n        -->\r\n        @if (session.isNew()) {\r\n          <select\r\n            class=\"fb-top__process\"\r\n            [fbValue]=\"document().processType || ''\"\r\n            aria-label=\"Tipo di flow\"\r\n            [disabled]=\"!isEditable()\"\r\n            (change)=\"setProcessType($any($event.target).value)\"\r\n          >\r\n            <!--\r\n              Il segnaposto esiste perche' un `<select>` senza opzione corrispondente non e'\r\n              \u00ABvuoto\u00BB: e' a `selectedIndex = -1`, e mostra una casella bianca. Su un flow nuovo\r\n              (`processType` non ancora scelto) e' questa la riga che si vede, disabilitata\r\n              perche' non e' un valore valido da salvare.\r\n            -->\r\n            @if (!document().processType) {\r\n              <option value=\"\" disabled>\u2014 tipo di flow \u2014</option>\r\n            }\r\n            @for (type of processTypes(); track type.value) {\r\n              <option [value]=\"type.value\">{{ type.label }}</option>\r\n            }\r\n            <!--\r\n              Il tipo del documento che il dizionario non conosce: senza questa opzione la select\r\n              resta bianca su un flow che il backend ha salvato con un `processType` fuori\r\n              catalogo (o quando `processTypes` manca dalla risposta dei dizionari), e sembra che\r\n              l'editor non abbia ricaricato il flow. Va mostrato **senza** riscrivere il\r\n              documento: il valore e' del backend, non nostro da correggere.\r\n            -->\r\n            @if (isProcessTypeOutOfCatalog()) {\r\n              <option [value]=\"document().processType\">{{ document().processType }} (fuori catalogo)</option>\r\n            }\r\n          </select>\r\n        } @else {\r\n          <span class=\"fb-top__process fb-top__process--fixed\" title=\"Il tipo di flow si sceglie alla creazione\">\r\n            {{ processTypeLabel() }}\r\n          </span>\r\n        }\r\n        <span class=\"fb-top__status\">{{ statusLabel() }}</span>\r\n        @if (session.version() != null) {\r\n          <span class=\"fb-top__version\">v{{ session.version() }}</span>\r\n        }\r\n        @if (isDirty()) {\r\n          <span class=\"fb-top__dirty\" title=\"Ci sono modifiche non salvate\">modificato</span>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <!--\r\n      La ricerca **nel documento**: e\u2019 l\u2019unico modo di arrivare a un elemento su un flow che non\r\n      sta in una schermata. Non e\u2019 la casella della palette, che filtra i tipi da aggiungere.\r\n    -->\r\n    <fb-flow-search (picked)=\"onSearchPicked($event)\" />\r\n\r\n    <div class=\"fb-top__actions\">\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"!canUndo()\" aria-label=\"Annulla\" (click)=\"undo()\">\u21B6</button>\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"!canRedo()\" aria-label=\"Ripeti\" (click)=\"redo()\">\u21B7</button>\r\n      <button type=\"button\" class=\"fb-btn\" title=\"Ricalcola le posizioni\" (click)=\"autoLayout()\">Riordina</button>\r\n      <!--\r\n        Un riquadro e\u2019 un commento sul canvas (\u00A73.6): non viene eseguito, quindi il comando sta\r\n        qui accanto a \u00ABRiordina\u00BB e non nella palette degli elementi. Nasce attorno a cio\u2019 che e\u2019\r\n        selezionato, che e\u2019 il gesto per cui serve.\r\n      -->\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"!isEditable()\"\r\n        [title]=\"\r\n          canCopy()\r\n            ? 'Racchiudi gli elementi selezionati in un riquadro di commento'\r\n            : 'Crea un riquadro di commento vuoto: non cambia il comportamento del flow'\r\n        \"\r\n        aria-label=\"Nuovo riquadro di raggruppamento\"\r\n        (click)=\"createGroup()\"\r\n      >\r\n        \u2B1A\r\n      </button>\r\n\r\n      <!--\r\n        Copia e incolla stanno **anche** qui e non solo sui tasti: una scorciatoia che nessuno\r\n        annuncia non esiste. Il titolo la dice, cos\u00EC si impara usandola una volta.\r\n        L\u2019incolla e\u2019 acceso anche con la selezione vuota: cio\u2019 che si incolla sta negli appunti,\r\n        e puo\u2019 venire da un altro flow.\r\n      -->\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"!canCopy()\"\r\n        title=\"Copia gli elementi selezionati, con le risorse che usano (Ctrl+C)\"\r\n        aria-label=\"Copia gli elementi selezionati\"\r\n        (click)=\"copySelection()\"\r\n      >\r\n        \u29C9\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"!canPaste() || !isEditable()\"\r\n        title=\"Incolla gli elementi copiati, anche da un altro flow (Ctrl+V)\"\r\n        aria-label=\"Incolla gli elementi copiati\"\r\n        (click)=\"startPaste()\"\r\n      >\r\n        \u2398\r\n      </button>\r\n      @if (isDialogMode()) {\r\n        <!-- Il doppio click sul node fa la stessa cosa, ma non si vede: questo comando s\u00EC. -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-btn\"\r\n          [disabled]=\"!selectedName()\"\r\n          title=\"Apri il dettaglio dell\u2019elemento selezionato\"\r\n          (click)=\"openSelectedElement()\"\r\n        >\r\n          Dettaglio\r\n        </button>\r\n      }\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"isBusy()\" (click)=\"validateNow()\">Valida</button>\r\n\r\n      <!--\r\n        Esegui e Debug non eseguono niente qui dentro: raccolgono i valori di ingresso e li\r\n        consegnano all\u2019applicazione ospite. Si esegue la versione **salvata**, quindi su un flow\r\n        mai scritto sono spenti e il titolo dice perche\u2019.\r\n      -->\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"!canRun()\"\r\n        [title]=\"canRun() ? 'Esegui il flow salvato' : 'Salva il flow prima di eseguirlo'\"\r\n        (click)=\"openRun('run')\"\r\n      >\r\n        Esegui\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"!canRun()\"\r\n        [title]=\"canRun() ? 'Esegui il flow salvato in debug' : 'Salva il flow prima di eseguirlo'\"\r\n        (click)=\"openRun('debug')\"\r\n      >\r\n        Debug\r\n      </button>\r\n\r\n      @switch (primaryCommand()) {\r\n        @case ('newVersion') {\r\n          <!-- Su una versione non modificabile il comando primario e' \"Nuova versione\" (\u00A78.1). -->\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"createNewVersion()\">\r\n            Nuova versione\r\n          </button>\r\n        }\r\n        @case ('create') {\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"save()\">\r\n            Crea\r\n          </button>\r\n        }\r\n        @default {\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"save()\">\r\n            Salva\r\n          </button>\r\n        }\r\n      }\r\n\r\n      @if (canDuplicate()) {\r\n        <!-- \u00A76.2 \u00ABDuplica\u00BB: il flow sotto un altro nome, alla versione 1. -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-btn\"\r\n          [disabled]=\"isBusy()\"\r\n          title=\"Salva una copia con un altro nome\"\r\n          (click)=\"startCopy()\"\r\n        >\r\n          Duplica\u2026\r\n        </button>\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"isBusy() || !canActivate()\"\r\n        [title]=\"\r\n          canActivate()\r\n            ? 'Attiva questa versione'\r\n            : 'L\u2019attivazione esige zero errori: correggili nel pannello dei problemi'\r\n        \"\r\n        (click)=\"activate()\"\r\n      >\r\n        Attiva\r\n      </button>\r\n    </div>\r\n  </header>\r\n\r\n  @if (conflict()) {\r\n    <!-- \u00A79.3: qualcun altro ha salvato. Due strade, entrambe offerte. -->\r\n    <div class=\"fb-banner fb-banner--warn\" role=\"alert\">\r\n      <span>\r\n        {{ conflict()?.message }}\r\n        @if (conflict()?.conflictingAuthor) {\r\n          Ha salvato {{ conflict()?.conflictingAuthor }}.\r\n        }\r\n      </span>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--icon\" (click)=\"reloadAfterConflict()\">Ricarica</button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--icon\" (click)=\"saveAsNewVersionAfterConflict()\">\r\n        Salva come nuova versione\r\n      </button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" (click)=\"dismissConflict()\">\u00D7</button>\r\n    </div>\r\n  }\r\n\r\n  @if (isCopyOpen()) {\r\n    <!--\r\n      Il nome si chiede prima di scrivere: e\u2019 l\u2019unico dato che il backend non puo\u2019 inventare, e\r\n      un doppione lo rifiuta con AlreadyExists (\u00A76.2). Invio conferma, Esc annulla.\r\n    -->\r\n    <div class=\"fb-banner fb-copy\" role=\"group\" aria-label=\"Duplica il flow\">\r\n      <label class=\"fb-copy__field\">\r\n        <span class=\"fb-copy__caption\">Nome tecnico della copia</span>\r\n        <input\r\n          #copyNameInput\r\n          class=\"fb-copy__input\"\r\n          [value]=\"copyName()\"\r\n          placeholder=\"NomeTecnico_Copia\"\r\n          (input)=\"setCopyName($any($event.target).value)\"\r\n          (keydown.enter)=\"confirmCopy()\"\r\n          (keydown.escape)=\"cancelCopy()\"\r\n        />\r\n      </label>\r\n      <label class=\"fb-copy__field\">\r\n        <span class=\"fb-copy__caption\">Nome visibile</span>\r\n        <input\r\n          class=\"fb-copy__input\"\r\n          [value]=\"copyLabel()\"\r\n          placeholder=\"(facoltativo)\"\r\n          (input)=\"setCopyLabel($any($event.target).value)\"\r\n          (keydown.enter)=\"confirmCopy()\"\r\n          (keydown.escape)=\"cancelCopy()\"\r\n        />\r\n      </label>\r\n      <span class=\"fb-copy__hint\" [class.fb-copy__hint--error]=\"!!copyNameProblem()\">\r\n        {{ copyNameProblem() || copyHint() }}\r\n      </span>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn fb-btn--primary fb-btn--icon\"\r\n        [disabled]=\"isBusy() || !!copyNameProblem()\"\r\n        (click)=\"confirmCopy()\"\r\n      >\r\n        Duplica\r\n      </button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" (click)=\"cancelCopy()\">Annulla</button>\r\n    </div>\r\n  }\r\n\r\n  @if (notice()) {\r\n    <div\r\n      class=\"fb-banner\"\r\n      [class.fb-banner--error]=\"notice()?.kind === 'error'\"\r\n      role=\"status\"\r\n    >\r\n      <span>{{ notice()?.message }}</span>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" aria-label=\"Chiudi\" (click)=\"dismissNotice()\">\r\n        \u00D7\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (hasScreensInAutoLaunched()) {\r\n    <div class=\"fb-banner fb-banner--error\">\r\n      Un flow AutoLaunched che contiene screen e\u2019 un errore di validazione: non c\u2019e\u2019 nessuno a cui mostrarli.\r\n    </div>\r\n  }\r\n  @if (isOrchestrationWithoutStages()) {\r\n    <div class=\"fb-banner fb-banner--warn\">\r\n      Un flow Orchestration senza stage di orchestrazione viene segnalato dalla validazione\r\n      (ORCHESTRATION_WITHOUT_STAGES).\r\n    </div>\r\n  }\r\n  @if (hasNoScreensInScreenFlow()) {\r\n    <div class=\"fb-banner fb-banner--warn\">\r\n      Un flow di tipo Screen senza nessuno screen viene segnalato dalla validazione.\r\n    </div>\r\n  }\r\n  @if (!isEditable()) {\r\n    <div class=\"fb-banner\">\r\n      Questa versione e\u2019 in sola lettura: per modificarla creane una nuova.\r\n    </div>\r\n  }\r\n\r\n  <div class=\"fb-main\">\r\n    <aside class=\"fb-main__palette\">\r\n      <fb-element-palette [processType]=\"document().processType\" (elementPicked)=\"onElementPicked($event)\" />\r\n    </aside>\r\n\r\n    <div class=\"fb-main__center\">\r\n      <fb-flow-canvas\r\n        class=\"fb-main__canvas\"\r\n        [selectedName]=\"selectedName()\"\r\n        [selectedNames]=\"selectedNames()\"\r\n        [selectedGroupName]=\"selectedGroupName()\"\r\n        [outline]=\"outline()\"\r\n        [isEditable]=\"isEditable()\"\r\n        (selectionChange)=\"onSelectionChange($event)\"\r\n        (nodeOpened)=\"onNodeOpened($event)\"\r\n        (nodeRemoveRequested)=\"onRemoveNode($event)\"\r\n        (nodeDuplicateRequested)=\"onDuplicateNode($event)\"\r\n        (elementDropped)=\"onElementDropped($event)\"\r\n        (groupSelected)=\"onGroupSelected($event)\"\r\n        (groupRemoveRequested)=\"onGroupRemoved($event)\"\r\n      />\r\n\r\n      @if (showProblems()) {\r\n        <fb-problems-panel\r\n          class=\"fb-main__problems\"\r\n          (elementFocused)=\"revealIssueElement($event)\"\r\n          (elementOpened)=\"openIssueElement($event)\"\r\n          (closed)=\"toggleProblems()\"\r\n        />\r\n      } @else {\r\n        <button type=\"button\" class=\"fb-main__problems-toggle\" (click)=\"toggleProblems()\">\r\n          Problemi\r\n          @if (errorCount()) {\r\n            <span class=\"fb-main__count fb-main__count--error\">{{ errorCount() }}</span>\r\n          }\r\n          @if (warningCount()) {\r\n            <span class=\"fb-main__count fb-main__count--warn\">{{ warningCount() }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <aside class=\"fb-main__side\">\r\n      <nav class=\"fb-side__tabs\" aria-label=\"Pannelli\">\r\n        @if (!isDialogMode()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fb-side__tab\"\r\n            [class.fb-side__tab--active]=\"sidePanel() === 'inspector'\"\r\n            (click)=\"setPanel('inspector')\"\r\n          >\r\n            Elemento\r\n          </button>\r\n        }\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'resources'\"\r\n          (click)=\"setPanel('resources')\"\r\n        >\r\n          Risorse\r\n        </button>\r\n        <!--\r\n          I riquadri (\u00A73.6). Il tab porta il conteggio perche\u2019 e\u2019 l\u2019unico modo di sapere che un\r\n          flow ne ha, quando sono chiusi o fuori dalla vista.\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'groups'\"\r\n          (click)=\"setPanel('groups')\"\r\n        >\r\n          Riquadri\r\n          @if (store.groups().length) {\r\n            <span class=\"fb-main__count\">{{ store.groups().length }}</span>\r\n          }\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'versions'\"\r\n          (click)=\"setPanel('versions')\"\r\n        >\r\n          Versioni\r\n        </button>\r\n        <!--\r\n          Il pannello dell\u2019ultima esecuzione. \u00C8 l\u2019unico posto in cui si vede la traccia di un\r\n          flow **senza schermate**: l\u00EC il runtime non apre nessuna interfaccia, e senza questo\r\n          tab non ci sarebbe niente da guardare.\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'debug'\"\r\n          (click)=\"setPanel('debug')\"\r\n        >\r\n          Debug\r\n          @if (isRunning()) {\r\n            <span class=\"fb-side__tab-dot\" aria-label=\"esecuzione in corso\"></span>\r\n          }\r\n        </button>\r\n      </nav>\r\n\r\n      <div class=\"fb-side__content\">\r\n        @switch (sidePanel()) {\r\n          @case ('inspector') {\r\n            <fb-element-inspector\r\n              [selectedName]=\"selectedName()\"\r\n              [initialFieldPath]=\"pendingFieldPath()\"\r\n              (removeRequested)=\"onRemoveNode($event)\"\r\n              (duplicateRequested)=\"onDuplicateNode($event)\"\r\n              (renamed)=\"onNodeRenamed($event)\"\r\n              (closed)=\"setPanel('resources')\"\r\n            />\r\n          }\r\n          @case ('resources') {\r\n            <fb-resource-panel\r\n              [target]=\"resourceTarget()\"\r\n              [editing]=\"editingResource()\"\r\n              (editRequested)=\"onResourceEditRequested($event)\"\r\n              (closed)=\"setPanel('inspector')\"\r\n            />\r\n          }\r\n          @case ('groups') {\r\n            <fb-group-panel\r\n              [isEditable]=\"isEditable()\"\r\n              [selectedNodeNames]=\"selectedNames()\"\r\n              [target]=\"groupTarget()\"\r\n              (createRequested)=\"createGroup()\"\r\n              (memberFocused)=\"focusMember($event)\"\r\n              (closed)=\"setPanel('resources')\"\r\n            />\r\n          }\r\n          @case ('versions') {\r\n            <fb-version-panel\r\n              (versionOpened)=\"openVersion($event)\"\r\n              (notice)=\"showNotice($event)\"\r\n              (closed)=\"setPanel('inspector')\"\r\n            />\r\n          }\r\n          @case ('debug') {\r\n            <!-- Evidenzia sul canvas senza rubare il pannello: la traccia si sta leggendo. -->\r\n            <fb-debug-panel\r\n              [outcome]=\"shownOutcome()\"\r\n              [wasDebug]=\"wasRunInDebug()\"\r\n              [isRunning]=\"isRunning()\"\r\n              (elementFocused)=\"highlightElement($event)\"\r\n              (cleared)=\"clearRunOutcome()\"\r\n              (closed)=\"setPanel('inspector')\"\r\n            />\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <footer class=\"fb-side__footer\">\r\n        <label class=\"fb-btn fb-btn--icon\">\r\n          Importa JSON\r\n          <input type=\"file\" accept=\"application/json,.json\" hidden (change)=\"onFileSelected($event)\" />\r\n        </label>\r\n      </footer>\r\n    </aside>\r\n  </div>\r\n\r\n  @if (pastePreview(); as preview) {\r\n    <!--\r\n      L\u2019incolla passa da una conferma perche\u2019 non e\u2019 mai una copia identica: nomi gi\u00E0 presi,\r\n      risorse che qui non esistono, riferimenti che restano orfani. Il piano e\u2019 gi\u00E0 calcolato,\r\n      la finestra lo mostra e basta.\r\n    -->\r\n    <fb-paste-dialog\r\n      [payload]=\"preview.payload\"\r\n      [plan]=\"preview.plan\"\r\n      (confirmed)=\"confirmPaste($event)\"\r\n      (cancelled)=\"cancelPaste()\"\r\n    />\r\n  }\r\n\r\n  @if (runMode(); as mode) {\r\n    <!--\r\n      La finestra degli ingressi. Non avvia niente e non chiama niente: raccoglie i valori e li\r\n      annuncia con `runRequested`, perche\u2019 l\u2019unico a sapere dove gira il motore e\u2019 l\u2019ospite.\r\n    -->\r\n    <fb-run-dialog\r\n      [mode]=\"mode\"\r\n      [flowName]=\"session.flowName()\"\r\n      [version]=\"session.version()\"\r\n      [isDirty]=\"isDirty()\"\r\n      [isBusy]=\"isRunning()\"\r\n      (confirmed)=\"confirmRun($event)\"\r\n      (cancelled)=\"closeRun()\"\r\n    />\r\n  }\r\n\r\n  @if (editingResource(); as edit) {\r\n    <!--\r\n      La finestra di una risorsa. Sta qui e non dentro il pannello per una ragione sola: nella\r\n      colonna laterale la ritaglierebbe lo scorrimento.\r\n    -->\r\n    <fb-resource-dialog [edit]=\"edit\" (closed)=\"onResourceEditRequested(null)\" />\r\n  }\r\n\r\n  @if (isDialogMode() && isDialogOpen() && selectedName()) {\r\n    <!-- La dialog sta dentro il builder, non nel body: la libreria e\u2019 innestabile. -->\r\n    <fb-element-dialog\r\n      [selectedName]=\"selectedName()\"\r\n      [initialFieldPath]=\"pendingFieldPath()\"\r\n      (closed)=\"closeDialog()\"\r\n      (removeRequested)=\"onRemoveNode($event)\"\r\n      (duplicateRequested)=\"onDuplicateNode($event)\"\r\n      (renamed)=\"onNodeRenamed($event)\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%;min-height:0;font:inherit;color:var(--fb-text, #1d2939)}.fb-builder{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;background:var(--fb-surface, #fff)}.fb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-bottom:1px solid var(--fb-border, #e2e5eb);background:var(--fb-surface, #fff)}.fb-top__identity{min-width:0}.fb-top__label{width:100%;max-width:420px;padding:2px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--fb-text, #1d2939);font:inherit;font-size:15px;font-weight:600}.fb-top__label:hover:not(:disabled),.fb-top__label:focus-visible{border-color:var(--fb-border, #d6dae1);background:var(--fb-surface, #fff)}.fb-top__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px}.fb-top__name{width:180px;padding:1px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--fb-text-muted, #667085);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.fb-top__name:hover:not(:disabled),.fb-top__name:focus-visible{border-color:var(--fb-border, #d6dae1)}.fb-top__process{padding:1px 4px;border:1px solid var(--fb-border-subtle, #e6e9ee);border-radius:4px;background:transparent;color:var(--fb-text-muted, #667085);font:inherit;font-size:11px}.fb-top__process--fixed{border-color:transparent;background:var(--fb-surface-sunken, #eef0f4);border-radius:999px;padding:2px 7px;font-weight:600}.fb-top__status,.fb-top__version,.fb-top__dirty{padding:2px 7px;border-radius:999px;background:var(--fb-surface-sunken, #eef0f4);color:var(--fb-text-muted, #6b7086);font-size:10px;font-weight:600}.fb-top__version{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.fb-top__dirty{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-top__actions{display:flex;flex-wrap:wrap;gap:4px}.fb-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee);background:color-mix(in srgb,var(--fb-accent, #2f6feb) 7%,transparent);font-size:11px}.fb-banner--warn{background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-banner--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 10%,transparent);color:var(--fb-error, #c9372c)}.fb-banner>span{flex:1;min-width:200px}.fb-copy__field{display:flex;align-items:center;gap:6px}.fb-copy__caption{color:var(--fb-text-muted, #667085);white-space:nowrap}.fb-copy__input{width:180px;padding:2px 5px;border:1px solid var(--fb-border, #d6dae1);border-radius:4px;background:var(--fb-surface, #fff);color:var(--fb-text, #1d2939);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.fb-copy__hint{flex:1;min-width:180px;color:var(--fb-text-muted, #667085)}.fb-copy__hint--error{color:var(--fb-error, #c9372c)}.fb-main{display:flex;flex:1;min-height:0}.fb-main__palette{flex:0 0 190px;min-width:0}.fb-main__center{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0}.fb-main__canvas{flex:1;min-height:0}.fb-main__problems{flex:0 0 auto;height:220px}.fb-main__problems-toggle{display:flex;align-items:center;gap:6px;padding:4px 12px;border:0;border-top:1px solid var(--fb-border, #d6dae1);background:var(--fb-surface-alt, #f8f9fb);color:var(--fb-text-muted, #667085);font:inherit;font-size:11px;cursor:pointer}.fb-main__count{padding:0 5px;border-radius:8px;background:var(--fb-border, #d6dae1);font-size:9px;font-weight:700}.fb-main__count--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 16%,transparent);color:var(--fb-error, #c9372c)}.fb-main__count--warn{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-main__side{display:flex;flex-direction:column;flex:0 0 340px;min-width:0;min-height:0;border-left:1px solid var(--fb-border, #d6dae1);background:var(--fb-surface, #fff)}.fb-side__tabs{display:flex;gap:2px;margin:8px 10px;padding:3px;border-radius:var(--fb-radius, 10px);background:var(--fb-surface-sunken, #eef0f4)}.fb-side__tab{flex:1;padding:5px 8px;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-muted, #6b7086);font:inherit;font-size:11px;cursor:pointer;transition:background .12s ease,color .12s ease}.fb-side__tab-dot{display:inline-block;width:6px;height:6px;margin-left:4px;border-radius:50%;background:var(--fb-accent, #2f6feb);vertical-align:middle}.fb-side__tab:hover:not(.fb-side__tab--active){color:var(--fb-text, #1a1c23)}.fb-side__tab--active{background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));color:var(--fb-text, #1a1c23);font-weight:600}.fb-side__content{flex:1;min-height:0;border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-side__content>*{height:100%}.fb-side__footer{display:flex;gap:6px;padding:6px 8px;border-top:1px solid var(--fb-border-subtle, #e6e9ee)}@media(max-width:1200px){.fb-main__palette{flex-basis:150px}.fb-main__side{flex-basis:290px}}\n"], dependencies: [{ kind: "component", type: DebugPanelComponent, selector: "fb-debug-panel", inputs: ["outcome", "wasDebug", "isRunning"], outputs: ["closed", "elementFocused", "cleared"] }, { kind: "component", type: ElementDialogComponent, selector: "fb-element-dialog", inputs: ["selectedName", "initialFieldPath"], outputs: ["closed", "removeRequested", "duplicateRequested", "renamed"] }, { kind: "component", type: ElementInspectorComponent, selector: "fb-element-inspector", inputs: ["selectedName", "showHeader", "initialFieldPath"], outputs: ["closed", "removeRequested", "duplicateRequested", "renamed"] }, { kind: "component", type: ElementPaletteComponent, selector: "fb-element-palette", inputs: ["processType"], outputs: ["elementPicked"] }, { kind: "component", type: FlowCanvasComponent, selector: "fb-flow-canvas", inputs: ["selectedName", "selectedGroupName", "selectedNames", "outline", "isEditable"], outputs: ["selectionChange", "nodeOpened", "nodeRemoveRequested", "nodeDuplicateRequested", "groupSelected", "groupRemoveRequested", "elementDropped"] }, { kind: "component", type: FlowSearchComponent, selector: "fb-flow-search", outputs: ["picked"] }, { kind: "component", type: GroupPanelComponent, selector: "fb-group-panel", inputs: ["isEditable", "selectedNodeNames", "target"], outputs: ["closed", "createRequested", "memberFocused"] }, { kind: "component", type: PasteDialogComponent, selector: "fb-paste-dialog", inputs: ["payload", "plan"], outputs: ["confirmed", "cancelled"] }, { kind: "component", type: ProblemsPanelComponent, selector: "fb-problems-panel", outputs: ["elementFocused", "elementOpened", "closed"] }, { kind: "component", type: ResourceDialogComponent, selector: "fb-resource-dialog", inputs: ["edit"], outputs: ["closed"] }, { kind: "component", type: ResourcePanelComponent, selector: "fb-resource-panel", inputs: ["target", "editing"], outputs: ["closed", "editRequested"] }, { kind: "component", type: RunDialogComponent, selector: "fb-run-dialog", inputs: ["mode", "flowName", "version", "isDirty", "isBusy"], outputs: ["confirmed", "cancelled"] }, { kind: "component", type: VersionPanelComponent, selector: "fb-version-panel", outputs: ["closed", "versionOpened", "notice"] }, { kind: "directive", type: SelectValueDirective, selector: "select[fbValue]", inputs: ["fbValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: FlowBuilderComponent, decorators: [{
             type: Component,
@@ -17864,7 +18122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImpo
                         FormulaValidationService,
                         FlowEditorSession,
                         FlowLayoutService,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { '(keydown)': 'onKeyDown($event)' }, template: "<div class=\"fb-builder\" [attr.data-fb-theme]=\"null\">\r\n  <header class=\"fb-top\">\r\n    <div class=\"fb-top__identity\">\r\n      <input\r\n        class=\"fb-top__label\"\r\n        [value]=\"document().label || ''\"\r\n        placeholder=\"Nome del flow\"\r\n        aria-label=\"Nome del flow\"\r\n        [disabled]=\"!isEditable()\"\r\n        (input)=\"setLabel($any($event.target).value)\"\r\n      />\r\n      <div class=\"fb-top__meta\">\r\n        <input\r\n          class=\"fb-top__name\"\r\n          [value]=\"document().fullName || ''\"\r\n          placeholder=\"NomeTecnico\"\r\n          aria-label=\"Nome tecnico del flow\"\r\n          [disabled]=\"!isEditable()\"\r\n          (input)=\"setFullName($any($event.target).value)\"\r\n        />\r\n        <select\r\n          class=\"fb-top__process\"\r\n          [fbValue]=\"document().processType || ''\"\r\n          aria-label=\"Tipo di flow\"\r\n          [disabled]=\"!isEditable()\"\r\n          (change)=\"setProcessType($any($event.target).value)\"\r\n        >\r\n          <!--\r\n            Il segnaposto esiste perche' un `<select>` senza opzione corrispondente non e'\r\n            \u00ABvuoto\u00BB: e' a `selectedIndex = -1`, e mostra una casella bianca. Su un flow nuovo\r\n            (`processType` non ancora scelto) e' questa la riga che si vede, disabilitata\r\n            perche' non e' un valore valido da salvare.\r\n          -->\r\n          @if (!document().processType) {\r\n            <option value=\"\" disabled>\u2014 tipo di flow \u2014</option>\r\n          }\r\n          @for (type of processTypes(); track type.value) {\r\n            <option [value]=\"type.value\">{{ type.label }}</option>\r\n          }\r\n          <!--\r\n            Il tipo del documento che il dizionario non conosce: senza questa opzione la select\r\n            resta bianca su un flow che il backend ha salvato con un `processType` fuori\r\n            catalogo (o quando `processTypes` manca dalla risposta dei dizionari), e sembra che\r\n            l'editor non abbia ricaricato il flow. Va mostrato **senza** riscrivere il\r\n            documento: il valore e' del backend, non nostro da correggere.\r\n          -->\r\n          @if (isProcessTypeOutOfCatalog()) {\r\n            <option [value]=\"document().processType\">{{ document().processType }} (fuori catalogo)</option>\r\n          }\r\n        </select>\r\n        <span class=\"fb-top__status\">{{ statusLabel() }}</span>\r\n        @if (session.version() != null) {\r\n          <span class=\"fb-top__version\">v{{ session.version() }}</span>\r\n        }\r\n        @if (isDirty()) {\r\n          <span class=\"fb-top__dirty\" title=\"Ci sono modifiche non salvate\">modificato</span>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <!--\r\n      La ricerca **nel documento**: e\u2019 l\u2019unico modo di arrivare a un elemento su un flow che non\r\n      sta in una schermata. Non e\u2019 la casella della palette, che filtra i tipi da aggiungere.\r\n    -->\r\n    <fb-flow-search (picked)=\"onSearchPicked($event)\" />\r\n\r\n    <div class=\"fb-top__actions\">\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"!canUndo()\" aria-label=\"Annulla\" (click)=\"undo()\">\u21B6</button>\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"!canRedo()\" aria-label=\"Ripeti\" (click)=\"redo()\">\u21B7</button>\r\n      <button type=\"button\" class=\"fb-btn\" title=\"Ricalcola le posizioni\" (click)=\"autoLayout()\">Riordina</button>\r\n      <!--\r\n        Un riquadro e\u2019 un commento sul canvas (\u00A73.6): non viene eseguito, quindi il comando sta\r\n        qui accanto a \u00ABRiordina\u00BB e non nella palette degli elementi. Nasce attorno a cio\u2019 che e\u2019\r\n        selezionato, che e\u2019 il gesto per cui serve.\r\n      -->\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"!isEditable()\"\r\n        [title]=\"\r\n          canCopy()\r\n            ? 'Racchiudi gli elementi selezionati in un riquadro di commento'\r\n            : 'Crea un riquadro di commento vuoto: non cambia il comportamento del flow'\r\n        \"\r\n        aria-label=\"Nuovo riquadro di raggruppamento\"\r\n        (click)=\"createGroup()\"\r\n      >\r\n        \u2B1A\r\n      </button>\r\n\r\n      <!--\r\n        Copia e incolla stanno **anche** qui e non solo sui tasti: una scorciatoia che nessuno\r\n        annuncia non esiste. Il titolo la dice, cos\u00EC si impara usandola una volta.\r\n        L\u2019incolla e\u2019 acceso anche con la selezione vuota: cio\u2019 che si incolla sta negli appunti,\r\n        e puo\u2019 venire da un altro flow.\r\n      -->\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"!canCopy()\"\r\n        title=\"Copia gli elementi selezionati, con le risorse che usano (Ctrl+C)\"\r\n        aria-label=\"Copia gli elementi selezionati\"\r\n        (click)=\"copySelection()\"\r\n      >\r\n        \u29C9\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"!canPaste() || !isEditable()\"\r\n        title=\"Incolla gli elementi copiati, anche da un altro flow (Ctrl+V)\"\r\n        aria-label=\"Incolla gli elementi copiati\"\r\n        (click)=\"startPaste()\"\r\n      >\r\n        \u2398\r\n      </button>\r\n      @if (isDialogMode()) {\r\n        <!-- Il doppio click sul node fa la stessa cosa, ma non si vede: questo comando s\u00EC. -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-btn\"\r\n          [disabled]=\"!selectedName()\"\r\n          title=\"Apri il dettaglio dell\u2019elemento selezionato\"\r\n          (click)=\"openSelectedElement()\"\r\n        >\r\n          Dettaglio\r\n        </button>\r\n      }\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"isBusy()\" (click)=\"validateNow()\">Valida</button>\r\n\r\n      <!--\r\n        Esegui e Debug non eseguono niente qui dentro: raccolgono i valori di ingresso e li\r\n        consegnano all\u2019applicazione ospite. Si esegue la versione **salvata**, quindi su un flow\r\n        mai scritto sono spenti e il titolo dice perche\u2019.\r\n      -->\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"!canRun()\"\r\n        [title]=\"canRun() ? 'Esegui il flow salvato' : 'Salva il flow prima di eseguirlo'\"\r\n        (click)=\"openRun('run')\"\r\n      >\r\n        Esegui\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"!canRun()\"\r\n        [title]=\"canRun() ? 'Esegui il flow salvato in debug' : 'Salva il flow prima di eseguirlo'\"\r\n        (click)=\"openRun('debug')\"\r\n      >\r\n        Debug\r\n      </button>\r\n\r\n      @switch (primaryCommand()) {\r\n        @case ('newVersion') {\r\n          <!-- Su una versione non modificabile il comando primario e' \"Nuova versione\" (\u00A78.1). -->\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"createNewVersion()\">\r\n            Nuova versione\r\n          </button>\r\n        }\r\n        @case ('create') {\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"save()\">\r\n            Crea\r\n          </button>\r\n        }\r\n        @default {\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"save()\">\r\n            Salva\r\n          </button>\r\n        }\r\n      }\r\n\r\n      @if (canDuplicate()) {\r\n        <!-- \u00A76.2 \u00ABDuplica\u00BB: il flow sotto un altro nome, alla versione 1. -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-btn\"\r\n          [disabled]=\"isBusy()\"\r\n          title=\"Salva una copia con un altro nome\"\r\n          (click)=\"startCopy()\"\r\n        >\r\n          Duplica\u2026\r\n        </button>\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"isBusy() || !canActivate()\"\r\n        [title]=\"\r\n          canActivate()\r\n            ? 'Attiva questa versione'\r\n            : 'L\u2019attivazione esige zero errori: correggili nel pannello dei problemi'\r\n        \"\r\n        (click)=\"activate()\"\r\n      >\r\n        Attiva\r\n      </button>\r\n    </div>\r\n  </header>\r\n\r\n  @if (conflict()) {\r\n    <!-- \u00A79.3: qualcun altro ha salvato. Due strade, entrambe offerte. -->\r\n    <div class=\"fb-banner fb-banner--warn\" role=\"alert\">\r\n      <span>\r\n        {{ conflict()?.message }}\r\n        @if (conflict()?.conflictingAuthor) {\r\n          Ha salvato {{ conflict()?.conflictingAuthor }}.\r\n        }\r\n      </span>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--icon\" (click)=\"reloadAfterConflict()\">Ricarica</button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--icon\" (click)=\"saveAsNewVersionAfterConflict()\">\r\n        Salva come nuova versione\r\n      </button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" (click)=\"dismissConflict()\">\u00D7</button>\r\n    </div>\r\n  }\r\n\r\n  @if (isCopyOpen()) {\r\n    <!--\r\n      Il nome si chiede prima di scrivere: e\u2019 l\u2019unico dato che il backend non puo\u2019 inventare, e\r\n      un doppione lo rifiuta con AlreadyExists (\u00A76.2). Invio conferma, Esc annulla.\r\n    -->\r\n    <div class=\"fb-banner fb-copy\" role=\"group\" aria-label=\"Duplica il flow\">\r\n      <label class=\"fb-copy__field\">\r\n        <span class=\"fb-copy__caption\">Nome tecnico della copia</span>\r\n        <input\r\n          #copyNameInput\r\n          class=\"fb-copy__input\"\r\n          [value]=\"copyName()\"\r\n          placeholder=\"NomeTecnico_Copia\"\r\n          (input)=\"setCopyName($any($event.target).value)\"\r\n          (keydown.enter)=\"confirmCopy()\"\r\n          (keydown.escape)=\"cancelCopy()\"\r\n        />\r\n      </label>\r\n      <label class=\"fb-copy__field\">\r\n        <span class=\"fb-copy__caption\">Nome visibile</span>\r\n        <input\r\n          class=\"fb-copy__input\"\r\n          [value]=\"copyLabel()\"\r\n          placeholder=\"(facoltativo)\"\r\n          (input)=\"setCopyLabel($any($event.target).value)\"\r\n          (keydown.enter)=\"confirmCopy()\"\r\n          (keydown.escape)=\"cancelCopy()\"\r\n        />\r\n      </label>\r\n      <span class=\"fb-copy__hint\" [class.fb-copy__hint--error]=\"!!copyNameProblem()\">\r\n        {{ copyNameProblem() || copyHint() }}\r\n      </span>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn fb-btn--primary fb-btn--icon\"\r\n        [disabled]=\"isBusy() || !!copyNameProblem()\"\r\n        (click)=\"confirmCopy()\"\r\n      >\r\n        Duplica\r\n      </button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" (click)=\"cancelCopy()\">Annulla</button>\r\n    </div>\r\n  }\r\n\r\n  @if (notice()) {\r\n    <div\r\n      class=\"fb-banner\"\r\n      [class.fb-banner--error]=\"notice()?.kind === 'error'\"\r\n      role=\"status\"\r\n    >\r\n      <span>{{ notice()?.message }}</span>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" aria-label=\"Chiudi\" (click)=\"dismissNotice()\">\r\n        \u00D7\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (hasScreensInAutoLaunched()) {\r\n    <div class=\"fb-banner fb-banner--error\">\r\n      Un flow AutoLaunched che contiene screen e\u2019 un errore di validazione: non c\u2019e\u2019 nessuno a cui mostrarli.\r\n    </div>\r\n  }\r\n  @if (isOrchestrationWithoutStages()) {\r\n    <div class=\"fb-banner fb-banner--warn\">\r\n      Un flow Orchestration senza stage di orchestrazione viene segnalato dalla validazione\r\n      (ORCHESTRATION_WITHOUT_STAGES).\r\n    </div>\r\n  }\r\n  @if (hasNoScreensInScreenFlow()) {\r\n    <div class=\"fb-banner fb-banner--warn\">\r\n      Un flow di tipo Screen senza nessuno screen viene segnalato dalla validazione.\r\n    </div>\r\n  }\r\n  @if (!isEditable()) {\r\n    <div class=\"fb-banner\">\r\n      Questa versione e\u2019 in sola lettura: per modificarla creane una nuova.\r\n    </div>\r\n  }\r\n\r\n  <div class=\"fb-main\">\r\n    <aside class=\"fb-main__palette\">\r\n      <fb-element-palette [processType]=\"document().processType\" (elementPicked)=\"onElementPicked($event)\" />\r\n    </aside>\r\n\r\n    <div class=\"fb-main__center\">\r\n      <fb-flow-canvas\r\n        class=\"fb-main__canvas\"\r\n        [selectedName]=\"selectedName()\"\r\n        [selectedNames]=\"selectedNames()\"\r\n        [selectedGroupName]=\"selectedGroupName()\"\r\n        [outline]=\"outline()\"\r\n        [isEditable]=\"isEditable()\"\r\n        (selectionChange)=\"onSelectionChange($event)\"\r\n        (nodeOpened)=\"onNodeOpened($event)\"\r\n        (nodeRemoveRequested)=\"onRemoveNode($event)\"\r\n        (nodeDuplicateRequested)=\"onDuplicateNode($event)\"\r\n        (elementDropped)=\"onElementDropped($event)\"\r\n        (groupSelected)=\"onGroupSelected($event)\"\r\n        (groupRemoveRequested)=\"onGroupRemoved($event)\"\r\n      />\r\n\r\n      @if (showProblems()) {\r\n        <fb-problems-panel\r\n          class=\"fb-main__problems\"\r\n          (elementFocused)=\"revealIssueElement($event)\"\r\n          (elementOpened)=\"openIssueElement($event)\"\r\n          (closed)=\"toggleProblems()\"\r\n        />\r\n      } @else {\r\n        <button type=\"button\" class=\"fb-main__problems-toggle\" (click)=\"toggleProblems()\">\r\n          Problemi\r\n          @if (errorCount()) {\r\n            <span class=\"fb-main__count fb-main__count--error\">{{ errorCount() }}</span>\r\n          }\r\n          @if (warningCount()) {\r\n            <span class=\"fb-main__count fb-main__count--warn\">{{ warningCount() }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <aside class=\"fb-main__side\">\r\n      <nav class=\"fb-side__tabs\" aria-label=\"Pannelli\">\r\n        @if (!isDialogMode()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fb-side__tab\"\r\n            [class.fb-side__tab--active]=\"sidePanel() === 'inspector'\"\r\n            (click)=\"setPanel('inspector')\"\r\n          >\r\n            Elemento\r\n          </button>\r\n        }\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'resources'\"\r\n          (click)=\"setPanel('resources')\"\r\n        >\r\n          Risorse\r\n        </button>\r\n        <!--\r\n          I riquadri (\u00A73.6). Il tab porta il conteggio perche\u2019 e\u2019 l\u2019unico modo di sapere che un\r\n          flow ne ha, quando sono chiusi o fuori dalla vista.\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'groups'\"\r\n          (click)=\"setPanel('groups')\"\r\n        >\r\n          Riquadri\r\n          @if (store.groups().length) {\r\n            <span class=\"fb-main__count\">{{ store.groups().length }}</span>\r\n          }\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'versions'\"\r\n          (click)=\"setPanel('versions')\"\r\n        >\r\n          Versioni\r\n        </button>\r\n        <!--\r\n          Il pannello dell\u2019ultima esecuzione. \u00C8 l\u2019unico posto in cui si vede la traccia di un\r\n          flow **senza schermate**: l\u00EC il runtime non apre nessuna interfaccia, e senza questo\r\n          tab non ci sarebbe niente da guardare.\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'debug'\"\r\n          (click)=\"setPanel('debug')\"\r\n        >\r\n          Debug\r\n          @if (isRunning()) {\r\n            <span class=\"fb-side__tab-dot\" aria-label=\"esecuzione in corso\"></span>\r\n          }\r\n        </button>\r\n      </nav>\r\n\r\n      <div class=\"fb-side__content\">\r\n        @switch (sidePanel()) {\r\n          @case ('inspector') {\r\n            <fb-element-inspector\r\n              [selectedName]=\"selectedName()\"\r\n              [initialFieldPath]=\"pendingFieldPath()\"\r\n              (removeRequested)=\"onRemoveNode($event)\"\r\n              (duplicateRequested)=\"onDuplicateNode($event)\"\r\n              (renamed)=\"onNodeRenamed($event)\"\r\n              (closed)=\"setPanel('resources')\"\r\n            />\r\n          }\r\n          @case ('resources') {\r\n            <fb-resource-panel\r\n              [target]=\"resourceTarget()\"\r\n              [editing]=\"editingResource()\"\r\n              (editRequested)=\"onResourceEditRequested($event)\"\r\n              (closed)=\"setPanel('inspector')\"\r\n            />\r\n          }\r\n          @case ('groups') {\r\n            <fb-group-panel\r\n              [isEditable]=\"isEditable()\"\r\n              [selectedNodeNames]=\"selectedNames()\"\r\n              [target]=\"groupTarget()\"\r\n              (createRequested)=\"createGroup()\"\r\n              (memberFocused)=\"focusMember($event)\"\r\n              (closed)=\"setPanel('resources')\"\r\n            />\r\n          }\r\n          @case ('versions') {\r\n            <fb-version-panel\r\n              (versionOpened)=\"openVersion($event)\"\r\n              (notice)=\"showNotice($event)\"\r\n              (closed)=\"setPanel('inspector')\"\r\n            />\r\n          }\r\n          @case ('debug') {\r\n            <!-- Evidenzia sul canvas senza rubare il pannello: la traccia si sta leggendo. -->\r\n            <fb-debug-panel\r\n              [outcome]=\"shownOutcome()\"\r\n              [wasDebug]=\"wasRunInDebug()\"\r\n              [isRunning]=\"isRunning()\"\r\n              (elementFocused)=\"highlightElement($event)\"\r\n              (cleared)=\"clearRunOutcome()\"\r\n              (closed)=\"setPanel('inspector')\"\r\n            />\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <footer class=\"fb-side__footer\">\r\n        <label class=\"fb-btn fb-btn--icon\">\r\n          Importa JSON\r\n          <input type=\"file\" accept=\"application/json,.json\" hidden (change)=\"onFileSelected($event)\" />\r\n        </label>\r\n      </footer>\r\n    </aside>\r\n  </div>\r\n\r\n  @if (pastePreview(); as preview) {\r\n    <!--\r\n      L\u2019incolla passa da una conferma perche\u2019 non e\u2019 mai una copia identica: nomi gi\u00E0 presi,\r\n      risorse che qui non esistono, riferimenti che restano orfani. Il piano e\u2019 gi\u00E0 calcolato,\r\n      la finestra lo mostra e basta.\r\n    -->\r\n    <fb-paste-dialog\r\n      [payload]=\"preview.payload\"\r\n      [plan]=\"preview.plan\"\r\n      (confirmed)=\"confirmPaste($event)\"\r\n      (cancelled)=\"cancelPaste()\"\r\n    />\r\n  }\r\n\r\n  @if (runMode(); as mode) {\r\n    <!--\r\n      La finestra degli ingressi. Non avvia niente e non chiama niente: raccoglie i valori e li\r\n      annuncia con `runRequested`, perche\u2019 l\u2019unico a sapere dove gira il motore e\u2019 l\u2019ospite.\r\n    -->\r\n    <fb-run-dialog\r\n      [mode]=\"mode\"\r\n      [flowName]=\"session.flowName()\"\r\n      [version]=\"session.version()\"\r\n      [isDirty]=\"isDirty()\"\r\n      [isBusy]=\"isRunning()\"\r\n      (confirmed)=\"confirmRun($event)\"\r\n      (cancelled)=\"closeRun()\"\r\n    />\r\n  }\r\n\r\n  @if (editingResource(); as edit) {\r\n    <!--\r\n      La finestra di una risorsa. Sta qui e non dentro il pannello per una ragione sola: nella\r\n      colonna laterale la ritaglierebbe lo scorrimento.\r\n    -->\r\n    <fb-resource-dialog [edit]=\"edit\" (closed)=\"onResourceEditRequested(null)\" />\r\n  }\r\n\r\n  @if (isDialogMode() && isDialogOpen() && selectedName()) {\r\n    <!-- La dialog sta dentro il builder, non nel body: la libreria e\u2019 innestabile. -->\r\n    <fb-element-dialog\r\n      [selectedName]=\"selectedName()\"\r\n      [initialFieldPath]=\"pendingFieldPath()\"\r\n      (closed)=\"closeDialog()\"\r\n      (removeRequested)=\"onRemoveNode($event)\"\r\n      (duplicateRequested)=\"onDuplicateNode($event)\"\r\n      (renamed)=\"onNodeRenamed($event)\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%;min-height:0;font:inherit;color:var(--fb-text, #1d2939)}.fb-builder{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;background:var(--fb-surface, #fff)}.fb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-bottom:1px solid var(--fb-border, #e2e5eb);background:var(--fb-surface, #fff)}.fb-top__identity{min-width:0}.fb-top__label{width:100%;max-width:420px;padding:2px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--fb-text, #1d2939);font:inherit;font-size:15px;font-weight:600}.fb-top__label:hover:not(:disabled),.fb-top__label:focus-visible{border-color:var(--fb-border, #d6dae1);background:var(--fb-surface, #fff)}.fb-top__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px}.fb-top__name{width:180px;padding:1px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--fb-text-muted, #667085);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.fb-top__name:hover:not(:disabled),.fb-top__name:focus-visible{border-color:var(--fb-border, #d6dae1)}.fb-top__process{padding:1px 4px;border:1px solid var(--fb-border-subtle, #e6e9ee);border-radius:4px;background:transparent;color:var(--fb-text-muted, #667085);font:inherit;font-size:11px}.fb-top__status,.fb-top__version,.fb-top__dirty{padding:2px 7px;border-radius:999px;background:var(--fb-surface-sunken, #eef0f4);color:var(--fb-text-muted, #6b7086);font-size:10px;font-weight:600}.fb-top__version{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.fb-top__dirty{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-top__actions{display:flex;flex-wrap:wrap;gap:4px}.fb-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee);background:color-mix(in srgb,var(--fb-accent, #2f6feb) 7%,transparent);font-size:11px}.fb-banner--warn{background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-banner--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 10%,transparent);color:var(--fb-error, #c9372c)}.fb-banner>span{flex:1;min-width:200px}.fb-copy__field{display:flex;align-items:center;gap:6px}.fb-copy__caption{color:var(--fb-text-muted, #667085);white-space:nowrap}.fb-copy__input{width:180px;padding:2px 5px;border:1px solid var(--fb-border, #d6dae1);border-radius:4px;background:var(--fb-surface, #fff);color:var(--fb-text, #1d2939);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.fb-copy__hint{flex:1;min-width:180px;color:var(--fb-text-muted, #667085)}.fb-copy__hint--error{color:var(--fb-error, #c9372c)}.fb-main{display:flex;flex:1;min-height:0}.fb-main__palette{flex:0 0 190px;min-width:0}.fb-main__center{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0}.fb-main__canvas{flex:1;min-height:0}.fb-main__problems{flex:0 0 auto;height:220px}.fb-main__problems-toggle{display:flex;align-items:center;gap:6px;padding:4px 12px;border:0;border-top:1px solid var(--fb-border, #d6dae1);background:var(--fb-surface-alt, #f8f9fb);color:var(--fb-text-muted, #667085);font:inherit;font-size:11px;cursor:pointer}.fb-main__count{padding:0 5px;border-radius:8px;background:var(--fb-border, #d6dae1);font-size:9px;font-weight:700}.fb-main__count--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 16%,transparent);color:var(--fb-error, #c9372c)}.fb-main__count--warn{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-main__side{display:flex;flex-direction:column;flex:0 0 340px;min-width:0;min-height:0;border-left:1px solid var(--fb-border, #d6dae1);background:var(--fb-surface, #fff)}.fb-side__tabs{display:flex;gap:2px;margin:8px 10px;padding:3px;border-radius:var(--fb-radius, 10px);background:var(--fb-surface-sunken, #eef0f4)}.fb-side__tab{flex:1;padding:5px 8px;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-muted, #6b7086);font:inherit;font-size:11px;cursor:pointer;transition:background .12s ease,color .12s ease}.fb-side__tab-dot{display:inline-block;width:6px;height:6px;margin-left:4px;border-radius:50%;background:var(--fb-accent, #2f6feb);vertical-align:middle}.fb-side__tab:hover:not(.fb-side__tab--active){color:var(--fb-text, #1a1c23)}.fb-side__tab--active{background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));color:var(--fb-text, #1a1c23);font-weight:600}.fb-side__content{flex:1;min-height:0;border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-side__content>*{height:100%}.fb-side__footer{display:flex;gap:6px;padding:6px 8px;border-top:1px solid var(--fb-border-subtle, #e6e9ee)}@media(max-width:1200px){.fb-main__palette{flex-basis:150px}.fb-main__side{flex-basis:290px}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { '(keydown)': 'onKeyDown($event)' }, template: "<div class=\"fb-builder\" [attr.data-fb-theme]=\"null\">\r\n  <header class=\"fb-top\">\r\n    <div class=\"fb-top__identity\">\r\n      <input\r\n        class=\"fb-top__label\"\r\n        [value]=\"document().label || ''\"\r\n        placeholder=\"Nome del flow\"\r\n        aria-label=\"Nome del flow\"\r\n        [disabled]=\"!isEditable()\"\r\n        (input)=\"setLabel($any($event.target).value)\"\r\n      />\r\n      <div class=\"fb-top__meta\">\r\n        <input\r\n          class=\"fb-top__name\"\r\n          [value]=\"document().fullName || ''\"\r\n          placeholder=\"NomeTecnico\"\r\n          aria-label=\"Nome tecnico del flow\"\r\n          [disabled]=\"!isEditable()\"\r\n          (input)=\"setFullName($any($event.target).value)\"\r\n        />\r\n        <!--\r\n          Il tipo di flow si sceglie **alla creazione** e poi non si tocca pi\u00F9: decide quali\r\n          globali esistono (\u00A74.1), quali elementi sono ammessi e come il motore esegue il flow,\r\n          e cambiarlo su un documento gi\u00E0 scritto lo lascia pieno di riferimenti che non\r\n          esistono. Su un flow salvato resta quindi un\u2019etichetta, non un comando.\r\n        -->\r\n        @if (session.isNew()) {\r\n          <select\r\n            class=\"fb-top__process\"\r\n            [fbValue]=\"document().processType || ''\"\r\n            aria-label=\"Tipo di flow\"\r\n            [disabled]=\"!isEditable()\"\r\n            (change)=\"setProcessType($any($event.target).value)\"\r\n          >\r\n            <!--\r\n              Il segnaposto esiste perche' un `<select>` senza opzione corrispondente non e'\r\n              \u00ABvuoto\u00BB: e' a `selectedIndex = -1`, e mostra una casella bianca. Su un flow nuovo\r\n              (`processType` non ancora scelto) e' questa la riga che si vede, disabilitata\r\n              perche' non e' un valore valido da salvare.\r\n            -->\r\n            @if (!document().processType) {\r\n              <option value=\"\" disabled>\u2014 tipo di flow \u2014</option>\r\n            }\r\n            @for (type of processTypes(); track type.value) {\r\n              <option [value]=\"type.value\">{{ type.label }}</option>\r\n            }\r\n            <!--\r\n              Il tipo del documento che il dizionario non conosce: senza questa opzione la select\r\n              resta bianca su un flow che il backend ha salvato con un `processType` fuori\r\n              catalogo (o quando `processTypes` manca dalla risposta dei dizionari), e sembra che\r\n              l'editor non abbia ricaricato il flow. Va mostrato **senza** riscrivere il\r\n              documento: il valore e' del backend, non nostro da correggere.\r\n            -->\r\n            @if (isProcessTypeOutOfCatalog()) {\r\n              <option [value]=\"document().processType\">{{ document().processType }} (fuori catalogo)</option>\r\n            }\r\n          </select>\r\n        } @else {\r\n          <span class=\"fb-top__process fb-top__process--fixed\" title=\"Il tipo di flow si sceglie alla creazione\">\r\n            {{ processTypeLabel() }}\r\n          </span>\r\n        }\r\n        <span class=\"fb-top__status\">{{ statusLabel() }}</span>\r\n        @if (session.version() != null) {\r\n          <span class=\"fb-top__version\">v{{ session.version() }}</span>\r\n        }\r\n        @if (isDirty()) {\r\n          <span class=\"fb-top__dirty\" title=\"Ci sono modifiche non salvate\">modificato</span>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <!--\r\n      La ricerca **nel documento**: e\u2019 l\u2019unico modo di arrivare a un elemento su un flow che non\r\n      sta in una schermata. Non e\u2019 la casella della palette, che filtra i tipi da aggiungere.\r\n    -->\r\n    <fb-flow-search (picked)=\"onSearchPicked($event)\" />\r\n\r\n    <div class=\"fb-top__actions\">\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"!canUndo()\" aria-label=\"Annulla\" (click)=\"undo()\">\u21B6</button>\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"!canRedo()\" aria-label=\"Ripeti\" (click)=\"redo()\">\u21B7</button>\r\n      <button type=\"button\" class=\"fb-btn\" title=\"Ricalcola le posizioni\" (click)=\"autoLayout()\">Riordina</button>\r\n      <!--\r\n        Un riquadro e\u2019 un commento sul canvas (\u00A73.6): non viene eseguito, quindi il comando sta\r\n        qui accanto a \u00ABRiordina\u00BB e non nella palette degli elementi. Nasce attorno a cio\u2019 che e\u2019\r\n        selezionato, che e\u2019 il gesto per cui serve.\r\n      -->\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"!isEditable()\"\r\n        [title]=\"\r\n          canCopy()\r\n            ? 'Racchiudi gli elementi selezionati in un riquadro di commento'\r\n            : 'Crea un riquadro di commento vuoto: non cambia il comportamento del flow'\r\n        \"\r\n        aria-label=\"Nuovo riquadro di raggruppamento\"\r\n        (click)=\"createGroup()\"\r\n      >\r\n        \u2B1A\r\n      </button>\r\n\r\n      <!--\r\n        Copia e incolla stanno **anche** qui e non solo sui tasti: una scorciatoia che nessuno\r\n        annuncia non esiste. Il titolo la dice, cos\u00EC si impara usandola una volta.\r\n        L\u2019incolla e\u2019 acceso anche con la selezione vuota: cio\u2019 che si incolla sta negli appunti,\r\n        e puo\u2019 venire da un altro flow.\r\n      -->\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"!canCopy()\"\r\n        title=\"Copia gli elementi selezionati, con le risorse che usano (Ctrl+C)\"\r\n        aria-label=\"Copia gli elementi selezionati\"\r\n        (click)=\"copySelection()\"\r\n      >\r\n        \u29C9\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"!canPaste() || !isEditable()\"\r\n        title=\"Incolla gli elementi copiati, anche da un altro flow (Ctrl+V)\"\r\n        aria-label=\"Incolla gli elementi copiati\"\r\n        (click)=\"startPaste()\"\r\n      >\r\n        \u2398\r\n      </button>\r\n      @if (isDialogMode()) {\r\n        <!-- Il doppio click sul node fa la stessa cosa, ma non si vede: questo comando s\u00EC. -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-btn\"\r\n          [disabled]=\"!selectedName()\"\r\n          title=\"Apri il dettaglio dell\u2019elemento selezionato\"\r\n          (click)=\"openSelectedElement()\"\r\n        >\r\n          Dettaglio\r\n        </button>\r\n      }\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"isBusy()\" (click)=\"validateNow()\">Valida</button>\r\n\r\n      <!--\r\n        Esegui e Debug non eseguono niente qui dentro: raccolgono i valori di ingresso e li\r\n        consegnano all\u2019applicazione ospite. Si esegue la versione **salvata**, quindi su un flow\r\n        mai scritto sono spenti e il titolo dice perche\u2019.\r\n      -->\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"!canRun()\"\r\n        [title]=\"canRun() ? 'Esegui il flow salvato' : 'Salva il flow prima di eseguirlo'\"\r\n        (click)=\"openRun('run')\"\r\n      >\r\n        Esegui\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"!canRun()\"\r\n        [title]=\"canRun() ? 'Esegui il flow salvato in debug' : 'Salva il flow prima di eseguirlo'\"\r\n        (click)=\"openRun('debug')\"\r\n      >\r\n        Debug\r\n      </button>\r\n\r\n      @switch (primaryCommand()) {\r\n        @case ('newVersion') {\r\n          <!-- Su una versione non modificabile il comando primario e' \"Nuova versione\" (\u00A78.1). -->\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"createNewVersion()\">\r\n            Nuova versione\r\n          </button>\r\n        }\r\n        @case ('create') {\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"save()\">\r\n            Crea\r\n          </button>\r\n        }\r\n        @default {\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"save()\">\r\n            Salva\r\n          </button>\r\n        }\r\n      }\r\n\r\n      @if (canDuplicate()) {\r\n        <!-- \u00A76.2 \u00ABDuplica\u00BB: il flow sotto un altro nome, alla versione 1. -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-btn\"\r\n          [disabled]=\"isBusy()\"\r\n          title=\"Salva una copia con un altro nome\"\r\n          (click)=\"startCopy()\"\r\n        >\r\n          Duplica\u2026\r\n        </button>\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"isBusy() || !canActivate()\"\r\n        [title]=\"\r\n          canActivate()\r\n            ? 'Attiva questa versione'\r\n            : 'L\u2019attivazione esige zero errori: correggili nel pannello dei problemi'\r\n        \"\r\n        (click)=\"activate()\"\r\n      >\r\n        Attiva\r\n      </button>\r\n    </div>\r\n  </header>\r\n\r\n  @if (conflict()) {\r\n    <!-- \u00A79.3: qualcun altro ha salvato. Due strade, entrambe offerte. -->\r\n    <div class=\"fb-banner fb-banner--warn\" role=\"alert\">\r\n      <span>\r\n        {{ conflict()?.message }}\r\n        @if (conflict()?.conflictingAuthor) {\r\n          Ha salvato {{ conflict()?.conflictingAuthor }}.\r\n        }\r\n      </span>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--icon\" (click)=\"reloadAfterConflict()\">Ricarica</button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--icon\" (click)=\"saveAsNewVersionAfterConflict()\">\r\n        Salva come nuova versione\r\n      </button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" (click)=\"dismissConflict()\">\u00D7</button>\r\n    </div>\r\n  }\r\n\r\n  @if (isCopyOpen()) {\r\n    <!--\r\n      Il nome si chiede prima di scrivere: e\u2019 l\u2019unico dato che il backend non puo\u2019 inventare, e\r\n      un doppione lo rifiuta con AlreadyExists (\u00A76.2). Invio conferma, Esc annulla.\r\n    -->\r\n    <div class=\"fb-banner fb-copy\" role=\"group\" aria-label=\"Duplica il flow\">\r\n      <label class=\"fb-copy__field\">\r\n        <span class=\"fb-copy__caption\">Nome tecnico della copia</span>\r\n        <input\r\n          #copyNameInput\r\n          class=\"fb-copy__input\"\r\n          [value]=\"copyName()\"\r\n          placeholder=\"NomeTecnico_Copia\"\r\n          (input)=\"setCopyName($any($event.target).value)\"\r\n          (keydown.enter)=\"confirmCopy()\"\r\n          (keydown.escape)=\"cancelCopy()\"\r\n        />\r\n      </label>\r\n      <label class=\"fb-copy__field\">\r\n        <span class=\"fb-copy__caption\">Nome visibile</span>\r\n        <input\r\n          class=\"fb-copy__input\"\r\n          [value]=\"copyLabel()\"\r\n          placeholder=\"(facoltativo)\"\r\n          (input)=\"setCopyLabel($any($event.target).value)\"\r\n          (keydown.enter)=\"confirmCopy()\"\r\n          (keydown.escape)=\"cancelCopy()\"\r\n        />\r\n      </label>\r\n      <span class=\"fb-copy__hint\" [class.fb-copy__hint--error]=\"!!copyNameProblem()\">\r\n        {{ copyNameProblem() || copyHint() }}\r\n      </span>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn fb-btn--primary fb-btn--icon\"\r\n        [disabled]=\"isBusy() || !!copyNameProblem()\"\r\n        (click)=\"confirmCopy()\"\r\n      >\r\n        Duplica\r\n      </button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" (click)=\"cancelCopy()\">Annulla</button>\r\n    </div>\r\n  }\r\n\r\n  @if (notice()) {\r\n    <div\r\n      class=\"fb-banner\"\r\n      [class.fb-banner--error]=\"notice()?.kind === 'error'\"\r\n      role=\"status\"\r\n    >\r\n      <span>{{ notice()?.message }}</span>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" aria-label=\"Chiudi\" (click)=\"dismissNotice()\">\r\n        \u00D7\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (hasScreensInAutoLaunched()) {\r\n    <div class=\"fb-banner fb-banner--error\">\r\n      Un flow AutoLaunched che contiene screen e\u2019 un errore di validazione: non c\u2019e\u2019 nessuno a cui mostrarli.\r\n    </div>\r\n  }\r\n  @if (isOrchestrationWithoutStages()) {\r\n    <div class=\"fb-banner fb-banner--warn\">\r\n      Un flow Orchestration senza stage di orchestrazione viene segnalato dalla validazione\r\n      (ORCHESTRATION_WITHOUT_STAGES).\r\n    </div>\r\n  }\r\n  @if (hasNoScreensInScreenFlow()) {\r\n    <div class=\"fb-banner fb-banner--warn\">\r\n      Un flow di tipo Screen senza nessuno screen viene segnalato dalla validazione.\r\n    </div>\r\n  }\r\n  @if (!isEditable()) {\r\n    <div class=\"fb-banner\">\r\n      Questa versione e\u2019 in sola lettura: per modificarla creane una nuova.\r\n    </div>\r\n  }\r\n\r\n  <div class=\"fb-main\">\r\n    <aside class=\"fb-main__palette\">\r\n      <fb-element-palette [processType]=\"document().processType\" (elementPicked)=\"onElementPicked($event)\" />\r\n    </aside>\r\n\r\n    <div class=\"fb-main__center\">\r\n      <fb-flow-canvas\r\n        class=\"fb-main__canvas\"\r\n        [selectedName]=\"selectedName()\"\r\n        [selectedNames]=\"selectedNames()\"\r\n        [selectedGroupName]=\"selectedGroupName()\"\r\n        [outline]=\"outline()\"\r\n        [isEditable]=\"isEditable()\"\r\n        (selectionChange)=\"onSelectionChange($event)\"\r\n        (nodeOpened)=\"onNodeOpened($event)\"\r\n        (nodeRemoveRequested)=\"onRemoveNode($event)\"\r\n        (nodeDuplicateRequested)=\"onDuplicateNode($event)\"\r\n        (elementDropped)=\"onElementDropped($event)\"\r\n        (groupSelected)=\"onGroupSelected($event)\"\r\n        (groupRemoveRequested)=\"onGroupRemoved($event)\"\r\n      />\r\n\r\n      @if (showProblems()) {\r\n        <fb-problems-panel\r\n          class=\"fb-main__problems\"\r\n          (elementFocused)=\"revealIssueElement($event)\"\r\n          (elementOpened)=\"openIssueElement($event)\"\r\n          (closed)=\"toggleProblems()\"\r\n        />\r\n      } @else {\r\n        <button type=\"button\" class=\"fb-main__problems-toggle\" (click)=\"toggleProblems()\">\r\n          Problemi\r\n          @if (errorCount()) {\r\n            <span class=\"fb-main__count fb-main__count--error\">{{ errorCount() }}</span>\r\n          }\r\n          @if (warningCount()) {\r\n            <span class=\"fb-main__count fb-main__count--warn\">{{ warningCount() }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <aside class=\"fb-main__side\">\r\n      <nav class=\"fb-side__tabs\" aria-label=\"Pannelli\">\r\n        @if (!isDialogMode()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fb-side__tab\"\r\n            [class.fb-side__tab--active]=\"sidePanel() === 'inspector'\"\r\n            (click)=\"setPanel('inspector')\"\r\n          >\r\n            Elemento\r\n          </button>\r\n        }\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'resources'\"\r\n          (click)=\"setPanel('resources')\"\r\n        >\r\n          Risorse\r\n        </button>\r\n        <!--\r\n          I riquadri (\u00A73.6). Il tab porta il conteggio perche\u2019 e\u2019 l\u2019unico modo di sapere che un\r\n          flow ne ha, quando sono chiusi o fuori dalla vista.\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'groups'\"\r\n          (click)=\"setPanel('groups')\"\r\n        >\r\n          Riquadri\r\n          @if (store.groups().length) {\r\n            <span class=\"fb-main__count\">{{ store.groups().length }}</span>\r\n          }\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'versions'\"\r\n          (click)=\"setPanel('versions')\"\r\n        >\r\n          Versioni\r\n        </button>\r\n        <!--\r\n          Il pannello dell\u2019ultima esecuzione. \u00C8 l\u2019unico posto in cui si vede la traccia di un\r\n          flow **senza schermate**: l\u00EC il runtime non apre nessuna interfaccia, e senza questo\r\n          tab non ci sarebbe niente da guardare.\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'debug'\"\r\n          (click)=\"setPanel('debug')\"\r\n        >\r\n          Debug\r\n          @if (isRunning()) {\r\n            <span class=\"fb-side__tab-dot\" aria-label=\"esecuzione in corso\"></span>\r\n          }\r\n        </button>\r\n      </nav>\r\n\r\n      <div class=\"fb-side__content\">\r\n        @switch (sidePanel()) {\r\n          @case ('inspector') {\r\n            <fb-element-inspector\r\n              [selectedName]=\"selectedName()\"\r\n              [initialFieldPath]=\"pendingFieldPath()\"\r\n              (removeRequested)=\"onRemoveNode($event)\"\r\n              (duplicateRequested)=\"onDuplicateNode($event)\"\r\n              (renamed)=\"onNodeRenamed($event)\"\r\n              (closed)=\"setPanel('resources')\"\r\n            />\r\n          }\r\n          @case ('resources') {\r\n            <fb-resource-panel\r\n              [target]=\"resourceTarget()\"\r\n              [editing]=\"editingResource()\"\r\n              (editRequested)=\"onResourceEditRequested($event)\"\r\n              (closed)=\"setPanel('inspector')\"\r\n            />\r\n          }\r\n          @case ('groups') {\r\n            <fb-group-panel\r\n              [isEditable]=\"isEditable()\"\r\n              [selectedNodeNames]=\"selectedNames()\"\r\n              [target]=\"groupTarget()\"\r\n              (createRequested)=\"createGroup()\"\r\n              (memberFocused)=\"focusMember($event)\"\r\n              (closed)=\"setPanel('resources')\"\r\n            />\r\n          }\r\n          @case ('versions') {\r\n            <fb-version-panel\r\n              (versionOpened)=\"openVersion($event)\"\r\n              (notice)=\"showNotice($event)\"\r\n              (closed)=\"setPanel('inspector')\"\r\n            />\r\n          }\r\n          @case ('debug') {\r\n            <!-- Evidenzia sul canvas senza rubare il pannello: la traccia si sta leggendo. -->\r\n            <fb-debug-panel\r\n              [outcome]=\"shownOutcome()\"\r\n              [wasDebug]=\"wasRunInDebug()\"\r\n              [isRunning]=\"isRunning()\"\r\n              (elementFocused)=\"highlightElement($event)\"\r\n              (cleared)=\"clearRunOutcome()\"\r\n              (closed)=\"setPanel('inspector')\"\r\n            />\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <footer class=\"fb-side__footer\">\r\n        <label class=\"fb-btn fb-btn--icon\">\r\n          Importa JSON\r\n          <input type=\"file\" accept=\"application/json,.json\" hidden (change)=\"onFileSelected($event)\" />\r\n        </label>\r\n      </footer>\r\n    </aside>\r\n  </div>\r\n\r\n  @if (pastePreview(); as preview) {\r\n    <!--\r\n      L\u2019incolla passa da una conferma perche\u2019 non e\u2019 mai una copia identica: nomi gi\u00E0 presi,\r\n      risorse che qui non esistono, riferimenti che restano orfani. Il piano e\u2019 gi\u00E0 calcolato,\r\n      la finestra lo mostra e basta.\r\n    -->\r\n    <fb-paste-dialog\r\n      [payload]=\"preview.payload\"\r\n      [plan]=\"preview.plan\"\r\n      (confirmed)=\"confirmPaste($event)\"\r\n      (cancelled)=\"cancelPaste()\"\r\n    />\r\n  }\r\n\r\n  @if (runMode(); as mode) {\r\n    <!--\r\n      La finestra degli ingressi. Non avvia niente e non chiama niente: raccoglie i valori e li\r\n      annuncia con `runRequested`, perche\u2019 l\u2019unico a sapere dove gira il motore e\u2019 l\u2019ospite.\r\n    -->\r\n    <fb-run-dialog\r\n      [mode]=\"mode\"\r\n      [flowName]=\"session.flowName()\"\r\n      [version]=\"session.version()\"\r\n      [isDirty]=\"isDirty()\"\r\n      [isBusy]=\"isRunning()\"\r\n      (confirmed)=\"confirmRun($event)\"\r\n      (cancelled)=\"closeRun()\"\r\n    />\r\n  }\r\n\r\n  @if (editingResource(); as edit) {\r\n    <!--\r\n      La finestra di una risorsa. Sta qui e non dentro il pannello per una ragione sola: nella\r\n      colonna laterale la ritaglierebbe lo scorrimento.\r\n    -->\r\n    <fb-resource-dialog [edit]=\"edit\" (closed)=\"onResourceEditRequested(null)\" />\r\n  }\r\n\r\n  @if (isDialogMode() && isDialogOpen() && selectedName()) {\r\n    <!-- La dialog sta dentro il builder, non nel body: la libreria e\u2019 innestabile. -->\r\n    <fb-element-dialog\r\n      [selectedName]=\"selectedName()\"\r\n      [initialFieldPath]=\"pendingFieldPath()\"\r\n      (closed)=\"closeDialog()\"\r\n      (removeRequested)=\"onRemoveNode($event)\"\r\n      (duplicateRequested)=\"onDuplicateNode($event)\"\r\n      (renamed)=\"onNodeRenamed($event)\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%;min-height:0;font:inherit;color:var(--fb-text, #1d2939)}.fb-builder{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;background:var(--fb-surface, #fff)}.fb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-bottom:1px solid var(--fb-border, #e2e5eb);background:var(--fb-surface, #fff)}.fb-top__identity{min-width:0}.fb-top__label{width:100%;max-width:420px;padding:2px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--fb-text, #1d2939);font:inherit;font-size:15px;font-weight:600}.fb-top__label:hover:not(:disabled),.fb-top__label:focus-visible{border-color:var(--fb-border, #d6dae1);background:var(--fb-surface, #fff)}.fb-top__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px}.fb-top__name{width:180px;padding:1px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--fb-text-muted, #667085);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.fb-top__name:hover:not(:disabled),.fb-top__name:focus-visible{border-color:var(--fb-border, #d6dae1)}.fb-top__process{padding:1px 4px;border:1px solid var(--fb-border-subtle, #e6e9ee);border-radius:4px;background:transparent;color:var(--fb-text-muted, #667085);font:inherit;font-size:11px}.fb-top__process--fixed{border-color:transparent;background:var(--fb-surface-sunken, #eef0f4);border-radius:999px;padding:2px 7px;font-weight:600}.fb-top__status,.fb-top__version,.fb-top__dirty{padding:2px 7px;border-radius:999px;background:var(--fb-surface-sunken, #eef0f4);color:var(--fb-text-muted, #6b7086);font-size:10px;font-weight:600}.fb-top__version{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.fb-top__dirty{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-top__actions{display:flex;flex-wrap:wrap;gap:4px}.fb-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee);background:color-mix(in srgb,var(--fb-accent, #2f6feb) 7%,transparent);font-size:11px}.fb-banner--warn{background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-banner--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 10%,transparent);color:var(--fb-error, #c9372c)}.fb-banner>span{flex:1;min-width:200px}.fb-copy__field{display:flex;align-items:center;gap:6px}.fb-copy__caption{color:var(--fb-text-muted, #667085);white-space:nowrap}.fb-copy__input{width:180px;padding:2px 5px;border:1px solid var(--fb-border, #d6dae1);border-radius:4px;background:var(--fb-surface, #fff);color:var(--fb-text, #1d2939);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.fb-copy__hint{flex:1;min-width:180px;color:var(--fb-text-muted, #667085)}.fb-copy__hint--error{color:var(--fb-error, #c9372c)}.fb-main{display:flex;flex:1;min-height:0}.fb-main__palette{flex:0 0 190px;min-width:0}.fb-main__center{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0}.fb-main__canvas{flex:1;min-height:0}.fb-main__problems{flex:0 0 auto;height:220px}.fb-main__problems-toggle{display:flex;align-items:center;gap:6px;padding:4px 12px;border:0;border-top:1px solid var(--fb-border, #d6dae1);background:var(--fb-surface-alt, #f8f9fb);color:var(--fb-text-muted, #667085);font:inherit;font-size:11px;cursor:pointer}.fb-main__count{padding:0 5px;border-radius:8px;background:var(--fb-border, #d6dae1);font-size:9px;font-weight:700}.fb-main__count--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 16%,transparent);color:var(--fb-error, #c9372c)}.fb-main__count--warn{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-main__side{display:flex;flex-direction:column;flex:0 0 340px;min-width:0;min-height:0;border-left:1px solid var(--fb-border, #d6dae1);background:var(--fb-surface, #fff)}.fb-side__tabs{display:flex;gap:2px;margin:8px 10px;padding:3px;border-radius:var(--fb-radius, 10px);background:var(--fb-surface-sunken, #eef0f4)}.fb-side__tab{flex:1;padding:5px 8px;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-muted, #6b7086);font:inherit;font-size:11px;cursor:pointer;transition:background .12s ease,color .12s ease}.fb-side__tab-dot{display:inline-block;width:6px;height:6px;margin-left:4px;border-radius:50%;background:var(--fb-accent, #2f6feb);vertical-align:middle}.fb-side__tab:hover:not(.fb-side__tab--active){color:var(--fb-text, #1a1c23)}.fb-side__tab--active{background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));color:var(--fb-text, #1a1c23);font-weight:600}.fb-side__content{flex:1;min-height:0;border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-side__content>*{height:100%}.fb-side__footer{display:flex;gap:6px;padding:6px 8px;border-top:1px solid var(--fb-border-subtle, #e6e9ee)}@media(max-width:1200px){.fb-main__palette{flex-basis:150px}.fb-main__side{flex-basis:290px}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { flowName: [{ type: i0.Input, args: [{ isSignal: true, alias: "flowName", required: false }] }], version: [{ type: i0.Input, args: [{ isSignal: true, alias: "version", required: false }] }], author: [{ type: i0.Input, args: [{ isSignal: true, alias: "author", required: false }] }], defaultProcessType: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultProcessType", required: false }] }], inspectorMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inspectorMode", required: false }] }], runOutcome: [{ type: i0.Input, args: [{ isSignal: true, alias: "runOutcome", required: false }] }], isRunning: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRunning", required: false }] }], saved: [{ type: i0.Output, args: ["saved"] }], activated: [{ type: i0.Output, args: ["activated"] }], closeRequested: [{ type: i0.Output, args: ["closeRequested"] }], runRequested: [{ type: i0.Output, args: ["runRequested"] }], canvas: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FlowCanvasComponent), { isSignal: true }] }], search: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FlowSearchComponent), { isSignal: true }] }], copyNameInput: [{ type: i0.ViewChild, args: ['copyNameInput', { isSignal: true }] }] } });
 
 /**