@massimo-cassandro/minimo 1.18.1 → 1.18.3

package/charts/TODO charts/docs/TODO.md

@@ -0,0 +1 @@
+riscrivere le midalità di calcolo di rating display

package/charts/TODO charts/docs/costruzione display rating.md

@@ -0,0 +1,145 @@
+# Display rating
+
+Il **display rating** raffigura un tachimetro la cui scala è suddivisa in un numero predefinito di porzioni uguali, ognuna corrispondente ad un *range* di valori. L'indicatore indica la porzione corrispondente al range di valori da rappresentare.
+
+![esempio](<costruzione display rating imgs/rating-display_esempio.svg>)
+
+> **Figura 1 - esempio**
+
+Dal punto di vista grafico, la scala è generata da tre circonferenze, e si estende su un angolo di 240° rispetto alla circonferenza esterna:
+
+![costruzione grafica](<costruzione display rating imgs/rating-display_costruzione grafica.svg>)
+
+> **Figura 2 - costruzione grafica con suddivisione in 4 o 5 porzioni**
+
+## Costruzione
+
+![costruzione](<costruzione display rating imgs/rating-display_costruzione.svg>)
+
+> **Figura 3 - costruzione scala**
+
+La scala (l'area in giallo) è costruita dall'unione di 3 circonferenze:
+
+* quella esterna, in blu con centro $A$ di coordinate note e raggio noto.  
+* Le due circonferenze interne i cui centri $B$ e $C$ sono disposti in modo equidistante lungo un'asse inclinata di $30^\circ$ rispetto all'asse orizzontale che contiene il punto $A$. La lunghezza del segmento $s$ (definito dall'utente) determina l'ampiezza finale della figura.
+
+La scala viene quindi suddivisa in un numero dato di porzioni. Nell'esempio di figura 4 è stata suddivisa in 4 porzioni, ma il numero può variare.
+
+![schema suddivisione in porzioni](<costruzione display rating imgs/rating-display_costruzione porzione.svg>)
+
+> **Figura 4 - porzione**
+
+L'obiettivo è ricavare le coordinate dei punti di ogni porzione ($D$, $E$, $F$ e $G$ nella figura 4), gli archi di cerchio $\overset{\frown}{DE}$ ed $\overset{\frown}{FG}$ e i due segmenti $\overline{EF}$ e $\overline{DG}$. Le rette che contengono i due segmenti passano per il centro $A$.
+
+L'angolo $\gamma$ corrisponde al gap tra una porzione e l'altra.
+
+Opzionalmente, possono essere costruiti dei *ticks* (vedi figura 2), ovvero dei prolungamenti del segmento iniziale di ogni porzione.
+
+## Sviluppo
+
+> NB tutti i valori fanno riferimento al sistema di coordinate SVG, in cui l'origine degli assi è collocata sul vertice in alto a sinistra del *viewbox*. Inoltre, a differenza del piano cartesiano standard, la direzione positiva dell'asse delle ordinate è orientata verso il basso.
+
+### Parametri iniziali
+
+
+> Il raggio della circonferenza esterna ($r_A$) e le coordinate del centro $A$ sono definite dai valori preimpostati, ovvero le dimensioni del file SVG ($w$ e $h$), l'eventuale padding ($p$) tra l'area del grafico vero e proprio e il *viewbox* del documento e l'eventuale bordo $m$ intorno al display (in grigio in figura 2): 
+>
+> $r_A$ = $w / 2 - p - m$
+>
+> $x_A$ = $w / 2$
+>
+> $y_A$ = $h - (r_A \sin(30^\circ)) - 2p - m$ (\*)
+> 
+> *(\*) la traccia $m$ non viene rappresentata nella parte inferiore del display, quindi si tiene conto una sola volta del suo spessore. La coordinata $y_A$ del centro è data dall'altezza totale meno traccia e padding meno la parte inferiore del grafico corrispondente a $r_A \sin(30^\circ)$*
+
+
+* $d_B = d_C$: distanza tra i centri delle circonferenze interne $b$ e $c$ dal centro di quella esterna $a$, lungo un'asse inclinata di 30° rispetto all'asse orizzontale che contiene il centro $r_A$. Sono definiti dall'utente
+* $s$: spessore finale del display, impostato dall'utente
+* $T_C$: punto di tangenza tra le circonferenze $a$ e $c$, è posizionato esattamente ad un angolo di $210^\circ$
+* $T_B$: punto di tangenza tra le circonferenze $b$ e $c$, è posizionato ad un angolo di $-30^\circ$ (o $330^\circ$) 
+* $a$: circonferenza esterna (blu)
+  * centro in $A$ ($x_A$, $y_A$)
+  * raggio $r_A$
+* $b$: circonferenza interna a destra (in rosso)
+  * centro in $B$  
+  * $x_B = x_A + d_B \cos(30^\circ)$
+  * $y_B = y_A - d_B \sin(30^\circ)$
+  * raggio $r_B = r_A - d_B - s$.
+* $c$: circonferenza interna a sinistra (in verde)
+  * centro in $C$ 
+  * $x_C = x_A + d_C \cos(30^\circ)$
+  * $y_C = y_A - d_C \sin(30^\circ)$
+  * raggio $r_C = r_A - d_C$
+
+![dettaglio calcolo centri](<costruzione display rating imgs/rating-display_dettaglio calcolo centri.svg>)
+
+### Verifica dei valori definiti dall'utente
+
+Le circonferenze interne $b$ e $c$ non devono mai intersecare quella esterna $a$, l'unico punto di contatto possibile è costituito dal punto di tangenza $T_c$ corrispondente al vertice sinistro della scala.
+
+* lo spessore finale $s$ della scala non deve portare il raggio $r_B$ a valori negativi o incoerenti:
+  * $d_B + S < r_A$
+* il centro $C$ deve rimanere all'interno della circonferenza $a$ per permettere la tangenza nel punto $T_C$:
+  * $d_C < r_A$
+
+### Calcolo delle coordinate di una porzione di scala
+
+> **Figura 5 - calcolo centri circonferenze interne**
+
+L'obiettivo è determinare le coordinate dei punti $D$, $E$, $F$, $G$ per ogni porzione della scala, garantendo che i segmenti laterali siano radiali rispetto al centro $A$ e che la curvatura interna segua l'asimmetria delle circonferenze $b$ e $c$.
+
+
+![calcolo coordinate](<costruzione display rating imgs/rating-display_calcolo coordinate porzione.svg>)
+
+> **Figura 6 - calcolo coordinate porzione**
+
+Ogni porzione è delimitata da due rette $z$ passanti per il centro $A$ con angolo $\theta$. L'angolo è definito in base al numero di porzioni $n$ e al valore dell'angolo $\gamma$ che corrisponde al gap tra una porzione l'altra.
+
+I punti che delimitando ogni porzione sono inoltre definiti dalla distanza $\rho$ dal centro $A$.
+
+
+
+
+Quindi:
+
+* i due punti esterni, $D$ ed $E$ sono definiti dall'angolo $\theta$ e dalla distanza $\rho$ che in questo caso corrisponde al raggio della circonferenza $A$ ($r_A$)
+* per i due punti interni $F$ e $G$ la distanza $\rho$ va calcolata con l'espressione:
+
+$$
+\rho(\theta) = d \cdot \cos(\theta - \phi) + \sqrt{r^2 - [d \cdot \sin(\theta - \phi)]^2}
+$$
+
+
+In cui i vari parametri dipendono da quale circonferenza viene utilizzata, in base al valore di $\theta$:
+
+* Se $210^\circ \ge \theta \gt 30^\circ$ (parte verde della curva interna, circonferenza $c$):
+  * $\phi = \phi_2 = 210^\circ$
+  * $d = d_C$ 
+  * $r = r_C = r_A - d_C$
+* Se $330^\circ \le \theta \le 30^\circ$ (parte rossa della curva interna, circonferenza $b$) 
+  * $\phi = \phi_1 = 330^\circ$
+  * $d = d_B$
+  * $r = r_B = r_A - d_B - s$
+
+  
+Riassumendo, per i punti interni abbiamo un quadro di questo tipo:
+
+![calcolo punto interno](<costruzione display rating imgs/rating-display_esempio calcolo punto interno (c. verde).svg>)
+
+> **Figura 7 - esempio calcolo punto interno (circonferenza verde)**
+
+![calcolo punto interno](<costruzione display rating imgs/rating-display_esempio calcolo punto interno (c. rossa).svg>)
+
+> **Figura 8 - esempio calcolo punto interno (circonferenza rossa) nel punto finale della scala. In questo caso gli angoli $\theta$ e $\phi$ sono uguali**
+
+
+in cui:
+
+* $\rho = \rho_1 + \rho_2$: distanza dal centro $A$ al punto interno $G$
+* $\rho_1 = \sqrt{{r_C}^2 - [d \cdot \sin(\theta - \phi)]^2}$, corrisponde alla seconda parte dell'espressione precedente, ed è l'applicazione del teorema di Pitagora sul triangolo rettangolo la cui ipotenusa corrisponde al raggio $r_C$ passante per $G$, mentre  $\rho_1$ è il cateto maggiore
+* $\rho_2 = d \cdot \cos(\theta - \phi)$, corrisponde alla prima parte dell'espressione e corrisponde al cateto minore del triangolo rettangolo avente per ipotenusa la distanza $d$ tra i centri $A$ e $C$
+* $\delta$: angolo adiacente al cateto $\rho_2$, corrisponde al valore assoluto di $\theta - \phi$
+* $\theta$: angolo della *retta di taglio* definita dall'ampiezza della porzione e dal gap $\gamma$
+* $\phi$: angolo fisso del centro di riferimento della circonferenza interna utilizzata, in questo caso $C$, quindi $210^{\circ}$ ($330^{\circ}$ se utilizziamo  $B$)
+* $d$: distanza fissa tra il centro $A$ e il centro interno ($d_C$ o $d_B$)
+* $r$: raggio della circonferenza interna utilizzata ($r_C$ o $r_B$)

package/charts/TODO charts/test/node-test.mjs

@@ -0,0 +1,92 @@
+/* eslint-disable no-console */
+import { MinimoCharts }  from '../index.js';
+import { createSvgCanvasNode } from '../src/create-svg-canvas-node.mjs';
+import * as fs_promises from 'node:fs/promises';
+import path from 'node:path';
+// https://nodejs.org/api/util.html#utilstyletextformat-text-options
+import { styleText } from 'node:util';
+
+import { barsTest } from './src/bars-test.js';
+import { goalTest } from './src/goal-test.js';
+// import { pieNodeTest } from './src/pie-node-test.mjs';
+// import { hBarsNodeTest } from './src/hBars-node-test.mjs';
+// import { signalBarsNodeTest } from './src/signalBars-node-test.mjs';
+// import { ratingDisplayNodeTest } from './src/ratingDisplay-node-test.mjs';
+// import { radialsBarNodeTest } from './src/radialsBar-node-test.mjs';
+// import { settimanaleMensileNodeTest } from './src/settimanale-mensile-node-test.mjs';
+// import { mcnNodeTest } from './src/mcn-node-test.mjs';
+// import { linesNodeTest } from './src/lines-node-test.mjs';
+
+const output_path = new URL(import.meta.resolve('./_output')).pathname;
+
+// const fontFolder = new URL(import.meta.resolve('../../../ada-brochure-business-analysis/2025/assets/fonts/Roboto_Condensed/static')).pathname;
+const fontFolder = new URL(import.meta.resolve('./fonts/nunito-sans_5.2.7_fontsource/ttf')).pathname;
+
+const fontFiles = {
+    extrabold: fontFolder + '/nunito-sans-latin-900-normal.ttf',
+    bold: fontFolder + '/nunito-sans-latin-700-normal.ttf',
+    medium: fontFolder + '/nunito-sans-latin-600-normal.ttf',
+    regular: fontFolder + '/nunito-sans-latin-400-normal.ttf',
+    italic: fontFolder + '/nunito-sans-latin-400-italic.ttf',
+    lightItalic: fontFolder + '/nunito-sans-latin-300-italic.ttf',
+  },
+
+  writeFile = async (svgString, fileName) => {
+    try {
+      await fs_promises.writeFile(path.join(output_path, fileName), svgString);
+    } catch (err) {
+      console.error(err);
+    }
+
+  };
+
+
+// svuota cartella output
+try {
+  await fs_promises.rm(output_path, { recursive: true, force: true });
+  await fs_promises.mkdir(output_path, { recursive: true });
+} catch (err) {
+  console.error('Error clearing output folder:', err);
+}
+
+
+const chartInstance = new MinimoCharts({
+  createSvgCanvas: createSvgCanvasNode,
+  textToPath: true, // converte i font in tracciati
+});
+
+console.log( styleText(['green'], '...barsTest' ));
+barsTest(chartInstance, {
+  yAxisTitleFontFilePath: fontFiles.medium,
+  xAxisTitleFontFilePath: fontFiles.medium,
+  labelXFontFilePath: fontFiles.regular,
+  labelYFontFilePath: fontFiles.regular,
+  width: 800,
+  height: 500,
+  container: null
+}).then(svgString => writeFile(svgString, 'bars.svg'));
+
+
+console.log( styleText(['green'], '...goalTest' ));
+goalTest(chartInstance, {
+  container: null,
+  width: 300,
+
+  currentValueFontFilePath: fontFiles.regular,
+  rightLabelFontAttrs: fontFiles.bold,
+}).then(svgString => writeFile(svgString, 'goal.svg'));
+
+
+
+// await pieNodeTest(cfg);
+// await hBarsNodeTest(cfg);
+// await signalBarsNodeTest(cfg);
+// await ratingDisplayNodeTest(cfg);
+// await radialsBarNodeTest(cfg);
+// await settimanaleMensileNodeTest(cfg);
+// await mcnNodeTest(cfg);
+// await linesNodeTest(cfg);
+
+
+
+console.log(' DONE ');

package/charts/TODO charts/test/test-readme.md

@@ -0,0 +1,23 @@
+# MinimoCharts test
+
+## browser
+
+run (dalla root Ada):
+
+```bash
+# open -n -a "Google Chrome" --args --profile-directory="Profile 1" # facoltativo, scelta profilo chrome
+NODE_ENV=development npx webpack serve --config ./ada-frontend/ada-charts/test/webpack/webpack-MinimoChartsTest.config.mjs
+```
+
+
+## node
+
+Per il test node è necessario scaricare il font indicato nel file di `node-test.mjs`
+
+Il percorso dei font va quindi inserito in `./node-test.mjs` (nella variabile `fontFolder`).
+
+Per avviare il test:
+
+```bash
+node node-test.mjs
+```

package/charts/TODO charts/test/test-src/rating-display-extra-test.js

@@ -0,0 +1,132 @@
+import { MinimoCharts, ratingDisplayChart } from '../../index.js';
+
+const chartInstance = new MinimoCharts();
+
+ratingDisplayChart(chartInstance, {
+  debug: true,
+  container: '#rd-demo',
+  portions: 3,
+
+  value: 8.99,
+  scaleStartValue: 0,
+  rodPositionForceCenter: false,
+
+  displayBackgroundAttrs: {
+    fill: '#efefef',
+    'stroke-width': 4,
+    stroke: '#07914E',
+  },
+
+  displayLabel: [
+    {
+      label: 'Lorem ipsum',
+      font: {
+        family: 'Roboto Condensed',
+        size: 18,
+        // stretch: 'normal',
+        // style: 'italic',
+        // variant: 'normal',
+        weight: 700
+      },
+      fill: '#000',
+      // fontFilePath: path
+    },
+    {
+      label: 'dolor sit amet',
+      font: {
+        family: 'Roboto Condensed',
+        size: 12,
+        // stretch: 'normal',
+        // style: 'italic',
+        // variant: 'normal',
+        weight: 300
+      },
+      fill: '#666',
+      // fontFilePath: path,
+    }
+  ],
+  displayLabelRowGap: 2,
+
+  miniDisplay: [
+    {
+      position: 'sx',
+      value: 3.1,
+      type: 'gauge', // gauge = mini tachimetro, value: mostra il valore indicato in value
+      mdLabel: [
+        {
+          label: 'md#1',
+          font: {
+            family: 'Roboto Condensed',
+            size: 14,
+            // stretch: 'normal',
+            // style: 'italic',
+            // variant: 'normal',
+            weight: 400
+          },
+          fill: '#333',
+          // fontFilePath: path,
+        },
+        {
+          label: 'xyz',
+          font: {
+            family: 'Roboto Condensed',
+            size: 12,
+            // stretch: 'normal',
+            // style: 'italic',
+            // variant: 'normal',
+            weight: 300
+          },
+          fill: '#666',
+          // fontFilePath: path,
+        },
+      ],
+      mdArc: {
+        // fill: '#ddd',
+        'stroke-width': 1,
+        stroke: '#666',
+        class: null,
+      }
+    },
+    {
+      position: 'dx',
+      value: 4,
+      type: 'value', // gauge = mini tachimetro, value: mostra il valore indicato in value
+      typeValueFont: {
+        label: null,
+        font: {
+          family: 'Roboto Condensed',
+          size: 32,
+          // stretch: 'normal',
+          // style: 'italic',
+          // variant: 'normal',
+          weight: 700
+        },
+        fill: '#036',
+        // fontFilePath: path,
+      },
+      mdLabel: [{
+        label: 'md#2',
+        font: {
+          family: 'Roboto Condensed',
+          size: 14,
+          // stretch: 'normal',
+          // style: 'italic',
+          // variant: 'normal',
+          weight: 400
+        },
+        fill: '#333',
+        // fontFilePath: path,
+      }],
+      mdArc: {
+        // fill: '#ddd',
+        'stroke-width': 2,
+        stroke: '#036',
+        class: null,
+      }
+    }
+  ],
+  miniDisplayTopMargin: 0,
+  miniDisplayLabelTopMargin: 0,
+  miniDisplayLabelRowGap: -4,
+
+});

package/charts/TODO charts/test/test-src/rating-display-test.js

@@ -0,0 +1,155 @@
+
+export function ratingDisplayTest(cfg) {
+
+  const ratingDisplayOpts = {
+    displayValue: 3.2,
+    svgAttrs: {class: 'some-class'},
+
+    displayLabel: [
+      {
+        label: 'Lorem ipsum',
+        font: {
+          family: 'Roboto Condensed',
+          size: 18,
+          // stretch: 'normal',
+          // style: 'italic',
+          // variant: 'normal',
+          weight: 700
+        },
+        fill: '#000',
+        // fontFilePath: path
+      },
+      {
+        label: 'dolor sit amet',
+        font: {
+          family: 'Roboto Condensed',
+          size: 12,
+          // stretch: 'normal',
+          // style: 'italic',
+          // variant: 'normal',
+          weight: 300
+        },
+        fill: '#666',
+        // fontFilePath: path,
+      }
+    ],
+    miniDisplay: [
+      {
+        position: 'sx',
+        value: 3.1,
+        type: 'gauge', // gauge = mini tachimetro, value: mostra il valore indicato in value
+        mdLabel: [
+          {
+            label: 'md#1',
+            font: {
+              family: 'Roboto Condensed',
+              size: 14,
+              // stretch: 'normal',
+              // style: 'italic',
+              // variant: 'normal',
+              weight: 400
+            },
+            fill: '#333',
+            // fontFilePath: path,
+          },
+          {
+            label: 'xyz',
+            font: {
+              family: 'Roboto Condensed',
+              size: 12,
+              // stretch: 'normal',
+              // style: 'italic',
+              // variant: 'normal',
+              weight: 300
+            },
+            fill: '#666',
+            // fontFilePath: path,
+          },
+        ],
+        mdArc: {
+          fill: '#ddd',
+          'stroke-width': 2,
+          stroke: '#036',
+          class: null,
+        }
+      },
+      {
+        position: 'dx',
+        value: 4,
+        type: 'value', // gauge = mini tachimetro, value: mostra il valore indicato in value
+        typeValueFont: {
+          label: null,
+          font: {
+            family: 'Roboto Condensed',
+            size: 28,
+            // stretch: 'normal',
+            // style: 'italic',
+            // variant: 'normal',
+            weight: 700
+          },
+          fill: '#760592',
+          // fontFilePath: path,
+        },
+        mdLabel: [
+          {
+            label: 'md#2',
+            font: {
+              family: 'Roboto Condensed',
+              size: 14,
+              // stretch: 'normal',
+              // style: 'italic',
+              // variant: 'normal',
+              weight: 400
+            },
+            fill: '#333',
+            // fontFilePath: path,
+          },
+          {
+            label: '(riga 2)',
+            font: {
+              family: 'Roboto Condensed',
+              size: 12,
+              // stretch: 'normal',
+              // style: 'italic',
+              // variant: 'normal',
+              weight: 300
+            },
+            fill: '#666',
+            // fontFilePath: path,
+          },
+        ],
+        mdArc: {
+          fill: '#ddd',
+          'stroke-width': 3,
+          stroke: '#036',
+        }
+      }
+    ],
+    miniDisplayTopMargin: 5,
+    miniDisplayLabelTopMargin: 0,
+
+  };
+
+  cfg.charts.ratingDisplay({
+    ...ratingDisplayOpts,
+    container: '#ratingDisplay1',
+    scale: 4,
+
+    displayBackgroundAttrs: {
+      fill: '#efefef',
+      'stroke-width': 3,
+      stroke: '#666',
+      class: 'some-class',
+    },
+
+    displayValueForceCenter: false,
+  });
+
+  cfg.charts.ratingDisplay({
+    ...ratingDisplayOpts,
+    debug: true,
+    container: '#ratingDisplay2',
+    scale: 5,
+    displayValueForceCenter: true,
+  });
+}

package/charts/TODO charts/test/textToPath-test.mjs

@@ -0,0 +1,14 @@
+/* eslint-disable no-console */
+import { textToSvgPath } from '../src/svg-text-to-path.js';
+
+const labelFontFilePath = './Roboto_Condensed/static/RobotoCondensed-Bold.ttf',
+  textString = 'Hello World',
+  textSize = 24
+;
+
+const { pathData, pathElementString } = await textToSvgPath(labelFontFilePath, textString, textSize);
+
+
+console.log(pathData);
+console.log('------');
+console.log(pathElementString);

package/charts/TODO.md

@@ -1,5 +1,5 @@
 completare
-aggionare la documentazione e aggiungere i test a demo (in _wrk)
+aggionare la documentazione e aggiungere i test a demo (vedi vecchia versione in `TODO charts/test`)
 
 implementare tooltip nativo nei file svg, ora viene aggiunto un data-title, ma non è gestito
 

package/design-tokens/tokens/{design-tokens/_src → src/components/modal-popup}/modal-popup.minimo.tokens.jsonc

@@ -5,7 +5,37 @@
 // Re-generate with: node build-tokens.mjs --config <path/to/config>
 // -----------------------------------------------------------------------
 {
-  "modal-popup": {
+  "mpopup": {
+    "width": {
+      "$type": "dimension",
+      "$value": "max-content"
+    },
+    "min-width": {
+      "$type": "dimension",
+      "$value": "400px"
+    },
+    "max-width": {
+      "$type": "dimension",
+      "$value": "98dvw"
+    },
+    "height": {
+      "$type": "dimension",
+      "$value": "max-content"
+    },
+    "min-height": {
+      "$type": "dimension",
+      "$value": "300px"
+    },
+    "max-height": {
+      "$type": "dimension",
+      "$value": "90dvh"
+    },
+    "background": {
+      "color": {
+        "$type": "color",
+        "$value": "{body.background.color}"
+      }
+    },
     "drop-shadow": {
       "$type": "shadow",
       "$value": [
@@ -14,7 +44,7 @@
           "offsetY": "0",
           "blur": "12px",
           "spread": "2px",
-          "color": "rgba(0 0 0 / .25)"
+          "color": "rgb(0 0 0 / .25)"
         }
       ]
     },
@@ -34,6 +64,22 @@
         "$value": "1.6rem"
       }
     },
+    "content": {
+      "padding": {
+        "$type": "dimension",
+        "$value": "{size.base} {size.sm} {size.sm}"
+      },
+      "scrollbar": {
+        "padding": {
+          "i": {
+            "end": {
+              "$type": "dimension",
+              "$value": "{size.md}"
+            }
+          }
+        }
+      }
+    },
     "header": {
       "padding": {
         "$type": "dimension",

package/design-tokens/utilities/build-tokens-src/config.mjs

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 // build-tokens-src/config.mjs
 // Reads the --config flag from argv, imports the project config file,
 // resolves all paths and exports them for build-tokens.mjs.
@@ -8,7 +9,7 @@
 /* globals process */
 
 import * as path from 'node:path';
-import { pathToFileURL } from 'url';
+import { pathToFileURL } from 'node:url';
 
 // ---------------------------------------------------------------------------
 // Read the --config flag
@@ -31,10 +32,11 @@ export const configDir     = path.dirname(configAbsPath);
 // ---------------------------------------------------------------------------
 // Import the project config
 // ---------------------------------------------------------------------------
-const buildConfig = (await import(pathToFileURL(configAbsPath))).default;
+const buildConfig = (await import(pathToFileURL(configAbsPath).href)).default;
 
 // Helper: resolves a path relative to the config directory.
 // Leaves already-absolute paths untouched.
+/** @param {string} p */
 const resolveFromConfig = (p) => path.resolve(configDir, p);
 
 // ---------------------------------------------------------------------------
@@ -91,6 +93,7 @@ export const penpotExpressions = VALID_EXPR_MODES.includes(buildConfig.penpotExp
 // ---------------------------------------------------------------------------
 const GLOB_CHARS = /[*?{[]/;
 
+/** @param {string} s */
 const resolveSource = (s) => {
   if (path.isAbsolute(s)) {
     // Already absolute: only normalise separators (needed on Windows)

package/design-tokens/utilities/build-tokens-src/formats/penpot.mjs

@@ -32,7 +32,7 @@
 //                         original expression is kept with a warning.
 
 import StyleDictionary from 'style-dictionary';
-import path from 'path';
+import path from 'node:path';
 
 // Disclaimer prepended to every generated file when penpotFormat is 'jsonc'
 const DISCLAIMER = [