editor working under webcomponate

- session is now an EventTarget using CustomEvent
2024-04-05 23:42:43 -07:00
parent ca011cf48e
commit 3437c9b194
13 changed files with 1413 additions and 558 deletions
--- a/www/package.json
+++ b/www/package.json
@@ -31,6 +31,7 @@
    "autoprefixer": "^10.4.19",
    "copy-webpack-plugin": "^12.0.2",
    "css-loader": "^6.10.0",
+    "extract-loader": "^5.1.0",
    "hello-wasm-pack": "^0.1.0",
    "html-webpack-plugin": "^5.6.0",
    "image-minimizer-webpack-plugin": "^4.0.0",
@@ -39,6 +40,7 @@
    "imagemin-jpegtran": "^7.0.0",
    "imagemin-optipng": "^8.0.0",
    "imagemin-svgo": "^10.0.1",
+    "lit-scss-loader": "^2.0.1",
    "mini-css-extract-plugin": "^2.8.1",
    "postcss-loader": "^8.1.1",
    "sass": "^1.72.0",
--- a/www/pnpm-lock.yaml
+++ b/www/pnpm-lock.yaml
@@ -76,6 +76,9 @@ devDependencies:
  css-loader:
    specifier: ^6.10.0
    version: 6.10.0(webpack@5.91.0)
+  extract-loader:
+    specifier: ^5.1.0
+    version: 5.1.0
  hello-wasm-pack:
    specifier: ^0.1.0
    version: 0.1.0
@@ -100,6 +103,9 @@ devDependencies:
  imagemin-svgo:
    specifier: ^10.0.1
    version: 10.0.1
+  lit-scss-loader:
+    specifier: ^2.0.1
+    version: 2.0.1(webpack@5.91.0)
  mini-css-extract-plugin:
    specifier: ^2.8.1
    version: 2.8.1(webpack@5.91.0)
@@ -950,6 +956,519 @@ packages:
      postcss-value-parser: 4.2.0
    dev: true

