Support svelte 5 release candidate

package-lock.json

@@ -15,7 +15,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.9.1",
-        "@sveltejs/vite-plugin-svelte": "^3.1.2",
+        "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
         "@tauri-apps/cli": "^2.0.0-rc.1",
         "@tsconfig/svelte": "^5.0.4",
         "baconjs": "^3.0.19",
@@ -24,7 +24,7 @@
         "eslint-plugin-svelte": "^2.43.0",
         "prettier": "^3.3.3",
         "prettier-plugin-svelte": "^3.2.6",
-        "svelte": "^4.2.19",
+        "svelte": "^5.0.0-next.243",
         "svelte-check": "^4.0.0",
         "svelte-eslint-parser": "^0.41.0",
         "tslib": "^2.7.0",
@@ -826,41 +826,40 @@
       ]
     },
     "node_modules/@sveltejs/vite-plugin-svelte": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-3.1.2.tgz",
-      "integrity": "sha512-Txsm1tJvtiYeLUVRNqxZGKR/mI+CzuIQuc2gn+YCs9rMTowpNZ2Nqt53JdL8KF9bLhAf2ruR/dr9eZCwdTriRA==",
+      "version": "4.0.0-next.6",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-4.0.0-next.6.tgz",
+      "integrity": "sha512-7+bEFN5F9pthG6nOEHNz9yioHxNXK6yl+0GnTy9WOfxN/SvPykkH/Hs6MqTGjo47a9G2q3QXQnzuxG5WXNX4Tg==",
       "dev": true,
       "dependencies": {
-        "@sveltejs/vite-plugin-svelte-inspector": "^2.1.0",
-        "debug": "^4.3.4",
+        "@sveltejs/vite-plugin-svelte-inspector": "^3.0.0-next.0||^3.0.0",
+        "debug": "^4.3.6",
         "deepmerge": "^4.3.1",
         "kleur": "^4.1.5",
-        "magic-string": "^0.30.10",
-        "svelte-hmr": "^0.16.0",
+        "magic-string": "^0.30.11",
         "vitefu": "^0.2.5"
       },
       "engines": {
-        "node": "^18.0.0 || >=20"
+        "node": "^18.0.0 || ^20.0.0 || >=22"
       },
       "peerDependencies": {
-        "svelte": "^4.0.0 || ^5.0.0-next.0",
+        "svelte": "^5.0.0-next.96 || ^5.0.0",
         "vite": "^5.0.0"
       }
     },
     "node_modules/@sveltejs/vite-plugin-svelte-inspector": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-2.1.0.tgz",
-      "integrity": "sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==",
+      "version": "3.0.0-next.3",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-3.0.0-next.3.tgz",
+      "integrity": "sha512-kuGJ2CZ5lAw3gKF8Kw0AfKtUJWbwdlDHY14K413B0MCyrzvQvsKTorwmwZcky0+QqY6RnVIZ/5FttB9bQmkLXg==",
       "dev": true,
       "dependencies": {
-        "debug": "^4.3.4"
+        "debug": "^4.3.5"
       },
       "engines": {
-        "node": "^18.0.0 || >=20"
+        "node": "^18.0.0 || ^20.0.0 || >=22"
       },
       "peerDependencies": {
-        "@sveltejs/vite-plugin-svelte": "^3.0.0",
-        "svelte": "^4.0.0 || ^5.0.0-next.0",
+        "@sveltejs/vite-plugin-svelte": "^4.0.0-next.0||^4.0.0",
+        "svelte": "^5.0.0-next.96 || ^5.0.0",
         "vite": "^5.0.0"
       }
     },
@@ -1328,6 +1327,15 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/acorn-typescript": {
+      "version": "1.4.13",
+      "resolved": "https://registry.npmjs.org/acorn-typescript/-/acorn-typescript-1.4.13.tgz",
+      "integrity": "sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==",
+      "dev": true,
+      "peerDependencies": {
+        "acorn": ">=8.9.0"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -1524,19 +1532,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/code-red": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
-      "integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
-      "dev": true,
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15",
-        "@types/estree": "^1.0.1",
-        "acorn": "^8.10.0",
-        "estree-walker": "^3.0.3",
-        "periscopic": "^3.1.0"
-      }
-    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1575,19 +1570,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/css-tree": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
-      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
-      "dev": true,
-      "dependencies": {
-        "mdn-data": "2.0.30",
-        "source-map-js": "^1.0.1"
-      },
-      "engines": {
-        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
-      }
-    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1839,6 +1821,12 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/esm-env": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.0.0.tgz",
+      "integrity": "sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==",
+      "dev": true
+    },
     "node_modules/espree": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/espree/-/espree-10.1.0.tgz",
@@ -1868,6 +1856,16 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/esrap": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/esrap/-/esrap-1.2.2.tgz",
+      "integrity": "sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@types/estree": "^1.0.1"
+      }
+    },
     "node_modules/esrecurse": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
