@esfaenza/dpe-builder 20.3.1 → 20.3.3

package/styles/dpe-builder.css

@@ -1,6 +1,7 @@
 /*
- * Tema dell'editor DPE — da includere negli `styles` dell'applicazione ospite, in
- * quest'ordine:
+ * Foglio di stile **unico** dell'editor DPE.
+ *
+ * Uso: si collega una volta, in quest'ordine, e non serve altro.
  *
  *   "styles": [
  *     "node_modules/@foblex/flow/styles/default.scss",
@@ -8,19 +9,32 @@
  *     "src/styles.css"
  *   ]
  *
- * Contiene **soltanto** le due cose che non possono stare nel CSS incapsulato dei componenti:
+ * Niente incapsulamento, niente `:host`, niente `::ng-deep`, niente `!important`: CSS standard
+ * con selettori di classe e di elemento, che si legge e funziona identico dentro e fuori Angular.
+ * I componenti non dichiarano `styles` ne' `styleUrl` — tutte le regole stanno qui.
  *
- *  1. le variabili di tema, cosi' l'app ospite le sovrascrive per integrarsi nel proprio
- *     design system senza toccare la libreria (compresi i token `--ff-*` di @foblex/flow,
- *     che si ritematizza **cosi'** e non sovrascrivendone le regole: hanno la stessa
- *     specificita' delle nostre e chi vince dipenderebbe dall'ordine di caricamento dei
- *     fogli nell'host);
- *  2. gli stili degli archi: i path SVG delle connessioni sono creati a runtime da
- *     @foblex/flow e non portano l'attributo di scope Angular, quindi un selettore scoped non
- *     li raggiunge mai.
+ * Regole della casa, per non perdere la semplicita' al primo ritocco:
  *
- * Tutto il resto e' component-scoped. Se un giorno servisse davvero un controllo condiviso
- * qui, va motivato in commento.
+ *  1. **Ogni** classe comincia per `dpe-`: e' l'unica cosa che tiene separato questo foglio da
+ *     quello dell'app ospite, ora che non c'e' piu' un incapsulamento a farlo.
+ *  2. Nessun selettore di elemento nudo. Un elemento si stila sempre dentro un contenitore
+ *     nostro (`dpe-sql-preview pre`), altrimenti la regola esce dall'editor.
+ *  3. Colori solo attraverso i token `--dpe-*`: un colore cablato resta invisibile fino al primo
+ *     tema scuro.
+ *  4. L'ordine dei blocchi conta: dove due regole hanno la stessa specificita' decide l'ordine,
+ *     e i punti in cui questo e' voluto sono segnalati in commento.
+ *  5. Dove si contende un elemento con @foblex/flow, il selettore **dichiara** di che specificita'
+ *     ha bisogno (`dpe-canvas .dpe-flow .dpe-node`, non `.dpe-node`). Con l'incapsulamento
+ *     vincevamo per via dell'attributo di scope che Angular aggiungeva ai selettori: era una
+ *     specificita' regalata dal framework, e senza di essa la card del nodo tornava larga 120px
+ *     e centrata. Il conto va fatto, non sperato: vedi la sezione «canvas».
+ */
+
+/* ==================================================================== token */
+/*
+ * `.dpe-builder` e' la radice dell'editor, `.dpe-theme` quella di un componente usato da solo
+ * (il catalogo). Sono le due classi su cui l'app ospite sovrascrive i token per entrare nel
+ * proprio design system, senza toccare la libreria.
  */
 
 .dpe-builder,
@@ -94,7 +108,9 @@
 
   /*
    * I token di @foblex/flow allineati ai nostri: canvas, sfondo, minimappa e spessore degli
-   * archi li disegna la libreria, e questo e' il punto previsto per ritematizzarli.
+   * archi li disegna la libreria, e questo e' il punto previsto per ritematizzarli. Si passa
+   * dalle variabili e **non** dalle sue regole: quelle hanno la stessa specificita' delle
+   * nostre e chi vince dipenderebbe dall'ordine dei fogli nell'app ospite.
    */
   --ff-canvas-background-color: var(--dpe-canvas-bg);
   --ff-flow-background-color: var(--dpe-canvas-bg);
@@ -110,17 +126,19 @@
   --ff-minimap-view-border-color: var(--dpe-accent);
 }
 
+/* =============================================================== tema scuro */
 /*
  * Variante scura: si attiva con `data-dpe-theme="dark"` sul contenitore e ridefinisce i **soli
  * token**.
  *
- * I selettori sono tre e non uno per una ragione di cascata, non di gusto: se l'attributo sta su
- * un **antenato** dell'editor (il caso normale: l'ospite lo mette sul proprio contenitore), la
+ * I selettori sono cinque e non uno per una ragione di cascata, non di gusto: se l'attributo sta
+ * su un **antenato** dell'editor (il caso normale: l'ospite lo mette sul proprio contenitore), la
  * regola `.dpe-builder` qui sopra riassegna i token chiari **sull'elemento stesso** e vince sui
- * valori scuri ereditati. Il risultato e' un tema a metà — testo chiaro su superfici chiare, cioe'
- * illeggibile. `[data-dpe-theme='dark'] .dpe-builder` ha specificita' (0,2,0) e batte `.dpe-builder`
- * (0,1,0); l'ultimo selettore copre il caso in cui l'attributo sia sulla radice dell'editor.
+ * valori scuri ereditati. Il risultato e' un tema a meta' — testo chiaro su superfici chiare,
+ * cioe' illeggibile. `[data-dpe-theme='dark'] .dpe-builder` ha specificita' (0,2,0) e batte
+ * `.dpe-builder` (0,1,0); gli ultimi due coprono il caso in cui l'attributo stia sulla radice.
  */
+
 [data-dpe-theme='dark'],
 [data-dpe-theme='dark'] .dpe-builder,
 [data-dpe-theme='dark'] .dpe-theme,
@@ -163,7 +181,721 @@
   --dpe-shadow-lg: 0 18px 44px rgb(0 0 0 / 55%);
 }
 
