@esfaenza/dpe-builder 20.0.1

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@esfaenza/dpe-builder",
+  "version": "20.0.1",
+  "peerDependencies": {
+    "@angular/cdk": "^20.2.14",
+    "@angular/common": "^20.3.25",
+    "@angular/core": "^20.3.25",
+    "@foblex/flow": ">=19.0.0",
+    "dagre": "^0.8.5",
+    "rxjs": "~7.8.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "description": "Editor visuale delle definizioni DPE: componenti standalone Angular, con tutto il traffico verso il backend dietro un'unica classe astratta (il contratto e' la classe astratta, ADR 0007; il client HTTP e' una sua implementazione opzionale, ADR 0020).",
+  "module": "fesm2022/esfaenza-dpe-builder.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/esfaenza-dpe-builder.mjs"
+    }
+  }
+}

package/styles/dpe-builder.css

@@ -0,0 +1,222 @@
+/*
+ * Tema dell'editor DPE — da includere negli `styles` dell'applicazione ospite, in
+ * quest'ordine:
+ *
+ *   "styles": [
+ *     "node_modules/@foblex/flow/styles/default.scss",
+ *     "node_modules/@esfaenza/dpe-builder/styles/dpe-builder.css",
+ *     "src/styles.css"
+ *   ]
+ *
+ * Contiene **soltanto** le due cose che non possono stare nel CSS incapsulato dei componenti:
+ *
+ *  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.
+ *
+ * Tutto il resto e' component-scoped. Se un giorno servisse davvero un controllo condiviso
+ * qui, va motivato in commento.
+ */
+
+.dpe-builder,
+.dpe-theme {
+  /* Superfici e testo */
+  --dpe-surface: #ffffff;
+  --dpe-surface-alt: #f7f8fa;
+  --dpe-surface-sunken: #eef0f4;
+  --dpe-canvas-bg: #f4f5f7;
+  --dpe-border: #e2e5eb;
+  --dpe-border-strong: #cfd4de;
+  --dpe-border-subtle: #eef0f4;
+  --dpe-text: #1a1c23;
+  --dpe-text-muted: #6b7086;
+  --dpe-text-subtle: #98a2b3;
+
+  /* Accento e stati */
+  --dpe-accent: #2f7d8f;
+  --dpe-accent-strong: #226270;
+  --dpe-accent-contrast: #ffffff;
+  --dpe-error: #dc2626;
+  --dpe-warning: #b7791f;
+  --dpe-success: #22a06b;
+  --dpe-info: #3b6fd4;
+
+  /*
+   * Nodo valido ma **non compilabile** (`DPE_NODE_NOT_COMPILABLE`, I10): non e' un errore
+   * dell'utente ed e' l'unica distinzione che deve leggersi a colpo d'occhio nel pannello
+   * delle diagnostiche. Colore proprio, ne' rosso ne' giallo, per non farlo confondere con
+   * qualcosa da correggere.
+   */
+  --dpe-not-compilable: #7c5cd6;
+
+  /*
+   * Colore per **famiglia** di categoria: sorgenti, trasformazioni, scritture, e cio' che il
+   * compilatore non traduce in v1. La famiglia si deriva da `isSource`/`isSink`/
+   * `isNotCompilableInV1` del catalogo (`core/dpe-node-icons.ts`): nessuna tassonomia nuova.
+   *
+   * La variante `-soft` e' lo sfondo della pastiglia dell'icona: il tratto usa il colore pieno,
+   * cosi' l'icona resta leggibile senza inventare un secondo colore di primo piano per il tema
+   * scuro. Sono valori espliciti e non `color-mix` perche' l'ospite deve poterli sovrascrivere
+   * uno per uno per entrare nel proprio design system.
+   */
+  --dpe-cat-source: #2f7d8f;
+  --dpe-cat-source-soft: #dbecf0;
+  --dpe-cat-transform: #3b6fd4;
+  --dpe-cat-transform-soft: #e2eafb;
+  --dpe-cat-sink: #1c8a5c;
+  --dpe-cat-sink-soft: #dcf1e8;
+  --dpe-cat-uncompilable: #7c5cd6;
+  --dpe-cat-uncompilable-soft: #ebe6fa;
+
+  /* Colori degli archi per tipo di ingresso */
+  --dpe-edge-source: #98a2b3;
+  --dpe-edge-primary: #2f7d8f;
+  --dpe-edge-secondary: #8b5cf6;
+  --dpe-edge-append: #22a06b;
+  --dpe-edge-broken: #dc2626;
+
+  /* Scala dei raggi e delle ombre: **una sola**, cosi' pannelli, card dei nodi e dialog
+     hanno la stessa morbidezza. */
+  --dpe-radius-xs: 6px;
+  --dpe-radius-sm: 8px;
+  --dpe-radius: 10px;
+  --dpe-radius-lg: 12px;
+  --dpe-shadow-sm: 0 1px 2px rgb(16 24 40 / 6%);
+  --dpe-shadow-md: 0 6px 18px rgb(16 24 40 / 10%);
+  --dpe-shadow-lg: 0 18px 44px rgb(16 24 40 / 18%);
+  --dpe-font: inherit;
+  --dpe-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+
+  /*
+   * 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.
+   */
+  --ff-canvas-background-color: var(--dpe-canvas-bg);
+  --ff-flow-background-color: var(--dpe-canvas-bg);
+  --ff-background-dot-color: color-mix(in srgb, var(--dpe-text-subtle) 40%, transparent);
+  --ff-connection-width: 2px;
+  --ff-connection-content-background-color: var(--dpe-surface);
+  --ff-connection-content-border-color: var(--dpe-border);
+  --ff-connection-content-color: var(--dpe-text-muted);
+  --ff-minimap-background-color: var(--dpe-surface);
+  --ff-minimap-border-color: var(--dpe-border);
+  --ff-minimap-node-color: var(--dpe-border-strong);
+  --ff-minimap-view-color: color-mix(in srgb, var(--dpe-accent) 12%, transparent);
+  --ff-minimap-view-border-color: var(--dpe-accent);
+}
+
+/*
+ * 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
+ * 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.
+ */
+[data-dpe-theme='dark'],
+[data-dpe-theme='dark'] .dpe-builder,
+[data-dpe-theme='dark'] .dpe-theme,
+.dpe-builder[data-dpe-theme='dark'],
+.dpe-theme[data-dpe-theme='dark'] {
+  --dpe-surface: #151921;
+  --dpe-surface-alt: #1c2029;
+  --dpe-surface-sunken: #232830;
+  --dpe-canvas-bg: #0c0e14;
+  --dpe-border: #2d323c;
+  --dpe-border-strong: #3b414d;
+  --dpe-border-subtle: #232830;
+  --dpe-text: #e8eaf0;
+  --dpe-text-muted: #8b90a0;
+  --dpe-text-subtle: #6b7684;
+  --dpe-accent: #5fb3c4;
+  --dpe-accent-strong: #7ac6d6;
+  --dpe-accent-contrast: #0c0e14;
+  --dpe-error: #ef6a5f;
+  --dpe-warning: #d9a13c;
+  --dpe-success: #63b57f;
+  --dpe-info: #7ea6f0;
+  --dpe-not-compilable: #a78bfa;
+  /*
+   * Famiglie in tema scuro: tratto piu' chiaro e pastiglia scura. Le `-soft` chiare del tema
+   * chiaro qui diventerebbero macchie luminose sulla card, cioe' l'icona pesarebbe piu' del
+   * titolo.
+   */
+  --dpe-cat-source: #5fb3c4;
+  --dpe-cat-source-soft: #1b3038;
+  --dpe-cat-transform: #7ea6f0;
+  --dpe-cat-transform-soft: #1c2740;
+  --dpe-cat-sink: #63b57f;
+  --dpe-cat-sink-soft: #16301f;
+  --dpe-cat-uncompilable: #a78bfa;
+  --dpe-cat-uncompilable-soft: #241f3d;
+  --dpe-edge-source: #6b7684;
+  --dpe-shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
+  --dpe-shadow-md: 0 6px 18px rgb(0 0 0 / 45%);
+  --dpe-shadow-lg: 0 18px 44px rgb(0 0 0 / 55%);
+}
+
+/* ---------------------------------------------------------------- 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
+ * specificita' dei nostri selettori e l'esito dipenderebbe dall'ordine dei fogli di stile
+ * nell'app ospite. Le variabili invece ereditano dall'elemento della connessione fino al path
+ * e al marker, e valgono qualunque sia l'ordine.
+ *
+ * La classe la mette il canvas sull'arco, in base allo **slot** di destinazione: la primaria
+ * e la secondaria di un join vanno distinte a vista, altrimenti l'unico modo di sapere quale
+ * lato e' quale e' aprire l'ispettore.
+ */
+
+.dpe-edge {
+  --ff-connection-color: var(--dpe-edge-source, #98a2b3);
+  --ff-marker-color: var(--dpe-edge-source, #98a2b3);
+  --ff-connection-selected-color: var(--dpe-accent, #2f7d8f);
+}
+
+.dpe-edge--primary {
+  --ff-connection-color: var(--dpe-edge-primary, #2f7d8f);
+  --ff-marker-color: var(--dpe-edge-primary, #2f7d8f);
+}
+
+.dpe-edge--secondary {
+  --ff-connection-color: var(--dpe-edge-secondary, #8b5cf6);
+  --ff-marker-color: var(--dpe-edge-secondary, #8b5cf6);
+}
+
+.dpe-edge--sources {
+  --ff-connection-color: var(--dpe-edge-append, #22a06b);
+  --ff-marker-color: var(--dpe-edge-append, #22a06b);
+}
+
+/*
+ * Arco con un capo che non corrisponde a nessun nodo: si **mostra**, perche' e' cio' che il
+ * documento dice. La diagnostica che lo qualifica arriva dal backend.
+ */
+.dpe-edge--broken {
+  --ff-connection-color: var(--dpe-edge-broken, #dc2626);
+  --ff-marker-color: var(--dpe-edge-broken, #dc2626);
+}
+
+.dpe-edge--creating {
+  --ff-connection-color: var(--dpe-accent, #2f7d8f);
+}
+
+/*
+ * Il tratteggio non e' esprimibile con una variabile del tema, quindi qui serve una regola.
+ * Il prefisso `f-flow` pareggia la specificita' di `f-flow .f-connection .f-connection-path`
+ * 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 {
+  stroke-dasharray: 6 4;
+}