@@ -1889,15 +1887,6 @@
         "node": ">=4.0"
       }
     },
-    "node_modules/estree-walker": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
-      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-      "dev": true,
-      "dependencies": {
-        "@types/estree": "^1.0.0"
-      }
-    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -2300,12 +2289,6 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
-    "node_modules/mdn-data": {
-      "version": "2.0.30",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
-      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
-      "dev": true
-    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -2477,17 +2460,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/periscopic": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
-      "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
-      "dev": true,
-      "dependencies": {
-        "@types/estree": "^1.0.0",
-        "estree-walker": "^3.0.0",
-        "is-reference": "^3.0.0"
-      }
-    },
     "node_modules/picocolors": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
@@ -2875,28 +2847,27 @@
       }
     },
     "node_modules/svelte": {
-      "version": "4.2.19",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.19.tgz",
-      "integrity": "sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==",
+      "version": "5.0.0-next.243",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.0.0-next.243.tgz",
+      "integrity": "sha512-+oXjRInUyBfZXAEY8hmpf3F0eghAVCoWasotz1iOp2G5CyH4KR7jPxWOgjbgsgpL4zlMiN32MEYU1+I+QsC+nQ==",
       "dev": true,
       "dependencies": {
-        "@ampproject/remapping": "^2.2.1",
-        "@jridgewell/sourcemap-codec": "^1.4.15",
-        "@jridgewell/trace-mapping": "^0.3.18",
-        "@types/estree": "^1.0.1",
-        "acorn": "^8.9.0",
+        "@ampproject/remapping": "^2.3.0",
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@types/estree": "^1.0.5",
+        "acorn": "^8.12.1",
+        "acorn-typescript": "^1.4.13",
         "aria-query": "^5.3.0",
-        "axobject-query": "^4.0.0",
-        "code-red": "^1.0.3",
-        "css-tree": "^2.3.1",
-        "estree-walker": "^3.0.3",
-        "is-reference": "^3.0.1",
+        "axobject-query": "^4.1.0",
+        "esm-env": "^1.0.0",
+        "esrap": "^1.2.2",
+        "is-reference": "^3.0.2",
         "locate-character": "^3.0.0",
-        "magic-string": "^0.30.4",
-        "periscopic": "^3.1.0"
+        "magic-string": "^0.30.11",
+        "zimmerframe": "^1.1.2"
       },
       "engines": {
-        "node": ">=16"
+        "node": ">=18"
       }
     },
     "node_modules/svelte-check": {
@@ -2994,18 +2965,6 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/svelte-hmr": {
-      "version": "0.16.0",
-      "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.16.0.tgz",
-      "integrity": "sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==",
-      "dev": true,
-      "engines": {
-        "node": "^12.20 || ^14.13.1 || >= 16"
-      },
-      "peerDependencies": {
-        "svelte": "^3.19.0 || ^4.0.0"
-      }
-    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -3222,6 +3181,12 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zimmerframe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
+      "integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
+      "dev": true
     }
   }
 }

package.json

@@ -23,7 +23,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.9.1",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
     "@tauri-apps/cli": "^2.0.0-rc.1",
     "@tsconfig/svelte": "^5.0.4",
     "eslint": "^9.9.1",
@@ -32,7 +32,7 @@
     "eslint-plugin-svelte": "^2.43.0",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.6",
-    "svelte": "^4.2.19",
+    "svelte": "^5.0.0-next.243",
     "svelte-check": "^4.0.0",
     "svelte-eslint-parser": "^0.41.0",
     "tslib": "^2.7.0",

src/components/Border.svelte

@@ -132,35 +132,35 @@
   tabindex="0"
   {style}
   style:height={styleHeight}>
-  <div class="pixel p1-1" />
-  <div class="pixel p1-2" />
-  <div class="pixel p1-3" />
-  <div class="pixel p1-4" />
-  <div class="pixel p1-5" />
+  <div class="pixel p1-1"></div>
+  <div class="pixel p1-2"></div>
+  <div class="pixel p1-3"></div>
+  <div class="pixel p1-4"></div>
+  <div class="pixel p1-5"></div>
 
-  <div class="pixel p2-1" />
-  <div class="pixel p2-2" />
-  <div class="pixel p2-3" />
-  <div class="pixel p2-4" />
-  <div class="pixel p2-5" />
+  <div class="pixel p2-1"></div>
+  <div class="pixel p2-2"></div>
+  <div class="pixel p2-3"></div>
+  <div class="pixel p2-4"></div>
+  <div class="pixel p2-5"></div>
 
-  <div class="pixel p3-1" />
-  <div class="pixel p3-2" />
+  <div class="pixel p3-1"></div>
+  <div class="pixel p3-2"></div>
   <div class="pixel p3-3 txt-semibold txt-small" style:padding={stylePadding}>
     <slot />
   </div>