-/* ---------------------------------------------------------------- archi */
+/* ========================================================= famiglie di nodo */
+/*
+ * Un blocco solo per i tre posti che mostrano un nodo (card sul canvas, voce della palette, testa
+ * dell'ispettore): la classe la calcola `dpeNodeIconFamilyClass()` e assegna i due token che la
+ * pastiglia dell'icona legge. Prima era ripetuto identico in tre fogli incapsulati — e' il
+ * genere di duplicazione che il foglio unico elimina.
+ */
+
+.dpe-family--source {
+  --dpe-cat: var(--dpe-cat-source, #2f7d8f);
+  --dpe-cat-soft: var(--dpe-cat-source-soft, #dbecf0);
+}
+
+.dpe-family--transform {
+  --dpe-cat: var(--dpe-cat-transform, #3b6fd4);
+  --dpe-cat-soft: var(--dpe-cat-transform-soft, #e2eafb);
+}
+
+.dpe-family--sink {
+  --dpe-cat: var(--dpe-cat-sink, #1c8a5c);
+  --dpe-cat-soft: var(--dpe-cat-sink-soft, #dcf1e8);
+}
+
+.dpe-family--uncompilable {
+  --dpe-cat: var(--dpe-cat-uncompilable, #7c5cd6);
+  --dpe-cat-soft: var(--dpe-cat-uncompilable-soft, #ebe6fa);
+}
+
+/* ================================================================== guscio */
+/*
+ * L'elemento del componente radice. Prima era un `:host`: e' lo stesso selettore, scritto in CSS
+ * standard — il tag di un componente e' un elemento come un altro.
+ */
+
+dpe-builder {
+  display: block;
+  width: 100%;
+  /*
+   * `100%` di un contenitore che l'ospite dimensiona, ma **mai** piu' alto di quello: senza il
+   * `max-height`, un ospite che monta l'editor in un contenitore ad altezza automatica lo
+   * lascerebbe crescere quanto il contenuto, e i pannelli inferiori finirebbero fuori schermo.
+   */
+  height: 100%;
+  max-height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/*
+ * Colonna flex e **non** una griglia a righe percentuali.
+ *
+ * Con `grid-template-rows: … minmax(200px, 34%)` il pannello inferiore restava vuoto pur avendo
+ * le righe nel DOM: la percentuale si risolve contro l'altezza del contenitore e il contributo
+ * automatico di un'area scorrevole (`overflow: auto`) al dimensionamento della traccia e' **zero**,
+ * quindi bastava un anello indefinito nella catena delle altezze per far collassare la riga.
+ * Nella colonna flex l'altezza del pannello e' dichiarata in pixel (`flex-basis`) e non dipende
+ * da nessuna percentuale: e' il difetto che si vede solo guardando, e la forma robusta e' questa.
+ *
+ * `min-height: 0` su ogni contenitore di un'area scorrevole non e' rumore: senza, un elemento
+ * flex si rifiuta di rimpicciolirsi sotto il proprio contenuto e l'area scorrevole sfonda il
+ * guscio invece di scorrere.
+ *
+ * Colore e font stanno qui e non sull'elemento `dpe-builder`: e' lo stesso elemento che porta
+ * `.dpe-builder`, cioe' quello dove i token sono definiti, quindi `var(--dpe-text)` si risolve
+ * sempre — anche quando nessun antenato dichiara il tema.
+ */
+.dpe-shell {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--dpe-surface-alt, #f7f8fa);
+  color: var(--dpe-text, #1a1c23);
+  font: inherit;
+}
+
+/* --------------------------------------------------------------------- barra */
+
+.dpe-shell__bar {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 16px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--dpe-border, #e2e5eb);
+  background: var(--dpe-surface, #fff);
+}
+
+.dpe-shell__title {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+
+.dpe-shell__sub,
+.dpe-shell__label {
+  color: var(--dpe-text-muted, #6b7086);
+  font-size: 11px;
+}
+
+/*
+ * Indicatore di stato sporco. Colore **e** simbolo: il colore da solo non basta a distinguere
+ * due stati per chi non lo percepisce, e questo e' l'indicatore su cui si decide se salvare.
+ */
+.dpe-shell__dirty {
+  flex: 0 0 auto;
+  color: var(--dpe-text-subtle, #98a2b3);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.dpe-shell__dirty--on {
+  color: var(--dpe-warning, #b7791f);
+  font-weight: 600;
+}
+
+.dpe-shell__group {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.dpe-shell__status {
+  margin-left: auto;
+}
+
+/*
+ * Il gruppo del comando primario si stacca dagli altri: un separatore verticale e un margine,
+ * perche' «Salva» scrive mentre annulla/ripeti/riordina disfano. Accostarli li fa pesare uguale,
+ * che e' il difetto rilevato.
+ */
+.dpe-shell__group--primary {
+  padding-left: 14px;
+  border-left: 1px solid var(--dpe-border, #e2e5eb);
+}
+
+/* Badge del dialetto: in sola lettura, quindi non ha ne' bordo cliccabile ne' cursore. */
+.dpe-shell__dialect {
+  flex: 0 0 auto;
+  padding: 3px 8px;
+  border: 1px solid var(--dpe-border, #e2e5eb);
+  border-radius: 999px;
+  background: var(--dpe-surface-alt, #f7f8fa);
+  color: var(--dpe-text-muted, #6b7086);
+  font-size: 11px;
+  white-space: nowrap;
+  cursor: help;
+}
+
+.dpe-shell__dialect strong {
+  color: var(--dpe-text, #1a1c23);
+}
+
+/* Avviso transitorio del salvataggio riuscito. */
+.dpe-shell__toast {
+  flex: 0 0 auto;
+  padding: 2px 8px;
+  border: 1px solid var(--dpe-success, #22a06b);
+  border-radius: 999px;
+  color: var(--dpe-success, #22a06b);
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.dpe-shell__btn {
+  padding: 4px 9px;
+  border: 1px solid var(--dpe-border, #e2e5eb);
+  border-radius: var(--dpe-radius-xs, 6px);
+  background: var(--dpe-surface, #fff);
+  color: var(--dpe-text, #1a1c23);
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.dpe-shell__btn:hover:not(:disabled) {
+  background: var(--dpe-surface-alt, #f7f8fa);
+}
+
+.dpe-shell__btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.dpe-shell__btn--primary {
+  border-color: var(--dpe-accent, #2f7d8f);
+  background: var(--dpe-accent, #2f7d8f);
+  color: var(--dpe-accent-contrast, #fff);
+}
+
+.dpe-shell__btn--primary:hover:not(:disabled) {
+  border-color: var(--dpe-accent-strong, #226270);
+  background: var(--dpe-accent-strong, #226270);
+}
+
+.dpe-shell__pill {
+  padding: 2px 8px;
+  border: 1px solid var(--dpe-border, #e2e5eb);
+  border-radius: 999px;
+  background: var(--dpe-surface-alt, #f7f8fa);
+  color: var(--dpe-text-muted, #6b7086);
+  font-size: 11px;
+}
+
+.dpe-shell__pill--ok {
+  border-color: var(--dpe-success, #22a06b);
+  color: var(--dpe-success, #22a06b);
+}
+
+.dpe-shell__pill--error {
+  border-color: var(--dpe-error, #dc2626);
+  color: var(--dpe-error, #dc2626);
+}
+
+.dpe-shell__pill--busy {
+  border-color: var(--dpe-info, #3b6fd4);
+  color: var(--dpe-info, #3b6fd4);
+}
+
+/* Banner di riga intera: disallineamento del dialetto, salvataggio fallito. Non e' un tooltip. */
+.dpe-shell__warn {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--dpe-warning, #b7791f);
+  background: color-mix(in srgb, var(--dpe-warning, #b7791f) 10%, var(--dpe-surface, #fff));
+  font-size: 12px;
+}
+
+.dpe-shell__warn--error {
+  border-bottom-color: var(--dpe-error, #dc2626);
+  background: color-mix(in srgb, var(--dpe-error, #dc2626) 8%, var(--dpe-surface, #fff));
+}
+
+.dpe-shell__warn p {
+  margin: 0;
+  line-height: 1.5;
+}
+
+/* ---------------------------------------------------------------------- corpo */
+
+.dpe-shell__body {
+  display: grid;
+  flex: 1 1 auto;
+  grid-template-columns: 210px minmax(0, 1fr) 340px;
+  min-height: 0;
+  border-bottom: 1px solid var(--dpe-border, #e2e5eb);
+}
+
+.dpe-shell__palette,
+.dpe-shell__inspector {
+  min-height: 0;
+  max-height: 100%;
+}
+
+.dpe-shell__inspector {
+  border-left: 1px solid var(--dpe-border, #e2e5eb);
+  background: var(--dpe-surface, #fff);
+}
+
+/* Il canvas ha bisogno di un'altezza esplicita, e in una griglia la prende dalla riga. */
+.dpe-shell__canvas {
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+}
+
+/* ------------------------------------------------------------------ pannelli */
+
+/* Altezza in pixel: e' cio' che rende il pannello indipendente dalla catena delle percentuali. */
+.dpe-shell__bottom {
+  display: flex;
+  flex: 0 0 280px;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--dpe-surface, #fff);
+}
+
+.dpe-shell__tabs {
+  display: flex;
+  flex: 0 0 auto;
+  gap: 2px;
+  padding: 0 8px;
+  border-bottom: 1px solid var(--dpe-border, #e2e5eb);
+  background: var(--dpe-surface-alt, #f7f8fa);
+}
+
+.dpe-shell__tab {
+  padding: 6px 10px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--dpe-text-muted, #6b7086);
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.dpe-shell__tab--active {
+  border-bottom-color: var(--dpe-accent, #2f7d8f);
+  color: var(--dpe-text, #1a1c23);
+  font-weight: 600;
+}
+
+/*
+ * Riquadro del pannello inferiore. La classe sta **sull'elemento del componente** (`<dpe-schema-panel
+ * class="dpe-shell__panel">`), quindi qui non si dichiara `overflow`: lo scorrimento lo dichiara il
+ * pannello sul proprio selettore di elemento. Con l'incapsulamento le due regole avevano la stessa
+ * specificita' e vinceva quella caricata per ultima — cioe' nessuno dei due autori decideva. Ora
+ * sono su proprieta' distinte e non c'e' niente da vincere.
+ */
+.dpe-shell__panel {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+/* ================================================================== canvas */
+/*
+ * Tutto cio' che vive dentro `f-flow` lo disegna @foblex/flow, e i suoi selettori sono piu' forti
+ * di quanto sembri: il tema si scrive due volte, una per l'elemento e una per la classe, ed e' la
+ * seconda forma quella che vince. La card e' `.f-flow .f-node` = **(0,2,0)**, il connettore
+ * `.f-flow .f-connector-target:not(.f-node)` = **(0,3,0)**.
+ *
+ * Per questo il canvas mette la classe `dpe-flow` sul suo `<f-flow>` e i selettori qui sotto
+ * partono da `dpe-canvas .dpe-flow`: la card diventa (0,2,2) e i connettori, che aggiungono
+ * `.dpe-node`, (0,3,1). Si vince per specificita' dichiarata, non per ordine di caricamento e non
+ * con `!important` — che vincerebbe anche dove non serve e lascerebbe l'ospite senza modo di
+ * ritematizzare.
+ *
+ * Nota storica: prima queste regole stavano nel CSS incapsulato del componente, e Angular
+ * aggiungeva l'attributo di scope a **ogni** compound del selettore. Era da li' che arrivava la
+ * specificita' necessaria — cioe' dal framework, non dal foglio. Qui e' scritta.
+ */
+
+dpe-canvas {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--dpe-canvas-bg, #f4f5f7);
+}
+
+/*
+ * Senza altezza esplicita il canvas non si vede: e' l'errore piu' comune con @foblex/flow. Il
+ * selettore parte da `dpe-canvas` perche' `f-flow` e' un elemento della libreria e una regola
+ * nuda uscirebbe dall'editor.
+ */
+dpe-canvas .dpe-flow {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+dpe-canvas .dpe-flow .dpe-minimap {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  width: 180px;
+  height: 120px;
+  border: 1px solid var(--dpe-border, #e2e5eb);
+  border-radius: var(--dpe-radius, 10px);
+  background: var(--dpe-surface, #fff);
+  box-shadow: var(--dpe-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));
+  overflow: hidden;
+}
+
+dpe-canvas .dpe-flow .dpe-viewport-reset {
+  position: absolute;
+  right: 12px;
+  /* 12 (bordo) + 120 (minimappa) + 8 (respiro) */
+  bottom: 140px;
+  z-index: 1;
+  padding: 5px 10px;
+  border: 1px solid var(--dpe-border, #e2e5eb);
+  border-radius: var(--dpe-radius-xs, 6px);
+  background: var(--dpe-surface, #fff);
+  box-shadow: var(--dpe-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));
+  color: var(--dpe-text-muted, #6b7086);
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+  transition: opacity 0.15s ease, visibility 0.15s ease;
+}
+
+/* `visibility` e non `display`: si dissolve e nel frattempo esce dall'ordine di tabulazione. */
+dpe-canvas .dpe-flow .dpe-viewport-reset--hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+/* ---------------------------------------------------------------------- nodo */
+
+dpe-canvas .dpe-flow .dpe-node {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 230px;
+  border: 1px solid var(--dpe-border, #e2e5eb);
+  border-left: 4px solid var(--dpe-border-strong, #cfd4de);
+  border-radius: var(--dpe-radius-lg, 12px);
+  background: var(--dpe-surface, #fff);
+  box-shadow: var(--dpe-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));
+  color: var(--dpe-text, #1a1c23);
+  font: inherit;
+  /*
+   * Allineamento dichiarato: il tema di @foblex/flow centra il testo dentro il nodo, e la card
+   * ne usciva con titolo e sottotipo in mezzo — cioe' l'unica riga che si legge per prima
+   * cambiava posizione a ogni larghezza. Un'intestazione si legge a sinistra.
+   */
+  text-align: left;
+  cursor: grab;
+  user-select: none;
+  transition: box-shadow 0.12s ease, border-color 0.12s ease;
+}
+
+/*
+ * Larghezza per numero di porte di ingresso: le porte stanno in fila sul bordo superiore.
+ * Questi valori sono la copia di `PORT_WIDTHS` in `dpe-canvas.model.ts`, che li passa a dagre:
+ * se divergono, il layout automatico lascia i nodi larghi sovrapposti. Sono classi e non stili
+ * inline perche' la libreria riscrive `style` del nodo a ogni riposizionamento.
+ */
+dpe-canvas .dpe-flow .dpe-node--ports-2 {
+  width: 260px;
+}
+
+dpe-canvas .dpe-flow .dpe-node--ports-3 {
+  width: 320px;
+}
+
+dpe-canvas .dpe-flow .dpe-node--ports-4 {
+  width: 380px;
+}
+
+dpe-canvas .dpe-flow .dpe-node:hover {
+  box-shadow: var(--dpe-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));
+}
+
+dpe-canvas .dpe-flow .dpe-node--selected {
+  border-color: var(--dpe-accent, #2f7d8f);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dpe-accent, #2f7d8f) 22%, transparent);
+}
+
+dpe-canvas .dpe-flow .dpe-node--error {
+  border-color: var(--dpe-error, #dc2626);
+}
+
+dpe-canvas .dpe-flow .dpe-node--warning {
+  border-color: var(--dpe-warning, #b7791f);
+}
+
+/*
+ * Valido ma non compilabile: bordo tratteggiato **e** colore proprio. Il tratteggio dice "non
+ * arriva all'SQL", il colore dice "non e' un errore tuo". Un solo segnale non basta: il
+ * tratteggio da solo si legge come "incompleto".
+ */
+dpe-canvas .dpe-flow .dpe-node--not-compilable {
+  border-color: var(--dpe-not-compilable, #7c5cd6);
+  border-style: dashed;
+}
+
+/*
+ * Fascia colorata sul bordo sinistro: **lo stesso colore dell'icona**, cioe' quello della
+ * famiglia. Prima erano due sistemi di colore (fascia per gruppi di collezioni, icona per
+ * famiglia) e sulla stessa card avrebbero detto due cose diverse.
+ *
+ * Sta **dopo** i modificatori di gravita' di proposito: ha la loro stessa specificita', quindi
+ * vince per ordine e la fascia resta della famiglia anche su un nodo in errore, dove il rosso
+ * prende gli altri tre lati. Spostare questo blocco piu' in alto cambia il disegno.
+ */
+dpe-canvas .dpe-flow .dpe-node {
+  border-left-color: var(--dpe-cat, var(--dpe-border-strong, #cfd4de));
+}
+
+/* ------------------------------------------------------------------- porte */
+
+dpe-canvas .dpe-flow .dpe-node__ports {
+  display: flex;
+  justify-content: space-around;
+  gap: 6px;
+  padding: 0 10px;
+  /* Le porte sporgono sul bordo superiore: e' il punto in cui gli archi arrivano. */
+  margin-top: -6px;
+  min-height: 6px;
+}
+
+dpe-canvas .dpe-flow .dpe-node__ports--labelled {
+  min-height: 18px;
+}
+
+dpe-canvas .dpe-flow .dpe-port {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+}
+
+dpe-canvas .dpe-flow .dpe-port__label {
+  max-width: 96px;
+  overflow: hidden;
+  color: var(--dpe-text-subtle, #98a2b3);
+  font-size: 9px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+/*
+ * Il tema di @foblex/flow posiziona i connettori in `absolute` con un offset pensato per uscite
+ * sul fianco. Qui tornano nel flusso, e il selettore parte da `f-flow` perche' la regola del
+ * tema (`f-flow .f-connector-source:not(.f-node)`) ha specificita' maggiore di una sola classe:
+ * si pareggia e si vince per ordine, ed e' il motivo per cui questo foglio va caricato **dopo**
+ * `@foblex/flow/styles/default.scss`.
+ */
+dpe-canvas .dpe-flow .dpe-connector {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  cursor: crosshair;
+  transition: transform 0.12s ease, background-color 0.12s ease;
+}
+
+dpe-canvas .dpe-flow .dpe-node .dpe-connector--in {
+  position: relative;
+  left: auto;
+  top: auto;
+  right: auto;
+  bottom: auto;
+  width: 22px;
+  height: 6px;
+  border: 0;
+  border-radius: 3px;
+  background: var(--dpe-border-strong, #cfd4de);
+}
+
+/* Il capo dell'arco arriva qui: si allarga al passaggio per essere un bersaglio raggiungibile. */
+dpe-canvas .dpe-flow .dpe-node .dpe-connector--in:hover {
+  background: var(--dpe-accent, #2f7d8f);
+  transform: scaleY(1.6);
+}
+
+/* Riferimento non risolto: la porta lo dice, perche' l'arco non e' disegnabile. */
+dpe-canvas .dpe-flow .dpe-node .dpe-connector--in.dpe-connector--broken {
+  background: var(--dpe-edge-broken, #dc2626);
+}
+
+dpe-canvas .dpe-flow .dpe-node__out {
+  display: flex;
+  justify-content: center;
+  padding-bottom: 0;
+}
+
+dpe-canvas .dpe-flow .dpe-node .dpe-connector--out {
+  position: relative;
+  left: auto;
+  top: auto;
+  right: auto;
+  bottom: auto;
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--dpe-surface, #fff);
+  border-radius: 50%;
+  background: var(--dpe-border-strong, #cfd4de);
+  /* Sporge oltre il bordo inferiore: e' lì che gli archi partono. */
+  margin-bottom: -6px;
+  /*
+   * `--ff-connector-connected-color` e' il token con cui la libreria colora un connettore
+   * collegato: la sua regola ha specificita' (0,4,1) e non si batte con una classe, ma la
+   * variabile si eredita. Senza, un'uscita collegata tornerebbe al colore della libreria.
+   */
+  --ff-connector-connected-color: var(--dpe-accent, #2f7d8f);
+}
+
+dpe-canvas .dpe-flow .dpe-node .dpe-connector--out:hover {
+  transform: scale(1.25);
+  background: var(--dpe-accent, #2f7d8f);
+}
+
+/* ------------------------------------------------------------ intestazione */
+
+dpe-canvas .dpe-flow .dpe-node__head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 8px 2px 10px;
+}
+
+/*
+ * Pastiglia dell'icona: identica a quella della palette, per misura e colori. I due token
+ * `--dpe-cat`/`--dpe-cat-soft` li assegna la classe di famiglia (sezione «famiglie di nodo»).
+ */
+dpe-canvas .dpe-flow .dpe-node__icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: var(--dpe-radius-sm, 8px);
+  background: var(--dpe-cat-soft, #eef0f4);
+  color: var(--dpe-cat, #6b7086);
+}
+
+dpe-canvas .dpe-flow .dpe-node__text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+dpe-canvas .dpe-flow .dpe-node__title {
+  overflow: hidden;
+  font-size: 13px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+dpe-canvas .dpe-flow .dpe-node__sub {
+  overflow: hidden;
+  color: var(--dpe-text-muted, #6b7086);
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+dpe-canvas .dpe-flow .dpe-node__dot {
+  padding: 0 4px;
+  color: var(--dpe-text-subtle, #98a2b3);
+}
+
+dpe-canvas .dpe-flow .dpe-node__btn {
+  flex: 0 0 auto;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--dpe-radius-xs, 6px);
+  background: transparent;
+  color: var(--dpe-text-muted, #6b7086);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+dpe-canvas .dpe-flow .dpe-node__btn:hover {
+  border-color: var(--dpe-border, #e2e5eb);
+  background: var(--dpe-surface-alt, #f7f8fa);
+  color: var(--dpe-text, #1a1c23);
+}
+
+dpe-canvas .dpe-flow .dpe-node__btn--remove:hover {
+  border-color: var(--dpe-error, #dc2626);
+  color: var(--dpe-error, #dc2626);
+}
+
+dpe-canvas .dpe-flow .dpe-node__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  padding: 0 10px 8px;
+  min-height: 18px;
+}
+
+dpe-canvas .dpe-flow .dpe-node__name {
+  overflow: hidden;
+  max-width: 130px;
+  color: var(--dpe-text-subtle, #98a2b3);
+  font-family: var(--dpe-font-mono, monospace);
+  font-size: 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+dpe-canvas .dpe-flow .dpe-badge {
+  padding: 1px 6px;
+  border: 1px solid var(--dpe-border, #e2e5eb);
+  border-radius: 999px;
+  background: var(--dpe-surface-alt, #f7f8fa);
+  color: var(--dpe-text-muted, #6b7086);
+  font-size: 10px;
+  white-space: nowrap;
+}
+
+dpe-canvas .dpe-flow .dpe-badge--error {
+  border-color: var(--dpe-error, #dc2626);
+  color: var(--dpe-error, #dc2626);
+}
+
+dpe-canvas .dpe-flow .dpe-badge--warning {
+  border-color: var(--dpe-warning, #b7791f);
+  color: var(--dpe-warning, #b7791f);
+}
+
+dpe-canvas .dpe-flow .dpe-badge--info {
+  border-color: var(--dpe-info, #3b6fd4);
+  color: var(--dpe-info, #3b6fd4);
+}
+
+dpe-canvas .dpe-flow .dpe-badge--not-compilable {
+  border-color: var(--dpe-not-compilable, #7c5cd6);
+  color: var(--dpe-not-compilable, #7c5cd6);
+}
+
+/* =================================================================== archi */
 /*
  * Gli archi si colorano impostando le custom properties del tema di @foblex/flow, non
  * sovrascrivendone le regole: `f-flow .f-connection .f-connection-path` ha la stessa
@@ -216,7 +948,1013 @@
  * e, arrivando dopo nel foglio, vince — ma riguarda solo `stroke-dasharray`, che il tema di
  * @foblex/flow non imposta: nessun conflitto reale.
  */
-f-flow .dpe-edge--broken .f-connection-path,
-f-flow .dpe-edge--creating .f-connection-path {
+dpe-canvas .dpe-flow .dpe-edge--broken .f-connection-path,
+dpe-canvas .dpe-flow .dpe-edge--creating .f-connection-path {
   stroke-dasharray: 6 4;
 }
+
+/* ================================================================= palette */
+
+dpe-node-palette {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px;
+  overflow: auto;
+  background: var(--dpe-surface, #fff);
+  border-right: 1px solid var(--dpe-border, #e2e5eb);
+}
+
+dpe-node-palette h3 {
+  margin: 0;
+  color: var(--dpe-text-muted, #6b7086);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+dpe-node-palette input[type='search'] {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 5px 7px;
+  border: 1px solid var(--dpe-border, #e2e5eb);
+  border-radius: var(--dpe-radius-xs, 6px);
+  background: var(--dpe-surface, #fff);
+  color: var(--dpe-text, #1a1c23);
+  font: inherit;
+  font-size: 12px;
+}
+
+/* Intestazione di gruppo: piu' piccola del titolo della palette, e non cliccabile. */
+dpe-node-palette .dpe-palette__group {
+  margin: 8px 2px 2px;
+  color: var(--dpe-text-subtle, #98a2b3);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+/*
+ * TRAPPOLA @foblex/flow, la stessa dei nodi in un punto dove non era prevista: al termine di
+ * un trascinamento la libreria **riscrive l'attributo style** della voce. Durante il gesto la
+ * nasconde con display none e alla fine la ripristina scrivendo il display originale, oppure
+ * block se non ce n'era. Il nostro display originale era vuoto — arriva dal CSS, non da uno
+ * stile inline — quindi sull'elemento resta scritto display block.
+ *
+ * Conseguenza vista nel browser: un display flex qui sopravviveva fino al primo
+ * trascinamento e poi no, e titolo e descrizione, che erano flex item, tornavano inline e si
+ * attaccavano sulla stessa riga. Solo sulle voci trascinate, solo dopo il gesto: nessuno
+ * screenshot iniziale lo mostrava.
+ *
+ * C'e' un secondo strato, scoperto misurando: il tema della libreria dichiara sulla stessa
+ * classe .f-external-item un display inline-flex in **riga**. Quindi la voce e' inline-flex
+ * finche' non la si trascina e block dopo: due valori, nessuno dei due nostro.
+ *
+ * Correzione **strutturale**: il layout non dipende dal display di questo elemento. La voce e'
+ * un involucro qualunque — inline-flex o block, indifferente — e dentro c'e' **un solo**
+ * figlio, .dpe-palette__body, che porta la riga. Un unico figlio si comporta allo stesso
+ * modo in entrambi i casi, ed e' questo che rende il difetto irripetibile. Niente !important
+ * e niente ripristino a mano dopo il gesto: sarebbe una gara di specificita' con chi riscrive
+ * lo stile, e la si perde al prossimo aggiornamento.
+ *
+ * Corollario per l'icona: **non** diventa un secondo figlio del bottone. Sta dentro
+ * .dpe-palette__body con l'etichetta, altrimenti dopo un trascinamento i due figli
+ * tornerebbero a impilarsi.
+ */
+dpe-node-palette .dpe-palette__item {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 4px 6px;
+  border: 1px solid transparent;
+  border-radius: var(--dpe-radius-xs, 6px);
+  background: transparent;
+  color: var(--dpe-text, #1a1c23);
+  font: inherit;
+  text-align: left;
+  cursor: grab;
+}
+
+dpe-node-palette .dpe-palette__item:hover {
+  background: var(--dpe-surface-alt, #f7f8fa);
+  border-color: var(--dpe-border, #e2e5eb);
+}
+
+dpe-node-palette .dpe-palette__item:focus-visible {
+  outline: 2px solid var(--dpe-accent, #2f7d8f);
+  outline-offset: 1px;
+}
+
+/*
+ * L'involucro interno: unico figlio della voce, quindi indifferente al display di chi lo
+ * contiene. Qui vive il layout della riga.
+ */
+dpe-node-palette .dpe-palette__body {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+}
+
+/*
+ * Pastiglia dell'icona. Sfondo tenue e tratto pieno della famiglia: gli stessi due token
+ * che colorano la card sul canvas, cosi' cio' che si trascina e cio' che compare hanno lo
+ * stesso colore.
+ */
+dpe-node-palette .dpe-palette__icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--dpe-radius-xs, 6px);
+  background: var(--dpe-cat-soft, #eef0f4);
+  color: var(--dpe-cat, #6b7086);
+}
+
+dpe-node-palette .dpe-palette__label {
+  flex: 1 1 auto;
+  overflow: hidden;
+  min-width: 0;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * Non compilabile in v1: si distingue **prima** di trascinarlo, non dopo. Segno compatto e
+ * non una terza riga — l'informazione per esteso sta nel titolo, con la descrizione.
+ */
+dpe-node-palette .dpe-palette__flag {
+  flex: 0 0 auto;
+  padding: 0 5px;
+  border: 1px solid var(--dpe-not-compilable, #7c5cd6);
+  border-radius: 999px;
+  color: var(--dpe-not-compilable, #7c5cd6);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+dpe-node-palette .dpe-palette__empty {
+  margin: 6px 2px;
+  color: var(--dpe-text-muted, #6b7086);
+  font-size: 11px;
+}
+
+/* =============================================================== icona nodo */
+
+dpe-node-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  line-height: 0;
+}
+
+/* ======================================================== form (ispettori) */
+/*
+ * Stili condivisi da tutti gli ispettori. Prima erano un foglio incluso per riferimento in
+ * quindici componenti — quindi quindici copie nel bundle; qui e' una copia sola.
+ */
+
+.dpe-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  font-size: 12px;
+}
+
+.dpe-field {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.dpe-field__label {
+  color: var(--dpe-text-muted, #6b7086);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.dpe-field__hint {
+  color: var(--dpe-text-subtle, #98a2b3);
+  font-size: 10px;
+}
+
+/* Un rilievo del backend sul campo: si mostra sotto, non in un tooltip. */
+.dpe-field__issue {
+  color: var(--dpe-error, #dc2626);
+  font-size: 10px;
+}
+
+.dpe-field__issue--warning {
+  color: var(--dpe-warning, #b7791f);
+}
+
+.dpe-field__issue--info {
+  color: var(--dpe-info, #3b6fd4);
+}
+
+.dpe-form input[type='text'],
+.dpe-form input[type='number'],
+.dpe-form input[type='search'],
+.dpe-form select,
+.dpe-form textarea {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 5px 7px;
+  border: 1px solid var(--dpe-border, #e2e5eb);
+  border-radius: var(--dpe-radius-xs, 6px);
+  background: var(--dpe-surface, #fff);
+  color: var(--dpe-text, #1a1c23);
+  font: inherit;
+  font-size: 12px;
+}
+
+.dpe-form input:focus-visible,
+.dpe-form select:focus-visible,
+.dpe-form textarea:focus-visible {
+  outline: 2px solid var(--dpe-accent, #2f7d8f);
+  outline-offset: 1px;
+}
+
+.dpe-form input[aria-invalid='true'] {
+  border-color: var(--dpe-error, #dc2626);
+}
+
+.dpe-form textarea {
+  min-height: 56px;
+  font-family: var(--dpe-font-mono, monospace);
+  resize: vertical;
+}
+
+.dpe-check {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.dpe-check input {
+  margin: 0;
+}
+
+.dpe-row {
+  display: flex;
+  gap: 8px;
+}
+
+.dpe-row > * {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.dpe-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 11px;
+}
+
+.dpe-table th {
+  padding: 3px 4px;
+  color: var(--dpe-text-muted, #6b7086);
+  font-size: 10px;
+  font-weight: 600;
+  text-align: left;
+}
+
+.dpe-table td {
+  padding: 2px 4px;
+  vertical-align: top;
+}
+
+.dpe-table input,
+.dpe-table select {
+  padding: 3px 5px;
+  font-size: 11px;
+}
+
+.dpe-btn {
+  padding: 4px 9px;
+  border: 1px solid var(--dpe-border, #e2e5eb);
+  border-radius: var(--dpe-radius-xs, 6px);
+  background: var(--dpe-surface, #fff);
+  color: var(--dpe-text, #1a1c23);
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.dpe-btn:hover:not(:disabled) {
+  background: var(--dpe-surface-alt, #f7f8fa);
+}
+
+.dpe-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.dpe-btn--danger:hover:not(:disabled) {
+  border-color: var(--dpe-error, #dc2626);
+  color: var(--dpe-error, #dc2626);
+}
+
+.dpe-btn--icon {
+  padding: 2px 6px;
+}
+
+.dpe-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding-top: 8px;
+  border-top: 1px solid var(--dpe-border-subtle, #eef0f4);
+}
+
+.dpe-section__title {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  color: var(--dpe-text-muted, #6b7086);
+}
+
+/* Avviso "non e' un errore tuo": stesso colore del badge del nodo non compilabile. */
+.dpe-note {
+  padding: 6px 8px;
+  border: 1px solid var(--dpe-border, #e2e5eb);
+  border-left: 3px solid var(--dpe-info, #3b6fd4);
+  border-radius: var(--dpe-radius-xs, 6px);
+  background: var(--dpe-surface-alt, #f7f8fa);
+  color: var(--dpe-text-muted, #6b7086);
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+.dpe-note--not-compilable {
+  border-left-color: var(--dpe-not-compilable, #7c5cd6);
+}
+
+.dpe-note--warning {
+  border-left-color: var(--dpe-warning, #b7791f);
+}
+
+.dpe-note--danger {
+  border-left-color: var(--dpe-error, #dc2626);
+}
+
+.dpe-empty {
+  color: var(--dpe-text-subtle, #98a2b3);
+  font-size: 11px;
+  font-style: italic;
+}
+
+/* Dialetto citato nell'editor di espressioni: e' testo tecnico, quindi monospaziato. */
+.dpe-expr__dialect {
+  font-family: var(--dpe-font-mono, monospace);
+  font-weight: 600;
+}
+
+/* =============================================================== ispettore */
+
+dpe-node-inspector {
+  display: block;
+  padding: 12px;
+  overflow: auto;
+}
+
+.dpe-inspector__head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+/* Pastiglia identica a quella della palette e della card: stessa misura, stessi token. */
+.dpe-inspector__icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: var(--dpe-radius-sm, 8px);
+  background: var(--dpe-cat-soft, #eef0f4);
+  color: var(--dpe-cat, #6b7086);
+}
+
+.dpe-inspector__name {
+  flex: 1 1 auto;
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dpe-inspector__category {
+  /* All'estremita' opposta del titolo, come prima di avere l'icona in testa. */
+  margin-left: auto;
+  flex: 0 0 auto;
+  color: var(--dpe-text-muted, #6b7086);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.dpe-columns {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.dpe-column {
+  padding: 1px 6px;
+  border: 1px solid var(--dpe-border, #e2e5eb);
+  border-radius: 999px;
+  background: var(--dpe-surface-alt, #f7f8fa);
+  font-size: 10px;
+}
+
+.dpe-column--nullable {
+  border-style: dashed;
+}
+
+.dpe-multi__names {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin: 8px 0;
+  padding: 0;
+  list-style: none;
+}
+
+.dpe-multi__name {
+  padding: 1px 6px;
+  border: 1px solid var(--dpe-border, #e2e5eb);
+  border-radius: 999px;
+  background: var(--dpe-surface-alt, #f7f8fa);
+  font-family: var(--dpe-font-mono, monospace);
+  font-size: 10px;
+}
+
+/* ============================================================ diagnostiche */
+
+dpe-diagnostics-panel {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  background: var(--dpe-surface, #fff);
+  font-size: 12px;
+}
+
+.dpe-diag__head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--dpe-border-subtle, #eef0f4);
+}
+
+.dpe-diag__count {
+  color: var(--dpe-text-muted, #6b7086);
+  font-size: 11px;
+}
+
+.dpe-diag__row {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 10px;
+  border: 0;
+  border-bottom: 1px solid var(--dpe-border-subtle, #eef0f4);
+  border-left: 3px solid transparent;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 11px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.dpe-diag__row:hover {
+  background: var(--dpe-surface-alt, #f7f8fa);
+}
+
+.dpe-diag__row:focus-visible {
+  outline: 2px solid var(--dpe-accent, #2f7d8f);
+  outline-offset: -2px;
+}
+
+.dpe-diag__row--Error {
+  border-left-color: var(--dpe-error, #dc2626);
+}
+
+.dpe-diag__row--Warning {
+  border-left-color: var(--dpe-warning, #b7791f);
+}
+
+.dpe-diag__row--Info {
+  border-left-color: var(--dpe-info, #3b6fd4);
+}
+
+/* Vince sulla gravita': non e' un problema dell'utente, e si deve vedere subito. Vince per
+   ordine, quindi resta **dopo** i tre blocchi di gravita'. */
+.dpe-diag__row--not-compilable {
+  border-left-color: var(--dpe-not-compilable, #7c5cd6);
+  background: color-mix(in srgb, var(--dpe-not-compilable, #7c5cd6) 6%, transparent);
+}
+
+.dpe-diag__code {
+  flex: 0 0 auto;
+  font-family: var(--dpe-font-mono, monospace);
+  font-size: 10px;
+  color: var(--dpe-text-muted, #6b7086);
+}
+
+.dpe-diag__text {
+  flex: 1 1 auto;
+}
+
+.dpe-diag__where {
+  color: var(--dpe-text-subtle, #98a2b3);
+  font-size: 10px;
+}
+
+.dpe-diag__tag {
+  flex: 0 0 auto;
+  padding: 0 6px;
+  border: 1px solid currentcolor;
+  border-radius: 999px;
+  font-size: 9px;
+  text-transform: uppercase;
+}
+
+.dpe-diag__tag--not-compilable {
+  color: var(--dpe-not-compilable, #7c5cd6);
+}
+
+.dpe-diag__tag--dialect {
+  color: var(--dpe-info, #3b6fd4);
+}
+
+.dpe-diag__empty {
+  padding: 10px;
+  color: var(--dpe-text-subtle, #98a2b3);
+  font-size: 11px;
+  font-style: italic;
+}
+
+/* ================================================================== schema */
+
+dpe-schema-panel {
+  display: block;
+  overflow: auto;
+  padding: 8px 10px;
+  background: var(--dpe-surface, #fff);
+  font-size: 12px;
+}
+
+.dpe-schema__node {
+  padding: 6px 0;
+  border-bottom: 1px solid var(--dpe-border-subtle, #eef0f4);
+}
+
+.dpe-schema__head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.dpe-schema__name {
+  font-family: var(--dpe-font-mono, monospace);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.dpe-schema__node--selected .dpe-schema__name {
+  color: var(--dpe-accent, #2f7d8f);
+}
+
+.dpe-schema__category {
+  color: var(--dpe-text-subtle, #98a2b3);
+  font-size: 10px;
+  text-transform: uppercase;
+}
+
+.dpe-schema__line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px;
+  margin-top: 3px;
+}
+
+.dpe-schema__label {
+  min-width: 62px;
+  color: var(--dpe-text-muted, #6b7086);
+  font-size: 10px;
+}
+
+.dpe-col {
+  padding: 1px 6px;
+  border: 1px solid var(--dpe-border, #e2e5eb);
+  border-radius: 999px;
+  background: var(--dpe-surface-alt, #f7f8fa);
+  font-size: 10px;
+}
+
+.dpe-col--nullable {
+  border-style: dashed;
+}
+
+/* Colonna che compare **qui**: un alias nuovo o una colonna calcolata. */
+.dpe-col--new {
+  border-color: var(--dpe-accent, #2f7d8f);
+  color: var(--dpe-accent-strong, #226270);
+  font-weight: 600;
+}
+
+.dpe-col--dropped {
+  border-color: var(--dpe-warning, #b7791f);
+  color: var(--dpe-warning, #b7791f);
+  text-decoration: line-through;
+}
+
+.dpe-schema__tag {
+  padding: 0 6px;
+  border: 1px solid var(--dpe-not-compilable, #7c5cd6);
+  border-radius: 999px;
+  color: var(--dpe-not-compilable, #7c5cd6);
+  font-size: 9px;
+  text-transform: uppercase;
+}
+
+.dpe-schema__empty {
+  color: var(--dpe-text-subtle, #98a2b3);
+  font-size: 11px;
+  font-style: italic;
+}
+
+/* ============================================================ SQL generato */
+
+dpe-sql-preview {
+  display: block;
+  overflow: auto;
+  padding: 8px 10px;
+  background: var(--dpe-surface, #fff);
+  font-size: 12px;
+}
+
+.dpe-sql__bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.dpe-sql__btn {
+  padding: 4px 9px;
+  border: 1px solid var(--dpe-border, #e2e5eb);
+  border-radius: var(--dpe-radius-xs, 6px);
+  background: var(--dpe-surface, #fff);
+  color: var(--dpe-text, #1a1c23);
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.dpe-sql__btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.dpe-sql__note {
+  color: var(--dpe-text-muted, #6b7086);
+  font-size: 10px;
+}
+
+.dpe-sql__section {
+  margin-bottom: 10px;
+}
+
+.dpe-sql__title {
+  margin: 0 0 2px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--dpe-text-muted, #6b7086);
+}
+
+/* L'SQL e la tabella dei parametri: elementi nudi, quindi sempre dentro il componente. */
+dpe-sql-preview pre {
+  margin: 4px 0;
+  padding: 8px;
+  border: 1px solid var(--dpe-border, #e2e5eb);
+  border-radius: var(--dpe-radius-xs, 6px);
+  background: var(--dpe-surface-sunken, #eef0f4);
+  font-family: var(--dpe-font-mono, monospace);
+  font-size: 11px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+dpe-sql-preview table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 10px;
+}
+
+dpe-sql-preview th,
+dpe-sql-preview td {
+  padding: 2px 5px;
+  border-bottom: 1px solid var(--dpe-border-subtle, #eef0f4);
+  text-align: left;
+}
+
+.dpe-sql__empty {
+  color: var(--dpe-text-subtle, #98a2b3);
+  font-size: 11px;
+  font-style: italic;
+}
+
+/* =============================================================== catalogo */
+/*
+ * Il catalogo e' un componente riusabile e non una pagina della demo (ADR 0019): tutti i colori
+ * passano dai token, cosi' l'ospite lo ritematizza come il resto dell'editor. La radice del suo
+ * template porta `.dpe-theme`, quindi funziona anche montato da solo, fuori dall'editor.
+ */
+
+dpe-catalog {
+  display: block;
+  /*
+   * Altezza piena: senza, la sezione con `height: 100%` misura su un elemento di altezza
+   * automatica e il catalogo si ferma a meta' pagina, lasciando sotto una fascia vuota. E' il
+   * tipo di difetto che il compilatore non vede e che si nota solo guardando.
+   */
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.dpe-cat {
+  /*
+   * Colonna **flex** e non griglia a righe fisse: il banner d'errore c'e' o non c'e', e con
+   * `grid-template-rows` a quattro voci le righe si spostavano di una quando manca — il piede
+   * prendeva la riga elastica e l'elenco si stringeva sul contenuto, lasciando sotto una fascia
+   * vuota. Con flex e' l'elenco a dichiararsi elastico, indipendentemente da quanti fratelli ha.
+   */
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--dpe-surface-alt);
+  color: var(--dpe-text);
+  font-family: var(--dpe-font);
+}
+
+.dpe-cat__bar {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--dpe-border);
+  background: var(--dpe-surface);
+}
+
+.dpe-cat__title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.dpe-cat__count {
+  color: var(--dpe-text-muted);
+  font-size: 11px;
+}
+
+.dpe-cat__filter {
+  flex: 0 1 260px;
+  margin-left: auto;
+  padding: 5px 8px;
+  border: 1px solid var(--dpe-border-strong);
+  border-radius: var(--dpe-radius-xs);
+  background: var(--dpe-surface);
+  color: inherit;
+  font: inherit;
+  font-size: 12px;
+}
+
+.dpe-cat__btn {
+  padding: 4px 9px;
+  border: 1px solid var(--dpe-border-strong);
+  border-radius: var(--dpe-radius-xs);
+  background: var(--dpe-surface);
+  color: inherit;
+  font: inherit;
+  font-size: 11px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.dpe-cat__btn:hover:not(:disabled) {
+  border-color: var(--dpe-accent);
+  color: var(--dpe-accent-strong);
+}
+
+.dpe-cat__btn:disabled {
+  color: var(--dpe-text-subtle);
+  cursor: not-allowed;
+}
+
+.dpe-cat__btn--primary:not(:disabled) {
+  border-color: var(--dpe-accent-strong);
+  background: var(--dpe-accent);
+  color: var(--dpe-accent-contrast);
+  font-weight: 600;
+}
+
+.dpe-cat__btn--danger:not(:disabled) {
+  border-color: var(--dpe-error);
+  color: var(--dpe-error);
+}
+
+.dpe-cat__btn:focus-visible,
+.dpe-cat__filter:focus-visible,
+.dpe-cat__input:focus-visible,
+.dpe-cat__open:focus-visible {
+  outline: 2px solid var(--dpe-accent);
+  outline-offset: -2px;
+}
+
+.dpe-cat__error {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  margin: 0;
+  padding: 7px 14px;
+  border-bottom: 1px solid var(--dpe-border);
+  background: color-mix(in srgb, var(--dpe-error) 10%, var(--dpe-surface));
+  color: var(--dpe-error);
+  font-size: 11px;
+}
+
+.dpe-cat__dismiss {
+  margin-left: auto;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.dpe-cat__list {
+  flex: 1 1 auto;
+  min-height: 0;
+  margin: 0;
+  padding: 8px 10px;
+  overflow: auto;
+  list-style: none;
+}
+
+.dpe-cat__item {
+  margin-bottom: 6px;
+  border: 1px solid var(--dpe-border);
+  border-radius: var(--dpe-radius);
+  background: var(--dpe-surface);
+  box-shadow: var(--dpe-shadow-sm);
+}
+
+/* Attesa di una scrittura: si vede, ma l'elenco non lampeggia e resta leggibile. */
+.dpe-cat__item--busy {
+  opacity: 0.72;
+}
+
+.dpe-cat__row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 10px;
+}
+
+/*
+ * Un `<button>` per riga, come nel progetto di riferimento: apre. I comandi della riga sono
+ * **fratelli** e non figli — un bottone dentro un bottone non e' HTML valido e il click interno
+ * finirebbe comunque all'esterno.
+ */
+.dpe-cat__open {
+  display: grid;
+  flex: 1 1 auto;
+  gap: 2px;
+  padding: 5px 4px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.dpe-cat__label {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.dpe-cat__meta,
+.dpe-cat__desc {
+  color: var(--dpe-text-muted);
+  font-size: 11px;
+}
+
+.dpe-cat__name {
+  font-family: var(--dpe-font-mono);
+  font-size: 10px;
+}
+
+.dpe-cat__dot {
+  color: var(--dpe-text-subtle);
+}
+
+.dpe-cat__flag {
+  flex: 0 0 auto;
+  padding: 2px 7px;
+  border: 1px solid var(--dpe-border-strong);
+  border-radius: var(--dpe-radius-xs);
+  color: var(--dpe-text-muted);
+  font-size: 10px;
+}
+
+.dpe-cat__flag--errors {
+  border-color: var(--dpe-error);
+  background: color-mix(in srgb, var(--dpe-error) 8%, transparent);
+  color: var(--dpe-error);
+}
+
+.dpe-cat__actions,
+.dpe-cat__confirm {
+  display: flex;
+  flex: 0 0 auto;
+  gap: 6px;
+  align-items: center;
+  font-size: 11px;
+}
+
+.dpe-cat__empty {
+  padding: 18px 12px;
+  color: var(--dpe-text-muted);
+  font-size: 12px;
+  text-align: center;
+}
+
+.dpe-cat__foot {
+  flex: 0 0 auto;
+  padding: 10px 14px;
+  border-top: 1px solid var(--dpe-border);
+  background: var(--dpe-surface);
+}
+
+.dpe-cat__form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: flex-end;
+}
+
+.dpe-cat__form--inline {
+  padding: 8px 12px 10px;
+  border-top: 1px solid var(--dpe-border-subtle);
+  background: var(--dpe-surface-sunken);
+  border-radius: 0 0 var(--dpe-radius) var(--dpe-radius);
+}
+
+.dpe-cat__field {
+  display: grid;
+  gap: 3px;
+  font-size: 11px;
+  color: var(--dpe-text-muted);
+}
+
+.dpe-cat__input {
+  width: 200px;
+  padding: 5px 8px;
+  border: 1px solid var(--dpe-border-strong);
+  border-radius: var(--dpe-radius-xs);
+  background: var(--dpe-surface);
+  color: var(--dpe-text);
+  font: inherit;
+  font-size: 12px;
+}
+
+.dpe-cat__input:disabled {
+  background: var(--dpe-surface-sunken);
+  color: var(--dpe-text-subtle);
+}
+
+.dpe-cat__hint {
+  margin: 8px 0 0;
+  color: var(--dpe-text-muted);
+  font-size: 11px;
+  line-height: 1.45;
+}