diff --git a/package-lock.json b/package-lock.json
index 0642682..37e0d40 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,35 +8,35 @@
       "name": "jacly",
       "version": "0.0.0",
       "dependencies": {
-        "@blockly/field-colour": "^4.0.0",
-        "@types/w3c-web-serial": "^1.0.3",
-        "axios": "^1.7.5",
-        "blockly": "^10.0.0",
-        "classnames": "^2.3.2",
+        "@blockly/field-colour": "^6.0.0",
+        "@types/w3c-web-serial": "^1.0.8",
+        "axios": "^1.12.2",
+        "blockly": "^12.3.1",
+        "classnames": "^2.5.1",
         "jaculus-tools": "^0.0.23",
-        "react": "^18.2.0",
-        "react-blockly": "^7.2.2",
-        "react-dom": "^18.2.0",
+        "react": "^18.3.1",
+        "react-blockly": "^9.0.0",
+        "react-dom": "^18.3.1",
         "react-syntax-highlighter": "^15.6.6",
         "tailwind-override": "^0.6.1",
-        "typescript": "^5.1.6",
+        "typescript": "^5.9.3",
         "util": "^0.12.5"
       },
       "devDependencies": {
         "@types/node": "^20.4.1",
-        "@types/react": "^18.2.14",
-        "@types/react-dom": "^18.2.6",
-        "@types/react-syntax-highlighter": "^15.5.7",
-        "@vitejs/plugin-react": "^4.0.1",
-        "autoprefixer": "^10.4.14",
-        "eslint": "^8.44.0",
-        "eslint-plugin-react": "^7.32.2",
-        "eslint-plugin-react-hooks": "^4.6.0",
-        "eslint-plugin-react-refresh": "^0.4.1",
-        "postcss": "^8.4.25",
-        "tailwindcss": "^3.4.10",
+        "@types/react": "^19.2.2",
+        "@types/react-dom": "^19.2.1",
+        "@types/react-syntax-highlighter": "^15.5.13",
+        "@vitejs/plugin-react": "^5.0.4",
+        "autoprefixer": "^10.4.21",
+        "eslint": "^9.37.0",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^6.1.1",
+        "eslint-plugin-react-refresh": "^0.4.23",
+        "postcss": "^8.5.6",
+        "tailwindcss": "^3.4.18",
         "vite": "^7.1.9",
-        "vite-plugin-checker": "^0.6.1",
+        "vite-plugin-checker": "^0.11.0",
         "vite-plugin-node-polyfills": "^0.24.0"
       }
     },
@@ -53,6 +53,25 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-3.2.0.tgz",
+      "integrity": "sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==",
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-calc": "^2.1.3",
+        "@csstools/css-color-parser": "^3.0.9",
+        "@csstools/css-parser-algorithms": "^3.0.4",
+        "@csstools/css-tokenizer": "^3.0.3",
+        "lru-cache": "^10.4.3"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "license": "ISC"
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
@@ -346,15 +365,30 @@
       }
     },
     "node_modules/@blockly/field-colour": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/@blockly/field-colour/-/field-colour-4.0.4.tgz",
-      "integrity": "sha512-FUXnlReiyejaaT+tkweW386dFbj9mSHjUCVtHgTP6cP5Wbvh6vJHQmnFxlPUNLsHPDGtri8j+yRKxGH97UkJvA==",
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/@blockly/field-colour/-/field-colour-6.0.5.tgz",
+      "integrity": "sha512-IhDDWV4X5zkeomQSWzPD09RDK9cD8sg8y96dV1ZifOpgPFffhtUtVtfEnNFYpOQhwi1LH2f5JTHMJkSw1x+dwg==",
       "license": "Apache-2.0",
+      "dependencies": {
+        "@blockly/field-grid-dropdown": "^6.0.4"
+      },
       "engines": {
         "node": ">=8.0.0"
       },
       "peerDependencies": {
-        "blockly": "^10.4.3"
+        "blockly": "^12.0.0"
+      }
+    },
+    "node_modules/@blockly/field-grid-dropdown": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@blockly/field-grid-dropdown/-/field-grid-dropdown-6.0.4.tgz",
+      "integrity": "sha512-eY51r4j0R7bNotqgRxoviJbkfHxwxYwOtsu8PUih7Hi25eEhtNiFteFAQE8Yob8pFj9Bovq3Z96U4ysoOiz86A==",
+      "license": "Apache 2.0",
+      "engines": {
+        "node": ">=8.17.0"
+      },
+      "peerDependencies": {
+        "blockly": "^12.0.0"
       }
     },
     "node_modules/@colors/colors": {
@@ -366,6 +400,118 @@
         "node": ">=0.1.90"
       }
     },
+    "node_modules/@csstools/color-helpers": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.1.0.tgz",
+      "integrity": "sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-2.1.4.tgz",
+      "integrity": "sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-3.1.0.tgz",
+      "integrity": "sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^5.1.0",
+        "@csstools/css-calc": "^2.1.4"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.5.tgz",
+      "integrity": "sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz",
+      "integrity": "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@cubicap/esptool-js": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@cubicap/esptool-js/-/esptool-js-0.3.2.tgz",
@@ -858,17 +1004,58 @@
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
     },
+    "node_modules/@eslint/config-array": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.0.tgz",
+      "integrity": "sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.6",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.0.tgz",
+      "integrity": "sha512-WUFvV4WoIwW8Bv0KeKCIIEgdSiFOsulyN0xrMu+7z43q/hkOLXjvb5u7UC9jDxvRzcrbEmuZBX5yJZz1741jog==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.16.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.16.0.tgz",
+      "integrity": "sha512-nmC8/totwobIiFcGkDza3GIKfAw1+hLiYVrh3I1nIomQ8PEr5cxg34jnkmGawul/ep52wGRAcyeDCNtWKSOj4Q==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
     "node_modules/@eslint/eslintrc": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
-      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.1.tgz",
+      "integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
-        "espree": "^9.6.0",
-        "globals": "^13.19.0",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
         "js-yaml": "^4.1.0",
@@ -876,36 +1063,71 @@
         "strip-json-comments": "^3.1.1"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "url": "https://opencollective.com/eslint"
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.57.1",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
-      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
+      "version": "9.37.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.37.0.tgz",
+      "integrity": "sha512-jaS+NJ+hximswBG6pjNX0uEJZkrT0zwpVi3BA3vX22aFGjJjmgSTSmPpZCRKmoBL5VY/M6p0xsSJx7rk7sy5gg==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.6.tgz",
+      "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
-    "node_modules/@humanwhocodes/config-array": {
-      "version": "0.13.0",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
-      "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
-      "deprecated": "Use @eslint/config-array instead",
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.0.tgz",
+      "integrity": "sha512-sB5uyeq+dwCWyPi31B2gQlVlo+j5brPlWx4yZBrEaRo/nhdDE8Xke1gsGgtiBdaBTxuTkceLVuVt/pclrasb0A==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@humanwhocodes/object-schema": "^2.0.3",
-        "debug": "^4.3.1",
-        "minimatch": "^3.0.5"
+        "@eslint/core": "^0.16.0",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
+      "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.4.0"
       },
       "engines": {
-        "node": ">=10.10.0"
+        "node": ">=18.18.0"
       }
     },
     "node_modules/@humanwhocodes/module-importer": {
@@ -922,13 +1144,19 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
-    "node_modules/@humanwhocodes/object-schema": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
-      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
-      "deprecated": "Use @eslint/object-schema instead",
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
       "dev": true,
-      "license": "BSD-3-Clause"
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
     },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
@@ -1102,9 +1330,9 @@
       }
     },
     "node_modules/@rolldown/pluginutils": {
-      "version": "1.0.0-beta.27",
-      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
-      "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==",
+      "version": "1.0.0-beta.38",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.38.tgz",
+      "integrity": "sha512-N/ICGKleNhA5nc9XXQG/kkKHJ7S55u0x0XUJbbkmdCnFuoRkM1Il12q9q0eX19+M7KKUEPw/daUPIRnxhcxAIw==",
       "dev": true,
       "license": "MIT"
     },
@@ -1154,19 +1382,6 @@
         }
       }
     },
-    "node_modules/@rollup/pluginutils/node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.52.4",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.52.4.tgz",
@@ -1736,15 +1951,6 @@
         "text-hex": "1.0.x"
       }
     },
-    "node_modules/@tootallnate/once": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
-      "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1806,6 +2012,13 @@
         "@types/unist": "^2"
       }
     },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "20.19.19",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.19.tgz",
@@ -1817,33 +2030,25 @@
         "undici-types": "~6.21.0"
       }
     },
-    "node_modules/@types/prop-types": {
-      "version": "15.7.15",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
-      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/react": {
-      "version": "18.3.25",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.25.tgz",
-      "integrity": "sha512-oSVZmGtDPmRZtVDqvdKUi/qgCsWp5IDY29wp8na8Bj4B3cc99hfNzvNhlMkVVxctkAOGUA3Km7MMpBHAnWfcIA==",
+      "version": "19.2.2",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
+      "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@types/prop-types": "*",
         "csstype": "^3.0.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.3.7",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
-      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
+      "version": "19.2.1",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.1.tgz",
+      "integrity": "sha512-/EEvYBdT3BflCWvTMO7YkYBHVE9Ci6XdqZciZANQgKpaiDRGOLIlRo91jbTNRQjgPFWVaRxcYc0luVNFitz57A==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
-        "@types/react": "^18.0.0"
+        "@types/react": "^19.2.0"
       }
     },
     "node_modules/@types/react-syntax-highlighter": {
@@ -1874,41 +2079,27 @@
       "integrity": "sha512-QQOT+bxQJhRGXoZDZGLs3ksLud1dMNnMiSQtBA0w8KXvLpXX4oM4TZb6J0GgJ8UbCaHo5s9/4VQT8uXy9JER2A==",
       "license": "MIT"
     },
-    "node_modules/@ungap/structured-clone": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
-      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/@vitejs/plugin-react": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
-      "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==",
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.0.4.tgz",
+      "integrity": "sha512-La0KD0vGkVkSk6K+piWDKRUyg8Rl5iAIKRMH0vMJI0Eg47bq1eOxmoObAaQG37WMW9MSyk7Cs8EIWwJC1PtzKA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/core": "^7.28.0",
+        "@babel/core": "^7.28.4",
         "@babel/plugin-transform-react-jsx-self": "^7.27.1",
         "@babel/plugin-transform-react-jsx-source": "^7.27.1",
-        "@rolldown/pluginutils": "1.0.0-beta.27",
+        "@rolldown/pluginutils": "1.0.0-beta.38",
         "@types/babel__core": "^7.20.5",
         "react-refresh": "^0.17.0"
       },
       "engines": {
-        "node": "^14.18.0 || >=16.0.0"
+        "node": "^20.19.0 || >=22.12.0"
       },
       "peerDependencies": {
         "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
       }
     },
-    "node_modules/abab": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
-      "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==",
-      "deprecated": "Use your platform's native atob() and btoa() methods instead",
-      "license": "BSD-3-Clause"
-    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -1934,15 +2125,12 @@
       }
     },
     "node_modules/agent-base": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
       "license": "MIT",
-      "dependencies": {
-        "debug": "4"
-      },
       "engines": {
-        "node": ">= 6.0.0"
+        "node": ">= 14"
       }
     },
     "node_modules/ajv": {
@@ -1962,35 +2150,6 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "node_modules/ansi-escapes": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
-      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "type-fest": "^0.21.3"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/ansi-escapes/node_modules/type-fest": {
-      "version": "0.21.3",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
-      "dev": true,
-      "license": "(MIT OR CC0-1.0)",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -2037,6 +2196,19 @@
         "node": ">= 8"
       }
     },
+    "node_modules/anymatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -2325,7 +2497,7 @@
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
       "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "devOptional": true,
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -2375,13 +2547,16 @@
       }
     },
     "node_modules/blockly": {
-      "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/blockly/-/blockly-10.4.3.tgz",
-      "integrity": "sha512-+opfBmQnSiv7vTiY/TkDEBOslxUyfj8luS3S+qs1NnQKjInC+Waf2l9cNsMh9J8BMkmiCIT+Ed/3mmjIaL9wug==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/blockly/-/blockly-12.3.1.tgz",
+      "integrity": "sha512-BbWUcpqroY241XgSxTuAiEMHeIZ6u3+oD2zOATf3Fi+0NMWJ/MdMtuSkOcDCSk6Nc7WR3z5n9GHKqz2L+3kQOQ==",
       "license": "Apache-2.0",
       "peer": true,
       "dependencies": {
-        "jsdom": "22.1.0"
+        "jsdom": "26.1.0"
+      },
+      "engines": {
+        "node": ">=18"
       }
     },
     "node_modules/bn.js": {
@@ -2778,41 +2953,19 @@
       }
     },
     "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
+        "readdirp": "^4.0.1"
       },
       "engines": {
-        "node": ">= 8.10.0"
+        "node": ">= 14.16.0"
       },
       "funding": {
         "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
       }
     },
     "node_modules/cipher-base": {
@@ -3116,15 +3269,16 @@
       }
     },
     "node_modules/cssstyle": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz",
-      "integrity": "sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==",
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.6.0.tgz",
+      "integrity": "sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==",
       "license": "MIT",
       "dependencies": {
-        "rrweb-cssom": "^0.6.0"
+        "@asamuzakjp/css-color": "^3.2.0",
+        "rrweb-cssom": "^0.8.0"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=18"
       }
     },
     "node_modules/csstype": {
@@ -3144,17 +3298,16 @@
       }
     },
     "node_modules/data-urls": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz",
-      "integrity": "sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
+      "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
       "license": "MIT",
       "dependencies": {
-        "abab": "^2.0.6",
-        "whatwg-mimetype": "^3.0.0",
-        "whatwg-url": "^12.0.0"
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=18"
       }
     },
     "node_modules/data-view-buffer": {
@@ -3296,6 +3449,17 @@
         "minimalistic-assert": "^1.0.0"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -3329,19 +3493,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/doctrine": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
-      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "esutils": "^2.0.2"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/domain-browser": {
       "version": "4.22.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-4.22.0.tgz",
@@ -3355,19 +3506,6 @@
         "url": "https://bevry.me/fund"
       }
     },
-    "node_modules/domexception": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
-      "integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
-      "deprecated": "Use your platform's native DOMException instead",
-      "license": "MIT",
-      "dependencies": {
-        "webidl-conversions": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -3682,61 +3820,65 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.57.1",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
-      "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
-      "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
+      "version": "9.37.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.37.0.tgz",
+      "integrity": "sha512-XyLmROnACWqSxiGYArdef1fItQd47weqB7iwtfr9JHwRrqIXZdcFMvvEcL9xHCmL0SNsOvF0c42lWyM1U5dgig==",
       "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@eslint-community/eslint-utils": "^4.2.0",
-        "@eslint-community/regexpp": "^4.6.1",
-        "@eslint/eslintrc": "^2.1.4",
-        "@eslint/js": "8.57.1",
-        "@humanwhocodes/config-array": "^0.13.0",
+        "@eslint-community/eslint-utils": "^4.8.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.21.0",
+        "@eslint/config-helpers": "^0.4.0",
+        "@eslint/core": "^0.16.0",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "9.37.0",
+        "@eslint/plugin-kit": "^0.4.0",
+        "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
-        "@nodelib/fs.walk": "^1.2.8",
-        "@ungap/structured-clone": "^1.2.0",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "@types/json-schema": "^7.0.15",
         "ajv": "^6.12.4",
         "chalk": "^4.0.0",
-        "cross-spawn": "^7.0.2",
+        "cross-spawn": "^7.0.6",
         "debug": "^4.3.2",
-        "doctrine": "^3.0.0",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^7.2.2",
-        "eslint-visitor-keys": "^3.4.3",
-        "espree": "^9.6.1",
-        "esquery": "^1.4.2",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
+        "esquery": "^1.5.0",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
-        "file-entry-cache": "^6.0.1",
+        "file-entry-cache": "^8.0.0",
         "find-up": "^5.0.0",
         "glob-parent": "^6.0.2",
-        "globals": "^13.19.0",
-        "graphemer": "^1.4.0",
         "ignore": "^5.2.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
-        "is-path-inside": "^3.0.3",
-        "js-yaml": "^4.1.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
-        "levn": "^0.4.1",
         "lodash.merge": "^4.6.2",
         "minimatch": "^3.1.2",
         "natural-compare": "^1.4.0",
-        "optionator": "^0.9.3",
-        "strip-ansi": "^6.0.1",
-        "text-table": "^0.2.0"
+        "optionator": "^0.9.3"
       },
       "bin": {
         "eslint": "bin/eslint.js"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
-        "url": "https://opencollective.com/eslint"
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
       }
     },
     "node_modules/eslint-plugin-react": {
@@ -3773,16 +3915,22 @@
       }
     },
     "node_modules/eslint-plugin-react-hooks": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
-      "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-6.1.1.tgz",
+      "integrity": "sha512-St9EKZzOAQF704nt2oJvAKZHjhrpg25ClQoaAlHmPZuajFldVLqRDW4VBNAS01NzeiQF0m0qhG1ZA807K6aVaQ==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.24.4",
+        "@babel/parser": "^7.24.4",
+        "zod": "^3.22.4 || ^4.0.0",
+        "zod-validation-error": "^3.0.3 || ^4.0.0"
+      },
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       },
       "peerDependencies": {
-        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
       }
     },
     "node_modules/eslint-plugin-react-refresh": {
@@ -3809,9 +3957,9 @@
       }
     },
     "node_modules/eslint-scope": {
-      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
-      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
@@ -3819,7 +3967,7 @@
         "estraverse": "^5.2.0"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "url": "https://opencollective.com/eslint"
@@ -3838,19 +3986,45 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint/node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/espree": {
-      "version": "9.6.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
-      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
-        "acorn": "^8.9.0",
+        "acorn": "^8.15.0",
         "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^3.4.1"
+        "eslint-visitor-keys": "^4.2.1"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree/node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "url": "https://opencollective.com/eslint"
@@ -4026,16 +4200,16 @@
       "license": "MIT"
     },
     "node_modules/file-entry-cache": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
-      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "flat-cache": "^3.0.4"
+        "flat-cache": "^4.0.0"
       },
       "engines": {
-        "node": "^10.12.0 || >=12.0.0"
+        "node": ">=16.0.0"
       }
     },
     "node_modules/fill-range": {
@@ -4069,18 +4243,17 @@
       }
     },
     "node_modules/flat-cache": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
-      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "flatted": "^3.2.9",
-        "keyv": "^4.5.3",
-        "rimraf": "^3.0.2"
+        "keyv": "^4.5.4"
       },
       "engines": {
-        "node": "^10.12.0 || >=12.0.0"
+        "node": ">=16"
       }
     },
     "node_modules/flatted": {
@@ -4186,38 +4359,6 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
-    "node_modules/fs-extra": {
-      "version": "11.3.2",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.2.tgz",
-      "integrity": "sha512-Xr9F6z6up6Ws+NjzMCZc6WXg2YFRlrLP9NQDO3VQrWrfiojdhS56TzueT88ze0uBdCTwEIhQ3ptnmKeWGFAe0A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=14.14"
-      }
-    },
-    "node_modules/fs-extra/node_modules/universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
-    "node_modules/fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -4362,22 +4503,21 @@
       }
     },
     "node_modules/glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
       },
-      "engines": {
-        "node": "*"
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
@@ -4396,17 +4536,40 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/globals": {
-      "version": "13.24.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+    "node_modules/glob/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "type-fest": "^0.20.2"
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -4441,20 +4604,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/graceful-fs": {
-      "version": "4.2.11",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/graphemer": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
-      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/has-bigints": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
@@ -4625,29 +4774,28 @@
       }
     },
     "node_modules/html-encoding-sniffer": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