+  /babel-code-frame@6.26.0:
+    resolution: {integrity: sha512-XqYMR2dfdGMW+hd0IUZ2PwK+fGeFkOxZJ0wY+JaQAHzt1Zx8LcvpiZD2NiGkEG8qx0CfkAOr5xt76d1e8vG90g==}
+    dependencies:
+      chalk: 1.1.3
+      esutils: 2.0.3
+      js-tokens: 3.0.2
+    dev: true
+
+  /babel-core@6.26.3:
+    resolution: {integrity: sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==}
+    dependencies:
+      babel-code-frame: 6.26.0
+      babel-generator: 6.26.1
+      babel-helpers: 6.24.1
+      babel-messages: 6.23.0
+      babel-register: 6.26.0
+      babel-runtime: 6.26.0
+      babel-template: 6.26.0
+      babel-traverse: 6.26.0
+      babel-types: 6.26.0
+      babylon: 6.18.0
+      convert-source-map: 1.9.0
+      debug: 2.6.9
+      json5: 0.5.1
+      lodash: 4.17.21
+      minimatch: 3.1.2
+      path-is-absolute: 1.0.1
+      private: 0.1.8
+      slash: 1.0.0
+      source-map: 0.5.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-generator@6.26.1:
+    resolution: {integrity: sha512-HyfwY6ApZj7BYTcJURpM5tznulaBvyio7/0d4zFOeMPUmfxkCjHocCuoLa2SAGzBI8AREcH3eP3758F672DppA==}
+    dependencies:
+      babel-messages: 6.23.0
+      babel-runtime: 6.26.0
+      babel-types: 6.26.0
+      detect-indent: 4.0.0
+      jsesc: 1.3.0
+      lodash: 4.17.21
+      source-map: 0.5.7
+      trim-right: 1.0.1
+    dev: true
+
+  /babel-helper-builder-binary-assignment-operator-visitor@6.24.1:
+    resolution: {integrity: sha512-gCtfYORSG1fUMX4kKraymq607FWgMWg+j42IFPc18kFQEsmtaibP4UrqsXt8FlEJle25HUd4tsoDR7H2wDhe9Q==}
+    dependencies:
+      babel-helper-explode-assignable-expression: 6.24.1
+      babel-runtime: 6.26.0
+      babel-types: 6.26.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-helper-call-delegate@6.24.1:
+    resolution: {integrity: sha512-RL8n2NiEj+kKztlrVJM9JT1cXzzAdvWFh76xh/H1I4nKwunzE4INBXn8ieCZ+wh4zWszZk7NBS1s/8HR5jDkzQ==}
+    dependencies:
+      babel-helper-hoist-variables: 6.24.1
+      babel-runtime: 6.26.0
+      babel-traverse: 6.26.0
+      babel-types: 6.26.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-helper-define-map@6.26.0:
+    resolution: {integrity: sha512-bHkmjcC9lM1kmZcVpA5t2om2nzT/xiZpo6TJq7UlZ3wqKfzia4veeXbIhKvJXAMzhhEBd3cR1IElL5AenWEUpA==}
+    dependencies:
+      babel-helper-function-name: 6.24.1
+      babel-runtime: 6.26.0
+      babel-types: 6.26.0
+      lodash: 4.17.21
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-helper-explode-assignable-expression@6.24.1:
+    resolution: {integrity: sha512-qe5csbhbvq6ccry9G7tkXbzNtcDiH4r51rrPUbwwoTzZ18AqxWYRZT6AOmxrpxKnQBW0pYlBI/8vh73Z//78nQ==}
+    dependencies:
+      babel-runtime: 6.26.0
+      babel-traverse: 6.26.0
+      babel-types: 6.26.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-helper-function-name@6.24.1:
+    resolution: {integrity: sha512-Oo6+e2iX+o9eVvJ9Y5eKL5iryeRdsIkwRYheCuhYdVHsdEQysbc2z2QkqCLIYnNxkT5Ss3ggrHdXiDI7Dhrn4Q==}
+    dependencies:
+      babel-helper-get-function-arity: 6.24.1
+      babel-runtime: 6.26.0
+      babel-template: 6.26.0
+      babel-traverse: 6.26.0
+      babel-types: 6.26.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-helper-get-function-arity@6.24.1:
+    resolution: {integrity: sha512-WfgKFX6swFB1jS2vo+DwivRN4NB8XUdM3ij0Y1gnC21y1tdBoe6xjVnd7NSI6alv+gZXCtJqvrTeMW3fR/c0ng==}
+    dependencies:
+      babel-runtime: 6.26.0
+      babel-types: 6.26.0
+    dev: true
+
+  /babel-helper-hoist-variables@6.24.1:
+    resolution: {integrity: sha512-zAYl3tqerLItvG5cKYw7f1SpvIxS9zi7ohyGHaI9cgDUjAT6YcY9jIEH5CstetP5wHIVSceXwNS7Z5BpJg+rOw==}
+    dependencies:
+      babel-runtime: 6.26.0
+      babel-types: 6.26.0
+    dev: true
+
+  /babel-helper-optimise-call-expression@6.24.1:
+    resolution: {integrity: sha512-Op9IhEaxhbRT8MDXx2iNuMgciu2V8lDvYCNQbDGjdBNCjaMvyLf4wl4A3b8IgndCyQF8TwfgsQ8T3VD8aX1/pA==}
+    dependencies:
+      babel-runtime: 6.26.0
+      babel-types: 6.26.0
+    dev: true
+
+  /babel-helper-regex@6.26.0:
+    resolution: {integrity: sha512-VlPiWmqmGJp0x0oK27Out1D+71nVVCTSdlbhIVoaBAj2lUgrNjBCRR9+llO4lTSb2O4r7PJg+RobRkhBrf6ofg==}
+    dependencies:
+      babel-runtime: 6.26.0
+      babel-types: 6.26.0
+      lodash: 4.17.21
+    dev: true
+
+  /babel-helper-remap-async-to-generator@6.24.1:
+    resolution: {integrity: sha512-RYqaPD0mQyQIFRu7Ho5wE2yvA/5jxqCIj/Lv4BXNq23mHYu/vxikOy2JueLiBxQknwapwrJeNCesvY0ZcfnlHg==}
+    dependencies:
+      babel-helper-function-name: 6.24.1
+      babel-runtime: 6.26.0
+      babel-template: 6.26.0
+      babel-traverse: 6.26.0
+      babel-types: 6.26.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-helper-replace-supers@6.24.1:
+    resolution: {integrity: sha512-sLI+u7sXJh6+ToqDr57Bv973kCepItDhMou0xCP2YPVmR1jkHSCY+p1no8xErbV1Siz5QE8qKT1WIwybSWlqjw==}
+    dependencies:
+      babel-helper-optimise-call-expression: 6.24.1
+      babel-messages: 6.23.0
+      babel-runtime: 6.26.0
+      babel-template: 6.26.0
+      babel-traverse: 6.26.0
+      babel-types: 6.26.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-helpers@6.24.1:
+    resolution: {integrity: sha512-n7pFrqQm44TCYvrCDb0MqabAF+JUBq+ijBvNMUxpkLjJaAu32faIexewMumrH5KLLJ1HDyT0PTEqRyAe/GwwuQ==}
+    dependencies:
+      babel-runtime: 6.26.0
+      babel-template: 6.26.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-messages@6.23.0:
+    resolution: {integrity: sha512-Bl3ZiA+LjqaMtNYopA9TYE9HP1tQ+E5dLxE0XrAzcIJeK2UqF0/EaqXwBn9esd4UmTfEab+P+UYQ1GnioFIb/w==}
+    dependencies:
+      babel-runtime: 6.26.0
+    dev: true
+
+  /babel-plugin-add-module-exports@1.0.4:
+    resolution: {integrity: sha512-g+8yxHUZ60RcyaUpfNzy56OtWW+x9cyEe9j+CranqLiqbju2yf/Cy6ZtYK40EZxtrdHllzlVZgLmcOUCTlJ7Jg==}
+    dev: true
+
+  /babel-plugin-check-es2015-constants@6.22.0:
+    resolution: {integrity: sha512-B1M5KBP29248dViEo1owyY32lk1ZSH2DaNNrXLGt8lyjjHm7pBqAdQ7VKUPR6EEDO323+OvT3MQXbCin8ooWdA==}
+    dependencies:
+      babel-runtime: 6.26.0
+    dev: true
+
+  /babel-plugin-syntax-async-functions@6.13.0:
+    resolution: {integrity: sha512-4Zp4unmHgw30A1eWI5EpACji2qMocisdXhAftfhXoSV9j0Tvj6nRFE3tOmRY912E0FMRm/L5xWE7MGVT2FoLnw==}
+    dev: true
+
+  /babel-plugin-syntax-exponentiation-operator@6.13.0:
+    resolution: {integrity: sha512-Z/flU+T9ta0aIEKl1tGEmN/pZiI1uXmCiGFRegKacQfEJzp7iNsKloZmyJlQr+75FCJtiFfGIK03SiCvCt9cPQ==}
+    dev: true
+
+  /babel-plugin-syntax-trailing-function-commas@6.22.0:
+    resolution: {integrity: sha512-Gx9CH3Q/3GKbhs07Bszw5fPTlU+ygrOGfAhEt7W2JICwufpC4SuO0mG0+4NykPBSYPMJhqvVlDBU17qB1D+hMQ==}
+    dev: true
+
+  /babel-plugin-transform-async-to-generator@6.24.1:
+    resolution: {integrity: sha512-7BgYJujNCg0Ti3x0c/DL3tStvnKS6ktIYOmo9wginv/dfZOrbSZ+qG4IRRHMBOzZ5Awb1skTiAsQXg/+IWkZYw==}
+    dependencies:
+      babel-helper-remap-async-to-generator: 6.24.1
+      babel-plugin-syntax-async-functions: 6.13.0
+      babel-runtime: 6.26.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-plugin-transform-es2015-arrow-functions@6.22.0:
+    resolution: {integrity: sha512-PCqwwzODXW7JMrzu+yZIaYbPQSKjDTAsNNlK2l5Gg9g4rz2VzLnZsStvp/3c46GfXpwkyufb3NCyG9+50FF1Vg==}
+    dependencies:
+      babel-runtime: 6.26.0
+    dev: true
+
+  /babel-plugin-transform-es2015-block-scoped-functions@6.22.0:
+    resolution: {integrity: sha512-2+ujAT2UMBzYFm7tidUsYh+ZoIutxJ3pN9IYrF1/H6dCKtECfhmB8UkHVpyxDwkj0CYbQG35ykoz925TUnBc3A==}
+    dependencies:
+      babel-runtime: 6.26.0
+    dev: true
+
+  /babel-plugin-transform-es2015-block-scoping@6.26.0:
+    resolution: {integrity: sha512-YiN6sFAQ5lML8JjCmr7uerS5Yc/EMbgg9G8ZNmk2E3nYX4ckHR01wrkeeMijEf5WHNK5TW0Sl0Uu3pv3EdOJWw==}
+    dependencies:
+      babel-runtime: 6.26.0
+      babel-template: 6.26.0
+      babel-traverse: 6.26.0
+      babel-types: 6.26.0
+      lodash: 4.17.21
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-plugin-transform-es2015-classes@6.24.1:
+    resolution: {integrity: sha512-5Dy7ZbRinGrNtmWpquZKZ3EGY8sDgIVB4CU8Om8q8tnMLrD/m94cKglVcHps0BCTdZ0TJeeAWOq2TK9MIY6cag==}
+    dependencies:
+      babel-helper-define-map: 6.26.0
+      babel-helper-function-name: 6.24.1
+      babel-helper-optimise-call-expression: 6.24.1
+      babel-helper-replace-supers: 6.24.1
+      babel-messages: 6.23.0
+      babel-runtime: 6.26.0
+      babel-template: 6.26.0
+      babel-traverse: 6.26.0
+      babel-types: 6.26.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-plugin-transform-es2015-computed-properties@6.24.1:
+    resolution: {integrity: sha512-C/uAv4ktFP/Hmh01gMTvYvICrKze0XVX9f2PdIXuriCSvUmV9j+u+BB9f5fJK3+878yMK6dkdcq+Ymr9mrcLzw==}
+    dependencies:
+      babel-runtime: 6.26.0
+      babel-template: 6.26.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-plugin-transform-es2015-destructuring@6.23.0:
+    resolution: {integrity: sha512-aNv/GDAW0j/f4Uy1OEPZn1mqD+Nfy9viFGBfQ5bZyT35YqOiqx7/tXdyfZkJ1sC21NyEsBdfDY6PYmLHF4r5iA==}
+    dependencies:
+      babel-runtime: 6.26.0
+    dev: true
+
+  /babel-plugin-transform-es2015-duplicate-keys@6.24.1:
+    resolution: {integrity: sha512-ossocTuPOssfxO2h+Z3/Ea1Vo1wWx31Uqy9vIiJusOP4TbF7tPs9U0sJ9pX9OJPf4lXRGj5+6Gkl/HHKiAP5ug==}
+    dependencies:
+      babel-runtime: 6.26.0
+      babel-types: 6.26.0
+    dev: true
+
+  /babel-plugin-transform-es2015-for-of@6.23.0:
+    resolution: {integrity: sha512-DLuRwoygCoXx+YfxHLkVx5/NpeSbVwfoTeBykpJK7JhYWlL/O8hgAK/reforUnZDlxasOrVPPJVI/guE3dCwkw==}
+    dependencies:
+      babel-runtime: 6.26.0
+    dev: true
+
+  /babel-plugin-transform-es2015-function-name@6.24.1:
+    resolution: {integrity: sha512-iFp5KIcorf11iBqu/y/a7DK3MN5di3pNCzto61FqCNnUX4qeBwcV1SLqe10oXNnCaxBUImX3SckX2/o1nsrTcg==}
+    dependencies:
+      babel-helper-function-name: 6.24.1
+      babel-runtime: 6.26.0
+      babel-types: 6.26.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-plugin-transform-es2015-literals@6.22.0:
+    resolution: {integrity: sha512-tjFl0cwMPpDYyoqYA9li1/7mGFit39XiNX5DKC/uCNjBctMxyL1/PT/l4rSlbvBG1pOKI88STRdUsWXB3/Q9hQ==}
+    dependencies:
+      babel-runtime: 6.26.0
+    dev: true
+
+  /babel-plugin-transform-es2015-modules-amd@6.24.1:
+    resolution: {integrity: sha512-LnIIdGWIKdw7zwckqx+eGjcS8/cl8D74A3BpJbGjKTFFNJSMrjN4bIh22HY1AlkUbeLG6X6OZj56BDvWD+OeFA==}
+    dependencies:
+      babel-plugin-transform-es2015-modules-commonjs: 6.26.2
+      babel-runtime: 6.26.0
+      babel-template: 6.26.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-plugin-transform-es2015-modules-commonjs@6.26.2:
+    resolution: {integrity: sha512-CV9ROOHEdrjcwhIaJNBGMBCodN+1cfkwtM1SbUHmvyy35KGT7fohbpOxkE2uLz1o6odKK2Ck/tz47z+VqQfi9Q==}
+    dependencies:
+      babel-plugin-transform-strict-mode: 6.24.1
+      babel-runtime: 6.26.0
+      babel-template: 6.26.0
+      babel-types: 6.26.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-plugin-transform-es2015-modules-systemjs@6.24.1:
+    resolution: {integrity: sha512-ONFIPsq8y4bls5PPsAWYXH/21Hqv64TBxdje0FvU3MhIV6QM2j5YS7KvAzg/nTIVLot2D2fmFQrFWCbgHlFEjg==}
+    dependencies:
+      babel-helper-hoist-variables: 6.24.1
+      babel-runtime: 6.26.0
+      babel-template: 6.26.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-plugin-transform-es2015-modules-umd@6.24.1:
+    resolution: {integrity: sha512-LpVbiT9CLsuAIp3IG0tfbVo81QIhn6pE8xBJ7XSeCtFlMltuar5VuBV6y6Q45tpui9QWcy5i0vLQfCfrnF7Kiw==}
+    dependencies:
+      babel-plugin-transform-es2015-modules-amd: 6.24.1
+      babel-runtime: 6.26.0
+      babel-template: 6.26.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-plugin-transform-es2015-object-super@6.24.1:
+    resolution: {integrity: sha512-8G5hpZMecb53vpD3mjs64NhI1au24TAmokQ4B+TBFBjN9cVoGoOvotdrMMRmHvVZUEvqGUPWL514woru1ChZMA==}
+    dependencies:
+      babel-helper-replace-supers: 6.24.1
+      babel-runtime: 6.26.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-plugin-transform-es2015-parameters@6.24.1:
+    resolution: {integrity: sha512-8HxlW+BB5HqniD+nLkQ4xSAVq3bR/pcYW9IigY+2y0dI+Y7INFeTbfAQr+63T3E4UDsZGjyb+l9txUnABWxlOQ==}
+    dependencies:
+      babel-helper-call-delegate: 6.24.1
+      babel-helper-get-function-arity: 6.24.1
+      babel-runtime: 6.26.0
+      babel-template: 6.26.0
+      babel-traverse: 6.26.0
+      babel-types: 6.26.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-plugin-transform-es2015-shorthand-properties@6.24.1:
+    resolution: {integrity: sha512-mDdocSfUVm1/7Jw/FIRNw9vPrBQNePy6wZJlR8HAUBLybNp1w/6lr6zZ2pjMShee65t/ybR5pT8ulkLzD1xwiw==}
+    dependencies:
+      babel-runtime: 6.26.0
+      babel-types: 6.26.0
+    dev: true
+
+  /babel-plugin-transform-es2015-spread@6.22.0:
+    resolution: {integrity: sha512-3Ghhi26r4l3d0Js933E5+IhHwk0A1yiutj9gwvzmFbVV0sPMYk2lekhOufHBswX7NCoSeF4Xrl3sCIuSIa+zOg==}
+    dependencies:
+      babel-runtime: 6.26.0
+    dev: true
+
+  /babel-plugin-transform-es2015-sticky-regex@6.24.1:
+    resolution: {integrity: sha512-CYP359ADryTo3pCsH0oxRo/0yn6UsEZLqYohHmvLQdfS9xkf+MbCzE3/Kolw9OYIY4ZMilH25z/5CbQbwDD+lQ==}
+    dependencies:
+      babel-helper-regex: 6.26.0
+      babel-runtime: 6.26.0
+      babel-types: 6.26.0
+    dev: true
+
+  /babel-plugin-transform-es2015-template-literals@6.22.0:
+    resolution: {integrity: sha512-x8b9W0ngnKzDMHimVtTfn5ryimars1ByTqsfBDwAqLibmuuQY6pgBQi5z1ErIsUOWBdw1bW9FSz5RZUojM4apg==}
+    dependencies:
+      babel-runtime: 6.26.0
+    dev: true
+
+  /babel-plugin-transform-es2015-typeof-symbol@6.23.0:
+    resolution: {integrity: sha512-fz6J2Sf4gYN6gWgRZaoFXmq93X+Li/8vf+fb0sGDVtdeWvxC9y5/bTD7bvfWMEq6zetGEHpWjtzRGSugt5kNqw==}
+    dependencies:
+      babel-runtime: 6.26.0
+    dev: true
+
+  /babel-plugin-transform-es2015-unicode-regex@6.24.1:
+    resolution: {integrity: sha512-v61Dbbihf5XxnYjtBN04B/JBvsScY37R1cZT5r9permN1cp+b70DY3Ib3fIkgn1DI9U3tGgBJZVD8p/mE/4JbQ==}
+    dependencies:
+      babel-helper-regex: 6.26.0
+      babel-runtime: 6.26.0
+      regexpu-core: 2.0.0
+    dev: true
+
+  /babel-plugin-transform-exponentiation-operator@6.24.1:
+    resolution: {integrity: sha512-LzXDmbMkklvNhprr20//RStKVcT8Cu+SQtX18eMHLhjHf2yFzwtQ0S2f0jQ+89rokoNdmwoSqYzAhq86FxlLSQ==}
+    dependencies:
+      babel-helper-builder-binary-assignment-operator-visitor: 6.24.1
+      babel-plugin-syntax-exponentiation-operator: 6.13.0
+      babel-runtime: 6.26.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-plugin-transform-regenerator@6.26.0:
+    resolution: {integrity: sha512-LS+dBkUGlNR15/5WHKe/8Neawx663qttS6AGqoOUhICc9d1KciBvtrQSuc0PI+CxQ2Q/S1aKuJ+u64GtLdcEZg==}
+    dependencies:
+      regenerator-transform: 0.10.1
+    dev: true
+
+  /babel-plugin-transform-strict-mode@6.24.1:
+    resolution: {integrity: sha512-j3KtSpjyLSJxNoCDrhwiJad8kw0gJ9REGj8/CqL0HeRyLnvUNYV9zcqluL6QJSXh3nfsLEmSLvwRfGzrgR96Pw==}
+    dependencies:
+      babel-runtime: 6.26.0
+      babel-types: 6.26.0
+    dev: true
+
+  /babel-preset-env@1.7.0:
+    resolution: {integrity: sha512-9OR2afuKDneX2/q2EurSftUYM0xGu4O2D9adAhVfADDhrYDaxXV0rBbevVYoY9n6nyX1PmQW/0jtpJvUNr9CHg==}
+    dependencies:
+      babel-plugin-check-es2015-constants: 6.22.0
+      babel-plugin-syntax-trailing-function-commas: 6.22.0
+      babel-plugin-transform-async-to-generator: 6.24.1
+      babel-plugin-transform-es2015-arrow-functions: 6.22.0
+      babel-plugin-transform-es2015-block-scoped-functions: 6.22.0
+      babel-plugin-transform-es2015-block-scoping: 6.26.0
+      babel-plugin-transform-es2015-classes: 6.24.1
+      babel-plugin-transform-es2015-computed-properties: 6.24.1
+      babel-plugin-transform-es2015-destructuring: 6.23.0
+      babel-plugin-transform-es2015-duplicate-keys: 6.24.1
+      babel-plugin-transform-es2015-for-of: 6.23.0
+      babel-plugin-transform-es2015-function-name: 6.24.1
+      babel-plugin-transform-es2015-literals: 6.22.0
+      babel-plugin-transform-es2015-modules-amd: 6.24.1
+      babel-plugin-transform-es2015-modules-commonjs: 6.26.2
+      babel-plugin-transform-es2015-modules-systemjs: 6.24.1
+      babel-plugin-transform-es2015-modules-umd: 6.24.1
+      babel-plugin-transform-es2015-object-super: 6.24.1
+      babel-plugin-transform-es2015-parameters: 6.24.1
+      babel-plugin-transform-es2015-shorthand-properties: 6.24.1
+      babel-plugin-transform-es2015-spread: 6.22.0
+      babel-plugin-transform-es2015-sticky-regex: 6.24.1
+      babel-plugin-transform-es2015-template-literals: 6.22.0
+      babel-plugin-transform-es2015-typeof-symbol: 6.23.0
+      babel-plugin-transform-es2015-unicode-regex: 6.24.1
+      babel-plugin-transform-exponentiation-operator: 6.24.1
+      babel-plugin-transform-regenerator: 6.26.0
+      browserslist: 3.2.8
+      invariant: 2.2.4
+      semver: 5.7.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-register@6.26.0:
+    resolution: {integrity: sha512-veliHlHX06wjaeY8xNITbveXSiI+ASFnOqvne/LaIJIqOWi2Ogmj91KOugEz/hoh/fwMhXNBJPCv8Xaz5CyM4A==}
+    dependencies:
+      babel-core: 6.26.3
+      babel-runtime: 6.26.0
+      core-js: 2.6.12
+      home-or-tmp: 2.0.0
+      lodash: 4.17.21
+      mkdirp: 0.5.6
+      source-map-support: 0.4.18
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-runtime@6.26.0:
+    resolution: {integrity: sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==}
+    dependencies:
+      core-js: 2.6.12
+      regenerator-runtime: 0.11.1
+    dev: true
+
+  /babel-template@6.26.0:
+    resolution: {integrity: sha512-PCOcLFW7/eazGUKIoqH97sO9A2UYMahsn/yRQ7uOk37iutwjq7ODtcTNF+iFDSHNfkctqsLRjLP7URnOx0T1fg==}
+    dependencies:
+      babel-runtime: 6.26.0
+      babel-traverse: 6.26.0
+      babel-types: 6.26.0
+      babylon: 6.18.0
+      lodash: 4.17.21
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-traverse@6.26.0:
+    resolution: {integrity: sha512-iSxeXx7apsjCHe9c7n8VtRXGzI2Bk1rBSOJgCCjfyXb6v1aCqE1KSEpq/8SXuVN8Ka/Rh1WDTF0MDzkvTA4MIA==}
+    dependencies:
+      babel-code-frame: 6.26.0
+      babel-messages: 6.23.0
+      babel-runtime: 6.26.0
+      babel-types: 6.26.0
+      babylon: 6.18.0
+      debug: 2.6.9
+      globals: 9.18.0
+      invariant: 2.2.4
+      lodash: 4.17.21
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-types@6.26.0:
+    resolution: {integrity: sha512-zhe3V/26rCWsEZK8kZN+HaQj5yQ1CilTObixFzKW1UWjqG7618Twz6YEsCnjfg5gBcJh02DrpCkS9h98ZqDY+g==}
+    dependencies:
+      babel-runtime: 6.26.0
+      esutils: 2.0.3
+      lodash: 4.17.21
+      to-fast-properties: 1.0.3
+    dev: true
+
+  /babylon@6.18.0:
+    resolution: {integrity: sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==}
+    hasBin: true
+    dev: true
+
  /balanced-match@1.0.2:
    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}

@@ -960,6 +1479,10 @@ packages:
    resolution: {integrity: sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==}
    dev: true

+  /big.js@5.2.2:
+    resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
+    dev: true
+
  /bin-build@3.0.0:
    resolution: {integrity: sha512-jcUOof71/TNAI2uM5uoUaDq2ePcVBQ3R/qhxAz1rX7UfvduAL/RXD3jXzvn8cVcDJdGVkiR1shal3OH0ImpuhA==}
    engines: {node: '>=4'}
@@ -1143,6 +1666,14 @@ packages:
      safe-buffer: 5.2.1
    dev: false

+  /browserslist@3.2.8:
+    resolution: {integrity: sha512-WHVocJYavUwVgVViC0ORikPHQquXwVh939TaelZ4WDqpWgTX/FsGhl/+P4qBUAGcRvtOgDgC+xftNWWp2RUTAQ==}
+    hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001603
+      electron-to-chromium: 1.4.722
+    dev: true
+
  /browserslist@4.23.0:
    resolution: {integrity: sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==}
    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -1159,6 +1690,12 @@ packages:
    engines: {node: '>=16.20.1'}
    dev: false

+  /btoa@1.2.1:
+    resolution: {integrity: sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==}
+    engines: {node: '>= 0.4.0'}
+    hasBin: true
+    dev: true
+
  /buffer-alloc-unsafe@1.1.0:
    resolution: {integrity: sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==}
    dev: true
@@ -1340,6 +1877,13 @@ packages:
      safe-buffer: 5.2.1
    dev: false

+  /clean-css@4.2.4:
+    resolution: {integrity: sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==}
+    engines: {node: '>= 4.0'}
+    dependencies:
+      source-map: 0.6.1
+    dev: true
+
  /clean-css@5.3.3:
    resolution: {integrity: sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==}
    engines: {node: '>= 10.0'}
@@ -1475,6 +2019,10 @@ packages:
    engines: {node: '>= 0.6'}
    dev: true

+  /convert-source-map@1.9.0:
+    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
+    dev: true
+
  /cookie-signature@1.0.6:
    resolution: {integrity: sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==}
    dev: true
@@ -1499,6 +2047,12 @@ packages:
      webpack: 5.91.0(webpack-cli@5.1.4)
    dev: true

+  /core-js@2.6.12:
+    resolution: {integrity: sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==}
+    deprecated: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
+    requiresBuild: true
+    dev: true
+
  /core-util-is@1.0.3:
    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}

