diff --git a/.ncurc.yml b/.ncurc.yml
index 8d9b25403..9f0ebbd40 100644
--- a/.ncurc.yml
+++ b/.ncurc.yml
@@ -1 +1,4 @@
 dep: 'prod,dev'
+reject:
+  # https://github.com/react-dropzone/react-dropzone/issues/1259#issuecomment-2395085954
+  - react-dropzone
diff --git a/eslint.config.mjs b/eslint.config.js
similarity index 83%
rename from eslint.config.mjs
rename to eslint.config.js
index e5931cb64..fce2c737a 100644
--- a/eslint.config.mjs
+++ b/eslint.config.js
@@ -17,6 +17,13 @@ export default [
   ...ts,
   ...unicorn,
   ...react,
+  {
+    files: ['**/*.{ts,tsx,cts,mts}'],
+    rules: {
+      '@typescript-eslint/consistent-type-imports': 'error',
+      'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
+    },
+  },
   {
     rules: {
       'import/default': 'off',
@@ -32,7 +39,8 @@ export default [
         'error',
         {
           name: 'lodash',
-          message: "Use a deep import instead, like for example 'lodash/get'",
+          message:
+            "Use a deep import instead, like for example 'lodash/get.js'",
         },
         {
           name: '@simbathesailor/use-what-changed',
diff --git a/package-lock.json b/package-lock.json
index 153195436..92f05b75d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
         "@emotion/styled": "^11.13.0",
         "@hookform/resolvers": "^3.9.0",
         "@lukeed/uuid": "^2.0.1",
-        "cheminfo-font": "^1.13.0",
+        "cheminfo-font": "^1.13.1",
         "cheminfo-types": "^1.8.0",
         "clipboard-polyfill": "^4.1.0",
         "convert-to-jcamp": "^5.4.11",
@@ -28,7 +28,7 @@
         "immer": "^10.1.1",
         "jszip": "^3.10.1",
         "lodash": "^4.17.21",
-        "mf-parser": "^3.2.4",
+        "mf-parser": "^3.2.5",
         "ml-array-max": "^1.2.4",
         "ml-array-mean": "^1.1.6",
         "ml-array-median": "^1.1.6",
@@ -36,9 +36,9 @@
         "ml-baseline-correction-regression": "^2.0.1",
         "ml-conrec": "^5.0.3",
         "ml-gsd": "^12.1.8",
-        "ml-matrix": "^6.11.1",
-        "ml-signal-processing": "^1.0.4",
-        "ml-spectra-processing": "^14.5.3",
+        "ml-matrix": "^6.12.0",
+        "ml-signal-processing": "^1.1.1",
+        "ml-spectra-processing": "^14.6.0",
         "ml-stat": "^1.3.3",
         "ml-tree-similarity": "^2.2.0",
         "multiplet-analysis": "^2.1.2",
@@ -47,45 +47,45 @@
         "nmr-processing": "^12.12.3",
         "nmredata": "^0.9.11",
         "numeral": "^2.0.6",
-        "openchemlib": "^8.15.0",
+        "openchemlib": "^8.16.0",
         "openchemlib-utils": "^6.4.1",
         "papaparse": "^5.4.1",
         "re-resizable": "6.10.0",
-        "react-d3-utils": "^1.0.0",
-        "react-dropzone": "^14.2.9",
-        "react-error-boundary": "^4.0.13",
+        "react-d3-utils": "^2.0.0",
+        "react-dropzone": "14.2.3",
+        "react-error-boundary": "^4.1.1",
         "react-hook-form": "^7.53.0",
         "react-icons": "^5.3.0",
         "react-inspector": "^6.0.2",
         "react-mf": "^2.0.3",
-        "react-ocl": "^6.1.0",
-        "react-ocl-nmr": "^3.0.3",
-        "react-plot": "^2.0.0",
+        "react-ocl": "^7.0.2",
+        "react-ocl-nmr": "^3.1.0",
+        "react-plot": "^3.0.0",
         "react-rnd": "^10.4.13",
-        "react-science": "^6.0.2",
+        "react-science": "^9.0.1",
         "react-table": "^7.8.0",
         "react-transition-group": "^4.4.5",
-        "react-use": "^17.5.1",
         "smart-array-filter": "^4.0.2",
+        "use-resize-observer": "^9.1.0",
         "yup": "^1.4.0"
       },
       "devDependencies": {
         "@babel/plugin-transform-modules-commonjs": "^7.25.7",
         "@babel/preset-react": "^7.25.7",
         "@babel/preset-typescript": "^7.25.7",
-        "@playwright/test": "^1.47.2",
+        "@playwright/test": "^1.48.1",
         "@simbathesailor/use-what-changed": "^2.0.0",
         "@types/d3": "^7.4.3",
         "@types/lodash": "^4.17.10",
-        "@types/node": "^22.7.4",
+        "@types/node": "^22.7.6",
         "@types/papaparse": "^5.3.14",
         "@types/react": "^18.3.11",
-        "@types/react-dom": "^18.3.0",
+        "@types/react-dom": "^18.3.1",
         "@types/react-table": "^7.7.20",
         "@vitejs/plugin-react-swc": "^3.7.1",
-        "@vitest/coverage-v8": "^2.1.2",
+        "@vitest/coverage-v8": "^2.1.3",
         "cross-env": "^7.0.3",
-        "cspell": "^8.14.4",
+        "cspell": "^8.15.3",
         "eslint": "^9.12.0",
         "eslint-config-cheminfo-react": "^14.0.0",
         "eslint-config-cheminfo-typescript": "^16.0.0",
@@ -95,15 +95,15 @@
         "rc-menu": "^9.15.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-router-dom": "^6.26.2",
+        "react-router-dom": "^6.27.0",
         "rimraf": "^6.0.1",
         "rollup-plugin-analyzer": "^4.0.0",
-        "serve": "^14.2.3",
-        "stylelint": "^16.9.0",
+        "serve": "^14.2.4",
+        "stylelint": "^16.10.0",
         "stylelint-config-standard": "^36.0.1",
-        "typescript": "^5.6.2",
-        "vite": "^5.4.8",
-        "vitest": "^2.1.2"
+        "typescript": "^5.6.3",
+        "vite": "^5.4.9",
+        "vitest": "^2.1.3"
       },
       "peerDependencies": {
         "react": ">=18.0.0",
@@ -138,9 +138,9 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.25.7",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.7.tgz",
-      "integrity": "sha512-9ickoLz+hcXCeh7jrcin+/SLWm+GkxE2kTvoYyp38p4WkdFXfQJxDFGWp/YHjiKLPx06z2A7W8XKuqbReXDzsw==",
+      "version": "7.25.8",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.8.tgz",
+      "integrity": "sha512-ZsysZyXY4Tlx+Q53XdnOFmqwfB9QDTHYxaZYajWRoBLuLEAwI2UIbtxOjWh/cFaa9IKUlcB+DDuoskLuKu56JA==",
       "dev": true,
       "license": "MIT",
       "peer": true,
@@ -149,9 +149,9 @@
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.25.7",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.25.7.tgz",
-      "integrity": "sha512-yJ474Zv3cwiSOO9nXJuqzvwEeM+chDuQ8GJirw+pZ91sCGCyOZ3dJkVE09fTV0VEVzXyLWhh3G/AolYTPX7Mow==",
+      "version": "7.25.8",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.25.8.tgz",
+      "integrity": "sha512-Oixnb+DzmRT30qu9d3tJSQkxuygWm32DFykT4bRoORPa9hZ/L4KhVB/XiRm6KG+roIEM7DBQlmg27kw2HZkdZg==",
       "dev": true,
       "license": "MIT",
       "peer": true,
@@ -162,10 +162,10 @@
         "@babel/helper-compilation-targets": "^7.25.7",
         "@babel/helper-module-transforms": "^7.25.7",
         "@babel/helpers": "^7.25.7",
-        "@babel/parser": "^7.25.7",
+        "@babel/parser": "^7.25.8",
         "@babel/template": "^7.25.7",
         "@babel/traverse": "^7.25.7",
-        "@babel/types": "^7.25.7",
+        "@babel/types": "^7.25.8",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -422,12 +422,12 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.25.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.7.tgz",
-      "integrity": "sha512-aZn7ETtQsjjGG5HruveUK06cU3Hljuhd9Iojm4M8WWv3wLE6OkE5PWbDUkItmMgegmccaITudyuW5RPYrYlgWw==",
+      "version": "7.25.8",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.8.tgz",
+      "integrity": "sha512-HcttkxzdPucv3nNFmfOOMfFf64KgdJVqm1KaCm25dPGMLElo9nsLvXeJECQg8UzPuBGLyTSA0ZzqCtDSzKTEoQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.25.7"
+        "@babel/types": "^7.25.8"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -661,9 +661,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.25.7",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.7.tgz",
-      "integrity": "sha512-vwIVdXG+j+FOpkwqHRcBgHLYNL7XMkufrlaFvL9o6Ai9sJn9+PdyIL5qa0XzTZw084c+u9LOls53eoZWP/W5WQ==",
+      "version": "7.25.8",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.8.tgz",
+      "integrity": "sha512-JWtuCu8VQsMladxVz/P4HzHUGCAwpuqacmowgXFs5XjxIgKuNjnLokQzuVjlTvIzODaDmpjT3oxcC48vyk9EWg==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.25.7",
@@ -766,87 +766,87 @@
       }
     },
     "node_modules/@cspell/cspell-bundled-dicts": {
-      "version": "8.14.4",
-      "resolved": "https://registry.npmjs.org/@cspell/cspell-bundled-dicts/-/cspell-bundled-dicts-8.14.4.tgz",
-      "integrity": "sha512-JHZOpCJzN6fPBapBOvoeMxZbr0ZA11ZAkwcqM4w0lKoacbi6TwK8GIYf66hHvwLmMeav75TNXWE6aPTvBLMMqA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@cspell/dict-ada": "^4.0.2",
-        "@cspell/dict-aws": "^4.0.4",
-        "@cspell/dict-bash": "^4.1.4",
-        "@cspell/dict-companies": "^3.1.4",
-        "@cspell/dict-cpp": "^5.1.16",
-        "@cspell/dict-cryptocurrencies": "^5.0.0",
-        "@cspell/dict-csharp": "^4.0.2",
-        "@cspell/dict-css": "^4.0.13",
-        "@cspell/dict-dart": "^2.2.1",
-        "@cspell/dict-django": "^4.1.0",
-        "@cspell/dict-docker": "^1.1.7",
-        "@cspell/dict-dotnet": "^5.0.5",
-        "@cspell/dict-elixir": "^4.0.3",
-        "@cspell/dict-en_us": "^4.3.23",
-        "@cspell/dict-en-common-misspellings": "^2.0.4",
+      "version": "8.15.3",
+      "resolved": "https://registry.npmjs.org/@cspell/cspell-bundled-dicts/-/cspell-bundled-dicts-8.15.3.tgz",
+      "integrity": "sha512-wIuJomJEJn60w+ts4dFBYEo3kkwdPe1R4qVn52hDq5CUzrNniSywCpeBQO8Sgy5ljk73ojENbMBCE8+Jrukk0Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@cspell/dict-ada": "^4.0.5",
+        "@cspell/dict-aws": "^4.0.7",
+        "@cspell/dict-bash": "^4.1.8",
+        "@cspell/dict-companies": "^3.1.7",
+        "@cspell/dict-cpp": "^5.1.22",
+        "@cspell/dict-cryptocurrencies": "^5.0.3",
+        "@cspell/dict-csharp": "^4.0.5",
+        "@cspell/dict-css": "^4.0.16",
+        "@cspell/dict-dart": "^2.2.4",
+        "@cspell/dict-django": "^4.1.3",
+        "@cspell/dict-docker": "^1.1.10",
+        "@cspell/dict-dotnet": "^5.0.8",
+        "@cspell/dict-elixir": "^4.0.6",
+        "@cspell/dict-en_us": "^4.3.26",
+        "@cspell/dict-en-common-misspellings": "^2.0.7",
         "@cspell/dict-en-gb": "1.1.33",
-        "@cspell/dict-filetypes": "^3.0.4",
-        "@cspell/dict-flutter": "^1.0.0",
-        "@cspell/dict-fonts": "^4.0.0",
-        "@cspell/dict-fsharp": "^1.0.1",
-        "@cspell/dict-fullstack": "^3.2.0",
-        "@cspell/dict-gaming-terms": "^1.0.5",
-        "@cspell/dict-git": "^3.0.0",
-        "@cspell/dict-golang": "^6.0.12",
-        "@cspell/dict-google": "^1.0.1",
-        "@cspell/dict-haskell": "^4.0.1",
-        "@cspell/dict-html": "^4.0.5",
-        "@cspell/dict-html-symbol-entities": "^4.0.0",
-        "@cspell/dict-java": "^5.0.7",
-        "@cspell/dict-julia": "^1.0.1",
-        "@cspell/dict-k8s": "^1.0.6",
-        "@cspell/dict-latex": "^4.0.0",
-        "@cspell/dict-lorem-ipsum": "^4.0.0",
-        "@cspell/dict-lua": "^4.0.3",
-        "@cspell/dict-makefile": "^1.0.0",
-        "@cspell/dict-monkeyc": "^1.0.6",
-        "@cspell/dict-node": "^5.0.1",
-        "@cspell/dict-npm": "^5.1.4",
-        "@cspell/dict-php": "^4.0.10",
-        "@cspell/dict-powershell": "^5.0.8",
-        "@cspell/dict-public-licenses": "^2.0.8",
-        "@cspell/dict-python": "^4.2.6",
-        "@cspell/dict-r": "^2.0.1",
-        "@cspell/dict-ruby": "^5.0.3",
-        "@cspell/dict-rust": "^4.0.5",
-        "@cspell/dict-scala": "^5.0.3",
-        "@cspell/dict-software-terms": "^4.1.3",
-        "@cspell/dict-sql": "^2.1.5",
-        "@cspell/dict-svelte": "^1.0.2",
-        "@cspell/dict-swift": "^2.0.1",
-        "@cspell/dict-terraform": "^1.0.1",
-        "@cspell/dict-typescript": "^3.1.6",
-        "@cspell/dict-vue": "^3.0.0"
+        "@cspell/dict-filetypes": "^3.0.7",
+        "@cspell/dict-flutter": "^1.0.3",
+        "@cspell/dict-fonts": "^4.0.3",
+        "@cspell/dict-fsharp": "^1.0.4",
+        "@cspell/dict-fullstack": "^3.2.3",
+        "@cspell/dict-gaming-terms": "^1.0.8",
+        "@cspell/dict-git": "^3.0.3",
+        "@cspell/dict-golang": "^6.0.16",
+        "@cspell/dict-google": "^1.0.4",
+        "@cspell/dict-haskell": "^4.0.4",
+        "@cspell/dict-html": "^4.0.9",
+        "@cspell/dict-html-symbol-entities": "^4.0.3",
+        "@cspell/dict-java": "^5.0.10",
+        "@cspell/dict-julia": "^1.0.4",
+        "@cspell/dict-k8s": "^1.0.9",
+        "@cspell/dict-latex": "^4.0.3",
+        "@cspell/dict-lorem-ipsum": "^4.0.3",
+        "@cspell/dict-lua": "^4.0.6",
+        "@cspell/dict-makefile": "^1.0.3",
+        "@cspell/dict-monkeyc": "^1.0.9",
+        "@cspell/dict-node": "^5.0.4",
+        "@cspell/dict-npm": "^5.1.8",
+        "@cspell/dict-php": "^4.0.13",
+        "@cspell/dict-powershell": "^5.0.13",
+        "@cspell/dict-public-licenses": "^2.0.11",
+        "@cspell/dict-python": "^4.2.11",
+        "@cspell/dict-r": "^2.0.4",
+        "@cspell/dict-ruby": "^5.0.7",
+        "@cspell/dict-rust": "^4.0.9",
+        "@cspell/dict-scala": "^5.0.6",
+        "@cspell/dict-software-terms": "^4.1.10",
+        "@cspell/dict-sql": "^2.1.8",
+        "@cspell/dict-svelte": "^1.0.5",
+        "@cspell/dict-swift": "^2.0.4",
+        "@cspell/dict-terraform": "^1.0.5",
+        "@cspell/dict-typescript": "^3.1.9",
+        "@cspell/dict-vue": "^3.0.3"
       },
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@cspell/cspell-json-reporter": {
-      "version": "8.14.4",
-      "resolved": "https://registry.npmjs.org/@cspell/cspell-json-reporter/-/cspell-json-reporter-8.14.4.tgz",
-      "integrity": "sha512-gJ6tQbGCNLyHS2iIimMg77as5MMAFv3sxU7W6tjLlZp8htiNZS7fS976g24WbT/hscsTT9Dd0sNHkpo8K3nvVw==",
+      "version": "8.15.3",
+      "resolved": "https://registry.npmjs.org/@cspell/cspell-json-reporter/-/cspell-json-reporter-8.15.3.tgz",
+      "integrity": "sha512-348UsYDdPTaGUvzdRY+Tj8rnN/1yLFkbEc6FkTejkBPwL0rpaJLp27N3Y8uZfrFGyMem/fYS+aHAvB3kTIzieQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@cspell/cspell-types": "8.14.4"
+        "@cspell/cspell-types": "8.15.3"
       },
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@cspell/cspell-pipe": {
-      "version": "8.14.4",
-      "resolved": "https://registry.npmjs.org/@cspell/cspell-pipe/-/cspell-pipe-8.14.4.tgz",
-      "integrity": "sha512-CLLdouqfrQ4rqdQdPu0Oo+HHCU/oLYoEsK1nNPb28cZTFxnn0cuSPKB6AMPBJmMwdfJ6fMD0BCKNbEe1UNLHcw==",
+      "version": "8.15.3",
+      "resolved": "https://registry.npmjs.org/@cspell/cspell-pipe/-/cspell-pipe-8.15.3.tgz",
+      "integrity": "sha512-Xodpkm1HJjGtmlL+V4B06PbeEsfhZtNwvPLTtaMExP4ED78VimBYlSz3lR+8jZgkHvZOhbQuHw7zwBqQd4u4Mg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -854,9 +854,9 @@
       }
     },
     "node_modules/@cspell/cspell-resolver": {
-      "version": "8.14.4",
-      "resolved": "https://registry.npmjs.org/@cspell/cspell-resolver/-/cspell-resolver-8.14.4.tgz",
-      "integrity": "sha512-s3uZyymJ04yn8+zlTp7Pt1WRSlAel6XVo+iZRxls3LSvIP819KK64DoyjCD2Uon0Vg9P/K7aAPt8GcxDcnJtgA==",
+      "version": "8.15.3",
+      "resolved": "https://registry.npmjs.org/@cspell/cspell-resolver/-/cspell-resolver-8.15.3.tgz",
+      "integrity": "sha512-KoSv9iGbItS1uGlXspTg9XQmbBnjR7wkW5Du9Q3pLYAjSwcmArOVqQnumNAPfTsIldn9WsBalwGSm/uwawxAPg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -867,9 +867,9 @@
       }
     },
     "node_modules/@cspell/cspell-service-bus": {
-      "version": "8.14.4",
-      "resolved": "https://registry.npmjs.org/@cspell/cspell-service-bus/-/cspell-service-bus-8.14.4.tgz",
-      "integrity": "sha512-i3UG+ep63akNsDXZrtGgICNF3MLBHtvKe/VOIH6+L+NYaAaVHqqQvOY9MdUwt1HXh8ElzfwfoRp36wc5aAvt6g==",
+      "version": "8.15.3",
+      "resolved": "https://registry.npmjs.org/@cspell/cspell-service-bus/-/cspell-service-bus-8.15.3.tgz",
+      "integrity": "sha512-BLAaAc9fWn/sdNo/Z7bPwHtQ+z7snUnjXoLHYY9Vg8N0K2nMYkuJqAm7xbeKDy64sLykpu+pubdMR3DqEQJo/g==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -877,9 +877,9 @@
       }
     },
     "node_modules/@cspell/cspell-types": {
-      "version": "8.14.4",
-      "resolved": "https://registry.npmjs.org/@cspell/cspell-types/-/cspell-types-8.14.4.tgz",
-      "integrity": "sha512-VXwikqdHgjOVperVVCn2DOe8W3rPIswwZtMHfRYnagpzZo/TOntIjkXPJSfTtl/cFyx5DnCBsDH8ytKGlMeHkw==",
+      "version": "8.15.3",
+      "resolved": "https://registry.npmjs.org/@cspell/cspell-types/-/cspell-types-8.15.3.tgz",
+      "integrity": "sha512-05xy2eeIQIHk2X6hUfBPBNbCnWcuSjE6D/F0XFTxLBl4ecUurSthJqvR3PrMjluETeZ71/cRIZMBnW+v7+yBgw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -887,114 +887,114 @@
       }
     },
     "node_modules/@cspell/dict-ada": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-ada/-/dict-ada-4.0.2.tgz",
-      "integrity": "sha512-0kENOWQeHjUlfyId/aCM/mKXtkEgV0Zu2RhUXCBr4hHo9F9vph+Uu8Ww2b0i5a4ZixoIkudGA+eJvyxrG1jUpA==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-ada/-/dict-ada-4.0.5.tgz",
+      "integrity": "sha512-6/RtZ/a+lhFVmrx/B7bfP7rzC4yjEYe8o74EybXcvu4Oue6J4Ey2WSYj96iuodloj1LWrkNCQyX5h4Pmcj0Iag==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-aws": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-aws/-/dict-aws-4.0.4.tgz",
-      "integrity": "sha512-6AWI/Kkf+RcX/J81VX8+GKLeTgHWEr/OMhGk3dHQzWK66RaqDJCGDqi7494ghZKcBB7dGa3U5jcKw2FZHL/u3w==",
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-aws/-/dict-aws-4.0.7.tgz",
+      "integrity": "sha512-PoaPpa2NXtSkhGIMIKhsJUXB6UbtTt6Ao3x9JdU9kn7fRZkwD4RjHDGqulucIOz7KeEX/dNRafap6oK9xHe4RA==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-bash": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-bash/-/dict-bash-4.1.5.tgz",
-      "integrity": "sha512-YGim/h7E2U5HCCb2ckNufT6/yyWygt9nSZ5C7qw6oOD3bygbObqD1+rlPor1JW+YyO+3GwTIHE70uKEEU6VZYw==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-bash/-/dict-bash-4.1.8.tgz",
+      "integrity": "sha512-I2CM2pTNthQwW069lKcrVxchJGMVQBzru2ygsHCwgidXRnJL/NTjAPOFTxN58Jc1bf7THWghfEDyKX/oyfc0yg==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-companies": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-companies/-/dict-companies-3.1.4.tgz",
-      "integrity": "sha512-y9e0amzEK36EiiKx3VAA+SHQJPpf2Qv5cCt5eTUSggpTkiFkCh6gRKQ97rVlrKh5GJrqinDwYIJtTsxuh2vy2Q==",
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-companies/-/dict-companies-3.1.7.tgz",
+      "integrity": "sha512-ncVs/efuAkP1/tLDhWbXukBjgZ5xOUfe03neHMWsE8zvXXc5+Lw6TX5jaJXZLOoES/f4j4AhRE20jsPCF5pm+A==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-cpp": {
-      "version": "5.1.18",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-cpp/-/dict-cpp-5.1.18.tgz",
-      "integrity": "sha512-cq07tYsWuQhV3G1860JFQRV7A4kWkeMZAJAfwd4JRGHDx8A7Hm1Fwy58hpzbujfox4934o2lwOH7LszX/7Reiw==",
+      "version": "5.1.22",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-cpp/-/dict-cpp-5.1.22.tgz",
+      "integrity": "sha512-g1/8P5/Q+xnIc8Js4UtBg3XOhcFrFlFbG3UWVtyEx49YTf0r9eyDtDt1qMMDBZT91pyCwLcAEbwS+4i5PIfNZw==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-cryptocurrencies": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-cryptocurrencies/-/dict-cryptocurrencies-5.0.0.tgz",
-      "integrity": "sha512-Z4ARIw5+bvmShL+4ZrhDzGhnc9znaAGHOEMaB/GURdS/jdoreEDY34wdN0NtdLHDO5KO7GduZnZyqGdRoiSmYA==",
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-cryptocurrencies/-/dict-cryptocurrencies-5.0.3.tgz",
+      "integrity": "sha512-bl5q+Mk+T3xOZ12+FG37dB30GDxStza49Rmoax95n37MTLksk9wBo1ICOlPJ6PnDUSyeuv4SIVKgRKMKkJJglA==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-csharp": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-csharp/-/dict-csharp-4.0.2.tgz",
-      "integrity": "sha512-1JMofhLK+4p4KairF75D3A924m5ERMgd1GvzhwK2geuYgd2ZKuGW72gvXpIV7aGf52E3Uu1kDXxxGAiZ5uVG7g==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-csharp/-/dict-csharp-4.0.5.tgz",
+      "integrity": "sha512-c/sFnNgtRwRJxtC3JHKkyOm+U3/sUrltFeNwml9VsxKBHVmvlg4tk4ar58PdpW9/zTlGUkWi2i85//DN1EsUCA==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-css": {
-      "version": "4.0.13",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-css/-/dict-css-4.0.13.tgz",
-      "integrity": "sha512-WfOQkqlAJTo8eIQeztaH0N0P+iF5hsJVKFuhy4jmARPISy8Efcv8QXk2/IVbmjJH0/ZV7dKRdnY5JFVXuVz37g==",
+      "version": "4.0.16",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-css/-/dict-css-4.0.16.tgz",
+      "integrity": "sha512-70qu7L9z/JR6QLyJPk38fNTKitlIHnfunx0wjpWQUQ8/jGADIhMCrz6hInBjqPNdtGpYm8d1dNFyF8taEkOgrQ==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-dart": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-dart/-/dict-dart-2.2.1.tgz",
-      "integrity": "sha512-yriKm7QkoPx3JPSSOcw6iX9gOb2N50bOo/wqWviqPYbhpMRh9Xiv6dkUy3+ot+21GuShZazO8X6U5+Vw67XEwg==",
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-dart/-/dict-dart-2.2.4.tgz",
+      "integrity": "sha512-of/cVuUIZZK/+iqefGln8G3bVpfyN6ZtH+LyLkHMoR5tEj+2vtilGNk9ngwyR8L4lEqbKuzSkOxgfVjsXf5PsQ==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-data-science": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-data-science/-/dict-data-science-2.0.1.tgz",
-      "integrity": "sha512-xeutkzK0eBe+LFXOFU2kJeAYO6IuFUc1g7iRLr7HeCmlC4rsdGclwGHh61KmttL3+YHQytYStxaRBdGAXWC8Lw==",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-data-science/-/dict-data-science-2.0.5.tgz",
+      "integrity": "sha512-nNSILXmhSJox9/QoXICPQgm8q5PbiSQP4afpbkBqPi/u/b3K9MbNH5HvOOa6230gxcGdbZ9Argl2hY/U8siBlg==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-django": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-django/-/dict-django-4.1.0.tgz",
-      "integrity": "sha512-bKJ4gPyrf+1c78Z0Oc4trEB9MuhcB+Yg+uTTWsvhY6O2ncFYbB/LbEZfqhfmmuK/XJJixXfI1laF2zicyf+l0w==",
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-django/-/dict-django-4.1.3.tgz",
+      "integrity": "sha512-yBspeL3roJlO0a1vKKNaWABURuHdHZ9b1L8d3AukX0AsBy9snSggc8xCavPmSzNfeMDXbH+1lgQiYBd3IW03fg==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-docker": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-docker/-/dict-docker-1.1.7.tgz",
-      "integrity": "sha512-XlXHAr822euV36GGsl2J1CkBIVg3fZ6879ZOg5dxTIssuhUOCiV2BuzKZmt6aIFmcdPmR14+9i9Xq+3zuxeX0A==",
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-docker/-/dict-docker-1.1.11.tgz",
+      "integrity": "sha512-s0Yhb16/R+UT1y727ekbR/itWQF3Qz275DR1ahOa66wYtPjHUXmhM3B/LT3aPaX+hD6AWmK23v57SuyfYHUjsw==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-dotnet": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-dotnet/-/dict-dotnet-5.0.5.tgz",
-      "integrity": "sha512-gjg0L97ee146wX47dnA698cHm85e7EOpf9mVrJD8DmEaqoo/k1oPy2g7c7LgKxK9XnqwoXxhLNnngPrwXOoEtQ==",
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-dotnet/-/dict-dotnet-5.0.8.tgz",
+      "integrity": "sha512-MD8CmMgMEdJAIPl2Py3iqrx3B708MbCIXAuOeZ0Mzzb8YmLmiisY7QEYSZPg08D7xuwARycP0Ki+bb0GAkFSqg==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-elixir": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-elixir/-/dict-elixir-4.0.3.tgz",
-      "integrity": "sha512-g+uKLWvOp9IEZvrIvBPTr/oaO6619uH/wyqypqvwpmnmpjcfi8+/hqZH8YNKt15oviK8k4CkINIqNhyndG9d9Q==",
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-elixir/-/dict-elixir-4.0.6.tgz",
+      "integrity": "sha512-TfqSTxMHZ2jhiqnXlVKM0bUADtCvwKQv2XZL/DI0rx3doG8mEMS8SGPOmiyyGkHpR/pGOq18AFH3BEm4lViHIw==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-en_us": {
-      "version": "4.3.23",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-en_us/-/dict-en_us-4.3.23.tgz",
-      "integrity": "sha512-l0SoEQBsi3zDSl3OuL4/apBkxjuj4hLIg/oy6+gZ7LWh03rKdF6VNtSZNXWAmMY+pmb1cGA3ouleTiJIglbsIg==",
+      "version": "4.3.26",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-en_us/-/dict-en_us-4.3.26.tgz",
+      "integrity": "sha512-hDbHYJsi3UgU1J++B0WLiYhWQdsmve3CH53FIaMRAdhrWOHcuw7h1dYkQXHFEP5lOjaq53KUHp/oh5su6VkIZg==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-en-common-misspellings": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-en-common-misspellings/-/dict-en-common-misspellings-2.0.4.tgz",
-      "integrity": "sha512-lvOiRjV/FG4pAGZL3PN2GCVHSTCE92cwhfLGGkOsQtxSmef6WCHfHwp9auafkBlX0yFQSKDfq6/TlpQbjbJBtQ==",
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-en-common-misspellings/-/dict-en-common-misspellings-2.0.7.tgz",
+      "integrity": "sha512-qNFo3G4wyabcwnM+hDrMYKN9vNVg/k9QkhqSlSst6pULjdvPyPs1mqz1689xO/v9t8e6sR4IKc3CgUXDMTYOpA==",
       "dev": true,
       "license": "CC BY-SA 4.0"
     },
@@ -1006,271 +1006,271 @@
       "license": "MIT"
     },
     "node_modules/@cspell/dict-filetypes": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-filetypes/-/dict-filetypes-3.0.4.tgz",
-      "integrity": "sha512-IBi8eIVdykoGgIv5wQhOURi5lmCNJq0we6DvqKoPQJHthXbgsuO1qrHSiUVydMiQl/XvcnUWTMeAlVUlUClnVg==",
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-filetypes/-/dict-filetypes-3.0.7.tgz",
+      "integrity": "sha512-/DN0Ujp9/EXvpTcgih9JmBaE8n+G0wtsspyNdvHT5luRfpfol1xm/CIQb6xloCXCiLkWX+EMPeLSiVIZq+24dA==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-flutter": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-flutter/-/dict-flutter-1.0.0.tgz",
-      "integrity": "sha512-W7k1VIc4KeV8BjEBxpA3cqpzbDWjfb7oXkEb0LecBCBp5Z7kcfnjT1YVotTx/U9PGyAOBhDaEdgZACVGNQhayw==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-flutter/-/dict-flutter-1.0.3.tgz",
+      "integrity": "sha512-52C9aUEU22ptpgYh6gQyIdA4MP6NPwzbEqndfgPh3Sra191/kgs7CVqXiO1qbtZa9gnYHUoVApkoxRE7mrXHfg==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-fonts": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-fonts/-/dict-fonts-4.0.0.tgz",
-      "integrity": "sha512-t9V4GeN/m517UZn63kZPUYP3OQg5f0OBLSd3Md5CU3eH1IFogSvTzHHnz4Wqqbv8NNRiBZ3HfdY/pqREZ6br3Q==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-fonts/-/dict-fonts-4.0.3.tgz",
+      "integrity": "sha512-sPd17kV5qgYXLteuHFPn5mbp/oCHKgitNfsZLFC3W2fWEgZlhg4hK+UGig3KzrYhhvQ8wBnmZrAQm0TFKCKzsA==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-fsharp": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-fsharp/-/dict-fsharp-1.0.1.tgz",
-      "integrity": "sha512-23xyPcD+j+NnqOjRHgW3IU7Li912SX9wmeefcY0QxukbAxJ/vAN4rBpjSwwYZeQPAn3fxdfdNZs03fg+UM+4yQ==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-fsharp/-/dict-fsharp-1.0.4.tgz",
+      "integrity": "sha512-G5wk0o1qyHUNi9nVgdE1h5wl5ylq7pcBjX8vhjHcO4XBq20D5eMoXjwqMo/+szKAqzJ+WV3BgAL50akLKrT9Rw==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-fullstack": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-fullstack/-/dict-fullstack-3.2.0.tgz",
-      "integrity": "sha512-sIGQwU6G3rLTo+nx0GKyirR5dQSFeTIzFTOrURw51ISf+jKG9a3OmvsVtc2OANfvEAOLOC9Wfd8WYhmsO8KRDQ==",
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-fullstack/-/dict-fullstack-3.2.3.tgz",
+      "integrity": "sha512-62PbndIyQPH11mAv0PyiyT0vbwD0AXEocPpHlCHzfb5v9SspzCCbzQ/LIBiFmyRa+q5LMW35CnSVu6OXdT+LKg==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-gaming-terms": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-gaming-terms/-/dict-gaming-terms-1.0.5.tgz",
-      "integrity": "sha512-C3riccZDD3d9caJQQs1+MPfrUrQ+0KHdlj9iUR1QD92FgTOF6UxoBpvHUUZ9YSezslcmpFQK4xQQ5FUGS7uWfw==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-gaming-terms/-/dict-gaming-terms-1.0.8.tgz",
+      "integrity": "sha512-7OL0zTl93WFWhhtpXFrtm9uZXItC3ncAs8d0iQDMMFVNU1rBr6raBNxJskxE5wx2Ant12fgI66ZGVagXfN+yfA==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-git": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-git/-/dict-git-3.0.0.tgz",
-      "integrity": "sha512-simGS/lIiXbEaqJu9E2VPoYW1OTC2xrwPPXNXFMa2uo/50av56qOuaxDrZ5eH1LidFXwoc8HROCHYeKoNrDLSw==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-git/-/dict-git-3.0.3.tgz",
+      "integrity": "sha512-LSxB+psZ0qoj83GkyjeEH/ZViyVsGEF/A6BAo8Nqc0w0HjD2qX/QR4sfA6JHUgQ3Yi/ccxdK7xNIo67L2ScW5A==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-golang": {
-      "version": "6.0.12",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-golang/-/dict-golang-6.0.12.tgz",
-      "integrity": "sha512-LEPeoqd+4O+vceHF73S7D7+LYfrAjOvp4Dqzh4MT30ruzlQ77yHRSuYOJtrFN1GK5ntAt/ILSVOKg9sgsz1Llg==",
+      "version": "6.0.16",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-golang/-/dict-golang-6.0.16.tgz",
+      "integrity": "sha512-hZOBlgcguv2Hdc93n2zjdAQm1j3grsN9T9WhPnQ1wh2vUDoCLEujg+6gWhjcLb8ECOcwZTWgNyQLWeOxEsAj/w==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-google": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-google/-/dict-google-1.0.1.tgz",
-      "integrity": "sha512-dQr4M3n95uOhtloNSgB9tYYGXGGEGEykkFyRtfcp5pFuEecYUa0BSgtlGKx9RXVtJtKgR+yFT/a5uQSlt8WjqQ==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-google/-/dict-google-1.0.4.tgz",
+      "integrity": "sha512-JThUT9eiguCja1mHHLwYESgxkhk17Gv7P3b1S7ZJzXw86QyVHPrbpVoMpozHk0C9o+Ym764B7gZGKmw9uMGduQ==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-haskell": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-haskell/-/dict-haskell-4.0.1.tgz",
-      "integrity": "sha512-uRrl65mGrOmwT7NxspB4xKXFUenNC7IikmpRZW8Uzqbqcu7ZRCUfstuVH7T1rmjRgRkjcIjE4PC11luDou4wEQ==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-haskell/-/dict-haskell-4.0.4.tgz",
+      "integrity": "sha512-EwQsedEEnND/vY6tqRfg9y7tsnZdxNqOxLXSXTsFA6JRhUlr8Qs88iUUAfsUzWc4nNmmzQH2UbtT25ooG9x4nA==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-html": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-html/-/dict-html-4.0.6.tgz",
-      "integrity": "sha512-cLWHfuOhE4wqwC12up6Doxo2u1xxVhX1A8zriR4CUD+osFQzUIcBK1ykNXppga+rt1WyypaJdTU2eV6OpzYrgQ==",
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-html/-/dict-html-4.0.9.tgz",
+      "integrity": "sha512-BNp7w3m910K4qIVyOBOZxHuFNbVojUY6ES8Y8r7YjYgJkm2lCuQoVwwhPjurnomJ7BPmZTb+3LLJ58XIkgF7JQ==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-html-symbol-entities": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-html-symbol-entities/-/dict-html-symbol-entities-4.0.0.tgz",
-      "integrity": "sha512-HGRu+48ErJjoweR5IbcixxETRewrBb0uxQBd6xFGcxbEYCX8CnQFTAmKI5xNaIt2PKaZiJH3ijodGSqbKdsxhw==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-html-symbol-entities/-/dict-html-symbol-entities-4.0.3.tgz",
+      "integrity": "sha512-aABXX7dMLNFdSE8aY844X4+hvfK7977sOWgZXo4MTGAmOzR8524fjbJPswIBK7GaD3+SgFZ2yP2o0CFvXDGF+A==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-java": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-java/-/dict-java-5.0.7.tgz",
-      "integrity": "sha512-ejQ9iJXYIq7R09BScU2y5OUGrSqwcD+J5mHFOKbduuQ5s/Eh/duz45KOzykeMLI6KHPVxhBKpUPBWIsfewECpQ==",
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-java/-/dict-java-5.0.10.tgz",
+      "integrity": "sha512-pVNcOnmoGiNL8GSVq4WbX/Vs2FGS0Nej+1aEeGuUY9CU14X8yAVCG+oih5ZoLt1jaR8YfR8byUF8wdp4qG4XIw==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-julia": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-julia/-/dict-julia-1.0.1.tgz",
-      "integrity": "sha512-4JsCLCRhhLMLiaHpmR7zHFjj1qOauzDI5ZzCNQS31TUMfsOo26jAKDfo0jljFAKgw5M2fEG7sKr8IlPpQAYrmQ==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-julia/-/dict-julia-1.0.4.tgz",
+      "integrity": "sha512-bFVgNX35MD3kZRbXbJVzdnN7OuEqmQXGpdOi9jzB40TSgBTlJWA4nxeAKV4CPCZxNRUGnLH0p05T/AD7Aom9/w==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-k8s": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-k8s/-/dict-k8s-1.0.6.tgz",
-      "integrity": "sha512-srhVDtwrd799uxMpsPOQqeDJY+gEocgZpoK06EFrb4GRYGhv7lXo9Fb+xQMyQytzOW9dw4DNOEck++nacDuymg==",
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-k8s/-/dict-k8s-1.0.9.tgz",
+      "integrity": "sha512-Q7GELSQIzo+BERl2ya/nBEnZeQC+zJP19SN1pI6gqDYraM51uYJacbbcWLYYO2Y+5joDjNt/sd/lJtLaQwoSlA==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-latex": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-latex/-/dict-latex-4.0.0.tgz",
-      "integrity": "sha512-LPY4y6D5oI7D3d+5JMJHK/wxYTQa2lJMSNxps2JtuF8hbAnBQb3igoWEjEbIbRRH1XBM0X8dQqemnjQNCiAtxQ==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-latex/-/dict-latex-4.0.3.tgz",
+      "integrity": "sha512-2KXBt9fSpymYHxHfvhUpjUFyzrmN4c4P8mwIzweLyvqntBT3k0YGZJSriOdjfUjwSygrfEwiuPI1EMrvgrOMJw==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-lorem-ipsum": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-lorem-ipsum/-/dict-lorem-ipsum-4.0.0.tgz",
-      "integrity": "sha512-1l3yjfNvMzZPibW8A7mQU4kTozwVZVw0AvFEdy+NcqtbxH+TvbSkNMqROOFWrkD2PjnKG0+Ea0tHI2Pi6Gchnw==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-lorem-ipsum/-/dict-lorem-ipsum-4.0.3.tgz",
+      "integrity": "sha512-WFpDi/PDYHXft6p0eCXuYnn7mzMEQLVeqpO+wHSUd+kz5ADusZ4cpslAA4wUZJstF1/1kMCQCZM6HLZic9bT8A==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-lua": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-lua/-/dict-lua-4.0.3.tgz",
-      "integrity": "sha512-lDHKjsrrbqPaea13+G9s0rtXjMO06gPXPYRjRYawbNmo4E/e3XFfVzeci3OQDQNDmf2cPOwt9Ef5lu2lDmwfJg==",
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-lua/-/dict-lua-4.0.6.tgz",
+      "integrity": "sha512-Jwvh1jmAd9b+SP9e1GkS2ACbqKKRo9E1f9GdjF/ijmooZuHU0hPyqvnhZzUAxO1egbnNjxS/J2T6iUtjAUK2KQ==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-makefile": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-makefile/-/dict-makefile-1.0.0.tgz",
-      "integrity": "sha512-3W9tHPcSbJa6s0bcqWo6VisEDTSN5zOtDbnPabF7rbyjRpNo0uHXHRJQF8gAbFzoTzBBhgkTmrfSiuyQm7vBUQ==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-makefile/-/dict-makefile-1.0.3.tgz",
+      "integrity": "sha512-R3U0DSpvTs6qdqfyBATnePj9Q/pypkje0Nj26mQJ8TOBQutCRAJbr2ZFAeDjgRx5EAJU/+8txiyVF97fbVRViw==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-monkeyc": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-monkeyc/-/dict-monkeyc-1.0.6.tgz",
-      "integrity": "sha512-oO8ZDu/FtZ55aq9Mb67HtaCnsLn59xvhO/t2mLLTHAp667hJFxpp7bCtr2zOrR1NELzFXmKln/2lw/PvxMSvrA==",
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-monkeyc/-/dict-monkeyc-1.0.9.tgz",
+      "integrity": "sha512-Jvf6g5xlB4+za3ThvenYKREXTEgzx5gMUSzrAxIiPleVG4hmRb/GBSoSjtkGaibN3XxGx5x809gSTYCA/IHCpA==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-node": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-node/-/dict-node-5.0.1.tgz",
-      "integrity": "sha512-lax/jGz9h3Dv83v8LHa5G0bf6wm8YVRMzbjJPG/9rp7cAGPtdrga+XANFq+B7bY5+jiSA3zvj10LUFCFjnnCCg==",
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-node/-/dict-node-5.0.4.tgz",
+      "integrity": "sha512-Hz5hiuOvZTd7Cp1IBqUZ7/ChwJeQpD5BJuwCaDn4mPNq4iMcQ1iWBYMThvNVqCEDgKv63X52nT8RAWacss98qg==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-npm": {
-      "version": "5.1.5",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-npm/-/dict-npm-5.1.5.tgz",
-      "integrity": "sha512-oAOGWuJYU3DlO+cAsStKMWN8YEkBue25cRC9EwdiL5Z84nchU20UIoYrLfIQejMlZca+1GyrNeyxRAgn4KiivA==",
+      "version": "5.1.8",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-npm/-/dict-npm-5.1.8.tgz",
+      "integrity": "sha512-AJELYXeB4fQdIoNfmuaQxB1Hli3cX6XPsQCjfBxlu0QYXhrjB/IrCLLQAjWIywDqJiWyGUFTz4DqaANm8C/r9Q==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-php": {
-      "version": "4.0.10",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-php/-/dict-php-4.0.10.tgz",
-      "integrity": "sha512-NfTZdp6kcZDF1PvgQ6cY0zE4FUO5rSwNmBH/iwCBuaLfJAFQ97rgjxo+D2bic4CFwNjyHutnHPtjJBRANO5XQw==",
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-php/-/dict-php-4.0.13.tgz",
+      "integrity": "sha512-P6sREMZkhElzz/HhXAjahnICYIqB/HSGp1EhZh+Y6IhvC15AzgtDP8B8VYCIsQof6rPF1SQrFwunxOv8H1e2eg==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-powershell": {
-      "version": "5.0.10",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-powershell/-/dict-powershell-5.0.10.tgz",
-      "integrity": "sha512-U4H0zm94sNK+YP7jSFb7xb160XLf2dKIPVt5sOYctKlEyR9M16sP8FHbyWV2Yp1YtxXugoNdeCm2vwGEDAd8sg==",
+      "version": "5.0.13",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-powershell/-/dict-powershell-5.0.13.tgz",
+      "integrity": "sha512-0qdj0XZIPmb77nRTynKidRJKTU0Fl+10jyLbAhFTuBWKMypVY06EaYFnwhsgsws/7nNX8MTEQuewbl9bWFAbsg==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-public-licenses": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-public-licenses/-/dict-public-licenses-2.0.8.tgz",
-      "integrity": "sha512-Sup+tFS7cDV0fgpoKtUqEZ6+fA/H+XUgBiqQ/Fbs6vUE3WCjJHOIVsP+udHuyMH7iBfJ4UFYOYeORcY4EaKdMg==",
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-public-licenses/-/dict-public-licenses-2.0.11.tgz",
+      "integrity": "sha512-rR5KjRUSnVKdfs5G+gJ4oIvQvm8+NJ6cHWY2N+GE69/FSGWDOPHxulCzeGnQU/c6WWZMSimG9o49i9r//lUQyA==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-python": {
-      "version": "4.2.7",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-python/-/dict-python-4.2.7.tgz",
-      "integrity": "sha512-igE4zbaRAjC0PEmck56+zT4Ui2SyV8CY2p7OQ6kdgLWrBIkrYQ1dboRucgVJCTHfMpENLnanWIX/cxY78fkY2Q==",
+      "version": "4.2.12",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-python/-/dict-python-4.2.12.tgz",
+      "integrity": "sha512-U25eOFu+RE0aEcF2AsxZmq3Lic7y9zspJ9SzjrC0mfJz+yr3YmSCw4E0blMD3mZoNcf7H/vMshuKIY5AY36U+Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@cspell/dict-data-science": "^2.0.1"
+        "@cspell/dict-data-science": "^2.0.5"
       }
     },
     "node_modules/@cspell/dict-r": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-r/-/dict-r-2.0.1.tgz",
-      "integrity": "sha512-KCmKaeYMLm2Ip79mlYPc8p+B2uzwBp4KMkzeLd5E6jUlCL93Y5Nvq68wV5fRLDRTf7N1LvofkVFWfDcednFOgA==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-r/-/dict-r-2.0.4.tgz",
+      "integrity": "sha512-cBpRsE/U0d9BRhiNRMLMH1PpWgw+N+1A2jumgt1if9nBGmQw4MUpg2u9I0xlFVhstTIdzXiLXMxP45cABuiUeQ==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-ruby": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-ruby/-/dict-ruby-5.0.4.tgz",
-      "integrity": "sha512-URw0jScj5pv8sKCVLNnde11qVCQR442rUpSd12u46Swl+5qBaSdnOUoCWQk419kd9/dpC6bB/3l4kOSY2fdYHw==",
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-ruby/-/dict-ruby-5.0.7.tgz",
+      "integrity": "sha512-4/d0hcoPzi5Alk0FmcyqlzFW9lQnZh9j07MJzPcyVO62nYJJAGKaPZL2o4qHeCS/od/ctJC5AHRdoUm0ktsw6Q==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-rust": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-rust/-/dict-rust-4.0.6.tgz",
-      "integrity": "sha512-Buzy9PfLbdRPibSth8CV1D8ZsYqybo26yNIlAN+8ehU0pSBss0Jv4aleL4vKQ3FjouXeAC27rtEsLd7yaMZTog==",
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-rust/-/dict-rust-4.0.9.tgz",
+      "integrity": "sha512-Dhr6TIZsMV92xcikKIWei6p/qswS4M+gTkivpWwz4/1oaVk2nRrxJmCdRoVkJlZkkAc17rjxrS12mpnJZI0iWw==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-scala": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-scala/-/dict-scala-5.0.3.tgz",
-      "integrity": "sha512-4yGb4AInT99rqprxVNT9TYb1YSpq58Owzq7zi3ZS5T0u899Y4VsxsBiOgHnQ/4W+ygi+sp+oqef8w8nABR2lkg==",
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-scala/-/dict-scala-5.0.6.tgz",
+      "integrity": "sha512-tl0YWAfjUVb4LyyE4JIMVE8DlLzb1ecHRmIWc4eT6nkyDqQgHKzdHsnusxFEFMVLIQomgSg0Zz6hJ5S1E4W4ww==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-software-terms": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-software-terms/-/dict-software-terms-4.1.6.tgz",
-      "integrity": "sha512-5dWn9JC18DKpm47BPKf1jGbXzEkKoXmqiYv9vaeor4+jmURZnE+VPIh5BNZFBQ840gTDvys7JXt4P7ysifUlfg==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-software-terms/-/dict-software-terms-4.1.11.tgz",
+      "integrity": "sha512-77CTHxWFTVw6tVoMN8WBMrlNW2F2FbgATwD/6vcOuiyrJUmh8klN5ZK3m+yyK3ZzsnaW2Bduoc0fw2Ckcm/riQ==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-sql": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-sql/-/dict-sql-2.1.5.tgz",
-      "integrity": "sha512-FmxanytHXss7GAWAXmgaxl3icTCW7YxlimyOSPNfm+njqeUDjw3kEv4mFNDDObBJv8Ec5AWCbUDkWIpkE3IpKg==",
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-sql/-/dict-sql-2.1.8.tgz",
+      "integrity": "sha512-dJRE4JV1qmXTbbGm6WIcg1knmR6K5RXnQxF4XHs5HA3LAjc/zf77F95i5LC+guOGppVF6Hdl66S2UyxT+SAF3A==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-svelte": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-svelte/-/dict-svelte-1.0.2.tgz",
-      "integrity": "sha512-rPJmnn/GsDs0btNvrRBciOhngKV98yZ9SHmg8qI6HLS8hZKvcXc0LMsf9LLuMK1TmS2+WQFAan6qeqg6bBxL2Q==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-svelte/-/dict-svelte-1.0.5.tgz",
+      "integrity": "sha512-sseHlcXOqWE4Ner9sg8KsjxwSJ2yssoJNqFHR9liWVbDV+m7kBiUtn2EB690TihzVsEmDr/0Yxrbb5Bniz70mA==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-swift": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-swift/-/dict-swift-2.0.1.tgz",
-      "integrity": "sha512-gxrCMUOndOk7xZFmXNtkCEeroZRnS2VbeaIPiymGRHj5H+qfTAzAKxtv7jJbVA3YYvEzWcVE2oKDP4wcbhIERw==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-swift/-/dict-swift-2.0.4.tgz",
+      "integrity": "sha512-CsFF0IFAbRtYNg0yZcdaYbADF5F3DsM8C4wHnZefQy8YcHP/qjAF/GdGfBFBLx+XSthYuBlo2b2XQVdz3cJZBw==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-terraform": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-terraform/-/dict-terraform-1.0.2.tgz",
-      "integrity": "sha512-UZdJwWIpib2Rx02w6vtXTU3z+M/VMZU0F1dhSL3Ab9otQsFntT8U1CX7wBSqQCLg8bJiCfnUyVvMK3UBm3SR8A==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-terraform/-/dict-terraform-1.0.5.tgz",
+      "integrity": "sha512-qH3epPB2d6d5w1l4hR2OsnN8qDQ4P0z6oDB7+YiNH+BoECXv4Z38MIV1H8cxIzD2wkzkt2JTcFYaVW72MDZAlg==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-typescript": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-typescript/-/dict-typescript-3.1.6.tgz",
-      "integrity": "sha512-1beC6O4P/j23VuxX+i0+F7XqPVc3hhiAzGJHEKqnWf5cWAXQtg0xz3xQJ5MvYx2a7iLaSa+lu7+05vG9UHyu9Q==",
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-typescript/-/dict-typescript-3.1.10.tgz",
+      "integrity": "sha512-7Zek3w4Rh3ZYyhihJ34FdnUBwP3OmRldnEq3hZ+FgQ0PyYZjXv5ztEViRBBxXjiFx1nHozr6pLi74TxToD8xsg==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dict-vue": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-vue/-/dict-vue-3.0.0.tgz",
-      "integrity": "sha512-niiEMPWPV9IeRBRzZ0TBZmNnkK3olkOPYxC1Ny2AX4TGlYRajcW0WUtoSHmvvjZNfWLSg2L6ruiBeuPSbjnG6A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-vue/-/dict-vue-3.0.3.tgz",
+      "integrity": "sha512-akmYbrgAGumqk1xXALtDJcEcOMYBYMnkjpmGzH13Ozhq1mkPF4VgllFQlm1xYde+BUKNnzMgPEzxrL2qZllgYA==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@cspell/dynamic-import": {
-      "version": "8.14.4",
-      "resolved": "https://registry.npmjs.org/@cspell/dynamic-import/-/dynamic-import-8.14.4.tgz",
-      "integrity": "sha512-GjKsBJvPXp4dYRqsMn7n1zpnKbnpfJnlKLOVeoFBh8fi4n06G50xYr+G25CWX1WT3WFaALAavvVICEUPrVsuqg==",
+      "version": "8.15.3",
+      "resolved": "https://registry.npmjs.org/@cspell/dynamic-import/-/dynamic-import-8.15.3.tgz",
+      "integrity": "sha512-RG35KnoLSFRj9BwmDW3AmkEbh6NxkZrhRxCQ8s4ZfMl5QEkoYKdVpWYSPUBMlPqkq0U+SVggMvNbdMSqyITxxQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1281,9 +1281,9 @@
       }
     },
     "node_modules/@cspell/filetypes": {
-      "version": "8.14.4",
-      "resolved": "https://registry.npmjs.org/@cspell/filetypes/-/filetypes-8.14.4.tgz",
-      "integrity": "sha512-qd68dD7xTA4Mnf/wjIKYz2SkiTBshIM+yszOUtLa06YJm0aocoNQ25FHXyYEQYm9NQXCYnRWWA02sFMGs8Sv/w==",
+      "version": "8.15.3",
+      "resolved": "https://registry.npmjs.org/@cspell/filetypes/-/filetypes-8.15.3.tgz",
+      "integrity": "sha512-2B22/c2/pVqS2p3latOj3zCHk7vUWsxwkhCKhOKMA2tKt2cc7MHKUKMfsX4XpfY/571S/TTy1YYeGXlAxUtF3g==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1291,9 +1291,9 @@
       }
     },
     "node_modules/@cspell/strong-weak-map": {
-      "version": "8.14.4",
-      "resolved": "https://registry.npmjs.org/@cspell/strong-weak-map/-/strong-weak-map-8.14.4.tgz",
-      "integrity": "sha512-Uyfck64TfVU24wAP3BLGQ5EsAfzIZiLfN90NhttpEM7GlOBmbGrEJd4hNOwfpYsE/TT80eGWQVPRTLr5SDbXFA==",
+      "version": "8.15.3",
+      "resolved": "https://registry.npmjs.org/@cspell/strong-weak-map/-/strong-weak-map-8.15.3.tgz",
+      "integrity": "sha512-IhH+Reh2P+QXj8i5qGYsFI3Z01IWYMqUuN6CLnFXx5W0R8tWtxvmwWyT7j8lchV5foHSs8+mWaijKzwS6FSFVQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1301,9 +1301,9 @@
       }
     },
     "node_modules/@cspell/url": {
-      "version": "8.14.4",
-      "resolved": "https://registry.npmjs.org/@cspell/url/-/url-8.14.4.tgz",
-      "integrity": "sha512-htHhNF8WrM/NfaLSWuTYw0NqVgFRVHYSyHlRT3i/Yv5xvErld8Gw7C6ldm+0TLjoGlUe6X1VV72JSir7+yLp/Q==",
+      "version": "8.15.3",
+      "resolved": "https://registry.npmjs.org/@cspell/url/-/url-8.15.3.tgz",
+      "integrity": "sha512-JuQdGHj+W5anXpc+2pYggoUd+LsbNac4Rc7PdUUTnzMxV1EvlQZs28jEK4y27i4RI5pNQmsUWGZTHeMuwdlgSQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1311,9 +1311,9 @@
       }
     },
     "node_modules/@csstools/css-parser-algorithms": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.1.tgz",
-      "integrity": "sha512-lSquqZCHxDfuTg/Sk2hiS0mcSFCEBuj49JfzPHJogDBT0mGCyY5A1AQzBWngitrp7i1/HAZpIgzF/VjhOEIJIg==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.2.tgz",
+      "integrity": "sha512-6tC/MnlEvs5suR4Ahef4YlBccJDHZuxGsAlxXmybWjZ5jPxlzLSMlRZ9mVHSRvlD+CmtE7+hJ+UQbfXrws/rUQ==",
       "dev": true,
       "funding": [
         {
@@ -1330,13 +1330,13 @@
         "node": ">=18"
       },
       "peerDependencies": {
-        "@csstools/css-tokenizer": "^3.0.1"
+        "@csstools/css-tokenizer": "^3.0.2"
       }
     },
     "node_modules/@csstools/css-tokenizer": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.1.tgz",
-      "integrity": "sha512-UBqaiu7kU0lfvaP982/o3khfXccVlHPWp0/vwwiIgDF0GmqqqxoiXC/6FCjlS9u92f7CoEz6nXKQnrn1kIAkOw==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.2.tgz",
+      "integrity": "sha512-IuTRcD53WHsXPCZ6W7ubfGqReTJ9Ra0yRRFmXYP/Re8hFYYfoIYIK4080X5luslVLWimhIeFq0hj09urVMQzTw==",
       "dev": true,
       "funding": [
         {
@@ -1564,9 +1564,9 @@
       "license": "MIT"
     },
     "node_modules/@es-joy/jsdoccomment": {
-      "version": "0.48.0",
-      "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.48.0.tgz",
-      "integrity": "sha512-G6QUWIcC+KvSwXNsJyDTHvqUdNoAVJPPgkc3+Uk4WBKqZvoXhlvazOgm9aL0HwihJLQf0l+tOE2UFzXBqCqgDw==",
+      "version": "0.49.0",
+      "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.49.0.tgz",
+      "integrity": "sha512-xjZTSFgECpb9Ohuk5yMX5RhUEbfeQcuOp8IF60e+wyzWEF0M5xeSgqsfLtvPEX8BIyOX9saZqzuGPmZ8oWc+5Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2368,13 +2368,13 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.47.2",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.47.2.tgz",
-      "integrity": "sha512-jTXRsoSPONAs8Za9QEQdyjFn+0ZQFjCiIztAIF6bi1HqhBzG9Ma7g1WotyiGqFSBRZjIEqMdT8RUlbk1QVhzCQ==",
+      "version": "1.48.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.48.1.tgz",
+      "integrity": "sha512-s9RtWoxkOLmRJdw3oFvhFbs9OJS0BzrLUc8Hf6l2UdCNd1rqeEyD4BhCJkvzeEoD1FsK4mirsWwGerhVmYKtZg==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright": "1.47.2"
+        "playwright": "1.48.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -3074,9 +3074,9 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.19.2",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz",
-      "integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==",
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
+      "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3325,15 +3325,15 @@
       }
     },
     "node_modules/@swc/core": {
-      "version": "1.7.26",
-      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.7.26.tgz",
-      "integrity": "sha512-f5uYFf+TmMQyYIoxkn/evWhNGuUzC730dFwAKGwBVHHVoPyak1/GvJUm6i1SKl+2Hrj9oN0i3WSoWWZ4pgI8lw==",
+      "version": "1.7.36",
+      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.7.36.tgz",
+      "integrity": "sha512-bu7ymMX+LCJOSSrKank25Jaq66ymLVA9fOUuy4ck3/6rbXdLw+pIJPnIDKQ9uNcxww8KDxOuJk9Ui9pqR+aGFw==",
       "dev": true,
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@swc/counter": "^0.1.3",
-        "@swc/types": "^0.1.12"
+        "@swc/types": "^0.1.13"
       },
       "engines": {
         "node": ">=10"
@@ -3343,16 +3343,16 @@
         "url": "https://opencollective.com/swc"
       },
       "optionalDependencies": {
-        "@swc/core-darwin-arm64": "1.7.26",
-        "@swc/core-darwin-x64": "1.7.26",
-        "@swc/core-linux-arm-gnueabihf": "1.7.26",
-        "@swc/core-linux-arm64-gnu": "1.7.26",
-        "@swc/core-linux-arm64-musl": "1.7.26",
-        "@swc/core-linux-x64-gnu": "1.7.26",
-        "@swc/core-linux-x64-musl": "1.7.26",
-        "@swc/core-win32-arm64-msvc": "1.7.26",
-        "@swc/core-win32-ia32-msvc": "1.7.26",
-        "@swc/core-win32-x64-msvc": "1.7.26"
+        "@swc/core-darwin-arm64": "1.7.36",
+        "@swc/core-darwin-x64": "1.7.36",
+        "@swc/core-linux-arm-gnueabihf": "1.7.36",
+        "@swc/core-linux-arm64-gnu": "1.7.36",
+        "@swc/core-linux-arm64-musl": "1.7.36",
+        "@swc/core-linux-x64-gnu": "1.7.36",
+        "@swc/core-linux-x64-musl": "1.7.36",
+        "@swc/core-win32-arm64-msvc": "1.7.36",
+        "@swc/core-win32-ia32-msvc": "1.7.36",
+        "@swc/core-win32-x64-msvc": "1.7.36"
       },
       "peerDependencies": {
         "@swc/helpers": "*"
@@ -3364,9 +3364,9 @@
       }
     },
     "node_modules/@swc/core-darwin-arm64": {
-      "version": "1.7.26",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.7.26.tgz",
-      "integrity": "sha512-FF3CRYTg6a7ZVW4yT9mesxoVVZTrcSWtmZhxKCYJX9brH4CS/7PRPjAKNk6kzWgWuRoglP7hkjQcd6EpMcZEAw==",
+      "version": "1.7.36",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.7.36.tgz",
+      "integrity": "sha512-8vDczXzCgv3ceTPhEivlpGprN44YlrCK1nbfU9g2TrhV/Aiqi09W/eM5zLesdoM1Z3mJl492gc/8nlTkpDdusw==",
       "cpu": [
         "arm64"
       ],
@@ -3381,9 +3381,9 @@
       }
     },
     "node_modules/@swc/core-darwin-x64": {
-      "version": "1.7.26",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.7.26.tgz",
-      "integrity": "sha512-az3cibZdsay2HNKmc4bjf62QVukuiMRh5sfM5kHR/JMTrLyS6vSw7Ihs3UTkZjUxkLTT8ro54LI6sV6sUQUbLQ==",
+      "version": "1.7.36",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.7.36.tgz",
+      "integrity": "sha512-Pa2Gao7+Wf5m3SsK4abKRtd48AtoUnJInvaC3d077swBfgZjbjUbQvcpdc2dOeQtWwo49rFqUZJonMsL0jnPgQ==",
       "cpu": [
         "x64"
       ],
@@ -3398,9 +3398,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm-gnueabihf": {
-      "version": "1.7.26",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.7.26.tgz",
-      "integrity": "sha512-VYPFVJDO5zT5U3RpCdHE5v1gz4mmR8BfHecUZTmD2v1JeFY6fv9KArJUpjrHEEsjK/ucXkQFmJ0jaiWXmpOV9Q==",
+      "version": "1.7.36",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.7.36.tgz",
+      "integrity": "sha512-3YsMWd7V+WZEjbfBnLkkz/olcRBa8nyoK0iIOnNARJBMcYaJxjkJSMZpmSojCnIVwvjA1N83CPAbUL+W+fCnHg==",
       "cpu": [
         "arm"
       ],
@@ -3415,9 +3415,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm64-gnu": {
-      "version": "1.7.26",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.7.26.tgz",
-      "integrity": "sha512-YKevOV7abpjcAzXrhsl+W48Z9mZvgoVs2eP5nY+uoMAdP2b3GxC0Df1Co0I90o2lkzO4jYBpTMcZlmUXLdXn+Q==",
+      "version": "1.7.36",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.7.36.tgz",
+      "integrity": "sha512-lqM3aBB7kJazJYOwHeA5OGNLqXoQPZ/76b3dV+XcjN1GhD0CcXz6mW5PRYVin6OSN1eKrKBKJjtDA1mqADDEvw==",
       "cpu": [
         "arm64"
       ],
@@ -3432,9 +3432,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm64-musl": {
-      "version": "1.7.26",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.7.26.tgz",
-      "integrity": "sha512-3w8iZICMkQQON0uIcvz7+Q1MPOW6hJ4O5ETjA0LSP/tuKqx30hIniCGOgPDnv3UTMruLUnQbtBwVCZTBKR3Rkg==",
+      "version": "1.7.36",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.7.36.tgz",
+      "integrity": "sha512-bqei2YDzvUfG0pth5W2xJaj0eG4XWYk0d/NJ75vBX6bkIzK6dC8iuKQ41jOfUWonnrAs7rTDDJW0sTn/evvRdw==",
       "cpu": [
         "arm64"
       ],
@@ -3449,9 +3449,9 @@
       }
     },
     "node_modules/@swc/core-linux-x64-gnu": {
-      "version": "1.7.26",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.7.26.tgz",
-      "integrity": "sha512-c+pp9Zkk2lqb06bNGkR2Looxrs7FtGDMA4/aHjZcCqATgp348hOKH5WPvNLBl+yPrISuWjbKDVn3NgAvfvpH4w==",
+      "version": "1.7.36",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.7.36.tgz",
+      "integrity": "sha512-03maXTUyaBjeCxlDltmdzHje1ryQt1C4OWmmNgSSRXjLb+GNnAenwOJMSrcvHP/aNClD2pwsFCnYKDGy+sYE6w==",
       "cpu": [
         "x64"
       ],
@@ -3466,9 +3466,9 @@
       }
     },
     "node_modules/@swc/core-linux-x64-musl": {
-      "version": "1.7.26",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.7.26.tgz",
-      "integrity": "sha512-PgtyfHBF6xG87dUSSdTJHwZ3/8vWZfNIXQV2GlwEpslrOkGqy+WaiiyE7Of7z9AvDILfBBBcJvJ/r8u980wAfQ==",
+      "version": "1.7.36",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.7.36.tgz",
+      "integrity": "sha512-XXysqLkvjtQnXm1zHqLhy00UYPv/gk5OtwR732X+piNisnEbcJBqI8Qp9O7YvLWllRcoP8IMBGDWLGdGLSpViA==",
       "cpu": [
         "x64"
       ],
@@ -3483,9 +3483,9 @@
       }
     },
     "node_modules/@swc/core-win32-arm64-msvc": {
-      "version": "1.7.26",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.7.26.tgz",
-      "integrity": "sha512-9TNXPIJqFynlAOrRD6tUQjMq7KApSklK3R/tXgIxc7Qx+lWu8hlDQ/kVPLpU7PWvMMwC/3hKBW+p5f+Tms1hmA==",
+      "version": "1.7.36",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.7.36.tgz",
+      "integrity": "sha512-k7+dmb13a/zPw+E4XYfPmLZFWJgcOcBRKIjYl9nQErtYsgsg3Ji6TBbsvJVETy23lNHyewZ17V5Vq6NzaG0hzg==",
       "cpu": [
         "arm64"
       ],
@@ -3500,9 +3500,9 @@
       }
     },
     "node_modules/@swc/core-win32-ia32-msvc": {
-      "version": "1.7.26",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.7.26.tgz",
-      "integrity": "sha512-9YngxNcG3177GYdsTum4V98Re+TlCeJEP4kEwEg9EagT5s3YejYdKwVAkAsJszzkXuyRDdnHUpYbTrPG6FiXrQ==",
+      "version": "1.7.36",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.7.36.tgz",
+      "integrity": "sha512-ridD3ay6YM2PEYHZXXFN+edYEv0FOynaqOBP+NSnGNHA35azItIjoIe+KNi4WltGtAjpKCHSpjGCNfna12wdYQ==",
       "cpu": [
         "ia32"
       ],
@@ -3517,9 +3517,9 @@
       }
     },
     "node_modules/@swc/core-win32-x64-msvc": {
-      "version": "1.7.26",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.7.26.tgz",
-      "integrity": "sha512-VR+hzg9XqucgLjXxA13MtV5O3C0bK0ywtLIBw/+a+O+Oc6mxFWHtdUeXDbIi5AiPbn0fjgVJMqYnyjGyyX8u0w==",
+      "version": "1.7.36",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.7.36.tgz",
+      "integrity": "sha512-j1z2Z1Ln9d0E3dHsPkC1K9XDh0ojhRPwV+GfRTu4D61PE+aYhYLvbJC6xPvL4/204QrStRS7eDu3m+BcDp3rgQ==",
       "cpu": [
         "x64"
       ],
@@ -3541,9 +3541,9 @@
       "license": "Apache-2.0"
     },
     "node_modules/@swc/types": {
-      "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.12.tgz",
-      "integrity": "sha512-wBJA+SdtkbFhHjTMYH+dEH1y4VpfGdAc2Kw/LK09i9bXd/K6j6PkDcFCEzb6iVfZMkPRrl/q0e3toqTAJdkIVA==",
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.13.tgz",
+      "integrity": "sha512-JL7eeCk6zWCbiYQg2xQSdLXQJl8Qoc9rXmG2cEKvHe3CKwMHwHGpfOb8frzNLmbycOo6I51qxnLnn9ESf4I20Q==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -3551,9 +3551,9 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.59.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.59.0.tgz",
-      "integrity": "sha512-WGD8uIhX6/deH/tkZqPNcRyAhDUqs729bWKoByYHSogcshXfFbppOdTER5+qY7mFvu8KEFJwT0nxr8RfPTVh0Q==",
+      "version": "5.59.13",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.59.13.tgz",
+      "integrity": "sha512-Oou0bBu/P8+oYjXsJQ11j+gcpLAMpqW42UlokQYEz4dE7+hOtVO9rVuolJKgEccqzvyFzqX4/zZWY+R/v1wVsQ==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -3561,12 +3561,12 @@
       }
     },
     "node_modules/@tanstack/react-query": {
-      "version": "5.59.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.59.0.tgz",
-      "integrity": "sha512-YDXp3OORbYR+8HNQx+lf4F73NoiCmCcSvZvgxE29OifmQFk0sBlO26NWLHpcNERo92tVk3w+JQ53/vkcRUY1hA==",
+      "version": "5.59.14",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.59.14.tgz",
+      "integrity": "sha512-2cM4x3Ka4Thl7/wnjf++EMGA2Is/RgPynn83D4kfGiJOGSjb5T2D3EEOlC8Nt6U2htLS3imOXjOSMEjC3K7JNg==",
       "license": "MIT",
       "dependencies": {
-        "@tanstack/query-core": "5.59.0"
+        "@tanstack/query-core": "5.59.13"
       },
       "funding": {
         "type": "github",
@@ -3832,9 +3832,9 @@
       "license": "MIT"
     },
     "node_modules/@types/d3-selection": {
-      "version": "3.0.10",
-      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.10.tgz",
-      "integrity": "sha512-cuHoUgS/V3hLdjJOLTT691+G2QoqAjCVLmr4kJXR4ha56w1Zdu8UUQ5TxLRqudgNjwXeQxKMq4j+lyf9sWuslg==",
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
       "dev": true,
       "license": "MIT"
     },
@@ -3869,9 +3869,9 @@
       "license": "MIT"
     },
     "node_modules/@types/d3-transition": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.8.tgz",
-      "integrity": "sha512-ew63aJfQ/ms7QQ4X7pk5NxQ9fZH/z+i24ZfJ6tJSfqxJMrYLiK01EAs2/Rtw/JreGUsS3pLPNV644qXFGnoZNQ==",
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+      "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3903,12 +3903,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/js-cookie": {
-      "version": "2.2.7",
-      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
-      "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==",
-      "license": "MIT"
-    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -3939,9 +3933,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "22.7.4",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.4.tgz",
-      "integrity": "sha512-y+NPi1rFzDs1NdQHHToqeiX2TIS79SWEAw9GYhkkx8bD0ChpfqC+n2j5OXOCpzfojBEBt6DnEnnG9MY0zk1XLg==",
+      "version": "22.7.6",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.6.tgz",
+      "integrity": "sha512-/d7Rnj0/ExXDMcioS78/kf1lMzYk4BZV8MZGTBKzTGZ6/406ukkbYlIsZmMPhcR5KlkunDHQLrtAVmSq7r+mSw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3988,9 +3982,9 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.3.0",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
-      "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -4008,17 +4002,17 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.8.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.8.0.tgz",
-      "integrity": "sha512-wORFWjU30B2WJ/aXBfOm1LX9v9nyt9D3jsSOxC3cCaTQGCW5k4jNpmjFv3U7p/7s4yvdjHzwtv2Sd2dOyhjS0A==",
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.9.0.tgz",
+      "integrity": "sha512-Y1n621OCy4m7/vTXNlCbMVp87zSd7NH0L9cXD8aIpOaNlzeWxIK4+Q19A68gSmTNRZn92UjocVUWDthGxtqHFg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.8.0",
-        "@typescript-eslint/type-utils": "8.8.0",
-        "@typescript-eslint/utils": "8.8.0",
-        "@typescript-eslint/visitor-keys": "8.8.0",
+        "@typescript-eslint/scope-manager": "8.9.0",
+        "@typescript-eslint/type-utils": "8.9.0",
+        "@typescript-eslint/utils": "8.9.0",
+        "@typescript-eslint/visitor-keys": "8.9.0",
         "graphemer": "^1.4.0",
         "ignore": "^5.3.1",
         "natural-compare": "^1.4.0",
@@ -4042,16 +4036,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.8.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.8.0.tgz",
-      "integrity": "sha512-uEFUsgR+tl8GmzmLjRqz+VrDv4eoaMqMXW7ruXfgThaAShO9JTciKpEsB+TvnfFfbg5IpujgMXVV36gOJRLtZg==",
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.9.0.tgz",
+      "integrity": "sha512-U+BLn2rqTTHnc4FL3FJjxaXptTxmf9sNftJK62XLz4+GxG3hLHm/SUNaaXP5Y4uTiuYoL5YLy4JBCJe3+t8awQ==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.8.0",
-        "@typescript-eslint/types": "8.8.0",
-        "@typescript-eslint/typescript-estree": "8.8.0",
-        "@typescript-eslint/visitor-keys": "8.8.0",
+        "@typescript-eslint/scope-manager": "8.9.0",
+        "@typescript-eslint/types": "8.9.0",
+        "@typescript-eslint/typescript-estree": "8.9.0",
+        "@typescript-eslint/visitor-keys": "8.9.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -4071,14 +4065,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.8.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.8.0.tgz",
-      "integrity": "sha512-EL8eaGC6gx3jDd8GwEFEV091210U97J0jeEHrAYvIYosmEGet4wJ+g0SYmLu+oRiAwbSA5AVrt6DxLHfdd+bUg==",
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.9.0.tgz",
+      "integrity": "sha512-bZu9bUud9ym1cabmOYH9S6TnbWRzpklVmwqICeOulTCZ9ue2/pczWzQvt/cGj2r2o1RdKoZbuEMalJJSYw3pHQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.8.0",
-        "@typescript-eslint/visitor-keys": "8.8.0"
+        "@typescript-eslint/types": "8.9.0",
+        "@typescript-eslint/visitor-keys": "8.9.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -4089,14 +4083,14 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.8.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.8.0.tgz",
-      "integrity": "sha512-IKwJSS7bCqyCeG4NVGxnOP6lLT9Okc3Zj8hLO96bpMkJab+10HIfJbMouLrlpyOr3yrQ1cA413YPFiGd1mW9/Q==",
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.9.0.tgz",
+      "integrity": "sha512-JD+/pCqlKqAk5961vxCluK+clkppHY07IbV3vett97KOV+8C6l+CPEPwpUuiMwgbOz/qrN3Ke4zzjqbT+ls+1Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "8.8.0",
-        "@typescript-eslint/utils": "8.8.0",
+        "@typescript-eslint/typescript-estree": "8.9.0",
+        "@typescript-eslint/utils": "8.9.0",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.3.0"
       },
@@ -4114,9 +4108,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.8.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.8.0.tgz",
-      "integrity": "sha512-QJwc50hRCgBd/k12sTykOJbESe1RrzmX6COk8Y525C9l7oweZ+1lw9JiU56im7Amm8swlz00DRIlxMYLizr2Vw==",
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.9.0.tgz",
+      "integrity": "sha512-SjgkvdYyt1FAPhU9c6FiYCXrldwYYlIQLkuc+LfAhCna6ggp96ACncdtlbn8FmnG72tUkXclrDExOpEYf1nfJQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -4128,14 +4122,14 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.8.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.8.0.tgz",
-      "integrity": "sha512-ZaMJwc/0ckLz5DaAZ+pNLmHv8AMVGtfWxZe/x2JVEkD5LnmhWiQMMcYT7IY7gkdJuzJ9P14fRy28lUrlDSWYdw==",
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.9.0.tgz",
+      "integrity": "sha512-9iJYTgKLDG6+iqegehc5+EqE6sqaee7kb8vWpmHZ86EqwDjmlqNNHeqDVqb9duh+BY6WCNHfIGvuVU3Tf9Db0g==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
-        "@typescript-eslint/types": "8.8.0",
-        "@typescript-eslint/visitor-keys": "8.8.0",
+        "@typescript-eslint/types": "8.9.0",
+        "@typescript-eslint/visitor-keys": "8.9.0",
         "debug": "^4.3.4",
         "fast-glob": "^3.3.2",
         "is-glob": "^4.0.3",
@@ -4196,16 +4190,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.8.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.8.0.tgz",
-      "integrity": "sha512-QE2MgfOTem00qrlPgyByaCHay9yb1+9BjnMFnSFkUKQfu7adBXDTnCAivURnuPPAG/qiB+kzKkZKmKfaMT0zVg==",
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.9.0.tgz",
+      "integrity": "sha512-PKgMmaSo/Yg/F7kIZvrgrWa1+Vwn036CdNUvYFEkYbPwOH4i8xvkaRlu148W3vtheWK9ckKRIz7PBP5oUlkrvQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "8.8.0",
-        "@typescript-eslint/types": "8.8.0",
-        "@typescript-eslint/typescript-estree": "8.8.0"
+        "@typescript-eslint/scope-manager": "8.9.0",
+        "@typescript-eslint/types": "8.9.0",
+        "@typescript-eslint/typescript-estree": "8.9.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -4219,13 +4213,13 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.8.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.8.0.tgz",
-      "integrity": "sha512-8mq51Lx6Hpmd7HnA2fcHQo3YgfX1qbccxQOgZcb4tvasu//zXRaA1j5ZRFeCw/VRAdFi4mRM9DnZw0Nu0Q2d1g==",
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.9.0.tgz",
+      "integrity": "sha512-Ht4y38ubk4L5/U8xKUBfKNYGmvKvA1CANoxiTRMM+tOLk3lbF3DvzZCxJCRSE+2GdCMSh6zq9VZJc3asc1XuAA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.8.0",
+        "@typescript-eslint/types": "8.9.0",
         "eslint-visitor-keys": "^3.4.3"
       },
       "engines": {
@@ -4263,9 +4257,9 @@
       }
     },
     "node_modules/@vitest/coverage-v8": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-2.1.2.tgz",
-      "integrity": "sha512-b7kHrFrs2urS0cOk5N10lttI8UdJ/yP3nB4JYTREvR5o18cR99yPpK4gK8oQgI42BVv0ILWYUSYB7AXkAUDc0g==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-2.1.3.tgz",
+      "integrity": "sha512-2OJ3c7UPoFSmBZwqD2VEkUw6A/tzPF0LmW0ZZhhB8PFxuc+9IBG/FaSM+RLEenc7ljzFvGN+G0nGQoZnh7sy2A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4286,8 +4280,8 @@
         "url": "https://opencollective.com/vitest"
       },
       "peerDependencies": {
-        "@vitest/browser": "2.1.2",
-        "vitest": "2.1.2"
+        "@vitest/browser": "2.1.3",
+        "vitest": "2.1.3"
       },
       "peerDependenciesMeta": {
         "@vitest/browser": {
@@ -4296,14 +4290,14 @@
       }
     },
     "node_modules/@vitest/expect": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.1.2.tgz",
-      "integrity": "sha512-FEgtlN8mIUSEAAnlvn7mP8vzaWhEaAEvhSXCqrsijM7K6QqjB11qoRZYEd4AKSCDz8p0/+yH5LzhZ47qt+EyPg==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.1.3.tgz",
+      "integrity": "sha512-SNBoPubeCJhZ48agjXruCI57DvxcsivVDdWz+SSsmjTT4QN/DfHk3zB/xKsJqMs26bLZ/pNRLnCf0j679i0uWQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/spy": "2.1.2",
-        "@vitest/utils": "2.1.2",
+        "@vitest/spy": "2.1.3",
+        "@vitest/utils": "2.1.3",
         "chai": "^5.1.1",
         "tinyrainbow": "^1.2.0"
       },
@@ -4312,13 +4306,13 @@
       }
     },
     "node_modules/@vitest/mocker": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-2.1.2.tgz",
-      "integrity": "sha512-ExElkCGMS13JAJy+812fw1aCv2QO/LBK6CyO4WOPAzLTmve50gydOlWhgdBJPx2ztbADUq3JVI0C5U+bShaeEA==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-2.1.3.tgz",
+      "integrity": "sha512-eSpdY/eJDuOvuTA3ASzCjdithHa+GIF1L4PqtEELl6Qa3XafdMLBpBlZCIUCX2J+Q6sNmjmxtosAG62fK4BlqQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/spy": "^2.1.0-beta.1",
+        "@vitest/spy": "2.1.3",
         "estree-walker": "^3.0.3",
         "magic-string": "^0.30.11"
       },
@@ -4326,7 +4320,7 @@
         "url": "https://opencollective.com/vitest"
       },
       "peerDependencies": {
-        "@vitest/spy": "2.1.2",
+        "@vitest/spy": "2.1.3",
         "msw": "^2.3.5",
         "vite": "^5.0.0"
       },
@@ -4340,9 +4334,9 @@
       }
     },
     "node_modules/@vitest/pretty-format": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.2.tgz",
-      "integrity": "sha512-FIoglbHrSUlOJPDGIrh2bjX1sNars5HbxlcsFKCtKzu4+5lpsRhOCVcuzp0fEhAGHkPZRIXVNzPcpSlkoZ3LuA==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.3.tgz",
+      "integrity": "sha512-XH1XdtoLZCpqV59KRbPrIhFCOO0hErxrQCMcvnQete3Vibb9UeIOX02uFPfVn3Z9ZXsq78etlfyhnkmIZSzIwQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4353,13 +4347,13 @@
       }
     },
     "node_modules/@vitest/runner": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.1.2.tgz",
-      "integrity": "sha512-UCsPtvluHO3u7jdoONGjOSil+uON5SSvU9buQh3lP7GgUXHp78guN1wRmZDX4wGK6J10f9NUtP6pO+SFquoMlw==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.1.3.tgz",
+      "integrity": "sha512-JGzpWqmFJ4fq5ZKHtVO3Xuy1iF2rHGV4d/pdzgkYHm1+gOzNZtqjvyiaDGJytRyMU54qkxpNzCx+PErzJ1/JqQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/utils": "2.1.2",
+        "@vitest/utils": "2.1.3",
         "pathe": "^1.1.2"
       },
       "funding": {
@@ -4367,13 +4361,13 @@
       }
     },
     "node_modules/@vitest/snapshot": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.1.2.tgz",
-      "integrity": "sha512-xtAeNsZ++aRIYIUsek7VHzry/9AcxeULlegBvsdLncLmNCR6tR8SRjn8BbDP4naxtccvzTqZ+L1ltZlRCfBZFA==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.1.3.tgz",
+      "integrity": "sha512-qWC2mWc7VAXmjAkEKxrScWHWFyCQx/cmiZtuGqMi+WwqQJ2iURsVY4ZfAK6dVo6K2smKRU6l3BPwqEBvhnpQGg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "2.1.2",
+        "@vitest/pretty-format": "2.1.3",
         "magic-string": "^0.30.11",
         "pathe": "^1.1.2"
       },
@@ -4382,9 +4376,9 @@
       }
     },
     "node_modules/@vitest/spy": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.1.2.tgz",
-      "integrity": "sha512-GSUi5zoy+abNRJwmFhBDC0yRuVUn8WMlQscvnbbXdKLXX9dE59YbfwXxuJ/mth6eeqIzofU8BB5XDo/Ns/qK2A==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.1.3.tgz",
+      "integrity": "sha512-Nb2UzbcUswzeSP7JksMDaqsI43Sj5+Kry6ry6jQJT4b5gAK+NS9NED6mDb8FlMRCX8m5guaHCDZmqYMMWRy5nQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4395,13 +4389,13 @@
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.2.tgz",
-      "integrity": "sha512-zMO2KdYy6mx56btx9JvAqAZ6EyS3g49krMPPrgOp1yxGZiA93HumGk+bZ5jIZtOg5/VBYl5eBmGRQHqq4FG6uQ==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.3.tgz",
+      "integrity": "sha512-xpiVfDSg1RrYT0tX6czgerkpcKFmFOF/gCr30+Mve5V2kewCy4Prn1/NDMSRwaSmT7PRaOF83wu+bEtsY1wrvA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "2.1.2",
+        "@vitest/pretty-format": "2.1.3",
         "loupe": "^3.1.1",
         "tinyrainbow": "^1.2.0"
       },
@@ -4409,12 +4403,6 @@
         "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/@xobotyi/scrollbar-width": {
-      "version": "1.9.5",
-      "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz",
-      "integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==",
-      "license": "MIT"
-    },
     "node_modules/@zeit/schemas": {
       "version": "2.36.0",
       "resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.36.0.tgz",
@@ -4815,9 +4803,9 @@
       "license": "MIT"
     },
     "node_modules/attr-accept": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
-      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==",
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.4.tgz",
+      "integrity": "sha512-2pA6xFIbdTUDCAwjN8nQwI+842VwzbDUXO2IYlpPXQIORgKnavorcr4Ce3rwh+zsNg9zK7QPsdvDj3Lum4WX4w==",
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -5097,9 +5085,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001667",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001667.tgz",
-      "integrity": "sha512-7LTwJjcRkzKFmtqGsibMeuXmvFDfZq/nzIjnmgCGzKKRVzjD72selLDK1oPF/Oxzmt4fNcPvTDvGqSDG4tCALw==",
+      "version": "1.0.30001668",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001668.tgz",
+      "integrity": "sha512-nWLrdxqCdblixUO+27JtGJJE/txpJlyUy5YN1u53wLZkP0emYCo5zgS6QYft7VUYR42LGgi/S5hdLZTrnyIddw==",
       "dev": true,
       "funding": [
         {
@@ -5228,9 +5216,9 @@
       }
     },
     "node_modules/chemical-elements": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/chemical-elements/-/chemical-elements-2.1.1.tgz",
-      "integrity": "sha512-ElkhZNOdCKLx773wFRuEkl6RbITbafFvOtTNsqf7/YkhWniHEHs9iZ4Bq3e/Y0C+x3VjPWFu0SHkgMEWc2CrMg==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/chemical-elements/-/chemical-elements-2.1.2.tgz",
+      "integrity": "sha512-deZ3gHqyXIC2/+3tEeU0IHqOwmneSEbMvTgNTCc5DEIv6PKw1E48rKGC6itNsu044Lv7k8tgggs+8u0ME9pm0Q==",
       "license": "MIT"
     },
     "node_modules/chemical-groups": {
@@ -5240,9 +5228,9 @@
       "license": "MIT"
     },
     "node_modules/cheminfo-font": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/cheminfo-font/-/cheminfo-font-1.13.0.tgz",
-      "integrity": "sha512-NreebXSQ97VyI4xvRXvriAh9lHEBUBO1/yzqcmGhunBDQv4lcTYNolIxuR74EXjt2OnBTKz7qZ5rpS0d0RAcOw==",
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/cheminfo-font/-/cheminfo-font-1.13.1.tgz",
+      "integrity": "sha512-FIT5ybXaNolIAl8V64a3YQWZ28YaJgRz93ApBloI6NDIA5kGifTma822/bSDA/ABSwqOJAWwr/cMipIZxMjE/g==",
       "license": "CC-BY-4.0"
     },
     "node_modules/cheminfo-types": {
@@ -5517,15 +5505,6 @@
         "ml-spectra-processing": "^14.2.2"
       }
     },
-    "node_modules/copy-to-clipboard": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
-      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
-      "license": "MIT",
-      "dependencies": {
-        "toggle-selection": "^1.0.6"
-      }
-    },
     "node_modules/core-js-compat": {
       "version": "3.38.1",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.38.1.tgz",
@@ -5597,31 +5576,30 @@
       }
     },
     "node_modules/cspell": {
-      "version": "8.14.4",
-      "resolved": "https://registry.npmjs.org/cspell/-/cspell-8.14.4.tgz",
-      "integrity": "sha512-R5Awb3i/RKaVVcZzFt8dkN3M6VnifIEDYBcbzbmYjZ/Eq+ASF+QTmI0E9WPhMEcFM1nd7YOyXnETo560yRdoKw==",
+      "version": "8.15.3",
+      "resolved": "https://registry.npmjs.org/cspell/-/cspell-8.15.3.tgz",
+      "integrity": "sha512-diJiVBMunG3m7dYJpelSTsO4biLxVZ3glzLJF9jVs8n86dph04A9NXf29DKeAR0py62CFBKOrB1R4VGhxDxStg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@cspell/cspell-json-reporter": "8.14.4",
-        "@cspell/cspell-pipe": "8.14.4",
-        "@cspell/cspell-types": "8.14.4",
-        "@cspell/dynamic-import": "8.14.4",
-        "@cspell/url": "8.14.4",
+        "@cspell/cspell-json-reporter": "8.15.3",
+        "@cspell/cspell-pipe": "8.15.3",
+        "@cspell/cspell-types": "8.15.3",
+        "@cspell/dynamic-import": "8.15.3",
+        "@cspell/url": "8.15.3",
         "chalk": "^5.3.0",
         "chalk-template": "^1.1.0",
         "commander": "^12.1.0",
-        "cspell-dictionary": "8.14.4",
-        "cspell-gitignore": "8.14.4",
-        "cspell-glob": "8.14.4",
-        "cspell-io": "8.14.4",
-        "cspell-lib": "8.14.4",
-        "fast-glob": "^3.3.2",
+        "cspell-dictionary": "8.15.3",
+        "cspell-gitignore": "8.15.3",
+        "cspell-glob": "8.15.3",
+        "cspell-io": "8.15.3",
+        "cspell-lib": "8.15.3",
         "fast-json-stable-stringify": "^2.1.0",
         "file-entry-cache": "^9.1.0",
         "get-stdin": "^9.0.0",
         "semver": "^7.6.3",
-        "strip-ansi": "^7.1.0"
+        "tinyglobby": "^0.2.9"
       },
       "bin": {
         "cspell": "bin.mjs",
@@ -5635,24 +5613,24 @@
       }
     },
     "node_modules/cspell-config-lib": {
-      "version": "8.14.4",
-      "resolved": "https://registry.npmjs.org/cspell-config-lib/-/cspell-config-lib-8.14.4.tgz",
-      "integrity": "sha512-cnUeJfniTiebqCaQmIUnbSrPrTH7xzKRQjJDHAEV0WYnOG2MhRXI13OzytdFdhkVBdStmgTzTCJKE7x+kmU2NA==",
+      "version": "8.15.3",
+      "resolved": "https://registry.npmjs.org/cspell-config-lib/-/cspell-config-lib-8.15.3.tgz",
+      "integrity": "sha512-IMIvZ/2fzl628obiFhcgNsorcS4pimAgDi9M0k9GDA/zbLeweWZqjmSEN9tgUPvkRznQvJd0TZXJ0B5RkM5+2Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@cspell/cspell-types": "8.14.4",
+        "@cspell/cspell-types": "8.15.3",
         "comment-json": "^4.2.5",
-        "yaml": "^2.5.1"
+        "yaml": "^2.6.0"
       },
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/cspell-config-lib/node_modules/yaml": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.1.tgz",
-      "integrity": "sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.0.tgz",
+      "integrity": "sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -5663,15 +5641,15 @@
       }
     },
     "node_modules/cspell-dictionary": {
-      "version": "8.14.4",
-      "resolved": "https://registry.npmjs.org/cspell-dictionary/-/cspell-dictionary-8.14.4.tgz",
-      "integrity": "sha512-pZvQHxpAW5fZAnt3ZKKy3s7M+3CX2t8tCS3uJrpEHIynlCawpG0fPF78rVE5o+g0dON36Lguc/BUuSN4IWKLmQ==",
+      "version": "8.15.3",
+      "resolved": "https://registry.npmjs.org/cspell-dictionary/-/cspell-dictionary-8.15.3.tgz",
+      "integrity": "sha512-FwYpDou0oyHmfjz70juVvIskZo1/+Xzq4s6eX2ZjUNQSp/jaykWNOiqIw5eVx0Z3sq3cWzCJ9zUuHcXxvFi7EQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@cspell/cspell-pipe": "8.14.4",
-        "@cspell/cspell-types": "8.14.4",
-        "cspell-trie-lib": "8.14.4",
+        "@cspell/cspell-pipe": "8.15.3",
+        "@cspell/cspell-types": "8.15.3",
+        "cspell-trie-lib": "8.15.3",
         "fast-equals": "^5.0.1"
       },
       "engines": {
@@ -5679,15 +5657,15 @@
       }
     },
     "node_modules/cspell-gitignore": {
-      "version": "8.14.4",
-      "resolved": "https://registry.npmjs.org/cspell-gitignore/-/cspell-gitignore-8.14.4.tgz",
-      "integrity": "sha512-RwfQEW5hD7CpYwS7m3b0ONG0nTLKP6bL2tvMdl7qtaYkL7ztGdsBTtLD1pmwqUsCbiN5RuaOxhYOYeRcpFRIkQ==",
+      "version": "8.15.3",
+      "resolved": "https://registry.npmjs.org/cspell-gitignore/-/cspell-gitignore-8.15.3.tgz",
+      "integrity": "sha512-h1O9y3F81e8RyDE87Bv7m6Faz4FjkUhr72QqakbGuhRsjembST5YEw1B5Okc4BSUQhRER+dEh4xLp90EmNzZuw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@cspell/url": "8.14.4",
-        "cspell-glob": "8.14.4",
-        "cspell-io": "8.14.4",
+        "@cspell/url": "8.15.3",
+        "cspell-glob": "8.15.3",
+        "cspell-io": "8.15.3",
         "find-up-simple": "^1.0.0"
       },
       "bin": {
@@ -5698,13 +5676,13 @@
       }
     },
     "node_modules/cspell-glob": {
-      "version": "8.14.4",
-      "resolved": "https://registry.npmjs.org/cspell-glob/-/cspell-glob-8.14.4.tgz",
-      "integrity": "sha512-C/xTS5nujMRMuguibq92qMVP767mtxrur7DcVolCvpzcivm1RB5NtIN0OctQxTyMbnmKeQv1t4epRKQ9A8vWRg==",
+      "version": "8.15.3",
+      "resolved": "https://registry.npmjs.org/cspell-glob/-/cspell-glob-8.15.3.tgz",
+      "integrity": "sha512-nsxe1PCFZyOHxVeo3Bqi2MyVy2JASF9p1xSCZAFjiVjeRmeqDrS098UcoucXRDFScJ2RP8A62niC6P3m6qg5IA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@cspell/url": "8.14.4",
+        "@cspell/url": "8.15.3",
         "micromatch": "^4.0.8"
       },
       "engines": {
@@ -5712,14 +5690,14 @@
       }
     },
     "node_modules/cspell-grammar": {
-      "version": "8.14.4",
-      "resolved": "https://registry.npmjs.org/cspell-grammar/-/cspell-grammar-8.14.4.tgz",
-      "integrity": "sha512-yaSKAAJDiamsw3FChbw4HXb2RvTQrDsLelh1+T4MavarOIcAxXrqAJ8ysqm++g+S/ooJz2YO8YWIyzJKxcMf8g==",
+      "version": "8.15.3",
+      "resolved": "https://registry.npmjs.org/cspell-grammar/-/cspell-grammar-8.15.3.tgz",
+      "integrity": "sha512-HCtGzym6JsdrYjwGySxKFsLjvASAgftv7nEOTBFp/u3Y2zVPmoQaFmmlSWBbJRsNQa9elL0DyQOSC7WC6GbGSQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@cspell/cspell-pipe": "8.14.4",
-        "@cspell/cspell-types": "8.14.4"
+        "@cspell/cspell-pipe": "8.15.3",
+        "@cspell/cspell-types": "8.15.3"
       },
       "bin": {
         "cspell-grammar": "bin.mjs"
@@ -5729,42 +5707,42 @@
       }
     },
     "node_modules/cspell-io": {
-      "version": "8.14.4",
-      "resolved": "https://registry.npmjs.org/cspell-io/-/cspell-io-8.14.4.tgz",
-      "integrity": "sha512-o6OTWRyx/Az+PFhr1B0wMAwqG070hFC9g73Fkxd8+rHX0rfRS69QZH7LgSmZytqbZIMxCTDGdsLl33MFGWCbZQ==",
+      "version": "8.15.3",
+      "resolved": "https://registry.npmjs.org/cspell-io/-/cspell-io-8.15.3.tgz",
+      "integrity": "sha512-ycKrfTSurfleQNR5x7QRmQ/qtMJ6JkBiqaq5qtCHNYUlOjrmQBNVXFpbmPJ3+qG+ObW+eQKEvZH5xr17F2BMjw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@cspell/cspell-service-bus": "8.14.4",
-        "@cspell/url": "8.14.4"
+        "@cspell/cspell-service-bus": "8.15.3",
+        "@cspell/url": "8.15.3"
       },
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/cspell-lib": {
-      "version": "8.14.4",
-      "resolved": "https://registry.npmjs.org/cspell-lib/-/cspell-lib-8.14.4.tgz",
-      "integrity": "sha512-qdkUkKtm+nmgpA4jQbmQTuepDfjHBDWvs3zDuEwVIVFq/h8gnXrRr75gJ3RYdTy+vOOqHPoLLqgxyqkUUrUGXA==",
+      "version": "8.15.3",
+      "resolved": "https://registry.npmjs.org/cspell-lib/-/cspell-lib-8.15.3.tgz",
+      "integrity": "sha512-LJIEZ3E8ZCOAqcMwkonXH3NEa6ITTlp3nZ9nhmxHE0GbMUYP5/CmTCWSnJUjrINmhjl5dMj6Z7xzDTgEAu0K9Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@cspell/cspell-bundled-dicts": "8.14.4",
-        "@cspell/cspell-pipe": "8.14.4",
-        "@cspell/cspell-resolver": "8.14.4",
-        "@cspell/cspell-types": "8.14.4",
-        "@cspell/dynamic-import": "8.14.4",
-        "@cspell/filetypes": "8.14.4",
-        "@cspell/strong-weak-map": "8.14.4",
-        "@cspell/url": "8.14.4",
+        "@cspell/cspell-bundled-dicts": "8.15.3",
+        "@cspell/cspell-pipe": "8.15.3",
+        "@cspell/cspell-resolver": "8.15.3",
+        "@cspell/cspell-types": "8.15.3",
+        "@cspell/dynamic-import": "8.15.3",
+        "@cspell/filetypes": "8.15.3",
+        "@cspell/strong-weak-map": "8.15.3",
+        "@cspell/url": "8.15.3",
         "clear-module": "^4.1.2",
         "comment-json": "^4.2.5",
-        "cspell-config-lib": "8.14.4",
-        "cspell-dictionary": "8.14.4",
-        "cspell-glob": "8.14.4",
-        "cspell-grammar": "8.14.4",
-        "cspell-io": "8.14.4",
-        "cspell-trie-lib": "8.14.4",
+        "cspell-config-lib": "8.15.3",
+        "cspell-dictionary": "8.15.3",
+        "cspell-glob": "8.15.3",
+        "cspell-grammar": "8.15.3",
+        "cspell-io": "8.15.3",
+        "cspell-trie-lib": "8.15.3",
         "env-paths": "^3.0.0",
         "fast-equals": "^5.0.1",
         "gensequence": "^7.0.0",
@@ -5779,14 +5757,14 @@
       }
     },
     "node_modules/cspell-trie-lib": {
-      "version": "8.14.4",
-      "resolved": "https://registry.npmjs.org/cspell-trie-lib/-/cspell-trie-lib-8.14.4.tgz",
-      "integrity": "sha512-zu8EJ33CH+FA5lwTRGqS//Q6phO0qtgEmODMR1KPlD7WlrfTFMb3bWFsLo/tiv5hjpsn7CM6dYDAAgBOSkoyhQ==",
+      "version": "8.15.3",
+      "resolved": "https://registry.npmjs.org/cspell-trie-lib/-/cspell-trie-lib-8.15.3.tgz",
+      "integrity": "sha512-sJwGFE3ymkL6UsnZbMOGcD+iDOdYo7gyVafMDUJvb4rnKqAhLJumiCPT4bPLQ7oWAti7swHBQrOJ/Wp3phQ+LQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@cspell/cspell-pipe": "8.14.4",
-        "@cspell/cspell-types": "8.14.4",
+        "@cspell/cspell-pipe": "8.15.3",
+        "@cspell/cspell-types": "8.15.3",
         "gensequence": "^7.0.0"
       },
       "engines": {
@@ -5820,46 +5798,15 @@
       }
     },
     "node_modules/css-functions-list": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.2.tgz",
-      "integrity": "sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==",
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.3.tgz",
+      "integrity": "sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==",
       "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12 || >=16"
       }
     },
-    "node_modules/css-in-js-utils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz",
-      "integrity": "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==",
-      "license": "MIT",
-      "dependencies": {
-        "hyphenate-style-name": "^1.0.3"
-      }
-    },
-    "node_modules/css-tree": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
-      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
-      "license": "MIT",
-      "dependencies": {
-        "mdn-data": "2.0.14",
-        "source-map": "^0.6.1"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/css-tree/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -6504,34 +6451,34 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.32",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.32.tgz",
-      "integrity": "sha512-M+7ph0VGBQqqpTT2YrabjNKSQ2fEl9PVx6AK3N558gDH9NO8O6XN9SXXFWRo9u9PbEg/bWq+tjXQr+eXmxubCw==",
+      "version": "1.5.38",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.38.tgz",
+      "integrity": "sha512-VbeVexmZ1IFh+5EfrYz1I0HTzHVIlJa112UEWhciPyeOcKJGeTv6N8WnG4wsQB81DGCaVEGhpSb6o6a8WYFXXg==",
       "dev": true,
       "license": "ISC"
     },
     "node_modules/emdb": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/emdb/-/emdb-3.3.7.tgz",
-      "integrity": "sha512-gGqGl9Hi8/MUFHeMh4RrDMU4wZvls0htNsZnfffSpVm/UcVeMUynP4fQ1CDTn4Lhx0zepq7Ml1gXnmGDeZiL6w==",
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/emdb/-/emdb-3.3.8.tgz",
+      "integrity": "sha512-Mf/rzM6LQ1lRBbhPIGCHw46KilyY+e9HmYp4FYAGFMd5o6diHpyFzfqImSi5LKzYQXVc3LQiK4Meg34GKux4iw==",
       "license": "MIT",
       "dependencies": {
-        "chemical-elements": "^2.1.1",
+        "chemical-elements": "^2.1.2",
         "chemical-groups": "^2.2.1",
-        "isotopic-distribution": "^3.3.2",
+        "isotopic-distribution": "^3.3.3",
         "jszip": "^3.10.1",
-        "mass-fragmentation": "^1.10.4",
-        "mf-finder": "^3.4.4",
-        "mf-from-google-sheet": "^3.1.4",
-        "mf-generator": "^3.3.4",
-        "mf-matcher": "^3.2.4",
-        "mf-parser": "^3.2.4",
-        "mf-utilities": "^3.2.4",
+        "mass-fragmentation": "^1.10.5",
+        "mf-finder": "^3.4.5",
+        "mf-from-google-sheet": "^3.1.5",
+        "mf-generator": "^3.3.5",
+        "mf-matcher": "^3.2.5",
+        "mf-parser": "^3.2.5",
+        "mf-utilities": "^3.2.5",
         "ml-regression-theil-sen": "^3.0.0",
-        "ml-spectra-processing": "^14.5.1",
-        "ms-spectrum": "^3.6.7",
-        "nucleotide": "^3.1.5",
-        "openchemlib-utils": "^6.3.0",
+        "ml-spectra-processing": "^14.6.0",
+        "ms-spectrum": "^3.6.8",
+        "nucleotide": "^3.1.6",
+        "openchemlib-utils": "^6.4.1",
         "peaks-similarity": "^3.1.1",
         "peptide": "^2.2.2"
       }
@@ -6575,15 +6522,6 @@
         "is-arrayish": "^0.2.1"
       }
     },
-    "node_modules/error-stack-parser": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
-      "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==",
-      "license": "MIT",
-      "dependencies": {
-        "stackframe": "^1.3.4"
-      }
-    },
     "node_modules/es-abstract": {
       "version": "1.23.3",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
@@ -6669,9 +6607,9 @@
       }
     },
     "node_modules/es-iterator-helpers": {
-      "version": "1.0.19",
-      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.19.tgz",
-      "integrity": "sha512-zoMwbCcH5hwUkKJkT8kDIBZSz9I6mVG//+lDCinLCGov4+r7NIy0ld8o03M0cJxl2spVf6ESYVS6/gpIfq1FFw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.1.0.tgz",
+      "integrity": "sha512-/SurEfycdyssORP/E+bj4sEu1CWw4EmLDsHynHwSXQ7utgbrMRWW195pTrCjFgFCddf/UkYm3oqKPRq5i8bJbw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6682,12 +6620,12 @@
         "es-set-tostringtag": "^2.0.3",
         "function-bind": "^1.1.2",
         "get-intrinsic": "^1.2.4",
-        "globalthis": "^1.0.3",
+        "globalthis": "^1.0.4",
         "has-property-descriptors": "^1.0.2",
         "has-proto": "^1.0.3",
         "has-symbols": "^1.0.3",
         "internal-slot": "^1.0.7",
-        "iterator.prototype": "^1.1.2",
+        "iterator.prototype": "^1.1.3",
         "safe-array-concat": "^1.1.2"
       },
       "engines": {
@@ -6880,9 +6818,9 @@
       }
     },
     "node_modules/eslint-config-cheminfo": {
-      "version": "12.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-cheminfo/-/eslint-config-cheminfo-12.0.0.tgz",
-      "integrity": "sha512-8st/j4KGTWPWRcYPvih+4wALuMqmP1odSk8Tz4e/o0CUJkKrtB2OzQ9fOVvTunIbdrM8vRjRorKuGnjMUciUIw==",
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-config-cheminfo/-/eslint-config-cheminfo-12.0.1.tgz",
+      "integrity": "sha512-EpaWuIypSAuqKHy8bgo7ngVj8JpP6bifY9elMjjXoipcbENgGagjjvwS70D6CGk/Ze0GkJpKMt2coKYm7gADPw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6913,9 +6851,9 @@
       }
     },
     "node_modules/eslint-config-cheminfo-react/node_modules/globals": {
-      "version": "15.10.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-15.10.0.tgz",
-      "integrity": "sha512-tqFIbz83w4Y5TCbtgjZjApohbuh7K9BxGYFm7ifwDR240tvdb7P9x+/9VvUKlmkPoiknoJtanI8UOrqxS3a7lQ==",
+      "version": "15.11.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.11.0.tgz",
+      "integrity": "sha512-yeyNSjdbyVaWurlwCpcA6XNBrHTMIeDdj0/hnvX/OLJ9ekOXYbLsLinH/MucQyGvNnXhidTdNhTtJaffL2sMfw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -6941,9 +6879,9 @@
       }
     },
     "node_modules/eslint-config-cheminfo/node_modules/globals": {
-      "version": "15.10.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-15.10.0.tgz",
-      "integrity": "sha512-tqFIbz83w4Y5TCbtgjZjApohbuh7K9BxGYFm7ifwDR240tvdb7P9x+/9VvUKlmkPoiknoJtanI8UOrqxS3a7lQ==",
+      "version": "15.11.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.11.0.tgz",
+      "integrity": "sha512-yeyNSjdbyVaWurlwCpcA6XNBrHTMIeDdj0/hnvX/OLJ9ekOXYbLsLinH/MucQyGvNnXhidTdNhTtJaffL2sMfw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -7048,13 +6986,13 @@
       }
     },
     "node_modules/eslint-plugin-jsdoc": {
-      "version": "50.3.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-50.3.1.tgz",
-      "integrity": "sha512-SY9oUuTMr6aWoJggUS40LtMjsRzJPB5ZT7F432xZIHK3EfHF+8i48GbUBpwanrtlL9l1gILNTHK9o8gEhYLcKA==",
+      "version": "50.4.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-50.4.1.tgz",
+      "integrity": "sha512-OXIq+JJQPCLAKL473/esioFOwbXyRE5MAQ4HbZjcp3e+K3zdxt2uDpGs3FR+WezUXNStzEtTfgx15T+JFrVwBA==",
       "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
-        "@es-joy/jsdoccomment": "~0.48.0",
+        "@es-joy/jsdoccomment": "~0.49.0",
         "are-docs-informative": "^0.0.2",
         "comment-parser": "1.4.1",
         "debug": "^4.3.6",
@@ -7195,9 +7133,9 @@
       }
     },
     "node_modules/eslint-plugin-unicorn/node_modules/globals": {
-      "version": "15.10.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-15.10.0.tgz",
-      "integrity": "sha512-tqFIbz83w4Y5TCbtgjZjApohbuh7K9BxGYFm7ifwDR240tvdb7P9x+/9VvUKlmkPoiknoJtanI8UOrqxS3a7lQ==",
+      "version": "15.11.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.11.0.tgz",
+      "integrity": "sha512-yeyNSjdbyVaWurlwCpcA6XNBrHTMIeDdj0/hnvX/OLJ9ekOXYbLsLinH/MucQyGvNnXhidTdNhTtJaffL2sMfw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -7482,6 +7420,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/fast-equals": {
@@ -7538,11 +7477,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/fast-shallow-equal": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
-      "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw=="
-    },
     "node_modules/fast-uri": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.2.tgz",
@@ -7550,16 +7484,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/fast-url-parser": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/fast-url-parser/-/fast-url-parser-1.1.3.tgz",
-      "integrity": "sha512-5jOCVXADYNuRkKFzNJ0dCCewsZiYo0dz8QNYljkOpFC6r2U4OBmKtvm/Tsuh4w1YYdDqDb31a8TVhBJ2OJKdqQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "punycode": "^1.3.2"
-      }
-    },
     "node_modules/fastest-levenshtein": {
       "version": "1.0.16",
       "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
@@ -7570,12 +7494,6 @@
         "node": ">= 4.9.1"
       }
     },
-    "node_modules/fastest-stable-stringify": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz",
-      "integrity": "sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==",
-      "license": "MIT"
-    },
     "node_modules/fastq": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
@@ -7815,16 +7733,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/get-func-name": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz",
-      "integrity": "sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/get-intrinsic": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
@@ -8275,12 +8183,6 @@
         "node": ">=10.17.0"
       }
     },
-    "node_modules/hyphenate-style-name": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz",
-      "integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==",
-      "license": "BSD-3-Clause"
-    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -8403,15 +8305,6 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/inline-style-prefixer": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-7.0.1.tgz",
-      "integrity": "sha512-lhYo5qNTQp3EvSSp3sRvXMbVQTLrvGV6DycRMJ5dm2BLMiJ30wpXKdDdgX+GmJZ5uQMucwRKHamXSst3Sj/Giw==",
-      "license": "MIT",
-      "dependencies": {
-        "css-in-js-utils": "^3.1.0"
-      }
-    },
     "node_modules/install": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/install/-/install-0.13.0.tgz",
@@ -8950,14 +8843,14 @@
       }
     },
     "node_modules/isotopic-distribution": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/isotopic-distribution/-/isotopic-distribution-3.3.2.tgz",
-      "integrity": "sha512-tmQrJgWoBADxFx7cx2JhfSI+EU+cqNxmQd7MECqF/Ls3cF3DMsnPPpdUm/DdccPryWO7sKKnAgT78Z//darnyw==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/isotopic-distribution/-/isotopic-distribution-3.3.3.tgz",
+      "integrity": "sha512-ize5xogT2PtruMjhT5/n5qj+MAwc6eqIaespZf2dMfHRIojWfAaXqYb+9rKXy86plVt3YGO4xysKmVX10uOUew==",
       "license": "MIT",
       "dependencies": {
-        "chemical-elements": "^2.1.1",
-        "mf-parser": "^3.2.4",
-        "mf-utilities": "^3.2.4",
+        "chemical-elements": "^2.1.2",
+        "mf-parser": "^3.2.5",
+        "mf-utilities": "^3.2.5",
         "spectrum-generator": "^8.0.11"
       }
     },
@@ -9048,9 +8941,9 @@
       }
     },
     "node_modules/iterator.prototype": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.2.tgz",
-      "integrity": "sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.3.tgz",
+      "integrity": "sha512-FW5iMbeQ6rBGm/oKgzq2aW4KvAGpxPzYES8N4g4xNXUKpL1mclMvOe+76AcLDTvD+Ze+sOpVhgdAQEKF4L9iGQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -9059,6 +8952,9 @@
         "has-symbols": "^1.0.3",
         "reflect.getprototypeof": "^1.0.4",
         "set-function-name": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/jackspeak": {
@@ -9099,12 +8995,6 @@
         "iobuffer": "^5.3.2"
       }
     },
-    "node_modules/js-cookie": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
-      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==",
-      "license": "MIT"
-    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -9349,14 +9239,11 @@
       }
     },
     "node_modules/loupe": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.1.tgz",
-      "integrity": "sha512-edNu/8D5MKVfGVFRhFf8aAxiTM6Wumfz5XsaatSxlD3w4R1d/WEKUTydCdPGbl9K7QG/Ca3GnDV2sIKIpXRQcw==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.2.tgz",
+      "integrity": "sha512-23I4pFZHmAemUnz8WZXbYRSKYj801VDaNv9ETuMh7IrMc7VuVVSo+Z9iLE3ni30+U48iDWfi30d3twAXBYmnCg==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "get-func-name": "^2.0.1"
-      }
+      "license": "MIT"
     },
     "node_modules/lower-case": {
       "version": "2.0.2",
@@ -9379,9 +9266,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.11",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
-      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
+      "version": "0.30.12",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.12.tgz",
+      "integrity": "sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -9430,14 +9317,14 @@
       }
     },
     "node_modules/mass-fragmentation": {
-      "version": "1.10.4",
-      "resolved": "https://registry.npmjs.org/mass-fragmentation/-/mass-fragmentation-1.10.4.tgz",
-      "integrity": "sha512-6oNidwWk1qwfLfbMVSGceBxNd0GUvZAn2VeGG52mPO/oNNumt1o1y4c4cuGUQn+5veu29VfGZiaNzjJ/ltr3Tw==",
+      "version": "1.10.5",
+      "resolved": "https://registry.npmjs.org/mass-fragmentation/-/mass-fragmentation-1.10.5.tgz",
+      "integrity": "sha512-Y6ubQMTAvoLbFpeeOssue1EpHdnO5Oc/8EnGq9p2UiUU2ExEZRhW9P8OFVJoIcVAIC/Hbx8rot8uUnBRWOipqg==",
       "license": "MIT",
       "dependencies": {
-        "mf-parser": "^3.2.4",
-        "openchemlib-utils": "^6.3.0",
-        "react-tree-svg": "^1.0.0"
+        "mf-parser": "^3.2.5",
+        "openchemlib-utils": "^6.4.1",
+        "react-tree-svg": "^1.4.0"
       }
     },
     "node_modules/mathml-tag-names": {
@@ -9451,12 +9338,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/mdn-data": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
-      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
-      "license": "CC0-1.0"
-    },
     "node_modules/median-quickselect": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/median-quickselect/-/median-quickselect-1.0.1.tgz",
@@ -9494,74 +9375,74 @@
       }
     },
     "node_modules/mf-finder": {
-      "version": "3.4.4",
-      "resolved": "https://registry.npmjs.org/mf-finder/-/mf-finder-3.4.4.tgz",
-      "integrity": "sha512-cNXBCOvYtglVGkBurjByHq/93pF7oXop6xHDEekmubmHs0Z27jBED/pScNZPPi3wjSHiDyGnfkThyPtDP094RA==",
+      "version": "3.4.5",
+      "resolved": "https://registry.npmjs.org/mf-finder/-/mf-finder-3.4.5.tgz",
+      "integrity": "sha512-5iT5QsZuBrKaWjWTj9t+WTj7YAGR/GwUjTZTpzeW5rxU46t4NqMVhHQ/LJ8gvSHqreZYr+ToBMkUtma+5fUfnQ==",
       "license": "MIT",
       "dependencies": {
         "atom-sorter": "^2.1.3",
-        "chemical-elements": "^2.1.1",
-        "mf-matcher": "^3.2.4",
-        "mf-parser": "^3.2.4",
-        "mf-utilities": "^3.2.4"
+        "chemical-elements": "^2.1.2",
+        "mf-matcher": "^3.2.5",
+        "mf-parser": "^3.2.5",
+        "mf-utilities": "^3.2.5"
       }
     },
     "node_modules/mf-from-google-sheet": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/mf-from-google-sheet/-/mf-from-google-sheet-3.1.4.tgz",
-      "integrity": "sha512-jDK9HYKMlf6T3+RlIrf+aRYMfPgYAeGsN2QSuz2+sZNLHeRqZM3JNs+lZ86mxcP6D2uf05L2/KKjAQdxgKMeDw==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/mf-from-google-sheet/-/mf-from-google-sheet-3.1.5.tgz",
+      "integrity": "sha512-mUOV7aVIKt33qZ72LEevJq8Q0xl6OID5HekO9MaNYWT/43tWR7DJj1YO4ImCScv5PSiFebwVNmZ33GIwf2NNJw==",
       "license": "MIT",
       "dependencies": {
-        "mf-generator": "^3.3.4",
-        "mf-parser": "^3.2.4",
-        "mf-utilities": "^3.2.4",
+        "mf-generator": "^3.3.5",
+        "mf-parser": "^3.2.5",
+        "mf-utilities": "^3.2.5",
         "papaparse": "^5.4.1"
       }
     },
     "node_modules/mf-generator": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/mf-generator/-/mf-generator-3.3.4.tgz",
-      "integrity": "sha512-E5rfvFK3xY2R7Kd0D620HfLxOM+PgDdaVmg9U2FiNBguPTsU3sg53saz6gVMxyqD9Kig4UhtkK7/9bl1IPCN+g==",
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/mf-generator/-/mf-generator-3.3.5.tgz",
+      "integrity": "sha512-oQl3mMWg9sknsKmYrXxhWEcEprwkJshyL/Q/tKLYbnD6vBIbr2woj4ejgnluxt3KQ0E0lEALyOAt4E67/gXHMQ==",
       "license": "MIT",
       "dependencies": {
-        "chemical-elements": "^2.1.1",
-        "mf-finder": "^3.4.4",
-        "mf-matcher": "^3.2.4",
-        "mf-parser": "^3.2.4",
-        "mf-utilities": "^3.2.4",
+        "chemical-elements": "^2.1.2",
+        "mf-finder": "^3.4.5",
+        "mf-matcher": "^3.2.5",
+        "mf-parser": "^3.2.5",
+        "mf-utilities": "^3.2.5",
         "sum-object-keys": "^1.0.2"
       }
     },
     "node_modules/mf-matcher": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/mf-matcher/-/mf-matcher-3.2.4.tgz",
-      "integrity": "sha512-NI6dVpFLLSpfzpa0XGvcMBuzfAQpYQoHFv/ChmlBpAA9dDou09THlM/gPaW4yr/bKuXaAEVwyIPkU9qxvo7i8A==",
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/mf-matcher/-/mf-matcher-3.2.5.tgz",
+      "integrity": "sha512-Pv6rykKmEd/3y3HqwukGYOnOcZL4FXSEgWBro8AGTu0PbBSHjw3JwyTGT2vTxYWk4jvhod6eYpgaFDwYwbS4cQ==",
       "license": "MIT",
       "dependencies": {
-        "mf-utilities": "^3.2.4",
-        "ml-spectra-processing": "^14.5.1"
+        "mf-utilities": "^3.2.5",
+        "ml-spectra-processing": "^14.6.0"
       }
     },
     "node_modules/mf-parser": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/mf-parser/-/mf-parser-3.2.4.tgz",
-      "integrity": "sha512-KNX/NXyRXg9t5t6MBnJ+dmzeOJRDS3y0JMU3jnEWvBk7BR+hQAFPurwwlw/TkW/OauALIG1Ikok6/9U1yzxGXQ==",
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/mf-parser/-/mf-parser-3.2.5.tgz",
+      "integrity": "sha512-tAy3gpImJlAWoxeNyxynXoE9MMg+WSSgwJbHA8pyZaHd6RZRU1OK8UDP0BhvDA++LrQfSB5ITkXSdpSeMXWExg==",
       "license": "MIT",
       "dependencies": {
         "atom-sorter": "^2.1.3",
-        "chemical-elements": "^2.1.1",
+        "chemical-elements": "^2.1.2",
         "chemical-groups": "^2.2.1"
       }
     },
     "node_modules/mf-utilities": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/mf-utilities/-/mf-utilities-3.2.4.tgz",
-      "integrity": "sha512-PKraEY96LCAOlj8HmbiaQvVyoMD63bbfnJg8g15BWzEq1VixGlgFO+Q9aURYgX7l+xJKzWGkFVz8OHWewph+yw==",
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/mf-utilities/-/mf-utilities-3.2.5.tgz",
+      "integrity": "sha512-KLU+DlajpTvB6HnvNSJLWH9xUUawYR2zMMsn3pxCS0W1IWoKNFqmQ/GC7tORCss8wUZMd0H6LetnEmiwECNKkA==",
       "license": "MIT",
       "dependencies": {
-        "chemical-elements": "^2.1.1",
+        "chemical-elements": "^2.1.2",
         "chemical-groups": "^2.2.1",
-        "mf-parser": "^3.2.4"
+        "mf-parser": "^3.2.5"
       }
     },
     "node_modules/micromatch": {
@@ -9870,9 +9751,9 @@
       }
     },
     "node_modules/ml-matrix": {
-      "version": "6.11.1",
-      "resolved": "https://registry.npmjs.org/ml-matrix/-/ml-matrix-6.11.1.tgz",
-      "integrity": "sha512-Fvp1xF1O07tt6Ux9NcnEQTei5UlqbRpvvaFZGs7l3Ij+nOaEDcmbSVtxwNa8V4IfdyFI1NLNUteroMJ1S6vcEg==",
+      "version": "6.12.0",
+      "resolved": "https://registry.npmjs.org/ml-matrix/-/ml-matrix-6.12.0.tgz",
+      "integrity": "sha512-AGfR+pWaC0GmzjUnB6BfwhndPEUGz0i7QUYdqNuw1zhTov/vSRJ9pP2hs6BoGpaSbtXgrKjZz2zjD1M0xuur6A==",
       "license": "MIT",
       "dependencies": {
         "is-any-array": "^2.0.1",
@@ -9989,16 +9870,16 @@
       }
     },
     "node_modules/ml-signal-processing": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/ml-signal-processing/-/ml-signal-processing-1.0.4.tgz",
-      "integrity": "sha512-MYMyfhReCxJsbNu9pCbO7jVTQJXiDxyzm+ly1E7T2eS7dk048YLyLPxfTZFn9HDtNSTCnP7djac4Y7BRJC/JmQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ml-signal-processing/-/ml-signal-processing-1.1.1.tgz",
+      "integrity": "sha512-xFhw4DvGHu6qDIh09LmsIUAqdq/QKRp+olhZ14djiWqiz/3EMUgdKPQBpylQMkr5wBGac6O00muyEfWgu9CePg==",
       "license": "MIT",
       "dependencies": {
-        "baselines": "^1.1.7",
-        "cheminfo-types": "^1.7.2",
-        "ml-gsd": "^12.1.5",
-        "ml-savitzky-golay-generalized": "^4.0.1",
-        "ml-spectra-processing": "^14.2.0"
+        "baselines": "^1.1.9",
+        "cheminfo-types": "^1.8.0",
+        "ml-gsd": "^12.1.8",
+        "ml-savitzky-golay-generalized": "^4.2.0",
+        "ml-spectra-processing": "^14.5.3"
       }
     },
     "node_modules/ml-simple-clustering": {
@@ -10099,19 +9980,19 @@
       "license": "MIT"
     },
     "node_modules/ms-spectrum": {
-      "version": "3.6.7",
-      "resolved": "https://registry.npmjs.org/ms-spectrum/-/ms-spectrum-3.6.7.tgz",
-      "integrity": "sha512-BtRXC76Xrb7h7jrhdpzIRO2YiFw9IlGPxUg3L390/20LLuA6PT8RBoeB+b+O59MzvzgE4Tc+IZi5/DdmVvChaA==",
+      "version": "3.6.8",
+      "resolved": "https://registry.npmjs.org/ms-spectrum/-/ms-spectrum-3.6.8.tgz",
+      "integrity": "sha512-0UdezGLNO0uI5Bm9kDetF+LG/H+vbVY0moz58yh+5D3neW8jzl0IJZ3Q5WPYS9KqOfn3pMXL9meC6y8Oe8t1dg==",
       "license": "MIT",
       "dependencies": {
-        "cheminfo-types": "^1.7.3",
-        "emdb": "^3.3.7",
+        "cheminfo-types": "^1.8.0",
+        "emdb": "^3.3.8",
         "is-any-array": "^2.0.1",
-        "mf-parser": "^3.2.4",
-        "mf-utilities": "^3.2.4",
-        "ml-gsd": "^12.1.6",
+        "mf-parser": "^3.2.5",
+        "mf-utilities": "^3.2.5",
+        "ml-gsd": "^12.1.8",
         "ml-regression-power": "^3.0.0",
-        "ml-spectra-processing": "^14.5.1",
+        "ml-spectra-processing": "^14.6.0",
         "peaks-similarity": "^3.1.1",
         "xy-parser": "^5.0.5"
       }
@@ -10126,32 +10007,6 @@
         "ml-array-xy-max-y": "^1.0.2"
       }
     },
-    "node_modules/nano-css": {
-      "version": "5.6.2",
-      "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.6.2.tgz",
-      "integrity": "sha512-+6bHaC8dSDGALM1HJjOHVXpuastdu2xFoZlC77Jh4cg+33Zcgm+Gxd+1xsnpZK14eyHObSp82+ll5y3SX75liw==",
-      "license": "Unlicense",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15",
-        "css-tree": "^1.1.2",
-        "csstype": "^3.1.2",
-        "fastest-stable-stringify": "^2.0.2",
-        "inline-style-prefixer": "^7.0.1",
-        "rtl-css-js": "^1.16.1",
-        "stacktrace-js": "^2.0.2",
-        "stylis": "^4.3.0"
-      },
-      "peerDependencies": {
-        "react": "*",
-        "react-dom": "*"
-      }
-    },
-    "node_modules/nano-css/node_modules/stylis": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.4.tgz",
-      "integrity": "sha512-osIBl6BGUmSfDkyH2mB7EFvCJntXDrLhKjHTRj/rK6xLH0yuPrHULDRQzKokSOD4VoorhtKpfcfW1GAntu8now==",
-      "license": "MIT"
-    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -10428,13 +10283,13 @@
       }
     },
     "node_modules/nucleotide": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/nucleotide/-/nucleotide-3.1.5.tgz",
-      "integrity": "sha512-dPJ+CMy2vp0nrD9rFB9RGA5YHRnLgDC45iVDymEZCQbHnksdTs4xIGMmr+SQ5FogsQzhmZnuBSHIiYwHFjVw7A==",
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/nucleotide/-/nucleotide-3.1.6.tgz",
+      "integrity": "sha512-uD1Atkf4pQdJJO4BxGds5i0QRtP65nFA3DsgTfu11hr9PzEbOx/wQisQMAX6G7ONMPwCl1ziskKWf9+JYgGiDA==",
       "license": "MIT",
       "dependencies": {
         "chemical-groups": "^2.2.1",
-        "mf-utilities": "^3.2.4"
+        "mf-utilities": "^3.2.5"
       }
     },
     "node_modules/num-sort": {
@@ -10603,9 +10458,9 @@
       }
     },
     "node_modules/openchemlib": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/openchemlib/-/openchemlib-8.15.0.tgz",
-      "integrity": "sha512-8Kd7zrZ/VGWeLsMZDjYzfkoR7zQIdYyNS1xwhKD4BvFCbZXFyLpNKEC+zOiDmeEI8R6bhaRQwTkwYxIqASxIZg==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/openchemlib/-/openchemlib-8.16.0.tgz",
+      "integrity": "sha512-ZzZ9HX1JY69R5SScTch6XGCHgf4GAXr/qKXGdUxL+tBCRWHT7k/UD/PUawwEgJe2h8tv92Ryl5OhqKgihRARgg==",
       "license": "BSD-3-Clause"
     },
     "node_modules/openchemlib-utils": {
@@ -10842,9 +10697,9 @@
       }
     },
     "node_modules/path-to-regexp": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-2.2.1.tgz",
-      "integrity": "sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-3.3.0.tgz",
+      "integrity": "sha512-qyCH421YQPS2WFDxDjftfc1ZR5WKQzVzqsp4n9M2kQhVOo/ByahFoUNJfl58kOcEGfQ//7weFTDhm+ss8Ecxgw==",
       "dev": true,
       "license": "MIT"
     },
@@ -10909,13 +10764,13 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.47.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.47.2.tgz",
-      "integrity": "sha512-nx1cLMmQWqmA3UsnjaaokyoUpdVaaDhJhMoxX2qj3McpjnsqFHs516QAKYhqHAgOP+oCFTEOCOAaD1RgD/RQfA==",
+      "version": "1.48.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.48.1.tgz",
+      "integrity": "sha512-j8CiHW/V6HxmbntOfyB4+T/uk08tBy6ph0MpBXwuoofkSnLmlfdYNNkFTYD6ofzzlSqLA1fwH4vwvVFvJgLN0w==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright-core": "1.47.2"
+        "playwright-core": "1.48.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -10928,9 +10783,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.47.2",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.47.2.tgz",
-      "integrity": "sha512-3JvMfF+9LJfe16l7AbSmU555PaTl2tPyQsVInqm3id16pdDfvZ8TTZ/pyzmkbDrZTQefyzU7AIHlZqQnxpqHVQ==",
+      "version": "1.48.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.48.1.tgz",
+      "integrity": "sha512-Yw/t4VAFX/bBr1OzwCuOMZkY1Cnb4z/doAFSwf4huqAGWmf9eMNjmK7NiOljCdLmxeRYcGPPmcDgU0zOlzP0YA==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -11109,13 +10964,6 @@
       "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==",
       "license": "MIT"
     },
-    "node_modules/punycode": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-      "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -11294,14 +11142,14 @@
       }
     },
     "node_modules/react-d3-utils": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/react-d3-utils/-/react-d3-utils-1.0.0.tgz",
-      "integrity": "sha512-gScTpgmZoPW2yLM56iMw/1cI7SzJ9dQn9feTXNjuq6R15tMQI2C7Lv3I2ShliUNO9HHKU6n1x3ThHCv2wYlLLA==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-d3-utils/-/react-d3-utils-2.0.0.tgz",
+      "integrity": "sha512-Q1OV7DDzyE26OkaUgk/G3UsdwhuCBr7ZATsClsRiJCamSxZkJvV96n2UjJkJU+DTJWwaKx+choSh913DskRLeA==",
       "license": "MIT",
       "dependencies": {
-        "@types/d3-scale": "^4.0.2",
+        "@types/d3-scale": "^4.0.8",
         "d3-scale": "^4.0.2",
-        "use-resize-observer": "^9.0.2"
+        "use-resize-observer": "^9.1.0"
       }
     },
     "node_modules/react-dom": {
@@ -11332,9 +11180,9 @@
       }
     },
     "node_modules/react-dropzone": {
-      "version": "14.2.9",
-      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.9.tgz",
-      "integrity": "sha512-jRZsMC7h48WONsOLHcmhyn3cRWJoIPQjPApvt/sJVfnYaB3Qltn025AoRTTJaj4WdmmgmLl6tUQg1s0wOhpodQ==",
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
+      "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
       "license": "MIT",
       "dependencies": {
         "attr-accept": "^2.2.2",
@@ -11349,13 +11197,16 @@
       }
     },
     "node_modules/react-error-boundary": {
-      "version": "4.0.13",
-      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.13.tgz",
-      "integrity": "sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.1.1.tgz",
+      "integrity": "sha512-EOAEsbVm2EQD8zPS4m24SiaR/506RPC3CjMcjJ5JWKECsctyLsDTKxB26Hvl7jcz7KweSOkBYAcY/hmMpMn2jA==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.12.5"
       },
+      "engines": {
+        "pnpm": "=9"
+      },
       "peerDependencies": {
         "react": ">=16.13.1"
       }
@@ -11421,9 +11272,9 @@
       }
     },
     "node_modules/react-ocl": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/react-ocl/-/react-ocl-6.1.0.tgz",
-      "integrity": "sha512-TkwkERltTDWIy2CZnjECjTVO1GZvWI2T1VAIojUTWVi91MJUEQfLKATcSiDJg9hrckYqKJAwwlUppfK4I7fUyA==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/react-ocl/-/react-ocl-7.0.2.tgz",
+      "integrity": "sha512-vzAJVL90qSbaNmS/RLLL0Xz+6K0fmuQHOH5/dwPer2NEDXx3MjQPuTqfaCnpY5HexoUpfgJ8/QLuOvhbtshK1Q==",
       "license": "MIT",
       "peerDependencies": {
         "openchemlib": ">=8",
@@ -11432,23 +11283,23 @@
       }
     },
     "node_modules/react-ocl-nmr": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/react-ocl-nmr/-/react-ocl-nmr-3.0.3.tgz",
-      "integrity": "sha512-9g5FTgZSeDJvDBe7EdOUVLA0xDS4XGA7dJN5bKOhi3owigWY2Nu4l3gWepisLl9B5Wq3JpHXr+bJL2v1h6NWxA==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-ocl-nmr/-/react-ocl-nmr-3.1.0.tgz",
+      "integrity": "sha512-9rYsjPZmU7A6VOUylpPrBOh8f6cfDXVwJu/aIotwTn9z6na111xJYTgSznxjqGsyOkG0rBfyNjfkesWcHZKPWg==",
       "license": "MIT",
       "dependencies": {
         "openchemlib": "^8.15.0",
         "openchemlib-utils": "^6.4.1",
-        "react-ocl": "^6.1.0"
+        "react-ocl": "^7.0.2"
       },
       "peerDependencies": {
         "openchemlib": ">=8"
       }
     },
     "node_modules/react-plot": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/react-plot/-/react-plot-2.0.0.tgz",
-      "integrity": "sha512-fUNPkaBWLKdyMKt/KPeQ0Uk6/GEUmhHcEUX0x6y3BffXSvMDJHhV+RrZqXXHckIXtnXiZaY7T9351MUXTIY0Fg==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/react-plot/-/react-plot-3.0.0.tgz",
+      "integrity": "sha512-aJ+YUV2dgvCgbw4fHUeWsurDg1tt8QRm5H5AgaSmAWY9V6mE+tuYu18Wsl4jp0l5wqJOeq98L8ssoIwVl9CzDg==",
       "license": "MIT",
       "dependencies": {
         "d3-array": "^3.2.4",
@@ -11457,7 +11308,7 @@
         "d3-shape": "^3.2.0",
         "immer": "^10.1.1",
         "ml-distance-euclidean": "^2.0.0",
-        "react-d3-utils": "^1.0.0"
+        "react-d3-utils": "^2.0.0"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -11548,13 +11399,13 @@
       "license": "0BSD"
     },
     "node_modules/react-router": {
-      "version": "6.26.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz",
-      "integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==",
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz",
+      "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.19.2"
+        "@remix-run/router": "1.20.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -11564,14 +11415,14 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.26.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz",
-      "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==",
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz",
+      "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.19.2",
-        "react-router": "6.26.2"
+        "@remix-run/router": "1.20.0",
+        "react-router": "6.27.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -11582,39 +11433,39 @@
       }
     },
     "node_modules/react-science": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/react-science/-/react-science-6.0.2.tgz",
-      "integrity": "sha512-YsTjVMLLVhXUaMK0pKEJ1sS6wltP/ErDYTBhgKwskuC7CDvW4E44hTlJLpL7cAmB/qQ4sxUjhVZIefb+Ipn/zQ==",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/react-science/-/react-science-9.0.1.tgz",
+      "integrity": "sha512-ti0txhFlduazKWddL4YGMIs74XbyCE3XfOTBbJ59afBlTPxIFbOg7jugAuTLB9EfMlOuTEadgtCLNjE1JIG7gw==",
       "license": "MIT",
       "dependencies": {
-        "@blueprintjs/select": "^5.2.4",
+        "@blueprintjs/select": "^5.2.5",
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
         "@lukeed/uuid": "^2.0.1",
         "@popperjs/core": "^2.11.8",
-        "@radix-ui/react-collapsible": "^1.1.0",
-        "@radix-ui/react-radio-group": "^1.2.0",
-        "@radix-ui/react-select": "^2.1.1",
-        "@tanstack/react-query": "^5.56.2",
+        "@radix-ui/react-collapsible": "^1.1.1",
+        "@radix-ui/react-radio-group": "^1.2.1",
+        "@radix-ui/react-select": "^2.1.2",
+        "@tanstack/react-query": "^5.59.13",
         "@tanstack/react-table": "^8.20.5",
         "biologic-converter": "^0.6.0",
         "cheminfo-types": "^1.8.0",
         "d3-scale-chromatic": "^3.1.0",
-        "filelist-utils": "^1.11.1",
+        "filelist-utils": "^1.11.2",
         "immer": "^10.1.1",
         "jcampconverter": "^9.6.4",
         "lodash": "^4.17.21",
         "ml-gsd": "^12.1.8",
         "ml-peak-shape-generator": "^4.1.4",
-        "ml-signal-processing": "^1.0.4",
-        "ml-spectra-processing": "^14.5.3",
-        "ms-spectrum": "^3.6.6",
+        "ml-signal-processing": "^1.1.1",
+        "ml-spectra-processing": "^14.6.0",
+        "ms-spectrum": "^3.6.8",
         "netcdfjs": "^3.0.0",
-        "react-d3-utils": "^1.0.0",
-        "react-dropzone": "^14.2.3",
+        "react-d3-utils": "^2.0.0",
+        "react-dropzone": "14.2.3",
         "react-icons": "^5.3.0",
         "react-inspector": "^6.0.2",
-        "react-plot": "^2.0.0",
+        "react-plot": "^3.0.0",
         "react-popper": "^2.3.0",
         "spc-parser": "^1.0.0",
         "tinycolor2": "^1.6.0",
@@ -11682,9 +11533,9 @@
       }
     },
     "node_modules/react-tree-svg": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/react-tree-svg/-/react-tree-svg-1.3.0.tgz",
-      "integrity": "sha512-ZvAMjxVlO/EPsNpqFr36xPLSgR6K64KmDVcbTuuNsLY5a8t0deySL9R80QbAOO7aa7WWITkCCaMiZ90vFMVQJA==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/react-tree-svg/-/react-tree-svg-1.4.0.tgz",
+      "integrity": "sha512-c6QvUZRAPHIRwOtL7wIu/Peb7+WVki+exvYCX6DXXxtHZkRUbCQN3gNhv/sTOaO8CUh2WPYXwEfmEMzLCaxgdQ==",
       "dependencies": {
         "openchemlib": "^8.15.0"
       },
@@ -11714,41 +11565,6 @@
         }
       }
     },
-    "node_modules/react-universal-interface": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
-      "integrity": "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==",
-      "peerDependencies": {
-        "react": "*",
-        "tslib": "*"
-      }
-    },
-    "node_modules/react-use": {
-      "version": "17.5.1",
-      "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.5.1.tgz",
-      "integrity": "sha512-LG/uPEVRflLWMwi3j/sZqR00nF6JGqTTDblkXK2nzXsIvij06hXl1V/MZIlwj1OKIQUtlh1l9jK8gLsRyCQxMg==",
-      "license": "Unlicense",
-      "dependencies": {
-        "@types/js-cookie": "^2.2.6",
-        "@xobotyi/scrollbar-width": "^1.9.5",
-        "copy-to-clipboard": "^3.3.1",
-        "fast-deep-equal": "^3.1.3",
-        "fast-shallow-equal": "^1.0.0",
-        "js-cookie": "^2.2.1",
-        "nano-css": "^5.6.2",
-        "react-universal-interface": "^0.6.2",
-        "resize-observer-polyfill": "^1.5.1",
-        "screenfull": "^5.1.0",
-        "set-harmonic-interval": "^1.0.1",
-        "throttle-debounce": "^3.0.1",
-        "ts-easing": "^0.2.0",
-        "tslib": "^2.1.0"
-      },
-      "peerDependencies": {
-        "react": "*",
-        "react-dom": "*"
-      }
-    },
     "node_modules/read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -11991,6 +11807,7 @@
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
       "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/resolve": {
@@ -12103,15 +11920,6 @@
         "node": ">=8.0.0"
       }
     },
-    "node_modules/rtl-css-js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
-      "integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.1.2"
-      }
-    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -12207,18 +12015,6 @@
         "loose-envify": "^1.1.0"
       }
     },
-    "node_modules/screenfull": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
-      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/sdf-parser": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/sdf-parser/-/sdf-parser-6.0.1.tgz",
@@ -12251,9 +12047,9 @@
       }
     },
     "node_modules/serve": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/serve/-/serve-14.2.3.tgz",
-      "integrity": "sha512-VqUFMC7K3LDGeGnJM9h56D3XGKb6KGgOw0cVNtA26yYXHCcpxf3xwCTUaQoWlVS7i8Jdh3GjQkOB23qsXyjoyQ==",
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/serve/-/serve-14.2.4.tgz",
+      "integrity": "sha512-qy1S34PJ/fcY8gjVGszDB3EXiPSk5FKhUa7tQe0UPRddxRidc2V6cNHPNewbE1D7MAkgLuWEt3Vw56vYy73tzQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -12266,7 +12062,7 @@
         "clipboardy": "3.0.0",
         "compression": "1.7.4",
         "is-port-reachable": "4.0.0",
-        "serve-handler": "6.1.5",
+        "serve-handler": "6.1.6",
         "update-check": "1.5.4"
       },
       "bin": {
@@ -12277,19 +12073,18 @@
       }
     },
     "node_modules/serve-handler": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.5.tgz",
-      "integrity": "sha512-ijPFle6Hwe8zfmBxJdE+5fta53fdIY0lHISJvuikXB3VYFafRjMRpOffSPvCYsbKyBA7pvy9oYr/BT1O3EArlg==",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.6.tgz",
+      "integrity": "sha512-x5RL9Y2p5+Sh3D38Fh9i/iQ5ZK+e4xuXRd/pGbM4D13tgo/MGwbttUk8emytcr1YYzBYs+apnUngBDFYfpjPuQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "bytes": "3.0.0",
         "content-disposition": "0.5.2",
-        "fast-url-parser": "1.1.3",
         "mime-types": "2.1.18",
         "minimatch": "3.1.2",
         "path-is-inside": "1.0.2",
-        "path-to-regexp": "2.2.1",
+        "path-to-regexp": "3.3.0",
         "range-parser": "1.2.0"
       }
     },
@@ -12479,15 +12274,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/set-harmonic-interval": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz",
-      "integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==",
-      "license": "Unlicense",
-      "engines": {
-        "node": ">=6.9"
-      }
-    },
     "node_modules/setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
@@ -12748,15 +12534,6 @@
       "integrity": "sha512-Ifi3fH46Bco+Lb1mOlTxbFEuF3NdyElEVVD+EmoK327I0JzKAP4x57cl+HoxHqFcVd8F/uXLC+wtY3n/R1uO2w==",
       "license": "BSD-3-Clause"
     },
-    "node_modules/stack-generator": {
-      "version": "2.0.10",
-      "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz",
-      "integrity": "sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==",
-      "license": "MIT",
-      "dependencies": {
-        "stackframe": "^1.3.4"
-      }
-    },
     "node_modules/stackback": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
@@ -12764,42 +12541,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/stackframe": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
-      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==",
-      "license": "MIT"
-    },
-    "node_modules/stacktrace-gps": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz",
-      "integrity": "sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==",
-      "license": "MIT",
-      "dependencies": {
-        "source-map": "0.5.6",
-        "stackframe": "^1.3.4"
-      }
-    },
-    "node_modules/stacktrace-gps/node_modules/source-map": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
-      "integrity": "sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/stacktrace-js": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz",
-      "integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==",
-      "license": "MIT",
-      "dependencies": {
-        "error-stack-parser": "^2.0.6",
-        "stack-generator": "^2.0.5",
-        "stacktrace-gps": "^3.0.4"
-      }
-    },
     "node_modules/std-env": {
       "version": "3.7.0",
       "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.7.0.tgz",
@@ -13057,9 +12798,9 @@
       }
     },
     "node_modules/stylelint": {
-      "version": "16.9.0",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.9.0.tgz",
-      "integrity": "sha512-31Nm3WjxGOBGpQqF43o3wO9L5AC36TPIe6030Lnm13H3vDMTcS21DrLh69bMX+DBilKqMMVLian4iG6ybBoNRQ==",
+      "version": "16.10.0",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.10.0.tgz",
+      "integrity": "sha512-z/8X2rZ52dt2c0stVwI9QL2AFJhLhbPkyfpDFcizs200V/g7v+UYY6SNcB9hKOLcDDX/yGLDsY/pX08sLkz9xQ==",
       "dev": true,
       "funding": [
         {
@@ -13081,17 +12822,17 @@
         "balanced-match": "^2.0.0",
         "colord": "^2.9.3",
         "cosmiconfig": "^9.0.0",
-        "css-functions-list": "^3.2.2",
-        "css-tree": "^2.3.1",
-        "debug": "^4.3.6",
+        "css-functions-list": "^3.2.3",
+        "css-tree": "^3.0.0",
+        "debug": "^4.3.7",
         "fast-glob": "^3.3.2",
         "fastest-levenshtein": "^1.0.16",
-        "file-entry-cache": "^9.0.0",
+        "file-entry-cache": "^9.1.0",
         "global-modules": "^2.0.0",
         "globby": "^11.1.0",
         "globjoin": "^0.1.4",
         "html-tags": "^3.3.1",
-        "ignore": "^5.3.2",
+        "ignore": "^6.0.2",
         "imurmurhash": "^0.1.4",
         "is-plain-object": "^5.0.0",
         "known-css-properties": "^0.34.0",
@@ -13100,14 +12841,13 @@
         "micromatch": "^4.0.8",
         "normalize-path": "^3.0.0",
         "picocolors": "^1.0.1",
-        "postcss": "^8.4.41",
+        "postcss": "^8.4.47",
         "postcss-resolve-nested-selector": "^0.1.6",
-        "postcss-safe-parser": "^7.0.0",
+        "postcss-safe-parser": "^7.0.1",
         "postcss-selector-parser": "^6.1.2",
         "postcss-value-parser": "^4.2.0",
         "resolve-from": "^5.0.0",
         "string-width": "^4.2.3",
-        "strip-ansi": "^7.1.0",
         "supports-hyperlinks": "^3.1.0",
         "svg-tags": "^1.0.0",
         "table": "^6.8.2",
@@ -13214,13 +12954,13 @@
       }
     },
     "node_modules/stylelint/node_modules/css-tree": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
-      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.0.0.tgz",
+      "integrity": "sha512-o88DVQ6GzsABn1+6+zo2ct801dBO5OASVyxbbvA2W20ue2puSh/VOuqUj90eUeMSX/xqGqBmOKiRQN7tJOuBXw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "mdn-data": "2.0.30",
+        "mdn-data": "2.10.0",
         "source-map-js": "^1.0.1"
       },
       "engines": {
@@ -13244,10 +12984,20 @@
         "node": ">=6"
       }
     },
+    "node_modules/stylelint/node_modules/ignore": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-6.0.2.tgz",
+      "integrity": "sha512-InwqeHHN2XpumIkMvpl/DCJVrAHgCsG5+cn1XlnLWGwtZBm8QJfSusItfrwx81CTp5agNZqpKU2J/ccC5nGT4A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/stylelint/node_modules/mdn-data": {
-      "version": "2.0.30",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
-      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.10.0.tgz",
+      "integrity": "sha512-qq7C3EtK3yJXMwz1zAab65pjl+UhohqMOctTgcqjLOWABqmwj+me02LSsCuEUxnst9X1lCBpoE0WArGKgdGDzw==",
       "dev": true,
       "license": "CC0-1.0"
     },
@@ -13266,7 +13016,7 @@
         "node": ">=8"
       }
     },
-    "node_modules/stylelint/node_modules/string-width/node_modules/strip-ansi": {
+    "node_modules/stylelint/node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
@@ -13362,9 +13112,9 @@
       "dev": true
     },
     "node_modules/synckit": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.1.tgz",
-      "integrity": "sha512-7gr8p9TQP6RAHusBOSLs46F4564ZrjV8xFmw5zCmgmhGUcw2hxsShhJ6CEiHQMgPDwAQ1fWHPM0ypc4RMAig4A==",
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.2.tgz",
+      "integrity": "sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -13573,15 +13323,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/throttle-debounce": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
-      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/tiny-case": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
@@ -13608,6 +13349,48 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/tinyglobby": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.9.tgz",
+      "integrity": "sha512-8or1+BGEdk1Zkkw2ii16qSS7uVrQJPre5A9o/XkWPATkk23FZh/15BKFxPnlTy6vkljZxLqYCzzBMj30ZrSvjw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.0",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.0.tgz",
+      "integrity": "sha512-3oB133prH1o4j/L5lLW7uOCF1PlD+/It2L0eL/iAqWMB91RBbqTewABqxhj0ibBd90EEmWZq7ntIWzVaWcXTGQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/tinypool": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.0.1.tgz",
@@ -13660,12 +13443,6 @@
         "node": ">=8.0"
       }
     },
-    "node_modules/toggle-selection": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
-      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==",
-      "license": "MIT"
-    },
     "node_modules/toposort": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
@@ -13685,12 +13462,6 @@
         "typescript": ">=4.2.0"
       }
     },
-    "node_modules/ts-easing": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz",
-      "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==",
-      "license": "Unlicense"
-    },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
@@ -13824,9 +13595,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.6.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
-      "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==",
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
+      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -13838,15 +13609,15 @@
       }
     },
     "node_modules/typescript-eslint": {
-      "version": "8.8.0",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.8.0.tgz",
-      "integrity": "sha512-BjIT/VwJ8+0rVO01ZQ2ZVnjE1svFBiRczcpr1t1Yxt7sT25VSbPfrJtDsQ8uQTy2pilX5nI9gwxhUyLULNentw==",
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.9.0.tgz",
+      "integrity": "sha512-AuD/FXGYRQyqyOBCpNLldMlsCGvmDNxptQ3Dp58/NXeB+FqyvTfXmMyba3PYa0Vi9ybnj7G8S/yd/4Cw8y47eA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.8.0",
-        "@typescript-eslint/parser": "8.8.0",
-        "@typescript-eslint/utils": "8.8.0"
+        "@typescript-eslint/eslint-plugin": "8.9.0",
+        "@typescript-eslint/parser": "8.9.0",
+        "@typescript-eslint/utils": "8.9.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -14085,9 +13856,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.4.8",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz",
-      "integrity": "sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==",
+      "version": "5.4.9",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.9.tgz",
+      "integrity": "sha512-20OVpJHh0PAM0oSOELa5GaZNWeDjcAvQjGXy2Uyr+Tp+/D2/Hdz6NLgpJLsarPTA2QJ6v8mX2P1ZfbsSKvdMkg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -14145,9 +13916,9 @@
       }
     },
     "node_modules/vite-node": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.1.2.tgz",
-      "integrity": "sha512-HPcGNN5g/7I2OtPjLqgOtCRu/qhVvBxTUD3qzitmL0SrG1cWFzxzhMDWussxSbrRYWqnKf8P2jiNhPMSN+ymsQ==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.1.3.tgz",
+      "integrity": "sha512-I1JadzO+xYX887S39Do+paRePCKoiDrWRRjp9kkG5he0t7RXNvPAJPCQSJqbGN4uCrFFeS3Kj3sLqY8NMYBEdA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -14182,19 +13953,19 @@
       }
     },
     "node_modules/vitest": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.1.2.tgz",
-      "integrity": "sha512-veNjLizOMkRrJ6xxb+pvxN6/QAWg95mzcRjtmkepXdN87FNfxAss9RKe2far/G9cQpipfgP2taqg0KiWsquj8A==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.1.3.tgz",
+      "integrity": "sha512-Zrxbg/WiIvUP2uEzelDNTXmEMJXuzJ1kCpbDvaKByFA9MNeO95V+7r/3ti0qzJzrxdyuUw5VduN7k+D3VmVOSA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/expect": "2.1.2",
-        "@vitest/mocker": "2.1.2",
-        "@vitest/pretty-format": "^2.1.2",
-        "@vitest/runner": "2.1.2",
-        "@vitest/snapshot": "2.1.2",
-        "@vitest/spy": "2.1.2",
-        "@vitest/utils": "2.1.2",
+        "@vitest/expect": "2.1.3",
+        "@vitest/mocker": "2.1.3",
+        "@vitest/pretty-format": "^2.1.3",
+        "@vitest/runner": "2.1.3",
+        "@vitest/snapshot": "2.1.3",
+        "@vitest/spy": "2.1.3",
+        "@vitest/utils": "2.1.3",
         "chai": "^5.1.1",
         "debug": "^4.3.6",
         "magic-string": "^0.30.11",
@@ -14205,7 +13976,7 @@
         "tinypool": "^1.0.0",
         "tinyrainbow": "^1.2.0",
         "vite": "^5.0.0",
-        "vite-node": "2.1.2",
+        "vite-node": "2.1.3",
         "why-is-node-running": "^2.3.0"
       },
       "bin": {
@@ -14220,8 +13991,8 @@
       "peerDependencies": {
         "@edge-runtime/vm": "*",
         "@types/node": "^18.0.0 || >=20.0.0",
-        "@vitest/browser": "2.1.2",
-        "@vitest/ui": "2.1.2",
+        "@vitest/browser": "2.1.3",
+        "@vitest/ui": "2.1.3",
         "happy-dom": "*",
         "jsdom": "*"
       },
diff --git a/package.json b/package.json
index a07f3a54f..c37104d8b 100644
--- a/package.json
+++ b/package.json
@@ -3,10 +3,11 @@
   "description": "React component to display and process nuclear magnetic resonance (NMR) spectra.",
   "version": "0.60.0",
   "license": "MIT",
-  "module": "lib/component/main/index.js",
-  "types": "lib/component/main/index.d.ts",
+  "type": "module",
+  "exports": "./lib/component/main/index.js",
   "files": [
-    "lib"
+    "lib",
+    "src"
   ],
   "scripts": {
     "build": "vite build --outDir build",
@@ -15,8 +16,8 @@
     "build-cloudflare": "npm run set-version-sha && npm run build-with-profiling && npm run copy-samples-toc",
     "build-no-minify": "cross-env NO_MINIFY=true npm run build",
     "build-with-profiling": "cross-env WITH_PROFILING=true NO_MINIFY=true npm run build",
-    "check-types": "tsc --project tsconfig.esm.json",
-    "compile": "tsc --project tsconfig.esm.json",
+    "check-types": "tsc --noEmit",
+    "compile": "tsc --project tsconfig.build.json",
     "copy-samples-toc": "cp src/demo/samples.json build/",
     "clean-lib": "rimraf lib",
     "dev": "vite --host localhost --port 3000 --open",
@@ -60,7 +61,7 @@
     "@emotion/styled": "^11.13.0",
     "@hookform/resolvers": "^3.9.0",
     "@lukeed/uuid": "^2.0.1",
-    "cheminfo-font": "^1.13.0",
+    "cheminfo-font": "^1.13.1",
     "cheminfo-types": "^1.8.0",
     "clipboard-polyfill": "^4.1.0",
     "convert-to-jcamp": "^5.4.11",
@@ -72,7 +73,7 @@
     "immer": "^10.1.1",
     "jszip": "^3.10.1",
     "lodash": "^4.17.21",
-    "mf-parser": "^3.2.4",
+    "mf-parser": "^3.2.5",
     "ml-array-max": "^1.2.4",
     "ml-array-mean": "^1.1.6",
     "ml-array-median": "^1.1.6",
@@ -80,9 +81,9 @@
     "ml-baseline-correction-regression": "^2.0.1",
     "ml-conrec": "^5.0.3",
     "ml-gsd": "^12.1.8",
-    "ml-matrix": "^6.11.1",
-    "ml-signal-processing": "^1.0.4",
-    "ml-spectra-processing": "^14.5.3",
+    "ml-matrix": "^6.12.0",
+    "ml-signal-processing": "^1.1.1",
+    "ml-spectra-processing": "^14.6.0",
     "ml-stat": "^1.3.3",
     "ml-tree-similarity": "^2.2.0",
     "multiplet-analysis": "^2.1.2",
@@ -91,45 +92,45 @@
     "nmr-processing": "^12.12.3",
     "nmredata": "^0.9.11",
     "numeral": "^2.0.6",
-    "openchemlib": "^8.15.0",
+    "openchemlib": "^8.16.0",
     "openchemlib-utils": "^6.4.1",
     "papaparse": "^5.4.1",
     "re-resizable": "6.10.0",
-    "react-d3-utils": "^1.0.0",
-    "react-dropzone": "^14.2.9",
-    "react-error-boundary": "^4.0.13",
+    "react-d3-utils": "^2.0.0",
+    "react-dropzone": "14.2.3",
+    "react-error-boundary": "^4.1.1",
     "react-hook-form": "^7.53.0",
     "react-icons": "^5.3.0",
     "react-inspector": "^6.0.2",
     "react-mf": "^2.0.3",
-    "react-ocl": "^6.1.0",
-    "react-ocl-nmr": "^3.0.3",
-    "react-plot": "^2.0.0",
+    "react-ocl": "^7.0.2",
+    "react-ocl-nmr": "^3.1.0",
+    "react-plot": "^3.0.0",
     "react-rnd": "^10.4.13",
-    "react-science": "^6.0.2",
+    "react-science": "^9.0.1",
     "react-table": "^7.8.0",
     "react-transition-group": "^4.4.5",
-    "react-use": "^17.5.1",
     "smart-array-filter": "^4.0.2",
+    "use-resize-observer": "^9.1.0",
     "yup": "^1.4.0"
   },
   "devDependencies": {
     "@babel/plugin-transform-modules-commonjs": "^7.25.7",
     "@babel/preset-react": "^7.25.7",
     "@babel/preset-typescript": "^7.25.7",
-    "@playwright/test": "^1.47.2",
+    "@playwright/test": "^1.48.1",
     "@simbathesailor/use-what-changed": "^2.0.0",
     "@types/d3": "^7.4.3",
     "@types/lodash": "^4.17.10",
-    "@types/node": "^22.7.4",
+    "@types/node": "^22.7.6",
     "@types/papaparse": "^5.3.14",
     "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^18.3.1",
     "@types/react-table": "^7.7.20",
     "@vitejs/plugin-react-swc": "^3.7.1",
-    "@vitest/coverage-v8": "^2.1.2",
+    "@vitest/coverage-v8": "^2.1.3",
     "cross-env": "^7.0.3",
-    "cspell": "^8.14.4",
+    "cspell": "^8.15.3",
     "eslint": "^9.12.0",
     "eslint-config-cheminfo-react": "^14.0.0",
     "eslint-config-cheminfo-typescript": "^16.0.0",
@@ -139,14 +140,14 @@
     "rc-menu": "^9.15.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.26.2",
+    "react-router-dom": "^6.27.0",
     "rimraf": "^6.0.1",
     "rollup-plugin-analyzer": "^4.0.0",
-    "serve": "^14.2.3",
-    "stylelint": "^16.9.0",
+    "serve": "^14.2.4",
+    "stylelint": "^16.10.0",
     "stylelint-config-standard": "^36.0.1",
-    "typescript": "^5.6.2",
-    "vite": "^5.4.8",
-    "vitest": "^2.1.2"
+    "typescript": "^5.6.3",
+    "vite": "^5.4.9",
+    "vitest": "^2.1.3"
   }
 }
diff --git a/playwright.config.ts b/playwright.config.ts
index e86dfd9f7..823b625b0 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -1,4 +1,5 @@
-import { devices, ViewportSize, defineConfig } from '@playwright/test';
+import type { ViewportSize} from '@playwright/test';
+import { devices, defineConfig } from '@playwright/test';
 
 const viewportOverride: ViewportSize = {
   width: 1600,
diff --git a/src/component/1d-2d/FieldEdition.tsx b/src/component/1d-2d/FieldEdition.tsx
index 1377c15fa..b90244ef1 100644
--- a/src/component/1d-2d/FieldEdition.tsx
+++ b/src/component/1d-2d/FieldEdition.tsx
@@ -1,13 +1,15 @@
 /** @jsxImportSource @emotion/react */
-import { Popover, PopoverProps } from '@blueprintjs/core';
+import type { PopoverProps } from '@blueprintjs/core';
+import { Popover } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { ReactNode, useState } from 'react';
+import type { ReactNode } from 'react';
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 
-import { Input2Controller } from '../elements/Input2Controller';
-import { NumberInput2Controller } from '../elements/NumberInput2Controller';
+import { Input2Controller } from '../elements/Input2Controller.js';
+import { NumberInput2Controller } from '../elements/NumberInput2Controller.js';
 
 type InputType = 'number' | 'text';
 
diff --git a/src/component/1d-2d/components/FloatMoleculeStructures/ActionsButton.tsx b/src/component/1d-2d/components/FloatMoleculeStructures/ActionsButton.tsx
index aec9080e3..337ed3728 100644
--- a/src/component/1d-2d/components/FloatMoleculeStructures/ActionsButton.tsx
+++ b/src/component/1d-2d/components/FloatMoleculeStructures/ActionsButton.tsx
@@ -1,7 +1,7 @@
 import { BsArrowsMove } from 'react-icons/bs';
 import { FaTimes } from 'react-icons/fa';
 
-import Button from '../../../elements/Button';
+import Button from '../../../elements/Button.js';
 
 export default function ActionsButton({ onFloatBtnClick }) {
   return (
diff --git a/src/component/1d-2d/components/FloatMoleculeStructures/DraggableStructure.tsx b/src/component/1d-2d/components/FloatMoleculeStructures/DraggableStructure.tsx
index 347d74bb9..352f25526 100644
--- a/src/component/1d-2d/components/FloatMoleculeStructures/DraggableStructure.tsx
+++ b/src/component/1d-2d/components/FloatMoleculeStructures/DraggableStructure.tsx
@@ -1,24 +1,24 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { Ranges, Zones } from 'nmr-processing';
+import type { Ranges, Zones } from 'nmr-processing';
 import OCL from 'openchemlib/full';
 import { ResponsiveChart } from 'react-d3-utils';
 import OCLnmr from 'react-ocl-nmr';
 import { Rnd } from 'react-rnd';
 
-import {
+import type {
   MoleculeBoundingRect,
   MoleculeView,
   StateMoleculeExtended,
-} from '../../../../data/molecules/Molecule';
-import { useDispatch } from '../../../context/DispatchContext';
-import { useGlobal } from '../../../context/GlobalContext';
-import { useHighlightColor } from '../../../hooks/useHighlightColor';
-import { useMoleculeEditor } from '../../../modal/MoleculeStructureEditorModal';
-import useAtomAssignment from '../../../panels/MoleculesPanel/useAtomAssignment';
-import { DisplayerMode } from '../../../reducer/Reducer';
+} from '../../../../data/molecules/Molecule.js';
+import { useDispatch } from '../../../context/DispatchContext.js';
+import { useGlobal } from '../../../context/GlobalContext.js';
+import { useHighlightColor } from '../../../hooks/useHighlightColor.js';
+import { useMoleculeEditor } from '../../../modal/MoleculeStructureEditorModal.js';
+import useAtomAssignment from '../../../panels/MoleculesPanel/useAtomAssignment.js';
+import type { DisplayerMode } from '../../../reducer/Reducer.js';
 
-import ActionsButton from './ActionsButton';
+import ActionsButton from './ActionsButton.js';
 
 interface DraggableStructureProps {
   zones: Zones;
diff --git a/src/component/1d-2d/components/FloatMoleculeStructures/index.tsx b/src/component/1d-2d/components/FloatMoleculeStructures/index.tsx
index 7aae5fa76..d0c0227b8 100644
--- a/src/component/1d-2d/components/FloatMoleculeStructures/index.tsx
+++ b/src/component/1d-2d/components/FloatMoleculeStructures/index.tsx
@@ -1,18 +1,18 @@
-import { Spectrum1D, Spectrum2D } from 'nmr-load-save';
-import { Zones, Ranges } from 'nmr-processing';
+import type { Spectrum1D, Spectrum2D } from 'nmr-load-save';
+import type { Ranges, Zones } from 'nmr-processing';
 import { memo } from 'react';
 
-import {
+import type {
   MoleculesView,
   MoleculeView,
   StateMoleculeExtended,
-} from '../../../../data/molecules/Molecule';
-import { useChartData } from '../../../context/ChartContext';
-import useSpectrum from '../../../hooks/useSpectrum';
-import { DisplayerMode } from '../../../reducer/Reducer';
-import { assert } from '../../../utility/assert';
+} from '../../../../data/molecules/Molecule.js';
+import { useChartData } from '../../../context/ChartContext.js';
+import useSpectrum from '../../../hooks/useSpectrum.js';
+import type { DisplayerMode } from '../../../reducer/Reducer.js';
+import { assert } from '../../../utility/assert.js';
 
-import { DraggableStructure } from './DraggableStructure';
+import { DraggableStructure } from './DraggableStructure.js';
 
 interface FloatMoleculeStructuresProps {
   zones: Zones;
diff --git a/src/component/1d-2d/components/SpectrumInfoBlock.tsx b/src/component/1d-2d/components/SpectrumInfoBlock.tsx
index fdd3d6f3c..e4f9fb908 100644
--- a/src/component/1d-2d/components/SpectrumInfoBlock.tsx
+++ b/src/component/1d-2d/components/SpectrumInfoBlock.tsx
@@ -1,23 +1,22 @@
 /** @jsxImportSource @emotion/react */
-import lodashGet from 'lodash/get';
-import { Spectrum } from 'nmr-load-save';
-import { CSSProperties, useState } from 'react';
+import lodashGet from 'lodash/get.js';
+import type { Spectrum } from 'nmr-load-save';
+import type { CSSProperties } from 'react';
+import { useState } from 'react';
 import { BsArrowsMove } from 'react-icons/bs';
 import { FaTimes } from 'react-icons/fa';
-import { useMeasure } from 'react-use';
-
-import { useChartData } from '../../context/ChartContext';
-import { useGlobal } from '../../context/GlobalContext';
-import { usePreferences } from '../../context/PreferencesContext';
-import {
-  ActionsButtonsPopover,
-  ActionsButtonsPopoverProps,
-} from '../../elements/ActionsButtonsPopover';
-import { SVGGroup } from '../../elements/SVGGroup';
-import useDraggable from '../../elements/draggable/useDraggable';
-import useSpectrum from '../../hooks/useSpectrum';
-import { Margin } from '../../reducer/Reducer';
-import { formatNumber } from '../../utility/formatNumber';
+import useResizeObserver from 'use-resize-observer';
+
+import { useChartData } from '../../context/ChartContext.js';
+import { useGlobal } from '../../context/GlobalContext.js';
+import { usePreferences } from '../../context/PreferencesContext.js';
+import type { ActionsButtonsPopoverProps } from '../../elements/ActionsButtonsPopover.js';
+import { ActionsButtonsPopover } from '../../elements/ActionsButtonsPopover.js';
+import { SVGGroup } from '../../elements/SVGGroup.js';
+import useDraggable from '../../elements/draggable/useDraggable.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
+import type { Margin } from '../../reducer/Reducer.js';
+import { formatNumber } from '../../utility/formatNumber.js';
 
 const verticalSpace = 5;
 const boxPadding = 0;
@@ -95,7 +94,12 @@ function SpectrumInfoBlock() {
       : infoFields?.length - (infoFields?.length % 2)
         ? 2
         : 1) || 0);
-  const [ref, boxSize] = useMeasure<SVGGElement>();
+  const {
+    ref,
+    width: boxWidth = 0,
+    height: boxHeight = 0,
+    // @ts-expect-error Module is not published correctly.
+  } = useResizeObserver();
   const { onPointerDown } = useDraggable({
     position: coordinate,
     onChange: (dragEvent) => {
@@ -140,23 +144,23 @@ function SpectrumInfoBlock() {
 
   let { x, y } = currentPosition;
 
-  if (x + boxSize.width + boxPadding > width - margin.right) {
-    x = width - margin.right - boxSize.width - boxPadding;
+  if (x + boxWidth + boxPadding > width - margin.right) {
+    x = width - margin.right - boxWidth - boxPadding;
   }
 
   if (x - boxPadding < margin.left) {
     x = margin.left + boxPadding;
   }
-  if (y + boxSize.height + bothSidePadding + shift > height - margin.bottom) {
-    y = height - margin.bottom - boxSize.height - bothSidePadding - shift;
+  if (y + boxHeight + bothSidePadding + shift > height - margin.bottom) {
+    y = height - margin.bottom - boxHeight - bothSidePadding - shift;
   }
 
   if (y + shift < margin.top) {
     y = margin.top - shift;
   }
 
-  const boxWidth = boxSize.width + bothSidePadding;
-  const boxHeight = boxSize.height + bothSidePadding;
+  const finalBoxWidth = boxWidth + bothSidePadding;
+  const finalBoxHeight = boxHeight + bothSidePadding;
 
   const actionsButtons: ActionsButtonsPopoverProps['buttons'] = [
     {
@@ -202,8 +206,8 @@ function SpectrumInfoBlock() {
           data-no-export="true"
           x={-boxPadding}
           y={-boxPadding + totalSpace}
-          width={boxWidth}
-          height={boxHeight}
+          width={finalBoxWidth}
+          height={finalBoxHeight}
           rx="5"
           fill={isMoveActive ? 'white' : 'transparent'}
           opacity={isMoveActive ? 0.9 : 0}
diff --git a/src/component/1d-2d/tools/BrushX.tsx b/src/component/1d-2d/tools/BrushX.tsx
index 5cedb9b64..0c1096600 100644
--- a/src/component/1d-2d/tools/BrushX.tsx
+++ b/src/component/1d-2d/tools/BrushX.tsx
@@ -1,8 +1,8 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
-import { useBrushTracker } from '../../EventsTrackers/BrushTracker';
-import { useChartData } from '../../context/ChartContext';
-import { options } from '../../toolbar/ToolTypes';
+import { useBrushTracker } from '../../EventsTrackers/BrushTracker.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { options } from '../../toolbar/ToolTypes.js';
 
 const styles: Record<'container', CSSProperties> = {
   container: {
diff --git a/src/component/1d-2d/tools/BrushXY.tsx b/src/component/1d-2d/tools/BrushXY.tsx
index a6f956dba..7cda3dc49 100644
--- a/src/component/1d-2d/tools/BrushXY.tsx
+++ b/src/component/1d-2d/tools/BrushXY.tsx
@@ -1,8 +1,8 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
-import { useBrushTracker } from '../../EventsTrackers/BrushTracker';
-import { useChartData } from '../../context/ChartContext';
-import { options } from '../../toolbar/ToolTypes';
+import { useBrushTracker } from '../../EventsTrackers/BrushTracker.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { options } from '../../toolbar/ToolTypes.js';
 
 const styles: Record<'container', CSSProperties> = {
   container: {
diff --git a/src/component/1d-2d/tools/CrossLinePointer.tsx b/src/component/1d-2d/tools/CrossLinePointer.tsx
index e800d389e..1665d0737 100644
--- a/src/component/1d-2d/tools/CrossLinePointer.tsx
+++ b/src/component/1d-2d/tools/CrossLinePointer.tsx
@@ -1,9 +1,9 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
-import { useBrushTracker } from '../../EventsTrackers/BrushTracker';
-import { useMouseTracker } from '../../EventsTrackers/MouseTracker';
-import { useChartData } from '../../context/ChartContext';
-import { options } from '../../toolbar/ToolTypes';
+import { useBrushTracker } from '../../EventsTrackers/BrushTracker.js';
+import { useMouseTracker } from '../../EventsTrackers/MouseTracker.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { options } from '../../toolbar/ToolTypes.js';
 
 const styles: Record<'line', CSSProperties> = {
   line: {
diff --git a/src/component/1d/ApodizationLine.tsx b/src/component/1d/ApodizationLine.tsx
index 88f1ec741..2cc9f306c 100644
--- a/src/component/1d/ApodizationLine.tsx
+++ b/src/component/1d/ApodizationLine.tsx
@@ -1,16 +1,16 @@
-import { Spectrum1D } from 'nmr-load-save';
-import { Filters, apodization } from 'nmr-processing';
+import type { Spectrum1D } from 'nmr-load-save';
+import { apodization, Filters } from 'nmr-processing';
 
-import { defaultApodizationOptions } from '../../data/constants/DefaultApodizationOptions';
-import { useChartData } from '../context/ChartContext';
-import { useScaleChecked } from '../context/ScaleContext';
-import { useActiveSpectrum } from '../hooks/useActiveSpectrum';
-import useSpectrum from '../hooks/useSpectrum';
-import { useVerticalAlign } from '../hooks/useVerticalAlign';
-import useXYReduce, { XYReducerDomainAxis } from '../hooks/useXYReduce';
-import { PathBuilder } from '../utility/PathBuilder';
+import { defaultApodizationOptions } from '../../data/constants/DefaultApodizationOptions.js';
+import { useChartData } from '../context/ChartContext.js';
+import { useScaleChecked } from '../context/ScaleContext.js';
+import { useActiveSpectrum } from '../hooks/useActiveSpectrum.js';
+import useSpectrum from '../hooks/useSpectrum.js';
+import { useVerticalAlign } from '../hooks/useVerticalAlign.js';
+import useXYReduce, { XYReducerDomainAxis } from '../hooks/useXYReduce.js';
+import { PathBuilder } from '../utility/PathBuilder.js';
 
-import { getYScale } from './utilities/scale';
+import { getYScale } from './utilities/scale.js';
 
 const emptyData = { data: {}, info: {} };
 
diff --git a/src/component/1d/Chart1D.tsx b/src/component/1d/Chart1D.tsx
index 804897648..a46479327 100644
--- a/src/component/1d/Chart1D.tsx
+++ b/src/component/1d/Chart1D.tsx
@@ -1,25 +1,25 @@
-import SpectrumInfoBlock from '../1d-2d/components/SpectrumInfoBlock';
-import { usePreferences } from '../context/PreferencesContext';
+import SpectrumInfoBlock from '../1d-2d/components/SpectrumInfoBlock.js';
+import { usePreferences } from '../context/PreferencesContext.js';
 
-import ApodizationLine from './ApodizationLine';
-import ExclusionZonesAnnotations from './ExclusionZonesAnnotations';
-import LinesSeries from './LinesSeries';
-import SimilarityTree from './SimilarityTree';
-import SpectraTracker from './SpectraLegends';
-import XAxis from './XAxis';
-import DatabaseElements from './database/DatabaseElements';
-import IntegralsSeries from './integral/IntegralsSeries';
-import JGraph from './jCouplingGraph/JGraph';
-import { Boxplot } from './matrix/Boxplot';
-import { Stocsy } from './matrix/Stocsy';
-import MultiAnalysisRanges from './multiAnalysis/MultiAnalysisRanges';
-import MultiplicityTrees from './multiplicityTree/MultiplicityTrees';
-import { PeakEditionProvider } from './peaks/PeakEditionManager';
-import Peaks from './peaks/Peaks';
-import PeaksShapes from './peaks/PeaksShapes';
-import Ranges from './ranges/Ranges';
-import RangesIntegrals from './ranges/RangesIntegrals';
-import BaseLineZones from './tool/BaseLineZones';
+import ApodizationLine from './ApodizationLine.js';
+import ExclusionZonesAnnotations from './ExclusionZonesAnnotations.js';
+import LinesSeries from './LinesSeries.js';
+import SimilarityTree from './SimilarityTree.js';
+import SpectraTracker from './SpectraLegends.js';
+import XAxis from './XAxis.js';
+import DatabaseElements from './database/DatabaseElements.js';
+import IntegralsSeries from './integral/IntegralsSeries.js';
+import JGraph from './jCouplingGraph/JGraph.js';
+import { Boxplot } from './matrix/Boxplot.js';
+import { Stocsy } from './matrix/Stocsy.js';
+import MultiAnalysisRanges from './multiAnalysis/MultiAnalysisRanges.js';
+import MultiplicityTrees from './multiplicityTree/MultiplicityTrees.js';
+import { PeakEditionProvider } from './peaks/PeakEditionManager.js';
+import Peaks from './peaks/Peaks.js';
+import PeaksShapes from './peaks/PeaksShapes.js';
+import Ranges from './ranges/Ranges.js';
+import RangesIntegrals from './ranges/RangesIntegrals.js';
+import BaseLineZones from './tool/BaseLineZones.js';
 
 function Chart1D({ mode, width, height, margin, displayerKey }) {
   const {
diff --git a/src/component/1d/ExclusionZoneAnnotation.tsx b/src/component/1d/ExclusionZoneAnnotation.tsx
index 2b096fba0..fccbb1f33 100644
--- a/src/component/1d/ExclusionZoneAnnotation.tsx
+++ b/src/component/1d/ExclusionZoneAnnotation.tsx
@@ -3,10 +3,10 @@ import { css } from '@emotion/react';
 import { Filters } from 'nmr-processing';
 import { memo } from 'react';
 
-import { ExclusionZone } from '../../data/types/data1d/ExclusionZone';
-import { useScaleChecked } from '../context/ScaleContext';
-import { HighlightEventSource, useHighlight } from '../highlight';
-import useActiveSpectrumStyleOptions from '../hooks/useActiveSpectrumStyleOptions';
+import type { ExclusionZone } from '../../data/types/data1d/ExclusionZone.js';
+import { useScaleChecked } from '../context/ScaleContext.js';
+import { HighlightEventSource, useHighlight } from '../highlight/index.js';
+import useActiveSpectrumStyleOptions from '../hooks/useActiveSpectrumStyleOptions.js';
 
 interface ExclusionZoneProps {
   zone: ExclusionZone;
diff --git a/src/component/1d/ExclusionZonesAnnotations.tsx b/src/component/1d/ExclusionZonesAnnotations.tsx
index 56bde8de4..43e0ae445 100644
--- a/src/component/1d/ExclusionZonesAnnotations.tsx
+++ b/src/component/1d/ExclusionZonesAnnotations.tsx
@@ -1,13 +1,13 @@
-import { Spectrum1D } from 'nmr-load-save';
+import type { Spectrum1D } from 'nmr-load-save';
 import { Filters } from 'nmr-processing';
 import { memo } from 'react';
 
-import { ExclusionZone } from '../../data/types/data1d/ExclusionZone';
-import { useChartData } from '../context/ChartContext';
-import { useScale } from '../context/ScaleContext';
-import useSpectraByActiveNucleus from '../hooks/useSpectraPerNucleus';
+import type { ExclusionZone } from '../../data/types/data1d/ExclusionZone.js';
+import { useChartData } from '../context/ChartContext.js';
+import { useScale } from '../context/ScaleContext.js';
+import useSpectraByActiveNucleus from '../hooks/useSpectraPerNucleus.js';
 
-import ExclusionZoneAnnotation from './ExclusionZoneAnnotation';
+import ExclusionZoneAnnotation from './ExclusionZoneAnnotation.js';
 
 interface ExclusionZonesAnnotationsInnerProps {
   displayerKey: string;
diff --git a/src/component/1d/FooterBanner.tsx b/src/component/1d/FooterBanner.tsx
index 9abf605c6..793fab00e 100644
--- a/src/component/1d/FooterBanner.tsx
+++ b/src/component/1d/FooterBanner.tsx
@@ -1,19 +1,19 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import { xFindClosestIndex } from 'ml-spectra-processing';
-import { ActiveSpectrum, Spectrum1D } from 'nmr-load-save';
+import type { ActiveSpectrum, Spectrum1D } from 'nmr-load-save';
 import { memo } from 'react';
 import { BsCursor } from 'react-icons/bs';
 import { IoPulseSharp } from 'react-icons/io5';
 
-import { get1DDataXY } from '../../data/data1d/Spectrum1D/get1DDataXY';
-import { useBrushTracker } from '../EventsTrackers/BrushTracker';
-import { useMouseTracker } from '../EventsTrackers/MouseTracker';
-import { useChartData } from '../context/ChartContext';
-import { useScaleChecked } from '../context/ScaleContext';
-import { useActiveSpectrum } from '../hooks/useActiveSpectrum';
-import { useFormatNumberByNucleus } from '../hooks/useFormatNumberByNucleus';
-import useSpectrum from '../hooks/useSpectrum';
+import { get1DDataXY } from '../../data/data1d/Spectrum1D/get1DDataXY.js';
+import { useBrushTracker } from '../EventsTrackers/BrushTracker.js';
+import { useMouseTracker } from '../EventsTrackers/MouseTracker.js';
+import { useChartData } from '../context/ChartContext.js';
+import { useScaleChecked } from '../context/ScaleContext.js';
+import { useActiveSpectrum } from '../hooks/useActiveSpectrum.js';
+import { useFormatNumberByNucleus } from '../hooks/useFormatNumberByNucleus.js';
+import useSpectrum from '../hooks/useSpectrum.js';
 
 const styles = css`
   display: flex;
diff --git a/src/component/1d/Line.tsx b/src/component/1d/Line.tsx
index 8e183ccbe..aa9832431 100644
--- a/src/component/1d/Line.tsx
+++ b/src/component/1d/Line.tsx
@@ -1,10 +1,11 @@
-import { CSSProperties, useMemo } from 'react';
+import type { CSSProperties } from 'react';
+import { useMemo } from 'react';
 
-import { useScaleChecked } from '../context/ScaleContext';
-import useActiveSpectrumStyleOptions from '../hooks/useActiveSpectrumStyleOptions';
-import useXYReduce, { XYReducerDomainAxis } from '../hooks/useXYReduce';
-import { PathBuilder } from '../utility/PathBuilder';
-import { parseColor } from '../utility/parseColor';
+import { useScaleChecked } from '../context/ScaleContext.js';
+import useActiveSpectrumStyleOptions from '../hooks/useActiveSpectrumStyleOptions.js';
+import useXYReduce, { XYReducerDomainAxis } from '../hooks/useXYReduce.js';
+import { PathBuilder } from '../utility/PathBuilder.js';
+import { parseColor } from '../utility/parseColor.js';
 
 interface LineProps {
   data?: {
diff --git a/src/component/1d/LinesSeries.tsx b/src/component/1d/LinesSeries.tsx
index 04d37688c..d005cb7c1 100644
--- a/src/component/1d/LinesSeries.tsx
+++ b/src/component/1d/LinesSeries.tsx
@@ -1,18 +1,18 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { Spectrum1D } from 'nmr-load-save';
+import type { Spectrum1D } from 'nmr-load-save';
 
-import { get1DDataXY } from '../../data/data1d/Spectrum1D/get1DDataXY';
-import { isSpectrum1D } from '../../data/data1d/Spectrum1D/isSpectrum1D';
-import { useBrushTracker } from '../EventsTrackers/BrushTracker';
-import { useChartData } from '../context/ChartContext';
-import { useScaleChecked } from '../context/ScaleContext';
-import { useActiveSpectra } from '../hooks/useActiveSpectra';
-import { useSetActiveSpectrumAction } from '../hooks/useSetActiveSpectrumAction';
-import { useVerticalAlign } from '../hooks/useVerticalAlign';
+import { get1DDataXY } from '../../data/data1d/Spectrum1D/get1DDataXY.js';
+import { isSpectrum1D } from '../../data/data1d/Spectrum1D/isSpectrum1D.js';
+import { useBrushTracker } from '../EventsTrackers/BrushTracker.js';
+import { useChartData } from '../context/ChartContext.js';
+import { useScaleChecked } from '../context/ScaleContext.js';
+import { useActiveSpectra } from '../hooks/useActiveSpectra.js';
+import { useSetActiveSpectrumAction } from '../hooks/useSetActiveSpectrumAction.js';
+import { useVerticalAlign } from '../hooks/useVerticalAlign.js';
 
-import Line from './Line';
-import { SPECTRA_BOTTOM_MARGIN } from './utilities/scale';
+import Line from './Line.js';
+import { SPECTRA_BOTTOM_MARGIN } from './utilities/scale.js';
 
 const BOX_SIZE = 10;
 
diff --git a/src/component/1d/SimilarityTree.tsx b/src/component/1d/SimilarityTree.tsx
index 9b3d4f1d2..5bc77b160 100644
--- a/src/component/1d/SimilarityTree.tsx
+++ b/src/component/1d/SimilarityTree.tsx
@@ -1,11 +1,12 @@
 import { createTree } from 'ml-tree-similarity';
-import { CSSProperties, Fragment } from 'react';
+import type { CSSProperties } from 'react';
+import { Fragment } from 'react';
 
-import { isSpectrum1D } from '../../data/data1d/Spectrum1D';
-import { useChartData } from '../context/ChartContext';
-import { useScaleChecked } from '../context/ScaleContext';
-import { useFormatNumberByNucleus } from '../hooks/useFormatNumberByNucleus';
-import useSpectrum from '../hooks/useSpectrum';
+import { isSpectrum1D } from '../../data/data1d/Spectrum1D/index.js';
+import { useChartData } from '../context/ChartContext.js';
+import { useScaleChecked } from '../context/ScaleContext.js';
+import { useFormatNumberByNucleus } from '../hooks/useFormatNumberByNucleus.js';
+import useSpectrum from '../hooks/useSpectrum.js';
 
 const circleSize = 3;
 const marginTop = circleSize + 10;
diff --git a/src/component/1d/SpectraLegends.tsx b/src/component/1d/SpectraLegends.tsx
index c3c7e5de2..e1b9faa5a 100644
--- a/src/component/1d/SpectraLegends.tsx
+++ b/src/component/1d/SpectraLegends.tsx
@@ -1,22 +1,22 @@
-import lodashGet from 'lodash/get';
+import lodashGet from 'lodash/get.js';
 import { xFindClosestIndex } from 'ml-spectra-processing';
-import {
-  Spectrum,
-  Spectrum1D,
+import type {
   JpathLegendField,
   LegendField,
   PredefinedLegendField,
+  Spectrum,
+  Spectrum1D,
 } from 'nmr-load-save';
-import { CSSProperties } from 'react';
-
-import { get1DDataXY } from '../../data/data1d/Spectrum1D/get1DDataXY';
-import { useMouseTracker } from '../EventsTrackers/MouseTracker';
-import { useChartData } from '../context/ChartContext';
-import { useScale } from '../context/ScaleContext';
-import { SVGGroup } from '../elements/SVGGroup';
-import { useActiveSpectra } from '../hooks/useActiveSpectra';
-import { usePanelPreferences } from '../hooks/usePanelPreferences';
-import { convertPathArrayToString } from '../utility/convertPathArrayToString';
+import type { CSSProperties } from 'react';
+
+import { get1DDataXY } from '../../data/data1d/Spectrum1D/get1DDataXY.js';
+import { useMouseTracker } from '../EventsTrackers/MouseTracker.js';
+import { useChartData } from '../context/ChartContext.js';
+import { useScale } from '../context/ScaleContext.js';
+import { SVGGroup } from '../elements/SVGGroup.js';
+import { useActiveSpectra } from '../hooks/useActiveSpectra.js';
+import { usePanelPreferences } from '../hooks/usePanelPreferences.js';
+import { convertPathArrayToString } from '../utility/convertPathArrayToString.js';
 
 const styles: Record<'text' | 'colorIndicator', CSSProperties> = {
   text: {
diff --git a/src/component/1d/Viewer1D.tsx b/src/component/1d/Viewer1D.tsx
index ec0986b72..16d6d85f4 100644
--- a/src/component/1d/Viewer1D.tsx
+++ b/src/component/1d/Viewer1D.tsx
@@ -1,55 +1,53 @@
-import {
-  useCallback,
-  useEffect,
-  useReducer,
-  ReactNode,
-  useRef,
-  useState,
-} from 'react';
+import type { ReactNode } from 'react';
+import { useCallback, useEffect, useReducer, useRef, useState } from 'react';
 import { ResponsiveChart } from 'react-d3-utils';
 import { useOnOff } from 'react-science/ui';
 
-import { createRange, isSpectrum1D } from '../../data/data1d/Spectrum1D';
-import { cutRange } from '../../data/data1d/Spectrum1D/ranges/createRange';
-import BrushXY, { BRUSH_TYPE } from '../1d-2d/tools/BrushXY';
-import CrossLinePointer from '../1d-2d/tools/CrossLinePointer';
-import { ViewerResponsiveWrapper } from '../2d/Viewer2D';
 import {
-  BrushTracker,
+  createRange,
+  isSpectrum1D,
+} from '../../data/data1d/Spectrum1D/index.js';
+import { cutRange } from '../../data/data1d/Spectrum1D/ranges/createRange.js';
+import BrushXY, { BRUSH_TYPE } from '../1d-2d/tools/BrushXY.js';
+import CrossLinePointer from '../1d-2d/tools/CrossLinePointer.js';
+import { ViewerResponsiveWrapper } from '../2d/Viewer2D.js';
+import type {
   BrushTrackerContext,
   OnBrush,
   OnClick,
   OnZoom,
-} from '../EventsTrackers/BrushTracker';
-import { MouseTracker } from '../EventsTrackers/MouseTracker';
-import { useChartData } from '../context/ChartContext';
-import { useDispatch } from '../context/DispatchContext';
-import { useMapKeyModifiers } from '../context/KeyModifierContext';
-import { useLogger } from '../context/LoggerContext';
-import { usePreferences } from '../context/PreferencesContext';
-import { ScaleProvider } from '../context/ScaleContext';
-import { useActiveSpectrum } from '../hooks/useActiveSpectrum';
-import { usePanelPreferences } from '../hooks/usePanelPreferences';
-import useSpectrum from '../hooks/useSpectrum';
-import { useVerticalAlign } from '../hooks/useVerticalAlign';
-import Spinner from '../loader/Spinner';
-import MultipletAnalysisModal from '../modal/MultipletAnalysisModal';
-import { ZOOM_TYPES } from '../reducer/helper/Zoom1DManager';
-import getRange from '../reducer/helper/getRange';
+} from '../EventsTrackers/BrushTracker.js';
+import { BrushTracker } from '../EventsTrackers/BrushTracker.js';
+import { MouseTracker } from '../EventsTrackers/MouseTracker.js';
+import { useChartData } from '../context/ChartContext.js';
+import { useDispatch } from '../context/DispatchContext.js';
+import { useMapKeyModifiers } from '../context/KeyModifierContext.js';
+import { useLogger } from '../context/LoggerContext.js';
+import { usePreferences } from '../context/PreferencesContext.js';
+import { ScaleProvider } from '../context/ScaleContext.js';
+import { useActiveSpectrum } from '../hooks/useActiveSpectrum.js';
+import { usePanelPreferences } from '../hooks/usePanelPreferences.js';
+import useSpectrum from '../hooks/useSpectrum.js';
+import { useVerticalAlign } from '../hooks/useVerticalAlign.js';
+import Spinner from '../loader/Spinner.js';
+import MultipletAnalysisModal from '../modal/MultipletAnalysisModal.js';
+import { ZOOM_TYPES } from '../reducer/helper/Zoom1DManager.js';
+import getRange from '../reducer/helper/getRange.js';
 import scaleReducer, {
   scaleInitialState,
   SET_SCALE,
-} from '../reducer/scaleReducer';
-import { Tool, options } from '../toolbar/ToolTypes';
-import Events from '../utility/Events';
-
-import Chart1D from './Chart1D';
-import FooterBanner from './FooterBanner';
-import BaseLine from './tool/BaseLine';
-import PeakPointer from './tool/PeakPointer';
-import { PivotIndicator } from './tool/PivotIndicator';
-import XLabelPointer from './tool/XLabelPointer';
-import { getXScale } from './utilities/scale';
+} from '../reducer/scaleReducer.js';
+import type { Tool } from '../toolbar/ToolTypes.js';
+import { options } from '../toolbar/ToolTypes.js';
+import Events from '../utility/Events.js';
+
+import Chart1D from './Chart1D.js';
+import FooterBanner from './FooterBanner.js';
+import BaseLine from './tool/BaseLine.js';
+import PeakPointer from './tool/PeakPointer.js';
+import { PivotIndicator } from './tool/PivotIndicator.js';
+import XLabelPointer from './tool/XLabelPointer.js';
+import { getXScale } from './utilities/scale.js';
 
 interface Viewer1DProps {
   emptyText?: ReactNode;
diff --git a/src/component/1d/XAxis.tsx b/src/component/1d/XAxis.tsx
index b5d797c75..27a442efc 100644
--- a/src/component/1d/XAxis.tsx
+++ b/src/component/1d/XAxis.tsx
@@ -3,8 +3,8 @@ import { css } from '@emotion/react';
 import * as d3 from 'd3';
 import { useEffect, useRef } from 'react';
 
-import { useChartData } from '../context/ChartContext';
-import { useScale } from '../context/ScaleContext';
+import { useChartData } from '../context/ChartContext.js';
+import { useScale } from '../context/ScaleContext.js';
 
 const axisStyles = css`
   user-select: none;
diff --git a/src/component/1d/YAxis.tsx b/src/component/1d/YAxis.tsx
index f6770338a..cdf948204 100644
--- a/src/component/1d/YAxis.tsx
+++ b/src/component/1d/YAxis.tsx
@@ -3,8 +3,8 @@ import { css } from '@emotion/react';
 import * as d3 from 'd3';
 import { useEffect, useRef } from 'react';
 
-import { useChartData } from '../context/ChartContext';
-import { useScale } from '../context/ScaleContext';
+import { useChartData } from '../context/ChartContext.js';
+import { useScale } from '../context/ScaleContext.js';
 
 const axisStyles = css`
   user-select: none;
diff --git a/src/component/1d/database/DatabaseElements.tsx b/src/component/1d/database/DatabaseElements.tsx
index 4e513117c..fd7df3244 100644
--- a/src/component/1d/database/DatabaseElements.tsx
+++ b/src/component/1d/database/DatabaseElements.tsx
@@ -1,8 +1,11 @@
-import { HighlightEventSource, useHighlightData } from '../../highlight';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
+import {
+  HighlightEventSource,
+  useHighlightData,
+} from '../../highlight/index.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
 
-import DatabaseSpectrum from './DatabaseSpectrum';
-import ResurrectedDatabaseRanges from './ResurrectedDatabaseRanges';
+import DatabaseSpectrum from './DatabaseSpectrum.js';
+import ResurrectedDatabaseRanges from './ResurrectedDatabaseRanges.js';
 
 function DatabaseElements() {
   const { highlight } = useHighlightData();
diff --git a/src/component/1d/database/DatabaseSpectrum.tsx b/src/component/1d/database/DatabaseSpectrum.tsx
index bc74ed5aa..b98c80ae3 100644
--- a/src/component/1d/database/DatabaseSpectrum.tsx
+++ b/src/component/1d/database/DatabaseSpectrum.tsx
@@ -1,16 +1,20 @@
 import { extent } from 'd3';
-import throttle from 'lodash/throttle';
-import { readFromWebSource, Spectrum1D } from 'nmr-load-save';
+import throttle from 'lodash/throttle.js';
+import type { Spectrum1D } from 'nmr-load-save';
+import { readFromWebSource } from 'nmr-load-save';
 import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 
-import { useChartData } from '../../context/ChartContext';
-import { useScaleChecked } from '../../context/ScaleContext';
-import { useToaster } from '../../context/ToasterContext';
-import { HighlightEventSource, useHighlightData } from '../../highlight';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
-import { spinnerContext } from '../../loader/SpinnerContext';
-import { PathBuilder } from '../../utility/PathBuilder';
-import { getYScaleWithRation } from '../utilities/scale';
+import { useChartData } from '../../context/ChartContext.js';
+import { useScaleChecked } from '../../context/ScaleContext.js';
+import { useToaster } from '../../context/ToasterContext.js';
+import {
+  HighlightEventSource,
+  useHighlightData,
+} from '../../highlight/index.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
+import { spinnerContext } from '../../loader/SpinnerContext.js';
+import { PathBuilder } from '../../utility/PathBuilder.js';
+import { getYScaleWithRation } from '../utilities/scale.js';
 
 function DatabaseSpectrum() {
   const { displayerKey, height, margin } = useChartData();
diff --git a/src/component/1d/database/ResurrectedDatabaseRanges.tsx b/src/component/1d/database/ResurrectedDatabaseRanges.tsx
index dd047d347..3297bf81f 100644
--- a/src/component/1d/database/ResurrectedDatabaseRanges.tsx
+++ b/src/component/1d/database/ResurrectedDatabaseRanges.tsx
@@ -1,15 +1,18 @@
 import { extent } from 'd3';
-import { Spectrum1D } from 'nmr-load-save';
+import type { Spectrum1D } from 'nmr-load-save';
 import { rangesToXY } from 'nmr-processing';
 
-import { useChartData } from '../../context/ChartContext';
-import { useScaleChecked } from '../../context/ScaleContext';
-import { HighlightEventSource, useHighlightData } from '../../highlight';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
-import useSpectrum from '../../hooks/useSpectrum';
-import { useVerticalAlign } from '../../hooks/useVerticalAlign';
-import { PathBuilder } from '../../utility/PathBuilder';
-import { getYScale } from '../utilities/scale';
+import { useChartData } from '../../context/ChartContext.js';
+import { useScaleChecked } from '../../context/ScaleContext.js';
+import {
+  HighlightEventSource,
+  useHighlightData,
+} from '../../highlight/index.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
+import { useVerticalAlign } from '../../hooks/useVerticalAlign.js';
+import { PathBuilder } from '../../utility/PathBuilder.js';
+import { getYScale } from '../utilities/scale.js';
 
 const emptyData = { info: { originFrequency: 400 } };
 
diff --git a/src/component/1d/integral/IntegralIndicator.tsx b/src/component/1d/integral/IntegralIndicator.tsx
index f3b95b843..680e51cca 100644
--- a/src/component/1d/integral/IntegralIndicator.tsx
+++ b/src/component/1d/integral/IntegralIndicator.tsx
@@ -1,7 +1,7 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
-import { useChartData } from '../../context/ChartContext';
-import { formatNumber } from '../../utility/formatNumber';
+import { useChartData } from '../../context/ChartContext.js';
+import { formatNumber } from '../../utility/formatNumber.js';
 
 interface IntegralIndicatorProps {
   value: number | undefined;
diff --git a/src/component/1d/integral/IntegralResizable.tsx b/src/component/1d/integral/IntegralResizable.tsx
index 9935eb640..5dea708d7 100644
--- a/src/component/1d/integral/IntegralResizable.tsx
+++ b/src/component/1d/integral/IntegralResizable.tsx
@@ -1,15 +1,15 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { Integral } from 'nmr-processing';
+import type { Integral } from 'nmr-processing';
 
-import { useChartData } from '../../context/ChartContext';
-import { useDispatch } from '../../context/DispatchContext';
-import { useScaleChecked } from '../../context/ScaleContext';
-import { ResizerWithScale } from '../../elements/ResizerWithScale';
-import { HighlightEventSource, useHighlight } from '../../highlight/index';
-import { useResizerStatus } from '../../hooks/useResizerStatus';
+import { useChartData } from '../../context/ChartContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { useScaleChecked } from '../../context/ScaleContext.js';
+import { ResizerWithScale } from '../../elements/ResizerWithScale.js';
+import { HighlightEventSource, useHighlight } from '../../highlight/index.js';
+import { useResizerStatus } from '../../hooks/useResizerStatus.js';
 
-import { IntegralIndicator } from './IntegralIndicator';
+import { IntegralIndicator } from './IntegralIndicator.js';
 
 const stylesOnHover = css`
   pointer-events: bounding-box;
diff --git a/src/component/1d/integral/IntegralsSeries.tsx b/src/component/1d/integral/IntegralsSeries.tsx
index eea7c8714..413bde3ed 100644
--- a/src/component/1d/integral/IntegralsSeries.tsx
+++ b/src/component/1d/integral/IntegralsSeries.tsx
@@ -1,11 +1,11 @@
 import { xyIntegral, xyMaxY } from 'ml-spectra-processing';
-import { Spectrum1D } from 'nmr-load-save';
-import { Integral as IntegralType } from 'nmr-processing';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { Integral as IntegralType } from 'nmr-processing';
 
-import { useChartData } from '../../context/ChartContext';
-import useSpectrum from '../../hooks/useSpectrum';
+import { useChartData } from '../../context/ChartContext.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
 
-import { Integration } from './Integration';
+import { Integration } from './Integration.js';
 
 const emptyData = { integrals: {}, info: {}, display: {} };
 
diff --git a/src/component/1d/integral/Integration.tsx b/src/component/1d/integral/Integration.tsx
index 9cacfcdd3..7524c555d 100644
--- a/src/component/1d/integral/Integration.tsx
+++ b/src/component/1d/integral/Integration.tsx
@@ -1,9 +1,9 @@
-import { useActiveSpectrumIntegralsViewState } from '../../hooks/useActiveSpectrumIntegralsViewState';
-import useIntegralPath from '../../hooks/useIntegralPath';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
+import { useActiveSpectrumIntegralsViewState } from '../../hooks/useActiveSpectrumIntegralsViewState.js';
+import useIntegralPath from '../../hooks/useIntegralPath.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
 
-import IntegralResizable from './IntegralResizable';
-import { IntegralData } from './IntegralsSeries';
+import IntegralResizable from './IntegralResizable.js';
+import type { IntegralData } from './IntegralsSeries.js';
 
 interface IntegralProps {
   integral: IntegralData;
diff --git a/src/component/1d/jCouplingGraph/JGraph.tsx b/src/component/1d/jCouplingGraph/JGraph.tsx
index 76ecc1427..a5247d599 100644
--- a/src/component/1d/jCouplingGraph/JGraph.tsx
+++ b/src/component/1d/jCouplingGraph/JGraph.tsx
@@ -1,20 +1,19 @@
 import { scaleLinear } from 'd3';
-import { Spectrum1D } from 'nmr-load-save';
-import { Signal1D } from 'nmr-processing';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { Signal1D } from 'nmr-processing';
 import { memo, useMemo } from 'react';
 
-import generateJGraphData, {
-  CouplingLink,
-} from '../../../data/data1d/Spectrum1D/generateJGraphData';
-import { useChartData } from '../../context/ChartContext';
-import { useActiveSpectrumRangesViewState } from '../../hooks/useActiveSpectrumRangesViewState';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
-import useSpectrum from '../../hooks/useSpectrum';
+import type { CouplingLink } from '../../../data/data1d/Spectrum1D/generateJGraphData.js';
+import generateJGraphData from '../../../data/data1d/Spectrum1D/generateJGraphData.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { useActiveSpectrumRangesViewState } from '../../hooks/useActiveSpectrumRangesViewState.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
 
-import { JGraphContextProvider } from './JGraphContext';
-import { JGraphVerticalAxis } from './JGraphVerticalAxis';
-import JCouplingLinks from './JsCouplingLinks';
-import JsCouplings from './JsCouplings';
+import { JGraphContextProvider } from './JGraphContext.js';
+import { JGraphVerticalAxis } from './JGraphVerticalAxis.js';
+import JCouplingLinks from './JsCouplingLinks.js';
+import JsCouplings from './JsCouplings.js';
 
 const marginTop = 50;
 
diff --git a/src/component/1d/jCouplingGraph/JGraphContext.tsx b/src/component/1d/jCouplingGraph/JGraphContext.tsx
index 471b0ae66..966016149 100644
--- a/src/component/1d/jCouplingGraph/JGraphContext.tsx
+++ b/src/component/1d/jCouplingGraph/JGraphContext.tsx
@@ -1,5 +1,5 @@
-import { ScaleLinear } from 'd3';
-import { useContext, createContext } from 'react';
+import type { ScaleLinear } from 'd3';
+import { createContext, useContext } from 'react';
 
 interface JGraphState {
   scaleY: ScaleLinear<number, number> | null;
diff --git a/src/component/1d/jCouplingGraph/JGraphVerticalAxis.tsx b/src/component/1d/jCouplingGraph/JGraphVerticalAxis.tsx
index 8a895b697..beb114658 100644
--- a/src/component/1d/jCouplingGraph/JGraphVerticalAxis.tsx
+++ b/src/component/1d/jCouplingGraph/JGraphVerticalAxis.tsx
@@ -1,7 +1,7 @@
-import { useChartData } from '../../context/ChartContext';
-import { LinearVerticalAxis } from '../../elements/linearAxis/LinearVerticalAxis';
+import { useChartData } from '../../context/ChartContext.js';
+import { LinearVerticalAxis } from '../../elements/linearAxis/LinearVerticalAxis.js';
 
-import { useJGraph } from './JGraphContext';
+import { useJGraph } from './JGraphContext.js';
 
 export function JGraphVerticalAxis() {
   const { width, margin } = useChartData();
diff --git a/src/component/1d/jCouplingGraph/JsCoupling.tsx b/src/component/1d/jCouplingGraph/JsCoupling.tsx
index 5d6a769b0..1fab0ac2e 100644
--- a/src/component/1d/jCouplingGraph/JsCoupling.tsx
+++ b/src/component/1d/jCouplingGraph/JsCoupling.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { useJGraph } from './JGraphContext';
+import { useJGraph } from './JGraphContext.js';
 
 interface JsCouplingProps {
   value: number;
diff --git a/src/component/1d/jCouplingGraph/JsCouplingLinks.tsx b/src/component/1d/jCouplingGraph/JsCouplingLinks.tsx
index d5c3639f4..25f6c5478 100644
--- a/src/component/1d/jCouplingGraph/JsCouplingLinks.tsx
+++ b/src/component/1d/jCouplingGraph/JsCouplingLinks.tsx
@@ -1,9 +1,9 @@
 import { useCallback } from 'react';
 
-import { CouplingLink } from '../../../data/data1d/Spectrum1D/generateJGraphData';
-import { useScaleChecked } from '../../context/ScaleContext';
+import type { CouplingLink } from '../../../data/data1d/Spectrum1D/generateJGraphData.js';
+import { useScaleChecked } from '../../context/ScaleContext.js';
 
-import { useJGraph } from './JGraphContext';
+import { useJGraph } from './JGraphContext.js';
 
 interface JsCouplingLinksProps {
   links: CouplingLink[];
diff --git a/src/component/1d/jCouplingGraph/JsCouplings.tsx b/src/component/1d/jCouplingGraph/JsCouplings.tsx
index 1fd83c6d6..33e689606 100644
--- a/src/component/1d/jCouplingGraph/JsCouplings.tsx
+++ b/src/component/1d/jCouplingGraph/JsCouplings.tsx
@@ -1,9 +1,9 @@
-import { Signal1D } from 'nmr-processing';
+import type { Signal1D } from 'nmr-processing';
 
-import { useScaleChecked } from '../../context/ScaleContext';
+import { useScaleChecked } from '../../context/ScaleContext.js';
 
-import { useJGraph } from './JGraphContext';
-import JsCoupling from './JsCoupling';
+import { useJGraph } from './JGraphContext.js';
+import JsCoupling from './JsCoupling.js';
 
 interface JsCouplingsProps {
   signals: Signal1D[];
diff --git a/src/component/1d/matrix/Boxplot.tsx b/src/component/1d/matrix/Boxplot.tsx
index 0e90a696b..0c4f6f90b 100644
--- a/src/component/1d/matrix/Boxplot.tsx
+++ b/src/component/1d/matrix/Boxplot.tsx
@@ -1,16 +1,17 @@
-import { NumberArray } from 'cheminfo-types';
+import type { NumberArray } from 'cheminfo-types';
 import { extent } from 'd3';
 import { xFindClosestIndex } from 'ml-spectra-processing';
 import { matrixToBoxPlot } from 'nmr-processing';
-import { CSSProperties, useMemo } from 'react';
+import type { CSSProperties } from 'react';
+import { useMemo } from 'react';
 
-import { useChartData } from '../../context/ChartContext';
-import { useScaleChecked } from '../../context/ScaleContext';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
-import { PathBuilder } from '../../utility/PathBuilder';
-import { getYScaleWithRation } from '../utilities/scale';
+import { useChartData } from '../../context/ChartContext.js';
+import { useScaleChecked } from '../../context/ScaleContext.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
+import { PathBuilder } from '../../utility/PathBuilder.js';
+import { getYScaleWithRation } from '../utilities/scale.js';
 
-import { sliceArrayForDomain, useMatrix } from './useMatrix';
+import { sliceArrayForDomain, useMatrix } from './useMatrix.js';
 
 interface InnerBoxplotProps {
   scaleRatio: number;
diff --git a/src/component/1d/matrix/Stocsy.tsx b/src/component/1d/matrix/Stocsy.tsx
index 50f10607f..86d58d7a2 100644
--- a/src/component/1d/matrix/Stocsy.tsx
+++ b/src/component/1d/matrix/Stocsy.tsx
@@ -3,17 +3,17 @@ import { xFindClosestIndex } from 'ml-spectra-processing';
 import { matrixToStocsy } from 'nmr-processing';
 import { useMemo } from 'react';
 
-import { useChartData } from '../../context/ChartContext';
-import { useScaleChecked } from '../../context/ScaleContext';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
-import { PathBuilder } from '../../utility/PathBuilder';
-import { getYScaleWithRation } from '../utilities/scale';
+import { useChartData } from '../../context/ChartContext.js';
+import { useScaleChecked } from '../../context/ScaleContext.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
+import { PathBuilder } from '../../utility/PathBuilder.js';
+import { getYScaleWithRation } from '../utilities/scale.js';
 
 import {
-  sliceArrayForDomain,
   groupPointsByColor,
+  sliceArrayForDomain,
   useMatrix,
-} from './useMatrix';
+} from './useMatrix.js';
 
 interface StocsyProps {
   x: Float64Array | number[];
diff --git a/src/component/1d/matrix/useMatrix.ts b/src/component/1d/matrix/useMatrix.ts
index 413ea9ba7..a6e5bb6cf 100644
--- a/src/component/1d/matrix/useMatrix.ts
+++ b/src/component/1d/matrix/useMatrix.ts
@@ -1,11 +1,11 @@
-import { NumberArray } from 'cheminfo-types';
-import { Spectrum } from 'nmr-load-save';
+import type { NumberArray } from 'cheminfo-types';
+import type { Spectrum } from 'nmr-load-save';
 import { Filters } from 'nmr-processing';
 import { useMemo } from 'react';
 
-import { isSpectrum1D } from '../../../data/data1d/Spectrum1D';
-import { useChartData } from '../../context/ChartContext';
-import useSpectraByActiveNucleus from '../../hooks/useSpectraPerNucleus';
+import { isSpectrum1D } from '../../../data/data1d/Spectrum1D/index.js';
+import { useChartData } from '../../context/ChartContext.js';
+import useSpectraByActiveNucleus from '../../hooks/useSpectraPerNucleus.js';
 
 const { signalProcessing } = Filters;
 
diff --git a/src/component/1d/multiAnalysis/AnalysisRange.tsx b/src/component/1d/multiAnalysis/AnalysisRange.tsx
index be002837c..cad8d06f1 100644
--- a/src/component/1d/multiAnalysis/AnalysisRange.tsx
+++ b/src/component/1d/multiAnalysis/AnalysisRange.tsx
@@ -2,11 +2,11 @@
 import { css } from '@emotion/react';
 import { useCallback } from 'react';
 
-import { usePreferences } from '../../context/PreferencesContext';
-import { useScaleChecked } from '../../context/ScaleContext';
-import { ResizerWithScale } from '../../elements/ResizerWithScale';
-import { useHighlight } from '../../highlight';
-import { useResizerStatus } from '../../hooks/useResizerStatus';
+import { usePreferences } from '../../context/PreferencesContext.js';
+import { useScaleChecked } from '../../context/ScaleContext.js';
+import { ResizerWithScale } from '../../elements/ResizerWithScale.js';
+import { useHighlight } from '../../highlight/index.js';
+import { useResizerStatus } from '../../hooks/useResizerStatus.js';
 
 const styles = {
   common: css`
diff --git a/src/component/1d/multiAnalysis/MultiAnalysisRanges.tsx b/src/component/1d/multiAnalysis/MultiAnalysisRanges.tsx
index 4275296fe..387ae11b7 100644
--- a/src/component/1d/multiAnalysis/MultiAnalysisRanges.tsx
+++ b/src/component/1d/multiAnalysis/MultiAnalysisRanges.tsx
@@ -1,10 +1,11 @@
-import { AnalysisColumnsTypes, SpectraAnalysisColumns } from 'nmr-load-save';
+import type { SpectraAnalysisColumns } from 'nmr-load-save';
+import { AnalysisColumnsTypes } from 'nmr-load-save';
 import { memo } from 'react';
 
-import { useChartData } from '../../context/ChartContext';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
+import { useChartData } from '../../context/ChartContext.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
 
-import AnalysisRange from './AnalysisRange';
+import AnalysisRange from './AnalysisRange.js';
 
 interface MultiAnalysisRangesInnerProps {
   displayerKey: string;
diff --git a/src/component/1d/multiplicityTree/MultiplicityTree.tsx b/src/component/1d/multiplicityTree/MultiplicityTree.tsx
index 688d8d41c..e47050cb5 100644
--- a/src/component/1d/multiplicityTree/MultiplicityTree.tsx
+++ b/src/component/1d/multiplicityTree/MultiplicityTree.tsx
@@ -1,23 +1,24 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import { xFindClosestIndex } from 'ml-spectra-processing';
-import { Spectrum1D } from 'nmr-load-save';
-import { Range } from 'nmr-processing';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { Range } from 'nmr-processing';
 
-import { isSpectrum1D } from '../../../data/data1d/Spectrum1D';
+import { isSpectrum1D } from '../../../data/data1d/Spectrum1D/index.js';
+import type { AssignmentsData } from '../../assignment/AssignmentsContext.js';
 import {
-  AssignmentsData,
   useAssignment,
   useAssignmentData,
-} from '../../assignment/AssignmentsContext';
-import { useChartData } from '../../context/ChartContext';
-import { useDispatch } from '../../context/DispatchContext';
-import { useScaleChecked } from '../../context/ScaleContext';
-import { HighlightEventSource, useHighlight } from '../../highlight';
-import useSpectrum from '../../hooks/useSpectrum';
-import { AssignmentActionsButtons } from '../ranges/AssignmentActionsButtons';
-
-import { TreeNodes, generateTreeNodes } from './generateTreeNodes';
+} from '../../assignment/AssignmentsContext.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { useScaleChecked } from '../../context/ScaleContext.js';
+import { HighlightEventSource, useHighlight } from '../../highlight/index.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
+import { AssignmentActionsButtons } from '../ranges/AssignmentActionsButtons.js';
+
+import type { TreeNodes } from './generateTreeNodes.js';
+import { generateTreeNodes } from './generateTreeNodes.js';
 
 const styles = {
   cursor: 'default',
diff --git a/src/component/1d/multiplicityTree/MultiplicityTrees.tsx b/src/component/1d/multiplicityTree/MultiplicityTrees.tsx
index 4ef710d93..74b75f477 100644
--- a/src/component/1d/multiplicityTree/MultiplicityTrees.tsx
+++ b/src/component/1d/multiplicityTree/MultiplicityTrees.tsx
@@ -1,12 +1,12 @@
-import { Spectrum1D } from 'nmr-load-save';
-import { Ranges as RangesProps } from 'nmr-processing';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { Ranges as RangesProps } from 'nmr-processing';
 import { memo } from 'react';
 
-import { useChartData } from '../../context/ChartContext';
-import { useActiveSpectrumRangesViewState } from '../../hooks/useActiveSpectrumRangesViewState';
-import useSpectrum from '../../hooks/useSpectrum';
+import { useChartData } from '../../context/ChartContext.js';
+import { useActiveSpectrumRangesViewState } from '../../hooks/useActiveSpectrumRangesViewState.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
 
-import MultiplicityTreeNode from './MultiplicityTree';
+import MultiplicityTreeNode from './MultiplicityTree.js';
 
 interface MultiplicityTreesInnerProps {
   displayerKey: string;
diff --git a/src/component/1d/multiplicityTree/generateTreeNodes.ts b/src/component/1d/multiplicityTree/generateTreeNodes.ts
index 68f1469e3..aaa67d2c5 100644
--- a/src/component/1d/multiplicityTree/generateTreeNodes.ts
+++ b/src/component/1d/multiplicityTree/generateTreeNodes.ts
@@ -1,13 +1,11 @@
-import lodashGet from 'lodash/get';
-import { Spectrum1D } from 'nmr-load-save';
-import { Jcoupling, Range } from 'nmr-processing';
+import lodashGet from 'lodash/get.js';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { Jcoupling, Range } from 'nmr-processing';
 
 import {
   getMultiplicityNumber,
   getPascal,
-} from '../../panels/extra/utilities/MultiplicityUtilities';
-
-// import { TREE_LEVEL_COLORS } from './TreeColors';
+} from '../../panels/extra/utilities/MultiplicityUtilities.js';
 
 export interface TreeNode {
   x: number;
diff --git a/src/component/1d/peaks/PeakAnnotations.tsx b/src/component/1d/peaks/PeakAnnotations.tsx
index 891d48b53..8ce28002e 100644
--- a/src/component/1d/peaks/PeakAnnotations.tsx
+++ b/src/component/1d/peaks/PeakAnnotations.tsx
@@ -1,17 +1,12 @@
-import { useChartData } from '../../context/ChartContext';
-import { useScaleChecked } from '../../context/ScaleContext';
-import { useHighlight } from '../../highlight';
-import { useActiveSpectrum } from '../../hooks/useActiveSpectrum';
-import { formatNumber } from '../../utility/formatNumber';
+import { useChartData } from '../../context/ChartContext.js';
+import { useScaleChecked } from '../../context/ScaleContext.js';
+import { useHighlight } from '../../highlight/index.js';
+import { useActiveSpectrum } from '../../hooks/useActiveSpectrum.js';
+import { formatNumber } from '../../utility/formatNumber.js';
 
-import { PeakEditionListener } from './PeakEditionManager';
-import {
-  Peak,
-  PeaksAnnotationsProps,
-  PeaksSource,
-  getHighlightExtraId,
-  getHighlightSource,
-} from './Peaks';
+import { PeakEditionListener } from './PeakEditionManager.js';
+import type { Peak, PeaksAnnotationsProps, PeaksSource } from './Peaks.js';
+import { getHighlightExtraId, getHighlightSource } from './Peaks.js';
 
 function PeakAnnotations(props: PeaksAnnotationsProps) {
   const { peaks, peaksSource, spectrumId, peakFormat } = props;
diff --git a/src/component/1d/peaks/PeakAnnotationsSpreadMode.tsx b/src/component/1d/peaks/PeakAnnotationsSpreadMode.tsx
index fda7f1a51..76ba59e7a 100644
--- a/src/component/1d/peaks/PeakAnnotationsSpreadMode.tsx
+++ b/src/component/1d/peaks/PeakAnnotationsSpreadMode.tsx
@@ -1,27 +1,21 @@
 import { memo, useState } from 'react';
 import { BsArrowsMove } from 'react-icons/bs';
-import { useMeasure } from 'react-use';
-
-import { useGlobal } from '../../context/GlobalContext';
-import { usePreferences } from '../../context/PreferencesContext';
-import {
-  ActionsButtonsPopover,
-  ActionsButtonsPopoverProps,
-} from '../../elements/ActionsButtonsPopover';
-import useDraggable from '../../elements/draggable/useDraggable';
-import { useHighlight } from '../../highlight';
-import { usePeaksLabelSettings } from '../../hooks/usePeaksLabelSettings';
-import { Margin } from '../../reducer/Reducer';
-import { formatNumber } from '../../utility/formatNumber';
-import { resolve } from '../utilities/intersectionResolver';
-
-import { PeakEditionListener } from './PeakEditionManager';
-import {
-  PeaksAnnotationsProps,
-  PeaksSource,
-  getHighlightExtraId,
-  getHighlightSource,
-} from './Peaks';
+import useResizeObserver from 'use-resize-observer';
+
+import { useGlobal } from '../../context/GlobalContext.js';
+import { usePreferences } from '../../context/PreferencesContext.js';
+import type { ActionsButtonsPopoverProps } from '../../elements/ActionsButtonsPopover.js';
+import { ActionsButtonsPopover } from '../../elements/ActionsButtonsPopover.js';
+import useDraggable from '../../elements/draggable/useDraggable.js';
+import { useHighlight } from '../../highlight/index.js';
+import { usePeaksLabelSettings } from '../../hooks/usePeaksLabelSettings.js';
+import type { Margin } from '../../reducer/Reducer.js';
+import { formatNumber } from '../../utility/formatNumber.js';
+import { resolve } from '../utilities/intersectionResolver.js';
+
+import { PeakEditionListener } from './PeakEditionManager.js';
+import type { PeaksAnnotationsProps, PeaksSource } from './Peaks.js';
+import { getHighlightExtraId, getHighlightSource } from './Peaks.js';
 
 const notationWidth = 10;
 const notationMargin = 2;
@@ -84,7 +78,11 @@ function PeakAnnotationsSpreadMode(props: PeakAnnotationsSpreadModeProps) {
     margin,
     height,
   } = props;
-  const [ref, boxSize] = useMeasure<SVGGElement>();
+  const {
+    ref,
+    height: boxSizeHeight = 0,
+    // @ts-expect-error Module is not published correctly.
+  } = useResizeObserver();
   const { marginTop, isDragActive, onPointerDown } = usePeaksPosition();
 
   const actionsButtons: ActionsButtonsPopoverProps['buttons'] = [
@@ -107,16 +105,16 @@ function PeakAnnotationsSpreadMode(props: PeakAnnotationsSpreadModeProps) {
     groupMargin: 10,
   });
 
-  const boxHeight = Math.round(boxSize.height);
+  const roundedBoxHeight = Math.round(boxSizeHeight);
 
-  let y = boxHeight + marginTop;
+  let y = roundedBoxHeight + marginTop;
 
-  if (y + boxHeight > height - margin.bottom) {
-    y = height - margin.bottom - boxHeight;
+  if (y + roundedBoxHeight > height - margin.bottom) {
+    y = height - margin.bottom - roundedBoxHeight;
   }
 
   if (marginTop < 0) {
-    y = boxHeight;
+    y = roundedBoxHeight;
   }
   return (
     <ActionsButtonsPopover
@@ -135,13 +133,13 @@ function PeakAnnotationsSpreadMode(props: PeakAnnotationsSpreadModeProps) {
       <g className="peaks" clipPath={`url(#${displayerKey}clip-chart-1d)`}>
         <g
           transform={`translate(0,${y})`}
-          style={{ visibility: boxSize.height > 0 ? 'visible' : 'hidden' }}
+          style={{ visibility: boxSizeHeight > 0 ? 'visible' : 'hidden' }}
         >
           <rect
             data-no-export="true"
             width="100%"
-            y={-boxHeight / 2}
-            height={boxHeight}
+            y={-roundedBoxHeight / 2}
+            height={roundedBoxHeight}
             fill={isDragActive ? 'white' : 'transparent'}
             opacity={isDragActive ? 0.9 : 0}
           />
diff --git a/src/component/1d/peaks/PeakEditionManager.tsx b/src/component/1d/peaks/PeakEditionManager.tsx
index 1ef586267..00d29f80d 100644
--- a/src/component/1d/peaks/PeakEditionManager.tsx
+++ b/src/component/1d/peaks/PeakEditionManager.tsx
@@ -1,6 +1,6 @@
 import { yupResolver } from '@hookform/resolvers/yup';
+import type { ReactNode } from 'react';
 import {
-  ReactNode,
   createContext,
   useCallback,
   useContext,
@@ -10,11 +10,11 @@ import {
 import { useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 
-import { useChartData } from '../../context/ChartContext';
-import { useDispatch } from '../../context/DispatchContext';
-import { useScaleChecked } from '../../context/ScaleContext';
-import { NumberInput2Controller } from '../../elements/NumberInput2Controller';
-import { useActiveSpectrum } from '../../hooks/useActiveSpectrum';
+import { useChartData } from '../../context/ChartContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { useScaleChecked } from '../../context/ScaleContext.js';
+import { NumberInput2Controller } from '../../elements/NumberInput2Controller.js';
+import { useActiveSpectrum } from '../../hooks/useActiveSpectrum.js';
 
 const validationSchema = Yup.object({
   value: Yup.number().required(),
diff --git a/src/component/1d/peaks/Peaks.tsx b/src/component/1d/peaks/Peaks.tsx
index 34acb3acd..1c866b6fd 100644
--- a/src/component/1d/peaks/Peaks.tsx
+++ b/src/component/1d/peaks/Peaks.tsx
@@ -1,17 +1,17 @@
-import { Spectrum1D } from 'nmr-load-save';
-import { NMRPeak1D, Peak1D, Range } from 'nmr-processing';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { NMRPeak1D, Peak1D, Range } from 'nmr-processing';
 import { memo, useMemo } from 'react';
 
-import { useChartData } from '../../context/ChartContext';
-import { useActiveSpectrumPeaksViewState } from '../../hooks/useActiveSpectrumPeaksViewState';
-import { useActiveSpectrumRangesViewState } from '../../hooks/useActiveSpectrumRangesViewState';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
-import useSpectrum from '../../hooks/useSpectrum';
-import { Margin } from '../../reducer/Reducer';
-import { useScaleX } from '../utilities/scale';
+import { useChartData } from '../../context/ChartContext.js';
+import { useActiveSpectrumPeaksViewState } from '../../hooks/useActiveSpectrumPeaksViewState.js';
+import { useActiveSpectrumRangesViewState } from '../../hooks/useActiveSpectrumRangesViewState.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
+import type { Margin } from '../../reducer/Reducer.js';
+import { useScaleX } from '../utilities/scale.js';
 
-import PeakAnnotations from './PeakAnnotations';
-import PeakAnnotationsSpreadMode from './PeakAnnotationsSpreadMode';
+import PeakAnnotations from './PeakAnnotations.js';
+import PeakAnnotationsSpreadMode from './PeakAnnotationsSpreadMode.js';
 
 interface Peak1DWithParentKeys extends Peak1D {
   parentKeys?: string[];
diff --git a/src/component/1d/peaks/PeaksShapes.tsx b/src/component/1d/peaks/PeaksShapes.tsx
index a401878a2..2aa9a8c27 100644
--- a/src/component/1d/peaks/PeaksShapes.tsx
+++ b/src/component/1d/peaks/PeaksShapes.tsx
@@ -1,12 +1,12 @@
-import { Spectrum1D } from 'nmr-load-save';
+import type { Spectrum1D } from 'nmr-load-save';
 
-import { useChartData } from '../../context/ChartContext';
-import { useScale } from '../../context/ScaleContext';
-import { useActiveSpectrum } from '../../hooks/useActiveSpectrum';
-import { useActiveSpectrumPeaksViewState } from '../../hooks/useActiveSpectrumPeaksViewState';
-import useSpectrum from '../../hooks/useSpectrum';
+import { useChartData } from '../../context/ChartContext.js';
+import { useScale } from '../../context/ScaleContext.js';
+import { useActiveSpectrum } from '../../hooks/useActiveSpectrum.js';
+import { useActiveSpectrumPeaksViewState } from '../../hooks/useActiveSpectrumPeaksViewState.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
 
-import { usePeakShapesPath } from './usePeakShapesPath';
+import { usePeakShapesPath } from './usePeakShapesPath.js';
 
 const emptyData = { peaks: {}, display: {} };
 
diff --git a/src/component/1d/peaks/usePeakShapesPath.ts b/src/component/1d/peaks/usePeakShapesPath.ts
index 70ffc62dd..b996bd96f 100644
--- a/src/component/1d/peaks/usePeakShapesPath.ts
+++ b/src/component/1d/peaks/usePeakShapesPath.ts
@@ -1,10 +1,11 @@
-import { DataXY } from 'cheminfo-types';
-import { Spectrum1D } from 'nmr-load-save';
-import { Peak1D, peakToXY, peaksToXY } from 'nmr-processing';
+import type { DataXY } from 'cheminfo-types';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { Peak1D } from 'nmr-processing';
+import { peaksToXY, peakToXY } from 'nmr-processing';
 
-import { useChartData } from '../../context/ChartContext';
-import { useScaleChecked } from '../../context/ScaleContext';
-import { PathBuilder } from '../../utility/PathBuilder';
+import { useChartData } from '../../context/ChartContext.js';
+import { useScaleChecked } from '../../context/ScaleContext.js';
+import { PathBuilder } from '../../utility/PathBuilder.js';
 
 type PeaksShapesOptions =
   | {
diff --git a/src/component/1d/ranges/AssignmentActionsButtons.tsx b/src/component/1d/ranges/AssignmentActionsButtons.tsx
index 9d2d4b5f2..b0d529c3d 100644
--- a/src/component/1d/ranges/AssignmentActionsButtons.tsx
+++ b/src/component/1d/ranges/AssignmentActionsButtons.tsx
@@ -1,7 +1,8 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { LuLink, LuUnlink } from 'react-icons/lu';
 
-import Button, { ButtonProps } from '../../elements/Button';
+import type { ButtonProps } from '../../elements/Button.js';
+import Button from '../../elements/Button.js';
 
 const styles: Record<'button' | 'icon', CSSProperties> = {
   button: { width: '16px', height: '16px', padding: 0 },
diff --git a/src/component/1d/ranges/AssignmentLabel.tsx b/src/component/1d/ranges/AssignmentLabel.tsx
index 87f9f4bd0..a15b99cba 100644
--- a/src/component/1d/ranges/AssignmentLabel.tsx
+++ b/src/component/1d/ranges/AssignmentLabel.tsx
@@ -1,11 +1,11 @@
-import { Range } from 'nmr-processing';
+import type { Range } from 'nmr-processing';
 import { useRef } from 'react';
 
-import { FieldEdition } from '../../1d-2d/FieldEdition';
-import { useChartData } from '../../context/ChartContext';
-import { useDispatch } from '../../context/DispatchContext';
-import { useActiveSpectrumRangesViewState } from '../../hooks/useActiveSpectrumRangesViewState';
-import { useTriggerNewAssignmentLabel } from '../../hooks/useTriggerNewAssignmentLabel';
+import { FieldEdition } from '../../1d-2d/FieldEdition.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { useActiveSpectrumRangesViewState } from '../../hooks/useActiveSpectrumRangesViewState.js';
+import { useTriggerNewAssignmentLabel } from '../../hooks/useTriggerNewAssignmentLabel.js';
 
 const marginTop = 15;
 
diff --git a/src/component/1d/ranges/Atoms.tsx b/src/component/1d/ranges/Atoms.tsx
index 44ca61455..aa7e60786 100644
--- a/src/component/1d/ranges/Atoms.tsx
+++ b/src/component/1d/ranges/Atoms.tsx
@@ -1,9 +1,9 @@
-import { Range } from 'nmr-processing';
+import type { Range } from 'nmr-processing';
 
-import { useChartData } from '../../context/ChartContext';
-import { useTopicMolecule } from '../../context/TopicMoleculeContext';
-import { SVGGroup } from '../../elements/SVGGroup';
-import { SVGText } from '../../elements/SVGText';
+import { useChartData } from '../../context/ChartContext.js';
+import { useTopicMolecule } from '../../context/TopicMoleculeContext.js';
+import { SVGGroup } from '../../elements/SVGGroup.js';
+import { SVGText } from '../../elements/SVGText.js';
 
 const fontSize = 12;
 const marginTop = 45;
diff --git a/src/component/1d/ranges/Range.tsx b/src/component/1d/ranges/Range.tsx
index d452c4bdf..1a4b697bf 100644
--- a/src/component/1d/ranges/Range.tsx
+++ b/src/component/1d/ranges/Range.tsx
@@ -1,37 +1,38 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { Range as RangeType } from 'nmr-processing';
-import { LuUnlink, LuLink } from 'react-icons/lu';
+import type { Range as RangeType } from 'nmr-processing';
+import { LuLink, LuUnlink } from 'react-icons/lu';
 import { PiTextTBold, PiTextTSlashBold } from 'react-icons/pi';
 
-import { isSpectrum1D, resizeRange } from '../../../data/data1d/Spectrum1D';
-import { isRangeAssigned } from '../../../data/data1d/Spectrum1D/isRangeAssigned';
-import { checkRangeKind } from '../../../data/utilities/RangeUtilities';
+import {
+  isSpectrum1D,
+  resizeRange,
+} from '../../../data/data1d/Spectrum1D/index.js';
+import { isRangeAssigned } from '../../../data/data1d/Spectrum1D/isRangeAssigned.js';
+import { checkRangeKind } from '../../../data/utilities/RangeUtilities.js';
 import {
   useAssignment,
   useAssignmentData,
-} from '../../assignment/AssignmentsContext';
-import { filterForIDsWithAssignment } from '../../assignment/utilities/filterForIDsWithAssignment';
-import { useDispatch } from '../../context/DispatchContext';
-import { useLogger } from '../../context/LoggerContext';
-import { useShareData } from '../../context/ShareDataContext';
-import {
-  ActionsButtonsPopover,
-  ActionsButtonsPopoverProps,
-} from '../../elements/ActionsButtonsPopover';
-import { useDialogData } from '../../elements/DialogManager';
-import { ResizerWithScale } from '../../elements/ResizerWithScale';
-import { HighlightEventSource, useHighlight } from '../../highlight';
-import { useActiveSpectrumRangesViewState } from '../../hooks/useActiveSpectrumRangesViewState';
-import { useHighlightColor } from '../../hooks/useHighlightColor';
-import { useResizerStatus } from '../../hooks/useResizerStatus';
-import useSpectrum from '../../hooks/useSpectrum';
-import { EditRangeModal } from '../../modal/editRange/EditRangeModal';
-import { IntegralIndicator } from '../integral/IntegralIndicator';
-import { useScaleX } from '../utilities/scale';
-
-import { AssignmentLabel } from './AssignmentLabel';
-import { Atoms } from './Atoms';
+} from '../../assignment/AssignmentsContext.js';
+import { filterForIDsWithAssignment } from '../../assignment/utilities/filterForIDsWithAssignment.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { useLogger } from '../../context/LoggerContext.js';
+import { useShareData } from '../../context/ShareDataContext.js';
+import type { ActionsButtonsPopoverProps } from '../../elements/ActionsButtonsPopover.js';
+import { ActionsButtonsPopover } from '../../elements/ActionsButtonsPopover.js';
+import { useDialogData } from '../../elements/DialogManager.js';
+import { ResizerWithScale } from '../../elements/ResizerWithScale.js';
+import { HighlightEventSource, useHighlight } from '../../highlight/index.js';
+import { useActiveSpectrumRangesViewState } from '../../hooks/useActiveSpectrumRangesViewState.js';
+import { useHighlightColor } from '../../hooks/useHighlightColor.js';
+import { useResizerStatus } from '../../hooks/useResizerStatus.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
+import { EditRangeModal } from '../../modal/editRange/EditRangeModal.js';
+import { IntegralIndicator } from '../integral/IntegralIndicator.js';
+import { useScaleX } from '../utilities/scale.js';
+
+import { AssignmentLabel } from './AssignmentLabel.js';
+import { Atoms } from './Atoms.js';
 
 const style = css`
   .target {
diff --git a/src/component/1d/ranges/Ranges.tsx b/src/component/1d/ranges/Ranges.tsx
index b42e97765..7af7e2e55 100644
--- a/src/component/1d/ranges/Ranges.tsx
+++ b/src/component/1d/ranges/Ranges.tsx
@@ -1,14 +1,14 @@
-import { Spectrum1D } from 'nmr-load-save';
-import { Ranges as RangesProps } from 'nmr-processing';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { Ranges as RangesProps } from 'nmr-processing';
 import { memo } from 'react';
 
-import { useChartData } from '../../context/ChartContext';
-import { ShareDataProvider } from '../../context/ShareDataContext';
-import { useActiveSpectrumRangesViewState } from '../../hooks/useActiveSpectrumRangesViewState';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
-import useSpectrum from '../../hooks/useSpectrum';
+import { useChartData } from '../../context/ChartContext.js';
+import { ShareDataProvider } from '../../context/ShareDataContext.js';
+import { useActiveSpectrumRangesViewState } from '../../hooks/useActiveSpectrumRangesViewState.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
 
-import Range from './Range';
+import Range from './Range.js';
 
 interface RangesInnerProps {
   displayerKey: string;
diff --git a/src/component/1d/ranges/RangesIntegrals.tsx b/src/component/1d/ranges/RangesIntegrals.tsx
index f21b63c7e..d9a41df99 100644
--- a/src/component/1d/ranges/RangesIntegrals.tsx
+++ b/src/component/1d/ranges/RangesIntegrals.tsx
@@ -1,10 +1,10 @@
 import { xyIntegral, xyMaxY } from 'ml-spectra-processing';
-import { Spectrum1D } from 'nmr-load-save';
+import type { Spectrum1D } from 'nmr-load-save';
 
-import { useChartData } from '../../context/ChartContext';
-import { useActiveSpectrumRangesViewState } from '../../hooks/useActiveSpectrumRangesViewState';
-import useIntegralPath from '../../hooks/useIntegralPath';
-import useSpectrum from '../../hooks/useSpectrum';
+import { useChartData } from '../../context/ChartContext.js';
+import { useActiveSpectrumRangesViewState } from '../../hooks/useActiveSpectrumRangesViewState.js';
+import useIntegralPath from '../../hooks/useIntegralPath.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
 
 interface IntegralData {
   x: Float64Array;
diff --git a/src/component/1d/tool/BaseLine.tsx b/src/component/1d/tool/BaseLine.tsx
index e44173a8d..939ddc885 100644
--- a/src/component/1d/tool/BaseLine.tsx
+++ b/src/component/1d/tool/BaseLine.tsx
@@ -1,8 +1,8 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
-import { useChartData } from '../../context/ChartContext';
-import { useScaleChecked } from '../../context/ScaleContext';
-import { options } from '../../toolbar/ToolTypes';
+import { useChartData } from '../../context/ChartContext.js';
+import { useScaleChecked } from '../../context/ScaleContext.js';
+import { options } from '../../toolbar/ToolTypes.js';
 
 const styles: CSSProperties = {
   transformOrigin: 'top left',
diff --git a/src/component/1d/tool/BaseLineZones.tsx b/src/component/1d/tool/BaseLineZones.tsx
index 3ba4df061..50b5518a6 100644
--- a/src/component/1d/tool/BaseLineZones.tsx
+++ b/src/component/1d/tool/BaseLineZones.tsx
@@ -1,11 +1,11 @@
-import { BaselineCorrectionZone } from 'nmr-processing';
+import type { BaselineCorrectionZone } from 'nmr-processing';
 
-import { useChartData } from '../../context/ChartContext';
-import { useDispatch } from '../../context/DispatchContext';
-import { useScaleChecked } from '../../context/ScaleContext';
-import { ResizerWithScale } from '../../elements/ResizerWithScale';
-import { useHighlight } from '../../highlight';
-import { useResizerStatus } from '../../hooks/useResizerStatus';
+import { useChartData } from '../../context/ChartContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { useScaleChecked } from '../../context/ScaleContext.js';
+import { ResizerWithScale } from '../../elements/ResizerWithScale.js';
+import { useHighlight } from '../../highlight/index.js';
+import { useResizerStatus } from '../../hooks/useResizerStatus.js';
 
 function BaseLineZones() {
   const {
diff --git a/src/component/1d/tool/PeakPointer.tsx b/src/component/1d/tool/PeakPointer.tsx
index d2c1966a5..34a33da85 100644
--- a/src/component/1d/tool/PeakPointer.tsx
+++ b/src/component/1d/tool/PeakPointer.tsx
@@ -1,13 +1,13 @@
-import { Spectrum1D } from 'nmr-load-save';
+import type { Spectrum1D } from 'nmr-load-save';
 
-import { useBrushTracker } from '../../EventsTrackers/BrushTracker';
-import { useMouseTracker } from '../../EventsTrackers/MouseTracker';
-import { useChartData } from '../../context/ChartContext';
-import { useScaleChecked } from '../../context/ScaleContext';
-import { useActiveSpectrum } from '../../hooks/useActiveSpectrum';
-import useSpectraByActiveNucleus from '../../hooks/useSpectraPerNucleus';
-import { options } from '../../toolbar/ToolTypes';
-import { getClosePeak } from '../../utility/getClosePeak';
+import { useBrushTracker } from '../../EventsTrackers/BrushTracker.js';
+import { useMouseTracker } from '../../EventsTrackers/MouseTracker.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { useScaleChecked } from '../../context/ScaleContext.js';
+import { useActiveSpectrum } from '../../hooks/useActiveSpectrum.js';
+import useSpectraByActiveNucleus from '../../hooks/useSpectraPerNucleus.js';
+import { options } from '../../toolbar/ToolTypes.js';
+import { getClosePeak } from '../../utility/getClosePeak.js';
 
 const styles = {
   radius: 10,
diff --git a/src/component/1d/tool/PivotIndicator.tsx b/src/component/1d/tool/PivotIndicator.tsx
index 13f8a4f41..98d2abd10 100644
--- a/src/component/1d/tool/PivotIndicator.tsx
+++ b/src/component/1d/tool/PivotIndicator.tsx
@@ -1,8 +1,8 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
-import { useChartData } from '../../context/ChartContext';
-import { useScaleChecked } from '../../context/ScaleContext';
-import { options } from '../../toolbar/ToolTypes';
+import { useChartData } from '../../context/ChartContext.js';
+import { useScaleChecked } from '../../context/ScaleContext.js';
+import { options } from '../../toolbar/ToolTypes.js';
 
 const styles: CSSProperties = {
   transformOrigin: 'top left',
diff --git a/src/component/1d/tool/XLabelPointer.tsx b/src/component/1d/tool/XLabelPointer.tsx
index c9027f5bc..e48534949 100644
--- a/src/component/1d/tool/XLabelPointer.tsx
+++ b/src/component/1d/tool/XLabelPointer.tsx
@@ -1,12 +1,12 @@
-import { Spectrum1D } from 'nmr-load-save';
-import { CSSProperties } from 'react';
-
-import { useBrushTracker } from '../../EventsTrackers/BrushTracker';
-import { useMouseTracker } from '../../EventsTrackers/MouseTracker';
-import { useChartData } from '../../context/ChartContext';
-import { useScaleChecked } from '../../context/ScaleContext';
-import { useFormatNumberByNucleus } from '../../hooks/useFormatNumberByNucleus';
-import useSpectrum from '../../hooks/useSpectrum';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { CSSProperties } from 'react';
+
+import { useBrushTracker } from '../../EventsTrackers/BrushTracker.js';
+import { useMouseTracker } from '../../EventsTrackers/MouseTracker.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { useScaleChecked } from '../../context/ScaleContext.js';
+import { useFormatNumberByNucleus } from '../../hooks/useFormatNumberByNucleus.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
 
 const style: CSSProperties = {
   cursor: 'crosshair',
diff --git a/src/component/1d/utilities/scale.ts b/src/component/1d/utilities/scale.ts
index 3d39cb3b2..e49e2d3c5 100644
--- a/src/component/1d/utilities/scale.ts
+++ b/src/component/1d/utilities/scale.ts
@@ -1,14 +1,14 @@
 import { scaleLinear, zoomIdentity } from 'd3';
 import { useCallback } from 'react';
 
-import { useChartData } from '../../context/ChartContext';
-import { useVerticalAlign } from '../../hooks/useVerticalAlign';
-import {
+import { useChartData } from '../../context/ChartContext.js';
+import { useVerticalAlign } from '../../hooks/useVerticalAlign.js';
+import type {
   Domains,
   Margin,
   SpectraDirection,
   VerticalAlignment,
-} from '../../reducer/Reducer';
+} from '../../reducer/Reducer.js';
 
 interface ScaleXOptions {
   width: number;
diff --git a/src/component/2d/1d-tracer/HorizontalSliceChart.tsx b/src/component/2d/1d-tracer/HorizontalSliceChart.tsx
index a1b9c28a6..88c54fb65 100644
--- a/src/component/2d/1d-tracer/HorizontalSliceChart.tsx
+++ b/src/component/2d/1d-tracer/HorizontalSliceChart.tsx
@@ -1,10 +1,10 @@
-import { NmrData1D } from 'cheminfo-types';
-import { Spectrum2D } from 'nmr-load-save';
+import type { NmrData1D } from 'cheminfo-types';
+import type { Spectrum2D } from 'nmr-load-save';
 
-import { useChartData } from '../../context/ChartContext';
-import useSpectrum from '../../hooks/useSpectrum';
-import { PathBuilder } from '../../utility/PathBuilder';
-import { useScale2DX, getSliceYScale } from '../utilities/scale';
+import { useChartData } from '../../context/ChartContext.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
+import { PathBuilder } from '../../utility/PathBuilder.js';
+import { getSliceYScale, useScale2DX } from '../utilities/scale.js';
 
 interface BaseProps {
   verticalMargin?: number;
diff --git a/src/component/2d/1d-tracer/Left1DChart.tsx b/src/component/2d/1d-tracer/Left1DChart.tsx
index 81b958d15..692a59860 100644
--- a/src/component/2d/1d-tracer/Left1DChart.tsx
+++ b/src/component/2d/1d-tracer/Left1DChart.tsx
@@ -1,10 +1,10 @@
-import { Spectrum1D } from 'nmr-load-save';
+import type { Spectrum1D } from 'nmr-load-save';
 import { memo } from 'react';
 
-import { useChartData } from '../../context/ChartContext';
-import useXYReduce, { XYReducerDomainAxis } from '../../hooks/useXYReduce';
-import { PathBuilder } from '../../utility/PathBuilder';
-import { use1DTraceYScale, useScale2DY } from '../utilities/scale';
+import { useChartData } from '../../context/ChartContext.js';
+import useXYReduce, { XYReducerDomainAxis } from '../../hooks/useXYReduce.js';
+import { PathBuilder } from '../../utility/PathBuilder.js';
+import { use1DTraceYScale, useScale2DY } from '../utilities/scale.js';
 
 interface Left1DChartProps {
   horizontalMargin?: number;
diff --git a/src/component/2d/1d-tracer/Top1DChart.tsx b/src/component/2d/1d-tracer/Top1DChart.tsx
index 246ced63a..6462ca1ec 100644
--- a/src/component/2d/1d-tracer/Top1DChart.tsx
+++ b/src/component/2d/1d-tracer/Top1DChart.tsx
@@ -1,10 +1,10 @@
-import { Spectrum1D } from 'nmr-load-save';
+import type { Spectrum1D } from 'nmr-load-save';
 import { memo } from 'react';
 
-import { useChartData } from '../../context/ChartContext';
-import useXYReduce, { XYReducerDomainAxis } from '../../hooks/useXYReduce';
-import { PathBuilder } from '../../utility/PathBuilder';
-import { use1DTraceYScale, useScale2DX } from '../utilities/scale';
+import { useChartData } from '../../context/ChartContext.js';
+import useXYReduce, { XYReducerDomainAxis } from '../../hooks/useXYReduce.js';
+import { PathBuilder } from '../../utility/PathBuilder.js';
+import { use1DTraceYScale, useScale2DX } from '../utilities/scale.js';
 
 interface Top1DChartProps {
   verticalMargin?: number;
diff --git a/src/component/2d/1d-tracer/VerticalSliceChart.tsx b/src/component/2d/1d-tracer/VerticalSliceChart.tsx
index 6f6833b06..3df454206 100644
--- a/src/component/2d/1d-tracer/VerticalSliceChart.tsx
+++ b/src/component/2d/1d-tracer/VerticalSliceChart.tsx
@@ -1,10 +1,10 @@
-import { NmrData1D } from 'cheminfo-types';
-import { Spectrum2D } from 'nmr-load-save';
+import type { NmrData1D } from 'cheminfo-types';
+import type { Spectrum2D } from 'nmr-load-save';
 
-import { useChartData } from '../../context/ChartContext';
-import useSpectrum from '../../hooks/useSpectrum';
-import { PathBuilder } from '../../utility/PathBuilder';
-import { getSliceYScale, useScale2DY } from '../utilities/scale';
+import { useChartData } from '../../context/ChartContext.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
+import { PathBuilder } from '../../utility/PathBuilder.js';
+import { getSliceYScale, useScale2DY } from '../utilities/scale.js';
 
 interface BaseProps {
   reverse?: boolean;
diff --git a/src/component/2d/1d-tracer/phase-correction-traces/PhaseTraceWithMouse.tsx b/src/component/2d/1d-tracer/phase-correction-traces/PhaseTraceWithMouse.tsx
index 064a7f69a..2aa4800eb 100644
--- a/src/component/2d/1d-tracer/phase-correction-traces/PhaseTraceWithMouse.tsx
+++ b/src/component/2d/1d-tracer/phase-correction-traces/PhaseTraceWithMouse.tsx
@@ -1,6 +1,6 @@
-import { useMouseTracker } from '../../../EventsTrackers/MouseTracker';
+import { useMouseTracker } from '../../../EventsTrackers/MouseTracker.js';
 
-import { SpectrumPhaseTrace } from './SpectrumPhaseTrace';
+import { SpectrumPhaseTrace } from './SpectrumPhaseTrace.js';
 
 export function PhaseTraceWithMouse() {
   const position = useMouseTracker();
diff --git a/src/component/2d/1d-tracer/phase-correction-traces/PhaseTraces.tsx b/src/component/2d/1d-tracer/phase-correction-traces/PhaseTraces.tsx
index af195ce01..356894fd8 100644
--- a/src/component/2d/1d-tracer/phase-correction-traces/PhaseTraces.tsx
+++ b/src/component/2d/1d-tracer/phase-correction-traces/PhaseTraces.tsx
@@ -1,8 +1,8 @@
-import { useChartData } from '../../../context/ChartContext';
-import { useActiveSpectrum } from '../../../hooks/useActiveSpectrum';
+import { useChartData } from '../../../context/ChartContext.js';
+import { useActiveSpectrum } from '../../../hooks/useActiveSpectrum.js';
 
-import { PhaseTraceWithMouse } from './PhaseTraceWithMouse';
-import { SpectraPhaseTraces } from './SpectraPhaseTraces';
+import { PhaseTraceWithMouse } from './PhaseTraceWithMouse.js';
+import { SpectraPhaseTraces } from './SpectraPhaseTraces.js';
 
 export function PhaseTraces() {
   const { width, height, margin, displayerKey } = useChartData();
diff --git a/src/component/2d/1d-tracer/phase-correction-traces/SpectraPhaseTraces.tsx b/src/component/2d/1d-tracer/phase-correction-traces/SpectraPhaseTraces.tsx
index 618489c5d..f6ddff077 100644
--- a/src/component/2d/1d-tracer/phase-correction-traces/SpectraPhaseTraces.tsx
+++ b/src/component/2d/1d-tracer/phase-correction-traces/SpectraPhaseTraces.tsx
@@ -1,12 +1,18 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 
-import { useChartData } from '../../../context/ChartContext';
-import { HighlightEventSource, useHighlight } from '../../../highlight';
-import { SpectrumTrace, TraceDirection } from '../../../reducer/Reducer';
+import { useChartData } from '../../../context/ChartContext.js';
+import {
+  HighlightEventSource,
+  useHighlight,
+} from '../../../highlight/index.js';
+import type {
+  SpectrumTrace,
+  TraceDirection,
+} from '../../../reducer/Reducer.js';
 
-import { SpectrumPhaseTrace } from './SpectrumPhaseTrace';
-import { useActivePhaseTraces } from './useActivePhaseTraces';
+import { SpectrumPhaseTrace } from './SpectrumPhaseTrace.js';
+import { useActivePhaseTraces } from './useActivePhaseTraces.js';
 
 const BOX_SIZE = 20;
 
diff --git a/src/component/2d/1d-tracer/phase-correction-traces/SpectrumPhaseTrace.tsx b/src/component/2d/1d-tracer/phase-correction-traces/SpectrumPhaseTrace.tsx
index 64bb79f6e..c4cfb9435 100644
--- a/src/component/2d/1d-tracer/phase-correction-traces/SpectrumPhaseTrace.tsx
+++ b/src/component/2d/1d-tracer/phase-correction-traces/SpectrumPhaseTrace.tsx
@@ -1,22 +1,22 @@
-import { Spectrum1D, Spectrum2D } from 'nmr-load-save';
+import type { Spectrum1D, Spectrum2D } from 'nmr-load-save';
 import { Filters } from 'nmr-processing';
-import { ReactNode } from 'react';
-
-import { getSlice } from '../../../../data/data2d/Spectrum2D';
-import { useChartData } from '../../../context/ChartContext';
-import { useActiveSpectrum } from '../../../hooks/useActiveSpectrum';
-import useSpectrum from '../../../hooks/useSpectrum';
-import { TraceDirection } from '../../../reducer/Reducer';
-import { PathBuilder } from '../../../utility/PathBuilder';
+import type { ReactNode } from 'react';
+
+import { getSlice } from '../../../../data/data2d/Spectrum2D/index.js';
+import { useChartData } from '../../../context/ChartContext.js';
+import { useActiveSpectrum } from '../../../hooks/useActiveSpectrum.js';
+import useSpectrum from '../../../hooks/useSpectrum.js';
+import type { TraceDirection } from '../../../reducer/Reducer.js';
+import { PathBuilder } from '../../../utility/PathBuilder.js';
 import {
   get2DXScale,
   get2DYScale,
   getSliceYScale,
   useScale2DX,
   useScale2DY,
-} from '../../utilities/scale';
+} from '../../utilities/scale.js';
 
-import { useActivePhaseTraces } from './useActivePhaseTraces';
+import { useActivePhaseTraces } from './useActivePhaseTraces.js';
 
 interface BaseComponentProps extends React.SVGAttributes<SVGGElement> {
   children?: ReactNode;
diff --git a/src/component/2d/1d-tracer/phase-correction-traces/index.ts b/src/component/2d/1d-tracer/phase-correction-traces/index.ts
index b0e25c9df..cb65cf060 100644
--- a/src/component/2d/1d-tracer/phase-correction-traces/index.ts
+++ b/src/component/2d/1d-tracer/phase-correction-traces/index.ts
@@ -1 +1 @@
-export { PhaseTraces } from './PhaseTraces';
+export { PhaseTraces } from './PhaseTraces.js';
diff --git a/src/component/2d/1d-tracer/phase-correction-traces/useActivePhaseTraces.ts b/src/component/2d/1d-tracer/phase-correction-traces/useActivePhaseTraces.ts
index 373c30b83..9d5ccd685 100644
--- a/src/component/2d/1d-tracer/phase-correction-traces/useActivePhaseTraces.ts
+++ b/src/component/2d/1d-tracer/phase-correction-traces/useActivePhaseTraces.ts
@@ -1,5 +1,5 @@
-import { COLORS } from '../../../../data/utilities/generateColor';
-import { useChartData } from '../../../context/ChartContext';
+import { COLORS } from '../../../../data/utilities/generateColor.js';
+import { useChartData } from '../../../context/ChartContext.js';
 
 export function useActivePhaseTraces() {
   const {
diff --git a/src/component/2d/Chart2D.tsx b/src/component/2d/Chart2D.tsx
index 3534adafb..5be194748 100644
--- a/src/component/2d/Chart2D.tsx
+++ b/src/component/2d/Chart2D.tsx
@@ -1,19 +1,19 @@
-import { Spectrum1D, SpectraRendering } from 'nmr-load-save';
+import type { SpectraRendering, Spectrum1D } from 'nmr-load-save';
 import { memo } from 'react';
 
-import SpectrumInfoBlock from '../1d-2d/components/SpectrumInfoBlock';
-import { useChartData } from '../context/ChartContext';
-import { usePreferences } from '../context/PreferencesContext';
-import { ShareDataProvider } from '../context/ShareDataContext';
-import { Margin } from '../reducer/Reducer';
+import SpectrumInfoBlock from '../1d-2d/components/SpectrumInfoBlock.js';
+import { useChartData } from '../context/ChartContext.js';
+import { usePreferences } from '../context/PreferencesContext.js';
+import { ShareDataProvider } from '../context/ShareDataContext.js';
+import type { Margin } from '../reducer/Reducer.js';
 
-import XAxis from './XAxis';
-import YAxis from './YAxis';
-import { FidContainer } from './fid/FidContainer';
-import { FTContainer } from './ft/FTContainer';
-import IndicationLines from './zones/IndicationLines';
-import Zones from './zones/Zones';
-import ZonesAssignmentsLabels from './zones/ZonesAssignmentsLabels';
+import XAxis from './XAxis.js';
+import YAxis from './YAxis.js';
+import { FidContainer } from './fid/FidContainer.js';
+import { FTContainer } from './ft/FTContainer.js';
+import IndicationLines from './zones/IndicationLines.js';
+import Zones from './zones/Zones.js';
+import ZonesAssignmentsLabels from './zones/ZonesAssignmentsLabels.js';
 
 interface Chart2DProps {
   spectra?: Spectrum1D[];
diff --git a/src/component/2d/FooterBanner.tsx b/src/component/2d/FooterBanner.tsx
index 02acc2d9d..274622941 100644
--- a/src/component/2d/FooterBanner.tsx
+++ b/src/component/2d/FooterBanner.tsx
@@ -1,20 +1,20 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { NmrData2DFid, NmrData2DFt } from 'cheminfo-types';
+import type { NmrData2DFid, NmrData2DFt } from 'cheminfo-types';
 import { xFindClosestIndex } from 'ml-spectra-processing';
-import { useMemo, Fragment } from 'react';
+import { Fragment, useMemo } from 'react';
 import { MF } from 'react-mf';
 
-import { get1DDataXY } from '../../data/data1d/Spectrum1D/get1DDataXY';
-import { useBrushTracker } from '../EventsTrackers/BrushTracker';
-import { useMouseTracker } from '../EventsTrackers/MouseTracker';
-import { useChartData } from '../context/ChartContext';
-import { useActiveSpectrum } from '../hooks/useActiveSpectrum';
-import { useFormatNumberByNucleus } from '../hooks/useFormatNumberByNucleus';
-import { options } from '../toolbar/ToolTypes';
+import { get1DDataXY } from '../../data/data1d/Spectrum1D/get1DDataXY.js';
+import { useBrushTracker } from '../EventsTrackers/BrushTracker.js';
+import { useMouseTracker } from '../EventsTrackers/MouseTracker.js';
+import { useChartData } from '../context/ChartContext.js';
+import { useActiveSpectrum } from '../hooks/useActiveSpectrum.js';
+import { useFormatNumberByNucleus } from '../hooks/useFormatNumberByNucleus.js';
+import { options } from '../toolbar/ToolTypes.js';
 
-import { getLayoutID, LAYOUT } from './utilities/DimensionLayout';
-import { get2DXScale, get1DYScale, get2DYScale } from './utilities/scale';
+import { getLayoutID, LAYOUT } from './utilities/DimensionLayout.js';
+import { get1DYScale, get2DXScale, get2DYScale } from './utilities/scale.js';
 
 const styles = css`
   display: flex;
diff --git a/src/component/2d/SignalDeltaLine.tsx b/src/component/2d/SignalDeltaLine.tsx
index d4cc7712c..dbd90b7f9 100644
--- a/src/component/2d/SignalDeltaLine.tsx
+++ b/src/component/2d/SignalDeltaLine.tsx
@@ -1,9 +1,9 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 
-import { useChartData } from '../context/ChartContext';
+import { useChartData } from '../context/ChartContext.js';
 
-import { useScale2DX, useScale2DY } from './utilities/scale';
+import { useScale2DX, useScale2DY } from './utilities/scale.js';
 
 const lineStyle = css`
   stroke: green;
diff --git a/src/component/2d/SlicingView.tsx b/src/component/2d/SlicingView.tsx
index 4e9bd4985..8b837c403 100644
--- a/src/component/2d/SlicingView.tsx
+++ b/src/component/2d/SlicingView.tsx
@@ -1,13 +1,13 @@
-import { Spectrum2D } from 'nmr-load-save';
+import type { Spectrum2D } from 'nmr-load-save';
 
-import { getSlice } from '../../data/data2d/Spectrum2D';
-import { useMouseTracker } from '../EventsTrackers/MouseTracker';
-import { useChartData } from '../context/ChartContext';
-import { useActiveSpectrum } from '../hooks/useActiveSpectrum';
+import { getSlice } from '../../data/data2d/Spectrum2D/index.js';
+import { useMouseTracker } from '../EventsTrackers/MouseTracker.js';
+import { useChartData } from '../context/ChartContext.js';
+import { useActiveSpectrum } from '../hooks/useActiveSpectrum.js';
 
-import HorizontalSliceChart from './1d-tracer/HorizontalSliceChart';
-import VerticalSliceChart from './1d-tracer/VerticalSliceChart';
-import { useScale2DX, useScale2DY } from './utilities/scale';
+import HorizontalSliceChart from './1d-tracer/HorizontalSliceChart.js';
+import VerticalSliceChart from './1d-tracer/VerticalSliceChart.js';
+import { useScale2DX, useScale2DY } from './utilities/scale.js';
 
 function SlicingView() {
   const { width, height, margin, data: spectra } = useChartData();
diff --git a/src/component/2d/Viewer2D.tsx b/src/component/2d/Viewer2D.tsx
index b41ca4707..c0d97591a 100644
--- a/src/component/2d/Viewer2D.tsx
+++ b/src/component/2d/Viewer2D.tsx
@@ -1,32 +1,36 @@
-import { Spectrum1D } from 'nmr-load-save';
-import { useCallback, useEffect, useMemo, ReactNode, useRef } from 'react';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { ReactNode } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { ResponsiveChart } from 'react-d3-utils';
 
-import BrushXY, { BRUSH_TYPE } from '../1d-2d/tools/BrushXY';
-import CrossLinePointer from '../1d-2d/tools/CrossLinePointer';
-import {
-  BrushTracker,
+import BrushXY, { BRUSH_TYPE } from '../1d-2d/tools/BrushXY.js';
+import CrossLinePointer from '../1d-2d/tools/CrossLinePointer.js';
+import type {
   OnBrush,
   OnClick,
   OnDoubleClick,
   OnZoom,
-} from '../EventsTrackers/BrushTracker';
-import { MouseTracker } from '../EventsTrackers/MouseTracker';
-import { useChartData } from '../context/ChartContext';
-import { useDispatch } from '../context/DispatchContext';
-import { useMapKeyModifiers } from '../context/KeyModifierContext';
-import { useViewportSize } from '../hooks/useViewportSize';
-import Spinner from '../loader/Spinner';
-import { options } from '../toolbar/ToolTypes';
+} from '../EventsTrackers/BrushTracker.js';
+import { BrushTracker } from '../EventsTrackers/BrushTracker.js';
+import { MouseTracker } from '../EventsTrackers/MouseTracker.js';
+import { useChartData } from '../context/ChartContext.js';
+import { useDispatch } from '../context/DispatchContext.js';
+import { useMapKeyModifiers } from '../context/KeyModifierContext.js';
+import { useViewportSize } from '../hooks/useViewportSize.js';
+import Spinner from '../loader/Spinner.js';
+import { options } from '../toolbar/ToolTypes.js';
 
-import { PhaseTraces } from './1d-tracer/phase-correction-traces';
-import Chart2D from './Chart2D';
-import FooterBanner from './FooterBanner';
-import SlicingView from './SlicingView';
-import { PivotIndicator } from './tools/PivotIndicator';
-import XYLabelPointer from './tools/XYLabelPointer';
-import { get2DDimensionLayout, getLayoutID } from './utilities/DimensionLayout';
-import { get2DXScale, get2DYScale } from './utilities/scale';
+import { PhaseTraces } from './1d-tracer/phase-correction-traces/index.js';
+import Chart2D from './Chart2D.js';
+import FooterBanner from './FooterBanner.js';
+import SlicingView from './SlicingView.js';
+import { PivotIndicator } from './tools/PivotIndicator.js';
+import XYLabelPointer from './tools/XYLabelPointer.js';
+import {
+  get2DDimensionLayout,
+  getLayoutID,
+} from './utilities/DimensionLayout.js';
+import { get2DXScale, get2DYScale } from './utilities/scale.js';
 
 interface Viewer2DProps {
   emptyText: ReactNode;
diff --git a/src/component/2d/XAxis.tsx b/src/component/2d/XAxis.tsx
index f3079574f..f9f223f52 100644
--- a/src/component/2d/XAxis.tsx
+++ b/src/component/2d/XAxis.tsx
@@ -1,13 +1,13 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import * as d3 from 'd3';
-import { Spectrum2D } from 'nmr-load-save';
-import { useEffect, useRef, memo } from 'react';
+import type { Spectrum2D } from 'nmr-load-save';
+import { memo, useEffect, useRef } from 'react';
 
-import { useChartData } from '../context/ChartContext';
-import useSpectrum from '../hooks/useSpectrum';
+import { useChartData } from '../context/ChartContext.js';
+import useSpectrum from '../hooks/useSpectrum.js';
 
-import { useScale2DX } from './utilities/scale';
+import { useScale2DX } from './utilities/scale.js';
 
 const axisStyles = css`
   user-select: none;
diff --git a/src/component/2d/YAxis.tsx b/src/component/2d/YAxis.tsx
index 671df414b..9f6987ed2 100644
--- a/src/component/2d/YAxis.tsx
+++ b/src/component/2d/YAxis.tsx
@@ -1,13 +1,13 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import * as d3 from 'd3';
-import { Spectrum2D } from 'nmr-load-save';
-import { useEffect, useRef, memo } from 'react';
+import type { Spectrum2D } from 'nmr-load-save';
+import { memo, useEffect, useRef } from 'react';
 
-import { useChartData } from '../context/ChartContext';
-import useSpectrum from '../hooks/useSpectrum';
+import { useChartData } from '../context/ChartContext.js';
+import useSpectrum from '../hooks/useSpectrum.js';
 
-import { useScale2DY } from './utilities/scale';
+import { useScale2DY } from './utilities/scale.js';
 
 const axisStyles = css`
   user-select: none;
diff --git a/src/component/2d/fid/FidCanvas.tsx b/src/component/2d/fid/FidCanvas.tsx
index 5f5afebc9..ed4a09118 100644
--- a/src/component/2d/fid/FidCanvas.tsx
+++ b/src/component/2d/fid/FidCanvas.tsx
@@ -1,16 +1,16 @@
-import { NmrData2DFid, NmrData2DFt } from 'cheminfo-types';
+import type { NmrData2DFid, NmrData2DFt } from 'cheminfo-types';
 import { matrixZPivotRescale } from 'ml-spectra-processing';
-import { Spectrum2D } from 'nmr-load-save';
-import { useEffect, useRef, useMemo } from 'react';
+import type { Spectrum2D } from 'nmr-load-save';
+import { useEffect, useMemo, useRef } from 'react';
 
-import { useChartData } from '../../context/ChartContext';
-import useSpectrum from '../../hooks/useSpectrum';
+import { useChartData } from '../../context/ChartContext.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
 import {
   get2DXScale,
   get2DYScale,
   useScale2DX,
   useScale2DY,
-} from '../utilities/scale';
+} from '../utilities/scale.js';
 
 export function FidCanvas() {
   const { width, height, margin, mode, xDomain, yDomain, originDomain } =
diff --git a/src/component/2d/fid/FidContainer.tsx b/src/component/2d/fid/FidContainer.tsx
index 0ca209d44..b48fbe381 100644
--- a/src/component/2d/fid/FidContainer.tsx
+++ b/src/component/2d/fid/FidContainer.tsx
@@ -1,13 +1,13 @@
-import { Spectrum2D } from 'nmr-load-save';
+import type { Spectrum2D } from 'nmr-load-save';
 
-import { getSlice } from '../../../data/data2d/Spectrum2D';
-import { useMouseTracker } from '../../EventsTrackers/MouseTracker';
-import useSpectrum from '../../hooks/useSpectrum';
-import HorizontalSliceChart from '../1d-tracer/HorizontalSliceChart';
-import VerticalSliceChart from '../1d-tracer/VerticalSliceChart';
-import { useScale2DX, useScale2DY } from '../utilities/scale';
+import { getSlice } from '../../../data/data2d/Spectrum2D/index.js';
+import { useMouseTracker } from '../../EventsTrackers/MouseTracker.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
+import HorizontalSliceChart from '../1d-tracer/HorizontalSliceChart.js';
+import VerticalSliceChart from '../1d-tracer/VerticalSliceChart.js';
+import { useScale2DX, useScale2DY } from '../utilities/scale.js';
 
-import { FidCanvas } from './FidCanvas';
+import { FidCanvas } from './FidCanvas.js';
 
 export function FidContainer() {
   const spectrum = useSpectrum() as Spectrum2D;
diff --git a/src/component/2d/ft/Contours.tsx b/src/component/2d/ft/Contours.tsx
index 184ddcc7c..ecf15e359 100644
--- a/src/component/2d/ft/Contours.tsx
+++ b/src/component/2d/ft/Contours.tsx
@@ -1,20 +1,20 @@
-import debounce from 'lodash/debounce';
-import get from 'lodash/get';
-import { Spectrum2D } from 'nmr-load-save';
+import debounce from 'lodash/debounce.js';
+import get from 'lodash/get.js';
+import type { Spectrum2D } from 'nmr-load-save';
 import { memo, useMemo, useRef } from 'react';
 
+import type { LevelSign } from '../../../data/data2d/Spectrum2D/contours.js';
 import {
   drawContours,
   getDefaultContoursLevel,
-  LevelSign,
-} from '../../../data/data2d/Spectrum2D/contours';
-import { useChartData } from '../../context/ChartContext';
-import { usePreferences } from '../../context/PreferencesContext';
-import { useToaster } from '../../context/ToasterContext';
-import { useActiveSpectrum } from '../../hooks/useActiveSpectrum';
-import { PathBuilder } from '../../utility/PathBuilder';
-import { getSpectraByNucleus } from '../../utility/getSpectraByNucleus';
-import { useScale2DX, useScale2DY } from '../utilities/scale';
+} from '../../../data/data2d/Spectrum2D/contours.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { usePreferences } from '../../context/PreferencesContext.js';
+import { useToaster } from '../../context/ToasterContext.js';
+import { useActiveSpectrum } from '../../hooks/useActiveSpectrum.js';
+import { PathBuilder } from '../../utility/PathBuilder.js';
+import { getSpectraByNucleus } from '../../utility/getSpectraByNucleus.js';
+import { useScale2DX, useScale2DY } from '../utilities/scale.js';
 
 interface ContoursPathsProps {
   id: string;
diff --git a/src/component/2d/ft/FTContainer.tsx b/src/component/2d/ft/FTContainer.tsx
index c89c4a9d6..831033af7 100644
--- a/src/component/2d/ft/FTContainer.tsx
+++ b/src/component/2d/ft/FTContainer.tsx
@@ -1,10 +1,10 @@
-import { Spectrum1D } from 'nmr-load-save';
+import type { Spectrum1D } from 'nmr-load-save';
 
-import useSpectrum from '../../hooks/useSpectrum';
-import Left1DChart from '../1d-tracer/Left1DChart';
-import Top1DChart from '../1d-tracer/Top1DChart';
+import useSpectrum from '../../hooks/useSpectrum.js';
+import Left1DChart from '../1d-tracer/Left1DChart.js';
+import Top1DChart from '../1d-tracer/Top1DChart.js';
 
-import Contours from './Contours';
+import Contours from './Contours.js';
 
 interface FTContainerProps {
   spectra?: Spectrum1D[];
diff --git a/src/component/2d/tools/PivotIndicator.tsx b/src/component/2d/tools/PivotIndicator.tsx
index b6f825401..f708d0945 100644
--- a/src/component/2d/tools/PivotIndicator.tsx
+++ b/src/component/2d/tools/PivotIndicator.tsx
@@ -1,10 +1,10 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
-import { useChartData } from '../../context/ChartContext';
-import { TraceDirection } from '../../reducer/Reducer';
-import { options } from '../../toolbar/ToolTypes';
-import { useActivePhaseTraces } from '../1d-tracer/phase-correction-traces/useActivePhaseTraces';
-import { get2DXScale, get2DYScale } from '../utilities/scale';
+import { useChartData } from '../../context/ChartContext.js';
+import type { TraceDirection } from '../../reducer/Reducer.js';
+import { options } from '../../toolbar/ToolTypes.js';
+import { useActivePhaseTraces } from '../1d-tracer/phase-correction-traces/useActivePhaseTraces.js';
+import { get2DXScale, get2DYScale } from '../utilities/scale.js';
 
 function getStyle(direction: TraceDirection, translate: number) {
   const base: CSSProperties = {
diff --git a/src/component/2d/tools/XYLabelPointer.tsx b/src/component/2d/tools/XYLabelPointer.tsx
index 9e3dfeb41..82755409b 100644
--- a/src/component/2d/tools/XYLabelPointer.tsx
+++ b/src/component/2d/tools/XYLabelPointer.tsx
@@ -1,12 +1,13 @@
-import { useMemo, CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
+import { useMemo } from 'react';
 
-import { useBrushTracker } from '../../EventsTrackers/BrushTracker';
-import { useMouseTracker } from '../../EventsTrackers/MouseTracker';
-import { useChartData } from '../../context/ChartContext';
-import { useActiveSpectrum } from '../../hooks/useActiveSpectrum';
-import { useFormatNumberByNucleus } from '../../hooks/useFormatNumberByNucleus';
-import { getLayoutID, LAYOUT } from '../utilities/DimensionLayout';
-import { get1DYScale, useScale2DX, useScale2DY } from '../utilities/scale';
+import { useBrushTracker } from '../../EventsTrackers/BrushTracker.js';
+import { useMouseTracker } from '../../EventsTrackers/MouseTracker.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { useActiveSpectrum } from '../../hooks/useActiveSpectrum.js';
+import { useFormatNumberByNucleus } from '../../hooks/useFormatNumberByNucleus.js';
+import { getLayoutID, LAYOUT } from '../utilities/DimensionLayout.js';
+import { get1DYScale, useScale2DX, useScale2DY } from '../utilities/scale.js';
 
 const style: CSSProperties = {
   cursor: 'crosshair',
diff --git a/src/component/2d/utilities/scale.ts b/src/component/2d/utilities/scale.ts
index f446c1970..e2e8f6bf8 100644
--- a/src/component/2d/utilities/scale.ts
+++ b/src/component/2d/utilities/scale.ts
@@ -1,10 +1,11 @@
-import { NmrData2D } from 'cheminfo-types';
+import type { NmrData2D } from 'cheminfo-types';
 import { scaleLinear } from 'd3';
 
-import { useChartData } from '../../context/ChartContext';
-import { Margin, SpectraDirection } from '../../reducer/Reducer';
+import { useChartData } from '../../context/ChartContext.js';
+import type { Margin, SpectraDirection } from '../../reducer/Reducer.js';
 
-import { LAYOUT, Layout } from './DimensionLayout';
+import type { Layout } from './DimensionLayout.js';
+import { LAYOUT } from './DimensionLayout.js';
 
 interface Scale2DXOptions {
   width: number;
diff --git a/src/component/2d/zones/IndicationLines.tsx b/src/component/2d/zones/IndicationLines.tsx
index 6c7ce285b..f47e4cafb 100644
--- a/src/component/2d/zones/IndicationLines.tsx
+++ b/src/component/2d/zones/IndicationLines.tsx
@@ -1,12 +1,12 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { Spectrum1D } from 'nmr-load-save';
-import { useState, useEffect } from 'react';
+import type { Spectrum1D } from 'nmr-load-save';
+import { useEffect, useState } from 'react';
 
-import { SIGNAL_INCLUDED_KINDS } from '../../../data/constants/signalsKinds';
-import { isSpectrum1D } from '../../../data/data1d/Spectrum1D';
-import { useChartData } from '../../context/ChartContext';
-import { useScale2DX, useScale2DY } from '../utilities/scale';
+import { SIGNAL_INCLUDED_KINDS } from '../../../data/constants/signalsKinds.js';
+import { isSpectrum1D } from '../../../data/data1d/Spectrum1D/index.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { useScale2DX, useScale2DY } from '../utilities/scale.js';
 
 const lineStyle = css`
   stroke: lightgrey;
diff --git a/src/component/2d/zones/Signal.tsx b/src/component/2d/zones/Signal.tsx
index ed7bcefbf..6c6cb70c5 100644
--- a/src/component/2d/zones/Signal.tsx
+++ b/src/component/2d/zones/Signal.tsx
@@ -1,15 +1,15 @@
 /** @jsxImportSource @emotion/react */
 
-import { Signal2D } from 'nmr-processing';
-import { useState, useEffect, useCallback } from 'react';
+import type { Signal2D } from 'nmr-processing';
+import { useCallback, useEffect, useState } from 'react';
 
-import { buildID } from '../../../data/utilities/Concatenation';
-import { useAssignment } from '../../assignment/AssignmentsContext';
-import { useHighlightData, useHighlight } from '../../highlight';
-import { useActiveSpectrumZonesViewState } from '../../hooks/useActiveSpectrumZonesViewState';
-import { useScale2DX, useScale2DY } from '../utilities/scale';
+import { buildID } from '../../../data/utilities/Concatenation.js';
+import { useAssignment } from '../../assignment/AssignmentsContext.js';
+import { useHighlight, useHighlightData } from '../../highlight/index.js';
+import { useActiveSpectrumZonesViewState } from '../../hooks/useActiveSpectrumZonesViewState.js';
+import { useScale2DX, useScale2DY } from '../utilities/scale.js';
 
-import SignalCrosshair from './SignalCrosshair';
+import SignalCrosshair from './SignalCrosshair.js';
 
 interface SignalProps {
   signal: Signal2D;
diff --git a/src/component/2d/zones/SignalCrosshair.tsx b/src/component/2d/zones/SignalCrosshair.tsx
index 36a605bea..b3f4d2588 100644
--- a/src/component/2d/zones/SignalCrosshair.tsx
+++ b/src/component/2d/zones/SignalCrosshair.tsx
@@ -1,11 +1,11 @@
 /** @jsxImportSource @emotion/react */
 
-import { Signal2D } from 'nmr-processing';
+import type { Signal2D } from 'nmr-processing';
 import { useMemo } from 'react';
 
-import { buildID } from '../../../data/utilities/Concatenation';
-import { useHighlight } from '../../highlight';
-import SignalDeltaLine from '../SignalDeltaLine';
+import { buildID } from '../../../data/utilities/Concatenation.js';
+import { useHighlight } from '../../highlight/index.js';
+import SignalDeltaLine from '../SignalDeltaLine.js';
 
 interface SignalCrosshairProps {
   signal: Signal2D;
diff --git a/src/component/2d/zones/Zone.tsx b/src/component/2d/zones/Zone.tsx
index fa1481ab6..e93539de7 100644
--- a/src/component/2d/zones/Zone.tsx
+++ b/src/component/2d/zones/Zone.tsx
@@ -1,19 +1,19 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Zone as ZoneType } from 'nmr-processing';
-import { useState, useEffect } from 'react';
+import type { Zone as ZoneType } from 'nmr-processing';
+import { useEffect, useState } from 'react';
 import { PiTextTBold } from 'react-icons/pi';
 
-import { checkZoneKind } from '../../../data/utilities/ZoneUtilities';
-import { useAssignment } from '../../assignment/AssignmentsContext';
-import { useShareData } from '../../context/ShareDataContext';
-import { SVGButton } from '../../elements/SVGButton';
-import { HighlightEventSource, useHighlight } from '../../highlight';
-import { useActiveSpectrumZonesViewState } from '../../hooks/useActiveSpectrumZonesViewState';
-import { useScale2DX, useScale2DY } from '../utilities/scale';
+import { checkZoneKind } from '../../../data/utilities/ZoneUtilities.js';
+import { useAssignment } from '../../assignment/AssignmentsContext.js';
+import { useShareData } from '../../context/ShareDataContext.js';
+import { SVGButton } from '../../elements/SVGButton.js';
+import { HighlightEventSource, useHighlight } from '../../highlight/index.js';
+import { useActiveSpectrumZonesViewState } from '../../hooks/useActiveSpectrumZonesViewState.js';
+import { useScale2DX, useScale2DY } from '../utilities/scale.js';
 
-import Signal from './Signal';
+import Signal from './Signal.js';
 
 const stylesOnHover = css`
   pointer-events: bounding-box;
diff --git a/src/component/2d/zones/Zones.tsx b/src/component/2d/zones/Zones.tsx
index 0e031fac4..7ab474e4e 100644
--- a/src/component/2d/zones/Zones.tsx
+++ b/src/component/2d/zones/Zones.tsx
@@ -1,11 +1,11 @@
-import { Display2D, Spectrum2D } from 'nmr-load-save';
-import { Zones as ZonesType } from 'nmr-processing';
+import type { Display2D, Spectrum2D } from 'nmr-load-save';
+import type { Zones as ZonesType } from 'nmr-processing';
 import { memo } from 'react';
 
-import { useChartData } from '../../context/ChartContext';
-import useSpectrum from '../../hooks/useSpectrum';
+import { useChartData } from '../../context/ChartContext.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
 
-import Zone from './Zone';
+import Zone from './Zone.js';
 
 interface ZonesInnerProps {
   zones: ZonesType;
diff --git a/src/component/2d/zones/ZonesAssignmentsLabels.tsx b/src/component/2d/zones/ZonesAssignmentsLabels.tsx
index c566486dc..9fd9d94d4 100644
--- a/src/component/2d/zones/ZonesAssignmentsLabels.tsx
+++ b/src/component/2d/zones/ZonesAssignmentsLabels.tsx
@@ -1,21 +1,22 @@
 import styled from '@emotion/styled';
-import { Spectrum2D } from 'nmr-load-save';
-import { Zone, Zones as ZonesType } from 'nmr-processing';
+import type { Spectrum2D } from 'nmr-load-save';
+import type { Zone, Zones as ZonesType } from 'nmr-processing';
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { PiTextTSlash } from 'react-icons/pi';
 
-import { FieldEdition } from '../../1d-2d/FieldEdition';
-import { useChartData } from '../../context/ChartContext';
-import { useDispatch } from '../../context/DispatchContext';
-import { useGlobal } from '../../context/GlobalContext';
-import { useShareData } from '../../context/ShareDataContext';
-import { SVGButton } from '../../elements/SVGButton';
-import { SVGGroup } from '../../elements/SVGGroup';
-import useDraggable, { Position } from '../../elements/draggable/useDraggable';
-import { useHighlight } from '../../highlight';
-import { useActiveSpectrumZonesViewState } from '../../hooks/useActiveSpectrumZonesViewState';
-import useSpectrum from '../../hooks/useSpectrum';
-import { useScale2DX, useScale2DY } from '../utilities/scale';
+import { FieldEdition } from '../../1d-2d/FieldEdition.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { useGlobal } from '../../context/GlobalContext.js';
+import { useShareData } from '../../context/ShareDataContext.js';
+import { SVGButton } from '../../elements/SVGButton.js';
+import { SVGGroup } from '../../elements/SVGGroup.js';
+import type { Position } from '../../elements/draggable/useDraggable.js';
+import useDraggable from '../../elements/draggable/useDraggable.js';
+import { useHighlight } from '../../highlight/index.js';
+import { useActiveSpectrumZonesViewState } from '../../hooks/useActiveSpectrumZonesViewState.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
+import { useScale2DX, useScale2DY } from '../utilities/scale.js';
 
 interface ZonesInnerProps {
   zones: ZonesType;
diff --git a/src/component/EventsTrackers/BrushTracker.tsx b/src/component/EventsTrackers/BrushTracker.tsx
index dae486640..65db31df8 100644
--- a/src/component/EventsTrackers/BrushTracker.tsx
+++ b/src/component/EventsTrackers/BrushTracker.tsx
@@ -1,19 +1,17 @@
-import lodashDebounce from 'lodash/debounce';
-import lodashMap from 'lodash/map';
+import lodashDebounce from 'lodash/debounce.js';
+import lodashMap from 'lodash/map.js';
+import type { CSSProperties, ReactNode, Reducer } from 'react';
 import {
   createContext,
-  CSSProperties,
-  ReactNode,
   useCallback,
+  useContext,
   useEffect,
   useReducer,
   useRef,
   useState,
-  useContext,
-  Reducer,
 } from 'react';
 
-import { ActionType } from '../reducer/types/ActionType';
+import type { ActionType } from '../reducer/types/ActionType.js';
 
 type Step = 'initial' | 'start' | 'end' | 'brushing';
 export interface BrushTrackerContext {
diff --git a/src/component/EventsTrackers/KeysListenerTracker.tsx b/src/component/EventsTrackers/KeysListenerTracker.tsx
index d4d17bfd6..4b3bbd6c5 100644
--- a/src/component/EventsTrackers/KeysListenerTracker.tsx
+++ b/src/component/EventsTrackers/KeysListenerTracker.tsx
@@ -1,21 +1,23 @@
-import { RefObject, useCallback, useEffect, useMemo, useRef } from 'react';
+import type { RefObject } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useOnOff } from 'react-science/ui';
 
-import checkModifierKeyActivated from '../../data/utilities/checkModifierKeyActivated';
-import { useAssignmentData } from '../assignment/AssignmentsContext';
-import { useChartData } from '../context/ChartContext';
-import { useDispatch } from '../context/DispatchContext';
-import { useLoader } from '../context/LoaderContext';
-import { usePreferences } from '../context/PreferencesContext';
-import { useToaster } from '../context/ToasterContext';
-import { AlertButton, useAlert } from '../elements/Alert';
-import { useExportManagerAPI } from '../elements/export/ExportManager';
-import { HighlightEventSource, useHighlightData } from '../highlight/index';
-import { useCheckToolsVisibility } from '../hooks/useCheckToolsVisibility';
-import { useExport } from '../hooks/useExport';
-import useToolsFunctions from '../hooks/useToolsFunctions';
-import SaveAsModal from '../modal/SaveAsModal';
-import { options } from '../toolbar/ToolTypes';
+import checkModifierKeyActivated from '../../data/utilities/checkModifierKeyActivated.js';
+import { useAssignmentData } from '../assignment/AssignmentsContext.js';
+import { useChartData } from '../context/ChartContext.js';
+import { useDispatch } from '../context/DispatchContext.js';
+import { useLoader } from '../context/LoaderContext.js';
+import { usePreferences } from '../context/PreferencesContext.js';
+import { useToaster } from '../context/ToasterContext.js';
+import type { AlertButton } from '../elements/Alert.js';
+import { useAlert } from '../elements/Alert.js';
+import { useExportManagerAPI } from '../elements/export/ExportManager.js';
+import { HighlightEventSource, useHighlightData } from '../highlight/index.js';
+import { useCheckToolsVisibility } from '../hooks/useCheckToolsVisibility.js';
+import { useExport } from '../hooks/useExport.js';
+import useToolsFunctions from '../hooks/useToolsFunctions.js';
+import SaveAsModal from '../modal/SaveAsModal.js';
+import { options } from '../toolbar/ToolTypes.js';
 
 interface KeysListenerTrackerProps {
   mainDivRef: RefObject<HTMLDivElement>;
diff --git a/src/component/EventsTrackers/MouseTracker.tsx b/src/component/EventsTrackers/MouseTracker.tsx
index 83edde246..00b2769ec 100644
--- a/src/component/EventsTrackers/MouseTracker.tsx
+++ b/src/component/EventsTrackers/MouseTracker.tsx
@@ -1,11 +1,5 @@
-import {
-  CSSProperties,
-  createContext,
-  useCallback,
-  useState,
-  useContext,
-  ReactNode,
-} from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import { createContext, useCallback, useState, useContext } from 'react';
 
 interface MouseTrackerData {
   x: number;
diff --git a/src/component/assignment/AssignmentsContext.ts b/src/component/assignment/AssignmentsContext.ts
index edfbb1375..4772ffbe5 100644
--- a/src/component/assignment/AssignmentsContext.ts
+++ b/src/component/assignment/AssignmentsContext.ts
@@ -1,6 +1,6 @@
 import { createContext, useCallback, useContext, useMemo } from 'react';
 
-import { AssignmentsActions } from './AssignmentsReducer';
+import type { AssignmentsActions } from './AssignmentsReducer.js';
 
 export type Axis = 'x' | 'y';
 export type Assignment = Record<Axis, string[]>;
diff --git a/src/component/assignment/AssignmentsReducer.ts b/src/component/assignment/AssignmentsReducer.ts
index 09e24f584..0c0ff5c77 100644
--- a/src/component/assignment/AssignmentsReducer.ts
+++ b/src/component/assignment/AssignmentsReducer.ts
@@ -1,16 +1,16 @@
-import { NmrData1D, NmrData2D } from 'cheminfo-types';
+import type { NmrData1D, NmrData2D } from 'cheminfo-types';
 
-import { ActionType } from '../reducer/types/ActionType';
+import type { ActionType } from '../reducer/types/ActionType.js';
 
-import {
+import type {
   AssignmentDimension,
   AssignmentState,
   Axis,
-} from './AssignmentsContext';
-import initAssignment from './actions/initAssignment';
-import removeAssignments from './actions/removeAssignment';
-import setActiveAssignment from './actions/setActiveAssignment';
-import toggleAssignment from './actions/toggleAssignment';
+} from './AssignmentsContext.js';
+import initAssignment from './actions/initAssignment.js';
+import removeAssignments from './actions/removeAssignment.js';
+import setActiveAssignment from './actions/setActiveAssignment.js';
+import toggleAssignment from './actions/toggleAssignment.js';
 
 export type InitiateAction = ActionType<
   'INITIATE_ASSIGNMENTS',
diff --git a/src/component/assignment/actions/initAssignment.ts b/src/component/assignment/actions/initAssignment.ts
index b861f6a07..a1e850dc1 100644
--- a/src/component/assignment/actions/initAssignment.ts
+++ b/src/component/assignment/actions/initAssignment.ts
@@ -1,8 +1,9 @@
-import { Spectrum } from 'nmr-load-save';
-import { Ranges, Zones } from 'nmr-processing';
+import type { Spectrum } from 'nmr-load-save';
+import type { Ranges, Zones } from 'nmr-processing';
 
-import { isSpectrum1D } from '../../../data/data1d/Spectrum1D';
-import { assignmentState, AssignmentState, Axis } from '../AssignmentsContext';
+import { isSpectrum1D } from '../../../data/data1d/Spectrum1D/index.js';
+import type { AssignmentState, Axis } from '../AssignmentsContext.js';
+import { assignmentState } from '../AssignmentsContext.js';
 
 export default function initAssignment(action) {
   const newState = {
diff --git a/src/component/assignment/actions/removeAssignment.ts b/src/component/assignment/actions/removeAssignment.ts
index 44a2d7146..0dcdf3b3b 100644
--- a/src/component/assignment/actions/removeAssignment.ts
+++ b/src/component/assignment/actions/removeAssignment.ts
@@ -1,4 +1,4 @@
-import { AssignmentState, Axis } from '../AssignmentsContext';
+import type { AssignmentState, Axis } from '../AssignmentsContext.js';
 
 interface RemoveAction {
   ids: string[];
diff --git a/src/component/assignment/actions/setActiveAssignment.ts b/src/component/assignment/actions/setActiveAssignment.ts
index a218a3c8b..afa387a68 100644
--- a/src/component/assignment/actions/setActiveAssignment.ts
+++ b/src/component/assignment/actions/setActiveAssignment.ts
@@ -1,5 +1,5 @@
-import { AssignmentState } from '../AssignmentsContext';
-import { SetActiveAction } from '../AssignmentsReducer';
+import type { AssignmentState } from '../AssignmentsContext.js';
+import type { SetActiveAction } from '../AssignmentsReducer.js';
 
 export default function setActiveAssignment(
   state: AssignmentState,
diff --git a/src/component/assignment/actions/toggleAssignment.ts b/src/component/assignment/actions/toggleAssignment.ts
index 0f52c9ecc..f15f608fa 100644
--- a/src/component/assignment/actions/toggleAssignment.ts
+++ b/src/component/assignment/actions/toggleAssignment.ts
@@ -1,11 +1,11 @@
-import {
+import type {
   AssignmentDimension,
   AssignmentState,
   Axis,
-} from '../AssignmentsContext';
-import { ToggleAction } from '../AssignmentsReducer';
+} from '../AssignmentsContext.js';
+import type { ToggleAction } from '../AssignmentsReducer.js';
 
-import { removeAssignment } from './removeAssignment';
+import { removeAssignment } from './removeAssignment.js';
 
 interface AddAction {
   id: string;
diff --git a/src/component/assignment/index.tsx b/src/component/assignment/index.tsx
index 776efdde7..c74f206f0 100644
--- a/src/component/assignment/index.tsx
+++ b/src/component/assignment/index.tsx
@@ -1,14 +1,15 @@
-import { useReducer, useMemo, useEffect, Reducer, ReactNode } from 'react';
+import type { Reducer, ReactNode } from 'react';
+import { useReducer, useMemo, useEffect } from 'react';
 
-import { useChartData } from '../context/ChartContext';
+import { useChartData } from '../context/ChartContext.js';
 
-import {
+import type {
   AssignmentContext,
-  assignmentState,
   AssignmentState,
-  assignmentContext,
-} from './AssignmentsContext';
-import assignmentReducer, { AssignmentsActions } from './AssignmentsReducer';
+} from './AssignmentsContext.js';
+import { assignmentState, assignmentContext } from './AssignmentsContext.js';
+import type { AssignmentsActions } from './AssignmentsReducer.js';
+import assignmentReducer from './AssignmentsReducer.js';
 
 interface AssignmentProviderProps {
   children: ReactNode;
diff --git a/src/component/assignment/utilities/filterForIDsWithAssignment.ts b/src/component/assignment/utilities/filterForIDsWithAssignment.ts
index 223790eb3..51e299d4c 100644
--- a/src/component/assignment/utilities/filterForIDsWithAssignment.ts
+++ b/src/component/assignment/utilities/filterForIDsWithAssignment.ts
@@ -1,4 +1,4 @@
-import { AssignmentContext } from '../AssignmentsContext';
+import type { AssignmentContext } from '../AssignmentsContext.js';
 
 export function filterForIDsWithAssignment(
   assignmentData: AssignmentContext,
diff --git a/src/component/context/ChartContext.tsx b/src/component/context/ChartContext.tsx
index 78ffc57bc..da50f7d01 100644
--- a/src/component/context/ChartContext.tsx
+++ b/src/component/context/ChartContext.tsx
@@ -1,8 +1,9 @@
 import { produce } from 'immer';
 import { createContext, useContext } from 'react';
 
-import { useViewportSize } from '../hooks/useViewportSize';
-import { initialState, State } from '../reducer/Reducer';
+import { useViewportSize } from '../hooks/useViewportSize.js';
+import type { State } from '../reducer/Reducer.js';
+import { initialState } from '../reducer/Reducer.js';
 
 export const ChartContext = createContext<State>(initialState);
 export const ChartDataProvider = ChartContext.Provider;
diff --git a/src/component/context/DispatchContext.tsx b/src/component/context/DispatchContext.tsx
index fb4626c5e..d8b483a9a 100644
--- a/src/component/context/DispatchContext.tsx
+++ b/src/component/context/DispatchContext.tsx
@@ -1,22 +1,22 @@
 import { createContext, useContext } from 'react';
 
-import { AssignmentsActions } from '../reducer/actions/AssignmentsActions';
-import { CorrelationsActions } from '../reducer/actions/CorrelationsActions';
-import { DatabaseActions } from '../reducer/actions/DatabaseActions';
-import { DimensionsActions } from '../reducer/actions/DimensionsActions';
-import { DomainActions } from '../reducer/actions/DomainActions';
-import { FiltersActions } from '../reducer/actions/FiltersActions';
-import { IntegralsActions } from '../reducer/actions/IntegralsActions';
-import { LoadActions } from '../reducer/actions/LoadActions';
-import { MoleculeActions } from '../reducer/actions/MoleculeActions';
-import { PeaksActions } from '../reducer/actions/PeaksActions';
-import { PreferencesActions } from '../reducer/actions/PreferencesActions';
-import { RangesActions } from '../reducer/actions/RangesActions';
-import { SpectrumActions } from '../reducer/actions/SpectraActions';
-import { SpectraAnalysisActions } from '../reducer/actions/SpectraAnalysisAction';
-import { ToolsActions } from '../reducer/actions/ToolsActions';
-import { ZonesActions } from '../reducer/actions/ZonesActions';
-import { ActionType } from '../reducer/types/ActionType';
+import type { AssignmentsActions } from '../reducer/actions/AssignmentsActions.js';
+import type { CorrelationsActions } from '../reducer/actions/CorrelationsActions.js';
+import type { DatabaseActions } from '../reducer/actions/DatabaseActions.js';
+import type { DimensionsActions } from '../reducer/actions/DimensionsActions.js';
+import type { DomainActions } from '../reducer/actions/DomainActions.js';
+import type { FiltersActions } from '../reducer/actions/FiltersActions.js';
+import type { IntegralsActions } from '../reducer/actions/IntegralsActions.js';
+import type { LoadActions } from '../reducer/actions/LoadActions.js';
+import type { MoleculeActions } from '../reducer/actions/MoleculeActions.js';
+import type { PeaksActions } from '../reducer/actions/PeaksActions.js';
+import type { PreferencesActions } from '../reducer/actions/PreferencesActions.js';
+import type { RangesActions } from '../reducer/actions/RangesActions.js';
+import type { SpectrumActions } from '../reducer/actions/SpectraActions.js';
+import type { SpectraAnalysisActions } from '../reducer/actions/SpectraAnalysisAction.js';
+import type { ToolsActions } from '../reducer/actions/ToolsActions.js';
+import type { ZonesActions } from '../reducer/actions/ZonesActions.js';
+import type { ActionType } from '../reducer/types/ActionType.js';
 
 export type Action =
   | ToolsActions
diff --git a/src/component/context/FilterSyncOptionsContext.tsx b/src/component/context/FilterSyncOptionsContext.tsx
index 2773160d6..2e415b2a3 100644
--- a/src/component/context/FilterSyncOptionsContext.tsx
+++ b/src/component/context/FilterSyncOptionsContext.tsx
@@ -1,4 +1,5 @@
-import React, {
+import type { ReactNode } from 'react';
+import {
   createContext,
   useCallback,
   useContext,
@@ -68,7 +69,7 @@ export function useSyncedFilterOptions(onWatch: (options: any) => void) {
 export function FilterSyncOptionsProvider({
   children,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
 }) {
   const [sharedFilterOptions, updateFilterOptions] = useState<unknown | null>(
     null,
diff --git a/src/component/context/KeyModifierContext.tsx b/src/component/context/KeyModifierContext.tsx
index 16480d2c1..a50576c57 100644
--- a/src/component/context/KeyModifierContext.tsx
+++ b/src/component/context/KeyModifierContext.tsx
@@ -1,13 +1,7 @@
-import {
-  ReactNode,
-  createContext,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-
-import { usePreferences } from './PreferencesContext';
+import type { ReactNode } from 'react';
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+
+import { usePreferences } from './PreferencesContext.js';
 
 type ModifiersKey = `shift[${boolean}]_ctrl[${boolean}]_alt[${boolean}]`;
 
diff --git a/src/component/context/LoggerContext.tsx b/src/component/context/LoggerContext.tsx
index 08b5b82ba..b7945e0a0 100644
--- a/src/component/context/LoggerContext.tsx
+++ b/src/component/context/LoggerContext.tsx
@@ -1,18 +1,19 @@
-import { FifoLogger, LogEntry } from 'fifo-logger';
+import type { LogEntry } from 'fifo-logger';
+import { FifoLogger } from 'fifo-logger';
+import type { ReactNode } from 'react';
 import {
   createContext,
+  useCallback,
   useContext,
-  ReactNode,
-  useRef,
+  useEffect,
   useMemo,
+  useRef,
   useState,
-  useCallback,
-  useEffect,
 } from 'react';
 
-import { LogsHistoryModal } from '../modal/LogsHistoryModal';
+import { LogsHistoryModal } from '../modal/LogsHistoryModal.js';
 
-import { usePreferences } from './PreferencesContext';
+import { usePreferences } from './PreferencesContext.js';
 
 export const LoggerContext = createContext<{
   logger: FifoLogger;
diff --git a/src/component/context/PreferencesContext.tsx b/src/component/context/PreferencesContext.tsx
index 7cf6b7aef..992230b95 100644
--- a/src/component/context/PreferencesContext.tsx
+++ b/src/component/context/PreferencesContext.tsx
@@ -1,11 +1,11 @@
 import { createContext, useContext, useMemo } from 'react';
 
-import {
-  preferencesInitialState,
+import type {
   PreferencesState,
   WorkspaceWithSource,
-} from '../reducer/preferences/preferencesReducer';
-import { isReadOnlyWorkspace } from '../reducer/preferences/utilities/isReadOnlyWorkspace';
+} from '../reducer/preferences/preferencesReducer.js';
+import { preferencesInitialState } from '../reducer/preferences/preferencesReducer.js';
+import { isReadOnlyWorkspace } from '../reducer/preferences/utilities/isReadOnlyWorkspace.js';
 
 export interface PreferencesContextData extends PreferencesState {
   isCurrentWorkspaceReadOnly: boolean;
diff --git a/src/component/context/PrepareExportContext.tsx b/src/component/context/PrepareExportContext.tsx
index 784b18eea..5223821e2 100644
--- a/src/component/context/PrepareExportContext.tsx
+++ b/src/component/context/PrepareExportContext.tsx
@@ -1,5 +1,5 @@
+import type { ReactNode } from 'react';
 import {
-  ReactNode,
   createContext,
   useCallback,
   useContext,
diff --git a/src/component/context/ScaleContext.tsx b/src/component/context/ScaleContext.tsx
index b52b7ec4a..cb45a1749 100644
--- a/src/component/context/ScaleContext.tsx
+++ b/src/component/context/ScaleContext.tsx
@@ -1,6 +1,7 @@
 import { createContext, useContext } from 'react';
 
-import { scaleInitialState, ScaleState } from '../reducer/scaleReducer';
+import type { ScaleState } from '../reducer/scaleReducer.js';
+import { scaleInitialState } from '../reducer/scaleReducer.js';
 
 export const scaleContext = createContext<ScaleState>(scaleInitialState);
 export const ScaleProvider = scaleContext.Provider;
diff --git a/src/component/context/ShareDataContext.tsx b/src/component/context/ShareDataContext.tsx
index d117b2d7e..b6b3d5f93 100644
--- a/src/component/context/ShareDataContext.tsx
+++ b/src/component/context/ShareDataContext.tsx
@@ -1,4 +1,5 @@
-import React, { createContext, useContext, useMemo, useState } from 'react';
+import type { ReactNode } from 'react';
+import { createContext, useContext, useMemo, useState } from 'react';
 
 interface ShareDataState<T> {
   data: T | null;
@@ -17,7 +18,7 @@ export function useShareData<T>(): ShareDataState<T> {
   return context;
 }
 
-export function ShareDataProvider({ children }: { children: React.ReactNode }) {
+export function ShareDataProvider({ children }: { children: ReactNode }) {
   const [data, setData] = useState<unknown | null>(null);
 
   const state = useMemo(() => {
diff --git a/src/component/context/ToasterContext.tsx b/src/component/context/ToasterContext.tsx
index a7fee8f7e..20922d430 100644
--- a/src/component/context/ToasterContext.tsx
+++ b/src/component/context/ToasterContext.tsx
@@ -1,11 +1,7 @@
-import {
-  Classes,
-  OverlayToaster,
-  Position,
-  Spinner,
-  ToastProps,
-} from '@blueprintjs/core';
-import { ReactNode, createContext, useContext, useMemo, useRef } from 'react';
+import type { ToastProps } from '@blueprintjs/core';
+import { Classes, OverlayToaster, Position, Spinner } from '@blueprintjs/core';
+import type { ReactNode } from 'react';
+import { createContext, useContext, useMemo, useRef } from 'react';
 
 interface ToasterContextProps {
   toaster: OverlayToaster | null;
diff --git a/src/component/context/TopicMoleculeContext.tsx b/src/component/context/TopicMoleculeContext.tsx
index e2c423b1f..7fc6e845e 100644
--- a/src/component/context/TopicMoleculeContext.tsx
+++ b/src/component/context/TopicMoleculeContext.tsx
@@ -1,8 +1,9 @@
 import OCL from 'openchemlib/full';
 import { TopicMolecule } from 'openchemlib-utils';
-import { ReactNode, createContext, useContext, useEffect, useRef } from 'react';
+import type { ReactNode } from 'react';
+import { createContext, useContext, useEffect, useRef } from 'react';
 
-import { useChartData } from './ChartContext';
+import { useChartData } from './ChartContext.js';
 
 const TopicMoleculeContext = createContext<Record<string, TopicMolecule>>({});
 
diff --git a/src/component/elements/ActionButtons.tsx b/src/component/elements/ActionButtons.tsx
index 6b58a4ae3..783eef64e 100644
--- a/src/component/elements/ActionButtons.tsx
+++ b/src/component/elements/ActionButtons.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@blueprintjs/core';
-import { CSSProperties, MouseEvent } from 'react';
+import type { CSSProperties, MouseEvent } from 'react';
 
 interface ActionButtonsProps {
   onDone: (event?: MouseEvent) => void;
diff --git a/src/component/elements/ActionsButtonsPopover.tsx b/src/component/elements/ActionsButtonsPopover.tsx
index fe3f9bd01..0497920af 100644
--- a/src/component/elements/ActionsButtonsPopover.tsx
+++ b/src/component/elements/ActionsButtonsPopover.tsx
@@ -1,8 +1,12 @@
 /** @jsxImportSource @emotion/react */
-import { Popover, PopoverProps } from '@blueprintjs/core';
-import { css, Interpolation, Theme } from '@emotion/react';
-import { CSSProperties, Fragment } from 'react';
-import { Button, ButtonProps } from 'react-science/ui';
+import type { PopoverProps } from '@blueprintjs/core';
+import { Popover } from '@blueprintjs/core';
+import type { Interpolation, Theme } from '@emotion/react';
+import { css } from '@emotion/react';
+import type { CSSProperties } from 'react';
+import { Fragment } from 'react';
+import type { ButtonProps } from 'react-science/ui';
+import { Button } from 'react-science/ui';
 
 export interface ActionsButtonsPopoverProps
   extends Omit<PopoverProps, 'interactionKind' | 'content'> {
diff --git a/src/component/elements/ActiveButton.tsx b/src/component/elements/ActiveButton.tsx
index 6a2e789a7..9b236b34b 100644
--- a/src/component/elements/ActiveButton.tsx
+++ b/src/component/elements/ActiveButton.tsx
@@ -1,8 +1,9 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { CSSProperties, memo, ReactNode, useCallback } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import { memo, useCallback } from 'react';
 
-import ToolTip from './ToolTip/ToolTip';
+import ToolTip from './ToolTip/ToolTip.js';
 
 const styles = css`
   background-color: #f5f5f5;
diff --git a/src/component/elements/Alert.tsx b/src/component/elements/Alert.tsx
index ec1de5aa7..ba4eb107b 100644
--- a/src/component/elements/Alert.tsx
+++ b/src/component/elements/Alert.tsx
@@ -1,20 +1,10 @@
 /** @jsxImportSource @emotion/react */
-import {
-  Button,
-  ButtonProps,
-  Dialog,
-  DialogBody,
-  DialogFooter,
-} from '@blueprintjs/core';
+import type { ButtonProps } from '@blueprintjs/core';
+import { Button, Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 import { v4 } from '@lukeed/uuid';
-import React, {
-  createContext,
-  useState,
-  useContext,
-  ReactNode,
-  useMemo,
-} from 'react';
+import type { ReactNode } from 'react';
+import { createContext, useContext, useMemo, useState } from 'react';
 
 const Message = styled.p`
   font-weight: bold;
@@ -84,9 +74,7 @@ export function useAlert() {
   return context;
 }
 
-export const AlertProvider: React.FC<{ children: ReactNode }> = ({
-  children,
-}) => {
+export function AlertProvider({ children }: { children: ReactNode }) {
   const [alerts, setAlerts] = useState<AlertItem[]>([]);
 
   function hideAlert(id: string) {
@@ -110,7 +98,7 @@ export const AlertProvider: React.FC<{ children: ReactNode }> = ({
       </AlertContext.Provider>
     </>
   );
-};
+}
 
 interface AlertsProps {
   onHide: (id: string) => void;
diff --git a/src/component/elements/Button.tsx b/src/component/elements/Button.tsx
index ec96a9e67..78a2b4494 100644
--- a/src/component/elements/Button.tsx
+++ b/src/component/elements/Button.tsx
@@ -1,8 +1,13 @@
 //TODO resolve the eslint rules
 
 /** @jsxImportSource @emotion/react */
-import { css, CSSObject, SerializedStyles } from '@emotion/react';
-import { CSSProperties, ComponentPropsWithoutRef, ElementType } from 'react';
+import type { CSSObject, SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
+import type {
+  CSSProperties,
+  ComponentPropsWithoutRef,
+  ElementType,
+} from 'react';
 import { FaInfoCircle } from 'react-icons/fa';
 
 type Size = 'xSmall' | 'small' | 'medium' | 'large';
diff --git a/src/component/elements/ButtonToolTip.tsx b/src/component/elements/ButtonToolTip.tsx
index 3bdb68602..de2828f75 100644
--- a/src/component/elements/ButtonToolTip.tsx
+++ b/src/component/elements/ButtonToolTip.tsx
@@ -1,6 +1,6 @@
-import { CSSProperties, InputHTMLAttributes, ReactNode } from 'react';
+import type { CSSProperties, InputHTMLAttributes, ReactNode } from 'react';
 
-import ToolTip from './ToolTip/ToolTip';
+import ToolTip from './ToolTip/ToolTip.js';
 
 interface ButtonToolTipProps
   extends Omit<InputHTMLAttributes<HTMLButtonElement>, 'type'> {
diff --git a/src/component/elements/CheckBox.tsx b/src/component/elements/CheckBox.tsx
index c39ce1e12..bf1aa78eb 100644
--- a/src/component/elements/CheckBox.tsx
+++ b/src/component/elements/CheckBox.tsx
@@ -1,4 +1,5 @@
-import { useCallback, forwardRef, ForwardedRef, CSSProperties } from 'react';
+import type { ForwardedRef, CSSProperties } from 'react';
+import { useCallback, forwardRef } from 'react';
 
 export interface CheckBoxProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
diff --git a/src/component/elements/CheckController.tsx b/src/component/elements/CheckController.tsx
index 3728dd84e..61657d26e 100644
--- a/src/component/elements/CheckController.tsx
+++ b/src/component/elements/CheckController.tsx
@@ -1,5 +1,7 @@
-import { Checkbox, CheckboxProps } from '@blueprintjs/core';
-import { Controller, ControllerProps, FieldValues } from 'react-hook-form';
+import type { CheckboxProps } from '@blueprintjs/core';
+import { Checkbox } from '@blueprintjs/core';
+import type { ControllerProps, FieldValues } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
 
 interface CheckControllerProps<TFieldValues extends FieldValues = FieldValues>
   extends Omit<CheckboxProps, 'name'>,
diff --git a/src/component/elements/CloseButton.tsx b/src/component/elements/CloseButton.tsx
index f2986cc10..ac252f216 100644
--- a/src/component/elements/CloseButton.tsx
+++ b/src/component/elements/CloseButton.tsx
@@ -1,10 +1,10 @@
 import { FaTimes } from 'react-icons/fa';
-import { ToolbarItemProps } from 'react-science/ui';
+import type { ToolbarItemProps } from 'react-science/ui';
 
-import { ToolBarButton } from './ToolBarButton';
+import { ToolBarButton } from './ToolBarButton.js';
 
 export function CloseButton(
-  props: Pick<ToolbarItemProps, 'onClick' | 'tooltip' | 'className'>,
+  props: Pick<ToolbarItemProps, 'onClick' | 'tooltip'>,
 ) {
   return (
     <ToolBarButton
diff --git a/src/component/elements/ColorInput.tsx b/src/component/elements/ColorInput.tsx
index ee7b7b664..4b3e2d6f8 100644
--- a/src/component/elements/ColorInput.tsx
+++ b/src/component/elements/ColorInput.tsx
@@ -1,7 +1,8 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import { useCallback, memo, useState, useEffect } from 'react';
-import { ColorPicker, ColorPickerProps } from 'react-science/ui';
+import type { ColorPickerProps } from 'react-science/ui';
+import { ColorPicker } from 'react-science/ui';
 
 const style = css`
   display: flex;
diff --git a/src/component/elements/ColorPickerDropdownController.tsx b/src/component/elements/ColorPickerDropdownController.tsx
index 43e10846e..1c4e6618f 100644
--- a/src/component/elements/ColorPickerDropdownController.tsx
+++ b/src/component/elements/ColorPickerDropdownController.tsx
@@ -1,4 +1,5 @@
-import { Controller, ControllerProps, FieldValues } from 'react-hook-form';
+import type { ControllerProps, FieldValues } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
 import { ColorPickerDropdown } from 'react-science/ui';
 
 export function ColorPickerDropdownController<
diff --git a/src/component/elements/ContextMenuBluePrint.tsx b/src/component/elements/ContextMenuBluePrint.tsx
index b4398fc29..606e2f477 100644
--- a/src/component/elements/ContextMenuBluePrint.tsx
+++ b/src/component/elements/ContextMenuBluePrint.tsx
@@ -1,13 +1,10 @@
-import {
+import type {
   ContextMenuProps as BluePrintContextMenuProps,
-  Menu,
-  MenuItem,
   MenuItemProps,
-  showContextMenu,
-  Tooltip,
   TooltipProps,
 } from '@blueprintjs/core';
-import React, { ComponentProps, ElementType, ReactNode } from 'react';
+import { Menu, MenuItem, showContextMenu, Tooltip } from '@blueprintjs/core';
+import type { ComponentProps, ElementType, MouseEvent, ReactNode } from 'react';
 
 export type ContextMenuCheck = boolean | ((data: any) => boolean);
 export interface ContextMenuItem extends Omit<MenuItemProps, 'disabled'> {
@@ -46,7 +43,7 @@ export function ContextMenu<E extends ElementType = 'div'>(
     ...other
   } = props;
 
-  function handleContextMenu(event: React.MouseEvent<HTMLElement>) {
+  function handleContextMenu(event: MouseEvent<HTMLElement>) {
     if (!Array.isArray(options) || options.length === 0) {
       return;
     }
diff --git a/src/component/elements/CounterLabel.tsx b/src/component/elements/CounterLabel.tsx
index 082982255..d48d269c0 100644
--- a/src/component/elements/CounterLabel.tsx
+++ b/src/component/elements/CounterLabel.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 const labelStyle: CSSProperties = {
   margin: 0,
diff --git a/src/component/elements/DraggableDialog.tsx b/src/component/elements/DraggableDialog.tsx
index 0f9f643ca..d2c835f3d 100644
--- a/src/component/elements/DraggableDialog.tsx
+++ b/src/component/elements/DraggableDialog.tsx
@@ -1,21 +1,24 @@
 /** @jsxImportSource @emotion/react */
 
+import type {
+  DialogProps,
+  HTMLDivProps,
+  OverlayProps,
+} from '@blueprintjs/core';
 import {
   Button,
   Classes,
-  DialogProps,
   H6,
-  HTMLDivProps,
   Icon,
   IconSize,
   mergeRefs,
   Overlay2,
-  OverlayProps,
 } from '@blueprintjs/core';
 import { SmallCross } from '@blueprintjs/icons';
 import { css, Global } from '@emotion/react';
 import styled from '@emotion/styled';
-import { ReactNode, RefObject, useLayoutEffect, useRef } from 'react';
+import type { ReactNode, RefObject } from 'react';
+import { useLayoutEffect, useRef } from 'react';
 
 const Container = styled.div`
   min-height: 100%;
diff --git a/src/component/elements/EditableColumn.tsx b/src/component/elements/EditableColumn.tsx
index 672d56f04..bf4e13eb2 100644
--- a/src/component/elements/EditableColumn.tsx
+++ b/src/component/elements/EditableColumn.tsx
@@ -1,7 +1,5 @@
+import type { CSSProperties, ChangeEvent, KeyboardEvent } from 'react';
 import {
-  CSSProperties,
-  ChangeEvent,
-  KeyboardEvent,
   forwardRef,
   useCallback,
   useEffect,
@@ -9,7 +7,8 @@ import {
   useState,
 } from 'react';
 
-import Input, { InputProps } from './Input';
+import type { InputProps } from './Input.js';
+import Input from './Input.js';
 
 function extractNumber(val: string | number, type: string) {
   if (type === 'number' && typeof val !== 'number') {
diff --git a/src/component/elements/FormatField.tsx b/src/component/elements/FormatField.tsx
index e9642eaed..06bf82387 100644
--- a/src/component/elements/FormatField.tsx
+++ b/src/component/elements/FormatField.tsx
@@ -1,9 +1,10 @@
-import { CSSProperties } from 'react';
-import { ControllerProps, FieldValues } from 'react-hook-form';
+import type { CSSProperties } from 'react';
+import type { ControllerProps, FieldValues } from 'react-hook-form';
 
-import { CheckController } from './CheckController';
-import { Input2Controller } from './Input2Controller';
-import Label, { LabelStyle } from './Label';
+import { CheckController } from './CheckController.js';
+import { Input2Controller } from './Input2Controller.js';
+import type { LabelStyle } from './Label.js';
+import Label from './Label.js';
 
 export const formatFieldInputStyle: CSSProperties = {
   textAlign: 'center',
diff --git a/src/component/elements/GroupPane.tsx b/src/component/elements/GroupPane.tsx
index cd4ea8a73..e211cfb82 100644
--- a/src/component/elements/GroupPane.tsx
+++ b/src/component/elements/GroupPane.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
 const styles: Record<'header', CSSProperties> = {
   header: {
diff --git a/src/component/elements/Input.tsx b/src/component/elements/Input.tsx
index 30cf3d434..fa7ed3ffe 100644
--- a/src/component/elements/Input.tsx
+++ b/src/component/elements/Input.tsx
@@ -1,17 +1,13 @@
-import debounce from 'lodash/debounce';
-import {
-  useEffect,
-  useRef,
+import debounce from 'lodash/debounce.js';
+import type {
   CSSProperties,
-  forwardRef,
   ForwardedRef,
   ReactElement,
-  useMemo,
   ChangeEvent,
-  useState,
 } from 'react';
+import { useEffect, useRef, forwardRef, useMemo, useState } from 'react';
 
-import useCombinedRefs from '../hooks/useCombinedRefs';
+import useCombinedRefs from '../hooks/useCombinedRefs.js';
 
 const styles: Record<'input' | 'inputWrapper' | 'clearButton', CSSProperties> =
   {
diff --git a/src/component/elements/Input2.tsx b/src/component/elements/Input2.tsx
index 63b19d114..b78f0b88e 100644
--- a/src/component/elements/Input2.tsx
+++ b/src/component/elements/Input2.tsx
@@ -1,6 +1,8 @@
-import { Classes, InputGroupProps, MenuItem } from '@blueprintjs/core';
+import type { InputGroupProps } from '@blueprintjs/core';
+import { Classes, MenuItem } from '@blueprintjs/core';
 import { Suggest } from '@blueprintjs/select';
-import debounce from 'lodash/debounce';
+import debounce from 'lodash/debounce.js';
+import type { ForwardedRef } from 'react';
 import {
   useEffect,
   useRef,
@@ -8,10 +10,9 @@ import {
   useState,
   isValidElement,
   forwardRef,
-  ForwardedRef,
 } from 'react';
 
-import useCombinedRefs from '../hooks/useCombinedRefs';
+import useCombinedRefs from '../hooks/useCombinedRefs.js';
 
 interface UseInputProps extends BaseInputProps {
   value?: string;
diff --git a/src/component/elements/Input2Controller.tsx b/src/component/elements/Input2Controller.tsx
index 3f7adcd4e..98efb87ae 100644
--- a/src/component/elements/Input2Controller.tsx
+++ b/src/component/elements/Input2Controller.tsx
@@ -2,9 +2,11 @@
 
 import { FormGroup } from '@blueprintjs/core';
 import { css } from '@emotion/react';
-import { Controller, ControllerProps, FieldValues } from 'react-hook-form';
+import type { ControllerProps, FieldValues } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
 
-import { Input2, Input2Props } from './Input2';
+import type { Input2Props } from './Input2.js';
+import { Input2 } from './Input2.js';
 
 export interface InputMapValueFunctions {
   mapOnChangeValue?: (value: string) => any;
diff --git a/src/component/elements/InputRange.tsx b/src/component/elements/InputRange.tsx
index dbed45abc..e873a6d86 100644
--- a/src/component/elements/InputRange.tsx
+++ b/src/component/elements/InputRange.tsx
@@ -1,10 +1,5 @@
-import {
-  CSSProperties,
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useRef,
-} from 'react';
+import type { CSSProperties } from 'react';
+import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
 
 const styles: Record<'container' | 'label', CSSProperties> = {
   container: {
diff --git a/src/component/elements/IsotopesViewer.tsx b/src/component/elements/IsotopesViewer.tsx
index fadbdc72e..3c198a78a 100644
--- a/src/component/elements/IsotopesViewer.tsx
+++ b/src/component/elements/IsotopesViewer.tsx
@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 interface IsotopesViewerProps extends HTMLAttributes<HTMLDivElement> {
   value?: string;
diff --git a/src/component/elements/Label.tsx b/src/component/elements/Label.tsx
index 50c699da5..40642ddf5 100644
--- a/src/component/elements/Label.tsx
+++ b/src/component/elements/Label.tsx
@@ -1,8 +1,8 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import React, { CSSProperties, ReactNode } from 'react';
+import type { CSSProperties, LabelHTMLAttributes, ReactNode } from 'react';
 
-import Button from './Button';
+import Button from './Button.js';
 
 export interface LabelStyle {
   label?: CSSProperties;
@@ -10,7 +10,7 @@ export interface LabelStyle {
   container?: CSSProperties;
 }
 interface LabelProps
-  extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'style'> {
+  extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'style'> {
   title: string;
   renderTitle?: (title: string) => ReactNode;
   shortTitle?: string;
diff --git a/src/component/elements/MenuButton.tsx b/src/component/elements/MenuButton.tsx
index 5553851e5..0ca7a8104 100644
--- a/src/component/elements/MenuButton.tsx
+++ b/src/component/elements/MenuButton.tsx
@@ -1,8 +1,10 @@
 /** @jsxImportSource @emotion/react */
-import { SerializedStyles, css } from '@emotion/react';
-import { ReactNode, useState, useCallback, useRef } from 'react';
+import type { SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
+import type { ReactNode } from 'react';
+import { useState, useCallback, useRef } from 'react';
 
-import ToolTip from './ToolTip/ToolTip';
+import ToolTip from './ToolTip/ToolTip.js';
 
 const menuStyles = css`
   .menu {
diff --git a/src/component/elements/Message.tsx b/src/component/elements/Message.tsx
index e14652259..6c9bcd2de 100644
--- a/src/component/elements/Message.tsx
+++ b/src/component/elements/Message.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
 type MessageType = 'success' | 'error' | 'warning' | 'info';
 
diff --git a/src/component/elements/MoleculeSelection.tsx b/src/component/elements/MoleculeSelection.tsx
index 44fe63c7d..441475368 100644
--- a/src/component/elements/MoleculeSelection.tsx
+++ b/src/component/elements/MoleculeSelection.tsx
@@ -4,9 +4,9 @@ import { useCallback, useEffect, useState } from 'react';
 import { MF } from 'react-mf';
 import { MolfileSvgRenderer } from 'react-ocl/full';
 
-import { StateMoleculeExtended } from '../../data/molecules/Molecule';
+import type { StateMoleculeExtended } from '../../data/molecules/Molecule.js';
 
-import { NextPrev } from './NextPrev';
+import { NextPrev } from './NextPrev.js';
 
 const toolbarStyle = css`
   display: flex;
diff --git a/src/component/elements/NextPrev.tsx b/src/component/elements/NextPrev.tsx
index 09ca553f1..f97d736a4 100644
--- a/src/component/elements/NextPrev.tsx
+++ b/src/component/elements/NextPrev.tsx
@@ -1,9 +1,10 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Children, CSSProperties, ReactElement } from 'react';
+import type { CSSProperties, ReactElement } from 'react';
+import { Children } from 'react';
 import { FaAngleLeft } from 'react-icons/fa';
-import { useMeasure } from 'react-use';
+import useResizeObserver from 'use-resize-observer';
 
 interface ArrowProps {
   direction: 'right' | 'left';
@@ -20,7 +21,6 @@ function Arrow({ direction, onClick, style = {} }: ArrowProps) {
         height: 40px;
         width: 40px;
         justify-content: center;
-        background: white;
         border-radius: 50%;
         cursor: pointer;
         align-items: center;
@@ -90,7 +90,11 @@ export function NextPrev(props: NextPrevProps) {
     onChange = () => null,
     style = {},
   } = props;
-  const [ref, { width }] = useMeasure<HTMLDivElement>();
+  const {
+    ref,
+    width = 0,
+    // @ts-expect-error Module is not published correctly.
+  } = useResizeObserver();
   const slidersCount = Children.count(children);
   const lastIndex = slidersCount > 0 ? slidersCount - 1 : 0;
   const activeIndex = Math.min(index, lastIndex);
diff --git a/src/component/elements/NumberInput.tsx b/src/component/elements/NumberInput.tsx
index 84c36bf1d..f1e1caea9 100644
--- a/src/component/elements/NumberInput.tsx
+++ b/src/component/elements/NumberInput.tsx
@@ -1,6 +1,7 @@
-import { CSSProperties, ForwardedRef, forwardRef, useEffect } from 'react';
+import type { CSSProperties, ForwardedRef } from 'react';
+import { forwardRef, useEffect } from 'react';
 
-import useCombinedRefs from '../hooks/useCombinedRefs';
+import useCombinedRefs from '../hooks/useCombinedRefs.js';
 
 const inputStyle: CSSProperties = {
   height: '100%',
diff --git a/src/component/elements/NumberInput2.tsx b/src/component/elements/NumberInput2.tsx
index 23bd8f379..a1a9a39ee 100644
--- a/src/component/elements/NumberInput2.tsx
+++ b/src/component/elements/NumberInput2.tsx
@@ -1,11 +1,7 @@
 /** @jsxImportSource @emotion/react */
-import {
-  Classes,
-  HTMLInputProps,
-  NumericInput,
-  NumericInputProps,
-} from '@blueprintjs/core';
-import debounce from 'lodash/debounce';
+import type { HTMLInputProps, NumericInputProps } from '@blueprintjs/core';
+import { Classes, NumericInput } from '@blueprintjs/core';
+import debounce from 'lodash/debounce.js';
 import {
   useEffect,
   useMemo,
diff --git a/src/component/elements/NumberInput2Controller.tsx b/src/component/elements/NumberInput2Controller.tsx
index 6139fd2e4..b200083ee 100644
--- a/src/component/elements/NumberInput2Controller.tsx
+++ b/src/component/elements/NumberInput2Controller.tsx
@@ -1,6 +1,8 @@
-import { Controller, ControllerProps, FieldValues } from 'react-hook-form';
+import type { ControllerProps, FieldValues } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
 
-import { NumberInput2, NumberInput2Props } from './NumberInput2';
+import type { NumberInput2Props } from './NumberInput2.js';
+import { NumberInput2 } from './NumberInput2.js';
 
 interface NumberInput2ControllerProps<
   TFieldValues extends FieldValues = FieldValues,
diff --git a/src/component/elements/PreferencesButton.tsx b/src/component/elements/PreferencesButton.tsx
index a2402b481..74c54691a 100644
--- a/src/component/elements/PreferencesButton.tsx
+++ b/src/component/elements/PreferencesButton.tsx
@@ -1,7 +1,7 @@
 import { FaCog } from 'react-icons/fa';
-import { ToolbarItemProps } from 'react-science/ui';
+import type { ToolbarItemProps } from 'react-science/ui';
 
-import { ToolBarButton } from './ToolBarButton';
+import { ToolBarButton } from './ToolBarButton.js';
 
 export function PreferencesButton(props: Omit<ToolbarItemProps, 'icon'>) {
   return <ToolBarButton id="preferences-button" icon={<FaCog />} {...props} />;
diff --git a/src/component/elements/ReactTable/Elements/ReactTableHeader.tsx b/src/component/elements/ReactTable/Elements/ReactTableHeader.tsx
index df1e14328..d7398d01a 100644
--- a/src/component/elements/ReactTable/Elements/ReactTableHeader.tsx
+++ b/src/component/elements/ReactTable/Elements/ReactTableHeader.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, MouseEvent } from 'react';
+import type { CSSProperties, MouseEvent } from 'react';
 import { FaSortAmountDown, FaSortAmountUp } from 'react-icons/fa';
 
 interface TableCellEvent {
diff --git a/src/component/elements/ReactTable/Elements/ReactTableRow.tsx b/src/component/elements/ReactTable/Elements/ReactTableRow.tsx
index 1a415873a..ef6cce0d9 100644
--- a/src/component/elements/ReactTable/Elements/ReactTableRow.tsx
+++ b/src/component/elements/ReactTable/Elements/ReactTableRow.tsx
@@ -1,11 +1,15 @@
 /** @jsxImportSource @emotion/react */
 
-import { css, CSSObject, SerializedStyles } from '@emotion/react';
+import type { CSSObject, SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
 import { useMemo, useEffect, useCallback } from 'react';
 
-import { HighlightEventSource, useHighlight } from '../../../highlight/index';
-import { ContextMenu } from '../../ContextMenuBluePrint';
-import { BaseRowStyle, TableContextMenuProps } from '../ReactTable';
+import {
+  HighlightEventSource,
+  useHighlight,
+} from '../../../highlight/index.js';
+import { ContextMenu } from '../../ContextMenuBluePrint.js';
+import type { BaseRowStyle, TableContextMenuProps } from '../ReactTable.js';
 
 function getRowStyle(
   isActive: boolean,
diff --git a/src/component/elements/ReactTable/ReactTable.tsx b/src/component/elements/ReactTable/ReactTable.tsx
index f07384ff0..aa38a8b44 100644
--- a/src/component/elements/ReactTable/ReactTable.tsx
+++ b/src/component/elements/ReactTable/ReactTable.tsx
@@ -1,47 +1,43 @@
 /* eslint-disable unicorn/prefer-logical-operator-over-ternary */
 /** @jsxImportSource @emotion/react */
-import { CSSObject, SerializedStyles, css } from '@emotion/react';
-import React, {
-  useRef,
-  memo,
+import type { CSSObject, SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
+import type { CSSProperties, ReactElement, Ref, WheelEvent } from 'react';
+import {
   forwardRef,
-  useState,
-  Ref,
-  CSSProperties,
-  WheelEvent,
-  useLayoutEffect,
+  memo,
   useEffect,
+  useLayoutEffect,
   useMemo,
-  ReactElement,
+  useRef,
+  useState,
 } from 'react';
-import {
-  useTable,
-  useSortBy,
-  TableInstance,
+import type {
   CellProps,
   Column as ReactColumn,
+  TableInstance,
   UseSortByColumnOptions,
   UseSortByInstanceProps,
-  UseTableOptions,
   UseSortByOptions,
+  UseTableOptions,
 } from 'react-table';
-import { useMeasure } from 'react-use';
+import { useSortBy, useTable } from 'react-table';
+import useResizeObserver from 'use-resize-observer';
 
-import { HighlightEventSource } from '../../highlight';
-import { BaseContextMenuProps } from '../ContextMenuBluePrint';
+import type { HighlightEventSource } from '../../highlight/index.js';
+import type { BaseContextMenuProps } from '../ContextMenuBluePrint.js';
 
-import { EmptyDataRow } from './Elements/EmptyDataRow';
-import ReactTableHeader from './Elements/ReactTableHeader';
-import ReactTableRow, { ClickEvent } from './Elements/ReactTableRow';
-import { ReactTableStyle } from './Style';
+import { EmptyDataRow } from './Elements/EmptyDataRow.js';
+import ReactTableHeader from './Elements/ReactTableHeader.js';
+import type { ClickEvent } from './Elements/ReactTableRow.js';
+import ReactTableRow from './Elements/ReactTableRow.js';
+import { ReactTableStyle } from './Style.js';
 import {
   ReactTableProvider,
   useReactTableContext,
-} from './utility/ReactTableContext';
-import useRowSpan, {
-  prepareRowSpan,
-  RowSpanHeaders,
-} from './utility/useRowSpan';
+} from './utility/ReactTableContext.js';
+import type { RowSpanHeaders } from './utility/useRowSpan.js';
+import useRowSpan, { prepareRowSpan } from './utility/useRowSpan.js';
 
 interface ExtraColumn<T extends object = any> {
   enableRowSpan?: boolean;
@@ -137,7 +133,7 @@ const counterStyle: CSSProperties = {
 
 const ReactTableInner = forwardRef(TableInner) as <T extends object = any>(
   props: ReactTableInnerProps<T> & { ref?: Ref<HTMLDivElement> },
-) => React.JSX.Element;
+) => ReactElement;
 
 function TableInner<T extends object>(
   props: ReactTableInnerProps<T>,
@@ -372,7 +368,12 @@ function ReactTable<T extends object>(props: ReactTableProps<T>) {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const visibleRowsCountRef = useRef<number>(0);
   const visibleColumnsCountRef = useRef<number>(0);
-  const [mRef, { height, width }] = useMeasure<HTMLDivElement>();
+  const {
+    ref: mRef,
+    width = 0,
+    height = 0,
+    // @ts-expect-error Module is not published correctly.
+  } = useResizeObserver();
 
   const [tableVirtualBoundary, setTableVirtualBoundary] =
     useState<TableVirtualBoundary>({
@@ -517,4 +518,4 @@ function ReactTable<T extends object>(props: ReactTableProps<T>) {
 
 export default memo(ReactTable) as <T extends object = any>(
   props: ReactTableInnerProps<T>,
-) => JSX.Element;
+) => ReactElement;
diff --git a/src/component/elements/ReactTable/ReactTableFlexLayout.tsx b/src/component/elements/ReactTable/ReactTableFlexLayout.tsx
index ddf69e418..ef8b294b4 100644
--- a/src/component/elements/ReactTable/ReactTableFlexLayout.tsx
+++ b/src/component/elements/ReactTable/ReactTableFlexLayout.tsx
@@ -1,9 +1,9 @@
 /** @jsxImportSource @emotion/react */
 
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { useTable, useSortBy, useFlexLayout } from 'react-table';
 
-import { ReactTableStyle } from './Style';
+import { ReactTableStyle } from './Style.js';
 
 interface ReactTableFlexLayoutProps {
   data: any;
diff --git a/src/component/elements/ReactTable/Style.ts b/src/component/elements/ReactTable/Style.ts
index 8f68c05d1..103befd06 100644
--- a/src/component/elements/ReactTable/Style.ts
+++ b/src/component/elements/ReactTable/Style.ts
@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 
-import { InputStyle } from '../Input';
+import type { InputStyle } from '../Input.js';
 
 const ReactTableStyle = css`
   border-spacing: 0;
diff --git a/src/component/elements/ReactTable/utility/ReactTableContext.ts b/src/component/elements/ReactTable/utility/ReactTableContext.ts
index 8dd1b8448..4db874dd3 100644
--- a/src/component/elements/ReactTable/utility/ReactTableContext.ts
+++ b/src/component/elements/ReactTable/utility/ReactTableContext.ts
@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react';
 
-import { TableVirtualBoundary } from '../ReactTable';
+import type { TableVirtualBoundary } from '../ReactTable.js';
 
 const reactContext = createContext<TableVirtualBoundary | null>(null);
 export const ReactTableProvider = reactContext.Provider;
diff --git a/src/component/elements/ReactTable/utility/addCustomColumn.tsx b/src/component/elements/ReactTable/utility/addCustomColumn.tsx
index 070b28b40..5a69cc8f4 100644
--- a/src/component/elements/ReactTable/utility/addCustomColumn.tsx
+++ b/src/component/elements/ReactTable/utility/addCustomColumn.tsx
@@ -1,7 +1,7 @@
 import { v4 } from '@lukeed/uuid';
-import { CSSProperties, MouseEvent, ReactNode } from 'react';
+import type { CSSProperties, MouseEvent, ReactNode } from 'react';
 
-import { Column } from '../ReactTable';
+import type { Column } from '../ReactTable.js';
 
 export type CustomColumn<T extends object> = Column<T> & { index: number };
 export type ControlCustomColumn<T extends object> = CustomColumn<T> & {
diff --git a/src/component/elements/ReadOnly.tsx b/src/component/elements/ReadOnly.tsx
index 9cc56631d..ce13f7149 100644
--- a/src/component/elements/ReadOnly.tsx
+++ b/src/component/elements/ReadOnly.tsx
@@ -1,7 +1,8 @@
 /** @jsxImportSource @emotion/react */
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
-import { ReactNode, useState } from 'react';
+import type { ReactNode } from 'react';
+import { useState } from 'react';
 import { IoLockClosedOutline } from 'react-icons/io5';
 
 const fadeIn = keyframes`
diff --git a/src/component/elements/ResizerWithScale.tsx b/src/component/elements/ResizerWithScale.tsx
index 6a75844f2..47d6eac05 100644
--- a/src/component/elements/ResizerWithScale.tsx
+++ b/src/component/elements/ResizerWithScale.tsx
@@ -1,9 +1,10 @@
 import { useEffect, useRef, useState } from 'react';
 
-import { useScaleX } from '../1d/utilities/scale';
-import { useGlobal } from '../context/GlobalContext';
+import { useScaleX } from '../1d/utilities/scale.js';
+import { useGlobal } from '../context/GlobalContext.js';
 
-import SVGResizer, { Position, ResizerProps } from './resizer/SVGResizer';
+import type { Position, ResizerProps } from './resizer/SVGResizer.js';
+import SVGResizer from './resizer/SVGResizer.js';
 
 interface ResizerWithScaleProps {
   disabled: boolean;
diff --git a/src/component/elements/SVGButton.tsx b/src/component/elements/SVGButton.tsx
index bac8bf35d..760eab04a 100644
--- a/src/component/elements/SVGButton.tsx
+++ b/src/component/elements/SVGButton.tsx
@@ -1,5 +1,6 @@
-import { Icon, IconName, Tooltip, TooltipProps } from '@blueprintjs/core';
-import { CSSProperties, ReactNode } from 'react';
+import type { IconName, TooltipProps } from '@blueprintjs/core';
+import { Icon, Tooltip } from '@blueprintjs/core';
+import type { CSSProperties, ReactNode } from 'react';
 
 interface IconButtonProps extends React.SVGAttributes<SVGElement> {
   size?: number;
diff --git a/src/component/elements/SVGGroup.tsx b/src/component/elements/SVGGroup.tsx
index 1ab9c1de0..59687c66b 100644
--- a/src/component/elements/SVGGroup.tsx
+++ b/src/component/elements/SVGGroup.tsx
@@ -1,10 +1,5 @@
-import {
-  Children,
-  useLayoutEffect,
-  useRef,
-  SVGAttributes,
-  ReactElement,
-} from 'react';
+import type { SVGAttributes, ReactElement } from 'react';
+import { Children, useLayoutEffect, useRef } from 'react';
 
 interface SVGGroupProps extends SVGAttributes<SVGElement> {
   children: ReactElement | ReactElement[];
diff --git a/src/component/elements/SVGText.tsx b/src/component/elements/SVGText.tsx
index 92c75470d..a8523cab3 100644
--- a/src/component/elements/SVGText.tsx
+++ b/src/component/elements/SVGText.tsx
@@ -1,4 +1,5 @@
-import { SVGAttributes, useLayoutEffect, useRef, useState } from 'react';
+import type { SVGAttributes } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
 
 interface SVGTextProps extends SVGAttributes<SVGTextElement> {
   rectProps?: SVGAttributes<SVGRectElement>;
diff --git a/src/component/elements/SaveButton.tsx b/src/component/elements/SaveButton.tsx
index b78877e6e..e1850f107 100644
--- a/src/component/elements/SaveButton.tsx
+++ b/src/component/elements/SaveButton.tsx
@@ -1,7 +1,7 @@
 import { FaCheck } from 'react-icons/fa';
-import { ToolbarItemProps } from 'react-science/ui';
+import type { ToolbarItemProps } from 'react-science/ui';
 
-import { ToolBarButton } from './ToolBarButton';
+import { ToolBarButton } from './ToolBarButton.js';
 
 export function SaveButton(
   props: Pick<ToolbarItemProps, 'onClick' | 'tooltip'>,
diff --git a/src/component/elements/Scroller.tsx b/src/component/elements/Scroller.tsx
index 13b7eb7ad..033c61370 100644
--- a/src/component/elements/Scroller.tsx
+++ b/src/component/elements/Scroller.tsx
@@ -1,6 +1,6 @@
+import type { ReactNode } from 'react';
 import {
   Children,
-  ReactNode,
   createContext,
   isValidElement,
   useContext,
diff --git a/src/component/elements/Sections.tsx b/src/component/elements/Sections.tsx
index f647080a1..bd1b2dad5 100644
--- a/src/component/elements/Sections.tsx
+++ b/src/component/elements/Sections.tsx
@@ -1,13 +1,14 @@
 /** @jsxImportSource @emotion/react */
 import { Icon, Tag } from '@blueprintjs/core';
 import styled from '@emotion/styled';
-import React, {
-  createContext,
+import type {
   CSSProperties,
+  HTMLAttributes,
+  HTMLProps,
+  MouseEvent,
   ReactNode,
-  useContext,
-  useMemo,
 } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 
 interface SelectionsContextState {
   overflow: boolean;
@@ -140,7 +141,7 @@ interface BaseSectionProps {
 
 interface SectionItemProps extends BaseSectionProps {
   id?: string;
-  onClick?: (id, event?: React.MouseEvent<HTMLDivElement>) => void;
+  onClick?: (id, event?: MouseEvent<HTMLDivElement>) => void;
   children?: ReactNode | ((options: { isOpen?: boolean }) => ReactNode);
   selectedSectionId?: string;
   sticky?: boolean;
@@ -169,12 +170,12 @@ export function Sections(props: SectionProps) {
   );
 }
 
-function SectionHeader(props: React.HTMLAttributes<HTMLDivElement>) {
+function SectionHeader(props: HTMLAttributes<HTMLDivElement>) {
   const { children, ...otherProps } = props;
   return <InnerHeader {...otherProps}>{children}</InnerHeader>;
 }
 
-function SectionBody(props: React.HTMLAttributes<HTMLDivElement>) {
+function SectionBody(props: HTMLAttributes<HTMLDivElement>) {
   const { children, ...otherProps } = props;
 
   return <Content {...otherProps}>{children}</Content>;
@@ -238,7 +239,7 @@ function Wrapper(props: WrapperProps) {
 }
 
 interface MainSectionHeaderProps
-  extends Pick<React.HTMLProps<HTMLDivElement>, 'onClick'>,
+  extends Pick<HTMLProps<HTMLDivElement>, 'onClick'>,
     BaseSectionProps {
   isOpen: boolean;
   sticky: boolean;
diff --git a/src/component/elements/Select.tsx b/src/component/elements/Select.tsx
index 5faa8fe6c..875aa333b 100644
--- a/src/component/elements/Select.tsx
+++ b/src/component/elements/Select.tsx
@@ -1,6 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { CSSProperties, ForwardedRef, forwardRef, useCallback } from 'react';
+import type { CSSProperties, ForwardedRef } from 'react';
+import { forwardRef, useCallback } from 'react';
 
 const arrowDownIcon = `url('data:image/svg+xml;utf8,<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="960px" height="560px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve"><g id="Rounded_Rectangle_33_copy_4_1_"><path d="M480,344.181L268.869,131.889c-15.756-15.859-41.3-15.859-57.054,0c-15.754,15.857-15.754,41.57,0,57.431l237.632,238.937c8.395,8.451,19.562,12.254,30.553,11.698c10.993,0.556,22.159-3.247,30.555-11.698l237.631-238.937c15.756-15.86,15.756-41.571,0-57.431s-41.299-15.859-57.051,0L480,344.181z"/></g></svg>')`;
 
diff --git a/src/component/elements/Select2.tsx b/src/component/elements/Select2.tsx
index be74ba476..4f49f9468 100644
--- a/src/component/elements/Select2.tsx
+++ b/src/component/elements/Select2.tsx
@@ -1,9 +1,12 @@
-import { Button, ButtonProps } from '@blueprintjs/core';
-import { Select, SelectProps } from '@blueprintjs/select';
-import { forwardRef, ForwardedRef, ReactNode, useEffect } from 'react';
+import type { ButtonProps } from '@blueprintjs/core';
+import { Button } from '@blueprintjs/core';
+import type { SelectProps } from '@blueprintjs/select';
+import { Select } from '@blueprintjs/select';
+import type { ForwardedRef, ReactNode } from 'react';
+import { forwardRef, useEffect } from 'react';
 import { useSelect } from 'react-science/ui';
 
-import { FilterType } from '../utility/filterType';
+import type { FilterType } from '../utility/filterType.js';
 
 interface ItemOptions<T> {
   renderItem?: (item: T) => ReactNode;
diff --git a/src/component/elements/Select2Controller.tsx b/src/component/elements/Select2Controller.tsx
index 9fd219318..c088a50ff 100644
--- a/src/component/elements/Select2Controller.tsx
+++ b/src/component/elements/Select2Controller.tsx
@@ -1,6 +1,8 @@
-import { Controller, ControllerProps, FieldValues } from 'react-hook-form';
+import type { ControllerProps, FieldValues } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
 
-import { Select2, Select2Props, SelectDefaultItem } from './Select2';
+import type { Select2Props, SelectDefaultItem } from './Select2.js';
+import { Select2 } from './Select2.js';
 
 type Select2ControllerProps<
   T extends Record<string, any> = SelectDefaultItem,
diff --git a/src/component/elements/Tab/DeleteButton.tsx b/src/component/elements/Tab/DeleteButton.tsx
index 4543c69a1..3c379ef00 100644
--- a/src/component/elements/Tab/DeleteButton.tsx
+++ b/src/component/elements/Tab/DeleteButton.tsx
@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { FaTimes } from 'react-icons/fa';
 
 const styles = css`
diff --git a/src/component/elements/Tab/Tab.tsx b/src/component/elements/Tab/Tab.tsx
index 500d8b500..f0e8e9d73 100644
--- a/src/component/elements/Tab/Tab.tsx
+++ b/src/component/elements/Tab/Tab.tsx
@@ -1,8 +1,9 @@
 /** @jsxImportSource @emotion/react */
-import { css, SerializedStyles } from '@emotion/react';
-import { CSSProperties, ReactNode } from 'react';
+import type { SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
+import type { CSSProperties, ReactNode } from 'react';
 
-import DeleteButton from './DeleteButton';
+import DeleteButton from './DeleteButton.js';
 
 const styles = (styles) => css`
   position: relative;
diff --git a/src/component/elements/Tab/Tabs.tsx b/src/component/elements/Tab/Tabs.tsx
index 3d075648b..ecb4de3fe 100644
--- a/src/component/elements/Tab/Tabs.tsx
+++ b/src/component/elements/Tab/Tabs.tsx
@@ -1,8 +1,10 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { isValidElement, useMemo, Children, memo, ReactElement } from 'react';
+import type { ReactElement } from 'react';
+import { isValidElement, useMemo, Children, memo } from 'react';
 
-import Tab, { TabEvents, TabProps } from './Tab';
+import type { TabEvents, TabProps } from './Tab.js';
+import Tab from './Tab.js';
 
 const topStyles = css`
   height: 100%;
diff --git a/src/component/elements/TabTitle.tsx b/src/component/elements/TabTitle.tsx
index 6362d5b94..33fd1fc16 100644
--- a/src/component/elements/TabTitle.tsx
+++ b/src/component/elements/TabTitle.tsx
@@ -1,7 +1,8 @@
 /** @jsxImportSource @emotion/react */
-import { Button, ButtonProps, Popover } from '@blueprintjs/core';
+import type { ButtonProps } from '@blueprintjs/core';
+import { Button, Popover } from '@blueprintjs/core';
 import styled from '@emotion/styled';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 interface TabTitleProps {
   onDelete?: ButtonProps['onClick'];
diff --git a/src/component/elements/Table/Table.tsx b/src/component/elements/Table/Table.tsx
index 1105c0d82..0d9c03d91 100644
--- a/src/component/elements/Table/Table.tsx
+++ b/src/component/elements/Table/Table.tsx
@@ -1,4 +1,5 @@
-import { CSSProperties, memo, ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import { memo } from 'react';
 
 const styles: CSSProperties = {
   width: '100%',
diff --git a/src/component/elements/Table/TableBody.tsx b/src/component/elements/Table/TableBody.tsx
index deed77717..12242f13d 100644
--- a/src/component/elements/Table/TableBody.tsx
+++ b/src/component/elements/Table/TableBody.tsx
@@ -1,11 +1,5 @@
-import {
-  useMemo,
-  memo,
-  Children,
-  cloneElement,
-  ReactNode,
-  CSSProperties,
-} from 'react';
+import type { ReactNode, CSSProperties } from 'react';
+import { useMemo, memo, Children, cloneElement } from 'react';
 
 const styles: CSSProperties = {
   width: '100%',
diff --git a/src/component/elements/Table/TableCell.tsx b/src/component/elements/Table/TableCell.tsx
index 7b1fc3cfe..3201cb973 100644
--- a/src/component/elements/Table/TableCell.tsx
+++ b/src/component/elements/Table/TableCell.tsx
@@ -1,4 +1,5 @@
-import { CSSProperties, memo, ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import { memo } from 'react';
 
 const styles = {
   width: '100%',
diff --git a/src/component/elements/Table/TableHead.tsx b/src/component/elements/Table/TableHead.tsx
index f85292510..2eb31f26e 100644
--- a/src/component/elements/Table/TableHead.tsx
+++ b/src/component/elements/Table/TableHead.tsx
@@ -1,4 +1,5 @@
-import { CSSProperties, memo, ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import { memo } from 'react';
 
 const styles: CSSProperties = {
   width: '100%',
diff --git a/src/component/elements/Table/TableRow.tsx b/src/component/elements/Table/TableRow.tsx
index 197041c24..1a7a77735 100644
--- a/src/component/elements/Table/TableRow.tsx
+++ b/src/component/elements/Table/TableRow.tsx
@@ -1,4 +1,5 @@
-import { CSSProperties, memo, ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import { memo } from 'react';
 
 const styles = {
   width: '100%',
diff --git a/src/component/elements/ToggleButton.tsx b/src/component/elements/ToggleButton.tsx
index 575fd8003..af47861f0 100644
--- a/src/component/elements/ToggleButton.tsx
+++ b/src/component/elements/ToggleButton.tsx
@@ -1,8 +1,9 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { CSSProperties, memo, ReactNode, useCallback, useState } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import { memo, useCallback, useState } from 'react';
 
-import ToolTip from './ToolTip/ToolTip';
+import ToolTip from './ToolTip/ToolTip.js';
 
 const styles = css`
   background-color: #f5f5f5;
diff --git a/src/component/elements/ToolBarButton.tsx b/src/component/elements/ToolBarButton.tsx
index 03331d0dc..21c8fbf94 100644
--- a/src/component/elements/ToolBarButton.tsx
+++ b/src/component/elements/ToolBarButton.tsx
@@ -1,4 +1,5 @@
-import { Toolbar, ToolbarItemProps } from 'react-science/ui';
+import type { ToolbarItemProps } from 'react-science/ui';
+import { Toolbar } from 'react-science/ui';
 
 export function ToolBarButton(props: ToolbarItemProps) {
   return (
diff --git a/src/component/elements/ToolTip/ToolTip.tsx b/src/component/elements/ToolTip/ToolTip.tsx
index 80795253c..7f38e2a78 100644
--- a/src/component/elements/ToolTip/ToolTip.tsx
+++ b/src/component/elements/ToolTip/ToolTip.tsx
@@ -1,3 +1,4 @@
+import type { CSSProperties, ReactNode } from 'react';
 import {
   useRef,
   useLayoutEffect,
@@ -5,12 +6,10 @@ import {
   useState,
   memo,
   Fragment,
-  CSSProperties,
-  ReactNode,
 } from 'react';
 import { createPortal } from 'react-dom';
 
-import { useGlobal } from '../../context/GlobalContext';
+import { useGlobal } from '../../context/GlobalContext.js';
 
 const styles: Record<'popup', CSSProperties> = {
   popup: {
diff --git a/src/component/elements/ToolbarPopoverItem.tsx b/src/component/elements/ToolbarPopoverItem.tsx
index 7e4288cec..2bd9e18a4 100644
--- a/src/component/elements/ToolbarPopoverItem.tsx
+++ b/src/component/elements/ToolbarPopoverItem.tsx
@@ -1,9 +1,10 @@
-import { Menu, MenuItem, MenuItemProps } from '@blueprintjs/core';
-import {
-  Toolbar,
+import type { MenuItemProps } from '@blueprintjs/core';
+import { Menu, MenuItem } from '@blueprintjs/core';
+import type {
   ToolbarPopoverItemProps as BaseToolbarPopoverItemProps,
   ToolbarItemProps,
 } from 'react-science/ui';
+import { Toolbar } from 'react-science/ui';
 
 export interface ToolbarPopoverMenuItem<T = object> extends MenuItemProps {
   data?: T;
diff --git a/src/component/elements/accordion/Accordion.tsx b/src/component/elements/accordion/Accordion.tsx
index 23243c8cc..5fe8bc938 100644
--- a/src/component/elements/accordion/Accordion.tsx
+++ b/src/component/elements/accordion/Accordion.tsx
@@ -1,5 +1,5 @@
+import type { ReactNode, CSSProperties } from 'react';
 import {
-  ReactNode,
   useState,
   useRef,
   useCallback,
@@ -7,10 +7,9 @@ import {
   useEffect,
   Children,
   cloneElement,
-  CSSProperties,
 } from 'react';
 
-import { triggerSource } from './AccordionItem';
+import { triggerSource } from './AccordionItem.js';
 
 const styles: Record<'container', CSSProperties> = {
   container: {
diff --git a/src/component/elements/accordion/AccordionItem.tsx b/src/component/elements/accordion/AccordionItem.tsx
index 91dcb4222..c54896d0f 100644
--- a/src/component/elements/accordion/AccordionItem.tsx
+++ b/src/component/elements/accordion/AccordionItem.tsx
@@ -1,11 +1,5 @@
-import {
-  useState,
-  useRef,
-  useEffect,
-  useCallback,
-  CSSProperties,
-  ReactNode,
-} from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 
 const styles: Record<
   'container' | 'button' | 'buttonTitle' | 'content',
diff --git a/src/component/elements/draggable/SVGDraggable.tsx b/src/component/elements/draggable/SVGDraggable.tsx
index 6dd9f7320..b2576861e 100644
--- a/src/component/elements/draggable/SVGDraggable.tsx
+++ b/src/component/elements/draggable/SVGDraggable.tsx
@@ -1,6 +1,7 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 
-import useDraggable, { Position } from './useDraggable';
+import type { Position } from './useDraggable.js';
+import useDraggable from './useDraggable.js';
 
 type ChildType = ReactElement[] | ReactElement | boolean | null;
 
diff --git a/src/component/elements/dropDownButton/DropDownButton.tsx b/src/component/elements/dropDownButton/DropDownButton.tsx
index e2e141035..083ae0042 100644
--- a/src/component/elements/dropDownButton/DropDownButton.tsx
+++ b/src/component/elements/dropDownButton/DropDownButton.tsx
@@ -1,10 +1,11 @@
 /** @jsxImportSource @emotion/react */
 import { Popover, Button } from '@blueprintjs/core';
 import { css } from '@emotion/react';
-import { CSSProperties, ReactNode, useEffect, useState } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import { useEffect, useState } from 'react';
 import { FaEllipsisH } from 'react-icons/fa';
 
-import DropDownList from './DropDownList';
+import DropDownList from './DropDownList.js';
 
 export interface DropDownListItem {
   key: string;
diff --git a/src/component/elements/dropDownButton/DropDownList.tsx b/src/component/elements/dropDownButton/DropDownList.tsx
index 1bb6e3f17..cf104b6bc 100644
--- a/src/component/elements/dropDownButton/DropDownList.tsx
+++ b/src/component/elements/dropDownButton/DropDownList.tsx
@@ -1,11 +1,11 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 
-import {
+import type {
   DropDownListItem,
   DropDownListProps,
   ItemProps,
-} from './DropDownButton';
+} from './DropDownButton.js';
 
 const styles = {
   ul: css`
diff --git a/src/component/elements/export/ExportContent.tsx b/src/component/elements/export/ExportContent.tsx
index 2b7e36d44..97b3f4301 100644
--- a/src/component/elements/export/ExportContent.tsx
+++ b/src/component/elements/export/ExportContent.tsx
@@ -1,14 +1,15 @@
 /** @jsxImportSource @emotion/react */
-import { ExportSettings } from 'nmr-load-save';
-import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import type { ExportSettings } from 'nmr-load-save';
+import type { ReactNode } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
-import { ExportOptionsModal } from './ExportOptionsModal';
-import { ExportSettingsProvider } from './ExportSettingsProvider';
-import { RenderDetector } from './RenderDetector';
-import { INITIAL_BASIC_EXPORT_OPTIONS } from './utilities/getExportOptions';
-import { getSizeInPixel } from './utilities/getSizeInPixel';
-import { transferDocumentStyles } from './utilities/transferDocumentStyles';
+import { ExportOptionsModal } from './ExportOptionsModal.js';
+import { ExportSettingsProvider } from './ExportSettingsProvider.js';
+import { RenderDetector } from './RenderDetector.js';
+import { INITIAL_BASIC_EXPORT_OPTIONS } from './utilities/getExportOptions.js';
+import { getSizeInPixel } from './utilities/getSizeInPixel.js';
+import { transferDocumentStyles } from './utilities/transferDocumentStyles.js';
 
 const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');
 
diff --git a/src/component/elements/export/ExportManager.tsx b/src/component/elements/export/ExportManager.tsx
index 57121a2ab..0e7120853 100644
--- a/src/component/elements/export/ExportManager.tsx
+++ b/src/component/elements/export/ExportManager.tsx
@@ -1,21 +1,20 @@
-import { ExportPreferences, ExportSettings } from 'nmr-load-save';
+import type { ExportPreferences, ExportSettings } from 'nmr-load-save';
+import type { ReactNode, RefObject } from 'react';
 import {
   createContext,
-  ReactNode,
-  RefObject,
   useContext,
   useImperativeHandle,
   useRef,
   useState,
 } from 'react';
 
-import { useChartData } from '../../context/ChartContext';
-import { usePreferences } from '../../context/PreferencesContext';
-import { useExportViewPort } from '../../hooks/useExport';
-import { useWorkspaceExportSettings } from '../../hooks/useWorkspaceExportSettings';
+import { useChartData } from '../../context/ChartContext.js';
+import { usePreferences } from '../../context/PreferencesContext.js';
+import { useExportViewPort } from '../../hooks/useExport.js';
+import { useWorkspaceExportSettings } from '../../hooks/useWorkspaceExportSettings.js';
 
-import { ExportContent } from './ExportContent';
-import { getSizeInPixel } from './utilities/getSizeInPixel';
+import { ExportContent } from './ExportContent.js';
+import { getSizeInPixel } from './utilities/getSizeInPixel.js';
 
 export type ExportFormat = 'png' | 'svg';
 export type ExportDestination = 'file' | 'clipboard';
diff --git a/src/component/elements/export/ExportOptionsModal.tsx b/src/component/elements/export/ExportOptionsModal.tsx
index b31d17fac..254e056d3 100644
--- a/src/component/elements/export/ExportOptionsModal.tsx
+++ b/src/component/elements/export/ExportOptionsModal.tsx
@@ -11,7 +11,7 @@ import {
 } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 import { yupResolver } from '@hookform/resolvers/yup';
-import {
+import type {
   AdvanceExportSettings,
   BasicExportSettings,
   ExportSettings,
@@ -19,22 +19,25 @@ import {
 import { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 
-import ActionButtons from '../ActionButtons';
-import { CheckController } from '../CheckController';
-import Label, { LabelStyle } from '../Label';
-import { NumberInput2Controller } from '../NumberInput2Controller';
-import { Select2Controller } from '../Select2Controller';
-import { getSizesList, SizeItem } from '../print/pageSize';
+import ActionButtons from '../ActionButtons.js';
+import { CheckController } from '../CheckController.js';
+import type { LabelStyle } from '../Label.js';
+import Label from '../Label.js';
+import { NumberInput2Controller } from '../NumberInput2Controller.js';
+import { Select2Controller } from '../Select2Controller.js';
+import type { SizeItem } from '../print/pageSize.js';
+import { getSizesList } from '../print/pageSize.js';
 
-import { BaseExportProps } from './ExportContent';
-import { units } from './units';
-import { useExportConfigurer } from './useExportConfigurer';
-import { exportOptionValidationSchema } from './utilities/exportOptionValidationSchema';
+import type { BaseExportProps } from './ExportContent.js';
+import { units } from './units.js';
+import { useExportConfigurer } from './useExportConfigurer.js';
+import { exportOptionValidationSchema } from './utilities/exportOptionValidationSchema.js';
 import {
   getExportDefaultOptions,
   getExportDefaultOptionsByMode,
-} from './utilities/getExportOptions';
-import { Mode, MODES } from './utilities/getModes';
+} from './utilities/getExportOptions.js';
+import type { Mode } from './utilities/getModes.js';
+import { MODES } from './utilities/getModes.js';
 
 interface InnerExportOptionsModalProps extends BaseExportProps {
   onCloseDialog: () => void;
diff --git a/src/component/elements/export/ExportSettingsProvider.tsx b/src/component/elements/export/ExportSettingsProvider.tsx
index ef7450d7c..ac6703937 100644
--- a/src/component/elements/export/ExportSettingsProvider.tsx
+++ b/src/component/elements/export/ExportSettingsProvider.tsx
@@ -1,4 +1,5 @@
-import { createContext, ReactNode, useContext, useMemo } from 'react';
+import type { ReactNode } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 
 export interface ExportSettingsContextProps {
   width: number;
diff --git a/src/component/elements/export/RenderDetector.tsx b/src/component/elements/export/RenderDetector.tsx
index 29e257cde..0ae0d823d 100644
--- a/src/component/elements/export/RenderDetector.tsx
+++ b/src/component/elements/export/RenderDetector.tsx
@@ -1,4 +1,5 @@
-import { CSSProperties, ReactNode, useEffect } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import { useEffect } from 'react';
 
 interface RenderDetectorProps {
   onRender: () => void;
diff --git a/src/component/elements/export/index.ts b/src/component/elements/export/index.ts
index d8da245a6..6530a0908 100644
--- a/src/component/elements/export/index.ts
+++ b/src/component/elements/export/index.ts
@@ -1,2 +1,2 @@
-export * from './ExportContent';
-export * from './ExportSettingsProvider';
+export * from './ExportContent.js';
+export * from './ExportSettingsProvider.js';
diff --git a/src/component/elements/export/units.ts b/src/component/elements/export/units.ts
index 475853fc8..98f65a3a6 100644
--- a/src/component/elements/export/units.ts
+++ b/src/component/elements/export/units.ts
@@ -1,6 +1,7 @@
-import { units as baseUnits, Unit } from 'nmr-load-save';
+import type { Unit } from 'nmr-load-save';
+import { units as baseUnits } from 'nmr-load-save';
 
-import { roundNumber } from '../../utility/roundNumber';
+import { roundNumber } from '../../utility/roundNumber.js';
 
 export const units = baseUnits.map((unit) => ({
   ...unit,
diff --git a/src/component/elements/export/useExportConfigurer.tsx b/src/component/elements/export/useExportConfigurer.tsx
index eb4b08a47..2f09da555 100644
--- a/src/component/elements/export/useExportConfigurer.tsx
+++ b/src/component/elements/export/useExportConfigurer.tsx
@@ -1,10 +1,10 @@
-import { ExportSettings } from 'nmr-load-save';
+import type { ExportSettings } from 'nmr-load-save';
 import { useDeferredValue, useRef, useState } from 'react';
 
-import { roundNumber } from '../../utility/roundNumber';
+import { roundNumber } from '../../utility/roundNumber.js';
 
-import { convert, convertToPixels } from './units';
-import { getExportOptions } from './utilities/getExportOptions';
+import { convert, convertToPixels } from './units.js';
+import { getExportOptions } from './utilities/getExportOptions.js';
 
 export function useExportConfigurer(options: ExportSettings) {
   const { width, height, unit, dpi } = getExportOptions(options);
diff --git a/src/component/elements/export/utilities/convertPixelsBasedOnDPI.ts b/src/component/elements/export/utilities/convertPixelsBasedOnDPI.ts
index a82c26f5a..6ef2980eb 100644
--- a/src/component/elements/export/utilities/convertPixelsBasedOnDPI.ts
+++ b/src/component/elements/export/utilities/convertPixelsBasedOnDPI.ts
@@ -1,4 +1,4 @@
-import { roundNumber } from '../../../utility/roundNumber';
+import { roundNumber } from '../../../utility/roundNumber.js';
 
 export function convertPixelsBasedOnDPI(
   originalPixelSize: number,
diff --git a/src/component/elements/export/utilities/exportOptionValidationSchema.ts b/src/component/elements/export/utilities/exportOptionValidationSchema.ts
index dbd344c02..4ff7fa6ab 100644
--- a/src/component/elements/export/utilities/exportOptionValidationSchema.ts
+++ b/src/component/elements/export/utilities/exportOptionValidationSchema.ts
@@ -1,8 +1,8 @@
-import { ExportSettings, Layout, PageSizeName, Unit } from 'nmr-load-save';
+import type { ExportSettings, Layout, PageSizeName, Unit } from 'nmr-load-save';
 import * as Yup from 'yup';
 
-import { pageSizes } from '../../print/pageSize';
-import { convertToPixels, units } from '../units';
+import { pageSizes } from '../../print/pageSize.js';
+import { convertToPixels, units } from '../units.js';
 
 const MAX_PIXEL = 16000;
 
diff --git a/src/component/elements/export/utilities/getExportOptions.ts b/src/component/elements/export/utilities/getExportOptions.ts
index 248b1808b..39e1b688d 100644
--- a/src/component/elements/export/utilities/getExportOptions.ts
+++ b/src/component/elements/export/utilities/getExportOptions.ts
@@ -1,10 +1,10 @@
-import {
+import type {
   AdvanceExportSettings,
   BasicExportSettings,
   ExportSettings,
 } from 'nmr-load-save';
 
-import { getPageDimension } from '../../print/pageSize';
+import { getPageDimension } from '../../print/pageSize.js';
 
 type ReturnExportOptions = Omit<AdvanceExportSettings, 'mode'>;
 
diff --git a/src/component/elements/export/utilities/getModes.ts b/src/component/elements/export/utilities/getModes.ts
index 7ea4a6b36..015397265 100644
--- a/src/component/elements/export/utilities/getModes.ts
+++ b/src/component/elements/export/utilities/getModes.ts
@@ -1,4 +1,4 @@
-import { OptionProps } from '@blueprintjs/core';
+import type { OptionProps } from '@blueprintjs/core';
 
 export const MODES: Array<OptionProps<string>> = [
   {
diff --git a/src/component/elements/export/utilities/getSizeInPixel.ts b/src/component/elements/export/utilities/getSizeInPixel.ts
index dc9f7068b..42a4a4e96 100644
--- a/src/component/elements/export/utilities/getSizeInPixel.ts
+++ b/src/component/elements/export/utilities/getSizeInPixel.ts
@@ -1,8 +1,8 @@
-import { ExportSettings } from 'nmr-load-save';
+import type { ExportSettings } from 'nmr-load-save';
 
-import { convertToPixels } from '../units';
+import { convertToPixels } from '../units.js';
 
-import { getExportOptions } from './getExportOptions';
+import { getExportOptions } from './getExportOptions.js';
 
 export function getSizeInPixel(exportPageOptions: ExportSettings) {
   const { width, height, dpi, unit } = getExportOptions(exportPageOptions);
diff --git a/src/component/elements/linearAxis/LinearVerticalAxis.tsx b/src/component/elements/linearAxis/LinearVerticalAxis.tsx
index ecf0750d0..3794726c2 100644
--- a/src/component/elements/linearAxis/LinearVerticalAxis.tsx
+++ b/src/component/elements/linearAxis/LinearVerticalAxis.tsx
@@ -1,4 +1,4 @@
-import { ScaleLinear } from 'd3';
+import type { ScaleLinear } from 'd3';
 import { forwardRef, useRef } from 'react';
 import { useLinearPrimaryTicks } from 'react-d3-utils';
 
diff --git a/src/component/elements/print/PrintContent.tsx b/src/component/elements/print/PrintContent.tsx
index 34a14a1fe..d05cb8a8c 100644
--- a/src/component/elements/print/PrintContent.tsx
+++ b/src/component/elements/print/PrintContent.tsx
@@ -8,25 +8,20 @@ import {
   Tag,
 } from '@blueprintjs/core';
 import { css } from '@emotion/react';
-import { PageSizeName, PrintPageOptions } from 'nmr-load-save';
-import {
-  CSSProperties,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import type { PageSizeName, PrintPageOptions } from 'nmr-load-save';
+import type { CSSProperties, ReactNode } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Controller, useForm } from 'react-hook-form';
 
-import ActionButtons from '../ActionButtons';
-import Label, { LabelStyle } from '../Label';
-import { NumberInput2Controller } from '../NumberInput2Controller';
-import { Select2Controller } from '../Select2Controller';
+import ActionButtons from '../ActionButtons.js';
+import type { LabelStyle } from '../Label.js';
+import Label from '../Label.js';
+import { NumberInput2Controller } from '../NumberInput2Controller.js';
+import { Select2Controller } from '../Select2Controller.js';
 
-import { PrintProvider } from './PrintProvider';
-import { getSizesList, pageSizes } from './pageSize';
+import { PrintProvider } from './PrintProvider.js';
+import { getSizesList, pageSizes } from './pageSize.js';
 
 const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');
 
diff --git a/src/component/elements/print/PrintProvider.tsx b/src/component/elements/print/PrintProvider.tsx
index f6fd11509..3f5eb86bd 100644
--- a/src/component/elements/print/PrintProvider.tsx
+++ b/src/component/elements/print/PrintProvider.tsx
@@ -1,6 +1,7 @@
-import { createContext, ReactNode, useContext, useMemo } from 'react';
+import type { ReactNode } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 
-interface PrintPagContextProps {
+export interface PrintPagContextProps {
   width: number;
   height: number;
 }
diff --git a/src/component/elements/print/index.ts b/src/component/elements/print/index.ts
index ee12b2f5c..a36876328 100644
--- a/src/component/elements/print/index.ts
+++ b/src/component/elements/print/index.ts
@@ -1,2 +1,2 @@
-export * from './PrintContent';
-export * from './PrintProvider';
+export * from './PrintContent.js';
+export * from './PrintProvider.js';
diff --git a/src/component/elements/print/pageSize.ts b/src/component/elements/print/pageSize.ts
index 5d1c3a89e..fed3a031d 100644
--- a/src/component/elements/print/pageSize.ts
+++ b/src/component/elements/print/pageSize.ts
@@ -1,4 +1,4 @@
-import { Layout, PageSizeName } from 'nmr-load-save';
+import type { Layout, PageSizeName } from 'nmr-load-save';
 
 export interface PageSize {
   name: PageSizeName;
diff --git a/src/component/elements/resizer/SVGResizer.tsx b/src/component/elements/resizer/SVGResizer.tsx
index 74bf1aa79..b103dc515 100644
--- a/src/component/elements/resizer/SVGResizer.tsx
+++ b/src/component/elements/resizer/SVGResizer.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable react/no-unused-prop-types */
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
-import useResizer from './useResizer';
+import useResizer from './useResizer.js';
 
 const style: Record<'anchor' | 'innerContainer', CSSProperties> = {
   anchor: {
diff --git a/src/component/elements/resizer/useResizer.tsx b/src/component/elements/resizer/useResizer.tsx
index 38b5d884a..d4876e6f8 100644
--- a/src/component/elements/resizer/useResizer.tsx
+++ b/src/component/elements/resizer/useResizer.tsx
@@ -1,8 +1,9 @@
 import { useRef } from 'react';
 
-import useDraggable, { Draggable } from '../draggable/useDraggable';
+import type { Draggable } from '../draggable/useDraggable.js';
+import useDraggable from '../draggable/useDraggable.js';
 
-import { ResizerProps, Position } from './SVGResizer';
+import type { ResizerProps, Position } from './SVGResizer.js';
 
 interface UseResizer {
   right: Draggable;
diff --git a/src/component/elements/useFormValidateField.ts b/src/component/elements/useFormValidateField.ts
index 45f36ab62..5e3669558 100644
--- a/src/component/elements/useFormValidateField.ts
+++ b/src/component/elements/useFormValidateField.ts
@@ -1,4 +1,4 @@
-import has from 'lodash/has';
+import has from 'lodash/has.js';
 import { useCallback } from 'react';
 import { useFormContext } from 'react-hook-form';
 
diff --git a/src/component/header/AutoPeakPickingOptionPanel.tsx b/src/component/header/AutoPeakPickingOptionPanel.tsx
index 9b3e787a5..21f62617b 100644
--- a/src/component/header/AutoPeakPickingOptionPanel.tsx
+++ b/src/component/header/AutoPeakPickingOptionPanel.tsx
@@ -3,18 +3,18 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 
-import { useDispatch } from '../context/DispatchContext';
-import { useToaster } from '../context/ToasterContext';
-import Label from '../elements/Label';
-import { NumberInput2Controller } from '../elements/NumberInput2Controller';
-import { Select2Controller } from '../elements/Select2Controller';
+import { useDispatch } from '../context/DispatchContext.js';
+import { useToaster } from '../context/ToasterContext.js';
+import Label from '../elements/Label.js';
+import { NumberInput2Controller } from '../elements/NumberInput2Controller.js';
+import { Select2Controller } from '../elements/Select2Controller.js';
 import {
   MIN_AREA_POINTS,
   useCheckPointsNumberInWindowArea,
-} from '../hooks/useCheckPointsNumberInWindowArea';
+} from '../hooks/useCheckPointsNumberInWindowArea.js';
 
-import { headerLabelStyle } from './Header';
-import { HeaderWrapper } from './HeaderWrapper';
+import { headerLabelStyle } from './Header.js';
+import { HeaderWrapper } from './HeaderWrapper.js';
 
 type Direction = 'positive' | 'negative' | 'both';
 
diff --git a/src/component/header/Header.tsx b/src/component/header/Header.tsx
index a921fd269..dc03d3a4d 100644
--- a/src/component/header/Header.tsx
+++ b/src/component/header/Header.tsx
@@ -1,43 +1,42 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { useMemo, memo } from 'react';
+import { memo, useMemo } from 'react';
 import {
-  FaRegWindowMaximize,
+  FaFilm,
   FaQuestionCircle,
   FaRegSave,
-  FaFilm,
+  FaRegWindowMaximize,
 } from 'react-icons/fa';
 import { Toolbar, useFullscreen } from 'react-science/ui';
 
-import { docsBaseUrl } from '../../constants';
-import { useChartData } from '../context/ChartContext';
+import { docsBaseUrl } from '../../constants.js';
+import { useChartData } from '../context/ChartContext.js';
 import {
   usePreferences,
   useWorkspacesList,
-} from '../context/PreferencesContext';
-import Button from '../elements/Button';
-import { HeaderContainer } from '../elements/HeaderContainer';
-import { LabelStyle } from '../elements/Label';
-import DropDownButton, {
-  DropDownListItem,
-} from '../elements/dropDownButton/DropDownButton';
-import { useSaveSettings } from '../hooks/useSaveSettings';
-import { useWorkspaceAction } from '../hooks/useWorkspaceAction';
-import { LogsHistoryModal } from '../modal/LogsHistoryModal';
-import AboutUsModal from '../modal/aboutUs/AboutUsModal';
-import GeneralSettingsModal from '../modal/setting/GeneralSettings';
-import WorkspaceItem from '../modal/setting/WorkspaceItem';
-import { options } from '../toolbar/ToolTypes';
-
-import { AutoPeakPickingOptionPanel } from './AutoPeakPickingOptionPanel';
-import { HeaderWrapper } from './HeaderWrapper';
-import RangesPickingOptionPanel from './RangesPickingOptionPanel';
-import { SimpleApodizationOptionsPanel } from './SimpleApodizationOptionsPanel';
-import { SimpleBaseLineCorrectionOptionsPanel } from './SimpleBaseLineCorrectionOptionsPanel';
-import { SimplePhaseCorrectionOptionsPanel } from './SimplePhaseCorrectionOptionsPanel';
-import { SimplePhaseCorrectionTwoDimensionsPanel } from './SimplePhaseCorrectionTwoDimensionsPanel';
-import { SimpleZeroFillingOptionsPanel } from './SimpleZeroFillingOptionsPanel';
-import Zones2DOptionPanel from './Zones2DOptionPanel';
+} from '../context/PreferencesContext.js';
+import Button from '../elements/Button.js';
+import { HeaderContainer } from '../elements/HeaderContainer.js';
+import type { LabelStyle } from '../elements/Label.js';
+import type { DropDownListItem } from '../elements/dropDownButton/DropDownButton.js';
+import DropDownButton from '../elements/dropDownButton/DropDownButton.js';
+import { useSaveSettings } from '../hooks/useSaveSettings.js';
+import { useWorkspaceAction } from '../hooks/useWorkspaceAction.js';
+import { LogsHistoryModal } from '../modal/LogsHistoryModal.js';
+import AboutUsModal from '../modal/aboutUs/AboutUsModal.js';
+import GeneralSettingsModal from '../modal/setting/GeneralSettings.js';
+import WorkspaceItem from '../modal/setting/WorkspaceItem.js';
+import { options } from '../toolbar/ToolTypes.js';
+
+import { AutoPeakPickingOptionPanel } from './AutoPeakPickingOptionPanel.js';
+import { HeaderWrapper } from './HeaderWrapper.js';
+import RangesPickingOptionPanel from './RangesPickingOptionPanel.js';
+import { SimpleApodizationOptionsPanel } from './SimpleApodizationOptionsPanel.js';
+import { SimpleBaseLineCorrectionOptionsPanel } from './SimpleBaseLineCorrectionOptionsPanel.js';
+import { SimplePhaseCorrectionOptionsPanel } from './SimplePhaseCorrectionOptionsPanel.js';
+import { SimplePhaseCorrectionTwoDimensionsPanel } from './SimplePhaseCorrectionTwoDimensionsPanel.js';
+import { SimpleZeroFillingOptionsPanel } from './SimpleZeroFillingOptionsPanel.js';
+import Zones2DOptionPanel from './Zones2DOptionPanel.js';
 
 export const headerLabelStyle: LabelStyle = {
   label: {
@@ -195,7 +194,6 @@ function HeaderInner(props: HeaderInnerProps) {
                   id="full-screen"
                   onClick={fullscreen.toggle}
                   tooltip="Full screen"
-                  className="windowButton"
                   icon={<FaRegWindowMaximize />}
                 />
               )}
diff --git a/src/component/header/HeaderWrapper.tsx b/src/component/header/HeaderWrapper.tsx
index 7634f088b..7381bb4c9 100644
--- a/src/component/header/HeaderWrapper.tsx
+++ b/src/component/header/HeaderWrapper.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
 const containerStyle: CSSProperties = {
   display: 'flex',
diff --git a/src/component/header/RangesPickingOptionPanel.tsx b/src/component/header/RangesPickingOptionPanel.tsx
index e256fc833..7b580eb29 100644
--- a/src/component/header/RangesPickingOptionPanel.tsx
+++ b/src/component/header/RangesPickingOptionPanel.tsx
@@ -1,19 +1,19 @@
-import { Checkbox, Button } from '@blueprintjs/core';
+import { Button, Checkbox } from '@blueprintjs/core';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 
-import { useDispatch } from '../context/DispatchContext';
-import { useToaster } from '../context/ToasterContext';
-import Label from '../elements/Label';
-import { NumberInput2Controller } from '../elements/NumberInput2Controller';
+import { useDispatch } from '../context/DispatchContext.js';
+import { useToaster } from '../context/ToasterContext.js';
+import Label from '../elements/Label.js';
+import { NumberInput2Controller } from '../elements/NumberInput2Controller.js';
 import {
   MIN_AREA_POINTS,
   useCheckPointsNumberInWindowArea,
-} from '../hooks/useCheckPointsNumberInWindowArea';
+} from '../hooks/useCheckPointsNumberInWindowArea.js';
 
-import { headerLabelStyle } from './Header';
-import { HeaderWrapper } from './HeaderWrapper';
+import { headerLabelStyle } from './Header.js';
+import { HeaderWrapper } from './HeaderWrapper.js';
 
 interface AutoRangesOptions {
   minMaxRatio: number;
diff --git a/src/component/header/SimpleApodizationOptionsPanel.tsx b/src/component/header/SimpleApodizationOptionsPanel.tsx
index e986f7d36..7a94bc22f 100644
--- a/src/component/header/SimpleApodizationOptionsPanel.tsx
+++ b/src/component/header/SimpleApodizationOptionsPanel.tsx
@@ -1,15 +1,16 @@
 import { Checkbox } from '@blueprintjs/core';
-import { Filters, Filter } from 'nmr-processing';
+import type { Filter } from 'nmr-processing';
+import { Filters } from 'nmr-processing';
 import { memo } from 'react';
 
-import ActionButtons from '../elements/ActionButtons';
-import Label from '../elements/Label';
-import { NumberInput2Controller } from '../elements/NumberInput2Controller';
-import { useFilter } from '../hooks/useFilter';
-import { useSharedApodization } from '../panels/filtersPanel/Filters/hooks/useSharedApodization';
+import ActionButtons from '../elements/ActionButtons.js';
+import Label from '../elements/Label.js';
+import { NumberInput2Controller } from '../elements/NumberInput2Controller.js';
+import { useFilter } from '../hooks/useFilter.js';
+import { useSharedApodization } from '../panels/filtersPanel/Filters/hooks/useSharedApodization.js';
 
-import { headerLabelStyle } from './Header';
-import { HeaderWrapper } from './HeaderWrapper';
+import { headerLabelStyle } from './Header.js';
+import { HeaderWrapper } from './HeaderWrapper.js';
 
 interface ApodizationOptionsInnerPanelProps {
   filter: Filter | null;
diff --git a/src/component/header/SimpleBaseLineCorrectionOptionsPanel.tsx b/src/component/header/SimpleBaseLineCorrectionOptionsPanel.tsx
index 99d58420c..fdd74034b 100644
--- a/src/component/header/SimpleBaseLineCorrectionOptionsPanel.tsx
+++ b/src/component/header/SimpleBaseLineCorrectionOptionsPanel.tsx
@@ -1,21 +1,22 @@
 import { Checkbox } from '@blueprintjs/core';
 import { Select } from '@blueprintjs/select';
-import { Filter, Filters } from 'nmr-processing';
+import type { Filter } from 'nmr-processing';
+import { Filters } from 'nmr-processing';
 import { memo } from 'react';
 import { Button } from 'react-science/ui';
 
-import ActionButtons from '../elements/ActionButtons';
-import Label from '../elements/Label';
-import { NumberInput2Controller } from '../elements/NumberInput2Controller';
-import { useFilter } from '../hooks/useFilter';
+import ActionButtons from '../elements/ActionButtons.js';
+import Label from '../elements/Label.js';
+import { NumberInput2Controller } from '../elements/NumberInput2Controller.js';
+import { useFilter } from '../hooks/useFilter.js';
 import {
   baselineCorrectionsAlgorithms,
   getBaselineData,
   useBaselineCorrection,
-} from '../panels/filtersPanel/Filters/hooks/useBaselineCorrection';
+} from '../panels/filtersPanel/Filters/hooks/useBaselineCorrection.js';
 
-import { headerLabelStyle } from './Header';
-import { HeaderWrapper } from './HeaderWrapper';
+import { headerLabelStyle } from './Header.js';
+import { HeaderWrapper } from './HeaderWrapper.js';
 
 interface BaseLineCorrectionInnerPanelProps {
   filter: Filter | null;
diff --git a/src/component/header/SimplePhaseCorrectionOptionsPanel.tsx b/src/component/header/SimplePhaseCorrectionOptionsPanel.tsx
index 36dc50699..c1619b4db 100644
--- a/src/component/header/SimplePhaseCorrectionOptionsPanel.tsx
+++ b/src/component/header/SimplePhaseCorrectionOptionsPanel.tsx
@@ -2,16 +2,16 @@ import { Select } from '@blueprintjs/select';
 import { Filters } from 'nmr-processing';
 import { Button } from 'react-science/ui';
 
-import ActionButtons from '../elements/ActionButtons';
-import InputRange from '../elements/InputRange';
-import { useFilter } from '../hooks/useFilter';
+import ActionButtons from '../elements/ActionButtons.js';
+import InputRange from '../elements/InputRange.js';
+import { useFilter } from '../hooks/useFilter.js';
+import type { AlgorithmItem } from '../panels/filtersPanel/Filters/hooks/usePhaseCorrection.js';
 import {
   algorithms,
-  AlgorithmItem,
   usePhaseCorrection,
-} from '../panels/filtersPanel/Filters/hooks/usePhaseCorrection';
+} from '../panels/filtersPanel/Filters/hooks/usePhaseCorrection.js';
 
-import { HeaderWrapper } from './HeaderWrapper';
+import { HeaderWrapper } from './HeaderWrapper.js';
 
 export function SimplePhaseCorrectionOptionsPanel() {
   const filter = useFilter(Filters.phaseCorrection.id);
diff --git a/src/component/header/SimplePhaseCorrectionTwoDimensionsPanel.tsx b/src/component/header/SimplePhaseCorrectionTwoDimensionsPanel.tsx
index 237ea808c..5463c6dde 100644
--- a/src/component/header/SimplePhaseCorrectionTwoDimensionsPanel.tsx
+++ b/src/component/header/SimplePhaseCorrectionTwoDimensionsPanel.tsx
@@ -1,23 +1,22 @@
 /** @jsxImportSource @emotion/react */
 import { Select } from '@blueprintjs/select';
-import { css } from '@emotion/react';
 import { Filters } from 'nmr-processing';
 import { FaRulerHorizontal, FaRulerVertical } from 'react-icons/fa';
 import { MdLooksTwo } from 'react-icons/md';
 import { Button, Toolbar } from 'react-science/ui';
 
-import ActionButtons from '../elements/ActionButtons';
-import InputRange from '../elements/InputRange';
-import Label from '../elements/Label';
-import { useFilter } from '../hooks/useFilter';
+import ActionButtons from '../elements/ActionButtons.js';
+import InputRange from '../elements/InputRange.js';
+import Label from '../elements/Label.js';
+import { useFilter } from '../hooks/useFilter.js';
+import type { AlgorithmItem } from '../panels/filtersPanel/Filters/hooks/usePhaseCorrectionTwoDimensions.js';
 import {
   phaseCorrectionalAlgorithms,
   usePhaseCorrectionTwoDimensions,
-  AlgorithmItem,
-} from '../panels/filtersPanel/Filters/hooks/usePhaseCorrectionTwoDimensions';
+} from '../panels/filtersPanel/Filters/hooks/usePhaseCorrectionTwoDimensions.js';
 
-import { headerLabelStyle } from './Header';
-import { HeaderWrapper } from './HeaderWrapper';
+import { headerLabelStyle } from './Header.js';
+import { HeaderWrapper } from './HeaderWrapper.js';
 
 export function SimplePhaseCorrectionTwoDimensionsPanel() {
   const filter = useFilter(Filters.phaseCorrectionTwoDimensions.id);
@@ -55,18 +54,12 @@ export function SimplePhaseCorrectionTwoDimensionsPanel() {
           <Label title="Direction:" style={headerLabelStyle}>
             <Toolbar>
               <Toolbar.Item
-                css={css`
-                  border: 1px solid #f7f7f7;
-                `}
                 tooltip="Horizontal"
                 icon={<FaRulerHorizontal />}
                 active={activeTraceDirection === 'horizontal'}
                 onClick={() => onChangeHandler('horizontal')}
               />
               <Toolbar.Item
-                css={css`
-                  border: 1px solid #f7f7f7;
-                `}
                 tooltip="Vertical"
                 icon={<FaRulerVertical />}
                 active={activeTraceDirection === 'vertical'}
diff --git a/src/component/header/SimpleZeroFillingOptionsPanel.tsx b/src/component/header/SimpleZeroFillingOptionsPanel.tsx
index 9f9da542d..704cb2cdf 100644
--- a/src/component/header/SimpleZeroFillingOptionsPanel.tsx
+++ b/src/component/header/SimpleZeroFillingOptionsPanel.tsx
@@ -1,17 +1,17 @@
 import { Checkbox } from '@blueprintjs/core';
 import { Filters } from 'nmr-processing';
 
-import ActionButtons from '../elements/ActionButtons';
-import Label from '../elements/Label';
-import { Select2Controller } from '../elements/Select2Controller';
-import { useFilter } from '../hooks/useFilter';
+import ActionButtons from '../elements/ActionButtons.js';
+import Label from '../elements/Label.js';
+import { Select2Controller } from '../elements/Select2Controller.js';
+import { useFilter } from '../hooks/useFilter.js';
 import {
   useZeroFilling,
   zeroFillingSizes,
-} from '../panels/filtersPanel/Filters/hooks/useZeroFilling';
+} from '../panels/filtersPanel/Filters/hooks/useZeroFilling.js';
 
-import { headerLabelStyle } from './Header';
-import { HeaderWrapper } from './HeaderWrapper';
+import { headerLabelStyle } from './Header.js';
+import { HeaderWrapper } from './HeaderWrapper.js';
 
 export function SimpleZeroFillingOptionsPanel() {
   const filter = useFilter(Filters.zeroFilling.id);
diff --git a/src/component/header/Zones2DOptionPanel.tsx b/src/component/header/Zones2DOptionPanel.tsx
index 77df9cbc5..37ac21b92 100644
--- a/src/component/header/Zones2DOptionPanel.tsx
+++ b/src/component/header/Zones2DOptionPanel.tsx
@@ -3,12 +3,12 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 
-import { useDispatch } from '../context/DispatchContext';
-import Label from '../elements/Label';
-import { NumberInput2Controller } from '../elements/NumberInput2Controller';
+import { useDispatch } from '../context/DispatchContext.js';
+import Label from '../elements/Label.js';
+import { NumberInput2Controller } from '../elements/NumberInput2Controller.js';
 
-import { headerLabelStyle } from './Header';
-import { HeaderWrapper } from './HeaderWrapper';
+import { headerLabelStyle } from './Header.js';
+import { HeaderWrapper } from './HeaderWrapper.js';
 
 const validationSchema = Yup.object().shape({
   zonesNoiseFactor: Yup.number().integer().min(0).required(),
diff --git a/src/component/highlight/index.tsx b/src/component/highlight/index.tsx
index 7d19594a1..7060898e3 100644
--- a/src/component/highlight/index.tsx
+++ b/src/component/highlight/index.tsx
@@ -1,4 +1,5 @@
-import { Range } from 'nmr-processing';
+import type { Range } from 'nmr-processing';
+import type { MouseEvent, CSSProperties } from 'react';
 import {
   createContext,
   useReducer,
@@ -6,11 +7,9 @@ import {
   useContext,
   useCallback,
   useEffect,
-  MouseEvent,
-  CSSProperties,
 } from 'react';
 
-import { ExclusionZone } from '../../data/types/data1d/ExclusionZone';
+import type { ExclusionZone } from '../../data/types/data1d/ExclusionZone.js';
 
 export enum HighlightEventSource {
   PEAK = 'PEAK',
diff --git a/src/component/hooks/useActiveSpectra.ts b/src/component/hooks/useActiveSpectra.ts
index 20cf335bf..3fb13e77a 100644
--- a/src/component/hooks/useActiveSpectra.ts
+++ b/src/component/hooks/useActiveSpectra.ts
@@ -1,5 +1,5 @@
-import { useChartData } from '../context/ChartContext';
-import { getActiveSpectra } from '../reducer/helper/getActiveSpectra';
+import { useChartData } from '../context/ChartContext.js';
+import { getActiveSpectra } from '../reducer/helper/getActiveSpectra.js';
 
 export function useActiveSpectra() {
   const state = useChartData();
diff --git a/src/component/hooks/useActiveSpectrum.ts b/src/component/hooks/useActiveSpectrum.ts
index 093df004e..b3c2725a0 100644
--- a/src/component/hooks/useActiveSpectrum.ts
+++ b/src/component/hooks/useActiveSpectrum.ts
@@ -1,5 +1,5 @@
-import { useChartData } from '../context/ChartContext';
-import { getActiveSpectrum } from '../reducer/helper/getActiveSpectrum';
+import { useChartData } from '../context/ChartContext.js';
+import { getActiveSpectrum } from '../reducer/helper/getActiveSpectrum.js';
 
 export function useActiveSpectrum() {
   const state = useChartData();
diff --git a/src/component/hooks/useActiveSpectrumIntegralsViewState.ts b/src/component/hooks/useActiveSpectrumIntegralsViewState.ts
index 2aa38a8ea..6991e0b2c 100644
--- a/src/component/hooks/useActiveSpectrumIntegralsViewState.ts
+++ b/src/component/hooks/useActiveSpectrumIntegralsViewState.ts
@@ -1,8 +1,8 @@
-import { IntegralsViewState } from 'nmr-load-save';
+import type { IntegralsViewState } from 'nmr-load-save';
 
-import { useChartData } from '../context/ChartContext';
+import { useChartData } from '../context/ChartContext.js';
 
-import { useActiveSpectrum } from './useActiveSpectrum';
+import { useActiveSpectrum } from './useActiveSpectrum.js';
 
 export const defaultIntegralsViewState: IntegralsViewState = {
   scaleRatio: 1,
diff --git a/src/component/hooks/useActiveSpectrumPeaksViewState.ts b/src/component/hooks/useActiveSpectrumPeaksViewState.ts
index 9d7d1c663..0fe61ee1e 100644
--- a/src/component/hooks/useActiveSpectrumPeaksViewState.ts
+++ b/src/component/hooks/useActiveSpectrumPeaksViewState.ts
@@ -1,8 +1,8 @@
-import { PeaksViewState } from 'nmr-load-save';
+import type { PeaksViewState } from 'nmr-load-save';
 
-import { useChartData } from '../context/ChartContext';
+import { useChartData } from '../context/ChartContext.js';
 
-import { useActiveSpectrum } from './useActiveSpectrum';
+import { useActiveSpectrum } from './useActiveSpectrum.js';
 
 export const defaultPeaksViewState: PeaksViewState = {
   showPeaks: true,
diff --git a/src/component/hooks/useActiveSpectrumRangesViewState.ts b/src/component/hooks/useActiveSpectrumRangesViewState.ts
index f74761403..0c38e9e44 100644
--- a/src/component/hooks/useActiveSpectrumRangesViewState.ts
+++ b/src/component/hooks/useActiveSpectrumRangesViewState.ts
@@ -1,8 +1,8 @@
-import { RangesViewState } from 'nmr-load-save';
+import type { RangesViewState } from 'nmr-load-save';
 
-import { useChartData } from '../context/ChartContext';
+import { useChartData } from '../context/ChartContext.js';
 
-import { useActiveSpectrum } from './useActiveSpectrum';
+import { useActiveSpectrum } from './useActiveSpectrum.js';
 
 export const defaultRangesViewState: RangesViewState = {
   showPeaks: false,
diff --git a/src/component/hooks/useActiveSpectrumStyleOptions.ts b/src/component/hooks/useActiveSpectrumStyleOptions.ts
index 3e839da51..2fd4d4166 100644
--- a/src/component/hooks/useActiveSpectrumStyleOptions.ts
+++ b/src/component/hooks/useActiveSpectrumStyleOptions.ts
@@ -1,9 +1,9 @@
-import get from 'lodash/get';
+import get from 'lodash/get.js';
 import { useMemo } from 'react';
 
-import { usePreferences } from '../context/PreferencesContext';
+import { usePreferences } from '../context/PreferencesContext.js';
 
-import { useActiveSpectra } from './useActiveSpectra';
+import { useActiveSpectra } from './useActiveSpectra.js';
 
 interface ActiveSpectrumOptionsResult {
   isActive: boolean;
diff --git a/src/component/hooks/useActiveSpectrumZonesViewState.ts b/src/component/hooks/useActiveSpectrumZonesViewState.ts
index d3d9e1a1a..71b2fda12 100644
--- a/src/component/hooks/useActiveSpectrumZonesViewState.ts
+++ b/src/component/hooks/useActiveSpectrumZonesViewState.ts
@@ -1,8 +1,8 @@
-import { ZonesViewState } from 'nmr-load-save';
+import type { ZonesViewState } from 'nmr-load-save';
 
-import { useChartData } from '../context/ChartContext';
+import { useChartData } from '../context/ChartContext.js';
 
-import { useActiveSpectrum } from './useActiveSpectrum';
+import { useActiveSpectrum } from './useActiveSpectrum.js';
 
 export const defaultZonesViewState: ZonesViewState = {
   showPeaks: true,
diff --git a/src/component/hooks/useCheckExperimentalFeature.ts b/src/component/hooks/useCheckExperimentalFeature.ts
index 753bd44b7..78c87ee9f 100644
--- a/src/component/hooks/useCheckExperimentalFeature.ts
+++ b/src/component/hooks/useCheckExperimentalFeature.ts
@@ -1,4 +1,4 @@
-import { usePreferences } from '../context/PreferencesContext';
+import { usePreferences } from '../context/PreferencesContext.js';
 
 export default function useCheckExperimentalFeature(): boolean {
   const preferences = usePreferences();
diff --git a/src/component/hooks/useCheckPointsNumberInWindowArea.ts b/src/component/hooks/useCheckPointsNumberInWindowArea.ts
index 0389b211a..252e3017e 100644
--- a/src/component/hooks/useCheckPointsNumberInWindowArea.ts
+++ b/src/component/hooks/useCheckPointsNumberInWindowArea.ts
@@ -1,9 +1,9 @@
 import { xGetFromToIndex } from 'ml-spectra-processing';
-import { Spectrum1D } from 'nmr-load-save';
+import type { Spectrum1D } from 'nmr-load-save';
 
-import { useChartData } from '../context/ChartContext';
+import { useChartData } from '../context/ChartContext.js';
 
-import useSpectrum from './useSpectrum';
+import useSpectrum from './useSpectrum.js';
 
 export const MIN_AREA_POINTS = 5;
 
diff --git a/src/component/hooks/useCheckToolsVisibility.ts b/src/component/hooks/useCheckToolsVisibility.ts
index 085f44536..78dbd97ff 100644
--- a/src/component/hooks/useCheckToolsVisibility.ts
+++ b/src/component/hooks/useCheckToolsVisibility.ts
@@ -1,14 +1,15 @@
-import lodashGet from 'lodash/get';
-import { NMRiumToolBarPreferences } from 'nmr-load-save';
-import { Info1D, Info2D } from 'nmr-processing';
+import lodashGet from 'lodash/get.js';
+import type { NMRiumToolBarPreferences } from 'nmr-load-save';
+import type { Info1D, Info2D } from 'nmr-processing';
 import { useCallback } from 'react';
 
-import { useChartData } from '../context/ChartContext';
-import { usePreferences } from '../context/PreferencesContext';
-import { options, ToolOptionItem } from '../toolbar/ToolTypes';
+import { useChartData } from '../context/ChartContext.js';
+import { usePreferences } from '../context/PreferencesContext.js';
+import type { ToolOptionItem } from '../toolbar/ToolTypes.js';
+import { options } from '../toolbar/ToolTypes.js';
 
-import useCheckExperimentalFeature from './useCheckExperimentalFeature';
-import useSpectrum from './useSpectrum';
+import useCheckExperimentalFeature from './useCheckExperimentalFeature.js';
+import useSpectrum from './useSpectrum.js';
 
 type SpectrumInfo = Info1D | Info2D;
 
diff --git a/src/component/hooks/useCombinedRefs.ts b/src/component/hooks/useCombinedRefs.ts
index f752b695b..12b836978 100644
--- a/src/component/hooks/useCombinedRefs.ts
+++ b/src/component/hooks/useCombinedRefs.ts
@@ -1,4 +1,5 @@
-import { LegacyRef, MutableRefObject, useEffect, useRef } from 'react';
+import type { LegacyRef, MutableRefObject } from 'react';
+import { useEffect, useRef } from 'react';
 
 export default function useCombinedRefs(
   refs: Array<MutableRefObject<any> | LegacyRef<any>>,
diff --git a/src/component/hooks/useDatumWithSpectraStatistics.ts b/src/component/hooks/useDatumWithSpectraStatistics.ts
index 4f85a3196..e55ab8973 100644
--- a/src/component/hooks/useDatumWithSpectraStatistics.ts
+++ b/src/component/hooks/useDatumWithSpectraStatistics.ts
@@ -1,11 +1,11 @@
-import { NmrData1D, NmrData2D } from 'cheminfo-types';
-import { Info1D, Info2D } from 'nmr-processing';
+import type { NmrData1D, NmrData2D } from 'cheminfo-types';
+import type { Info1D, Info2D } from 'nmr-processing';
 import { useMemo } from 'react';
 
-import { useChartData } from '../context/ChartContext';
-import nucleusToString from '../utility/nucleusToString';
+import { useChartData } from '../context/ChartContext.js';
+import nucleusToString from '../utility/nucleusToString.js';
 
-import { useActiveSpectrum } from './useActiveSpectrum';
+import { useActiveSpectrum } from './useActiveSpectrum.js';
 
 interface SpectrumWithStatisticsProps {
   info: Info1D | Info2D;
diff --git a/src/component/hooks/useExport.tsx b/src/component/hooks/useExport.tsx
index b1dcfccc4..741e5928a 100644
--- a/src/component/hooks/useExport.tsx
+++ b/src/component/hooks/useExport.tsx
@@ -1,15 +1,16 @@
 import { useCallback } from 'react';
 
-import { ExportOptions, toJSON } from '../../data/SpectraManager';
-import { useChartData } from '../context/ChartContext';
-import { usePreferences } from '../context/PreferencesContext';
-import { useToaster } from '../context/ToasterContext';
+import type { ExportOptions } from '../../data/SpectraManager.js';
+import { toJSON } from '../../data/SpectraManager.js';
+import { useChartData } from '../context/ChartContext.js';
+import { usePreferences } from '../context/PreferencesContext.js';
+import { useToaster } from '../context/ToasterContext.js';
 import {
   copyPNGToClipboard,
   exportAsJSON,
   exportAsPng,
   exportAsSVG,
-} from '../utility/export';
+} from '../utility/export.js';
 
 interface SaveOptions {
   include: ExportOptions;
diff --git a/src/component/hooks/useFilter.ts b/src/component/hooks/useFilter.ts
index 908cb6ed8..de9839f5f 100644
--- a/src/component/hooks/useFilter.ts
+++ b/src/component/hooks/useFilter.ts
@@ -1,8 +1,8 @@
-import { Spectrum1D } from 'nmr-load-save';
-import { Filter } from 'nmr-processing';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { Filter } from 'nmr-processing';
 import { useMemo } from 'react';
 
-import useSpectrum from './useSpectrum';
+import useSpectrum from './useSpectrum.js';
 
 const emptyData = { filters: {} };
 
diff --git a/src/component/hooks/useFormatNumberByNucleus.ts b/src/component/hooks/useFormatNumberByNucleus.ts
index 7aacd48ca..cb03af918 100644
--- a/src/component/hooks/useFormatNumberByNucleus.ts
+++ b/src/component/hooks/useFormatNumberByNucleus.ts
@@ -1,8 +1,8 @@
-import lodashGet from 'lodash/get';
+import lodashGet from 'lodash/get.js';
 import { useMemo } from 'react';
 
-import { usePreferences } from '../context/PreferencesContext';
-import { formatNumber } from '../utility/formatNumber';
+import { usePreferences } from '../context/PreferencesContext.js';
+import { formatNumber } from '../utility/formatNumber.js';
 
 export type ReturnFunction = (
   value?: number | string,
diff --git a/src/component/hooks/useHighlightColor.ts b/src/component/hooks/useHighlightColor.ts
index c3c8e1579..ed74c5876 100644
--- a/src/component/hooks/useHighlightColor.ts
+++ b/src/component/hooks/useHighlightColor.ts
@@ -1,4 +1,4 @@
-import { usePreferences } from '../context/PreferencesContext';
+import { usePreferences } from '../context/PreferencesContext.js';
 
 export function useHighlightColor() {
   const { current } = usePreferences();
diff --git a/src/component/hooks/useIntegralPath.ts b/src/component/hooks/useIntegralPath.ts
index 7979808ba..b0fd8b9b2 100644
--- a/src/component/hooks/useIntegralPath.ts
+++ b/src/component/hooks/useIntegralPath.ts
@@ -1,11 +1,11 @@
-import { ScaleLinear } from 'd3';
+import type { ScaleLinear } from 'd3';
 import { xyReduce } from 'ml-spectra-processing';
 
-import { getIntegralYScale } from '../1d/utilities/scale';
-import { useChartData } from '../context/ChartContext';
-import { PathBuilder } from '../utility/PathBuilder';
+import { getIntegralYScale } from '../1d/utilities/scale.js';
+import { useChartData } from '../context/ChartContext.js';
+import { PathBuilder } from '../utility/PathBuilder.js';
 
-import { useXScale } from './useXScale';
+import { useXScale } from './useXScale.js';
 
 function useIntegralYDomain(
   max: number,
diff --git a/src/component/hooks/useNucleus.ts b/src/component/hooks/useNucleus.ts
index 1833b20ae..b0c052db1 100644
--- a/src/component/hooks/useNucleus.ts
+++ b/src/component/hooks/useNucleus.ts
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import { useChartData } from '../context/ChartContext';
+import { useChartData } from '../context/ChartContext.js';
 
 export default function useNucleus() {
   const {
diff --git a/src/component/hooks/usePanelPreferences.ts b/src/component/hooks/usePanelPreferences.ts
index 7ce5a038e..4b9f8ca92 100644
--- a/src/component/hooks/usePanelPreferences.ts
+++ b/src/component/hooks/usePanelPreferences.ts
@@ -1,5 +1,5 @@
-import has from 'lodash/has';
-import {
+import has from 'lodash/has.js';
+import type {
   MatrixGenerationOptions,
   MultipleSpectraAnalysisPreferences,
   PanelsPreferences,
@@ -8,8 +8,8 @@ import {
 } from 'nmr-load-save';
 import { useMemo } from 'react';
 
-import { getDefaultPredictionOptions } from '../../data/PredictionManager';
-import { usePreferences } from '../context/PreferencesContext';
+import { getDefaultPredictionOptions } from '../../data/PredictionManager.js';
+import { usePreferences } from '../context/PreferencesContext.js';
 import {
   getIntegralDefaultValues,
   getPeaksDefaultValues,
@@ -19,8 +19,8 @@ import {
   getMultipleSpectraAnalysisDefaultValues,
   getSpectraDefaultValues,
   getMatrixGenerationDefaultValues,
-} from '../reducer/preferences/panelsPreferencesDefaultValues';
-import { getValue } from '../utility/LocalStorage';
+} from '../reducer/preferences/panelsPreferencesDefaultValues.js';
+import { getValue } from '../utility/LocalStorage.js';
 
 type Panel =
   | 'spectra'
diff --git a/src/component/hooks/usePeaksLabelSettings.ts b/src/component/hooks/usePeaksLabelSettings.ts
index c109d3ff1..c1529c616 100644
--- a/src/component/hooks/usePeaksLabelSettings.ts
+++ b/src/component/hooks/usePeaksLabelSettings.ts
@@ -1,6 +1,6 @@
-import { PeaksLabel } from 'nmr-load-save';
+import type { PeaksLabel } from 'nmr-load-save';
 
-import { usePreferences } from '../context/PreferencesContext';
+import { usePreferences } from '../context/PreferencesContext.js';
 
 const peaksLabelDefaultValues: PeaksLabel = {
   marginTop: 0,
diff --git a/src/component/hooks/useResizerStatus.ts b/src/component/hooks/useResizerStatus.ts
index 709b0366a..ddbb2cf3d 100644
--- a/src/component/hooks/useResizerStatus.ts
+++ b/src/component/hooks/useResizerStatus.ts
@@ -1,7 +1,7 @@
-import { NMRiumToolBarPreferences } from 'nmr-load-save';
+import type { NMRiumToolBarPreferences } from 'nmr-load-save';
 
-import { useChartData } from '../context/ChartContext';
-import { useKeyModifiers } from '../context/KeyModifierContext';
+import { useChartData } from '../context/ChartContext.js';
+import { useKeyModifiers } from '../context/KeyModifierContext.js';
 
 export function useResizerStatus(toolKey: keyof NMRiumToolBarPreferences) {
   const {
diff --git a/src/component/hooks/useSaveSettings.tsx b/src/component/hooks/useSaveSettings.tsx
index 1c56660c5..edfee1c82 100644
--- a/src/component/hooks/useSaveSettings.tsx
+++ b/src/component/hooks/useSaveSettings.tsx
@@ -2,18 +2,18 @@
 import { Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { Workspace } from 'nmr-load-save';
+import type { Workspace } from 'nmr-load-save';
 import { useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import { useOnOff } from 'react-science/ui';
 import * as Yup from 'yup';
 
-import { usePreferences } from '../context/PreferencesContext';
-import { useToaster } from '../context/ToasterContext';
-import ActionButtons from '../elements/ActionButtons';
-import { Input2Controller } from '../elements/Input2Controller';
+import { usePreferences } from '../context/PreferencesContext.js';
+import { useToaster } from '../context/ToasterContext.js';
+import ActionButtons from '../elements/ActionButtons.js';
+import { Input2Controller } from '../elements/Input2Controller.js';
 
-import { useWorkspaceAction } from './useWorkspaceAction';
+import { useWorkspaceAction } from './useWorkspaceAction.js';
 
 const schema = Yup.object().shape({
   workspaceName: Yup.string().required(),
diff --git a/src/component/hooks/useSetActiveSpectrumAction.ts b/src/component/hooks/useSetActiveSpectrumAction.ts
index 7191d674c..f5c356c0c 100644
--- a/src/component/hooks/useSetActiveSpectrumAction.ts
+++ b/src/component/hooks/useSetActiveSpectrumAction.ts
@@ -1,5 +1,5 @@
-import { useDispatch } from '../context/DispatchContext';
-import { getModifiers } from '../context/KeyModifierContext';
+import { useDispatch } from '../context/DispatchContext.js';
+import { getModifiers } from '../context/KeyModifierContext.js';
 
 export function useSetActiveSpectrumAction() {
   const dispatch = useDispatch();
diff --git a/src/component/hooks/useSpectraPerNucleus.ts b/src/component/hooks/useSpectraPerNucleus.ts
index d388098aa..19b59eda0 100644
--- a/src/component/hooks/useSpectraPerNucleus.ts
+++ b/src/component/hooks/useSpectraPerNucleus.ts
@@ -1,8 +1,8 @@
-import { Spectrum } from 'nmr-load-save';
+import type { Spectrum } from 'nmr-load-save';
 import { useMemo } from 'react';
 
-import { useChartData } from '../context/ChartContext';
-import nucleusToString from '../utility/nucleusToString';
+import { useChartData } from '../context/ChartContext.js';
+import nucleusToString from '../utility/nucleusToString.js';
 
 export default function useSpectraByActiveNucleus() {
   const {
diff --git a/src/component/hooks/useSpectrum.ts b/src/component/hooks/useSpectrum.ts
index 8e829bf13..1dc236870 100644
--- a/src/component/hooks/useSpectrum.ts
+++ b/src/component/hooks/useSpectrum.ts
@@ -1,9 +1,9 @@
-import { Spectrum } from 'nmr-load-save';
+import type { Spectrum } from 'nmr-load-save';
 import { useMemo } from 'react';
 
-import { useChartData } from '../context/ChartContext';
+import { useChartData } from '../context/ChartContext.js';
 
-import { useActiveSpectrum } from './useActiveSpectrum';
+import { useActiveSpectrum } from './useActiveSpectrum.js';
 
 export default function useSpectrum(defaultValue: any = null) {
   const { data } = useChartData();
diff --git a/src/component/hooks/useTableSortBy.tsx b/src/component/hooks/useTableSortBy.tsx
index a7c5f2a72..613930aac 100644
--- a/src/component/hooks/useTableSortBy.tsx
+++ b/src/component/hooks/useTableSortBy.tsx
@@ -1,4 +1,4 @@
-import lodashGet from 'lodash/get';
+import lodashGet from 'lodash/get.js';
 import { useCallback, useMemo, useState } from 'react';
 
 export enum SortType {
diff --git a/src/component/hooks/useToggleSpectraVisibility.tsx b/src/component/hooks/useToggleSpectraVisibility.tsx
index 20565f82c..e11aa14a3 100644
--- a/src/component/hooks/useToggleSpectraVisibility.tsx
+++ b/src/component/hooks/useToggleSpectraVisibility.tsx
@@ -2,10 +2,10 @@ import { FaEye, FaEyeSlash, FaMinus, FaPlus } from 'react-icons/fa';
 import { GrRadialSelected } from 'react-icons/gr';
 import { TooltipHelpContent } from 'react-science/ui';
 
-import { useChartData } from '../context/ChartContext';
-import { useDispatch } from '../context/DispatchContext';
-import { ToolbarItemProps } from '../panels/header/DefaultPanelHeader';
-import { SpectraSelectedMode } from '../reducer/actions/SpectraActions';
+import { useChartData } from '../context/ChartContext.js';
+import { useDispatch } from '../context/DispatchContext.js';
+import type { ToolbarItemProps } from '../panels/header/DefaultPanelHeader.js';
+import type { SpectraSelectedMode } from '../reducer/actions/SpectraActions.js';
 
 interface ToggleSpectraVisibility {
   enableShowAll: boolean;
diff --git a/src/component/hooks/useToolsFunctions.ts b/src/component/hooks/useToolsFunctions.ts
index 7edfc9de9..dd6c6f213 100644
--- a/src/component/hooks/useToolsFunctions.ts
+++ b/src/component/hooks/useToolsFunctions.ts
@@ -1,14 +1,14 @@
-import lodashDebounce from 'lodash/debounce';
-import lodashMap from 'lodash/map';
+import lodashDebounce from 'lodash/debounce.js';
+import lodashMap from 'lodash/map.js';
 import { useCallback, useRef, useState } from 'react';
 import { useToggleAccordion } from 'react-science/ui';
 
-import { useChartData } from '../context/ChartContext';
-import { useDispatch } from '../context/DispatchContext';
-import { usePreferences } from '../context/PreferencesContext';
-import { useToaster } from '../context/ToasterContext';
-import { TOOLS_PANELS_ACCORDION } from '../panels/Panels';
-import { options } from '../toolbar/ToolTypes';
+import { useChartData } from '../context/ChartContext.js';
+import { useDispatch } from '../context/DispatchContext.js';
+import { usePreferences } from '../context/PreferencesContext.js';
+import { useToaster } from '../context/ToasterContext.js';
+import { TOOLS_PANELS_ACCORDION } from '../panels/Panels.js';
+import { options } from '../toolbar/ToolTypes.js';
 
 export default function useToolsFunctions() {
   const dispatch = useDispatch();
diff --git a/src/component/hooks/useTriggerNewAssignmentLabel.ts b/src/component/hooks/useTriggerNewAssignmentLabel.ts
index 2b16d4327..48953650d 100644
--- a/src/component/hooks/useTriggerNewAssignmentLabel.ts
+++ b/src/component/hooks/useTriggerNewAssignmentLabel.ts
@@ -1,4 +1,4 @@
-import { useShareData } from '../context/ShareDataContext';
+import { useShareData } from '../context/ShareDataContext.js';
 
 export function useTriggerNewAssignmentLabel(id) {
   const { data: rangeKey, setData } = useShareData<string | null>();
diff --git a/src/component/hooks/useVerticalAlign.ts b/src/component/hooks/useVerticalAlign.ts
index ff8f35365..43c7320cc 100644
--- a/src/component/hooks/useVerticalAlign.ts
+++ b/src/component/hooks/useVerticalAlign.ts
@@ -1,5 +1,5 @@
-import { useChartData } from '../context/ChartContext';
-import { getVerticalAlign } from '../reducer/helper/getVerticalAlign';
+import { useChartData } from '../context/ChartContext.js';
+import { getVerticalAlign } from '../reducer/helper/getVerticalAlign.js';
 
 export function useVerticalAlign() {
   const state = useChartData();
diff --git a/src/component/hooks/useViewportSize.tsx b/src/component/hooks/useViewportSize.tsx
index f7f19804c..5bd6ee31a 100644
--- a/src/component/hooks/useViewportSize.tsx
+++ b/src/component/hooks/useViewportSize.tsx
@@ -1,5 +1,5 @@
-import { useExportSettings } from '../elements/export';
-import { usePrintPage } from '../elements/print';
+import { useExportSettings } from '../elements/export/index.js';
+import { usePrintPage } from '../elements/print/index.js';
 
 export function useViewportSize() {
   const printOptions = usePrintPage();
diff --git a/src/component/hooks/useWorkspaceAction.ts b/src/component/hooks/useWorkspaceAction.ts
index 50573777d..ead3d1702 100644
--- a/src/component/hooks/useWorkspaceAction.ts
+++ b/src/component/hooks/useWorkspaceAction.ts
@@ -1,14 +1,14 @@
 import { v4 } from '@lukeed/uuid';
-import lodashMerge from 'lodash/merge';
-import { Workspace } from 'nmr-load-save';
+import lodashMerge from 'lodash/merge.js';
+import type { Workspace } from 'nmr-load-save';
 
-import { usePreferences } from '../context/PreferencesContext';
+import { usePreferences } from '../context/PreferencesContext.js';
+import type { Settings } from '../reducer/preferences/preferencesReducer.js';
 import {
-  Settings,
   readSettings,
   updateSettings,
-} from '../reducer/preferences/preferencesReducer';
-import { workspaceDefaultProperties } from '../workspaces/workspaceDefaultProperties';
+} from '../reducer/preferences/preferencesReducer.js';
+import { workspaceDefaultProperties } from '../workspaces/workspaceDefaultProperties.js';
 
 export function useWorkspaceAction() {
   const { dispatch, current, workspace } = usePreferences();
diff --git a/src/component/hooks/useWorkspaceExportSettings.ts b/src/component/hooks/useWorkspaceExportSettings.ts
index 658416e3f..28ebcf412 100644
--- a/src/component/hooks/useWorkspaceExportSettings.ts
+++ b/src/component/hooks/useWorkspaceExportSettings.ts
@@ -1,5 +1,5 @@
-import { usePreferences } from '../context/PreferencesContext';
-import { workspaceDefaultProperties } from '../workspaces/workspaceDefaultProperties';
+import { usePreferences } from '../context/PreferencesContext.js';
+import { workspaceDefaultProperties } from '../workspaces/workspaceDefaultProperties.js';
 
 export function useWorkspaceExportSettings() {
   const { current } = usePreferences();
diff --git a/src/component/hooks/useXScale.ts b/src/component/hooks/useXScale.ts
index ce0362849..dfce63db8 100644
--- a/src/component/hooks/useXScale.ts
+++ b/src/component/hooks/useXScale.ts
@@ -1,8 +1,8 @@
-import { ScaleLinear } from 'd3';
+import type { ScaleLinear } from 'd3';
 import { useMemo } from 'react';
 
-import { getXScale } from '../1d/utilities/scale';
-import { useChartData } from '../context/ChartContext';
+import { getXScale } from '../1d/utilities/scale.js';
+import { useChartData } from '../context/ChartContext.js';
 
 export function useXScale(): ScaleLinear<any, any> {
   const { width, margin, xDomains, xDomain, mode } = useChartData();
diff --git a/src/component/hooks/useXYReduce.ts b/src/component/hooks/useXYReduce.ts
index fffc8cd4c..c86d58b96 100644
--- a/src/component/hooks/useXYReduce.ts
+++ b/src/component/hooks/useXYReduce.ts
@@ -1,8 +1,8 @@
-import { DataXY } from 'cheminfo-types';
+import type { DataXY } from 'cheminfo-types';
 import { xyReduce } from 'ml-spectra-processing';
 import { useCallback } from 'react';
 
-import { useChartData } from '../context/ChartContext';
+import { useChartData } from '../context/ChartContext.js';
 
 export enum XYReducerDomainAxis {
   XAxis = 'XAxis',
diff --git a/src/component/loader/DropZone.tsx b/src/component/loader/DropZone.tsx
index c9bd0d82b..5b0cbc7e2 100644
--- a/src/component/loader/DropZone.tsx
+++ b/src/component/loader/DropZone.tsx
@@ -1,15 +1,16 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { ReactNode, useCallback, useState } from 'react';
-import { useDropzone } from 'react-dropzone';
+import type { ReactNode } from 'react';
+import { useCallback, useState } from 'react';
+import * as dropzone from 'react-dropzone';
 import { FaUpload } from 'react-icons/fa';
 
-import { useChartData } from '../context/ChartContext';
-import { LoaderProvider } from '../context/LoaderContext';
-import { useCheckToolsVisibility } from '../hooks/useCheckToolsVisibility';
-import { MetaImportationModal } from '../modal/metaImportation/MetaImportationModal';
+import { useChartData } from '../context/ChartContext.js';
+import { LoaderProvider } from '../context/LoaderContext.js';
+import { useCheckToolsVisibility } from '../hooks/useCheckToolsVisibility.js';
+import { MetaImportationModal } from '../modal/metaImportation/MetaImportationModal.js';
 
-import { useLoadFiles } from './useLoadFiles';
+import { useLoadFiles } from './useLoadFiles.js';
 
 const style = css`
   height: 100%;
@@ -60,7 +61,7 @@ export default function DropZone(props: DropZoneProps) {
     getInputProps,
     isDragActive,
     open: openImportDialog,
-  } = useDropzone({
+  } = dropzone.useDropzone({
     onDrop: loadFiles,
     noClick: true,
     noKeyboard: true,
diff --git a/src/component/loader/NoData.tsx b/src/component/loader/NoData.tsx
index 63d57bd86..7c70d9389 100644
--- a/src/component/loader/NoData.tsx
+++ b/src/component/loader/NoData.tsx
@@ -1,7 +1,7 @@
-import { CSSProperties, ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
-import { useLoader } from '../context/LoaderContext';
-import { useCheckToolsVisibility } from '../hooks/useCheckToolsVisibility';
+import { useLoader } from '../context/LoaderContext.js';
+import { useCheckToolsVisibility } from '../hooks/useCheckToolsVisibility.js';
 
 const styles: Record<'container' | 'text', CSSProperties> = {
   container: {
diff --git a/src/component/loader/Spinner.tsx b/src/component/loader/Spinner.tsx
index 90a722bd7..fa6cc34e8 100644
--- a/src/component/loader/Spinner.tsx
+++ b/src/component/loader/Spinner.tsx
@@ -1,9 +1,10 @@
-import { useState, Fragment, useEffect, useContext, ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import { Fragment, useContext, useEffect, useState } from 'react';
 
-import { useChartData } from '../context/ChartContext';
+import { useChartData } from '../context/ChartContext.js';
 
-import NoData from './NoData';
-import { spinnerContext } from './SpinnerContext';
+import NoData from './NoData.js';
+import { spinnerContext } from './SpinnerContext.js';
 
 interface SpinnerProps {
   isLoading?: boolean;
diff --git a/src/component/loader/SpinnerContext.tsx b/src/component/loader/SpinnerContext.tsx
index 74fc81525..7ee18e202 100644
--- a/src/component/loader/SpinnerContext.tsx
+++ b/src/component/loader/SpinnerContext.tsx
@@ -1,6 +1,7 @@
-import { createContext, ReactElement } from 'react';
+import type { ReactElement } from 'react';
+import { createContext } from 'react';
 
-import DefaultSpinnerComponent from './DefaultSpinnerComponent';
+import DefaultSpinnerComponent from './DefaultSpinnerComponent.js';
 
 export function defaultGetSpinner(loadingText = 'Loading ...') {
   return <DefaultSpinnerComponent loadingText={loadingText} />;
diff --git a/src/component/loader/useLoadFiles.ts b/src/component/loader/useLoadFiles.ts
index 64feac5ab..6633e80d2 100644
--- a/src/component/loader/useLoadFiles.ts
+++ b/src/component/loader/useLoadFiles.ts
@@ -1,14 +1,14 @@
 import { fileCollectionFromFileList } from 'filelist-utils';
 import { read as readDropFiles } from 'nmr-load-save';
-import { ParseResult } from 'papaparse';
+import type { ParseResult } from 'papaparse';
 import { useCallback } from 'react';
 
-import { isMetaFile, parseMetaFile } from '../../data/parseMeta';
-import { useDispatch } from '../context/DispatchContext';
-import { useLogger } from '../context/LoggerContext';
-import { usePreferences } from '../context/PreferencesContext';
-import { useToaster } from '../context/ToasterContext';
-import useCheckExperimentalFeature from '../hooks/useCheckExperimentalFeature';
+import { isMetaFile, parseMetaFile } from '../../data/parseMeta/index.js';
+import { useDispatch } from '../context/DispatchContext.js';
+import { useLogger } from '../context/LoggerContext.js';
+import { usePreferences } from '../context/PreferencesContext.js';
+import { useToaster } from '../context/ToasterContext.js';
+import useCheckExperimentalFeature from '../hooks/useCheckExperimentalFeature.js';
 
 export function useLoadFiles(onOpenMetaInformation?: (file: File) => void) {
   const dispatch = useDispatch();
diff --git a/src/component/main/ErrorOverlay.tsx b/src/component/main/ErrorOverlay.tsx
index 214eb1b0a..96a87c316 100644
--- a/src/component/main/ErrorOverlay.tsx
+++ b/src/component/main/ErrorOverlay.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { FallbackProps } from 'react-error-boundary';
+import type { FallbackProps } from 'react-error-boundary';
 
 const WrongP = styled.p`
   background-color: white;
diff --git a/src/component/main/InnerNMRium.tsx b/src/component/main/InnerNMRium.tsx
index ebd2a5c89..4db3152a3 100644
--- a/src/component/main/InnerNMRium.tsx
+++ b/src/component/main/InnerNMRium.tsx
@@ -1,28 +1,32 @@
-import { useEffect, useReducer, useRef, ForwardedRef } from 'react';
+import type { ForwardedRef } from 'react';
+import { useEffect, useReducer, useRef } from 'react';
 import { useFullscreen } from 'react-science/ui';
 
-import { AssignmentProvider } from '../assignment';
-import { GlobalProvider } from '../context/GlobalContext';
-import { KeyModifiersProvider } from '../context/KeyModifierContext';
-import { LoggerProvider } from '../context/LoggerContext';
-import { PreferencesProvider } from '../context/PreferencesContext';
-import { ToasterProvider } from '../context/ToasterContext';
-import { TopicMoleculeProvider } from '../context/TopicMoleculeContext';
-import { AlertProvider } from '../elements/Alert';
-import { DialogProvider } from '../elements/DialogManager';
-import { ExportManagerProvider } from '../elements/export/ExportManager';
-import { HighlightProvider } from '../highlight';
-import { defaultGetSpinner, SpinnerProvider } from '../loader/SpinnerContext';
+import { AssignmentProvider } from '../assignment/index.js';
+import { GlobalProvider } from '../context/GlobalContext.js';
+import { KeyModifiersProvider } from '../context/KeyModifierContext.js';
+import { LoggerProvider } from '../context/LoggerContext.js';
+import { PreferencesProvider } from '../context/PreferencesContext.js';
+import { ToasterProvider } from '../context/ToasterContext.js';
+import { TopicMoleculeProvider } from '../context/TopicMoleculeContext.js';
+import { AlertProvider } from '../elements/Alert.js';
+import { DialogProvider } from '../elements/DialogManager.js';
+import { ExportManagerProvider } from '../elements/export/ExportManager.js';
+import { HighlightProvider } from '../highlight/index.js';
+import {
+  defaultGetSpinner,
+  SpinnerProvider,
+} from '../loader/SpinnerContext.js';
 import preferencesReducer, {
-  preferencesInitialState,
   initPreferencesState,
+  preferencesInitialState,
   readSettings,
-} from '../reducer/preferences/preferencesReducer';
+} from '../reducer/preferences/preferencesReducer.js';
 
-import { InnerNMRiumContents } from './InnerNMRiumContents';
-import type { NMRiumProps } from './NMRium';
-import { NMRiumRefAPI } from './NMRiumRefAPI';
-import NMRiumStateProvider from './NMRiumStateProvider';
+import { InnerNMRiumContents } from './InnerNMRiumContents.js';
+import type { NMRiumProps } from './NMRium.js';
+import type { NMRiumRefAPI } from './NMRiumRefAPI.js';
+import NMRiumStateProvider from './NMRiumStateProvider.js';
 
 type InnerNMRiumProps = Omit<NMRiumProps, 'onError'> & {
   apiRef: ForwardedRef<NMRiumRefAPI>;
diff --git a/src/component/main/InnerNMRiumContents.tsx b/src/component/main/InnerNMRiumContents.tsx
index 3dca96fbb..c2bd25003 100644
--- a/src/component/main/InnerNMRiumContents.tsx
+++ b/src/component/main/InnerNMRiumContents.tsx
@@ -1,33 +1,28 @@
 /** @jsxImportSource @emotion/react */
 
-import { Global, css } from '@emotion/react';
-import { PrintPageOptions } from 'nmr-load-save';
-import {
-  ForwardedRef,
-  MouseEvent,
-  ReactNode,
-  RefObject,
-  useCallback,
-} from 'react';
+import { css, Global } from '@emotion/react';
+import type { PrintPageOptions } from 'nmr-load-save';
+import type { ForwardedRef, MouseEvent, ReactNode, RefObject } from 'react';
+import { useCallback } from 'react';
 import { useFullscreen } from 'react-science/ui';
 
-import checkModifierKeyActivated from '../../data/utilities/checkModifierKeyActivated';
-import KeysListenerTracker from '../EventsTrackers/KeysListenerTracker';
-import { FilterSyncOptionsProvider } from '../context/FilterSyncOptionsContext';
-import { usePreferences } from '../context/PreferencesContext';
-import { ExportManagerController } from '../elements/export/ExportManager';
-import { PrintContent } from '../elements/print/PrintContent';
-import { Header } from '../header/Header';
-import DropZone from '../loader/DropZone';
-import Panels from '../panels/Panels';
-import ToolBar from '../toolbar/ToolBar';
-
-import { useNMRiumRefAPI } from './NMRiumRefAPI';
-import { NMRiumViewer } from './NMRiumViewer';
-import { SplitPaneWrapper } from './SplitPaneWrapper';
-import { StateError } from './StateError';
-
-import { NMRiumProps, NMRiumRefAPI } from '.';
+import checkModifierKeyActivated from '../../data/utilities/checkModifierKeyActivated.js';
+import KeysListenerTracker from '../EventsTrackers/KeysListenerTracker.js';
+import { FilterSyncOptionsProvider } from '../context/FilterSyncOptionsContext.js';
+import { usePreferences } from '../context/PreferencesContext.js';
+import { ExportManagerController } from '../elements/export/ExportManager.js';
+import { PrintContent } from '../elements/print/PrintContent.js';
+import { Header } from '../header/Header.js';
+import DropZone from '../loader/DropZone.js';
+import Panels from '../panels/Panels.js';
+import ToolBar from '../toolbar/ToolBar.js';
+
+import { useNMRiumRefAPI } from './NMRiumRefAPI.js';
+import { NMRiumViewer } from './NMRiumViewer.js';
+import { SplitPaneWrapper } from './SplitPaneWrapper.js';
+import { StateError } from './StateError.js';
+
+import type { NMRiumProps, NMRiumRefAPI } from './index.js';
 
 const viewerContainerStyle = css`
   border: 0.55px #e6e6e6 solid;
diff --git a/src/component/main/NMRium.tsx b/src/component/main/NMRium.tsx
index fa0912d01..5eaf26f76 100644
--- a/src/component/main/NMRium.tsx
+++ b/src/component/main/NMRium.tsx
@@ -2,17 +2,16 @@ import type {
   CustomWorkspaces,
   WorkspacePreferences as NMRiumPreferences,
 } from 'nmr-load-save';
-import { memo, ReactElement, ReactNode, forwardRef } from 'react';
-import {
-  ErrorBoundary,
-  ErrorBoundaryPropsWithComponent,
-} from 'react-error-boundary';
+import type { ReactElement, ReactNode } from 'react';
+import { forwardRef, memo } from 'react';
+import type { ErrorBoundaryPropsWithComponent } from 'react-error-boundary';
+import { ErrorBoundary } from 'react-error-boundary';
 import { FullScreenProvider, RootLayout } from 'react-science/ui';
 
-import ErrorOverlay from './ErrorOverlay';
-import { InnerNMRium } from './InnerNMRium';
-import { NMRiumRefAPI } from './NMRiumRefAPI';
-import { NMRiumChangeCb, NMRiumData, NMRiumWorkspace } from './types';
+import ErrorOverlay from './ErrorOverlay.js';
+import { InnerNMRium } from './InnerNMRium.js';
+import type { NMRiumRefAPI } from './NMRiumRefAPI.js';
+import type { NMRiumChangeCb, NMRiumData, NMRiumWorkspace } from './types.js';
 
 export interface NMRiumProps {
   data?: NMRiumData;
diff --git a/src/component/main/NMRiumRefAPI.ts b/src/component/main/NMRiumRefAPI.ts
index 34d25182d..d6dab183b 100644
--- a/src/component/main/NMRiumRefAPI.ts
+++ b/src/component/main/NMRiumRefAPI.ts
@@ -1,7 +1,9 @@
-import { ForwardedRef, RefObject, useImperativeHandle } from 'react';
+import type { ForwardedRef, RefObject } from 'react';
+import { useImperativeHandle } from 'react';
 
-import { useLoadFiles } from '../loader/useLoadFiles';
-import { BlobObject, getBlob } from '../utility/export';
+import { useLoadFiles } from '../loader/useLoadFiles.js';
+import type { BlobObject } from '../utility/export.js';
+import { getBlob } from '../utility/export.js';
 
 export interface NMRiumRefAPI {
   getSpectraViewerAsBlob: () => BlobObject | null;
diff --git a/src/component/main/NMRiumStateProvider.tsx b/src/component/main/NMRiumStateProvider.tsx
index 434cc33e4..3d48d5af4 100644
--- a/src/component/main/NMRiumStateProvider.tsx
+++ b/src/component/main/NMRiumStateProvider.tsx
@@ -1,15 +1,21 @@
-import { NmriumState, readNMRiumObject } from 'nmr-load-save';
-import { ReactNode, useCallback, useEffect, useReducer, useRef } from 'react';
-
-import { toJSON } from '../../data/SpectraManager';
-import { ChartDataProvider } from '../context/ChartContext';
-import { DispatchProvider } from '../context/DispatchContext';
-import { useLogger } from '../context/LoggerContext';
-import { usePreferences } from '../context/PreferencesContext';
-import checkActionType from '../reducer/IgnoreActions';
-import { spectrumReducer, initialState, initState } from '../reducer/Reducer';
-
-import { NMRiumChangeCb, NMRiumData } from './types';
+import type { NmriumState } from 'nmr-load-save';
+import { readNMRiumObject } from 'nmr-load-save';
+import type { ReactNode } from 'react';
+import { useCallback, useEffect, useReducer, useRef } from 'react';
+
+import { toJSON } from '../../data/SpectraManager.js';
+import { ChartDataProvider } from '../context/ChartContext.js';
+import { DispatchProvider } from '../context/DispatchContext.js';
+import { useLogger } from '../context/LoggerContext.js';
+import { usePreferences } from '../context/PreferencesContext.js';
+import checkActionType from '../reducer/IgnoreActions.js';
+import {
+  initialState,
+  initState,
+  spectrumReducer,
+} from '../reducer/Reducer.js';
+
+import type { NMRiumChangeCb, NMRiumData } from './types.js';
 
 interface NMRiumStateProviderProps {
   children: ReactNode;
diff --git a/src/component/main/NMRiumViewer.tsx b/src/component/main/NMRiumViewer.tsx
index 886442028..8449fd063 100644
--- a/src/component/main/NMRiumViewer.tsx
+++ b/src/component/main/NMRiumViewer.tsx
@@ -1,12 +1,13 @@
-import { CSSProperties, RefObject, useDeferredValue, useEffect } from 'react';
+import type { CSSProperties, RefObject } from 'react';
+import { useDeferredValue, useEffect } from 'react';
 
-import Viewer1D from '../1d/Viewer1D';
-import FloatMoleculeStructures from '../1d-2d/components/FloatMoleculeStructures';
-import Viewer2D from '../2d/Viewer2D';
-import { useChartData } from '../context/ChartContext';
+import Viewer1D from '../1d/Viewer1D.js';
+import FloatMoleculeStructures from '../1d-2d/components/FloatMoleculeStructures/index.js';
+import Viewer2D from '../2d/Viewer2D.js';
+import { useChartData } from '../context/ChartContext.js';
+import { useViewportSize } from '../hooks/useViewportSize.js';
 
-import { NMRiumProps } from './NMRium';
-import { useViewportSize } from '../hooks/useViewportSize';
+import type { NMRiumProps } from './NMRium.js';
 
 interface NMRiumViewerProps {
   emptyText: NMRiumProps['emptyText'];
diff --git a/src/component/main/SplitPaneWrapper.tsx b/src/component/main/SplitPaneWrapper.tsx
index b4106c36d..dbed67f72 100644
--- a/src/component/main/SplitPaneWrapper.tsx
+++ b/src/component/main/SplitPaneWrapper.tsx
@@ -1,6 +1,7 @@
-import { SplitPane, SplitPaneSize } from 'react-science/ui';
+import type { SplitPaneSize } from 'react-science/ui';
+import { SplitPane } from 'react-science/ui';
 
-import { usePreferences } from '../context/PreferencesContext';
+import { usePreferences } from '../context/PreferencesContext.js';
 
 export function SplitPaneWrapper({ children }) {
   const { current, dispatch } = usePreferences();
diff --git a/src/component/main/StateError.tsx b/src/component/main/StateError.tsx
index d40509ab9..04f46b0a0 100644
--- a/src/component/main/StateError.tsx
+++ b/src/component/main/StateError.tsx
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 
-import { useChartData } from '../context/ChartContext';
-import { useLogger } from '../context/LoggerContext';
+import { useChartData } from '../context/ChartContext.js';
+import { useLogger } from '../context/LoggerContext.js';
 
 /**
  * Alert user in UI when state have errorAction (error from reducer)
diff --git a/src/component/main/index.ts b/src/component/main/index.ts
index 089c2f84f..f53043ff6 100644
--- a/src/component/main/index.ts
+++ b/src/component/main/index.ts
@@ -1,6 +1,6 @@
-export * from './types';
+export * from './types.js';
 
 export { serializeNmriumState as serializeNMRiumState } from 'nmr-load-save';
 
-export * from './NMRium';
-export type { NMRiumRefAPI } from './NMRiumRefAPI';
+export * from './NMRium.js';
+export type { NMRiumRefAPI } from './NMRiumRefAPI.js';
diff --git a/src/component/main/types.ts b/src/component/main/types.ts
index aeb56a043..709de79f6 100644
--- a/src/component/main/types.ts
+++ b/src/component/main/types.ts
@@ -1,9 +1,9 @@
-import { WebSource } from 'filelist-utils';
-import { CorrelationData } from 'nmr-correlation';
+import type { WebSource } from 'filelist-utils';
+import type { CorrelationData } from 'nmr-correlation';
 import type {
   NmriumState as NMRiumState,
-  WorkspacePreferences as NMRiumPreferences,
   Spectrum,
+  WorkspacePreferences as NMRiumPreferences,
 } from 'nmr-load-save';
 
 type DeepPartial<T> = {
diff --git a/src/component/modal/EditPeakShapeModal.tsx b/src/component/modal/EditPeakShapeModal.tsx
index e6cbd25ac..b0a53d78e 100644
--- a/src/component/modal/EditPeakShapeModal.tsx
+++ b/src/component/modal/EditPeakShapeModal.tsx
@@ -2,19 +2,20 @@
 import { Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { Peak1D } from 'nmr-processing';
+import type { Peak1D } from 'nmr-processing';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 
-import { useChartData } from '../context/ChartContext';
-import { useDispatch } from '../context/DispatchContext';
-import ActionButtons from '../elements/ActionButtons';
-import Label, { LabelStyle } from '../elements/Label';
-import { NumberInput2Controller } from '../elements/NumberInput2Controller';
-import { Select2 } from '../elements/Select2';
-import { usePanelPreferences } from '../hooks/usePanelPreferences';
-import { formatNumber } from '../utility/formatNumber';
+import { useChartData } from '../context/ChartContext.js';
+import { useDispatch } from '../context/DispatchContext.js';
+import ActionButtons from '../elements/ActionButtons.js';
+import type { LabelStyle } from '../elements/Label.js';
+import Label from '../elements/Label.js';
+import { NumberInput2Controller } from '../elements/NumberInput2Controller.js';
+import { Select2 } from '../elements/Select2.js';
+import { usePanelPreferences } from '../hooks/usePanelPreferences.js';
+import { formatNumber } from '../utility/formatNumber.js';
 
 type Shape = NonNullable<Peak1D['shape']>;
 
diff --git a/src/component/modal/ExportAsJcampModal.tsx b/src/component/modal/ExportAsJcampModal.tsx
index 52c8a7d9f..bd5b3080d 100644
--- a/src/component/modal/ExportAsJcampModal.tsx
+++ b/src/component/modal/ExportAsJcampModal.tsx
@@ -1,15 +1,17 @@
 /** @jsxImportSource @emotion/react */
 import { Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
 import { css } from '@emotion/react';
-import { Spectrum } from 'nmr-load-save';
+import type { Spectrum } from 'nmr-load-save';
 import { useRef } from 'react';
 
-import { DataExportStage, exportAsJcamp } from '../../data/SpectraManager';
-import { useToaster } from '../context/ToasterContext';
-import ActionButtons from '../elements/ActionButtons';
-import Label, { LabelStyle } from '../elements/Label';
-import { Select2 } from '../elements/Select2';
-import useSpectrum from '../hooks/useSpectrum';
+import type { DataExportStage } from '../../data/SpectraManager.js';
+import { exportAsJcamp } from '../../data/SpectraManager.js';
+import { useToaster } from '../context/ToasterContext.js';
+import ActionButtons from '../elements/ActionButtons.js';
+import type { LabelStyle } from '../elements/Label.js';
+import Label from '../elements/Label.js';
+import { Select2 } from '../elements/Select2.js';
+import useSpectrum from '../hooks/useSpectrum.js';
 
 interface ExportDataTypeItem {
   label: string;
diff --git a/src/component/modal/ImportPublicationStringModal.tsx b/src/component/modal/ImportPublicationStringModal.tsx
index ebc9d08f5..1db98d66b 100644
--- a/src/component/modal/ImportPublicationStringModal.tsx
+++ b/src/component/modal/ImportPublicationStringModal.tsx
@@ -1,20 +1,22 @@
 import {
+  Button,
   Dialog,
   DialogBody,
   DialogFooter,
   TextArea,
-  Button,
 } from '@blueprintjs/core';
-import { FifoLogger, LogEntry } from 'fifo-logger';
-import debounce from 'lodash/debounce';
+import type { LogEntry } from 'fifo-logger';
+import { FifoLogger } from 'fifo-logger';
+import debounce from 'lodash/debounce.js';
 import { resurrect } from 'nmr-processing';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 
-import { useDispatch } from '../context/DispatchContext';
-import { useToaster } from '../context/ToasterContext';
-import { GroupPane } from '../elements/GroupPane';
-import ReactTable, { Column } from '../elements/ReactTable/ReactTable';
+import { useDispatch } from '../context/DispatchContext.js';
+import { useToaster } from '../context/ToasterContext.js';
+import { GroupPane } from '../elements/GroupPane.js';
+import type { Column } from '../elements/ReactTable/ReactTable.js';
+import ReactTable from '../elements/ReactTable/ReactTable.js';
 
 interface InnerImportPublicationStringModalProps {
   onClose: () => void;
diff --git a/src/component/modal/LoadJCAMPModal.tsx b/src/component/modal/LoadJCAMPModal.tsx
index 4d2ad4aa4..551a8269f 100644
--- a/src/component/modal/LoadJCAMPModal.tsx
+++ b/src/component/modal/LoadJCAMPModal.tsx
@@ -6,10 +6,11 @@ import { readFromWebSource } from 'nmr-load-save';
 import { useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 
-import { useDispatch } from '../context/DispatchContext';
-import { useToaster } from '../context/ToasterContext';
-import { Input2Controller } from '../elements/Input2Controller';
-import Label, { LabelStyle } from '../elements/Label';
+import { useDispatch } from '../context/DispatchContext.js';
+import { useToaster } from '../context/ToasterContext.js';
+import { Input2Controller } from '../elements/Input2Controller.js';
+import type { LabelStyle } from '../elements/Label.js';
+import Label from '../elements/Label.js';
 
 const allowedExtensions = new Set(['dx', 'jdx', 'jcamp']);
 
diff --git a/src/component/modal/LogsHistoryModal.tsx b/src/component/modal/LogsHistoryModal.tsx
index 4ce80ee14..9d33e7262 100644
--- a/src/component/modal/LogsHistoryModal.tsx
+++ b/src/component/modal/LogsHistoryModal.tsx
@@ -1,17 +1,18 @@
 /** @jsxImportSource @emotion/react */
 import { Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
 import { css } from '@emotion/react';
-import { LogEntry } from 'fifo-logger';
+import type { LogEntry } from 'fifo-logger';
 import { useMemo } from 'react';
 import { FaRegTrashAlt } from 'react-icons/fa';
 import { IoBugOutline } from 'react-icons/io5';
 import { ObjectInspector } from 'react-inspector';
 import { useOnOff } from 'react-science/ui';
 
-import { useLogger } from '../context/LoggerContext';
-import Button from '../elements/Button';
-import { ColumnWrapper } from '../elements/ColumnWrapper';
-import ReactTable, { Column } from '../elements/ReactTable/ReactTable';
+import { useLogger } from '../context/LoggerContext.js';
+import Button from '../elements/Button.js';
+import { ColumnWrapper } from '../elements/ColumnWrapper.js';
+import type { Column } from '../elements/ReactTable/ReactTable.js';
+import ReactTable from '../elements/ReactTable/ReactTable.js';
 
 const logsDataFormat = new Intl.DateTimeFormat('default', {
   hour: 'numeric',
diff --git a/src/component/modal/MoleculeStructureEditorModal.tsx b/src/component/modal/MoleculeStructureEditorModal.tsx
index f2065360b..6b6c4089f 100644
--- a/src/component/modal/MoleculeStructureEditorModal.tsx
+++ b/src/component/modal/MoleculeStructureEditorModal.tsx
@@ -3,13 +3,14 @@ import { Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 import { Molecule } from 'openchemlib/full';
 import { TopicMolecule } from 'openchemlib-utils';
-import { useState, useEffect, useCallback, useMemo } from 'react';
-import { StructureEditor, IStructureEditorProps } from 'react-ocl/full';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { StructureEditorProps } from 'react-ocl/full';
+import { StructureEditor } from 'react-ocl/full';
 import { useOnOff } from 'react-science/ui';
 
-import { StateMoleculeExtended } from '../../data/molecules/Molecule';
-import { useDispatch } from '../context/DispatchContext';
-import ActionButtons from '../elements/ActionButtons';
+import type { StateMoleculeExtended } from '../../data/molecules/Molecule.js';
+import { useDispatch } from '../context/DispatchContext.js';
+import ActionButtons from '../elements/ActionButtons.js';
 
 interface MoleculeStructureEditorModalProps {
   onClose?: (element?: string) => void;
@@ -51,7 +52,7 @@ function MoleculeStructureEditorModal(
     }
   }, [initialEnhancedMolfile]);
 
-  const cb = useCallback<Exclude<IStructureEditorProps['onChange'], undefined>>(
+  const cb = useCallback<Exclude<StructureEditorProps['onChange'], undefined>>(
     (newMolfile, molecule) => {
       if (molecule.getAllAtoms() === 0) {
         setMolfile(null);
diff --git a/src/component/modal/MultipletAnalysisModal.tsx b/src/component/modal/MultipletAnalysisModal.tsx
index 51f4e1c09..25522bad3 100644
--- a/src/component/modal/MultipletAnalysisModal.tsx
+++ b/src/component/modal/MultipletAnalysisModal.tsx
@@ -3,11 +3,11 @@ import { Dialog, DialogBody } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 import { xGetFromToIndex, xyToXYObject } from 'ml-spectra-processing';
 import { analyseMultiplet } from 'multiplet-analysis';
-import { ActiveSpectrum, Spectrum } from 'nmr-load-save';
-import { useState, useEffect } from 'react';
-import { Plot, LineSeries, Axis } from 'react-plot';
+import type { ActiveSpectrum, Spectrum } from 'nmr-load-save';
+import { useEffect, useState } from 'react';
+import { Axis, LineSeries, Plot } from 'react-plot';
 
-import { isSpectrum2D } from '../../data/data2d/Spectrum2D';
+import { isSpectrum2D } from '../../data/data2d/Spectrum2D/index.js';
 
 const styles = css`
   background-color: white;
diff --git a/src/component/modal/PredictSpectraModal.tsx b/src/component/modal/PredictSpectraModal.tsx
index 2bf01faf7..b241f83a8 100644
--- a/src/component/modal/PredictSpectraModal.tsx
+++ b/src/component/modal/PredictSpectraModal.tsx
@@ -2,22 +2,22 @@
 import { Checkbox, Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 import { SvgNmrFt } from 'cheminfo-font';
-import { useCallback, useRef, useState, useMemo } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { Toolbar, useOnOff } from 'react-science/ui';
 
 import {
   getDefaultPredictionOptions,
   predictSpectra,
-} from '../../data/PredictionManager';
-import { StateMoleculeExtended } from '../../data/molecules/Molecule';
-import { useChartData } from '../context/ChartContext';
-import { useDispatch } from '../context/DispatchContext';
-import { useLogger } from '../context/LoggerContext';
-import { useToaster } from '../context/ToasterContext';
-import Button from '../elements/Button';
-import { SettingsRef } from '../panels/extra/utilities/settingImperativeHandle';
-import PredictionPreferences from '../panels/predictionPanel/PredictionOptionsPanel';
-import { useStateWithLocalStorage } from '../utility/LocalStorage';
+} from '../../data/PredictionManager.js';
+import type { StateMoleculeExtended } from '../../data/molecules/Molecule.js';
+import { useChartData } from '../context/ChartContext.js';
+import { useDispatch } from '../context/DispatchContext.js';
+import { useLogger } from '../context/LoggerContext.js';
+import { useToaster } from '../context/ToasterContext.js';
+import Button from '../elements/Button.js';
+import type { SettingsRef } from '../panels/extra/utilities/settingImperativeHandle.js';
+import PredictionPreferences from '../panels/predictionPanel/PredictionOptionsPanel.js';
+import { useStateWithLocalStorage } from '../utility/LocalStorage.js';
 
 const styles = css`
   background-color: white;
diff --git a/src/component/modal/SaveAsModal.tsx b/src/component/modal/SaveAsModal.tsx
index f1f192a67..f8a455a2d 100644
--- a/src/component/modal/SaveAsModal.tsx
+++ b/src/component/modal/SaveAsModal.tsx
@@ -10,12 +10,13 @@ import {
 import { css } from '@emotion/react';
 import { Controller, useForm } from 'react-hook-form';
 
-import { DataExportOptions } from '../../data/SpectraManager';
-import { useChartData } from '../context/ChartContext';
-import ActionButtons from '../elements/ActionButtons';
-import { Input2Controller } from '../elements/Input2Controller';
-import Label, { LabelStyle } from '../elements/Label';
-import { useExport } from '../hooks/useExport';
+import { DataExportOptions } from '../../data/SpectraManager.js';
+import { useChartData } from '../context/ChartContext.js';
+import ActionButtons from '../elements/ActionButtons.js';
+import { Input2Controller } from '../elements/Input2Controller.js';
+import type { LabelStyle } from '../elements/Label.js';
+import Label from '../elements/Label.js';
+import { useExport } from '../hooks/useExport.js';
 
 const INITIAL_VALUE = {
   name: '',
diff --git a/src/component/modal/aboutUs/AboutUsModal.tsx b/src/component/modal/aboutUs/AboutUsModal.tsx
index f37c32c86..fd7d70677 100644
--- a/src/component/modal/aboutUs/AboutUsModal.tsx
+++ b/src/component/modal/aboutUs/AboutUsModal.tsx
@@ -4,10 +4,10 @@ import { css } from '@emotion/react';
 import { SvgLogoNmrium } from 'cheminfo-font';
 import { Toolbar, useOnOff } from 'react-science/ui';
 
-import versionInfo from '../../../versionInfo';
-import Logo from '../../elements/Logo';
+import versionInfo from '../../../versionInfo.js';
+import Logo from '../../elements/Logo.js';
 
-import AboutUsZakodium from './AboutUsZakodium';
+import AboutUsZakodium from './AboutUsZakodium.js';
 
 const styles = css`
   display: flex;
diff --git a/src/component/modal/aboutUs/AboutUsZakodium.tsx b/src/component/modal/aboutUs/AboutUsZakodium.tsx
index d4b61a4f1..aa9830013 100644
--- a/src/component/modal/aboutUs/AboutUsZakodium.tsx
+++ b/src/component/modal/aboutUs/AboutUsZakodium.tsx
@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
-import { MouseEvent } from 'react';
+import type { MouseEvent } from 'react';
 import { Button, useOnOff } from 'react-science/ui';
 
-import { useDispatch } from '../../context/DispatchContext';
+import { useDispatch } from '../../context/DispatchContext.js';
 
 export default function AboutUsZakodium() {
   const [isSecretOpen, openSecret] = useOnOff();
diff --git a/src/component/modal/changeSum/ChangeSumModal.tsx b/src/component/modal/changeSum/ChangeSumModal.tsx
index a24274ed6..6e8adfbec 100644
--- a/src/component/modal/changeSum/ChangeSumModal.tsx
+++ b/src/component/modal/changeSum/ChangeSumModal.tsx
@@ -2,10 +2,8 @@ import { Dialog } from '@blueprintjs/core';
 import { SvgNmrSum } from 'cheminfo-font';
 import { Toolbar, useOnOff } from 'react-science/ui';
 
-import {
-  ChangeSumModalContents,
-  ChangeSumModalContentsProps,
-} from './ChangeSumModalContents';
+import type { ChangeSumModalContentsProps } from './ChangeSumModalContents.js';
+import { ChangeSumModalContents } from './ChangeSumModalContents.js';
 
 export interface ChangeSumModalProps
   extends Omit<ChangeSumModalContentsProps, 'onClose'> {
diff --git a/src/component/modal/changeSum/ChangeSumModalContents.tsx b/src/component/modal/changeSum/ChangeSumModalContents.tsx
index b6e613f1a..e87a64dff 100644
--- a/src/component/modal/changeSum/ChangeSumModalContents.tsx
+++ b/src/component/modal/changeSum/ChangeSumModalContents.tsx
@@ -3,15 +3,15 @@ import { Button, DialogBody, DialogFooter, Tab, Tabs } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { SumOptions } from 'nmr-load-save';
+import type { SumOptions } from 'nmr-load-save';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 
-import { usePreferences } from '../../context/PreferencesContext';
-import { NumberInput2Controller } from '../../elements/NumberInput2Controller';
+import { usePreferences } from '../../context/PreferencesContext.js';
+import { NumberInput2Controller } from '../../elements/NumberInput2Controller.js';
 
-import SelectMolecule from './SelectMolecule';
+import SelectMolecule from './SelectMolecule.js';
 
 function getValidationSchema(option: SumSetOption) {
   if (option === 'auto') {
diff --git a/src/component/modal/changeSum/SelectMolecule.tsx b/src/component/modal/changeSum/SelectMolecule.tsx
index 6759729ef..81db1452c 100644
--- a/src/component/modal/changeSum/SelectMolecule.tsx
+++ b/src/component/modal/changeSum/SelectMolecule.tsx
@@ -1,11 +1,12 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { useCallback, useState, useEffect, useMemo } from 'react';
-import { ControllerProps, FieldValues, useController } from 'react-hook-form';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { ControllerProps, FieldValues } from 'react-hook-form';
+import { useController } from 'react-hook-form';
 
-import getAtom from '../../../data/utilities/getAtom';
-import { useChartData } from '../../context/ChartContext';
-import MoleculeSelection from '../../elements/MoleculeSelection';
+import getAtom from '../../../data/utilities/getAtom.js';
+import { useChartData } from '../../context/ChartContext.js';
+import MoleculeSelection from '../../elements/MoleculeSelection.js';
 
 const styles = css`
   .molecule-container {
diff --git a/src/component/modal/editRange/EditRangeModal.tsx b/src/component/modal/editRange/EditRangeModal.tsx
index 035d8a8c6..534c57b68 100644
--- a/src/component/modal/editRange/EditRangeModal.tsx
+++ b/src/component/modal/editRange/EditRangeModal.tsx
@@ -3,30 +3,25 @@ import { Button, DialogBody, DialogFooter } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { v4 } from '@lukeed/uuid';
-import { Spectrum1D } from 'nmr-load-save';
-import {
-  Jcoupling,
-  Range,
-  Signal1D,
-  splitPatterns,
-  translateMultiplet,
-} from 'nmr-processing';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { Jcoupling, Range, Signal1D } from 'nmr-processing';
+import { splitPatterns, translateMultiplet } from 'nmr-processing';
 import { useCallback, useEffect, useRef } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { FaSearchPlus } from 'react-icons/fa';
 
-import { useChartData } from '../../context/ChartContext';
-import { useDispatch } from '../../context/DispatchContext';
-import { DialogProps } from '../../elements/DialogManager';
-import { DraggableDialog } from '../../elements/DraggableDialog';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
-import useSpectrum from '../../hooks/useSpectrum';
-import useEditRangeModal from '../../panels/RangesPanel/hooks/useEditRangeModal';
-import { hasCouplingConstant } from '../../panels/extra/utilities/MultiplicityUtilities';
-import { formatNumber } from '../../utility/formatNumber';
-
-import SignalsContent from './forms/components/SignalsContent';
-import editRangeFormValidation from './forms/validation/EditRangeValidation';
+import { useChartData } from '../../context/ChartContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import type { DialogProps } from '../../elements/DialogManager.js';
+import { DraggableDialog } from '../../elements/DraggableDialog.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
+import useEditRangeModal from '../../panels/RangesPanel/hooks/useEditRangeModal.js';
+import { hasCouplingConstant } from '../../panels/extra/utilities/MultiplicityUtilities.js';
+import { formatNumber } from '../../utility/formatNumber.js';
+
+import SignalsContent from './forms/components/SignalsContent.js';
+import editRangeFormValidation from './forms/validation/EditRangeValidation.js';
 
 const styles = css`
   background-color: white;
diff --git a/src/component/modal/editRange/forms/components/DeltaInput.tsx b/src/component/modal/editRange/forms/components/DeltaInput.tsx
index c0d331b8a..618102e6f 100644
--- a/src/component/modal/editRange/forms/components/DeltaInput.tsx
+++ b/src/component/modal/editRange/forms/components/DeltaInput.tsx
@@ -1,7 +1,7 @@
 import { translateMultiplet } from 'nmr-processing';
 import { useFormContext } from 'react-hook-form';
 
-import { NumberInput2Controller } from '../../../../elements/NumberInput2Controller';
+import { NumberInput2Controller } from '../../../../elements/NumberInput2Controller.js';
 
 interface DeltaInputProps {
   signal: any;
diff --git a/src/component/modal/editRange/forms/components/InfoBlock.tsx b/src/component/modal/editRange/forms/components/InfoBlock.tsx
index 5da67f6b3..38d3ef3e5 100644
--- a/src/component/modal/editRange/forms/components/InfoBlock.tsx
+++ b/src/component/modal/editRange/forms/components/InfoBlock.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { useWatch } from 'react-hook-form';
 
 const styles: Record<'container' | 'infoText' | 'errorText', CSSProperties> = {
diff --git a/src/component/modal/editRange/forms/components/NewSignalTab.tsx b/src/component/modal/editRange/forms/components/NewSignalTab.tsx
index 2bdbce2d8..6e54fb3e4 100644
--- a/src/component/modal/editRange/forms/components/NewSignalTab.tsx
+++ b/src/component/modal/editRange/forms/components/NewSignalTab.tsx
@@ -1,15 +1,16 @@
 import { Button } from '@blueprintjs/core';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { translateMultiplet } from 'nmr-processing';
-import { CSSProperties, useEffect } from 'react';
+import type { CSSProperties } from 'react';
+import { useEffect } from 'react';
 import { useForm, useFormContext, useWatch } from 'react-hook-form';
 import * as Yup from 'yup';
 
-import { useChartData } from '../../../../context/ChartContext';
-import { NumberInput2Controller } from '../../../../elements/NumberInput2Controller';
-import { usePanelPreferences } from '../../../../hooks/usePanelPreferences';
-import { useEvent } from '../../../../utility/Events';
-import { formatNumber } from '../../../../utility/formatNumber';
+import { useChartData } from '../../../../context/ChartContext.js';
+import { NumberInput2Controller } from '../../../../elements/NumberInput2Controller.js';
+import { usePanelPreferences } from '../../../../hooks/usePanelPreferences.js';
+import { useEvent } from '../../../../utility/Events.js';
+import { formatNumber } from '../../../../utility/formatNumber.js';
 
 const styles: Record<
   'container' | 'innerContainer' | 'infoText',
diff --git a/src/component/modal/editRange/forms/components/SignalTab.tsx b/src/component/modal/editRange/forms/components/SignalTab.tsx
index 24384fdf5..b564c15af 100644
--- a/src/component/modal/editRange/forms/components/SignalTab.tsx
+++ b/src/component/modal/editRange/forms/components/SignalTab.tsx
@@ -1,10 +1,11 @@
 /** @jsxImportSource @emotion/react */
 import { Tab, Tabs } from '@blueprintjs/core';
 import { css } from '@emotion/react';
-import { CSSProperties, memo } from 'react';
+import type { CSSProperties } from 'react';
+import { memo } from 'react';
 
-import { SignalJCouplingsTable } from './signal-tabs/SignalJCouplingsTable';
-import { SignalPeaksTable } from './signal-tabs/SignalPeaksTable';
+import { SignalJCouplingsTable } from './signal-tabs/SignalJCouplingsTable.js';
+import { SignalPeaksTable } from './signal-tabs/SignalPeaksTable.js';
 
 const style: CSSProperties = {
   borderSpacing: '0',
diff --git a/src/component/modal/editRange/forms/components/SignalsContent.tsx b/src/component/modal/editRange/forms/components/SignalsContent.tsx
index de092b3f5..28d66a630 100644
--- a/src/component/modal/editRange/forms/components/SignalsContent.tsx
+++ b/src/component/modal/editRange/forms/components/SignalsContent.tsx
@@ -1,16 +1,16 @@
 /** @jsxImportSource @emotion/react */
 import { Tab, Tabs } from '@blueprintjs/core';
-import { Range } from 'nmr-processing';
-import { useCallback, useMemo, memo, useEffect } from 'react';
+import type { Range } from 'nmr-processing';
+import { memo, useCallback, useEffect, useMemo } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { FaPlus } from 'react-icons/fa';
 
-import { TabTitle } from '../../../../elements/TabTitle';
+import { TabTitle } from '../../../../elements/TabTitle.js';
 
-import { DeltaInput } from './DeltaInput';
-import { InfoBlock } from './InfoBlock';
-import { NewSignalTab } from './NewSignalTab';
-import SignalTab from './SignalTab';
+import { DeltaInput } from './DeltaInput.js';
+import { InfoBlock } from './InfoBlock.js';
+import { NewSignalTab } from './NewSignalTab.js';
+import SignalTab from './SignalTab.js';
 
 interface SignalsFormProps {
   range: Range;
diff --git a/src/component/modal/editRange/forms/components/signal-tabs/SignalJCouplingsTable.tsx b/src/component/modal/editRange/forms/components/signal-tabs/SignalJCouplingsTable.tsx
index 0fc357cbd..de3dc6eeb 100644
--- a/src/component/modal/editRange/forms/components/signal-tabs/SignalJCouplingsTable.tsx
+++ b/src/component/modal/editRange/forms/components/signal-tabs/SignalJCouplingsTable.tsx
@@ -1,21 +1,22 @@
 import { Button, Callout, Classes } from '@blueprintjs/core';
-import lodashGet from 'lodash/get';
-import { Jcoupling, Peak1D, translateMultiplet } from 'nmr-processing';
-import { CSSProperties, useCallback, useMemo, useRef } from 'react';
+import lodashGet from 'lodash/get.js';
+import type { Jcoupling, Peak1D } from 'nmr-processing';
+import { translateMultiplet } from 'nmr-processing';
+import type { CSSProperties } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { FaPlus, FaRegTrashAlt } from 'react-icons/fa';
 import { Toolbar } from 'react-science/ui';
 
-import { multiplets } from '../../../../../../data/constants/Multiplets';
-import { isSpectrum1D } from '../../../../../../data/data1d/Spectrum1D';
-import { NumberInput2Controller } from '../../../../../elements/NumberInput2Controller';
-import ReactTable, {
-  Column,
-} from '../../../../../elements/ReactTable/ReactTable';
-import { Select2Controller } from '../../../../../elements/Select2Controller';
-import useSpectrum from '../../../../../hooks/useSpectrum';
-import { hasCouplingConstant } from '../../../../../panels/extra/utilities/MultiplicityUtilities';
-import { useEvent } from '../../../../../utility/Events';
+import { multiplets } from '../../../../../../data/constants/Multiplets.js';
+import { isSpectrum1D } from '../../../../../../data/data1d/Spectrum1D/index.js';
+import { NumberInput2Controller } from '../../../../../elements/NumberInput2Controller.js';
+import type { Column } from '../../../../../elements/ReactTable/ReactTable.js';
+import ReactTable from '../../../../../elements/ReactTable/ReactTable.js';
+import { Select2Controller } from '../../../../../elements/Select2Controller.js';
+import useSpectrum from '../../../../../hooks/useSpectrum.js';
+import { hasCouplingConstant } from '../../../../../panels/extra/utilities/MultiplicityUtilities.js';
+import { useEvent } from '../../../../../utility/Events.js';
 
 const styles: Record<'input' | 'select' | 'column', CSSProperties> = {
   input: {
diff --git a/src/component/modal/editRange/forms/components/signal-tabs/SignalPeaksTable.tsx b/src/component/modal/editRange/forms/components/signal-tabs/SignalPeaksTable.tsx
index c1ee985dd..f6a8e6def 100644
--- a/src/component/modal/editRange/forms/components/signal-tabs/SignalPeaksTable.tsx
+++ b/src/component/modal/editRange/forms/components/signal-tabs/SignalPeaksTable.tsx
@@ -1,19 +1,20 @@
 import { Button, Classes } from '@blueprintjs/core';
 import { v4 } from '@lukeed/uuid';
 import { xFindClosestIndex } from 'ml-spectra-processing';
-import { Spectrum1D } from 'nmr-load-save';
-import { Peak1D, getShiftX } from 'nmr-processing';
-import { CSSProperties, useCallback, useMemo, useRef } from 'react';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { Peak1D } from 'nmr-processing';
+import { getShiftX } from 'nmr-processing';
+import type { CSSProperties } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { FaPlus, FaRegTrashAlt } from 'react-icons/fa';
 import { Toolbar } from 'react-science/ui';
 
-import { NumberInput2Controller } from '../../../../../elements/NumberInput2Controller';
-import ReactTable, {
-  Column,
-} from '../../../../../elements/ReactTable/ReactTable';
-import useSpectrum from '../../../../../hooks/useSpectrum';
-import { useEvent } from '../../../../../utility/Events';
+import { NumberInput2Controller } from '../../../../../elements/NumberInput2Controller.js';
+import type { Column } from '../../../../../elements/ReactTable/ReactTable.js';
+import ReactTable from '../../../../../elements/ReactTable/ReactTable.js';
+import useSpectrum from '../../../../../hooks/useSpectrum.js';
+import { useEvent } from '../../../../../utility/Events.js';
 
 const styles: Record<'input' | 'column', CSSProperties> = {
   input: {
diff --git a/src/component/modal/editRange/forms/validation/EditRangeValidation.ts b/src/component/modal/editRange/forms/validation/EditRangeValidation.ts
index 3a5095cc1..131c6530c 100644
--- a/src/component/modal/editRange/forms/validation/EditRangeValidation.ts
+++ b/src/component/modal/editRange/forms/validation/EditRangeValidation.ts
@@ -1,6 +1,6 @@
 import * as Yup from 'yup';
 
-import { hasCouplingConstant } from '../../../../panels/extra/utilities/MultiplicityUtilities';
+import { hasCouplingConstant } from '../../../../panels/extra/utilities/MultiplicityUtilities.js';
 
 const editRangeFormValidation = Yup.object().shape({
   signals: Yup.array().of(
diff --git a/src/component/modal/editZone/EditZoneModal.tsx b/src/component/modal/editZone/EditZoneModal.tsx
index 005893939..e62f84d4f 100644
--- a/src/component/modal/editZone/EditZoneModal.tsx
+++ b/src/component/modal/editZone/EditZoneModal.tsx
@@ -2,20 +2,20 @@
 import { Button, DialogBody, DialogFooter } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { FromTo } from 'cheminfo-types';
-import { Signal2D } from 'nmr-processing';
+import type { FromTo } from 'cheminfo-types';
+import type { Signal2D } from 'nmr-processing';
 import { FormProvider, useForm } from 'react-hook-form';
 import { FaSearchPlus } from 'react-icons/fa';
 import * as Yup from 'yup';
 
-import DefaultPathLengths from '../../../data/constants/DefaultPathLengths';
-import { DialogProps } from '../../elements/DialogManager';
-import { DraggableDialog } from '../../elements/DraggableDialog';
-import { ZoneData } from '../../panels/ZonesPanel/hooks/useMapZones';
-import { useZoneActions } from '../../panels/ZonesPanel/hooks/useZoneActions';
+import DefaultPathLengths from '../../../data/constants/DefaultPathLengths.js';
+import type { DialogProps } from '../../elements/DialogManager.js';
+import { DraggableDialog } from '../../elements/DraggableDialog.js';
+import type { ZoneData } from '../../panels/ZonesPanel/hooks/useMapZones.js';
+import { useZoneActions } from '../../panels/ZonesPanel/hooks/useZoneActions.js';
 
-import { SignalsForm } from './SignalsForm';
-import { isDefaultPathLength } from './validation/isDefaultPathLength';
+import { SignalsForm } from './SignalsForm.js';
+import { isDefaultPathLength } from './validation/isDefaultPathLength.js';
 
 interface FormData {
   activeTab: string;
diff --git a/src/component/modal/editZone/SignalsForm.tsx b/src/component/modal/editZone/SignalsForm.tsx
index 0316ea616..91a3a612c 100644
--- a/src/component/modal/editZone/SignalsForm.tsx
+++ b/src/component/modal/editZone/SignalsForm.tsx
@@ -2,11 +2,11 @@
 import { Tab, Tabs } from '@blueprintjs/core';
 import { useFormContext, useWatch } from 'react-hook-form';
 
-import DefaultPathLengths from '../../../data/constants/DefaultPathLengths';
-import IsotopesViewer from '../../elements/IsotopesViewer';
-import Label from '../../elements/Label';
-import { NumberInput2Controller } from '../../elements/NumberInput2Controller';
-import { TabTitle } from '../../elements/TabTitle';
+import DefaultPathLengths from '../../../data/constants/DefaultPathLengths.js';
+import IsotopesViewer from '../../elements/IsotopesViewer.js';
+import Label from '../../elements/Label.js';
+import { NumberInput2Controller } from '../../elements/NumberInput2Controller.js';
+import { TabTitle } from '../../elements/TabTitle.js';
 
 export function SignalsForm() {
   const {
diff --git a/src/component/modal/editZone/validation/isDefaultPathLength.ts b/src/component/modal/editZone/validation/isDefaultPathLength.ts
index 770ce1289..60f909daa 100644
--- a/src/component/modal/editZone/validation/isDefaultPathLength.ts
+++ b/src/component/modal/editZone/validation/isDefaultPathLength.ts
@@ -1,6 +1,6 @@
-import { FromTo } from 'cheminfo-types';
+import type { FromTo } from 'cheminfo-types';
 
-import DefaultPathLengths from '../../../../data/constants/DefaultPathLengths';
+import DefaultPathLengths from '../../../../data/constants/DefaultPathLengths.js';
 
 export function isDefaultPathLength(
   pathLength: FromTo,
diff --git a/src/component/modal/metaImportation/MetaImportationModal.tsx b/src/component/modal/metaImportation/MetaImportationModal.tsx
index af70fa127..ce90ced8a 100644
--- a/src/component/modal/metaImportation/MetaImportationModal.tsx
+++ b/src/component/modal/metaImportation/MetaImportationModal.tsx
@@ -1,10 +1,10 @@
 /** @jsxImportSource @emotion/react */
 import { Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { ParseResult } from 'papaparse';
-import { CSSProperties, useState, useMemo, useEffect } from 'react';
-import type { FileWithPath } from 'react-dropzone';
-import { FileError } from 'react-dropzone';
+import type { ParseResult } from 'papaparse';
+import type { CSSProperties } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import type { FileError, FileWithPath } from 'react-dropzone';
 import { useForm } from 'react-hook-form';
 import { DropZone } from 'react-science/ui';
 import * as Yup from 'yup';
@@ -12,22 +12,23 @@ import * as Yup from 'yup';
 import {
   isMetaFile,
   linkMetaWithSpectra,
+  mapErrors,
   parseMetaFile,
   TargetPathError,
-  mapErrors,
-} from '../../../data/parseMeta';
-import { useChartData } from '../../context/ChartContext';
-import { useDispatch } from '../../context/DispatchContext';
-import { useToaster } from '../../context/ToasterContext';
-import Button from '../../elements/Button';
-import { Input2Controller } from '../../elements/Input2Controller';
-import Label from '../../elements/Label';
-import ReactTable, { Column } from '../../elements/ReactTable/ReactTable';
-import { Select2Controller } from '../../elements/Select2Controller';
-import { convertPathArrayToString } from '../../utility/convertPathArrayToString';
-import { getSpectraObjectPaths } from '../../utility/getSpectraObjectPaths';
+} from '../../../data/parseMeta/index.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { useToaster } from '../../context/ToasterContext.js';
+import Button from '../../elements/Button.js';
+import { Input2Controller } from '../../elements/Input2Controller.js';
+import Label from '../../elements/Label.js';
+import type { Column } from '../../elements/ReactTable/ReactTable.js';
+import ReactTable from '../../elements/ReactTable/ReactTable.js';
+import { Select2Controller } from '../../elements/Select2Controller.js';
+import { convertPathArrayToString } from '../../utility/convertPathArrayToString.js';
+import { getSpectraObjectPaths } from '../../utility/getSpectraObjectPaths.js';
 
-import { mapColumnToSelectItems } from './utils/mapColumnToSelectItems';
+import { mapColumnToSelectItems } from './utils/mapColumnToSelectItems.js';
 
 const styles: Record<'container' | 'column', CSSProperties> = {
   container: {
diff --git a/src/component/modal/setting/GeneralSettings.tsx b/src/component/modal/setting/GeneralSettings.tsx
index b96d42607..c8356ccaf 100644
--- a/src/component/modal/setting/GeneralSettings.tsx
+++ b/src/component/modal/setting/GeneralSettings.tsx
@@ -1,16 +1,16 @@
 /** @jsxImportSource @emotion/react */
 import {
+  Classes,
   Dialog,
   DialogBody,
   DialogFooter,
-  Classes,
-  Tabs,
   Tab,
+  Tabs,
 } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { Workspace } from 'nmr-load-save';
+import type { Workspace } from 'nmr-load-save';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import {
   FormProvider,
@@ -21,37 +21,36 @@ import {
 import { FaBolt, FaPaste, FaRegCopy, FaWrench } from 'react-icons/fa';
 import { Button, Toolbar, useOnOff } from 'react-science/ui';
 
-import { ClipboardFallbackModal } from '../../../utils/clipboard/clipboardComponents';
-import { useClipboard } from '../../../utils/clipboard/clipboardHooks';
+import { ClipboardFallbackModal } from '../../../utils/clipboard/clipboardComponents.js';
+import { useClipboard } from '../../../utils/clipboard/clipboardHooks.js';
 import {
   usePreferences,
   useWorkspacesList,
-} from '../../context/PreferencesContext';
-import { useToaster } from '../../context/ToasterContext';
-import ActionButtons from '../../elements/ActionButtons';
-import Label from '../../elements/Label';
-import DropDownButton, {
-  DropDownListItem,
-} from '../../elements/dropDownButton/DropDownButton';
-import { useSaveSettings } from '../../hooks/useSaveSettings';
-import { useWorkspaceAction } from '../../hooks/useWorkspaceAction';
-import { WorkspaceWithSource } from '../../reducer/preferences/preferencesReducer';
-import { getPreferencesByWorkspace } from '../../reducer/preferences/utilities/getPreferencesByWorkspace';
-import PredefinedWorkspaces from '../../workspaces';
-
-import WorkspaceItem from './WorkspaceItem';
-import DatabasesTabContent from './settings-tabs/DatabasesTabContent';
-import DisplayTabContent from './settings-tabs/DisplayTabContent';
-import { ExportTabContent } from './settings-tabs/ExportTabContent';
-import { ExternalAPIsTabContent } from './settings-tabs/ExternalAPIsTabContent';
-import GeneralTabContent from './settings-tabs/GeneralTabContent';
-import ImportationFiltersTabContent from './settings-tabs/ImportationFiltersTabContent';
-import InfoBlockTabContent from './settings-tabs/InfoBlockTabContent';
-import NucleiTabContent from './settings-tabs/NucleiTabContent';
-import OnLoadProcessingTabContent from './settings-tabs/OnLoadProcessingTabContent';
-import SpectraColorsTabContent from './settings-tabs/SpectraColorsTabContent';
-import ToolsTabContent from './settings-tabs/ToolsTabContent';
-import { validation } from './settingsValidation';
+} from '../../context/PreferencesContext.js';
+import { useToaster } from '../../context/ToasterContext.js';
+import ActionButtons from '../../elements/ActionButtons.js';
+import Label from '../../elements/Label.js';
+import type { DropDownListItem } from '../../elements/dropDownButton/DropDownButton.js';
+import DropDownButton from '../../elements/dropDownButton/DropDownButton.js';
+import { useSaveSettings } from '../../hooks/useSaveSettings.js';
+import { useWorkspaceAction } from '../../hooks/useWorkspaceAction.js';
+import type { WorkspaceWithSource } from '../../reducer/preferences/preferencesReducer.js';
+import { getPreferencesByWorkspace } from '../../reducer/preferences/utilities/getPreferencesByWorkspace.js';
+import PredefinedWorkspaces from '../../workspaces/index.js';
+
+import WorkspaceItem from './WorkspaceItem.js';
+import DatabasesTabContent from './settings-tabs/DatabasesTabContent.js';
+import DisplayTabContent from './settings-tabs/DisplayTabContent.js';
+import { ExportTabContent } from './settings-tabs/ExportTabContent.js';
+import { ExternalAPIsTabContent } from './settings-tabs/ExternalAPIsTabContent.js';
+import GeneralTabContent from './settings-tabs/GeneralTabContent.js';
+import ImportationFiltersTabContent from './settings-tabs/ImportationFiltersTabContent.js';
+import InfoBlockTabContent from './settings-tabs/InfoBlockTabContent.js';
+import NucleiTabContent from './settings-tabs/NucleiTabContent.js';
+import OnLoadProcessingTabContent from './settings-tabs/OnLoadProcessingTabContent.js';
+import SpectraColorsTabContent from './settings-tabs/SpectraColorsTabContent.js';
+import ToolsTabContent from './settings-tabs/ToolsTabContent.js';
+import { validation } from './settingsValidation.js';
 
 export const Section = styled.div`
   display: flex;
diff --git a/src/component/modal/setting/WorkspaceItem.tsx b/src/component/modal/setting/WorkspaceItem.tsx
index b4eb1d3d4..1a1b239c9 100644
--- a/src/component/modal/setting/WorkspaceItem.tsx
+++ b/src/component/modal/setting/WorkspaceItem.tsx
@@ -1,5 +1,6 @@
-import { WorkSpaceSource } from 'nmr-load-save';
-import { CSSProperties, useState } from 'react';
+import type { WorkSpaceSource } from 'nmr-load-save';
+import type { CSSProperties } from 'react';
+import { useState } from 'react';
 import { Button } from 'react-science/ui';
 
 const styles: Record<
diff --git a/src/component/modal/setting/settings-tabs/DatabasesTabContent.tsx b/src/component/modal/setting/settings-tabs/DatabasesTabContent.tsx
index 22611430c..951387f72 100644
--- a/src/component/modal/setting/settings-tabs/DatabasesTabContent.tsx
+++ b/src/component/modal/setting/settings-tabs/DatabasesTabContent.tsx
@@ -2,20 +2,21 @@
 import { Checkbox, Classes, Radio } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 import { v4 } from '@lukeed/uuid';
-import { CustomWorkspaces, Database } from 'nmr-load-save';
+import type { CustomWorkspaces, Database } from 'nmr-load-save';
 import { useCallback, useMemo } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
-import { FaPlus, FaRegTrashAlt, FaLink } from 'react-icons/fa';
+import { FaLink, FaPlus, FaRegTrashAlt } from 'react-icons/fa';
 import { Button } from 'react-science/ui';
 
-import { GroupPane } from '../../../elements/GroupPane';
-import { Input2Controller } from '../../../elements/Input2Controller';
-import ReactTable, { Column } from '../../../elements/ReactTable/ReactTable';
-import type { NMRiumWorkspace } from '../../../main';
-import { WorkspaceWithSource } from '../../../reducer/preferences/preferencesReducer';
-import { getPreferencesByWorkspace } from '../../../reducer/preferences/utilities/getPreferencesByWorkspace';
-import { isGoogleDocument } from '../../../utility/isGoogleDocument';
-import { Section } from '../GeneralSettings';
+import { GroupPane } from '../../../elements/GroupPane.js';
+import { Input2Controller } from '../../../elements/Input2Controller.js';
+import type { Column } from '../../../elements/ReactTable/ReactTable.js';
+import ReactTable from '../../../elements/ReactTable/ReactTable.js';
+import type { NMRiumWorkspace } from '../../../main/index.js';
+import type { WorkspaceWithSource } from '../../../reducer/preferences/preferencesReducer.js';
+import { getPreferencesByWorkspace } from '../../../reducer/preferences/utilities/getPreferencesByWorkspace.js';
+import { isGoogleDocument } from '../../../utility/isGoogleDocument.js';
+import { Section } from '../GeneralSettings.js';
 
 function getKeyPath<T extends keyof Database>(
   index: number,
diff --git a/src/component/modal/setting/settings-tabs/DisplayTabContent.tsx b/src/component/modal/setting/settings-tabs/DisplayTabContent.tsx
index dcf4dffec..96f39de6e 100644
--- a/src/component/modal/setting/settings-tabs/DisplayTabContent.tsx
+++ b/src/component/modal/setting/settings-tabs/DisplayTabContent.tsx
@@ -1,11 +1,11 @@
 import { Checkbox } from '@blueprintjs/core';
-import { NMRiumPanelPreferences } from 'nmr-load-save';
+import type { NMRiumPanelPreferences } from 'nmr-load-save';
 import { useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 
-import ReactTable from '../../../elements/ReactTable/ReactTable';
-import { CustomColumn } from '../../../elements/ReactTable/utility/addCustomColumn';
-import { WorkspaceWithSource } from '../../../reducer/preferences/preferencesReducer';
+import ReactTable from '../../../elements/ReactTable/ReactTable.js';
+import type { CustomColumn } from '../../../elements/ReactTable/utility/addCustomColumn.js';
+import type { WorkspaceWithSource } from '../../../reducer/preferences/preferencesReducer.js';
 
 interface ListItem {
   label: string;
diff --git a/src/component/modal/setting/settings-tabs/ExportTabContent.tsx b/src/component/modal/setting/settings-tabs/ExportTabContent.tsx
index acc697bce..074b837e9 100644
--- a/src/component/modal/setting/settings-tabs/ExportTabContent.tsx
+++ b/src/component/modal/setting/settings-tabs/ExportTabContent.tsx
@@ -7,26 +7,28 @@ import {
   SegmentedControl,
   Tag,
 } from '@blueprintjs/core';
-import {
+import type {
+  AdvanceExportSettings,
+  BasicExportSettings,
   ExportPreferences,
   ExportSettings,
-  BasicExportSettings,
-  AdvanceExportSettings,
 } from 'nmr-load-save';
 import { useState } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
-import { CheckController } from '../../../elements/CheckController';
-import Label from '../../../elements/Label';
-import { NumberInput2Controller } from '../../../elements/NumberInput2Controller';
-import { Select2Controller } from '../../../elements/Select2Controller';
-import { units } from '../../../elements/export/units';
-import { useExportConfigurer } from '../../../elements/export/useExportConfigurer';
-import { getExportDefaultOptionsByMode } from '../../../elements/export/utilities/getExportOptions';
-import { Mode, MODES } from '../../../elements/export/utilities/getModes';
-import { getSizesList, SizeItem } from '../../../elements/print/pageSize';
-import { WorkspaceWithSource } from '../../../reducer/preferences/preferencesReducer';
-import { labelStyle } from '../../SaveAsModal';
+import { CheckController } from '../../../elements/CheckController.js';
+import Label from '../../../elements/Label.js';
+import { NumberInput2Controller } from '../../../elements/NumberInput2Controller.js';
+import { Select2Controller } from '../../../elements/Select2Controller.js';
+import { units } from '../../../elements/export/units.js';
+import { useExportConfigurer } from '../../../elements/export/useExportConfigurer.js';
+import { getExportDefaultOptionsByMode } from '../../../elements/export/utilities/getExportOptions.js';
+import type { Mode } from '../../../elements/export/utilities/getModes.js';
+import { MODES } from '../../../elements/export/utilities/getModes.js';
+import type { SizeItem } from '../../../elements/print/pageSize.js';
+import { getSizesList } from '../../../elements/print/pageSize.js';
+import type { WorkspaceWithSource } from '../../../reducer/preferences/preferencesReducer.js';
+import { labelStyle } from '../../SaveAsModal.js';
 
 export function ExportTabContent() {
   return (
diff --git a/src/component/modal/setting/settings-tabs/ExternalAPIsTabContent.tsx b/src/component/modal/setting/settings-tabs/ExternalAPIsTabContent.tsx
index e97d09281..3a03ecce9 100644
--- a/src/component/modal/setting/settings-tabs/ExternalAPIsTabContent.tsx
+++ b/src/component/modal/setting/settings-tabs/ExternalAPIsTabContent.tsx
@@ -1,16 +1,18 @@
 import { Classes } from '@blueprintjs/core';
-import { ExternalAPI, EXTERNAL_API_KEYS } from 'nmr-load-save';
+import type { ExternalAPI } from 'nmr-load-save';
+import { EXTERNAL_API_KEYS } from 'nmr-load-save';
 import { useCallback, useMemo } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { FaPlus, FaRegTrashAlt } from 'react-icons/fa';
 import { Button } from 'react-science/ui';
 
-import { GroupPane } from '../../../elements/GroupPane';
-import { Input2Controller } from '../../../elements/Input2Controller';
-import ReactTable, { Column } from '../../../elements/ReactTable/ReactTable';
-import { Select2Controller } from '../../../elements/Select2Controller';
-import { WorkspaceWithSource } from '../../../reducer/preferences/preferencesReducer';
-import { Section } from '../GeneralSettings';
+import { GroupPane } from '../../../elements/GroupPane.js';
+import { Input2Controller } from '../../../elements/Input2Controller.js';
+import type { Column } from '../../../elements/ReactTable/ReactTable.js';
+import ReactTable from '../../../elements/ReactTable/ReactTable.js';
+import { Select2Controller } from '../../../elements/Select2Controller.js';
+import type { WorkspaceWithSource } from '../../../reducer/preferences/preferencesReducer.js';
+import { Section } from '../GeneralSettings.js';
 
 function getKeyPath<T extends keyof ExternalAPI>(
   index: number,
diff --git a/src/component/modal/setting/settings-tabs/GeneralTabContent.tsx b/src/component/modal/setting/settings-tabs/GeneralTabContent.tsx
index 860fab354..bf53ca03b 100644
--- a/src/component/modal/setting/settings-tabs/GeneralTabContent.tsx
+++ b/src/component/modal/setting/settings-tabs/GeneralTabContent.tsx
@@ -1,12 +1,13 @@
 import { Checkbox, Tag } from '@blueprintjs/core';
 import { Controller, useFormContext } from 'react-hook-form';
 
-import { LOGGER_LEVELS } from '../../../context/LoggerContext';
-import { GroupPane } from '../../../elements/GroupPane';
-import Label, { LabelStyle } from '../../../elements/Label';
-import { NumberInput2Controller } from '../../../elements/NumberInput2Controller';
-import { Select2 } from '../../../elements/Select2';
-import { WorkspaceWithSource } from '../../../reducer/preferences/preferencesReducer';
+import { LOGGER_LEVELS } from '../../../context/LoggerContext.js';
+import { GroupPane } from '../../../elements/GroupPane.js';
+import type { LabelStyle } from '../../../elements/Label.js';
+import Label from '../../../elements/Label.js';
+import { NumberInput2Controller } from '../../../elements/NumberInput2Controller.js';
+import { Select2 } from '../../../elements/Select2.js';
+import type { WorkspaceWithSource } from '../../../reducer/preferences/preferencesReducer.js';
 
 const labelStyle: LabelStyle = {
   label: { flex: 6 },
diff --git a/src/component/modal/setting/settings-tabs/ImportationFiltersTabContent.tsx b/src/component/modal/setting/settings-tabs/ImportationFiltersTabContent.tsx
index 6da0e6cd7..5154dde83 100644
--- a/src/component/modal/setting/settings-tabs/ImportationFiltersTabContent.tsx
+++ b/src/component/modal/setting/settings-tabs/ImportationFiltersTabContent.tsx
@@ -2,12 +2,13 @@ import { Checkbox } from '@blueprintjs/core';
 import { useMemo } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 
-import { Keys } from '../../../../data/types/common/Keys';
-import { GroupPane } from '../../../elements/GroupPane';
-import { Input2Controller } from '../../../elements/Input2Controller';
-import ReactTable, { Column } from '../../../elements/ReactTable/ReactTable';
-import { Select2 } from '../../../elements/Select2';
-import { WorkspaceWithSource } from '../../../reducer/preferences/preferencesReducer';
+import type { Keys } from '../../../../data/types/common/Keys.js';
+import { GroupPane } from '../../../elements/GroupPane.js';
+import { Input2Controller } from '../../../elements/Input2Controller.js';
+import type { Column } from '../../../elements/ReactTable/ReactTable.js';
+import ReactTable from '../../../elements/ReactTable/ReactTable.js';
+import { Select2 } from '../../../elements/Select2.js';
+import type { WorkspaceWithSource } from '../../../reducer/preferences/preferencesReducer.js';
 
 const DataSelectionOptions = [
   { label: 'FT', value: 'ft' },
diff --git a/src/component/modal/setting/settings-tabs/InfoBlockTabContent.tsx b/src/component/modal/setting/settings-tabs/InfoBlockTabContent.tsx
index 827754bc2..1fa45c0ea 100644
--- a/src/component/modal/setting/settings-tabs/InfoBlockTabContent.tsx
+++ b/src/component/modal/setting/settings-tabs/InfoBlockTabContent.tsx
@@ -1,19 +1,20 @@
 import { Checkbox, Classes } from '@blueprintjs/core';
-import { InfoBlockField } from 'nmr-load-save';
+import type { InfoBlockField } from 'nmr-load-save';
 import { useCallback, useMemo } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { FaPlus, FaRegTrashAlt } from 'react-icons/fa';
 import { Button } from 'react-science/ui';
 
-import { useChartData } from '../../../context/ChartContext';
-import { GroupPane } from '../../../elements/GroupPane';
-import { Input2Controller } from '../../../elements/Input2Controller';
-import Label from '../../../elements/Label';
-import ReactTable, { Column } from '../../../elements/ReactTable/ReactTable';
-import { WorkspaceWithSource } from '../../../reducer/preferences/preferencesReducer';
-import { convertPathArrayToString } from '../../../utility/convertPathArrayToString';
-import { getSpectraObjectPaths } from '../../../utility/getSpectraObjectPaths';
-import { Section } from '../GeneralSettings';
+import { useChartData } from '../../../context/ChartContext.js';
+import { GroupPane } from '../../../elements/GroupPane.js';
+import { Input2Controller } from '../../../elements/Input2Controller.js';
+import Label from '../../../elements/Label.js';
+import type { Column } from '../../../elements/ReactTable/ReactTable.js';
+import ReactTable from '../../../elements/ReactTable/ReactTable.js';
+import type { WorkspaceWithSource } from '../../../reducer/preferences/preferencesReducer.js';
+import { convertPathArrayToString } from '../../../utility/convertPathArrayToString.js';
+import { getSpectraObjectPaths } from '../../../utility/getSpectraObjectPaths.js';
+import { Section } from '../GeneralSettings.js';
 
 function getKeyPath<T extends keyof InfoBlockField>(
   index: number,
diff --git a/src/component/modal/setting/settings-tabs/NucleiTabContent.tsx b/src/component/modal/setting/settings-tabs/NucleiTabContent.tsx
index eeab62084..8ecfd9216 100644
--- a/src/component/modal/setting/settings-tabs/NucleiTabContent.tsx
+++ b/src/component/modal/setting/settings-tabs/NucleiTabContent.tsx
@@ -1,16 +1,17 @@
 import { Classes } from '@blueprintjs/core';
-import { NucleiPreferences } from 'nmr-load-save';
+import type { NucleiPreferences } from 'nmr-load-save';
 import { useCallback, useMemo } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { FaPlus, FaRegTrashAlt } from 'react-icons/fa';
 import { Button } from 'react-science/ui';
 
-import { GroupPane } from '../../../elements/GroupPane';
-import { Input2Controller } from '../../../elements/Input2Controller';
-import { NumberInput2Controller } from '../../../elements/NumberInput2Controller';
-import ReactTable, { Column } from '../../../elements/ReactTable/ReactTable';
-import { WorkspaceWithSource } from '../../../reducer/preferences/preferencesReducer';
-import { Section } from '../GeneralSettings';
+import { GroupPane } from '../../../elements/GroupPane.js';
+import { Input2Controller } from '../../../elements/Input2Controller.js';
+import { NumberInput2Controller } from '../../../elements/NumberInput2Controller.js';
+import type { Column } from '../../../elements/ReactTable/ReactTable.js';
+import ReactTable from '../../../elements/ReactTable/ReactTable.js';
+import type { WorkspaceWithSource } from '../../../reducer/preferences/preferencesReducer.js';
+import { Section } from '../GeneralSettings.js';
 
 function getKeyPath<T extends keyof NucleiPreferences>(
   index: number,
diff --git a/src/component/modal/setting/settings-tabs/OnLoadProcessingTabContent.tsx b/src/component/modal/setting/settings-tabs/OnLoadProcessingTabContent.tsx
index e67e4ff8c..f23ddd71f 100644
--- a/src/component/modal/setting/settings-tabs/OnLoadProcessingTabContent.tsx
+++ b/src/component/modal/setting/settings-tabs/OnLoadProcessingTabContent.tsx
@@ -1,13 +1,13 @@
 import { Checkbox, Tab, Tabs } from '@blueprintjs/core';
-import { WorkspacePreferences } from 'nmr-load-save';
-import { BaseFilter } from 'nmr-processing';
+import type { WorkspacePreferences } from 'nmr-load-save';
+import type { BaseFilter } from 'nmr-processing';
 import { useFormContext, useWatch } from 'react-hook-form';
 
-import IsotopesViewer from '../../../elements/IsotopesViewer';
-import Label from '../../../elements/Label';
-import ReactTable from '../../../elements/ReactTable/ReactTable';
-import { CustomColumn } from '../../../elements/ReactTable/utility/addCustomColumn';
-import { WorkspaceWithSource } from '../../../reducer/preferences/preferencesReducer';
+import IsotopesViewer from '../../../elements/IsotopesViewer.js';
+import Label from '../../../elements/Label.js';
+import ReactTable from '../../../elements/ReactTable/ReactTable.js';
+import type { CustomColumn } from '../../../elements/ReactTable/utility/addCustomColumn.js';
+import type { WorkspaceWithSource } from '../../../reducer/preferences/preferencesReducer.js';
 
 function OnLoadProcessingTabContent() {
   const { register, control } = useFormContext<WorkspacePreferences>();
diff --git a/src/component/modal/setting/settings-tabs/SpectraColorsTabContent.tsx b/src/component/modal/setting/settings-tabs/SpectraColorsTabContent.tsx
index 11b76fecb..916afce77 100644
--- a/src/component/modal/setting/settings-tabs/SpectraColorsTabContent.tsx
+++ b/src/component/modal/setting/settings-tabs/SpectraColorsTabContent.tsx
@@ -1,20 +1,22 @@
 import { Classes } from '@blueprintjs/core';
-import { SpectraColors } from 'nmr-load-save';
-import { CSSProperties, useCallback, useMemo } from 'react';
+import type { SpectraColors } from 'nmr-load-save';
+import type { CSSProperties } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { FaPlus, FaRegTrashAlt } from 'react-icons/fa';
 import { Button } from 'react-science/ui';
 
-import { useChartData } from '../../../context/ChartContext';
-import { ColorPickerDropdownController } from '../../../elements/ColorPickerDropdownController';
-import { GroupPane } from '../../../elements/GroupPane';
-import { Input2Controller } from '../../../elements/Input2Controller';
-import Label from '../../../elements/Label';
-import ReactTable, { Column } from '../../../elements/ReactTable/ReactTable';
-import { WorkspaceWithSource } from '../../../reducer/preferences/preferencesReducer';
-import { convertPathArrayToString } from '../../../utility/convertPathArrayToString';
-import { getSpectraObjectPaths } from '../../../utility/getSpectraObjectPaths';
-import { Section } from '../GeneralSettings';
+import { useChartData } from '../../../context/ChartContext.js';
+import { ColorPickerDropdownController } from '../../../elements/ColorPickerDropdownController.js';
+import { GroupPane } from '../../../elements/GroupPane.js';
+import { Input2Controller } from '../../../elements/Input2Controller.js';
+import Label from '../../../elements/Label.js';
+import type { Column } from '../../../elements/ReactTable/ReactTable.js';
+import ReactTable from '../../../elements/ReactTable/ReactTable.js';
+import type { WorkspaceWithSource } from '../../../reducer/preferences/preferencesReducer.js';
+import { convertPathArrayToString } from '../../../utility/convertPathArrayToString.js';
+import { getSpectraObjectPaths } from '../../../utility/getSpectraObjectPaths.js';
+import { Section } from '../GeneralSettings.js';
 
 const colorInputStyle: CSSProperties = {
   minWidth: '80px',
diff --git a/src/component/modal/setting/settings-tabs/ToolsTabContent.tsx b/src/component/modal/setting/settings-tabs/ToolsTabContent.tsx
index 39550a8ac..3739cb0c5 100644
--- a/src/component/modal/setting/settings-tabs/ToolsTabContent.tsx
+++ b/src/component/modal/setting/settings-tabs/ToolsTabContent.tsx
@@ -1,11 +1,11 @@
 import { Checkbox } from '@blueprintjs/core';
-import { NMRiumToolBarPreferences } from 'nmr-load-save';
+import type { NMRiumToolBarPreferences } from 'nmr-load-save';
 import { useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 
-import ReactTable from '../../../elements/ReactTable/ReactTable';
-import { CustomColumn } from '../../../elements/ReactTable/utility/addCustomColumn';
-import { WorkspaceWithSource } from '../../../reducer/preferences/preferencesReducer';
+import ReactTable from '../../../elements/ReactTable/ReactTable.js';
+import type { CustomColumn } from '../../../elements/ReactTable/utility/addCustomColumn.js';
+import type { WorkspaceWithSource } from '../../../reducer/preferences/preferencesReducer.js';
 
 interface ListItem {
   label: string;
diff --git a/src/component/modal/setting/settingsValidation.ts b/src/component/modal/setting/settingsValidation.ts
index 7bbe54fa2..56284355d 100644
--- a/src/component/modal/setting/settingsValidation.ts
+++ b/src/component/modal/setting/settingsValidation.ts
@@ -1,8 +1,9 @@
-import { ExternalAPIKeyType, EXTERNAL_API_KEYS } from 'nmr-load-save';
-import { array, object, string, number, mixed } from 'yup';
+import type { ExternalAPIKeyType } from 'nmr-load-save';
+import { EXTERNAL_API_KEYS } from 'nmr-load-save';
+import { array, mixed, number, object, string } from 'yup';
 
-import { exportOptionValidationSchema } from '../../elements/export/utilities/exportOptionValidationSchema';
-import { checkUniqueByKey } from '../../utility/checkUniqueByKey';
+import { exportOptionValidationSchema } from '../../elements/export/utilities/exportOptionValidationSchema.js';
+import { checkUniqueByKey } from '../../utility/checkUniqueByKey.js';
 
 const nucleiValidation = array()
   .of(
diff --git a/src/component/panels/AutomaticAssignment/AutomaticAssignment.tsx b/src/component/panels/AutomaticAssignment/AutomaticAssignment.tsx
index ad2951e95..7e4209110 100644
--- a/src/component/panels/AutomaticAssignment/AutomaticAssignment.tsx
+++ b/src/component/panels/AutomaticAssignment/AutomaticAssignment.tsx
@@ -2,14 +2,14 @@
 import { SvgNmrAssignment2 } from 'cheminfo-font';
 import { FaBolt } from 'react-icons/fa';
 
-import { isSpectrum1D } from '../../../data/data1d/Spectrum1D/isSpectrum1D';
-import { useChartData } from '../../context/ChartContext';
-import { tablePanelStyle } from '../extra/BasicPanelStyle';
-import DefaultPanelHeader from '../header/DefaultPanelHeader';
-import { SpectraAutomaticPickingButton } from '../header/SpectraAutomaticPickingButton';
+import { isSpectrum1D } from '../../../data/data1d/Spectrum1D/isSpectrum1D.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { tablePanelStyle } from '../extra/BasicPanelStyle.js';
+import DefaultPanelHeader from '../header/DefaultPanelHeader.js';
+import { SpectraAutomaticPickingButton } from '../header/SpectraAutomaticPickingButton.js';
 
-import AutomaticAssignmentTable from './AutomaticAssignmentTable';
-import { useAutoAssignments } from './useAutoAssignments';
+import AutomaticAssignmentTable from './AutomaticAssignmentTable.js';
+import { useAutoAssignments } from './useAutoAssignments.js';
 
 function useCheckEnableAutomaticAssignments() {
   const { data } = useChartData();
diff --git a/src/component/panels/AutomaticAssignment/AutomaticAssignmentTable.tsx b/src/component/panels/AutomaticAssignment/AutomaticAssignmentTable.tsx
index 310629928..f39484356 100644
--- a/src/component/panels/AutomaticAssignment/AutomaticAssignmentTable.tsx
+++ b/src/component/panels/AutomaticAssignment/AutomaticAssignmentTable.tsx
@@ -1,11 +1,11 @@
 import { SvgNmrAssignment } from 'cheminfo-font';
-import { useCallback, useMemo, memo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 
-import { useDispatch } from '../../context/DispatchContext';
-import ReactTable from '../../elements/ReactTable/ReactTable';
-import { CustomColumn } from '../../elements/ReactTable/utility/addCustomColumn';
+import { useDispatch } from '../../context/DispatchContext.js';
+import ReactTable from '../../elements/ReactTable/ReactTable.js';
+import type { CustomColumn } from '../../elements/ReactTable/utility/addCustomColumn.js';
 
-import { AutoAssignmentsData } from './useAutoAssignments';
+import type { AutoAssignmentsData } from './useAutoAssignments.js';
 
 interface AutomaticAssignmentTableProps {
   data: AutoAssignmentsData[];
diff --git a/src/component/panels/AutomaticAssignment/useAutoAssignments.ts b/src/component/panels/AutomaticAssignment/useAutoAssignments.ts
index c1a084682..c8a52261e 100644
--- a/src/component/panels/AutomaticAssignment/useAutoAssignments.ts
+++ b/src/component/panels/AutomaticAssignment/useAutoAssignments.ts
@@ -1,15 +1,13 @@
-import { Spectrum, Spectrum1D, Spectrum2D } from 'nmr-load-save';
-import {
-  getAssignments as getAssignmentsData,
-  SpectraData,
-} from 'nmr-processing';
+import type { Spectrum, Spectrum1D, Spectrum2D } from 'nmr-load-save';
+import type { SpectraData } from 'nmr-processing';
+import { getAssignments as getAssignmentsData } from 'nmr-processing';
 import OCL from 'openchemlib/full';
 import { useRef, useState } from 'react';
 
-import { useChartData } from '../../context/ChartContext';
-import { useDispatch } from '../../context/DispatchContext';
-import { useToaster } from '../../context/ToasterContext';
-import { assert } from '../../utility/assert';
+import { useChartData } from '../../context/ChartContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { useToaster } from '../../context/ToasterContext.js';
+import { assert } from '../../utility/assert.js';
 
 export interface AutoAssignmentsData {
   score: number;
diff --git a/src/component/panels/IntegralsPanel/IntegralPanel.tsx b/src/component/panels/IntegralsPanel/IntegralPanel.tsx
index fad1bcfa0..8575b3fba 100644
--- a/src/component/panels/IntegralsPanel/IntegralPanel.tsx
+++ b/src/component/panels/IntegralsPanel/IntegralPanel.tsx
@@ -1,26 +1,26 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import { SvgNmrIntegrate } from 'cheminfo-font';
-import lodashGet from 'lodash/get';
-import { Spectrum1D } from 'nmr-load-save';
-import { Info1D, Integrals } from 'nmr-processing';
-import { useCallback, useMemo, useState, useRef, memo } from 'react';
+import lodashGet from 'lodash/get.js';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { Info1D, Integrals } from 'nmr-processing';
+import { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { ImLink } from 'react-icons/im';
 
-import { useChartData } from '../../context/ChartContext';
-import { useDispatch } from '../../context/DispatchContext';
-import { useAlert } from '../../elements/Alert';
-import { useActiveSpectrumIntegralsViewState } from '../../hooks/useActiveSpectrumIntegralsViewState';
-import useSpectrum from '../../hooks/useSpectrum';
-import ChangeSumModal from '../../modal/changeSum/ChangeSumModal';
-import { booleanToString } from '../../utility/booleanToString';
-import { tablePanelStyle } from '../extra/BasicPanelStyle';
-import { SettingsRef } from '../extra/utilities/settingImperativeHandle';
-import DefaultPanelHeader from '../header/DefaultPanelHeader';
-import PreferencesHeader from '../header/PreferencesHeader';
-
-import IntegralTable from './IntegralTable';
-import IntegralsPreferences from './IntegralsPreferences';
+import { useChartData } from '../../context/ChartContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { useAlert } from '../../elements/Alert.js';
+import { useActiveSpectrumIntegralsViewState } from '../../hooks/useActiveSpectrumIntegralsViewState.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
+import ChangeSumModal from '../../modal/changeSum/ChangeSumModal.js';
+import { booleanToString } from '../../utility/booleanToString.js';
+import { tablePanelStyle } from '../extra/BasicPanelStyle.js';
+import type { SettingsRef } from '../extra/utilities/settingImperativeHandle.js';
+import DefaultPanelHeader from '../header/DefaultPanelHeader.js';
+import PreferencesHeader from '../header/PreferencesHeader.js';
+
+import IntegralTable from './IntegralTable.js';
+import IntegralsPreferences from './IntegralsPreferences.js';
 
 export interface IntegralPanelInnerProps {
   integrals: Integrals;
diff --git a/src/component/panels/IntegralsPanel/IntegralTable.tsx b/src/component/panels/IntegralsPanel/IntegralTable.tsx
index 28dbf18a3..1264bf498 100644
--- a/src/component/panels/IntegralsPanel/IntegralTable.tsx
+++ b/src/component/panels/IntegralsPanel/IntegralTable.tsx
@@ -1,24 +1,24 @@
-import lodashGet from 'lodash/get';
-import { Info1D, Integral } from 'nmr-processing';
-import { useCallback, useMemo, memo } from 'react';
+import lodashGet from 'lodash/get.js';
+import type { Info1D, Integral } from 'nmr-processing';
+import { memo, useCallback, useMemo } from 'react';
 import { FaRegTrashAlt } from 'react-icons/fa';
 
-import { SIGNAL_KINDS } from '../../../data/constants/signalsKinds';
-import { checkIntegralKind } from '../../../data/data1d/Spectrum1D';
-import { useDispatch } from '../../context/DispatchContext';
-import EditableColumn from '../../elements/EditableColumn';
-import ReactTable from '../../elements/ReactTable/ReactTable';
+import { SIGNAL_KINDS } from '../../../data/constants/signalsKinds.js';
+import { checkIntegralKind } from '../../../data/data1d/Spectrum1D/index.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import EditableColumn from '../../elements/EditableColumn.js';
+import ReactTable from '../../elements/ReactTable/ReactTable.js';
+import type { CustomColumn } from '../../elements/ReactTable/utility/addCustomColumn.js';
 import addCustomColumn, {
-  CustomColumn,
   createActionColumn,
-} from '../../elements/ReactTable/utility/addCustomColumn';
-import Select from '../../elements/Select';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
-import { formatNumber } from '../../utility/formatNumber';
-import NoDataForFid from '../extra/placeholder/NoDataForFid';
-import NoTableData from '../extra/placeholder/NoTableData';
-
-import { IntegralPanelInnerProps } from './IntegralPanel';
+} from '../../elements/ReactTable/utility/addCustomColumn.js';
+import Select from '../../elements/Select.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
+import { formatNumber } from '../../utility/formatNumber.js';
+import NoDataForFid from '../extra/placeholder/NoDataForFid.js';
+import NoTableData from '../extra/placeholder/NoTableData.js';
+
+import type { IntegralPanelInnerProps } from './IntegralPanel.js';
 
 const selectStyle = { width: '100%', border: 'none' };
 
diff --git a/src/component/panels/IntegralsPanel/IntegralsPreferences.tsx b/src/component/panels/IntegralsPanel/IntegralsPreferences.tsx
index 902619038..a3d157270 100644
--- a/src/component/panels/IntegralsPanel/IntegralsPreferences.tsx
+++ b/src/component/panels/IntegralsPanel/IntegralsPreferences.tsx
@@ -1,23 +1,19 @@
-import { useCallback, memo, forwardRef, useMemo } from 'react';
+import { forwardRef, memo, useCallback, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
 
-import { usePreferences } from '../../context/PreferencesContext';
-import { ColorPickerDropdownController } from '../../elements/ColorPickerDropdownController';
-import { fieldLabelStyle } from '../../elements/FormatField';
-import Label from '../../elements/Label';
-import { NumberInput2Controller } from '../../elements/NumberInput2Controller';
-import useNucleus from '../../hooks/useNucleus';
-import { usePanelPreferencesByNuclei } from '../../hooks/usePanelPreferences';
-import { getUniqueNuclei } from '../../utility/getUniqueNuclei';
-import {
-  NucleusPreferenceField,
-  NucleusPreferences,
-} from '../extra/preferences/NucleusPreferences';
-import { PreferencesContainer } from '../extra/preferences/PreferencesContainer';
-import {
-  SettingsRef,
-  useSettingImperativeHandle,
-} from '../extra/utilities/settingImperativeHandle';
+import { usePreferences } from '../../context/PreferencesContext.js';
+import { ColorPickerDropdownController } from '../../elements/ColorPickerDropdownController.js';
+import { fieldLabelStyle } from '../../elements/FormatField.js';
+import Label from '../../elements/Label.js';
+import { NumberInput2Controller } from '../../elements/NumberInput2Controller.js';
+import useNucleus from '../../hooks/useNucleus.js';
+import { usePanelPreferencesByNuclei } from '../../hooks/usePanelPreferences.js';
+import { getUniqueNuclei } from '../../utility/getUniqueNuclei.js';
+import type { NucleusPreferenceField } from '../extra/preferences/NucleusPreferences.js';
+import { NucleusPreferences } from '../extra/preferences/NucleusPreferences.js';
+import { PreferencesContainer } from '../extra/preferences/PreferencesContainer.js';
+import type { SettingsRef } from '../extra/utilities/settingImperativeHandle.js';
+import { useSettingImperativeHandle } from '../extra/utilities/settingImperativeHandle.js';
 
 const formatFields: NucleusPreferenceField[] = [
   {
diff --git a/src/component/panels/MatrixGenerationPanel/ExclusionsZonesTable.tsx b/src/component/panels/MatrixGenerationPanel/ExclusionsZonesTable.tsx
index 0ddf30e15..40dc7c0b3 100644
--- a/src/component/panels/MatrixGenerationPanel/ExclusionsZonesTable.tsx
+++ b/src/component/panels/MatrixGenerationPanel/ExclusionsZonesTable.tsx
@@ -3,8 +3,9 @@ import { Button, Classes } from '@blueprintjs/core';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { FaRegTrashAlt } from 'react-icons/fa';
 
-import { NumberInput2Controller } from '../../elements/NumberInput2Controller';
-import ReactTable, { Column } from '../../elements/ReactTable/ReactTable';
+import { NumberInput2Controller } from '../../elements/NumberInput2Controller.js';
+import type { Column } from '../../elements/ReactTable/ReactTable.js';
+import ReactTable from '../../elements/ReactTable/ReactTable.js';
 
 export function ExclusionsZonesTable() {
   const { setValue, control } = useFormContext<any>();
diff --git a/src/component/panels/MatrixGenerationPanel/FiltersOptions.tsx b/src/component/panels/MatrixGenerationPanel/FiltersOptions.tsx
index 4ea034fc5..2dfeb7eb7 100644
--- a/src/component/panels/MatrixGenerationPanel/FiltersOptions.tsx
+++ b/src/component/panels/MatrixGenerationPanel/FiltersOptions.tsx
@@ -1,25 +1,25 @@
 /** @jsxImportSource @emotion/react */
 import { Button, Classes } from '@blueprintjs/core';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { FaPlus, FaRegTrashAlt } from 'react-icons/fa';
 
+import type { MatrixFilter } from '../../../data/matrixGeneration.js';
 import {
   getMatrixFilters,
-  MatrixFilter,
   normalCase,
-} from '../../../data/matrixGeneration';
-import { CheckController } from '../../elements/CheckController';
-import { GroupPane } from '../../elements/GroupPane';
-import { Input2Controller } from '../../elements/Input2Controller';
-import Label from '../../elements/Label';
-import { NumberInput2Controller } from '../../elements/NumberInput2Controller';
-import { Select2Controller } from '../../elements/Select2Controller';
+} from '../../../data/matrixGeneration.js';
+import { CheckController } from '../../elements/CheckController.js';
+import { GroupPane } from '../../elements/GroupPane.js';
+import { Input2Controller } from '../../elements/Input2Controller.js';
+import Label from '../../elements/Label.js';
+import { NumberInput2Controller } from '../../elements/NumberInput2Controller.js';
+import { Select2Controller } from '../../elements/Select2Controller.js';
 
 import {
   DEFAULT_MATRIX_FILTERS,
   GroupPanelStyle,
-} from './MatrixGenerationPanel';
+} from './MatrixGenerationPanel.js';
 
 interface SelectMatrixFilter extends MatrixFilter {
   label: string;
diff --git a/src/component/panels/MatrixGenerationPanel/MatrixGenerationPanel.tsx b/src/component/panels/MatrixGenerationPanel/MatrixGenerationPanel.tsx
index 1af8e28db..6a5b8ea69 100644
--- a/src/component/panels/MatrixGenerationPanel/MatrixGenerationPanel.tsx
+++ b/src/component/panels/MatrixGenerationPanel/MatrixGenerationPanel.tsx
@@ -3,30 +3,33 @@ import styled from '@emotion/styled';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { SvgNmrMultipleAnalysis } from 'cheminfo-font';
 import { Filters } from 'nmr-processing';
-import { useEffect, useCallback, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { Button, Toolbar } from 'react-science/ui';
 import * as yup from 'yup';
 
-import { getMatrixFilters, MatrixFilter } from '../../../data/matrixGeneration';
-import { MatrixOptions } from '../../../data/types/data1d/MatrixOptions';
-import { useChartData } from '../../context/ChartContext';
-import { useDispatch } from '../../context/DispatchContext';
-import { usePreferences } from '../../context/PreferencesContext';
-import { GroupPane, GroupPaneStyle } from '../../elements/GroupPane';
-import Label, { LabelStyle } from '../../elements/Label';
-import { NumberInput2Controller } from '../../elements/NumberInput2Controller';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
-import useSpectraByActiveNucleus from '../../hooks/useSpectraPerNucleus';
-import useToolsFunctions from '../../hooks/useToolsFunctions';
-import { getMatrixGenerationDefaultOptions } from '../../reducer/preferences/panelsPreferencesDefaultValues';
-import { options } from '../../toolbar/ToolTypes';
-import { tablePanelStyle } from '../extra/BasicPanelStyle';
-import { PreferencesContainer } from '../extra/preferences/PreferencesContainer';
-
-import { ExclusionsZonesTable } from './ExclusionsZonesTable';
-import { FiltersOptions } from './FiltersOptions';
-import { MatrixGenerationPanelHeader } from './MatrixGenerationPanelHeader';
+import type { MatrixFilter } from '../../../data/matrixGeneration.js';
+import { getMatrixFilters } from '../../../data/matrixGeneration.js';
+import type { MatrixOptions } from '../../../data/types/data1d/MatrixOptions.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { usePreferences } from '../../context/PreferencesContext.js';
+import type { GroupPaneStyle } from '../../elements/GroupPane.js';
+import { GroupPane } from '../../elements/GroupPane.js';
+import type { LabelStyle } from '../../elements/Label.js';
+import Label from '../../elements/Label.js';
+import { NumberInput2Controller } from '../../elements/NumberInput2Controller.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
+import useSpectraByActiveNucleus from '../../hooks/useSpectraPerNucleus.js';
+import useToolsFunctions from '../../hooks/useToolsFunctions.js';
+import { getMatrixGenerationDefaultOptions } from '../../reducer/preferences/panelsPreferencesDefaultValues.js';
+import { options } from '../../toolbar/ToolTypes.js';
+import { tablePanelStyle } from '../extra/BasicPanelStyle.js';
+import { PreferencesContainer } from '../extra/preferences/PreferencesContainer.js';
+
+import { ExclusionsZonesTable } from './ExclusionsZonesTable.js';
+import { FiltersOptions } from './FiltersOptions.js';
+import { MatrixGenerationPanelHeader } from './MatrixGenerationPanelHeader.js';
 
 const { signalProcessing } = Filters;
 
diff --git a/src/component/panels/MatrixGenerationPanel/MatrixGenerationPanelHeader.tsx b/src/component/panels/MatrixGenerationPanel/MatrixGenerationPanelHeader.tsx
index c7e0169ae..ae73cae5c 100644
--- a/src/component/panels/MatrixGenerationPanel/MatrixGenerationPanelHeader.tsx
+++ b/src/component/panels/MatrixGenerationPanel/MatrixGenerationPanelHeader.tsx
@@ -5,15 +5,15 @@ import { IoAnalytics } from 'react-icons/io5';
 import { TbBrandGoogleAnalytics } from 'react-icons/tb';
 import { TooltipHelpContent } from 'react-science/ui';
 
-import { useChartData } from '../../context/ChartContext';
-import { usePreferences } from '../../context/PreferencesContext';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
-import { useToggleSpectraVisibility } from '../../hooks/useToggleSpectraVisibility';
-import { booleanToString } from '../../utility/booleanToString';
-import { exportAsMatrix } from '../../utility/export';
-import DefaultPanelHeader from '../header/DefaultPanelHeader';
+import { useChartData } from '../../context/ChartContext.js';
+import { usePreferences } from '../../context/PreferencesContext.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
+import { useToggleSpectraVisibility } from '../../hooks/useToggleSpectraVisibility.js';
+import { booleanToString } from '../../utility/booleanToString.js';
+import { exportAsMatrix } from '../../utility/export.js';
+import DefaultPanelHeader from '../header/DefaultPanelHeader.js';
 
-import { useHasSignalProcessingFilter } from './MatrixGenerationPanel';
+import { useHasSignalProcessingFilter } from './MatrixGenerationPanel.js';
 
 interface MatrixGenerationPanelHeaderProps {
   showStocsy: boolean;
diff --git a/src/component/panels/MoleculesPanel/MoleculeHeader.tsx b/src/component/panels/MoleculesPanel/MoleculeHeader.tsx
index 6899d0443..0f1315325 100644
--- a/src/component/panels/MoleculesPanel/MoleculeHeader.tsx
+++ b/src/component/panels/MoleculesPanel/MoleculeHeader.tsx
@@ -1,14 +1,15 @@
-import { useCallback, CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
+import { useCallback } from 'react';
 import { MF } from 'react-mf';
 
-import { StateMoleculeExtended } from '../../../data/molecules/Molecule';
+import type { StateMoleculeExtended } from '../../../data/molecules/Molecule.js';
 import {
   extractLabelsNumbers,
   extractNumber,
-} from '../../../data/molecules/MoleculeManager';
-import { useDispatch } from '../../context/DispatchContext';
-import EditableColumn from '../../elements/EditableColumn';
-import Label from '../../elements/Label';
+} from '../../../data/molecules/MoleculeManager.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import EditableColumn from '../../elements/EditableColumn.js';
+import Label from '../../elements/Label.js';
 
 interface MoleculeHeaderProps {
   currentMolecule: StateMoleculeExtended;
diff --git a/src/component/panels/MoleculesPanel/MoleculePanel.tsx b/src/component/panels/MoleculesPanel/MoleculePanel.tsx
index 1525143e1..c41750e4d 100644
--- a/src/component/panels/MoleculesPanel/MoleculePanel.tsx
+++ b/src/component/panels/MoleculesPanel/MoleculePanel.tsx
@@ -1,27 +1,28 @@
 /** @jsxImportSource @emotion/react */
-import { css, SerializedStyles } from '@emotion/react';
-import { Spectrum1D, Spectrum2D } from 'nmr-load-save';
-import { Ranges, Zones } from 'nmr-processing';
+import type { SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
+import type { Spectrum1D, Spectrum2D } from 'nmr-load-save';
+import type { Ranges, Zones } from 'nmr-processing';
 import OCL from 'openchemlib/full';
-import { useState, useEffect, memo } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { ResponsiveChart } from 'react-d3-utils';
 import OCLnmr from 'react-ocl-nmr';
 
-import {
+import type {
   MoleculesView,
   StateMoleculeExtended,
-} from '../../../data/molecules/Molecule';
-import { useChartData } from '../../context/ChartContext';
-import { useDispatch } from '../../context/DispatchContext';
-import { NextPrev } from '../../elements/NextPrev';
-import { useHighlightColor } from '../../hooks/useHighlightColor';
-import useSpectrum from '../../hooks/useSpectrum';
-import { useMoleculeEditor } from '../../modal/MoleculeStructureEditorModal';
-import { DisplayerMode } from '../../reducer/Reducer';
-
-import MoleculeHeader from './MoleculeHeader';
-import MoleculePanelHeader from './MoleculePanelHeader';
-import useAtomAssignment from './useAtomAssignment';
+} from '../../../data/molecules/Molecule.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { NextPrev } from '../../elements/NextPrev.js';
+import { useHighlightColor } from '../../hooks/useHighlightColor.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
+import { useMoleculeEditor } from '../../modal/MoleculeStructureEditorModal.js';
+import type { DisplayerMode } from '../../reducer/Reducer.js';
+
+import MoleculeHeader from './MoleculeHeader.js';
+import MoleculePanelHeader from './MoleculePanelHeader.js';
+import useAtomAssignment from './useAtomAssignment.js';
 
 const styles: Record<
   'panel' | 'innerPanel' | 'molecule' | 'slider' | 'items',
diff --git a/src/component/panels/MoleculesPanel/MoleculePanelHeader.tsx b/src/component/panels/MoleculesPanel/MoleculePanelHeader.tsx
index f6214a283..f0854ab78 100644
--- a/src/component/panels/MoleculesPanel/MoleculePanelHeader.tsx
+++ b/src/component/panels/MoleculesPanel/MoleculePanelHeader.tsx
@@ -1,5 +1,6 @@
 import { Molecule as OCLMolecule } from 'openchemlib/full';
-import { CSSProperties, ReactNode, useCallback } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import { useCallback } from 'react';
 import {
   FaCopy,
   FaDownload,
@@ -12,26 +13,24 @@ import {
 import { IoOpenOutline } from 'react-icons/io5';
 import { Toolbar } from 'react-science/ui';
 
-import {
+import type {
   MoleculesView,
   StateMoleculeExtended,
-} from '../../../data/molecules/Molecule';
-import { getMolecules } from '../../../data/molecules/MoleculeManager';
-import { ClipboardFallbackModal } from '../../../utils/clipboard/clipboardComponents';
-import { useClipboard } from '../../../utils/clipboard/clipboardHooks';
-import { useAssignmentData } from '../../assignment/AssignmentsContext';
-import { useDispatch } from '../../context/DispatchContext';
-import { useGlobal } from '../../context/GlobalContext';
-import { useToaster } from '../../context/ToasterContext';
-import { PreferencesButton } from '../../elements/PreferencesButton';
-import {
-  ToolbarPopoverItem,
-  ToolbarPopoverMenuItem,
-} from '../../elements/ToolbarPopoverItem';
-import AboutPredictionModal from '../../modal/AboutPredictionModal';
-import PredictSpectraModal from '../../modal/PredictSpectraModal';
-import { copyPNGToClipboard, exportAsSVG } from '../../utility/export';
-import PanelHeader from '../header/PanelHeader';
+} from '../../../data/molecules/Molecule.js';
+import { getMolecules } from '../../../data/molecules/MoleculeManager.js';
+import { ClipboardFallbackModal } from '../../../utils/clipboard/clipboardComponents.js';
+import { useClipboard } from '../../../utils/clipboard/clipboardHooks.js';
+import { useAssignmentData } from '../../assignment/AssignmentsContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { useGlobal } from '../../context/GlobalContext.js';
+import { useToaster } from '../../context/ToasterContext.js';
+import { PreferencesButton } from '../../elements/PreferencesButton.js';
+import type { ToolbarPopoverMenuItem } from '../../elements/ToolbarPopoverItem.js';
+import { ToolbarPopoverItem } from '../../elements/ToolbarPopoverItem.js';
+import AboutPredictionModal from '../../modal/AboutPredictionModal.js';
+import PredictSpectraModal from '../../modal/PredictSpectraModal.js';
+import { copyPNGToClipboard, exportAsSVG } from '../../utility/export.js';
+import PanelHeader from '../header/PanelHeader.js';
 
 const styles: Record<'counter' | 'atomLabel', CSSProperties> = {
   counter: {
diff --git a/src/component/panels/MoleculesPanel/Utilities.ts b/src/component/panels/MoleculesPanel/Utilities.ts
index 37aa8661c..9d6ee8707 100644
--- a/src/component/panels/MoleculesPanel/Utilities.ts
+++ b/src/component/panels/MoleculesPanel/Utilities.ts
@@ -1,7 +1,10 @@
-import { Range, Zone } from 'nmr-processing';
-import { DiaIDAndInfo } from 'openchemlib-utils';
+import type { Range, Zone } from 'nmr-processing';
+import type { DiaIDAndInfo } from 'openchemlib-utils';
 
-import { AssignmentContext, Axis } from '../../assignment/AssignmentsContext';
+import type {
+  AssignmentContext,
+  Axis,
+} from '../../assignment/AssignmentsContext.js';
 
 export interface AtomData {
   oclIDs: string[];
diff --git a/src/component/panels/MoleculesPanel/useAtomAssignment.tsx b/src/component/panels/MoleculesPanel/useAtomAssignment.tsx
index ebae4ed14..192273404 100644
--- a/src/component/panels/MoleculesPanel/useAtomAssignment.tsx
+++ b/src/component/panels/MoleculesPanel/useAtomAssignment.tsx
@@ -1,27 +1,31 @@
-import { Range, Ranges, Zone, Zones } from 'nmr-processing';
-import { DiaIDAndInfo } from 'openchemlib-utils';
-import { MouseEvent, useCallback, useEffect, useMemo, useState } from 'react';
+import type { Range, Ranges, Zone, Zones } from 'nmr-processing';
+import type { DiaIDAndInfo } from 'openchemlib-utils';
+import type { MouseEvent } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { ConcatenationString } from '../../../data/utilities/Concatenation';
-import checkModifierKeyActivated from '../../../data/utilities/checkModifierKeyActivated';
+import { ConcatenationString } from '../../../data/utilities/Concatenation.js';
+import checkModifierKeyActivated from '../../../data/utilities/checkModifierKeyActivated.js';
 import {
   useAssignment,
   useAssignmentData,
-} from '../../assignment/AssignmentsContext';
-import { filterForIDsWithAssignment } from '../../assignment/utilities/filterForIDsWithAssignment';
-import { useDispatch } from '../../context/DispatchContext';
-import { useToaster } from '../../context/ToasterContext';
-import { HighlightEventSource, useHighlightData } from '../../highlight';
-import { DisplayerMode } from '../../reducer/Reducer';
+} from '../../assignment/AssignmentsContext.js';
+import { filterForIDsWithAssignment } from '../../assignment/utilities/filterForIDsWithAssignment.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { useToaster } from '../../context/ToasterContext.js';
+import {
+  HighlightEventSource,
+  useHighlightData,
+} from '../../highlight/index.js';
+import type { DisplayerMode } from '../../reducer/Reducer.js';
 
+import type { AtomData } from './Utilities.js';
 import {
-  AtomData,
   extractFromAtom,
   findDatumAndSignalIndex,
   getCurrentDiaIDsToHighlight,
   getHighlightsOnHover,
   toggleDiaIDs,
-} from './Utilities';
+} from './Utilities.js';
 
 interface UseAtomAssignmentProps {
   displayerMode: DisplayerMode;
diff --git a/src/component/panels/PanelNoData.tsx b/src/component/panels/PanelNoData.tsx
index d09463cee..4d653af12 100644
--- a/src/component/panels/PanelNoData.tsx
+++ b/src/component/panels/PanelNoData.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 const styles: Record<'container' | 'text', CSSProperties> = {
   container: {
diff --git a/src/component/panels/Panels.tsx b/src/component/panels/Panels.tsx
index 1612904eb..cfed43e63 100644
--- a/src/component/panels/Panels.tsx
+++ b/src/component/panels/Panels.tsx
@@ -1,37 +1,37 @@
-import lodashGet from 'lodash/get';
-import { NMRiumPanelPreferences, PanelPreferencesType } from 'nmr-load-save';
-import { useCallback, memo, ReactElement, CSSProperties } from 'react';
+import lodashGet from 'lodash/get.js';
+import type {
+  NMRiumPanelPreferences,
+  PanelPreferencesType,
+} from 'nmr-load-save';
+import type { CSSProperties, ReactElement } from 'react';
+import { memo, useCallback } from 'react';
 import { FaRegEdit } from 'react-icons/fa';
-import {
-  Accordion,
-  AccordionItemProps,
-  Toolbar,
-  ToolbarItemProps,
-} from 'react-science/ui';
+import type { AccordionItemProps, ToolbarItemProps } from 'react-science/ui';
+import { Accordion, Toolbar } from 'react-science/ui';
 
-import { useChartData } from '../context/ChartContext';
-import { usePreferences } from '../context/PreferencesContext';
-import { useActiveSpectrum } from '../hooks/useActiveSpectrum';
-import useCheckExperimentalFeature from '../hooks/useCheckExperimentalFeature';
-import { useDialogToggle } from '../hooks/useDialogToggle';
-import { DisplayerMode } from '../reducer/Reducer';
+import { useChartData } from '../context/ChartContext.js';
+import { usePreferences } from '../context/PreferencesContext.js';
+import { useActiveSpectrum } from '../hooks/useActiveSpectrum.js';
+import useCheckExperimentalFeature from '../hooks/useCheckExperimentalFeature.js';
+import { useDialogToggle } from '../hooks/useDialogToggle.js';
+import type { DisplayerMode } from '../reducer/Reducer.js';
 
-import AutomaticAssignment from './AutomaticAssignment/AutomaticAssignment';
-import IntegralPanel from './IntegralsPanel/IntegralPanel';
-import { MatrixGenerationPanel } from './MatrixGenerationPanel/MatrixGenerationPanel';
-import MoleculePanel from './MoleculesPanel/MoleculePanel';
-import PeaksPanel from './PeaksPanel/PeaksPanel';
-import RangesPanel from './RangesPanel/RangesPanel';
-import SpectrumListPanel from './SpectraPanel/SpectrumListPanel';
-import SummaryPanel from './SummaryPanel/SummaryPanel';
-import ZonesPanel from './ZonesPanel/ZonesPanel';
-import DatabasePanel from './databasePanel/DatabasePanel';
-import FilterPanel from './filtersPanel/FilterPanel';
-import { InformationEditionModal } from './informationPanel/InformationEditionModal';
-import { InformationPanel } from './informationPanel/InformationPanel';
-import MultipleSpectraAnalysisPanel from './multipleAnalysisPanel/MultipleSpectraAnalysisPanel';
-import PredictionPane from './predictionPanel/PredictionPanel';
-import SpectrumSimulation from './spectrumSimulation/SpectrumSimulation';
+import AutomaticAssignment from './AutomaticAssignment/AutomaticAssignment.js';
+import IntegralPanel from './IntegralsPanel/IntegralPanel.js';
+import { MatrixGenerationPanel } from './MatrixGenerationPanel/MatrixGenerationPanel.js';
+import MoleculePanel from './MoleculesPanel/MoleculePanel.js';
+import PeaksPanel from './PeaksPanel/PeaksPanel.js';
+import RangesPanel from './RangesPanel/RangesPanel.js';
+import SpectrumListPanel from './SpectraPanel/SpectrumListPanel.js';
+import SummaryPanel from './SummaryPanel/SummaryPanel.js';
+import ZonesPanel from './ZonesPanel/ZonesPanel.js';
+import DatabasePanel from './databasePanel/DatabasePanel.js';
+import FilterPanel from './filtersPanel/FilterPanel.js';
+import { InformationEditionModal } from './informationPanel/InformationEditionModal.js';
+import { InformationPanel } from './informationPanel/InformationPanel.js';
+import MultipleSpectraAnalysisPanel from './multipleAnalysisPanel/MultipleSpectraAnalysisPanel.js';
+import PredictionPane from './predictionPanel/PredictionPanel.js';
+import SpectrumSimulation from './spectrumSimulation/SpectrumSimulation.js';
 
 interface AccordionItem
   extends Omit<AccordionItemProps, 'children' | 'defaultOpened'> {
diff --git a/src/component/panels/PeaksPanel/PeaksPanel.tsx b/src/component/panels/PeaksPanel/PeaksPanel.tsx
index 76ca4b37f..16524c969 100644
--- a/src/component/panels/PeaksPanel/PeaksPanel.tsx
+++ b/src/component/panels/PeaksPanel/PeaksPanel.tsx
@@ -1,33 +1,31 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import { SvgNmrFt, SvgNmrPeaks, SvgNmrPeaksTopLabels } from 'cheminfo-font';
-import SvgPeaks from 'cheminfo-font/lib-react-cjs/lib-react-tsx/nmr/Peaks';
-import { PeaksViewState, Spectrum1D } from 'nmr-load-save';
-import { Info1D, Peak1D, Peaks } from 'nmr-processing';
-import { useCallback, useMemo, useState, useRef, memo } from 'react';
+import type { PeaksViewState, Spectrum1D } from 'nmr-load-save';
+import type { Info1D, Peak1D, Peaks } from 'nmr-processing';
+import { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { FaThinkPeaks } from 'react-icons/fa';
 
-import isInRange from '../../../data/utilities/isInRange';
-import { useChartData } from '../../context/ChartContext';
-import { useDispatch } from '../../context/DispatchContext';
-import { usePreferences } from '../../context/PreferencesContext';
-import { useToaster } from '../../context/ToasterContext';
-import { useAlert } from '../../elements/Alert';
-import { useActiveSpectrumPeaksViewState } from '../../hooks/useActiveSpectrumPeaksViewState';
-import useCheckExperimentalFeature from '../../hooks/useCheckExperimentalFeature';
-import { useFormatNumberByNucleus } from '../../hooks/useFormatNumberByNucleus';
-import useSpectrum from '../../hooks/useSpectrum';
-import { booleanToString } from '../../utility/booleanToString';
-import { FilterType } from '../../utility/filterType';
-import { tablePanelStyle } from '../extra/BasicPanelStyle';
-import { SettingsRef } from '../extra/utilities/settingImperativeHandle';
-import DefaultPanelHeader, {
-  ToolbarItemProps,
-} from '../header/DefaultPanelHeader';
-import PreferencesHeader from '../header/PreferencesHeader';
-
-import PeaksPreferences from './PeaksPreferences';
-import PeaksTable from './PeaksTable';
+import isInRange from '../../../data/utilities/isInRange.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { usePreferences } from '../../context/PreferencesContext.js';
+import { useToaster } from '../../context/ToasterContext.js';
+import { useAlert } from '../../elements/Alert.js';
+import { useActiveSpectrumPeaksViewState } from '../../hooks/useActiveSpectrumPeaksViewState.js';
+import useCheckExperimentalFeature from '../../hooks/useCheckExperimentalFeature.js';
+import { useFormatNumberByNucleus } from '../../hooks/useFormatNumberByNucleus.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
+import { booleanToString } from '../../utility/booleanToString.js';
+import type { FilterType } from '../../utility/filterType.js';
+import { tablePanelStyle } from '../extra/BasicPanelStyle.js';
+import type { SettingsRef } from '../extra/utilities/settingImperativeHandle.js';
+import type { ToolbarItemProps } from '../header/DefaultPanelHeader.js';
+import DefaultPanelHeader from '../header/DefaultPanelHeader.js';
+import PreferencesHeader from '../header/PreferencesHeader.js';
+
+import PeaksPreferences from './PeaksPreferences.js';
+import PeaksTable from './PeaksTable.js';
 
 interface PeaksPanelInnerProps {
   peaks: Peaks;
@@ -163,7 +161,7 @@ function PeaksPanelInner({
     leftButtons.unshift(
       {
         disabled,
-        icon: <SvgPeaks />,
+        icon: <SvgNmrPeaks />,
         tooltip: `${booleanToString(!showPeaksShapes)} peaks shapes`,
         onClick: () => toggleViewProperty('showPeaksShapes'),
         active: showPeaksShapes,
diff --git a/src/component/panels/PeaksPanel/PeaksPreferences.tsx b/src/component/panels/PeaksPanel/PeaksPreferences.tsx
index 9bdb17115..08b07e65e 100644
--- a/src/component/panels/PeaksPanel/PeaksPreferences.tsx
+++ b/src/component/panels/PeaksPanel/PeaksPreferences.tsx
@@ -1,16 +1,14 @@
-import { useCallback, memo, forwardRef, useMemo } from 'react';
+import { forwardRef, memo, useCallback, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
 
-import { usePreferences } from '../../context/PreferencesContext';
-import useNucleus from '../../hooks/useNucleus';
-import { usePanelPreferencesByNuclei } from '../../hooks/usePanelPreferences';
-import { getUniqueNuclei } from '../../utility/getUniqueNuclei';
-import {
-  NucleusPreferences,
-  NucleusPreferenceField,
-} from '../extra/preferences/NucleusPreferences';
-import { PreferencesContainer } from '../extra/preferences/PreferencesContainer';
-import { useSettingImperativeHandle } from '../extra/utilities/settingImperativeHandle';
+import { usePreferences } from '../../context/PreferencesContext.js';
+import useNucleus from '../../hooks/useNucleus.js';
+import { usePanelPreferencesByNuclei } from '../../hooks/usePanelPreferences.js';
+import { getUniqueNuclei } from '../../utility/getUniqueNuclei.js';
+import type { NucleusPreferenceField } from '../extra/preferences/NucleusPreferences.js';
+import { NucleusPreferences } from '../extra/preferences/NucleusPreferences.js';
+import { PreferencesContainer } from '../extra/preferences/PreferencesContainer.js';
+import { useSettingImperativeHandle } from '../extra/utilities/settingImperativeHandle.js';
 
 const formatFields: NucleusPreferenceField[] = [
   {
diff --git a/src/component/panels/PeaksPanel/PeaksTable.tsx b/src/component/panels/PeaksPanel/PeaksTable.tsx
index f2ecee642..1b7baaf42 100644
--- a/src/component/panels/PeaksPanel/PeaksTable.tsx
+++ b/src/component/panels/PeaksPanel/PeaksTable.tsx
@@ -1,22 +1,22 @@
-import lodashGet from 'lodash/get';
-import { Info1D, Peak1D } from 'nmr-processing';
-import { useCallback, useMemo, memo, useState } from 'react';
+import lodashGet from 'lodash/get.js';
+import type { Info1D, Peak1D } from 'nmr-processing';
+import { memo, useCallback, useMemo, useState } from 'react';
 import { FaEdit, FaRegTrashAlt } from 'react-icons/fa';
 
-import { useDispatch } from '../../context/DispatchContext';
-import EditableColumn from '../../elements/EditableColumn';
-import ReactTable from '../../elements/ReactTable/ReactTable';
+import { useDispatch } from '../../context/DispatchContext.js';
+import EditableColumn from '../../elements/EditableColumn.js';
+import ReactTable from '../../elements/ReactTable/ReactTable.js';
+import type { ControlCustomColumn } from '../../elements/ReactTable/utility/addCustomColumn.js';
 import addCustomColumn, {
-  ControlCustomColumn,
   createActionColumn,
-} from '../../elements/ReactTable/utility/addCustomColumn';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
-import { EditPeakShapeModal } from '../../modal/EditPeakShapeModal';
-import { formatNumber } from '../../utility/formatNumber';
-import NoDataForFid from '../extra/placeholder/NoDataForFid';
-import NoTableData from '../extra/placeholder/NoTableData';
+} from '../../elements/ReactTable/utility/addCustomColumn.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
+import { EditPeakShapeModal } from '../../modal/EditPeakShapeModal.js';
+import { formatNumber } from '../../utility/formatNumber.js';
+import NoDataForFid from '../extra/placeholder/NoDataForFid.js';
+import NoTableData from '../extra/placeholder/NoTableData.js';
 
-import { PeakRecord } from './PeaksPanel';
+import type { PeakRecord } from './PeaksPanel.js';
 
 interface PeaksTableProps {
   activeTab: string;
diff --git a/src/component/panels/RangesPanel/RangesHeader.tsx b/src/component/panels/RangesPanel/RangesHeader.tsx
index 42a739582..df34a8e7f 100644
--- a/src/component/panels/RangesPanel/RangesHeader.tsx
+++ b/src/component/panels/RangesPanel/RangesHeader.tsx
@@ -3,39 +3,37 @@ import {
   SvgNmrPeaks,
   SvgNmrPeaksTopLabels,
 } from 'cheminfo-font';
-import { saveAs } from 'file-saver';
-import lodashGet from 'lodash/get';
-import { RangesViewState } from 'nmr-load-save';
+import fileSaver from 'file-saver';
+import lodashGet from 'lodash/get.js';
+import type { RangesViewState } from 'nmr-load-save';
 import { rangesToACS, rangesToTSV } from 'nmr-processing';
 import { useState } from 'react';
 import {
-  FaFileExport,
-  FaUnlink,
-  FaSitemap,
   FaChartBar,
   FaCopy,
   FaDownload,
+  FaFileExport,
+  FaSitemap,
+  FaUnlink,
 } from 'react-icons/fa';
 import { ImLink } from 'react-icons/im';
 import { LuSubtitles } from 'react-icons/lu';
 
-import { ClipboardFallbackModal } from '../../../utils/clipboard/clipboardComponents';
-import { useClipboard } from '../../../utils/clipboard/clipboardHooks';
-import { useAssignmentData } from '../../assignment/AssignmentsContext';
-import { useDispatch } from '../../context/DispatchContext';
-import { useToaster } from '../../context/ToasterContext';
-import { useAlert } from '../../elements/Alert';
-import {
-  ToolbarPopoverItem,
-  ToolbarPopoverMenuItem,
-} from '../../elements/ToolbarPopoverItem';
-import { useActiveSpectrumRangesViewState } from '../../hooks/useActiveSpectrumRangesViewState';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
-import CopyClipboardModal from '../../modal/CopyClipboardModal';
-import ChangeSumModal from '../../modal/changeSum/ChangeSumModal';
-import { booleanToString } from '../../utility/booleanToString';
-import { FilterType } from '../../utility/filterType';
-import DefaultPanelHeader from '../header/DefaultPanelHeader';
+import { ClipboardFallbackModal } from '../../../utils/clipboard/clipboardComponents.js';
+import { useClipboard } from '../../../utils/clipboard/clipboardHooks.js';
+import { useAssignmentData } from '../../assignment/AssignmentsContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { useToaster } from '../../context/ToasterContext.js';
+import { useAlert } from '../../elements/Alert.js';
+import type { ToolbarPopoverMenuItem } from '../../elements/ToolbarPopoverItem.js';
+import { ToolbarPopoverItem } from '../../elements/ToolbarPopoverItem.js';
+import { useActiveSpectrumRangesViewState } from '../../hooks/useActiveSpectrumRangesViewState.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
+import CopyClipboardModal from '../../modal/CopyClipboardModal.js';
+import ChangeSumModal from '../../modal/changeSum/ChangeSumModal.js';
+import { booleanToString } from '../../utility/booleanToString.js';
+import type { FilterType } from '../../utility/filterType.js';
+import DefaultPanelHeader from '../header/DefaultPanelHeader.js';
 
 type ExportRangesType = 'publicationString' | 'rangesToTSV';
 interface ExportData {
@@ -198,7 +196,7 @@ function RangesHeader({
   function handleRangesToTSV() {
     const tsv = rangesToTSV(ranges.values);
     const blob = new Blob([tsv], { type: 'text/plain' });
-    saveAs(blob, `${info.name}.tsv`);
+    fileSaver.saveAs(blob, `${info.name}.tsv`);
   }
 
   function exportHandler(data?: ExportData) {
diff --git a/src/component/panels/RangesPanel/RangesPanel.tsx b/src/component/panels/RangesPanel/RangesPanel.tsx
index ef7051bab..97365c2ee 100644
--- a/src/component/panels/RangesPanel/RangesPanel.tsx
+++ b/src/component/panels/RangesPanel/RangesPanel.tsx
@@ -1,28 +1,28 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { NmrData1D } from 'cheminfo-types';
+import type { NmrData1D } from 'cheminfo-types';
 import { xGetFromToIndex } from 'ml-spectra-processing';
-import { Spectrum1D, WorkSpacePanelPreferences } from 'nmr-load-save';
-import { Info1D, Ranges } from 'nmr-processing';
-import { useCallback, useMemo, memo, useState, useRef } from 'react';
+import type { Spectrum1D, WorkSpacePanelPreferences } from 'nmr-load-save';
+import type { Info1D, Ranges } from 'nmr-processing';
+import { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { FaCopy } from 'react-icons/fa';
 
-import { StateMoleculeExtended } from '../../../data/molecules/Molecule';
-import { ClipboardFallbackModal } from '../../../utils/clipboard/clipboardComponents';
-import { useClipboard } from '../../../utils/clipboard/clipboardHooks';
-import { useAssignmentData } from '../../assignment/AssignmentsContext';
-import { useChartData } from '../../context/ChartContext';
-import { useDispatch } from '../../context/DispatchContext';
-import { useToaster } from '../../context/ToasterContext';
-import { BaseContextMenuProps } from '../../elements/ContextMenuBluePrint';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
-import useSpectrum from '../../hooks/useSpectrum';
-import { tablePanelStyle } from '../extra/BasicPanelStyle';
-import PreferencesHeader from '../header/PreferencesHeader';
-
-import RangesHeader from './RangesHeader';
-import RangesPreferences from './RangesPreferences';
-import RangesTable from './RangesTable';
+import type { StateMoleculeExtended } from '../../../data/molecules/Molecule.js';
+import { ClipboardFallbackModal } from '../../../utils/clipboard/clipboardComponents.js';
+import { useClipboard } from '../../../utils/clipboard/clipboardHooks.js';
+import { useAssignmentData } from '../../assignment/AssignmentsContext.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { useToaster } from '../../context/ToasterContext.js';
+import type { BaseContextMenuProps } from '../../elements/ContextMenuBluePrint.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
+import { tablePanelStyle } from '../extra/BasicPanelStyle.js';
+import PreferencesHeader from '../header/PreferencesHeader.js';
+
+import RangesHeader from './RangesHeader.js';
+import RangesPreferences from './RangesPreferences.js';
+import RangesTable from './RangesTable.js';
 
 const rangesContextMenuOptions: BaseContextMenuProps['options'] = [
   {
diff --git a/src/component/panels/RangesPanel/RangesPreferences.tsx b/src/component/panels/RangesPanel/RangesPreferences.tsx
index afffa7c69..5aab0e80a 100644
--- a/src/component/panels/RangesPanel/RangesPreferences.tsx
+++ b/src/component/panels/RangesPanel/RangesPreferences.tsx
@@ -1,19 +1,17 @@
 import { forwardRef, useEffect, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
 
-import { usePreferences } from '../../context/PreferencesContext';
-import { fieldLabelStyle } from '../../elements/FormatField';
-import Label from '../../elements/Label';
-import { NumberInput2Controller } from '../../elements/NumberInput2Controller';
-import useNucleus from '../../hooks/useNucleus';
-import { usePanelPreferencesByNuclei } from '../../hooks/usePanelPreferences';
-import { getUniqueNuclei } from '../../utility/getUniqueNuclei';
-import {
-  NucleusPreferenceField,
-  NucleusPreferences,
-} from '../extra/preferences/NucleusPreferences';
-import { PreferencesContainer } from '../extra/preferences/PreferencesContainer';
-import { useSettingImperativeHandle } from '../extra/utilities/settingImperativeHandle';
+import { usePreferences } from '../../context/PreferencesContext.js';
+import { fieldLabelStyle } from '../../elements/FormatField.js';
+import Label from '../../elements/Label.js';
+import { NumberInput2Controller } from '../../elements/NumberInput2Controller.js';
+import useNucleus from '../../hooks/useNucleus.js';
+import { usePanelPreferencesByNuclei } from '../../hooks/usePanelPreferences.js';
+import { getUniqueNuclei } from '../../utility/getUniqueNuclei.js';
+import type { NucleusPreferenceField } from '../extra/preferences/NucleusPreferences.js';
+import { NucleusPreferences } from '../extra/preferences/NucleusPreferences.js';
+import { PreferencesContainer } from '../extra/preferences/PreferencesContainer.js';
+import { useSettingImperativeHandle } from '../extra/utilities/settingImperativeHandle.js';
 
 const formatFields: NucleusPreferenceField[] = [
   {
diff --git a/src/component/panels/RangesPanel/RangesTable.tsx b/src/component/panels/RangesPanel/RangesTable.tsx
index 99c487114..319a3b96a 100644
--- a/src/component/panels/RangesPanel/RangesTable.tsx
+++ b/src/component/panels/RangesPanel/RangesTable.tsx
@@ -1,18 +1,18 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { WorkSpacePanelPreferences } from 'nmr-load-save';
-import { Info1D } from 'nmr-processing';
+import type { WorkSpacePanelPreferences } from 'nmr-load-save';
+import type { Info1D } from 'nmr-processing';
 import { FaLink } from 'react-icons/fa';
 
-import { withDialog } from '../../elements/DialogManager';
-import { TableContextMenuProps } from '../../elements/ReactTable/ReactTable';
-import useTableSortBy from '../../hooks/useTableSortBy';
-import { EditRangeModal } from '../../modal/editRange/EditRangeModal';
-import NoDataForFid from '../extra/placeholder/NoDataForFid';
-import NoTableData from '../extra/placeholder/NoTableData';
+import { withDialog } from '../../elements/DialogManager.js';
+import type { TableContextMenuProps } from '../../elements/ReactTable/ReactTable.js';
+import useTableSortBy from '../../hooks/useTableSortBy.js';
+import { EditRangeModal } from '../../modal/editRange/EditRangeModal.js';
+import NoDataForFid from '../extra/placeholder/NoDataForFid.js';
+import NoTableData from '../extra/placeholder/NoTableData.js';
 
-import RangesTableRow from './RangesTableRow';
-import useMapRanges from './hooks/useMapRanges';
+import RangesTableRow from './RangesTableRow.js';
+import useMapRanges from './hooks/useMapRanges.js';
 
 const tableStyle = css`
   border-spacing: 0;
diff --git a/src/component/panels/RangesPanel/RangesTableRow.tsx b/src/component/panels/RangesPanel/RangesTableRow.tsx
index b2033484d..ce12f0053 100644
--- a/src/component/panels/RangesPanel/RangesTableRow.tsx
+++ b/src/component/panels/RangesPanel/RangesTableRow.tsx
@@ -1,35 +1,36 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import lodashGet from 'lodash/get';
-import { WorkSpacePanelPreferences } from 'nmr-load-save';
-import { Info1D } from 'nmr-processing';
-import { useMemo, useCallback, MouseEvent, CSSProperties } from 'react';
+import lodashGet from 'lodash/get.js';
+import type { WorkSpacePanelPreferences } from 'nmr-load-save';
+import type { Info1D } from 'nmr-processing';
+import type { MouseEvent, CSSProperties } from 'react';
+import { useMemo, useCallback } from 'react';
 
+import type { AssignmentsData } from '../../assignment/AssignmentsContext.js';
 import {
-  AssignmentsData,
   useAssignment,
   useAssignmentData,
-} from '../../assignment/AssignmentsContext';
-import { filterForIDsWithAssignment } from '../../assignment/utilities/filterForIDsWithAssignment';
-import { ContextMenu } from '../../elements/ContextMenuBluePrint';
-import { TableContextMenuProps } from '../../elements/ReactTable/ReactTable';
+} from '../../assignment/AssignmentsContext.js';
+import { filterForIDsWithAssignment } from '../../assignment/utilities/filterForIDsWithAssignment.js';
+import { ContextMenu } from '../../elements/ContextMenuBluePrint.js';
+import type { TableContextMenuProps } from '../../elements/ReactTable/ReactTable.js';
 import {
   HighlightEventSource,
   useHighlight,
   useHighlightData,
-} from '../../highlight';
+} from '../../highlight/index.js';
 
-import AbsoluteColumn from './TableColumns/AbsoluteColumn';
-import ActionsColumn from './TableColumns/ActionsColumn';
-import CouplingColumn from './TableColumns/CouplingColumn';
-import { RangeAssignmentColumn } from './TableColumns/RangeAssignmentColumn';
-import RangeAssignmentsColumn from './TableColumns/RangeAssignmentsColumn';
-import RangeColumn from './TableColumns/RangeColumn';
-import RelativeColumn from './TableColumns/RelativeColumn';
-import SignalAssignmentsColumn from './TableColumns/SignalAssignmentsColumn';
-import SignalDeltaColumn from './TableColumns/SignalDeltaColumn';
-import SignalDeltaHzColumn from './TableColumns/SignalDeltaHzColumn';
-import { RangeData } from './hooks/useMapRanges';
+import AbsoluteColumn from './TableColumns/AbsoluteColumn.js';
+import ActionsColumn from './TableColumns/ActionsColumn.js';
+import CouplingColumn from './TableColumns/CouplingColumn.js';
+import { RangeAssignmentColumn } from './TableColumns/RangeAssignmentColumn.js';
+import RangeAssignmentsColumn from './TableColumns/RangeAssignmentsColumn.js';
+import RangeColumn from './TableColumns/RangeColumn.js';
+import RelativeColumn from './TableColumns/RelativeColumn.js';
+import SignalAssignmentsColumn from './TableColumns/SignalAssignmentsColumn.js';
+import SignalDeltaColumn from './TableColumns/SignalDeltaColumn.js';
+import SignalDeltaHzColumn from './TableColumns/SignalDeltaHzColumn.js';
+import type { RangeData } from './hooks/useMapRanges.js';
 
 const HighlightedRowStyle = css`
   background-color: #ff6f0057;
diff --git a/src/component/panels/RangesPanel/TableColumns/AbsoluteColumn.tsx b/src/component/panels/RangesPanel/TableColumns/AbsoluteColumn.tsx
index 3e7e86e3d..64ffe3475 100644
--- a/src/component/panels/RangesPanel/TableColumns/AbsoluteColumn.tsx
+++ b/src/component/panels/RangesPanel/TableColumns/AbsoluteColumn.tsx
@@ -1,5 +1,5 @@
-import { formatNumber } from '../../../utility/formatNumber';
-import { RangeColumnProps } from '../RangesTableRow';
+import { formatNumber } from '../../../utility/formatNumber.js';
+import type { RangeColumnProps } from '../RangesTableRow.js';
 
 function AbsoluteColumn({
   rowSpanTags,
diff --git a/src/component/panels/RangesPanel/TableColumns/ActionsColumn.tsx b/src/component/panels/RangesPanel/TableColumns/ActionsColumn.tsx
index ac036c6c6..464b17cab 100644
--- a/src/component/panels/RangesPanel/TableColumns/ActionsColumn.tsx
+++ b/src/component/panels/RangesPanel/TableColumns/ActionsColumn.tsx
@@ -2,17 +2,17 @@
 import { css } from '@emotion/react';
 import { FaEdit, FaRegTrashAlt, FaSearchPlus } from 'react-icons/fa';
 
-import { SIGNAL_KINDS } from '../../../../data/constants/signalsKinds';
-import { useDispatch } from '../../../context/DispatchContext';
-import { useDialog } from '../../../elements/DialogManager';
-import { Select2 } from '../../../elements/Select2';
-import { EditRangeModal } from '../../../modal/editRange/EditRangeModal';
-import {
-  OnHoverEvent,
+import { SIGNAL_KINDS } from '../../../../data/constants/signalsKinds.js';
+import { useDispatch } from '../../../context/DispatchContext.js';
+import { useDialog } from '../../../elements/DialogManager.js';
+import { Select2 } from '../../../elements/Select2.js';
+import { EditRangeModal } from '../../../modal/editRange/EditRangeModal.js';
+import type {
   BaseRangeColumnProps,
+  OnHoverEvent,
   RowSpanTags,
-} from '../RangesTableRow';
-import useEditRangeModal from '../hooks/useEditRangeModal';
+} from '../RangesTableRow.js';
+import useEditRangeModal from '../hooks/useEditRangeModal.js';
 
 const styles = css`
   width: 66px;
diff --git a/src/component/panels/RangesPanel/TableColumns/CouplingColumn.tsx b/src/component/panels/RangesPanel/TableColumns/CouplingColumn.tsx
index c13843ae6..bf3219b87 100644
--- a/src/component/panels/RangesPanel/TableColumns/CouplingColumn.tsx
+++ b/src/component/panels/RangesPanel/TableColumns/CouplingColumn.tsx
@@ -1,7 +1,7 @@
-import lodashGet from 'lodash/get';
+import lodashGet from 'lodash/get.js';
 
-import { formatNumber } from '../../../utility/formatNumber';
-import { OnHoverEvent, BaseRangeColumnProps } from '../RangesTableRow';
+import { formatNumber } from '../../../utility/formatNumber.js';
+import type { BaseRangeColumnProps, OnHoverEvent } from '../RangesTableRow.js';
 
 type CouplingColumnProps = BaseRangeColumnProps & OnHoverEvent;
 
diff --git a/src/component/panels/RangesPanel/TableColumns/RangeAssignmentColumn.tsx b/src/component/panels/RangesPanel/TableColumns/RangeAssignmentColumn.tsx
index afa4987c3..f46613b48 100644
--- a/src/component/panels/RangesPanel/TableColumns/RangeAssignmentColumn.tsx
+++ b/src/component/panels/RangesPanel/TableColumns/RangeAssignmentColumn.tsx
@@ -1,7 +1,7 @@
-import { useDispatch } from '../../../context/DispatchContext';
-import EditableColumn from '../../../elements/EditableColumn';
-import { OnHoverEvent, RowSpanTags } from '../RangesTableRow';
-import { RangeData } from '../hooks/useMapRanges';
+import { useDispatch } from '../../../context/DispatchContext.js';
+import EditableColumn from '../../../elements/EditableColumn.js';
+import type { OnHoverEvent, RowSpanTags } from '../RangesTableRow.js';
+import type { RangeData } from '../hooks/useMapRanges.js';
 
 type RangeAssignmentColumnProps = OnHoverEvent &
   RowSpanTags & { row: RangeData };
diff --git a/src/component/panels/RangesPanel/TableColumns/RangeAssignmentsColumn.tsx b/src/component/panels/RangesPanel/TableColumns/RangeAssignmentsColumn.tsx
index 5709511dc..eeea3aa82 100644
--- a/src/component/panels/RangesPanel/TableColumns/RangeAssignmentsColumn.tsx
+++ b/src/component/panels/RangesPanel/TableColumns/RangeAssignmentsColumn.tsx
@@ -1,14 +1,15 @@
 /** @jsxImportSource @emotion/react */
 
-import { CSSProperties, memo } from 'react';
+import type { CSSProperties } from 'react';
+import { memo } from 'react';
 
-import { AssignmentsData } from '../../../assignment/AssignmentsContext';
+import type { AssignmentsData } from '../../../assignment/AssignmentsContext.js';
 import {
-  RemoveAssignmentsButton,
   removeAssignmentCssStyle,
-} from '../../../elements/RemoveAssignmentsButton';
-import { HighlightEventSource } from '../../../highlight';
-import { RangeColumnProps } from '../RangesTableRow';
+  RemoveAssignmentsButton,
+} from '../../../elements/RemoveAssignmentsButton.js';
+import { HighlightEventSource } from '../../../highlight/index.js';
+import type { RangeColumnProps } from '../RangesTableRow.js';
 
 const columnStyle: CSSProperties = {
   padding: 0,
diff --git a/src/component/panels/RangesPanel/TableColumns/RangeColumn.tsx b/src/component/panels/RangesPanel/TableColumns/RangeColumn.tsx
index c9e0d7b04..801feebc2 100644
--- a/src/component/panels/RangesPanel/TableColumns/RangeColumn.tsx
+++ b/src/component/panels/RangesPanel/TableColumns/RangeColumn.tsx
@@ -1,5 +1,5 @@
-import { formatNumber } from '../../../utility/formatNumber';
-import { RangeColumnProps } from '../RangesTableRow';
+import { formatNumber } from '../../../utility/formatNumber.js';
+import type { RangeColumnProps } from '../RangesTableRow.js';
 
 interface RangeColumnInnerProps extends Omit<RangeColumnProps, 'row'> {
   value: any;
diff --git a/src/component/panels/RangesPanel/TableColumns/RelativeColumn.tsx b/src/component/panels/RangesPanel/TableColumns/RelativeColumn.tsx
index 7e6b4179b..6832f8f6d 100644
--- a/src/component/panels/RangesPanel/TableColumns/RelativeColumn.tsx
+++ b/src/component/panels/RangesPanel/TableColumns/RelativeColumn.tsx
@@ -1,8 +1,8 @@
-import { checkRangeKind } from '../../../../data/utilities/RangeUtilities';
-import { useDispatch } from '../../../context/DispatchContext';
-import EditableColumn from '../../../elements/EditableColumn';
-import { formatNumber } from '../../../utility/formatNumber';
-import { RangeColumnProps } from '../RangesTableRow';
+import { checkRangeKind } from '../../../../data/utilities/RangeUtilities.js';
+import { useDispatch } from '../../../context/DispatchContext.js';
+import EditableColumn from '../../../elements/EditableColumn.js';
+import { formatNumber } from '../../../utility/formatNumber.js';
+import type { RangeColumnProps } from '../RangesTableRow.js';
 
 function RelativeColumn({
   row,
diff --git a/src/component/panels/RangesPanel/TableColumns/SignalAssignmentsColumn.tsx b/src/component/panels/RangesPanel/TableColumns/SignalAssignmentsColumn.tsx
index f3d9aee59..937faf592 100644
--- a/src/component/panels/RangesPanel/TableColumns/SignalAssignmentsColumn.tsx
+++ b/src/component/panels/RangesPanel/TableColumns/SignalAssignmentsColumn.tsx
@@ -1,14 +1,15 @@
 /** @jsxImportSource @emotion/react */
 
-import lodashGet from 'lodash/get';
-import { CSSProperties, memo, MouseEvent } from 'react';
+import lodashGet from 'lodash/get.js';
+import type { CSSProperties, MouseEvent } from 'react';
+import { memo } from 'react';
 
-import { AssignmentsData } from '../../../assignment/AssignmentsContext';
+import type { AssignmentsData } from '../../../assignment/AssignmentsContext.js';
 import {
-  RemoveAssignmentsButton,
   removeAssignmentCssStyle,
-} from '../../../elements/RemoveAssignmentsButton';
-import { OnHoverEvent, BaseRangeColumnProps } from '../RangesTableRow';
+  RemoveAssignmentsButton,
+} from '../../../elements/RemoveAssignmentsButton.js';
+import type { BaseRangeColumnProps, OnHoverEvent } from '../RangesTableRow.js';
 
 interface SignalAssignmentsColumnProps
   extends Omit<BaseRangeColumnProps, 'format'>,
diff --git a/src/component/panels/RangesPanel/TableColumns/SignalDeltaColumn.tsx b/src/component/panels/RangesPanel/TableColumns/SignalDeltaColumn.tsx
index 023c833ad..2ad8d52b9 100644
--- a/src/component/panels/RangesPanel/TableColumns/SignalDeltaColumn.tsx
+++ b/src/component/panels/RangesPanel/TableColumns/SignalDeltaColumn.tsx
@@ -1,9 +1,9 @@
 import { checkMultiplicity } from 'nmr-processing';
 
-import { useDispatch } from '../../../context/DispatchContext';
-import EditableColumn from '../../../elements/EditableColumn';
-import { formatNumber } from '../../../utility/formatNumber';
-import { RangeColumnProps } from '../RangesTableRow';
+import { useDispatch } from '../../../context/DispatchContext.js';
+import EditableColumn from '../../../elements/EditableColumn.js';
+import { formatNumber } from '../../../utility/formatNumber.js';
+import type { RangeColumnProps } from '../RangesTableRow.js';
 
 function SignalDeltaColumn({
   row,
diff --git a/src/component/panels/RangesPanel/TableColumns/SignalDeltaHzColumn.tsx b/src/component/panels/RangesPanel/TableColumns/SignalDeltaHzColumn.tsx
index 7f3020770..cf1945f85 100644
--- a/src/component/panels/RangesPanel/TableColumns/SignalDeltaHzColumn.tsx
+++ b/src/component/panels/RangesPanel/TableColumns/SignalDeltaHzColumn.tsx
@@ -1,7 +1,8 @@
-import { Info1D, checkMultiplicity } from 'nmr-processing';
+import type { Info1D } from 'nmr-processing';
+import { checkMultiplicity } from 'nmr-processing';
 
-import { formatNumber } from '../../../utility/formatNumber';
-import { RangeColumnProps } from '../RangesTableRow';
+import { formatNumber } from '../../../utility/formatNumber.js';
+import type { RangeColumnProps } from '../RangesTableRow.js';
 
 interface SignalDeltaHzColumnProps extends RangeColumnProps {
   info: Info1D;
diff --git a/src/component/panels/RangesPanel/hooks/useEditRangeModal.tsx b/src/component/panels/RangesPanel/hooks/useEditRangeModal.tsx
index e7c14e3a0..bd0ac74a0 100644
--- a/src/component/panels/RangesPanel/hooks/useEditRangeModal.tsx
+++ b/src/component/panels/RangesPanel/hooks/useEditRangeModal.tsx
@@ -1,9 +1,9 @@
 import { useCallback, useMemo } from 'react';
 
-import { useAssignmentData } from '../../../assignment/AssignmentsContext';
-import { useDispatch } from '../../../context/DispatchContext';
+import { useAssignmentData } from '../../../assignment/AssignmentsContext.js';
+import { useDispatch } from '../../../context/DispatchContext.js';
 
-import { RangeData } from './useMapRanges';
+import type { RangeData } from './useMapRanges.js';
 
 function getZoomRange(range: RangeData): [number, number] {
   const { from, to } = range;
diff --git a/src/component/panels/RangesPanel/hooks/useMapRanges.ts b/src/component/panels/RangesPanel/hooks/useMapRanges.ts
index 12aacccbe..0d984cdbe 100644
--- a/src/component/panels/RangesPanel/hooks/useMapRanges.ts
+++ b/src/component/panels/RangesPanel/hooks/useMapRanges.ts
@@ -1,5 +1,5 @@
 import { v4 } from '@lukeed/uuid';
-import { Range } from 'nmr-processing';
+import type { Range } from 'nmr-processing';
 import { useMemo } from 'react';
 
 export interface RangeData extends Range {
diff --git a/src/component/panels/SpectraPanel/SpectraPanelHeader.tsx b/src/component/panels/SpectraPanel/SpectraPanelHeader.tsx
index 5cb697489..1afcf3cd3 100644
--- a/src/component/panels/SpectraPanel/SpectraPanelHeader.tsx
+++ b/src/component/panels/SpectraPanel/SpectraPanelHeader.tsx
@@ -1,24 +1,23 @@
-import { SvgNmrSameTop, SvgNmrResetScale } from 'cheminfo-font';
-import { ActiveSpectrum, Spectrum, Spectrum2D } from 'nmr-load-save';
+import { SvgNmrResetScale, SvgNmrSameTop } from 'cheminfo-font';
+import type { ActiveSpectrum, Spectrum, Spectrum2D } from 'nmr-load-save';
 import { memo, useCallback } from 'react';
 import { FaCreativeCommonsSamplingPlus } from 'react-icons/fa';
 import { IoColorPaletteOutline } from 'react-icons/io5';
 import { MdFormatColorFill } from 'react-icons/md';
 
-import { useChartData } from '../../context/ChartContext';
-import { useDispatch } from '../../context/DispatchContext';
-import { usePreferences } from '../../context/PreferencesContext';
-import { useToaster } from '../../context/ToasterContext';
-import { useAlert } from '../../elements/Alert';
-import { useActiveSpectra } from '../../hooks/useActiveSpectra';
-import useSpectrum from '../../hooks/useSpectrum';
-import { useToggleSpectraVisibility } from '../../hooks/useToggleSpectraVisibility';
-import { DisplayerMode } from '../../reducer/Reducer';
-import { getSpectraByNucleus } from '../../utility/getSpectraByNucleus';
-import DefaultPanelHeader, {
-  ToolbarItemProps,
-} from '../header/DefaultPanelHeader';
-import { SpectraAutomaticPickingButton } from '../header/SpectraAutomaticPickingButton';
+import { useChartData } from '../../context/ChartContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { usePreferences } from '../../context/PreferencesContext.js';
+import { useToaster } from '../../context/ToasterContext.js';
+import { useAlert } from '../../elements/Alert.js';
+import { useActiveSpectra } from '../../hooks/useActiveSpectra.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
+import { useToggleSpectraVisibility } from '../../hooks/useToggleSpectraVisibility.js';
+import type { DisplayerMode } from '../../reducer/Reducer.js';
+import { getSpectraByNucleus } from '../../utility/getSpectraByNucleus.js';
+import type { ToolbarItemProps } from '../header/DefaultPanelHeader.js';
+import DefaultPanelHeader from '../header/DefaultPanelHeader.js';
+import { SpectraAutomaticPickingButton } from '../header/SpectraAutomaticPickingButton.js';
 
 function getMissingProjection(spectraData, activeTab) {
   let nucleus = activeTab.split(',');
diff --git a/src/component/panels/SpectraPanel/SpectraPreferences.tsx b/src/component/panels/SpectraPanel/SpectraPreferences.tsx
index 1f98f92d5..1166b286b 100644
--- a/src/component/panels/SpectraPanel/SpectraPreferences.tsx
+++ b/src/component/panels/SpectraPanel/SpectraPreferences.tsx
@@ -1,26 +1,27 @@
 import { yupResolver } from '@hookform/resolvers/yup';
-import { PanelsPreferences, Workspace } from 'nmr-load-save';
+import type { PanelsPreferences, Workspace } from 'nmr-load-save';
 import {
-  useImperativeHandle,
-  memo,
   forwardRef,
+  memo,
   useCallback,
+  useImperativeHandle,
   useMemo,
 } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 
-import { useChartData } from '../../context/ChartContext';
-import { usePreferences } from '../../context/PreferencesContext';
-import { GroupPane, GroupPaneStyle } from '../../elements/GroupPane';
-import { Scroller } from '../../elements/Scroller';
-import useNucleus from '../../hooks/useNucleus';
-import { usePanelPreferencesByNuclei } from '../../hooks/usePanelPreferences';
-import { getSpectraObjectPaths } from '../../utility/getSpectraObjectPaths';
-import { NucleusGroup } from '../extra/preferences/NucleusGroup';
-import { PreferencesContainer } from '../extra/preferences/PreferencesContainer';
-
-import { SpectraColumnsManager } from './base/SpectraColumnsManager';
+import { useChartData } from '../../context/ChartContext.js';
+import { usePreferences } from '../../context/PreferencesContext.js';
+import type { GroupPaneStyle } from '../../elements/GroupPane.js';
+import { GroupPane } from '../../elements/GroupPane.js';
+import { Scroller } from '../../elements/Scroller.js';
+import useNucleus from '../../hooks/useNucleus.js';
+import { usePanelPreferencesByNuclei } from '../../hooks/usePanelPreferences.js';
+import { getSpectraObjectPaths } from '../../utility/getSpectraObjectPaths.js';
+import { NucleusGroup } from '../extra/preferences/NucleusGroup.js';
+import { PreferencesContainer } from '../extra/preferences/PreferencesContainer.js';
+
+import { SpectraColumnsManager } from './base/SpectraColumnsManager.js';
 
 function replaceNucleusKeys(
   data: PanelsPreferences['spectra'],
diff --git a/src/component/panels/SpectraPanel/SpectraTable.tsx b/src/component/panels/SpectraPanel/SpectraTable.tsx
index 2e348152e..1c369558d 100644
--- a/src/component/panels/SpectraPanel/SpectraTable.tsx
+++ b/src/component/panels/SpectraPanel/SpectraTable.tsx
@@ -1,6 +1,6 @@
-import { saveAs } from 'file-saver';
-import lodashGet from 'lodash/get';
-import {
+import fileSaver from 'file-saver';
+import lodashGet from 'lodash/get.js';
+import type {
   ActiveSpectrum,
   JpathTableColumn,
   PredefinedSpectraColumn,
@@ -9,31 +9,30 @@ import {
   Spectrum,
   StateMolecule,
 } from 'nmr-load-save';
-import { useMemo, CSSProperties, useCallback, useState } from 'react';
-import { FaCopy, FaRegTrashAlt, FaFileExport } from 'react-icons/fa';
+import type { CSSProperties } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import { FaCopy, FaFileExport, FaRegTrashAlt } from 'react-icons/fa';
 import { IoColorPaletteOutline } from 'react-icons/io5';
 
-import { exportForCT } from '../../../data/SpectraManager';
-import { isSpectrum1D } from '../../../data/data1d/Spectrum1D';
-import { ClipboardFallbackModal } from '../../../utils/clipboard/clipboardComponents';
-import { useClipboard } from '../../../utils/clipboard/clipboardHooks';
-import { useChartData } from '../../context/ChartContext';
-import { useDispatch } from '../../context/DispatchContext';
-import { useToaster } from '../../context/ToasterContext';
-import {
-  ContextMenu,
-  ContextMenuItem,
-} from '../../elements/ContextMenuBluePrint';
-import ReactTable, { Column } from '../../elements/ReactTable/ReactTable';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
-import ExportAsJcampModal from '../../modal/ExportAsJcampModal';
-
-import ColorIndicator from './base/ColorIndicator';
-import { RenderAsHTML } from './base/RenderAsHTML';
-import ShowHideSpectrumButton, {
-  OnChangeVisibilityEvent,
-} from './base/ShowHideSpectrumButton';
-import { SpectrumName } from './base/SpectrumName';
+import { exportForCT } from '../../../data/SpectraManager.js';
+import { isSpectrum1D } from '../../../data/data1d/Spectrum1D/index.js';
+import { ClipboardFallbackModal } from '../../../utils/clipboard/clipboardComponents.js';
+import { useClipboard } from '../../../utils/clipboard/clipboardHooks.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { useToaster } from '../../context/ToasterContext.js';
+import type { ContextMenuItem } from '../../elements/ContextMenuBluePrint.js';
+import { ContextMenu } from '../../elements/ContextMenuBluePrint.js';
+import type { Column } from '../../elements/ReactTable/ReactTable.js';
+import ReactTable from '../../elements/ReactTable/ReactTable.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
+import ExportAsJcampModal from '../../modal/ExportAsJcampModal.js';
+
+import ColorIndicator from './base/ColorIndicator.js';
+import { RenderAsHTML } from './base/RenderAsHTML.js';
+import type { OnChangeVisibilityEvent } from './base/ShowHideSpectrumButton.js';
+import ShowHideSpectrumButton from './base/ShowHideSpectrumButton.js';
+import { SpectrumName } from './base/SpectrumName.js';
 
 function getActiveSpectraAsObject(activeSpectra: ActiveSpectrum[] | null) {
   const result = {};
@@ -250,7 +249,7 @@ export function SpectraTable(props: SpectraTableProps) {
         case SpectraContextMenuOptionsKeys.ExportAsText: {
           const data = convertSpectrumToText(spectrum);
           const blob = new Blob([data], { type: 'text/plain' });
-          saveAs(blob, `${spectrum.info.name}.tsv`);
+          fileSaver.saveAs(blob, `${spectrum.info.name}.tsv`);
           break;
         }
         case SpectraContextMenuOptionsKeys.CopyAsText: {
diff --git a/src/component/panels/SpectraPanel/SpectraTabs.tsx b/src/component/panels/SpectraPanel/SpectraTabs.tsx
index ed6cd7dda..dbcb1fdbe 100644
--- a/src/component/panels/SpectraPanel/SpectraTabs.tsx
+++ b/src/component/panels/SpectraPanel/SpectraTabs.tsx
@@ -1,18 +1,18 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { ActiveSpectrum, Spectrum } from 'nmr-load-save';
-import { useState, useMemo, memo, useCallback } from 'react';
+import type { ActiveSpectrum, Spectrum } from 'nmr-load-save';
+import { memo, useCallback, useMemo, useState } from 'react';
 
-import { useChartData } from '../../context/ChartContext';
-import { useDispatch } from '../../context/DispatchContext';
-import IsotopesViewer from '../../elements/IsotopesViewer';
-import Tab from '../../elements/Tab/Tab';
-import Tabs from '../../elements/Tab/Tabs';
-import { useSetActiveSpectrumAction } from '../../hooks/useSetActiveSpectrumAction';
-import groupByInfoKey from '../../utility/GroupByInfoKey';
+import { useChartData } from '../../context/ChartContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import IsotopesViewer from '../../elements/IsotopesViewer.js';
+import Tab from '../../elements/Tab/Tab.js';
+import Tabs from '../../elements/Tab/Tabs.js';
+import { useSetActiveSpectrumAction } from '../../hooks/useSetActiveSpectrumAction.js';
+import groupByInfoKey from '../../utility/GroupByInfoKey.js';
 
-import { SpectraTable } from './SpectraTable';
-import SpectrumSetting from './base/setting/SpectrumSetting';
+import { SpectraTable } from './SpectraTable.js';
+import SpectrumSetting from './base/setting/SpectrumSetting.js';
 
 interface SpectraTabsInnerProps {
   data: Spectrum[];
diff --git a/src/component/panels/SpectraPanel/SpectrumListPanel.tsx b/src/component/panels/SpectraPanel/SpectrumListPanel.tsx
index a14055c87..26491c9a9 100644
--- a/src/component/panels/SpectraPanel/SpectrumListPanel.tsx
+++ b/src/component/panels/SpectraPanel/SpectrumListPanel.tsx
@@ -1,10 +1,11 @@
-import { memo, useState, CSSProperties, useRef } from 'react';
+import type { CSSProperties } from 'react';
+import { memo, useRef, useState } from 'react';
 
-import PreferencesHeader from '../header/PreferencesHeader';
+import PreferencesHeader from '../header/PreferencesHeader.js';
 
-import SpectraPanelHeader from './SpectraPanelHeader';
-import SpectraPreferences from './SpectraPreferences';
-import SpectraTabs from './SpectraTabs';
+import SpectraPanelHeader from './SpectraPanelHeader.js';
+import SpectraPreferences from './SpectraPreferences.js';
+import SpectraTabs from './SpectraTabs.js';
 
 const styles: CSSProperties = {
   overflow: 'hidden',
diff --git a/src/component/panels/SpectraPanel/base/ColorIndicator.tsx b/src/component/panels/SpectraPanel/base/ColorIndicator.tsx
index a1ac65fc1..fbc860f96 100644
--- a/src/component/panels/SpectraPanel/base/ColorIndicator.tsx
+++ b/src/component/panels/SpectraPanel/base/ColorIndicator.tsx
@@ -1,5 +1,6 @@
-import { Display1D, Display2D } from 'nmr-load-save';
-import { CSSProperties, memo } from 'react';
+import type { Display1D, Display2D } from 'nmr-load-save';
+import type { CSSProperties } from 'react';
+import { memo } from 'react';
 
 const buttonStyle: CSSProperties = {
   backgroundColor: 'transparent',
diff --git a/src/component/panels/SpectraPanel/base/RenderAsHTML.tsx b/src/component/panels/SpectraPanel/base/RenderAsHTML.tsx
index 3c93fda43..792472e41 100644
--- a/src/component/panels/SpectraPanel/base/RenderAsHTML.tsx
+++ b/src/component/panels/SpectraPanel/base/RenderAsHTML.tsx
@@ -1,5 +1,5 @@
-import lodashGet from 'lodash/get';
-import { Spectrum } from 'nmr-load-save';
+import lodashGet from 'lodash/get.js';
+import type { Spectrum } from 'nmr-load-save';
 
 interface RenderAsHTMLProps {
   data: Spectrum;
diff --git a/src/component/panels/SpectraPanel/base/ShowHideSpectrumButton.tsx b/src/component/panels/SpectraPanel/base/ShowHideSpectrumButton.tsx
index bbbb39718..154c75f0c 100644
--- a/src/component/panels/SpectraPanel/base/ShowHideSpectrumButton.tsx
+++ b/src/component/panels/SpectraPanel/base/ShowHideSpectrumButton.tsx
@@ -1,5 +1,5 @@
-import { Display1D, Display2D, Spectrum } from 'nmr-load-save';
-import { CSSProperties } from 'react';
+import type { Display1D, Display2D, Spectrum } from 'nmr-load-save';
+import type { CSSProperties } from 'react';
 import { FaEye } from 'react-icons/fa';
 
 const buttonStyle: CSSProperties = {
diff --git a/src/component/panels/SpectraPanel/base/SpectraColumnsManager.tsx b/src/component/panels/SpectraPanel/base/SpectraColumnsManager.tsx
index e5fa3a7af..a843df2df 100644
--- a/src/component/panels/SpectraPanel/base/SpectraColumnsManager.tsx
+++ b/src/component/panels/SpectraPanel/base/SpectraColumnsManager.tsx
@@ -1,14 +1,15 @@
 import { Checkbox, Classes } from '@blueprintjs/core';
-import { SpectraTableColumn } from 'nmr-load-save';
+import type { SpectraTableColumn } from 'nmr-load-save';
 import { useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { FaPlus, FaRegTrashAlt } from 'react-icons/fa';
 import { Button } from 'react-science/ui';
 
-import { InputStyle } from '../../../elements/Input';
-import { Input2Controller } from '../../../elements/Input2Controller';
-import ReactTable, { Column } from '../../../elements/ReactTable/ReactTable';
-import { convertPathArrayToString } from '../../../utility/convertPathArrayToString';
+import type { InputStyle } from '../../../elements/Input.js';
+import { Input2Controller } from '../../../elements/Input2Controller.js';
+import type { Column } from '../../../elements/ReactTable/ReactTable.js';
+import ReactTable from '../../../elements/ReactTable/ReactTable.js';
+import { convertPathArrayToString } from '../../../utility/convertPathArrayToString.js';
 
 const inputStyle: InputStyle = {
   input: {
diff --git a/src/component/panels/SpectraPanel/base/SpectrumName.tsx b/src/component/panels/SpectraPanel/base/SpectrumName.tsx
index 8c15c1fe4..47d24fea2 100644
--- a/src/component/panels/SpectraPanel/base/SpectrumName.tsx
+++ b/src/component/panels/SpectraPanel/base/SpectrumName.tsx
@@ -1,6 +1,6 @@
 import { SvgNmr2D, SvgNmrFid, SvgNmrFt } from 'cheminfo-font';
-import { Spectrum } from 'nmr-load-save';
-import { CSSProperties } from 'react';
+import type { Spectrum } from 'nmr-load-save';
+import type { CSSProperties } from 'react';
 
 interface SpectrumNameProps {
   data: Spectrum;
diff --git a/src/component/panels/SpectraPanel/base/setting/PlotChart.tsx b/src/component/panels/SpectraPanel/base/setting/PlotChart.tsx
index 118d2e056..32bc67d90 100644
--- a/src/component/panels/SpectraPanel/base/setting/PlotChart.tsx
+++ b/src/component/panels/SpectraPanel/base/setting/PlotChart.tsx
@@ -1,11 +1,5 @@
-import {
-  Axis,
-  Heading,
-  Legend,
-  LineSeries,
-  Plot,
-  SeriesPoint,
-} from 'react-plot';
+import type { SeriesPoint } from 'react-plot';
+import { Axis, Heading, Legend, LineSeries, Plot } from 'react-plot';
 
 interface PlotData {
   positive: SeriesPoint[];
diff --git a/src/component/panels/SpectraPanel/base/setting/Spectrum1DHistogram.tsx b/src/component/panels/SpectraPanel/base/setting/Spectrum1DHistogram.tsx
index 222b4b636..7520c2b7c 100644
--- a/src/component/panels/SpectraPanel/base/setting/Spectrum1DHistogram.tsx
+++ b/src/component/panels/SpectraPanel/base/setting/Spectrum1DHistogram.tsx
@@ -1,7 +1,7 @@
 import { memo, useMemo } from 'react';
 
-import PlotChart from './PlotChart';
-import { processSnapPlot } from './processSnapPlot';
+import PlotChart from './PlotChart.js';
+import { processSnapPlot } from './processSnapPlot.js';
 
 const yLogBase = 2;
 interface Spectrum1DHistogramProps {
diff --git a/src/component/panels/SpectraPanel/base/setting/Spectrum1DSetting.tsx b/src/component/panels/SpectraPanel/base/setting/Spectrum1DSetting.tsx
index 0a45511e1..355ea2da1 100644
--- a/src/component/panels/SpectraPanel/base/setting/Spectrum1DSetting.tsx
+++ b/src/component/panels/SpectraPanel/base/setting/Spectrum1DSetting.tsx
@@ -1,10 +1,10 @@
 import { Controller, useForm } from 'react-hook-form';
 import { ColorPicker } from 'react-science/ui';
 
-import { COLORS } from '../../../../../data/utilities/generateColor';
-import { colorToHexWithAlpha } from '../../../../utility/colorToHexWithAlpha';
+import { COLORS } from '../../../../../data/utilities/generateColor.js';
+import { colorToHexWithAlpha } from '../../../../utility/colorToHexWithAlpha.js';
 
-import Spectrum1DHistogram from './Spectrum1DHistogram';
+import Spectrum1DHistogram from './Spectrum1DHistogram.js';
 
 interface Spectrum1DSettingProps {
   data: any;
diff --git a/src/component/panels/SpectraPanel/base/setting/Spectrum2DHistogram.tsx b/src/component/panels/SpectraPanel/base/setting/Spectrum2DHistogram.tsx
index a5a2d7bd8..9cf78e280 100644
--- a/src/component/panels/SpectraPanel/base/setting/Spectrum2DHistogram.tsx
+++ b/src/component/panels/SpectraPanel/base/setting/Spectrum2DHistogram.tsx
@@ -1,7 +1,7 @@
 import { memo, useMemo } from 'react';
 
-import PlotChart from './PlotChart';
-import { processSnapPlot } from './processSnapPlot';
+import PlotChart from './PlotChart.js';
+import { processSnapPlot } from './processSnapPlot.js';
 
 interface Spectrum2DHistogramProps {
   color?: string;
diff --git a/src/component/panels/SpectraPanel/base/setting/Spectrum2DSetting.tsx b/src/component/panels/SpectraPanel/base/setting/Spectrum2DSetting.tsx
index 66d285922..c2f522ac3 100644
--- a/src/component/panels/SpectraPanel/base/setting/Spectrum2DSetting.tsx
+++ b/src/component/panels/SpectraPanel/base/setting/Spectrum2DSetting.tsx
@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { RangeSlider } from '@blueprintjs/core';
 import { css } from '@emotion/react';
-import debounce from 'lodash/debounce';
+import debounce from 'lodash/debounce.js';
 import { useMemo } from 'react';
 import {
   Controller,
@@ -12,12 +12,12 @@ import {
 } from 'react-hook-form';
 import { ColorPicker } from 'react-science/ui';
 
-import { COLORS } from '../../../../../data/utilities/generateColor';
-import { NumberInput2 } from '../../../../elements/NumberInput2';
-import { useFormValidateField } from '../../../../elements/useFormValidateField';
-import { colorToHexWithAlpha } from '../../../../utility/colorToHexWithAlpha';
+import { COLORS } from '../../../../../data/utilities/generateColor.js';
+import { NumberInput2 } from '../../../../elements/NumberInput2.js';
+import { useFormValidateField } from '../../../../elements/useFormValidateField.js';
+import { colorToHexWithAlpha } from '../../../../utility/colorToHexWithAlpha.js';
 
-import Spectrum2DHistogram from './Spectrum2DHistogram';
+import Spectrum2DHistogram from './Spectrum2DHistogram.js';
 
 interface Spectrum2DSettingProps {
   data: any;
diff --git a/src/component/panels/SpectraPanel/base/setting/SpectrumSetting.tsx b/src/component/panels/SpectraPanel/base/setting/SpectrumSetting.tsx
index a9ed56097..bcf347301 100644
--- a/src/component/panels/SpectraPanel/base/setting/SpectrumSetting.tsx
+++ b/src/component/panels/SpectraPanel/base/setting/SpectrumSetting.tsx
@@ -2,10 +2,10 @@
 import { css } from '@emotion/react';
 import { memo, useCallback } from 'react';
 
-import { useDispatch } from '../../../../context/DispatchContext';
+import { useDispatch } from '../../../../context/DispatchContext.js';
 
-import Spectrum1DSetting from './Spectrum1DSetting';
-import Spectrum2DSetting from './Spectrum2DSetting';
+import Spectrum1DSetting from './Spectrum1DSetting.js';
+import Spectrum2DSetting from './Spectrum2DSetting.js';
 
 const style = css`
   position: fixed;
diff --git a/src/component/panels/SpectraPanel/base/setting/processSnapPlot.ts b/src/component/panels/SpectraPanel/base/setting/processSnapPlot.ts
index 1168211d6..08bda8b29 100644
--- a/src/component/panels/SpectraPanel/base/setting/processSnapPlot.ts
+++ b/src/component/panels/SpectraPanel/base/setting/processSnapPlot.ts
@@ -1,7 +1,7 @@
-import { NmrData2DFt, NmrData1D } from 'cheminfo-types';
+import type { NmrData1D, NmrData2DFt } from 'cheminfo-types';
 import { xyReduce } from 'ml-spectra-processing';
 
-import { calculateSanPlot } from '../../../../../data/utilities/calculateSanPlot';
+import { calculateSanPlot } from '../../../../../data/utilities/calculateSanPlot.js';
 
 export function processSnapPlot<T extends '1D' | '2D'>(
   dimension: T,
diff --git a/src/component/panels/SummaryPanel/CorrelationTable/AdditionalColumnField.tsx b/src/component/panels/SummaryPanel/CorrelationTable/AdditionalColumnField.tsx
index 35002e725..014aa81fd 100644
--- a/src/component/panels/SummaryPanel/CorrelationTable/AdditionalColumnField.tsx
+++ b/src/component/panels/SummaryPanel/CorrelationTable/AdditionalColumnField.tsx
@@ -1,19 +1,21 @@
 import { v4 } from '@lukeed/uuid';
-import { buildLink, Correlation, Link } from 'nmr-correlation';
+import type { Correlation, Link } from 'nmr-correlation';
+import { buildLink } from 'nmr-correlation';
 import { useCallback, useMemo } from 'react';
 
-import { buildID } from '../../../../data/utilities/Concatenation';
-import { findRangeOrZoneID } from '../../../../data/utilities/FindUtilities';
-import { ContextMenu } from '../../../elements/ContextMenuBluePrint';
-import { useDialog } from '../../../elements/DialogManager';
-import { useHighlight } from '../../../highlight';
+import { buildID } from '../../../../data/utilities/Concatenation.js';
+import { findRangeOrZoneID } from '../../../../data/utilities/FindUtilities.js';
+import { ContextMenu } from '../../../elements/ContextMenuBluePrint.js';
+import { useDialog } from '../../../elements/DialogManager.js';
+import { useHighlight } from '../../../highlight/index.js';
 import {
   cloneCorrelationAndEditLink,
   getAbbreviation,
-} from '../utilities/Utilities';
-import useInView from '../utilities/useInView';
+} from '../utilities/Utilities.js';
+import useInView from '../utilities/useInView.js';
 
-import { EditLinkModal, EditLinkDialogData } from './editLink/EditLinkModal';
+import type { EditLinkDialogData } from './editLink/EditLinkModal.js';
+import { EditLinkModal } from './editLink/EditLinkModal.js';
 
 function getLinkText(link: Link) {
   const {
diff --git a/src/component/panels/SummaryPanel/CorrelationTable/AdditionalColumnHeader.tsx b/src/component/panels/SummaryPanel/CorrelationTable/AdditionalColumnHeader.tsx
index 1179c7f54..0834c205f 100644
--- a/src/component/panels/SummaryPanel/CorrelationTable/AdditionalColumnHeader.tsx
+++ b/src/component/panels/SummaryPanel/CorrelationTable/AdditionalColumnHeader.tsx
@@ -2,19 +2,18 @@
 import { getCorrelationDelta, getLinkDim } from 'nmr-correlation';
 import { useCallback, useMemo } from 'react';
 
-import { buildID } from '../../../../data/utilities/Concatenation';
-import { findRangeOrZoneID } from '../../../../data/utilities/FindUtilities';
-import { useAlert } from '../../../elements/Alert';
-import {
-  ContextMenu,
-  ContextMenuItem,
-} from '../../../elements/ContextMenuBluePrint';
-import { useDialog } from '../../../elements/DialogManager';
-import { useHighlight } from '../../../highlight';
-import { getLabelColor } from '../utilities/Utilities';
-import useInView from '../utilities/useInView';
-
-import { EditLinkModal, EditLinkDialogData } from './editLink/EditLinkModal';
+import { buildID } from '../../../../data/utilities/Concatenation.js';
+import { findRangeOrZoneID } from '../../../../data/utilities/FindUtilities.js';
+import { useAlert } from '../../../elements/Alert.js';
+import type { ContextMenuItem } from '../../../elements/ContextMenuBluePrint.js';
+import { ContextMenu } from '../../../elements/ContextMenuBluePrint.js';
+import { useDialog } from '../../../elements/DialogManager.js';
+import { useHighlight } from '../../../highlight/index.js';
+import { getLabelColor } from '../utilities/Utilities.js';
+import useInView from '../utilities/useInView.js';
+
+import type { EditLinkDialogData } from './editLink/EditLinkModal.js';
+import { EditLinkModal } from './editLink/EditLinkModal.js';
 
 function AdditionalColumnHeader({
   spectraData,
diff --git a/src/component/panels/SummaryPanel/CorrelationTable/CorrelationTable.tsx b/src/component/panels/SummaryPanel/CorrelationTable/CorrelationTable.tsx
index 639b677ad..67d4f5343 100644
--- a/src/component/panels/SummaryPanel/CorrelationTable/CorrelationTable.tsx
+++ b/src/component/panels/SummaryPanel/CorrelationTable/CorrelationTable.tsx
@@ -1,12 +1,12 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { Correlation } from 'nmr-correlation';
+import type { Correlation } from 'nmr-correlation';
 import { useMemo } from 'react';
 
-import { getLabelColor } from '../utilities/Utilities';
+import { getLabelColor } from '../utilities/Utilities.js';
 
-import AdditionalColumnHeader from './AdditionalColumnHeader';
-import CorrelationTableRow from './CorrelationTableRow';
+import AdditionalColumnHeader from './AdditionalColumnHeader.js';
+import CorrelationTableRow from './CorrelationTableRow.js';
 
 const tableStyle = css`
   overflow: auto;
diff --git a/src/component/panels/SummaryPanel/CorrelationTable/CorrelationTableRow.tsx b/src/component/panels/SummaryPanel/CorrelationTable/CorrelationTableRow.tsx
index 7f06474ee..53581b21f 100644
--- a/src/component/panels/SummaryPanel/CorrelationTable/CorrelationTableRow.tsx
+++ b/src/component/panels/SummaryPanel/CorrelationTable/CorrelationTableRow.tsx
@@ -1,27 +1,26 @@
+import type { Link } from 'nmr-correlation';
 import {
   buildLink,
   getCorrelationDelta,
   getLabel,
   getLinkDim,
-  Link,
 } from 'nmr-correlation';
 import { useCallback, useMemo } from 'react';
 
-import { buildID } from '../../../../data/utilities/Concatenation';
-import { findRangeOrZoneID } from '../../../../data/utilities/FindUtilities';
-import { useAlert } from '../../../elements/Alert';
-import {
-  ContextMenu,
-  ContextMenuItem,
-} from '../../../elements/ContextMenuBluePrint';
-import { useDialog } from '../../../elements/DialogManager';
-import EditableColumn from '../../../elements/EditableColumn';
-import { useHighlight } from '../../../highlight';
-import { convertValuesString } from '../utilities/Utilities';
-import useInView from '../utilities/useInView';
+import { buildID } from '../../../../data/utilities/Concatenation.js';
+import { findRangeOrZoneID } from '../../../../data/utilities/FindUtilities.js';
+import { useAlert } from '../../../elements/Alert.js';
+import type { ContextMenuItem } from '../../../elements/ContextMenuBluePrint.js';
+import { ContextMenu } from '../../../elements/ContextMenuBluePrint.js';
+import { useDialog } from '../../../elements/DialogManager.js';
+import EditableColumn from '../../../elements/EditableColumn.js';
+import { useHighlight } from '../../../highlight/index.js';
+import { convertValuesString } from '../utilities/Utilities.js';
+import useInView from '../utilities/useInView.js';
 
-import AdditionalColumnField from './AdditionalColumnField';
-import { EditLinkModal, EditLinkDialogData } from './editLink/EditLinkModal';
+import AdditionalColumnField from './AdditionalColumnField.js';
+import type { EditLinkDialogData } from './editLink/EditLinkModal.js';
+import { EditLinkModal } from './editLink/EditLinkModal.js';
 
 function CorrelationTableRow({
   additionalColumnData,
diff --git a/src/component/panels/SummaryPanel/CorrelationTable/editLink/EditLinkModal.tsx b/src/component/panels/SummaryPanel/CorrelationTable/editLink/EditLinkModal.tsx
index 5a8f56e13..7c07e7328 100644
--- a/src/component/panels/SummaryPanel/CorrelationTable/editLink/EditLinkModal.tsx
+++ b/src/component/panels/SummaryPanel/CorrelationTable/editLink/EditLinkModal.tsx
@@ -1,16 +1,17 @@
 /** @jsxImportSource @emotion/react */
 import { DialogBody, Tab, Tabs } from '@blueprintjs/core';
-import { getLinkDim, Link, Correlation } from 'nmr-correlation';
+import type { Correlation, Link } from 'nmr-correlation';
+import { getLinkDim } from 'nmr-correlation';
 
-import { useChartData } from '../../../../context/ChartContext';
-import { DialogProps } from '../../../../elements/DialogManager';
-import { DraggableDialog } from '../../../../elements/DraggableDialog';
-import { OnEditCorrelationCallback } from '../../SummaryPanel';
-import { getEditedCorrelations } from '../../utilities/Utilities';
+import { useChartData } from '../../../../context/ChartContext.js';
+import type { DialogProps } from '../../../../elements/DialogManager.js';
+import { DraggableDialog } from '../../../../elements/DraggableDialog.js';
+import type { OnEditCorrelationCallback } from '../../SummaryPanel.js';
+import { getEditedCorrelations } from '../../utilities/Utilities.js';
 
-import EditLinkConfirmation from './Confirmation';
-import EditPathLength from './EditPathLength';
-import MoveLink from './MoveLink';
+import EditLinkConfirmation from './Confirmation.js';
+import EditPathLength from './EditPathLength.js';
+import MoveLink from './MoveLink.js';
 
 export interface EditLinkDialogData {
   correlationDim1: Correlation;
diff --git a/src/component/panels/SummaryPanel/CorrelationTable/editLink/EditPathLength.tsx b/src/component/panels/SummaryPanel/CorrelationTable/editLink/EditPathLength.tsx
index f8a616f06..1ebe1b829 100644
--- a/src/component/panels/SummaryPanel/CorrelationTable/editLink/EditPathLength.tsx
+++ b/src/component/panels/SummaryPanel/CorrelationTable/editLink/EditPathLength.tsx
@@ -1,13 +1,13 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { FromTo } from 'cheminfo-types';
-import { Signal2D } from 'nmr-processing';
+import type { FromTo } from 'cheminfo-types';
+import type { Signal2D } from 'nmr-processing';
 import { useCallback, useEffect, useState } from 'react';
 
-import DefaultPathLengths from '../../../../../data/constants/DefaultPathLengths';
-import Button from '../../../../elements/Button';
-import Input from '../../../../elements/Input';
-import Label from '../../../../elements/Label';
+import DefaultPathLengths from '../../../../../data/constants/DefaultPathLengths.js';
+import Button from '../../../../elements/Button.js';
+import Input from '../../../../elements/Input.js';
+import Label from '../../../../elements/Label.js';
 
 const editPathLengthsStyles = css`
   width: 100%;
diff --git a/src/component/panels/SummaryPanel/CorrelationTable/editLink/MoveLink.tsx b/src/component/panels/SummaryPanel/CorrelationTable/editLink/MoveLink.tsx
index 0eb49c1c0..00d5626c2 100644
--- a/src/component/panels/SummaryPanel/CorrelationTable/editLink/MoveLink.tsx
+++ b/src/component/panels/SummaryPanel/CorrelationTable/editLink/MoveLink.tsx
@@ -1,9 +1,10 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { getCorrelationDelta, Correlation, Link } from 'nmr-correlation';
+import type { Correlation, Link } from 'nmr-correlation';
+import { getCorrelationDelta } from 'nmr-correlation';
 import { useCallback, useState } from 'react';
 
-import Select from '../../../../elements/Select';
+import Select from '../../../../elements/Select.js';
 
 const moveLinkStyles = css`
   width: 100%;
diff --git a/src/component/panels/SummaryPanel/Overview.tsx b/src/component/panels/SummaryPanel/Overview.tsx
index 49b207c4b..af0dc12a7 100644
--- a/src/component/panels/SummaryPanel/Overview.tsx
+++ b/src/component/panels/SummaryPanel/Overview.tsx
@@ -3,7 +3,7 @@ import { css } from '@emotion/react';
 import { getAtomCounts } from 'nmr-correlation';
 import { memo } from 'react';
 
-import { ErrorColors, Errors } from './CorrelationTable/Constants';
+import { ErrorColors, Errors } from './CorrelationTable/Constants.js';
 
 const styles = css`
   display: flex;
diff --git a/src/component/panels/SummaryPanel/SetMolecularFormulaModal.tsx b/src/component/panels/SummaryPanel/SetMolecularFormulaModal.tsx
index b1c1018b1..9b203d910 100644
--- a/src/component/panels/SummaryPanel/SetMolecularFormulaModal.tsx
+++ b/src/component/panels/SummaryPanel/SetMolecularFormulaModal.tsx
@@ -1,15 +1,16 @@
 import { Dialog, DialogBody, Tab, Tabs } from '@blueprintjs/core';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { CSSProperties, useState } from 'react';
+import type { CSSProperties } from 'react';
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 
-import getAtomsFromMF from '../../../data/utilities/getAtomsFromMF';
-import { useChartData } from '../../context/ChartContext';
-import { useDispatch } from '../../context/DispatchContext';
-import Button from '../../elements/Button';
-import { Input2Controller } from '../../elements/Input2Controller';
-import MoleculeSelection from '../../elements/MoleculeSelection';
+import getAtomsFromMF from '../../../data/utilities/getAtomsFromMF.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import Button from '../../elements/Button.js';
+import { Input2Controller } from '../../elements/Input2Controller.js';
+import MoleculeSelection from '../../elements/MoleculeSelection.js';
 
 function isValidMf(value: string): boolean {
   try {
diff --git a/src/component/panels/SummaryPanel/SetShiftTolerancesModal.tsx b/src/component/panels/SummaryPanel/SetShiftTolerancesModal.tsx
index a0ebce828..8478638ed 100644
--- a/src/component/panels/SummaryPanel/SetShiftTolerancesModal.tsx
+++ b/src/component/panels/SummaryPanel/SetShiftTolerancesModal.tsx
@@ -1,16 +1,17 @@
 /** @jsxImportSource @emotion/react */
 import { Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { Tolerance } from 'nmr-correlation';
+import type { Tolerance } from 'nmr-correlation';
 import { useMemo } from 'react';
 import { useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 
-import { useChartData } from '../../context/ChartContext';
-import { useDispatch } from '../../context/DispatchContext';
-import Button from '../../elements/Button';
-import { NumberInput2Controller } from '../../elements/NumberInput2Controller';
-import ReactTable, { Column } from '../../elements/ReactTable/ReactTable';
+import { useChartData } from '../../context/ChartContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import Button from '../../elements/Button.js';
+import { NumberInput2Controller } from '../../elements/NumberInput2Controller.js';
+import type { Column } from '../../elements/ReactTable/ReactTable.js';
+import ReactTable from '../../elements/ReactTable/ReactTable.js';
 
 interface ToleranceItem {
   atom: string;
diff --git a/src/component/panels/SummaryPanel/SummaryPanel.tsx b/src/component/panels/SummaryPanel/SummaryPanel.tsx
index 49dac8883..bfaa0b21e 100644
--- a/src/component/panels/SummaryPanel/SummaryPanel.tsx
+++ b/src/component/panels/SummaryPanel/SummaryPanel.tsx
@@ -1,14 +1,13 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import {
-  getLinkDelta,
-  getLinkDim,
+import type {
   Correlation,
-  Values as CorrelationValues,
-  Options as CorrelationOptions,
   Link,
+  Options as CorrelationOptions,
+  Values as CorrelationValues,
 } from 'nmr-correlation';
-import { Spectrum1D, Spectrum2D } from 'nmr-load-save';
+import { getLinkDelta, getLinkDim } from 'nmr-correlation';
+import type { Spectrum1D, Spectrum2D } from 'nmr-load-save';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { FaFlask, FaSlidersH } from 'react-icons/fa';
 
@@ -18,25 +17,25 @@ import {
   findSignal2D,
   findSpectrum,
   findZone,
-} from '../../../data/utilities/FindUtilities';
-import { useAssignmentData } from '../../assignment/AssignmentsContext';
-import { useChartData } from '../../context/ChartContext';
-import { useDispatch } from '../../context/DispatchContext';
-import { withDialog } from '../../elements/DialogManager';
-import Select from '../../elements/Select';
-import { useDialogToggle } from '../../hooks/useDialogToggle';
-import DefaultPanelHeader from '../header/DefaultPanelHeader';
-
-import CorrelationTable from './CorrelationTable/CorrelationTable';
-import { EditLinkModal } from './CorrelationTable/editLink/EditLinkModal';
-import Overview from './Overview';
-import { SetMolecularFormulaModal } from './SetMolecularFormulaModal';
-import { SetShiftToleranceModal } from './SetShiftTolerancesModal';
+} from '../../../data/utilities/FindUtilities.js';
+import { useAssignmentData } from '../../assignment/AssignmentsContext.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { withDialog } from '../../elements/DialogManager.js';
+import Select from '../../elements/Select.js';
+import { useDialogToggle } from '../../hooks/useDialogToggle.js';
+import DefaultPanelHeader from '../header/DefaultPanelHeader.js';
+
+import CorrelationTable from './CorrelationTable/CorrelationTable.js';
+import { EditLinkModal } from './CorrelationTable/editLink/EditLinkModal.js';
+import Overview from './Overview.js';
+import { SetMolecularFormulaModal } from './SetMolecularFormulaModal.js';
+import { SetShiftToleranceModal } from './SetShiftTolerancesModal.js';
 import {
   findSignalMatch1D,
   findSignalMatch2D,
   getAtomType,
-} from './utilities/Utilities';
+} from './utilities/Utilities.js';
 
 type EditCorrelationAction =
   | 'add'
diff --git a/src/component/panels/SummaryPanel/utilities/Utilities.ts b/src/component/panels/SummaryPanel/utilities/Utilities.ts
index 743fcae3a..c22af0c46 100644
--- a/src/component/panels/SummaryPanel/utilities/Utilities.ts
+++ b/src/component/panels/SummaryPanel/utilities/Utilities.ts
@@ -1,6 +1,7 @@
-import { FromTo } from 'cheminfo-types';
-import lodashCloneDeep from 'lodash/cloneDeep';
-import lodashGet from 'lodash/get';
+import type { FromTo } from 'cheminfo-types';
+import lodashCloneDeep from 'lodash/cloneDeep.js';
+import lodashGet from 'lodash/get.js';
+import type { Correlation, Link } from 'nmr-correlation';
 import {
   addLink,
   buildCorrelation,
@@ -8,19 +9,17 @@ import {
   getLinkDelta,
   getLinkDim,
   removeLink,
-  Correlation,
-  Link,
 } from 'nmr-correlation';
-import { Spectrum2D, Spectrum, ActiveSpectrum } from 'nmr-load-save';
+import type { ActiveSpectrum, Spectrum, Spectrum2D } from 'nmr-load-save';
 
-import DefaultPathLengths from '../../../../data/constants/DefaultPathLengths';
+import DefaultPathLengths from '../../../../data/constants/DefaultPathLengths.js';
 import {
   findSignal2D,
   findSpectrum,
-} from '../../../../data/utilities/FindUtilities';
-import { isDefaultPathLength } from '../../../modal/editZone/validation/isDefaultPathLength';
-import { DisplayerMode } from '../../../reducer/Reducer';
-import { ErrorColors } from '../CorrelationTable/Constants';
+} from '../../../../data/utilities/FindUtilities.js';
+import { isDefaultPathLength } from '../../../modal/editZone/validation/isDefaultPathLength.js';
+import type { DisplayerMode } from '../../../reducer/Reducer.js';
+import { ErrorColors } from '../CorrelationTable/Constants.js';
 
 function getAtomType(nucleus: string): string {
   return nucleus.split(/\d+/)[1];
diff --git a/src/component/panels/SummaryPanel/utilities/useInView.ts b/src/component/panels/SummaryPanel/utilities/useInView.ts
index 697279ddd..789846969 100644
--- a/src/component/panels/SummaryPanel/utilities/useInView.ts
+++ b/src/component/panels/SummaryPanel/utilities/useInView.ts
@@ -1,10 +1,10 @@
-import { Correlation } from 'nmr-correlation';
+import type { Correlation } from 'nmr-correlation';
 import { useMemo } from 'react';
 
-import { useChartData } from '../../../context/ChartContext';
-import { useActiveSpectrum } from '../../../hooks/useActiveSpectrum';
+import { useChartData } from '../../../context/ChartContext.js';
+import { useActiveSpectrum } from '../../../hooks/useActiveSpectrum.js';
 
-import { isInView } from './Utilities';
+import { isInView } from './Utilities.js';
 
 interface InputProps {
   correlation: Correlation;
diff --git a/src/component/panels/ZonesPanel/TableColumns/ActionsColumn.tsx b/src/component/panels/ZonesPanel/TableColumns/ActionsColumn.tsx
index 270134dd6..6758321d8 100644
--- a/src/component/panels/ZonesPanel/TableColumns/ActionsColumn.tsx
+++ b/src/component/panels/ZonesPanel/TableColumns/ActionsColumn.tsx
@@ -1,13 +1,13 @@
 import { FaEdit, FaRegTrashAlt, FaSearchPlus } from 'react-icons/fa';
 
-import { SIGNAL_KINDS } from '../../../../data/constants/signalsKinds';
-import { useAssignmentData } from '../../../assignment/AssignmentsContext';
-import { useDispatch } from '../../../context/DispatchContext';
-import { useDialog } from '../../../elements/DialogManager';
-import { Select2 } from '../../../elements/Select2';
-import { EditZoneModal } from '../../../modal/editZone/EditZoneModal';
-import { ZoneData } from '../hooks/useMapZones';
-import { useZoneActions } from '../hooks/useZoneActions';
+import { SIGNAL_KINDS } from '../../../../data/constants/signalsKinds.js';
+import { useAssignmentData } from '../../../assignment/AssignmentsContext.js';
+import { useDispatch } from '../../../context/DispatchContext.js';
+import { useDialog } from '../../../elements/DialogManager.js';
+import { Select2 } from '../../../elements/Select2.js';
+import { EditZoneModal } from '../../../modal/editZone/EditZoneModal.js';
+import type { ZoneData } from '../hooks/useMapZones.js';
+import { useZoneActions } from '../hooks/useZoneActions.js';
 
 interface ActionsColumnProps {
   rowData: ZoneData;
diff --git a/src/component/panels/ZonesPanel/TableColumns/SignalAssignmentsColumn.tsx b/src/component/panels/ZonesPanel/TableColumns/SignalAssignmentsColumn.tsx
index 9891488e7..e24f88206 100644
--- a/src/component/panels/ZonesPanel/TableColumns/SignalAssignmentsColumn.tsx
+++ b/src/component/panels/ZonesPanel/TableColumns/SignalAssignmentsColumn.tsx
@@ -1,13 +1,16 @@
 /** @jsxImportSource @emotion/react */
 
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
-import { AssignmentsData, Axis } from '../../../assignment/AssignmentsContext';
+import type {
+  AssignmentsData,
+  Axis,
+} from '../../../assignment/AssignmentsContext.js';
 import {
-  RemoveAssignmentsButton,
   removeAssignmentCssStyle,
-} from '../../../elements/RemoveAssignmentsButton';
-import { ZoneData } from '../hooks/useMapZones';
+  RemoveAssignmentsButton,
+} from '../../../elements/RemoveAssignmentsButton.js';
+import type { ZoneData } from '../hooks/useMapZones.js';
 
 export interface SignalAssignmentsColumnProps {
   rowData: ZoneData;
diff --git a/src/component/panels/ZonesPanel/TableColumns/SignalAssignmentsColumns.tsx b/src/component/panels/ZonesPanel/TableColumns/SignalAssignmentsColumns.tsx
index fae217f45..b643a1459 100644
--- a/src/component/panels/ZonesPanel/TableColumns/SignalAssignmentsColumns.tsx
+++ b/src/component/panels/ZonesPanel/TableColumns/SignalAssignmentsColumns.tsx
@@ -1,9 +1,12 @@
 import { Fragment } from 'react';
 
-import { AssignmentsData, Axis } from '../../../assignment/AssignmentsContext';
-import { ZoneData } from '../hooks/useMapZones';
+import type {
+  AssignmentsData,
+  Axis,
+} from '../../../assignment/AssignmentsContext.js';
+import type { ZoneData } from '../hooks/useMapZones.js';
 
-import SignalAssignmentsColumn from './SignalAssignmentsColumn';
+import SignalAssignmentsColumn from './SignalAssignmentsColumn.js';
 
 interface SignalAssignmentsColumnsProps {
   rowData: ZoneData;
diff --git a/src/component/panels/ZonesPanel/TableColumns/SignalDeltaColumn.tsx b/src/component/panels/ZonesPanel/TableColumns/SignalDeltaColumn.tsx
index 457584475..92f34887d 100644
--- a/src/component/panels/ZonesPanel/TableColumns/SignalDeltaColumn.tsx
+++ b/src/component/panels/ZonesPanel/TableColumns/SignalDeltaColumn.tsx
@@ -1,10 +1,10 @@
-import lodashGet from 'lodash/get';
+import lodashGet from 'lodash/get.js';
 
-import { useDispatch } from '../../../context/DispatchContext';
-import EditableColumn from '../../../elements/EditableColumn';
-import { usePanelPreferences } from '../../../hooks/usePanelPreferences';
-import { formatNumber } from '../../../utility/formatNumber';
-import { ZoneData } from '../hooks/useMapZones';
+import { useDispatch } from '../../../context/DispatchContext.js';
+import EditableColumn from '../../../elements/EditableColumn.js';
+import { usePanelPreferences } from '../../../hooks/usePanelPreferences.js';
+import { formatNumber } from '../../../utility/formatNumber.js';
+import type { ZoneData } from '../hooks/useMapZones.js';
 
 interface SignalDeltaColumnProps {
   rowData: ZoneData;
diff --git a/src/component/panels/ZonesPanel/TableColumns/ZoneAssignmentLabelColumn.tsx b/src/component/panels/ZonesPanel/TableColumns/ZoneAssignmentLabelColumn.tsx
index 0944b1aa5..4ec1fe798 100644
--- a/src/component/panels/ZonesPanel/TableColumns/ZoneAssignmentLabelColumn.tsx
+++ b/src/component/panels/ZonesPanel/TableColumns/ZoneAssignmentLabelColumn.tsx
@@ -1,6 +1,6 @@
-import { useDispatch } from '../../../context/DispatchContext';
-import EditableColumn from '../../../elements/EditableColumn';
-import { ZoneData } from '../hooks/useMapZones';
+import { useDispatch } from '../../../context/DispatchContext.js';
+import EditableColumn from '../../../elements/EditableColumn.js';
+import type { ZoneData } from '../hooks/useMapZones.js';
 
 interface ZoneAssignmentLabelColumnProps {
   rowData: ZoneData;
diff --git a/src/component/panels/ZonesPanel/TableColumns/ZoneAssignmentsColumn.tsx b/src/component/panels/ZonesPanel/TableColumns/ZoneAssignmentsColumn.tsx
index f383137a1..102d6c171 100644
--- a/src/component/panels/ZonesPanel/TableColumns/ZoneAssignmentsColumn.tsx
+++ b/src/component/panels/ZonesPanel/TableColumns/ZoneAssignmentsColumn.tsx
@@ -1,12 +1,15 @@
 /** @jsxImportSource @emotion/react */
-import { MouseEvent } from 'react';
+import type { MouseEvent } from 'react';
 
-import { AssignmentsData, Axis } from '../../../assignment/AssignmentsContext';
+import type {
+  AssignmentsData,
+  Axis,
+} from '../../../assignment/AssignmentsContext.js';
 import {
-  RemoveAssignmentsButton,
   removeAssignmentCssStyle,
-} from '../../../elements/RemoveAssignmentsButton';
-import { ZoneData } from '../hooks/useMapZones';
+  RemoveAssignmentsButton,
+} from '../../../elements/RemoveAssignmentsButton.js';
+import type { ZoneData } from '../hooks/useMapZones.js';
 
 function getStyle(flag: boolean, isCompletelyAssigned: boolean) {
   if (flag) {
diff --git a/src/component/panels/ZonesPanel/TableColumns/ZoneAssignmentsColumns.tsx b/src/component/panels/ZonesPanel/TableColumns/ZoneAssignmentsColumns.tsx
index a0dffc3ba..e0b9c845c 100644
--- a/src/component/panels/ZonesPanel/TableColumns/ZoneAssignmentsColumns.tsx
+++ b/src/component/panels/ZonesPanel/TableColumns/ZoneAssignmentsColumns.tsx
@@ -1,9 +1,12 @@
 import { Fragment } from 'react';
 
-import { AssignmentsData, Axis } from '../../../assignment/AssignmentsContext';
-import { ZoneData } from '../hooks/useMapZones';
+import type {
+  AssignmentsData,
+  Axis,
+} from '../../../assignment/AssignmentsContext.js';
+import type { ZoneData } from '../hooks/useMapZones.js';
 
-import ZoneAssignmentColumn from './ZoneAssignmentsColumn';
+import ZoneAssignmentColumn from './ZoneAssignmentsColumn.js';
 
 interface ZoneAssignmentsColumnsProps {
   rowData: ZoneData;
diff --git a/src/component/panels/ZonesPanel/ZonesPanel.tsx b/src/component/panels/ZonesPanel/ZonesPanel.tsx
index c1f8eb05e..1f83102eb 100644
--- a/src/component/panels/ZonesPanel/ZonesPanel.tsx
+++ b/src/component/panels/ZonesPanel/ZonesPanel.tsx
@@ -1,24 +1,24 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { Spectrum2D } from 'nmr-load-save';
-import { useState, useMemo, useCallback, useRef, memo } from 'react';
+import type { Spectrum2D } from 'nmr-load-save';
+import { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { FaUnlink } from 'react-icons/fa';
 import { LuSubtitles } from 'react-icons/lu';
 
-import { useAssignmentData } from '../../assignment/AssignmentsContext';
-import { useChartData } from '../../context/ChartContext';
-import { useDispatch } from '../../context/DispatchContext';
-import { useAlert } from '../../elements/Alert';
-import { useActiveSpectrumZonesViewState } from '../../hooks/useActiveSpectrumZonesViewState';
-import useSpectrum from '../../hooks/useSpectrum';
-import { booleanToString } from '../../utility/booleanToString';
-import { tablePanelStyle } from '../extra/BasicPanelStyle';
-import { SettingsRef } from '../extra/utilities/settingImperativeHandle';
-import DefaultPanelHeader from '../header/DefaultPanelHeader';
-import PreferencesHeader from '../header/PreferencesHeader';
+import { useAssignmentData } from '../../assignment/AssignmentsContext.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { useAlert } from '../../elements/Alert.js';
+import { useActiveSpectrumZonesViewState } from '../../hooks/useActiveSpectrumZonesViewState.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
+import { booleanToString } from '../../utility/booleanToString.js';
+import { tablePanelStyle } from '../extra/BasicPanelStyle.js';
+import type { SettingsRef } from '../extra/utilities/settingImperativeHandle.js';
+import DefaultPanelHeader from '../header/DefaultPanelHeader.js';
+import PreferencesHeader from '../header/PreferencesHeader.js';
 
-import ZonesPreferences from './ZonesPreferences';
-import ZonesTable from './ZonesTable';
+import ZonesPreferences from './ZonesPreferences.js';
+import ZonesTable from './ZonesTable.js';
 
 function ZonesPanelInner({
   zones,
diff --git a/src/component/panels/ZonesPanel/ZonesPreferences.tsx b/src/component/panels/ZonesPanel/ZonesPreferences.tsx
index 9f390f562..67e852c97 100644
--- a/src/component/panels/ZonesPanel/ZonesPreferences.tsx
+++ b/src/component/panels/ZonesPanel/ZonesPreferences.tsx
@@ -1,20 +1,16 @@
-import { useEffect, useCallback, forwardRef, useMemo, memo } from 'react';
+import { forwardRef, memo, useCallback, useEffect, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
 
-import { usePreferences } from '../../context/PreferencesContext';
-import useNucleus from '../../hooks/useNucleus';
-import { usePanelPreferencesByNuclei } from '../../hooks/usePanelPreferences';
-import { getUniqueNuclei } from '../../utility/getUniqueNuclei';
-import { is2DNucleus } from '../../utility/nucleusToString';
-import {
-  NucleusPreferences,
-  NucleusPreferenceField,
-} from '../extra/preferences/NucleusPreferences';
-import { PreferencesContainer } from '../extra/preferences/PreferencesContainer';
-import {
-  SettingsRef,
-  useSettingImperativeHandle,
-} from '../extra/utilities/settingImperativeHandle';
+import { usePreferences } from '../../context/PreferencesContext.js';
+import useNucleus from '../../hooks/useNucleus.js';
+import { usePanelPreferencesByNuclei } from '../../hooks/usePanelPreferences.js';
+import { getUniqueNuclei } from '../../utility/getUniqueNuclei.js';
+import { is2DNucleus } from '../../utility/nucleusToString.js';
+import type { NucleusPreferenceField } from '../extra/preferences/NucleusPreferences.js';
+import { NucleusPreferences } from '../extra/preferences/NucleusPreferences.js';
+import { PreferencesContainer } from '../extra/preferences/PreferencesContainer.js';
+import type { SettingsRef } from '../extra/utilities/settingImperativeHandle.js';
+import { useSettingImperativeHandle } from '../extra/utilities/settingImperativeHandle.js';
 
 const preferences1DFields: NucleusPreferenceField[] = [
   {
diff --git a/src/component/panels/ZonesPanel/ZonesTable.tsx b/src/component/panels/ZonesPanel/ZonesTable.tsx
index ca94f786d..76fbdd619 100644
--- a/src/component/panels/ZonesPanel/ZonesTable.tsx
+++ b/src/component/panels/ZonesPanel/ZonesTable.tsx
@@ -1,18 +1,18 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { Info2D } from 'nmr-processing';
-import { ReactNode } from 'react';
+import type { Info2D } from 'nmr-processing';
+import type { ReactNode } from 'react';
 import { FaLink } from 'react-icons/fa';
 
-import { withDialog } from '../../elements/DialogManager';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
-import useTableSortBy from '../../hooks/useTableSortBy';
-import { EditZoneModal } from '../../modal/editZone/EditZoneModal';
-import NoDataForFid from '../extra/placeholder/NoDataForFid';
-import NoTableData from '../extra/placeholder/NoTableData';
+import { withDialog } from '../../elements/DialogManager.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
+import useTableSortBy from '../../hooks/useTableSortBy.js';
+import { EditZoneModal } from '../../modal/editZone/EditZoneModal.js';
+import NoDataForFid from '../extra/placeholder/NoDataForFid.js';
+import NoTableData from '../extra/placeholder/NoTableData.js';
 
-import ZonesTableRow from './ZonesTableRow';
-import { useMapZones } from './hooks/useMapZones';
+import ZonesTableRow from './ZonesTableRow.js';
+import { useMapZones } from './hooks/useMapZones.js';
 
 const tableStyle = css`
   border-spacing: 0;
diff --git a/src/component/panels/ZonesPanel/ZonesTableRow.tsx b/src/component/panels/ZonesPanel/ZonesTableRow.tsx
index 823eee8b5..68f9a2415 100644
--- a/src/component/panels/ZonesPanel/ZonesTableRow.tsx
+++ b/src/component/panels/ZonesPanel/ZonesTableRow.tsx
@@ -1,25 +1,26 @@
 /** @jsxImportSource @emotion/react */
 
-import lodashGet from 'lodash/get';
-import { CSSProperties, useMemo, useCallback, MouseEvent } from 'react';
+import lodashGet from 'lodash/get.js';
+import type { CSSProperties, MouseEvent } from 'react';
+import { useCallback, useMemo } from 'react';
 
-import { buildID } from '../../../data/utilities/Concatenation';
-import {
-  Axis,
-  useAssignment,
+import { buildID } from '../../../data/utilities/Concatenation.js';
+import type {
   AssignmentsData,
-} from '../../assignment/AssignmentsContext';
-import { ContextMenu } from '../../elements/ContextMenuBluePrint';
-import { TableContextMenuProps } from '../../elements/ReactTable/ReactTable';
-import { useHighlight } from '../../highlight';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
-
-import ActionsColumn from './TableColumns/ActionsColumn';
-import SignalAssignmentsColumns from './TableColumns/SignalAssignmentsColumns';
-import SignalDeltaColumn from './TableColumns/SignalDeltaColumn';
-import { ZoneAssignmentLabelColumn } from './TableColumns/ZoneAssignmentLabelColumn';
-import ZoneAssignmentsColumns from './TableColumns/ZoneAssignmentsColumns';
-import { ZoneData } from './hooks/useMapZones';
+  Axis,
+} from '../../assignment/AssignmentsContext.js';
+import { useAssignment } from '../../assignment/AssignmentsContext.js';
+import { ContextMenu } from '../../elements/ContextMenuBluePrint.js';
+import type { TableContextMenuProps } from '../../elements/ReactTable/ReactTable.js';
+import { useHighlight } from '../../highlight/index.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
+
+import ActionsColumn from './TableColumns/ActionsColumn.js';
+import SignalAssignmentsColumns from './TableColumns/SignalAssignmentsColumns.js';
+import SignalDeltaColumn from './TableColumns/SignalDeltaColumn.js';
+import { ZoneAssignmentLabelColumn } from './TableColumns/ZoneAssignmentLabelColumn.js';
+import ZoneAssignmentsColumns from './TableColumns/ZoneAssignmentsColumns.js';
+import type { ZoneData } from './hooks/useMapZones.js';
 
 const HighlightedRowStyle: CSSProperties = { backgroundColor: '#ff6f0057' };
 
diff --git a/src/component/panels/ZonesPanel/hooks/useMapZones.ts b/src/component/panels/ZonesPanel/hooks/useMapZones.ts
index 8a6d1abaf..18660d9c5 100644
--- a/src/component/panels/ZonesPanel/hooks/useMapZones.ts
+++ b/src/component/panels/ZonesPanel/hooks/useMapZones.ts
@@ -1,4 +1,4 @@
-import { Zone } from 'nmr-processing';
+import type { Zone } from 'nmr-processing';
 import { useMemo } from 'react';
 
 export interface ZoneData extends Zone {
diff --git a/src/component/panels/ZonesPanel/hooks/useZoneActions.tsx b/src/component/panels/ZonesPanel/hooks/useZoneActions.tsx
index 2512878bc..f9a0d27d0 100644
--- a/src/component/panels/ZonesPanel/hooks/useZoneActions.tsx
+++ b/src/component/panels/ZonesPanel/hooks/useZoneActions.tsx
@@ -1,6 +1,6 @@
-import { useDispatch } from '../../../context/DispatchContext';
+import { useDispatch } from '../../../context/DispatchContext.js';
 
-import { ZoneData } from './useMapZones';
+import type { ZoneData } from './useMapZones.js';
 
 function getZoomDomain(zone: ZoneData, marginFactor = 10) {
   const {
diff --git a/src/component/panels/databasePanel/DatabasePanel.tsx b/src/component/panels/databasePanel/DatabasePanel.tsx
index 8aed6b840..2097f9f5b 100644
--- a/src/component/panels/databasePanel/DatabasePanel.tsx
+++ b/src/component/panels/databasePanel/DatabasePanel.tsx
@@ -1,46 +1,44 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import {
-  Database,
-  NmriumState,
-  Spectrum1D,
-  readFromWebSource,
-  serializeNmriumState,
-} from 'nmr-load-save';
-import { DatabaseNMREntry, mapRanges } from 'nmr-processing';
+import type { Database, NmriumState, Spectrum1D } from 'nmr-load-save';
+import { readFromWebSource, serializeNmriumState } from 'nmr-load-save';
+import type { DatabaseNMREntry } from 'nmr-processing';
+import { mapRanges } from 'nmr-processing';
 import OCL from 'openchemlib/full';
-import { useCallback, useState, useRef, memo, useEffect, useMemo } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useAccordionContext, useOnOff } from 'react-science/ui';
 
-import { isSpectrum1D } from '../../../data/data1d/Spectrum1D';
-import { getSum } from '../../../data/data1d/Spectrum1D/SumManager';
+import { getSum } from '../../../data/data1d/Spectrum1D/SumManager.js';
+import { isSpectrum1D } from '../../../data/data1d/Spectrum1D/index.js';
+import type {
+  InitiateDatabaseResult,
+  LocalDatabase,
+} from '../../../data/data1d/database.js';
 import {
+  DATA_BASES,
   initiateDatabase,
-  InitiateDatabaseResult,
   prepareData,
-  DATA_BASES,
-  LocalDatabase,
-} from '../../../data/data1d/database';
-import { useChartData } from '../../context/ChartContext';
-import { useDispatch } from '../../context/DispatchContext';
-import { usePreferences } from '../../context/PreferencesContext';
-import { useToaster } from '../../context/ToasterContext';
-import { useFormatNumberByNucleus } from '../../hooks/useFormatNumberByNucleus';
-import useSpectraByActiveNucleus from '../../hooks/useSpectraPerNucleus';
-import { options } from '../../toolbar/ToolTypes';
-import Events from '../../utility/Events';
-import { exportAsJSON } from '../../utility/export';
-import nucleusToString from '../../utility/nucleusToString';
-import { PanelNoData } from '../PanelNoData';
-import { tablePanelStyle } from '../extra/BasicPanelStyle';
-import NoTableData from '../extra/placeholder/NoTableData';
-import { SettingsRef } from '../extra/utilities/settingImperativeHandle';
-import PreferencesHeader from '../header/PreferencesHeader';
-
-import DatabasePreferences from './DatabasePreferences';
-import { DatabaseSearchOptions } from './DatabaseSearchOptions';
-import { DatabaseStructureSearchModal } from './DatabaseStructureSearchModal';
-import DatabaseTable from './DatabaseTable';
+} from '../../../data/data1d/database.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { usePreferences } from '../../context/PreferencesContext.js';
+import { useToaster } from '../../context/ToasterContext.js';
+import { useFormatNumberByNucleus } from '../../hooks/useFormatNumberByNucleus.js';
+import useSpectraByActiveNucleus from '../../hooks/useSpectraPerNucleus.js';
+import { options } from '../../toolbar/ToolTypes.js';
+import Events from '../../utility/Events.js';
+import { exportAsJSON } from '../../utility/export.js';
+import nucleusToString from '../../utility/nucleusToString.js';
+import { PanelNoData } from '../PanelNoData.js';
+import { tablePanelStyle } from '../extra/BasicPanelStyle.js';
+import NoTableData from '../extra/placeholder/NoTableData.js';
+import type { SettingsRef } from '../extra/utilities/settingImperativeHandle.js';
+import PreferencesHeader from '../header/PreferencesHeader.js';
+
+import DatabasePreferences from './DatabasePreferences.js';
+import { DatabaseSearchOptions } from './DatabaseSearchOptions.js';
+import { DatabaseStructureSearchModal } from './DatabaseStructureSearchModal.js';
+import DatabaseTable from './DatabaseTable.js';
 
 export type Databases = Array<LocalDatabase | Database>;
 
diff --git a/src/component/panels/databasePanel/DatabasePreferences.tsx b/src/component/panels/databasePanel/DatabasePreferences.tsx
index a2f1ab75e..7d1ed3b36 100644
--- a/src/component/panels/databasePanel/DatabasePreferences.tsx
+++ b/src/component/panels/databasePanel/DatabasePreferences.tsx
@@ -1,15 +1,15 @@
-import { useEffect, useCallback, forwardRef } from 'react';
+import { forwardRef, useCallback, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 
-import { usePreferences } from '../../context/PreferencesContext';
-import { ColorPickerDropdownController } from '../../elements/ColorPickerDropdownController';
-import { FormatField, fieldLabelStyle } from '../../elements/FormatField';
-import Label from '../../elements/Label';
-import { NumberInput2Controller } from '../../elements/NumberInput2Controller';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
-import { PreferencesContainer } from '../extra/preferences/PreferencesContainer';
-import { PreferencesGroup } from '../extra/preferences/PreferencesGroup';
-import { useSettingImperativeHandle } from '../extra/utilities/settingImperativeHandle';
+import { usePreferences } from '../../context/PreferencesContext.js';
+import { ColorPickerDropdownController } from '../../elements/ColorPickerDropdownController.js';
+import { fieldLabelStyle, FormatField } from '../../elements/FormatField.js';
+import Label from '../../elements/Label.js';
+import { NumberInput2Controller } from '../../elements/NumberInput2Controller.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
+import { PreferencesContainer } from '../extra/preferences/PreferencesContainer.js';
+import { PreferencesGroup } from '../extra/preferences/PreferencesGroup.js';
+import { useSettingImperativeHandle } from '../extra/utilities/settingImperativeHandle.js';
 
 function DatabasePreferences(props, ref) {
   const preferences = usePreferences();
diff --git a/src/component/panels/databasePanel/DatabaseSearchOptions.tsx b/src/component/panels/databasePanel/DatabaseSearchOptions.tsx
index 8e2c1a8f7..bcd16ee18 100644
--- a/src/component/panels/databasePanel/DatabaseSearchOptions.tsx
+++ b/src/component/panels/databasePanel/DatabaseSearchOptions.tsx
@@ -2,25 +2,26 @@ import { BsHexagon, BsHexagonFill } from 'react-icons/bs';
 import { FaICursor, FaRegTrashAlt } from 'react-icons/fa';
 import { IoSearchOutline } from 'react-icons/io5';
 import { TbBinaryTree } from 'react-icons/tb';
-import { Toolbar, ToolbarItemProps } from 'react-science/ui';
+import type { ToolbarItemProps } from 'react-science/ui';
+import { Toolbar } from 'react-science/ui';
 
-import { useChartData } from '../../context/ChartContext';
-import { useDispatch } from '../../context/DispatchContext';
-import { CounterLabel } from '../../elements/CounterLabel';
-import Input from '../../elements/Input';
-import { PreferencesButton } from '../../elements/PreferencesButton';
-import Select from '../../elements/Select';
-import { ToolBarButton } from '../../elements/ToolBarButton';
-import useToolsFunctions from '../../hooks/useToolsFunctions';
-import { options } from '../../toolbar/ToolTypes';
-import { formatCounterLabel } from '../header/DefaultPanelHeader';
-import PanelHeader from '../header/PanelHeader';
+import { useChartData } from '../../context/ChartContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { CounterLabel } from '../../elements/CounterLabel.js';
+import Input from '../../elements/Input.js';
+import { PreferencesButton } from '../../elements/PreferencesButton.js';
+import Select from '../../elements/Select.js';
+import { ToolBarButton } from '../../elements/ToolBarButton.js';
+import useToolsFunctions from '../../hooks/useToolsFunctions.js';
+import { options } from '../../toolbar/ToolTypes.js';
+import { formatCounterLabel } from '../header/DefaultPanelHeader.js';
+import PanelHeader from '../header/PanelHeader.js';
 
-import {
-  DataBaseSearchResultEntry,
-  DatabaseSearchKeywords,
+import type {
   Databases,
-} from './DatabasePanel';
+  DatabaseSearchKeywords,
+  DataBaseSearchResultEntry,
+} from './DatabasePanel.js';
 
 interface DatabaseSearchOptionsProps {
   databases: Databases;
diff --git a/src/component/panels/databasePanel/DatabaseTable.tsx b/src/component/panels/databasePanel/DatabaseTable.tsx
index 92906e4aa..22edc8160 100644
--- a/src/component/panels/databasePanel/DatabaseTable.tsx
+++ b/src/component/panels/databasePanel/DatabaseTable.tsx
@@ -1,22 +1,22 @@
 /** @jsxImportSource @emotion/react */
 import { Classes } from '@blueprintjs/core';
-import lodashGet from 'lodash/get';
-import { useMemo, memo, CSSProperties } from 'react';
+import lodashGet from 'lodash/get.js';
+import type { CSSProperties } from 'react';
+import { memo, useMemo } from 'react';
 import { ResponsiveChart } from 'react-d3-utils';
 import { FaDownload, FaMinus, FaPlus } from 'react-icons/fa';
 import { IdcodeSvgRenderer, SmilesSvgRenderer } from 'react-ocl/full';
 import { Button } from 'react-science/ui';
 
-import { PrepareDataResult } from '../../../data/data1d/database';
-import { ColumnWrapper } from '../../elements/ColumnWrapper';
-import ReactTable from '../../elements/ReactTable/ReactTable';
-import addCustomColumn, {
-  CustomColumn,
-} from '../../elements/ReactTable/utility/addCustomColumn';
-import { HighlightEventSource } from '../../highlight';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
-import useSpectraByActiveNucleus from '../../hooks/useSpectraPerNucleus';
-import { formatNumber } from '../../utility/formatNumber';
+import type { PrepareDataResult } from '../../../data/data1d/database.js';
+import { ColumnWrapper } from '../../elements/ColumnWrapper.js';
+import ReactTable from '../../elements/ReactTable/ReactTable.js';
+import type { CustomColumn } from '../../elements/ReactTable/utility/addCustomColumn.js';
+import addCustomColumn from '../../elements/ReactTable/utility/addCustomColumn.js';
+import { HighlightEventSource } from '../../highlight/index.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
+import useSpectraByActiveNucleus from '../../hooks/useSpectraPerNucleus.js';
+import { formatNumber } from '../../utility/formatNumber.js';
 
 interface ToggleEvent {
   onAdd: (row: any) => void;
diff --git a/src/component/panels/extra/placeholder/NoDataForFid.tsx b/src/component/panels/extra/placeholder/NoDataForFid.tsx
index 4dba5a869..e441a6ad3 100644
--- a/src/component/panels/extra/placeholder/NoDataForFid.tsx
+++ b/src/component/panels/extra/placeholder/NoDataForFid.tsx
@@ -1,4 +1,4 @@
-import NoTableData from './NoTableData';
+import NoTableData from './NoTableData.js';
 
 export default function NoDataForFid() {
   return <NoTableData text="Not available for FID" />;
diff --git a/src/component/panels/extra/placeholder/NoTableData.tsx b/src/component/panels/extra/placeholder/NoTableData.tsx
index 0843054aa..975a05300 100644
--- a/src/component/panels/extra/placeholder/NoTableData.tsx
+++ b/src/component/panels/extra/placeholder/NoTableData.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 const styles: Record<'label' | 'container', CSSProperties> = {
   container: {
diff --git a/src/component/panels/extra/preferences/ColumnsHelper.ts b/src/component/panels/extra/preferences/ColumnsHelper.ts
index d1fde967c..b4643e2a0 100644
--- a/src/component/panels/extra/preferences/ColumnsHelper.ts
+++ b/src/component/panels/extra/preferences/ColumnsHelper.ts
@@ -1,6 +1,6 @@
-import lodashGet from 'lodash/get';
+import lodashGet from 'lodash/get.js';
 
-import { formatNumber } from '../../../utility/formatNumber';
+import { formatNumber } from '../../../utility/formatNumber.js';
 
 export default class ColumnsHelper {
   private preferences: any;
diff --git a/src/component/panels/extra/preferences/NucleusGroup.tsx b/src/component/panels/extra/preferences/NucleusGroup.tsx
index e2c459d5d..fe13d1613 100644
--- a/src/component/panels/extra/preferences/NucleusGroup.tsx
+++ b/src/component/panels/extra/preferences/NucleusGroup.tsx
@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
-import IsotopesViewer from '../../../elements/IsotopesViewer';
+import IsotopesViewer from '../../../elements/IsotopesViewer.js';
 
 export interface NucleusGroupProps {
   nucleus: string;
diff --git a/src/component/panels/extra/preferences/NucleusPreferences.tsx b/src/component/panels/extra/preferences/NucleusPreferences.tsx
index d242e23a1..e2cad22c4 100644
--- a/src/component/panels/extra/preferences/NucleusPreferences.tsx
+++ b/src/component/panels/extra/preferences/NucleusPreferences.tsx
@@ -1,8 +1,10 @@
-import { ControllerProps, FieldValues } from 'react-hook-form';
+import type { ControllerProps, FieldValues } from 'react-hook-form';
 
-import { FormatField, FormatFieldProps } from '../../../elements/FormatField';
+import type { FormatFieldProps } from '../../../elements/FormatField.js';
+import { FormatField } from '../../../elements/FormatField.js';
 
-import { NucleusGroup, NucleusGroupProps } from './NucleusGroup';
+import type { NucleusGroupProps } from './NucleusGroup.js';
+import { NucleusGroup } from './NucleusGroup.js';
 
 export type NucleusPreferenceField = Omit<FormatFieldProps, 'control'> & {
   id: string | number;
diff --git a/src/component/panels/extra/preferences/PreferencesContainer.tsx b/src/component/panels/extra/preferences/PreferencesContainer.tsx
index ae823855d..66d47bf22 100644
--- a/src/component/panels/extra/preferences/PreferencesContainer.tsx
+++ b/src/component/panels/extra/preferences/PreferencesContainer.tsx
@@ -1,7 +1,7 @@
-import React, { CSSProperties } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
 interface PreferencesContainerProps {
-  children: React.ReactNode;
+  children: ReactNode;
   style?: CSSProperties;
 }
 
diff --git a/src/component/panels/extra/preferences/PreferencesGroup.tsx b/src/component/panels/extra/preferences/PreferencesGroup.tsx
index 497df870b..f6ce3993e 100644
--- a/src/component/panels/extra/preferences/PreferencesGroup.tsx
+++ b/src/component/panels/extra/preferences/PreferencesGroup.tsx
@@ -1,8 +1,8 @@
-import React, { CSSProperties } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
 interface PreferencesGroupProps {
-  children: React.ReactNode[];
-  header?: ((style: CSSProperties) => React.ReactNode) | string;
+  children: ReactNode[];
+  header?: ((style: CSSProperties) => ReactNode) | string;
 }
 
 const styles = {
diff --git a/src/component/panels/extra/utilities/MultiplicityUtilities.ts b/src/component/panels/extra/utilities/MultiplicityUtilities.ts
index b527f8030..c4336db54 100644
--- a/src/component/panels/extra/utilities/MultiplicityUtilities.ts
+++ b/src/component/panels/extra/utilities/MultiplicityUtilities.ts
@@ -1,7 +1,7 @@
 import {
-  translateMultiplet,
-  findMultiplet,
   checkMultiplicity,
+  findMultiplet,
+  translateMultiplet,
 } from 'nmr-processing';
 
 function getMultiplicityNumber(string) {
diff --git a/src/component/panels/extra/utilities/settingImperativeHandle.ts b/src/component/panels/extra/utilities/settingImperativeHandle.ts
index 259af9280..e7db3071e 100644
--- a/src/component/panels/extra/utilities/settingImperativeHandle.ts
+++ b/src/component/panels/extra/utilities/settingImperativeHandle.ts
@@ -1,5 +1,6 @@
-import { RefObject, useImperativeHandle } from 'react';
-import { UseFormReturn } from 'react-hook-form';
+import type { RefObject } from 'react';
+import { useImperativeHandle } from 'react';
+import type { UseFormReturn } from 'react-hook-form';
 
 export interface SettingsRef {
   saveSetting: () => Promise<boolean>;
diff --git a/src/component/panels/filtersPanel/FilterPanel.tsx b/src/component/panels/filtersPanel/FilterPanel.tsx
index 1d9b041f4..588799421 100644
--- a/src/component/panels/filtersPanel/FilterPanel.tsx
+++ b/src/component/panels/filtersPanel/FilterPanel.tsx
@@ -1,12 +1,13 @@
 /** @jsxImportSource @emotion/react */
-import { useDispatch } from '../../context/DispatchContext';
-import { useToaster } from '../../context/ToasterContext';
-import { AlertButton, useAlert } from '../../elements/Alert';
-import useSpectrum from '../../hooks/useSpectrum';
-import { tablePanelStyle } from '../extra/BasicPanelStyle';
-import DefaultPanelHeader from '../header/DefaultPanelHeader';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { useToaster } from '../../context/ToasterContext.js';
+import type { AlertButton } from '../../elements/Alert.js';
+import { useAlert } from '../../elements/Alert.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
+import { tablePanelStyle } from '../extra/BasicPanelStyle.js';
+import DefaultPanelHeader from '../header/DefaultPanelHeader.js';
 
-import { FiltersSectionsPanel } from './Filters/FiltersSectionsPanel';
+import { FiltersSectionsPanel } from './Filters/FiltersSectionsPanel.js';
 
 export default function FiltersPanel() {
   const dispatch = useDispatch();
diff --git a/src/component/panels/filtersPanel/Filters/ApodizationOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/ApodizationOptionsPanel.tsx
index 74383eb42..e9f1727b6 100644
--- a/src/component/panels/filtersPanel/Filters/ApodizationOptionsPanel.tsx
+++ b/src/component/panels/filtersPanel/Filters/ApodizationOptionsPanel.tsx
@@ -1,16 +1,17 @@
 import { Switch } from '@blueprintjs/core';
 import * as Yup from 'yup';
 
-import Label from '../../../elements/Label';
-import { NumberInput2Controller } from '../../../elements/NumberInput2Controller';
-import { ReadOnly } from '../../../elements/ReadOnly';
-import { Sections } from '../../../elements/Sections';
+import Label from '../../../elements/Label.js';
+import { NumberInput2Controller } from '../../../elements/NumberInput2Controller.js';
+import { ReadOnly } from '../../../elements/ReadOnly.js';
+import { Sections } from '../../../elements/Sections.js';
 
-import { FilterActionButtons } from './FilterActionButtons';
-import { HeaderContainer, StickyHeader } from './InnerFilterHeader';
-import { useSharedApodization } from './hooks/useSharedApodization';
+import { FilterActionButtons } from './FilterActionButtons.js';
+import { HeaderContainer, StickyHeader } from './InnerFilterHeader.js';
+import { useSharedApodization } from './hooks/useSharedApodization.js';
 
-import { BaseFilterOptionsPanelProps, formLabelStyle } from '.';
+import type { BaseFilterOptionsPanelProps } from './index.js';
+import { formLabelStyle } from './index.js';
 
 const advanceValidationSchema = Yup.object().shape({
   lineBroadening: Yup.number().required(),
diff --git a/src/component/panels/filtersPanel/Filters/BaseLineCorrectionOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/BaseLineCorrectionOptionsPanel.tsx
index 7a038570e..5fd968541 100644
--- a/src/component/panels/filtersPanel/Filters/BaseLineCorrectionOptionsPanel.tsx
+++ b/src/component/panels/filtersPanel/Filters/BaseLineCorrectionOptionsPanel.tsx
@@ -1,20 +1,21 @@
 import { Button, Switch } from '@blueprintjs/core';
 import { Select } from '@blueprintjs/select';
 
-import Label from '../../../elements/Label';
-import { NumberInput2Controller } from '../../../elements/NumberInput2Controller';
-import { ReadOnly } from '../../../elements/ReadOnly';
-import { Sections } from '../../../elements/Sections';
+import Label from '../../../elements/Label.js';
+import { NumberInput2Controller } from '../../../elements/NumberInput2Controller.js';
+import { ReadOnly } from '../../../elements/ReadOnly.js';
+import { Sections } from '../../../elements/Sections.js';
 
-import { FilterActionButtons } from './FilterActionButtons';
-import { HeaderContainer, StickyHeader } from './InnerFilterHeader';
+import { FilterActionButtons } from './FilterActionButtons.js';
+import { HeaderContainer, StickyHeader } from './InnerFilterHeader.js';
 import {
   baselineCorrectionsAlgorithms,
   getBaselineData,
   useBaselineCorrection,
-} from './hooks/useBaselineCorrection';
+} from './hooks/useBaselineCorrection.js';
 
-import { BaseFilterOptionsPanelProps, formLabelStyle } from '.';
+import type { BaseFilterOptionsPanelProps } from './index.js';
+import { formLabelStyle } from './index.js';
 
 export default function BaseLineCorrectionOptionsPanel(
   props: BaseFilterOptionsPanelProps,
diff --git a/src/component/panels/filtersPanel/Filters/ExclusionZonesOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/ExclusionZonesOptionsPanel.tsx
index e0d187864..d36b38ae3 100644
--- a/src/component/panels/filtersPanel/Filters/ExclusionZonesOptionsPanel.tsx
+++ b/src/component/panels/filtersPanel/Filters/ExclusionZonesOptionsPanel.tsx
@@ -6,18 +6,19 @@ import { FaRegTrashAlt } from 'react-icons/fa';
 import { Button } from 'react-science/ui';
 import * as Yup from 'yup';
 
-import { ExclusionZone } from '../../../../data/types/data1d/ExclusionZone';
-import { useChartData } from '../../../context/ChartContext';
-import { useDispatch } from '../../../context/DispatchContext';
-import { NumberInput2Controller } from '../../../elements/NumberInput2Controller';
-import ReactTable, { Column } from '../../../elements/ReactTable/ReactTable';
-import { ReadOnly } from '../../../elements/ReadOnly';
-import { Sections } from '../../../elements/Sections';
+import type { ExclusionZone } from '../../../../data/types/data1d/ExclusionZone.js';
+import { useChartData } from '../../../context/ChartContext.js';
+import { useDispatch } from '../../../context/DispatchContext.js';
+import { NumberInput2Controller } from '../../../elements/NumberInput2Controller.js';
+import type { Column } from '../../../elements/ReactTable/ReactTable.js';
+import ReactTable from '../../../elements/ReactTable/ReactTable.js';
+import { ReadOnly } from '../../../elements/ReadOnly.js';
+import { Sections } from '../../../elements/Sections.js';
 
-import { FilterActionButtons } from './FilterActionButtons';
-import { HeaderContainer, StickyHeader } from './InnerFilterHeader';
+import { FilterActionButtons } from './FilterActionButtons.js';
+import { HeaderContainer, StickyHeader } from './InnerFilterHeader.js';
 
-import { BaseFilterOptionsPanelProps } from '.';
+import type { BaseFilterOptionsPanelProps } from './index.js';
 
 const validationSchema = (min: number, max: number) =>
   Yup.object().shape({
diff --git a/src/component/panels/filtersPanel/Filters/FilterActionButtons.tsx b/src/component/panels/filtersPanel/Filters/FilterActionButtons.tsx
index 4df79cdd9..8593200ea 100644
--- a/src/component/panels/filtersPanel/Filters/FilterActionButtons.tsx
+++ b/src/component/panels/filtersPanel/Filters/FilterActionButtons.tsx
@@ -1,4 +1,5 @@
-import { Button, ButtonProps } from '@blueprintjs/core';
+import type { ButtonProps } from '@blueprintjs/core';
+import { Button } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 
 interface FilterActionButtonsProps {
diff --git a/src/component/panels/filtersPanel/Filters/FiltersSectionsPanel.tsx b/src/component/panels/filtersPanel/Filters/FiltersSectionsPanel.tsx
index f03eaa08f..fdddc18c9 100644
--- a/src/component/panels/filtersPanel/Filters/FiltersSectionsPanel.tsx
+++ b/src/component/panels/filtersPanel/Filters/FiltersSectionsPanel.tsx
@@ -1,21 +1,23 @@
 import { Switch } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 import { v4 } from '@lukeed/uuid';
-import { Filter, Filters } from 'nmr-processing';
+import type { Filter } from 'nmr-processing';
+import { Filters } from 'nmr-processing';
 import { memo, useEffect, useRef, useState } from 'react';
-import { FaRegTrashAlt, FaRegEyeSlash } from 'react-icons/fa';
+import { FaRegEyeSlash, FaRegTrashAlt } from 'react-icons/fa';
 import { ObjectInspector } from 'react-inspector';
 import { Button } from 'react-science/ui';
 
-import { useChartData } from '../../../context/ChartContext';
-import { useDispatch } from '../../../context/DispatchContext';
-import { useToaster } from '../../../context/ToasterContext';
-import { AlertButton, useAlert } from '../../../elements/Alert';
-import { Sections } from '../../../elements/Sections';
-import useSpectraByActiveNucleus from '../../../hooks/useSpectraPerNucleus';
-import useSpectrum from '../../../hooks/useSpectrum';
+import { useChartData } from '../../../context/ChartContext.js';
+import { useDispatch } from '../../../context/DispatchContext.js';
+import { useToaster } from '../../../context/ToasterContext.js';
+import type { AlertButton } from '../../../elements/Alert.js';
+import { useAlert } from '../../../elements/Alert.js';
+import { Sections } from '../../../elements/Sections.js';
+import useSpectraByActiveNucleus from '../../../hooks/useSpectraPerNucleus.js';
+import useSpectrum from '../../../hooks/useSpectrum.js';
 
-import { filterOptionPanels } from './index';
+import { filterOptionPanels } from './index.js';
 
 const IconButton = styled(Button)`
   padding: 2px;
diff --git a/src/component/panels/filtersPanel/Filters/InnerFilterHeader.tsx b/src/component/panels/filtersPanel/Filters/InnerFilterHeader.tsx
index af008d5db..8f582a443 100644
--- a/src/component/panels/filtersPanel/Filters/InnerFilterHeader.tsx
+++ b/src/component/panels/filtersPanel/Filters/InnerFilterHeader.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { Sections } from '../../../elements/Sections';
+import { Sections } from '../../../elements/Sections.js';
 
 export const StickyHeader = styled(Sections.Header)`
   position: sticky;
diff --git a/src/component/panels/filtersPanel/Filters/PhaseCorrectionOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/PhaseCorrectionOptionsPanel.tsx
index e5b084558..facdf81cf 100644
--- a/src/component/panels/filtersPanel/Filters/PhaseCorrectionOptionsPanel.tsx
+++ b/src/component/panels/filtersPanel/Filters/PhaseCorrectionOptionsPanel.tsx
@@ -1,22 +1,20 @@
 import { Button } from '@blueprintjs/core';
 import { Select } from '@blueprintjs/select';
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
-import InputRange from '../../../elements/InputRange';
-import Label, { LabelStyle } from '../../../elements/Label';
-import { NumberInput2 } from '../../../elements/NumberInput2';
-import { ReadOnly } from '../../../elements/ReadOnly';
-import { Sections } from '../../../elements/Sections';
+import InputRange from '../../../elements/InputRange.js';
+import type { LabelStyle } from '../../../elements/Label.js';
+import Label from '../../../elements/Label.js';
+import { NumberInput2 } from '../../../elements/NumberInput2.js';
+import { ReadOnly } from '../../../elements/ReadOnly.js';
+import { Sections } from '../../../elements/Sections.js';
 
-import { FilterActionButtons } from './FilterActionButtons';
-import { HeaderContainer, StickyHeader } from './InnerFilterHeader';
-import {
-  algorithms,
-  usePhaseCorrection,
-  AlgorithmItem,
-} from './hooks/usePhaseCorrection';
+import { FilterActionButtons } from './FilterActionButtons.js';
+import { HeaderContainer, StickyHeader } from './InnerFilterHeader.js';
+import type { AlgorithmItem } from './hooks/usePhaseCorrection.js';
+import { algorithms, usePhaseCorrection } from './hooks/usePhaseCorrection.js';
 
-import { BaseFilterOptionsPanelProps } from '.';
+import type { BaseFilterOptionsPanelProps } from './index.js';
 
 const inputRangeStyle: CSSProperties = {
   padding: '5px 10px',
diff --git a/src/component/panels/filtersPanel/Filters/PhaseCorrectionTwoDimensionsOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/PhaseCorrectionTwoDimensionsOptionsPanel.tsx
index bad31aedb..4fc960392 100644
--- a/src/component/panels/filtersPanel/Filters/PhaseCorrectionTwoDimensionsOptionsPanel.tsx
+++ b/src/component/panels/filtersPanel/Filters/PhaseCorrectionTwoDimensionsOptionsPanel.tsx
@@ -1,28 +1,28 @@
 /** @jsxImportSource @emotion/react */
 import { Select } from '@blueprintjs/select';
-import { css } from '@emotion/react';
 import { Filters } from 'nmr-processing';
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { FaRulerHorizontal, FaRulerVertical } from 'react-icons/fa';
 import { MdLooksTwo } from 'react-icons/md';
 import { Button, Toolbar } from 'react-science/ui';
 
-import InputRange from '../../../elements/InputRange';
-import Label, { LabelStyle } from '../../../elements/Label';
-import { NumberInput2 } from '../../../elements/NumberInput2';
-import { ReadOnly } from '../../../elements/ReadOnly';
-import { Sections } from '../../../elements/Sections';
-import { useFilter } from '../../../hooks/useFilter';
+import InputRange from '../../../elements/InputRange.js';
+import type { LabelStyle } from '../../../elements/Label.js';
+import Label from '../../../elements/Label.js';
+import { NumberInput2 } from '../../../elements/NumberInput2.js';
+import { ReadOnly } from '../../../elements/ReadOnly.js';
+import { Sections } from '../../../elements/Sections.js';
+import { useFilter } from '../../../hooks/useFilter.js';
 
-import { FilterActionButtons } from './FilterActionButtons';
-import { HeaderContainer, StickyHeader } from './InnerFilterHeader';
+import { FilterActionButtons } from './FilterActionButtons.js';
+import { HeaderContainer, StickyHeader } from './InnerFilterHeader.js';
+import type { AlgorithmItem } from './hooks/usePhaseCorrectionTwoDimensions.js';
 import {
   phaseCorrectionalAlgorithms,
   usePhaseCorrectionTwoDimensions,
-  AlgorithmItem,
-} from './hooks/usePhaseCorrectionTwoDimensions';
+} from './hooks/usePhaseCorrectionTwoDimensions.js';
 
-import { BaseFilterOptionsPanelProps } from '.';
+import type { BaseFilterOptionsPanelProps } from './index.js';
 
 const inputRangeStyle: CSSProperties = {
   padding: '5px 10px',
@@ -84,18 +84,12 @@ export default function PhaseCorrectionTwoDimensionsOptionsPanel(
                   <Label title="Direction:">
                     <Toolbar>
                       <Toolbar.Item
-                        css={css`
-                          border: 1px solid #f7f7f7;
-                        `}
                         tooltip="Horizontal"
                         icon={<FaRulerHorizontal />}
                         active={activeTraceDirection === 'horizontal'}
                         onClick={() => onChangeHandler('horizontal')}
                       />
                       <Toolbar.Item
-                        css={css`
-                          border: 1px solid #f7f7f7;
-                        `}
                         tooltip="Vertical"
                         icon={<FaRulerVertical />}
                         active={activeTraceDirection === 'vertical'}
diff --git a/src/component/panels/filtersPanel/Filters/ShiftOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/ShiftOptionsPanel.tsx
index ef125b838..47ed02f4c 100644
--- a/src/component/panels/filtersPanel/Filters/ShiftOptionsPanel.tsx
+++ b/src/component/panels/filtersPanel/Filters/ShiftOptionsPanel.tsx
@@ -1,16 +1,17 @@
 import { Filters } from 'nmr-processing';
 import { useForm } from 'react-hook-form';
 
-import { useDispatch } from '../../../context/DispatchContext';
-import Label from '../../../elements/Label';
-import { NumberInput2Controller } from '../../../elements/NumberInput2Controller';
-import { ReadOnly } from '../../../elements/ReadOnly';
-import { Sections } from '../../../elements/Sections';
+import { useDispatch } from '../../../context/DispatchContext.js';
+import Label from '../../../elements/Label.js';
+import { NumberInput2Controller } from '../../../elements/NumberInput2Controller.js';
+import { ReadOnly } from '../../../elements/ReadOnly.js';
+import { Sections } from '../../../elements/Sections.js';
 
-import { FilterActionButtons } from './FilterActionButtons';
-import { HeaderContainer, StickyHeader } from './InnerFilterHeader';
+import { FilterActionButtons } from './FilterActionButtons.js';
+import { HeaderContainer, StickyHeader } from './InnerFilterHeader.js';
 
-import { BaseFilterOptionsPanelProps, formLabelStyle } from '.';
+import type { BaseFilterOptionsPanelProps } from './index.js';
+import { formLabelStyle } from './index.js';
 
 const { shiftX, shift2DX, shift2DY } = Filters;
 
diff --git a/src/component/panels/filtersPanel/Filters/ZeroFillingOptionsPanel.tsx b/src/component/panels/filtersPanel/Filters/ZeroFillingOptionsPanel.tsx
index 6dd337b8c..9038eb9c1 100644
--- a/src/component/panels/filtersPanel/Filters/ZeroFillingOptionsPanel.tsx
+++ b/src/component/panels/filtersPanel/Filters/ZeroFillingOptionsPanel.tsx
@@ -1,15 +1,15 @@
 import { Switch } from '@blueprintjs/core';
 
-import Label from '../../../elements/Label';
-import { ReadOnly } from '../../../elements/ReadOnly';
-import { Sections } from '../../../elements/Sections';
-import { Select2Controller } from '../../../elements/Select2Controller';
+import Label from '../../../elements/Label.js';
+import { ReadOnly } from '../../../elements/ReadOnly.js';
+import { Sections } from '../../../elements/Sections.js';
+import { Select2Controller } from '../../../elements/Select2Controller.js';
 
-import { FilterActionButtons } from './FilterActionButtons';
-import { HeaderContainer, StickyHeader } from './InnerFilterHeader';
-import { useZeroFilling, zeroFillingSizes } from './hooks/useZeroFilling';
+import { FilterActionButtons } from './FilterActionButtons.js';
+import { HeaderContainer, StickyHeader } from './InnerFilterHeader.js';
+import { useZeroFilling, zeroFillingSizes } from './hooks/useZeroFilling.js';
 
-import { BaseFilterOptionsPanelProps } from '.';
+import type { BaseFilterOptionsPanelProps } from './index.js';
 
 export default function ZeroFillingOptionsPanel(
   props: BaseFilterOptionsPanelProps,
diff --git a/src/component/panels/filtersPanel/Filters/hooks/useBaselineCorrection.tsx b/src/component/panels/filtersPanel/Filters/hooks/useBaselineCorrection.tsx
index c56e35fb1..3be518fe8 100644
--- a/src/component/panels/filtersPanel/Filters/hooks/useBaselineCorrection.tsx
+++ b/src/component/panels/filtersPanel/Filters/hooks/useBaselineCorrection.tsx
@@ -1,12 +1,12 @@
 import { yupResolver } from '@hookform/resolvers/yup';
-import { Filter, BaselineCorrectionOptions } from 'nmr-processing';
+import type { Filter, BaselineCorrectionOptions } from 'nmr-processing';
 import { useCallback, useEffect, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import { useSelect } from 'react-science/ui';
 import * as Yup from 'yup';
 
-import { useDispatch } from '../../../../context/DispatchContext';
-import { useSyncedFilterOptions } from '../../../../context/FilterSyncOptionsContext';
+import { useDispatch } from '../../../../context/DispatchContext.js';
+import { useSyncedFilterOptions } from '../../../../context/FilterSyncOptionsContext.js';
 
 export const baselineCorrectionsAlgorithms = ['airPLS', 'Polynomial'].map(
   (val) => ({
diff --git a/src/component/panels/filtersPanel/Filters/hooks/usePhaseCorrection.tsx b/src/component/panels/filtersPanel/Filters/hooks/usePhaseCorrection.tsx
index 56cb45ed6..69a98ba97 100644
--- a/src/component/panels/filtersPanel/Filters/hooks/usePhaseCorrection.tsx
+++ b/src/component/panels/filtersPanel/Filters/hooks/usePhaseCorrection.tsx
@@ -1,12 +1,12 @@
-import { Spectrum1D } from 'nmr-load-save';
-import { Filter } from 'nmr-processing';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { Filter } from 'nmr-processing';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useSelect } from 'react-science/ui';
 
-import { useChartData } from '../../../../context/ChartContext';
-import { useDispatch } from '../../../../context/DispatchContext';
-import { useSyncedFilterOptions } from '../../../../context/FilterSyncOptionsContext';
-import useSpectrum from '../../../../hooks/useSpectrum';
+import { useChartData } from '../../../../context/ChartContext.js';
+import { useDispatch } from '../../../../context/DispatchContext.js';
+import { useSyncedFilterOptions } from '../../../../context/FilterSyncOptionsContext.js';
+import useSpectrum from '../../../../hooks/useSpectrum.js';
 
 type PhaseCorrectionTypes = 'manual' | 'automatic' | 'absolute';
 
diff --git a/src/component/panels/filtersPanel/Filters/hooks/usePhaseCorrectionTwoDimensions.tsx b/src/component/panels/filtersPanel/Filters/hooks/usePhaseCorrectionTwoDimensions.tsx
index 8a8150ba4..04d53b61b 100644
--- a/src/component/panels/filtersPanel/Filters/hooks/usePhaseCorrectionTwoDimensions.tsx
+++ b/src/component/panels/filtersPanel/Filters/hooks/usePhaseCorrectionTwoDimensions.tsx
@@ -1,15 +1,15 @@
-import { NmrData2DFt } from 'cheminfo-types';
-import debounce from 'lodash/debounce';
-import { Spectrum2D } from 'nmr-load-save';
-import { Filter } from 'nmr-processing';
+import type { NmrData2DFt } from 'cheminfo-types';
+import debounce from 'lodash/debounce.js';
+import type { Spectrum2D } from 'nmr-load-save';
+import type { Filter } from 'nmr-processing';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useSelect } from 'react-science/ui';
 
-import { useActivePhaseTraces } from '../../../../2d/1d-tracer/phase-correction-traces/useActivePhaseTraces';
-import { useDispatch } from '../../../../context/DispatchContext';
-import { useSyncedFilterOptions } from '../../../../context/FilterSyncOptionsContext';
-import useSpectrum from '../../../../hooks/useSpectrum';
-import { TraceDirection } from '../../../../reducer/Reducer';
+import { useActivePhaseTraces } from '../../../../2d/1d-tracer/phase-correction-traces/useActivePhaseTraces.js';
+import { useDispatch } from '../../../../context/DispatchContext.js';
+import { useSyncedFilterOptions } from '../../../../context/FilterSyncOptionsContext.js';
+import useSpectrum from '../../../../hooks/useSpectrum.js';
+import type { TraceDirection } from '../../../../reducer/Reducer.js';
 
 type PhaseCorrectionTypes = 'manual' | 'automatic';
 
diff --git a/src/component/panels/filtersPanel/Filters/hooks/useSharedApodization.tsx b/src/component/panels/filtersPanel/Filters/hooks/useSharedApodization.tsx
index 2095657d9..1dc7ff82c 100644
--- a/src/component/panels/filtersPanel/Filters/hooks/useSharedApodization.tsx
+++ b/src/component/panels/filtersPanel/Filters/hooks/useSharedApodization.tsx
@@ -1,5 +1,5 @@
 import { yupResolver } from '@hookform/resolvers/yup';
-import {
+import type {
   ApodizationOptions as BaseApodizationOptions,
   Filter,
 } from 'nmr-processing';
@@ -7,9 +7,9 @@ import { useCallback, useEffect, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 
-import { defaultApodizationOptions } from '../../../../../data/constants/DefaultApodizationOptions';
-import { useDispatch } from '../../../../context/DispatchContext';
-import { useSyncedFilterOptions } from '../../../../context/FilterSyncOptionsContext';
+import { defaultApodizationOptions } from '../../../../../data/constants/DefaultApodizationOptions.js';
+import { useDispatch } from '../../../../context/DispatchContext.js';
+import { useSyncedFilterOptions } from '../../../../context/FilterSyncOptionsContext.js';
 
 const simpleValidationSchema = Yup.object().shape({
   lineBroadening: Yup.number().required(),
diff --git a/src/component/panels/filtersPanel/Filters/hooks/useZeroFilling.tsx b/src/component/panels/filtersPanel/Filters/hooks/useZeroFilling.tsx
index e1ad279d7..b03303ebe 100644
--- a/src/component/panels/filtersPanel/Filters/hooks/useZeroFilling.tsx
+++ b/src/component/panels/filtersPanel/Filters/hooks/useZeroFilling.tsx
@@ -1,15 +1,15 @@
-import { NmrData1D } from 'cheminfo-types';
-import {
+import type { NmrData1D } from 'cheminfo-types';
+import type {
   Filter,
   ZeroFillingOptions as BaseZeroFillingOptions,
 } from 'nmr-processing';
 import { useCallback, useEffect, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 
-import generateNumbersPowerOfX from '../../../../../data/utilities/generateNumbersPowerOfX';
-import { useDispatch } from '../../../../context/DispatchContext';
-import { useSyncedFilterOptions } from '../../../../context/FilterSyncOptionsContext';
-import useSpectrum from '../../../../hooks/useSpectrum';
+import generateNumbersPowerOfX from '../../../../../data/utilities/generateNumbersPowerOfX.js';
+import { useDispatch } from '../../../../context/DispatchContext.js';
+import { useSyncedFilterOptions } from '../../../../context/FilterSyncOptionsContext.js';
+import useSpectrum from '../../../../hooks/useSpectrum.js';
 
 export type ZeroFillingOptions = BaseZeroFillingOptions & {
   livePreview: boolean;
diff --git a/src/component/panels/filtersPanel/Filters/index.tsx b/src/component/panels/filtersPanel/Filters/index.tsx
index a821c3918..8f3906e75 100644
--- a/src/component/panels/filtersPanel/Filters/index.tsx
+++ b/src/component/panels/filtersPanel/Filters/index.tsx
@@ -1,15 +1,16 @@
-import { ButtonProps } from '@blueprintjs/core';
-import { Filter, Filters } from 'nmr-processing';
+import type { ButtonProps } from '@blueprintjs/core';
+import type { Filter } from 'nmr-processing';
+import { Filters } from 'nmr-processing';
 
-import { LabelStyle } from '../../../elements/Label';
+import type { LabelStyle } from '../../../elements/Label.js';
 
-import ApodizationOptionsPanel from './ApodizationOptionsPanel';
-import BaseLineCorrectionOptionsPanel from './BaseLineCorrectionOptionsPanel';
-import ExclusionZonesOptionsPanel from './ExclusionZonesOptionsPanel';
-import PhaseCorrectionOptionsPanel from './PhaseCorrectionOptionsPanel';
-import PhaseCorrectionTwoDimensionsOptionsPanel from './PhaseCorrectionTwoDimensionsOptionsPanel';
-import ShiftOptionsPanel from './ShiftOptionsPanel';
-import ZeroFillingOptionsPanel from './ZeroFillingOptionsPanel';
+import ApodizationOptionsPanel from './ApodizationOptionsPanel.js';
+import BaseLineCorrectionOptionsPanel from './BaseLineCorrectionOptionsPanel.js';
+import ExclusionZonesOptionsPanel from './ExclusionZonesOptionsPanel.js';
+import PhaseCorrectionOptionsPanel from './PhaseCorrectionOptionsPanel.js';
+import PhaseCorrectionTwoDimensionsOptionsPanel from './PhaseCorrectionTwoDimensionsOptionsPanel.js';
+import ShiftOptionsPanel from './ShiftOptionsPanel.js';
+import ZeroFillingOptionsPanel from './ZeroFillingOptionsPanel.js';
 
 const {
   apodization,
diff --git a/src/component/panels/header/DefaultPanelHeader.tsx b/src/component/panels/header/DefaultPanelHeader.tsx
index 26785b7fd..1ca832bde 100644
--- a/src/component/panels/header/DefaultPanelHeader.tsx
+++ b/src/component/panels/header/DefaultPanelHeader.tsx
@@ -1,14 +1,13 @@
-import { CSSProperties, Fragment, ReactNode, useState } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import { Fragment, useState } from 'react';
 import { FaFilter, FaRegTrashAlt } from 'react-icons/fa';
-import {
-  Toolbar,
-  ToolbarItemProps as BaseToolbarItemProps,
-} from 'react-science/ui';
+import type { ToolbarItemProps as BaseToolbarItemProps } from 'react-science/ui';
+import { Toolbar } from 'react-science/ui';
 
-import { CounterLabel } from '../../elements/CounterLabel';
-import { PreferencesButton } from '../../elements/PreferencesButton';
+import { CounterLabel } from '../../elements/CounterLabel.js';
+import { PreferencesButton } from '../../elements/PreferencesButton.js';
 
-import PanelHeader from './PanelHeader';
+import PanelHeader from './PanelHeader.js';
 
 const styles: Record<'leftContainer', CSSProperties> = {
   leftContainer: {
diff --git a/src/component/panels/header/PanelHeader.tsx b/src/component/panels/header/PanelHeader.tsx
index 939a3d9d0..ca0a3da8d 100644
--- a/src/component/panels/header/PanelHeader.tsx
+++ b/src/component/panels/header/PanelHeader.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
 const containerStyle: CSSProperties = {
   display: 'flex',
diff --git a/src/component/panels/header/PreferencesHeader.tsx b/src/component/panels/header/PreferencesHeader.tsx
index 8117bd253..41eb7110b 100644
--- a/src/component/panels/header/PreferencesHeader.tsx
+++ b/src/component/panels/header/PreferencesHeader.tsx
@@ -1,5 +1,5 @@
-import { CloseButton } from '../../elements/CloseButton';
-import { SaveButton } from '../../elements/SaveButton';
+import { CloseButton } from '../../elements/CloseButton.js';
+import { SaveButton } from '../../elements/SaveButton.js';
 
 interface PreferencesHeaderProps {
   onClose: () => void;
diff --git a/src/component/panels/header/SpectraAutomaticPickingButton.tsx b/src/component/panels/header/SpectraAutomaticPickingButton.tsx
index d46ba78e5..90ff826ed 100644
--- a/src/component/panels/header/SpectraAutomaticPickingButton.tsx
+++ b/src/component/panels/header/SpectraAutomaticPickingButton.tsx
@@ -2,10 +2,10 @@ import { SvgNmrRangePicking } from 'cheminfo-font';
 import { useCallback } from 'react';
 import { Toolbar } from 'react-science/ui';
 
-import { useChartData } from '../../context/ChartContext';
-import { useDispatch } from '../../context/DispatchContext';
-import { useToaster } from '../../context/ToasterContext';
-import { useCheckToolsVisibility } from '../../hooks/useCheckToolsVisibility';
+import { useChartData } from '../../context/ChartContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { useToaster } from '../../context/ToasterContext.js';
+import { useCheckToolsVisibility } from '../../hooks/useCheckToolsVisibility.js';
 
 export function SpectraAutomaticPickingButton() {
   const dispatch = useDispatch();
diff --git a/src/component/panels/informationPanel/InformationEditionModal.tsx b/src/component/panels/informationPanel/InformationEditionModal.tsx
index 6432f85fe..211a63f75 100644
--- a/src/component/panels/informationPanel/InformationEditionModal.tsx
+++ b/src/component/panels/informationPanel/InformationEditionModal.tsx
@@ -8,12 +8,13 @@ import { FaPlus, FaRegTrashAlt } from 'react-icons/fa';
 import { Button } from 'react-science/ui';
 import { array, object, string } from 'yup';
 
-import { useDispatch } from '../../context/DispatchContext';
-import { Input2Controller } from '../../elements/Input2Controller';
-import ReactTable, { Column } from '../../elements/ReactTable/ReactTable';
-import useSpectrum from '../../hooks/useSpectrum';
-import { checkUniqueByKey } from '../../utility/checkUniqueByKey';
-import { tablePanelStyle } from '../extra/BasicPanelStyle';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { Input2Controller } from '../../elements/Input2Controller.js';
+import type { Column } from '../../elements/ReactTable/ReactTable.js';
+import ReactTable from '../../elements/ReactTable/ReactTable.js';
+import useSpectrum from '../../hooks/useSpectrum.js';
+import { checkUniqueByKey } from '../../utility/checkUniqueByKey.js';
+import { tablePanelStyle } from '../extra/BasicPanelStyle.js';
 
 const metaInfoArraySchema = array()
   .of(
diff --git a/src/component/panels/informationPanel/InformationPanel.tsx b/src/component/panels/informationPanel/InformationPanel.tsx
index b964d183b..49bb1f7af 100644
--- a/src/component/panels/informationPanel/InformationPanel.tsx
+++ b/src/component/panels/informationPanel/InformationPanel.tsx
@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
-import { InfoPanel, InfoPanelData } from 'react-science/ui';
+import type { InfoPanelData } from 'react-science/ui';
+import { InfoPanel } from 'react-science/ui';
 
-import useSpectrum from '../../hooks/useSpectrum';
+import useSpectrum from '../../hooks/useSpectrum.js';
 
 const emptyData = { info: {}, meta: {} };
 
diff --git a/src/component/panels/multipleAnalysisPanel/AlignSpectra.tsx b/src/component/panels/multipleAnalysisPanel/AlignSpectra.tsx
index 1b505b14f..db7c180b0 100644
--- a/src/component/panels/multipleAnalysisPanel/AlignSpectra.tsx
+++ b/src/component/panels/multipleAnalysisPanel/AlignSpectra.tsx
@@ -2,21 +2,22 @@
 import styled from '@emotion/styled';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { xFindClosestIndex } from 'ml-spectra-processing';
-import { Spectrum1D } from 'nmr-load-save';
+import type { Spectrum1D } from 'nmr-load-save';
 import { useMemo } from 'react';
 import { useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 
-import { REFERENCES } from '../../../data/constants/References';
-import { CalibrateOptions } from '../../../data/data1d/Spectrum1D/getReferenceShift';
-import { useDispatch } from '../../context/DispatchContext';
-import { useToaster } from '../../context/ToasterContext';
-import ActionButtons from '../../elements/ActionButtons';
-import Label, { LabelStyle } from '../../elements/Label';
-import { NumberInput2Controller } from '../../elements/NumberInput2Controller';
-import { Select2 } from '../../elements/Select2';
-import useSpectraByActiveNucleus from '../../hooks/useSpectraPerNucleus';
-import { useEvent } from '../../utility/Events';
+import { REFERENCES } from '../../../data/constants/References.js';
+import type { CalibrateOptions } from '../../../data/data1d/Spectrum1D/getReferenceShift.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { useToaster } from '../../context/ToasterContext.js';
+import ActionButtons from '../../elements/ActionButtons.js';
+import type { LabelStyle } from '../../elements/Label.js';
+import Label from '../../elements/Label.js';
+import { NumberInput2Controller } from '../../elements/NumberInput2Controller.js';
+import { Select2 } from '../../elements/Select2.js';
+import useSpectraByActiveNucleus from '../../hooks/useSpectraPerNucleus.js';
+import { useEvent } from '../../utility/Events.js';
 
 const labelStyle: LabelStyle = {
   label: { flex: 4, fontWeight: '500' },
diff --git a/src/component/panels/multipleAnalysisPanel/AnalysisChart.tsx b/src/component/panels/multipleAnalysisPanel/AnalysisChart.tsx
index d28c4f963..751a77613 100644
--- a/src/component/panels/multipleAnalysisPanel/AnalysisChart.tsx
+++ b/src/component/panels/multipleAnalysisPanel/AnalysisChart.tsx
@@ -1,19 +1,19 @@
 import { css } from '@emotion/react';
-import lodashGet from 'lodash/get';
+import lodashGet from 'lodash/get.js';
 import { useMemo, useRef, useState } from 'react';
 import { ResponsiveChart } from 'react-d3-utils';
 import { FaFileExport } from 'react-icons/fa';
 import { Axis, LineSeries, Plot } from 'react-plot';
 import { Button } from 'react-science/ui';
 
-import { SpectraAnalysisData } from '../../../data/data1d/multipleSpectraAnalysis';
-import { useChartData } from '../../context/ChartContext';
-import { useToaster } from '../../context/ToasterContext';
-import { Input2 } from '../../elements/Input2';
-import Label from '../../elements/Label';
-import useSpectraByActiveNucleus from '../../hooks/useSpectraPerNucleus';
-import { copyPNGToClipboard } from '../../utility/export';
-import { getSpectraObjectPaths } from '../../utility/getSpectraObjectPaths';
+import type { SpectraAnalysisData } from '../../../data/data1d/multipleSpectraAnalysis.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { useToaster } from '../../context/ToasterContext.js';
+import { Input2 } from '../../elements/Input2.js';
+import Label from '../../elements/Label.js';
+import useSpectraByActiveNucleus from '../../hooks/useSpectraPerNucleus.js';
+import { copyPNGToClipboard } from '../../utility/export.js';
+import { getSpectraObjectPaths } from '../../utility/getSpectraObjectPaths.js';
 
 interface PlotAxisOptions {
   xPath: string;
diff --git a/src/component/panels/multipleAnalysisPanel/MultipleSpectraAnalysisPanel.tsx b/src/component/panels/multipleAnalysisPanel/MultipleSpectraAnalysisPanel.tsx
index d4c459170..5b3daa763 100644
--- a/src/component/panels/multipleAnalysisPanel/MultipleSpectraAnalysisPanel.tsx
+++ b/src/component/panels/multipleAnalysisPanel/MultipleSpectraAnalysisPanel.tsx
@@ -1,36 +1,35 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import { SvgNmrOverlay } from 'cheminfo-font';
-import { Spectrum1D } from 'nmr-load-save';
-import { useCallback, useState, useRef, memo } from 'react';
+import type { Spectrum1D } from 'nmr-load-save';
+import { memo, useCallback, useRef, useState } from 'react';
 import { FaChartBar, FaFileExport } from 'react-icons/fa';
 import { IoPulseOutline } from 'react-icons/io5';
-import { useToggle } from 'react-use';
+import { useToggle } from 'react-science/ui';
 
 import {
-  getDataAsString,
   generateAnalyzeSpectra,
-} from '../../../data/data1d/multipleSpectraAnalysis';
-import { ClipboardFallbackModal } from '../../../utils/clipboard/clipboardComponents';
-import { useClipboard } from '../../../utils/clipboard/clipboardHooks';
-import { useChartData } from '../../context/ChartContext';
-import { useDispatch } from '../../context/DispatchContext';
-import { useToaster } from '../../context/ToasterContext';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
-import { DisplayerMode } from '../../reducer/Reducer';
-import { booleanToString } from '../../utility/booleanToString';
-import { getSpectraByNucleus } from '../../utility/getSpectraByNucleus';
-import { tablePanelStyle } from '../extra/BasicPanelStyle';
-import { SettingsRef } from '../extra/utilities/settingImperativeHandle';
-import DefaultPanelHeader, {
-  ToolbarItemProps,
-} from '../header/DefaultPanelHeader';
-import PreferencesHeader from '../header/PreferencesHeader';
-
-import AlignSpectra from './AlignSpectra';
-import AnalysisChart from './AnalysisChart';
-import MultipleSpectraAnalysisTable from './MultipleSpectraAnalysisTable';
-import MultipleSpectraAnalysisPreferences from './preferences';
+  getDataAsString,
+} from '../../../data/data1d/multipleSpectraAnalysis.js';
+import { ClipboardFallbackModal } from '../../../utils/clipboard/clipboardComponents.js';
+import { useClipboard } from '../../../utils/clipboard/clipboardHooks.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { useToaster } from '../../context/ToasterContext.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
+import type { DisplayerMode } from '../../reducer/Reducer.js';
+import { booleanToString } from '../../utility/booleanToString.js';
+import { getSpectraByNucleus } from '../../utility/getSpectraByNucleus.js';
+import { tablePanelStyle } from '../extra/BasicPanelStyle.js';
+import type { SettingsRef } from '../extra/utilities/settingImperativeHandle.js';
+import type { ToolbarItemProps } from '../header/DefaultPanelHeader.js';
+import DefaultPanelHeader from '../header/DefaultPanelHeader.js';
+import PreferencesHeader from '../header/PreferencesHeader.js';
+
+import AlignSpectra from './AlignSpectra.js';
+import AnalysisChart from './AnalysisChart.js';
+import MultipleSpectraAnalysisTable from './MultipleSpectraAnalysisTable.js';
+import MultipleSpectraAnalysisPreferences from './preferences/index.js';
 
 interface MultipleSpectraAnalysisPanelInnerProps {
   spectra: Spectrum1D[];
diff --git a/src/component/panels/multipleAnalysisPanel/MultipleSpectraAnalysisTable.tsx b/src/component/panels/multipleAnalysisPanel/MultipleSpectraAnalysisTable.tsx
index 71441b166..d88bbe103 100644
--- a/src/component/panels/multipleAnalysisPanel/MultipleSpectraAnalysisTable.tsx
+++ b/src/component/panels/multipleAnalysisPanel/MultipleSpectraAnalysisTable.tsx
@@ -1,19 +1,18 @@
-import { useMemo, Fragment } from 'react';
+import { Fragment, useMemo } from 'react';
 
-import { SpectraAnalysisData } from '../../../data/data1d/multipleSpectraAnalysis';
-import { useDispatch } from '../../context/DispatchContext';
-import { usePreferences } from '../../context/PreferencesContext';
-import ReactTable from '../../elements/ReactTable/ReactTable';
-import addCustomColumn, {
-  CustomColumn,
-} from '../../elements/ReactTable/utility/addCustomColumn';
-import { useFormatNumberByNucleus } from '../../hooks/useFormatNumberByNucleus';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
-import evaluate from '../../utility/Evaluate';
-import NoTableData from '../extra/placeholder/NoTableData';
+import type { SpectraAnalysisData } from '../../../data/data1d/multipleSpectraAnalysis.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { usePreferences } from '../../context/PreferencesContext.js';
+import ReactTable from '../../elements/ReactTable/ReactTable.js';
+import type { CustomColumn } from '../../elements/ReactTable/utility/addCustomColumn.js';
+import addCustomColumn from '../../elements/ReactTable/utility/addCustomColumn.js';
+import { useFormatNumberByNucleus } from '../../hooks/useFormatNumberByNucleus.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
+import evaluate from '../../utility/Evaluate.js';
+import NoTableData from '../extra/placeholder/NoTableData.js';
 
-import AnalysisCell from './base/AnalysisCell';
-import AnalysisColumnHeader from './base/AnalysisColumnHeader';
+import AnalysisCell from './base/AnalysisCell.js';
+import AnalysisColumnHeader from './base/AnalysisColumnHeader.js';
 
 interface MultipleSpectraAnalysisTableProps {
   data: SpectraAnalysisData;
diff --git a/src/component/panels/multipleAnalysisPanel/base/AnalysisCell.tsx b/src/component/panels/multipleAnalysisPanel/base/AnalysisCell.tsx
index 58d46b1c1..8be454a97 100644
--- a/src/component/panels/multipleAnalysisPanel/base/AnalysisCell.tsx
+++ b/src/component/panels/multipleAnalysisPanel/base/AnalysisCell.tsx
@@ -1,7 +1,7 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
-import { useHighlight } from '../../../highlight/index';
-import { useFormatNumberByNucleus } from '../../../hooks/useFormatNumberByNucleus';
+import { useHighlight } from '../../../highlight/index.js';
+import { useFormatNumberByNucleus } from '../../../hooks/useFormatNumberByNucleus.js';
 
 const styles: Record<'container' | 'errorLabel', CSSProperties> = {
   container: {
diff --git a/src/component/panels/multipleAnalysisPanel/base/AnalysisColumnHeader.tsx b/src/component/panels/multipleAnalysisPanel/base/AnalysisColumnHeader.tsx
index 9215a7df6..2c9d415ed 100644
--- a/src/component/panels/multipleAnalysisPanel/base/AnalysisColumnHeader.tsx
+++ b/src/component/panels/multipleAnalysisPanel/base/AnalysisColumnHeader.tsx
@@ -1,9 +1,9 @@
 import { AnalysisColumnsTypes, AnalysisColumnsValuesKeys } from 'nmr-load-save';
-import { CSSProperties, MouseEvent } from 'react';
+import type { CSSProperties, MouseEvent } from 'react';
 
-import { Select2 } from '../../../elements/Select2';
-import DeleteButton from '../../../elements/Tab/DeleteButton';
-import { useHighlight } from '../../../highlight/index';
+import { Select2 } from '../../../elements/Select2.js';
+import DeleteButton from '../../../elements/Tab/DeleteButton.js';
+import { useHighlight } from '../../../highlight/index.js';
 
 const styles: Record<
   | 'container'
diff --git a/src/component/panels/multipleAnalysisPanel/preferences/AnalysisTablePreferences.tsx b/src/component/panels/multipleAnalysisPanel/preferences/AnalysisTablePreferences.tsx
index dcfb666c2..f86d81f91 100644
--- a/src/component/panels/multipleAnalysisPanel/preferences/AnalysisTablePreferences.tsx
+++ b/src/component/panels/multipleAnalysisPanel/preferences/AnalysisTablePreferences.tsx
@@ -1,12 +1,13 @@
 import { Classes } from '@blueprintjs/core';
 import { AnalysisColumnsTypes } from 'nmr-load-save';
-import { useMemo, useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { FaPlus, FaRegTrashAlt } from 'react-icons/fa';
 import { Button } from 'react-science/ui';
 
-import { Input2Controller } from '../../../elements/Input2Controller';
-import ReactTable, { Column } from '../../../elements/ReactTable/ReactTable';
+import { Input2Controller } from '../../../elements/Input2Controller.js';
+import type { Column } from '../../../elements/ReactTable/ReactTable.js';
+import ReactTable from '../../../elements/ReactTable/ReactTable.js';
 
 export function AnalysisTablePreferences() {
   const { setValue, control } = useFormContext();
diff --git a/src/component/panels/multipleAnalysisPanel/preferences/LegendsPreferences.tsx b/src/component/panels/multipleAnalysisPanel/preferences/LegendsPreferences.tsx
index e37e36782..073c2fb51 100644
--- a/src/component/panels/multipleAnalysisPanel/preferences/LegendsPreferences.tsx
+++ b/src/component/panels/multipleAnalysisPanel/preferences/LegendsPreferences.tsx
@@ -1,15 +1,16 @@
 import { Button, Classes } from '@blueprintjs/core';
-import { LegendField, PredefinedLegendField } from 'nmr-load-save';
+import type { LegendField, PredefinedLegendField } from 'nmr-load-save';
 import { useCallback, useMemo } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { FaPlus, FaRegTrashAlt } from 'react-icons/fa';
 
-import { useChartData } from '../../../context/ChartContext';
-import { CheckController } from '../../../elements/CheckController';
-import { Input2Controller } from '../../../elements/Input2Controller';
-import ReactTable, { Column } from '../../../elements/ReactTable/ReactTable';
-import { convertPathArrayToString } from '../../../utility/convertPathArrayToString';
-import { getSpectraObjectPaths } from '../../../utility/getSpectraObjectPaths';
+import { useChartData } from '../../../context/ChartContext.js';
+import { CheckController } from '../../../elements/CheckController.js';
+import { Input2Controller } from '../../../elements/Input2Controller.js';
+import type { Column } from '../../../elements/ReactTable/ReactTable.js';
+import ReactTable from '../../../elements/ReactTable/ReactTable.js';
+import { convertPathArrayToString } from '../../../utility/convertPathArrayToString.js';
+import { getSpectraObjectPaths } from '../../../utility/getSpectraObjectPaths.js';
 
 function LegendsPreferences() {
   const { setValue, control } = useFormContext();
diff --git a/src/component/panels/multipleAnalysisPanel/preferences/MultipleAnalysisCodeEditor.tsx b/src/component/panels/multipleAnalysisPanel/preferences/MultipleAnalysisCodeEditor.tsx
index 72be1b9b5..c8756fd39 100644
--- a/src/component/panels/multipleAnalysisPanel/preferences/MultipleAnalysisCodeEditor.tsx
+++ b/src/component/panels/multipleAnalysisPanel/preferences/MultipleAnalysisCodeEditor.tsx
@@ -2,7 +2,7 @@
 import { memo, useEffect, useState } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 
-import evaluate from '../../../utility/Evaluate';
+import evaluate from '../../../utility/Evaluate.js';
 
 const initCode = `function run(data) {
 
diff --git a/src/component/panels/multipleAnalysisPanel/preferences/index.tsx b/src/component/panels/multipleAnalysisPanel/preferences/index.tsx
index 5e04754cc..da57f982b 100644
--- a/src/component/panels/multipleAnalysisPanel/preferences/index.tsx
+++ b/src/component/panels/multipleAnalysisPanel/preferences/index.tsx
@@ -1,26 +1,24 @@
 import { yupResolver } from '@hookform/resolvers/yup';
-import {
-  AnalysisColumnsTypes,
-  MultipleSpectraAnalysisPreferences as MultipleSpectraAnalysisPreferencesInterface,
-} from 'nmr-load-save';
+import type { MultipleSpectraAnalysisPreferences as MultipleSpectraAnalysisPreferencesInterface } from 'nmr-load-save';
+import { AnalysisColumnsTypes } from 'nmr-load-save';
 import { forwardRef } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 
-import { SpectraAnalysisData } from '../../../../data/data1d/multipleSpectraAnalysis';
-import { usePreferences } from '../../../context/PreferencesContext';
-import { CheckController } from '../../../elements/CheckController';
-import { GroupPane } from '../../../elements/GroupPane';
-import Label from '../../../elements/Label';
-import useCheckExperimentalFeature from '../../../hooks/useCheckExperimentalFeature';
-import { usePanelPreferences } from '../../../hooks/usePanelPreferences';
-import { checkUniqueByKey } from '../../../utility/checkUniqueByKey';
-import { PreferencesContainer } from '../../extra/preferences/PreferencesContainer';
-import { useSettingImperativeHandle } from '../../extra/utilities/settingImperativeHandle';
-
-import { AnalysisTablePreferences } from './AnalysisTablePreferences';
-import LegendsPreferences from './LegendsPreferences';
-import MultipleAnalysisCodeEditor from './MultipleAnalysisCodeEditor';
+import type { SpectraAnalysisData } from '../../../../data/data1d/multipleSpectraAnalysis.js';
+import { usePreferences } from '../../../context/PreferencesContext.js';
+import { CheckController } from '../../../elements/CheckController.js';
+import { GroupPane } from '../../../elements/GroupPane.js';
+import Label from '../../../elements/Label.js';
+import useCheckExperimentalFeature from '../../../hooks/useCheckExperimentalFeature.js';
+import { usePanelPreferences } from '../../../hooks/usePanelPreferences.js';
+import { checkUniqueByKey } from '../../../utility/checkUniqueByKey.js';
+import { PreferencesContainer } from '../../extra/preferences/PreferencesContainer.js';
+import { useSettingImperativeHandle } from '../../extra/utilities/settingImperativeHandle.js';
+
+import { AnalysisTablePreferences } from './AnalysisTablePreferences.js';
+import LegendsPreferences from './LegendsPreferences.js';
+import MultipleAnalysisCodeEditor from './MultipleAnalysisCodeEditor.js';
 
 function getMultipleSpectraAnalysisData(
   preferences: MultipleSpectraAnalysisPreferencesInterface,
diff --git a/src/component/panels/predictionPanel/PredictionOptionsPanel.tsx b/src/component/panels/predictionPanel/PredictionOptionsPanel.tsx
index 10eeed982..931575a07 100644
--- a/src/component/panels/predictionPanel/PredictionOptionsPanel.tsx
+++ b/src/component/panels/predictionPanel/PredictionOptionsPanel.tsx
@@ -4,19 +4,18 @@ import { forwardRef } from 'react';
 import { useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 
-import {
-  FREQUENCIES,
-  PredictionOptions,
-} from '../../../data/PredictionManager';
-import generateNumbersPowerOfX from '../../../data/utilities/generateNumbersPowerOfX';
-import { CheckController } from '../../elements/CheckController';
-import { GroupPane } from '../../elements/GroupPane';
-import { Input2Controller } from '../../elements/Input2Controller';
-import IsotopesViewer from '../../elements/IsotopesViewer';
-import Label, { LabelStyle } from '../../elements/Label';
-import { NumberInput2Controller } from '../../elements/NumberInput2Controller';
-import { Select2Controller } from '../../elements/Select2Controller';
-import { useSettingImperativeHandle } from '../extra/utilities/settingImperativeHandle';
+import type { PredictionOptions } from '../../../data/PredictionManager.js';
+import { FREQUENCIES } from '../../../data/PredictionManager.js';
+import generateNumbersPowerOfX from '../../../data/utilities/generateNumbersPowerOfX.js';
+import { CheckController } from '../../elements/CheckController.js';
+import { GroupPane } from '../../elements/GroupPane.js';
+import { Input2Controller } from '../../elements/Input2Controller.js';
+import IsotopesViewer from '../../elements/IsotopesViewer.js';
+import type { LabelStyle } from '../../elements/Label.js';
+import Label from '../../elements/Label.js';
+import { NumberInput2Controller } from '../../elements/NumberInput2Controller.js';
+import { Select2Controller } from '../../elements/Select2Controller.js';
+import { useSettingImperativeHandle } from '../extra/utilities/settingImperativeHandle.js';
 
 const NUMBER_OF_POINTS_1D = generateNumbersPowerOfX(12, 19);
 const NUMBER_OF_POINTS_2D = generateNumbersPowerOfX(10, 10, {
diff --git a/src/component/panels/predictionPanel/PredictionPanel.tsx b/src/component/panels/predictionPanel/PredictionPanel.tsx
index b08c43b54..89fb21998 100644
--- a/src/component/panels/predictionPanel/PredictionPanel.tsx
+++ b/src/component/panels/predictionPanel/PredictionPanel.tsx
@@ -1,28 +1,29 @@
 /** @jsxImportSource @emotion/react */
-import OCL from 'openchemlib/full';
-import { CSSProperties, useEffect, useRef, useState } from 'react';
+import type OCL from 'openchemlib/full';
+import type { CSSProperties } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { ResponsiveChart } from 'react-d3-utils';
 import { StructureEditor } from 'react-ocl/full';
 import { useAccordionContext } from 'react-science/ui';
 
-import { predictSpectra } from '../../../data/PredictionManager';
-import { StateMoleculeExtended } from '../../../data/molecules/Molecule';
-import { useChartData } from '../../context/ChartContext';
-import { useDispatch } from '../../context/DispatchContext';
-import { useLogger } from '../../context/LoggerContext';
-import { useToaster } from '../../context/ToasterContext';
-import Button from '../../elements/Button';
-import { NextPrev } from '../../elements/NextPrev';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
-import { useMoleculeEditor } from '../../modal/MoleculeStructureEditorModal';
-import MoleculeHeader from '../MoleculesPanel/MoleculeHeader';
-import MoleculePanelHeader from '../MoleculesPanel/MoleculePanelHeader';
-import { tablePanelStyle } from '../extra/BasicPanelStyle';
-import { SettingsRef } from '../extra/utilities/settingImperativeHandle';
-import PreferencesHeader from '../header/PreferencesHeader';
+import { predictSpectra } from '../../../data/PredictionManager.js';
+import type { StateMoleculeExtended } from '../../../data/molecules/Molecule.js';
+import { useChartData } from '../../context/ChartContext.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import { useLogger } from '../../context/LoggerContext.js';
+import { useToaster } from '../../context/ToasterContext.js';
+import Button from '../../elements/Button.js';
+import { NextPrev } from '../../elements/NextPrev.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
+import { useMoleculeEditor } from '../../modal/MoleculeStructureEditorModal.js';
+import MoleculeHeader from '../MoleculesPanel/MoleculeHeader.js';
+import MoleculePanelHeader from '../MoleculesPanel/MoleculePanelHeader.js';
+import { tablePanelStyle } from '../extra/BasicPanelStyle.js';
+import type { SettingsRef } from '../extra/utilities/settingImperativeHandle.js';
+import PreferencesHeader from '../header/PreferencesHeader.js';
 
-import PredictionPreferences from './PredictionPreferences';
-import PredictionSimpleOptions from './PredictionSimpleOptions';
+import PredictionPreferences from './PredictionPreferences.js';
+import PredictionSimpleOptions from './PredictionSimpleOptions.js';
 
 const styles: Record<'flexColumnContainer' | 'slider', CSSProperties> = {
   flexColumnContainer: {
diff --git a/src/component/panels/predictionPanel/PredictionPreferences.tsx b/src/component/panels/predictionPanel/PredictionPreferences.tsx
index 7e6e48309..b72e16189 100644
--- a/src/component/panels/predictionPanel/PredictionPreferences.tsx
+++ b/src/component/panels/predictionPanel/PredictionPreferences.tsx
@@ -1,11 +1,11 @@
-import { useCallback, useImperativeHandle, useRef, forwardRef } from 'react';
+import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
 
-import { usePreferences } from '../../context/PreferencesContext';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
-import { PreferencesContainer } from '../extra/preferences/PreferencesContainer';
-import { SettingsRef } from '../extra/utilities/settingImperativeHandle';
+import { usePreferences } from '../../context/PreferencesContext.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
+import { PreferencesContainer } from '../extra/preferences/PreferencesContainer.js';
+import type { SettingsRef } from '../extra/utilities/settingImperativeHandle.js';
 
-import PredictionOptionsPanel from './PredictionOptionsPanel';
+import PredictionOptionsPanel from './PredictionOptionsPanel.js';
 
 function PredictionPreferences(props, ref: any) {
   const formRef = useRef<SettingsRef | null>(null);
diff --git a/src/component/panels/predictionPanel/PredictionSimpleOptions.tsx b/src/component/panels/predictionPanel/PredictionSimpleOptions.tsx
index ead3115f4..22f262eb5 100644
--- a/src/component/panels/predictionPanel/PredictionSimpleOptions.tsx
+++ b/src/component/panels/predictionPanel/PredictionSimpleOptions.tsx
@@ -1,19 +1,20 @@
 import { Tag } from '@blueprintjs/core';
 import { yupResolver } from '@hookform/resolvers/yup';
-import lodashMerge from 'lodash/merge';
+import lodashMerge from 'lodash/merge.js';
 import { useCallback, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 
 import {
-  getDefaultPredictionOptions,
   FREQUENCIES,
-} from '../../../data/PredictionManager';
-import { usePreferences } from '../../context/PreferencesContext';
-import Label, { LabelStyle } from '../../elements/Label';
-import { NumberInput2Controller } from '../../elements/NumberInput2Controller';
-import { Select2Controller } from '../../elements/Select2Controller';
-import { usePanelPreferences } from '../../hooks/usePanelPreferences';
+  getDefaultPredictionOptions,
+} from '../../../data/PredictionManager.js';
+import { usePreferences } from '../../context/PreferencesContext.js';
+import type { LabelStyle } from '../../elements/Label.js';
+import Label from '../../elements/Label.js';
+import { NumberInput2Controller } from '../../elements/NumberInput2Controller.js';
+import { Select2Controller } from '../../elements/Select2Controller.js';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
 
 const predictionFormValidation = Yup.object().shape({
   frequency: Yup.number().integer().required().label('Frequency'),
diff --git a/src/component/panels/spectrumSimulation/SpectrumSimulation.tsx b/src/component/panels/spectrumSimulation/SpectrumSimulation.tsx
index 42b17d57c..14f2f1a4b 100644
--- a/src/component/panels/spectrumSimulation/SpectrumSimulation.tsx
+++ b/src/component/panels/spectrumSimulation/SpectrumSimulation.tsx
@@ -1,24 +1,22 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { useCallback, useState, useRef, useEffect } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 
-import {
-  SpectrumSimulationOptions,
-  defaultSimulationOptions,
-} from '../../../data/data1d/spectrumSimulation';
-import { useDispatch } from '../../context/DispatchContext';
-import Button from '../../elements/Button';
-import AboutSpectrumSimulationModal from '../../modal/AboutSpectrumSimulationModal';
-import { tablePanelStyle } from '../extra/BasicPanelStyle';
-import { SettingsRef } from '../extra/utilities/settingImperativeHandle';
-import DefaultPanelHeader from '../header/DefaultPanelHeader';
-import PreferencesHeader from '../header/PreferencesHeader';
-
-import SpectrumSimulationPreferences from './SpectrumSimulationPreferences';
-import SpectrumSimulationSimpleOptions from './SpectrumSimulationSimpleOptions';
-import { SpinSystemTable } from './SpinSystemTable';
+import type { SpectrumSimulationOptions } from '../../../data/data1d/spectrumSimulation.js';
+import { defaultSimulationOptions } from '../../../data/data1d/spectrumSimulation.js';
+import { useDispatch } from '../../context/DispatchContext.js';
+import Button from '../../elements/Button.js';
+import AboutSpectrumSimulationModal from '../../modal/AboutSpectrumSimulationModal.js';
+import { tablePanelStyle } from '../extra/BasicPanelStyle.js';
+import type { SettingsRef } from '../extra/utilities/settingImperativeHandle.js';
+import DefaultPanelHeader from '../header/DefaultPanelHeader.js';
+import PreferencesHeader from '../header/PreferencesHeader.js';
+
+import SpectrumSimulationPreferences from './SpectrumSimulationPreferences.js';
+import SpectrumSimulationSimpleOptions from './SpectrumSimulationSimpleOptions.js';
+import { SpinSystemTable } from './SpinSystemTable.js';
 
 const validationSchema = Yup.object({
   data: Yup.array().of(
diff --git a/src/component/panels/spectrumSimulation/SpectrumSimulationPreferences.tsx b/src/component/panels/spectrumSimulation/SpectrumSimulationPreferences.tsx
index cbc06b65d..a2f98e48a 100644
--- a/src/component/panels/spectrumSimulation/SpectrumSimulationPreferences.tsx
+++ b/src/component/panels/spectrumSimulation/SpectrumSimulationPreferences.tsx
@@ -2,14 +2,15 @@ import { Tag } from '@blueprintjs/core';
 import { forwardRef } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 
-import { FREQUENCIES } from '../../../data/PredictionManager';
-import { SpectrumSimulationOptions } from '../../../data/data1d/spectrumSimulation';
-import generateNumbersPowerOfX from '../../../data/utilities/generateNumbersPowerOfX';
-import Label, { LabelStyle } from '../../elements/Label';
-import { NumberInput2Controller } from '../../elements/NumberInput2Controller';
-import { Select2Controller } from '../../elements/Select2Controller';
-import { PreferencesContainer } from '../extra/preferences/PreferencesContainer';
-import { useSettingImperativeHandle } from '../extra/utilities/settingImperativeHandle';
+import { FREQUENCIES } from '../../../data/PredictionManager.js';
+import type { SpectrumSimulationOptions } from '../../../data/data1d/spectrumSimulation.js';
+import generateNumbersPowerOfX from '../../../data/utilities/generateNumbersPowerOfX.js';
+import type { LabelStyle } from '../../elements/Label.js';
+import Label from '../../elements/Label.js';
+import { NumberInput2Controller } from '../../elements/NumberInput2Controller.js';
+import { Select2Controller } from '../../elements/Select2Controller.js';
+import { PreferencesContainer } from '../extra/preferences/PreferencesContainer.js';
+import { useSettingImperativeHandle } from '../extra/utilities/settingImperativeHandle.js';
 
 const SIMULATION_NUMBER_OF_POINTS = generateNumbersPowerOfX(12, 19);
 
diff --git a/src/component/panels/spectrumSimulation/SpectrumSimulationSimpleOptions.tsx b/src/component/panels/spectrumSimulation/SpectrumSimulationSimpleOptions.tsx
index 81d889ae3..70cefa01f 100644
--- a/src/component/panels/spectrumSimulation/SpectrumSimulationSimpleOptions.tsx
+++ b/src/component/panels/spectrumSimulation/SpectrumSimulationSimpleOptions.tsx
@@ -1,12 +1,13 @@
 import { Tag } from '@blueprintjs/core';
 import { useFormContext } from 'react-hook-form';
 
-import { FREQUENCIES } from '../../../data/PredictionManager';
-import { getSpinSystems } from '../../../data/data1d/spectrumSimulation';
-import Label, { LabelStyle } from '../../elements/Label';
-import { NumberInput2Controller } from '../../elements/NumberInput2Controller';
-import { Select2 } from '../../elements/Select2';
-import { Select2Controller } from '../../elements/Select2Controller';
+import { FREQUENCIES } from '../../../data/PredictionManager.js';
+import { getSpinSystems } from '../../../data/data1d/spectrumSimulation.js';
+import type { LabelStyle } from '../../elements/Label.js';
+import Label from '../../elements/Label.js';
+import { NumberInput2Controller } from '../../elements/NumberInput2Controller.js';
+import { Select2 } from '../../elements/Select2.js';
+import { Select2Controller } from '../../elements/Select2Controller.js';
 
 const SPIN_SYSTEMS = getSpinSystems().map((key) => ({
   label: key,
diff --git a/src/component/panels/spectrumSimulation/SpinSystemTable.tsx b/src/component/panels/spectrumSimulation/SpinSystemTable.tsx
index a98aa5e41..0b04a89e7 100644
--- a/src/component/panels/spectrumSimulation/SpinSystemTable.tsx
+++ b/src/component/panels/spectrumSimulation/SpinSystemTable.tsx
@@ -1,9 +1,11 @@
-import { CSSProperties, useMemo } from 'react';
+import type { CSSProperties } from 'react';
+import { useMemo } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 
-import { NumberInput2Controller } from '../../elements/NumberInput2Controller';
-import ReactTable, { Column } from '../../elements/ReactTable/ReactTable';
-import addCustomColumn from '../../elements/ReactTable/utility/addCustomColumn';
+import { NumberInput2Controller } from '../../elements/NumberInput2Controller.js';
+import type { Column } from '../../elements/ReactTable/ReactTable.js';
+import ReactTable from '../../elements/ReactTable/ReactTable.js';
+import addCustomColumn from '../../elements/ReactTable/utility/addCustomColumn.js';
 
 const cellStyle: CSSProperties = {
   padding: '1px',
diff --git a/src/component/reducer/IgnoreActions.ts b/src/component/reducer/IgnoreActions.ts
index fc3ae118a..6085f1bb4 100644
--- a/src/component/reducer/IgnoreActions.ts
+++ b/src/component/reducer/IgnoreActions.ts
@@ -1,4 +1,4 @@
-import { Action } from '../context/DispatchContext';
+import type { Action } from '../context/DispatchContext.js';
 
 const ignoreActions = new Set<Partial<Action['type']>>([
   'INITIALIZE_NMRIUM',
diff --git a/src/component/reducer/Reducer.ts b/src/component/reducer/Reducer.ts
index fc603976a..68e58ddff 100644
--- a/src/component/reducer/Reducer.ts
+++ b/src/component/reducer/Reducer.ts
@@ -1,34 +1,39 @@
 import { v4 } from '@lukeed/uuid';
-import { WebSource as Source } from 'filelist-utils';
-import { Draft, produce, original } from 'immer';
-import { buildCorrelationData, CorrelationData } from 'nmr-correlation';
-import { Spectrum, ViewState } from 'nmr-load-save';
-import { ApodizationOptions, BaselineCorrectionZone } from 'nmr-processing';
-import { Reducer } from 'react';
-
-import { StateMoleculeExtended } from '../../data/molecules/Molecule';
-import { UsedColors } from '../../types/UsedColors';
-import { Action } from '../context/DispatchContext';
-import { DefaultTolerance } from '../panels/SummaryPanel/CorrelationTable/Constants';
-import { Tool } from '../toolbar/ToolTypes';
-
-import * as AssignmentsActions from './actions/AssignmentsActions';
-import * as CorrelationsActions from './actions/CorrelationsActions';
-import * as DatabaseActions from './actions/DatabaseActions';
-import * as DimensionsActions from './actions/DimensionsActions';
-import * as DomainActions from './actions/DomainActions';
-import * as FiltersActions from './actions/FiltersActions';
-import * as IntegralsActions from './actions/IntegralsActions';
-import * as LoadActions from './actions/LoadActions';
-import * as MoleculeActions from './actions/MoleculeActions';
-import * as PeaksActions from './actions/PeaksActions';
-import * as PreferencesActions from './actions/PreferencesActions';
-import * as RangesActions from './actions/RangesActions';
-import * as SpectraActions from './actions/SpectraActions';
-import * as SpectraAnalysisActions from './actions/SpectraAnalysisAction';
-import * as ToolsActions from './actions/ToolsActions';
-import * as ZonesActions from './actions/ZonesActions';
-import { ZoomHistory } from './helper/ZoomHistoryManager';
+import type { WebSource as Source } from 'filelist-utils';
+import type { Draft } from 'immer';
+import { produce, original } from 'immer';
+import type { CorrelationData } from 'nmr-correlation';
+import { buildCorrelationData } from 'nmr-correlation';
+import type { Spectrum, ViewState } from 'nmr-load-save';
+import type {
+  ApodizationOptions,
+  BaselineCorrectionZone,
+} from 'nmr-processing';
+import type { Reducer } from 'react';
+
+import type { StateMoleculeExtended } from '../../data/molecules/Molecule.js';
+import type { UsedColors } from '../../types/UsedColors.js';
+import type { Action } from '../context/DispatchContext.js';
+import { DefaultTolerance } from '../panels/SummaryPanel/CorrelationTable/Constants.js';
+import type { Tool } from '../toolbar/ToolTypes.js';
+
+import * as AssignmentsActions from './actions/AssignmentsActions.js';
+import * as CorrelationsActions from './actions/CorrelationsActions.js';
+import * as DatabaseActions from './actions/DatabaseActions.js';
+import * as DimensionsActions from './actions/DimensionsActions.js';
+import * as DomainActions from './actions/DomainActions.js';
+import * as FiltersActions from './actions/FiltersActions.js';
+import * as IntegralsActions from './actions/IntegralsActions.js';
+import * as LoadActions from './actions/LoadActions.js';
+import * as MoleculeActions from './actions/MoleculeActions.js';
+import * as PeaksActions from './actions/PeaksActions.js';
+import * as PreferencesActions from './actions/PreferencesActions.js';
+import * as RangesActions from './actions/RangesActions.js';
+import * as SpectraActions from './actions/SpectraActions.js';
+import * as SpectraAnalysisActions from './actions/SpectraAnalysisAction.js';
+import * as ToolsActions from './actions/ToolsActions.js';
+import * as ZonesActions from './actions/ZonesActions.js';
+import type { ZoomHistory } from './helper/ZoomHistoryManager.js';
 
 export type DisplayerMode = '1D' | '2D';
 
diff --git a/src/component/reducer/actions/AssignmentsActions.ts b/src/component/reducer/actions/AssignmentsActions.ts
index 56d5c6826..cd77249eb 100644
--- a/src/component/reducer/actions/AssignmentsActions.ts
+++ b/src/component/reducer/actions/AssignmentsActions.ts
@@ -1,9 +1,9 @@
-import { Draft } from 'immer';
-import { Spectrum1D, Spectrum2D } from 'nmr-load-save';
-import { Range, Zone, SpectraData1D, SpectraData2D } from 'nmr-processing';
+import type { Draft } from 'immer';
+import type { Spectrum1D, Spectrum2D } from 'nmr-load-save';
+import type { Range, Zone, SpectraData1D, SpectraData2D } from 'nmr-processing';
 
-import { State } from '../Reducer';
-import { ActionType } from '../types/ActionType';
+import type { State } from '../Reducer.js';
+import type { ActionType } from '../types/ActionType.js';
 
 type SetAutomaticAssignmentsAction = ActionType<
   'SET_AUTOMATIC_ASSIGNMENTS',
diff --git a/src/component/reducer/actions/CorrelationsActions.ts b/src/component/reducer/actions/CorrelationsActions.ts
index e653951ba..2a932a7fb 100644
--- a/src/component/reducer/actions/CorrelationsActions.ts
+++ b/src/component/reducer/actions/CorrelationsActions.ts
@@ -1,15 +1,15 @@
-import { original, Draft } from 'immer';
-import lodashCloneDeep from 'lodash/cloneDeep';
-import {
-  buildCorrelationData,
-  setCorrelation,
+import type { Draft } from 'immer';
+import { original } from 'immer';
+import lodashCloneDeep from 'lodash/cloneDeep.js';
+import type {
   Tolerance,
   Options as CorrelationOptions,
   Correlation,
   Spectrum,
   Values as CorrelationValues,
 } from 'nmr-correlation';
-import { Spectrum1D, Spectrum2D } from 'nmr-load-save';
+import { buildCorrelationData, setCorrelation } from 'nmr-correlation';
+import type { Spectrum1D, Spectrum2D } from 'nmr-load-save';
 
 import {
   findRange,
@@ -17,13 +17,13 @@ import {
   findSignal2D,
   findSpectrum,
   findZone,
-} from '../../../data/utilities/FindUtilities';
-import { AssignmentContext } from '../../assignment/AssignmentsContext';
-import { State } from '../Reducer';
-import { ActionType } from '../types/ActionType';
+} from '../../../data/utilities/FindUtilities.js';
+import type { AssignmentContext } from '../../assignment/AssignmentsContext.js';
+import type { State } from '../Reducer.js';
+import type { ActionType } from '../types/ActionType.js';
 
-import { deleteSignal1D } from './RangesActions';
-import { deleteSignal2D } from './ZonesActions';
+import { deleteSignal1D } from './RangesActions.js';
+import { deleteSignal2D } from './ZonesActions.js';
 
 type SetMFAction = ActionType<'SET_CORRELATIONS_MF', { mf: string }>;
 type SetToleranceAction = ActionType<
diff --git a/src/component/reducer/actions/DatabaseActions.ts b/src/component/reducer/actions/DatabaseActions.ts
index 4ba1bfb90..ee99da54a 100644
--- a/src/component/reducer/actions/DatabaseActions.ts
+++ b/src/component/reducer/actions/DatabaseActions.ts
@@ -1,23 +1,23 @@
-import { Draft } from 'immer';
-import { Spectrum, Spectrum1D } from 'nmr-load-save';
-import { DatabaseNMREntry, Info1D } from 'nmr-processing';
+import type { Draft } from 'immer';
+import type { Spectrum, Spectrum1D } from 'nmr-load-save';
+import type { DatabaseNMREntry, Info1D } from 'nmr-processing';
 
 import {
   get1DColor,
   isSpectrum1D,
   mapRanges,
-} from '../../../data/data1d/Spectrum1D';
+} from '../../../data/data1d/Spectrum1D/index.js';
 import {
   resurrectSpectrumFromRanges,
   resurrectSpectrumFromSignals,
-} from '../../../data/data1d/Spectrum1D/ranges/resurrectSpectrum';
-import { State } from '../Reducer';
-import { setZoom } from '../helper/Zoom1DManager';
-import zoomHistoryManager from '../helper/ZoomHistoryManager';
-import { getSpectrum } from '../helper/getSpectrum';
-import { ActionType } from '../types/ActionType';
-
-import { setDomain } from './DomainActions';
+} from '../../../data/data1d/Spectrum1D/ranges/resurrectSpectrum.js';
+import type { State } from '../Reducer.js';
+import { setZoom } from '../helper/Zoom1DManager.js';
+import zoomHistoryManager from '../helper/ZoomHistoryManager.js';
+import { getSpectrum } from '../helper/getSpectrum.js';
+import type { ActionType } from '../types/ActionType.js';
+
+import { setDomain } from './DomainActions.js';
 
 interface BaseResurrectSpectrum {
   databaseEntry: DatabaseNMREntry;
diff --git a/src/component/reducer/actions/DimensionsActions.ts b/src/component/reducer/actions/DimensionsActions.ts
index d316960a6..ad8942141 100644
--- a/src/component/reducer/actions/DimensionsActions.ts
+++ b/src/component/reducer/actions/DimensionsActions.ts
@@ -1,7 +1,7 @@
-import { Draft } from 'immer';
+import type { Draft } from 'immer';
 
-import { State } from '../Reducer';
-import { ActionType } from '../types/ActionType';
+import type { State } from '../Reducer.js';
+import type { ActionType } from '../types/ActionType.js';
 
 type SetDimensionsAction = ActionType<
   'SET_DIMENSIONS',
diff --git a/src/component/reducer/actions/DomainActions.ts b/src/component/reducer/actions/DomainActions.ts
index 36e88bc6d..642c30a03 100644
--- a/src/component/reducer/actions/DomainActions.ts
+++ b/src/component/reducer/actions/DomainActions.ts
@@ -1,16 +1,16 @@
-import type { NmrData2DFt, NmrData2DFid } from 'cheminfo-types';
+import type { NmrData2DFid, NmrData2DFt } from 'cheminfo-types';
 import { extent } from 'd3';
-import { Draft } from 'immer';
-import { Spectrum1D, Spectrum2D, NucleiPreferences } from 'nmr-load-save';
-
-import { get1DDataXY } from '../../../data/data1d/Spectrum1D/get1DDataXY';
-import { isSpectrum2D } from '../../../data/data2d/Spectrum2D';
-import nucleusToString from '../../utility/nucleusToString';
-import { State } from '../Reducer';
-import { addToBrushHistory } from '../helper/ZoomHistoryManager';
-import { getActiveSpectra } from '../helper/getActiveSpectra';
-import { getActiveSpectrum } from '../helper/getActiveSpectrum';
-import { ActionType } from '../types/ActionType';
+import type { Draft } from 'immer';
+import type { NucleiPreferences, Spectrum1D, Spectrum2D } from 'nmr-load-save';
+
+import { get1DDataXY } from '../../../data/data1d/Spectrum1D/get1DDataXY.js';
+import { isSpectrum2D } from '../../../data/data2d/Spectrum2D/index.js';
+import nucleusToString from '../../utility/nucleusToString.js';
+import type { State } from '../Reducer.js';
+import { addToBrushHistory } from '../helper/ZoomHistoryManager.js';
+import { getActiveSpectra } from '../helper/getActiveSpectra.js';
+import { getActiveSpectrum } from '../helper/getActiveSpectrum.js';
+import type { ActionType } from '../types/ActionType.js';
 
 type SetAxisDomainAction = ActionType<
   'SET_AXIS_DOMAIN',
diff --git a/src/component/reducer/actions/FiltersActions.ts b/src/component/reducer/actions/FiltersActions.ts
index 976304247..a75ac01ec 100644
--- a/src/component/reducer/actions/FiltersActions.ts
+++ b/src/component/reducer/actions/FiltersActions.ts
@@ -1,51 +1,57 @@
 import { v4 } from '@lukeed/uuid';
-import { NmrData1D, NmrData2DFt } from 'cheminfo-types';
-import { current, Draft } from 'immer';
+import type { NmrData1D, NmrData2DFt } from 'cheminfo-types';
+import type { Draft } from 'immer';
+import { current } from 'immer';
 import { xFindClosestIndex } from 'ml-spectra-processing';
-import {
+import type {
   ActiveSpectrum,
   Spectrum,
   Spectrum1D,
   Spectrum2D,
 } from 'nmr-load-save';
+import type {
+  ApodizationOptions,
+  BaselineCorrectionOptions,
+} from 'nmr-processing';
 import {
   Filters,
   FiltersManager,
-  BaselineCorrectionOptions,
-  ApodizationOptions,
   getBaselineZonesByDietrich,
 } from 'nmr-processing';
 
-import { defaultApodizationOptions } from '../../../data/constants/DefaultApodizationOptions';
-import { isSpectrum1D } from '../../../data/data1d/Spectrum1D';
-import { isSpectrum2D } from '../../../data/data2d/Spectrum2D';
-import { getProjection } from '../../../data/data2d/Spectrum2D/getMissingProjection';
-import { ExclusionZone } from '../../../data/types/data1d/ExclusionZone';
-import { MatrixOptions } from '../../../data/types/data1d/MatrixOptions';
-import { getXScale } from '../../1d/utilities/scale';
-import { get2DXScale, get2DYScale } from '../../2d/utilities/scale';
-import { Tool, options as Tools } from '../../toolbar/ToolTypes';
-import { getSpectraByNucleus } from '../../utility/getSpectraByNucleus';
-import nucleusToString from '../../utility/nucleusToString';
-import {
-  getDefaultTwoDimensionsPhaseCorrectionTraceOptions,
-  getInitialState,
+import { defaultApodizationOptions } from '../../../data/constants/DefaultApodizationOptions.js';
+import { isSpectrum1D } from '../../../data/data1d/Spectrum1D/index.js';
+import { getProjection } from '../../../data/data2d/Spectrum2D/getMissingProjection.js';
+import { isSpectrum2D } from '../../../data/data2d/Spectrum2D/index.js';
+import type { ExclusionZone } from '../../../data/types/data1d/ExclusionZone.js';
+import type { MatrixOptions } from '../../../data/types/data1d/MatrixOptions.js';
+import { getXScale } from '../../1d/utilities/scale.js';
+import { get2DXScale, get2DYScale } from '../../2d/utilities/scale.js';
+import type { Tool } from '../../toolbar/ToolTypes.js';
+import { options as Tools } from '../../toolbar/ToolTypes.js';
+import { getSpectraByNucleus } from '../../utility/getSpectraByNucleus.js';
+import nucleusToString from '../../utility/nucleusToString.js';
+import type {
   PhaseCorrectionTraceData,
   State,
   TraceDirection,
   TwoDimensionPhaseCorrection,
-} from '../Reducer';
-import zoomHistoryManager from '../helper/ZoomHistoryManager';
-import { findStrongestPeak } from '../helper/findStrongestPeak';
-import { getActiveSpectrum } from '../helper/getActiveSpectrum';
-import getRange from '../helper/getRange';
-import { getSpectrum } from '../helper/getSpectrum';
-import { getTwoDimensionPhaseCorrectionOptions } from '../helper/getTwoDimensionPhaseCorrectionOptions';
-import { ActionType } from '../types/ActionType';
-
-import { setDomain, setMode } from './DomainActions';
-import { changeSpectrumVerticalAlignment } from './PreferencesActions';
-import { activateTool, resetSelectedTool } from './ToolsActions';
+} from '../Reducer.js';
+import {
+  getDefaultTwoDimensionsPhaseCorrectionTraceOptions,
+  getInitialState,
+} from '../Reducer.js';
+import zoomHistoryManager from '../helper/ZoomHistoryManager.js';
+import { findStrongestPeak } from '../helper/findStrongestPeak.js';
+import { getActiveSpectrum } from '../helper/getActiveSpectrum.js';
+import getRange from '../helper/getRange.js';
+import { getSpectrum } from '../helper/getSpectrum.js';
+import { getTwoDimensionPhaseCorrectionOptions } from '../helper/getTwoDimensionPhaseCorrectionOptions.js';
+import type { ActionType } from '../types/ActionType.js';
+
+import { setDomain, setMode } from './DomainActions.js';
+import { changeSpectrumVerticalAlignment } from './PreferencesActions.js';
+import { activateTool, resetSelectedTool } from './ToolsActions.js';
 
 const {
   fft,
diff --git a/src/component/reducer/actions/HistoryActions.ts b/src/component/reducer/actions/HistoryActions.ts
index f69307601..4309ac017 100644
--- a/src/component/reducer/actions/HistoryActions.ts
+++ b/src/component/reducer/actions/HistoryActions.ts
@@ -1,4 +1,4 @@
-import { setDomain, getDomain } from './DomainActions';
+import { setDomain, getDomain } from './DomainActions.js';
 
 function handleHistoryUndo(draft) {
   const { past, present, future } = draft.history;
diff --git a/src/component/reducer/actions/IntegralsActions.ts b/src/component/reducer/actions/IntegralsActions.ts
index 7d257d3d3..566743680 100644
--- a/src/component/reducer/actions/IntegralsActions.ts
+++ b/src/component/reducer/actions/IntegralsActions.ts
@@ -1,27 +1,30 @@
 import { v4 } from '@lukeed/uuid';
-import { Draft, original } from 'immer';
+import type { Draft } from 'immer';
+import { original } from 'immer';
 import { xyIntegration } from 'ml-spectra-processing';
-import { IntegralsViewState, Spectrum1D } from 'nmr-load-save';
-import { Integral } from 'nmr-processing';
+import type { IntegralsViewState, Spectrum1D } from 'nmr-load-save';
+import type { Integral } from 'nmr-processing';
 
-import {
-  updateIntegralsRelativeValues,
-  changeIntegralsRelative,
-  getShiftX,
-} from '../../../data/data1d/Spectrum1D';
-import {
+import type {
   SetSumOptions,
   SumParams,
+} from '../../../data/data1d/Spectrum1D/SumManager.js';
+import {
   initSumOptions,
   setSumOptions,
-} from '../../../data/data1d/Spectrum1D/SumManager';
-import { FilterType } from '../../utility/filterType';
-import { State } from '../Reducer';
-import { getActiveSpectrum } from '../helper/getActiveSpectrum';
-import getRange from '../helper/getRange';
-import { getSpectrum } from '../helper/getSpectrum';
-import { setIntegralsViewProperty } from '../helper/setIntegralsViewProperty';
-import { ActionType } from '../types/ActionType';
+} from '../../../data/data1d/Spectrum1D/SumManager.js';
+import {
+  updateIntegralsRelativeValues,
+  changeIntegralsRelative,
+  getShiftX,
+} from '../../../data/data1d/Spectrum1D/index.js';
+import type { FilterType } from '../../utility/filterType.js';
+import type { State } from '../Reducer.js';
+import { getActiveSpectrum } from '../helper/getActiveSpectrum.js';
+import getRange from '../helper/getRange.js';
+import { getSpectrum } from '../helper/getSpectrum.js';
+import { setIntegralsViewProperty } from '../helper/setIntegralsViewProperty.js';
+import type { ActionType } from '../types/ActionType.js';
 
 type ChangeIntegralSumAction = ActionType<
   'CHANGE_INTEGRAL_SUM',
diff --git a/src/component/reducer/actions/LoadActions.ts b/src/component/reducer/actions/LoadActions.ts
index 640e94500..dd9171010 100644
--- a/src/component/reducer/actions/LoadActions.ts
+++ b/src/component/reducer/actions/LoadActions.ts
@@ -1,23 +1,31 @@
-import { Draft, produce } from 'immer';
-import lodashMerge from 'lodash/merge';
-import lodashMergeWith from 'lodash/mergeWith';
-import { buildCorrelationData, CorrelationData } from 'nmr-correlation';
-import { Spectrum, ViewState, NmriumState, SpectraColors } from 'nmr-load-save';
-import { ParseResult } from 'papaparse';
+import type { Draft } from 'immer';
+import { produce } from 'immer';
+import lodashMerge from 'lodash/merge.js';
+import lodashMergeWith from 'lodash/mergeWith.js';
+import type { CorrelationData } from 'nmr-correlation';
+import { buildCorrelationData } from 'nmr-correlation';
+import type {
+  NmriumState,
+  SpectraColors,
+  Spectrum,
+  ViewState,
+} from 'nmr-load-save';
+import type { ParseResult } from 'papaparse';
 
-import { initiateDatum1D } from '../../../data/data1d/Spectrum1D';
-import { initiateDatum2D } from '../../../data/data2d/Spectrum2D';
-import { StateMoleculeExtended } from '../../../data/molecules/Molecule';
-import * as MoleculeManager from '../../../data/molecules/MoleculeManager';
-import { linkMetaWithSpectra } from '../../../data/parseMeta/linkMetaWithSpectra';
-import { UsedColors } from '../../../types/UsedColors';
-import { DefaultTolerance } from '../../panels/SummaryPanel/CorrelationTable/Constants';
-import { getDefaultViewState, getInitialState, State } from '../Reducer';
-import { ActionType } from '../types/ActionType';
+import { initiateDatum1D } from '../../../data/data1d/Spectrum1D/index.js';
+import { initiateDatum2D } from '../../../data/data2d/Spectrum2D/index.js';
+import type { StateMoleculeExtended } from '../../../data/molecules/Molecule.js';
+import * as MoleculeManager from '../../../data/molecules/MoleculeManager.js';
+import { linkMetaWithSpectra } from '../../../data/parseMeta/linkMetaWithSpectra.js';
+import type { UsedColors } from '../../../types/UsedColors.js';
+import { DefaultTolerance } from '../../panels/SummaryPanel/CorrelationTable/Constants.js';
+import type { State } from '../Reducer.js';
+import { getDefaultViewState, getInitialState } from '../Reducer.js';
+import type { ActionType } from '../types/ActionType.js';
 
-import { changeSpectrumVerticalAlignment } from './PreferencesActions';
-import { setSpectraMetaInfo } from './SpectraActions';
-import { setActiveTab } from './ToolsActions';
+import { changeSpectrumVerticalAlignment } from './PreferencesActions.js';
+import { setSpectraMetaInfo } from './SpectraActions.js';
+import { setActiveTab } from './ToolsActions.js';
 
 //TODO use viewState type instead of any { view?: ViewState }
 interface InitiateProps {
diff --git a/src/component/reducer/actions/MoleculeActions.ts b/src/component/reducer/actions/MoleculeActions.ts
index d28a5c168..ff09fb9e5 100644
--- a/src/component/reducer/actions/MoleculeActions.ts
+++ b/src/component/reducer/actions/MoleculeActions.ts
@@ -1,31 +1,32 @@
-import { Logger } from 'cheminfo-types';
-import { FifoLogger } from 'fifo-logger';
-import { Draft } from 'immer';
+import type { Logger } from 'cheminfo-types';
+import type { FifoLogger } from 'fifo-logger';
+import type { Draft } from 'immer';
 import OCL from 'openchemlib/full';
-import { nbLabileH, getAtoms, TopicMolecule } from 'openchemlib-utils';
+import type { TopicMolecule } from 'openchemlib-utils';
+import { nbLabileH, getAtoms } from 'openchemlib-utils';
 
-import {
+import type {
   PredictedSpectraResult,
   PredictionOptions,
-  generateSpectra,
-} from '../../../data/PredictionManager';
-import { changeSpectraRelativeSum } from '../../../data/data1d/Spectrum1D/SumManager';
-import {
-  DRAGGABLE_STRUCTURE_INITIAL_BOUNDING_REACT,
+} from '../../../data/PredictionManager.js';
+import { generateSpectra } from '../../../data/PredictionManager.js';
+import { changeSpectraRelativeSum } from '../../../data/data1d/Spectrum1D/SumManager.js';
+import type {
   MoleculeBoundingRect,
   StateMolecule,
-} from '../../../data/molecules/Molecule';
-import * as MoleculeManager from '../../../data/molecules/MoleculeManager';
-import { generateColor } from '../../../data/utilities/generateColor';
-import { AssignmentContext } from '../../assignment/AssignmentsContext';
-import { State } from '../Reducer';
-import { MARGIN } from '../core/Constants';
-import { ActionType } from '../types/ActionType';
-
-import { unlinkRange } from './RangesActions';
-import { setActiveTab } from './ToolsActions';
-import { unlinkZone } from './ZonesActions';
-import { deepReplaceDiaIDs } from './utilities/deepReplaceDiaIDs';
+} from '../../../data/molecules/Molecule.js';
+import { DRAGGABLE_STRUCTURE_INITIAL_BOUNDING_REACT } from '../../../data/molecules/Molecule.js';
+import * as MoleculeManager from '../../../data/molecules/MoleculeManager.js';
+import { generateColor } from '../../../data/utilities/generateColor.js';
+import type { AssignmentContext } from '../../assignment/AssignmentsContext.js';
+import type { State } from '../Reducer.js';
+import { MARGIN } from '../core/Constants.js';
+import type { ActionType } from '../types/ActionType.js';
+
+import { unlinkRange } from './RangesActions.js';
+import { setActiveTab } from './ToolsActions.js';
+import { unlinkZone } from './ZonesActions.js';
+import { deepReplaceDiaIDs } from './utilities/deepReplaceDiaIDs.js';
 
 interface AddMoleculeProps {
   molfile: string;
diff --git a/src/component/reducer/actions/PeaksActions.ts b/src/component/reducer/actions/PeaksActions.ts
index a8bf2c492..0361845c2 100644
--- a/src/component/reducer/actions/PeaksActions.ts
+++ b/src/component/reducer/actions/PeaksActions.ts
@@ -1,27 +1,28 @@
 import { v4 } from '@lukeed/uuid';
-import { Draft, original } from 'immer';
+import type { Draft } from 'immer';
+import { original } from 'immer';
 import { xFindClosestIndex } from 'ml-spectra-processing';
-import {
+import type {
   Spectrum1D,
   PeaksViewState,
   ViewState,
   RangesViewState,
 } from 'nmr-load-save';
-import { Peak1D, OptionsXYAutoPeaksPicking } from 'nmr-processing';
+import type { Peak1D, OptionsXYAutoPeaksPicking } from 'nmr-processing';
 
 import {
   getShiftX,
   autoPeakPicking,
   optimizePeaks,
-} from '../../../data/data1d/Spectrum1D';
-import { defaultPeaksViewState } from '../../hooks/useActiveSpectrumPeaksViewState';
-import { defaultRangesViewState } from '../../hooks/useActiveSpectrumRangesViewState';
-import { FilterType } from '../../utility/filterType';
-import { getClosePeak } from '../../utility/getClosePeak';
-import { State } from '../Reducer';
-import { getActiveSpectrum } from '../helper/getActiveSpectrum';
-import getRange from '../helper/getRange';
-import { ActionType } from '../types/ActionType';
+} from '../../../data/data1d/Spectrum1D/index.js';
+import { defaultPeaksViewState } from '../../hooks/useActiveSpectrumPeaksViewState.js';
+import { defaultRangesViewState } from '../../hooks/useActiveSpectrumRangesViewState.js';
+import type { FilterType } from '../../utility/filterType.js';
+import { getClosePeak } from '../../utility/getClosePeak.js';
+import type { State } from '../Reducer.js';
+import { getActiveSpectrum } from '../helper/getActiveSpectrum.js';
+import getRange from '../helper/getRange.js';
+import type { ActionType } from '../types/ActionType.js';
 
 type AddPeakAction = ActionType<'ADD_PEAK', { x: number }>;
 type AddPeaksAction = ActionType<'ADD_PEAKS', { startX: number; endX: number }>;
diff --git a/src/component/reducer/actions/PreferencesActions.ts b/src/component/reducer/actions/PreferencesActions.ts
index 2f1b97ba7..09dca1d53 100644
--- a/src/component/reducer/actions/PreferencesActions.ts
+++ b/src/component/reducer/actions/PreferencesActions.ts
@@ -1,13 +1,13 @@
-import { Draft } from 'immer';
-import { Spectrum1D } from 'nmr-load-save';
+import type { Draft } from 'immer';
+import type { Spectrum1D } from 'nmr-load-save';
 
-import groupByInfoKey from '../../utility/GroupByInfoKey';
-import nucleusToString from '../../utility/nucleusToString';
-import { State, VerticalAlignment } from '../Reducer';
-import { getActiveSpectrum } from '../helper/getActiveSpectrum';
-import { ActionType } from '../types/ActionType';
+import groupByInfoKey from '../../utility/GroupByInfoKey.js';
+import nucleusToString from '../../utility/nucleusToString.js';
+import type { State, VerticalAlignment } from '../Reducer.js';
+import { getActiveSpectrum } from '../helper/getActiveSpectrum.js';
+import type { ActionType } from '../types/ActionType.js';
 
-import { setDomain } from './DomainActions';
+import { setDomain } from './DomainActions.js';
 
 type KeyPreferencesAction = ActionType<
   'SET_KEY_PREFERENCES' | 'APPLY_KEY_PREFERENCES',
diff --git a/src/component/reducer/actions/RangesActions.ts b/src/component/reducer/actions/RangesActions.ts
index d20aaac20..53a38b759 100644
--- a/src/component/reducer/actions/RangesActions.ts
+++ b/src/component/reducer/actions/RangesActions.ts
@@ -1,48 +1,52 @@
 import { v4 } from '@lukeed/uuid';
-import { Draft, original } from 'immer';
-import cloneDeep from 'lodash/cloneDeep';
+import type { Draft } from 'immer';
+import { original } from 'immer';
+import cloneDeep from 'lodash/cloneDeep.js';
 import { xFindClosestIndex } from 'ml-spectra-processing';
-import { RangesViewState, Spectrum, Spectrum1D } from 'nmr-load-save';
-import { Signal1D, Range, Filters, FiltersManager } from 'nmr-processing';
+import type { RangesViewState, Spectrum, Spectrum1D } from 'nmr-load-save';
+import type { Signal1D, Range } from 'nmr-processing';
+import { Filters, FiltersManager } from 'nmr-processing';
 
 import {
   DATUM_KIND,
   SIGNAL_INCLUDED_KINDS,
-} from '../../../data/constants/signalsKinds';
+} from '../../../data/constants/signalsKinds.js';
+import type {
+  SetSumOptions,
+  SumParams,
+} from '../../../data/data1d/Spectrum1D/SumManager.js';
+import {
+  initSumOptions,
+  setSumOptions,
+} from '../../../data/data1d/Spectrum1D/SumManager.js';
 import {
   changeRangeSignal,
   detectRanges,
   updateRangesRelativeValues,
   changeRangeRelativeValue,
   isSpectrum1D,
-} from '../../../data/data1d/Spectrum1D';
-import {
-  SetSumOptions,
-  SumParams,
-  initSumOptions,
-  setSumOptions,
-} from '../../../data/data1d/Spectrum1D/SumManager';
-import { ChangeRangeRelativeValueProps } from '../../../data/data1d/Spectrum1D/ranges/changeRangeRelativeValue';
+} from '../../../data/data1d/Spectrum1D/index.js';
+import type { ChangeRangeRelativeValueProps } from '../../../data/data1d/Spectrum1D/ranges/changeRangeRelativeValue.js';
 import {
   unlink,
   unlinkInAssignmentData,
-} from '../../../data/utilities/RangeUtilities';
-import { AssignmentContext } from '../../assignment/AssignmentsContext';
-import { RangeData } from '../../panels/RangesPanel/hooks/useMapRanges';
-import { FilterType } from '../../utility/filterType';
-import { State } from '../Reducer';
-import { getActiveSpectrum } from '../helper/getActiveSpectrum';
-import { getSpectrum } from '../helper/getSpectrum';
+} from '../../../data/utilities/RangeUtilities.js';
+import type { AssignmentContext } from '../../assignment/AssignmentsContext.js';
+import type { RangeData } from '../../panels/RangesPanel/hooks/useMapRanges.js';
+import type { FilterType } from '../../utility/filterType.js';
+import type { State } from '../Reducer.js';
+import { getActiveSpectrum } from '../helper/getActiveSpectrum.js';
+import { getSpectrum } from '../helper/getSpectrum.js';
 import {
   initializeRangeViewObject,
   setRangesViewProperty,
-} from '../helper/setRangesViewProperty';
-import { ActionType } from '../types/ActionType';
+} from '../helper/setRangesViewProperty.js';
+import type { ActionType } from '../types/ActionType.js';
 
-import { handleUpdateCorrelations } from './CorrelationsActions';
-import { setDomain } from './DomainActions';
-import { toggleDisplayingPeaks } from './PeaksActions';
-import { resetSelectedTool } from './ToolsActions';
+import { handleUpdateCorrelations } from './CorrelationsActions.js';
+import { setDomain } from './DomainActions.js';
+import { toggleDisplayingPeaks } from './PeaksActions.js';
+import { resetSelectedTool } from './ToolsActions.js';
 
 type AutoRangesDetectionAction = ActionType<
   'AUTO_RANGES_DETECTION',
diff --git a/src/component/reducer/actions/SpectraActions.ts b/src/component/reducer/actions/SpectraActions.ts
index 9fff2a8f7..6fc213a3d 100644
--- a/src/component/reducer/actions/SpectraActions.ts
+++ b/src/component/reducer/actions/SpectraActions.ts
@@ -1,57 +1,58 @@
-import { NmrData2DFid, NmrData2DFt } from 'cheminfo-types';
-import { Draft, original } from 'immer';
-import lodashGet from 'lodash/get';
-import {
-  Spectrum,
-  Spectrum1D,
-  Spectrum2D,
+import type { NmrData2DFid, NmrData2DFt } from 'cheminfo-types';
+import type { Draft } from 'immer';
+import { original } from 'immer';
+import lodashGet from 'lodash/get.js';
+import type {
+  Color2D,
   Display1D,
   Display2D,
   SpectraColors,
-  Color2D,
+  Spectrum,
+  Spectrum1D,
+  Spectrum2D,
 } from 'nmr-load-save';
-import { Filters, FiltersManager, NMRRange } from 'nmr-processing';
+import type { NMRRange } from 'nmr-processing';
+import { Filters, FiltersManager } from 'nmr-processing';
 
 import {
-  getReferenceShift,
-  isSpectrum1D,
   get1DColor,
+  getReferenceShift,
   initiateDatum1D,
+  isSpectrum1D,
   resurrectSpectrumFromRanges,
-} from '../../../data/data1d/Spectrum1D';
-import {
-  SpectrumSimulationOptions,
-  simulateSpectrum,
-} from '../../../data/data1d/spectrumSimulation';
+} from '../../../data/data1d/Spectrum1D/index.js';
+import type { SpectrumSimulationOptions } from '../../../data/data1d/spectrumSimulation.js';
+import { simulateSpectrum } from '../../../data/data1d/spectrumSimulation.js';
+import { contoursManager } from '../../../data/data2d/Spectrum2D/contours.js';
 import {
+  get2DColor,
   getMissingProjection,
   isSpectrum2D,
-  get2DColor,
-} from '../../../data/data2d/Spectrum2D';
-import { contoursManager } from '../../../data/data2d/Spectrum2D/contours';
-import { Nuclei, Nucleus } from '../../../data/types/common/Nucleus';
+} from '../../../data/data2d/Spectrum2D/index.js';
+import type { Nuclei, Nucleus } from '../../../data/types/common/Nucleus.js';
 import {
   adjustAlpha,
   generateColor,
-} from '../../../data/utilities/generateColor';
-import groupByInfoKey from '../../utility/GroupByInfoKey';
-import { getSpectraByNucleus } from '../../utility/getSpectraByNucleus';
-import { State } from '../Reducer';
-import { setZoom } from '../helper/Zoom1DManager';
-import { getActiveSpectra } from '../helper/getActiveSpectra';
-import { getActiveSpectraAsObject } from '../helper/getActiveSpectraAsObject';
-import { getActiveSpectrum } from '../helper/getActiveSpectrum';
-import { removeSpectrumRelatedObjectsById } from '../helper/removeSpectrumRelatedObjectsById';
-import { ActionType } from '../types/ActionType';
-
-import { SetDomainOptions, setDomain, setMode } from './DomainActions';
-import { rollbackSpectrumByFilter } from './FiltersActions';
+} from '../../../data/utilities/generateColor.js';
+import groupByInfoKey from '../../utility/GroupByInfoKey.js';
+import { getSpectraByNucleus } from '../../utility/getSpectraByNucleus.js';
+import type { State } from '../Reducer.js';
+import { setZoom } from '../helper/Zoom1DManager.js';
+import { getActiveSpectra } from '../helper/getActiveSpectra.js';
+import { getActiveSpectraAsObject } from '../helper/getActiveSpectraAsObject.js';
+import { getActiveSpectrum } from '../helper/getActiveSpectrum.js';
+import { removeSpectrumRelatedObjectsById } from '../helper/removeSpectrumRelatedObjectsById.js';
+import type { ActionType } from '../types/ActionType.js';
+
+import type { SetDomainOptions } from './DomainActions.js';
+import { setDomain, setMode } from './DomainActions.js';
+import { rollbackSpectrumByFilter } from './FiltersActions.js';
 import {
-  setTab,
+  resetSelectedTool,
   setActiveTab,
   setMargin,
-  resetSelectedTool,
-} from './ToolsActions';
+  setTab,
+} from './ToolsActions.js';
 
 type ChangeSpectrumVisibilityByIdAction = ActionType<
   'CHANGE_SPECTRUM_VISIBILITY',
diff --git a/src/component/reducer/actions/SpectraAnalysisAction.ts b/src/component/reducer/actions/SpectraAnalysisAction.ts
index d7579bb81..8d733e1df 100644
--- a/src/component/reducer/actions/SpectraAnalysisAction.ts
+++ b/src/component/reducer/actions/SpectraAnalysisAction.ts
@@ -1,9 +1,9 @@
-import { Draft } from 'immer';
-import { Spectrum1D } from 'nmr-load-save';
+import type { Draft } from 'immer';
+import type { Spectrum1D } from 'nmr-load-save';
 
-import { AnalysisRow } from '../../../data/data1d/multipleSpectraAnalysis';
-import { State } from '../Reducer';
-import { ActionType } from '../types/ActionType';
+import type { AnalysisRow } from '../../../data/data1d/multipleSpectraAnalysis.js';
+import type { State } from '../Reducer.js';
+import type { ActionType } from '../types/ActionType.js';
 
 type OrderSpectraAction = ActionType<
   'ORDER_MULTIPLE_SPECTRA_ANALYSIS',
diff --git a/src/component/reducer/actions/ToolsActions.ts b/src/component/reducer/actions/ToolsActions.ts
index 6603ed7a6..4738ee74e 100644
--- a/src/component/reducer/actions/ToolsActions.ts
+++ b/src/component/reducer/actions/ToolsActions.ts
@@ -1,45 +1,48 @@
 import { v4 } from '@lukeed/uuid';
 import { zoomIdentity } from 'd3';
-import { Draft } from 'immer';
-import { Spectrum, Spectrum1D, Spectrum2D } from 'nmr-load-save';
-import { BaselineCorrectionZone } from 'nmr-processing';
-
-import { contoursManager } from '../../../data/data2d/Spectrum2D/contours';
-import { Nucleus } from '../../../data/types/common/Nucleus';
-import { getYScale, getXScale } from '../../1d/utilities/scale';
-import { LAYOUT, Layout } from '../../2d/utilities/DimensionLayout';
-import { get2DXScale, get2DYScale } from '../../2d/utilities/scale';
-import { ZoomOptions } from '../../EventsTrackers/BrushTracker';
-import { Tool, options as Tools } from '../../toolbar/ToolTypes';
-import groupByInfoKey from '../../utility/GroupByInfoKey';
-import { getSpectraByNucleus } from '../../utility/getSpectraByNucleus';
-import { State } from '../Reducer';
-import { MARGIN } from '../core/Constants';
+import type { Draft } from 'immer';
+import type { Spectrum, Spectrum1D, Spectrum2D } from 'nmr-load-save';
+import type { BaselineCorrectionZone } from 'nmr-processing';
+
+import { contoursManager } from '../../../data/data2d/Spectrum2D/contours.js';
+import type { Nucleus } from '../../../data/types/common/Nucleus.js';
+import { getYScale, getXScale } from '../../1d/utilities/scale.js';
+import type { Layout } from '../../2d/utilities/DimensionLayout.js';
+import { LAYOUT } from '../../2d/utilities/DimensionLayout.js';
+import { get2DXScale, get2DYScale } from '../../2d/utilities/scale.js';
+import type { ZoomOptions } from '../../EventsTrackers/BrushTracker.js';
+import type { Tool } from '../../toolbar/ToolTypes.js';
+import { options as Tools } from '../../toolbar/ToolTypes.js';
+import groupByInfoKey from '../../utility/GroupByInfoKey.js';
+import { getSpectraByNucleus } from '../../utility/getSpectraByNucleus.js';
+import type { State } from '../Reducer.js';
+import { MARGIN } from '../core/Constants.js';
+import type { ZoomType } from '../helper/Zoom1DManager.js';
 import {
   setZoom,
   toScaleRatio,
   wheelZoom,
   ZOOM_TYPES,
-  ZoomType,
-} from '../helper/Zoom1DManager';
+} from '../helper/Zoom1DManager.js';
 import zoomHistoryManager, {
   addToBrushHistory,
-} from '../helper/ZoomHistoryManager';
-import { getActiveSpectra } from '../helper/getActiveSpectra';
-import { getActiveSpectrum } from '../helper/getActiveSpectrum';
-import { getTwoDimensionPhaseCorrectionOptions } from '../helper/getTwoDimensionPhaseCorrectionOptions';
-import { getVerticalAlign } from '../helper/getVerticalAlign';
-import { setIntegralsViewProperty } from '../helper/setIntegralsViewProperty';
-import { setRangesViewProperty } from '../helper/setRangesViewProperty';
-import { ActionType } from '../types/ActionType';
-
-import { setDomain, SetDomainOptions, setMode } from './DomainActions';
+} from '../helper/ZoomHistoryManager.js';
+import { getActiveSpectra } from '../helper/getActiveSpectra.js';
+import { getActiveSpectrum } from '../helper/getActiveSpectrum.js';
+import { getTwoDimensionPhaseCorrectionOptions } from '../helper/getTwoDimensionPhaseCorrectionOptions.js';
+import { getVerticalAlign } from '../helper/getVerticalAlign.js';
+import { setIntegralsViewProperty } from '../helper/setIntegralsViewProperty.js';
+import { setRangesViewProperty } from '../helper/setRangesViewProperty.js';
+import type { ActionType } from '../types/ActionType.js';
+
+import type { SetDomainOptions } from './DomainActions.js';
+import { setDomain, setMode } from './DomainActions.js';
+import type { RollbackSpectrumOptions } from './FiltersActions.js';
 import {
-  RollbackSpectrumOptions,
   calculateBaseLineCorrection,
   rollbackSpectrum,
-} from './FiltersActions';
-import { changeSpectrumVerticalAlignment } from './PreferencesActions';
+} from './FiltersActions.js';
+import { changeSpectrumVerticalAlignment } from './PreferencesActions.js';
 
 interface BrushBoundary {
   startX: number;
diff --git a/src/component/reducer/actions/ZonesActions.ts b/src/component/reducer/actions/ZonesActions.ts
index 5b35c2cc4..50466f9f4 100644
--- a/src/component/reducer/actions/ZonesActions.ts
+++ b/src/component/reducer/actions/ZonesActions.ts
@@ -1,6 +1,7 @@
-import { FromTo, NmrData2DFt } from 'cheminfo-types';
-import { Draft, original } from 'immer';
-import lodashCloneDeep from 'lodash/cloneDeep';
+import type { FromTo, NmrData2DFt } from 'cheminfo-types';
+import type { Draft } from 'immer';
+import { original } from 'immer';
+import lodashCloneDeep from 'lodash/cloneDeep.js';
 import { setPathLength } from 'nmr-correlation';
 import type { Spectrum, Spectrum2D, ZonesViewState } from 'nmr-load-save';
 import type { Signal2D, Zone } from 'nmr-processing';
@@ -9,30 +10,34 @@ import { Filters, FiltersManager } from 'nmr-processing';
 import {
   DATUM_KIND,
   SIGNAL_INCLUDED_KINDS,
-} from '../../../data/constants/signalsKinds';
+} from '../../../data/constants/signalsKinds.js';
 import {
   changeZoneSignal,
   detectZones,
   detectZonesManual,
   isSpectrum2D,
-} from '../../../data/data2d/Spectrum2D';
-import { DetectionZonesOptions } from '../../../data/data2d/Spectrum2D/zones/getDetectionZones';
+} from '../../../data/data2d/Spectrum2D/index.js';
+import type { DetectionZonesOptions } from '../../../data/data2d/Spectrum2D/zones/getDetectionZones.js';
 import {
   unlink,
   unlinkInAssignmentData,
-} from '../../../data/utilities/ZoneUtilities';
-import { isNumber } from '../../../data/utilities/isNumber';
-import { AssignmentContext, Axis } from '../../assignment/AssignmentsContext';
-import { defaultZonesViewState } from '../../hooks/useActiveSpectrumZonesViewState';
-import { ZoneData } from '../../panels/ZonesPanel/hooks/useMapZones';
-import { FilterType } from '../../utility/filterType';
-import { State } from '../Reducer';
-import get2DRange, { ZoneBoundary } from '../helper/get2DRange';
-import { getActiveSpectrum } from '../helper/getActiveSpectrum';
-import { ActionType } from '../types/ActionType';
-
-import { handleUpdateCorrelations } from './CorrelationsActions';
-import { setDomain } from './DomainActions';
+} from '../../../data/utilities/ZoneUtilities.js';
+import { isNumber } from '../../../data/utilities/isNumber.js';
+import type {
+  AssignmentContext,
+  Axis,
+} from '../../assignment/AssignmentsContext.js';
+import { defaultZonesViewState } from '../../hooks/useActiveSpectrumZonesViewState.js';
+import type { ZoneData } from '../../panels/ZonesPanel/hooks/useMapZones.js';
+import type { FilterType } from '../../utility/filterType.js';
+import type { State } from '../Reducer.js';
+import type { ZoneBoundary } from '../helper/get2DRange.js';
+import get2DRange from '../helper/get2DRange.js';
+import { getActiveSpectrum } from '../helper/getActiveSpectrum.js';
+import type { ActionType } from '../types/ActionType.js';
+
+import { handleUpdateCorrelations } from './CorrelationsActions.js';
+import { setDomain } from './DomainActions.js';
 
 interface DeleteSignal2DProps {
   spectrum: Spectrum;
diff --git a/src/component/reducer/actions/utilities/__tests__/deepReplaceDiaIDs.test.ts b/src/component/reducer/actions/utilities/__tests__/deepReplaceDiaIDs.test.ts
index 94295486e..5ea67044a 100644
--- a/src/component/reducer/actions/utilities/__tests__/deepReplaceDiaIDs.test.ts
+++ b/src/component/reducer/actions/utilities/__tests__/deepReplaceDiaIDs.test.ts
@@ -4,7 +4,7 @@ import path from 'node:path';
 import { produce } from 'immer';
 import { describe, it, expect } from 'vitest';
 
-import { deepReplaceDiaIDs } from '../deepReplaceDiaIDs';
+import { deepReplaceDiaIDs } from '../deepReplaceDiaIDs.js';
 
 describe('deepReplaceDiaIDs', () => {
   it('basic case', () => {
diff --git a/src/component/reducer/actions/utilities/deepReplaceDiaIDs.ts b/src/component/reducer/actions/utilities/deepReplaceDiaIDs.ts
index fb736a2c7..72391fe79 100644
--- a/src/component/reducer/actions/utilities/deepReplaceDiaIDs.ts
+++ b/src/component/reducer/actions/utilities/deepReplaceDiaIDs.ts
@@ -1,5 +1,5 @@
-import { Draft } from 'immer';
-import { TopicMolecule } from 'openchemlib-utils';
+import type { Draft } from 'immer';
+import type { TopicMolecule } from 'openchemlib-utils';
 
 export function deepReplaceDiaIDs(
   data: Draft<object>,
diff --git a/src/component/reducer/helper/Zoom1DManager.ts b/src/component/reducer/helper/Zoom1DManager.ts
index a54fdbbbd..1b29f6947 100644
--- a/src/component/reducer/helper/Zoom1DManager.ts
+++ b/src/component/reducer/helper/Zoom1DManager.ts
@@ -1,10 +1,10 @@
-import { zoomIdentity, scaleLinear } from 'd3';
-import { Draft } from 'immer';
+import { scaleLinear, zoomIdentity } from 'd3';
+import type { Draft } from 'immer';
 
-import { ZoomOptions } from '../../EventsTrackers/BrushTracker';
-import { State } from '../Reducer';
+import type { ZoomOptions } from '../../EventsTrackers/BrushTracker.js';
+import type { State } from '../Reducer.js';
 
-import { getActiveSpectrum } from './getActiveSpectrum';
+import { getActiveSpectrum } from './getActiveSpectrum.js';
 
 export const ZOOM_TYPES = {
   HORIZONTAL: 'HORIZONTAL',
diff --git a/src/component/reducer/helper/ZoomHistoryManager.ts b/src/component/reducer/helper/ZoomHistoryManager.ts
index 265965a8b..11f205349 100644
--- a/src/component/reducer/helper/ZoomHistoryManager.ts
+++ b/src/component/reducer/helper/ZoomHistoryManager.ts
@@ -1,7 +1,7 @@
-import { Draft } from 'immer';
+import type { Draft } from 'immer';
 
-import { Layout } from '../../2d/utilities/DimensionLayout';
-import { State } from '../Reducer';
+import type { Layout } from '../../2d/utilities/DimensionLayout.js';
+import type { State } from '../Reducer.js';
 
 interface HistoryItem {
   xDomain: number[];
diff --git a/src/component/reducer/helper/findStrongestPeak.ts b/src/component/reducer/helper/findStrongestPeak.ts
index 0db382c94..d0c70209a 100644
--- a/src/component/reducer/helper/findStrongestPeak.ts
+++ b/src/component/reducer/helper/findStrongestPeak.ts
@@ -1,7 +1,7 @@
-import { NmrData1D } from 'cheminfo-types';
+import type { NmrData1D } from 'cheminfo-types';
 import { xFindClosestIndex } from 'ml-spectra-processing';
 
-import { maxAbsoluteValue } from '../../utility/maxAbsoluteValue';
+import { maxAbsoluteValue } from '../../utility/maxAbsoluteValue.js';
 
 export function findStrongestPeak(data: NmrData1D) {
   if (!data) return null;
diff --git a/src/component/reducer/helper/get2DRange.ts b/src/component/reducer/helper/get2DRange.ts
index 2abe23349..1ae018ddc 100644
--- a/src/component/reducer/helper/get2DRange.ts
+++ b/src/component/reducer/helper/get2DRange.ts
@@ -1,4 +1,4 @@
-import { get2DXScale, get2DYScale } from '../../2d/utilities/scale';
+import { get2DXScale, get2DYScale } from '../../2d/utilities/scale.js';
 
 export interface ZoneBoundary {
   startX: number;
diff --git a/src/component/reducer/helper/getActiveSpectra.ts b/src/component/reducer/helper/getActiveSpectra.ts
index e2bd6032b..3fc691f50 100644
--- a/src/component/reducer/helper/getActiveSpectra.ts
+++ b/src/component/reducer/helper/getActiveSpectra.ts
@@ -1,6 +1,6 @@
-import { Draft } from 'immer';
+import type { Draft } from 'immer';
 
-import { State } from '../Reducer';
+import type { State } from '../Reducer.js';
 
 export function getActiveSpectra(state: Draft<State> | State) {
   const { activeSpectra, activeTab } = state.view.spectra;
diff --git a/src/component/reducer/helper/getActiveSpectraAsObject.ts b/src/component/reducer/helper/getActiveSpectraAsObject.ts
index 5938edfe9..daaaf7cdd 100644
--- a/src/component/reducer/helper/getActiveSpectraAsObject.ts
+++ b/src/component/reducer/helper/getActiveSpectraAsObject.ts
@@ -1,8 +1,8 @@
-import { Draft } from 'immer';
+import type { Draft } from 'immer';
 
-import { State } from '../Reducer';
+import type { State } from '../Reducer.js';
 
-import { getActiveSpectra } from './getActiveSpectra';
+import { getActiveSpectra } from './getActiveSpectra.js';
 
 export function getActiveSpectraAsObject(
   state: Draft<State> | State,
diff --git a/src/component/reducer/helper/getActiveSpectrum.ts b/src/component/reducer/helper/getActiveSpectrum.ts
index d7ecc30fc..458749c28 100644
--- a/src/component/reducer/helper/getActiveSpectrum.ts
+++ b/src/component/reducer/helper/getActiveSpectrum.ts
@@ -1,6 +1,6 @@
-import { Draft } from 'immer';
+import type { Draft } from 'immer';
 
-import { State } from '../Reducer';
+import type { State } from '../Reducer.js';
 
 export function getActiveSpectrum(state: Draft<State> | State) {
   const { activeSpectra, activeTab } = state.view.spectra;
diff --git a/src/component/reducer/helper/getRange.ts b/src/component/reducer/helper/getRange.ts
index 8a1fc91de..180bb3b32 100644
--- a/src/component/reducer/helper/getRange.ts
+++ b/src/component/reducer/helper/getRange.ts
@@ -1,4 +1,4 @@
-import { getXScale } from '../../1d/utilities/scale';
+import { getXScale } from '../../1d/utilities/scale.js';
 
 interface RangeOptions {
   startX: number;
diff --git a/src/component/reducer/helper/getSpectrum.ts b/src/component/reducer/helper/getSpectrum.ts
index 8f90e512c..4ba277750 100644
--- a/src/component/reducer/helper/getSpectrum.ts
+++ b/src/component/reducer/helper/getSpectrum.ts
@@ -1,8 +1,8 @@
-import { Draft } from 'immer';
+import type { Draft } from 'immer';
 
-import { State } from '../Reducer';
+import type { State } from '../Reducer.js';
 
-import { getActiveSpectrum } from './getActiveSpectrum';
+import { getActiveSpectrum } from './getActiveSpectrum.js';
 
 export function getSpectrum(state: Draft<State>);
 export function getSpectrum(state: Draft<State>, index: number);
diff --git a/src/component/reducer/helper/getTwoDimensionPhaseCorrectionOptions.ts b/src/component/reducer/helper/getTwoDimensionPhaseCorrectionOptions.ts
index 88f998163..1c5f4c287 100644
--- a/src/component/reducer/helper/getTwoDimensionPhaseCorrectionOptions.ts
+++ b/src/component/reducer/helper/getTwoDimensionPhaseCorrectionOptions.ts
@@ -1,12 +1,12 @@
 import type { Draft } from 'immer';
 
-import { useChartData } from '../../context/ChartContext';
+import { useChartData } from '../../context/ChartContext.js';
 import type {
   PhaseCorrectionTraceData,
   State,
   TraceDirection,
   TwoDimensionPhaseCorrection,
-} from '../Reducer';
+} from '../Reducer.js';
 
 export function getTwoDimensionPhaseCorrectionOptions(
   state: Draft<State> | State,
diff --git a/src/component/reducer/helper/getVerticalAlign.ts b/src/component/reducer/helper/getVerticalAlign.ts
index e2a07d436..f777da2df 100644
--- a/src/component/reducer/helper/getVerticalAlign.ts
+++ b/src/component/reducer/helper/getVerticalAlign.ts
@@ -1,6 +1,6 @@
-import { Draft } from 'immer';
+import type { Draft } from 'immer';
 
-import { State, VerticalAlignment } from '../Reducer';
+import type { State, VerticalAlignment } from '../Reducer.js';
 
 export function getVerticalAlign(
   state: State | Draft<State>,
diff --git a/src/component/reducer/helper/removeSpectrumRelatedObjectsById.ts b/src/component/reducer/helper/removeSpectrumRelatedObjectsById.ts
index 7e63450d4..8fb637c3c 100644
--- a/src/component/reducer/helper/removeSpectrumRelatedObjectsById.ts
+++ b/src/component/reducer/helper/removeSpectrumRelatedObjectsById.ts
@@ -1,7 +1,7 @@
-import { Draft } from 'immer';
+import type { Draft } from 'immer';
 
-import { removeByPaths } from '../../../data/utilities/removeByPaths';
-import { State } from '../Reducer';
+import { removeByPaths } from '../../../data/utilities/removeByPaths.js';
+import type { State } from '../Reducer.js';
 
 export function removeSpectrumRelatedObjectsById(
   data: Draft<State> | Partial<State>,
diff --git a/src/component/reducer/helper/setIntegralsViewProperty.ts b/src/component/reducer/helper/setIntegralsViewProperty.ts
index 22e6332b8..5bd68a005 100644
--- a/src/component/reducer/helper/setIntegralsViewProperty.ts
+++ b/src/component/reducer/helper/setIntegralsViewProperty.ts
@@ -1,10 +1,10 @@
-import { Draft } from 'immer';
-import { IntegralsViewState } from 'nmr-load-save';
+import type { Draft } from 'immer';
+import type { IntegralsViewState } from 'nmr-load-save';
 
-import { defaultIntegralsViewState } from '../../hooks/useActiveSpectrumIntegralsViewState';
-import { State } from '../Reducer';
+import { defaultIntegralsViewState } from '../../hooks/useActiveSpectrumIntegralsViewState.js';
+import type { State } from '../Reducer.js';
 
-import { getActiveSpectrum } from './getActiveSpectrum';
+import { getActiveSpectrum } from './getActiveSpectrum.js';
 
 export function setIntegralsViewProperty<T extends keyof IntegralsViewState>(
   draft: Draft<State>,
diff --git a/src/component/reducer/helper/setRangesViewProperty.ts b/src/component/reducer/helper/setRangesViewProperty.ts
index 81ba615dc..97b89c1ed 100644
--- a/src/component/reducer/helper/setRangesViewProperty.ts
+++ b/src/component/reducer/helper/setRangesViewProperty.ts
@@ -1,10 +1,10 @@
-import { Draft } from 'immer';
-import { RangesViewState } from 'nmr-load-save';
+import type { Draft } from 'immer';
+import type { RangesViewState } from 'nmr-load-save';
 
-import { defaultRangesViewState } from '../../hooks/useActiveSpectrumRangesViewState';
-import { State } from '../Reducer';
+import { defaultRangesViewState } from '../../hooks/useActiveSpectrumRangesViewState.js';
+import type { State } from '../Reducer.js';
 
-import { getActiveSpectrum } from './getActiveSpectrum';
+import { getActiveSpectrum } from './getActiveSpectrum.js';
 
 export function setRangesViewProperty<T extends keyof RangesViewState>(
   draft: Draft<State>,
diff --git a/src/component/reducer/preferences/actions/addWorkspace.ts b/src/component/reducer/preferences/actions/addWorkspace.ts
index e3c958ced..3267e11de 100644
--- a/src/component/reducer/preferences/actions/addWorkspace.ts
+++ b/src/component/reducer/preferences/actions/addWorkspace.ts
@@ -1,10 +1,10 @@
-import { Draft } from 'immer';
+import type { Draft } from 'immer';
 
-import {
+import type {
   AddWorkspaceAction,
   PreferencesState,
   WorkspaceWithSource,
-} from '../preferencesReducer';
+} from '../preferencesReducer.js';
 
 export function addWorkspace(
   draft: Draft<PreferencesState>,
diff --git a/src/component/reducer/preferences/actions/analyzeSpectra.ts b/src/component/reducer/preferences/actions/analyzeSpectra.ts
index 7a8e5048b..f6673a7f3 100644
--- a/src/component/reducer/preferences/actions/analyzeSpectra.ts
+++ b/src/component/reducer/preferences/actions/analyzeSpectra.ts
@@ -1,16 +1,16 @@
-import { Draft } from 'immer';
+import type { Draft } from 'immer';
 
-import * as MultipleAnalysis from '../../../../data/data1d/multipleSpectraAnalysis';
-import { orderRange } from '../../helper/getRange';
-import { getMultipleSpectraAnalysisDefaultValues } from '../panelsPreferencesDefaultValues';
-import {
+import * as MultipleAnalysis from '../../../../data/data1d/multipleSpectraAnalysis.js';
+import { orderRange } from '../../helper/getRange.js';
+import { getMultipleSpectraAnalysisDefaultValues } from '../panelsPreferencesDefaultValues.js';
+import type {
   AnalyzeSpectraAction,
   ChangeAnalysisColumnValueKeyAction,
   DeleteAnalysisColumn,
   PreferencesState,
   SetSpectraAnalysisPanelPreferencesAction,
-} from '../preferencesReducer';
-import { getActiveWorkspace } from '../utilities/getActiveWorkspace';
+} from '../preferencesReducer.js';
+import { getActiveWorkspace } from '../utilities/getActiveWorkspace.js';
 
 export function analyzeSpectra(
   draft: Draft<PreferencesState>,
diff --git a/src/component/reducer/preferences/actions/applyGeneralPreferences.ts b/src/component/reducer/preferences/actions/applyGeneralPreferences.ts
index 88b5d5716..8078639ff 100644
--- a/src/component/reducer/preferences/actions/applyGeneralPreferences.ts
+++ b/src/component/reducer/preferences/actions/applyGeneralPreferences.ts
@@ -1,10 +1,10 @@
-import { Draft } from 'immer';
+import type { Draft } from 'immer';
 
-import {
+import type {
   ApplyGeneralPreferences,
   PreferencesState,
   WorkspaceWithSource,
-} from '../preferencesReducer';
+} from '../preferencesReducer.js';
 
 export function applyGeneralPreferences(
   draft: Draft<PreferencesState>,
diff --git a/src/component/reducer/preferences/actions/changeExportSettings.ts b/src/component/reducer/preferences/actions/changeExportSettings.ts
index 7dee3abd1..4f6225a94 100644
--- a/src/component/reducer/preferences/actions/changeExportSettings.ts
+++ b/src/component/reducer/preferences/actions/changeExportSettings.ts
@@ -1,10 +1,10 @@
-import { Draft } from 'immer';
+import type { Draft } from 'immer';
 
-import {
+import type {
   PreferencesState,
   ChangeExportSettingsAction,
-} from '../preferencesReducer';
-import { getActiveWorkspace } from '../utilities/getActiveWorkspace';
+} from '../preferencesReducer.js';
+import { getActiveWorkspace } from '../utilities/getActiveWorkspace.js';
 
 export function changeExportSettings(
   draft: Draft<PreferencesState>,
diff --git a/src/component/reducer/preferences/actions/changeInformationBlockPosition.ts b/src/component/reducer/preferences/actions/changeInformationBlockPosition.ts
index 2e8a57d29..4d5c776c1 100644
--- a/src/component/reducer/preferences/actions/changeInformationBlockPosition.ts
+++ b/src/component/reducer/preferences/actions/changeInformationBlockPosition.ts
@@ -1,10 +1,10 @@
-import { Draft } from 'immer';
+import type { Draft } from 'immer';
 
-import {
+import type {
   ChangeInformationBlockPosition,
   PreferencesState,
-} from '../preferencesReducer';
-import { getActiveWorkspace } from '../utilities/getActiveWorkspace';
+} from '../preferencesReducer.js';
+import { getActiveWorkspace } from '../utilities/getActiveWorkspace.js';
 
 export function changeInformationBlockPosition(
   draft: Draft<PreferencesState>,
diff --git a/src/component/reducer/preferences/actions/changePeaksLabelPosition.ts b/src/component/reducer/preferences/actions/changePeaksLabelPosition.ts
index 8776e26ea..df54b0129 100644
--- a/src/component/reducer/preferences/actions/changePeaksLabelPosition.ts
+++ b/src/component/reducer/preferences/actions/changePeaksLabelPosition.ts
@@ -1,10 +1,10 @@
-import { Draft } from 'immer';
+import type { Draft } from 'immer';
 
-import {
+import type {
   ChangePeaksLabelPositionAction,
   PreferencesState,
-} from '../preferencesReducer';
-import { getActiveWorkspace } from '../utilities/getActiveWorkspace';
+} from '../preferencesReducer.js';
+import { getActiveWorkspace } from '../utilities/getActiveWorkspace.js';
 
 export function changePeaksLabelPosition(
   draft: Draft<PreferencesState>,
diff --git a/src/component/reducer/preferences/actions/changePrintPageSettings.ts b/src/component/reducer/preferences/actions/changePrintPageSettings.ts
index 4b231ff8d..cc75299fd 100644
--- a/src/component/reducer/preferences/actions/changePrintPageSettings.ts
+++ b/src/component/reducer/preferences/actions/changePrintPageSettings.ts
@@ -1,10 +1,10 @@
-import { Draft } from 'immer';
+import type { Draft } from 'immer';
 
-import {
+import type {
   PreferencesState,
   ChangePrintPageSettingsAction,
-} from '../preferencesReducer';
-import { getActiveWorkspace } from '../utilities/getActiveWorkspace';
+} from '../preferencesReducer.js';
+import { getActiveWorkspace } from '../utilities/getActiveWorkspace.js';
 
 export function changePrintPageSettings(
   draft: Draft<PreferencesState>,
diff --git a/src/component/reducer/preferences/actions/initPreferences.ts b/src/component/reducer/preferences/actions/initPreferences.ts
index 97feaf843..c6ee72702 100644
--- a/src/component/reducer/preferences/actions/initPreferences.ts
+++ b/src/component/reducer/preferences/actions/initPreferences.ts
@@ -1,9 +1,10 @@
-import { Draft } from 'immer';
+import type { Draft } from 'immer';
 
-import type { NMRiumWorkspace } from '../../../main';
-import { PreferencesState, WORKSPACES_KEYS } from '../preferencesReducer';
-import { initWorkspace } from '../utilities/initWorkspace';
-import { mapWorkspaces } from '../utilities/mapWorkspaces';
+import type { NMRiumWorkspace } from '../../../main/index.js';
+import type { PreferencesState } from '../preferencesReducer.js';
+import { WORKSPACES_KEYS } from '../preferencesReducer.js';
+import { initWorkspace } from '../utilities/initWorkspace.js';
+import { mapWorkspaces } from '../utilities/mapWorkspaces.js';
 
 function getWorkspace(
   draft: Draft<PreferencesState>,
diff --git a/src/component/reducer/preferences/actions/matrixGeneration.ts b/src/component/reducer/preferences/actions/matrixGeneration.ts
index 17f3ccf72..eaf513a7a 100644
--- a/src/component/reducer/preferences/actions/matrixGeneration.ts
+++ b/src/component/reducer/preferences/actions/matrixGeneration.ts
@@ -1,15 +1,15 @@
 import { v4 } from '@lukeed/uuid';
-import { Draft } from 'immer';
-import { MatrixGenerationOptions } from 'nmr-load-save';
-
-import { MatrixOptions } from '../../../../data/types/data1d/MatrixOptions';
-import { ZoomOptions } from '../../../EventsTrackers/BrushTracker';
-import { FilterType } from '../../../utility/filterType';
-import { toScaleRatio } from '../../helper/Zoom1DManager';
-import { ActionType } from '../../types/ActionType';
-import { getMatrixGenerationDefaultOptions } from '../panelsPreferencesDefaultValues';
-import { PreferencesState } from '../preferencesReducer';
-import { getActiveWorkspace } from '../utilities/getActiveWorkspace';
+import type { Draft } from 'immer';
+import type { MatrixGenerationOptions } from 'nmr-load-save';
+
+import type { MatrixOptions } from '../../../../data/types/data1d/MatrixOptions.js';
+import type { ZoomOptions } from '../../../EventsTrackers/BrushTracker.js';
+import type { FilterType } from '../../../utility/filterType.js';
+import { toScaleRatio } from '../../helper/Zoom1DManager.js';
+import type { ActionType } from '../../types/ActionType.js';
+import { getMatrixGenerationDefaultOptions } from '../panelsPreferencesDefaultValues.js';
+import type { PreferencesState } from '../preferencesReducer.js';
+import { getActiveWorkspace } from '../utilities/getActiveWorkspace.js';
 
 type setMatrixGenerationOptionsAction = ActionType<
   'SET_MATRIX_GENERATION_OPTIONS',
diff --git a/src/component/reducer/preferences/actions/removeWorkspace.ts b/src/component/reducer/preferences/actions/removeWorkspace.ts
index 3eed3da2c..e2b22a2ef 100644
--- a/src/component/reducer/preferences/actions/removeWorkspace.ts
+++ b/src/component/reducer/preferences/actions/removeWorkspace.ts
@@ -1,6 +1,9 @@
-import { Draft } from 'immer';
+import type { Draft } from 'immer';
 
-import { PreferencesState, WorkspaceAction } from '../preferencesReducer';
+import type {
+  PreferencesState,
+  WorkspaceAction,
+} from '../preferencesReducer.js';
 
 export function removeWorkspace(
   draft: Draft<PreferencesState>,
diff --git a/src/component/reducer/preferences/actions/setActiveWorkspace.ts b/src/component/reducer/preferences/actions/setActiveWorkspace.ts
index 2733d0a31..e7504d890 100644
--- a/src/component/reducer/preferences/actions/setActiveWorkspace.ts
+++ b/src/component/reducer/preferences/actions/setActiveWorkspace.ts
@@ -1,6 +1,9 @@
-import { Draft } from 'immer';
+import type { Draft } from 'immer';
 
-import { PreferencesState, WorkspaceAction } from '../preferencesReducer';
+import type {
+  PreferencesState,
+  WorkspaceAction,
+} from '../preferencesReducer.js';
 
 export function setActiveWorkspace(
   draft: Draft<PreferencesState>,
diff --git a/src/component/reducer/preferences/actions/setPanelsPreferences.ts b/src/component/reducer/preferences/actions/setPanelsPreferences.ts
index 972218831..868f1dac9 100644
--- a/src/component/reducer/preferences/actions/setPanelsPreferences.ts
+++ b/src/component/reducer/preferences/actions/setPanelsPreferences.ts
@@ -1,7 +1,7 @@
-import { Draft } from 'immer';
+import type { Draft } from 'immer';
 
-import { PreferencesState } from '../preferencesReducer';
-import { getActiveWorkspace } from '../utilities/getActiveWorkspace';
+import type { PreferencesState } from '../preferencesReducer.js';
+import { getActiveWorkspace } from '../utilities/getActiveWorkspace.js';
 
 export function setPanelsPreferences(draft: Draft<PreferencesState>, action) {
   if (action.payload) {
diff --git a/src/component/reducer/preferences/actions/setPreferences.ts b/src/component/reducer/preferences/actions/setPreferences.ts
index 489796bd7..425462fe9 100644
--- a/src/component/reducer/preferences/actions/setPreferences.ts
+++ b/src/component/reducer/preferences/actions/setPreferences.ts
@@ -1,8 +1,8 @@
-import { Draft } from 'immer';
-import cloneDeep from 'lodash/cloneDeep';
+import type { Draft } from 'immer';
+import cloneDeep from 'lodash/cloneDeep.js';
 
-import { PreferencesState } from '../preferencesReducer';
-import { getActiveWorkspace } from '../utilities/getActiveWorkspace';
+import type { PreferencesState } from '../preferencesReducer.js';
+import { getActiveWorkspace } from '../utilities/getActiveWorkspace.js';
 
 export function setPreferences(draft: Draft<PreferencesState>, action) {
   const currentWorkspacePreferences = getActiveWorkspace(draft);
diff --git a/src/component/reducer/preferences/actions/setVerticalSplitterPosition.ts b/src/component/reducer/preferences/actions/setVerticalSplitterPosition.ts
index 40c44ae1a..f5bba0bf8 100644
--- a/src/component/reducer/preferences/actions/setVerticalSplitterPosition.ts
+++ b/src/component/reducer/preferences/actions/setVerticalSplitterPosition.ts
@@ -1,10 +1,10 @@
-import { Draft } from 'immer';
+import type { Draft } from 'immer';
 
-import {
+import type {
   PreferencesState,
   SetVerticalSplitterPositionAction,
-} from '../preferencesReducer';
-import { getActiveWorkspace } from '../utilities/getActiveWorkspace';
+} from '../preferencesReducer.js';
+import { getActiveWorkspace } from '../utilities/getActiveWorkspace.js';
 
 export function setVerticalSplitterPosition(
   draft: Draft<PreferencesState>,
diff --git a/src/component/reducer/preferences/actions/setWorkspace.ts b/src/component/reducer/preferences/actions/setWorkspace.ts
index 340437b58..312e56105 100644
--- a/src/component/reducer/preferences/actions/setWorkspace.ts
+++ b/src/component/reducer/preferences/actions/setWorkspace.ts
@@ -1,12 +1,12 @@
-import { Draft } from 'immer';
+import type { Draft } from 'immer';
 
-import {
+import type {
   PreferencesState,
   SetWorkspaceAction,
-  WORKSPACES_KEYS,
-} from '../preferencesReducer';
-import { getPreferencesByWorkspace } from '../utilities/getPreferencesByWorkspace';
-import { initWorkspace } from '../utilities/initWorkspace';
+} from '../preferencesReducer.js';
+import { WORKSPACES_KEYS } from '../preferencesReducer.js';
+import { getPreferencesByWorkspace } from '../utilities/getPreferencesByWorkspace.js';
+import { initWorkspace } from '../utilities/initWorkspace.js';
 
 export function setWorkspace(
   draft: Draft<PreferencesState>,
diff --git a/src/component/reducer/preferences/actions/toggleInformationBlock.ts b/src/component/reducer/preferences/actions/toggleInformationBlock.ts
index 86ab2817f..3798b3dbd 100644
--- a/src/component/reducer/preferences/actions/toggleInformationBlock.ts
+++ b/src/component/reducer/preferences/actions/toggleInformationBlock.ts
@@ -1,10 +1,10 @@
-import { Draft } from 'immer';
+import type { Draft } from 'immer';
 
-import {
+import type {
   ToggleInformationBlock,
   PreferencesState,
-} from '../preferencesReducer';
-import { getActiveWorkspace } from '../utilities/getActiveWorkspace';
+} from '../preferencesReducer.js';
+import { getActiveWorkspace } from '../utilities/getActiveWorkspace.js';
 
 export function toggleInformationBlock(
   draft: Draft<PreferencesState>,
diff --git a/src/component/reducer/preferences/panelsPreferencesDefaultValues.ts b/src/component/reducer/preferences/panelsPreferencesDefaultValues.ts
index 493d73620..241560aa7 100644
--- a/src/component/reducer/preferences/panelsPreferencesDefaultValues.ts
+++ b/src/component/reducer/preferences/panelsPreferencesDefaultValues.ts
@@ -1,12 +1,12 @@
-import {
+import type {
   MatrixGenerationOptions,
   MultipleSpectraAnalysisPreferences,
   PanelsPreferences,
   SpectraPreferences,
 } from 'nmr-load-save';
 
-import { DeepPartial } from '../../../data/types/common/DeepPartial';
-import { is2DNucleus } from '../../utility/nucleusToString';
+import type { DeepPartial } from '../../../data/types/common/DeepPartial.js';
+import { is2DNucleus } from '../../utility/nucleusToString.js';
 
 function getPreferences<T>(data: T, nucleus?: string) {
   return { nuclei: { ...(nucleus ? { [nucleus]: data } : {}) } };
diff --git a/src/component/reducer/preferences/preferencesReducer.ts b/src/component/reducer/preferences/preferencesReducer.ts
index a7efdc09d..1ebc1676e 100644
--- a/src/component/reducer/preferences/preferencesReducer.ts
+++ b/src/component/reducer/preferences/preferencesReducer.ts
@@ -1,52 +1,52 @@
-import { Draft, produce } from 'immer';
-import {
-  CURRENT_EXPORT_VERSION,
+import type { Draft } from 'immer';
+import { produce } from 'immer';
+import type {
   ExportPreferences,
-  migrateSettings,
+  ExportSettings,
   MultipleSpectraAnalysisPreferences,
   PrintPageOptions,
-  ExportSettings,
   Workspace,
   WorkSpaceSource,
 } from 'nmr-load-save';
-import { Reducer } from 'react';
-import { SplitPaneSize } from 'react-science/ui';
+import { CURRENT_EXPORT_VERSION, migrateSettings } from 'nmr-load-save';
+import type { Reducer } from 'react';
+import type { SplitPaneSize } from 'react-science/ui';
 
-import type { NMRiumWorkspace, NMRiumPreferences } from '../../main';
-import { getLocalStorage, storeData } from '../../utility/LocalStorage';
-import Workspaces from '../../workspaces';
-import { ActionType } from '../types/ActionType';
+import type { NMRiumPreferences, NMRiumWorkspace } from '../../main/index.js';
+import { getLocalStorage, storeData } from '../../utility/LocalStorage.js';
+import Workspaces from '../../workspaces/index.js';
+import type { ActionType } from '../types/ActionType.js';
 
-import { addWorkspace } from './actions/addWorkspace';
+import { addWorkspace } from './actions/addWorkspace.js';
 import {
   analyzeSpectra,
   changeAnalysisColumnValueKey,
   deleteAnalysisColumn,
   setSpectraAnalysisPanelsPreferences,
-} from './actions/analyzeSpectra';
-import { applyGeneralPreferences } from './actions/applyGeneralPreferences';
-import { changeExportSettings } from './actions/changeExportSettings';
-import { changeInformationBlockPosition } from './actions/changeInformationBlockPosition';
-import { changePeaksLabelPosition } from './actions/changePeaksLabelPosition';
-import { changePrintPageSettings } from './actions/changePrintPageSettings';
-import { initPreferences } from './actions/initPreferences';
+} from './actions/analyzeSpectra.js';
+import { applyGeneralPreferences } from './actions/applyGeneralPreferences.js';
+import { changeExportSettings } from './actions/changeExportSettings.js';
+import { changeInformationBlockPosition } from './actions/changeInformationBlockPosition.js';
+import { changePeaksLabelPosition } from './actions/changePeaksLabelPosition.js';
+import { changePrintPageSettings } from './actions/changePrintPageSettings.js';
+import { initPreferences } from './actions/initPreferences.js';
+import type { MatrixGenerationActions } from './actions/matrixGeneration.js';
 import {
-  setMatrixGenerationOptions,
   addExclusionZone,
-  deleteExclusionZone,
-  MatrixGenerationActions,
-  toggleMatrixGenerationViewProperty,
   changeMatrixGenerationScale,
   changeMatrixGenerationStocsyChemicalShift,
-} from './actions/matrixGeneration';
-import { removeWorkspace } from './actions/removeWorkspace';
-import { setActiveWorkspace } from './actions/setActiveWorkspace';
-import { setPanelsPreferences } from './actions/setPanelsPreferences';
-import { setPreferences } from './actions/setPreferences';
-import { setVerticalSplitterPosition } from './actions/setVerticalSplitterPosition';
-import { setWorkspace } from './actions/setWorkspace';
-import { toggleInformationBlock } from './actions/toggleInformationBlock';
-import { mapWorkspaces } from './utilities/mapWorkspaces';
+  deleteExclusionZone,
+  setMatrixGenerationOptions,
+  toggleMatrixGenerationViewProperty,
+} from './actions/matrixGeneration.js';
+import { removeWorkspace } from './actions/removeWorkspace.js';
+import { setActiveWorkspace } from './actions/setActiveWorkspace.js';
+import { setPanelsPreferences } from './actions/setPanelsPreferences.js';
+import { setPreferences } from './actions/setPreferences.js';
+import { setVerticalSplitterPosition } from './actions/setVerticalSplitterPosition.js';
+import { setWorkspace } from './actions/setWorkspace.js';
+import { toggleInformationBlock } from './actions/toggleInformationBlock.js';
+import { mapWorkspaces } from './utilities/mapWorkspaces.js';
 
 const LOCAL_STORAGE_SETTINGS_KEY = 'nmr-general-settings';
 
diff --git a/src/component/reducer/preferences/utilities/checkKeysExists.ts b/src/component/reducer/preferences/utilities/checkKeysExists.ts
index 98e4241d0..e94264933 100644
--- a/src/component/reducer/preferences/utilities/checkKeysExists.ts
+++ b/src/component/reducer/preferences/utilities/checkKeysExists.ts
@@ -1,4 +1,4 @@
-import { flatObject } from './flatObject';
+import { flatObject } from './flatObject.js';
 
 export function checkKeysExists(sourceObject, targetObject) {
   const source = flatObject(sourceObject);
diff --git a/src/component/reducer/preferences/utilities/getActiveWorkspace.ts b/src/component/reducer/preferences/utilities/getActiveWorkspace.ts
index dbd9506d6..c5a02bfa0 100644
--- a/src/component/reducer/preferences/utilities/getActiveWorkspace.ts
+++ b/src/component/reducer/preferences/utilities/getActiveWorkspace.ts
@@ -1,7 +1,7 @@
-import { Draft } from 'immer';
-import { Workspace } from 'nmr-load-save';
+import type { Draft } from 'immer';
+import type { Workspace } from 'nmr-load-save';
 
-import { PreferencesState } from '../preferencesReducer';
+import type { PreferencesState } from '../preferencesReducer.js';
 
 export function getActiveWorkspace(draft: Draft<PreferencesState>) {
   return draft.workspaces[
diff --git a/src/component/reducer/preferences/utilities/getPreferencesByWorkspace.ts b/src/component/reducer/preferences/utilities/getPreferencesByWorkspace.ts
index 6a66f01b4..42b1fbcdc 100644
--- a/src/component/reducer/preferences/utilities/getPreferencesByWorkspace.ts
+++ b/src/component/reducer/preferences/utilities/getPreferencesByWorkspace.ts
@@ -1,8 +1,8 @@
-import lodashMerge from 'lodash/merge';
-import { CustomWorkspaces, WorkspacePreferences } from 'nmr-load-save';
+import lodashMerge from 'lodash/merge.js';
+import type { CustomWorkspaces, WorkspacePreferences } from 'nmr-load-save';
 
-import type { NMRiumWorkspace } from '../../../main';
-import { workspaceDefaultProperties } from '../../../workspaces/workspaceDefaultProperties';
+import type { NMRiumWorkspace } from '../../../main/index.js';
+import { workspaceDefaultProperties } from '../../../workspaces/workspaceDefaultProperties.js';
 
 export function getPreferencesByWorkspace(
   workspace: NMRiumWorkspace,
diff --git a/src/component/reducer/preferences/utilities/initWorkspace.ts b/src/component/reducer/preferences/utilities/initWorkspace.ts
index b5400600c..f85e84a94 100644
--- a/src/component/reducer/preferences/utilities/initWorkspace.ts
+++ b/src/component/reducer/preferences/utilities/initWorkspace.ts
@@ -1,7 +1,7 @@
-import lodashMerge from 'lodash/merge';
-import { WorkSpaceSource } from 'nmr-load-save';
+import lodashMerge from 'lodash/merge.js';
+import type { WorkSpaceSource } from 'nmr-load-save';
 
-import { workspaceDefaultProperties } from '../../../workspaces/workspaceDefaultProperties';
+import { workspaceDefaultProperties } from '../../../workspaces/workspaceDefaultProperties.js';
 
 export function initWorkspace(
   preferences: any,
diff --git a/src/component/reducer/preferences/utilities/isReadOnlyWorkspace.ts b/src/component/reducer/preferences/utilities/isReadOnlyWorkspace.ts
index 4616121f4..65879f338 100644
--- a/src/component/reducer/preferences/utilities/isReadOnlyWorkspace.ts
+++ b/src/component/reducer/preferences/utilities/isReadOnlyWorkspace.ts
@@ -1,6 +1,6 @@
-import { Draft } from 'immer';
+import type { Draft } from 'immer';
 
-import { PreferencesState } from '../preferencesReducer';
+import type { PreferencesState } from '../preferencesReducer.js';
 
 export function isReadOnlyWorkspace(
   draft: Draft<PreferencesState> | PreferencesState,
diff --git a/src/component/reducer/preferences/utilities/mapWorkspaces.ts b/src/component/reducer/preferences/utilities/mapWorkspaces.ts
index a1ad49e38..1685b1da9 100644
--- a/src/component/reducer/preferences/utilities/mapWorkspaces.ts
+++ b/src/component/reducer/preferences/utilities/mapWorkspaces.ts
@@ -1,7 +1,7 @@
-import lodashMerge from 'lodash/merge';
-import { Workspace, WorkSpaceSource } from 'nmr-load-save';
+import lodashMerge from 'lodash/merge.js';
+import type { Workspace, WorkSpaceSource } from 'nmr-load-save';
 
-import { workspaceDefaultProperties } from '../../../workspaces/workspaceDefaultProperties';
+import { workspaceDefaultProperties } from '../../../workspaces/workspaceDefaultProperties.js';
 
 interface MapWorkspacesOptions {
   ignoreKeys?: object;
diff --git a/src/component/reducer/scaleReducer.ts b/src/component/reducer/scaleReducer.ts
index 5ae1fed7b..ad1c737b9 100644
--- a/src/component/reducer/scaleReducer.ts
+++ b/src/component/reducer/scaleReducer.ts
@@ -1,7 +1,7 @@
-import { ScaleLinear } from 'd3';
+import type { ScaleLinear } from 'd3';
 import { produce } from 'immer';
 
-import { getXScale, getYScale } from '../1d/utilities/scale';
+import { getXScale, getYScale } from '../1d/utilities/scale.js';
 
 export const SET_X_SCALE = 'SET_X_SCALE';
 export const SET_Y_SCALE = 'SET_Y_SCALE';
diff --git a/src/component/toolbar/ToolBar.tsx b/src/component/toolbar/ToolBar.tsx
index d26927315..1cc965752 100644
--- a/src/component/toolbar/ToolBar.tsx
+++ b/src/component/toolbar/ToolBar.tsx
@@ -14,52 +14,44 @@ import {
   SvgNmrRealImag,
   SvgNmrZeroFilling,
 } from 'cheminfo-font';
-import { NMRiumToolBarPreferences } from 'nmr-load-save';
+import type { NMRiumToolBarPreferences } from 'nmr-load-save';
 import { useCallback } from 'react';
 import {
-  FaSearchPlus,
-  FaExpand,
   FaDiceFour,
-  FaFileImport,
-  FaFileExport,
   FaDownload,
+  FaExpand,
+  FaFileExport,
+  FaFileImport,
+  FaSearchPlus,
 } from 'react-icons/fa';
 import { PiKnifeBold } from 'react-icons/pi';
-import {
-  Toolbar,
-  ToolbarItemProps,
-  TooltipItem,
-  TooltipHelpContent,
-} from 'react-science/ui';
+import type { ToolbarItemProps, TooltipItem } from 'react-science/ui';
+import { Toolbar, TooltipHelpContent } from 'react-science/ui';
 
-import { useChartData } from '../context/ChartContext';
-import { useDispatch } from '../context/DispatchContext';
-import { useLoader } from '../context/LoaderContext';
-import { usePreferences } from '../context/PreferencesContext';
-import {
-  ToolbarPopoverMenuItem,
-  ToolbarPopoverItem,
-} from '../elements/ToolbarPopoverItem';
-import { useExportManagerAPI } from '../elements/export/ExportManager';
-import { useActiveSpectrum } from '../hooks/useActiveSpectrum';
-import useCheckExperimentalFeature from '../hooks/useCheckExperimentalFeature';
-import {
-  CheckOptions,
-  useCheckToolsVisibility,
-} from '../hooks/useCheckToolsVisibility';
-import useDatumWithSpectraStatistics from '../hooks/useDatumWithSpectraStatistics';
-import { useDialogToggle } from '../hooks/useDialogToggle';
-import { useExport } from '../hooks/useExport';
-import useToolsFunctions from '../hooks/useToolsFunctions';
-import { useVerticalAlign } from '../hooks/useVerticalAlign';
-import ExportAsJcampModal from '../modal/ExportAsJcampModal';
-import { ImportPublicationStringModal } from '../modal/ImportPublicationStringModal';
-import { LoadJCAMPModal } from '../modal/LoadJCAMPModal';
-import SaveAsModal from '../modal/SaveAsModal';
-import { MetaImportationModal } from '../modal/metaImportation/MetaImportationModal';
+import { useChartData } from '../context/ChartContext.js';
+import { useDispatch } from '../context/DispatchContext.js';
+import { useLoader } from '../context/LoaderContext.js';
+import { usePreferences } from '../context/PreferencesContext.js';
+import type { ToolbarPopoverMenuItem } from '../elements/ToolbarPopoverItem.js';
+import { ToolbarPopoverItem } from '../elements/ToolbarPopoverItem.js';
+import { useExportManagerAPI } from '../elements/export/ExportManager.js';
+import { useActiveSpectrum } from '../hooks/useActiveSpectrum.js';
+import useCheckExperimentalFeature from '../hooks/useCheckExperimentalFeature.js';
+import type { CheckOptions } from '../hooks/useCheckToolsVisibility.js';
+import { useCheckToolsVisibility } from '../hooks/useCheckToolsVisibility.js';
+import useDatumWithSpectraStatistics from '../hooks/useDatumWithSpectraStatistics.js';
+import { useDialogToggle } from '../hooks/useDialogToggle.js';
+import { useExport } from '../hooks/useExport.js';
+import useToolsFunctions from '../hooks/useToolsFunctions.js';
+import { useVerticalAlign } from '../hooks/useVerticalAlign.js';
+import ExportAsJcampModal from '../modal/ExportAsJcampModal.js';
+import { ImportPublicationStringModal } from '../modal/ImportPublicationStringModal.js';
+import { LoadJCAMPModal } from '../modal/LoadJCAMPModal.js';
+import SaveAsModal from '../modal/SaveAsModal.js';
+import { MetaImportationModal } from '../modal/metaImportation/MetaImportationModal.js';
 
-import { options } from './ToolTypes';
-import { EXPORT_MENU, IMPORT_MENU } from './toolbarMenu';
+import { options } from './ToolTypes.js';
+import { EXPORT_MENU, IMPORT_MENU } from './toolbarMenu.js';
 
 interface BaseToolItem extends Pick<ToolbarItemProps, 'icon'> {
   id: keyof NMRiumToolBarPreferences;
diff --git a/src/component/toolbar/ToolTypes.ts b/src/component/toolbar/ToolTypes.ts
index 3f1d399be..a5886bb1f 100644
--- a/src/component/toolbar/ToolTypes.ts
+++ b/src/component/toolbar/ToolTypes.ts
@@ -1,8 +1,8 @@
-import { NMRiumToolBarPreferences } from 'nmr-load-save';
+import type { NMRiumToolBarPreferences } from 'nmr-load-save';
 import type { Info1D, Info2D } from 'nmr-processing';
 import { Filters } from 'nmr-processing';
 
-import { DisplayerMode } from '../reducer/Reducer';
+import type { DisplayerMode } from '../reducer/Reducer.js';
 
 type InfoKey = keyof Info1D | keyof Info2D;
 
diff --git a/src/component/toolbar/toolbarMenu.tsx b/src/component/toolbar/toolbarMenu.tsx
index a3eeb494c..e74553467 100644
--- a/src/component/toolbar/toolbarMenu.tsx
+++ b/src/component/toolbar/toolbarMenu.tsx
@@ -6,7 +6,7 @@ import {
   FaFileImage,
 } from 'react-icons/fa';
 
-import { ToolbarPopoverMenuItem } from '../elements/ToolbarPopoverItem';
+import type { ToolbarPopoverMenuItem } from '../elements/ToolbarPopoverItem.js';
 
 const IMPORT_MENU: ToolbarPopoverMenuItem[] = [
   {
diff --git a/src/component/utility/Events.tsx b/src/component/utility/Events.tsx
index 3c1bcf235..327d359dc 100644
--- a/src/component/utility/Events.tsx
+++ b/src/component/utility/Events.tsx
@@ -1,12 +1,12 @@
-import EE from 'eventemitter3';
+import { EventEmitter } from 'eventemitter3';
 import { useEffect } from 'react';
 
-import {
+import type {
   BrushTrackerContext,
   ClickOptions,
-} from '../EventsTrackers/BrushTracker';
+} from '../EventsTrackers/BrushTracker.js';
 
-const eventEmitter = new EE();
+const eventEmitter = new EventEmitter();
 
 const Emitter = {
   on: (event, fn) => eventEmitter.on(event, fn),
diff --git a/src/component/utility/LocalStorage.ts b/src/component/utility/LocalStorage.ts
index 156869ebf..e1dc8202e 100644
--- a/src/component/utility/LocalStorage.ts
+++ b/src/component/utility/LocalStorage.ts
@@ -1,5 +1,5 @@
-import lodashGet from 'lodash/get';
-import lodashSet from 'lodash/set';
+import lodashGet from 'lodash/get.js';
+import lodashSet from 'lodash/set.js';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 export function useStateWithLocalStorage(localStorageKey, key?: string) {
diff --git a/src/component/utility/PreferencesHelper.ts b/src/component/utility/PreferencesHelper.ts
index d13c7681d..5a5fcedb9 100644
--- a/src/component/utility/PreferencesHelper.ts
+++ b/src/component/utility/PreferencesHelper.ts
@@ -1,6 +1,6 @@
-import { readSettings } from '../reducer/preferences/preferencesReducer';
+import { readSettings } from '../reducer/preferences/preferencesReducer.js';
 
-import { getValue } from './LocalStorage';
+import { getValue } from './LocalStorage.js';
 
 function GetPreference(preferences, key) {
   const localData = readSettings() || {};
diff --git a/src/component/utility/checkUniqueByKey.ts b/src/component/utility/checkUniqueByKey.ts
index 523375318..c84bdfc56 100644
--- a/src/component/utility/checkUniqueByKey.ts
+++ b/src/component/utility/checkUniqueByKey.ts
@@ -1,4 +1,5 @@
-import { TestContext, ValidationError } from 'yup';
+import type { TestContext } from 'yup';
+import { ValidationError } from 'yup';
 
 export function checkUniqueByKey<T>(
   data: T[] | undefined,
diff --git a/src/component/utility/export.ts b/src/component/utility/export.ts
index 52ea220b8..c62f32d98 100644
--- a/src/component/utility/export.ts
+++ b/src/component/utility/export.ts
@@ -1,8 +1,8 @@
-import { SerializedStyles } from '@emotion/react';
-import { saveAs } from 'file-saver';
+import type { SerializedStyles } from '@emotion/react';
+import fileSaver from 'file-saver';
 import JSZip from 'jszip';
-import lodashGet from 'lodash/get';
-import { JpathTableColumn, SpectraTableColumn } from 'nmr-load-save';
+import lodashGet from 'lodash/get.js';
+import type { JpathTableColumn, SpectraTableColumn } from 'nmr-load-save';
 
 /**
  * export the experiments result in JSON format
@@ -25,7 +25,7 @@ async function exportAsJSON(
   );
   if (!isCompressed) {
     const blob = new Blob([fileData], { type: 'text/plain' });
-    saveAs(blob, `${fileName}.nmrium`);
+    fileSaver.saveAs(blob, `${fileName}.nmrium`);
   } else {
     try {
       const zip = new JSZip();
@@ -37,7 +37,7 @@ async function exportAsJSON(
           level: 9,
         },
       });
-      saveAs(blob, `${fileName}.nmrium`);
+      fileSaver.saveAs(blob, `${fileName}.nmrium`);
     } catch (error) {
       // TODO: handle error.
       reportError(error);
@@ -84,18 +84,18 @@ function exportAsMatrix(
   }
 
   const blob = new Blob([matrix], { type: 'text/tab-separated-values' });
-  saveAs(blob, `${fileName}.tsv`);
+  fileSaver.saveAs(blob, `${fileName}.tsv`);
 }
 
 function exportAsNMRE(data, fileName = 'experiment') {
   data.generateAsync({ type: 'blob' }).then((content) => {
-    saveAs(content, `${fileName}.nmredata`);
+    fileSaver.saveAs(content, `${fileName}.nmredata`);
   });
 }
 
 function exportAsMol(data, fileName = 'mol') {
   const blob = new Blob([data], { type: 'text/plain' });
-  saveAs(blob, `${fileName}.mol`);
+  fileSaver.saveAs(blob, `${fileName}.mol`);
 }
 /**
  * export the vitalization result as SVG, if you need to remove some content during exportation process enclose the the content with <!-- export-remove --> ${content} <!-- export-remove -->
@@ -112,7 +112,7 @@ interface ExportAsSVGOptions {
 function exportAsSVG(targetElementID: string, options: ExportAsSVGOptions) {
   const { fileName, rootElement } = options;
   const { blob } = getBlob(targetElementID, { rootElement });
-  saveAs(blob, `${fileName}.svg`);
+  fileSaver.saveAs(blob, `${fileName}.svg`);
 }
 
 interface ExportAsPNGOptions {
@@ -279,7 +279,7 @@ async function exportAsPng(
     });
 
     const pngBlob = await canvas.convertToBlob({ type: 'image/png' });
-    saveAs(pngBlob, `${fileName}.png`);
+    fileSaver.saveAs(pngBlob, `${fileName}.png`);
   } catch (error) {
     // TODO: handle error.
     reportError(error);
diff --git a/src/component/utility/getClosePeak.ts b/src/component/utility/getClosePeak.ts
index d4635b4e3..4a28d4f8c 100644
--- a/src/component/utility/getClosePeak.ts
+++ b/src/component/utility/getClosePeak.ts
@@ -1,8 +1,8 @@
-import { Spectrum1D } from 'nmr-load-save';
+import type { Spectrum1D } from 'nmr-load-save';
 
-import { get1DDataXY } from '../../data/data1d/Spectrum1D';
+import { get1DDataXY } from '../../data/data1d/Spectrum1D/index.js';
 
-import { maxAbsoluteValue } from './maxAbsoluteValue';
+import { maxAbsoluteValue } from './maxAbsoluteValue.js';
 
 interface PeakPosition {
   x: number;
diff --git a/src/component/utility/getSpectraByNucleus.ts b/src/component/utility/getSpectraByNucleus.ts
index f6871ffcc..c4c5eca12 100644
--- a/src/component/utility/getSpectraByNucleus.ts
+++ b/src/component/utility/getSpectraByNucleus.ts
@@ -1,6 +1,6 @@
-import { Spectrum } from 'nmr-load-save';
+import type { Spectrum } from 'nmr-load-save';
 
-import nucleusToString from './nucleusToString';
+import nucleusToString from './nucleusToString.js';
 
 export function getSpectraByNucleus(nucleus: string, data: Spectrum[]) {
   return data.filter(
diff --git a/src/component/utility/getSpectraObjectPaths.ts b/src/component/utility/getSpectraObjectPaths.ts
index c09752360..8b60351c3 100644
--- a/src/component/utility/getSpectraObjectPaths.ts
+++ b/src/component/utility/getSpectraObjectPaths.ts
@@ -1,4 +1,4 @@
-import { Spectrum } from 'nmr-load-save';
+import type { Spectrum } from 'nmr-load-save';
 
 export function getSpectraObjectPaths(
   spectra: Spectrum[],
diff --git a/src/component/utility/maxAbsoluteValue.ts b/src/component/utility/maxAbsoluteValue.ts
index 68f9a1e48..eddbe54aa 100644
--- a/src/component/utility/maxAbsoluteValue.ts
+++ b/src/component/utility/maxAbsoluteValue.ts
@@ -1,9 +1,6 @@
-import { NumberArray } from 'cheminfo-types';
-import {
-  XGetFromToIndexOptions,
-  xCheck,
-  xGetFromToIndex,
-} from 'ml-spectra-processing';
+import type { NumberArray } from 'cheminfo-types';
+import type { XGetFromToIndexOptions } from 'ml-spectra-processing';
+import { xCheck, xGetFromToIndex } from 'ml-spectra-processing';
 
 //This function is an adapted version of the xMaxAbsoluteValue function from ml-spectra-processing. It identifies the maximum absolute value and returns the corresponding maximum value along with its sign
 export function maxAbsoluteValue(
diff --git a/src/component/workspaces/assignment.ts b/src/component/workspaces/assignment.ts
index 3caf03d35..8dd3c9748 100644
--- a/src/component/workspaces/assignment.ts
+++ b/src/component/workspaces/assignment.ts
@@ -1,4 +1,4 @@
-import { InnerWorkspace } from 'nmr-load-save';
+import type { InnerWorkspace } from 'nmr-load-save';
 
 export const assignment: InnerWorkspace = {
   label: 'NMR spectra assignment',
diff --git a/src/component/workspaces/basic.ts b/src/component/workspaces/basic.ts
index 9798eb967..4853c20c9 100644
--- a/src/component/workspaces/basic.ts
+++ b/src/component/workspaces/basic.ts
@@ -1,4 +1,4 @@
-import { InnerWorkspace } from 'nmr-load-save';
+import type { InnerWorkspace } from 'nmr-load-save';
 
 export const basic: InnerWorkspace = {
   label: 'Simple NMR analysis',
diff --git a/src/component/workspaces/embedded.ts b/src/component/workspaces/embedded.ts
index d1d95c6cb..7fceb8f4b 100644
--- a/src/component/workspaces/embedded.ts
+++ b/src/component/workspaces/embedded.ts
@@ -1,4 +1,4 @@
-import { InnerWorkspace } from 'nmr-load-save';
+import type { InnerWorkspace } from 'nmr-load-save';
 
 export const embedded: InnerWorkspace = {
   label: 'Embedded',
diff --git a/src/component/workspaces/exercise.ts b/src/component/workspaces/exercise.ts
index 8f0a56f18..8037e3fb5 100644
--- a/src/component/workspaces/exercise.ts
+++ b/src/component/workspaces/exercise.ts
@@ -1,4 +1,4 @@
-import { InnerWorkspace } from 'nmr-load-save';
+import type { InnerWorkspace } from 'nmr-load-save';
 
 export const exercise: InnerWorkspace = {
   label: 'Exercise',
diff --git a/src/component/workspaces/index.ts b/src/component/workspaces/index.ts
index 9afd5ba66..6ed216e1a 100644
--- a/src/component/workspaces/index.ts
+++ b/src/component/workspaces/index.ts
@@ -1,10 +1,10 @@
-import { assignment } from './assignment';
-import { basic } from './basic';
-import { embedded } from './embedded';
-import { exercise } from './exercise';
-import { prediction } from './prediction';
-import { process1D } from './process1D';
-import { simulation } from './simulation';
+import { assignment } from './assignment.js';
+import { basic } from './basic.js';
+import { embedded } from './embedded.js';
+import { exercise } from './exercise.js';
+import { prediction } from './prediction.js';
+import { process1D } from './process1D.js';
+import { simulation } from './simulation.js';
 
 export default {
   exercise,
diff --git a/src/component/workspaces/prediction.ts b/src/component/workspaces/prediction.ts
index a7bef42ac..3aacdc422 100644
--- a/src/component/workspaces/prediction.ts
+++ b/src/component/workspaces/prediction.ts
@@ -1,4 +1,4 @@
-import { InnerWorkspace } from 'nmr-load-save';
+import type { InnerWorkspace } from 'nmr-load-save';
 
 export const prediction: InnerWorkspace = {
   label: 'Prediction',
diff --git a/src/component/workspaces/process1D.ts b/src/component/workspaces/process1D.ts
index d6ab754a5..be57ea1e7 100644
--- a/src/component/workspaces/process1D.ts
+++ b/src/component/workspaces/process1D.ts
@@ -1,4 +1,4 @@
-import { InnerWorkspace } from 'nmr-load-save';
+import type { InnerWorkspace } from 'nmr-load-save';
 
 export const process1D: InnerWorkspace = {
   label: '1D multiple spectra analysis',
diff --git a/src/component/workspaces/simulation.ts b/src/component/workspaces/simulation.ts
index a72a8c59d..25104cd87 100644
--- a/src/component/workspaces/simulation.ts
+++ b/src/component/workspaces/simulation.ts
@@ -1,4 +1,4 @@
-import { InnerWorkspace } from 'nmr-load-save';
+import type { InnerWorkspace } from 'nmr-load-save';
 
 export const simulation: InnerWorkspace = {
   label: 'Simulation',
diff --git a/src/component/workspaces/workspaceDefaultProperties.ts b/src/component/workspaces/workspaceDefaultProperties.ts
index a5e82e2df..48936bdab 100644
--- a/src/component/workspaces/workspaceDefaultProperties.ts
+++ b/src/component/workspaces/workspaceDefaultProperties.ts
@@ -1,7 +1,7 @@
-import { WorkspacePreferences } from 'nmr-load-save';
+import type { WorkspacePreferences } from 'nmr-load-save';
 import { Filters } from 'nmr-processing';
 
-import { color2D } from '../../data/data2d/Spectrum2D/get2DColor';
+import { color2D } from '../../data/data2d/Spectrum2D/get2DColor.js';
 
 export const workspaceDefaultProperties: Required<WorkspacePreferences> = {
   display: {
diff --git a/src/data/PredictionManager.ts b/src/data/PredictionManager.ts
index 6a7025f67..88c3757cf 100644
--- a/src/data/PredictionManager.ts
+++ b/src/data/PredictionManager.ts
@@ -1,31 +1,33 @@
 import { v4 } from '@lukeed/uuid';
-import { Logger } from 'cheminfo-types';
+import type { Logger } from 'cheminfo-types';
 import { xMinMaxValues } from 'ml-spectra-processing';
-import { Spectrum } from 'nmr-load-save';
-import {
-  Signal2D,
-  Zone,
-  predict,
-  signalsToXY,
-  signals2DToZ,
-  getFrequency,
+import type { Spectrum } from 'nmr-load-save';
+import type {
   Predicted,
-  signalsToRanges,
   Prediction1D,
   Prediction2D,
   PredictionBase1D,
   PredictionBase2D,
+  Signal2D,
+  Zone,
+} from 'nmr-processing';
+import {
+  getFrequency,
+  predict,
+  signals2DToZ,
+  signalsToRanges,
+  signalsToXY,
 } from 'nmr-processing';
 import OCL from 'openchemlib/full';
 
-import { DATUM_KIND } from './constants/signalsKinds';
+import { DATUM_KIND } from './constants/signalsKinds.js';
 import {
   initiateDatum1D,
   mapRanges,
   updateIntegralsRelativeValues,
-} from './data1d/Spectrum1D';
-import { initiateDatum2D } from './data2d/Spectrum2D';
-import { adjustAlpha } from './utilities/generateColor';
+} from './data1d/Spectrum1D/index.js';
+import { initiateDatum2D } from './data2d/Spectrum2D/index.js';
+import { adjustAlpha } from './utilities/generateColor.js';
 
 export type Experiment = 'proton' | 'carbon' | 'cosy' | 'hsqc' | 'hmbc';
 export type SpectraPredictionOptions = Record<Experiment, boolean>;
diff --git a/src/data/SpectraManager.ts b/src/data/SpectraManager.ts
index 22b04dd4d..e63023994 100644
--- a/src/data/SpectraManager.ts
+++ b/src/data/SpectraManager.ts
@@ -1,21 +1,19 @@
-import { saveAs } from 'file-saver';
+import fileSaver from 'file-saver';
 import JSZip from 'jszip';
+import type { Spectrum, StateMolecule, Workspace } from 'nmr-load-save';
 import {
-  Spectrum,
-  Workspace,
+  CURRENT_EXPORT_VERSION,
   processJcamp,
   serializeNmriumState,
-  CURRENT_EXPORT_VERSION,
   spectrum1DToJcamp,
-  StateMolecule,
 } from 'nmr-load-save';
 import OCL from 'openchemlib/full';
 
-import { State } from '../component/reducer/Reducer';
+import type { State } from '../component/reducer/Reducer.js';
 
-import { isSpectrum1D, initiateDatum1D } from './data1d/Spectrum1D';
-import { initiateDatum2D } from './data2d/Spectrum2D';
-import * as Molecule from './molecules/Molecule';
+import { initiateDatum1D, isSpectrum1D } from './data1d/Spectrum1D/index.js';
+import { initiateDatum2D } from './data2d/Spectrum2D/index.js';
+import * as Molecule from './molecules/Molecule.js';
 
 export enum DataExportOptions {
   ROW_DATA = 'ROW_DATA',
@@ -169,7 +167,7 @@ export function exportAsJcamp(
   }
 
   const blob = new Blob([jcamp], { type: 'text/plain' });
-  saveAs(blob, `${spectrum.info.name}.jdx`);
+  fileSaver.saveAs(blob, `${spectrum.info.name}.jdx`);
 }
 
 interface ExportForCTOptions {
@@ -217,5 +215,5 @@ export async function exportForCT(options: ExportForCTOptions) {
     },
   });
 
-  saveAs(blob, name);
+  fileSaver.saveAs(blob, name);
 }
diff --git a/src/data/constants/DefaultApodizationOptions.ts b/src/data/constants/DefaultApodizationOptions.ts
index 314453ea1..2092e6097 100644
--- a/src/data/constants/DefaultApodizationOptions.ts
+++ b/src/data/constants/DefaultApodizationOptions.ts
@@ -1,4 +1,4 @@
-import { ApodizationOptions } from 'nmr-processing';
+import type { ApodizationOptions } from 'nmr-processing';
 
 export const defaultApodizationOptions: ApodizationOptions = {
   lineBroadening: 1,
diff --git a/src/data/constants/DefaultPathLengths.ts b/src/data/constants/DefaultPathLengths.ts
index 15024d1e6..6585d94bd 100644
--- a/src/data/constants/DefaultPathLengths.ts
+++ b/src/data/constants/DefaultPathLengths.ts
@@ -1,4 +1,4 @@
-import { FromTo } from 'cheminfo-types';
+import type { FromTo } from 'cheminfo-types';
 
 export type DefaultPathLengthsInterface = Record<string, FromTo>;
 
diff --git a/src/data/constants/signalsKinds.ts b/src/data/constants/signalsKinds.ts
index bb6990a5a..f019ea2cf 100644
--- a/src/data/constants/signalsKinds.ts
+++ b/src/data/constants/signalsKinds.ts
@@ -1,5 +1,5 @@
-import { stringCapitalize } from '../../utils/stringCapitalize';
-import { SignalKind } from '../types/common/SignalKind';
+import { stringCapitalize } from '../../utils/stringCapitalize.js';
+import type { SignalKind } from '../types/common/SignalKind.js';
 
 const KINDS: SignalKind[] = [
   'undefined',
diff --git a/src/data/data1d/Spectrum1D/SumManager.ts b/src/data/data1d/Spectrum1D/SumManager.ts
index 35d865fbd..1fc5f6110 100644
--- a/src/data/data1d/Spectrum1D/SumManager.ts
+++ b/src/data/data1d/Spectrum1D/SumManager.ts
@@ -1,17 +1,17 @@
-import { Draft } from 'immer';
+import type { Draft } from 'immer';
 import { MF } from 'mf-parser';
-import { Spectrum1D } from 'nmr-load-save';
-import { Integrals, Ranges, SumOptions } from 'nmr-processing';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { Integrals, Ranges, SumOptions } from 'nmr-processing';
 
-import { State } from '../../../component/reducer/Reducer';
-import { StateMoleculeExtended } from '../../molecules/Molecule';
-import getAtom from '../../utilities/getAtom';
+import type { State } from '../../../component/reducer/Reducer.js';
+import type { StateMoleculeExtended } from '../../molecules/Molecule.js';
+import getAtom from '../../utilities/getAtom.js';
 
 import {
   isSpectrum1D,
-  updateRangesRelativeValues,
   updateIntegralsRelativeValues,
-} from '.';
+  updateRangesRelativeValues,
+} from './index.js';
 
 export interface SumParams {
   nucleus: string;
diff --git a/src/data/data1d/Spectrum1D/convertDataToFloat64Array.ts b/src/data/data1d/Spectrum1D/convertDataToFloat64Array.ts
index 82d87e934..b0c39d4ba 100644
--- a/src/data/data1d/Spectrum1D/convertDataToFloat64Array.ts
+++ b/src/data/data1d/Spectrum1D/convertDataToFloat64Array.ts
@@ -1,4 +1,4 @@
-import { NmrData1D } from 'cheminfo-types';
+import type { NmrData1D } from 'cheminfo-types';
 
 function convert(value: Float64Array | number[] = []): Float64Array {
   return !ArrayBuffer.isView(value) && value ? Float64Array.from(value) : value;
diff --git a/src/data/data1d/Spectrum1D/generateJGraphData.ts b/src/data/data1d/Spectrum1D/generateJGraphData.ts
index c07d7ea47..f55ad95a3 100644
--- a/src/data/data1d/Spectrum1D/generateJGraphData.ts
+++ b/src/data/data1d/Spectrum1D/generateJGraphData.ts
@@ -1,5 +1,5 @@
 import { v4 } from '@lukeed/uuid';
-import { Range, Signal1D, Jcoupling } from 'nmr-processing';
+import type { Jcoupling, Range, Signal1D } from 'nmr-processing';
 
 /**
  * Links object that use coupling as key and value is an array of objects {id:signal id ,x:signal delta,y:coupling}
diff --git a/src/data/data1d/Spectrum1D/get1DColor.ts b/src/data/data1d/Spectrum1D/get1DColor.ts
index ac586fe85..8f8b1a3c7 100644
--- a/src/data/data1d/Spectrum1D/get1DColor.ts
+++ b/src/data/data1d/Spectrum1D/get1DColor.ts
@@ -1,8 +1,8 @@
-import { SpectrumOneDimensionColor } from 'nmr-load-save';
+import type { SpectrumOneDimensionColor } from 'nmr-load-save';
 
-import { UsedColors } from '../../../types/UsedColors';
-import { generateColor } from '../../utilities/generateColor';
-import { getCustomColor } from '../../utilities/getCustomColor';
+import type { UsedColors } from '../../../types/UsedColors.js';
+import { generateColor } from '../../utilities/generateColor.js';
+import { getCustomColor } from '../../utilities/getCustomColor.js';
 
 interface BaseColorOptions {
   usedColors?: UsedColors;
diff --git a/src/data/data1d/Spectrum1D/get1DDataXY.ts b/src/data/data1d/Spectrum1D/get1DDataXY.ts
index d61836bef..8ca4d5965 100644
--- a/src/data/data1d/Spectrum1D/get1DDataXY.ts
+++ b/src/data/data1d/Spectrum1D/get1DDataXY.ts
@@ -4,7 +4,7 @@
  * @property {number[]} y - The Y points series
  */
 
-import { Spectrum1D } from 'nmr-load-save';
+import type { Spectrum1D } from 'nmr-load-save';
 
 /**
  *
diff --git a/src/data/data1d/Spectrum1D/getReferenceShift.ts b/src/data/data1d/Spectrum1D/getReferenceShift.ts
index 73025853e..cdfcbe05e 100644
--- a/src/data/data1d/Spectrum1D/getReferenceShift.ts
+++ b/src/data/data1d/Spectrum1D/getReferenceShift.ts
@@ -3,7 +3,7 @@ import mean from 'ml-array-mean';
 import { gsd } from 'ml-gsd';
 import { xFindClosestIndex } from 'ml-spectra-processing';
 
-import { getRange } from '../../constants/References';
+import { getRange } from '../../constants/References.js';
 
 export interface CalibrateOptions {
   from: number;
diff --git a/src/data/data1d/Spectrum1D/index.ts b/src/data/data1d/Spectrum1D/index.ts
index 2d890a419..c60c191e2 100644
--- a/src/data/data1d/Spectrum1D/index.ts
+++ b/src/data/data1d/Spectrum1D/index.ts
@@ -1,21 +1,21 @@
-export { get1DDataXY } from './get1DDataXY';
-export { getReferenceShift } from './getReferenceShift';
-export { initiateDatum1D } from './initiateDatum1D';
-export { changeIntegralsRelative } from './integrals/changeIntegralsRelative';
-export { isSpectrum1D } from './isSpectrum1D';
-export { autoPeakPicking } from './peaks/autoPeakPicking';
-export { optimizePeaks } from './peaks/optimizePeaks';
-export { createRange } from './ranges/createRange';
-export { resizeRange } from './ranges/resizeRange';
-export { changeRangeRelativeValue } from './ranges/changeRangeRelativeValue';
-export { changeRangeSignal } from './ranges/changeRangeSignal';
-export { checkRangeKind } from './ranges/checkRangeKind';
-export { detectRange } from './ranges/detectRange';
-export { detectRanges } from './ranges/detectRanges';
+export { get1DDataXY } from './get1DDataXY.js';
+export { getReferenceShift } from './getReferenceShift.js';
+export { initiateDatum1D } from './initiateDatum1D.js';
+export { changeIntegralsRelative } from './integrals/changeIntegralsRelative.js';
+export { isSpectrum1D } from './isSpectrum1D.js';
+export { autoPeakPicking } from './peaks/autoPeakPicking.js';
+export { optimizePeaks } from './peaks/optimizePeaks.js';
+export { createRange } from './ranges/createRange.js';
+export { resizeRange } from './ranges/resizeRange.js';
+export { changeRangeRelativeValue } from './ranges/changeRangeRelativeValue.js';
+export { changeRangeSignal } from './ranges/changeRangeSignal.js';
+export { checkRangeKind } from './ranges/checkRangeKind.js';
+export { detectRange } from './ranges/detectRange.js';
+export { detectRanges } from './ranges/detectRanges.js';
 export {
   resurrectSpectrumFromRanges,
   resurrectSpectrumFromSignals,
-} from './ranges/resurrectSpectrum';
+} from './ranges/resurrectSpectrum.js';
 export {
   mapRanges,
   getShiftX,
@@ -23,4 +23,4 @@ export {
   updateRangesRelativeValues,
   updateIntegralsRelativeValues,
 } from 'nmr-processing';
-export { get1DColor } from './get1DColor';
+export { get1DColor } from './get1DColor.js';
diff --git a/src/data/data1d/Spectrum1D/initiateDatum1D.ts b/src/data/data1d/Spectrum1D/initiateDatum1D.ts
index c7cc69532..8fd02836c 100644
--- a/src/data/data1d/Spectrum1D/initiateDatum1D.ts
+++ b/src/data/data1d/Spectrum1D/initiateDatum1D.ts
@@ -1,17 +1,17 @@
 import { v4 } from '@lukeed/uuid';
-import { Spectrum1D, SpectrumOneDimensionColor } from 'nmr-load-save';
+import type { Spectrum1D, SpectrumOneDimensionColor } from 'nmr-load-save';
 import { FiltersManager } from 'nmr-processing';
 
-import { UsedColors } from '../../../types/UsedColors';
-import { initiateFilters } from '../../initiateFilters';
-import { StateMoleculeExtended } from '../../molecules/Molecule';
+import type { UsedColors } from '../../../types/UsedColors.js';
+import { initiateFilters } from '../../initiateFilters.js';
+import type { StateMoleculeExtended } from '../../molecules/Molecule.js';
 
-import { initSumOptions } from './SumManager';
-import { convertDataToFloat64Array } from './convertDataToFloat64Array';
-import { get1DColor } from './get1DColor';
-import { initiateIntegrals } from './integrals/initiateIntegrals';
-import { initiatePeaks } from './peaks/initiatePeaks';
-import { initiateRanges } from './ranges/initiateRanges';
+import { initSumOptions } from './SumManager.js';
+import { convertDataToFloat64Array } from './convertDataToFloat64Array.js';
+import { get1DColor } from './get1DColor.js';
+import { initiateIntegrals } from './integrals/initiateIntegrals.js';
+import { initiatePeaks } from './peaks/initiatePeaks.js';
+import { initiateRanges } from './ranges/initiateRanges.js';
 
 export interface InitiateDatum1DOptions {
   usedColors?: UsedColors;
diff --git a/src/data/data1d/Spectrum1D/integrals/changeIntegralsRelative.ts b/src/data/data1d/Spectrum1D/integrals/changeIntegralsRelative.ts
index efd8ad8d7..28eddd630 100644
--- a/src/data/data1d/Spectrum1D/integrals/changeIntegralsRelative.ts
+++ b/src/data/data1d/Spectrum1D/integrals/changeIntegralsRelative.ts
@@ -1,5 +1,5 @@
-import { Spectrum1D } from 'nmr-load-save';
-import { Integral } from 'nmr-processing';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { Integral } from 'nmr-processing';
 
 export function changeIntegralsRelative(
   spectrum: Spectrum1D,
diff --git a/src/data/data1d/Spectrum1D/integrals/initiateIntegrals.ts b/src/data/data1d/Spectrum1D/integrals/initiateIntegrals.ts
index 3bbd33497..01356f486 100644
--- a/src/data/data1d/Spectrum1D/integrals/initiateIntegrals.ts
+++ b/src/data/data1d/Spectrum1D/integrals/initiateIntegrals.ts
@@ -1,6 +1,7 @@
-import merge from 'lodash/merge';
-import { Spectrum1D } from 'nmr-load-save';
-import { Integrals, mapIntegrals } from 'nmr-processing';
+import merge from 'lodash/merge.js';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { Integrals } from 'nmr-processing';
+import { mapIntegrals } from 'nmr-processing';
 
 export function initiateIntegrals(
   inputSpectrum: Partial<Spectrum1D>,
diff --git a/src/data/data1d/Spectrum1D/isRangeAssigned.ts b/src/data/data1d/Spectrum1D/isRangeAssigned.ts
index 89d2db89c..fa35d1d40 100644
--- a/src/data/data1d/Spectrum1D/isRangeAssigned.ts
+++ b/src/data/data1d/Spectrum1D/isRangeAssigned.ts
@@ -1,4 +1,4 @@
-import { Range, Signal1D } from 'nmr-processing';
+import type { Range, Signal1D } from 'nmr-processing';
 
 function isAssigned(object: Range | Signal1D) {
   return (
diff --git a/src/data/data1d/Spectrum1D/isSpectrum1D.ts b/src/data/data1d/Spectrum1D/isSpectrum1D.ts
index 4febb59ab..8b6302f45 100644
--- a/src/data/data1d/Spectrum1D/isSpectrum1D.ts
+++ b/src/data/data1d/Spectrum1D/isSpectrum1D.ts
@@ -1,4 +1,4 @@
-import { Spectrum, Spectrum1D } from 'nmr-load-save';
+import type { Spectrum, Spectrum1D } from 'nmr-load-save';
 
 export function isSpectrum1D(spectrum: Spectrum): spectrum is Spectrum1D {
   return spectrum.info.dimension === 1;
diff --git a/src/data/data1d/Spectrum1D/peaks/autoPeakPicking.ts b/src/data/data1d/Spectrum1D/peaks/autoPeakPicking.ts
index c3ddb05df..6dcb41028 100644
--- a/src/data/data1d/Spectrum1D/peaks/autoPeakPicking.ts
+++ b/src/data/data1d/Spectrum1D/peaks/autoPeakPicking.ts
@@ -1,6 +1,7 @@
 import median from 'ml-array-median';
-import { Spectrum1D } from 'nmr-load-save';
-import { Peak1D, xyAutoPeaksPicking, mapPeaks } from 'nmr-processing';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { Peak1D } from 'nmr-processing';
+import { mapPeaks, xyAutoPeaksPicking } from 'nmr-processing';
 
 export function autoPeakPicking(spectrum: Spectrum1D, options) {
   const {
diff --git a/src/data/data1d/Spectrum1D/peaks/initiatePeaks.ts b/src/data/data1d/Spectrum1D/peaks/initiatePeaks.ts
index 6703e1e66..6f5883352 100644
--- a/src/data/data1d/Spectrum1D/peaks/initiatePeaks.ts
+++ b/src/data/data1d/Spectrum1D/peaks/initiatePeaks.ts
@@ -1,6 +1,7 @@
-import merge from 'lodash/merge';
-import { Spectrum1D } from 'nmr-load-save';
-import { Peaks, mapPeaks } from 'nmr-processing';
+import merge from 'lodash/merge.js';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { Peaks } from 'nmr-processing';
+import { mapPeaks } from 'nmr-processing';
 
 export function initiatePeaks(
   inputSpectrum: Partial<Spectrum1D>,
diff --git a/src/data/data1d/Spectrum1D/peaks/optimizePeaks.ts b/src/data/data1d/Spectrum1D/peaks/optimizePeaks.ts
index 884e6d809..09611a849 100644
--- a/src/data/data1d/Spectrum1D/peaks/optimizePeaks.ts
+++ b/src/data/data1d/Spectrum1D/peaks/optimizePeaks.ts
@@ -1,6 +1,7 @@
 import { xFindClosestIndex } from 'ml-spectra-processing';
-import { Spectrum1D } from 'nmr-load-save';
-import { Peak1D, xyPeaksOptimization, mapPeaks } from 'nmr-processing';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { Peak1D } from 'nmr-processing';
+import { mapPeaks, xyPeaksOptimization } from 'nmr-processing';
 
 interface OptimizePeaksOptions {
   from: number;
diff --git a/src/data/data1d/Spectrum1D/ranges/__tests__/detectSignal.test.ts b/src/data/data1d/Spectrum1D/ranges/__tests__/detectSignal.test.ts
index fb75408f7..957f4d55c 100644
--- a/src/data/data1d/Spectrum1D/ranges/__tests__/detectSignal.test.ts
+++ b/src/data/data1d/Spectrum1D/ranges/__tests__/detectSignal.test.ts
@@ -1,7 +1,7 @@
 import { rangesToXY } from 'nmr-processing';
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
-import detectSignals from '../detectSignals';
+import detectSignals from '../detectSignals.js';
 
 describe('lineBroadening', () => {
   it('simple x, re, im to 1 Hz exp.', () => {
@@ -30,6 +30,7 @@ describe('lineBroadening', () => {
     )[0];
     expect(result?.multiplicity).toBe('t');
     expect(result?.delta).toBeCloseTo(1, 3);
+    // @ts-expect-error Coupling exists.
     expect(result?.js[0].coupling).toBeCloseTo(7.2, 2);
   });
 });
diff --git a/src/data/data1d/Spectrum1D/ranges/autoRangesDetection.ts b/src/data/data1d/Spectrum1D/ranges/autoRangesDetection.ts
index 197584bed..65db811d0 100644
--- a/src/data/data1d/Spectrum1D/ranges/autoRangesDetection.ts
+++ b/src/data/data1d/Spectrum1D/ranges/autoRangesDetection.ts
@@ -1,5 +1,6 @@
-import { Spectrum1D } from 'nmr-load-save';
-import { Range, xyAutoRangesPicking } from 'nmr-processing';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { Range } from 'nmr-processing';
+import { xyAutoRangesPicking } from 'nmr-processing';
 
 const defaultPeakPickingOptions = {
   minMaxRatio: 1,
diff --git a/src/data/data1d/Spectrum1D/ranges/changeRangeRelativeValue.ts b/src/data/data1d/Spectrum1D/ranges/changeRangeRelativeValue.ts
index a2e6c7100..6b908f3d2 100644
--- a/src/data/data1d/Spectrum1D/ranges/changeRangeRelativeValue.ts
+++ b/src/data/data1d/Spectrum1D/ranges/changeRangeRelativeValue.ts
@@ -1,5 +1,5 @@
-import { Spectrum1D } from 'nmr-load-save';
-import { Range } from 'nmr-processing';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { Range } from 'nmr-processing';
 
 export interface ChangeRangeRelativeValueProps {
   id: string; // id of the selected range
diff --git a/src/data/data1d/Spectrum1D/ranges/changeRangeSignal.ts b/src/data/data1d/Spectrum1D/ranges/changeRangeSignal.ts
index d8c8b7b1f..e7702f39b 100644
--- a/src/data/data1d/Spectrum1D/ranges/changeRangeSignal.ts
+++ b/src/data/data1d/Spectrum1D/ranges/changeRangeSignal.ts
@@ -1,4 +1,4 @@
-import { Spectrum1D } from 'nmr-load-save';
+import type { Spectrum1D } from 'nmr-load-save';
 
 interface RangeSignalOption {
   rangeID: string;
diff --git a/src/data/data1d/Spectrum1D/ranges/checkRangeKind.ts b/src/data/data1d/Spectrum1D/ranges/checkRangeKind.ts
index c1762caef..4a4d6b2df 100644
--- a/src/data/data1d/Spectrum1D/ranges/checkRangeKind.ts
+++ b/src/data/data1d/Spectrum1D/ranges/checkRangeKind.ts
@@ -1,7 +1,7 @@
-import { Range } from 'nmr-processing';
+import type { Range } from 'nmr-processing';
 
-import { SIGNAL_INCLUDED_KINDS } from '../../../constants/signalsKinds';
-import { checkSignalKinds } from '../../../utilities/RangeUtilities';
+import { SIGNAL_INCLUDED_KINDS } from '../../../constants/signalsKinds.js';
+import { checkSignalKinds } from '../../../utilities/RangeUtilities.js';
 
 export function checkRangeKind(range: Range): boolean {
   return range.signals && checkSignalKinds(range, SIGNAL_INCLUDED_KINDS);
diff --git a/src/data/data1d/Spectrum1D/ranges/createRange.ts b/src/data/data1d/Spectrum1D/ranges/createRange.ts
index a2cb6691d..4116f5e9c 100644
--- a/src/data/data1d/Spectrum1D/ranges/createRange.ts
+++ b/src/data/data1d/Spectrum1D/ranges/createRange.ts
@@ -1,9 +1,10 @@
-import { Logger } from 'cheminfo-types';
+import type { Logger } from 'cheminfo-types';
 import { xyIntegration } from 'ml-spectra-processing';
-import { Spectrum1D } from 'nmr-load-save';
-import { Range, Signal1D, mapRanges } from 'nmr-processing';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { Range, Signal1D } from 'nmr-processing';
+import { mapRanges } from 'nmr-processing';
 
-import detectSignals from './detectSignals';
+import detectSignals from './detectSignals.js';
 
 export function cutRange(spectrum: Spectrum1D, x: number) {
   const cutRanges: Record<string, Range[]> = {};
diff --git a/src/data/data1d/Spectrum1D/ranges/detectRange.ts b/src/data/data1d/Spectrum1D/ranges/detectRange.ts
index 8292aaa2b..41ee8bedc 100644
--- a/src/data/data1d/Spectrum1D/ranges/detectRange.ts
+++ b/src/data/data1d/Spectrum1D/ranges/detectRange.ts
@@ -1,9 +1,9 @@
 import { v4 } from '@lukeed/uuid';
 import { xyIntegration, xyMaxYPoint, xyMinYPoint } from 'ml-spectra-processing';
-import { Spectrum1D } from 'nmr-load-save';
+import type { Spectrum1D } from 'nmr-load-save';
 import { getShiftX } from 'nmr-processing';
 
-import { RangeDetectionResult } from '../../../types/data1d';
+import type { RangeDetectionResult } from '../../../types/data1d/index.js';
 
 interface DetectRangeOptions {
   from: number;
diff --git a/src/data/data1d/Spectrum1D/ranges/detectRanges.ts b/src/data/data1d/Spectrum1D/ranges/detectRanges.ts
index dd5817e95..8eeb41f7f 100644
--- a/src/data/data1d/Spectrum1D/ranges/detectRanges.ts
+++ b/src/data/data1d/Spectrum1D/ranges/detectRanges.ts
@@ -1,9 +1,10 @@
-import { Spectrum1D } from 'nmr-load-save';
-import { updateRangesRelativeValues, mapRanges } from 'nmr-processing';
+import type { Spectrum1D } from 'nmr-load-save';
+import { mapRanges, updateRangesRelativeValues } from 'nmr-processing';
 
-import { initSumOptions, SumParams } from '../SumManager';
+import type { SumParams } from '../SumManager.js';
+import { initSumOptions } from '../SumManager.js';
 
-import autoRangesDetection from './autoRangesDetection';
+import autoRangesDetection from './autoRangesDetection.js';
 
 interface DetectRangesOptions {
   windowFromIndex?: number;
diff --git a/src/data/data1d/Spectrum1D/ranges/detectSignals.ts b/src/data/data1d/Spectrum1D/ranges/detectSignals.ts
index 49e6533cf..dbbbbd729 100644
--- a/src/data/data1d/Spectrum1D/ranges/detectSignals.ts
+++ b/src/data/data1d/Spectrum1D/ranges/detectSignals.ts
@@ -1,8 +1,8 @@
-import { DataXY, Logger } from 'cheminfo-types';
+import type { DataXY, Logger } from 'cheminfo-types';
 import { xGetFromToIndex } from 'ml-spectra-processing';
 import { xyAutoRangesPicking } from 'nmr-processing';
 
-import { detectSignalsByMultipletAnalysis } from './detectSignalsByMultipletAnalysis';
+import { detectSignalsByMultipletAnalysis } from './detectSignalsByMultipletAnalysis.js';
 
 const MAX_LENGTH = 4092;
 export default function detectSignals(
diff --git a/src/data/data1d/Spectrum1D/ranges/detectSignalsByMultipletAnalysis.ts b/src/data/data1d/Spectrum1D/ranges/detectSignalsByMultipletAnalysis.ts
index ac34337af..55bbd2bed 100644
--- a/src/data/data1d/Spectrum1D/ranges/detectSignalsByMultipletAnalysis.ts
+++ b/src/data/data1d/Spectrum1D/ranges/detectSignalsByMultipletAnalysis.ts
@@ -1,12 +1,9 @@
-import { DataXY } from 'cheminfo-types';
+import type { DataXY } from 'cheminfo-types';
 import { optimizePeaksWithLogs } from 'ml-gsd';
 import { xMaxValue } from 'ml-spectra-processing';
 import { analyseMultiplet } from 'multiplet-analysis';
-import {
-  NMRPeak1DWithShapeID,
-  signalJoinCouplings,
-  xyAutoPeaksPicking,
-} from 'nmr-processing';
+import type { NMRPeak1DWithShapeID } from 'nmr-processing';
+import { signalJoinCouplings, xyAutoPeaksPicking } from 'nmr-processing';
 
 export function detectSignalsByMultipletAnalysis(
   data: DataXY<Float64Array>,
diff --git a/src/data/data1d/Spectrum1D/ranges/initiateRanges.ts b/src/data/data1d/Spectrum1D/ranges/initiateRanges.ts
index e31d084c1..7a329c65b 100644
--- a/src/data/data1d/Spectrum1D/ranges/initiateRanges.ts
+++ b/src/data/data1d/Spectrum1D/ranges/initiateRanges.ts
@@ -1,6 +1,7 @@
-import merge from 'lodash/merge';
-import { Spectrum1D } from 'nmr-load-save';
-import { Ranges, mapRanges } from 'nmr-processing';
+import merge from 'lodash/merge.js';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { Ranges } from 'nmr-processing';
+import { mapRanges } from 'nmr-processing';
 
 export function initiateRanges(
   inputSpectrum: Partial<Spectrum1D>,
diff --git a/src/data/data1d/Spectrum1D/ranges/resizeRange.ts b/src/data/data1d/Spectrum1D/ranges/resizeRange.ts
index c0e22961b..05ce9458a 100644
--- a/src/data/data1d/Spectrum1D/ranges/resizeRange.ts
+++ b/src/data/data1d/Spectrum1D/ranges/resizeRange.ts
@@ -1,9 +1,10 @@
-import { Logger } from 'cheminfo-types';
+import type { Logger } from 'cheminfo-types';
 import { xyIntegration } from 'ml-spectra-processing';
-import { Spectrum1D } from 'nmr-load-save';
-import { Range, Signal1D, mapRanges } from 'nmr-processing';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { Range, Signal1D } from 'nmr-processing';
+import { mapRanges } from 'nmr-processing';
 
-import detectSignals from './detectSignals';
+import detectSignals from './detectSignals.js';
 
 export function resizeRange(
   spectrum: Spectrum1D,
diff --git a/src/data/data1d/Spectrum1D/ranges/resurrectSpectrum.ts b/src/data/data1d/Spectrum1D/ranges/resurrectSpectrum.ts
index 2e1422a70..c3330759d 100644
--- a/src/data/data1d/Spectrum1D/ranges/resurrectSpectrum.ts
+++ b/src/data/data1d/Spectrum1D/ranges/resurrectSpectrum.ts
@@ -1,14 +1,9 @@
-import { Spectrum1D } from 'nmr-load-save';
-import {
-  Info1D,
-  NMRRange,
-  NMRSignal1D,
-  rangesToXY,
-  signalsToXY,
-} from 'nmr-processing';
+import type { Spectrum1D } from 'nmr-load-save';
+import type { Info1D, NMRRange, NMRSignal1D } from 'nmr-processing';
+import { rangesToXY, signalsToXY } from 'nmr-processing';
 
-import { UsedColors } from '../../../../types/UsedColors';
-import { initiateDatum1D } from '../initiateDatum1D';
+import type { UsedColors } from '../../../../types/UsedColors.js';
+import { initiateDatum1D } from '../initiateDatum1D.js';
 
 interface ResurrectSpectrumOptions {
   info: Partial<Info1D>;
diff --git a/src/data/data1d/__tests__/Datum1D.test.ts b/src/data/data1d/__tests__/Datum1D.test.ts
index 244604731..dee170d50 100644
--- a/src/data/data1d/__tests__/Datum1D.test.ts
+++ b/src/data/data1d/__tests__/Datum1D.test.ts
@@ -1,9 +1,9 @@
 import { readFileSync } from 'node:fs';
 import path from 'node:path';
 
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
-import { addJcamp } from '../../SpectraManager';
+import { addJcamp } from '../../SpectraManager.js';
 
 describe('test Datum1D', () => {
   const jcamp = readFileSync(
diff --git a/src/data/data1d/__tests__/autoPeakPicking.test.ts b/src/data/data1d/__tests__/autoPeakPicking.test.ts
index 835aa2bdd..f7e40d7ec 100644
--- a/src/data/data1d/__tests__/autoPeakPicking.test.ts
+++ b/src/data/data1d/__tests__/autoPeakPicking.test.ts
@@ -1,9 +1,9 @@
 import { readFileSync } from 'node:fs';
 import path from 'node:path';
 
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
-import { autoPeakPicking, initiateDatum1D } from '../Spectrum1D';
+import { autoPeakPicking, initiateDatum1D } from '../Spectrum1D/index.js';
 
 describe('test peakPicking', () => {
   const data = JSON.parse(
diff --git a/src/data/data1d/database.ts b/src/data/data1d/database.ts
index 14ac6770a..2a6838d1d 100644
--- a/src/data/data1d/database.ts
+++ b/src/data/data1d/database.ts
@@ -1,10 +1,6 @@
 import { v4 } from '@lukeed/uuid';
-import {
-  protonImpurities,
-  carbonImpurities,
-  Jcoupling,
-  DatabaseNMREntry,
-} from 'nmr-processing';
+import type { DatabaseNMREntry, Jcoupling } from 'nmr-processing';
+import { carbonImpurities, protonImpurities } from 'nmr-processing';
 import OCL from 'openchemlib/full';
 import { MoleculesDB } from 'openchemlib-utils';
 import { filter } from 'smart-array-filter';
diff --git a/src/data/data1d/multipleSpectraAnalysis.ts b/src/data/data1d/multipleSpectraAnalysis.ts
index 1aaa8f1b6..f1f401bd6 100644
--- a/src/data/data1d/multipleSpectraAnalysis.ts
+++ b/src/data/data1d/multipleSpectraAnalysis.ts
@@ -1,23 +1,22 @@
-import lodashGet from 'lodash/get';
-import {
-  Spectrum,
-  Spectrum1D,
+import lodashGet from 'lodash/get.js';
+import type {
+  AnalysisOptions,
   JpathTableColumn,
   MultipleSpectraAnalysisPreferences,
   PanelsPreferences,
-  WorkSpacePanelPreferences,
-  AnalysisOptions,
-  AnalysisColumnsTypes,
-  SpectraAnalysisColumns,
   SpectraAnalysisColumn,
-  AnalysisColumnsValuesKeys,
+  SpectraAnalysisColumns,
+  Spectrum,
+  Spectrum1D,
+  WorkSpacePanelPreferences,
 } from 'nmr-load-save';
+import { AnalysisColumnsTypes, AnalysisColumnsValuesKeys } from 'nmr-load-save';
 
-import { RangeDetectionResult } from '../types/data1d/index';
-import { convertSpectraArrayToObject } from '../utilities/convertSpectraListToObject';
-import generateChar from '../utilities/generateChar';
+import type { RangeDetectionResult } from '../types/data1d/index.js';
+import { convertSpectraArrayToObject } from '../utilities/convertSpectraListToObject.js';
+import generateChar from '../utilities/generateChar.js';
 
-import { detectRange, isSpectrum1D } from './Spectrum1D/index';
+import { detectRange, isSpectrum1D } from './Spectrum1D/index.js';
 
 export type ColumnType = keyof typeof AnalysisColumnsTypes;
 
diff --git a/src/data/data2d/Spectrum2D/contours.ts b/src/data/data2d/Spectrum2D/contours.ts
index bbace7912..75a409f74 100644
--- a/src/data/data2d/Spectrum2D/contours.ts
+++ b/src/data/data2d/Spectrum2D/contours.ts
@@ -1,9 +1,9 @@
-import { NmrData2DFt } from 'cheminfo-types';
+import type { NmrData2DFt } from 'cheminfo-types';
 import { Conrec } from 'ml-conrec';
 import { xMaxAbsoluteValue } from 'ml-spectra-processing';
-import { Spectrum2D } from 'nmr-load-save';
+import type { Spectrum2D } from 'nmr-load-save';
 
-import { calculateSanPlot } from '../../utilities/calculateSanPlot';
+import { calculateSanPlot } from '../../utilities/calculateSanPlot.js';
 
 interface Level {
   positive: ContourItem;
diff --git a/src/data/data2d/Spectrum2D/get2DColor.ts b/src/data/data2d/Spectrum2D/get2DColor.ts
index e1e98ce1e..fae770365 100644
--- a/src/data/data2d/Spectrum2D/get2DColor.ts
+++ b/src/data/data2d/Spectrum2D/get2DColor.ts
@@ -1,8 +1,8 @@
-import { Color2D, SpectrumTwoDimensionsColor } from 'nmr-load-save';
+import type { Color2D, SpectrumTwoDimensionsColor } from 'nmr-load-save';
 
-import { UsedColors } from '../../../types/UsedColors';
-import { adjustAlpha, generateColor } from '../../utilities/generateColor';
-import { getCustomColor } from '../../utilities/getCustomColor';
+import type { UsedColors } from '../../../types/UsedColors.js';
+import { adjustAlpha, generateColor } from '../../utilities/generateColor.js';
+import { getCustomColor } from '../../utilities/getCustomColor.js';
 
 interface BaseColorOptions {
   usedColors?: UsedColors;
diff --git a/src/data/data2d/Spectrum2D/get2DSpectrumErrorValue.ts b/src/data/data2d/Spectrum2D/get2DSpectrumErrorValue.ts
index f60cadfed..c7395ae73 100644
--- a/src/data/data2d/Spectrum2D/get2DSpectrumErrorValue.ts
+++ b/src/data/data2d/Spectrum2D/get2DSpectrumErrorValue.ts
@@ -1,5 +1,5 @@
-import { NmrData2DFt, NmrData2DFid } from 'cheminfo-types';
-import { Spectrum2D } from 'nmr-load-save';
+import type { NmrData2DFid, NmrData2DFt } from 'cheminfo-types';
+import type { Spectrum2D } from 'nmr-load-save';
 
 export interface Zone2DError {
   x: number;
diff --git a/src/data/data2d/Spectrum2D/getMissingProjection.ts b/src/data/data2d/Spectrum2D/getMissingProjection.ts
index 9c5383446..43a74d971 100644
--- a/src/data/data2d/Spectrum2D/getMissingProjection.ts
+++ b/src/data/data2d/Spectrum2D/getMissingProjection.ts
@@ -1,9 +1,9 @@
-import { NmrData2DFt } from 'cheminfo-types';
+import type { NmrData2DFt } from 'cheminfo-types';
 import { xSequentialFillFromTo } from 'ml-spectra-processing';
-import { Info1D, Info2D } from 'nmr-processing';
+import type { Info1D, Info2D } from 'nmr-processing';
 
-import { UsedColors } from '../../../types/UsedColors';
-import { initiateDatum1D } from '../../data1d/Spectrum1D';
+import type { UsedColors } from '../../../types/UsedColors.js';
+import { initiateDatum1D } from '../../data1d/Spectrum1D/index.js';
 
 /**
  * calculate the missing projection
diff --git a/src/data/data2d/Spectrum2D/getShift.ts b/src/data/data2d/Spectrum2D/getShift.ts
index e9245e7f2..b3bfe1fb1 100644
--- a/src/data/data2d/Spectrum2D/getShift.ts
+++ b/src/data/data2d/Spectrum2D/getShift.ts
@@ -1,4 +1,4 @@
-import { Spectrum2D } from 'nmr-load-save';
+import type { Spectrum2D } from 'nmr-load-save';
 import { Filters } from 'nmr-processing';
 
 export interface Shift2D {
diff --git a/src/data/data2d/Spectrum2D/getSlice.ts b/src/data/data2d/Spectrum2D/getSlice.ts
index ed4c8e20a..90899344d 100644
--- a/src/data/data2d/Spectrum2D/getSlice.ts
+++ b/src/data/data2d/Spectrum2D/getSlice.ts
@@ -6,10 +6,10 @@ import type {
 } from 'cheminfo-types';
 import { xSequentialFillFromTo } from 'ml-spectra-processing';
 import type { Spectrum1D, Spectrum2D } from 'nmr-load-save';
-import { Info2D } from 'nmr-processing';
+import type { Info2D } from 'nmr-processing';
 
-import { TraceDirection } from '../../../component/reducer/Reducer';
-import { initiateDatum1D } from '../../data1d/Spectrum1D';
+import type { TraceDirection } from '../../../component/reducer/Reducer.js';
+import { initiateDatum1D } from '../../data1d/Spectrum1D/index.js';
 
 /** get 2d projection
  * @param {number} x in ppm
diff --git a/src/data/data2d/Spectrum2D/index.ts b/src/data/data2d/Spectrum2D/index.ts
index 6d4021952..eac41dcba 100644
--- a/src/data/data2d/Spectrum2D/index.ts
+++ b/src/data/data2d/Spectrum2D/index.ts
@@ -1,9 +1,9 @@
-export { getMissingProjection } from './getMissingProjection';
-export { getSlice } from './getSlice';
-export { initiateDatum2D } from './initiateDatum2D';
-export { isSpectrum2D } from './isSpectrum2D';
-export { getShift } from './getShift';
-export { changeZoneSignal } from './zones/changeZoneSignal';
-export { detectZones } from './zones/detectZones';
-export { detectZonesManual } from './zones/detectZonesManual';
-export { get2DColor } from './get2DColor';
+export { getMissingProjection } from './getMissingProjection.js';
+export { getSlice } from './getSlice.js';
+export { initiateDatum2D } from './initiateDatum2D.js';
+export { isSpectrum2D } from './isSpectrum2D.js';
+export { getShift } from './getShift.js';
+export { changeZoneSignal } from './zones/changeZoneSignal.js';
+export { detectZones } from './zones/detectZones.js';
+export { detectZonesManual } from './zones/detectZonesManual.js';
+export { get2DColor } from './get2DColor.js';
diff --git a/src/data/data2d/Spectrum2D/initiateDatum2D.ts b/src/data/data2d/Spectrum2D/initiateDatum2D.ts
index f69165bc9..47bd9dc20 100644
--- a/src/data/data2d/Spectrum2D/initiateDatum2D.ts
+++ b/src/data/data2d/Spectrum2D/initiateDatum2D.ts
@@ -1,13 +1,16 @@
 import { v4 } from '@lukeed/uuid';
-import { Spectrum2D, SpectrumTwoDimensionsColor } from 'nmr-load-save';
+import type { Spectrum2D, SpectrumTwoDimensionsColor } from 'nmr-load-save';
 import { FiltersManager } from 'nmr-processing';
 
-import { UsedColors } from '../../../types/UsedColors';
-import { initiateFilters } from '../../initiateFilters';
+import type { UsedColors } from '../../../types/UsedColors.js';
+import { initiateFilters } from '../../initiateFilters.js';
 
-import { DEFAULT_CONTOURS_OPTIONS, getDefaultContoursLevel } from './contours';
-import { get2DColor } from './get2DColor';
-import { initiateZones } from './zones/initiateZones';
+import {
+  DEFAULT_CONTOURS_OPTIONS,
+  getDefaultContoursLevel,
+} from './contours.js';
+import { get2DColor } from './get2DColor.js';
+import { initiateZones } from './zones/initiateZones.js';
 
 const defaultMinMax = { z: [], minX: 0, minY: 0, maxX: 0, maxY: 0 };
 
diff --git a/src/data/data2d/Spectrum2D/isSpectrum2D.ts b/src/data/data2d/Spectrum2D/isSpectrum2D.ts
index 3d0e5c288..6f95d12d0 100644
--- a/src/data/data2d/Spectrum2D/isSpectrum2D.ts
+++ b/src/data/data2d/Spectrum2D/isSpectrum2D.ts
@@ -1,4 +1,4 @@
-import { Spectrum, Spectrum2D } from 'nmr-load-save';
+import type { Spectrum, Spectrum2D } from 'nmr-load-save';
 
 export function isSpectrum2D(spectrum: Spectrum): spectrum is Spectrum2D {
   return spectrum.info.dimension === 2;
diff --git a/src/data/data2d/Spectrum2D/zones/changeZoneSignal.ts b/src/data/data2d/Spectrum2D/zones/changeZoneSignal.ts
index dc2cee8f9..8e1c5cf35 100644
--- a/src/data/data2d/Spectrum2D/zones/changeZoneSignal.ts
+++ b/src/data/data2d/Spectrum2D/zones/changeZoneSignal.ts
@@ -1,6 +1,6 @@
-import { Spectrum2D } from 'nmr-load-save';
+import type { Spectrum2D } from 'nmr-load-save';
 
-import { isNumber } from '../../../utilities/isNumber';
+import { isNumber } from '../../../utilities/isNumber.js';
 
 /**
  *
diff --git a/src/data/data2d/Spectrum2D/zones/detectZones.ts b/src/data/data2d/Spectrum2D/zones/detectZones.ts
index 2c35a459b..3463de76f 100644
--- a/src/data/data2d/Spectrum2D/zones/detectZones.ts
+++ b/src/data/data2d/Spectrum2D/zones/detectZones.ts
@@ -1,6 +1,8 @@
-import { Zone, mapZones } from 'nmr-processing';
+import type { Zone } from 'nmr-processing';
+import { mapZones } from 'nmr-processing';
 
-import { DetectionZonesOptions, getDetectionZones } from './getDetectionZones';
+import type { DetectionZonesOptions } from './getDetectionZones.js';
+import { getDetectionZones } from './getDetectionZones.js';
 
 export function detectZones(datum, options: DetectionZonesOptions): Zone[] {
   const zones = getDetectionZones(datum, options);
diff --git a/src/data/data2d/Spectrum2D/zones/detectZonesManual.ts b/src/data/data2d/Spectrum2D/zones/detectZonesManual.ts
index a9ef37786..a84ed0c0d 100644
--- a/src/data/data2d/Spectrum2D/zones/detectZonesManual.ts
+++ b/src/data/data2d/Spectrum2D/zones/detectZonesManual.ts
@@ -1,9 +1,12 @@
-import { Zone, mapZones } from 'nmr-processing';
+import { mapZones } from 'nmr-processing';
+import type { Zone } from 'nmr-processing';
 
-import { DetectionZonesOptions, getDetectionZones } from './getDetectionZones';
+import { getDetectionZones } from './getDetectionZones.js';
+import type { DetectionZonesOptions } from './getDetectionZones.js';
 
 /**
  *
+ * @param datum
  * @param {object} options
  * @param {object} options.selectedZone
  * @param {number} options.selectedZone.fromX
diff --git a/src/data/data2d/Spectrum2D/zones/getDetectionZones.ts b/src/data/data2d/Spectrum2D/zones/getDetectionZones.ts
index d1da940c4..12c951f4e 100644
--- a/src/data/data2d/Spectrum2D/zones/getDetectionZones.ts
+++ b/src/data/data2d/Spectrum2D/zones/getDetectionZones.ts
@@ -1,4 +1,4 @@
-import { Spectrum2D } from 'nmr-load-save';
+import type { Spectrum2D } from 'nmr-load-save';
 import { xyzAutoZonesPicking } from 'nmr-processing';
 
 export interface DetectionZonesOptions {
diff --git a/src/data/data2d/Spectrum2D/zones/initiateZones.ts b/src/data/data2d/Spectrum2D/zones/initiateZones.ts
index 85652bbba..61329394d 100644
--- a/src/data/data2d/Spectrum2D/zones/initiateZones.ts
+++ b/src/data/data2d/Spectrum2D/zones/initiateZones.ts
@@ -1,6 +1,7 @@
-import merge from 'lodash/merge';
-import { Spectrum2D } from 'nmr-load-save';
-import { Zones, mapZones } from 'nmr-processing';
+import merge from 'lodash/merge.js';
+import type { Spectrum2D } from 'nmr-load-save';
+import type { Zones } from 'nmr-processing';
+import { mapZones } from 'nmr-processing';
 
 export function initiateZones(
   options: Partial<{ zones: Zones }>,
diff --git a/src/data/data2d/Spectrum2D/zones/isZoneExists.ts b/src/data/data2d/Spectrum2D/zones/isZoneExists.ts
index e7e4df83d..7cfdcf678 100644
--- a/src/data/data2d/Spectrum2D/zones/isZoneExists.ts
+++ b/src/data/data2d/Spectrum2D/zones/isZoneExists.ts
@@ -1,7 +1,7 @@
-import { Spectrum2D } from 'nmr-load-save';
-import { Zone } from 'nmr-processing';
+import type { Spectrum2D } from 'nmr-load-save';
+import type { Zone } from 'nmr-processing';
 
-import { Zone2DError } from '../get2DSpectrumErrorValue';
+import type { Zone2DError } from '../get2DSpectrumErrorValue.js';
 
 export function isZoneExists(
   zone: Zone,
diff --git a/src/data/data2d/Spectrum2D/zones/updateZones.ts b/src/data/data2d/Spectrum2D/zones/updateZones.ts
index df00dd771..0a31725db 100644
--- a/src/data/data2d/Spectrum2D/zones/updateZones.ts
+++ b/src/data/data2d/Spectrum2D/zones/updateZones.ts
@@ -1,4 +1,4 @@
-import { Spectrum2D } from 'nmr-load-save';
+import type { Spectrum2D } from 'nmr-load-save';
 import { mapZones } from 'nmr-processing';
 
 export function updateZones(spectrum: Spectrum2D) {
diff --git a/src/data/data2d/__tests__/Datum2D.test.ts b/src/data/data2d/__tests__/Datum2D.test.ts
index 5e2e5306d..9a0f499c2 100644
--- a/src/data/data2d/__tests__/Datum2D.test.ts
+++ b/src/data/data2d/__tests__/Datum2D.test.ts
@@ -1,10 +1,10 @@
 import { readFileSync } from 'node:fs';
 import path from 'node:path';
 
-import { test, expect } from 'vitest';
+import { expect, test } from 'vitest';
 
-import { addJcamp } from '../../SpectraManager';
-import { drawContours } from '../Spectrum2D/contours';
+import { addJcamp } from '../../SpectraManager.js';
+import { drawContours } from '../Spectrum2D/contours.js';
 
 test('Datum2D', () => {
   const jcamp = readFileSync(path.join(__dirname, './data/cosy.jdx'), 'utf8');
diff --git a/src/data/defaults/default.ts b/src/data/defaults/default.ts
index dc0509a5a..15dbadf53 100644
--- a/src/data/defaults/default.ts
+++ b/src/data/defaults/default.ts
@@ -1,5 +1,5 @@
-import c13 from './13c';
-import h1 from './1h';
+import c13 from './13c.js';
+import h1 from './1h.js';
 
 const defaults = {
   '1h': h1,
diff --git a/src/data/getDefaultMatrixFilters.ts b/src/data/getDefaultMatrixFilters.ts
index 5653975c7..83ab20c3c 100644
--- a/src/data/getDefaultMatrixFilters.ts
+++ b/src/data/getDefaultMatrixFilters.ts
@@ -1,5 +1,5 @@
 import type { FilterXYType } from 'ml-signal-processing';
-import filterXY from 'ml-signal-processing/FilterXYSchema.json';
+import filterXY from 'ml-signal-processing/FilterXYSchema.js';
 
 interface FilterOptionsInfo {
   defaultValue: string | number;
diff --git a/src/data/initiateFilters.ts b/src/data/initiateFilters.ts
index fcd6a6dc5..13ef0484c 100644
--- a/src/data/initiateFilters.ts
+++ b/src/data/initiateFilters.ts
@@ -1,5 +1,5 @@
 import { v4 } from '@lukeed/uuid';
-import { Filter } from 'nmr-processing';
+import type { Filter } from 'nmr-processing';
 
 export function initiateFilters(inputFilters: Filter[] | undefined) {
   if (!inputFilters || !Array.isArray(inputFilters)) return [];
diff --git a/src/data/matrixGeneration.ts b/src/data/matrixGeneration.ts
index fb1b1a1cd..cd786eb9a 100644
--- a/src/data/matrixGeneration.ts
+++ b/src/data/matrixGeneration.ts
@@ -1,6 +1,6 @@
-import lodashSet from 'lodash/set';
+import lodashSet from 'lodash/set.js';
 import type { FilterXYType } from 'ml-signal-processing';
-import filterXY from 'ml-signal-processing/FilterXYSchema.json';
+import filterXY from 'ml-signal-processing/FilterXYSchema.js';
 
 interface BaseField {
   key: string;
diff --git a/src/data/molecules/Molecule.ts b/src/data/molecules/Molecule.ts
index 87ab09c80..edd351c91 100644
--- a/src/data/molecules/Molecule.ts
+++ b/src/data/molecules/Molecule.ts
@@ -1,7 +1,7 @@
 import { v4 } from '@lukeed/uuid';
 import { Molecule as OCLMolecule } from 'openchemlib/full';
 
-import getAtomsFromMF from '../utilities/getAtomsFromMF';
+import getAtomsFromMF from '../utilities/getAtomsFromMF.js';
 
 export interface StateMolecule {
   id?: string;
diff --git a/src/data/molecules/MoleculeManager.ts b/src/data/molecules/MoleculeManager.ts
index 5ca20d04c..b50628d66 100644
--- a/src/data/molecules/MoleculeManager.ts
+++ b/src/data/molecules/MoleculeManager.ts
@@ -1,7 +1,8 @@
 import { readSDF, readSMILES } from 'nmr-load-save';
 import { Molecule as OCLMolecule } from 'openchemlib/full';
 
-import { initMolecule, StateMolecule, StateMoleculeExtended } from './Molecule';
+import type { StateMolecule, StateMoleculeExtended } from './Molecule.js';
+import { initMolecule } from './Molecule.js';
 
 export function fromJSON(
   mols: StateMolecule[],
diff --git a/src/data/parseMeta/index.ts b/src/data/parseMeta/index.ts
index 218022599..4f6ec42cd 100644
--- a/src/data/parseMeta/index.ts
+++ b/src/data/parseMeta/index.ts
@@ -1,11 +1,14 @@
-export { isMetaFile } from './isMetaFile';
-export { mapErrors } from './mapErrors';
-export { parseMetaFile } from './parseMetaFile';
+export { isMetaFile } from './isMetaFile.js';
+export { mapErrors } from './mapErrors.js';
+export { parseMetaFile } from './parseMetaFile.js';
 export {
   linkMetaWithSpectra,
   AutomaticPathsMatchesError,
   TargetPathError,
   SourcePathError,
-} from './linkMetaWithSpectra';
+} from './linkMetaWithSpectra.js';
 
-export type { CompareResultItem, CompareResult } from './linkMetaWithSpectra';
+export type {
+  CompareResultItem,
+  CompareResult,
+} from './linkMetaWithSpectra.js';
diff --git a/src/data/parseMeta/isMetaFile.ts b/src/data/parseMeta/isMetaFile.ts
index c8e0f00a6..54d40150c 100644
--- a/src/data/parseMeta/isMetaFile.ts
+++ b/src/data/parseMeta/isMetaFile.ts
@@ -1,4 +1,4 @@
-import { FileCollectionItem } from 'filelist-utils';
+import type { FileCollectionItem } from 'filelist-utils';
 
 export function isMetaFile(file: File | FileCollectionItem) {
   if (file instanceof File) {
diff --git a/src/data/parseMeta/linkMetaWithSpectra.ts b/src/data/parseMeta/linkMetaWithSpectra.ts
index 612b9a2f6..b6f958edd 100644
--- a/src/data/parseMeta/linkMetaWithSpectra.ts
+++ b/src/data/parseMeta/linkMetaWithSpectra.ts
@@ -1,8 +1,8 @@
-import lodashGet from 'lodash/get';
-import { Spectrum } from 'nmr-load-save';
-import { ParseResult } from 'papaparse';
+import lodashGet from 'lodash/get.js';
+import type { Spectrum } from 'nmr-load-save';
+import type { ParseResult } from 'papaparse';
 
-import { prepareKey } from './prepareKey';
+import { prepareKey } from './prepareKey.js';
 
 interface CompareResultItem {
   key: string;
diff --git a/src/data/parseMeta/mapErrors.ts b/src/data/parseMeta/mapErrors.ts
index e97ed3599..1c26d6149 100644
--- a/src/data/parseMeta/mapErrors.ts
+++ b/src/data/parseMeta/mapErrors.ts
@@ -1,4 +1,4 @@
-import { ParseError } from 'papaparse';
+import type { ParseError } from 'papaparse';
 
 export function mapErrors(errors: ParseError[]) {
   const result = {};
diff --git a/src/data/parseMeta/parseMetaFile.ts b/src/data/parseMeta/parseMetaFile.ts
index 6953478ae..c2c74dd0a 100644
--- a/src/data/parseMeta/parseMetaFile.ts
+++ b/src/data/parseMeta/parseMetaFile.ts
@@ -1,12 +1,13 @@
-import { FileCollectionItem } from 'filelist-utils';
-import { parse, ParseResult } from 'papaparse';
+import type { FileCollectionItem } from 'filelist-utils';
+import type { ParseResult } from 'papaparse';
+import papa from 'papaparse';
 
 export async function parseMetaFile(
   file: FileCollectionItem | File,
 ): Promise<ParseResult<any>> {
   const data = file instanceof File ? file : await file.text();
   return new Promise((complete, error) => {
-    parse(data, {
+    papa.parse(data, {
       header: true,
       dynamicTyping: true,
       complete,
diff --git a/src/data/types/data1d/ComplexData1D.ts b/src/data/types/data1d/ComplexData1D.ts
index 4368fca9e..6f799d919 100644
--- a/src/data/types/data1d/ComplexData1D.ts
+++ b/src/data/types/data1d/ComplexData1D.ts
@@ -1,4 +1,4 @@
-import { NmrData1D } from 'cheminfo-types';
+import type { NmrData1D } from 'cheminfo-types';
 
 export type ComplexData1D = Omit<NmrData1D, 'im'> &
   Required<Pick<NmrData1D, 'im'>>;
diff --git a/src/data/types/data1d/MatrixOptions.ts b/src/data/types/data1d/MatrixOptions.ts
index 1228dcc89..949d5da29 100644
--- a/src/data/types/data1d/MatrixOptions.ts
+++ b/src/data/types/data1d/MatrixOptions.ts
@@ -1,6 +1,6 @@
-import { MatrixFilter } from '../../matrixGeneration';
+import type { MatrixFilter } from '../../matrixGeneration.js';
 
-import { ExclusionZone } from './ExclusionZone';
+import type { ExclusionZone } from './ExclusionZone.js';
 
 export interface MatrixOptions {
   /**
diff --git a/src/data/types/data1d/RangeDetectionResult.ts b/src/data/types/data1d/RangeDetectionResult.ts
index c6db11a7e..3bdfc488f 100644
--- a/src/data/types/data1d/RangeDetectionResult.ts
+++ b/src/data/types/data1d/RangeDetectionResult.ts
@@ -1,4 +1,4 @@
-import { Range } from 'nmr-processing';
+import type { Range } from 'nmr-processing';
 
 export interface RangeDetectionResult
   extends Omit<Range, 'integration' | 'kind' | 'signals'> {
diff --git a/src/data/types/data1d/index.ts b/src/data/types/data1d/index.ts
index 8c5632f7f..55614fa33 100644
--- a/src/data/types/data1d/index.ts
+++ b/src/data/types/data1d/index.ts
@@ -1 +1 @@
-export { type RangeDetectionResult } from './RangeDetectionResult';
+export { type RangeDetectionResult } from './RangeDetectionResult.js';
diff --git a/src/data/types/data2d/index.ts b/src/data/types/data2d/index.ts
index 40cc7226a..ab368d9a4 100644
--- a/src/data/types/data2d/index.ts
+++ b/src/data/types/data2d/index.ts
@@ -1 +1 @@
-export { type ContourOptions } from './ContourOptions';
+export { type ContourOptions } from './ContourOptions.js';
diff --git a/src/data/utilities/FindUtilities.ts b/src/data/utilities/FindUtilities.ts
index 0d8ba8256..b5623d65e 100644
--- a/src/data/utilities/FindUtilities.ts
+++ b/src/data/utilities/FindUtilities.ts
@@ -1,5 +1,5 @@
-import { Spectrum, Spectrum1D, Spectrum2D } from 'nmr-load-save';
-import { Range, Signal1D, Signal2D, Zone } from 'nmr-processing';
+import type { Spectrum, Spectrum1D, Spectrum2D } from 'nmr-load-save';
+import type { Range, Signal1D, Signal2D, Zone } from 'nmr-processing';
 
 function findSpectrum(
   spectraData: Spectrum[],
diff --git a/src/data/utilities/RangeUtilities.ts b/src/data/utilities/RangeUtilities.ts
index 3796dad3a..118a8bcba 100644
--- a/src/data/utilities/RangeUtilities.ts
+++ b/src/data/utilities/RangeUtilities.ts
@@ -1,7 +1,7 @@
-import omit from 'lodash/omit';
-import { Range, Signal1D } from 'nmr-processing';
+import omit from 'lodash/omit.js';
+import type { Range, Signal1D } from 'nmr-processing';
 
-import { DATUM_KIND } from '../constants/signalsKinds';
+import { DATUM_KIND } from '../constants/signalsKinds.js';
 
 export function getDiaIDs(range: Range): string[] {
   return ([] as string[]).concat(
diff --git a/src/data/utilities/ZoneUtilities.ts b/src/data/utilities/ZoneUtilities.ts
index d34482cb5..dc4af68fc 100644
--- a/src/data/utilities/ZoneUtilities.ts
+++ b/src/data/utilities/ZoneUtilities.ts
@@ -1,6 +1,6 @@
-import { Zone } from 'nmr-processing';
+import type { Zone } from 'nmr-processing';
 
-import { DATUM_KIND } from '../constants/signalsKinds';
+import { DATUM_KIND } from '../constants/signalsKinds.js';
 
 export function getDiaIDs(zone: Zone, axis: string): string[] {
   return ([] as string[]).concat(
diff --git a/src/data/utilities/__tests__/getAtomsFromMF.test.ts b/src/data/utilities/__tests__/getAtomsFromMF.test.ts
index ac57ad0dc..bd4c44840 100644
--- a/src/data/utilities/__tests__/getAtomsFromMF.test.ts
+++ b/src/data/utilities/__tests__/getAtomsFromMF.test.ts
@@ -1,6 +1,6 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
-import getAtomsFromMF from '../getAtomsFromMF';
+import getAtomsFromMF from '../getAtomsFromMF.js';
 
 describe('getAtomsFromMF', () => {
   it('correct mf', () => {
diff --git a/src/data/utilities/calculateSanPlot.ts b/src/data/utilities/calculateSanPlot.ts
index 36d4ee136..c3548797f 100644
--- a/src/data/utilities/calculateSanPlot.ts
+++ b/src/data/utilities/calculateSanPlot.ts
@@ -1,4 +1,4 @@
-import { NmrData2DFt, NmrData1D } from 'cheminfo-types';
+import type { NmrData1D, NmrData2DFt } from 'cheminfo-types';
 import { xNoiseSanPlot } from 'ml-spectra-processing';
 
 export function calculateSanPlot<T extends '1D' | '2D'>(
diff --git a/src/data/utilities/checkModifierKeyActivated.ts b/src/data/utilities/checkModifierKeyActivated.ts
index 159fcd3e8..f39150ca5 100644
--- a/src/data/utilities/checkModifierKeyActivated.ts
+++ b/src/data/utilities/checkModifierKeyActivated.ts
@@ -1,4 +1,4 @@
-import { KeyboardEvent, ModifierKey, MouseEvent } from 'react';
+import type { KeyboardEvent, ModifierKey, MouseEvent } from 'react';
 
 const modifiersKeys: ModifierKey[] = [
   'Alt',
diff --git a/src/data/utilities/convertSpectraListToObject.ts b/src/data/utilities/convertSpectraListToObject.ts
index 26727e49b..84784311a 100644
--- a/src/data/utilities/convertSpectraListToObject.ts
+++ b/src/data/utilities/convertSpectraListToObject.ts
@@ -1,4 +1,4 @@
-import { Spectrum1D, Spectrum2D } from 'nmr-load-save';
+import type { Spectrum1D, Spectrum2D } from 'nmr-load-save';
 
 export function convertSpectraArrayToObject<T extends Spectrum1D | Spectrum2D>(
   spectra: T[],
diff --git a/src/data/utilities/getCustomColor.ts b/src/data/utilities/getCustomColor.ts
index b635ce44d..aeb2cd181 100644
--- a/src/data/utilities/getCustomColor.ts
+++ b/src/data/utilities/getCustomColor.ts
@@ -1,5 +1,5 @@
-import lodashGet from 'lodash/get';
-import {
+import lodashGet from 'lodash/get.js';
+import type {
   Color2D,
   Spectrum1D,
   Spectrum2D,
diff --git a/src/demo/Sidebar.tsx b/src/demo/Sidebar.tsx
index 7197fc45c..54ad39745 100644
--- a/src/demo/Sidebar.tsx
+++ b/src/demo/Sidebar.tsx
@@ -7,7 +7,7 @@ import { FaBars } from 'react-icons/fa';
 import { createSearchParams, useNavigate } from 'react-router-dom';
 import 'rc-menu/assets/index.css';
 
-import { buildMenu, getKey } from './utility/menu';
+import { buildMenu, getKey } from './utility/menu.js';
 
 const sidebarCss = css`
   background: #2ca8ff;
@@ -117,10 +117,10 @@ function Sidebar(props) {
         </button>
       </div>
       <div css={sidebarWrapperCss} style={{ display: subDisplay }}>
+        {/* @ts-expect-error menu typings are wrong */}
         <Menu
           onClick={(e) => {
             // TODO: use non-deprecated API of rc-menu
-            // @ts-expect-error This will be fixed by updating use of rc-menu
             const itemProps = e.item.props;
             navigate({
               pathname: `/SamplesDashboard/${Math.random()
diff --git a/src/demo/layouts/Admin.tsx b/src/demo/layouts/Admin.tsx
index 1d6bfb6fa..cb7a914cc 100644
--- a/src/demo/layouts/Admin.tsx
+++ b/src/demo/layouts/Admin.tsx
@@ -1,12 +1,13 @@
 /** @jsxImportSource @emotion/react */
 
 import { css } from '@emotion/react';
-import { Suspense, useMemo, useState, useCallback, ReactElement } from 'react';
-import { Routes, Route, useLocation } from 'react-router-dom';
+import type { ReactElement } from 'react';
+import { Suspense, useCallback, useMemo, useState } from 'react';
+import { Route, Routes, useLocation } from 'react-router-dom';
 
-import Sidebar from '../Sidebar';
-import { mapTreeToFlatArray, getKey } from '../utility/menu';
-import { possibleViews } from '../views';
+import Sidebar from '../Sidebar.js';
+import { getKey, mapTreeToFlatArray } from '../utility/menu.js';
+import { possibleViews } from '../views/index.js';
 
 const mainPanelCss = css`
   position: relative;
diff --git a/src/demo/layouts/Main.tsx b/src/demo/layouts/Main.tsx
index 1c35a2556..8fbb81e4a 100644
--- a/src/demo/layouts/Main.tsx
+++ b/src/demo/layouts/Main.tsx
@@ -1,9 +1,10 @@
-import { useEffect, useState, useCallback, CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import routes from '../samples.json';
 
-import AdminLayout from './Admin';
-import SingleDisplayerLayout from './SingleDisplayerLayout';
+import AdminLayout from './Admin.js';
+import SingleDisplayerLayout from './SingleDisplayerLayout.js';
 
 const styles: Record<
   | 'bodyContainer'
diff --git a/src/demo/layouts/SingleDisplayerLayout.tsx b/src/demo/layouts/SingleDisplayerLayout.tsx
index 18da7f034..4b8cee908 100644
--- a/src/demo/layouts/SingleDisplayerLayout.tsx
+++ b/src/demo/layouts/SingleDisplayerLayout.tsx
@@ -1,8 +1,8 @@
 import { Suspense } from 'react';
-import { Routes, Route } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 
-import { getKey } from '../utility/menu';
-import { possibleViews } from '../views';
+import { getKey } from '../utility/menu.js';
+import { possibleViews } from '../views/index.js';
 
 interface SingleDisplayerLayoutProps {
   path: any;
diff --git a/src/demo/test/TestHighlight.tsx b/src/demo/test/TestHighlight.tsx
index a11febf15..c4ba0c6a3 100644
--- a/src/demo/test/TestHighlight.tsx
+++ b/src/demo/test/TestHighlight.tsx
@@ -2,7 +2,10 @@
 
 import { css } from '@emotion/react';
 
-import { HighlightProvider, useHighlight } from '../../component/highlight';
+import {
+  HighlightProvider,
+  useHighlight,
+} from '../../component/highlight/index.js';
 
 const tableOne = [
   { id: 'A', highlight: [1, 2] },
diff --git a/src/demo/utility/menu.ts b/src/demo/utility/menu.ts
index 096f4c06a..0f6003be9 100644
--- a/src/demo/utility/menu.ts
+++ b/src/demo/utility/menu.ts
@@ -1,5 +1,5 @@
-import { SubMenu, MenuItem } from 'rc-menu';
-import { createElement, cloneElement } from 'react';
+import { MenuItem, SubMenu } from 'rc-menu';
+import { cloneElement, createElement } from 'react';
 
 function buildMenu(array: any[] = []) {
   const menu: any[] = [];
diff --git a/src/demo/views/AuoProcessingView.tsx b/src/demo/views/AuoProcessingView.tsx
index 098a2a29c..c654b3f8b 100644
--- a/src/demo/views/AuoProcessingView.tsx
+++ b/src/demo/views/AuoProcessingView.tsx
@@ -1,9 +1,10 @@
 import { fileCollectionFromWebSource } from 'filelist-utils';
 import { read } from 'nmr-load-save';
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
-import BaseView, { BaseViewProps } from './BaseView';
-import { Loading } from './Loading';
+import type { BaseViewProps } from './BaseView.js';
+import BaseView from './BaseView.js';
+import { Loading } from './Loading.js';
 
 export async function loadData(file) {
   const response = await fetch(file);
diff --git a/src/demo/views/BaseView.tsx b/src/demo/views/BaseView.tsx
index 7af9d2e18..69d4a8c18 100644
--- a/src/demo/views/BaseView.tsx
+++ b/src/demo/views/BaseView.tsx
@@ -1,9 +1,10 @@
-import { CustomWorkspaces } from 'nmr-load-save';
-import { useState, useCallback } from 'react';
+import type { CustomWorkspaces } from 'nmr-load-save';
+import { useCallback, useState } from 'react';
 import { ObjectInspector } from 'react-inspector';
 
-import { NMRium, NMRiumWorkspace } from '../../component/main';
-import { PageConfig } from '../layouts/Main';
+import type { NMRiumWorkspace } from '../../component/main/index.js';
+import { NMRium } from '../../component/main/index.js';
+import type { PageConfig } from '../layouts/Main.js';
 
 export async function loadData(file) {
   const response = await fetch(file);
diff --git a/src/demo/views/BenchtopNMRWorkspace.tsx b/src/demo/views/BenchtopNMRWorkspace.tsx
index 08e70387d..8b26b7fa7 100644
--- a/src/demo/views/BenchtopNMRWorkspace.tsx
+++ b/src/demo/views/BenchtopNMRWorkspace.tsx
@@ -1,6 +1,6 @@
-import { CustomWorkspaces } from 'nmr-load-save';
+import type { CustomWorkspaces } from 'nmr-load-save';
 
-import View from './View';
+import View from './View.js';
 
 const customWorkspaces: CustomWorkspaces = {
   benchtop: {
@@ -165,6 +165,7 @@ const customWorkspaces: CustomWorkspaces = {
     },
     infoBlock: {
       visible: false,
+      position: { x: 0, y: 0 },
       fields: [
         {
           label: 'Name',
@@ -262,6 +263,7 @@ const customWorkspaces: CustomWorkspaces = {
       },
     },
     spectraColors: {
+      highlightColor: '#ffd70080',
       oneDimension: [],
       twoDimensions: [
         {
@@ -302,7 +304,6 @@ const customWorkspaces: CustomWorkspaces = {
         },
       ],
     },
-    version: 2,
     label: 'Simple NMR analysis',
     visible: true,
   },
diff --git a/src/demo/views/CustomWorkspace.tsx b/src/demo/views/CustomWorkspace.tsx
index 511077ee2..188e4ba0e 100644
--- a/src/demo/views/CustomWorkspace.tsx
+++ b/src/demo/views/CustomWorkspace.tsx
@@ -1,6 +1,6 @@
-import { CustomWorkspaces } from 'nmr-load-save';
+import type { CustomWorkspaces } from 'nmr-load-save';
 
-import View from './View';
+import View from './View.js';
 
 const customWorkspaces: CustomWorkspaces = {
   metabo: {
@@ -93,6 +93,7 @@ const customWorkspaces: CustomWorkspaces = {
     },
     infoBlock: {
       visible: false,
+      position: { x: 0, y: 0 },
       fields: [
         { label: 'Name', jpath: ['info', 'name'], visible: true, format: '' },
         {
@@ -166,7 +167,6 @@ const customWorkspaces: CustomWorkspaces = {
       },
     },
     label: 'Metabolomics',
-    version: 1,
   },
 };
 
diff --git a/src/demo/views/Exam.tsx b/src/demo/views/Exam.tsx
index 11964f602..a82d16943 100644
--- a/src/demo/views/Exam.tsx
+++ b/src/demo/views/Exam.tsx
@@ -1,14 +1,14 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import { Molecule } from 'openchemlib/full';
-import { useState, useEffect, useCallback } from 'react';
-import { FaRegCopy, FaCheck } from 'react-icons/fa';
+import { useCallback, useEffect, useState } from 'react';
+import { FaCheck, FaRegCopy } from 'react-icons/fa';
 import { MF } from 'react-mf';
 import { StructureEditor } from 'react-ocl/full';
 
-import { NMRium } from '../../component/main';
-import { ClipboardFallbackModal } from '../../utils/clipboard/clipboardComponents';
-import { useClipboard } from '../../utils/clipboard/clipboardHooks';
+import { NMRium } from '../../component/main/index.js';
+import { ClipboardFallbackModal } from '../../utils/clipboard/clipboardComponents.js';
+import { useClipboard } from '../../utils/clipboard/clipboardHooks.js';
 
 const answers = JSON.parse(localStorage.getItem('nmrium-exams') || '{}');
 
diff --git a/src/demo/views/Exercise.tsx b/src/demo/views/Exercise.tsx
index 8d06e36c2..e1178774d 100644
--- a/src/demo/views/Exercise.tsx
+++ b/src/demo/views/Exercise.tsx
@@ -1,11 +1,12 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import { Molecule } from 'openchemlib/full';
-import { useState, useEffect, useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { MF } from 'react-mf';
 import { StructureEditor } from 'react-ocl/full';
 
-import { NMRium, NMRiumData } from '../../component/main';
+import type { NMRiumData } from '../../component/main/index.js';
+import { NMRium } from '../../component/main/index.js';
 
 const answers = JSON.parse(localStorage.getItem('nmrium-exercises') || '{}');
 
diff --git a/src/demo/views/Prediction.tsx b/src/demo/views/Prediction.tsx
index 444c0d728..fd628c487 100644
--- a/src/demo/views/Prediction.tsx
+++ b/src/demo/views/Prediction.tsx
@@ -1,4 +1,4 @@
-import View from './View';
+import View from './View.js';
 
 export default function Prediction(props) {
   return <View {...props} workspace="prediction" />;
diff --git a/src/demo/views/RefAPI.tsx b/src/demo/views/RefAPI.tsx
index 57f51e3aa..e82eb03f2 100644
--- a/src/demo/views/RefAPI.tsx
+++ b/src/demo/views/RefAPI.tsx
@@ -1,7 +1,8 @@
 import { useCallback, useRef } from 'react';
 import { DropZone } from 'react-science/ui';
 
-import { NMRium, NMRiumRefAPI } from '../../component/main';
+import type { NMRiumRefAPI } from '../../component/main/index.js';
+import { NMRium } from '../../component/main/index.js';
 
 export default function RefAPI() {
   const nmriumRef = useRef<NMRiumRefAPI>(null);
diff --git a/src/demo/views/Simulation.tsx b/src/demo/views/Simulation.tsx
index 5889808c3..5153b7896 100644
--- a/src/demo/views/Simulation.tsx
+++ b/src/demo/views/Simulation.tsx
@@ -1,4 +1,4 @@
-import View from './View';
+import View from './View.js';
 
 export default function Simulation(props) {
   return <View {...props} workspace="simulation" />;
diff --git a/src/demo/views/SingleView.tsx b/src/demo/views/SingleView.tsx
index 811330ff5..5ff8ed39c 100644
--- a/src/demo/views/SingleView.tsx
+++ b/src/demo/views/SingleView.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
-import { NMRium } from '../../component/main';
+import { NMRium } from '../../component/main/index.js';
 
 export default function SingleView(props) {
   const [data, setData] = useState<
@@ -58,6 +58,7 @@ export default function SingleView(props) {
           {path}
         </p>
       )}
+      {/* @ts-expect-error data type is wrong */}
       <NMRium data={data} />
     </div>
   );
diff --git a/src/demo/views/SnapshotView.tsx b/src/demo/views/SnapshotView.tsx
index 2584c3cb5..b6d31c103 100644
--- a/src/demo/views/SnapshotView.tsx
+++ b/src/demo/views/SnapshotView.tsx
@@ -1,6 +1,6 @@
-import { CustomWorkspaces } from 'nmr-load-save';
+import type { CustomWorkspaces } from 'nmr-load-save';
 
-import View from './View';
+import View from './View.js';
 
 const customWorkspaces: CustomWorkspaces = {
   snapshots: {
@@ -290,6 +290,14 @@ const customWorkspaces: CustomWorkspaces = {
       ranges: {
         nuclei: {
           '1H': {
+            isSumConstant: false,
+            showAssignment: false,
+            showAssignmentLabel: false,
+            showSerialNumber: false,
+            showDeleteAction: false,
+            showEditAction: false,
+            showMultiplicity: false,
+            showZoomAction: false,
             from: {
               show: false,
               format: '0.00',
@@ -322,6 +330,14 @@ const customWorkspaces: CustomWorkspaces = {
             showKind: false,
           },
           '13C': {
+            isSumConstant: false,
+            showAssignment: false,
+            showAssignmentLabel: false,
+            showSerialNumber: false,
+            showDeleteAction: false,
+            showEditAction: false,
+            showMultiplicity: false,
+            showZoomAction: false,
             from: {
               show: false,
               format: '0.00',
@@ -381,6 +397,7 @@ const customWorkspaces: CustomWorkspaces = {
     },
     infoBlock: {
       visible: false,
+      position: { x: 0, y: 0 },
       fields: [
         { label: 'Name', jpath: ['info', 'name'], visible: true, format: '' },
         {
@@ -474,7 +491,6 @@ const customWorkspaces: CustomWorkspaces = {
       },
     },
     label: 'Snapshots',
-    version: 1,
   },
 };
 
diff --git a/src/demo/views/Teaching.tsx b/src/demo/views/Teaching.tsx
index 5679075d6..b73a770ae 100644
--- a/src/demo/views/Teaching.tsx
+++ b/src/demo/views/Teaching.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
-import { NMRium } from '../../component/main';
+import { NMRium } from '../../component/main/index.js';
 
 async function loadData(file) {
   const response = await fetch(file);
diff --git a/src/demo/views/Test.tsx b/src/demo/views/Test.tsx
index 20570a0c6..8430954ae 100644
--- a/src/demo/views/Test.tsx
+++ b/src/demo/views/Test.tsx
@@ -1,11 +1,11 @@
-import debounce from 'lodash/debounce';
-import { useState, useEffect, useCallback, useReducer } from 'react';
+import debounce from 'lodash/debounce.js';
+import { useCallback, useEffect, useReducer, useState } from 'react';
 import { ObjectInspector } from 'react-inspector';
 import { DropZone } from 'react-science/ui';
 
-import { NMRium } from '../../component/main';
+import { NMRium } from '../../component/main/index.js';
 
-import { loadData } from './View';
+import { loadData } from './View.js';
 
 function searchDeep(obj, searchKey) {
   const result: any = [];
diff --git a/src/demo/views/TwoInstances.tsx b/src/demo/views/TwoInstances.tsx
index a414e80af..ea75c5a27 100644
--- a/src/demo/views/TwoInstances.tsx
+++ b/src/demo/views/TwoInstances.tsx
@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 
-import { NMRium } from '../../component/main';
+import { NMRium } from '../../component/main/index.js';
 
 const data1 = {
   spectra: [
diff --git a/src/demo/views/View.tsx b/src/demo/views/View.tsx
index d441dcaf6..41140dc9c 100644
--- a/src/demo/views/View.tsx
+++ b/src/demo/views/View.tsx
@@ -1,6 +1,7 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
-import BaseView, { BaseViewProps } from './BaseView';
+import type { BaseViewProps } from './BaseView.js';
+import BaseView from './BaseView.js';
 
 export async function loadData(file) {
   const response = await fetch(file);
diff --git a/src/demo/views/WebSourceView.tsx b/src/demo/views/WebSourceView.tsx
index c2ab59c9b..09c1576b8 100644
--- a/src/demo/views/WebSourceView.tsx
+++ b/src/demo/views/WebSourceView.tsx
@@ -1,9 +1,11 @@
-import { readFromWebSource, CustomWorkspaces } from 'nmr-load-save';
-import { useState, useEffect, useCallback } from 'react';
+import type { CustomWorkspaces } from 'nmr-load-save';
+import { readFromWebSource } from 'nmr-load-save';
+import { useCallback, useEffect, useState } from 'react';
 import { ObjectInspector } from 'react-inspector';
 
-import { NMRium, NMRiumWorkspace } from '../../component/main';
-import { PageConfig } from '../layouts/Main';
+import type { NMRiumWorkspace } from '../../component/main/index.js';
+import { NMRium } from '../../component/main/index.js';
+import type { PageConfig } from '../layouts/Main.js';
 
 async function loadFromURL(url: string) {
   const { pathname: relativePath, origin: baseURL } = new URL(url);
diff --git a/src/demo/views/index.ts b/src/demo/views/index.ts
index 949af9837..34c0e3f90 100644
--- a/src/demo/views/index.ts
+++ b/src/demo/views/index.ts
@@ -1,19 +1,19 @@
 import { lazy, memo } from 'react';
 
 export const possibleViews = {
-  AuoProcessingView: memo(lazy(() => import('./AuoProcessingView'))),
-  BenchtopNMRWorkspace: memo(lazy(() => import('./BenchtopNMRWorkspace'))),
-  CustomWorkspace: memo(lazy(() => import('./CustomWorkspace'))),
-  Exam: memo(lazy(() => import('./Exam'))),
-  Exercise: memo(lazy(() => import('./Exercise'))),
-  Prediction: memo(lazy(() => import('./Prediction'))),
-  RefAPI: memo(lazy(() => import('./RefAPI'))),
-  Simulation: memo(lazy(() => import('./Simulation'))),
-  SingleView: memo(lazy(() => import('./SingleView'))),
-  SnapshotView: memo(lazy(() => import('./SnapshotView'))),
-  Teaching: memo(lazy(() => import('./Teaching'))),
-  Test: memo(lazy(() => import('./Test'))),
-  TwoInstances: memo(lazy(() => import('./TwoInstances'))),
-  View: memo(lazy(() => import('./View'))),
-  WebSourceView: memo(lazy(() => import('./WebSourceView'))),
+  AuoProcessingView: memo(lazy(() => import('./AuoProcessingView.js'))),
+  BenchtopNMRWorkspace: memo(lazy(() => import('./BenchtopNMRWorkspace.js'))),
+  CustomWorkspace: memo(lazy(() => import('./CustomWorkspace.js'))),
+  Exam: memo(lazy(() => import('./Exam.js'))),
+  Exercise: memo(lazy(() => import('./Exercise.js'))),
+  Prediction: memo(lazy(() => import('./Prediction.js'))),
+  RefAPI: memo(lazy(() => import('./RefAPI.js'))),
+  Simulation: memo(lazy(() => import('./Simulation.js'))),
+  SingleView: memo(lazy(() => import('./SingleView.js'))),
+  SnapshotView: memo(lazy(() => import('./SnapshotView.js'))),
+  Teaching: memo(lazy(() => import('./Teaching.js'))),
+  Test: memo(lazy(() => import('./Test.js'))),
+  TwoInstances: memo(lazy(() => import('./TwoInstances.js'))),
+  View: memo(lazy(() => import('./View.js'))),
+  WebSourceView: memo(lazy(() => import('./WebSourceView.js'))),
 };
diff --git a/src/index.tsx b/src/index.tsx
index 6663e0f31..171ab0c4a 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,9 +1,9 @@
 import { createRoot } from 'react-dom/client';
 import { HashRouter, Routes, Route } from 'react-router-dom';
 
-import Main from './demo/layouts/Main';
-import TestHighlight from './demo/test/TestHighlight';
-import Test from './demo/views/Test';
+import Main from './demo/layouts/Main.js';
+import TestHighlight from './demo/test/TestHighlight.js';
+import Test from './demo/views/Test.js';
 
 // Reset styles so they do not affect development of the React component.
 import 'modern-normalize/modern-normalize.css';
diff --git a/src/types/NMRiumDataReturn.ts b/src/types/NMRiumDataReturn.ts
index e2ac4c827..0e8cb1269 100644
--- a/src/types/NMRiumDataReturn.ts
+++ b/src/types/NMRiumDataReturn.ts
@@ -1,7 +1,7 @@
-import { CorrelationData } from 'nmr-correlation';
-import { Workspace, ViewState, Spectrum } from 'nmr-load-save';
+import type { CorrelationData } from 'nmr-correlation';
+import type { Spectrum, ViewState, Workspace } from 'nmr-load-save';
 
-import { StateMolecule } from '../data/molecules/Molecule';
+import type { StateMolecule } from '../data/molecules/Molecule.js';
 
 export interface NMRiumDataReturn {
   version: number;
diff --git a/src/utils/clipboard/clipboardComponents.tsx b/src/utils/clipboard/clipboardComponents.tsx
index bc1cf0336..216420d4d 100644
--- a/src/utils/clipboard/clipboardComponents.tsx
+++ b/src/utils/clipboard/clipboardComponents.tsx
@@ -2,11 +2,12 @@
 import { Dialog, DialogBody } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { FormEvent, useCallback, useEffect, useMemo, useRef } from 'react';
+import type { FormEvent } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 
-import Button from '../../component/elements/Button';
+import Button from '../../component/elements/Button.js';
 
-import { ClipboardMode } from './types';
+import type { ClipboardMode } from './types.js';
 
 const ClipboardForm = styled.form`
   padding: 0.5rem;
diff --git a/src/utils/clipboard/clipboardHooks.ts b/src/utils/clipboard/clipboardHooks.ts
index d32b15a8d..42ed142d3 100644
--- a/src/utils/clipboard/clipboardHooks.ts
+++ b/src/utils/clipboard/clipboardHooks.ts
@@ -6,8 +6,8 @@ import {
   readText,
   write,
   writeText,
-} from './clipboard';
-import { ClipboardMode } from './types';
+} from './clipboard.js';
+import type { ClipboardMode } from './types.js';
 
 type PN = PermissionName | 'clipboard-read' | 'clipboard-write';
 
diff --git a/test-e2e/NmriumPage/NmriumPageViewer.ts b/test-e2e/NmriumPage/NmriumPageViewer.ts
index 2a3425ec8..ac528b9a0 100644
--- a/test-e2e/NmriumPage/NmriumPageViewer.ts
+++ b/test-e2e/NmriumPage/NmriumPageViewer.ts
@@ -1,4 +1,4 @@
-import { Locator, Page } from '@playwright/test';
+import type { Locator, Page } from '@playwright/test';
 
 interface MoveMouseOptions {
   x?: number;
diff --git a/test-e2e/NmriumPage/index.ts b/test-e2e/NmriumPage/index.ts
index 9556dc2a6..1bb4576b2 100644
--- a/test-e2e/NmriumPage/index.ts
+++ b/test-e2e/NmriumPage/index.ts
@@ -1,8 +1,9 @@
 import { readFileSync } from 'node:fs';
 
-import { Page, expect } from '@playwright/test';
+import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
 
-import { NmriumPageViewer } from './NmriumPageViewer';
+import { NmriumPageViewer } from './NmriumPageViewer.js';
 
 type ClickOptions = Parameters<Page['click']>[1];
 
diff --git a/test-e2e/core/basic.test.ts b/test-e2e/core/basic.test.ts
index 32ac4baac..699991603 100644
--- a/test-e2e/core/basic.test.ts
+++ b/test-e2e/core/basic.test.ts
@@ -1,6 +1,6 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
-import NmriumPage from '../NmriumPage';
+import NmriumPage from '../NmriumPage/index.js';
 
 test('should load and display the 1D and 2D spectrum', async ({ page }) => {
   const nmrium = await NmriumPage.create(page);
diff --git a/test-e2e/core/import.test.ts b/test-e2e/core/import.test.ts
index 573d5d49d..1b8671a22 100644
--- a/test-e2e/core/import.test.ts
+++ b/test-e2e/core/import.test.ts
@@ -1,6 +1,6 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
-import NmriumPage from '../NmriumPage';
+import NmriumPage from '../NmriumPage/index.js';
 
 test('should load and migrate .nmrium data from version 0 to version 1', async ({
   page,
diff --git a/test-e2e/core/setting.test.ts b/test-e2e/core/setting.test.ts
index 7253c6354..32662f6cd 100644
--- a/test-e2e/core/setting.test.ts
+++ b/test-e2e/core/setting.test.ts
@@ -1,6 +1,6 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
-import NMriumPage from '../NmriumPage';
+import NMriumPage from '../NmriumPage/index.js';
 
 test('should Change the visibility of the panels', async ({ page }) => {
   const nmrium = await NMriumPage.create(page);
diff --git a/test-e2e/panels/autoassignment.test.ts b/test-e2e/panels/autoassignment.test.ts
index 7e9581495..f7ba8c3b8 100644
--- a/test-e2e/panels/autoassignment.test.ts
+++ b/test-e2e/panels/autoassignment.test.ts
@@ -1,6 +1,6 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
-import NmriumPage from '../NmriumPage';
+import NmriumPage from '../NmriumPage/index.js';
 
 test('automatic assignment panel', async ({ page }) => {
   const nmrium = await NmriumPage.create(page);
diff --git a/test-e2e/panels/filters.test.ts b/test-e2e/panels/filters.test.ts
index ae2eb4c1f..274f99379 100644
--- a/test-e2e/panels/filters.test.ts
+++ b/test-e2e/panels/filters.test.ts
@@ -1,6 +1,6 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
-import NmriumPage from '../NmriumPage';
+import NmriumPage from '../NmriumPage/index.js';
 
 async function open13CFidSpectrum(nmrium: NmriumPage) {
   await nmrium.page.click('li >> text=Cytisine');
diff --git a/test-e2e/panels/integral.test.ts b/test-e2e/panels/integral.test.ts
index e0dd443be..9f57dfc4d 100644
--- a/test-e2e/panels/integral.test.ts
+++ b/test-e2e/panels/integral.test.ts
@@ -1,6 +1,6 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
-import NmriumPage from '../NmriumPage';
+import NmriumPage from '../NmriumPage/index.js';
 
 async function addIntegral(
   nmrium: NmriumPage,
diff --git a/test-e2e/panels/peaks.test.ts b/test-e2e/panels/peaks.test.ts
index 75066efbd..c6742dd76 100644
--- a/test-e2e/panels/peaks.test.ts
+++ b/test-e2e/panels/peaks.test.ts
@@ -1,6 +1,6 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
-import NmriumPage from '../NmriumPage';
+import NmriumPage from '../NmriumPage/index.js';
 
 const PEAK_ANNOTATIONS_SELECTOR =
   '_react=Peaks[peaksSource="peaks"] >> _react=PeakAnnotation';
diff --git a/test-e2e/panels/ranges.test.ts b/test-e2e/panels/ranges.test.ts
index 5bbce04ab..0db726142 100644
--- a/test-e2e/panels/ranges.test.ts
+++ b/test-e2e/panels/ranges.test.ts
@@ -1,6 +1,6 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
-import NmriumPage from '../NmriumPage';
+import NmriumPage from '../NmriumPage/index.js';
 
 async function addRange(
   nmrium: NmriumPage,
diff --git a/test-e2e/panels/settings.test.ts b/test-e2e/panels/settings.test.ts
index 21d134cf5..1210918b8 100644
--- a/test-e2e/panels/settings.test.ts
+++ b/test-e2e/panels/settings.test.ts
@@ -1,6 +1,6 @@
 import { test } from '@playwright/test';
 
-import NmriumPage from '../NmriumPage';
+import NmriumPage from '../NmriumPage/index.js';
 
 test('process 1d FID 13c spectrum', async ({ page }) => {
   const nmrium = await NmriumPage.create(page);
diff --git a/test-e2e/panels/spectra.test.ts b/test-e2e/panels/spectra.test.ts
index 28436afdb..401875dab 100644
--- a/test-e2e/panels/spectra.test.ts
+++ b/test-e2e/panels/spectra.test.ts
@@ -1,6 +1,6 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
-import NmriumPage from '../NmriumPage';
+import NmriumPage from '../NmriumPage/index.js';
 
 test('Should 1d spectrum hide/show', async ({ page }) => {
   const nmrium = await NmriumPage.create(page);
diff --git a/test-e2e/panels/structures.test.ts b/test-e2e/panels/structures.test.ts
index 564b6fe4e..6eaf63f42 100644
--- a/test-e2e/panels/structures.test.ts
+++ b/test-e2e/panels/structures.test.ts
@@ -1,6 +1,7 @@
-import { test, expect, Locator } from '@playwright/test';
+import type { Locator } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
-import NmriumPage from '../NmriumPage';
+import NmriumPage from '../NmriumPage/index.js';
 
 test('should draw structure and display it with MF', async ({ page }) => {
   const nmrium = await NmriumPage.create(page);
diff --git a/test-e2e/tools/slicing.test.ts b/test-e2e/tools/slicing.test.ts
index 369762c79..f56640d33 100644
--- a/test-e2e/tools/slicing.test.ts
+++ b/test-e2e/tools/slicing.test.ts
@@ -1,6 +1,6 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
-import NmriumPage from '../NmriumPage';
+import NmriumPage from '../NmriumPage/index.js';
 
 test('Slicing too should show 1d (horizontal and vertical) traces', async ({
   page,
diff --git a/tsconfig.build.json b/tsconfig.build.json
new file mode 100644
index 000000000..772fbe5d2
--- /dev/null
+++ b/tsconfig.build.json
@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": [
+    "**/__tests__",
+    "playwright.config.ts",
+    "src/demo",
+    "src/index.tsx",
+    "test-e2e",
+    "vite.config.ts"
+  ]
+}
diff --git a/tsconfig.esm.json b/tsconfig.esm.json
deleted file mode 100644
index adbad3a1b..000000000
--- a/tsconfig.esm.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "exclude": [
-    "**/__tests__",
-    "src/demo",
-    "src/index.tsx",
-    "test-e2e",
-    "vite.config.mts",
-    "playwright*"
-  ],
-  "compilerOptions": {
-    "outDir": "lib",
-    "noEmit": false,
-    "declaration": true
-  }
-}
diff --git a/tsconfig.json b/tsconfig.json
index 467b20aca..de7013778 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,23 +1,27 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": ["DOM", "ES2022"],
     "types": ["vite/client"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
+    "target": "ES2022",
+    "outDir": "lib",
+    "jsx": "react-jsx",
+    "module": "NodeNext",
     "strict": true,
     "noImplicitAny": false,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "moduleResolution": "Bundler",
-    "module": "ES2022",
+    "skipLibCheck": true,
     "resolveJsonModule": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowJs": false,
     "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
+    "verbatimModuleSyntax": true,
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true
   },
-  "include": ["src", "test-e2e", "playwright.config.ts", "vite.config.mts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "playwright.config.ts",
+    "src",
+    "test-e2e",
+    "vite.config.ts"
+  ]
 }
diff --git a/vite.config.mts b/vite.config.ts
similarity index 92%
rename from vite.config.mts
rename to vite.config.ts
index 52b2bebc6..480b7fff4 100644
--- a/vite.config.mts
+++ b/vite.config.ts
@@ -1,6 +1,6 @@
 import react from '@vitejs/plugin-react-swc';
 import analyze from 'rollup-plugin-analyzer';
-import type { AliasOptions } from 'vite'
+import type { AliasOptions } from 'vite';
 import { defineConfig } from 'vitest/config';
 
 // https://vitejs.dev/config/
@@ -22,10 +22,10 @@ export default () => {
     build: {
       sourcemap: 'inline',
       rollupOptions: {
+        // @ts-expect-error analyzer types are wrong.
         plugins: process.env.ANALYZE ? [analyze()] : [],
         output: {
           manualChunks(id) {
-
             if (id.includes('node_modules/openchemlib/')) {
               return 'openchemlib';
             }