-      "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+      "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
       "license": "MIT",
       "dependencies": {
-        "whatwg-encoding": "^2.0.0"
+        "whatwg-encoding": "^3.1.1"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/http-proxy-agent": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
-      "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
       "license": "MIT",
       "dependencies": {
-        "@tootallnate/once": "2",
-        "agent-base": "6",
-        "debug": "4"
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">= 14"
       }
     },
     "node_modules/https-browserify": {
@@ -4658,16 +4806,16 @@
       "license": "MIT"
     },
     "node_modules/https-proxy-agent": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
-      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
       "license": "MIT",
       "dependencies": {
-        "agent-base": "6",
+        "agent-base": "^7.1.2",
         "debug": "4"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">= 14"
       }
     },
     "node_modules/iconv-lite": {
@@ -4686,7 +4834,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
       "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "devOptional": true,
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -4740,18 +4888,6 @@
         "node": ">=0.8.19"
       }
     },
-    "node_modules/inflight": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "once": "^1.3.0",
-        "wrappy": "1"
-      }
-    },
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -5117,16 +5253,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-path-inside": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
-      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-potential-custom-element-name": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -5379,17 +5505,6 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/jiti": {
-      "version": "1.21.7",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
-      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "bin": {
-        "jiti": "bin/jiti.js"
-      }
-    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5410,40 +5525,37 @@
       }
     },
     "node_modules/jsdom": {
-      "version": "22.1.0",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-22.1.0.tgz",
-      "integrity": "sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw==",
-      "license": "MIT",
-      "dependencies": {
-        "abab": "^2.0.6",
-        "cssstyle": "^3.0.0",
-        "data-urls": "^4.0.0",
-        "decimal.js": "^10.4.3",
-        "domexception": "^4.0.0",
-        "form-data": "^4.0.0",
-        "html-encoding-sniffer": "^3.0.0",
-        "http-proxy-agent": "^5.0.0",
-        "https-proxy-agent": "^5.0.1",
+      "version": "26.1.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-26.1.0.tgz",
+      "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==",
+      "license": "MIT",
+      "dependencies": {
+        "cssstyle": "^4.2.1",
+        "data-urls": "^5.0.0",
+        "decimal.js": "^10.5.0",
+        "html-encoding-sniffer": "^4.0.0",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.6",
         "is-potential-custom-element-name": "^1.0.1",
-        "nwsapi": "^2.2.4",
-        "parse5": "^7.1.2",
-        "rrweb-cssom": "^0.6.0",
+        "nwsapi": "^2.2.16",
+        "parse5": "^7.2.1",
+        "rrweb-cssom": "^0.8.0",
         "saxes": "^6.0.0",
         "symbol-tree": "^3.2.4",
-        "tough-cookie": "^4.1.2",
-        "w3c-xmlserializer": "^4.0.0",
+        "tough-cookie": "^5.1.1",
+        "w3c-xmlserializer": "^5.0.0",
         "webidl-conversions": "^7.0.0",
-        "whatwg-encoding": "^2.0.0",
-        "whatwg-mimetype": "^3.0.0",
-        "whatwg-url": "^12.0.1",
-        "ws": "^8.13.0",
-        "xml-name-validator": "^4.0.0"
+        "whatwg-encoding": "^3.1.1",
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.1.1",
+        "ws": "^8.18.0",
+        "xml-name-validator": "^5.0.0"
       },
       "engines": {
-        "node": ">=16"
+        "node": ">=18"
       },
       "peerDependencies": {
-        "canvas": "^2.5.0"
+        "canvas": "^3.0.0"
       },
       "peerDependenciesMeta": {
         "canvas": {
@@ -5498,29 +5610,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/jsonfile": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
-      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "universalify": "^2.0.0"
-      },
-      "optionalDependencies": {
-        "graceful-fs": "^4.1.6"
-      }
-    },
-    "node_modules/jsonfile/node_modules/universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -5567,52 +5656,262 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/lilconfig": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
-      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
+      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "MIT",
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
-        "node": ">=14"
+        "node": ">= 12.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/antonk52"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
+      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "MIT"
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
     },
-    "node_modules/locate-path": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
+      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "p-locate": "^5.0.0"
-      },
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
       "engines": {
-        "node": ">=10"
+        "node": ">= 12.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/lodash.merge": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
+      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
+      "cpu": [
+        "arm"
+      ],
       "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/logform": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/logform/-/logform-2.7.0.tgz",
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
+      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
+      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
+      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
+      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
+      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
+      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/logform": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/logform/-/logform-2.7.0.tgz",
       "integrity": "sha512-TFYA4jnP7PVbmlBIfhlSe+WKxs9dklXMTEGcBCIvLhE/Tn3H6Gk1norupVW7m5Cnd4bLcr08AytbyV/xj7f/kQ==",
       "license": "MIT",
       "dependencies": {
@@ -5718,6 +6017,19 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/miller-rabin": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
@@ -5970,16 +6282,33 @@
       }
     },
     "node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-6.0.0.tgz",
+      "integrity": "sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "path-key": "^3.0.0"
+        "path-key": "^4.0.0",
+        "unicorn-magic": "^0.3.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm-run-path/node_modules/path-key": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/nwsapi": {
@@ -6122,16 +6451,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "wrappy": "1"
-      }
-    },
     "node_modules/one-time": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/one-time/-/one-time-1.0.0.tgz",
@@ -6306,16 +6625,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/path-is-absolute": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/path-key": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -6383,13 +6692,13 @@
       "license": "ISC"
     },
     "node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=8.6"
+        "node": ">=12"
       },
       "funding": {
         "url": "https://github.com/sponsors/jonschlinkert"
@@ -6688,18 +6997,6 @@
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
       "license": "MIT"
     },
-    "node_modules/psl": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
-      "integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==",
-      "license": "MIT",
-      "dependencies": {
-        "punycode": "^2.3.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/lupomontero"
-      }
-    },
     "node_modules/public-encrypt": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
@@ -6756,12 +7053,6 @@
         "node": ">=0.4.x"
       }
     },
-    "node_modules/querystringify": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
-      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
-      "license": "MIT"
-    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -6818,12 +7109,12 @@
       }
     },
     "node_modules/react-blockly": {
-      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/react-blockly/-/react-blockly-7.3.0.tgz",
-      "integrity": "sha512-moaaxX0u3gSyToO82F2ahIOj+HmcTWcy9dXxboh8VsMFxSE2ebPUltLMEfANXpCqzoY+ajqiTgb4g+qudZ34aw==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/react-blockly/-/react-blockly-9.0.0.tgz",
+      "integrity": "sha512-EzvGpaYYjbTbsenQov7UyrxvnjqitqJ03wBY4Rz0Q/9tfpVTZ4Lx4um0sDG6xY5KsWzyOIuo60KablYCOr8LUQ==",
       "license": "MIT",
       "dependencies": {
-        "blockly": ">= 3.20200024.0",
+        "blockly": ">= 11.0.0",
         "prop-types": "^15.8.1"
       },
       "peerDependencies": {
@@ -6901,16 +7192,17 @@
       }
     },
     "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
       "engines": {
-        "node": ">=8.10.0"
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
       }
     },
     "node_modules/reflect.getprototypeof": {
@@ -6981,12 +7273,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/requires-port": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
-      "license": "MIT"
-    },
     "node_modules/resolve": {
       "version": "2.0.0-next.5",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
@@ -7026,23 +7312,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/rimraf": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "deprecated": "Rimraf versions prior to v4 are no longer supported",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/ripemd160": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.3.tgz",
@@ -7163,9 +7432,9 @@
       }
     },
     "node_modules/rrweb-cssom": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
-      "integrity": "sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==",
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz",
+      "integrity": "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==",
       "license": "MIT"
     },
     "node_modules/run-parallel": {
@@ -7828,53 +8097,6 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
-    "node_modules/sucrase/node_modules/brace-expansion": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
-      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/sucrase/node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/sucrase/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -7951,6 +8173,80 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tailwindcss/node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/tailwindcss/node_modules/resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
@@ -8026,13 +8322,6 @@
       "integrity": "sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==",
       "license": "MIT"
     },
-    "node_modules/text-table": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -8111,20 +8400,24 @@
         }
       }
     },
-    "node_modules/tinyglobby/node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "dev": true,
+    "node_modules/tldts": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.86.tgz",
+      "integrity": "sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==",
       "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=12"
+      "dependencies": {
+        "tldts-core": "^6.1.86"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
+      "bin": {
+        "tldts": "bin/cli.js"
       }
     },
+    "node_modules/tldts-core": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.86.tgz",
+      "integrity": "sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==",
+      "license": "MIT"
+    },
     "node_modules/to-buffer": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/to-buffer/-/to-buffer-1.2.2.tgz",
@@ -8154,30 +8447,27 @@
       }
     },
     "node_modules/tough-cookie": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
-      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.1.2.tgz",
+      "integrity": "sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==",
       "license": "BSD-3-Clause",
       "dependencies": {
-        "psl": "^1.1.33",
-        "punycode": "^2.1.1",
-        "universalify": "^0.2.0",
-        "url-parse": "^1.5.3"
+        "tldts": "^6.1.32"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">=16"
       }
     },
     "node_modules/tr46": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz",
-      "integrity": "sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.1.1.tgz",
+      "integrity": "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==",
       "license": "MIT",
       "dependencies": {
-        "punycode": "^2.3.0"
+        "punycode": "^2.3.1"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=18"
       }
     },
     "node_modules/triple-beam": {
@@ -8222,19 +8512,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/type-fest": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
-      "dev": true,
-      "license": "(MIT OR CC0-1.0)",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/typed-array-buffer": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
@@ -8352,13 +8629,17 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/universalify": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
-      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+    "node_modules/unicorn-magic": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.3.0.tgz",
+      "integrity": "sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">= 4.0.0"
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/update-browserslist-db": {
@@ -8416,16 +8697,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/url-parse": {
-      "version": "1.5.10",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
-      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
-      "license": "MIT",
-      "dependencies": {
-        "querystringify": "^2.1.1",
-        "requires-port": "^1.0.0"
-      }
-    },
     "node_modules/url/node_modules/punycode": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
@@ -8529,43 +8800,41 @@
       }
     },
     "node_modules/vite-plugin-checker": {
-      "version": "0.6.4",
-      "resolved": "https://registry.npmjs.org/vite-plugin-checker/-/vite-plugin-checker-0.6.4.tgz",
-      "integrity": "sha512-2zKHH5oxr+ye43nReRbC2fny1nyARwhxdm0uNYp/ERy4YvU9iZpNOsueoi/luXw5gnpqRSvjcEPxXbS153O2wA==",
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-checker/-/vite-plugin-checker-0.11.0.tgz",
+      "integrity": "sha512-iUdO9Pl9UIBRPAragwi3as/BXXTtRu4G12L3CMrjx+WVTd9g/MsqNakreib9M/2YRVkhZYiTEwdH2j4Dm0w7lw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.12.13",
-        "ansi-escapes": "^4.3.0",
-        "chalk": "^4.1.1",
-        "chokidar": "^3.5.1",
-        "commander": "^8.0.0",
-        "fast-glob": "^3.2.7",
-        "fs-extra": "^11.1.0",
-        "npm-run-path": "^4.0.1",
-        "semver": "^7.5.0",
-        "strip-ansi": "^6.0.0",
-        "tiny-invariant": "^1.1.0",
-        "vscode-languageclient": "^7.0.0",
-        "vscode-languageserver": "^7.0.0",
-        "vscode-languageserver-textdocument": "^1.0.1",
-        "vscode-uri": "^3.0.2"
+        "@babel/code-frame": "^7.27.1",
+        "chokidar": "^4.0.3",
+        "npm-run-path": "^6.0.0",
+        "picocolors": "^1.1.1",
+        "picomatch": "^4.0.3",
+        "tiny-invariant": "^1.3.3",
+        "tinyglobby": "^0.2.14",
+        "vscode-uri": "^3.1.0"
       },
       "engines": {
-        "node": ">=14.16"
+        "node": ">=16.11"
       },
       "peerDependencies": {
+        "@biomejs/biome": ">=1.7",
         "eslint": ">=7",
-        "meow": "^9.0.0",
-        "optionator": "^0.9.1",
-        "stylelint": ">=13",
+        "meow": "^13.2.0",
+        "optionator": "^0.9.4",
+        "oxlint": ">=1",
+        "stylelint": ">=16",
         "typescript": "*",
-        "vite": ">=2.0.0",
+        "vite": ">=5.4.20",
         "vls": "*",
         "vti": "*",
-        "vue-tsc": ">=1.3.9"
+        "vue-tsc": "~2.2.10 || ^3.0.0"
       },
       "peerDependenciesMeta": {
+        "@biomejs/biome": {
+          "optional": true
+        },
         "eslint": {
           "optional": true
         },
@@ -8575,6 +8844,9 @@
         "optionator": {
           "optional": true
         },
+        "oxlint": {
+          "optional": true
+        },
         "stylelint": {
           "optional": true
         },
@@ -8592,29 +8864,6 @@
         }
       }
     },
-    "node_modules/vite-plugin-checker/node_modules/commander": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
-      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 12"
-      }
-    },
-    "node_modules/vite-plugin-checker/node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/vite-plugin-node-polyfills": {
       "version": "0.24.0",
       "resolved": "https://registry.npmjs.org/vite-plugin-node-polyfills/-/vite-plugin-node-polyfills-0.24.0.tgz",
@@ -8650,20 +8899,6 @@
         }
       }
     },
-    "node_modules/vite/node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -8671,82 +8906,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/vscode-jsonrpc": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-6.0.0.tgz",
-      "integrity": "sha512-wnJA4BnEjOSyFMvjZdpiOwhSq9uDoK8e/kpRJDTaMYzwlkrhG1fwDIZI94CLsLzlCK5cIbMMtFlJlfR57Lavmg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.0.0 || >=10.0.0"
-      }
-    },
-    "node_modules/vscode-languageclient": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/vscode-languageclient/-/vscode-languageclient-7.0.0.tgz",
-      "integrity": "sha512-P9AXdAPlsCgslpP9pRxYPqkNYV7Xq8300/aZDpO35j1fJm/ncize8iGswzYlcvFw5DQUx4eVk+KvfXdL0rehNg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "minimatch": "^3.0.4",
-        "semver": "^7.3.4",
-        "vscode-languageserver-protocol": "3.16.0"
-      },
-      "engines": {
-        "vscode": "^1.52.0"
-      }
-    },
-    "node_modules/vscode-languageclient/node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/vscode-languageserver": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/vscode-languageserver/-/vscode-languageserver-7.0.0.tgz",
-      "integrity": "sha512-60HTx5ID+fLRcgdHfmz0LDZAXYEV68fzwG0JWwEPBode9NuMYTIxuYXPg4ngO8i8+Ou0lM7y6GzaYWbiDL0drw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "vscode-languageserver-protocol": "3.16.0"
-      },
-      "bin": {
-        "installServerIntoExtension": "bin/installServerIntoExtension"
-      }
-    },
-    "node_modules/vscode-languageserver-protocol": {
-      "version": "3.16.0",
-      "resolved": "https://registry.npmjs.org/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.16.0.tgz",
-      "integrity": "sha512-sdeUoAawceQdgIfTI+sdcwkiK2KU+2cbEYA0agzM2uqaUy2UpnnGHtWTHVEtS0ES4zHU0eMFRGN+oQgDxlD66A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "vscode-jsonrpc": "6.0.0",
-        "vscode-languageserver-types": "3.16.0"
-      }
-    },
-    "node_modules/vscode-languageserver-textdocument": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.12.tgz",
-      "integrity": "sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/vscode-languageserver-types": {
-      "version": "3.16.0",
-      "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.16.0.tgz",
-      "integrity": "sha512-k8luDIWJWyenLc5ToFQQMaSrqCHiLwyKPHKPQZ5zz21vM+vIVUSvsRpcbiECH4WR88K2XZqc4ScRcZ7nk/jbeA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/vscode-uri": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz",
@@ -8755,15 +8914,15 @@
       "license": "MIT"
     },
     "node_modules/w3c-xmlserializer": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
-      "integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
       "license": "MIT",
       "dependencies": {
-        "xml-name-validator": "^4.0.0"
+        "xml-name-validator": "^5.0.0"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=18"
       }
     },
     "node_modules/webidl-conversions": {
@@ -8776,37 +8935,37 @@
       }
     },
     "node_modules/whatwg-encoding": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
-      "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
       "license": "MIT",
       "dependencies": {
         "iconv-lite": "0.6.3"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/whatwg-mimetype": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
-      "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
       "license": "MIT",
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/whatwg-url": {
-      "version": "12.0.1",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-12.0.1.tgz",
-      "integrity": "sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==",
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.2.0.tgz",
+      "integrity": "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==",
       "license": "MIT",
       "dependencies": {
-        "tr46": "^4.1.1",
+        "tr46": "^5.1.0",
         "webidl-conversions": "^7.0.0"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=18"
       }
     },
     "node_modules/which": {
@@ -9063,13 +9222,6 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
-    "node_modules/wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/ws": {
       "version": "8.18.3",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
@@ -9092,12 +9244,12 @@
       }
     },
     "node_modules/xml-name-validator": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
-      "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
       "license": "Apache-2.0",
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/xmlchars": {
@@ -9134,6 +9286,30 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.12.tgz",
+      "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zod-validation-error": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-4.0.2.tgz",
+      "integrity": "sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.0 || ^4.0.0"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index e1bc71f..9c4daa6 100644
--- a/package.json
+++ b/package.json
@@ -10,35 +10,35 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@blockly/field-colour": "^4.0.0",
-    "@types/w3c-web-serial": "^1.0.3",
-    "axios": "^1.7.5",
-    "blockly": "^10.0.0",
-    "classnames": "^2.3.2",
+    "@blockly/field-colour": "^6.0.0",
+    "@types/w3c-web-serial": "^1.0.8",
+    "axios": "^1.12.2",
+    "blockly": "^12.3.1",
+    "classnames": "^2.5.1",
     "jaculus-tools": "^0.0.23",
-    "react": "^18.2.0",
-    "react-blockly": "^7.2.2",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-blockly": "^9.0.0",
+    "react-dom": "^18.3.1",
     "react-syntax-highlighter": "^15.6.6",
     "tailwind-override": "^0.6.1",