@@ -1809,6 +2363,13 @@ packages:
    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
    dev: true

+  /detect-indent@4.0.0:
+    resolution: {integrity: sha512-BDKtmHlOzwI7iRuEkhzsnPoi5ypEhWAJB5RvHWe1kMr06js3uK5B3734i3ui5Yd+wOJV1cpE4JnivPD283GU/A==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      repeating: 2.0.1
+    dev: true
+
  /detect-node@2.1.0:
    resolution: {integrity: sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==}
    dev: true
@@ -1955,6 +2516,11 @@ packages:
    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
    dev: true

+  /emojis-list@3.0.0:
+    resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==}
+    engines: {node: '>= 4'}
+    dev: true
+
  /encodeurl@1.0.2:
    resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
    engines: {node: '>= 0.8'}
@@ -2050,6 +2616,11 @@ packages:
    engines: {node: '>=4.0'}
    dev: true

+  /esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
  /etag@1.8.1:
    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
    engines: {node: '>= 0.6'}
@@ -2184,6 +2755,21 @@ packages:
      sort-keys-length: 1.0.1
    dev: true

+  /extract-loader@5.1.0:
+    resolution: {integrity: sha512-+U7sMNULTgm3d3G4hE+N7Rvr/Npsxa7M1jfgvhyYdJuOnyLepm9e2gGuriKw1mrX+mJnX4krPfKI4qyLJ5x94w==}
+    engines: {node: '>= 6.0.0'}
+    dependencies:
+      babel-core: 6.26.3
+      babel-plugin-add-module-exports: 1.0.4
+      babel-preset-env: 1.7.0
+      babel-runtime: 6.26.0
+      btoa: 1.2.1
+      loader-utils: 1.4.2
+      resolve: 1.22.8
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
  /fast-deep-equal@3.1.3:
    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
    dev: true
@@ -2509,6 +3095,11 @@ packages:
      once: 1.4.0
      path-is-absolute: 1.0.1

