@esfaenza/dpe-builder 20.3.7 → 20.3.8

package/fesm2022/esfaenza-dpe-builder.mjs

@@ -1,4 +1,4 @@
-import { throwError, defer, catchError, map, tap, EMPTY, switchMap, of, debounceTime } from 'rxjs';
+import { throwError, defer, catchError, map, tap, EMPTY, switchMap, of, filter, debounceTime } from 'rxjs';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, Injectable, makeEnvironmentProviders, signal, computed, DestroyRef, input, ChangeDetectionStrategy, Component, ElementRef, output, viewChild, effect, Directive, untracked, Injector, afterNextRender } from '@angular/core';
@@ -1446,7 +1446,20 @@ function dpeNodeSubtitle(collection, node) {
  */
 /** Profondita' della cronologia: oltre, le istantanee piu' vecchie si buttano. */
 const HISTORY_LIMIT = 100;
-/** Una definizione vuota ma **leggibile**: `formatVersion` e `dialect` non sono opzionali. */
+/**
+ * Una definizione vuota ma **leggibile**: `formatVersion` e `dialect` non sono opzionali.
+ *
+ * **Serve a `createDefinition`, non a montare l'editor.** E' il documento minimo che si manda al
+ * backend per far nascere una definizione nel catalogo (ADR 0019), e da li' in poi quella che si
+ * edita e' la definizione **caricata con `load(nome)`**.
+ *
+ * Montare l'editor su un documento costruito qui, o su uno costruito a mano senza nome, produce due
+ * sintomi che sembrano scollegati e sono la stessa cosa: la validazione risponde
+ * `DPE_MODEL_REQUIRED_MISSING` su `name` e `label` — per il backend una stringa vuota e un campo
+ * assente sono lo stesso caso — e il salvataggio non ha una chiave per la rotta
+ * `PUT /definitions/{name}`. L'editor lo dichiara in cima con un banner e disabilita «Salva», ma la
+ * correzione e' a monte: creare dal catalogo e caricare.
+ */
 function dpeEmptyDefinition(name, label, dialect) {
     return { formatVersion: 1, name, label, dialect };
 }
@@ -1461,6 +1474,16 @@ class DpeDocumentStore {
      * sulla selezione.
      */
     _selectedNodeNames = signal([], ...(ngDevMode ? [{ debugName: "_selectedNodeNames" }] : []));
+    /**
+     * La dialog di modifica del nodo e' aperta. **Un booleano**, non un secondo nome di nodo: il
+     * nodo su cui si sta agendo resta `selectedNodeName()`, e due registrazioni dello stesso fatto
+     * sono esattamente cio' che questo store dichiara di non voler avere (ci ha gia' rimesso una
+     * volta con la doppia selezione di @foblex/flow).
+     *
+     * Non entra nella cronologia: aprire una finestra non e' una modifica del documento, e un undo
+     * che aprisse o chiudesse finestre sarebbe un comando che fa due cose.
+     */
+    _isNodeEditorOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isNodeEditorOpen" }] : []));
     _past = signal([], ...(ngDevMode ? [{ debugName: "_past" }] : []));
     _future = signal([], ...(ngDevMode ? [{ debugName: "_future" }] : []));
     /**
@@ -1471,8 +1494,18 @@ class DpeDocumentStore {
      * — e tornare a "no" quando si annulla fino allo stato di partenza.
      */
     _savedSnapshot = signal(JSON.stringify(dpeEmptyDefinition('', '', 'Sqlite')), ...(ngDevMode ? [{ debugName: "_savedSnapshot" }] : []));
+    /**
+     * Vero da quando un documento e' stato **caricato**. Distingue il segnaposto del costruttore da
+     * una definizione vera, e serve a chi non deve lavorare sul segnaposto: la validazione non lo
+     * manda al backend (`DpeValidationService`), perche' la risposta sarebbero i quattro rilievi di
+     * una definizione vuota — `name`, `label`, `dataSources` e nessun writeback — che descrivono il
+     * segnaposto e non il lavoro dell'utente, e che dall'editor nessuno puo' correggere.
+     */
+    _hasDocument = signal(false, ...(ngDevMode ? [{ debugName: "_hasDocument" }] : []));
     /** La definizione corrente: unica fonte di verita' per canvas, ispettori e pannelli. */
     definition = this._definition.asReadonly();
+    /** Vero da quando `load` ha portato un documento: prima c'e' solo il segnaposto. */
+    hasDocument = this._hasDocument.asReadonly();
     /** Nodi e archi derivati dalla definizione. Ricalcolati solo quando la definizione cambia. */
     graph = computed(() => dpeBuildGraph(this._definition()), ...(ngDevMode ? [{ debugName: "graph" }] : []));
     selectedNodeNames = this._selectedNodeNames.asReadonly();
@@ -1487,6 +1520,11 @@ class DpeDocumentStore {
         const name = this.selectedNodeName();
         return name === undefined ? undefined : dpeFindNode(this._definition(), name)?.node;
     }, ...(ngDevMode ? [{ debugName: "selectedNode" }] : []));
+    /**
+     * La dialog di modifica del nodo e' aperta. Non e' una seconda identita': il nodo e'
+     * `selectedNodeName()`.
+     */
+    isNodeEditorOpen = this._isNodeEditorOpen.asReadonly();
     // --- cio' che arriva dal backend ------------------------------------------
     validateResult = this._validateResult.asReadonly();
     compileResult = this._compileResult.asReadonly();
@@ -1543,11 +1581,16 @@ class DpeDocumentStore {
      */
     load(definition) {
         this._definition.set(definition);
+        this._hasDocument.set(true);
         // Cio' che e' appena arrivato **e'** lo stato salvato: aprire un documento non lo sporca.
         this._savedSnapshot.set(JSON.stringify(definition));
         this._past.set([]);
         this._future.set([]);
         this._selectedNodeNames.set([]);
+        // Una dialog rimasta aperta guarderebbe un nodo di **un'altra** definizione: il nome potrebbe
+        // anche esistere qui, e allora si starebbe modificando un nodo che nessuno ha aperto. E' il
+        // caso che si dimentica, perche' non fallisce — mostra la cosa sbagliata.
+        this._isNodeEditorOpen.set(false);
         this._validateResult.set(undefined);
         this._compileResult.set(undefined);
     }
@@ -1583,6 +1626,24 @@ class DpeDocumentStore {
     selectMany(nodeNames) {
         this._selectedNodeNames.set(Array.from(new Set(nodeNames)));
     }
+    /**
+     * Seleziona **solo** quel nodo e apre la dialog di modifica.
+     *
+     * La selezione **collassa a un nodo solo**: il gesto «apri questo» dichiara su chi si sta
+     * agendo, e la regola gia' in vigore e' che con piu' di un nodo selezionato non si mostrano i
+     * campi di uno.
+     *
+     * Le due scritture sono **esplicite** e non conseguenza di un `effect`: un effect che scrive
+     * signal renderebbe l'ordine di questi due fatti dipendente dalla schedulazione, cioe' non
+     * testabile.
+     */
+    openNodeEditor(nodeName) {
+        this.select(nodeName);
+        this._isNodeEditorOpen.set(true);
+    }
+    closeNodeEditor() {
+        this._isNodeEditorOpen.set(false);
+    }
     // -------------------------------------------------------------------------
     // Mutazioni — sincrone e granulari
     // -------------------------------------------------------------------------
@@ -1635,6 +1696,9 @@ class DpeDocumentStore {
         if (!located) {
             return;
         }
+        // Si legge **prima** della potatura della selezione: dopo, `selectedNodeName()` e' gia' un
+        // altro nodo (o nessuno) e non si saprebbe piu' se la dialog stava guardando questo.
+        const wasOpenOnIt = this._isNodeEditorOpen() && this.selectedNodeName() === nodeName;
         const existing = (definition[located.collection] ?? []);
         const next = existing.filter((node) => node.name !== nodeName);
         this.commit(this.withCollection(definition, located.collection, next));
@@ -1645,6 +1709,13 @@ class DpeDocumentStore {
         if (selected.includes(nodeName)) {
             this._selectedNodeNames.set(selected.filter((name) => name !== nodeName));
         }
+        // Il bersaglio della dialog e' svanito: dopo l'eliminazione non c'e' piu' niente da
+        // modificare. La chiusura sta qui e non nel componente perche' «Elimina il nodo» sta nel
+        // piede della dialog, e un componente che si chiude da se' dopo aver chiesto una mutazione
+        // sarebbe una seconda regola sullo stesso fatto.
+        if (wasOpenOnIt) {
+            this._isNodeEditorOpen.set(false);
+        }
     }
     /**
      * L'**unico** punto che rinomina un nodo (**I5**): delega alla funzione pura, che aggiorna
@@ -2313,7 +2384,20 @@ class DpeValidationService {
     hasResult = computed(() => this.store.validateResult() !== undefined, ...(ngDevMode ? [{ debugName: "hasResult" }] : []));
     constructor() {
         toObservable(this.store.definition)
-            .pipe(debounceTime(VALIDATE_DEBOUNCE_MS), tap(() => {
+            .pipe(
+        /*
+         * **Non si valida il segnaposto.** Lo store nasce con `dpeEmptyDefinition('', '', 'Sqlite')`
+         * e questo servizio si iscrive alla costruzione: se il documento vero arriva dopo la
+         * finestra di debounce — un ospite che monta l'editor mentre `load(nome)` e' in volo, cioe'
+         * il caso normale con una rete vera — la finestra si chiudeva sul segnaposto e l'editor
+         * validava un documento che nessuno aveva fornito. La risposta era esatta e inutile:
+         * `DPE_MODEL_REQUIRED_MISSING` su `name`, `label` e `dataSources` piu'
+         * `DPE_GRAPH_NO_WRITEBACK` — quattro rilievi del segnaposto, che l'utente non puo'
+         * correggere da qui e che sembrano riguardare la sua definizione appena creata.
+         *
+         * Il filtro sta **prima** del debounce: il segnaposto non deve nemmeno aprire la finestra.
+         */
+        filter(() => this.store.hasDocument()), debounceTime(VALIDATE_DEBOUNCE_MS), tap(() => {
             this._isValidating.set(true);
             this._error.set(undefined);
         }), 
@@ -3185,6 +3269,165 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                 }]
         }], propDecorators: { navigate: [{ type: i0.Output, args: ["navigate"] }] } });
 