-    "typescript": "^5.1.6",
+    "typescript": "^5.9.3",
     "util": "^0.12.5"
   },
   "devDependencies": {
     "@types/node": "^20.4.1",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
-    "@types/react-syntax-highlighter": "^15.5.7",
-    "@vitejs/plugin-react": "^4.0.1",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.44.0",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.1",
-    "postcss": "^8.4.25",
-    "tailwindcss": "^3.4.10",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@vitejs/plugin-react": "^5.0.4",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.37.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^6.1.1",
+    "eslint-plugin-react-refresh": "^0.4.23",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.18",
     "vite": "^7.1.9",
-    "vite-plugin-checker": "^0.6.1",
+    "vite-plugin-checker": "^0.11.0",
     "vite-plugin-node-polyfills": "^0.24.0"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
index 111d13b..6376f3a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -28,7 +28,7 @@ function App() {
     return (
         <DeviceProvider >
             <GenerateCodeProvider>
-                <div className="flex flex-col h-full w-full">
+                <div className="flex flex-col h-full w-full light">
                     <Header />
                     <TopBar 
                         currentWorkspaceJson={currentWorkspaceJson}
diff --git a/src/components/buttons/Button.tsx b/src/components/buttons/Button.tsx
index 4a67d4c..dfe40a5 100644
--- a/src/components/buttons/Button.tsx
+++ b/src/components/buttons/Button.tsx
@@ -1,9 +1,6 @@
-import classNamesOriginal, {Argument} from "classnames";
-import {overrideTailwindClasses} from "tailwind-override";
-import {FC, InputHTMLAttributes} from "react";
 
-export const classNamesOverride = (...args: Argument[]) =>
-    overrideTailwindClasses(classNamesOriginal(...args));
+import { classNamesOverride } from "../../utils/classNamesOverride";
+import { FC, InputHTMLAttributes } from "react";
 
 
 export interface ButtonProps extends InputHTMLAttributes<HTMLInputElement> {
@@ -11,7 +8,6 @@ export interface ButtonProps extends InputHTMLAttributes<HTMLInputElement> {
     classNames?: string,
     onClick?: () => void,
     active?: boolean,
-
 }
 
 
diff --git a/src/components/buttons/CopyBtn.tsx b/src/components/buttons/CopyBtn.tsx
index 0e20f5f..ab136e8 100644
--- a/src/components/buttons/CopyBtn.tsx
+++ b/src/components/buttons/CopyBtn.tsx
@@ -1,5 +1,6 @@
 import { FC, InputHTMLAttributes, useState } from "react";
-import Button, { classNamesOverride } from "./Button";
+import Button from "./Button";
+import { classNamesOverride } from "../../utils/classNamesOverride";
 import { useGenerateCode } from "../../context/GenerateCodeContext";
 
 export interface CopyBtnProps extends InputHTMLAttributes<HTMLInputElement> {
diff --git a/src/components/buttons/LoadBtn.tsx b/src/components/buttons/LoadBtn.tsx
index 123e332..56c2485 100644
--- a/src/components/buttons/LoadBtn.tsx
+++ b/src/components/buttons/LoadBtn.tsx
@@ -1,5 +1,6 @@
 import { FC, InputHTMLAttributes, useState } from "react";
-import Button, { classNamesOverride } from "./Button";
+import Button from "./Button";
+import { classNamesOverride } from "../../utils/classNamesOverride";
 import { loadWorkspaceFromFile, isValidWorkspaceJson } from "../../utils/blocklyStorage";
 
 export interface LoadBtnProps extends InputHTMLAttributes<HTMLInputElement> {
diff --git a/src/components/buttons/SaveBtn.tsx b/src/components/buttons/SaveBtn.tsx
index 1558226..8bcd0da 100644
--- a/src/components/buttons/SaveBtn.tsx
+++ b/src/components/buttons/SaveBtn.tsx
@@ -1,5 +1,6 @@
 import { FC, InputHTMLAttributes, useState } from "react";
-import Button, { classNamesOverride } from "./Button";
+import Button from "./Button";
+import { classNamesOverride } from "../../utils/classNamesOverride";
 import { saveWorkspaceToFile } from "../../utils/blocklyStorage";
 
 export interface SaveBtnProps extends InputHTMLAttributes<HTMLInputElement> {
diff --git a/src/components/labels/Label.tsx b/src/components/labels/Label.tsx
index c907a8f..6232c29 100644
--- a/src/components/labels/Label.tsx
+++ b/src/components/labels/Label.tsx
@@ -1,9 +1,6 @@
-import classNamesOriginal, {Argument} from "classnames";
-import {overrideTailwindClasses} from "tailwind-override";
-import {FC, InputHTMLAttributes} from "react";
 
-export const classNamesOverride = (...args: Argument[]) =>
-    overrideTailwindClasses(classNamesOriginal(...args));
+import { classNamesOverride } from "../../utils/classNamesOverride";
+import { FC, InputHTMLAttributes } from "react";
 
 
 export interface LabelProps extends InputHTMLAttributes<HTMLInputElement> {
diff --git a/src/components/topLevel/BlocklyEditor.tsx b/src/components/topLevel/BlocklyEditor.tsx
index 6456aaf..c1c1012 100644
--- a/src/components/topLevel/BlocklyEditor.tsx
+++ b/src/components/topLevel/BlocklyEditor.tsx
@@ -1,9 +1,9 @@
 import {FC, InputHTMLAttributes, useRef, useState, useEffect} from "react";
 import {useGenerateCode} from "../../context/GenerateCodeContext";
-import Blockly from "blockly";
-import {javascriptGenerator} from "blockly/javascript";
-import {BlocklyWorkspace} from "react-blockly";
+import {javascriptGenerator as jsg} from "blockly/javascript";
+import {BlocklyWorkspace, WorkspaceSvg} from "react-blockly";
 import "./../../customBlocks/customBlocks";
+import "../../styles/blockly-custom.css";
 
 import {toolbox} from "../../customBlocks/toolbox";
 export interface HeaderProps extends InputHTMLAttributes<HTMLInputElement> {
@@ -29,10 +29,10 @@ const BlocklyEditor: FC<HeaderProps> = ({ onWorkspaceChange, externalJson }) =>
         }
     }, [externalJson]);
 
-    const handleWorkspaceChange = (newWorkspace: Blockly.WorkspaceSvg) => {
+    const handleWorkspaceChange = (newWorkspace: WorkspaceSvg) => {
         console.log("Workspace changed")
         try {
-            let jsCode = javascriptGenerator.workspaceToCode(newWorkspace);
+            let jsCode = jsg.workspaceToCode(newWorkspace);
             setCode(jsCode);
         } catch (e) {
             console.error("Error generating code: " + e);
@@ -52,17 +52,99 @@ const BlocklyEditor: FC<HeaderProps> = ({ onWorkspaceChange, externalJson }) =>
     return (
         <BlocklyWorkspace
             key={workspaceKey} // Force re-mount when key changes
-            className="w-full h-full"
+            className="w-full h-full blockly-custom-theme"
             toolboxConfiguration={toolbox}
             onWorkspaceChange={handleWorkspaceChange}
             initialJson={json}
             onJsonChange={onJsonChange}
             workspaceConfiguration={{
                 renderer: "zelos",
+                theme: {
+                    name: "custom",
+                    base: "classic", // Can be 'classic', 'modern', or 'deuteranopia'
+                    componentStyles: {
+                        workspaceBackgroundColour: "#f7fafc",
+                        toolboxBackgroundColour: "#2d3748",
+                        toolboxForegroundColour: "#f7fafc",
+                        flyoutBackgroundColour: "#1a202c",
+                        flyoutForegroundColour: "#f7fafc",
+                        flyoutOpacity: 1,
+                        scrollbarColour: "#4a5568",
+                        insertionMarkerColour: "#60a5fa",
+                        insertionMarkerOpacity: 0.3,
+                        markerColour: "#60a5fa",
+                        cursorColour: "#60a5fa"
+                    },
+                    blockStyles: {
+                        logic_blocks: {
+                            colourPrimary: "#615BA5",
+                            colourSecondary: "#715CA5", 
+                            colourTertiary: "#5B4A95"
+                        },
+                        loop_blocks: {
+                            colourPrimary: "#5B67A5",
+                            colourSecondary: "#6B77B5",
+                            colourTertiary: "#4B5795"
+                        },
+                        math_blocks: {
+                            colourPrimary: "#5B80A5",
+                            colourSecondary: "#6B90B5",
+                            colourTertiary: "#4B7095"
+                        },
+                        text_blocks: {
+                            colourPrimary: "#5BA55B",
+                            colourSecondary: "#6BB56B",
+                            colourTertiary: "#4B954B"
+                        },
+                        list_blocks: {
+                            colourPrimary: "#5BA55B",
+                            colourSecondary: "#6BB56B",
+                            colourTertiary: "#4B954B"
+                        },
+                        variable_blocks: {
+                            colourPrimary: "#A55B80",
+                            colourSecondary: "#B56B90",
+                            colourTertiary: "#954B70"
+                        },
+                        procedure_blocks: {
+                            colourPrimary: "#995BA5",
+                            colourSecondary: "#A96BB5",
+                            colourTertiary: "#894B95"
+                        }
+                    },
+                    categoryStyles: {
+                        logic_category: {
+                            colour: "#615BA5"
+                        },
+                        loop_category: {
+                            colour: "#5B67A5"
+                        },
+                        math_category: {
+                            colour: "#5B80A5"
+                        },
+                        text_category: {
+                            colour: "#5BA55B"
+                        },
+                        list_category: {
+                            colour: "#5BA55B"
+                        },
+                        variable_category: {
+                            colour: "#A55B80"
+                        },
+                        procedure_category: {
+                            colour: "#995BA5"
+                        }
+                    },
+                    fontStyle: {
+                        family: "Inter, system-ui, sans-serif",
+                        weight: "normal",
+                        size: 12
+                    }
+                },
                 grid: {
                     spacing: 20,
                     length: 3,
-                    colour: "#ccc",
+                    colour: "#e2e8f0",
                     snap: true
                 },
                 zoom: {
@@ -71,8 +153,8 @@ const BlocklyEditor: FC<HeaderProps> = ({ onWorkspaceChange, externalJson }) =>
                     startScale: 1.0,
                     maxScale: 3,
                     minScale: 0.3,
-                    scaleSpeed: 1.2
-                },
+                    scaleSpeed: 1.1,
+                }
             }}
         />
     )
diff --git a/src/components/topLevel/CodeResult.tsx b/src/components/topLevel/CodeResult.tsx
index 929109c..4d0c259 100644
--- a/src/components/topLevel/CodeResult.tsx
+++ b/src/components/topLevel/CodeResult.tsx
@@ -1,29 +1,29 @@
-import {FC, InputHTMLAttributes} from "react";
-import {useGenerateCode} from "../../context/GenerateCodeContext";
+import { FC, InputHTMLAttributes } from "react";
+import { useGenerateCode } from "../../context/GenerateCodeContext";
 import SyntaxHighlighter from 'react-syntax-highlighter';
-import { atomOneDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { atomOneDark as theme } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 
 
+theme.hljs.padding = "10px";
+
 // @ts-expect-error
-import {INITIAL_TOOLBOX_JSON} from "../../blockly-config";
+import { INITIAL_TOOLBOX_JSON } from "../../blockly-config";
 
 export interface CodeResultProps extends InputHTMLAttributes<HTMLInputElement> {
 }
 
 
-const CodeResult: FC<CodeResultProps> = ({}) => {
-    const {code} = useGenerateCode();
+const CodeResult: FC<CodeResultProps> = ({ }) => {
+    const { code } = useGenerateCode();
 
 
     return (
         <div className="code-result w-full overflow-auto hide-scrollbar font-mono rounded">
             <SyntaxHighlighter
-              language="javascript" 
-              style={atomOneDark} 
-              showLineNumbers 
-              lineNumberContainerStyle={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', }} 
-              lineNumberStyle={{ gridColumn: '1', minWidth: 'unset', width: '1.5em', textAlign: 'right', paddingRight: 'unset', marginRight: '1em', marginLeft: '0',}}
-              >
+                language="javascript"
+                style={theme}
+                showLineNumbers
+            >
                 {code}
             </SyntaxHighlighter>
         </div>
diff --git a/src/components/topLevel/Monitor.tsx b/src/components/topLevel/Monitor.tsx
index ef7c1ac..e581ed0 100644
--- a/src/components/topLevel/Monitor.tsx
+++ b/src/components/topLevel/Monitor.tsx
@@ -5,11 +5,8 @@ import { Input } from "blockly";
 import { ValueInput } from "blockly/core/inputs";
 import Label from "../labels/Label";
 
-import classNamesOriginal, {Argument} from "classnames";
-import {overrideTailwindClasses} from "tailwind-override";
 
-export const classNamesOverride = (...args: Argument[]) =>
-    overrideTailwindClasses(classNamesOriginal(...args));
+import { classNamesOverride } from "../../utils/classNamesOverride";
 
 
 export interface HeaderProps extends InputHTMLAttributes<HTMLInputElement> { }
diff --git a/src/customBlocks/categories/ADC.ts b/src/customBlocks/categories/ADC.ts
index 5ff8d75..24ec700 100644
--- a/src/customBlocks/categories/ADC.ts
+++ b/src/customBlocks/categories/ADC.ts
@@ -1,6 +1,6 @@
-import Blockly, { BlockSvg } from "blockly";
-import { javascriptGenerator, Order } from "blockly/javascript";
-import { CodeGenerator } from "blockly/core/generator";
+import { Block, Blocks, FieldDropdown } from "blockly";
+import { JavascriptGenerator as JsG, javascriptGenerator as jsg, Order } from "blockly/javascript";
+
 import { toolbox } from "../toolbox";
 import { addItemToToolbox, dummy, value, inline, output, color } from "../customBlocks";
 
@@ -12,7 +12,7 @@ addItemToToolbox(toolbox, "ADC",
     },
 );
 
-Blockly.Blocks['adc_import'] = {
+Blocks['adc_import'] = {
     init: function () {
         dummy(this, 'Import ADC');
         inline(this);
@@ -20,8 +20,8 @@ Blockly.Blocks['adc_import'] = {
     }
 }
 
-javascriptGenerator.forBlock['adc_import'] = function (b: BlockSvg, g: CodeGenerator) {
-    return  "import * as adc from 'adc';\n";
+jsg.forBlock['adc_import'] = function (b: Block, g: JsG) {
+    return "import * as adc from 'adc';\n";
 }
 
 // ---- //
@@ -41,7 +41,7 @@ addItemToToolbox(toolbox, "ADC",
     }
 );
 
-Blockly.Blocks['adc_configure'] = {
+Blocks['adc_configure'] = {
     init: function () {
         dummy(this, 'Configure ADC');
         value(this, "PIN", "  pin:");
@@ -50,8 +50,8 @@ Blockly.Blocks['adc_configure'] = {
     }
 };
 
-javascriptGenerator.forBlock['adc_configure'] = function (b: BlockSvg, g: CodeGenerator) {
-    return  'adc.configure(' + g.valueToCode(b, 'PIN', 0) + ');\n';
+jsg.forBlock['adc_configure'] = function (b: Block, g: JsG) {
+    return 'adc.configure(' + g.valueToCode(b, 'PIN', 0) + ');\n';
 }
 
 // ---- //
@@ -71,7 +71,7 @@ addItemToToolbox(toolbox, "ADC",
     },
 );
 
-Blockly.Blocks['adc_read'] = {
+Blocks['adc_read'] = {
     init: function () {
         dummy(this, 'ADC read');
         value(this, "PIN", "  pin:");
@@ -80,6 +80,6 @@ Blockly.Blocks['adc_read'] = {
     }
 }
 
-javascriptGenerator.forBlock['adc_read'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['adc_read'] = function (b: Block, g: JsG) {
     return ['adc.read(' + g.valueToCode(b, 'PIN', 0) + ')', Order.NONE];
 }
diff --git a/src/customBlocks/categories/Basic.ts b/src/customBlocks/categories/Basic.ts
index fec622b..d0b57a3 100644
--- a/src/customBlocks/categories/Basic.ts
+++ b/src/customBlocks/categories/Basic.ts
@@ -1,6 +1,6 @@
-import Blockly, { BlockSvg } from "blockly";
-import { javascriptGenerator, Order } from "blockly/javascript";
-import { CodeGenerator } from "blockly/core/generator";
+import { Block, Blocks, inputs } from "blockly";
+import { JavascriptGenerator as JsG, javascriptGenerator as jsg, Order } from "blockly/javascript";
+
 import { toolbox } from "../toolbox";
 import { addItemToToolbox, dummy, value, inline, output, color, dropdown, statement, getVal, getField, getStatement } from "../customBlocks";
 import { stat } from "fs";
@@ -14,14 +14,13 @@ addItemToToolbox(toolbox, "Basic",
             '      <field name="TYPE">log</field>\n' +
             '      <value name="TEXT">\n' +
             '        <shadow type="text">\n' +
-            '          <field name="text">abc</field>\n' +
             "        </shadow>\n" +
             "      </value>\n" +
             "    </block>\n",
     },
 );
 
-Blockly.Blocks['console'] = {
+Blocks['console'] = {
     init: function () {
         dropdown(this, "TYPE", "console", [["log", "log"], ["error", "error"], ["info", "info"], ["debug", "debug"]]);
         value(this, "TEXT", "");
@@ -30,7 +29,7 @@ Blockly.Blocks['console'] = {
     }
 };
 
-javascriptGenerator.forBlock['console'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['console'] = function (b: Block, g: JsG) {
     return `console.${getField(b, "TYPE")}(${getVal(g, b, "TEXT")});\n`;
 };
 
@@ -45,7 +44,7 @@ addItemToToolbox(toolbox, "Basic",
     },
 );
 
-Blockly.Blocks['await'] = {
+Blocks['await'] = {
     init: function () {
         dummy(this, 'Await');
         statement(this, "CODE", "  code:");
@@ -54,7 +53,7 @@ Blockly.Blocks['await'] = {
     }
 }
 
-javascriptGenerator.forBlock['await'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['await'] = function (b: Block, g: JsG) {
     const code = getStatement(g, b, "CODE");
     return code
         .split('\n')
@@ -73,25 +72,24 @@ addItemToToolbox(toolbox, "Basic",
             '    <block type="sleep">\n' +
             '      <value name="TIME">\n' +
             '        <shadow type="math_number">\n' +
-            '          <field name="num">100</field>\n' +
             "        </shadow>\n" +
             "      </value>\n" +
             "    </block>\n",
     },
 );
 
-Blockly.Blocks['sleep'] = {
+Blocks['sleep'] = {
     init: function () {
         dummy(this, 'Sleep');
         this.appendValueInput("TIME")
-            .setAlign(Blockly.inputs.Align.RIGHT)
+            .setAlign(inputs.Align.RIGHT)
             .appendField("ms:")
         output(this, Function);
         color(this, "Basic");
     }
 }
 
-javascriptGenerator.forBlock['sleep'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['sleep'] = function (b: Block, g: JsG) {
     return ['sleep(' + getVal(g, b, 'TIME') + ')', Order.ATOMIC];
 }
 
@@ -105,14 +103,13 @@ addItemToToolbox(toolbox, "Basic",
             '    <block type="raw_code">\n' +
             '      <value name="CODE">\n' +
             '        <shadow type="text">\n' +
-            '          <field name="text"></field>\n' +
             "        </shadow>\n" +
             "      </value>\n" +
             "    </block>\n",
     },
 );
 
-Blockly.Blocks['raw_code'] = {
+Blocks['raw_code'] = {
     init: function () {
         value(this, "CODE", "");
         inline(this);
@@ -120,7 +117,7 @@ Blockly.Blocks['raw_code'] = {
     }
 }
 
-javascriptGenerator.forBlock['raw_code'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['raw_code'] = function (b: Block, g: JsG) {
     return getVal(g, b, 'CODE').replaceAll("'", "") + '\n';
 }
 
@@ -134,14 +131,13 @@ addItemToToolbox(toolbox, "Basic",
             '    <block type="comment">\n' +
             '      <value name="COMMENT">\n' +
             '        <shadow type="text">\n' +
-            '          <field name="text"></field>\n' +
             "        </shadow>\n" +
             "      </value>\n" +
             "    </block>\n",
     },
 );
 
-Blockly.Blocks['comment'] = {
+Blocks['comment'] = {
     init: function () {
         value(this, 'COMMENT', '  //');
         inline(this);
@@ -149,7 +145,7 @@ Blockly.Blocks['comment'] = {
     }
 }
 
-javascriptGenerator.forBlock['comment'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['comment'] = function (b: Block, g: JsG) {
     return '// ' + g.valueToCode(b, 'COMMENT', 0).replaceAll("'", "") + '\n';
 }
 
@@ -164,19 +160,17 @@ addItemToToolbox(toolbox, "Basic",
             '    <block type="set_interval">\n' +
             '      <value name="NAME">\n' +
             '        <shadow type="text">\n' +
-            '          <field name="text">abc</field>\n' +
             "        </shadow>\n" +
             "      </value>\n" +
             '      <value name="INTERVAL">\n' +
             '        <shadow type="math_number">\n' +
-            '          <field name="NUM">1000</field>\n' +
             "        </shadow>\n" +
             "      </value>\n" +
             "    </block>\n",
     },
 );
 
-Blockly.Blocks['set_interval'] = {
+Blocks['set_interval'] = {
     init: function () {
 
         dummy(this, 'Set interval');
@@ -188,7 +182,7 @@ Blockly.Blocks['set_interval'] = {
     }
 }
 
-javascriptGenerator.forBlock['set_interval'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['set_interval'] = function (b: Block, g: JsG) {
     return '\nvar ' + getVal(g, b, 'NAME').replaceAll("'", "") + 'Interval = setInterval(function(){\n' + getStatement(g, b, "CODE") + '}, ' + getVal(g, b, 'INTERVAL') + ');\n';
 }
 
@@ -202,14 +196,13 @@ addItemToToolbox(toolbox, "Basic",
             '    <block type="clear_interval">\n' +
             '      <value name="NAME">\n' +
             '        <shadow type="text">\n' +
-            '          <field name="text">abc</field>\n' +
             "        </shadow>\n" +
             "      </value>\n" +
             "    </block>\n",
     },
 );
 
-Blockly.Blocks['clear_interval'] = {
+Blocks['clear_interval'] = {
     init: function () {
         dummy(this, 'Clear interval');
         value(this, "NAME", "  name:");
@@ -218,7 +211,7 @@ Blockly.Blocks['clear_interval'] = {
     }
 }
 
-javascriptGenerator.forBlock['clear_interval'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['clear_interval'] = function (b: Block, g: JsG) {
     return 'clearInterval(' + getVal(g, b, 'NAME').replaceAll("'", "") + 'Interval);\n';
 }
 
@@ -232,19 +225,17 @@ addItemToToolbox(toolbox, "Basic",
             '    <block type="set_timeout">\n' +
             '      <value name="NAME">\n' +
             '        <shadow type="text">\n' +
-            '          <field name="text">abc</field>\n' +
             "        </shadow>\n" +
             "      </value>\n" +
             '      <value name="TIMEOUT">\n' +
             '        <shadow type="math_number">\n' +
-            '          <field name="NUM">1000</field>\n' +
             "        </shadow>\n" +
             "      </value>\n" +
             "    </block>\n",
     },
 );
 
-Blockly.Blocks['set_timeout'] = {
+Blocks['set_timeout'] = {
     init: function () {
         dummy(this, 'Set timeout');
         value(this, "NAME", "  name:");
@@ -255,7 +246,7 @@ Blockly.Blocks['set_timeout'] = {
     }
 }
 
-javascriptGenerator.forBlock['set_timeout'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['set_timeout'] = function (b: Block, g: JsG) {
     return '\nvar ' + getVal(g, b, 'NAME').replaceAll("'", "") + 'Timeout = setTimeout(function(){\n' + getStatement(g, b, 'CODE') + '}, ' + getVal(g, b, 'TIMEOUT') + ');\n';
 }
 
@@ -269,14 +260,13 @@ addItemToToolbox(toolbox, "Basic",
             '    <block type="clear_timeout">\n' +
             '      <value name="NAME">\n' +
             '        <shadow type="text">\n' +
-            '          <field name="text">abc</field>\n' +
             "        </shadow>\n" +
             "      </value>\n" +
             "    </block>\n",
     },
 );
 
-Blockly.Blocks['clear_timeout'] = {
+Blocks['clear_timeout'] = {
     init: function () {
         dummy(this, 'Clear timeout');
         value(this, "NAME", "  name:");
@@ -285,6 +275,6 @@ Blockly.Blocks['clear_timeout'] = {
     }
 }
 
-javascriptGenerator.forBlock['clear_timeout'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['clear_timeout'] = function (b: Block, g: JsG) {
     return 'clearTimeout(' + g.valueToCode(b, 'NAME', 0).replaceAll("'", "") + 'Timeout);\n';;
 }
\ No newline at end of file
diff --git a/src/customBlocks/categories/Colors.ts b/src/customBlocks/categories/Colors.ts
deleted file mode 100644
index 0e09716..0000000
--- a/src/customBlocks/categories/Colors.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import Blockly, { BlockSvg } from "blockly";
-import { javascriptGenerator, Order } from "blockly/javascript";
-import { CodeGenerator } from "blockly/core/generator";
-import { toolbox } from "../toolbox";
-import { addItemToToolbox, dummy, value, inline, output, color } from "../customBlocks";
-
-// Colors import
-addItemToToolbox(toolbox, "Colors",
-    {
-        kind: "block",
-        type: "colors_import",
-    },
-);
-
-Blockly.Blocks['colors_import'] = {
-    init: function () {
-        dummy(this, 'Import Colors');
-        inline(this);
-        color(this, "Colors");
-    }
-}
-
-javascriptGenerator.forBlock['colors_import'] = function (b: BlockSvg, g: CodeGenerator) {
-    return "import * as colors from './libs/colors.js';\n";
-}
\ No newline at end of file
diff --git a/src/customBlocks/categories/CustomButton.ts b/src/customBlocks/categories/CustomButton.ts
index 4e5cffb..9ef5eed 100644
--- a/src/customBlocks/categories/CustomButton.ts
+++ b/src/customBlocks/categories/CustomButton.ts
@@ -1,9 +1,9 @@
-import Blockly, { BlockSvg } from "blockly";
-import { javascriptGenerator} from "blockly/javascript";
-import { CodeGenerator } from "blockly/core/generator";
+import { Block, Blocks, FieldDropdown } from "blockly";
+import { javascriptGenerator as jsg, JavascriptGenerator as JsG } from "blockly/javascript";
+
 import { value, inline, color, getVal, getStatement, getField } from "../customBlocks";
 
-Blockly.Blocks['async_func'] = {
+Blocks['async_func'] = {
     init: function () {
         value(this, "NAME", "async function name");
         inline(this);
@@ -11,11 +11,11 @@ Blockly.Blocks['async_func'] = {
     }
 }
 
-javascriptGenerator.forBlock['async_func'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['async_func'] = function (b: Block, g: JsG) {
     return 'async function ' + getVal(g, b, 'NAME').replaceAll("'", "") + '(){\n' + getStatement(g, b, 'CODE') + '};\n';
 }
 
-Blockly.Blocks['call_func'] = {
+Blocks['call_func'] = {
     init: function () {
         value(this, "NAME", "function name");
         inline(this);
@@ -23,6 +23,6 @@ Blockly.Blocks['call_func'] = {
     }
 }
 
-javascriptGenerator.forBlock['call_func'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['call_func'] = function (b: Block, g: JsG) {
     return getVal(g, b, 'NAME').replaceAll("'", "") + '();\n';
 }
\ No newline at end of file
diff --git a/src/customBlocks/categories/FS.ts b/src/customBlocks/categories/FS.ts
index b27e8c4..52aeb01 100644
--- a/src/customBlocks/categories/FS.ts
+++ b/src/customBlocks/categories/FS.ts
@@ -1,6 +1,6 @@
-import Blockly, { BlockSvg } from "blockly";
-import { javascriptGenerator, Order } from "blockly/javascript";
-import { CodeGenerator } from "blockly/core/generator";
+import { Block, Blocks, FieldDropdown } from "blockly";
+import { JavascriptGenerator as JsG, javascriptGenerator as jsg, Order } from "blockly/javascript";
+
 import { toolbox } from "../toolbox";
 import { addItemToToolbox, dummy, value, inline, output, color } from "../customBlocks";
 
@@ -12,7 +12,7 @@ addItemToToolbox(toolbox, "FS",
     },
 );
 
-Blockly.Blocks['fs_import'] = {
+Blocks['fs_import'] = {
     init: function () {
         dummy(this, 'Import FS');
         inline(this);
@@ -20,6 +20,6 @@ Blockly.Blocks['fs_import'] = {
     }
 }
 
-javascriptGenerator.forBlock['fs_import'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['fs_import'] = function (b: Block, g: JsG) {
     return "import * as fs from 'fs';\n";
 }
\ No newline at end of file
diff --git a/src/customBlocks/categories/GPIO.ts b/src/customBlocks/categories/GPIO.ts
index 157df5c..ea67670 100644
--- a/src/customBlocks/categories/GPIO.ts
+++ b/src/customBlocks/categories/GPIO.ts
@@ -1,6 +1,6 @@
-import Blockly, { BlockSvg } from "blockly";
-import { javascriptGenerator, Order } from "blockly/javascript";
-import { CodeGenerator } from "blockly/core/generator";
+import { Block, Blocks, FieldDropdown } from "blockly";
+import { JavascriptGenerator as JsG, javascriptGenerator as jsg, Order } from "blockly/javascript";
+
 import { toolbox } from "../toolbox";
 import { addItemToToolbox, dummy, value, dropdown, inline, output, color, statement, getField, getVal, getStatement } from "../customBlocks";
 // GPIO import
@@ -11,7 +11,7 @@ addItemToToolbox(toolbox, "GPIO",
     },
 );
 
-Blockly.Blocks['gpio_import'] = {
+Blocks['gpio_import'] = {
     init: function () {
         dummy(this, 'Import GPIO');
         inline(this);
@@ -19,7 +19,7 @@ Blockly.Blocks['gpio_import'] = {
     }
 }
 
-javascriptGenerator.forBlock['gpio_import'] = function (b: BlockSvg, generator: CodeGenerator) {
+jsg.forBlock['gpio_import'] = function (b: Block, g: JsG) {
     return "import * as gpio from 'gpio';\n"
 }
 
@@ -43,7 +43,7 @@ addItemToToolbox(toolbox, "GPIO",
 
 );
 
-Blockly.Blocks['gpio_pinmode'] = {
+Blocks['gpio_pinmode'] = {
     init: function () {
         dummy(this, 'Set pin mode');
         value(this, "PIN", "  pin:");
@@ -53,7 +53,7 @@ Blockly.Blocks['gpio_pinmode'] = {
     }
 }
 
-javascriptGenerator.forBlock['gpio_pinmode'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['gpio_pinmode'] = function (b: Block, g: JsG) {
     return 'gpio.pinMode(' + getVal(g, b, "PIN") + ', gpio.PinMode.' + getField(b, "MODE") + ');\n';
 }
 
@@ -80,7 +80,7 @@ addItemToToolbox(toolbox, "GPIO",
 
 );
 
-Blockly.Blocks['gpio_write'] = {
+Blocks['gpio_write'] = {
     init: function () {
         dummy(this, 'Pin write');
         value(this, "PIN", "  pin:");
@@ -90,7 +90,7 @@ Blockly.Blocks['gpio_write'] = {
     }
 }
 
-javascriptGenerator.forBlock['gpio_write'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['gpio_write'] = function (b: Block, g: JsG) {
     return 'gpio.write(' + getVal(g, b, "PIN") + ', ' + getVal(g, b, "VALUE") + ');\n';
 }
 
@@ -112,7 +112,7 @@ addItemToToolbox(toolbox, "GPIO",
 
 );
 
-Blockly.Blocks['gpio_read'] = {
+Blocks['gpio_read'] = {
     init: function () {
         dummy(this, 'Pin read');
         value(this, "PIN", "  pin:");
@@ -121,7 +121,7 @@ Blockly.Blocks['gpio_read'] = {
     }
 }
 
-javascriptGenerator.forBlock['gpio_read'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['gpio_read'] = function (b: Block, g: JsG) {
     return ['gpio.read(' + getVal(g, b, "PIN") + ')', Order.NONE];
 }
 
@@ -143,7 +143,7 @@ addItemToToolbox(toolbox, "GPIO",
 
 );
 
-Blockly.Blocks['gpio_on'] = {
+Blocks['gpio_on'] = {
     init: function () {
         value(this, "PIN", "  pin:");
         dropdown(this, "MODE", "  on:", [["rising", "rising"], ["falling", "falling"], ["change", "change"]]);
@@ -154,7 +154,7 @@ Blockly.Blocks['gpio_on'] = {
     }
 }
 
-javascriptGenerator.forBlock['gpio_on'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['gpio_on'] = function (b: Block, g: JsG) {
     return "gpio.on('" + getField(b, "MODE") + "', " + getVal(g, b, "PIN") + ", (info) => {\n" + getStatement(g, b, 'CODE') + "});\n";
 }
 
@@ -176,7 +176,7 @@ addItemToToolbox(toolbox, "GPIO",
 
 );
 
-Blockly.Blocks['gpio_off'] = {
+Blocks['gpio_off'] = {
     init: function () {
         dummy(this, 'Pin off');
         value(this, "PIN", "  pin:");
@@ -186,6 +186,6 @@ Blockly.Blocks['gpio_off'] = {
     }
 }
 
-javascriptGenerator.forBlock['gpio_off'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['gpio_off'] = function (b: Block, g: JsG) {
     return "gpio.off('" + getField(b, "MODE") + "', " + getVal(g, b, "PIN") + ');\n';
 }
diff --git a/src/customBlocks/categories/GridUI.ts b/src/customBlocks/categories/GridUI.ts
index 37e00c1..14c80d0 100644
--- a/src/customBlocks/categories/GridUI.ts
+++ b/src/customBlocks/categories/GridUI.ts
@@ -1,6 +1,6 @@
-import Blockly, { BlockSvg } from "blockly";
-import { javascriptGenerator, Order } from "blockly/javascript";
-import { CodeGenerator } from "blockly/core/generator";
+import { Block, Blocks, FieldDropdown } from "blockly";
+import { JavascriptGenerator as JsG, javascriptGenerator as jsg, Order } from "blockly/javascript";
+
 import { toolbox } from "../toolbox";
 import { addItemToToolbox, dummy, value, inline, output, color } from "../customBlocks";
 // GridUI import
@@ -11,7 +11,7 @@ addItemToToolbox(toolbox, "GridUI",
     },
 );
 
-Blockly.Blocks['gridui_import'] = {
+Blocks['gridui_import'] = {
     init: function () {
         dummy(this, 'Import GridUI');
         inline(this);
@@ -19,6 +19,6 @@ Blockly.Blocks['gridui_import'] = {
     }
 }
 
-javascriptGenerator.forBlock['gridui_import'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['gridui_import'] = function (b: Block, g: JsG) {
     return "import * as gridui from 'gridui';\n"
 }
diff --git a/src/customBlocks/categories/I2C.ts b/src/customBlocks/categories/I2C.ts
index 7e11ba2..c4eccf0 100644
--- a/src/customBlocks/categories/I2C.ts
+++ b/src/customBlocks/categories/I2C.ts
@@ -1,6 +1,6 @@
-import Blockly, { BlockSvg } from "blockly";
-import { javascriptGenerator, Order } from "blockly/javascript";
-import { CodeGenerator } from "blockly/core/generator";
+import { Block, Blocks, FieldDropdown } from "blockly";
+import { JavascriptGenerator as JsG, javascriptGenerator as jsg, Order } from "blockly/javascript";
+
 import { toolbox, colors } from "../toolbox";
 import { addItemToToolbox, dummy, value, inline, output, color, getVal } from "../customBlocks";
 
@@ -12,7 +12,7 @@ addItemToToolbox(toolbox, "I2C",
     },
 );
 
-Blockly.Blocks['i2c_import'] = {
+Blocks['i2c_import'] = {
     init: function () {
         dummy(this, 'Import I2C');
         inline(this);
@@ -20,9 +20,8 @@ Blockly.Blocks['i2c_import'] = {
     }
 }
 
-javascriptGenerator.forBlock['i2c_import'] = function (b: BlockSvg, g: CodeGenerator) {
-    "import * as i2c from 'i2c';\n"
-    return 
+jsg.forBlock['i2c_import'] = function (b: Block, g: JsG) {
+    return "import * as i2c from 'i2c';\n"
 }
 
 // GPIO digitalwrite
@@ -41,7 +40,7 @@ addItemToToolbox(toolbox, "I2C",
 
 );
 
-Blockly.Blocks['i2c_find'] = {
+Blocks['i2c_find'] = {
     init: function () {
         dummy(this, 'Find I2C device');
         value(this, "PIN", "  pin:");
@@ -50,8 +49,7 @@ Blockly.Blocks['i2c_find'] = {
     }
 }
 
-javascriptGenerator.forBlock['i2c_find'] = function (b: BlockSvg, g: CodeGenerator) {
-    'i2c.find(' + getVal(g, b, 'PIN') + ');\n';
-    return 
+jsg.forBlock['i2c_find'] = function (b: Block, g: JsG) {
+    return 'i2c.find(' + getVal(g, b, 'PIN') + ');\n';
 }
 
diff --git a/src/customBlocks/categories/LEDC.ts b/src/customBlocks/categories/LEDC.ts
index 26cc0c9..d9af849 100644
--- a/src/customBlocks/categories/LEDC.ts
+++ b/src/customBlocks/categories/LEDC.ts
@@ -1,6 +1,6 @@
-import Blockly, { BlockSvg } from "blockly";
-import { javascriptGenerator, Order } from "blockly/javascript";
-import { CodeGenerator } from "blockly/core/generator";
+import { Block, Blocks, FieldDropdown } from "blockly";
+import { JavascriptGenerator as JsG, javascriptGenerator as jsg, Order } from "blockly/javascript";
+
 import { toolbox } from "../toolbox";
 import { addItemToToolbox, dummy, value, inline, output, color, getVal, getField, getStatement } from "../customBlocks";
 
@@ -14,7 +14,7 @@ addItemToToolbox(toolbox, "LEDC",
     },
 );
 
-Blockly.Blocks['ledc_import'] = {
+Blocks['ledc_import'] = {
     init: function () {
         dummy(this, 'Import LEDC');
         inline(this);
@@ -22,7 +22,7 @@ Blockly.Blocks['ledc_import'] = {
     }
 }
 
-javascriptGenerator.forBlock['ledc_import'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['ledc_import'] = function (b: Block, g: JsG) {
     return "import * as ledc from 'ledc';\n"
 }
 
@@ -48,7 +48,7 @@ addItemToToolbox(toolbox, "LEDC",
     },
 );
 
-Blockly.Blocks['ledc_configure_timer'] = {
+Blocks['ledc_configure_timer'] = {
     init: function () {
         dummy(this, 'Configure timer');
         value(this, "TIMER", "  timer:");
@@ -58,7 +58,7 @@ Blockly.Blocks['ledc_configure_timer'] = {
     }
 }
 
-javascriptGenerator.forBlock['ledc_configure_timer'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['ledc_configure_timer'] = function (b: Block, g: JsG) {
     return 'ledc.configureTimer(' + getVal(g, b, 'TIMER') + ', ' + getVal(g, b, 'FREQUENCY') + ');\n';
 }
 
@@ -89,7 +89,7 @@ addItemToToolbox(toolbox, "LEDC",
     },
 );
 
-Blockly.Blocks['ledc_configure_timer_resolution'] = {
+Blocks['ledc_configure_timer_resolution'] = {
     init: function () {
         dummy(this, 'Configure timer');
         value(this, "TIMER", "  timer:");
@@ -100,7 +100,7 @@ Blockly.Blocks['ledc_configure_timer_resolution'] = {
     }
 }
 
-javascriptGenerator.forBlock['ledc_configure_timer_resolution'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['ledc_configure_timer_resolution'] = function (b: Block, g: JsG) {
     return 'ledc.configureTimer(' + getVal(g, b, 'TIMER') + ', ' + getVal(g, b, 'FREQUENCY') + ', ' + getVal(g, b, 'RESOLUTION') + ');\n';
 }
 
@@ -136,7 +136,7 @@ addItemToToolbox(toolbox, "LEDC",
     },
 );
 
-Blockly.Blocks['ledc_configure_channel'] = {
+Blocks['ledc_configure_channel'] = {
     init: function () {
         dummy(this, 'Configure channel');
         value(this, "CHANNEL", "  channel:");
@@ -148,7 +148,7 @@ Blockly.Blocks['ledc_configure_channel'] = {
     }
 }
 
-javascriptGenerator.forBlock['ledc_configure_channel'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['ledc_configure_channel'] = function (b: Block, g: JsG) {
     return 'ledc.configureChannel(' + getVal(g, b, 'CHANNEL') + ', ' + getVal(g, b, 'PIN') + ', ' + getVal(g, b, 'TIMER') + ', ' + getVal(g, b, 'DUTY') + ');\n';
 }
 
@@ -174,7 +174,7 @@ addItemToToolbox(toolbox, "LEDC",
     },
 );
 
-Blockly.Blocks['ledc_set_frequency'] = {
+Blocks['ledc_set_frequency'] = {
     init: function () {
 
         dummy(this, 'Set frequency');
@@ -185,9 +185,9 @@ Blockly.Blocks['ledc_set_frequency'] = {
     }
 }
 
-javascriptGenerator.forBlock['ledc_set_frequency'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['ledc_set_frequency'] = function (b: Block, g: JsG) {
     return 'ledc.setFrequency(' + getVal(g, b, 'TIMER') + ', ' + getVal(g, b, 'FREQUENCY') + ');\n';
-}   
+}
 
 // ---- //  
 
@@ -211,7 +211,7 @@ addItemToToolbox(toolbox, "LEDC",
     },
 );
 
-Blockly.Blocks['ledc_set_duty'] = {
+Blocks['ledc_set_duty'] = {
     init: function () {
         dummy(this, 'Set duty');
         value(this, "CHANNEL", "  channel:");
@@ -221,7 +221,7 @@ Blockly.Blocks['ledc_set_duty'] = {
     }
 }
 
-javascriptGenerator.forBlock['ledc_set_duty'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['ledc_set_duty'] = function (b: Block, g: JsG) {
     return 'ledc.setDuty(' + getVal(g, b, 'CHANNEL') + ', ' + getVal(g, b, 'DUTY') + ');\n';
 }
 
@@ -242,7 +242,7 @@ addItemToToolbox(toolbox, "LEDC",
     },
 );
 
-Blockly.Blocks['ledc_stop_timer'] = {
+Blocks['ledc_stop_timer'] = {
     init: function () {
         dummy(this, 'Stop timer');
         value(this, "TIMER", "  timer:");
@@ -251,7 +251,7 @@ Blockly.Blocks['ledc_stop_timer'] = {
     }
 }
 
-javascriptGenerator.forBlock['ledc_stop_timer'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['ledc_stop_timer'] = function (b: Block, g: JsG) {
     return 'ledc.stopTimer(' + getVal(g, b, 'TIMER') + ');\n';
 }
 
@@ -272,7 +272,7 @@ addItemToToolbox(toolbox, "LEDC",
     },
 );
 
-Blockly.Blocks['ledc_stop_channel'] = {
+Blocks['ledc_stop_channel'] = {
     init: function () {
         dummy(this, 'Stop channel');
         value(this, "CHANNEL", "  channel:");
@@ -281,6 +281,6 @@ Blockly.Blocks['ledc_stop_channel'] = {
     }
 }
 
-javascriptGenerator.forBlock['ledc_stop_channel'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['ledc_stop_channel'] = function (b: Block, g: JsG) {
     return 'ledc.stopChannel(' + getVal(g, b, 'CHANNEL') + ');\n';
 }
\ No newline at end of file
diff --git a/src/customBlocks/categories/Motor.ts b/src/customBlocks/categories/Motor.ts
index bd86527..91062d3 100644
--- a/src/customBlocks/categories/Motor.ts
+++ b/src/customBlocks/categories/Motor.ts
@@ -1,6 +1,6 @@
-import Blockly, { BlockSvg } from "blockly";
-import { javascriptGenerator, Order } from "blockly/javascript";
-import { CodeGenerator } from "blockly/core/generator";
+import { Block, Blocks, FieldDropdown } from "blockly";
+import { JavascriptGenerator as JsG, javascriptGenerator as jsg, Order } from "blockly/javascript";
+
 import { toolbox } from "../toolbox";
 import { addItemToToolbox, dummy, value, inline, output, color } from "../customBlocks";
 
@@ -13,7 +13,7 @@ addItemToToolbox(toolbox, "Motor",
     },
 );
 
-Blockly.Blocks['motor_import'] = {
+Blocks['motor_import'] = {
     init: function () {
         dummy(this, 'Import Motor');
         inline(this);
@@ -21,6 +21,6 @@ Blockly.Blocks['motor_import'] = {
     }
 }
 
-javascriptGenerator.forBlock['motor_import'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['motor_import'] = function (b: Block, g: JsG) {
     return "import * as motor from 'motor';\n"
 }
\ No newline at end of file
diff --git a/src/customBlocks/categories/Path.ts b/src/customBlocks/categories/Path.ts
index 58b63bf..189b5fc 100644
--- a/src/customBlocks/categories/Path.ts
+++ b/src/customBlocks/categories/Path.ts
@@ -1,6 +1,6 @@
-import Blockly, { BlockSvg } from "blockly";
-import { javascriptGenerator, Order } from "blockly/javascript";
-import { CodeGenerator } from "blockly/core/generator";
+import { Block, Blocks, FieldDropdown } from "blockly";
+import { JavascriptGenerator as JsG, javascriptGenerator as jsg, Order } from "blockly/javascript";
+
 import { toolbox } from "../toolbox";
 import { addItemToToolbox, dummy, value, inline, output, color, getVal, getField, getStatement } from "../customBlocks";
 
@@ -12,7 +12,7 @@ addItemToToolbox(toolbox, "Path",
     },
 );
 
-Blockly.Blocks['path_import'] = {
+Blocks['path_import'] = {
     init: function () {
         dummy(this, 'Import Path');
         inline(this);
@@ -20,7 +20,7 @@ Blockly.Blocks['path_import'] = {
     }
 }
 
-javascriptGenerator.forBlock['path_import'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['path_import'] = function (b: Block, g: JsG) {
     return "import * as path from 'path';\n"
 }
 
@@ -41,7 +41,7 @@ addItemToToolbox(toolbox, "Path",
 
 );
 
-Blockly.Blocks['path_normalize'] = {
+Blocks['path_normalize'] = {
     init: function () {
         dummy(this, 'Normalize Path');
         value(this, "path", "  path:");
@@ -50,7 +50,7 @@ Blockly.Blocks['path_normalize'] = {
     }
 }
 
-javascriptGenerator.forBlock['path_normalize'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['path_normalize'] = function (b: Block, g: JsG) {
     return ['path.normalize(' + getVal(g, b, 'path') + ')', Order.NONE];
 }
 
@@ -73,7 +73,7 @@ addItemToToolbox(toolbox, "Path",
 
 );
 
-Blockly.Blocks['path_dirname'] = {
+Blocks['path_dirname'] = {
     init: function () {
         dummy(this, 'Path Directory Name');
         value(this, "path", "  path:");
@@ -82,7 +82,7 @@ Blockly.Blocks['path_dirname'] = {
     }
 }
 
-javascriptGenerator.forBlock['path_dirname'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['path_dirname'] = function (b: Block, g: JsG) {
     return ['path.dirname(' + getVal(g, b, 'path') + ')', Order.NONE];
 }
 
@@ -105,17 +105,17 @@ addItemToToolbox(toolbox, "Path",
 
 );
 
-Blockly.Blocks['path_basename'] = {
+Blocks['path_basename'] = {
     init: function () {
         dummy(this, 'Path Basename');
         value(this, "path", "  path:");
         output(this, Boolean);
         color(this, "Path");
-        
+
     }
 }
 
-javascriptGenerator.forBlock['path_basename'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['path_basename'] = function (b: Block, g: JsG) {
     return ['path.basename(' + getVal(g, b, 'path') + ')', Order.NONE];
 }
 
diff --git a/src/customBlocks/categories/PulseCounter.ts b/src/customBlocks/categories/PulseCounter.ts
index f988803..e6336a6 100644
--- a/src/customBlocks/categories/PulseCounter.ts
+++ b/src/customBlocks/categories/PulseCounter.ts
@@ -1,6 +1,6 @@
-import Blockly, { BlockSvg } from "blockly";
-import { javascriptGenerator, Order } from "blockly/javascript";
-import { CodeGenerator } from "blockly/core/generator";
+import { Block, Blocks, FieldDropdown } from "blockly";
+import { JavascriptGenerator as JsG, javascriptGenerator as jsg, Order } from "blockly/javascript";
+
 import { toolbox } from "../toolbox";
 import { addItemToToolbox, dummy, value, inline, output, color } from "../customBlocks";
 
@@ -13,7 +13,7 @@ addItemToToolbox(toolbox, "PulseCounter",
     },
 );
 
-Blockly.Blocks['pulsecounter_import'] = {
+Blocks['pulsecounter_import'] = {
     init: function () {
         dummy(this, 'Import PulseCounter');
         inline(this);
@@ -21,6 +21,6 @@ Blockly.Blocks['pulsecounter_import'] = {
     }
 }
 
-javascriptGenerator.forBlock['pulsecounter_import'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['pulsecounter_import'] = function (b: Block, g: JsG) {
     return "import * as pulsecounter from 'pulsecounter';\n"
 }
\ No newline at end of file
diff --git a/src/customBlocks/categories/Readline.ts b/src/customBlocks/categories/Readline.ts
index 5222474..81eb368 100644
--- a/src/customBlocks/categories/Readline.ts
+++ b/src/customBlocks/categories/Readline.ts
@@ -1,6 +1,6 @@
-import Blockly, { BlockSvg } from "blockly";
-import { javascriptGenerator, Order } from "blockly/javascript";
-import { CodeGenerator } from "blockly/core/generator";
+import { Block, Blocks, FieldDropdown } from "blockly";
+import { JavascriptGenerator as JsG, javascriptGenerator as jsg, Order } from "blockly/javascript";
+
 import { toolbox } from "../toolbox";
 import { addItemToToolbox, dummy, value, inline, output, color } from "../customBlocks";
 
@@ -13,7 +13,7 @@ addItemToToolbox(toolbox, "Readline",
     },
 );
 
-Blockly.Blocks['readline_import'] = {
+Blocks['readline_import'] = {
     init: function () {
         dummy(this, 'Import Readline');
         inline(this);
@@ -21,6 +21,6 @@ Blockly.Blocks['readline_import'] = {
     }
 }
 
-javascriptGenerator.forBlock['readline_import'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['readline_import'] = function (b: Block, g: JsG) {
     return "import * as readline from './libs/readline.js';\n"
 }
\ No newline at end of file
diff --git a/src/customBlocks/categories/Robutek.ts b/src/customBlocks/categories/Robutek.ts
index aadf048..2fdc3c6 100644
--- a/src/customBlocks/categories/Robutek.ts
+++ b/src/customBlocks/categories/Robutek.ts
@@ -1,6 +1,6 @@
-import Blockly, { BlockSvg } from "blockly";
-import { javascriptGenerator, Order } from "blockly/javascript";
-import { CodeGenerator } from "blockly/core/generator";
+import { Block, Blocks, FieldDropdown } from "blockly";
+import { JavascriptGenerator as JsG, javascriptGenerator as jsg, Order } from "blockly/javascript";
+
 import { toolbox } from "../toolbox";
 import { addItemToToolbox, dummy, value, inline, output, color, dropdown, statement, getField, getStatement, getVal } from "../customBlocks";
 
@@ -13,7 +13,7 @@ addItemToToolbox(toolbox, "Robutek",
     },
 );
 
-Blockly.Blocks['robutek_v1_import'] = {
+Blocks['robutek_v1_import'] = {
     init: function () {
         dummy(this, 'Import Robutek V1');
         inline(this);
@@ -21,7 +21,7 @@ Blockly.Blocks['robutek_v1_import'] = {
     }
 }
 
-javascriptGenerator.forBlock['robutek_v1_import'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['robutek_v1_import'] = function (b: Block, g: JsG) {
     return "import { createRobutek } from './libs/robutek.js';\n" +
         "const robutek = createRobutek('V1');\n";
 }
@@ -36,7 +36,7 @@ addItemToToolbox(toolbox, "Robutek",
     },
 );
 
-Blockly.Blocks['robutek_v2_import'] = {
+Blocks['robutek_v2_import'] = {
     init: function () {
         dummy(this, 'Import Robutek V2');
         inline(this);
@@ -44,7 +44,7 @@ Blockly.Blocks['robutek_v2_import'] = {
     }
 }
 
-javascriptGenerator.forBlock['robutek_v2_import'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['robutek_v2_import'] = function (b: Block, g: JsG) {
     return "import { createRobutek } from './libs/robutek.js';\n" +
         "const robutek = createRobutek('V2');\n";
 }
@@ -66,10 +66,10 @@ addItemToToolbox(toolbox, "Robutek",
     },
 );
 
-Blockly.Blocks['robutek_pin'] = {
+Blocks['robutek_pin'] = {
     init: function () {
         this.appendDummyInput('').appendField('robutek.Pins.')
-            .appendField(new Blockly.FieldDropdown([["StatusLED", "StatusLED"],
+            .appendField(new FieldDropdown([["StatusLED", "StatusLED"],
             ["SmartLeds", "SmartLeds"],
             ["ButtonLeft", "ButtonLeft"],
             ["ButtonRight", "ButtonRight"],
@@ -96,7 +96,7 @@ Blockly.Blocks['robutek_pin'] = {
     }
 }
 
-javascriptGenerator.forBlock['robutek_pin'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['robutek_pin'] = function (b: Block, g: JsG) {
     var type = getField(b, 'TYPE');
     return ["robutek.Pins." + type, Order.ATOMIC];
 }
@@ -118,7 +118,7 @@ addItemToToolbox(toolbox, "Robutek",
     },
 );
 
-Blockly.Blocks['robutek_setSpeed'] = {
+Blocks['robutek_setSpeed'] = {
     init: function () {
         dummy(this, 'motor.setSpeed');
         value(this, 'SPEED', '');
@@ -127,7 +127,7 @@ Blockly.Blocks['robutek_setSpeed'] = {
     }
 }
 
-javascriptGenerator.forBlock['robutek_setSpeed'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['robutek_setSpeed'] = function (b: Block, g: JsG) {
     var speed = getVal(g, b, 'SPEED') || '0';
     return "robutek.setSpeed(" + speed + ");\n";
 }
@@ -149,7 +149,7 @@ addItemToToolbox(toolbox, "Robutek",
     },
 );
 
-Blockly.Blocks['robutek_setRamp'] = {
+Blocks['robutek_setRamp'] = {
     init: function () {
         dummy(this, 'motor.setRamp');
         value(this, 'RAMP', '');
@@ -158,7 +158,7 @@ Blockly.Blocks['robutek_setRamp'] = {
     }
 }
 
-javascriptGenerator.forBlock['robutek_setRamp'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['robutek_setRamp'] = function (b: Block, g: JsG) {
     var ramp = getVal(g, b, 'RAMP') || '0';
     return "robutek.setRamp(" + ramp + ");\n";
 }
@@ -185,7 +185,7 @@ addItemToToolbox(toolbox, "Robutek",
     },
 );
 
-Blockly.Blocks['robutek_move_distance'] = {
+Blocks['robutek_move_distance'] = {
     init: function () {
         dummy(this, 'robutek.move');
         value(this, "CURVE", "");
@@ -195,7 +195,7 @@ Blockly.Blocks['robutek_move_distance'] = {
     }
 }
 
-javascriptGenerator.forBlock['robutek_move_distance'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['robutek_move_distance'] = function (b: Block, g: JsG) {
     return 'robutek.move(' + getVal(g, b, 'CURVE') + ', {distance:' + getVal(g, b, 'DISTANCE') + '});\n';
 }
 
@@ -221,7 +221,7 @@ addItemToToolbox(toolbox, "Robutek",
     },
 );
 
-Blockly.Blocks['robutek_move_time'] = {
+Blocks['robutek_move_time'] = {
     init: function () {
         dummy(this, 'robutek.move');
         value(this, "CURVE", "");
@@ -231,7 +231,7 @@ Blockly.Blocks['robutek_move_time'] = {
     }
 }
 
-javascriptGenerator.forBlock['robutek_move_time'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['robutek_move_time'] = function (b: Block, g: JsG) {
     return 'robutek.move(' + getVal(g, b, 'CURVE') + ', {time:' + getVal(g, b, 'TIME') + '});\n';
 }
 
@@ -252,7 +252,7 @@ addItemToToolbox(toolbox, "Robutek",
     },
 );
 
-Blockly.Blocks['robutek_move_inf'] = {
+Blocks['robutek_move_inf'] = {
     init: function () {
         dummy(this, 'robutek.move');
         value(this, "CURVE", "");
@@ -261,7 +261,7 @@ Blockly.Blocks['robutek_move_inf'] = {
     }
 }
 
-javascriptGenerator.forBlock['robutek_move_inf'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['robutek_move_inf'] = function (b: Block, g: JsG) {
     return 'robutek.move(' + getVal(g, b, 'CURVE') + ');\n';
 }
 
@@ -282,7 +282,7 @@ addItemToToolbox(toolbox, "Robutek",
     },
 );
 
-Blockly.Blocks['robutek_rotate'] = {
+Blocks['robutek_rotate'] = {
     init: function () {
         dummy(this, 'robutek.rotate');
         value(this, "ANGLE", "");
@@ -291,7 +291,7 @@ Blockly.Blocks['robutek_rotate'] = {
     }
 }
 
-javascriptGenerator.forBlock['robutek_rotate'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['robutek_rotate'] = function (b: Block, g: JsG) {
     return 'robutek.rotate(' + getVal(g, b, 'ANGLE') + ');\n';
 }
 
@@ -312,7 +312,7 @@ addItemToToolbox(toolbox, "Robutek",
     },
 );
 
-Blockly.Blocks['robutek_stop'] = {
+Blocks['robutek_stop'] = {
     init: function () {
         dummy(this, 'robutek.stop');
         value(this, "BREAK", "");
@@ -321,6 +321,6 @@ Blockly.Blocks['robutek_stop'] = {
     }
 }
 
-javascriptGenerator.forBlock['robutek_stop'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['robutek_stop'] = function (b: Block, g: JsG) {
     return 'robutek.stop(' + getVal(g, b, 'BREAK') + ');\n';
 }
\ No newline at end of file
diff --git a/src/customBlocks/categories/Servo.ts b/src/customBlocks/categories/Servo.ts
index bf83c71..89808b1 100644
--- a/src/customBlocks/categories/Servo.ts
+++ b/src/customBlocks/categories/Servo.ts
@@ -1,6 +1,6 @@
-import Blockly, { BlockSvg } from "blockly";
-import { javascriptGenerator, Order } from "blockly/javascript";
-import { CodeGenerator } from "blockly/core/generator";
+import { Block, Blocks, FieldDropdown } from "blockly";
+import { JavascriptGenerator as JsG, javascriptGenerator as jsg, Order } from "blockly/javascript";
+
 import { toolbox } from "../toolbox";
 import { addItemToToolbox, dummy, value, inline, output, color, dropdown, statement, getVal, getField, getStatement } from "../customBlocks";
 
@@ -13,7 +13,7 @@ addItemToToolbox(toolbox, "Servo",
     },
 );
 
-Blockly.Blocks['servo_import'] = {
+Blocks['servo_import'] = {
     init: function () {
         dummy(this, 'Import Servo');
         inline(this);
@@ -21,7 +21,7 @@ Blockly.Blocks['servo_import'] = {
     }
 }
 
-javascriptGenerator.forBlock['servo_import'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['servo_import'] = function (b: Block, g: JsG) {
     return "import { Servo } from './libs/servo.js';\n"
 }
 
@@ -57,7 +57,7 @@ addItemToToolbox(toolbox, "Servo",
     },
 );
 
-Blockly.Blocks['create_servo'] = {
+Blocks['create_servo'] = {
     init: function () {
         dummy(this, 'Create servo');
         value(this, "NAME", "  name:");
@@ -69,7 +69,7 @@ Blockly.Blocks['create_servo'] = {
     }
 }
 
-javascriptGenerator.forBlock['create_servo'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['create_servo'] = function (b: Block, g: JsG) {
     return 'const servo_' + getVal(g, b, 'NAME').replaceAll("'", "") + ' = new Servo(' + getVal(g, b, 'PIN') + ', ' + getVal(g, b, 'TIMER') + ', ' + getVal(g, b, "CHANNEL") + ');\n';
 }
 
@@ -95,7 +95,7 @@ addItemToToolbox(toolbox, "Servo",
     },
 );
 
-Blockly.Blocks['servo_write'] = {
+Blocks['servo_write'] = {
     init: function () {
         dummy(this, 'Write servo angle');
         value(this, "NAME", "  name:");
@@ -105,7 +105,7 @@ Blockly.Blocks['servo_write'] = {
     }
 }
 
-javascriptGenerator.forBlock['servo_write'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['servo_write'] = function (b: Block, g: JsG) {
     return 'servo_' + getVal(g, b, 'NAME').replaceAll("'", "") + '.write(' + getVal(g, b, 'ANGLE') + ');\n';
 }
 
@@ -127,10 +127,10 @@ addItemToToolbox(toolbox, "Servo",
     },
 );
 
-Blockly.Blocks['servo_penPos'] = {
+Blocks['servo_penPos'] = {
     init: function () {
         this.appendDummyInput('').appendField('robutek.PenPos.')
-            .appendField(new Blockly.FieldDropdown([["Down", "Down"],
+            .appendField(new FieldDropdown([["Down", "Down"],
             ["Up", "Up"],
             ["Unload", "Unload"],
             ]), "POS");
@@ -140,7 +140,7 @@ Blockly.Blocks['servo_penPos'] = {
     }
 }
 
-javascriptGenerator.forBlock['servo_penPos'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['servo_penPos'] = function (b: Block, g: JsG) {
     var pos = getField(b, 'POS');
     return ["robutek.PenPos." + pos, Order.ATOMIC];
 }
\ No newline at end of file
diff --git a/src/customBlocks/categories/SimpleRadio.ts b/src/customBlocks/categories/SimpleRadio.ts
index babfa78..ffd3a05 100644
--- a/src/customBlocks/categories/SimpleRadio.ts
+++ b/src/customBlocks/categories/SimpleRadio.ts
@@ -1,6 +1,6 @@
-import Blockly, { BlockSvg, inputTypes } from "blockly";
-import { javascriptGenerator, Order } from "blockly/javascript";
-import { CodeGenerator } from "blockly/core/generator";
+import { Block, Blocks, FieldDropdown } from "blockly";
+import { JavascriptGenerator as JsG, javascriptGenerator as jsg, Order } from "blockly/javascript";
+
 import { toolbox } from "../toolbox";
 import { addItemToToolbox, dummy, value, inline, output, color, dropdown, statement, getVal, getField, getStatement } from "../customBlocks";
 
@@ -13,7 +13,7 @@ addItemToToolbox(toolbox, "SimpleRadio",
     },
 );
 
-Blockly.Blocks['simpleradio_import'] = {
+Blocks['simpleradio_import'] = {
     init: function () {
         dummy(this, 'Import SimpleRadio');
         inline(this);
@@ -21,7 +21,7 @@ Blockly.Blocks['simpleradio_import'] = {
     }
 }
 
-javascriptGenerator.forBlock['simpleradio_import'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['simpleradio_import'] = function (b: Block, g: JsG) {
     return "import * as simpleradio from 'simpleradio';\n"
 }
 
@@ -42,7 +42,7 @@ addItemToToolbox(toolbox, "SimpleRadio",
     },
 );
 
-Blockly.Blocks['simpleradio_begin'] = {
+Blocks['simpleradio_begin'] = {
     init: function () {
         dummy(this, 'Begin');
         value(this, "GROUP", "  group:");
@@ -51,7 +51,7 @@ Blockly.Blocks['simpleradio_begin'] = {
     }
 }
 
-javascriptGenerator.forBlock['simpleradio_begin'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['simpleradio_begin'] = function (b: Block, g: JsG) {
     return 'simpleradio.begin(' + getVal(g, b, 'GROUP') + ');\n';
 }
 
@@ -73,7 +73,7 @@ addItemToToolbox(toolbox, "SimpleRadio",
     },
 );
 
-Blockly.Blocks['simpleradio_sendstring'] = {
+Blocks['simpleradio_sendstring'] = {
     init: function () {
         dummy(this, 'Send string');
         value(this, "STRING", "  string:");
@@ -82,7 +82,7 @@ Blockly.Blocks['simpleradio_sendstring'] = {
     }
 }
 
-javascriptGenerator.forBlock['simpleradio_sendstring'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['simpleradio_sendstring'] = function (b: Block, g: JsG) {
     return 'simpleradio.sendString(' + getVal(g, b, 'STRING') + ');\n';
 }
 
@@ -103,7 +103,7 @@ addItemToToolbox(toolbox, "SimpleRadio",
     },
 );
 
-Blockly.Blocks['simpleradio_sendnumber'] = {
+Blocks['simpleradio_sendnumber'] = {
     init: function () {
         dummy(this, 'Send number');
         value(this, "NUMBER", "  number:");
@@ -112,7 +112,7 @@ Blockly.Blocks['simpleradio_sendnumber'] = {
     }
 }
 
-javascriptGenerator.forBlock['simpleradio_sendnumber'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['simpleradio_sendnumber'] = function (b: Block, g: JsG) {
     return 'simpleradio.sendNumber(' + getVal(g, b, 'NUMBER') + ');\n';
 }
 
@@ -138,7 +138,7 @@ addItemToToolbox(toolbox, "SimpleRadio",
     },
 );
 
-Blockly.Blocks['simpleradio_sendkeyvalue'] = {
+Blocks['simpleradio_sendkeyvalue'] = {
     init: function () {
         dummy(this, 'Send key value');
         value(this, "KEY", "  key:");
@@ -148,7 +148,7 @@ Blockly.Blocks['simpleradio_sendkeyvalue'] = {
     }
 }
 
-javascriptGenerator.forBlock['simpleradio_sendkeyvalue'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['simpleradio_sendkeyvalue'] = function (b: Block, g: JsG) {
     return 'simpleradio.sendKeyValue(' + getVal(g, b, 'KEY') + ', ' + getVal(g, b, 'VALUE') + ');\n';;
 }
 
@@ -169,7 +169,7 @@ addItemToToolbox(toolbox, "SimpleRadio",
     },
 );
 
-Blockly.Blocks['simpleradio_on'] = {
+Blocks['simpleradio_on'] = {
     init: function () {
         dropdown(this, "TYPE", "Type", [["number", "number"], ["string", "string"], ["keyvalue", "keyvalue"]]);
         statement(this, "CODE", "  do:");
@@ -178,7 +178,7 @@ Blockly.Blocks['simpleradio_on'] = {
     }
 }
 
-javascriptGenerator.forBlock['simpleradio_on'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['simpleradio_on'] = function (b: Block, g: JsG) {
     var type = getField(b, 'TYPE');
 
     switch (type) {
@@ -207,17 +207,17 @@ addItemToToolbox(toolbox, "SimpleRadio",
     },
 );
 
-Blockly.Blocks['simpleradio_values'] = {
+Blocks['simpleradio_values'] = {
     init: function () {
         this.appendDummyInput('')
-            .appendField(new Blockly.FieldDropdown([["num", "num"], ["str", "str"], ["key", "key"], ["value", "value"]]), "TYPE");
+            .appendField(new FieldDropdown([["num", "num"], ["str", "str"], ["key", "key"], ["value", "value"]]), "TYPE");
 
         output(this, String);
         color(this, "SimpleRadio");
     }
 }
 
-javascriptGenerator.forBlock['simpleradio_values'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['simpleradio_values'] = function (b: Block, g: JsG) {
     return [getField(b, 'TYPE'), Order.NONE];
 }
 
@@ -231,18 +231,18 @@ addItemToToolbox(toolbox, "SimpleRadio",
     },
 );
 
-Blockly.Blocks['simpleradio_info'] = {
+Blocks['simpleradio_info'] = {
     init: function () {
         this.appendDummyInput('')
             .appendField('info.')
-            .appendField(new Blockly.FieldDropdown([["group", "group"], ["address", "address"], ["rssi", "rssi"]]), "TYPE");
+            .appendField(new FieldDropdown([["group", "group"], ["address", "address"], ["rssi", "rssi"]]), "TYPE");
 
         output(this, null);
         color(this, "SimpleRadio");
     }
 }
 
-javascriptGenerator.forBlock['simpleradio_info'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['simpleradio_info'] = function (b: Block, g: JsG) {
     return ['info.' + getField(b, 'TYPE'), Order.NONE];
 }
 
@@ -256,7 +256,7 @@ addItemToToolbox(toolbox, "SimpleRadio",
     },
 );
 
-Blockly.Blocks['simpleradio_adress'] = {
+Blocks['simpleradio_adress'] = {
     init: function () {
         dummy(this, 'Address');
         output(this, String);
@@ -264,7 +264,7 @@ Blockly.Blocks['simpleradio_adress'] = {
     }
 }
 
-javascriptGenerator.forBlock['simpleradio_adress'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['simpleradio_adress'] = function (b: Block, g: JsG) {
     return ['simpleradio.adress()', Order.NONE];
 }
 
@@ -278,7 +278,7 @@ addItemToToolbox(toolbox, "SimpleRadio",
     },
 );
 
-Blockly.Blocks['simpleradio_group'] = {
+Blocks['simpleradio_group'] = {
     init: function () {
         dummy(this, 'Group');
         output(this, Number);
@@ -286,7 +286,7 @@ Blockly.Blocks['simpleradio_group'] = {
     }
 }
 
-javascriptGenerator.forBlock['simpleradio_group'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['simpleradio_group'] = function (b: Block, g: JsG) {
     return ['simpleradio.group()', Order.NONE];
 }
 
@@ -307,7 +307,7 @@ addItemToToolbox(toolbox, "SimpleRadio",
     },
 );
 
-Blockly.Blocks['simpleradio_setgroup'] = {
+Blocks['simpleradio_setgroup'] = {
     init: function () {
         dummy(this, 'Set group');
         value(this, "GROUP", "  group:");
@@ -316,7 +316,7 @@ Blockly.Blocks['simpleradio_setgroup'] = {
     }
 }
 
-javascriptGenerator.forBlock['simpleradio_setgroup'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['simpleradio_setgroup'] = function (b: Block, g: JsG) {
     return 'simpleradio.setGroup(' + getVal(g, b, 'GROUP') + ');\n';
 }
 
@@ -330,7 +330,7 @@ addItemToToolbox(toolbox, "SimpleRadio",
     },
 );
 
-Blockly.Blocks['simpleradio_end'] = {
+Blocks['simpleradio_end'] = {
     init: function () {
         dummy(this, 'End SimpleRadio');
         inline(this);
@@ -338,7 +338,7 @@ Blockly.Blocks['simpleradio_end'] = {
     }
 }
 
-javascriptGenerator.forBlock['simpleradio_end'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['simpleradio_end'] = function (b: Block, g: JsG) {
     return 'simpleradio.end();\n';
 }
 
@@ -352,11 +352,11 @@ addItemToToolbox(toolbox, "SimpleRadio",
     },
 );
 
-Blockly.Blocks['simpleradio_off'] = {
+Blocks['simpleradio_off'] = {
     init: function () {
         this.appendDummyInput('')
             .appendField('Off')
-            .appendField(new Blockly.FieldDropdown([["number", "number"], ["string", "string"], ["keyvalue", "keyvalue"]]), "TYPE");
+            .appendField(new FieldDropdown([["number", "number"], ["string", "string"], ["keyvalue", "keyvalue"]]), "TYPE");
 
 
         inline(this);
@@ -364,7 +364,7 @@ Blockly.Blocks['simpleradio_off'] = {
     }
 }
 
-javascriptGenerator.forBlock['simpleradio_off'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['simpleradio_off'] = function (b: Block, g: JsG) {
     return "simpleradio.off('" + getField(b, 'TYPE'); + "');\n";
 
 }
\ No newline at end of file
diff --git a/src/customBlocks/categories/Smartled.ts b/src/customBlocks/categories/Smartled.ts
index b175c46..3fa2e2c 100644
--- a/src/customBlocks/categories/Smartled.ts
+++ b/src/customBlocks/categories/Smartled.ts
@@ -1,6 +1,6 @@
-import Blockly, { BlockSvg } from "blockly";
-import { javascriptGenerator, Order } from "blockly/javascript";
-import { CodeGenerator } from "blockly/core/generator";
+import { Block, Blocks, FieldDropdown } from "blockly";
+import { JavascriptGenerator as JsG, javascriptGenerator as jsg, Order } from "blockly/javascript";
+
 import { toolbox, colors } from "../toolbox";
 import { addItemToToolbox, dummy, value, inline, output, color, dropdown, getVal, getField, getStatement } from "../customBlocks";
 
@@ -12,21 +12,18 @@ addItemToToolbox(toolbox, "Smartled",
     },
 );
 
-Blockly.Blocks['smartled_import'] = {
+Blocks['smartled_import'] = {
     init: function () {
-        dummy(this, 'Import smartled');
+        dummy(this, 'Import Smartled');
         inline(this);
         color(this, "Smartled");
     }
 }
 
-javascriptGenerator.forBlock['smartled_import'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['smartled_import'] = function (b: Block, g: JsG) {
     return 'import { SmartLed, LED_WS2812, LED_WS2812B, LED_WS2812B_2020, LED_SK6812, LED_WS2813 } from "smartled";\n'
-        + 'function HsvToRgb(h, s, v) { let f = (n, k = (n + h / 60) % 6) => v - v * s * Math.max(Math.min(k, 4 - k, 1));\n'
-        + '    return { r: Math.round(f(5) * 255), g: Math.round(f(3) * 255), b: Math.round(f(1) * 255)}; }\n'
-        + 'function HexToRgb(hex) { const [r, g, b] = hex.replace("#", "").match(/.{1,2}/g).map(c => parseInt(c, 16));\n'
-        + '    return { r, g, b }; }\n\n'
-
+        + 'import * as colors from "./libs/colors.js";\n' +
+        'function HexToRgb(hex: string) { hex = hex.replace("#", ""); return { r: parseInt(hex.substring(0, 2), 16), g: parseInt(hex.substring(2, 4), 16), b: parseInt(hex.substring(4, 6), 16) }; }\n';
 }
 
 // ---- //
@@ -61,7 +58,7 @@ addItemToToolbox(toolbox, "Smartled",
     },
 );
 
-Blockly.Blocks['create_strip'] = {
+Blocks['create_strip'] = {
     init: function () {
         dummy(this, 'Create strip');
         value(this, "NAME", "  name:");
@@ -80,8 +77,8 @@ Blockly.Blocks['create_strip'] = {
     }
 }
 
-javascriptGenerator.forBlock['create_strip'] = function (b: BlockSvg, g: CodeGenerator) {
-    return 'const ' + getVal(g, b, 'NAME').replaceAll("'", "") + ' = new SmartLed(' + getVal(g, b, 'PIN') + ', ' + getVal(g, b, 'COUNT') + ', ' + getField(b, 'TYPE') + ');\n';
+jsg.forBlock['create_strip'] = function (b: Block, g: JsG) {
+    return 'const strip_' + getVal(g, b, 'NAME').replaceAll("'", "") + ' = new SmartLed(' + getVal(g, b, 'PIN') + ', ' + getVal(g, b, 'COUNT') + ', ' + getField(b, 'TYPE') + ');\n';
 }
 
 // ---- //
@@ -91,7 +88,7 @@ addItemToToolbox(toolbox, "Smartled",
     {
         kind: "block",
         blockxml:
-            '    <block type="set_hex">\n' +
+            '    <block type="smartled_set">\n' +
             '      <value name="NAME">\n' +
             '        <shadow type="text">\n' +
             '          <field name="text">ledStrip</field>\n' +
@@ -111,9 +108,9 @@ addItemToToolbox(toolbox, "Smartled",
     },
 );
 
-Blockly.Blocks['set_hex'] = {
+Blocks['smartled_set'] = {
     init: function () {
-        dummy(this, 'Set HEX');
+        dummy(this, 'Set Color');
         value(this, 'NAME', '  name:');
         value(this, 'COLOR', '  color:');
         value(this, 'INDEX', '  index:');
@@ -122,186 +119,215 @@ Blockly.Blocks['set_hex'] = {
     }
 }
 
-javascriptGenerator.forBlock['set_hex'] = function (b: BlockSvg, g: CodeGenerator) {
-    return getVal(g, b, 'NAME').replaceAll("'", "")
+jsg.forBlock['smartled_set'] = function (b: Block, g: JsG) {
+    var color = getVal(g, b, 'COLOR');
+    if (color.startsWith("'") && color.endsWith("'")) {
+        return 'strip_' + getVal(g, b, 'NAME').replaceAll("'", "")
+            + '.set(' + getVal(g, b, 'INDEX')
+            + ', HexToRgb(' + color + '));\n';
+    }
+    return 'strip_' + getVal(g, b, 'NAME').replaceAll("'", "")
         + '.set(' + getVal(g, b, 'INDEX')
-        + ', HexToRgb(' + getVal(g, b, 'COLOR') + '));\n';
+        + ', ' + color + ');\n';
 }
 
 // ---- //
 
-// Smartled set hsv
+// Smartled clear
 addItemToToolbox(toolbox, "Smartled",
     {
         kind: "block",
         blockxml:
-            '    <block type="set_hsv">\n' +
+            '    <block type="strip_clear">\n' +
             '      <value name="NAME">\n' +
             '        <shadow type="text">\n' +
             '          <field name="text">ledStrip</field>\n' +
             "        </shadow>\n" +
             "      </value>\n" +
-            '      <value name="INDEX">\n' +
-            '        <shadow type="math_number">\n' +
-            '          <field name="num">0</field>\n' +
-            "        </shadow>\n" +
-            "      </value>\n" +
-            '      <value name="HUE">\n' +
-            '        <shadow type="math_number">\n' +
-            '          <field name="num">0</field>\n' +
-            "        </shadow>\n" +
-            "      </value>\n" +
-            '      <value name="SATURATION">\n' +
-            '        <shadow type="math_number">\n' +
-            '          <field name="num">0</field>\n' +
-            "        </shadow>\n" +
-            "      </value>\n" +
-            '      <value name="VALUE">\n' +
-            '        <shadow type="math_number">\n' +
-            '          <field name="num">0</field>\n' +
-            "        </shadow>\n" +
-            "      </value>\n" +
             "    </block>\n",
     },
 );
 
-Blockly.Blocks['set_hsv'] = {
+Blocks['strip_clear'] = {
     init: function () {
-        dummy(this, 'Set HSV');
-        value(this, 'NAME', '  name:');
-        value(this, 'INDEX', '  index:');
-        value(this, 'HUE', '  H (0-360):');
-        value(this, 'SATURATION', '  S (0-1):');
-        value(this, 'VALUE', '  V (0-1):');
-
+        dummy(this, 'Clear strip');
+        value(this, "NAME", "  name:");
         inline(this);
         color(this, "Smartled");
     }
 }
 
-javascriptGenerator.forBlock['set_hsv'] = function (b: BlockSvg, g: CodeGenerator) {
-    return getVal(g, b, 'NAME').replaceAll("'", "")
-        + '.set(' + getVal(g, b, 'INDEX')
-        + ', HsvToRgb(' + getVal(g, b, 'HUE')
-        + ', ' + getVal(g, b, 'SATURATION')
-        + ', ' + getVal(g, b, 'VALUE') + '));\n';
+jsg.forBlock['strip_clear'] = function (b: Block, g: JsG) {
+    return 'strip_' + getVal(g, b, 'NAME').replaceAll("'", "") + '.clear();\n'
 }
 
 // ---- //
 
-// Smartled set rgb
+// Smartled show
 addItemToToolbox(toolbox, "Smartled",
     {
         kind: "block",
         blockxml:
-            '    <block type="set_rgb">\n' +
+            '    <block type="strip_show">\n' +
             '      <value name="NAME">\n' +
             '        <shadow type="text">\n' +
             '          <field name="text">ledStrip</field>\n' +
             "        </shadow>\n" +
             "      </value>\n" +
-            '      <value name="INDEX">\n' +
-            '        <shadow type="math_number">\n' +
-            '          <field name="num">0</field>\n' +
-            "        </shadow>\n" +
-            "      </value>\n" +
-            '      <value name="R">\n' +
-            '        <shadow type="math_number">\n' +
-            '          <field name="R">0</field>\n' +
-            "        </shadow>\n" +
-            "      </value>\n" +
-            '      <value name="G">\n' +
-            '        <shadow type="math_number">\n' +
-            '          <field name="G">0</field>\n' +
-            "        </shadow>\n" +
-            "      </value>\n" +
-            '      <value name="B">\n' +
-            '        <shadow type="math_number">\n' +
-            '          <field name="B">0</field>\n' +
-            "        </shadow>\n" +
-            "      </value>\n" +
             "    </block>\n",
     },
 );
 
-Blockly.Blocks['set_rgb'] = {
+Blocks['strip_show'] = {
     init: function () {
-        dummy(this, 'Set RGB');
-        value(this, 'NAME', '  name:');
-        value(this, 'INDEX', '  index:');
-        value(this, 'R', '  R (0-256):');
-        value(this, 'G', '  G (0-256):');
-        value(this, 'B', '  B (0-256):');
+        dummy(this, 'Show strip');
+        value(this, "NAME", "  name:");
         inline(this);
         color(this, "Smartled");
     }
 }
 
-javascriptGenerator.forBlock['set_rgb'] = function (b: BlockSvg, g: CodeGenerator) {
-    return getVal(g, b, 'NAME').replaceAll("'", "")
-        + '.set(' + getVal(g, b, 'INDEX')
-        + ', {r: ' + getVal(g, b, 'R')
-        + ', g: ' + getVal(g, b, 'G')
-        + ', b: ' + getVal(g, b, 'B') + '});\n';
+jsg.forBlock['strip_show'] = function (b: Block, g: JsG) {
+    return 'strip_' + getVal(g, b, 'NAME').replaceAll("'", "")
+        + '.show();\n'
 }
 
+
 // ---- //
 
-// Smartled clear
+// Smartled colors
 addItemToToolbox(toolbox, "Smartled",
     {
         kind: "block",
         blockxml:
-            '    <block type="strip_clear">\n' +
-            '      <value name="NAME">\n' +
-            '        <shadow type="text">\n' +
-            '          <field name="text">ledStrip</field>\n' +
+            '    <block type="smartled_color">\n' +
+            '      <value name="COLOR">\n' +
+            '        <shadow type="math_number">\n' +
             "        </shadow>\n" +
             "      </value>\n" +
-            "    </block>\n",
+            '    </block>\n',
     },
 );
 
-Blockly.Blocks['strip_clear'] = {
+Blocks['smartled_color'] = {
     init: function () {
-        dummy(this, 'Clear strip');
-        value(this, "NAME", "  name:");
-        inline(this);
+        this.appendDummyInput('').appendField('colors.')
+            .appendField(new FieldDropdown([["red", "red"],
+            ["orange", "orange"],
+            ["yellow", "yellow"],
+            ["green", "green"],
+            ["light_blue", "light_blue"],
+            ["blue", "blue"],
+            ["purple", "purple"],
+            ["pink", "pink"],
+            ["white", "white"],
+            ["off", "off"],
+            ]), "COLOR");
+
+        output(this, Number);
         color(this, "Smartled");
     }
 }
 
-javascriptGenerator.forBlock['strip_clear'] = function (b: BlockSvg, g: CodeGenerator) {
-    return getVal(g, b, 'NAME').replaceAll("'", "") + '.clear();\n'
+jsg.forBlock['smartled_color'] = function (b: Block, g: JsG) {
+    var color = getField(b, 'COLOR');
+    return ["colors." + color, Order.ATOMIC];
 }
 
+
 // ---- //
 
-// Smartled show
+// Smartled colors rgb
 addItemToToolbox(toolbox, "Smartled",
     {
         kind: "block",
         blockxml:
-            '    <block type="strip_show">\n' +
-            '      <value name="NAME">\n' +
-            '        <shadow type="text">\n' +
-            '          <field name="text">ledStrip</field>\n' +
+            '    <block type="smartled_color_rgb">\n' +
+            '      <value name="R">\n' +
+            '        <shadow type="math_number">\n' +
+            "          <field name=\"NUM\">0</field>\n" +
             "        </shadow>\n" +
             "      </value>\n" +
-            "    </block>\n",
+            '      <value name="G">\n' +
+            '        <shadow type="math_number">\n' +
+            "          <field name=\"NUM\">0</field>\n" +
+            "        </shadow>\n" +
+            "      </value>\n" +
+            '      <value name="B">\n' +
+            '        <shadow type="math_number">\n' +
+            "          <field name=\"NUM\">0</field>\n" +
+            "        </shadow>\n" +
+            "      </value>\n" +
+            '    </block>\n',
     },
 );
 
-Blockly.Blocks['strip_show'] = {
+Blocks['smartled_color_rgb'] = {
     init: function () {
-        dummy(this, 'Show strip');
-        value(this, "NAME", "  name:");
-        inline(this);
+        this.appendDummyInput('').appendField('R:')
+        this.appendValueInput('R')
+        this.appendDummyInput('').appendField('G:')
+        this.appendValueInput('G')
+        this.appendDummyInput('').appendField('B:')
+        this.appendValueInput('B')
+
+        output(this, Number);
         color(this, "Smartled");
     }
 }
 
-javascriptGenerator.forBlock['strip_show'] = function (b: BlockSvg, g: CodeGenerator) {
-    return getVal(g, b, 'NAME').replaceAll("'", "")
-        + '.show();\n'
+jsg.forBlock['smartled_color_rgb'] = function (b: Block, g: JsG) {
+    var rc = getVal(g, b, 'R');
+    var gc = getVal(g, b, 'G');
+    var bc = getVal(g, b, 'B');
+    return ["{r:" + rc + ", g:" + gc + ", b:" + bc + "}", Order.ATOMIC];
+}
+
+
+// ---- //
+
+// Smartled colors hsl
+addItemToToolbox(toolbox, "Smartled",
+    {
+        kind: "block",
+        blockxml:
+            '    <block type="smartled_color_hsl">\n' +
+            '      <value name="H">\n' +
+            '        <shadow type="math_number">\n' +
+            "          <field name=\"NUM\">0</field>\n" +
+            "        </shadow>\n" +
+            "      </value>\n" +
+            '      <value name="S">\n' +
+            '        <shadow type="math_number">\n' +
+            "          <field name=\"NUM\">0</field>\n" +
+            "        </shadow>\n" +
+            "      </value>\n" +
+            '      <value name="L">\n' +
+            '        <shadow type="math_number">\n' +
+            '          <field name="NUM">0</field>\n' +
+            "        </shadow>\n" +
+            "      </value>\n" +
+            '    </block>\n',
+    },
+);
+
+Blocks['smartled_color_hsl'] = {
+    init: function () {
+        this.appendDummyInput('').appendField('H:')
+        this.appendValueInput('H')
+        this.appendDummyInput('').appendField('S:')
+        this.appendValueInput('S')
+        this.appendDummyInput('').appendField('L:')
+        this.appendValueInput('L')
+
+        output(this, Number);
+        color(this, "Smartled");
+    }
 }
+
+jsg.forBlock['smartled_color_hsl'] = function (b: Block, g: JsG) {
+    var hc = getVal(g, b, 'H');
+    var sc = getVal(g, b, 'S');
+    var lc = getVal(g, b, 'L');
+    return ["{h:" + hc + ", s:" + sc + ", l:" + lc + "}", Order.ATOMIC];
+}
\ No newline at end of file
diff --git a/src/customBlocks/categories/VL53L0X.ts b/src/customBlocks/categories/VL53L0X.ts
index 7dbe3ae..5ee5bcb 100644
--- a/src/customBlocks/categories/VL53L0X.ts
+++ b/src/customBlocks/categories/VL53L0X.ts
@@ -1,6 +1,6 @@
-import Blockly, { BlockSvg } from "blockly";
-import { javascriptGenerator, Order } from "blockly/javascript";
-import { CodeGenerator } from "blockly/core/generator";
+import { Block, Blocks, FieldDropdown } from "blockly";
+import { JavascriptGenerator as JsG, javascriptGenerator as jsg, Order } from "blockly/javascript";
+
 import { toolbox } from "../toolbox";
 import { addItemToToolbox, dummy, value, inline, output, color, dropdown, statement, getVal, getField, getStatement } from "../customBlocks";
 
@@ -13,7 +13,7 @@ addItemToToolbox(toolbox, "VL53L0X",
     },
 );
 
-Blockly.Blocks['vl53l0x_import'] = {
+Blocks['vl53l0x_import'] = {
     init: function () {
         dummy(this, 'Import VL53L0X');
         inline(this);
@@ -21,9 +21,9 @@ Blockly.Blocks['vl53l0x_import'] = {
     }
 }
 
-javascriptGenerator.forBlock['vl53l0x_import'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['vl53l0x_import'] = function (b, g) {
     return "import { I2C1 } from 'i2c';\n" +
-           "import { VL53L0X } from './libs/VL53L0X.js';\n";
+        "import { VL53L0X } from './libs/VL53L0X.js';\n";
 }
 
 // ---- //
@@ -36,7 +36,7 @@ addItemToToolbox(toolbox, "VL53L0X",
     },
 );
 
-Blockly.Blocks['vl53l0x_create'] = {
+Blocks['vl53l0x_create'] = {
     init: function () {
         dummy(this, 'Create vl53l0x');
         inline(this);
@@ -44,9 +44,9 @@ Blockly.Blocks['vl53l0x_create'] = {
     }
 }
 
-javascriptGenerator.forBlock['vl53l0x_create'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['vl53l0x_create'] = function (b, g) {
     return "I2C1.setup({sda: robutek.Pins.SDA, scl: robutek.Pins.SCL, bitrate: 400000});\n" +
-           "const vl = new VL53L0X(I2C1);\n";
+        "const vl = new VL53L0X(I2C1);\n";
 }
 
 // ---- //
@@ -59,7 +59,7 @@ addItemToToolbox(toolbox, "VL53L0X",
     },
 );
 
-Blockly.Blocks['vl53l0x_read'] = {
+Blocks['vl53l0x_read'] = {
     init: function () {
         dummy(this, 'Read vl53l0x');
         inline(this);
@@ -67,7 +67,7 @@ Blockly.Blocks['vl53l0x_read'] = {
     }
 }
 
-javascriptGenerator.forBlock['vl53l0x_read'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['vl53l0x_read'] = function (b, g) {
     return "const m = await vl.read();\n";
 }
 
@@ -81,10 +81,10 @@ addItemToToolbox(toolbox, "VL53L0X",
     },
 );
 
-Blockly.Blocks['vl53l0x_measurement'] = {
+Blocks['vl53l0x_measurement'] = {
     init: function () {
         this.appendDummyInput('').appendField('m.')
-            .appendField(new Blockly.FieldDropdown([["distance", "distance"],
+            .appendField(new FieldDropdown([["distance", "distance"],
             ["signalRate", "signalRate"],
             ["ambientRate", "ambientRate"],
             ["effectiveSpadRtnCount", "effectiveSpadRtnCount"]]), "POS");
@@ -94,7 +94,7 @@ Blockly.Blocks['vl53l0x_measurement'] = {
     }
 }
 
-javascriptGenerator.forBlock['vl53l0x_measurement'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['vl53l0x_measurement'] = function (b, g) {
     var pos = getField(b, 'POS');
-    return ["m." + pos, Order.ATOMIC];
+    return ["m." + pos, Number(Order.ATOMIC)];
 }
\ No newline at end of file
diff --git a/src/customBlocks/categories/WiFi.ts b/src/customBlocks/categories/WiFi.ts
index bb2c92f..e6e8601 100644
--- a/src/customBlocks/categories/WiFi.ts
+++ b/src/customBlocks/categories/WiFi.ts
@@ -1,6 +1,5 @@
-import Blockly, { BlockSvg } from "blockly";
-import { javascriptGenerator, Order } from "blockly/javascript";
-import { CodeGenerator } from "blockly/core/generator";
+import { Block, Blocks, FieldDropdown } from "blockly";
+import { JavascriptGenerator as JsG, javascriptGenerator as jsg, Order } from "blockly/javascript";
 import { toolbox } from "../toolbox";
 import { addItemToToolbox, dummy, value, inline, output, color } from "../customBlocks";
 
@@ -12,7 +11,7 @@ addItemToToolbox(toolbox, "WiFi",
     },
 );
 
-Blockly.Blocks['wifi_import'] = {
+Blocks['wifi_import'] = {
     init: function () {
         dummy(this, 'Import WiFi');
         inline(this);
@@ -20,8 +19,8 @@ Blockly.Blocks['wifi_import'] = {
     }
 }
 
-javascriptGenerator.forBlock['wifi_import'] = function (b: BlockSvg, g: CodeGenerator) {
-    return "import * as wifi from 'wifi';\n"
+jsg.forBlock['wifi_import'] = function (b: Block, g: JsG) {
+    return "import * as wifi from 'wifi';\n";
 }
 
 // ---- //
@@ -35,7 +34,7 @@ addItemToToolbox(toolbox, "WiFi",
     },
 );
 
-Blockly.Blocks['wifi_currentip'] = {
+Blocks['wifi_currentip'] = {
     init: function () {
         dummy(this, 'Get Current IP');
         output(this, String);
@@ -43,6 +42,6 @@ Blockly.Blocks['wifi_currentip'] = {
     }
 }
 
-javascriptGenerator.forBlock['wifi_currentip'] = function (b: BlockSvg, g: CodeGenerator) {
+jsg.forBlock['wifi_currentip'] = function (b: Block, g: JsG) {
     return ['wifi.currentIP()', Order.NONE];
 }
\ No newline at end of file
diff --git a/src/customBlocks/customBlocks.ts b/src/customBlocks/customBlocks.ts
index 87b55dc..5474f7d 100644
--- a/src/customBlocks/customBlocks.ts
+++ b/src/customBlocks/customBlocks.ts
@@ -1,17 +1,22 @@
-import Blockly, { BlockSvg } from "blockly";
-import { javascriptGenerator, Order } from "blockly/javascript";
-import { CodeGenerator } from "blockly/core/generator";
+import { Block, MenuGenerator, FieldDropdown} from "blockly";
+import { JavascriptGenerator as JsG, javascriptGenerator as jsg, Order } from "blockly/javascript";
+
 import { toolbox, Toolbox, ToolboxItem, CustomCategory, colors } from "./toolbox";
+import {installAllBlocks as installColourBlocks} from '@blockly/field-colour';
 
+// Installs all four blocks, the colour field, and all language generators.
+installColourBlocks({
+  javascript: jsg,
+});
 
-export function getField(_b:BlockSvg, name: string) {
+export function getField(_b:Block, name: string) {
     return _b.getFieldValue(name)
 }
 
-export function getVal(_g:CodeGenerator, _b:BlockSvg, name: string) {
+export function getVal(_g:JsG, _b:Block, name: string) {
     return _g.valueToCode(_b, name, 0)
 }
-export function getStatement(_g:CodeGenerator, _b:BlockSvg, name: string) {
+export function getStatement(_g:JsG, _b:Block, name: string) {
     return _g.statementToCode(_b, name)
 }
 
@@ -26,15 +31,15 @@ export function value(that: any, name: string, text: string) {
         .appendField(text);
 }
 
-export function dropdown(that: any, name: string, text: string, options: Blockly.MenuGenerator) {
+export function dropdown(that: any, name: string, text: string, options: MenuGenerator) {
     if (text === undefined || text === null || text === "") {
         that.appendDummyInput(name)
-            .appendField(new Blockly.FieldDropdown(options), name);
+            .appendField(new FieldDropdown(options), name);
     }
     else {
         that.appendDummyInput(name)
         .appendField(text)
-        .appendField(new Blockly.FieldDropdown(options), name);
+        .appendField(new FieldDropdown(options), name);
     }
 }
 
@@ -128,10 +133,6 @@ import "./categories/SimpleRadio"
 
 import "./categories/Servo"
 
-// ========== Colors ==========
-
-import "./categories/Colors"
-
 // ========== Readline ==========
 
 import "./categories/Readline"
diff --git a/src/customBlocks/toolbox.ts b/src/customBlocks/toolbox.ts
index 6b7fb4a..1c299d7 100644
--- a/src/customBlocks/toolbox.ts
+++ b/src/customBlocks/toolbox.ts
@@ -26,10 +26,8 @@ export type Toolbox = {
 // saturation = 45%
 // value      = 50%
 
-
 const color_blocks = [[30, 110], [130, 150], [170, 200], [300, 320], [340, 10]];
 
-
 function generateRanges(arr:number[][], increment:number) {
   return arr.map(pair => {
       let [start, end] = pair;
@@ -52,51 +50,80 @@ const hexColors = generateRanges(color_blocks, 10)
 
 console.log(hexColors);
 
-export const colors = {
-  "Basic":        "#615BA5", /* 245    */"Basic_gray":   "#888",
-  "Logic":        "#5B80A5", // 210
-  "Loops":        "#5BA55B", // 120
-  "Math":         "#5B67A5", // 230
-  "Text":         "#5BA55B", // 160
-  "Lists":        "#725BA5", // 259
-  "Colour":       "#A5725B", // 19
-                            
-  "Variables":    "#A55B80", // 330
-  "Functions":    "#995BA5", // 290
-                            
-  "GPIO":         hexColors[2][0],
-  "ADC":          hexColors[2][1],
-  "Smartled":     hexColors[2][2],
-  "SimpleRadio":  hexColors[2][3],
-
-  // custom libs
-  "Servo":        hexColors[4][0],
-  "Colors":       hexColors[4][1],
-  "Readline":     hexColors[4][2],
-  //"":        hexColors[4][3],
-  //"":        hexColors[4][4],
-
-  // project specific libs
-  "Robutek":      hexColors[3][0],
-  "VL53L0X":      hexColors[3][1],
-  //"":        hexColors[3][2],
-  //"":        hexColors[3][3],
+// Enhanced color palette with better organization
+export const colorPalette = {
+  // Core programming concepts
+  core: {
+    "Basic":        "#725BA5",
+    "Basic_gray":   "#888",
+    "Logic":        "#615BA5",
+    "Loops":        "#5B67A5", 
+    "Math":         "#5B80A5",
+    "Text":         "#5BA55B",
+    "Lists":        "#5BA55B",
+    "Variables":    "#A55B80",
+    "Functions":    "#995BA5"
+  },
+  
+  // Hardware/GPIO related
+  hardware: {
+    "GPIO":         hexColors[2][0],
+    "ADC":          hexColors[2][1],
+    "Smartled":     hexColors[2][2],
+    "SimpleRadio":  hexColors[2][3],
+    "LEDC":         hexColors[0][0],
+    "PulseCounter": hexColors[0][1], 
+    "Motor":        hexColors[0][2], 
+    "I2C":          hexColors[0][5]
+  },
+  
+  // Network and system
+  system: {
+    "WiFi":         hexColors[0][3], 
+    "GridUI":       hexColors[0][4], 
+    "FS":           hexColors[0][6], 
+    "Path":         hexColors[0][7]
+  },
+  
+  // Custom libraries
+  libraries: {
+    "Servo":        hexColors[4][0],
+    "Readline":     hexColors[4][1]
+  },
+  
+  // Project specific
+  project: {
+    "Robutek":      hexColors[3][0],
+    "VL53L0X":      hexColors[3][1]
+  },
+  
+  // UI elements
+  ui: {
+    "Custom Button":"#5BA57A"
+  }
+};
 
-  //"":        hexColors[1][0],
-  //"":        hexColors[1][1],
-  //"":        hexColors[1][2],
-  //"":        hexColors[1][3],
+// Flatten the color palette for backward compatibility
+export const colors = {
+  ...colorPalette.core,
+  ...colorPalette.hardware,
+  ...colorPalette.system,
+  ...colorPalette.libraries,
+  ...colorPalette.project,
+  ...colorPalette.ui
+};
 
-  "LEDC":         hexColors[0][0],
-  "PulseCounter": hexColors[0][1], 
-  "Motor":        hexColors[0][2], 
-  "WiFi":         hexColors[0][3], 
-  "GridUI":       hexColors[0][4], 
-  "I2C":          hexColors[0][5], 
-  "FS":           hexColors[0][6], 
-  "Path":         hexColors[0][7], 
-                          
-  "Custom Button":"#5BA57A",
+// Styling configuration for categories
+export const categoryStyles = {
+  default: {
+    border: "1px solid rgba(255, 255, 255, 0.1)",
+    borderRadius: "6px",
+    margin: "2px"
+  },
+  hover: {
+    transform: "translateX(2px)",
+    backgroundColor: "rgba(255, 255, 255, 0.1)"
+  }
 };
 
 export const toolbox: Toolbox = {
@@ -633,7 +660,7 @@ export const toolbox: Toolbox = {
               "    </block>\n",
           },
         ],
-      },
+      },/*
       { // COLOUR
         kind: "category",
         name: "Colour",
@@ -656,17 +683,14 @@ export const toolbox: Toolbox = {
               '    <block type="colour_rgb">\n' +
               '      <value name="RED">\n' +
               '        <shadow type="math_number">\n' +
-              '          <field name="NUM">100</field>\n' +
               "        </shadow>\n" +
               "      </value>\n" +
               '      <value name="GREEN">\n' +
               '        <shadow type="math_number">\n' +
-              '          <field name="NUM">50</field>\n' +
               "        </shadow>\n" +
               "      </value>\n" +
               '      <value name="BLUE">\n' +
               '        <shadow type="math_number">\n' +
-              '          <field name="NUM">0</field>\n' +
               "        </shadow>\n" +
               "      </value>\n" +
               "    </block>\n",
@@ -677,23 +701,20 @@ export const toolbox: Toolbox = {
               '    <block type="colour_blend">\n' +
               '      <value name="COLOUR1">\n' +
               '        <shadow type="colour_picker">\n' +
-              '          <field name="COLOUR">#ff0000</field>\n' +
               "        </shadow>\n" +
               "      </value>\n" +
               '      <value name="COLOUR2">\n' +
               '        <shadow type="colour_picker">\n' +
-              '          <field name="COLOUR">#3333ff</field>\n' +
               "        </shadow>\n" +
               "      </value>\n" +
               '      <value name="RATIO">\n' +
               '        <shadow type="math_number">\n' +
-              '          <field name="NUM">0.5</field>\n' +
               "        </shadow>\n" +
               "      </value>\n" +
               "    </block>\n",
           },
         ],
-      },
+      },*/
       { kind: "sep" },
       { // VARIABLES
         kind: "category",
@@ -739,12 +760,6 @@ export const toolbox: Toolbox = {
         colour: colors["Servo"],
         contents: [],
       },
-      { // Colors
-        kind: "category",
-        name: "Colors",
-        colour: colors["Colors"],
-        contents: [],
-      },
       { // Readline
         kind: "category",
         name: "Readline",
@@ -813,7 +828,7 @@ export const toolbox: Toolbox = {
         colour: colors["Path"],
         contents: [],
       },
-      { kind: "sep" },
+      /*{ kind: "sep" },
       { // CUSTOM BUTTON
         kind: "category",
         name: "Custom Button",
@@ -826,7 +841,7 @@ export const toolbox: Toolbox = {
           },
         ],
       },
-
+*/
 
     ],
   };
diff --git a/src/index.css b/src/index.css
index cfad2c7..166d0c4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -24,7 +24,6 @@
   font-weight: 400;
 
   color-scheme: light;
-  /*color: rgba(255, 255, 255, 0.87);*/
   color: rgba(60, 60, 60, 0.87);
   background-color: #242424;
 
diff --git a/src/styles/BLOCKLY_STYLING_GUIDE.md b/src/styles/BLOCKLY_STYLING_GUIDE.md
new file mode 100644
index 0000000..c8bb242
--- /dev/null
+++ b/src/styles/BLOCKLY_STYLING_GUIDE.md
@@ -0,0 +1,333 @@
+# Blockly Toolbox Styling Guide
+
+This guide explains how to customize the appearance of your Blockly toolbox in the JacLy project.
+
+## Overview
+
+The styling system consists of three main components:
+1. **CSS Styling** (`src/styles/blockly-custom.css`) - Visual appearance
+2. **Theme Configuration** (`src/components/topLevel/BlocklyEditor.tsx`) - Blockly theme settings  
+3. **Color Palette** (`src/customBlocks/toolbox.ts`) - Category colors
+
+## Quick Start
+
+The basic styling is already applied. To see the changes:
+
+1. Make sure the CSS file is imported in `BlocklyEditor.tsx` ✅
+2. The theme configuration is added to the workspace ✅  
+3. Run your development server: `npm run dev`
+
+## Customization Options
+
+### 1. Changing Toolbox Colors
+
+#### Method A: Modify the Color Palette
+
+Edit `src/customBlocks/toolbox.ts`:
+
+```typescript
+export const colorPalette = {
+  core: {
+    "Basic": "#your-color-here",
+    "Logic": "#another-color",
+    // ... more colors
+  },
+  hardware: {
+    "GPIO": "#hardware-color",
+    // ... more hardware colors
+  }
+  // ... other categories
+};
+```
+
+#### Method B: Individual Category Colors
+
+```typescript
+// In toolbox.ts, update specific colors:
+export const colors = {
+  "Basic": "#FF6B6B",        // Red theme
+  "Logic": "#4ECDC4",        // Teal theme  
+  "Loops": "#45B7D1",        // Blue theme
+  "Math": "#96CEB4",         // Green theme
+  "Text": "#FECA57",         // Yellow theme
+  // ... continue for other categories
+};
+```
+
+### 2. Changing Overall Theme
+
+#### Dark Theme
+```css
+/* In blockly-custom.css, modify: */
+.blocklyToolboxDiv {
+  background-color: #1e1e1e !important;
+  border-right: 2px solid #333333 !important;
+}
+
+.blocklyFlyout {
+  background-color: #252526 !important;
+}
+```
+
+#### Light Theme  
+```css
+.blocklyToolboxDiv {
+  background-color: #ffffff !important;
+  border-right: 2px solid #e2e8f0 !important;
+}
+
+.blocklyTreeLabel {
+  color: #2d3748 !important;
+}
+```
+
+#### Custom Theme
+Add your own CSS class to switch between themes:
+
+```css
+.my-custom-theme .blocklyToolboxDiv {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+}
+
+.my-custom-theme .blocklyTreeLabel {
+  color: #ffffff !important;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
+}
+```
+
+Then apply it to the BlocklyWorkspace:
+```tsx
+<BlocklyWorkspace
+  className="w-full h-full my-custom-theme"
+  // ... other props
+/>
+```
+
+### 3. Typography and Spacing
+
+#### Font Changes
+```css
+.blocklyToolboxDiv {
+  font-family: 'Roboto', 'SF Pro Display', system-ui !important;
+}
+
+.blocklyTreeLabel {
+  font-size: 16px !important;
+  font-weight: 600 !important;
+  letter-spacing: 0.5px !important;
+}
+```
+
+#### Spacing and Layout
+```css
+.blocklyTreeRow {
+  min-height: 48px !important;  /* Larger touch targets */
+  margin: 4px 8px !important;   /* More spacing between items */
+}
+
+.blocklyTreeRowContentContainer {
+  padding: 12px 16px !important; /* More padding inside items */
+}
+```
+
+### 4. Hover and Animation Effects
+
+#### Custom Hover Effects
+```css
+.blocklyTreeRow:hover {
+  background-color: rgba(255, 255, 255, 0.15) !important;
+  transform: translateX(4px) scale(1.02) !important;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
+}
+```
+
+#### Add Transitions
+```css
+.blocklyTreeRow {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+.blocklyTreeIcon {
+  transition: transform 0.2s ease !important;
+}
+
+.blocklyTreeRow:hover .blocklyTreeIcon {
+  transform: rotate(5deg) scale(1.1) !important;
+}
+```
+
+### 5. Advanced Customizations
+
+#### Gradient Backgrounds
+```css
+.blocklyTreeRow[aria-label*="Logic"] {
+  background: linear-gradient(90deg, #667eea, #764ba2) !important;
+}
+
+.blocklyTreeRow[aria-label*="Math"] {
+  background: linear-gradient(90deg, #f093fb, #f5576c) !important;
+}
+```
+
+#### Icon Customizations
+```css
+.blocklyTreeIcon {
+  border-radius: 50% !important;  /* Circular icons */
+  border: 2px solid rgba(255,255,255,0.3) !important;
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3) !important;
+}
+
+/* Add icon content using pseudo-elements */
+.blocklyTreeRow[aria-label*="Logic"] .blocklyTreeIcon::before {
+  content: "⚡";
+  color: white;
+  font-size: 12px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+```
+
+## Theme Configuration in Code
+
+The theme object in `BlocklyEditor.tsx` can be customized:
+
+```tsx
+theme: {
+  name: "my-custom-theme",
+  base: "classic", // or "modern", "deuteranopia"
+  componentStyles: {
+    workspaceBackgroundColour: "#your-bg-color",
+    toolboxBackgroundColour: "#your-toolbox-bg",
+    toolboxForegroundColour: "#your-text-color",
+    flyoutBackgroundColour: "#your-flyout-bg",
+    // ... more options
+  },
+  blockStyles: {
+    logic_blocks: {
+      colourPrimary: "#primary-color",
+      colourSecondary: "#secondary-color", 
+      colourTertiary: "#tertiary-color"
+    },
+    // ... more block styles
+  },
+  categoryStyles: {
+    logic_category: {
+      colour: "#category-color"
+    }
+    // ... more category styles
+  }
+}
+```
+
+## Color Schemes
+
+### Predefined Schemes
+
+#### Material Design
+```javascript
+const materialColors = {
+  "Basic": "#2196F3",    // Blue
+  "Logic": "#4CAF50",    // Green  
+  "Loops": "#FF9800",    // Orange
+  "Math": "#9C27B0",     // Purple
+  "Text": "#607D8B",     // Blue Grey
+  "Variables": "#E91E63", // Pink
+  "Functions": "#795548"  // Brown
+};
+```
+
+#### Sunset Theme
+```javascript
+const sunsetColors = {
+  "Basic": "#FF6B6B",    // Coral
+  "Logic": "#4ECDC4",    // Turquoise
+  "Loops": "#45B7D1",    // Sky Blue
+  "Math": "#F9CA24",     // Sunny Yellow
+  "Text": "#6C5CE7",     // Purple
+  "Variables": "#A0E7E5", // Mint
+  "Functions": "#FD79A8"  // Pink
+};
+```
+
+#### Professional Theme
+```javascript
+const professionalColors = {
+  "Basic": "#34495E",    // Dark Blue Grey
+  "Logic": "#27AE60",    // Green
+  "Loops": "#3498DB",    // Blue
+  "Math": "#E67E22",     // Orange
+  "Text": "#9B59B6",     // Purple
+  "Variables": "#1ABC9C", // Turquoise
+  "Functions": "#E74C3C"  // Red
+};
+```
+
+## Responsive Design
+
+Make your toolbox mobile-friendly:
+
+```css
+@media (max-width: 768px) {
+  .blocklyToolboxDiv {
+    width: 180px !important;
+  }
+  
+  .blocklyTreeLabel {
+    font-size: 12px !important;
+  }
+  
+  .blocklyTreeRow {
+    min-height: 44px !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .blocklyToolboxDiv {
+    width: 150px !important;
+  }
+  
+  .blocklyTreeRowContentContainer {
+    padding: 8px 10px !important;
+  }
+}
+```
+
+## Troubleshooting
+
+### Changes Not Showing
+1. Clear browser cache (`Ctrl+Shift+R`)
+2. Check that CSS file is properly imported
+3. Ensure CSS selectors have `!important` flags
+4. Check browser developer tools for conflicting styles
+
+### Theme Not Applying
+1. Verify theme object syntax in `BlocklyEditor.tsx`
+2. Check console for JavaScript errors
+3. Make sure color values are valid hex/rgb codes
+
+### Performance Issues
+1. Avoid complex CSS animations on large toolboxes
+2. Use `transform` instead of changing `top/left` for animations
+3. Consider `will-change` property for animated elements
+
+## Best Practices
+
+1. **Consistency**: Use a consistent color scheme across categories
+2. **Accessibility**: Ensure sufficient contrast ratios
+3. **Performance**: Use CSS transforms for animations
+4. **Maintenance**: Group related styles together
+5. **Documentation**: Comment your custom modifications
+
+## Examples in Action
+
+To apply a complete theme, you can:
+
+1. Choose a color scheme from above
+2. Update the `colors` object in `toolbox.ts`
+3. Modify CSS variables in `blockly-custom.css`
+4. Adjust theme configuration in `BlocklyEditor.tsx`
+5. Test across different screen sizes
+
+This modular approach makes it easy to switch between different themes or create new ones for different use cases.
\ No newline at end of file
diff --git a/src/styles/blockly-custom.css b/src/styles/blockly-custom.css
new file mode 100644
index 0000000..e52f8aa
--- /dev/null
+++ b/src/styles/blockly-custom.css
@@ -0,0 +1,164 @@
+/* Custom Blockly Toolbox Styling */
+
+/* ===== TOOLBOX BACKGROUND AND LAYOUT ===== */
+.blocklyToolboxCategory {
+    height: 34px;
+  border-right: 2px solid #4a5568 !important;
+  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
+  transition: all 0.2s ease !important;
+}
+
+.blocklyToolboxCategoryLabel {
+  font-size: 16px !important;
+  color: #e2e8f0 !important;
+  padding-left: 8px !important;
+}
+
+/* ===== CATEGORY STYLING ===== */
+.blocklyTreeRow {
+  border-radius: 6px !important;
+  margin: 2px 4px !important;
+  transition: all 0.2s ease !important;
+  min-height: 34px !important;
+}
+
+.blocklyTreeRow:hover {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  transform: translateX(2px) !important;
+}
+
+.blocklyTreeRowContentContainer {
+  padding: 4px 8px !important;
+  border-radius: 6px !important;
+}
+
+.blocklyTreeRow.blocklyTreeSelected {
+  background-color: rgba(255, 255, 255, 0.15) !important;
+  box-shadow: inset 3px 0 0 #60a5fa !important;
+}
+
+/* ===== CATEGORY LABELS ===== */
+.blocklyTreeLabel {
+  font-size: 14px !important;
+  font-weight: 500 !important;
+  letter-spacing: 0.025em !important;
+}
+
+.blocklyTreeSelected .blocklyTreeLabel {
+  color: #ffffff !important;
+  font-weight: 600 !important;
+}
+
+/* ===== CATEGORY ICONS ===== */
+.blocklyTreeIcon {
+  width: 20px !important;
+  height: 40px !important;
+  margin-right: 8px !important;
+  border-radius: 3px !important;
+  opacity: 0.9 !important;
+}
+
+/* ===== FLYOUT (BLOCKS PANEL) STYLING ===== */
+.blocklyFlyout {
+  background-color: #1a202c !important;
+  border-left: 1px solid #4a5568 !important;
+}
+
+.blocklyFlyoutBackground {
+  fill: #1a202c !important;
+  fill-opacity: 1 !important;
+}
+
+/* ===== SCROLLBAR STYLING ===== */
+.blocklyFlyout .blocklyScrollbarVertical .blocklyScrollbarHandle {
+  fill: #4a5568 !important;
+}
+
+.blocklyFlyout .blocklyScrollbarVertical .blocklyScrollbarBackground {
+  fill: #2d3748 !important;
+}
+
+/* ===== SEARCH BOX (if enabled) ===== */
+.blocklySearchInputField {
+  background-color: #4a5568 !important;
+  border: 1px solid #718096 !important;
+  border-radius: 6px !important;
+  color: #f7fafc !important;
+  padding: 8px 12px !important;
+  margin: 8px !important;
+}
+
+.blocklySearchInputField:focus {
+  border-color: #60a5fa !important;
+  outline: none !important;
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2) !important;
+}
+
+/* ===== WORKSPACE STYLING ===== */
+.blocklyMainWorkspaceDiv {
+  background-color: #f7fafc !important;
+}
+
+/* ===== GRID CUSTOMIZATION ===== */
+.blocklyMainWorkspaceDiv .blocklyGridPattern line {
+  stroke: #e2e8f0 !important;
+  stroke-width: 1 !important;
+}
+
+
+
+/* ===== CUSTOM CATEGORY COLOR OVERRIDES ===== */
+/* These can be dynamically set based on your color scheme */
+.blocklyTreeRow[aria-label*="Basic"] .blocklyTreeIcon {
+  background-color: #725BA5 !important;
+}
+
+.blocklyTreeRow[aria-label*="Logic"] .blocklyTreeIcon {
+  background-color: #615BA5 !important;
+}
+
+.blocklyTreeRow[aria-label*="Loops"] .blocklyTreeIcon {
+  background-color: #5B67A5 !important;
+}
+
+.blocklyTreeRow[aria-label*="Math"] .blocklyTreeIcon {
+  background-color: #5B80A5 !important;
+}
+
+.blocklyTreeRow[aria-label*="Text"] .blocklyTreeIcon {
+  background-color: #5BA55B !important;
+}
+
+.blocklyTreeRow[aria-label*="Lists"] .blocklyTreeIcon {
+  background-color: #5BA55B !important;
+}
+
+.blocklyTreeRow[aria-label*="Variables"] .blocklyTreeIcon {
+  background-color: #A55B80 !important;
+}
+
+.blocklyTreeRow[aria-label*="Functions"] .blocklyTreeIcon {
+  background-color: #995BA5 !important;
+}
+
+/* ===== SEPARATOR STYLING ===== */
+.blocklyTreeSeparator {
+  background-color: #4a5568 !important;
+  height: 1px !important;
+  margin: 8px 12px !important;
+  opacity: 0.6 !important;
+}
+
+/* ===== ALTERNATIVE DARK THEME ===== */
+.blockly-dark-theme .blocklyToolboxDiv {
+  background-color: #1e1e1e !important;
+  border-right: 2px solid #333333 !important;
+}
+
+.blockly-dark-theme .blocklyTreeRow:hover {
+  background-color: rgba(255, 255, 255, 0.05) !important;
+}
+
+.blockly-dark-theme .blocklyFlyout {
+  background-color: #252526 !important;
+}
diff --git a/src/utils/classNamesOverride.ts b/src/utils/classNamesOverride.ts
new file mode 100644
index 0000000..0baadd0
--- /dev/null
+++ b/src/utils/classNamesOverride.ts
@@ -0,0 +1,5 @@
+import classNamesOriginal, { Argument } from "classnames";
+import { overrideTailwindClasses } from "tailwind-override";
+
+export const classNamesOverride = (...args: Argument[]) =>
+    overrideTailwindClasses(classNamesOriginal(...args));