+  /globals@9.18.0:
+    resolution: {integrity: sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
  /globby@12.2.0:
    resolution: {integrity: sha512-wiSuFQLZ+urS9x2gGPl1H5drc5twabmm4m2gTR27XDFyjUHJUNsS8o/2aKyIF6IoBaR630atdher0XJ5g6OMmA==}
    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -2684,6 +3275,14 @@ packages:
      minimalistic-crypto-utils: 1.0.1
    dev: false

+  /home-or-tmp@2.0.0:
+    resolution: {integrity: sha512-ycURW7oUxE2sNiPVw1HVEFsW+ecOpJ5zaj7eC0RlwhibhRBod20muUN8qu/gzx956YrLolVvs1MTXwKgC2rVEg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      os-homedir: 1.0.2
+      os-tmpdir: 1.0.2
+    dev: true
+
  /hosted-git-info@2.8.9:
    resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
    dev: true
@@ -2988,6 +3587,12 @@ packages:
      p-is-promise: 1.1.0
    dev: true

+  /invariant@2.2.4:
+    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: true
+
  /ipaddr.js@1.9.1:
    resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
    engines: {node: '>= 0.10'}
@@ -3194,6 +3799,10 @@ packages:
    resolution: {integrity: sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==}
    dev: false

+  /js-tokens@3.0.2:
+    resolution: {integrity: sha512-RjTcuD4xjtthQkaWH7dFlH85L+QaVtSoOyGdZ3g6HFhS9dFNDfLyqgm2NFe2X6cQpeFmt0452FJjFG5UameExg==}
+    dev: true
+
  /js-tokens@4.0.0:
    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
    dev: true
@@ -3205,6 +3814,16 @@ packages:
      argparse: 2.0.1
    dev: true

+  /jsesc@0.5.0:
+    resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==}
+    hasBin: true
+    dev: true
+
+  /jsesc@1.3.0:
+    resolution: {integrity: sha512-Mke0DA0QjUWuJlhsE0ZPPhYiJkRap642SmI/4ztCFaUs6V2AiH1sfecc+57NgaryfAA2VR3v6O+CSjC1jZJKOA==}
+    hasBin: true
+    dev: true
+
  /json-buffer@3.0.0:
    resolution: {integrity: sha512-CuUqjv0FUZIdXkHPI8MezCnFCdaTAacej1TZYulLoAg1h/PhwkdXFN4V/gzY4g+fMBCOV2xF+rp7t2XD2ns/NQ==}
    dev: true
@@ -3221,6 +3840,18 @@ packages:
    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
    dev: true

+  /json5@0.5.1:
+    resolution: {integrity: sha512-4xrs1aW+6N5DalkqSVA8fxh458CXvR99WU8WLKmq4v8eWAL86Xo3BVqyd3SkA9wEVjCMqyvvRRkshAdOnBp5rw==}
+    hasBin: true
+    dev: true
+
+  /json5@1.0.2:
+    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
+    hasBin: true
+    dependencies:
+      minimist: 1.2.8
+    dev: true
+
  /jsonc-parser@3.2.1:
    resolution: {integrity: sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==}
    dev: false
@@ -3286,6 +3917,15 @@ packages:
      '@types/trusted-types': 2.0.7
    dev: false

+  /lit-scss-loader@2.0.1(webpack@5.91.0):
+    resolution: {integrity: sha512-2PvmHuklfZx+OgudhU2zH4SrKyPdzQ9eOQsYoxGEga10dcAwmiMx/6UjOdI13i/BHxcElOqSmTkJ4hBxZrO7dQ==}
+    peerDependencies:
+      webpack: ^5.37.1
+    dependencies:
+      clean-css: 4.2.4
+      webpack: 5.91.0(webpack-cli@5.1.4)
+    dev: true
+
  /lit@3.1.2:
    resolution: {integrity: sha512-VZx5iAyMtX7CV4K8iTLdCkMaYZ7ipjJZ0JcSdJ0zIdGxxyurjIn7yuuSxNBD7QmjvcNJwr0JS4cAdAtsy7gZ6w==}
    dependencies:
@@ -3310,6 +3950,15 @@ packages:
    engines: {node: '>=6.11.5'}
    dev: true

+  /loader-utils@1.4.2:
+    resolution: {integrity: sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==}
+    engines: {node: '>=4.0.0'}
+    dependencies:
+      big.js: 5.2.2
+      emojis-list: 3.0.0
+      json5: 1.0.2
+    dev: true
+
  /locate-path@5.0.0:
    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
    engines: {node: '>=8'}
@@ -3337,6 +3986,13 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: true

+  /loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+    dependencies:
+      js-tokens: 4.0.0
+    dev: true
+
  /loud-rejection@1.6.0:
    resolution: {integrity: sha512-RPNliZOFkqFumDhvYqOaNY4Uz9oJM2K9tC6JWsJJsNdhuONW4LQHRBpb0qf4pJApVffI5N39SwzWZJuEhfd7eQ==}
    engines: {node: '>=0.10.0'}
@@ -3559,6 +4215,13 @@ packages:
    engines: {node: '>=16 || 14 >=14.17'}
    dev: true

+  /mkdirp@0.5.6:
+    resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
+    hasBin: true
+    dependencies:
+      minimist: 1.2.8
+    dev: true
+
  /ms@2.0.0:
    resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
    dev: true
@@ -3746,6 +4409,16 @@ packages:
      arch: 2.2.0
    dev: true

+  /os-homedir@1.0.2:
+    resolution: {integrity: sha512-B5JU3cabzk8c67mRRd3ECmROafjYMXbuzlwtqdM8IbS8ktlTix8aFGb2bAGKrSRIlnfKwovGUUr72JUPyOb6kQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /os-tmpdir@1.0.2:
+    resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
  /p-cancelable@0.3.0:
    resolution: {integrity: sha512-RVbZPLso8+jFeq1MfNvgXtCRED2raz/dKpacfTNxsx6pLEpEomM7gah6VeHSYV3+vo0OAi4MkArtQcWWXuQoyw==}
    engines: {node: '>=4'}
@@ -4124,6 +4797,11 @@ packages:
      renderkid: 3.0.0
    dev: true

+  /private@0.1.8:
+    resolution: {integrity: sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
  /process-nextick-args@2.0.1:
    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}

@@ -4283,14 +4961,49 @@ packages:
      strip-indent: 1.0.1
    dev: true

+  /regenerate@1.4.2:
+    resolution: {integrity: sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==}
+    dev: true
+
+  /regenerator-runtime@0.11.1:
+    resolution: {integrity: sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==}
+    dev: true
+
  /regenerator-runtime@0.14.1:
    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
    dev: true

+  /regenerator-transform@0.10.1:
+    resolution: {integrity: sha512-PJepbvDbuK1xgIgnau7Y90cwaAmO/LCLMI2mPvaXq2heGMR3aWW5/BQvYrhJ8jgmQjXewXvBjzfqKcVOmhjZ6Q==}
+    dependencies:
+      babel-runtime: 6.26.0
+      babel-types: 6.26.0
+      private: 0.1.8
+    dev: true
+
  /regexp-to-ast@0.5.0:
    resolution: {integrity: sha512-tlbJqcMHnPKI9zSrystikWKwHkBqu2a/Sgw01h3zFjvYrMxEDYHzzoMZnUrbIfpTFEsoRnnviOXNCzFiSc54Qw==}
    dev: false

+  /regexpu-core@2.0.0:
+    resolution: {integrity: sha512-tJ9+S4oKjxY8IZ9jmjnp/mtytu1u3iyIQAfmI51IKWH6bFf7XR1ybtaO6j7INhZKXOTYADk7V5qxaqLkmNxiZQ==}
+    dependencies:
+      regenerate: 1.4.2
+      regjsgen: 0.2.0
+      regjsparser: 0.1.5
+    dev: true
+
+  /regjsgen@0.2.0:
+    resolution: {integrity: sha512-x+Y3yA24uF68m5GA+tBjbGYo64xXVJpbToBaWCoSNSc1hdk6dfctaRWrNFTVJZIIhL5GxW8zwjoixbnifnK59g==}
+    dev: true
+
+  /regjsparser@0.1.5:
+    resolution: {integrity: sha512-jlQ9gYLfk2p3V5Ag5fYhA7fv7OHzd1KUH0PRP46xc3TgwjwgROIW572AfYg/X9kaNq/LJnu6oJcFRXlIrGoTRw==}
+    hasBin: true
+    dependencies:
+      jsesc: 0.5.0
+    dev: true
+
  /relateurl@0.2.7:
    resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==}
    engines: {node: '>= 0.10'}
@@ -4659,6 +5372,11 @@ packages:
    engines: {node: '>=14'}
    dev: true

+  /slash@1.0.0:
+    resolution: {integrity: sha512-3TYDR7xWt4dIqV2JauJr+EJeW356RXijHeUlO+8djJ+uBXPn8/2dpzBc8yQhh583sVvc9CvFAeQVgijsH+PNNg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
  /slash@3.0.0:
    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
    engines: {node: '>=8'}
@@ -4708,6 +5426,12 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: true

+  /source-map-support@0.4.18:
+    resolution: {integrity: sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==}
+    dependencies:
+      source-map: 0.5.7
+    dev: true
+
  /source-map-support@0.5.21:
    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
    dependencies:
@@ -4715,6 +5439,11 @@ packages:
      source-map: 0.6.1
    dev: true

+  /source-map@0.5.7:
+    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
  /source-map@0.6.1:
    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
    engines: {node: '>=0.10.0'}
@@ -5049,6 +5778,11 @@ packages:
    resolution: {integrity: sha512-lx9B5iv7msuFYE3dytT+KE5tap+rNYw+K4jVkb9R/asAb+pbBSM17jtunHplhBe6RRJdZx3Pn2Jph24O32mOVg==}
    dev: true

+  /to-fast-properties@1.0.3:
+    resolution: {integrity: sha512-lxrWP8ejsq+7E3nNjwYmUBMAgjMTZoTI+sdBOpvNyijeDLa29LUn9QaoXAHv4+Z578hbmHHJKZknzxVtvo77og==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
  /to-regex-range@5.0.1:
    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
    engines: {node: '>=8.0'}
@@ -5086,6 +5820,11 @@ packages:
      escape-string-regexp: 1.0.5
    dev: true

+  /trim-right@1.0.1:
+    resolution: {integrity: sha512-WZGXGstmCWgeevgTL54hrCuw1dyMQIzWy7ZfqRJfSmJZBwklI15egmQytFP6bPidmw3M8d5yEowl1niq4vmqZw==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
  /ts-lit-plugin@2.0.2:
    resolution: {integrity: sha512-DPXlVxhjWHxg8AyBLcfSYt2JXgpANV1ssxxwjY98o26gD8MzeiM68HFW9c2VeDd1CjoR3w7B/6/uKxwBQe+ioA==}
    dependencies:
--- a/www/src/js/app/app.ts
+++ b/www/src/js/app/app.ts
@@ -1,15 +1,59 @@
-import { HTMLTemplateResult, html, css } from "lit";
+import { HTMLTemplateResult, html, css, CSSResultGroup } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { BaseElement } from "../components";
+import { BaseElement, defaultCss } from "../components";
 import "./nav.ts";

-@customElement('ic10emu-app')
+import "@shoelace-style/shoelace/dist/components/split-panel/split-panel.js";
+
+import "../editor";
+
+@customElement("ic10emu-app")
 export class App extends BaseElement {
+  static styles = [
+    ...defaultCss,
+    css`
+      :host {
+        height: 100vh;
+        display: block;
+      }
+      .app-container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+      .app-body {
+        flex-grow: 1;
+        // z-index: auto;
+      }
+      .z-fix {
+        z-index: 900;
+      }
+      sl-split-panel {
+        height: 100%;
+      }
+    `,
+  ];
+
  constructor() {
    super();
  }

  protected render(): HTMLTemplateResult {
-    return html`<app-nav></app-nav>`;
+    return html`
+      <div class="app-container">
+        <app-nav class=z-fix></app-nav>
+        <div class="app-body">
+          <sl-split-panel
+            style="--min: 20em; --max: calc(100% - 20em);"
+            primary="start"
+            snap="512px 50%"
+            snap-threshold="15"
+          >
+            <ace-ic10 slot="start"></ace-ic10>
+            <div slot="end">Controls</div>
+          </sl-split-panel>
+        </div>
+      </div>
+    `;
  }
 }
--- a/www/src/js/app/nav.ts
+++ b/www/src/js/app/nav.ts
@@ -1,6 +1,6 @@
 import { HTMLTemplateResult, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { BaseElement } from "../components";
+import { BaseElement, defaultCss } from "../components";
 import "@shoelace-style/shoelace/dist/components/icon-button/icon-button.js";
 import "@shoelace-style/shoelace/dist/components/menu/menu.js";
 import "@shoelace-style/shoelace/dist/components/divider/divider.js";
@@ -9,66 +9,81 @@ import "@shoelace-style/shoelace/dist/components/dropdown/dropdown.js";

@customElement("app-nav")
 export class Nav extends BaseElement {
-  static styles = css`
-    .nav {
-      display: flex;
-      flex-wrap: wrap;
-      padding-left: 0;
-      margin-bottom: 0;
-      list-style: none;
-    }
-    .navbar {
-      position: relative;
-      display: flex;
-      flex-wrap: wrap;
-      align-items: left;
-      justify-content: space-between;
-      padding: 0.5rem 0;
-    }
-    .navbar-nav {
-      display: flex;
-      flex-direction: column;
-      padding-left: 0;
-      margin-bottom: 0;
-      list-style: none;
-    }
-    .ps-2 {
-      padding-left: 0.5rem !important;
-    }
-    .ms-2 {
-      margin-left: 0.5rem !important;
-    }
-    .ms-auto {
-      margin-left: auto !important;
-    }
-    .flex-row {
-      flex-direction: row !important;
-    }
-    .d-flex {
-      display: flex !important;
-    }
-    @media (min-width: 768px) .d-md-flex {
-      display: flex !important;
-    }
-    @media (min-width: 576px) .d-sm-none {
-      display: none !important;
-    }
-    .d-none {
-      display: none !important;
-    }
-    ol,
-    ul,
-    dl {
-      margin-top: 0;
-      margin-bottom: 1rem;
-    }
-    .navbar-text {
-      padding: 0;
-      padding-right: 10px;
-      position: relative;
-      color: #fff;
-    }
-  `;
+  static styles = [
+    ...defaultCss,
+    css`
+      .nav {
+        display: flex;
+        flex-wrap: wrap;
+        padding-left: 0;
+        margin-bottom: 0;
+        list-style: none;
+      }
+      .navbar {
+        position: relative;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: left;
+        justify-content: space-between;
+        padding: 0.5rem 0;
+      }
+      .navbar-nav {
+        display: flex;
+        flex-direction: column;
+        padding-left: 0;
+        margin-bottom: 0;
+        list-style: none;
+      }
+      @media screen and (min-width: 768px) {
+        .navbar-right {
+          display: flex !important;
+          flex-direction: row !important;
+          margin-left: 0.5rem !important;
+        }
+      }
+      .navbar-right {
+        display: none;
+      }
+      ol,
+      ul,
+      dl {
+        margin-top: 0;
+        margin-bottom: 1rem;
+      }
+      .navbar-text {
+        padding: 0;
+        padding-right: 10px;
+        position: relative;
+        color: #fff;
+      }
+      .nav > li > a {
+        color: #fff;
+        line-height: 20px;
+        position: relative;
+        display: block;
+        padding: 10px 15px;
+        padding-top: 10px;
+        padding-bottom: 10px;
+      }
+      .navbar-brand {
+        padding-top: 0.3125rem;
+        padding-bottom: 0.3125rem;
+        margin-right: 1rem;
+        font-size: 1.25rem;
+        color: #fff;
+        text-decoration: none;
+        white-space: nowrap;
+      }
+      .dropdown {
+        position: relative;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+      nav {
+        border-bottom: 1px solid rgb(108, 117, 125);
+      }
+    `,
+  ];

  constructor() {
    super();
@@ -77,7 +92,7 @@ export class Nav extends BaseElement {
    return html`
      <nav id="navBar" class="navbar navbar-default">
        <div class="nav navbar-nav ps-2">
-          <sl-dropdown>
+          <sl-dropdown class="dropdown">
            <sl-icon-button
              library="fa"
              name="fas-bars"
@@ -85,7 +100,7 @@ export class Nav extends BaseElement {
              label="Main Menu"
            ></sl-icon-button>

-            <sl-menu>
+            <sl-menu class="menu">
              <sl-menu-item value="share">Share</sl-menu-item>
              <sl-menu-item value="openFile">Open File</sl-menu-item>
              <sl-menu-item value="saveAs">Save As</sl-menu-item>
@@ -107,18 +122,16 @@ export class Nav extends BaseElement {
          >
        </div>

-        <div class="nav navbar-nav  ms-auto navbar-right d-flex flex-row">
+        <div class="nav navbar-nav  ms-auto d-flex flex-row">
          <a
            class="navbar-text mt-auto mb-auto align-self-center"
            href="https://github.com/ryex/ic10emu"
-            >View on Github <i class="fa-brands fa-github"></i
-          ></a>
+            >View on Github <sl-icon library="fa" name="fab-github"></sl-icon>
+          </a>
        </div>

        <!-- <div class="flex-grow w-100">&nbsp;</div> -->
-        <ul
-          class="nav navbar-nav navbar-right flex-row d-sm-none d-none d-md-flex"
-        >
+        <ul class="nav navbar-nav navbar-right">
          <p class="navbar-text mt-auto mb-auto align-self-center">
            Official Stationeers:
          </p>
--- a/www/src/js/components/base.ts
+++ b/www/src/js/components/base.ts
@@ -1,7 +1,38 @@
-import { LitElement, css } from "lit";
+import { CSSResultGroup, LitElement, css, unsafeCSS } from "lit";
 import shoelaceDark from "@shoelace-style/shoelace/dist/themes/dark.styles.js";

+
+export const defaultCss = [
+  shoelaceDark,
+  css`
+    .ps-2 {
+      padding-left: 0.5rem !important;
+    }
+    .ms-2 {
+      margin-left: 0.5rem !important;
+    }
+    .ms-auto {
+      margin-left: auto !important;
+    }
+    .flex-row {
+      flex-direction: row !important;
+    }
+    .d-flex {
+      display: flex !important;
+    }
+    .align-self-center {
+      align-self: center !important;
+    }
+    .mb-auto {
+      margin-bottom: auto !important;
+    }
+    .mt-auto {
+      margin-top: auto !important;
+    }
+  `,
+];
+
 export class BaseElement extends LitElement {
  // Some default styles
-  static styles = shoelaceDark;
+  static styles: CSSResultGroup = defaultCss;
 }
--- a/www/src/js/components/index.ts
+++ b/www/src/js/components/index.ts
@@ -1,3 +1,3 @@
-import { BaseElement } from './base';
+import { BaseElement, defaultCss } from './base';

-export { BaseElement }
+export { BaseElement, defaultCss }
--- a/www/src/js/editor/index.ts
+++ b/www/src/js/editor/index.ts
@@ -2,6 +2,7 @@ import ace from "ace-builds";
 import "ace-builds/esm-resolver";

 import { AceLanguageClient } from "ace-linters/build/ace-language-client";
+import { LanguageProvider } from "ace-linters/types/language-provider";

 import { IC10EditorUI } from "./ui";
 import { Range } from "ace-builds";
@@ -33,12 +34,12 @@ declare global {
  }
 }

-import { BaseElement } from "../components";
-import { html, css } from "lit";
+import { BaseElement, defaultCss } from "../components";
+import { html, css, HTMLTemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";

@customElement("ace-ic10")
-class IC10Editor extends BaseElement {
+export class IC10Editor extends BaseElement {
  mode: string;
  settings: {
    keyboard: string;
@@ -52,74 +53,262 @@ class IC10Editor extends BaseElement {
  accessor active_session: number = 0;

  active_line_markers: Map<number, number | null> = new Map();
-  languageProvider?: AceLanguageClient;
-  ui: IC10EditorUI;
+  languageProvider?: LanguageProvider;
+  // ui: IC10EditorUI;
+
+  static styles = [
+    ...defaultCss,
+    css`
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+      #editor {
+        // border: 1px solid;
+        // border-radius: 4px;
+        @apply --ace-widget-editor;
+      }
+      #editorStatusbar {
+        z-index: 9 !important;
+        position: absolute !important;
+        right: 4px;
+        bottom: 4px;
+      }
+      .ace_status-indicator {
+        background-color: #777;
+        color: white;
+        text-align: center;
+        border: none;
+        border-radius: 7px;
+        padding-right: 3px;
+        padding-left: 3px;
+        padding-bottom: 1px;
+        font-size: small;
+        opacity: 0.9;
+      }
+      .hide_statusbar {
+        display: none;
+      }
+      .ace_marker-layer .green {
+        // background-color: ;
+        // color: ;
+        position: absolute;
+      }
+      .ace_marker-layer .darkGrey {
+        // background-color: ;
+        // color: ;
+        position: absolute;
+      }
+      .ace_marker-layer .red {
+        // background-color: ;
+        // color: ;
+        position: absolute;
+      }
+      .ace_marker-layer .blue {
+        // background-color: ;
+        // color: ;
+        position: absolute;
+      }
+      .ace_marker-layer .orange {
+        background-color: #ff9900;
+        color: #555;
+        position: absolute;
+      }
+      .ace_placeholder {
+        color: #808080 !important;
+        // font-family: "" !important;
+        transform: scale(1) !important;
+        opacity: 1 !important;
+        font-style: italic !important;
+      }
+      /* ------------------------------------------------------------------------------------------
+      * Editor Search Form
+      * --------------------------------------------------------------------------------------- */
+      .ace_search {
+        background-color: #2b3035;
+        color: #dee2e6;
+        border: 1px solid #495057;
+        border-top: 0 none;
+        overflow: hidden;
+        margin: 0;
+        padding: 4px 6px 0 4px;
+        position: absolute;
+        top: 0;
+        z-index: 99;
+        white-space: normal;
+      }
+
+      .ace_search.left {
+        border-left: 0 none;
+        border-radius: 0px 0px 5px 0px;
+        left: 0;
+      }
+
+      .ace_search.right {
+        border-radius: 0px 0px 0px 5px;
+        border-right: 0 none;
+        right: 0;
+      }
+
+      .ace_search_form,
+      .ace_replace_form {
+        margin: 0 20px 4px 0;
+        overflow: hidden;
+        line-height: 1.9;
+      }
+
+      .ace_replace_form {
+        margin-right: 0;
+      }
+
+      .ace_search_form.ace_nomatch {
+        outline: 1px solid red;
+      }
+
+      .ace_search_field {
+        border-radius: 3px 0 0 3px;
+        background-color: #343a40;
+        color: #dee2e6;
+        border: 1px solid #41464b;
+        border-right: 0 none;
+        outline: 0;
+        padding: 0;
+        font-size: inherit;
+        margin: 0;
+        line-height: inherit;
+        padding: 0 6px;
+        min-width: 17em;
+        vertical-align: top;
+        min-height: 1.8em;
+        box-sizing: content-box;
+      }
+
+      .ace_searchbtn {
+        border: 1px solid #6c757d;
+        line-height: inherit;
+        display: inline-block;
+        padding: 0 6px;
+        background: #343a40;
+        border-right: 0 none;
+        border-left: 1px solid #6c757d;
+        cursor: pointer;
+        margin: 0;
+        position: relative;
+        color: #fff;
+      }
+
+      .ace_searchbtn:last-child {
+        border-radius: 0 3px 3px 0;
+        border-right: 1px solid #6c757d;
+      }
+
+      .ace_searchbtn:disabled {
+        background: none;
+        cursor: default;
+      }
+
+      .ace_searchbtn:hover {
+        background-color: #161719;
+      }
+
+      .ace_searchbtn.prev,
+      .ace_searchbtn.next {
+        padding: 0px 0.7em;
+      }
+
+      .ace_searchbtn.prev:after,
+      .ace_searchbtn.next:after {
+        content: "";
+        border: solid 2px #6c757d;
+        width: 0.5em;
+        height: 0.5em;
+        border-width: 2px 0 0 2px;
+        display: inline-block;
+        transform: rotate(-45deg);
+      }
+
+      .ace_searchbtn.next:after {
+        border-width: 0 2px 2px 0;
+      }
+
+      .ace_searchbtn_close {
+        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAcCAYAAABRVo5BAAAAZ0lEQVR42u2SUQrAMAhDvazn8OjZBilCkYVVxiis8H4CT0VrAJb4WHT3C5xU2a2IQZXJjiQIRMdkEoJ5Q2yMqpfDIo+XY4k6h+YXOyKqTIj5REaxloNAd0xiKmAtsTHqW8sR2W5f7gCu5nWFUpVjZwAAAABJRU5ErkJggg==)
+          no-repeat 50% 0;
+        border-radius: 50%;
+        border: 0 none;
+        color: #343a40;
+        cursor: pointer;
+        font: 16px/16px Arial;
+        padding: 0;
+        height: 14px;
+        width: 14px;
+        top: 9px;
+        right: 7px;
+        position: absolute;
+      }
+
+      .ace_searchbtn_close:hover {
+        background-color: #656565;
+        background-position: 50% 100%;
+        color: white;
+      }
+
+      .ace_button {
+        background-color: #343a40;
+        margin-left: 2px;
+        cursor: pointer;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -o-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        overflow: hidden;
+        opacity: 0.7;
+        border: 1px solid #6c757d;
+        padding: 1px;
+        box-sizing: border-box !important;
+        color: #fff;
+      }
+
+      .ace_button:hover {
+        background-color: #161719;
+        opacity: 1;
+      }
+
+      .ace_button:active {
+        background-color: #6c757d;
+      }
+
+      .ace_button.checked {
+        background-color: #6c757d;
+        border-color: #6c757d;
+        opacity: 1;
+      }
+
+      .ace_search_options {
+        margin-bottom: 3px;
+        text-align: right;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -o-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        clear: both;
+      }
+
+      .ace_search_counter {
+        float: left;
+        font-family: arial;
+        padding: 0 8px;
+      }
+
+      /* ----------------
+      *  End Ace Search
+      *  --------------- */
+    `,
+  ];

-  static styles = css`
-    :host {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-    #editor {
-      border: var(--lae-border, 1px solid var(--lumo-contrast-20pct));
-      border-radius: var(--lae-border-radius, var(--lumo-border-radius));
-      @apply --ace-widget-editor;
-    }
-    #editorStatusbar {
-      z-index: 9 !important;
-      position: absolute !important;
-      right: 4px;
-      bottom: 4px;
-    }
-    .ace_status-indicator {
-      background-color: var(--las-background-color, #777);
-      color: var(--las-color, white);
-      text-align: center;
-      border: none;
-      border-radius: var(--las-border-radius, 7px);
-      padding-right: 3px;
-      padding-left: 3px;
-      padding-bottom: 1px;
-      font-size: small;
-      opacity: 0.9;
-    }
-    .hide_statusbar {
-      display: none;
-    }
-    .ace_marker-layer .green {
-      background-color: var(--lumo-success-color);
-      color: var(--lumo-primary-contrast-color);
-      position: absolute;
-    }
-    .ace_marker-layer .darkGrey {
-      background-color: var(--lumo-shade-50pct);
-      color: var(--lumo-primary-contrast-color);
-      position: absolute;
-    }
-    .ace_marker-layer .red {
-      background-color: var(--lumo-error-color);
-      color: var(--lumo-primary-contrast-color);
-      position: absolute;
-    }
-    .ace_marker-layer .blue {
-      background-color: var(--lumo-primary-color);
-      color: var(--lumo-primary-contrast-color);
-      position: absolute;
-    }
-    .ace_marker-layer .orange {
-      background-color: #ff9900;
-      color: #555;
-      position: absolute;
-    }
-    .ace_placeholder {
-      color: #808080 !important;
-      font-family: var(--lumo-font-family) !important;
-      transform: scale(1) !important;
-      opacity: 1 !important;
-      font-style: italic !important;
-    }
-  `;
  initialInit: boolean;
  editorDiv: HTMLElement;
  editorContainerDiv: HTMLElement;
@@ -135,7 +324,7 @@ class IC10Editor extends BaseElement {

  constructor() {
    super();
-    console.log('constructing editor')
+    console.log("constructing editor");

    window.Editor = this;
    this.mode = "ace/mode/ic10";
@@ -153,54 +342,9 @@ class IC10Editor extends BaseElement {
    // this.ui = new IC10EditorUI(this);

    const that = this;
-
-    App.session.onLoad((session: Session) => {
-      const updated_ids = [];
-      for (const [id, _] of session.programs) {
-        updated_ids.push(id);
-        that.createOrSetSession(id, session.programs.get(id));
-      }
-      that.activateSession(that.active_session);
-      for (const [id, _] of that.sessions) {
-        if (!updated_ids.includes(id)) {
-          that.destroySession(id);
-        }
-      }
-    });
-    App.session.loadFromFragment();
-
-    App.session.onActiveLine((session: Session) => {
-      for (const id of session.programs.keys()) {
-        const active_line = session.getActiveLine(id);
-        if (typeof active_line !== "undefined") {
-          const marker = that.active_line_markers.get(id);
-          if (marker) {
-            that.sessions.get(id).removeMarker(marker);
-            that.active_line_markers.set(id, null);
-          }
-          const session = that.sessions.get(id);
-          if (session) {
-            that.active_line_markers.set(
-              id,
-              session.addMarker(
-                new Range(active_line, 0, active_line, 1),
-                "vm_ic_active_line",
-                "fullLine",
-                true,
-              ),
-            );
-            if (that.active_session == id) {
-              // editor.resize(true);
-              // TODO: Scroll to line if vm was stepped
-              //that.editor.scrollToLine(active_line, true, true, ()=>{})
-            }
-          }
-        }
-      }
-    });
  }

-  render() {
+  protected render() {
    return html`
      <div
        id="editorContainer"
@@ -216,7 +360,7 @@ class IC10Editor extends BaseElement {
  }

  async firstUpdated() {
-    console.log('editor firstUpdated')
+    console.log("editor firstUpdated");
    if (!ace.require("ace/ext/language_tools")) {
      await import("ace-builds/src-noconflict/ext-language_tools");
    }
@@ -235,9 +379,9 @@ class IC10Editor extends BaseElement {

    this.initialInit = true;

-    this.editorDiv = this.shadowRoot.getElementById("editor");
-    this.editorContainerDiv = this.shadowRoot.getElementById("editorContainer");
-    this.editorStatusbarDiv = this.shadowRoot.getElementById("editorStatusbar");
+    this.editorDiv = this.shadowRoot?.getElementById("editor") as HTMLElement;
+    this.editorContainerDiv = this.shadowRoot?.getElementById("editorContainer") as HTMLElement;
+    this.editorStatusbarDiv = this.shadowRoot?.getElementById("editorStatusbar") as HTMLElement;

    this.editor = ace.edit(this.editorDiv, {
      mode: this.mode,
@@ -282,6 +426,53 @@ class IC10Editor extends BaseElement {
    this.observer.observe(this.editorContainerDiv);

    this.initializeEditor();
+
+    App.session.onLoad(((e: CustomEvent) => {
+      const session = e.detail;
+      const updated_ids: number[] = [];
+      for (const [id, _] of session.programs) {
+        updated_ids.push(id);
+        that.createOrSetSession(id, session.programs.get(id));
+      }
+      that.activateSession(that.active_session);
+      for (const [id, _] of that.sessions) {
+        if (!updated_ids.includes(id)) {
+          that.destroySession(id);
+        }
+      }
+    }) as EventListener);
+    App.session.loadFromFragment();
+
+    App.session.onActiveLine(((e: CustomEvent) => {
+      const session = e.detail;
+      for (const id of session.programs.keys()) {
+        const active_line = session.getActiveLine(id);
+        if (typeof active_line !== "undefined") {
+          const marker = that.active_line_markers.get(id);
+          if (marker) {
+            that.sessions.get(id)?.removeMarker(marker);
+            that.active_line_markers.set(id, null);
+          }
+          const session = that.sessions.get(id);
+          if (session) {
+            that.active_line_markers.set(
+              id,
+              session.addMarker(
+                new Range(active_line, 0, active_line, 1),
+                "vm_ic_active_line",
+                "fullLine",
+                true,
+              ),
+            );
+            if (that.active_session == id) {
+              // editor.resize(true);
+              // TODO: Scroll to line if vm was stepped
+              //that.editor.scrollToLine(active_line, true, true, ()=>{})
+            }
+          }
+        }
+      }
+    }) as EventListener);
  }

  initializeEditor() {
@@ -303,7 +494,7 @@ class IC10Editor extends BaseElement {
      { root: null },
    );
    this.vScrollbarObserver.observe(
-      this.shadowRoot.querySelector(".ace_scrollbar-v"),
+      this.shadowRoot?.querySelector(".ace_scrollbar-v") as Element,
    );

    this.hScrollbarObserver = new IntersectionObserver(
@@ -311,7 +502,7 @@ class IC10Editor extends BaseElement {
      { root: null },
    );
    this.hScrollbarObserver.observe(
-      this.shadowRoot.querySelector(".ace_scrollbar-h"),
+      this.shadowRoot?.querySelector(".ace_scrollbar-h"),
    );
  }

@@ -332,7 +523,7 @@ class IC10Editor extends BaseElement {

  /** @private */
  _vScrollbarHandler() {
-    var vScrollbar = this.shadowRoot.querySelector(
+    var vScrollbar = this.shadowRoot?.querySelector(
      ".ace_scrollbar-v",
    ) as HTMLDivElement;
    if (vScrollbar.style.display === "none") {
@@ -348,7 +539,7 @@ class IC10Editor extends BaseElement {

  /** @private */
  _hScrollbarHandler() {
-    var hScrollbar = this.shadowRoot.querySelector(
+    var hScrollbar = this.shadowRoot?.querySelector(
      ".ace_scrollbar-h",
    ) as HTMLDivElement;
    if (hScrollbar.style.display === "none") {
@@ -400,7 +591,7 @@ class IC10Editor extends BaseElement {
    if (!this.sessions.hasOwnProperty(session_id)) {
      this.newSession(session_id);
    }
-    this.sessions.get(session_id).setValue(content);
+    this.sessions.get(session_id)?.setValue(content);
  }

  newSession(session_id: number) {
@@ -424,15 +615,18 @@ class IC10Editor extends BaseElement {
    };
    // Create a language provider for web worker
    this.languageProvider = AceLanguageClient.for(serverData as any);
-    (this.languageProvider as any).registerEditor(this.editor);
-
+    this.languageProvider.registerEditor(this.editor);
  }

  activateSession(session_id: number) {
    if (!this.sessions.get(session_id)) {
      return false;
    }
-    this.editor.setSession(this.sessions.get(session_id));
+    const session = this.sessions.get(session_id);
+    this.editor?.setSession(session);
+    const mode = ace.require(this.mode);
+    const options = mode?.options ?? {};
+    this.languageProvider?.setSessionOptions(session, options)
    this.active_session = session_id;
    return true;
  }
@@ -467,16 +661,16 @@ class IC10Editor extends BaseElement {
    if ((this.active_session = session_id)) {
      this.activateSession(this.sessions.entries().next().value);
    }
-    session.destroy();
+    session?.destroy();
    return true;
  }

-  bindSession(session_id: number, session: ace.Ace.EditSession) {
-    session.on("change", () => {
-      var val = session.getValue();
-      window.App.session.setProgramCode(session_id, val);
-    });
+  bindSession(session_id: number, session?: ace.Ace.EditSession) {
+    if (session) {
+      session.on("change", () => {
+        var val = session.getValue();
+        window.App?.session.setProgramCode(session_id, val);
+      });
+    }
  }
 }
-
-export { IC10Editor };
--- a/www/src/js/index.ts
+++ b/www/src/js/index.ts
@@ -29,59 +29,59 @@ window.App = App;
 // const dbPromise = fetch("/data/database.json").then(resp => resp.json());
 const dbPromise = import("../../data/database.json");

-docReady(() => {
-  App.vm = new VirtualMachine();
-
-  dbPromise.then((db) => App.vm.setupDeviceDatabase(db));
-
-  const init_session_id = App.vm.devices.get(0).id;
-
-  // App.editor = new IC10Editor(init_session_id);
-
-  // setupLspWorker().then((worker) => {
-  //   App.editor.setupLsp(worker);
-  // });
-
-  // Menu
-  document.getElementById("mainMenuShare").addEventListener(
-    "click",
-    (_event) => {
-      const link = document.getElementById("shareLinkText") as HTMLInputElement;
-      link.setAttribute("value", window.location.href);
-      link.setSelectionRange(0, 0);
-    },
-    { capture: true },
-  );
-  document.getElementById("shareLinkCopyButton").addEventListener(
-    "click",
-    (event) => {
-      event.preventDefault();
-      const link = document.getElementById("shareLinkText") as HTMLInputElement;
-      link.select();
-      link.setSelectionRange(0, 99999);
-      navigator.clipboard.writeText(link.value);
-    },
-    { capture: true },
-  );
-  document.getElementById("mainMenuOpenFile").addEventListener(
-    "click",
-    (_event) => {
-      openFile(App.editor.editor);
-    },
-    { capture: true },
-  );
-  document.getElementById("mainMenuSaveAs").addEventListener(
-    "click",
-    (_event) => {
-      saveFile(App.editor.editor.getSession().getValue());
-    },
-    { capture: true },
-  );
-  document.getElementById("mainMenuKeyboardShortcuts").addEventListener(
-    "click",
-    (_event) => {
-      App.editor.editor.execCommand("showKeyboardShortcuts");
-    },
-    { capture: true },
-  );
-});
+// docReady(() => {
+//   App.vm = new VirtualMachine();
+//
+//   dbPromise.then((db) => App.vm.setupDeviceDatabase(db));
+//
+//   const init_session_id = App.vm.devices.get(0).id;
+//
+//   // App.editor = new IC10Editor(init_session_id);
+//
+//   // setupLspWorker().then((worker) => {
+//   //   App.editor.setupLsp(worker);
+//   // });
+//
+//   // Menu
+//   document.getElementById("mainMenuShare").addEventListener(
+//     "click",
+//     (_event) => {
+//       const link = document.getElementById("shareLinkText") as HTMLInputElement;
+//       link.setAttribute("value", window.location.href);
+//       link.setSelectionRange(0, 0);
+//     },
+//     { capture: true },
+//   );
+//   document.getElementById("shareLinkCopyButton").addEventListener(
+//     "click",
+//     (event) => {
+//       event.preventDefault();
+//       const link = document.getElementById("shareLinkText") as HTMLInputElement;
+//       link.select();
+//       link.setSelectionRange(0, 99999);
+//       navigator.clipboard.writeText(link.value);
+//     },
+//     { capture: true },
+//   );
+//   document.getElementById("mainMenuOpenFile").addEventListener(
+//     "click",
+//     (_event) => {
+//       openFile(App.editor.editor);
+//     },
+//     { capture: true },
+//   );
+//   document.getElementById("mainMenuSaveAs").addEventListener(
+//     "click",
+//     (_event) => {
+//       saveFile(App.editor.editor.getSession().getValue());
+//     },
+//     { capture: true },
+//   );
+//   document.getElementById("mainMenuKeyboardShortcuts").addEventListener(
+//     "click",
+//     (_event) => {
+//       App.editor.editor.execCommand("showKeyboardShortcuts");
+//     },
+//     { capture: true },
+//   );
+// });
--- a/www/src/js/session.ts
+++ b/www/src/js/session.ts
@@ -1,4 +1,3 @@
-
 const demoCode = `# Highlighting Demo
 # This is a comment

@@ -59,32 +58,28 @@ test:
 add r15 r15 1
 j ra

-`
+`;

-interface SessionCbFn {
-  (param: Session): void;
+interface CustomEvent extends Event {
+  detail: string
 }

-class Session extends EventTarget {
+export class Session extends EventTarget {
  _programs: Map<number, string>;
-  _onLoadCallbacks: SessionCbFn[];
  _activeSession: number;
  _activeLines: Map<number, number>;
-  _onActiveLineCallbacks: SessionCbFn[];
  _activeLine: number;
-  private _save_timeout: ReturnType<typeof setTimeout>;
+  _save_timeout?: ReturnType<typeof setTimeout>;
  constructor() {
    super();
    this._programs = new Map();
-    this._save_timeout = null;
-    this._onLoadCallbacks = [];
+    this._save_timeout = undefined;
    this._activeSession = 0;
    this._activeLines = new Map();
-    this._onActiveLineCallbacks = [];
    this.loadFromFragment();

    const that = this;
-    window.addEventListener('hashchange', (_event) => {
+    window.addEventListener("hashchange", (_event) => {
      that.loadFromFragment();
    });
  }
@@ -119,24 +114,28 @@ class Session extends EventTarget {
    this.save();
  }

-  onLoad(callback: SessionCbFn) {
-    this._onLoadCallbacks.push(callback);
+  onLoad(callback: EventListenerOrEventListenerObject) {
+    this.addEventListener("session-load", callback);
  }

  _fireOnLoad() {
-    for (const callback of this._onLoadCallbacks) {
-      callback(this);
-    }
+    this.dispatchEvent(
+      new CustomEvent("session-load", {
+        detail: this,
+      }),
+    );
  }

-  onActiveLine(callback: SessionCbFn) {
-    this._onActiveLineCallbacks.push(callback);
+  onActiveLine(callback: EventListenerOrEventListenerObject) {
+    this.addEventListener("active-line", callback);
  }

  _fireOnActiveLine() {
-    for (const callback of this._onActiveLineCallbacks) {
-      callback(this);
-    }
+    this.dispatchEvent(
+      new CustomEvent("activeLine", {
+        detail: this,
+      }),
+    );
  }

  save() {
@@ -146,7 +145,7 @@ class Session extends EventTarget {
      if (window.App.vm) {
        window.App.vm.updateCode();
      }
-      this._save_timeout = null;
+      this._save_timeout = undefined;
    }, 1000);
  }

@@ -161,7 +160,6 @@ class Session extends EventTarget {
      console.log("Error compressing content fragment:", e);
      return;
    }
-
  }

  async loadFromFragment() {
@@ -177,7 +175,8 @@ class Session extends EventTarget {
      if (bytes !== null) {
        const txt = new TextDecoder().decode(bytes);
        const data = getJson(txt);
-        if (data === null) { // backwards compatible
+        if (data === null) {
+          // backwards compatible
          this._programs = new Map([[0, txt]]);
          this, this._fireOnLoad();
          return;
@@ -192,7 +191,6 @@ class Session extends EventTarget {
      }
    }
  }
-
 }
 async function decompressFragment(c_bytes: ArrayBuffer) {
  try {
@@ -223,26 +221,31 @@ async function* streamAsyncIterator(stream: ReadableStream) {
      if (done) return;
      yield value;
    }
-  }
-  finally {
+  } finally {
    reader.releaseLock();
  }
 }

 function base64url_encode(buffer: ArrayBuffer) {
-  return btoa(Array.from(new Uint8Array(buffer), b => String.fromCharCode(b)).join(''))
-    .replace(/\+/g, '-')
-    .replace(/\//g, '_')
-    .replace(/=+$/, '');
+  return btoa(
+    Array.from(new Uint8Array(buffer), (b) => String.fromCharCode(b)).join(""),
+  )
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_")
+    .replace(/=+$/, "");
 }

 function base64url_decode(value: string): ArrayBuffer {
  const m = value.length % 4;
-  return Uint8Array.from(atob(
-    value.replace(/-/g, '+')
-      .replace(/_/g, '/')
-      .padEnd(value.length + (m === 0 ? 0 : 4 - m), '=')
-  ), c => c.charCodeAt(0)).buffer
+  return Uint8Array.from(
+    atob(
+      value
+        .replace(/-/g, "+")
+        .replace(/_/g, "/")
+        .padEnd(value.length + (m === 0 ? 0 : 4 - m), "="),
+    ),
+    (c) => c.charCodeAt(0),
+  ).buffer;
 }

 async function concatUintArrays(arrays: Uint8Array[]) {
@@ -253,10 +256,8 @@ async function concatUintArrays(arrays: Uint8Array[]) {

 async function compress(bytes: ArrayBuffer) {
  const s = new Blob([bytes]).stream();
-  const cs = s.pipeThrough(
-    new CompressionStream('deflate-raw')
-  );
-  const chunks = [];
+  const cs = s.pipeThrough(new CompressionStream("deflate-raw"));
+  const chunks: Uint8Array[] = [];
  for await (const chunk of streamAsyncIterator(cs)) {
    chunks.push(chunk);
  }
@@ -265,14 +266,11 @@ async function compress(bytes: ArrayBuffer) {

 async function decompress(bytes: ArrayBuffer) {
  const s = new Blob([bytes]).stream();
-  const ds = s.pipeThrough(
-    new DecompressionStream('deflate-raw')
-  );
-  const chunks = [];
+  const ds = s.pipeThrough(new DecompressionStream("deflate-raw"));
+  const chunks: Uint8Array[] = [];
  for await (const chunk of streamAsyncIterator(ds)) {
    chunks.push(chunk);
  }
  return await concatUintArrays(chunks);
 }

-export { Session, SessionCbFn };
--- a/www/src/scss/dark.scss
+++ b/www/src/scss/dark.scss
@@ -18,17 +18,6 @@ body {
  box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.51);
 }

-.ace_status-indicator {
-  color: #dee2e6;
-  position: relative;
-  bottom: 4px;
-  border-left: 1px solid;
-  border-right: 1px solid;
-  height: 20px;
-  float: right;
-  padding-left: 5px;
-  padding-right: 5px;
-}

 #ace_settingsmenu,
 #kbshortcutmenu {
@@ -107,191 +96,6 @@ body {
  box-shadow: 0px 2px 3px 0px #555;
 }

-/* ------------------------------------------------------------------------------------------
-* Editor Search Form
-* --------------------------------------------------------------------------------------- */
-.ace_search {
-  background-color: #2b3035;
-  color: #dee2e6;
-  border: 1px solid #495057;
-  border-top: 0 none;
-  overflow: hidden;
-  margin: 0;
-  padding: 4px 6px 0 4px;
-  position: absolute;
-  top: 0;
-  z-index: 99;
-  white-space: normal;
-}
-
-.ace_search.left {
-  border-left: 0 none;
-  border-radius: 0px 0px 5px 0px;
-  left: 0;
-}
-
-.ace_search.right {
-  border-radius: 0px 0px 0px 5px;
-  border-right: 0 none;
-  right: 0;
-}
-
-.ace_search_form,
-.ace_replace_form {
-  margin: 0 20px 4px 0;
-  overflow: hidden;
-  line-height: 1.9;
-}
-
-.ace_replace_form {
-  margin-right: 0;
-}
-
-.ace_search_form.ace_nomatch {
-  outline: 1px solid red;
-}
-
-.ace_search_field {
-  border-radius: 3px 0 0 3px;
-  background-color: #343a40;
-  color: #dee2e6;
-  border: 1px solid #41464b;
-  border-right: 0 none;
-  outline: 0;
-  padding: 0;
-  font-size: inherit;
-  margin: 0;
-  line-height: inherit;
-  padding: 0 6px;
-  min-width: 17em;
-  vertical-align: top;
-  min-height: 1.8em;
-  box-sizing: content-box;
-}
-
-.ace_searchbtn {
-  border: 1px solid #6c757d;
-  line-height: inherit;
-  display: inline-block;
-  padding: 0 6px;
-  background: #343a40;
-  border-right: 0 none;
-  border-left: 1px solid #6c757d;
-  ;
-  cursor: pointer;
-  margin: 0;
-  position: relative;
-  color: #fff;
-}
-
-.ace_searchbtn:last-child {
-  border-radius: 0 3px 3px 0;
-  border-right: 1px solid #6c757d;
-}
-
-.ace_searchbtn:disabled {
-  background: none;
-  cursor: default;
-}
-
-.ace_searchbtn:hover {
-  background-color: #161719;
-}
-
-.ace_searchbtn.prev,
-.ace_searchbtn.next {
-  padding: 0px 0.7em
-}
-
-.ace_searchbtn.prev:after,
-.ace_searchbtn.next:after {
-  content: "";
-  border: solid 2px #6c757d;
-  width: 0.5em;
-  height: 0.5em;
-  border-width: 2px 0 0 2px;
-  display: inline-block;
-  transform: rotate(-45deg);
-}
-
-.ace_searchbtn.next:after {
-  border-width: 0 2px 2px 0;
-}
-
-.ace_searchbtn_close {
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAcCAYAAABRVo5BAAAAZ0lEQVR42u2SUQrAMAhDvazn8OjZBilCkYVVxiis8H4CT0VrAJb4WHT3C5xU2a2IQZXJjiQIRMdkEoJ5Q2yMqpfDIo+XY4k6h+YXOyKqTIj5REaxloNAd0xiKmAtsTHqW8sR2W5f7gCu5nWFUpVjZwAAAABJRU5ErkJggg==) no-repeat 50% 0;
-  border-radius: 50%;
-  border: 0 none;
-  color: #343a40;
-  cursor: pointer;
-  font: 16px/16px Arial;
-  padding: 0;
-  height: 14px;
-  width: 14px;
-  top: 9px;
-  right: 7px;
-  position: absolute;
-}
-
-.ace_searchbtn_close:hover {
-  background-color: #656565;
-  background-position: 50% 100%;
-  color: white;
-}
-
-.ace_button {
-  background-color: #343a40;
-  margin-left: 2px;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -o-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  overflow: hidden;
-  opacity: 0.7;
-  border: 1px solid #6c757d;
-  padding: 1px;
-  box-sizing: border-box !important;
-  color: #fff;
-}
-
-.ace_button:hover {
-  background-color: #161719;
-  opacity: 1;
-}
-
-.ace_button:active {
-  background-color: #6c757d;
-  ;
-}
-
-.ace_button.checked {
-  background-color: #6c757d;
-  border-color: #6c757d;
-  opacity: 1;
-}
-
-.ace_search_options {
-  margin-bottom: 3px;
-  text-align: right;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -o-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  clear: both;
-}
-
-.ace_search_counter {
-  float: left;
-  font-family: arial;
-  padding: 0 8px;
-}
-
-/* ----------------
-*  End Ace Search
-*  --------------- */

 code {
  // color: #e685b5
--- a/www/tsconfig.json
+++ b/www/tsconfig.json
@@ -4,7 +4,7 @@
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "es2022",
-    "target": "es2020",
+    "target": "es2021",
    "allowJs": true,
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
@@ -14,5 +14,6 @@
        "name": "ts-lit-plugin"
      }
    ]
-  }
+  },
+  "include": ["node_modules/lit-scss-loader/types.d.ts"]
 }
--- a/www/webpack.config.js
+++ b/www/webpack.config.js
@@ -1,9 +1,9 @@
 const CopyWebpackPlugin = require("copy-webpack-plugin");
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const miniCssExtractPlugin = require('mini-css-extract-plugin');
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const miniCssExtractPlugin = require("mini-css-extract-plugin");
+const { SourceMap } = require("module");

-
-const path = require('path');
+const path = require("path");

 module.exports = {
  entry: "./src/js/main.ts",
@@ -13,67 +13,83 @@ module.exports = {
    clean: true,
  },
  devServer: {
-    static: path.resolve(__dirname, 'dist'),
+    static: path.resolve(__dirname, "dist"),
    port: 8080,
-    hot: true
+    hot: true,
  },
  mode: "development",
  devtool: "eval-source-map",
  plugins: [
-    new CopyWebpackPlugin({ patterns: ['img/*.png', 'img/*/*.png', { from: 'data/database.json', to: 'data' }] }),
-    new HtmlWebpackPlugin({ template: './src/index.html' }),
-    new miniCssExtractPlugin()
+    new CopyWebpackPlugin({
+      patterns: [
+        "img/*.png",
+        "img/*/*.png",
+        { from: "data/database.json", to: "data" },
+      ],
+    }),
+    new HtmlWebpackPlugin({ template: "./src/index.html" }),
+    new miniCssExtractPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.tsx?$/,
-        use: 'ts-loader',
+        use: "ts-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.(jpg|png|svg|gif)$/,
-        type: 'asset/resource',
+        type: "asset/resource",
      },
      {
-        test: /\.(s?css)$/,
-        use: [{
-          // inject CSS to page
-          loader: miniCssExtractPlugin.loader
-        }, {
-          // translates CSS into CommonJS modules
-          loader: 'css-loader'
-        }, {
-          // Run postcss actions
-          loader: 'postcss-loader',
-          options: {
-            // `postcssOptions` is needed for postcss 8.x;
-            // if you use postcss 7.x skip the key
-            postcssOptions: {
-              // postcss plugins, can be exported to postcss.config.js
-              plugins: function () {
-                return [
-                  require('autoprefixer')
-                ];
-              }
+        test: /\.css|\.s(c|a)ss$/,
+        use: [
+          {
+            // inject CSS to page
+            loader: miniCssExtractPlugin.loader,
+          },
+          {
+            // translates CSS into CommonJS modules
+            loader: "css-loader",
+            options: {
+              sourceMap: true
            }
-          }
-        }, {
-          // compiles Sass to CSS
-          loader: 'sass-loader'
-        }],
+          },
+          {
+            // Run postcss actions
+            loader: "postcss-loader",
+            options: {
+              // `postcssOptions` is needed for postcss 8.x;
+              // if you use postcss 7.x skip the key
+              postcssOptions: {
+                // postcss plugins, can be exported to postcss.config.js
+                plugins: function () {
+                  return [require("autoprefixer")];
+                },
+              },
+            },
+          },
+          {
+            // compiles Sass to CSS
+            loader: "sass-loader",
+            options: {
+              sourceMap: true
+            }
+          },
+        ],
        // parser: {
        //   javascript : { importMeta: false }
        // }
-      },],
+      },
+    ],
  },
  resolve: {
-    extensions: ['.tsx', '.ts', '.js', '.json'],
+    extensions: [".tsx", ".ts", ".js", ".json"],
    fallback: {
-      "crypto": require.resolve("crypto-browserify"),
-      "buffer": require.resolve("buffer"),
-      "stream": require.resolve("stream-browserify"),
-      "vm": require.resolve("vm-browserify"),
+      crypto: require.resolve("crypto-browserify"),
+      buffer: require.resolve("buffer"),
+      stream: require.resolve("stream-browserify"),
+      vm: require.resolve("vm-browserify"),
    },
  },
  experiments: {
@@ -83,5 +99,5 @@ module.exports = {
  watchOptions: {
    aggregateTimeout: 200,
    poll: 200,
- },
+  },
 };
--- a/xtask/src/main.rs
+++ b/xtask/src/main.rs
@@ -1,4 +1,4 @@
-use std::process::Command;
+use std::process::{Command, ExitStatus};

 use clap::{Parser, Subcommand};

@@ -91,6 +91,7 @@ fn main() -> Result<(), Error> {
            build(&args, packages, *release, &workspace, rest)?;
        }
        Task::Start {} => {
+            pnpm_install(&args, &workspace)?;
            eprintln!("Starting server");
            let mut cmd = Command::new(&args.manager);
            cmd.current_dir(&workspace.join("www"));
@@ -147,3 +148,15 @@ fn build<P: AsRef<std::ffi::OsStr> + std::fmt::Debug + std::fmt::Display>(
    }
    Ok(())
 }
+
+fn pnpm_install(
+    args: &Args,
+    workspace: &std::path::Path,
+) -> Result<ExitStatus, Error> {
+    eprintln!("Running `pnpm install`");
+    let mut cmd = Command::new(&args.manager);
+    cmd.current_dir(&workspace.join("www"));
+    cmd.args(["install"])
+        .status()
+        .map_err(|e| Error::Command(format!("{}", cmd.get_program().to_string_lossy()), e))
+}