+/**
+ * I **fatti dal backend** su un nodo: schema in uscita e rilievi che lo riguardano.
+ *
+ * Sono in un componente a se' perche' nella dialog di modifica (ADR 0026) non stanno dove stanno
+ * i campi: i campi prendono la colonna larga, questi la colonna stretta di destra. Metterli **di
+ * fianco** e non sopra il form evita in anticipo il muro di avvisi che spinge il primo campo
+ * fuori dallo schermo — con i rilievi in colonna il muro non si forma, quindi si mostrano
+ * **tutti** (**I6**: l'elenco della validazione e' esaustivo, e troncarlo sarebbe mentire).
+ *
+ * In testa sta lo stato **valido ma non compilabile** (**I10**), perche' e' il fatto che spiega gli
+ * altri due: senza di esso una colonna che elenca i rilievi tace proprio sul motivo per cui da
+ * questo nodo non uscira' nessun SQL. «Non compilabile» e «non valido» sono due significati
+ * distinti, e l'editor li tiene distinti per decisione (ADR 0011).
+ *
+ * Non calcola niente. Lo schema arriva da `validate` (**I4**: la propagazione e' del backend) e i
+ * rilievi arrivano gia' raggruppati per nodo: qui si legge e si rende.
+ */
+class DpeNodeFactsComponent {
+    store = inject(DpeDocumentStore);
+    /**
+     * Il nodo di cui si mostrano i fatti. Arriva per input e non dalla selezione: chi monta questo
+     * componente sa quale nodo sta guardando, e leggere qui la selezione lo farebbe cambiare
+     * bersaglio sotto la dialog che lo contiene.
+     */
+    nodeName = input.required(...(ngDevMode ? [{ debugName: "nodeName" }] : []));
+    /**
+     * Il nodo e' valido ma **non compilabile** (**I10**). Due rami, ed e' la **stessa espressione**
+     * che `DpeNodeInspectorBase.isNotCompilable` usa gia': il codice diagnostico
+     * `DPE_NODE_NOT_COMPILABLE` raggruppato per nodo, **oppure** lo schema che dichiara
+     * `isCompilable: false`. Servono entrambi perche' il backend puo' dirlo per due vie — un rilievo
+     * sul nodo, o la riga di schema — e riconoscerne una sola vorrebbe dire tacere nell'altro caso.
+     *
+     * Qui non si giudica niente: la decisione e' del compilatore, questa e' la sua risposta.
+     */
+    isNotCompilable = computed(() => (this.store.diagnosticsByNode().get(this.nodeName())?.isNotCompilable ?? false) ||
+        this.store.schemaByNode().get(this.nodeName())?.isCompilable === false, ...(ngDevMode ? [{ debugName: "isNotCompilable" }] : []));
+    columns = computed(() => this.store.schemaByNode().get(this.nodeName())?.columns ?? [], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    diagnostics = computed(() => this.store.diagnosticsByNode().get(this.nodeName())?.diagnostics ?? [], ...(ngDevMode ? [{ debugName: "diagnostics" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DpeNodeFactsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: DpeNodeFactsComponent, isStandalone: true, selector: "dpe-node-facts", inputs: { nodeName: { classPropertyName: "nodeName", publicName: "nodeName", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @if (isNotCompilable()) {
+      <!--
+        Tono deliberatamente **non** da errore: colore proprio (ne’ rosso ne’ giallo) e le stesse
+        parole degli ispettori di Forecast e CustomNode, perche’ e’ lo stesso fatto detto nello
+        stesso linguaggio. Chiedere di correggere qualcosa qui sarebbe una bugia.
+      -->
+      <p class="dpe-note dpe-note--not-compilable">
+        <span class="dpe-badge dpe-badge--not-compilable">non compilabile</span>
+        Il nodo e’ <strong>valido</strong>: non c’e’ niente da correggere. Il compilatore non lo
+        traduce in questa versione, quindi per questo nodo
+        <strong>non verra’ generato SQL</strong>.
+      </p>
+    }
+
+    <section class="dpe-section">
+      <h4 class="dpe-section__title">Schema in uscita</h4>
+      @if (columns().length === 0) {
+        <p class="dpe-empty">
+          Nessuna colonna: il backend non ha (ancora) propagato uno schema per questo nodo.
+        </p>
+      } @else {
+        <div class="dpe-columns">
+          @for (column of columns(); track $index) {
+            <span
+              class="dpe-column"
+              [class.dpe-column--nullable]="column.isNullable"
+              [title]="column.type.kind + (column.isNullable ? ' · nullabile' : ' · non nulla')"
+            >
+              {{ column.name }}
+            </span>
+          }
+        </div>
+        <p class="dpe-field__hint">
+          Tratteggiate le colonne nullabili. Lo schema arriva da <code>validate</code>: non lo
+          calcoliamo qui.
+        </p>
+      }
+    </section>
+
+    @if (diagnostics().length > 0) {
+      <section class="dpe-section">
+        <h4 class="dpe-section__title">Rilievi su questo nodo</h4>
+        @for (diagnostic of diagnostics(); track $index) {
+          <p
+            class="dpe-field__issue"
+            [class.dpe-field__issue--warning]="diagnostic.severity === 'Warning'"
+            [class.dpe-field__issue--info]="diagnostic.severity === 'Info'"
+          >
+            <code>{{ diagnostic.code }}</code> — {{ diagnostic.message }}
+          </p>
+        }
+      </section>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DpeNodeFactsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dpe-node-facts',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @if (isNotCompilable()) {
+      <!--
+        Tono deliberatamente **non** da errore: colore proprio (ne’ rosso ne’ giallo) e le stesse
+        parole degli ispettori di Forecast e CustomNode, perche’ e’ lo stesso fatto detto nello
+        stesso linguaggio. Chiedere di correggere qualcosa qui sarebbe una bugia.
+      -->
+      <p class="dpe-note dpe-note--not-compilable">
+        <span class="dpe-badge dpe-badge--not-compilable">non compilabile</span>
+        Il nodo e’ <strong>valido</strong>: non c’e’ niente da correggere. Il compilatore non lo
+        traduce in questa versione, quindi per questo nodo
+        <strong>non verra’ generato SQL</strong>.
+      </p>
+    }
+
+    <section class="dpe-section">
+      <h4 class="dpe-section__title">Schema in uscita</h4>
+      @if (columns().length === 0) {
+        <p class="dpe-empty">
+          Nessuna colonna: il backend non ha (ancora) propagato uno schema per questo nodo.
+        </p>
+      } @else {
+        <div class="dpe-columns">
+          @for (column of columns(); track $index) {
+            <span
+              class="dpe-column"
+              [class.dpe-column--nullable]="column.isNullable"
+              [title]="column.type.kind + (column.isNullable ? ' · nullabile' : ' · non nulla')"
+            >
+              {{ column.name }}
+            </span>
+          }
+        </div>
+        <p class="dpe-field__hint">
+          Tratteggiate le colonne nullabili. Lo schema arriva da <code>validate</code>: non lo
+          calcoliamo qui.
+        </p>
+      }
+    </section>
+
+    @if (diagnostics().length > 0) {
+      <section class="dpe-section">
+        <h4 class="dpe-section__title">Rilievi su questo nodo</h4>
+        @for (diagnostic of diagnostics(); track $index) {
+          <p
+            class="dpe-field__issue"
+            [class.dpe-field__issue--warning]="diagnostic.severity === 'Warning'"
+            [class.dpe-field__issue--info]="diagnostic.severity === 'Info'"
+          >
+            <code>{{ diagnostic.code }}</code> — {{ diagnostic.message }}
+          </p>
+        }
+      </section>
+    }
+  `,
+                }]
+        }], propDecorators: { nodeName: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeName", required: true }] }] } });
+
 /**
  * `[dpeValue]` su un `<select>`.
  *
@@ -7491,48 +7734,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
         }] });
 
 /**
- * Il contenitore degli ispettori: campi comuni, poi l'ispettore della categoria.
+ * **Solo** i campi modificabili di **un** nodo: i campi comuni, poi l'ispettore della categoria.
+ *
+ * Cio' che non c'e' piu', e dove e' andato (ADR 0026): la testata di identita' e' della dialog che
+ * lo contiene, le due sezioni di fatti in sola lettura sono di `dpe-node-facts`, e il caso «piu' di
+ * un nodo selezionato» e' una striscia contestuale del guscio. Non c'e' **nessun** booleano di
+ * modalita' al loro posto: si e' spostato contenuto, non aggiunto un interruttore che cambia il
+ * significato del componente.
  *
  * La **rinomina** sta qui e non nei singoli ispettori, per due ragioni. E' identica per tutte le
  * categorie, e soprattutto e' un refactoring globale (**I5**): passa dall'unico punto che
  * riscrive i riferimenti a valle, e prima di applicarla **dice quante occorrenze tocchera'**.
- * Rinominare non e' modificare un campo, e non deve sembrarlo.
- *
- * Con **piu' di un nodo selezionato** non si mostra l'editor del primo: si dichiara quanti sono e
- * si offrono solo le operazioni valide su molti. Mostrare i campi di uno mentre N sono evidenziati
- * e' la stessa bugia della doppia evidenziazione, detta piu' piano — l'utente crede di stare
- * agendo su cio' che vede selezionato.
+ * Rinominare non e' modificare un campo, e non deve sembrarlo. E' anche l'unica eccezione al
+ * commit dal vivo: ha una bozza locale perche' ha un bottone, non perche' sia in una dialog.
  */
 class DpeNodeInspectorComponent {
     store = inject(DpeDocumentStore);
-    /**
-     * Il riordino richiede le misure delle card, che le conosce il canvas: l'ispettore **chiede**,
-     * non calcola. Componente stupido, orchestrazione fuori.
-     */
-    layoutRequested = output();
-    selectedNames = computed(() => this.store.selectedNodeNames(), ...(ngDevMode ? [{ debugName: "selectedNames" }] : []));
     located = computed(() => {
         const name = this.store.selectedNodeName();
         return name === undefined ? undefined : dpeFindNode(this.store.definition(), name);
     }, ...(ngDevMode ? [{ debugName: "located" }] : []));
     nameDraft = signal('', ...(ngDevMode ? [{ debugName: "nameDraft" }] : []));
-    categoryLabel = computed(() => {
-        const entry = this.located();
-        return entry ? dpeNodeCategory(entry.collection).label : '';
-    }, ...(ngDevMode ? [{ debugName: "categoryLabel" }] : []));
-    /** La classe di famiglia dell'icona: la stessa funzione che usano palette e canvas. */
-    familyClass = computed(() => {
-        const entry = this.located();
-        return entry ? dpeNodeIconFamilyClass(entry.collection) : '';
-    }, ...(ngDevMode ? [{ debugName: "familyClass" }] : []));
-    columns = computed(() => {
-        const entry = this.located();
-        return entry ? (this.store.schemaByNode().get(entry.node.name)?.columns ?? []) : [];
-    }, ...(ngDevMode ? [{ debugName: "columns" }] : []));
-    diagnostics = computed(() => {
-        const entry = this.located();
-        return entry ? (this.store.diagnosticsByNode().get(entry.node.name)?.diagnostics ?? []) : [];
-    }, ...(ngDevMode ? [{ debugName: "diagnostics" }] : []));
     referenceCount = computed(() => {
         const entry = this.located();
         return entry ? this.store.countReferences(entry.node.name) : 0;
@@ -7550,15 +7772,6 @@ class DpeNodeInspectorComponent {
             this.nameDraft.set(entry?.node.name ?? '');
         });
     }
-    /**
-     * Elimina i nodi selezionati. Si itera su una **copia** dei nomi: `removeNode` pota la selezione
-     * a ogni giro, e scorrere il signal mentre lo si svuota salterebbe la meta' dei nodi.
-     */
-    removeSelected() {
-        for (const name of [...this.selectedNames()]) {
-            this.store.removeNode(name);
-        }
-    }
     rename(currentName) {
         this.store.renameNode(currentName, this.nameDraft().trim());
     }
@@ -7611,59 +7824,8 @@ class DpeNodeInspectorComponent {
         return node;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DpeNodeInspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: DpeNodeInspectorComponent, isStandalone: true, selector: "dpe-node-inspector", outputs: { layoutRequested: "layoutRequested" }, ngImport: i0, template: `
-    @if (selectedNames().length > 1) {
-      <!--
-        Selezione multipla: si dice quanti sono e si offre solo cio' che ha senso su molti. Nessun
-        campo del primo nodo, perche' non e' su quello che l’utente sta agendo.
-      -->
-      <div class="dpe-inspector__head">
-        <strong>{{ selectedNames().length }} nodi selezionati</strong>
-        <span class="dpe-inspector__category">selezione</span>
-      </div>
-
-      <ul class="dpe-multi__names">
-        @for (name of selectedNames(); track $index) {
-          <li class="dpe-multi__name">{{ name }}</li>
-        }
-      </ul>
-
-      <p class="dpe-note">
-        I campi di un singolo nodo si modificano con un nodo solo selezionato: mostrarli qui
-        farebbe credere di agire su tutti.
-      </p>
-
-      <div class="dpe-row">
-        <button type="button" class="dpe-btn" (click)="removeSelected()">
-          Elimina i {{ selectedNames().length }} nodi
-        </button>
-        <!--
-          Il riordino e’ dichiaratamente **dell’intero grafo**: dagre su un sottografo sarebbe una
-          funzione nuova, e chiamarla «riordina i selezionati» mentre riordina tutto sarebbe una
-          bugia — la stessa classe di difetto che questo pannello esiste per evitare.
-        -->
-        <button type="button" class="dpe-btn" (click)="layoutRequested.emit()">
-          Riordina il grafo
-        </button>
-      </div>
-
-      <p class="dpe-note dpe-note--warning">
-        L’eliminazione lascia i riferimenti a valle così come sono: diventano riferimenti rotti, e
-        il backend li segnala. Si annulla con ↶.
-      </p>
-    } @else if (located(); as entry) {
-      <div class="dpe-inspector__head">
-        <!--
-          La stessa icona della palette e della card: il terzo posto in cui compare il tipo, e
-          deve avere lo stesso aspetto degli altri due.
-        -->
-        <span class="dpe-inspector__icon" [class]="'dpe-inspector__icon ' + familyClass()">
-          <dpe-node-icon [collection]="entry.collection" />
-        </span>
-        <strong class="dpe-inspector__name">{{ entry.node.label || entry.node.name }}</strong>
-        <span class="dpe-inspector__category">{{ categoryLabel() }}</span>
-      </div>
-
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: DpeNodeInspectorComponent, isStandalone: true, selector: "dpe-node-inspector", ngImport: i0, template: `
+    @if (located(); as entry) {
       <div class="dpe-form">
         <div class="dpe-field">
           <label class="dpe-field__label" for="node-name">Nome tecnico</label>
@@ -7751,50 +7913,10 @@ class DpeNodeInspectorComponent {
           }
         }
       </section>
-
-      <section class="dpe-section">
-        <h4 class="dpe-section__title">Schema in uscita</h4>
-        @if (columns().length === 0) {
-          <p class="dpe-empty">
-            Nessuna colonna: il backend non ha (ancora) propagato uno schema per questo nodo.
-          </p>
-        } @else {
-          <div class="dpe-columns">
-            @for (column of columns(); track $index) {
-              <span
-                class="dpe-column"
-                [class.dpe-column--nullable]="column.isNullable"
-                [title]="column.type.kind + (column.isNullable ? ' · nullabile' : ' · non nulla')"
-              >
-                {{ column.name }}
-              </span>
-            }
-          </div>
-          <p class="dpe-field__hint">
-            Tratteggiate le colonne nullabili. Lo schema arriva da <code>validate</code>: non lo
-            calcoliamo qui.
-          </p>
-        }
-      </section>
-
-      @if (diagnostics().length > 0) {
-        <section class="dpe-section">
-          <h4 class="dpe-section__title">Rilievi su questo nodo</h4>
-          @for (diagnostic of diagnostics(); track $index) {
-            <p
-              class="dpe-field__issue"
-              [class.dpe-field__issue--warning]="diagnostic.severity === 'Warning'"
-              [class.dpe-field__issue--info]="diagnostic.severity === 'Info'"
-            >
-              <code>{{ diagnostic.code }}</code> — {{ diagnostic.message }}
-            </p>
-          }
-        </section>
-      }
     } @else {
       <p class="dpe-empty">Nessun nodo selezionato.</p>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: DpeAggregateInspectorComponent, selector: "dpe-aggregate-inspector" }, { kind: "component", type: DpeAppendInspectorComponent, selector: "dpe-append-inspector" }, { kind: "component", type: DpeAtomicWritebackInspectorComponent, selector: "dpe-atomic-writeback-inspector" }, { kind: "component", type: DpeCustomNodeInspectorComponent, selector: "dpe-custom-node-inspector" }, { kind: "component", type: DpeDataSourceInspectorComponent, selector: "dpe-data-source-inspector" }, { kind: "component", type: DpeFilterInspectorComponent, selector: "dpe-filter-inspector" }, { kind: "component", type: DpeForecastInspectorComponent, selector: "dpe-forecast-inspector" }, { kind: "component", type: DpeHierarchyPathInspectorComponent, selector: "dpe-hierarchy-path-inspector" }, { kind: "component", type: DpeJoinInspectorComponent, selector: "dpe-join-inspector" }, { kind: "component", type: DpeTransformInspectorComponent, selector: "dpe-transform-inspector" }, { kind: "component", type: DpeWritebackInspectorComponent, selector: "dpe-writeback-inspector" }, { kind: "component", type: DpeNodeIconComponent, selector: "dpe-node-icon", inputs: ["collection"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: DpeAggregateInspectorComponent, selector: "dpe-aggregate-inspector" }, { kind: "component", type: DpeAppendInspectorComponent, selector: "dpe-append-inspector" }, { kind: "component", type: DpeAtomicWritebackInspectorComponent, selector: "dpe-atomic-writeback-inspector" }, { kind: "component", type: DpeCustomNodeInspectorComponent, selector: "dpe-custom-node-inspector" }, { kind: "component", type: DpeDataSourceInspectorComponent, selector: "dpe-data-source-inspector" }, { kind: "component", type: DpeFilterInspectorComponent, selector: "dpe-filter-inspector" }, { kind: "component", type: DpeForecastInspectorComponent, selector: "dpe-forecast-inspector" }, { kind: "component", type: DpeHierarchyPathInspectorComponent, selector: "dpe-hierarchy-path-inspector" }, { kind: "component", type: DpeJoinInspectorComponent, selector: "dpe-join-inspector" }, { kind: "component", type: DpeTransformInspectorComponent, selector: "dpe-transform-inspector" }, { kind: "component", type: DpeWritebackInspectorComponent, selector: "dpe-writeback-inspector" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DpeNodeInspectorComponent, decorators: [{
             type: Component,
@@ -7813,62 +7935,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         DpeJoinInspectorComponent,
                         DpeTransformInspectorComponent,
                         DpeWritebackInspectorComponent,
-                        DpeNodeIconComponent,
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    @if (selectedNames().length > 1) {
-      <!--
-        Selezione multipla: si dice quanti sono e si offre solo cio' che ha senso su molti. Nessun
-        campo del primo nodo, perche' non e' su quello che l’utente sta agendo.
-      -->
-      <div class="dpe-inspector__head">
-        <strong>{{ selectedNames().length }} nodi selezionati</strong>
-        <span class="dpe-inspector__category">selezione</span>
-      </div>
-
-      <ul class="dpe-multi__names">
-        @for (name of selectedNames(); track $index) {
-          <li class="dpe-multi__name">{{ name }}</li>
-        }
-      </ul>
-
-      <p class="dpe-note">
-        I campi di un singolo nodo si modificano con un nodo solo selezionato: mostrarli qui
-        farebbe credere di agire su tutti.
-      </p>
-
-      <div class="dpe-row">
-        <button type="button" class="dpe-btn" (click)="removeSelected()">
-          Elimina i {{ selectedNames().length }} nodi
-        </button>
-        <!--
-          Il riordino e’ dichiaratamente **dell’intero grafo**: dagre su un sottografo sarebbe una
-          funzione nuova, e chiamarla «riordina i selezionati» mentre riordina tutto sarebbe una
-          bugia — la stessa classe di difetto che questo pannello esiste per evitare.
-        -->
-        <button type="button" class="dpe-btn" (click)="layoutRequested.emit()">
-          Riordina il grafo
-        </button>
-      </div>
-
-      <p class="dpe-note dpe-note--warning">
-        L’eliminazione lascia i riferimenti a valle così come sono: diventano riferimenti rotti, e
-        il backend li segnala. Si annulla con ↶.
-      </p>
-    } @else if (located(); as entry) {
-      <div class="dpe-inspector__head">
-        <!--
-          La stessa icona della palette e della card: il terzo posto in cui compare il tipo, e
-          deve avere lo stesso aspetto degli altri due.
-        -->
-        <span class="dpe-inspector__icon" [class]="'dpe-inspector__icon ' + familyClass()">
-          <dpe-node-icon [collection]="entry.collection" />
-        </span>
-        <strong class="dpe-inspector__name">{{ entry.node.label || entry.node.name }}</strong>
-        <span class="dpe-inspector__category">{{ categoryLabel() }}</span>
-      </div>
-
+    @if (located(); as entry) {
       <div class="dpe-form">
         <div class="dpe-field">
           <label class="dpe-field__label" for="node-name">Nome tecnico</label>
@@ -7956,52 +8026,302 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
           }
         }
       </section>
+    } @else {
+      <p class="dpe-empty">Nessun nodo selezionato.</p>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * La finestra di modifica di un nodo: elemento `<dialog>` **nativo**, aperto con `showModal()`
+ * (ADR 0026).
+ *
+ * Perche' l'elemento nativo e non un overlay scritto a mano: **Esc**, il **focus trap** (con la
+ * finestra aperta il Tab non esce), il **fondo inerte** per puntatore *e* tastiera, `::backdrop`
+ * come pseudo-elemento standard e nessun `z-index` — il top layer sta sopra ogni stacking context
+ * senza partecipare alla gara. Sono tutte cose che un overlay dovrebbe reimplementare, e il focus
+ * trap in particolare non si scrive in due righe.
+ *
+ * **Una sola istanza** nel guscio, fratello di `.dpe-shell__body`. Resta nel sottoalbero DOM del
+ * componente e non si trapianta in `document.body`: il top layer e' una promozione **visiva**, non
+ * un trapianto, quindi gli eventi risalgono l'albero e il `Ctrl+S` del guscio continua a
+ * funzionare.
+ *
+ * **Le modifiche si applicano dal vivo**: gli ispettori scrivono nello store a ogni `(change)`,
+ * qui non esiste nessuna bozza locale e il piede ha «Chiudi», non «OK / Annulla». Una bozza
+ * produrrebbe due nozioni di annullamento in disaccordo con ↶ e rilievi che descrivono un
+ * documento diverso da quello mostrato. Conseguenza dichiarata in interfaccia: **chiudere non
+ * annulla**.
+ *
+ * Il nodo **non arriva per input**: si rideriva da `selectedNodeName()`, cosi' se cambia sotto
+ * (una rinomina) la dialog lo segue invece di guardare un nome che non esiste piu'.
+ */
+/**
+ * Contatore di istanza per l'id dell'etichetta. Serve perche' `aria-labelledby` punta a un id, e
+ * due editor nella stessa pagina sono due dialog: con un id fisso il documento avrebbe due
+ * elementi con lo stesso id e il nome accessibile della seconda finestra sarebbe quello della
+ * prima. Non e' una preferenza di stile — un id duplicato e' un difetto che solo uno screen
+ * reader mostra.
+ */
+let nextLabelId = 0;
+class DpeNodeDialogComponent {
+    store = inject(DpeDocumentStore);
+    dialogRef = viewChild.required('dlg');
+    labelId = `dpe-node-dialog-label-${(nextLabelId += 1)}`;
+    /**
+     * Il nodo corrente, **riderivato** dallo store come fa il dispatcher degli ispettori. Non si
+     * conserva il nome: se il nodo viene rinominato, `selectedNodeName()` porta gia' il nome nuovo.
+     */
+    located = computed(() => {
+        const name = this.store.selectedNodeName();
+        return name === undefined ? undefined : dpeFindNode(this.store.definition(), name);
+    }, ...(ngDevMode ? [{ debugName: "located" }] : []));
+    categoryLabel = computed(() => {
+        const entry = this.located();
+        return entry ? dpeNodeCategory(entry.collection).label : '';
+    }, ...(ngDevMode ? [{ debugName: "categoryLabel" }] : []));
+    familyClass = computed(() => {
+        const entry = this.located();
+        return entry ? dpeNodeIconFamilyClass(entry.collection) : '';
+    }, ...(ngDevMode ? [{ debugName: "familyClass" }] : []));
+    /**
+     * Vero quando il fondo ha ricevuto il `pointerdown` di questo clic. Vedi `onDialogClick`: la
+     * verifica di coppia non e' prudenza, e' la correzione di un difetto reale.
+     */
+    pointerDownWasOnBackdrop = false;
+    constructor() {
+        effect(() => {
+            const el = this.dialogRef().nativeElement;
+            const shouldBeOpen = this.store.isNodeEditorOpen() && this.located() !== undefined;
+            // La guardia su `el.open` **non e' cosmetica**: `showModal()` su una dialog gia' aperta
+            // lancia `InvalidStateError`, e questo effect riesegue a ogni mutazione del documento
+            // (legge `located()`). Senza, aprire e modificare un campo basterebbe a far comparire
+            // l'eccezione in console.
+            if (shouldBeOpen && !el.open) {
+                el.showModal();
+            }
+            else if (!shouldBeOpen && el.open) {
+                el.close();
+            }
+        });
+    }
+    /**
+     * **Esc.** Il browser chiede di chiudere e la finestra e' ancora aperta: la richiesta riguarda
+     * per definizione la sessione corrente, quindi si chiude e non serve nessuna verifica.
+     *
+     * Perche' `cancel` e' legato, contro cio' che sembra sufficiente: in Chrome 151 l'evento `close`
+     * **arriva molto in ritardo** (vedi `onClose`), quindi con il solo `close` lo store restava
+     * «aperta» dopo Esc — e il sintomo era che **riaprire lo stesso nodo non faceva niente**: il
+     * signal non cambiava, l'effect non rieseguiva, `showModal()` non veniva mai chiamato. Sul
+     * bottone del piede non si vedeva, perche' quella via passa dallo store.
+     *
+     * `cancel` sarebbe annullabile: non si annulla. La chiusura dell'elemento arriva comunque dal
+     * browser, e la guardia su `el.open` nell'effect regge in entrambi gli ordini.
+     */
+    onCancel() {
+        this.store.closeNodeEditor();
+    }
+    /**
+     * **L'elemento si e' chiuso.** La guardia non e' prudenza: Chrome accoda `close` come task
+     * dell'elemento e lo consegna anche **dopo** una riapertura — misurato nella demo, la traccia
+     * degli eventi mostra `close` con `open: true` subito dopo un `showModal()`. Senza la guardia
+     * quel `close` in ritardo chiudeva la finestra appena aperta, e il sintomo era una dialog che
+     * «non si apre a volte»: sparisce da sola dopo essere comparsa, e con la finestra aperta si
+     * riapriva solo alla prima modifica del documento (l'unica cosa che faceva rieseguire l'effect).
+     *
+     * Se l'elemento risulta **aperto**, questo `close` riguarda una sessione precedente e si ignora.
+     * Se risulta chiuso, la notifica e' di questa sessione — e allineare qui lo store e' anche cio'
+     * che ripara una divergenza, se il browser chiudesse la finestra per vie sue.
+     */
+    onClose() {
+        if (this.dialogRef().nativeElement.open) {
+            return;
+        }
+        this.store.closeNodeEditor();
+    }
+    onPointerDown(event) {
+        this.pointerDownWasOnBackdrop = event.target === this.dialogRef().nativeElement;
+    }
+    /**
+     * Chiusura al clic sul fondo, con la **verifica di coppia** e non con il solo controllo sul
+     * click. I clic sul velo sono recapitati all'elemento `<dialog>` stesso — ma anche un
+     * trascinamento di selezione del testo che **inizia** dentro una casella e **finisce** fuori
+     * produce un `click` con `target` uguale alla dialog. Con la sola verifica sul click, selezionare
+     * del testo chiuderebbe la finestra.
+     */
+    onDialogClick(event) {
+        if (this.pointerDownWasOnBackdrop && event.target === this.dialogRef().nativeElement) {
+            this.store.closeNodeEditor();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DpeNodeDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: DpeNodeDialogComponent, isStandalone: true, selector: "dpe-node-dialog", viewQueries: [{ propertyName: "dialogRef", first: true, predicate: ["dlg"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <!--
+      L’elemento dialog sta **sempre** nel template, e solo il contenuto e’ condizionato: cosi’
+      viewChild.required non puo’ fallire e l’effect che apre non deve difendersi da un riferimento
+      assente. Una dialog vuota e chiusa non rende niente — il foglio dell’agente utente le da’
+      display: none.
+    -->
+    <dialog
+      #dlg
+      class="dpe-dialog"
+      [attr.aria-labelledby]="labelId"
+      (close)="onClose()"
+      (cancel)="onCancel()"
+      (click)="onDialogClick($event)"
+      (pointerdown)="onPointerDown($event)"
+    >
+      @if (located(); as entry) {
+        <header class="dpe-dialog__head">
+          <!--
+            Quarto posto in cui compare il tipo di nodo (palette, card del canvas, ispettore, qui):
+            stessa icona e stessa classe di famiglia, calcolate dalle stesse funzioni. Un tipo che
+            cambia aspetto da un posto all’altro e’ un tipo che non si riconosce.
+          -->
+          <span class="dpe-dialog__icon" [class]="'dpe-dialog__icon ' + familyClass()">
+            <dpe-node-icon [collection]="entry.collection" />
+          </span>
+          <strong class="dpe-dialog__label" [id]="labelId">
+            {{ entry.node.label || entry.node.name }}
+          </strong>
+          <span class="dpe-dialog__category">{{ categoryLabel() }}</span>
+          <code class="dpe-dialog__name">{{ entry.node.name }}</code>
+          <button
+            type="button"
+            class="dpe-dialog__btn dpe-dialog__btn--icon"
+            aria-label="Chiudi la finestra di modifica"
+            title="Chiudi (Esc). Le modifiche sono già nel documento."
+            (click)="store.closeNodeEditor()"
+          >
+            ✕
+          </button>
+        </header>
+
+        <div class="dpe-dialog__body">
+          <!-- Colonna larga: i campi. E’ la ragione per cui questa finestra esiste. -->
+          <div class="dpe-dialog__main">
+            <dpe-node-inspector />
+          </div>
 
-      <section class="dpe-section">
-        <h4 class="dpe-section__title">Schema in uscita</h4>
-        @if (columns().length === 0) {
-          <p class="dpe-empty">
-            Nessuna colonna: il backend non ha (ancora) propagato uno schema per questo nodo.
+          <!--
+            Colonna stretta: i fatti dal backend su **questo** nodo. Non entra cio’ che riguarda il
+            grafo — diagnostiche di tutta la definizione, schema di tutti i nodi e SQL generato
+            hanno gia’ le loro linguette nel pannello inferiore.
+          -->
+          <aside class="dpe-dialog__side">
+            <dpe-node-facts [nodeName]="entry.node.name" />
+          </aside>
+        </div>
+
+        <footer class="dpe-dialog__foot">
+          <p class="dpe-dialog__note">
+            Le modifiche sono <strong>già nel documento</strong>: chiudere non le annulla. Si torna
+            indietro con ↶ nella barra.
           </p>
-        } @else {
-          <div class="dpe-columns">
-            @for (column of columns(); track $index) {
-              <span
-                class="dpe-column"
-                [class.dpe-column--nullable]="column.isNullable"
-                [title]="column.type.kind + (column.isNullable ? ' · nullabile' : ' · non nulla')"
-              >
-                {{ column.name }}
-              </span>
-            }
+          <button
+            type="button"
+            class="dpe-dialog__btn dpe-dialog__btn--danger"
+            title="Elimina il nodo: i riferimenti a valle restano e diventano riferimenti rotti. Si annulla con ↶."
+            (click)="store.removeNode(entry.node.name)"
+          >
+            Elimina il nodo
+          </button>
+          <button type="button" class="dpe-dialog__btn" (click)="store.closeNodeEditor()">
+            Chiudi
+          </button>
+        </footer>
+      }
+    </dialog>
+  `, isInline: true, dependencies: [{ kind: "component", type: DpeNodeFactsComponent, selector: "dpe-node-facts", inputs: ["nodeName"] }, { kind: "component", type: DpeNodeInspectorComponent, selector: "dpe-node-inspector" }, { kind: "component", type: DpeNodeIconComponent, selector: "dpe-node-icon", inputs: ["collection"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DpeNodeDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dpe-node-dialog',
+                    standalone: true,
+                    imports: [DpeNodeFactsComponent, DpeNodeInspectorComponent, DpeNodeIconComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <!--
+      L’elemento dialog sta **sempre** nel template, e solo il contenuto e’ condizionato: cosi’
+      viewChild.required non puo’ fallire e l’effect che apre non deve difendersi da un riferimento
+      assente. Una dialog vuota e chiusa non rende niente — il foglio dell’agente utente le da’
+      display: none.
+    -->
+    <dialog
+      #dlg
+      class="dpe-dialog"
+      [attr.aria-labelledby]="labelId"
+      (close)="onClose()"
+      (cancel)="onCancel()"
+      (click)="onDialogClick($event)"
+      (pointerdown)="onPointerDown($event)"
+    >
+      @if (located(); as entry) {
+        <header class="dpe-dialog__head">
+          <!--
+            Quarto posto in cui compare il tipo di nodo (palette, card del canvas, ispettore, qui):
+            stessa icona e stessa classe di famiglia, calcolate dalle stesse funzioni. Un tipo che
+            cambia aspetto da un posto all’altro e’ un tipo che non si riconosce.
+          -->
+          <span class="dpe-dialog__icon" [class]="'dpe-dialog__icon ' + familyClass()">
+            <dpe-node-icon [collection]="entry.collection" />
+          </span>
+          <strong class="dpe-dialog__label" [id]="labelId">
+            {{ entry.node.label || entry.node.name }}
+          </strong>
+          <span class="dpe-dialog__category">{{ categoryLabel() }}</span>
+          <code class="dpe-dialog__name">{{ entry.node.name }}</code>
+          <button
+            type="button"
+            class="dpe-dialog__btn dpe-dialog__btn--icon"
+            aria-label="Chiudi la finestra di modifica"
+            title="Chiudi (Esc). Le modifiche sono già nel documento."
+            (click)="store.closeNodeEditor()"
+          >
+            ✕
+          </button>
+        </header>
+
+        <div class="dpe-dialog__body">
+          <!-- Colonna larga: i campi. E’ la ragione per cui questa finestra esiste. -->
+          <div class="dpe-dialog__main">
+            <dpe-node-inspector />
           </div>
-          <p class="dpe-field__hint">
-            Tratteggiate le colonne nullabili. Lo schema arriva da <code>validate</code>: non lo
-            calcoliamo qui.
-          </p>
-        }
-      </section>
 
-      @if (diagnostics().length > 0) {
-        <section class="dpe-section">
-          <h4 class="dpe-section__title">Rilievi su questo nodo</h4>
-          @for (diagnostic of diagnostics(); track $index) {
-            <p
-              class="dpe-field__issue"
-              [class.dpe-field__issue--warning]="diagnostic.severity === 'Warning'"
-              [class.dpe-field__issue--info]="diagnostic.severity === 'Info'"
-            >
-              <code>{{ diagnostic.code }}</code> — {{ diagnostic.message }}
-            </p>
-          }
-        </section>
+          <!--
+            Colonna stretta: i fatti dal backend su **questo** nodo. Non entra cio’ che riguarda il
+            grafo — diagnostiche di tutta la definizione, schema di tutti i nodi e SQL generato
+            hanno gia’ le loro linguette nel pannello inferiore.
+          -->
+          <aside class="dpe-dialog__side">
+            <dpe-node-facts [nodeName]="entry.node.name" />
+          </aside>
+        </div>
+
+        <footer class="dpe-dialog__foot">
+          <p class="dpe-dialog__note">
+            Le modifiche sono <strong>già nel documento</strong>: chiudere non le annulla. Si torna
+            indietro con ↶ nella barra.
+          </p>
+          <button
+            type="button"
+            class="dpe-dialog__btn dpe-dialog__btn--danger"
+            title="Elimina il nodo: i riferimenti a valle restano e diventano riferimenti rotti. Si annulla con ↶."
+            (click)="store.removeNode(entry.node.name)"
+          >
+            Elimina il nodo
+          </button>
+          <button type="button" class="dpe-dialog__btn" (click)="store.closeNodeEditor()">
+            Chiudi
+          </button>
+        </footer>
       }
-    } @else {
-      <p class="dpe-empty">Nessun nodo selezionato.</p>
-    }
+    </dialog>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { layoutRequested: [{ type: i0.Output, args: ["layoutRequested"] }] } });
+        }], ctorParameters: () => [], propDecorators: { dialogRef: [{ type: i0.ViewChild, args: ['dlg', { isSignal: true }] }] } });
 
 /**
  * La palette dei nodi.
@@ -8649,6 +8969,8 @@ class DpeBuilderComponent {
         this.store.isDirty() &&
         this.hasKey(), ...(ngDevMode ? [{ debugName: "canSave" }] : []));
     nodeCount = computed(() => dpeAllNodes(this.store.definition()).length, ...(ngDevMode ? [{ debugName: "nodeCount" }] : []));
+    /** I nomi selezionati: la striscia contestuale compare da due in su. */
+    selectedNames = computed(() => this.store.selectedNodeNames(), ...(ngDevMode ? [{ debugName: "selectedNames" }] : []));
     constructor() {
         // Caricamento: si reagisce all'**identita'** dell'input, non al suo contenuto. Lo store
         // diventa la fonte di verita' da qui in poi.
@@ -8709,6 +9031,28 @@ class DpeBuilderComponent {
         // mouse subito dopo averlo rilasciato e' un passaggio inutile.
         this.store.select(name);
     }
+    /**
+     * Doppio clic sul nodo, o bottone `✎` sulla card: i due gesti che il canvas emetteva su
+     * `nodeOpened` e che **nessuno ascoltava** — il bottone non produceva nemmeno la selezione.
+     *
+     * Due cose, in quest'ordine. Si apre la dialog (che collassa la selezione a quel nodo) e si
+     * **inquadra** il nodo: sotto il velo non si vede, ma alla chiusura si torna guardando il nodo su
+     * cui si e' lavorato invece del punto dov'era il grafo prima.
+     */
+    onNodeOpened(name) {
+        this.store.openNodeEditor(name);
+        this.canvas()?.revealNode(name);
+    }
+    /**
+     * Elimina i nodi selezionati (striscia della selezione multipla). Si itera su una **copia** dei
+     * nomi: `removeNode` pota la selezione a ogni giro, e scorrere il signal mentre lo si svuota
+     * salterebbe la meta' dei nodi.
+     */
+    removeSelectedNodes() {
+        for (const name of [...this.selectedNames()]) {
+            this.store.removeNode(name);
+        }
+    }
     /** Clic sulla palette (via tastiera compresa): il nodo nasce in un punto libero e prevedibile. */
     onNodeRequested(collection) {
         const existing = this.store.positions();
@@ -8762,18 +9106,18 @@ class DpeBuilderComponent {
         this.store.markSaved();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DpeBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: DpeBuilderComponent, isStandalone: true, selector: "dpe-builder", inputs: { definition: { classPropertyName: "definition", publicName: "definition", isSignal: true, isRequired: true, transformFunction: null }, isEditable: { classPropertyName: "isEditable", publicName: "isEditable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { definitionChange: "definitionChange" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, providers: [DpeDocumentStore, DpeLayoutService, DpeValidationService, DpeMetadataStore], viewQueries: [{ propertyName: "canvas", first: true, predicate: DpeCanvasComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  `.dpe-builder` porta le variabili del tema: e\u2019 la classe radice su cui l\u2019app ospite le\r\n  sovrascrive, e `data-dpe-theme=\"dark\"` sul contenitore ridefinisce i soli token.\r\n-->\r\n<div class=\"dpe-builder dpe-shell\">\r\n  <header class=\"dpe-shell__bar\">\r\n    <div class=\"dpe-shell__title\">\r\n      <strong>{{ store.definition().label || store.definition().name || 'Definizione DPE' }}</strong>\r\n      <span class=\"dpe-shell__sub\">{{ nodeCount() }} nodi</span>\r\n      <!--\r\n        Stato **sporco** rispetto all\u2019ultimo salvataggio, non un conteggio di operazioni: serve a\r\n        decidere se salvare, e un contatore che sale quando si annulla risponde alla domanda\r\n        sbagliata. Annullare fino allo stato di partenza torna qui a \u00ABnessuna modifica\u00BB.\r\n      -->\r\n      <span\r\n        class=\"dpe-shell__dirty\"\r\n        [class.dpe-shell__dirty--on]=\"store.isDirty()\"\r\n        [title]=\"\r\n          store.isDirty()\r\n            ? 'Il documento differisce dall\u2019ultimo salvataggio'\r\n            : 'Il documento coincide con l\u2019ultimo salvataggio'\r\n        \"\r\n      >\r\n        @if (store.isDirty()) {\r\n          \u25CF modificata\r\n        } @else {\r\n          \u25CB nessuna modifica\r\n        }\r\n      </span>\r\n    </div>\r\n\r\n    <!--\r\n      Badge in **sola lettura** (ADR 0017): il dialetto e\u2019 dichiarato dall\u2019ambiente, non scelto\r\n      qui. Mostra quello della definizione, che e\u2019 quello con cui il backend compilera\u2019 (ADR\r\n      0009). Il titolo dice le due cose che contano \u2014 chi lo decide, e che le espressioni sono\r\n      SQL nativo di quel dialetto (ADR 0006).\r\n    -->\r\n    <span\r\n      class=\"dpe-shell__dialect\"\r\n      title=\"Il dialetto e\u2019 dichiarato dall\u2019ambiente e non si modifica dall\u2019editor. Le espressioni sono SQL nativo di questo dialetto: la definizione gli appartiene.\"\r\n    >\r\n      Dialetto \u00B7 <strong>{{ dialectLabels[dialect()] }}</strong>\r\n    </span>\r\n\r\n    <div class=\"dpe-shell__group\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"dpe-shell__btn\"\r\n        [disabled]=\"!store.canUndo()\"\r\n        title=\"Annulla (la cronologia e\u2019 una conseguenza dell\u2019immutabilita\u2019 dello stato)\"\r\n        (click)=\"store.undo()\"\r\n      >\r\n        \u21B6 Annulla\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"dpe-shell__btn\"\r\n        [disabled]=\"!store.canRedo()\"\r\n        title=\"Ripeti\"\r\n        (click)=\"store.redo()\"\r\n      >\r\n        \u21B7 Ripeti\r\n      </button>\r\n      <button type=\"button\" class=\"dpe-shell__btn\" title=\"Riordina il grafo\" (click)=\"runAutoLayout()\">\r\n        \u2317 Riordina\r\n      </button>\r\n    </div>\r\n\r\n    <!--\r\n      Salvataggio attraverso il contratto (`DpeBuilderApi.save`, opzionale). E\u2019 il comando\r\n      **primario**, separato dal gruppo annulla/ripeti/riordina: quelli disfano, questo scrive.\r\n\r\n      **Sempre presente, mai nascosto.** Un bottone assente dice \u00ABquesto editor non salva\u00BB; un\r\n      bottone disabilitato con il motivo dice \u00ABqui non si salva, ed ecco perche\u2019\u00BB \u2014 ed e\u2019 la\r\n      verita\u2019 quando l\u2019host non espone `save()`. La disponibilita\u2019 si sa **prima del clic**\r\n      (`core/dpe-capabilities.ts`), non dal primo fallimento.\r\n    -->\r\n    <div class=\"dpe-shell__group dpe-shell__group--primary\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"dpe-shell__btn dpe-shell__btn--primary\"\r\n        [disabled]=\"!canSave()\"\r\n        [title]=\"\r\n          !validation.isSaveAvailable()\r\n            ? 'Salvataggio non disponibile su questo ambiente: l\u2019host non espone save()'\r\n            : validation.isSaving()\r\n              ? 'Salvataggio in corso'\r\n              : !hasKey()\r\n                ? 'Il documento non ha un nome: e\u2019 la chiave del catalogo, e va creato da la\u2019 (l\u2019aggiornamento e\u2019 PUT /definitions/{nome})'\r\n                : store.isDirty()\r\n                  ? 'Salva la definizione (Ctrl+S)'\r\n                  : 'Nessuna modifica da salvare'\r\n        \"\r\n        (click)=\"validation.save()\"\r\n      >\r\n        @if (validation.isSaving()) {\r\n          \u2913 Salvataggio\u2026\r\n        } @else {\r\n          \u2913 Salva\r\n        }\r\n      </button>\r\n      @if (validation.justSaved()) {\r\n        <!-- Avviso transitorio: il fatto durevole e\u2019 \u00ABnessuna modifica\u00BB nell\u2019indicatore. -->\r\n        <span class=\"dpe-shell__toast\" role=\"status\">\u2713 Salvata</span>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"dpe-shell__status\">\r\n      @if (validation.isValidating()) {\r\n        <span class=\"dpe-shell__pill dpe-shell__pill--busy\">Validazione in corso\u2026</span>\r\n      } @else if (validation.error(); as error) {\r\n        <!--\r\n          Un guasto di trasporto non cancella le diagnostiche precedenti: dire \u00ABva tutto bene\u00BB\r\n          quando non lo sappiamo piu\u2019 e\u2019 peggio che mostrare un risultato vecchio dichiarandolo.\r\n        -->\r\n        <span class=\"dpe-shell__pill dpe-shell__pill--error\" [title]=\"error.message\">\r\n          Backend non raggiungibile ({{ error.category }})\r\n        </span>\r\n      } @else if (store.validateResult()) {\r\n        <span\r\n          class=\"dpe-shell__pill\"\r\n          [class.dpe-shell__pill--error]=\"store.validateResult()!.hasErrors\"\r\n          [class.dpe-shell__pill--ok]=\"!store.validateResult()!.hasErrors\"\r\n        >\r\n          @if (store.validateResult()!.hasErrors) {\r\n            Con errori\r\n          } @else {\r\n            Nessun errore\r\n          }\r\n        </span>\r\n      }\r\n    </div>\r\n  </header>\r\n\r\n  @if (dialectMismatch(); as declared) {\r\n    <!--\r\n      Disallineamento fra la dichiarazione dell\u2019ambiente e la definizione (ADR 0017). Si nominano\r\n      **entrambi** i dialetti e non si offre di correggere: correggere significherebbe migrare le\r\n      espressioni SQL native, ed e\u2019 dell\u2019host. Non e\u2019 una regola di dominio duplicata \u2014 non giudica\r\n      la definizione, riporta il disaccordo fra due fatti che l\u2019ospite ha fornito.\r\n    -->\r\n    <div class=\"dpe-shell__warn\" role=\"alert\">\r\n      <strong>\r\n        L\u2019ambiente dichiara {{ dialectLabels[declared] }}, la definizione e\u2019 scritta per\r\n        {{ dialectLabels[dialect()] }}.\r\n      </strong>\r\n      <p>\r\n        Il backend compilera\u2019 con il dialetto <strong>della definizione</strong>. Allinearli e\u2019 una\r\n        migrazione delle espressioni SQL native e non si fa da qui.\r\n      </p>\r\n    </div>\r\n  }\r\n\r\n  <!--\r\n    Il documento ricevuto non e' una definizione. Banner **persistente** e in cima: e' un difetto\r\n    dell'integrazione, non dell'utente, e un canvas vuoto da solo non lo dice \u2014 sembra una\r\n    definizione senza nodi. Non si nasconde l'editor: cio' che c'e' resta visibile, e il salvataggio\r\n    e' disabilitato da se' perche' la chiave manca.\r\n  -->\r\n  @if (documentProblem(); as problem) {\r\n    <div class=\"dpe-shell__warn dpe-shell__warn--error\" role=\"alert\">\r\n      <strong>Il documento ricevuto non e\u2019 una definizione: {{ problem }}.</strong>\r\n      <p>\r\n        L\u2019editor riceve il documento dall\u2019applicazione ospite, e questo non ha la forma di una\r\n        <code>DpeDefinition</code>. Le tre cause reali: il backend restituisce l\u2019involucro di lettura\r\n        (<code>{{ '{' }} definition, diagnostics {{ '}' }}</code>) invece del documento; l\u2019ospite\r\n        passa il <strong>sommario</strong> del catalogo al posto della definizione caricata con\r\n        <code>load(nome)</code>; la risposta e\u2019 in PascalCase (<code>Name</code> non e\u2019\r\n        <code>name</code>).\r\n      </p>\r\n    </div>\r\n  }\r\n\r\n  @if (validation.saveError(); as error) {\r\n    <!--\r\n      Banner **persistente**: un salvataggio fallito in silenzio e\u2019 peggio di nessun salvataggio,\r\n      perche\u2019 l\u2019indicatore \u00ABmodificata\u00BB sparirebbe per un\u2019operazione che non e\u2019 avvenuta. Qui non\r\n      sparisce: `markSaved()` viene chiamato solo al successo.\r\n    -->\r\n    <div class=\"dpe-shell__warn dpe-shell__warn--error\" role=\"alert\">\r\n      <strong>Salvataggio non riuscito ({{ error.category }})</strong>\r\n      <p>{{ error.message }}</p>\r\n      <div class=\"dpe-shell__group\">\r\n        <button type=\"button\" class=\"dpe-shell__btn\" (click)=\"validation.dismissSaveError()\">\r\n          Ho capito\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"dpe-shell__body\">\r\n    <dpe-node-palette class=\"dpe-shell__palette\" (nodeRequested)=\"onNodeRequested($event)\" />\r\n\r\n    <dpe-canvas\r\n      class=\"dpe-shell__canvas\"\r\n      [isEditable]=\"isEditable()\"\r\n      (nodeDropped)=\"onNodeDropped($event)\"\r\n    />\r\n\r\n    <dpe-node-inspector class=\"dpe-shell__inspector\" (layoutRequested)=\"runAutoLayout()\" />\r\n  </div>\r\n\r\n  <div class=\"dpe-shell__bottom\">\r\n    <div class=\"dpe-shell__tabs\" role=\"tablist\" aria-label=\"Pannelli\">\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"dpe-shell__tab\"\r\n        [class.dpe-shell__tab--active]=\"bottomTab() === 'diagnostics'\"\r\n        [attr.aria-selected]=\"bottomTab() === 'diagnostics'\"\r\n        (click)=\"bottomTab.set('diagnostics')\"\r\n      >\r\n        Diagnostiche\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"dpe-shell__tab\"\r\n        [class.dpe-shell__tab--active]=\"bottomTab() === 'schema'\"\r\n        [attr.aria-selected]=\"bottomTab() === 'schema'\"\r\n        (click)=\"bottomTab.set('schema')\"\r\n      >\r\n        Schema\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"dpe-shell__tab\"\r\n        [class.dpe-shell__tab--active]=\"bottomTab() === 'sql'\"\r\n        [attr.aria-selected]=\"bottomTab() === 'sql'\"\r\n        (click)=\"bottomTab.set('sql')\"\r\n      >\r\n        SQL generato\r\n      </button>\r\n    </div>\r\n\r\n    @switch (bottomTab()) {\r\n      @case ('diagnostics') {\r\n        <dpe-diagnostics-panel class=\"dpe-shell__panel\" (navigate)=\"onNavigate($event)\" />\r\n      }\r\n      @case ('schema') {\r\n        <dpe-schema-panel class=\"dpe-shell__panel\" />\r\n      }\r\n      @case ('sql') {\r\n        <dpe-sql-preview class=\"dpe-shell__panel\" />\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: DpeCanvasComponent, selector: "dpe-canvas", inputs: ["isEditable"], outputs: ["nodeOpened", "nodeDropped"] }, { kind: "component", type: DpeDiagnosticsPanelComponent, selector: "dpe-diagnostics-panel", outputs: ["navigate"] }, { kind: "component", type: DpeNodeInspectorComponent, selector: "dpe-node-inspector", outputs: ["layoutRequested"] }, { kind: "component", type: DpeNodePaletteComponent, selector: "dpe-node-palette", outputs: ["nodeRequested"] }, { kind: "component", type: DpeSchemaPanelComponent, selector: "dpe-schema-panel" }, { kind: "component", type: DpeSqlPreviewComponent, selector: "dpe-sql-preview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: DpeBuilderComponent, isStandalone: true, selector: "dpe-builder", inputs: { definition: { classPropertyName: "definition", publicName: "definition", isSignal: true, isRequired: true, transformFunction: null }, isEditable: { classPropertyName: "isEditable", publicName: "isEditable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { definitionChange: "definitionChange" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, providers: [DpeDocumentStore, DpeLayoutService, DpeValidationService, DpeMetadataStore], viewQueries: [{ propertyName: "canvas", first: true, predicate: DpeCanvasComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  `.dpe-builder` porta le variabili del tema: e\u2019 la classe radice su cui l\u2019app ospite le\r\n  sovrascrive, e `data-dpe-theme=\"dark\"` sul contenitore ridefinisce i soli token.\r\n-->\r\n<div class=\"dpe-builder dpe-shell\">\r\n  <header class=\"dpe-shell__bar\">\r\n    <div class=\"dpe-shell__title\">\r\n      <strong>{{ store.definition().label || store.definition().name || 'Definizione DPE' }}</strong>\r\n      <span class=\"dpe-shell__sub\">{{ nodeCount() }} nodi</span>\r\n      <!--\r\n        Stato **sporco** rispetto all\u2019ultimo salvataggio, non un conteggio di operazioni: serve a\r\n        decidere se salvare, e un contatore che sale quando si annulla risponde alla domanda\r\n        sbagliata. Annullare fino allo stato di partenza torna qui a \u00ABnessuna modifica\u00BB.\r\n      -->\r\n      <span\r\n        class=\"dpe-shell__dirty\"\r\n        [class.dpe-shell__dirty--on]=\"store.isDirty()\"\r\n        [title]=\"\r\n          store.isDirty()\r\n            ? 'Il documento differisce dall\u2019ultimo salvataggio'\r\n            : 'Il documento coincide con l\u2019ultimo salvataggio'\r\n        \"\r\n      >\r\n        @if (store.isDirty()) {\r\n          \u25CF modificata\r\n        } @else {\r\n          \u25CB nessuna modifica\r\n        }\r\n      </span>\r\n    </div>\r\n\r\n    <!--\r\n      Badge in **sola lettura** (ADR 0017): il dialetto e\u2019 dichiarato dall\u2019ambiente, non scelto\r\n      qui. Mostra quello della definizione, che e\u2019 quello con cui il backend compilera\u2019 (ADR\r\n      0009). Il titolo dice le due cose che contano \u2014 chi lo decide, e che le espressioni sono\r\n      SQL nativo di quel dialetto (ADR 0006).\r\n    -->\r\n    <span\r\n      class=\"dpe-shell__dialect\"\r\n      title=\"Il dialetto e\u2019 dichiarato dall\u2019ambiente e non si modifica dall\u2019editor. Le espressioni sono SQL nativo di questo dialetto: la definizione gli appartiene.\"\r\n    >\r\n      Dialetto \u00B7 <strong>{{ dialectLabels[dialect()] }}</strong>\r\n    </span>\r\n\r\n    <div class=\"dpe-shell__group\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"dpe-shell__btn\"\r\n        [disabled]=\"!store.canUndo()\"\r\n        title=\"Annulla (la cronologia e\u2019 una conseguenza dell\u2019immutabilita\u2019 dello stato)\"\r\n        (click)=\"store.undo()\"\r\n      >\r\n        \u21B6 Annulla\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"dpe-shell__btn\"\r\n        [disabled]=\"!store.canRedo()\"\r\n        title=\"Ripeti\"\r\n        (click)=\"store.redo()\"\r\n      >\r\n        \u21B7 Ripeti\r\n      </button>\r\n      <button type=\"button\" class=\"dpe-shell__btn\" title=\"Riordina il grafo\" (click)=\"runAutoLayout()\">\r\n        \u2317 Riordina\r\n      </button>\r\n    </div>\r\n\r\n    <!--\r\n      Salvataggio attraverso il contratto (`DpeBuilderApi.save`, opzionale). E\u2019 il comando\r\n      **primario**, separato dal gruppo annulla/ripeti/riordina: quelli disfano, questo scrive.\r\n\r\n      **Sempre presente, mai nascosto.** Un bottone assente dice \u00ABquesto editor non salva\u00BB; un\r\n      bottone disabilitato con il motivo dice \u00ABqui non si salva, ed ecco perche\u2019\u00BB \u2014 ed e\u2019 la\r\n      verita\u2019 quando l\u2019host non espone `save()`. La disponibilita\u2019 si sa **prima del clic**\r\n      (`core/dpe-capabilities.ts`), non dal primo fallimento.\r\n    -->\r\n    <div class=\"dpe-shell__group dpe-shell__group--primary\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"dpe-shell__btn dpe-shell__btn--primary\"\r\n        [disabled]=\"!canSave()\"\r\n        [title]=\"\r\n          !validation.isSaveAvailable()\r\n            ? 'Salvataggio non disponibile su questo ambiente: l\u2019host non espone save()'\r\n            : validation.isSaving()\r\n              ? 'Salvataggio in corso'\r\n              : !hasKey()\r\n                ? 'Il documento non ha un nome: e\u2019 la chiave del catalogo, e va creato da la\u2019 (l\u2019aggiornamento e\u2019 PUT /definitions/{nome})'\r\n                : store.isDirty()\r\n                  ? 'Salva la definizione (Ctrl+S)'\r\n                  : 'Nessuna modifica da salvare'\r\n        \"\r\n        (click)=\"validation.save()\"\r\n      >\r\n        @if (validation.isSaving()) {\r\n          \u2913 Salvataggio\u2026\r\n        } @else {\r\n          \u2913 Salva\r\n        }\r\n      </button>\r\n      @if (validation.justSaved()) {\r\n        <!-- Avviso transitorio: il fatto durevole e\u2019 \u00ABnessuna modifica\u00BB nell\u2019indicatore. -->\r\n        <span class=\"dpe-shell__toast\" role=\"status\">\u2713 Salvata</span>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"dpe-shell__status\">\r\n      @if (validation.isValidating()) {\r\n        <span class=\"dpe-shell__pill dpe-shell__pill--busy\">Validazione in corso\u2026</span>\r\n      } @else if (validation.error(); as error) {\r\n        <!--\r\n          Un guasto di trasporto non cancella le diagnostiche precedenti: dire \u00ABva tutto bene\u00BB\r\n          quando non lo sappiamo piu\u2019 e\u2019 peggio che mostrare un risultato vecchio dichiarandolo.\r\n        -->\r\n        <span class=\"dpe-shell__pill dpe-shell__pill--error\" [title]=\"error.message\">\r\n          Backend non raggiungibile ({{ error.category }})\r\n        </span>\r\n      } @else if (store.validateResult()) {\r\n        <span\r\n          class=\"dpe-shell__pill\"\r\n          [class.dpe-shell__pill--error]=\"store.validateResult()!.hasErrors\"\r\n          [class.dpe-shell__pill--ok]=\"!store.validateResult()!.hasErrors\"\r\n        >\r\n          @if (store.validateResult()!.hasErrors) {\r\n            Con errori\r\n          } @else {\r\n            Nessun errore\r\n          }\r\n        </span>\r\n      }\r\n    </div>\r\n  </header>\r\n\r\n  @if (dialectMismatch(); as declared) {\r\n    <!--\r\n      Disallineamento fra la dichiarazione dell\u2019ambiente e la definizione (ADR 0017). Si nominano\r\n      **entrambi** i dialetti e non si offre di correggere: correggere significherebbe migrare le\r\n      espressioni SQL native, ed e\u2019 dell\u2019host. Non e\u2019 una regola di dominio duplicata \u2014 non giudica\r\n      la definizione, riporta il disaccordo fra due fatti che l\u2019ospite ha fornito.\r\n    -->\r\n    <div class=\"dpe-shell__warn\" role=\"alert\">\r\n      <strong>\r\n        L\u2019ambiente dichiara {{ dialectLabels[declared] }}, la definizione e\u2019 scritta per\r\n        {{ dialectLabels[dialect()] }}.\r\n      </strong>\r\n      <p>\r\n        Il backend compilera\u2019 con il dialetto <strong>della definizione</strong>. Allinearli e\u2019 una\r\n        migrazione delle espressioni SQL native e non si fa da qui.\r\n      </p>\r\n    </div>\r\n  }\r\n\r\n  <!--\r\n    Il documento ricevuto non e' una definizione. Banner **persistente** e in cima: e' un difetto\r\n    dell'integrazione, non dell'utente, e un canvas vuoto da solo non lo dice \u2014 sembra una\r\n    definizione senza nodi. Non si nasconde l'editor: cio' che c'e' resta visibile, e il salvataggio\r\n    e' disabilitato da se' perche' la chiave manca.\r\n  -->\r\n  @if (documentProblem(); as problem) {\r\n    <div class=\"dpe-shell__warn dpe-shell__warn--error\" role=\"alert\">\r\n      <strong>Il documento ricevuto non e\u2019 una definizione: {{ problem }}.</strong>\r\n      <p>\r\n        L\u2019editor riceve il documento dall\u2019applicazione ospite, e questo non ha la forma di una\r\n        <code>DpeDefinition</code>. Le tre cause reali: il backend restituisce l\u2019involucro di lettura\r\n        (<code>{{ '{' }} definition, diagnostics {{ '}' }}</code>) invece del documento; l\u2019ospite\r\n        passa il <strong>sommario</strong> del catalogo al posto della definizione caricata con\r\n        <code>load(nome)</code>; la risposta e\u2019 in PascalCase (<code>Name</code> non e\u2019\r\n        <code>name</code>).\r\n      </p>\r\n    </div>\r\n  }\r\n\r\n  @if (validation.saveError(); as error) {\r\n    <!--\r\n      Banner **persistente**: un salvataggio fallito in silenzio e\u2019 peggio di nessun salvataggio,\r\n      perche\u2019 l\u2019indicatore \u00ABmodificata\u00BB sparirebbe per un\u2019operazione che non e\u2019 avvenuta. Qui non\r\n      sparisce: `markSaved()` viene chiamato solo al successo.\r\n    -->\r\n    <div class=\"dpe-shell__warn dpe-shell__warn--error\" role=\"alert\">\r\n      <strong>Salvataggio non riuscito ({{ error.category }})</strong>\r\n      <p>{{ error.message }}</p>\r\n      <div class=\"dpe-shell__group\">\r\n        <button type=\"button\" class=\"dpe-shell__btn\" (click)=\"validation.dismissSaveError()\">\r\n          Ho capito\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  @if (selectedNames().length > 1) {\r\n    <!--\r\n      Striscia contestuale della **selezione multipla**. Sta qui, fra i banner di documento e il\r\n      corpo, perche' e' un fatto che riguarda l\u2019insieme e non un nodo \u2014 ed e' dove l\u2019occhio guarda\r\n      per i fatti dell\u2019insieme. Non mostra i campi di un nodo: mostrarli mentre N sono evidenziati\r\n      e' la stessa bugia della doppia evidenziazione, detta piu' piano.\r\n    -->\r\n    <div class=\"dpe-shell__multi\">\r\n      <div class=\"dpe-shell__multi-head\">\r\n        <strong>{{ selectedNames().length }} nodi selezionati</strong>\r\n        <ul class=\"dpe-multi__names\">\r\n          @for (name of selectedNames(); track $index) {\r\n            <li class=\"dpe-multi__name\">{{ name }}</li>\r\n          }\r\n        </ul>\r\n      </div>\r\n\r\n      <div class=\"dpe-shell__group\">\r\n        <button type=\"button\" class=\"dpe-shell__btn\" (click)=\"removeSelectedNodes()\">\r\n          Elimina i {{ selectedNames().length }} nodi\r\n        </button>\r\n        <!--\r\n          Il riordino e\u2019 dichiaratamente **dell\u2019intero grafo**: dagre su un sottografo sarebbe una\r\n          funzione nuova, e chiamarla \u00ABriordina i selezionati\u00BB mentre riordina tutto sarebbe una\r\n          bugia \u2014 la stessa classe di difetto che questa striscia esiste per evitare.\r\n        -->\r\n        <button type=\"button\" class=\"dpe-shell__btn\" (click)=\"runAutoLayout()\">\r\n          Riordina il grafo\r\n        </button>\r\n      </div>\r\n\r\n      <p class=\"dpe-note dpe-note--warning\">\r\n        L\u2019eliminazione lascia i riferimenti a valle cos\u00EC come sono: diventano riferimenti rotti, e\r\n        il backend li segnala. Si annulla con \u21B6.\r\n      </p>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"dpe-shell__body\">\r\n    <dpe-node-palette class=\"dpe-shell__palette\" (nodeRequested)=\"onNodeRequested($event)\" />\r\n\r\n    <dpe-canvas\r\n      class=\"dpe-shell__canvas\"\r\n      [isEditable]=\"isEditable()\"\r\n      (nodeDropped)=\"onNodeDropped($event)\"\r\n      (nodeOpened)=\"onNodeOpened($event)\"\r\n    />\r\n  </div>\r\n\r\n  <!--\r\n    **Una sola istanza**, fratello di `.dpe-shell__body`: non dentro il canvas (finirebbe nella\r\n    trasformazione CSS di `f-canvas`) e non dentro il corpo (partecipererebbe alla griglia). Non\r\n    partecipa al layout: `showModal()` la promuove nel top layer, quindi aprirla non produce\r\n    nessun reflow del canvas e non c'e' nessuna inquadratura da rifare.\r\n  -->\r\n  <dpe-node-dialog />\r\n\r\n  <div class=\"dpe-shell__bottom\">\r\n    <div class=\"dpe-shell__tabs\" role=\"tablist\" aria-label=\"Pannelli\">\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"dpe-shell__tab\"\r\n        [class.dpe-shell__tab--active]=\"bottomTab() === 'diagnostics'\"\r\n        [attr.aria-selected]=\"bottomTab() === 'diagnostics'\"\r\n        (click)=\"bottomTab.set('diagnostics')\"\r\n      >\r\n        Diagnostiche\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"dpe-shell__tab\"\r\n        [class.dpe-shell__tab--active]=\"bottomTab() === 'schema'\"\r\n        [attr.aria-selected]=\"bottomTab() === 'schema'\"\r\n        (click)=\"bottomTab.set('schema')\"\r\n      >\r\n        Schema\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"dpe-shell__tab\"\r\n        [class.dpe-shell__tab--active]=\"bottomTab() === 'sql'\"\r\n        [attr.aria-selected]=\"bottomTab() === 'sql'\"\r\n        (click)=\"bottomTab.set('sql')\"\r\n      >\r\n        SQL generato\r\n      </button>\r\n    </div>\r\n\r\n    @switch (bottomTab()) {\r\n      @case ('diagnostics') {\r\n        <dpe-diagnostics-panel class=\"dpe-shell__panel\" (navigate)=\"onNavigate($event)\" />\r\n      }\r\n      @case ('schema') {\r\n        <dpe-schema-panel class=\"dpe-shell__panel\" />\r\n      }\r\n      @case ('sql') {\r\n        <dpe-sql-preview class=\"dpe-shell__panel\" />\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: DpeCanvasComponent, selector: "dpe-canvas", inputs: ["isEditable"], outputs: ["nodeOpened", "nodeDropped"] }, { kind: "component", type: DpeDiagnosticsPanelComponent, selector: "dpe-diagnostics-panel", outputs: ["navigate"] }, { kind: "component", type: DpeNodeDialogComponent, selector: "dpe-node-dialog" }, { kind: "component", type: DpeNodePaletteComponent, selector: "dpe-node-palette", outputs: ["nodeRequested"] }, { kind: "component", type: DpeSchemaPanelComponent, selector: "dpe-schema-panel" }, { kind: "component", type: DpeSqlPreviewComponent, selector: "dpe-sql-preview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DpeBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dpe-builder', standalone: true, imports: [
                         DpeCanvasComponent,
                         DpeDiagnosticsPanelComponent,
-                        DpeNodeInspectorComponent,
+                        DpeNodeDialogComponent,
                         DpeNodePaletteComponent,
                         DpeSchemaPanelComponent,
                         DpeSqlPreviewComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [DpeDocumentStore, DpeLayoutService, DpeValidationService, DpeMetadataStore], host: { '(keydown)': 'onKeyDown($event)' }, template: "<!--\r\n  `.dpe-builder` porta le variabili del tema: e\u2019 la classe radice su cui l\u2019app ospite le\r\n  sovrascrive, e `data-dpe-theme=\"dark\"` sul contenitore ridefinisce i soli token.\r\n-->\r\n<div class=\"dpe-builder dpe-shell\">\r\n  <header class=\"dpe-shell__bar\">\r\n    <div class=\"dpe-shell__title\">\r\n      <strong>{{ store.definition().label || store.definition().name || 'Definizione DPE' }}</strong>\r\n      <span class=\"dpe-shell__sub\">{{ nodeCount() }} nodi</span>\r\n      <!--\r\n        Stato **sporco** rispetto all\u2019ultimo salvataggio, non un conteggio di operazioni: serve a\r\n        decidere se salvare, e un contatore che sale quando si annulla risponde alla domanda\r\n        sbagliata. Annullare fino allo stato di partenza torna qui a \u00ABnessuna modifica\u00BB.\r\n      -->\r\n      <span\r\n        class=\"dpe-shell__dirty\"\r\n        [class.dpe-shell__dirty--on]=\"store.isDirty()\"\r\n        [title]=\"\r\n          store.isDirty()\r\n            ? 'Il documento differisce dall\u2019ultimo salvataggio'\r\n            : 'Il documento coincide con l\u2019ultimo salvataggio'\r\n        \"\r\n      >\r\n        @if (store.isDirty()) {\r\n          \u25CF modificata\r\n        } @else {\r\n          \u25CB nessuna modifica\r\n        }\r\n      </span>\r\n    </div>\r\n\r\n    <!--\r\n      Badge in **sola lettura** (ADR 0017): il dialetto e\u2019 dichiarato dall\u2019ambiente, non scelto\r\n      qui. Mostra quello della definizione, che e\u2019 quello con cui il backend compilera\u2019 (ADR\r\n      0009). Il titolo dice le due cose che contano \u2014 chi lo decide, e che le espressioni sono\r\n      SQL nativo di quel dialetto (ADR 0006).\r\n    -->\r\n    <span\r\n      class=\"dpe-shell__dialect\"\r\n      title=\"Il dialetto e\u2019 dichiarato dall\u2019ambiente e non si modifica dall\u2019editor. Le espressioni sono SQL nativo di questo dialetto: la definizione gli appartiene.\"\r\n    >\r\n      Dialetto \u00B7 <strong>{{ dialectLabels[dialect()] }}</strong>\r\n    </span>\r\n\r\n    <div class=\"dpe-shell__group\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"dpe-shell__btn\"\r\n        [disabled]=\"!store.canUndo()\"\r\n        title=\"Annulla (la cronologia e\u2019 una conseguenza dell\u2019immutabilita\u2019 dello stato)\"\r\n        (click)=\"store.undo()\"\r\n      >\r\n        \u21B6 Annulla\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"dpe-shell__btn\"\r\n        [disabled]=\"!store.canRedo()\"\r\n        title=\"Ripeti\"\r\n        (click)=\"store.redo()\"\r\n      >\r\n        \u21B7 Ripeti\r\n      </button>\r\n      <button type=\"button\" class=\"dpe-shell__btn\" title=\"Riordina il grafo\" (click)=\"runAutoLayout()\">\r\n        \u2317 Riordina\r\n      </button>\r\n    </div>\r\n\r\n    <!--\r\n      Salvataggio attraverso il contratto (`DpeBuilderApi.save`, opzionale). E\u2019 il comando\r\n      **primario**, separato dal gruppo annulla/ripeti/riordina: quelli disfano, questo scrive.\r\n\r\n      **Sempre presente, mai nascosto.** Un bottone assente dice \u00ABquesto editor non salva\u00BB; un\r\n      bottone disabilitato con il motivo dice \u00ABqui non si salva, ed ecco perche\u2019\u00BB \u2014 ed e\u2019 la\r\n      verita\u2019 quando l\u2019host non espone `save()`. La disponibilita\u2019 si sa **prima del clic**\r\n      (`core/dpe-capabilities.ts`), non dal primo fallimento.\r\n    -->\r\n    <div class=\"dpe-shell__group dpe-shell__group--primary\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"dpe-shell__btn dpe-shell__btn--primary\"\r\n        [disabled]=\"!canSave()\"\r\n        [title]=\"\r\n          !validation.isSaveAvailable()\r\n            ? 'Salvataggio non disponibile su questo ambiente: l\u2019host non espone save()'\r\n            : validation.isSaving()\r\n              ? 'Salvataggio in corso'\r\n              : !hasKey()\r\n                ? 'Il documento non ha un nome: e\u2019 la chiave del catalogo, e va creato da la\u2019 (l\u2019aggiornamento e\u2019 PUT /definitions/{nome})'\r\n                : store.isDirty()\r\n                  ? 'Salva la definizione (Ctrl+S)'\r\n                  : 'Nessuna modifica da salvare'\r\n        \"\r\n        (click)=\"validation.save()\"\r\n      >\r\n        @if (validation.isSaving()) {\r\n          \u2913 Salvataggio\u2026\r\n        } @else {\r\n          \u2913 Salva\r\n        }\r\n      </button>\r\n      @if (validation.justSaved()) {\r\n        <!-- Avviso transitorio: il fatto durevole e\u2019 \u00ABnessuna modifica\u00BB nell\u2019indicatore. -->\r\n        <span class=\"dpe-shell__toast\" role=\"status\">\u2713 Salvata</span>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"dpe-shell__status\">\r\n      @if (validation.isValidating()) {\r\n        <span class=\"dpe-shell__pill dpe-shell__pill--busy\">Validazione in corso\u2026</span>\r\n      } @else if (validation.error(); as error) {\r\n        <!--\r\n          Un guasto di trasporto non cancella le diagnostiche precedenti: dire \u00ABva tutto bene\u00BB\r\n          quando non lo sappiamo piu\u2019 e\u2019 peggio che mostrare un risultato vecchio dichiarandolo.\r\n        -->\r\n        <span class=\"dpe-shell__pill dpe-shell__pill--error\" [title]=\"error.message\">\r\n          Backend non raggiungibile ({{ error.category }})\r\n        </span>\r\n      } @else if (store.validateResult()) {\r\n        <span\r\n          class=\"dpe-shell__pill\"\r\n          [class.dpe-shell__pill--error]=\"store.validateResult()!.hasErrors\"\r\n          [class.dpe-shell__pill--ok]=\"!store.validateResult()!.hasErrors\"\r\n        >\r\n          @if (store.validateResult()!.hasErrors) {\r\n            Con errori\r\n          } @else {\r\n            Nessun errore\r\n          }\r\n        </span>\r\n      }\r\n    </div>\r\n  </header>\r\n\r\n  @if (dialectMismatch(); as declared) {\r\n    <!--\r\n      Disallineamento fra la dichiarazione dell\u2019ambiente e la definizione (ADR 0017). Si nominano\r\n      **entrambi** i dialetti e non si offre di correggere: correggere significherebbe migrare le\r\n      espressioni SQL native, ed e\u2019 dell\u2019host. Non e\u2019 una regola di dominio duplicata \u2014 non giudica\r\n      la definizione, riporta il disaccordo fra due fatti che l\u2019ospite ha fornito.\r\n    -->\r\n    <div class=\"dpe-shell__warn\" role=\"alert\">\r\n      <strong>\r\n        L\u2019ambiente dichiara {{ dialectLabels[declared] }}, la definizione e\u2019 scritta per\r\n        {{ dialectLabels[dialect()] }}.\r\n      </strong>\r\n      <p>\r\n        Il backend compilera\u2019 con il dialetto <strong>della definizione</strong>. Allinearli e\u2019 una\r\n        migrazione delle espressioni SQL native e non si fa da qui.\r\n      </p>\r\n    </div>\r\n  }\r\n\r\n  <!--\r\n    Il documento ricevuto non e' una definizione. Banner **persistente** e in cima: e' un difetto\r\n    dell'integrazione, non dell'utente, e un canvas vuoto da solo non lo dice \u2014 sembra una\r\n    definizione senza nodi. Non si nasconde l'editor: cio' che c'e' resta visibile, e il salvataggio\r\n    e' disabilitato da se' perche' la chiave manca.\r\n  -->\r\n  @if (documentProblem(); as problem) {\r\n    <div class=\"dpe-shell__warn dpe-shell__warn--error\" role=\"alert\">\r\n      <strong>Il documento ricevuto non e\u2019 una definizione: {{ problem }}.</strong>\r\n      <p>\r\n        L\u2019editor riceve il documento dall\u2019applicazione ospite, e questo non ha la forma di una\r\n        <code>DpeDefinition</code>. Le tre cause reali: il backend restituisce l\u2019involucro di lettura\r\n        (<code>{{ '{' }} definition, diagnostics {{ '}' }}</code>) invece del documento; l\u2019ospite\r\n        passa il <strong>sommario</strong> del catalogo al posto della definizione caricata con\r\n        <code>load(nome)</code>; la risposta e\u2019 in PascalCase (<code>Name</code> non e\u2019\r\n        <code>name</code>).\r\n      </p>\r\n    </div>\r\n  }\r\n\r\n  @if (validation.saveError(); as error) {\r\n    <!--\r\n      Banner **persistente**: un salvataggio fallito in silenzio e\u2019 peggio di nessun salvataggio,\r\n      perche\u2019 l\u2019indicatore \u00ABmodificata\u00BB sparirebbe per un\u2019operazione che non e\u2019 avvenuta. Qui non\r\n      sparisce: `markSaved()` viene chiamato solo al successo.\r\n    -->\r\n    <div class=\"dpe-shell__warn dpe-shell__warn--error\" role=\"alert\">\r\n      <strong>Salvataggio non riuscito ({{ error.category }})</strong>\r\n      <p>{{ error.message }}</p>\r\n      <div class=\"dpe-shell__group\">\r\n        <button type=\"button\" class=\"dpe-shell__btn\" (click)=\"validation.dismissSaveError()\">\r\n          Ho capito\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"dpe-shell__body\">\r\n    <dpe-node-palette class=\"dpe-shell__palette\" (nodeRequested)=\"onNodeRequested($event)\" />\r\n\r\n    <dpe-canvas\r\n      class=\"dpe-shell__canvas\"\r\n      [isEditable]=\"isEditable()\"\r\n      (nodeDropped)=\"onNodeDropped($event)\"\r\n    />\r\n\r\n    <dpe-node-inspector class=\"dpe-shell__inspector\" (layoutRequested)=\"runAutoLayout()\" />\r\n  </div>\r\n\r\n  <div class=\"dpe-shell__bottom\">\r\n    <div class=\"dpe-shell__tabs\" role=\"tablist\" aria-label=\"Pannelli\">\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"dpe-shell__tab\"\r\n        [class.dpe-shell__tab--active]=\"bottomTab() === 'diagnostics'\"\r\n        [attr.aria-selected]=\"bottomTab() === 'diagnostics'\"\r\n        (click)=\"bottomTab.set('diagnostics')\"\r\n      >\r\n        Diagnostiche\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"dpe-shell__tab\"\r\n        [class.dpe-shell__tab--active]=\"bottomTab() === 'schema'\"\r\n        [attr.aria-selected]=\"bottomTab() === 'schema'\"\r\n        (click)=\"bottomTab.set('schema')\"\r\n      >\r\n        Schema\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"dpe-shell__tab\"\r\n        [class.dpe-shell__tab--active]=\"bottomTab() === 'sql'\"\r\n        [attr.aria-selected]=\"bottomTab() === 'sql'\"\r\n        (click)=\"bottomTab.set('sql')\"\r\n      >\r\n        SQL generato\r\n      </button>\r\n    </div>\r\n\r\n    @switch (bottomTab()) {\r\n      @case ('diagnostics') {\r\n        <dpe-diagnostics-panel class=\"dpe-shell__panel\" (navigate)=\"onNavigate($event)\" />\r\n      }\r\n      @case ('schema') {\r\n        <dpe-schema-panel class=\"dpe-shell__panel\" />\r\n      }\r\n      @case ('sql') {\r\n        <dpe-sql-preview class=\"dpe-shell__panel\" />\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [DpeDocumentStore, DpeLayoutService, DpeValidationService, DpeMetadataStore], host: { '(keydown)': 'onKeyDown($event)' }, template: "<!--\r\n  `.dpe-builder` porta le variabili del tema: e\u2019 la classe radice su cui l\u2019app ospite le\r\n  sovrascrive, e `data-dpe-theme=\"dark\"` sul contenitore ridefinisce i soli token.\r\n-->\r\n<div class=\"dpe-builder dpe-shell\">\r\n  <header class=\"dpe-shell__bar\">\r\n    <div class=\"dpe-shell__title\">\r\n      <strong>{{ store.definition().label || store.definition().name || 'Definizione DPE' }}</strong>\r\n      <span class=\"dpe-shell__sub\">{{ nodeCount() }} nodi</span>\r\n      <!--\r\n        Stato **sporco** rispetto all\u2019ultimo salvataggio, non un conteggio di operazioni: serve a\r\n        decidere se salvare, e un contatore che sale quando si annulla risponde alla domanda\r\n        sbagliata. Annullare fino allo stato di partenza torna qui a \u00ABnessuna modifica\u00BB.\r\n      -->\r\n      <span\r\n        class=\"dpe-shell__dirty\"\r\n        [class.dpe-shell__dirty--on]=\"store.isDirty()\"\r\n        [title]=\"\r\n          store.isDirty()\r\n            ? 'Il documento differisce dall\u2019ultimo salvataggio'\r\n            : 'Il documento coincide con l\u2019ultimo salvataggio'\r\n        \"\r\n      >\r\n        @if (store.isDirty()) {\r\n          \u25CF modificata\r\n        } @else {\r\n          \u25CB nessuna modifica\r\n        }\r\n      </span>\r\n    </div>\r\n\r\n    <!--\r\n      Badge in **sola lettura** (ADR 0017): il dialetto e\u2019 dichiarato dall\u2019ambiente, non scelto\r\n      qui. Mostra quello della definizione, che e\u2019 quello con cui il backend compilera\u2019 (ADR\r\n      0009). Il titolo dice le due cose che contano \u2014 chi lo decide, e che le espressioni sono\r\n      SQL nativo di quel dialetto (ADR 0006).\r\n    -->\r\n    <span\r\n      class=\"dpe-shell__dialect\"\r\n      title=\"Il dialetto e\u2019 dichiarato dall\u2019ambiente e non si modifica dall\u2019editor. Le espressioni sono SQL nativo di questo dialetto: la definizione gli appartiene.\"\r\n    >\r\n      Dialetto \u00B7 <strong>{{ dialectLabels[dialect()] }}</strong>\r\n    </span>\r\n\r\n    <div class=\"dpe-shell__group\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"dpe-shell__btn\"\r\n        [disabled]=\"!store.canUndo()\"\r\n        title=\"Annulla (la cronologia e\u2019 una conseguenza dell\u2019immutabilita\u2019 dello stato)\"\r\n        (click)=\"store.undo()\"\r\n      >\r\n        \u21B6 Annulla\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"dpe-shell__btn\"\r\n        [disabled]=\"!store.canRedo()\"\r\n        title=\"Ripeti\"\r\n        (click)=\"store.redo()\"\r\n      >\r\n        \u21B7 Ripeti\r\n      </button>\r\n      <button type=\"button\" class=\"dpe-shell__btn\" title=\"Riordina il grafo\" (click)=\"runAutoLayout()\">\r\n        \u2317 Riordina\r\n      </button>\r\n    </div>\r\n\r\n    <!--\r\n      Salvataggio attraverso il contratto (`DpeBuilderApi.save`, opzionale). E\u2019 il comando\r\n      **primario**, separato dal gruppo annulla/ripeti/riordina: quelli disfano, questo scrive.\r\n\r\n      **Sempre presente, mai nascosto.** Un bottone assente dice \u00ABquesto editor non salva\u00BB; un\r\n      bottone disabilitato con il motivo dice \u00ABqui non si salva, ed ecco perche\u2019\u00BB \u2014 ed e\u2019 la\r\n      verita\u2019 quando l\u2019host non espone `save()`. La disponibilita\u2019 si sa **prima del clic**\r\n      (`core/dpe-capabilities.ts`), non dal primo fallimento.\r\n    -->\r\n    <div class=\"dpe-shell__group dpe-shell__group--primary\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"dpe-shell__btn dpe-shell__btn--primary\"\r\n        [disabled]=\"!canSave()\"\r\n        [title]=\"\r\n          !validation.isSaveAvailable()\r\n            ? 'Salvataggio non disponibile su questo ambiente: l\u2019host non espone save()'\r\n            : validation.isSaving()\r\n              ? 'Salvataggio in corso'\r\n              : !hasKey()\r\n                ? 'Il documento non ha un nome: e\u2019 la chiave del catalogo, e va creato da la\u2019 (l\u2019aggiornamento e\u2019 PUT /definitions/{nome})'\r\n                : store.isDirty()\r\n                  ? 'Salva la definizione (Ctrl+S)'\r\n                  : 'Nessuna modifica da salvare'\r\n        \"\r\n        (click)=\"validation.save()\"\r\n      >\r\n        @if (validation.isSaving()) {\r\n          \u2913 Salvataggio\u2026\r\n        } @else {\r\n          \u2913 Salva\r\n        }\r\n      </button>\r\n      @if (validation.justSaved()) {\r\n        <!-- Avviso transitorio: il fatto durevole e\u2019 \u00ABnessuna modifica\u00BB nell\u2019indicatore. -->\r\n        <span class=\"dpe-shell__toast\" role=\"status\">\u2713 Salvata</span>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"dpe-shell__status\">\r\n      @if (validation.isValidating()) {\r\n        <span class=\"dpe-shell__pill dpe-shell__pill--busy\">Validazione in corso\u2026</span>\r\n      } @else if (validation.error(); as error) {\r\n        <!--\r\n          Un guasto di trasporto non cancella le diagnostiche precedenti: dire \u00ABva tutto bene\u00BB\r\n          quando non lo sappiamo piu\u2019 e\u2019 peggio che mostrare un risultato vecchio dichiarandolo.\r\n        -->\r\n        <span class=\"dpe-shell__pill dpe-shell__pill--error\" [title]=\"error.message\">\r\n          Backend non raggiungibile ({{ error.category }})\r\n        </span>\r\n      } @else if (store.validateResult()) {\r\n        <span\r\n          class=\"dpe-shell__pill\"\r\n          [class.dpe-shell__pill--error]=\"store.validateResult()!.hasErrors\"\r\n          [class.dpe-shell__pill--ok]=\"!store.validateResult()!.hasErrors\"\r\n        >\r\n          @if (store.validateResult()!.hasErrors) {\r\n            Con errori\r\n          } @else {\r\n            Nessun errore\r\n          }\r\n        </span>\r\n      }\r\n    </div>\r\n  </header>\r\n\r\n  @if (dialectMismatch(); as declared) {\r\n    <!--\r\n      Disallineamento fra la dichiarazione dell\u2019ambiente e la definizione (ADR 0017). Si nominano\r\n      **entrambi** i dialetti e non si offre di correggere: correggere significherebbe migrare le\r\n      espressioni SQL native, ed e\u2019 dell\u2019host. Non e\u2019 una regola di dominio duplicata \u2014 non giudica\r\n      la definizione, riporta il disaccordo fra due fatti che l\u2019ospite ha fornito.\r\n    -->\r\n    <div class=\"dpe-shell__warn\" role=\"alert\">\r\n      <strong>\r\n        L\u2019ambiente dichiara {{ dialectLabels[declared] }}, la definizione e\u2019 scritta per\r\n        {{ dialectLabels[dialect()] }}.\r\n      </strong>\r\n      <p>\r\n        Il backend compilera\u2019 con il dialetto <strong>della definizione</strong>. Allinearli e\u2019 una\r\n        migrazione delle espressioni SQL native e non si fa da qui.\r\n      </p>\r\n    </div>\r\n  }\r\n\r\n  <!--\r\n    Il documento ricevuto non e' una definizione. Banner **persistente** e in cima: e' un difetto\r\n    dell'integrazione, non dell'utente, e un canvas vuoto da solo non lo dice \u2014 sembra una\r\n    definizione senza nodi. Non si nasconde l'editor: cio' che c'e' resta visibile, e il salvataggio\r\n    e' disabilitato da se' perche' la chiave manca.\r\n  -->\r\n  @if (documentProblem(); as problem) {\r\n    <div class=\"dpe-shell__warn dpe-shell__warn--error\" role=\"alert\">\r\n      <strong>Il documento ricevuto non e\u2019 una definizione: {{ problem }}.</strong>\r\n      <p>\r\n        L\u2019editor riceve il documento dall\u2019applicazione ospite, e questo non ha la forma di una\r\n        <code>DpeDefinition</code>. Le tre cause reali: il backend restituisce l\u2019involucro di lettura\r\n        (<code>{{ '{' }} definition, diagnostics {{ '}' }}</code>) invece del documento; l\u2019ospite\r\n        passa il <strong>sommario</strong> del catalogo al posto della definizione caricata con\r\n        <code>load(nome)</code>; la risposta e\u2019 in PascalCase (<code>Name</code> non e\u2019\r\n        <code>name</code>).\r\n      </p>\r\n    </div>\r\n  }\r\n\r\n  @if (validation.saveError(); as error) {\r\n    <!--\r\n      Banner **persistente**: un salvataggio fallito in silenzio e\u2019 peggio di nessun salvataggio,\r\n      perche\u2019 l\u2019indicatore \u00ABmodificata\u00BB sparirebbe per un\u2019operazione che non e\u2019 avvenuta. Qui non\r\n      sparisce: `markSaved()` viene chiamato solo al successo.\r\n    -->\r\n    <div class=\"dpe-shell__warn dpe-shell__warn--error\" role=\"alert\">\r\n      <strong>Salvataggio non riuscito ({{ error.category }})</strong>\r\n      <p>{{ error.message }}</p>\r\n      <div class=\"dpe-shell__group\">\r\n        <button type=\"button\" class=\"dpe-shell__btn\" (click)=\"validation.dismissSaveError()\">\r\n          Ho capito\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  @if (selectedNames().length > 1) {\r\n    <!--\r\n      Striscia contestuale della **selezione multipla**. Sta qui, fra i banner di documento e il\r\n      corpo, perche' e' un fatto che riguarda l\u2019insieme e non un nodo \u2014 ed e' dove l\u2019occhio guarda\r\n      per i fatti dell\u2019insieme. Non mostra i campi di un nodo: mostrarli mentre N sono evidenziati\r\n      e' la stessa bugia della doppia evidenziazione, detta piu' piano.\r\n    -->\r\n    <div class=\"dpe-shell__multi\">\r\n      <div class=\"dpe-shell__multi-head\">\r\n        <strong>{{ selectedNames().length }} nodi selezionati</strong>\r\n        <ul class=\"dpe-multi__names\">\r\n          @for (name of selectedNames(); track $index) {\r\n            <li class=\"dpe-multi__name\">{{ name }}</li>\r\n          }\r\n        </ul>\r\n      </div>\r\n\r\n      <div class=\"dpe-shell__group\">\r\n        <button type=\"button\" class=\"dpe-shell__btn\" (click)=\"removeSelectedNodes()\">\r\n          Elimina i {{ selectedNames().length }} nodi\r\n        </button>\r\n        <!--\r\n          Il riordino e\u2019 dichiaratamente **dell\u2019intero grafo**: dagre su un sottografo sarebbe una\r\n          funzione nuova, e chiamarla \u00ABriordina i selezionati\u00BB mentre riordina tutto sarebbe una\r\n          bugia \u2014 la stessa classe di difetto che questa striscia esiste per evitare.\r\n        -->\r\n        <button type=\"button\" class=\"dpe-shell__btn\" (click)=\"runAutoLayout()\">\r\n          Riordina il grafo\r\n        </button>\r\n      </div>\r\n\r\n      <p class=\"dpe-note dpe-note--warning\">\r\n        L\u2019eliminazione lascia i riferimenti a valle cos\u00EC come sono: diventano riferimenti rotti, e\r\n        il backend li segnala. Si annulla con \u21B6.\r\n      </p>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"dpe-shell__body\">\r\n    <dpe-node-palette class=\"dpe-shell__palette\" (nodeRequested)=\"onNodeRequested($event)\" />\r\n\r\n    <dpe-canvas\r\n      class=\"dpe-shell__canvas\"\r\n      [isEditable]=\"isEditable()\"\r\n      (nodeDropped)=\"onNodeDropped($event)\"\r\n      (nodeOpened)=\"onNodeOpened($event)\"\r\n    />\r\n  </div>\r\n\r\n  <!--\r\n    **Una sola istanza**, fratello di `.dpe-shell__body`: non dentro il canvas (finirebbe nella\r\n    trasformazione CSS di `f-canvas`) e non dentro il corpo (partecipererebbe alla griglia). Non\r\n    partecipa al layout: `showModal()` la promuove nel top layer, quindi aprirla non produce\r\n    nessun reflow del canvas e non c'e' nessuna inquadratura da rifare.\r\n  -->\r\n  <dpe-node-dialog />\r\n\r\n  <div class=\"dpe-shell__bottom\">\r\n    <div class=\"dpe-shell__tabs\" role=\"tablist\" aria-label=\"Pannelli\">\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"dpe-shell__tab\"\r\n        [class.dpe-shell__tab--active]=\"bottomTab() === 'diagnostics'\"\r\n        [attr.aria-selected]=\"bottomTab() === 'diagnostics'\"\r\n        (click)=\"bottomTab.set('diagnostics')\"\r\n      >\r\n        Diagnostiche\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"dpe-shell__tab\"\r\n        [class.dpe-shell__tab--active]=\"bottomTab() === 'schema'\"\r\n        [attr.aria-selected]=\"bottomTab() === 'schema'\"\r\n        (click)=\"bottomTab.set('schema')\"\r\n      >\r\n        Schema\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"dpe-shell__tab\"\r\n        [class.dpe-shell__tab--active]=\"bottomTab() === 'sql'\"\r\n        [attr.aria-selected]=\"bottomTab() === 'sql'\"\r\n        (click)=\"bottomTab.set('sql')\"\r\n      >\r\n        SQL generato\r\n      </button>\r\n    </div>\r\n\r\n    @switch (bottomTab()) {\r\n      @case ('diagnostics') {\r\n        <dpe-diagnostics-panel class=\"dpe-shell__panel\" (navigate)=\"onNavigate($event)\" />\r\n      }\r\n      @case ('schema') {\r\n        <dpe-schema-panel class=\"dpe-shell__panel\" />\r\n      }\r\n      @case ('sql') {\r\n        <dpe-sql-preview class=\"dpe-shell__panel\" />\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { definition: [{ type: i0.Input, args: [{ isSignal: true, alias: "definition", required: true }] }], isEditable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditable", required: false }] }], definitionChange: [{ type: i0.Output, args: ["definitionChange"] }], canvas: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DpeCanvasComponent), { isSignal: true }] }] } });
 
 /**
@@ -8939,5 +9283,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DPE_API_ERROR_FALLBACK_MESSAGE, DPE_BUILDER_HTTP_CONFIG, DPE_DIALECT_LABELS, DPE_LAYOUT_KEY, DPE_NODE_CATEGORIES, DPE_NODE_COLLECTIONS, DPE_NODE_HEIGHT, DPE_NODE_ICON_PATHS, DPE_NODE_NOT_COMPILABLE, DPE_SOURCE_SLOTS, DpeApiError, DpeBuilderApi, DpeBuilderComponent, DpeCanvasComponent, DpeCatalogComponent, DpeCatalogStore, DpeColumnTypeEditorComponent, DpeDiagnosticsPanelComponent, DpeDocumentStore, DpeExpressionEditorComponent, DpeLayoutService, DpeMetadataStore, DpeNodeIconComponent, DpeNodeInspectorBase, DpeNodeInspectorComponent, DpeNodePaletteComponent, DpeSchemaPanelComponent, DpeSelectValueDirective, DpeSqlPreviewComponent, DpeValidationService, HttpDpeBuilderApi, diagnosticPathToString, dpeAllNodes, dpeBuildGraph, dpeCountReferences, dpeCreateCommandAvailability, dpeCreateNode, dpeDefinitionLevelDiagnostics, dpeDiagnosticField, dpeDiagnosticLocationLabel, dpeDiagnosticNodeName, dpeEdgeId, dpeEmptyDefinition, dpeFindNode, dpeGroupDiagnosticsByNode, dpeHasCompleteLayout, dpeInputPortId, dpeInputPorts, dpeIsDialectDiagnostic, dpeIsNotCompilable, dpeIsPrimitiveAvailable, dpeIsRectFullyVisible, dpeKnownNodeNames, dpeNodeCategory, dpeNodeIconFamily, dpeNodeIconFamilyClass, dpeNodeIconPaths, dpeNodeId, dpeNodeSourceReferences, dpeNodeSubtitle, dpeNodeWidth, dpeNodeWidthClass, dpeOutputPortId, dpeParseInputPortId, dpeParseNodeId, dpeParseOutputPortId, dpeProposeNodeName, dpeProposeWritebackSequence, dpeReadCapabilities, dpeReadNodePosition, dpeRenameNode, dpeWorstSeverity, dpeWriteNodePosition, dpeWriteSourceReference, provideDpeBuilderHttpApi };
+export { DPE_API_ERROR_FALLBACK_MESSAGE, DPE_BUILDER_HTTP_CONFIG, DPE_DIALECT_LABELS, DPE_LAYOUT_KEY, DPE_NODE_CATEGORIES, DPE_NODE_COLLECTIONS, DPE_NODE_HEIGHT, DPE_NODE_ICON_PATHS, DPE_NODE_NOT_COMPILABLE, DPE_SOURCE_SLOTS, DpeApiError, DpeBuilderApi, DpeBuilderComponent, DpeCanvasComponent, DpeCatalogComponent, DpeCatalogStore, DpeColumnTypeEditorComponent, DpeDiagnosticsPanelComponent, DpeDocumentStore, DpeExpressionEditorComponent, DpeLayoutService, DpeMetadataStore, DpeNodeDialogComponent, DpeNodeFactsComponent, DpeNodeIconComponent, DpeNodeInspectorBase, DpeNodeInspectorComponent, DpeNodePaletteComponent, DpeSchemaPanelComponent, DpeSelectValueDirective, DpeSqlPreviewComponent, DpeValidationService, HttpDpeBuilderApi, diagnosticPathToString, dpeAllNodes, dpeBuildGraph, dpeCountReferences, dpeCreateCommandAvailability, dpeCreateNode, dpeDefinitionLevelDiagnostics, dpeDiagnosticField, dpeDiagnosticLocationLabel, dpeDiagnosticNodeName, dpeEdgeId, dpeEmptyDefinition, dpeFindNode, dpeGroupDiagnosticsByNode, dpeHasCompleteLayout, dpeInputPortId, dpeInputPorts, dpeIsDialectDiagnostic, dpeIsNotCompilable, dpeIsPrimitiveAvailable, dpeIsRectFullyVisible, dpeKnownNodeNames, dpeNodeCategory, dpeNodeIconFamily, dpeNodeIconFamilyClass, dpeNodeIconPaths, dpeNodeId, dpeNodeSourceReferences, dpeNodeSubtitle, dpeNodeWidth, dpeNodeWidthClass, dpeOutputPortId, dpeParseInputPortId, dpeParseNodeId, dpeParseOutputPortId, dpeProposeNodeName, dpeProposeWritebackSequence, dpeReadCapabilities, dpeReadNodePosition, dpeRenameNode, dpeWorstSeverity, dpeWriteNodePosition, dpeWriteSourceReference, provideDpeBuilderHttpApi };
 //# sourceMappingURL=esfaenza-dpe-builder.mjs.map