-  <div class="pixel p3-4" />
-  <div class="pixel p3-5" />
+  <div class="pixel p3-4"></div>
+  <div class="pixel p3-5"></div>
 
-  <div class="pixel p4-1" />
-  <div class="pixel p4-2" />
-  <div class="pixel p4-3" />
-  <div class="pixel p4-4" />
-  <div class="pixel p4-5" />
+  <div class="pixel p4-1"></div>
+  <div class="pixel p4-2"></div>
+  <div class="pixel p4-3"></div>
+  <div class="pixel p4-4"></div>
+  <div class="pixel p4-5"></div>
 
-  <div class="pixel p5-1" />
-  <div class="pixel p5-2" />
-  <div class="pixel p5-3" />
-  <div class="pixel p5-4" />
-  <div class="pixel p5-5" />
+  <div class="pixel p5-1"></div>
+  <div class="pixel p5-2"></div>
+  <div class="pixel p5-3"></div>
+  <div class="pixel p5-4"></div>
+  <div class="pixel p5-5"></div>
 </div>

src/components/Button.svelte

@@ -223,33 +223,33 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="container" on:click role="button" tabindex="0" {style}>
-  <div class="pixel p1-1" />
-  <div class="pixel p1-2" />
-  <div class="pixel p1-3" />
-  <div class="pixel p1-4" />
-  <div class="pixel p1-5" />
+  <div class="pixel p1-1"></div>
+  <div class="pixel p1-2"></div>
+  <div class="pixel p1-3"></div>
+  <div class="pixel p1-4"></div>
+  <div class="pixel p1-5"></div>
 
-  <div class="pixel p2-1" />
-  <div class="pixel p2-2" />
-  <div class="pixel p2-3" />
-  <div class="pixel p2-4" />
-  <div class="pixel p2-5" />
+  <div class="pixel p2-1"></div>
+  <div class="pixel p2-2"></div>
+  <div class="pixel p2-3"></div>
+  <div class="pixel p2-4"></div>
+  <div class="pixel p2-5"></div>
 
-  <div class="pixel p3-1" />
-  <div class="pixel p3-2" />
+  <div class="pixel p3-1"></div>
+  <div class="pixel p3-2"></div>
   <div class="pixel p3-3 txt-semibold txt-small"><slot /></div>
-  <div class="pixel p3-4" />
-  <div class="pixel p3-5" />
+  <div class="pixel p3-4"></div>
+  <div class="pixel p3-5"></div>
 
-  <div class="pixel p4-1" />
-  <div class="pixel p4-2" />
-  <div class="pixel p4-3" />
-  <div class="pixel p4-4" />
-  <div class="pixel p4-5" />
+  <div class="pixel p4-1"></div>
+  <div class="pixel p4-2"></div>
+  <div class="pixel p4-3"></div>
+  <div class="pixel p4-4"></div>
+  <div class="pixel p4-5"></div>
 
-  <div class="pixel p5-1" />
-  <div class="pixel p5-2" />
-  <div class="pixel p5-3" />
-  <div class="pixel p5-4" />
-  <div class="pixel p5-5" />
+  <div class="pixel p5-1"></div>
+  <div class="pixel p5-2"></div>
+  <div class="pixel p5-3"></div>
+  <div class="pixel p5-4"></div>
+  <div class="pixel p5-5"></div>
 </div>

src/components/Fill.svelte

@@ -79,17 +79,17 @@
   tabindex="0"
   {style}
   style:height={styleHeight}>
-  <div class="pixel p1-1" />
-  <div class="pixel p1-2" />
-  <div class="pixel p1-3" />
+  <div class="pixel p1-1"></div>
+  <div class="pixel p1-2"></div>
+  <div class="pixel p1-3"></div>
 
-  <div class="pixel p2-1" />
+  <div class="pixel p2-1"></div>
   <div class="pixel p2-2 txt-semibold txt-small" style:padding={stylePadding}>
     <slot />
   </div>
-  <div class="pixel p2-3" />
+  <div class="pixel p2-3"></div>
 
-  <div class="pixel p3-1" />
-  <div class="pixel p3-2" />
-  <div class="pixel p3-3" />
+  <div class="pixel p3-1"></div>
+  <div class="pixel p3-2"></div>
+  <div class="pixel p3-3"></div>
 </div>

src/components/Popover.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import { writable } from "svelte/store";
   const focused = writable<HTMLDivElement | undefined>(undefined);
 

src/components/ThemeSwitch.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   type Theme = "dark" | "light";
 
   export const theme = writable<Theme>(loadTheme());

src/main.ts

@@ -1,7 +1,6 @@
+import { mount } from "svelte";
 import App from "./App.svelte";
 
-const app = new App({
-  target: document.body,
-});
+const app = mount(App, { target: document.body });
 
 export default app;