diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index 38972655faff07d2cc0383044bbf9f43b22c2248..0000000000000000000000000000000000000000
--- a/.eslintignore
+++ /dev/null
@@ -1,13 +0,0 @@
-.DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-
-# Ignore files for PNPM, NPM and YARN
-pnpm-lock.yaml
-package-lock.json
-yarn.lock
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
deleted file mode 100644
index 45f704c9e021e6d8b82f58bab3b0736ed4738b82..0000000000000000000000000000000000000000
--- a/.eslintrc.cjs
+++ /dev/null
@@ -1,41 +0,0 @@
-module.exports = {
-	root: true,
-	parser: "@typescript-eslint/parser",
-	extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:svelte/recommended", "prettier"],
-	plugins: ["@typescript-eslint"],
-	ignorePatterns: ["*.cjs"],
-	overrides: [
-		{
-			files: ["*.svelte"],
-			parser: "svelte-eslint-parser",
-			parserOptions: {
-				parser: "@typescript-eslint/parser",
-			},
-		},
-	],
-	parserOptions: {
-		sourceType: "module",
-		ecmaVersion: 2020,
-		extraFileExtensions: [".svelte"],
-		project: "./tsconfig.json",
-	},
-	rules: {
-		"require-yield": "off",
-		"@typescript-eslint/no-explicit-any": "error",
-		"@typescript-eslint/no-non-null-assertion": "error",
-		"@typescript-eslint/no-unused-vars": [
-			// prevent variables with a _ prefix from being marked as unused
-			"error",
-			{
-				argsIgnorePattern: "^_",
-			},
-		],
-		"object-shorthand": ["error", "always"],
-		"svelte/no-at-html-tags": "off",
-	},
-	env: {
-		browser: true,
-		es2017: true,
-		node: true,
-	},
-};
diff --git a/eslint-rules/enforce-extensions.js b/eslint-rules/enforce-extensions.js
new file mode 100644
index 0000000000000000000000000000000000000000..ed3cb30f9e4b58e8fdc73b6fd9e37b50bc0e94d5
--- /dev/null
+++ b/eslint-rules/enforce-extensions.js
@@ -0,0 +1,171 @@
+import fs from "fs";
+import path from "path";
+
+export default {
+	meta: {
+		type: "suggestion",
+		docs: {
+			description: "Enforce file extensions in import statements",
+		},
+		fixable: "code",
+		schema: [
+			{
+				type: "object",
+				properties: {
+					ignorePaths: {
+						type: "array",
+						items: { type: "string" },
+					},
+					includePaths: {
+						type: "array",
+						items: { type: "string" },
+						description: "Path patterns to include (e.g., '$lib/')",
+					},
+					tsToJs: {
+						type: "boolean",
+						description: "Convert .ts files to .js when importing",
+					},
+					aliases: {
+						type: "object",
+						description: "Map of path aliases to their actual paths (e.g., {'$lib': 'src/lib'})",
+					},
+				},
+				additionalProperties: false,
+			},
+		],
+		messages: {
+			missingExtension: "Import should include a file extension",
+			noFileFound: "Import is missing extension and no matching file was found",
+		},
+	},
+	create(context) {
+		const options = context.options[0] || {};
+		const ignorePaths = options.ignorePaths || [];
+		const includePaths = options.includePaths || [];
+		const tsToJs = options.tsToJs !== undefined ? options.tsToJs : true; // Default to true
+		const aliases = options.aliases || {};
+
+		// Get the project root directory
+		const projectRoot = process.cwd();
+
+		// Utility function to resolve file paths
+		function resolveImportPath(importPath, currentFilePath) {
+			// Handle relative paths
+			if (importPath.startsWith("./") || importPath.startsWith("../")) {
+				return path.resolve(path.dirname(currentFilePath), importPath);
+			}
+
+			// Handle aliased paths
+			for (const [alias, aliasPath] of Object.entries(aliases)) {
+				// Check if the import starts with this alias
+				if (importPath === alias || importPath.startsWith(`${alias}/`)) {
+					// Replace the alias with the actual path
+					const relativePath = importPath === alias ? "" : importPath.slice(alias.length + 1); // +1 for the slash
+
+					// Convert the aliasPath to an absolute path
+					let absoluteAliasPath = aliasPath;
+					if (!path.isAbsolute(absoluteAliasPath)) {
+						absoluteAliasPath = path.resolve(projectRoot, aliasPath);
+					}
+
+					return path.join(absoluteAliasPath, relativePath);
+				}
+			}
+
+			return null;
+		}
+
+		// Find the file extension by checking which file exists
+		function findActualFile(basePath) {
+			if (!basePath) return null;
+
+			try {
+				// Get the directory and base name
+				const dir = path.dirname(basePath);
+				const base = path.basename(basePath);
+
+				// If the directory doesn't exist, return early
+				if (!fs.existsSync(dir)) {
+					return null;
+				}
+
+				// Read all files in the directory
+				const files = fs.readdirSync(dir);
+
+				// Look for files that match our base name plus any extension
+				for (const file of files) {
+					const fileParts = path.parse(file);
+
+					// If we find a file that matches our base name
+					if (fileParts.name === base) {
+						// Handle TypeScript to JavaScript conversion
+						if (tsToJs && fileParts.ext === ".ts") {
+							return {
+								actualPath: path.join(dir, file),
+								importExt: ".js", // Import as .js even though it's a .ts file
+							};
+						}
+
+						// Otherwise use the actual extension
+						return {
+							actualPath: path.join(dir, file),
+							importExt: fileParts.ext,
+						};
+					}
+				}
+			} catch (error) {
+				// If there's an error checking file existence, return null
+				console.error("Error checking files:", error);
+			}
+
+			return null;
+		}
+
+		return {
+			ImportDeclaration(node) {
+				const source = node.source.value;
+
+				// Check if it's a relative import or matches a manually specified include path
+				const isRelativeImport = source.startsWith("./") || source.startsWith("../");
+				const isAliasedPath = Object.keys(aliases).some(alias => source === alias || source.startsWith(`${alias}/`));
+				const isIncludedPath = includePaths.some(pattern => source.startsWith(pattern));
+
+				// Skip if it's not a relative import, aliased path, or included path
+				if (!isRelativeImport && !isAliasedPath && !isIncludedPath) {
+					return;
+				}
+
+				// Skip ignored paths
+				if (ignorePaths.some(path => source.includes(path))) {
+					return;
+				}
+
+				// Check if the import already has an extension
+				const hasExtension = path.extname(source) !== "";
+				if (!hasExtension) {
+					// Get current file path to resolve the import
+					const currentFilePath = context.getFilename();
+
+					// Try to determine the correct file by checking what exists
+					const resolvedPath = resolveImportPath(source, currentFilePath);
+					const fileInfo = findActualFile(resolvedPath);
+
+					context.report({
+						node,
+						messageId: fileInfo ? "missingExtension" : "noFileFound",
+						fix(fixer) {
+							// Only provide a fix if we found a file
+							if (fileInfo) {
+								// Replace the string literal with one that includes the extension
+								return fixer.replaceText(node.source, `"${source}${fileInfo.importExt}"`);
+							}
+
+							// Otherwise, don't try to fix
+							return null;
+						},
+					});
+				}
+			},
+		};
+	},
+};
diff --git a/eslint.config.mts b/eslint.config.mts
new file mode 100644
index 0000000000000000000000000000000000000000..dfdec30fcab24b2e215e37e6dce2426567ffe32f
--- /dev/null
+++ b/eslint.config.mts
@@ -0,0 +1,99 @@
+import js from "@eslint/js";
+import svelte from "eslint-plugin-svelte";
+import globals from "globals";
+import ts from "typescript-eslint";
+import svelteConfig from "./svelte.config.js";
+import enforceExt from "./eslint-rules/enforce-extensions.js";
+import prettier from "eslint-plugin-prettier/recommended";
+
+export default ts.config(
+	js.configs.recommended,
+	ts.configs.recommended,
+	...svelte.configs.recommended,
+	prettier,
+	// Configure svelte
+	{
+		files: ["**/*.svelte", "**/*.svelte.ts", "**/*.svelte.js"],
+		// See more details at: https://typescript-eslint.io/packages/parser/
+		languageOptions: {
+			parserOptions: {
+				projectService: true,
+				extraFileExtensions: [".svelte"], // Add support for additional file extensions, such as .svelte
+				parser: ts.parser,
+				// Specify a parser for each language, if needed:
+				// parser: {
+				//   ts: ts.parser,
+				//   js: espree,    // Use espree for .js files (add: import espree from 'espree')
+				//   typescript: ts.parser
+				// },
+
+				// We recommend importing and specifying svelte.config.js.
+				// By doing so, some rules in eslint-plugin-svelte will automatically read the configuration and adjust their behavior accordingly.
+				// While certain Svelte settings may be statically loaded from svelte.config.js even if you don’t specify it,
+				// explicitly specifying it ensures better compatibility and functionality.
+				svelteConfig,
+			},
+		},
+	},
+	{
+		plugins: {
+			local: {
+				rules: {
+					"enforce-ext": enforceExt,
+				},
+			},
+		},
+	},
+	{
+		rules: {
+			"require-yield": "off",
+			"@typescript-eslint/no-explicit-any": "error",
+			"@typescript-eslint/no-unused-expressions": "off",
+			// "@typescript-eslint/no-non-null-assertion": "error",
+
+			"@typescript-eslint/no-unused-vars": [
+				"error",
+				{
+					argsIgnorePattern: "^_",
+				},
+			],
+
+			"object-shorthand": ["error", "always"],
+			"svelte/no-at-html-tags": "off",
+			"svelte/require-each-key": "off",
+			"local/enforce-ext": [
+				"error",
+				{
+					includePaths: ["$lib/"],
+					aliases: {
+						$lib: "src/lib",
+					},
+				},
+			],
+		},
+	},
+	{
+		ignores: [
+			"**/*.cjs",
+			"**/.DS_Store",
+			"**/node_modules",
+			"build",
+			".svelte-kit",
+			"package",
+			"**/.env",
+			"**/.env.*",
+			"!**/.env.example",
+			"**/pnpm-lock.yaml",
+			"**/package-lock.json",
+			"**/yarn.lock",
+		],
+	},
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node,
+			},
+		},
+	}
+);
diff --git a/package.json b/package.json
index d8b6c4c59b3dad6b2f02468db7dcb78dc795b1a6..f2ce1c10fb91cb7e06c9807f92c54e8c3958d23e 100644
--- a/package.json
+++ b/package.json
@@ -9,46 +9,53 @@
 		"prepare": "ts-patch install && svelte-kit sync || echo ''",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier . --check . && eslint --ext .js,.ts,.svelte src/",
-		"format": "prettier . --write ."
+		"lint": "prettier . --check . && eslint src/",
+		"format": "prettier . --write .",
+		"clean": "rm -rf ./node_modules/ && rm -rf ./.svelte-kit/ && ni && echo 'Project cleaned!'"
 	},
 	"devDependencies": {
+		"@eslint/eslintrc": "^3.3.0",
+		"@eslint/js": "^9.22.0",
+		"@huggingface/hub": "^1.0.1",
+		"@huggingface/inference": "^3.5.1",
+		"@huggingface/tasks": "^0.17.1",
 		"@iconify-json/carbon": "^1.2.8",
+		"@iconify-json/material-symbols": "^1.2.15",
 		"@ryoppippi/unplugin-typia": "^1.0.0",
 		"@samchon/openapi": "^3.0.0",
 		"@sveltejs/adapter-auto": "^3.2.2",
 		"@sveltejs/adapter-node": "^5.2.0",
-		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@sveltejs/kit": "^2.5.27",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@tailwindcss/container-queries": "^0.1.1",
 		"@tailwindcss/postcss": "^4.0.9",
-		"@typescript-eslint/eslint-plugin": "^6.21.0",
-		"@typescript-eslint/parser": "^6.21.0",
 		"clsx": "^2.1.1",
-		"eslint": "^8.57.1",
-		"eslint-config-prettier": "^8.10.0",
-		"eslint-plugin-svelte": "^2.44.0",
+		"eslint": "^9.22.0",
+		"eslint-config-prettier": "^10.1.1",
+		"eslint-plugin-prettier": "^5.2.3",
+		"globals": "^16.0.0",
 		"highlight.js": "^11.10.0",
+		"jiti": "^2.4.2",
+		"melt": "^0.18.4",
 		"postcss": "^8.4.38",
 		"prettier": "^3.1.1",
-		"prettier-plugin-svelte": "^3.1.2",
+		"prettier-plugin-svelte": "^3.2.6",
 		"prettier-plugin-tailwindcss": "^0.6.11",
-		"svelte": "^4.2.7",
-		"svelte-check": "^3.6.0",
+		"runed": "^0.24.0",
+		"svelte": "^5.20.4",
+		"svelte-check": "^4.0.0",
 		"tailwind-merge": "^3.0.2",
 		"tailwindcss": "^4.0.9",
 		"ts-patch": "^3.3.0",
 		"tslib": "^2.4.1",
 		"typescript": "^5.8.2",
+		"typescript-eslint": "^8.26.1",
 		"unplugin-icons": "^22.1.0",
-		"vite": "^5.0.3"
+		"vite": "^5.4.4"
 	},
 	"type": "module",
 	"dependencies": {
-		"@huggingface/hub": "^1.0.1",
-		"@huggingface/inference": "^3.5.1",
-		"@huggingface/tasks": "^0.17.1",
-		"@melt-ui/svelte": "^0.86.3",
-		"@tailwindcss/container-queries": "^0.1.1",
+		"eslint-plugin-svelte": "^3.3.1",
 		"typia": "^8.0.0"
 	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 25f309cae141a2c16c094b4a5f3edbfb1045116d..d2f0c1597aad4af58de37b3bc0216e14413bdb46 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,19 @@ importers:
 
   .:
     dependencies:
+      eslint-plugin-svelte:
+        specifier: ^3.3.1
+        version: 3.3.1(eslint@9.22.0(jiti@2.4.2))(svelte@5.23.0)
+      typia:
+        specifier: ^8.0.0
+        version: 8.0.0(@samchon/openapi@3.0.0)(typescript@5.8.2)
+    devDependencies:
+      '@eslint/eslintrc':
+        specifier: ^3.3.0
+        version: 3.3.0
+      '@eslint/js':
+        specifier: ^9.22.0
+        version: 9.22.0
       '@huggingface/hub':
         specifier: ^1.0.1
         version: 1.0.1
@@ -17,19 +30,12 @@ importers:
       '@huggingface/tasks':
         specifier: ^0.17.1
         version: 0.17.1
-      '@melt-ui/svelte':
-        specifier: ^0.86.3
-        version: 0.86.3(svelte@4.2.19)
-      '@tailwindcss/container-queries':
-        specifier: ^0.1.1
-        version: 0.1.1(tailwindcss@4.0.9)
-      typia:
-        specifier: ^8.0.0
-        version: 8.0.0(@samchon/openapi@3.0.0)(typescript@5.8.2)
-    devDependencies:
       '@iconify-json/carbon':
         specifier: ^1.2.8
         version: 1.2.8
+      '@iconify-json/material-symbols':
+        specifier: ^1.2.15
+        version: 1.2.15
       '@ryoppippi/unplugin-typia':
         specifier: ^1.0.0
         version: 1.2.0(@samchon/openapi@3.0.0)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@4.34.9)(yaml@2.7.0)
@@ -38,40 +44,46 @@ importers:
         version: 3.0.0
       '@sveltejs/adapter-auto':
         specifier: ^3.2.2
-        version: 3.3.1(@sveltejs/kit@2.18.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.14(lightningcss@1.29.1)))(svelte@4.2.19)(vite@5.4.14(lightningcss@1.29.1)))
+        version: 3.3.1(@sveltejs/kit@2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.23.0)(vite@5.4.14(lightningcss@1.29.1)))(svelte@5.23.0)(vite@5.4.14(lightningcss@1.29.1)))
       '@sveltejs/adapter-node':
         specifier: ^5.2.0
-        version: 5.2.12(@sveltejs/kit@2.18.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.14(lightningcss@1.29.1)))(svelte@4.2.19)(vite@5.4.14(lightningcss@1.29.1)))
+        version: 5.2.12(@sveltejs/kit@2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.23.0)(vite@5.4.14(lightningcss@1.29.1)))(svelte@5.23.0)(vite@5.4.14(lightningcss@1.29.1)))
       '@sveltejs/kit':
-        specifier: ^2.0.0
-        version: 2.18.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.14(lightningcss@1.29.1)))(svelte@4.2.19)(vite@5.4.14(lightningcss@1.29.1))
+        specifier: ^2.5.27
+        version: 2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.23.0)(vite@5.4.14(lightningcss@1.29.1)))(svelte@5.23.0)(vite@5.4.14(lightningcss@1.29.1))
       '@sveltejs/vite-plugin-svelte':
-        specifier: ^3.0.0
-        version: 3.1.2(svelte@4.2.19)(vite@5.4.14(lightningcss@1.29.1))
+        specifier: ^4.0.0
+        version: 4.0.4(svelte@5.23.0)(vite@5.4.14(lightningcss@1.29.1))
+      '@tailwindcss/container-queries':
+        specifier: ^0.1.1
+        version: 0.1.1(tailwindcss@4.0.9)
       '@tailwindcss/postcss':
         specifier: ^4.0.9
         version: 4.0.9
-      '@typescript-eslint/eslint-plugin':
-        specifier: ^6.21.0
-        version: 6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1)(typescript@5.8.2)
-      '@typescript-eslint/parser':
-        specifier: ^6.21.0
-        version: 6.21.0(eslint@8.57.1)(typescript@5.8.2)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
       eslint:
-        specifier: ^8.57.1
-        version: 8.57.1
+        specifier: ^9.22.0
+        version: 9.22.0(jiti@2.4.2)
       eslint-config-prettier:
-        specifier: ^8.10.0
-        version: 8.10.0(eslint@8.57.1)
-      eslint-plugin-svelte:
-        specifier: ^2.44.0
-        version: 2.46.1(eslint@8.57.1)(svelte@4.2.19)
+        specifier: ^10.1.1
+        version: 10.1.1(eslint@9.22.0(jiti@2.4.2))
+      eslint-plugin-prettier:
+        specifier: ^5.2.3
+        version: 5.2.3(eslint-config-prettier@10.1.1(eslint@9.22.0(jiti@2.4.2)))(eslint@9.22.0(jiti@2.4.2))(prettier@3.5.3)
+      globals:
+        specifier: ^16.0.0
+        version: 16.0.0
       highlight.js:
         specifier: ^11.10.0
         version: 11.11.1
+      jiti:
+        specifier: ^2.4.2
+        version: 2.4.2
+      melt:
+        specifier: ^0.18.4
+        version: 0.18.4(@floating-ui/dom@1.6.13)(svelte@5.23.0)
       postcss:
         specifier: ^8.4.38
         version: 8.5.3
@@ -79,17 +91,20 @@ importers:
         specifier: ^3.1.1
         version: 3.5.3
       prettier-plugin-svelte:
-        specifier: ^3.1.2
-        version: 3.3.3(prettier@3.5.3)(svelte@4.2.19)
+        specifier: ^3.2.6
+        version: 3.3.3(prettier@3.5.3)(svelte@5.23.0)
       prettier-plugin-tailwindcss:
         specifier: ^0.6.11
-        version: 0.6.11(prettier-plugin-svelte@3.3.3(prettier@3.5.3)(svelte@4.2.19))(prettier@3.5.3)
+        version: 0.6.11(prettier-plugin-svelte@3.3.3(prettier@3.5.3)(svelte@5.23.0))(prettier@3.5.3)
+      runed:
+        specifier: ^0.24.0
+        version: 0.24.0(svelte@5.23.0)
       svelte:
-        specifier: ^4.2.7
-        version: 4.2.19
+        specifier: ^5.20.4
+        version: 5.23.0
       svelte-check:
-        specifier: ^3.6.0
-        version: 3.8.6(postcss-load-config@4.0.2(postcss@8.5.3))(postcss@8.5.3)(svelte@4.2.19)
+        specifier: ^4.0.0
+        version: 4.1.5(picomatch@4.0.2)(svelte@5.23.0)(typescript@5.8.2)
       tailwind-merge:
         specifier: ^3.0.2
         version: 3.0.2
@@ -105,11 +120,14 @@ importers:
       typescript:
         specifier: ^5.8.2
         version: 5.8.2
+      typescript-eslint:
+        specifier: ^8.26.1
+        version: 8.26.1(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.2)
       unplugin-icons:
         specifier: ^22.1.0
-        version: 22.1.0(svelte@4.2.19)
+        version: 22.1.0(svelte@5.23.0)
       vite:
-        specifier: ^5.0.3
+        specifier: ^5.4.4
         version: 5.4.14(lightningcss@1.29.1)
 
 packages:
@@ -426,13 +444,33 @@ packages:
     resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
-  '@eslint/eslintrc@2.1.4':
-    resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  '@eslint/config-array@0.19.2':
+    resolution: {integrity: sha512-GNKqxfHG2ySmJOBSHg7LxeUx4xpuCoFjacmlCoYWEbaPXLwvfIjixRI12xCQZeULksQb23uiA8F40w5TojpV7w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/js@8.57.1':
-    resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  '@eslint/config-helpers@0.1.0':
+    resolution: {integrity: sha512-kLrdPDJE1ckPo94kmPPf9Hfd0DU0Jw6oKYrhe+pwSC0iTUInmTa+w6fw8sGgcfkFJGNdWOUeOaDM4quW4a7OkA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/core@0.12.0':
+    resolution: {integrity: sha512-cmrR6pytBuSMTaBweKoGMwu3EiHiEC+DoyupPmlZ0HxBJBtIxwe+j/E4XPIKNx+Q74c8lXKPwYawBf5glsTkHg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/eslintrc@3.3.0':
+    resolution: {integrity: sha512-yaVPAiNAalnCZedKLdR21GOGILMLKPyqSLWaAjQFvYA2i/ciDi8ArYVr69Anohb6cH2Ukhqti4aFnYyPm8wdwQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/js@9.22.0':
+    resolution: {integrity: sha512-vLFajx9o8d1/oL2ZkpMYbkLv8nDB6yaIwFNt7nI4+I80U/z03SxmfOMsLbvWr3p7C+Wnoh//aOu2pQW8cS0HCQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/object-schema@2.1.6':
+    resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/plugin-kit@0.2.7':
+    resolution: {integrity: sha512-JubJ5B2pJ4k4yGxaNLdbjrnk9d/iDz6/q8wOilpIowd6PJPgaxCuHBnBszq7Ce2TyMrywm5r4PnKm6V3iiZF+g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@floating-ui/core@1.6.9':
     resolution: {integrity: sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==}
@@ -457,30 +495,41 @@ packages:
   '@huggingface/tasks@0.17.1':
     resolution: {integrity: sha512-kN5F/pzwxtmdZ0jORumNyegNKOX/ciU5G/DMZcqK3SJShod4C6yfvBRCMn5sEDzanxtU8VjX+7TaInQFmmU8Nw==}
 
-  '@humanwhocodes/config-array@0.13.0':
-    resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
-    engines: {node: '>=10.10.0'}
-    deprecated: Use @eslint/config-array instead
+  '@humanfs/core@0.19.1':
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.6':
+    resolution: {integrity: sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==}
+    engines: {node: '>=18.18.0'}
 
   '@humanwhocodes/module-importer@1.0.1':
     resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
     engines: {node: '>=12.22'}
 
-  '@humanwhocodes/object-schema@2.0.3':
-    resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
-    deprecated: Use @eslint/object-schema instead
+  '@humanwhocodes/retry@0.3.1':
+    resolution: {integrity: sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==}
+    engines: {node: '>=18.18'}
+
+  '@humanwhocodes/retry@0.4.2':
+    resolution: {integrity: sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ==}
+    engines: {node: '>=18.18'}
 
   '@iconify-json/carbon@1.2.8':
     resolution: {integrity: sha512-6xh4YiFBz6qoSnB3XMe23WvjTJroDFXB17J1MbiT7nATFe+70+em1acRXr8hgP/gYpwFMHFc4IvjA/IPTPnTzg==}
 
+  '@iconify-json/material-symbols@1.2.15':
+    resolution: {integrity: sha512-KkHRnMh1s08N1Olf3xk+z3ZIrke/7Ys3uUIMfKuSkZPbNssG4IApKkJOV5po6mg6oxMooXdNpab4PS0S5LMSOA==}
+
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
   '@iconify/utils@2.3.0':
     resolution: {integrity: sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==}
 
-  '@internationalized/date@3.7.0':
-    resolution: {integrity: sha512-VJ5WS3fcVx0bejE/YHfbDKR/yawZgKqn/if+oEeLqNwBtPzVB06olkfcnojTmEMX+gTpH+FlQ69SHNitJ8/erQ==}
+  '@jest/schemas@29.6.3':
+    resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
   '@jridgewell/gen-mapping@0.3.8':
     resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
@@ -500,11 +549,6 @@ packages:
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
-  '@melt-ui/svelte@0.86.3':
-    resolution: {integrity: sha512-ZsWmHGd6P636mws1CgatlX7JtLkWoUBPXeNzPzvHYgZdagp8io8MPFotDIfRyKwTEQFUqF9fhBks6CWr0Nupuw==}
-    peerDependencies:
-      svelte: ^3.0.0 || ^4.0.0 || ^5.0.0-next.118
-
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -517,6 +561,10 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
+  '@pkgr/core@0.1.1':
+    resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+
   '@polka/url@1.0.0-next.28':
     resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==}
 
@@ -657,6 +705,14 @@ packages:
   '@samchon/openapi@3.0.0':
     resolution: {integrity: sha512-eVQlyKRYv1/C2Mikc1xZr7c0jMjg1vjPkeY/gheKB4c5WOOWyTNZ1uvnXR+ETpPHwaQ54I9NrQZhoNk6BEGuuw==}
 
+  '@sinclair/typebox@0.27.8':
+    resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
+
+  '@sveltejs/acorn-typescript@1.0.5':
+    resolution: {integrity: sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ==}
+    peerDependencies:
+      acorn: ^8.9.0
+
   '@sveltejs/adapter-auto@3.3.1':
     resolution: {integrity: sha512-5Sc7WAxYdL6q9j/+D0jJKjGREGlfIevDyHSQ2eNETHcB1TKlQWHcAo8AS8H1QdjNvSXpvOwNjykDUHPEAyGgdQ==}
     peerDependencies:
@@ -676,24 +732,21 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: ^5.0.3 || ^6.0.0
 
-  '@sveltejs/vite-plugin-svelte-inspector@2.1.0':
-    resolution: {integrity: sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==}
-    engines: {node: ^18.0.0 || >=20}
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.1':
+    resolution: {integrity: sha512-2CKypmj1sM4GE7HjllT7UKmo4Q6L5xFRd7VMGEWhYnZ+wc6AUVU01IBd7yUi6WnFndEwWoMNOd6e8UjoN0nbvQ==}
+    engines: {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
 
-  '@sveltejs/vite-plugin-svelte@3.1.2':
-    resolution: {integrity: sha512-Txsm1tJvtiYeLUVRNqxZGKR/mI+CzuIQuc2gn+YCs9rMTowpNZ2Nqt53JdL8KF9bLhAf2ruR/dr9eZCwdTriRA==}
-    engines: {node: ^18.0.0 || >=20}
+  '@sveltejs/vite-plugin-svelte@4.0.4':
+    resolution: {integrity: sha512-0ba1RQ/PHen5FGpdSrW7Y3fAMQjrXantECALeOiOdBdzR5+5vPP6HVZRLmZaQL+W8m++o+haIAKq5qT+MiZ7VA==}
+    engines: {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
 
-  '@swc/helpers@0.5.15':
-    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
-
   '@tailwindcss/container-queries@0.1.1':
     resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==}
     peerDependencies:
@@ -784,75 +837,55 @@ packages:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
-  '@types/pug@2.0.10':
-    resolution: {integrity: sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==}
-
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
-  '@types/semver@7.5.8':
-    resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
-
-  '@typescript-eslint/eslint-plugin@6.21.0':
-    resolution: {integrity: sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@typescript-eslint/eslint-plugin@8.26.1':
+    resolution: {integrity: sha512-2X3mwqsj9Bd3Ciz508ZUtoQQYpOhU/kWoUqIf49H8Z0+Vbh6UF/y0OEYp0Q0axOGzaBGs7QxRwq0knSQ8khQNA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/parser@6.21.0':
-    resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@typescript-eslint/parser@8.26.1':
+    resolution: {integrity: sha512-w6HZUV4NWxqd8BdeFf81t07d7/YV9s7TCWrQQbG5uhuvGUAW+fq1usZ1Hmz9UPNLniFnD8GLSsDpjP0hm1S4lQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/scope-manager@6.21.0':
-    resolution: {integrity: sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@typescript-eslint/scope-manager@8.26.1':
+    resolution: {integrity: sha512-6EIvbE5cNER8sqBu6V7+KeMZIC1664d2Yjt+B9EWUXrsyWpxx4lEZrmvxgSKRC6gX+efDL/UY9OpPZ267io3mg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/type-utils@6.21.0':
-    resolution: {integrity: sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@typescript-eslint/type-utils@8.26.1':
+    resolution: {integrity: sha512-Kcj/TagJLwoY/5w9JGEFV0dclQdyqw9+VMndxOJKtoFSjfZhLXhYjzsQEeyza03rwHx2vFEGvrJWJBXKleRvZg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/types@6.21.0':
-    resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@typescript-eslint/types@8.26.1':
+    resolution: {integrity: sha512-n4THUQW27VmQMx+3P+B0Yptl7ydfceUj4ON/AQILAASwgYdZ/2dhfymRMh5egRUrvK5lSmaOm77Ry+lmXPOgBQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@6.21.0':
-    resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@typescript-eslint/typescript-estree@8.26.1':
+    resolution: {integrity: sha512-yUwPpUHDgdrv1QJ7YQal3cMVBGWfnuCdKbXw1yyjArax3353rEJP1ZA+4F8nOlQ3RfS2hUN/wze3nlY+ZOhvoA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/utils@6.21.0':
-    resolution: {integrity: sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@typescript-eslint/utils@8.26.1':
+    resolution: {integrity: sha512-V4Urxa/XtSUroUrnI7q6yUTD3hDtfJ2jzVfeT3VK0ciizfK2q/zGC0iDh1lFMUZR8cImRrep6/q0xd/1ZGPQpg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-
-  '@typescript-eslint/visitor-keys@6.21.0':
-    resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
 
-  '@ungap/structured-clone@1.3.0':
-    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+  '@typescript-eslint/visitor-keys@8.26.1':
+    resolution: {integrity: sha512-AjOC3zfnxd6S4Eiy3jwktJPclqhFHNyd8L6Gycf9WUPoKZpgM5PjkxY1X7uSy61xVpiJDhhk7XT2NVsN3ALTWg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
@@ -879,9 +912,9 @@ packages:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
 
-  anymatch@3.1.3:
-    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
-    engines: {node: '>= 8'}
+  ansi-styles@5.2.0:
+    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
+    engines: {node: '>=10'}
 
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
@@ -893,9 +926,9 @@ packages:
   array-timsort@1.0.3:
     resolution: {integrity: sha512-/+3GRL7dDAGEfM6TseQk/U+mi18TU2Ms9I3UlLdUMhz2hbvGNTKdj9xniwXfUqgYhHxRx0+8UnKkvlNwVU+cWQ==}
 
-  array-union@2.1.0:
-    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
-    engines: {node: '>=8'}
+  axe-core@4.9.1:
+    resolution: {integrity: sha512-QbUdXJVTpvUTHU7871ppZkdOLBeGUKBQWHkHrvN2V9IQWGMt61zf3B45BtzjxEJzYuj0JBjBZP/hmYS/R9pmAw==}
+    engines: {node: '>=4'}
 
   axobject-query@4.1.0:
     resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
@@ -907,10 +940,6 @@ packages:
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
-  binary-extensions@2.3.0:
-    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
-    engines: {node: '>=8'}
-
   bl@4.1.0:
     resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
 
@@ -924,10 +953,6 @@ packages:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
-  buffer-crc32@1.0.0:
-    resolution: {integrity: sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w==}
-    engines: {node: '>=8.0.0'}
-
   buffer@5.7.1:
     resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
 
@@ -942,9 +967,9 @@ packages:
   chardet@0.7.0:
     resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
 
-  chokidar@3.6.0:
-    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
-    engines: {node: '>= 8.10.0'}
+  chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
+    engines: {node: '>= 14.16.0'}
 
   cli-cursor@3.1.0:
     resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
@@ -966,9 +991,6 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
-  code-red@1.0.4:
-    resolution: {integrity: sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==}
-
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -1014,10 +1036,6 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
-  css-tree@2.3.1:
-    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
-
   cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -1045,14 +1063,6 @@ packages:
   defu@6.1.4:
     resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
 
-  dequal@2.0.3:
-    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
-    engines: {node: '>=6'}
-
-  detect-indent@6.1.0:
-    resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
-    engines: {node: '>=8'}
-
   detect-libc@1.0.3:
     resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
     engines: {node: '>=0.10'}
@@ -1064,13 +1074,9 @@ packages:
   diff-match-patch@1.0.5:
     resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==}
 
-  dir-glob@3.0.1:
-    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
-    engines: {node: '>=8'}
-
-  doctrine@3.0.0:
-    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
-    engines: {node: '>=6.0.0'}
+  diff-sequences@29.6.3:
+    resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
   drange@1.1.1:
     resolution: {integrity: sha512-pYxfDYpued//QpnLIm4Avk7rsNtAtQkUES2cwAYSvD/wd2pKD71gN2Ebj3e7klzXwjocvE8c5vx/1fxwpqmSxA==}
@@ -1083,9 +1089,6 @@ packages:
     resolution: {integrity: sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==}
     engines: {node: '>=10.13.0'}
 
-  es6-promise@3.3.1:
-    resolution: {integrity: sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==}
-
   esbuild@0.21.5:
     resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
     engines: {node: '>=12'}
@@ -1104,48 +1107,70 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
-  eslint-compat-utils@0.5.1:
-    resolution: {integrity: sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==}
+  eslint-compat-utils@0.6.4:
+    resolution: {integrity: sha512-/u+GQt8NMfXO8w17QendT4gvO5acfxQsAKirAt0LVxDnr2N8YLCVbregaNc/Yhp7NM128DwCaRvr8PLDfeNkQw==}
     engines: {node: '>=12'}
     peerDependencies:
       eslint: '>=6.0.0'
 
-  eslint-config-prettier@8.10.0:
-    resolution: {integrity: sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==}
+  eslint-config-prettier@10.1.1:
+    resolution: {integrity: sha512-4EQQr6wXwS+ZJSzaR5ZCrYgLxqvUjdXctaEtBqHcbkW944B1NQyO4qpdHQbXBONfwxXdkAY81HH4+LUfrg+zPw==}
     hasBin: true
     peerDependencies:
       eslint: '>=7.0.0'
 
-  eslint-plugin-svelte@2.46.1:
-    resolution: {integrity: sha512-7xYr2o4NID/f9OEYMqxsEQsCsj4KaMy4q5sANaKkAb6/QeCjYFxRmDm2S3YC3A3pl1kyPZ/syOx/i7LcWYSbIw==}
-    engines: {node: ^14.17.0 || >=16.0.0}
+  eslint-plugin-prettier@5.2.3:
+    resolution: {integrity: sha512-qJ+y0FfCp/mQYQ/vWQ3s7eUlFEL4PyKfAJxsnYTJ4YT73nsJBWqmEpFryxV9OeUiqmsTsYJ5Y+KDNaeP31wrRw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      '@types/eslint': '>=8.0.0'
+      eslint: '>=8.0.0'
+      eslint-config-prettier: '*'
+      prettier: '>=3.0.0'
+    peerDependenciesMeta:
+      '@types/eslint':
+        optional: true
+      eslint-config-prettier:
+        optional: true
+
+  eslint-plugin-svelte@3.3.1:
+    resolution: {integrity: sha512-5p3JGBMautDKtQdNmHkp33akcssAqZObV955UREa8v1thDDRG6sCj8gQMztQRRDFJiGsBdWgLWEB5HrdKg5B2w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0-0 || ^9.0.0-0
+      eslint: ^8.57.1 || ^9.0.0
       svelte: ^3.37.0 || ^4.0.0 || ^5.0.0
     peerDependenciesMeta:
       svelte:
         optional: true
 
-  eslint-scope@7.2.2:
-    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  eslint-scope@8.3.0:
+    resolution: {integrity: sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   eslint-visitor-keys@3.4.3:
     resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  eslint@8.57.1:
-    resolution: {integrity: sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
+  eslint-visitor-keys@4.2.0:
+    resolution: {integrity: sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint@9.22.0:
+    resolution: {integrity: sha512-9V/QURhsRN40xuHXWjV64yvrzMjcz7ZyNoF2jJFmy9j/SLk0u1OLSZgXi28MrXjymnjEGSR80WCdab3RGMDveQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
 
   esm-env@1.2.2:
     resolution: {integrity: sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==}
 
-  espree@9.6.1:
-    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  espree@10.3.0:
+    resolution: {integrity: sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   esprima@4.0.1:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
@@ -1156,6 +1181,9 @@ packages:
     resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
     engines: {node: '>=0.10'}
 
+  esrap@1.4.5:
+    resolution: {integrity: sha512-CjNMjkBWWZeHn+VX+gS8YvFwJ5+NDhg8aWZBSFJPR8qQduDNjbJodA2WcwCm7uQa5Rjqj+nZvVmceg1RbHFB9g==}
+
   esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
     engines: {node: '>=4.0'}
@@ -1167,9 +1195,6 @@ packages:
   estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
-  estree-walker@3.0.3:
-    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
-
   esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
@@ -1184,6 +1209,9 @@ packages:
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
+  fast-diff@1.3.0:
+    resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
+
   fast-glob@3.3.3:
     resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
     engines: {node: '>=8.6.0'}
@@ -1209,9 +1237,9 @@ packages:
     resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
     engines: {node: '>=8'}
 
-  file-entry-cache@6.0.1:
-    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
-    engines: {node: ^10.12.0 || >=12.0.0}
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
 
   fill-range@7.1.1:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
@@ -1229,19 +1257,13 @@ packages:
     resolution: {integrity: sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  flat-cache@3.2.0:
-    resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
-    engines: {node: ^10.12.0 || >=12.0.0}
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
 
   flatted@3.3.3:
     resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
 
-  focus-trap@7.6.4:
-    resolution: {integrity: sha512-xx560wGBk7seZ6y933idtjJQc1l+ck+pI3sKvhKozdBV1dRZoKhkW5xoCaFv9tQiX5RH1xfSxjuNu6g+lmN/gw==}
-
-  fs.realpath@1.0.0:
-    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
-
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -1258,25 +1280,21 @@ packages:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
 
-  glob@7.2.3:
-    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
-    deprecated: Glob versions prior to v9 are no longer supported
-
   global-prefix@4.0.0:
     resolution: {integrity: sha512-w0Uf9Y9/nyHinEk5vMJKRie+wa4kR5hmDbEhGGds/kG1PwGLLHKRoNMeJOyCQjjBkANlnScqgzcFwGHgmgLkVA==}
     engines: {node: '>=16'}
 
-  globals@13.24.0:
-    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
-    engines: {node: '>=8'}
+  globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
 
   globals@15.15.0:
     resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
     engines: {node: '>=18'}
 
-  globby@11.1.0:
-    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
-    engines: {node: '>=10'}
+  globals@16.0.0:
+    resolution: {integrity: sha512-iInW14XItCXET01CQFqudPOWP2jYMl7T+QRQT+UNcR/iQncN/F0UNpgd76iFkBPgNQb4+X3LV9tLJYzwh+Gl3A==}
+    engines: {node: '>=18'}
 
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
@@ -1322,10 +1340,6 @@ packages:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
-  inflight@1.0.6:
-    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
-    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
-
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
@@ -1337,10 +1351,6 @@ packages:
     resolution: {integrity: sha512-M1WuAmb7pn9zdFRtQYk26ZBoY043Sse0wVDdk4Bppr+JOXyQYybdtvK+l9wUibhtjdjvtoiNy8tk+EgsYIUqKg==}
     engines: {node: '>=12.0.0'}
 
-  is-binary-path@2.1.0:
-    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
-    engines: {node: '>=8'}
-
   is-core-module@2.16.1:
     resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
     engines: {node: '>= 0.4'}
@@ -1368,10 +1378,6 @@ packages:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
-  is-path-inside@3.0.3:
-    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
-    engines: {node: '>=8'}
-
   is-reference@1.2.1:
     resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
 
@@ -1389,6 +1395,22 @@ packages:
     resolution: {integrity: sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==}
     engines: {node: '>=16'}
 
+  jest-axe@9.0.0:
+    resolution: {integrity: sha512-Xt7O0+wIpW31lv0SO1wQZUTyJE7DEmnDEZeTt9/S9L5WUywxrv8BrgvTuQEqujtfaQOcJ70p4wg7UUgK1E2F5g==}
+    engines: {node: '>= 16.0.0'}
+
+  jest-diff@29.7.0:
+    resolution: {integrity: sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-get-type@29.6.3:
+    resolution: {integrity: sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-matcher-utils@29.2.2:
+    resolution: {integrity: sha512-4DkJ1sDPT+UX2MR7Y3od6KtvRi9Im1ZGLGgdLFLm4lPexbTaCgJW5NN3IOXlQHF7NSHY/VHhflQ+WoKtD/vyCw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
   jiti@2.4.2:
     resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
     hasBin: true
@@ -1495,10 +1517,6 @@ packages:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
 
-  lilconfig@3.1.3:
-    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
-    engines: {node: '>=14'}
-
   local-pkg@1.1.1:
     resolution: {integrity: sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==}
     engines: {node: '>=14'}
@@ -1527,8 +1545,11 @@ packages:
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
-  mdn-data@2.0.30:
-    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
+  melt@0.18.4:
+    resolution: {integrity: sha512-AH7im4MEmHS/8MFhGDnfiuF4ibdm0guFWiBvBaF93YIzA0hhuWMcGxD8HdEsQ8q1Q6xIIRm9FdGd0WICc7Nk2A==}
+    peerDependencies:
+      '@floating-ui/dom': ^1.6.0
+      svelte: ^5.0.0
 
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
@@ -1542,24 +1563,16 @@ packages:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
 
-  min-indent@1.0.1:
-    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
-    engines: {node: '>=4'}
-
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
-  minimatch@9.0.3:
-    resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
 
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
-  mkdirp@0.5.6:
-    resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
-    hasBin: true
-
   mlly@1.7.4:
     resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
 
@@ -1590,13 +1603,6 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
-  normalize-path@3.0.0:
-    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
-    engines: {node: '>=0.10.0'}
-
-  once@1.4.0:
-    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
-
   onetime@5.1.2:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
     engines: {node: '>=6'}
@@ -1644,10 +1650,6 @@ packages:
     resolution: {integrity: sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  path-is-absolute@1.0.1:
-    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
-    engines: {node: '>=0.10.0'}
-
   path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
@@ -1655,19 +1657,12 @@ packages:
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
-  path-type@4.0.0:
-    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
-    engines: {node: '>=8'}
-
   pathe@1.1.2:
     resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
 
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
-  periscopic@3.1.0:
-    resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==}
-
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -1701,23 +1696,11 @@ packages:
       ts-node:
         optional: true
 
-  postcss-load-config@4.0.2:
-    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
-    engines: {node: '>= 14'}
+  postcss-safe-parser@7.0.1:
+    resolution: {integrity: sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==}
+    engines: {node: '>=18.0'}
     peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
-
-  postcss-safe-parser@6.0.0:
-    resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.3.3
+      postcss: ^8.4.31
 
   postcss-scss@4.0.9:
     resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
@@ -1725,8 +1708,8 @@ packages:
     peerDependencies:
       postcss: ^8.4.29
 
-  postcss-selector-parser@6.1.2:
-    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+  postcss-selector-parser@7.1.0:
+    resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
     engines: {node: '>=4'}
 
   postcss@8.5.3:
@@ -1737,6 +1720,10 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  prettier-linter-helpers@1.0.0:
+    resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
+    engines: {node: '>=6.0.0'}
+
   prettier-plugin-svelte@3.3.3:
     resolution: {integrity: sha512-yViK9zqQ+H2qZD1w/bH7W8i+bVfKrD8GIFjkFe4Thl6kCT9SlAsXVNmt3jCvQOCsnOhcvYgsoVlRV/Eu6x5nNw==}
     peerDependencies:
@@ -1803,6 +1790,10 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
+  pretty-format@29.7.0:
+    resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -1817,13 +1808,16 @@ packages:
     resolution: {integrity: sha512-U+5l2KrcMNOUPYvazA3h5ekF80FHTUG+87SEAmHZmolh1M+i/WyTCxVzmi+tidIa1tM4BSe8g2Y/D3loWDjj+w==}
     engines: {node: '>=4'}
 
+  react-is@18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+
   readable-stream@3.6.2:
     resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
     engines: {node: '>= 6'}
 
-  readdirp@3.6.0:
-    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
-    engines: {node: '>=8.10.0'}
+  readdirp@4.1.2:
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
+    engines: {node: '>= 14.18.0'}
 
   repeat-string@1.6.1:
     resolution: {integrity: sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==}
@@ -1850,16 +1844,6 @@ packages:
     resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
-  rimraf@2.7.1:
-    resolution: {integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==}
-    deprecated: Rimraf versions prior to v4 are no longer supported
-    hasBin: true
-
-  rimraf@3.0.2:
-    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
-    deprecated: Rimraf versions prior to v4 are no longer supported
-    hasBin: true
-
   rollup@4.34.9:
     resolution: {integrity: sha512-nF5XYqWWp9hx/LrpC8sZvvvmq0TeTjQgaZHYmAgwysT9nh8sWnZhBnM8ZyVbbJFIQBLwHDNoMqsBZBbUo4U8sQ==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -1872,6 +1856,16 @@ packages:
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
+  runed@0.23.4:
+    resolution: {integrity: sha512-9q8oUiBYeXIDLWNK5DfCWlkL0EW3oGbk845VdKlPeia28l751VpfesaB/+7pI6rnbx1I6rqoZ2fZxptOJLxILA==}
+    peerDependencies:
+      svelte: ^5.7.0
+
+  runed@0.24.0:
+    resolution: {integrity: sha512-kLp0qUdiwEn1Q9zrQlToN7g1PQ+F0XI7J3eABPi/hSwMMy0vEQAdmZQkCvy1BtynAmGiD8CwNSy06KH7iUsCNg==}
+    peerDependencies:
+      svelte: ^5.7.0
+
   rxjs@7.8.2:
     resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
 
@@ -1885,9 +1879,6 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  sander@0.5.1:
-    resolution: {integrity: sha512-3lVqBir7WuKDHGrKRDn/1Ye3kwpXaDOMsiRP1wd6wpZW56gJhsbp5RqQpA6JG/P+pkXizygnr1dKR8vzWaVsfA==}
-
   semver@7.7.1:
     resolution: {integrity: sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==}
     engines: {node: '>=10'}
@@ -1911,14 +1902,6 @@ packages:
     resolution: {integrity: sha512-FoqMu0NCGBLCcAkS1qA+XJIQTR6/JHfQXl+uGteNCQ76T91DMUjPa9xfmeqMY3z80nLSg9yQmNjK0Px6RWsH/A==}
     engines: {node: '>=18'}
 
-  slash@3.0.0:
-    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
-    engines: {node: '>=8'}
-
-  sorcery@0.11.1:
-    resolution: {integrity: sha512-o7npfeJE6wi6J9l0/5LKshFzZ2rMatRiCDwYeDQaOzqdzRJwALhX7mk/A/ecg6wjMu7wdZbmXfD2S/vpOg0bdQ==}
-    hasBin: true
-
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -1934,10 +1917,6 @@ packages:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
 
-  strip-indent@3.0.0:
-    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
-    engines: {node: '>=8'}
-
   strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
@@ -1950,70 +1929,30 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  svelte-check@3.8.6:
-    resolution: {integrity: sha512-ij0u4Lw/sOTREP13BdWZjiXD/BlHE6/e2e34XzmVmsp5IN4kVa3PWP65NM32JAgwjZlwBg/+JtiNV1MM8khu0Q==}
+  svelte-check@4.1.5:
+    resolution: {integrity: sha512-Gb0T2IqBNe1tLB9EB1Qh+LOe+JB8wt2/rNBDGvkxQVvk8vNeAoG+vZgFB/3P5+zC7RWlyBlzm9dVjZFph/maIg==}
+    engines: {node: '>= 18.0.0'}
     hasBin: true
     peerDependencies:
-      svelte: ^3.55.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0
+      svelte: ^4.0.0 || ^5.0.0-next.0
+      typescript: '>=5.0.0'
 
-  svelte-eslint-parser@0.43.0:
-    resolution: {integrity: sha512-GpU52uPKKcVnh8tKN5P4UZpJ/fUDndmq7wfsvoVXsyP+aY0anol7Yqo01fyrlaWGMFfm4av5DyrjlaXdLRJvGA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  svelte-eslint-parser@1.1.0:
+    resolution: {integrity: sha512-JP0v/wzDXWxza6c8K9ZjKKHYfgt0KidlbWx1e9n9UV4q+o28GTkk71fR0IDZDmLUDYs3vSq0+Tm9fofDqzGe1w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       svelte: ^3.37.0 || ^4.0.0 || ^5.0.0
     peerDependenciesMeta:
       svelte:
         optional: true
 
-  svelte-hmr@0.16.0:
-    resolution: {integrity: sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==}
-    engines: {node: ^12.20 || ^14.13.1 || >= 16}
-    peerDependencies:
-      svelte: ^3.19.0 || ^4.0.0
-
-  svelte-preprocess@5.1.4:
-    resolution: {integrity: sha512-IvnbQ6D6Ao3Gg6ftiM5tdbR6aAETwjhHV+UKGf5bHGYR69RQvF1ho0JKPcbUON4vy4R7zom13jPjgdOWCQ5hDA==}
-    engines: {node: '>= 16.0.0'}
-    peerDependencies:
-      '@babel/core': ^7.10.2
-      coffeescript: ^2.5.1
-      less: ^3.11.3 || ^4.0.0
-      postcss: ^7 || ^8
-      postcss-load-config: ^2.1.0 || ^3.0.0 || ^4.0.0 || ^5.0.0
-      pug: ^3.0.0
-      sass: ^1.26.8
-      stylus: ^0.55.0
-      sugarss: ^2.0.0 || ^3.0.0 || ^4.0.0
-      svelte: ^3.23.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0
-      typescript: '>=3.9.5 || ^4.0.0 || ^5.0.0'
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-      coffeescript:
-        optional: true
-      less:
-        optional: true
-      postcss:
-        optional: true
-      postcss-load-config:
-        optional: true
-      pug:
-        optional: true
-      sass:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      typescript:
-        optional: true
-
-  svelte@4.2.19:
-    resolution: {integrity: sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==}
-    engines: {node: '>=16'}
+  svelte@5.23.0:
+    resolution: {integrity: sha512-v0lL3NuKontiCxholEiAXCB+BYbndlKbwlDMK0DS86WgGELMJSpyqCSbJeMEMBDwOglnS7Ar2Rq0wwa/z2L8Vg==}
+    engines: {node: '>=18'}
 
-  tabbable@6.2.0:
-    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
+  synckit@0.9.2:
+    resolution: {integrity: sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
 
   tailwind-merge@3.0.2:
     resolution: {integrity: sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw==}
@@ -2025,9 +1964,6 @@ packages:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
 
-  text-table@0.2.0:
-    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
-
   through@2.3.8:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
 
@@ -2046,11 +1982,11 @@ packages:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
 
-  ts-api-utils@1.4.3:
-    resolution: {integrity: sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==}
-    engines: {node: '>=16'}
+  ts-api-utils@2.0.1:
+    resolution: {integrity: sha512-dnlgjFSVetynI8nzgJ+qF62efpglpWRk8isUEWZGWlJYySCTD6aKvbUDu+zbPeDakk3bg5H4XpitHukgfL1m9w==}
+    engines: {node: '>=18.12'}
     peerDependencies:
-      typescript: '>=4.2.0'
+      typescript: '>=4.8.4'
 
   ts-patch@3.3.0:
     resolution: {integrity: sha512-zAOzDnd5qsfEnjd9IGy1IRuvA7ygyyxxdxesbhMdutt8AHFjD8Vw8hU2rMF89HX1BKRWFYqKHrO8Q6lw0NeUZg==}
@@ -2063,10 +1999,6 @@ packages:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
 
-  type-fest@0.20.2:
-    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
-    engines: {node: '>=10'}
-
   type-fest@0.21.3:
     resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
     engines: {node: '>=10'}
@@ -2075,6 +2007,13 @@ packages:
     resolution: {integrity: sha512-S/5/0kFftkq27FPNye0XM1e2NsnoD/3FS+pBmbjmmtLT6I+i344KoOf7pvXreaFsDamWeaJX55nczA1m5PsBDg==}
     engines: {node: '>=16'}
 
+  typescript-eslint@8.26.1:
+    resolution: {integrity: sha512-t/oIs9mYyrwZGRpDv3g+3K6nZ5uhKEMt2oNmAPwaY4/ye0+EH4nXIPYNtkYFS6QHm+1DFg34DbglYBz5P9Xysg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
+
   typescript@5.6.3:
     resolution: {integrity: sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==}
     engines: {node: '>=14.17'}
@@ -2210,10 +2149,10 @@ packages:
       yaml:
         optional: true
 
-  vitefu@0.2.5:
-    resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==}
+  vitefu@1.0.6:
+    resolution: {integrity: sha512-+Rex1GlappUyNN6UfwbVZne/9cYC4+R2XDk9xkNXBKMw6HQagdX9PgZ8V2v1WUSK1wfBLp7qbI1+XSNIlB1xmA==}
     peerDependencies:
-      vite: ^3.0.0 || ^4.0.0 || ^5.0.0
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0
     peerDependenciesMeta:
       vite:
         optional: true
@@ -2242,9 +2181,6 @@ packages:
     resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
     engines: {node: '>=8'}
 
-  wrappy@1.0.2:
-    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
-
   yaml@1.10.2:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
@@ -2262,6 +2198,9 @@ packages:
     resolution: {integrity: sha512-KHBC7z61OJeaMGnF3wqNZj+GGNXOyypZviiKpQeiHirG5Ib1ImwcLBH70rbMSkKfSmUNBsdf2PwaEJtKvgmkNw==}
     engines: {node: '>=12.20'}
 
+  zimmerframe@1.1.2:
+    resolution: {integrity: sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==}
+
 snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
@@ -2422,19 +2361,33 @@ snapshots:
   '@esbuild/win32-x64@0.25.1':
     optional: true
 
-  '@eslint-community/eslint-utils@4.4.1(eslint@8.57.1)':
+  '@eslint-community/eslint-utils@4.4.1(eslint@9.22.0(jiti@2.4.2))':
     dependencies:
-      eslint: 8.57.1
+      eslint: 9.22.0(jiti@2.4.2)
       eslint-visitor-keys: 3.4.3
 
   '@eslint-community/regexpp@4.12.1': {}
 
-  '@eslint/eslintrc@2.1.4':
+  '@eslint/config-array@0.19.2':
+    dependencies:
+      '@eslint/object-schema': 2.1.6
+      debug: 4.4.0
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/config-helpers@0.1.0': {}
+
+  '@eslint/core@0.12.0':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
+  '@eslint/eslintrc@3.3.0':
     dependencies:
       ajv: 6.12.6
       debug: 4.4.0
-      espree: 9.6.1
-      globals: 13.24.0
+      espree: 10.3.0
+      globals: 14.0.0
       ignore: 5.3.2
       import-fresh: 3.3.1
       js-yaml: 4.1.0
@@ -2443,7 +2396,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/js@8.57.1': {}
+  '@eslint/js@9.22.0': {}
+
+  '@eslint/object-schema@2.1.6': {}
+
+  '@eslint/plugin-kit@0.2.7':
+    dependencies:
+      '@eslint/core': 0.12.0
+      levn: 0.4.1
 
   '@floating-ui/core@1.6.9':
     dependencies:
@@ -2468,22 +2428,27 @@ snapshots:
 
   '@huggingface/tasks@0.17.1': {}
 
-  '@humanwhocodes/config-array@0.13.0':
+  '@humanfs/core@0.19.1': {}
+
+  '@humanfs/node@0.16.6':
     dependencies:
-      '@humanwhocodes/object-schema': 2.0.3
-      debug: 4.4.0
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.3.1
 
   '@humanwhocodes/module-importer@1.0.1': {}
 
-  '@humanwhocodes/object-schema@2.0.3': {}
+  '@humanwhocodes/retry@0.3.1': {}
+
+  '@humanwhocodes/retry@0.4.2': {}
 
   '@iconify-json/carbon@1.2.8':
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/material-symbols@1.2.15':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify/types@2.0.0': {}
 
   '@iconify/utils@2.3.0':
@@ -2499,9 +2464,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@internationalized/date@3.7.0':
+  '@jest/schemas@29.6.3':
     dependencies:
-      '@swc/helpers': 0.5.15
+      '@sinclair/typebox': 0.27.8
 
   '@jridgewell/gen-mapping@0.3.8':
     dependencies:
@@ -2520,16 +2485,6 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
-  '@melt-ui/svelte@0.86.3(svelte@4.2.19)':
-    dependencies:
-      '@floating-ui/core': 1.6.9
-      '@floating-ui/dom': 1.6.13
-      '@internationalized/date': 3.7.0
-      dequal: 2.0.3
-      focus-trap: 7.6.4
-      nanoid: 5.1.2
-      svelte: 4.2.19
-
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -2542,6 +2497,8 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.19.1
 
+  '@pkgr/core@0.1.1': {}
+
   '@polka/url@1.0.0-next.28': {}
 
   '@rollup/plugin-commonjs@28.0.2(rollup@4.34.9)':
@@ -2669,22 +2626,28 @@ snapshots:
 
   '@samchon/openapi@3.0.0': {}
 
-  '@sveltejs/adapter-auto@3.3.1(@sveltejs/kit@2.18.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.14(lightningcss@1.29.1)))(svelte@4.2.19)(vite@5.4.14(lightningcss@1.29.1)))':
+  '@sinclair/typebox@0.27.8': {}
+
+  '@sveltejs/acorn-typescript@1.0.5(acorn@8.14.0)':
+    dependencies:
+      acorn: 8.14.0
+
+  '@sveltejs/adapter-auto@3.3.1(@sveltejs/kit@2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.23.0)(vite@5.4.14(lightningcss@1.29.1)))(svelte@5.23.0)(vite@5.4.14(lightningcss@1.29.1)))':
     dependencies:
-      '@sveltejs/kit': 2.18.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.14(lightningcss@1.29.1)))(svelte@4.2.19)(vite@5.4.14(lightningcss@1.29.1))
+      '@sveltejs/kit': 2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.23.0)(vite@5.4.14(lightningcss@1.29.1)))(svelte@5.23.0)(vite@5.4.14(lightningcss@1.29.1))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-node@5.2.12(@sveltejs/kit@2.18.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.14(lightningcss@1.29.1)))(svelte@4.2.19)(vite@5.4.14(lightningcss@1.29.1)))':
+  '@sveltejs/adapter-node@5.2.12(@sveltejs/kit@2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.23.0)(vite@5.4.14(lightningcss@1.29.1)))(svelte@5.23.0)(vite@5.4.14(lightningcss@1.29.1)))':
     dependencies:
       '@rollup/plugin-commonjs': 28.0.2(rollup@4.34.9)
       '@rollup/plugin-json': 6.1.0(rollup@4.34.9)
       '@rollup/plugin-node-resolve': 16.0.0(rollup@4.34.9)
-      '@sveltejs/kit': 2.18.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.14(lightningcss@1.29.1)))(svelte@4.2.19)(vite@5.4.14(lightningcss@1.29.1))
+      '@sveltejs/kit': 2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.23.0)(vite@5.4.14(lightningcss@1.29.1)))(svelte@5.23.0)(vite@5.4.14(lightningcss@1.29.1))
       rollup: 4.34.9
 
-  '@sveltejs/kit@2.18.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.14(lightningcss@1.29.1)))(svelte@4.2.19)(vite@5.4.14(lightningcss@1.29.1))':
+  '@sveltejs/kit@2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.23.0)(vite@5.4.14(lightningcss@1.29.1)))(svelte@5.23.0)(vite@5.4.14(lightningcss@1.29.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.19)(vite@5.4.14(lightningcss@1.29.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.4(svelte@5.23.0)(vite@5.4.14(lightningcss@1.29.1))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -2696,36 +2659,31 @@ snapshots:
       sade: 1.8.1
       set-cookie-parser: 2.7.1
       sirv: 3.0.1
-      svelte: 4.2.19
+      svelte: 5.23.0
       vite: 5.4.14(lightningcss@1.29.1)
 
-  '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.14(lightningcss@1.29.1)))(svelte@4.2.19)(vite@5.4.14(lightningcss@1.29.1))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.23.0)(vite@5.4.14(lightningcss@1.29.1)))(svelte@5.23.0)(vite@5.4.14(lightningcss@1.29.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.19)(vite@5.4.14(lightningcss@1.29.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.4(svelte@5.23.0)(vite@5.4.14(lightningcss@1.29.1))
       debug: 4.4.0
-      svelte: 4.2.19
+      svelte: 5.23.0
       vite: 5.4.14(lightningcss@1.29.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.14(lightningcss@1.29.1))':
+  '@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.23.0)(vite@5.4.14(lightningcss@1.29.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.14(lightningcss@1.29.1)))(svelte@4.2.19)(vite@5.4.14(lightningcss@1.29.1))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.23.0)(vite@5.4.14(lightningcss@1.29.1)))(svelte@5.23.0)(vite@5.4.14(lightningcss@1.29.1))
       debug: 4.4.0
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.17
-      svelte: 4.2.19
-      svelte-hmr: 0.16.0(svelte@4.2.19)
+      svelte: 5.23.0
       vite: 5.4.14(lightningcss@1.29.1)
-      vitefu: 0.2.5(vite@5.4.14(lightningcss@1.29.1))
+      vitefu: 1.0.6(vite@5.4.14(lightningcss@1.29.1))
     transitivePeerDependencies:
       - supports-color
 
-  '@swc/helpers@0.5.15':
-    dependencies:
-      tslib: 2.8.1
-
   '@tailwindcss/container-queries@0.1.1(tailwindcss@4.0.9)':
     dependencies:
       tailwindcss: 4.0.9
@@ -2798,99 +2756,84 @@ snapshots:
 
   '@types/json-schema@7.0.15': {}
 
-  '@types/pug@2.0.10': {}
-
   '@types/resolve@1.20.2': {}
 
-  '@types/semver@7.5.8': {}
-
-  '@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1)(typescript@5.8.2)':
+  '@typescript-eslint/eslint-plugin@8.26.1(@typescript-eslint/parser@8.26.1(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.2))(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.2)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.8.2)
-      '@typescript-eslint/scope-manager': 6.21.0
-      '@typescript-eslint/type-utils': 6.21.0(eslint@8.57.1)(typescript@5.8.2)
-      '@typescript-eslint/utils': 6.21.0(eslint@8.57.1)(typescript@5.8.2)
-      '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.4.0
-      eslint: 8.57.1
+      '@typescript-eslint/parser': 8.26.1(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.2)
+      '@typescript-eslint/scope-manager': 8.26.1
+      '@typescript-eslint/type-utils': 8.26.1(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.2)
+      '@typescript-eslint/utils': 8.26.1(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.2)
+      '@typescript-eslint/visitor-keys': 8.26.1
+      eslint: 9.22.0(jiti@2.4.2)
       graphemer: 1.4.0
       ignore: 5.3.2
       natural-compare: 1.4.0
-      semver: 7.7.1
-      ts-api-utils: 1.4.3(typescript@5.8.2)
-    optionalDependencies:
+      ts-api-utils: 2.0.1(typescript@5.8.2)
       typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2)':
+  '@typescript-eslint/parser@8.26.1(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.2)':
     dependencies:
-      '@typescript-eslint/scope-manager': 6.21.0
-      '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.8.2)
-      '@typescript-eslint/visitor-keys': 6.21.0
+      '@typescript-eslint/scope-manager': 8.26.1
+      '@typescript-eslint/types': 8.26.1
+      '@typescript-eslint/typescript-estree': 8.26.1(typescript@5.8.2)
+      '@typescript-eslint/visitor-keys': 8.26.1
       debug: 4.4.0
-      eslint: 8.57.1
-    optionalDependencies:
+      eslint: 9.22.0(jiti@2.4.2)
       typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@6.21.0':
+  '@typescript-eslint/scope-manager@8.26.1':
     dependencies:
-      '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/visitor-keys': 6.21.0
+      '@typescript-eslint/types': 8.26.1
+      '@typescript-eslint/visitor-keys': 8.26.1
 
-  '@typescript-eslint/type-utils@6.21.0(eslint@8.57.1)(typescript@5.8.2)':
+  '@typescript-eslint/type-utils@8.26.1(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.2)':
     dependencies:
-      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.8.2)
-      '@typescript-eslint/utils': 6.21.0(eslint@8.57.1)(typescript@5.8.2)
+      '@typescript-eslint/typescript-estree': 8.26.1(typescript@5.8.2)
+      '@typescript-eslint/utils': 8.26.1(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.2)
       debug: 4.4.0
-      eslint: 8.57.1
-      ts-api-utils: 1.4.3(typescript@5.8.2)
-    optionalDependencies:
+      eslint: 9.22.0(jiti@2.4.2)
+      ts-api-utils: 2.0.1(typescript@5.8.2)
       typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@6.21.0': {}
+  '@typescript-eslint/types@8.26.1': {}
 
-  '@typescript-eslint/typescript-estree@6.21.0(typescript@5.8.2)':
+  '@typescript-eslint/typescript-estree@8.26.1(typescript@5.8.2)':
     dependencies:
-      '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/visitor-keys': 6.21.0
+      '@typescript-eslint/types': 8.26.1
+      '@typescript-eslint/visitor-keys': 8.26.1
       debug: 4.4.0
-      globby: 11.1.0
+      fast-glob: 3.3.3
       is-glob: 4.0.3
-      minimatch: 9.0.3
+      minimatch: 9.0.5
       semver: 7.7.1
-      ts-api-utils: 1.4.3(typescript@5.8.2)
-    optionalDependencies:
+      ts-api-utils: 2.0.1(typescript@5.8.2)
       typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@6.21.0(eslint@8.57.1)(typescript@5.8.2)':
+  '@typescript-eslint/utils@8.26.1(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.2)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1)
-      '@types/json-schema': 7.0.15
-      '@types/semver': 7.5.8
-      '@typescript-eslint/scope-manager': 6.21.0
-      '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.8.2)
-      eslint: 8.57.1
-      semver: 7.7.1
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.22.0(jiti@2.4.2))
+      '@typescript-eslint/scope-manager': 8.26.1
+      '@typescript-eslint/types': 8.26.1
+      '@typescript-eslint/typescript-estree': 8.26.1(typescript@5.8.2)
+      eslint: 9.22.0(jiti@2.4.2)
+      typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
-      - typescript
 
-  '@typescript-eslint/visitor-keys@6.21.0':
+  '@typescript-eslint/visitor-keys@8.26.1':
     dependencies:
-      '@typescript-eslint/types': 6.21.0
-      eslint-visitor-keys: 3.4.3
-
-  '@ungap/structured-clone@1.3.0': {}
+      '@typescript-eslint/types': 8.26.1
+      eslint-visitor-keys: 4.2.0
 
   acorn-jsx@5.3.2(acorn@8.14.0):
     dependencies:
@@ -2915,10 +2858,7 @@ snapshots:
     dependencies:
       color-convert: 2.0.1
 
-  anymatch@3.1.3:
-    dependencies:
-      normalize-path: 3.0.0
-      picomatch: 2.3.1
+  ansi-styles@5.2.0: {}
 
   argparse@2.0.1: {}
 
@@ -2926,7 +2866,7 @@ snapshots:
 
   array-timsort@1.0.3: {}
 
-  array-union@2.1.0: {}
+  axe-core@4.9.1: {}
 
   axobject-query@4.1.0: {}
 
@@ -2934,8 +2874,6 @@ snapshots:
 
   base64-js@1.5.1: {}
 
-  binary-extensions@2.3.0: {}
-
   bl@4.1.0:
     dependencies:
       buffer: 5.7.1
@@ -2955,8 +2893,6 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
-  buffer-crc32@1.0.0: {}
-
   buffer@5.7.1:
     dependencies:
       base64-js: 1.5.1
@@ -2971,17 +2907,9 @@ snapshots:
 
   chardet@0.7.0: {}
 
-  chokidar@3.6.0:
+  chokidar@4.0.3:
     dependencies:
-      anymatch: 3.1.3
-      braces: 3.0.3
-      glob-parent: 5.1.2
-      is-binary-path: 2.1.0
-      is-glob: 4.0.3
-      normalize-path: 3.0.0
-      readdirp: 3.6.0
-    optionalDependencies:
-      fsevents: 2.3.3
+      readdirp: 4.1.2
 
   cli-cursor@3.1.0:
     dependencies:
@@ -2995,14 +2923,6 @@ snapshots:
 
   clsx@2.1.1: {}
 
-  code-red@1.0.4:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.0
-      '@types/estree': 1.0.6
-      acorn: 8.14.0
-      estree-walker: 3.0.3
-      periscopic: 3.1.0
-
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -3041,11 +2961,6 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
-  css-tree@2.3.1:
-    dependencies:
-      mdn-data: 2.0.30
-      source-map-js: 1.2.1
-
   cssesc@3.0.0: {}
 
   debug@4.4.0:
@@ -3062,23 +2977,13 @@ snapshots:
 
   defu@6.1.4: {}
 
-  dequal@2.0.3: {}
-
-  detect-indent@6.1.0: {}
-
   detect-libc@1.0.3: {}
 
   devalue@5.1.1: {}
 
   diff-match-patch@1.0.5: {}
 
-  dir-glob@3.0.1:
-    dependencies:
-      path-type: 4.0.0
-
-  doctrine@3.0.0:
-    dependencies:
-      esutils: 2.0.3
+  diff-sequences@29.6.3: {}
 
   drange@1.1.1: {}
 
@@ -3089,8 +2994,6 @@ snapshots:
       graceful-fs: 4.2.11
       tapable: 2.2.1
 
-  es6-promise@3.3.1: {}
-
   esbuild@0.21.5:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.21.5
@@ -3149,91 +3052,100 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
-  eslint-compat-utils@0.5.1(eslint@8.57.1):
+  eslint-compat-utils@0.6.4(eslint@9.22.0(jiti@2.4.2)):
     dependencies:
-      eslint: 8.57.1
+      eslint: 9.22.0(jiti@2.4.2)
       semver: 7.7.1
 
-  eslint-config-prettier@8.10.0(eslint@8.57.1):
+  eslint-config-prettier@10.1.1(eslint@9.22.0(jiti@2.4.2)):
+    dependencies:
+      eslint: 9.22.0(jiti@2.4.2)
+
+  eslint-plugin-prettier@5.2.3(eslint-config-prettier@10.1.1(eslint@9.22.0(jiti@2.4.2)))(eslint@9.22.0(jiti@2.4.2))(prettier@3.5.3):
     dependencies:
-      eslint: 8.57.1
+      eslint: 9.22.0(jiti@2.4.2)
+      prettier: 3.5.3
+      prettier-linter-helpers: 1.0.0
+      synckit: 0.9.2
+    optionalDependencies:
+      eslint-config-prettier: 10.1.1(eslint@9.22.0(jiti@2.4.2))
 
-  eslint-plugin-svelte@2.46.1(eslint@8.57.1)(svelte@4.2.19):
+  eslint-plugin-svelte@3.3.1(eslint@9.22.0(jiti@2.4.2))(svelte@5.23.0):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1)
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.22.0(jiti@2.4.2))
       '@jridgewell/sourcemap-codec': 1.5.0
-      eslint: 8.57.1
-      eslint-compat-utils: 0.5.1(eslint@8.57.1)
+      eslint: 9.22.0(jiti@2.4.2)
+      eslint-compat-utils: 0.6.4(eslint@9.22.0(jiti@2.4.2))
       esutils: 2.0.3
       known-css-properties: 0.35.0
       postcss: 8.5.3
       postcss-load-config: 3.1.4(postcss@8.5.3)
-      postcss-safe-parser: 6.0.0(postcss@8.5.3)
-      postcss-selector-parser: 6.1.2
+      postcss-safe-parser: 7.0.1(postcss@8.5.3)
       semver: 7.7.1
-      svelte-eslint-parser: 0.43.0(svelte@4.2.19)
+      svelte-eslint-parser: 1.1.0(svelte@5.23.0)
     optionalDependencies:
-      svelte: 4.2.19
+      svelte: 5.23.0
     transitivePeerDependencies:
       - ts-node
 
-  eslint-scope@7.2.2:
+  eslint-scope@8.3.0:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 5.3.0
 
   eslint-visitor-keys@3.4.3: {}
 
-  eslint@8.57.1:
+  eslint-visitor-keys@4.2.0: {}
+
+  eslint@9.22.0(jiti@2.4.2):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1)
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.22.0(jiti@2.4.2))
       '@eslint-community/regexpp': 4.12.1
-      '@eslint/eslintrc': 2.1.4
-      '@eslint/js': 8.57.1
-      '@humanwhocodes/config-array': 0.13.0
+      '@eslint/config-array': 0.19.2
+      '@eslint/config-helpers': 0.1.0
+      '@eslint/core': 0.12.0
+      '@eslint/eslintrc': 3.3.0
+      '@eslint/js': 9.22.0
+      '@eslint/plugin-kit': 0.2.7
+      '@humanfs/node': 0.16.6
       '@humanwhocodes/module-importer': 1.0.1
-      '@nodelib/fs.walk': 1.2.8
-      '@ungap/structured-clone': 1.3.0
+      '@humanwhocodes/retry': 0.4.2
+      '@types/estree': 1.0.6
+      '@types/json-schema': 7.0.15
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.6
       debug: 4.4.0
-      doctrine: 3.0.0
       escape-string-regexp: 4.0.0
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
+      eslint-scope: 8.3.0
+      eslint-visitor-keys: 4.2.0
+      espree: 10.3.0
       esquery: 1.6.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
-      file-entry-cache: 6.0.1
+      file-entry-cache: 8.0.0
       find-up: 5.0.0
       glob-parent: 6.0.2
-      globals: 13.24.0
-      graphemer: 1.4.0
       ignore: 5.3.2
       imurmurhash: 0.1.4
       is-glob: 4.0.3
-      is-path-inside: 3.0.3
-      js-yaml: 4.1.0
       json-stable-stringify-without-jsonify: 1.0.1
-      levn: 0.4.1
       lodash.merge: 4.6.2
       minimatch: 3.1.2
       natural-compare: 1.4.0
       optionator: 0.9.4
-      strip-ansi: 6.0.1
-      text-table: 0.2.0
+    optionalDependencies:
+      jiti: 2.4.2
     transitivePeerDependencies:
       - supports-color
 
   esm-env@1.2.2: {}
 
-  espree@9.6.1:
+  espree@10.3.0:
     dependencies:
       acorn: 8.14.0
       acorn-jsx: 5.3.2(acorn@8.14.0)
-      eslint-visitor-keys: 3.4.3
+      eslint-visitor-keys: 4.2.0
 
   esprima@4.0.1: {}
 
@@ -3241,6 +3153,10 @@ snapshots:
     dependencies:
       estraverse: 5.3.0
 
+  esrap@1.4.5:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+
   esrecurse@4.3.0:
     dependencies:
       estraverse: 5.3.0
@@ -3249,10 +3165,6 @@ snapshots:
 
   estree-walker@2.0.2: {}
 
-  estree-walker@3.0.3:
-    dependencies:
-      '@types/estree': 1.0.6
-
   esutils@2.0.3: {}
 
   exsolve@1.0.4: {}
@@ -3265,6 +3177,8 @@ snapshots:
 
   fast-deep-equal@3.1.3: {}
 
+  fast-diff@1.3.0: {}
+
   fast-glob@3.3.3:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -3289,9 +3203,9 @@ snapshots:
     dependencies:
       escape-string-regexp: 1.0.5
 
-  file-entry-cache@6.0.1:
+  file-entry-cache@8.0.0:
     dependencies:
-      flat-cache: 3.2.0
+      flat-cache: 4.0.1
 
   fill-range@7.1.1:
     dependencies:
@@ -3312,20 +3226,13 @@ snapshots:
       locate-path: 7.2.0
       path-exists: 5.0.0
 
-  flat-cache@3.2.0:
+  flat-cache@4.0.1:
     dependencies:
       flatted: 3.3.3
       keyv: 4.5.4
-      rimraf: 3.0.2
 
   flatted@3.3.3: {}
 
-  focus-trap@7.6.4:
-    dependencies:
-      tabbable: 6.2.0
-
-  fs.realpath@1.0.0: {}
-
   fsevents@2.3.3:
     optional: true
 
@@ -3339,35 +3246,17 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
-  glob@7.2.3:
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-
   global-prefix@4.0.0:
     dependencies:
       ini: 4.1.3
       kind-of: 6.0.3
       which: 4.0.0
 
-  globals@13.24.0:
-    dependencies:
-      type-fest: 0.20.2
+  globals@14.0.0: {}
 
   globals@15.15.0: {}
 
-  globby@11.1.0:
-    dependencies:
-      array-union: 2.1.0
-      dir-glob: 3.0.1
-      fast-glob: 3.3.3
-      ignore: 5.3.2
-      merge2: 1.4.1
-      slash: 3.0.0
+  globals@16.0.0: {}
 
   graceful-fs@4.2.11: {}
 
@@ -3400,11 +3289,6 @@ snapshots:
 
   imurmurhash@0.1.4: {}
 
-  inflight@1.0.6:
-    dependencies:
-      once: 1.4.0
-      wrappy: 1.0.2
-
   inherits@2.0.4: {}
 
   ini@4.1.3: {}
@@ -3427,10 +3311,6 @@ snapshots:
       through: 2.3.8
       wrap-ansi: 6.2.0
 
-  is-binary-path@2.1.0:
-    dependencies:
-      binary-extensions: 2.3.0
-
   is-core-module@2.16.1:
     dependencies:
       hasown: 2.0.2
@@ -3449,8 +3329,6 @@ snapshots:
 
   is-number@7.0.0: {}
 
-  is-path-inside@3.0.3: {}
-
   is-reference@1.2.1:
     dependencies:
       '@types/estree': 1.0.6
@@ -3465,6 +3343,29 @@ snapshots:
 
   isexe@3.1.1: {}
 
+  jest-axe@9.0.0:
+    dependencies:
+      axe-core: 4.9.1
+      chalk: 4.1.2
+      jest-matcher-utils: 29.2.2
+      lodash.merge: 4.6.2
+
+  jest-diff@29.7.0:
+    dependencies:
+      chalk: 4.1.2
+      diff-sequences: 29.6.3
+      jest-get-type: 29.6.3
+      pretty-format: 29.7.0
+
+  jest-get-type@29.6.3: {}
+
+  jest-matcher-utils@29.2.2:
+    dependencies:
+      chalk: 4.1.2
+      jest-diff: 29.7.0
+      jest-get-type: 29.6.3
+      pretty-format: 29.7.0
+
   jiti@2.4.2: {}
 
   js-yaml@4.1.0:
@@ -3541,9 +3442,6 @@ snapshots:
 
   lilconfig@2.1.0: {}
 
-  lilconfig@3.1.3:
-    optional: true
-
   local-pkg@1.1.1:
     dependencies:
       mlly: 1.7.4
@@ -3573,7 +3471,13 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
-  mdn-data@2.0.30: {}
+  melt@0.18.4(@floating-ui/dom@1.6.13)(svelte@5.23.0):
+    dependencies:
+      '@floating-ui/dom': 1.6.13
+      jest-axe: 9.0.0
+      nanoid: 5.1.2
+      runed: 0.23.4(svelte@5.23.0)
+      svelte: 5.23.0
 
   merge2@1.4.1: {}
 
@@ -3584,22 +3488,16 @@ snapshots:
 
   mimic-fn@2.1.0: {}
 
-  min-indent@1.0.1: {}
-
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.11
 
-  minimatch@9.0.3:
+  minimatch@9.0.5:
     dependencies:
       brace-expansion: 2.0.1
 
   minimist@1.2.8: {}
 
-  mkdirp@0.5.6:
-    dependencies:
-      minimist: 1.2.8
-
   mlly@1.7.4:
     dependencies:
       acorn: 8.14.0
@@ -3621,12 +3519,6 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
-  normalize-path@3.0.0: {}
-
-  once@1.4.0:
-    dependencies:
-      wrappy: 1.0.2
-
   onetime@5.1.2:
     dependencies:
       mimic-fn: 2.1.0
@@ -3682,24 +3574,14 @@ snapshots:
 
   path-exists@5.0.0: {}
 
-  path-is-absolute@1.0.1: {}
-
   path-key@3.1.1: {}
 
   path-parse@1.0.7: {}
 
-  path-type@4.0.0: {}
-
   pathe@1.1.2: {}
 
   pathe@2.0.3: {}
 
-  periscopic@3.1.0:
-    dependencies:
-      '@types/estree': 1.0.6
-      estree-walker: 3.0.3
-      is-reference: 3.0.3
-
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
@@ -3729,15 +3611,7 @@ snapshots:
     optionalDependencies:
       postcss: 8.5.3
 
-  postcss-load-config@4.0.2(postcss@8.5.3):
-    dependencies:
-      lilconfig: 3.1.3
-      yaml: 2.7.0
-    optionalDependencies:
-      postcss: 8.5.3
-    optional: true
-
-  postcss-safe-parser@6.0.0(postcss@8.5.3):
+  postcss-safe-parser@7.0.1(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
 
@@ -3745,7 +3619,7 @@ snapshots:
     dependencies:
       postcss: 8.5.3
 
-  postcss-selector-parser@6.1.2:
+  postcss-selector-parser@7.1.0:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
@@ -3758,19 +3632,29 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
-  prettier-plugin-svelte@3.3.3(prettier@3.5.3)(svelte@4.2.19):
+  prettier-linter-helpers@1.0.0:
+    dependencies:
+      fast-diff: 1.3.0
+
+  prettier-plugin-svelte@3.3.3(prettier@3.5.3)(svelte@5.23.0):
     dependencies:
       prettier: 3.5.3
-      svelte: 4.2.19
+      svelte: 5.23.0
 
-  prettier-plugin-tailwindcss@0.6.11(prettier-plugin-svelte@3.3.3(prettier@3.5.3)(svelte@4.2.19))(prettier@3.5.3):
+  prettier-plugin-tailwindcss@0.6.11(prettier-plugin-svelte@3.3.3(prettier@3.5.3)(svelte@5.23.0))(prettier@3.5.3):
     dependencies:
       prettier: 3.5.3
     optionalDependencies:
-      prettier-plugin-svelte: 3.3.3(prettier@3.5.3)(svelte@4.2.19)
+      prettier-plugin-svelte: 3.3.3(prettier@3.5.3)(svelte@5.23.0)
 
   prettier@3.5.3: {}
 
+  pretty-format@29.7.0:
+    dependencies:
+      '@jest/schemas': 29.6.3
+      ansi-styles: 5.2.0
+      react-is: 18.3.1
+
   punycode@2.3.1: {}
 
   quansync@0.2.8: {}
@@ -3782,15 +3666,15 @@ snapshots:
       drange: 1.1.1
       ret: 0.2.2
 
+  react-is@18.3.1: {}
+
   readable-stream@3.6.2:
     dependencies:
       inherits: 2.0.4
       string_decoder: 1.3.0
       util-deprecate: 1.0.2
 
-  readdirp@3.6.0:
-    dependencies:
-      picomatch: 2.3.1
+  readdirp@4.1.2: {}
 
   repeat-string@1.6.1: {}
 
@@ -3811,14 +3695,6 @@ snapshots:
 
   reusify@1.1.0: {}
 
-  rimraf@2.7.1:
-    dependencies:
-      glob: 7.2.3
-
-  rimraf@3.0.2:
-    dependencies:
-      glob: 7.2.3
-
   rollup@4.34.9:
     dependencies:
       '@types/estree': 1.0.6
@@ -3850,6 +3726,16 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
+  runed@0.23.4(svelte@5.23.0):
+    dependencies:
+      esm-env: 1.2.2
+      svelte: 5.23.0
+
+  runed@0.24.0(svelte@5.23.0):
+    dependencies:
+      esm-env: 1.2.2
+      svelte: 5.23.0
+
   rxjs@7.8.2:
     dependencies:
       tslib: 2.8.1
@@ -3862,13 +3748,6 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
-  sander@0.5.1:
-    dependencies:
-      es6-promise: 3.3.1
-      graceful-fs: 4.2.11
-      mkdirp: 0.5.6
-      rimraf: 2.7.1
-
   semver@7.7.1: {}
 
   set-cookie-parser@2.7.1: {}
@@ -3887,15 +3766,6 @@ snapshots:
       mrmime: 2.0.1
       totalist: 3.0.1
 
-  slash@3.0.0: {}
-
-  sorcery@0.11.1:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.0
-      buffer-crc32: 1.0.0
-      minimist: 1.2.8
-      sander: 0.5.1
-
   source-map-js@1.2.1: {}
 
   string-width@4.2.3:
@@ -3912,10 +3782,6 @@ snapshots:
     dependencies:
       ansi-regex: 5.0.1
 
-  strip-indent@3.0.0:
-    dependencies:
-      min-indent: 1.0.1
-
   strip-json-comments@3.1.1: {}
 
   supports-color@7.2.0:
@@ -3924,71 +3790,50 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte-check@3.8.6(postcss-load-config@4.0.2(postcss@8.5.3))(postcss@8.5.3)(svelte@4.2.19):
+  svelte-check@4.1.5(picomatch@4.0.2)(svelte@5.23.0)(typescript@5.8.2):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
-      chokidar: 3.6.0
+      chokidar: 4.0.3
+      fdir: 6.4.3(picomatch@4.0.2)
       picocolors: 1.1.1
       sade: 1.8.1
-      svelte: 4.2.19
-      svelte-preprocess: 5.1.4(postcss-load-config@4.0.2(postcss@8.5.3))(postcss@8.5.3)(svelte@4.2.19)(typescript@5.8.2)
+      svelte: 5.23.0
       typescript: 5.8.2
     transitivePeerDependencies:
-      - '@babel/core'
-      - coffeescript
-      - less
-      - postcss
-      - postcss-load-config
-      - pug
-      - sass
-      - stylus
-      - sugarss
+      - picomatch
 
-  svelte-eslint-parser@0.43.0(svelte@4.2.19):
+  svelte-eslint-parser@1.1.0(svelte@5.23.0):
     dependencies:
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
+      eslint-scope: 8.3.0
+      eslint-visitor-keys: 4.2.0
+      espree: 10.3.0
       postcss: 8.5.3
       postcss-scss: 4.0.9(postcss@8.5.3)
+      postcss-selector-parser: 7.1.0
     optionalDependencies:
-      svelte: 4.2.19
-
-  svelte-hmr@0.16.0(svelte@4.2.19):
-    dependencies:
-      svelte: 4.2.19
-
-  svelte-preprocess@5.1.4(postcss-load-config@4.0.2(postcss@8.5.3))(postcss@8.5.3)(svelte@4.2.19)(typescript@5.8.2):
-    dependencies:
-      '@types/pug': 2.0.10
-      detect-indent: 6.1.0
-      magic-string: 0.30.17
-      sorcery: 0.11.1
-      strip-indent: 3.0.0
-      svelte: 4.2.19
-    optionalDependencies:
-      postcss: 8.5.3
-      postcss-load-config: 4.0.2(postcss@8.5.3)
-      typescript: 5.8.2
+      svelte: 5.23.0
 
-  svelte@4.2.19:
+  svelte@5.23.0:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.5.0
-      '@jridgewell/trace-mapping': 0.3.25
+      '@sveltejs/acorn-typescript': 1.0.5(acorn@8.14.0)
       '@types/estree': 1.0.6
       acorn: 8.14.0
       aria-query: 5.3.2
       axobject-query: 4.1.0
-      code-red: 1.0.4
-      css-tree: 2.3.1
-      estree-walker: 3.0.3
+      clsx: 2.1.1
+      esm-env: 1.2.2
+      esrap: 1.4.5
       is-reference: 3.0.3
       locate-character: 3.0.0
       magic-string: 0.30.17
-      periscopic: 3.1.0
+      zimmerframe: 1.1.2
 
-  tabbable@6.2.0: {}
+  synckit@0.9.2:
+    dependencies:
+      '@pkgr/core': 0.1.1
+      tslib: 2.8.1
 
   tailwind-merge@3.0.2: {}
 
@@ -3996,8 +3841,6 @@ snapshots:
 
   tapable@2.2.1: {}
 
-  text-table@0.2.0: {}
-
   through@2.3.8: {}
 
   tinyexec@0.3.2: {}
@@ -4012,7 +3855,7 @@ snapshots:
 
   totalist@3.0.1: {}
 
-  ts-api-utils@1.4.3(typescript@5.8.2):
+  ts-api-utils@2.0.1(typescript@5.8.2):
     dependencies:
       typescript: 5.8.2
 
@@ -4031,12 +3874,20 @@ snapshots:
     dependencies:
       prelude-ls: 1.2.1
 
-  type-fest@0.20.2: {}
-
   type-fest@0.21.3: {}
 
   type-fest@4.37.0: {}
 
+  typescript-eslint@8.26.1(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.2):
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.26.1(@typescript-eslint/parser@8.26.1(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.2))(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.2)
+      '@typescript-eslint/parser': 8.26.1(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.2)
+      '@typescript-eslint/utils': 8.26.1(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.2)
+      eslint: 9.22.0(jiti@2.4.2)
+      typescript: 5.8.2
+    transitivePeerDependencies:
+      - supports-color
+
   typescript@5.6.3: {}
 
   typescript@5.8.2: {}
@@ -4063,7 +3914,7 @@ snapshots:
 
   ufo@1.5.4: {}
 
-  unplugin-icons@22.1.0(svelte@4.2.19):
+  unplugin-icons@22.1.0(svelte@5.23.0):
     dependencies:
       '@antfu/install-pkg': 1.0.0
       '@iconify/utils': 2.3.0
@@ -4071,7 +3922,7 @@ snapshots:
       local-pkg: 1.1.1
       unplugin: 2.2.0
     optionalDependencies:
-      svelte: 4.2.19
+      svelte: 5.23.0
     transitivePeerDependencies:
       - supports-color
 
@@ -4111,7 +3962,7 @@ snapshots:
       lightningcss: 1.29.1
       yaml: 2.7.0
 
-  vitefu@0.2.5(vite@5.4.14(lightningcss@1.29.1)):
+  vitefu@1.0.6(vite@5.4.14(lightningcss@1.29.1)):
     optionalDependencies:
       vite: 5.4.14(lightningcss@1.29.1)
 
@@ -4137,8 +3988,6 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
-  wrappy@1.0.2: {}
-
   yaml@1.10.2: {}
 
   yaml@2.7.0:
@@ -4147,3 +3996,5 @@ snapshots:
   yocto-queue@0.1.0: {}
 
   yocto-queue@1.2.0: {}
+
+  zimmerframe@1.1.2: {}
diff --git a/src/lib/actions/autofocus.ts b/src/lib/actions/autofocus.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b3681f33f7598138f5c9c770234d33f668476e4f
--- /dev/null
+++ b/src/lib/actions/autofocus.ts
@@ -0,0 +1,7 @@
+import { tick } from "svelte";
+
+export function autofocus(node: HTMLElement) {
+	tick().then(() => {
+		node.focus();
+	});
+}
diff --git a/src/lib/components/DebugMenu.svelte b/src/lib/components/DebugMenu.svelte
deleted file mode 100644
index 7da2fdaf337ed9fec836154fb1a5402b90a25751..0000000000000000000000000000000000000000
--- a/src/lib/components/DebugMenu.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-<script lang="ts">
-	import { dev } from "$app/environment";
-	import { session } from "$lib/stores/session";
-	import { createPopover } from "@melt-ui/svelte";
-	import { prompt } from "./Prompts.svelte";
-	import { token } from "$lib/stores/token";
-
-	let innerWidth: number;
-	let innerHeight: number;
-
-	function toggleTheme() {
-		document.body.classList.toggle("dark");
-	}
-
-	const {
-		elements: { trigger, content },
-	} = createPopover();
-</script>
-
-<svelte:window bind:innerWidth bind:innerHeight />
-
-{#if dev}
-	<div class="abs-x-center fixed bottom-0 z-50">
-		<button class="rounded-t-md bg-gray-500 px-3 py-1 text-xs text-white hover:bg-gray-600" {...$trigger} use:trigger>
-			Debug
-		</button>
-
-		<div
-			class="mb-2 w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-700 dark:bg-gray-800"
-			{...$content}
-			use:content
-		>
-			<h3 class="mb-3 text-lg font-semibold dark:text-white">Debug Menu</h3>
-
-			<div class="space-y-3">
-				<div class="text-sm dark:text-gray-300">
-					<p>Viewport: {innerWidth}x{innerHeight}</p>
-					<p>Environment: {import.meta.env.MODE}</p>
-				</div>
-
-				<div class="flex flex-col gap-2">
-					<button
-						class="rounded-md bg-gray-200 px-3 py-1 text-sm hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
-						on:click={toggleTheme}
-					>
-						Toggle Theme
-					</button>
-					<button
-						class="rounded-md bg-gray-200 px-3 py-1 text-sm hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
-						on:click={() => {
-							console.log($session);
-						}}
-					>
-						Log session to console
-					</button>
-					<button
-						class="rounded-md bg-gray-200 px-3 py-1 text-sm hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
-						on:click={async () => {
-							console.log(await prompt("Test prompt"));
-						}}
-					>
-						Test prompt
-					</button>
-
-					<button
-						class="rounded-md bg-gray-200 px-3 py-1 text-sm hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
-						on:click={async () => {
-							$token.showModal = true;
-						}}
-					>
-						Show token modal
-					</button>
-				</div>
-			</div>
-		</div>
-	</div>
-{/if}
-
-<style>
-	/* Add any additional styles here */
-</style>
diff --git a/src/lib/components/InferencePlayground/InferencePlaygroundConversation.svelte b/src/lib/components/InferencePlayground/InferencePlaygroundConversation.svelte
deleted file mode 100644
index 7846d90a0bc77e287de78706316499ebc317e383..0000000000000000000000000000000000000000
--- a/src/lib/components/InferencePlayground/InferencePlaygroundConversation.svelte
+++ /dev/null
@@ -1,120 +0,0 @@
-<script lang="ts">
-	import type { Conversation } from "$lib/types";
-
-	import { tick } from "svelte";
-
-	import IconPlus from "~icons/carbon/add";
-	import CodeSnippets from "./InferencePlaygroundCodeSnippets.svelte";
-	import Message from "./InferencePlaygroundMessage.svelte";
-
-	export let conversation: Conversation;
-	export let loading: boolean;
-	export let viewCode: boolean;
-	export let compareActive: boolean;
-
-	let shouldScrollToBottom = true;
-	let isProgrammaticScroll = true;
-	let conversationLength = conversation.messages.length;
-
-	let messageContainer: HTMLDivElement | null = null;
-
-	async function resizeMessageTextAreas() {
-		// ideally we would use CSS "field-sizing:content". However, it is currently only supported on Chrome.
-		await tick();
-		if (messageContainer) {
-			const containerScrollTop = messageContainer.scrollTop;
-			const textareaEls = messageContainer.querySelectorAll("textarea");
-			for (const textarea of textareaEls) {
-				textarea.style.height = "0px";
-				textarea.style.height = textarea.scrollHeight + "px";
-			}
-			messageContainer.scrollTop = containerScrollTop;
-		}
-	}
-
-	function scrollToBottom() {
-		if (messageContainer) {
-			isProgrammaticScroll = true;
-			messageContainer.scrollTop = messageContainer.scrollHeight;
-		}
-	}
-
-	$: {
-		if (conversation.messages.at(-1)) {
-			resizeMessageTextAreas();
-			if (shouldScrollToBottom) {
-				scrollToBottom();
-			}
-		}
-	}
-
-	$: if (conversation.messages.length !== conversationLength) {
-		// enable automatic scrolling when new message was added
-		conversationLength = conversation.messages.length;
-		shouldScrollToBottom = true;
-	}
-
-	$: viewCode, resizeMessageTextAreas();
-
-	function addMessage() {
-		const msgs = conversation.messages.slice();
-		conversation.messages = [
-			...msgs,
-			{
-				role: msgs.at(-1)?.role === "user" ? "assistant" : "user",
-				content: "",
-			},
-		];
-		conversation = conversation;
-	}
-
-	function deleteMessage(idx: number) {
-		conversation.messages.splice(idx, 1);
-		conversation = conversation;
-	}
-</script>
-
-<svelte:window on:resize={resizeMessageTextAreas} />
-
-<div
-	class="@container flex flex-col overflow-x-hidden overflow-y-auto {compareActive
-		? 'max-h-[calc(100dvh-5.8rem-2.5rem-75px)] md:max-h-[calc(100dvh-5.8rem-2.5rem)]'
-		: 'max-h-[calc(100dvh-5.8rem-2.5rem-75px)] md:max-h-[calc(100dvh-5.8rem)]'}"
-	class:animate-pulse={loading && !conversation.streaming}
-	bind:this={messageContainer}
-	on:scroll={() => {
-		// disable automatic scrolling is user initiates scroll
-		if (!isProgrammaticScroll) {
-			shouldScrollToBottom = false;
-		}
-		isProgrammaticScroll = false;
-	}}
->
-	{#if !viewCode}
-		{#each conversation.messages as message, messageIdx}
-			<Message
-				class="border-b"
-				bind:message
-				{loading}
-				on:input={resizeMessageTextAreas}
-				on:delete={() => deleteMessage(messageIdx)}
-				autofocus={!loading && messageIdx === conversation.messages.length - 1}
-			/>
-		{/each}
-
-		<button
-			class="flex px-3.5 py-6 hover:bg-gray-50 md:px-6 dark:hover:bg-gray-800/50"
-			on:click={addMessage}
-			disabled={loading}
-		>
-			<div class="flex items-center gap-2 p-0! text-sm font-semibold">
-				<div class="text-lg">
-					<IconPlus />
-				</div>
-				Add message
-			</div>
-		</button>
-	{:else}
-		<CodeSnippets {conversation} on:closeCode />
-	{/if}
-</div>
diff --git a/src/lib/components/InferencePlayground/InferencePlaygroundMessage.svelte b/src/lib/components/InferencePlayground/InferencePlaygroundMessage.svelte
deleted file mode 100644
index 90792ff549c5d737c95383e6359a5b07cbd2044c..0000000000000000000000000000000000000000
--- a/src/lib/components/InferencePlayground/InferencePlaygroundMessage.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from "svelte";
-	import type { ConversationMessage } from "$lib/types";
-
-	export let message: ConversationMessage;
-	export let loading: boolean = false;
-	export let autofocus: boolean = false;
-
-	const dispatch = createEventDispatcher<{ delete: void; input: void }>();
-</script>
-
-<div
-	class="group/message group grid grid-cols-[1fr_2.5rem] items-start gap-2 px-3.5 pt-4 pb-6 hover:bg-gray-100/70 @-2xl:grid-cols-[130px_1fr_2.5rem] @2xl:grid-rows-1 @2xl:gap-4 @2xl:px-6 dark:border-gray-800 dark:hover:bg-gray-800/30 {$$props.class}"
-	class:pointer-events-none={loading}
->
-	<div class="col-span-2 pt-3 pb-1 text-sm font-semibold uppercase @2xl:col-span-1 @2xl:pb-2">
-		{message.role}
-	</div>
-	<!-- svelte-ignore a11y-autofocus -->
-	<!-- svelte-ignore a11y-positive-tabindex -->
-	<textarea
-		{autofocus}
-		bind:value={message.content}
-		placeholder="Enter {message.role} message"
-		class="resize-none overflow-hidden rounded-sm bg-transparent px-2 py-2.5 ring-gray-100 outline-none group-hover/message:ring-3 hover:resize-y hover:bg-white focus:resize-y focus:bg-white focus:ring-3 @2xl:px-3 dark:ring-gray-600 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
-		rows="1"
-		tabindex="2"
-		on:input={() => {
-			dispatch("input");
-		}}
-	></textarea>
-	<button
-		tabindex="0"
-		on:click={() => {
-			dispatch("delete");
-		}}
-		type="button"
-		class="mt-1.5 size-8 rounded-lg border border-gray-200 bg-white text-xs font-medium text-gray-900 group-hover/message:block hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 focus:outline-hidden sm:hidden dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
-		>✕</button
-	>
-</div>
diff --git a/src/lib/components/InferencePlayground/InferencePlaygroundModelSelectorModal.svelte b/src/lib/components/InferencePlayground/InferencePlaygroundModelSelectorModal.svelte
deleted file mode 100644
index f549e83209b5507811e83a57880620a6a50416fa..0000000000000000000000000000000000000000
--- a/src/lib/components/InferencePlayground/InferencePlaygroundModelSelectorModal.svelte
+++ /dev/null
@@ -1,175 +0,0 @@
-<script lang="ts">
-	import type { Conversation } from "$lib/types";
-
-	import { createEventDispatcher, onMount, tick } from "svelte";
-
-	import { models } from "$lib/stores/models";
-	import IconSearch from "~icons/carbon/search";
-	import IconStar from "~icons/carbon/star";
-	import { getTrending } from "$lib/utils/model";
-	import fuzzysearch from "$lib/utils/search";
-
-	export let conversation: Conversation;
-
-	let backdropEl: HTMLDivElement;
-	let highlightIdx = 0;
-	let ignoreCursorHighlight = false;
-	let containerEl: HTMLDivElement;
-	let query = "";
-
-	const dispatch = createEventDispatcher<{ modelSelected: string; close: void }>();
-
-	$: trendingModels = getTrending($models);
-
-	$: featuredModels = fuzzysearch({ needle: query, haystack: trendingModels, property: "id" });
-	$: otherModels = fuzzysearch({ needle: query, haystack: $models, property: "id" });
-
-	onMount(() => {
-		if (featuredModels.findIndex(model => model.id === conversation.model.id) !== -1) {
-			highlightIdx = featuredModels.findIndex(model => model.id === conversation.model.id);
-		} else {
-			highlightIdx = featuredModels.length + otherModels.findIndex(model => model.id === conversation.model.id);
-		}
-	});
-
-	function handleKeydown(event: KeyboardEvent) {
-		const { key } = event;
-		let scrollLogicalPosition: ScrollLogicalPosition = "end";
-		if (key === "Escape") {
-			event.preventDefault();
-			dispatch("close");
-		} else if (key === "Enter") {
-			event.preventDefault();
-			const highlightedEl = document.querySelector(".highlighted");
-			if (highlightedEl) {
-				(highlightedEl as HTMLButtonElement).click();
-			}
-		} else if (key === "ArrowUp") {
-			event.preventDefault();
-			highlightIdx--;
-			scrollLogicalPosition = "start";
-			ignoreCursorHighlight = true;
-		} else if (key === "ArrowDown") {
-			event.preventDefault();
-			highlightIdx++;
-			ignoreCursorHighlight = true;
-		}
-		const n = featuredModels.length + otherModels.length;
-		highlightIdx = ((highlightIdx % n) + n) % n;
-		scrollToResult(scrollLogicalPosition);
-	}
-
-	async function scrollToResult(block: ScrollLogicalPosition) {
-		await tick();
-		const highlightedEl = document.querySelector(".highlighted");
-		if (containerEl && highlightedEl) {
-			const { bottom: containerBottom, top: containerTop } = containerEl.getBoundingClientRect();
-			const { bottom: highlightedBottom, top: highlightedTop } = highlightedEl.getBoundingClientRect();
-			if (highlightedBottom > containerBottom || containerTop > highlightedTop) {
-				highlightedEl.scrollIntoView({ block });
-			}
-		}
-	}
-
-	function highlightRow(idx: number) {
-		if (!ignoreCursorHighlight) {
-			highlightIdx = idx;
-		}
-	}
-
-	function handleBackdropClick(event: MouseEvent) {
-		if (window?.getSelection()?.toString()) {
-			return;
-		}
-		if (event.target === backdropEl) {
-			dispatch("close");
-		}
-	}
-</script>
-
-<svelte:window on:keydown={handleKeydown} on:mousemove={() => (ignoreCursorHighlight = false)} />
-
-<!-- svelte-ignore a11y-no-static-element-interactions a11y-click-events-have-key-events -->
-<div
-	class="fixed inset-0 z-10 flex h-screen items-start justify-center bg-black/85 pt-32"
-	bind:this={backdropEl}
-	on:click|stopPropagation={handleBackdropClick}
->
-	<div class="flex w-full max-w-[600px] items-start justify-center overflow-hidden p-10 text-left whitespace-nowrap">
-		<div
-			class="flex h-full w-full flex-col overflow-hidden rounded-lg border bg-white text-gray-900 shadow-md dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300"
-			bind:this={containerEl}
-		>
-			<div class="flex items-center border-b px-3 dark:border-gray-800">
-				<div class="mr-2 text-sm">
-					<IconSearch />
-				</div>
-				<!-- svelte-ignore a11y-autofocus -->
-				<input
-					autofocus
-					class="flex h-10 w-full rounded-md bg-transparent py-3 text-sm placeholder-gray-400 outline-hidden"
-					placeholder="Search models ..."
-					bind:value={query}
-				/>
-			</div>
-			<div class="max-h-[300px] overflow-x-hidden overflow-y-auto">
-				{#if featuredModels.length}
-					<div>
-						<div class="px-2 py-1.5 text-xs font-medium text-gray-500">Trending</div>
-						<div>
-							{#each featuredModels as model, idx}
-								{@const [nameSpace, modelName] = model.id.split("/")}
-								<button
-									class="flex w-full cursor-pointer items-center px-2 py-1.5 text-sm {highlightIdx === idx
-										? 'highlighted bg-gray-100 dark:bg-gray-800'
-										: ''}"
-									on:mouseenter={() => highlightRow(idx)}
-									on:click={() => {
-										dispatch("modelSelected", model.id);
-										dispatch("close");
-									}}
-								>
-									<div class="lucide lucide-star mr-1.5 size-4 text-yellow-400">
-										<IconStar />
-									</div>
-									<span class="inline-flex items-center"
-										><span class="text-gray-500 dark:text-gray-400">{nameSpace}</span><span
-											class="mx-1 text-gray-300 dark:text-gray-700">/</span
-										><span class="text-black dark:text-white">{modelName}</span></span
-									>
-								</button>
-							{/each}
-						</div>
-					</div>
-				{/if}
-				{#if otherModels.length}
-					<div>
-						<div class="px-2 py-1.5 text-xs font-medium text-gray-500">Other Models</div>
-						<div>
-							{#each otherModels as model, _idx}
-								{@const [nameSpace, modelName] = model.id.split("/")}
-								{@const idx = featuredModels.length + _idx}
-								<button
-									class="flex w-full cursor-pointer items-center px-2 py-1.5 text-sm {highlightIdx === idx
-										? 'highlighted bg-gray-100 dark:bg-gray-800'
-										: ''}"
-									on:mouseenter={() => highlightRow(idx)}
-									on:click={() => {
-										dispatch("modelSelected", model.id);
-										dispatch("close");
-									}}
-								>
-									<span class="inline-flex items-center"
-										><span class="text-gray-500 dark:text-gray-400">{nameSpace}</span><span
-											class="mx-1 text-gray-300 dark:text-gray-700">/</span
-										><span class="text-black dark:text-white">{modelName}</span></span
-									>
-								</button>
-							{/each}
-						</div>
-					</div>
-				{/if}
-			</div>
-		</div>
-	</div>
-</div>
diff --git a/src/lib/components/Avatar.svelte b/src/lib/components/avatar.svelte
similarity index 81%
rename from src/lib/components/Avatar.svelte
rename to src/lib/components/avatar.svelte
index fe7bdb8040adbb5053381caadfb52d652843110e..d8190912d58c29446c18fb2b45b75f95bff772b0 100644
--- a/src/lib/components/Avatar.svelte
+++ b/src/lib/components/avatar.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-	export let orgName: string | undefined;
-	export let size: "sm" | "md" = "md";
+	interface Props {
+		orgName: string | undefined;
+		size?: "sm" | "md";
+	}
+
+	let { orgName, size = "md" }: Props = $props();
 
-	$: sizeClass = size === "sm" ? "size-3" : "size-4";
+	let sizeClass = $derived(size === "sm" ? "size-3" : "size-4");
 
 	async function getAvatarUrl(orgName?: string) {
 		if (!orgName) return;
diff --git a/src/lib/components/debug-menu.svelte b/src/lib/components/debug-menu.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..c76b1a5b308cffbdea2aac7b3526f0d50633018a
--- /dev/null
+++ b/src/lib/components/debug-menu.svelte
@@ -0,0 +1,123 @@
+<script lang="ts">
+	import { dev } from "$app/environment";
+	import { session } from "$lib/state/session.svelte.js";
+	import { token } from "$lib/state/token.svelte.js";
+	import { compareStr } from "$lib/utils/compare.js";
+	import { Popover } from "melt/builders";
+	import { prompt } from "./prompts.svelte";
+	import { showQuotaModal } from "./quota-modal.svelte";
+	import type { ToastData } from "./toaster.svelte.js";
+	import { addToast } from "./toaster.svelte.js";
+
+	let innerWidth = $state<number>();
+	let innerHeight = $state<number>();
+
+	function toggleTheme() {
+		document.body.classList.toggle("dark");
+	}
+
+	const popover = new Popover();
+
+	type Action = {
+		label: string;
+		cb: () => void;
+	};
+
+	const actions: Action[] = [
+		{ label: "Toggle Theme", cb: toggleTheme },
+		{
+			label: "Log session to console",
+			cb: () => {
+				console.log(session.$);
+			},
+		},
+		{
+			label: "Test prompt",
+			cb: async () => {
+				console.log(await prompt("Test prompt"));
+			},
+		},
+		{
+			label: "Show quota modal",
+			cb: () => {
+				showQuotaModal();
+			},
+		},
+		{
+			label: "Show token modal",
+			cb: () => {
+				token.showModal = true;
+			},
+		},
+		{
+			label: "Test toast",
+			cb: () => {
+				const toastData: ToastData[] = [
+					{
+						title: "Success",
+						description: "Congratulations! It worked!",
+						variant: "success",
+					},
+					{
+						title: "Warning",
+						description: "Please check again.",
+						variant: "warning",
+					},
+					{
+						title: "Error",
+						description: "Something did not work!",
+						variant: "error",
+					},
+
+					{
+						title: "Big one",
+						description:
+							"This one has a lot of text. like seriously. its a lot. so this toast should be really big! and we see how that affects the other ones. ",
+						variant: "success",
+					},
+				];
+
+				addToast(toastData[Math.floor(Math.random() * toastData.length)]!);
+			},
+		},
+	].toSorted((a, b) => compareStr(a.label, b.label));
+</script>
+
+<svelte:window bind:innerWidth bind:innerHeight />
+
+{#if dev}
+	<div class="abs-x-center fixed bottom-0 z-50">
+		<button class="rounded-t-md bg-gray-500 px-3 py-1 text-xs text-white hover:bg-gray-600" {...popover.trigger}>
+			Debug
+		</button>
+
+		<div
+			class="mb-2 w-128 rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-700 dark:bg-gray-800"
+			{...popover.content}
+		>
+			<h3 class="mb-3 text-lg font-semibold dark:text-white">Debug Menu</h3>
+
+			<div class="space-y-3">
+				<div class="text-sm dark:text-gray-300">
+					<p>Viewport: {innerWidth}x{innerHeight}</p>
+					<p>Environment: {import.meta.env.MODE}</p>
+				</div>
+
+				<div class="grid grid-cols-2 gap-2">
+					{#each actions as { label, cb }}
+						<button
+							class="rounded-md bg-gray-200 px-3 py-1 text-sm hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
+							onclick={cb}
+						>
+							{label}
+						</button>
+					{/each}
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	/* Add any additional styles here */
+</style>
diff --git a/src/lib/components/Icons/IconProvider.svelte b/src/lib/components/icon-provider.svelte
similarity index 98%
rename from src/lib/components/Icons/IconProvider.svelte
rename to src/lib/components/icon-provider.svelte
index 5c932a19fad42e9786cb916c59dab796314e4470..e2724d547087ca7ad83b17e96d2995e56932cc4b 100644
--- a/src/lib/components/Icons/IconProvider.svelte
+++ b/src/lib/components/icon-provider.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
-	export let provider: string | undefined;
+	interface Props {
+		provider: string | undefined;
+		children?: import("svelte").Snippet;
+	}
+
+	let { provider, children }: Props = $props();
 </script>
 
 {#if provider === "sambanova"}
@@ -293,8 +298,6 @@
 			fill="#814D00"
 		></path></svg
 	>
-{:else}
-	<slot>
-		<div class="size-4 flex-none rounded-sm bg-gray-200"></div>
-	</slot>
+{:else if children}{@render children()}{:else}
+	<div class="size-4 flex-none rounded-sm bg-gray-200"></div>
 {/if}
diff --git a/src/lib/components/InferencePlayground/InferencePlaygroundCodeSnippets.svelte b/src/lib/components/inference-playground/code-snippets.svelte
similarity index 75%
rename from src/lib/components/InferencePlayground/InferencePlaygroundCodeSnippets.svelte
rename to src/lib/components/inference-playground/code-snippets.svelte
index c0bc64b5db883bda13e0c16d47be2479fecf3f23..fb9fd703df0dc7aeb9deae06de50195fbdc19532 100644
--- a/src/lib/components/InferencePlayground/InferencePlaygroundCodeSnippets.svelte
+++ b/src/lib/components/inference-playground/code-snippets.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Conversation } from "$lib/types";
+	import type { Conversation } from "$lib/types.js";
 
 	import hljs from "highlight.js/lib/core";
 	import http from "highlight.js/lib/languages/http";
@@ -7,22 +7,22 @@
 	import python from "highlight.js/lib/languages/python";
 	import { createEventDispatcher } from "svelte";
 
-	import { token } from "$lib/stores/token";
-	import { entries, fromEntries, keys } from "$lib/utils/object";
+	import { token } from "$lib/state/token.svelte.js";
+	import { entries, fromEntries, keys } from "$lib/utils/object.js";
 	import type { InferenceProvider } from "@huggingface/inference";
-	import IconCopyCode from "~icons/carbon/copy";
 	import IconExternal from "~icons/carbon/arrow-up-right";
-	import {
-		getInferenceSnippet,
-		type GetInferenceSnippetReturn,
-		type InferenceSnippetLanguage,
-	} from "./inferencePlaygroundUtils";
+	import IconCopyCode from "~icons/carbon/copy";
+	import { getInferenceSnippet, type GetInferenceSnippetReturn, type InferenceSnippetLanguage } from "./utils.js";
 
 	hljs.registerLanguage("javascript", javascript);
 	hljs.registerLanguage("python", python);
 	hljs.registerLanguage("http", http);
 
-	export let conversation: Conversation;
+	interface Props {
+		conversation: Conversation;
+	}
+
+	let { conversation }: Props = $props();
 
 	const dispatch = createEventDispatcher<{ closeCode: void }>();
 
@@ -33,10 +33,8 @@
 	} as const satisfies Record<string, string>;
 	type Language = keyof typeof labelsByLanguage;
 
-	let lang: Language = "javascript";
-	let showToken = false;
-
-	$: tokenStr = getTokenStr(showToken);
+	let lang: Language = $state("javascript");
+	let showToken = $state(false);
 
 	type GetSnippetArgs = {
 		tokenStr: string;
@@ -53,54 +51,24 @@
 		});
 	}
 
-	$: snippetsByLang = {
-		javascript: getSnippet({ lang: "js", tokenStr, conversation }),
-		python: getSnippet({ lang: "python", tokenStr, conversation }),
-		http: getSnippet({ lang: "curl", tokenStr, conversation }),
-	} as Record<Language, GetInferenceSnippetReturn>;
-
 	// { javascript: 0, python: 0, http: 0 } at first
-	const selectedSnippetIdxByLang: Record<Language, number> = fromEntries(
-		keys(labelsByLanguage).map(lang => {
-			return [lang, 0];
-		})
+	const selectedSnippetIdxByLang: Record<Language, number> = $state(
+		fromEntries(
+			keys(labelsByLanguage).map(lang => {
+				return [lang, 0];
+			})
+		)
 	);
-	$: selectedSnippet = snippetsByLang[lang][selectedSnippetIdxByLang[lang]];
 
 	type InstallInstructions = {
 		title: string;
 		content: string;
 		docs: string;
 	};
-	$: installInstructions = (function getInstallInstructions(): InstallInstructions | undefined {
-		if (lang === "javascript") {
-			const isHugging = selectedSnippet?.client.includes("hugging");
-			const toInstall = isHugging ? "@huggingface/inference" : "openai";
-			const docs = isHugging
-				? "https://huggingface.co/docs/huggingface.js/inference/README"
-				: "https://platform.openai.com/docs/libraries";
-			return {
-				title: `Install ${toInstall}`,
-				content: `npm install --save ${toInstall}`,
-				docs,
-			};
-		} else if (lang === "python") {
-			const isHugging = selectedSnippet?.client.includes("hugging");
-			const toInstall = isHugging ? "huggingface_hub" : "openai";
-			const docs = isHugging
-				? "https://huggingface.co/docs/huggingface_hub/guides/inference"
-				: "https://platform.openai.com/docs/libraries";
-			return {
-				title: `Install the latest`,
-				content: `pip install --upgrade ${toInstall}`,
-				docs,
-			};
-		}
-	})();
 
 	function getTokenStr(showToken: boolean) {
-		if ($token.value && showToken) {
-			return $token.value;
+		if (token.value && showToken) {
+			return token.value;
 		}
 		return "YOUR_HF_TOKEN";
 	}
@@ -136,6 +104,40 @@
 			},
 		};
 	}
+	let tokenStr = $derived(getTokenStr(showToken));
+	let snippetsByLang = $derived({
+		javascript: getSnippet({ lang: "js", tokenStr, conversation }),
+		python: getSnippet({ lang: "python", tokenStr, conversation }),
+		http: getSnippet({ lang: "curl", tokenStr, conversation }),
+	} as Record<Language, GetInferenceSnippetReturn>);
+	let selectedSnippet = $derived(snippetsByLang[lang][selectedSnippetIdxByLang[lang]]);
+	let installInstructions = $derived(
+		(function getInstallInstructions(): InstallInstructions | undefined {
+			if (lang === "javascript") {
+				const isHugging = selectedSnippet?.client.includes("hugging");
+				const toInstall = isHugging ? "@huggingface/inference" : "openai";
+				const docs = isHugging
+					? "https://huggingface.co/docs/huggingface.js/inference/README"
+					: "https://platform.openai.com/docs/libraries";
+				return {
+					title: `Install ${toInstall}`,
+					content: `npm install --save ${toInstall}`,
+					docs,
+				};
+			} else if (lang === "python") {
+				const isHugging = selectedSnippet?.client.includes("hugging");
+				const toInstall = isHugging ? "huggingface_hub" : "openai";
+				const docs = isHugging
+					? "https://huggingface.co/docs/huggingface_hub/guides/inference"
+					: "https://platform.openai.com/docs/libraries";
+				return {
+					title: `Install the latest`,
+					content: `pip install --upgrade ${toInstall}`,
+					docs,
+				};
+			}
+		})()
+	);
 </script>
 
 <div class="px-2 pt-2">
@@ -146,7 +148,7 @@
 			{#each entries(labelsByLanguage) as [language, label]}
 				<li>
 					<button
-						on:click={() => (lang = language)}
+						onclick={() => (lang = language)}
 						class="inline-block rounded-t-lg border-b-2 p-4 {lang === language
 							? 'border-black text-black dark:border-blue-500 dark:text-blue-500'
 							: 'border-transparent hover:border-gray-300 hover:text-gray-600 dark:hover:text-gray-300'}"
@@ -156,7 +158,7 @@
 			{/each}
 			<li class="ml-auto self-center max-sm:hidden">
 				<button
-					on:click={() => {
+					onclick={() => {
 						dispatch("closeCode");
 					}}
 					class="flex size-7 items-center justify-center rounded-lg px-3 py-2.5 text-xs font-medium text-gray-900 focus:ring-4 focus:ring-gray-100 focus:outline-hidden dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
@@ -176,7 +178,7 @@
 					{isActive
 						? 'bg-black text-gray-100 dark:border-gray-500 dark:bg-gray-700 dark:text-white'
 						: 'text-gray-500 hover:text-gray-600 dark:border-gray-600 dark:hover:text-gray-400'}"
-					on:click={() => (selectedSnippetIdxByLang[lang] = idx)}>{client}</button
+					onclick={() => (selectedSnippetIdxByLang[lang] = idx)}>{client}</button
 				>
 			{/each}
 		</div>
diff --git a/src/lib/components/InferencePlayground/InferencePlaygroundConversationHeader.svelte b/src/lib/components/inference-playground/conversation-header.svelte
similarity index 68%
rename from src/lib/components/InferencePlayground/InferencePlaygroundConversationHeader.svelte
rename to src/lib/components/inference-playground/conversation-header.svelte
index d14ee519e0fbe91e456acfabf27d87e00b9b9a6e..b8c38fb17c089928c1fcaf1b9780766fcc75a79f 100644
--- a/src/lib/components/InferencePlayground/InferencePlaygroundConversationHeader.svelte
+++ b/src/lib/components/inference-playground/conversation-header.svelte
@@ -1,24 +1,28 @@
 <script lang="ts">
-	import type { Conversation, ModelWithTokenizer } from "$lib/types";
+	import type { Conversation, ModelWithTokenizer } from "$lib/types.js";
 
 	import { createEventDispatcher } from "svelte";
 
-	import { models } from "$lib/stores/models";
-	import Avatar from "../Avatar.svelte";
+	import { models } from "$lib/state/models.svelte.js";
 	import IconCog from "~icons/carbon/settings";
-	import GenerationConfig from "./InferencePlaygroundGenerationConfig.svelte";
-	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
-	import InferencePlaygroundProviderSelect from "./InferencePlaygroundProviderSelect.svelte";
+	import Avatar from "../avatar.svelte";
+	import GenerationConfig from "./generation-config.svelte";
+	import ModelSelectorModal from "./model-selector-modal.svelte";
+	import ProviderSelect from "./provider-select.svelte";
 
-	export let conversation: Conversation;
-	export let conversationIdx: number;
+	interface Props {
+		conversation: Conversation;
+		conversationIdx: number;
+	}
+
+	let { conversation = $bindable(), conversationIdx }: Props = $props();
 
 	const dispatch = createEventDispatcher<{ close: string }>();
 
-	let modelSelectorOpen = false;
+	let modelSelectorOpen = $state(false);
 
 	function changeModel(newModelId: ModelWithTokenizer["id"]) {
-		const model = $models.find(m => m.id === newModelId);
+		const model = models.all.find(m => m.id === newModelId);
 		if (!model) {
 			return;
 		}
@@ -26,15 +30,11 @@
 		conversation.provider = undefined;
 	}
 
-	$: nameSpace = conversation.model.id.split("/")[0] ?? "";
+	let nameSpace = $derived(conversation.model.id.split("/")[0] ?? "");
 </script>
 
 {#if modelSelectorOpen}
-	<ModelSelectorModal
-		{conversation}
-		on:modelSelected={e => changeModel(e.detail)}
-		on:close={() => (modelSelectorOpen = false)}
-	/>
+	<ModelSelectorModal {conversation} onModelSelect={changeModel} onClose={() => (modelSelectorOpen = false)} />
 {/if}
 
 <div
@@ -43,12 +43,12 @@
 		: 'mx-4'} flex h-11 flex-none items-center gap-2 rounded-lg border border-gray-200/80 bg-white pr-2 pl-3 text-sm leading-none whitespace-nowrap shadow-xs *:flex-none max-sm:mt-4 dark:border-white/5 dark:bg-gray-800/70 dark:hover:bg-gray-800"
 >
 	<Avatar orgName={nameSpace} size="md" />
-	<button class="flex-1! self-stretch text-left hover:underline" on:click={() => (modelSelectorOpen = true)}
+	<button class="flex-1! self-stretch text-left hover:underline" onclick={() => (modelSelectorOpen = true)}
 		>{conversation.model.id}</button
 	>
 	<button
 		class="borderdark:border-white/5 flex size-6 items-center justify-center rounded-sm bg-gray-50 text-xs hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600"
-		on:click={() => dispatch("close", conversation.model.id)}
+		onclick={() => dispatch("close", conversation.model.id)}
 	>
 		✕
 	</button>
@@ -68,7 +68,7 @@
 		? 'mr-4 max-sm:ml-4'
 		: 'mx-4'}  mt-2 h-11 text-sm leading-none whitespace-nowrap max-sm:mt-4"
 >
-	<InferencePlaygroundProviderSelect
+	<ProviderSelect
 		bind:conversation
 		class="rounded-lg border border-gray-200/80 bg-white dark:border-white/5 dark:bg-gray-800/70 dark:hover:bg-gray-800"
 	/>
diff --git a/src/lib/components/inference-playground/conversation.svelte b/src/lib/components/inference-playground/conversation.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..f5973b4778b3b7dac4b117dc1328b58ee36dd0e1
--- /dev/null
+++ b/src/lib/components/inference-playground/conversation.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+	import { run } from "svelte/legacy";
+
+	import type { Conversation } from "$lib/types.js";
+
+	import IconPlus from "~icons/carbon/add";
+	import CodeSnippets from "./code-snippets.svelte";
+	import Message from "./message.svelte";
+
+	interface Props {
+		conversation: Conversation;
+		loading: boolean;
+		viewCode: boolean;
+		compareActive: boolean;
+	}
+
+	let { conversation = $bindable(), loading, viewCode, compareActive }: Props = $props();
+
+	let shouldScrollToBottom = $state(true);
+	let isProgrammaticScroll = $state(true);
+	let conversationLength = $state(conversation.messages.length);
+
+	let messageContainer: HTMLDivElement | null = $state(null);
+
+	function scrollToBottom() {
+		if (messageContainer) {
+			isProgrammaticScroll = true;
+			messageContainer.scrollTop = messageContainer.scrollHeight;
+		}
+	}
+
+	run(() => {
+		if (conversation.messages.at(-1)) {
+			if (shouldScrollToBottom) {
+				scrollToBottom();
+			}
+		}
+	});
+
+	run(() => {
+		if (conversation.messages.length !== conversationLength) {
+			// enable automatic scrolling when new message was added
+			conversationLength = conversation.messages.length;
+			shouldScrollToBottom = true;
+		}
+	});
+
+	function addMessage() {
+		const msgs = conversation.messages.slice();
+		conversation.messages = [
+			...msgs,
+			{
+				role: msgs.at(-1)?.role === "user" ? "assistant" : "user",
+				content: "",
+			},
+		];
+		conversation = conversation;
+	}
+
+	function deleteMessage(idx: number) {
+		conversation.messages = conversation.messages.slice(0, idx);
+	}
+</script>
+
+<div
+	class="@container flex flex-col overflow-x-hidden overflow-y-auto {compareActive
+		? 'max-h-[calc(100dvh-5.8rem-2.5rem-75px)] md:max-h-[calc(100dvh-5.8rem-2.5rem)]'
+		: 'max-h-[calc(100dvh-5.8rem-2.5rem-75px)] md:max-h-[calc(100dvh-5.8rem)]'}"
+	class:animate-pulse={loading && !conversation.streaming}
+	bind:this={messageContainer}
+	onscroll={() => {
+		// disable automatic scrolling is user initiates scroll
+		if (!isProgrammaticScroll) {
+			shouldScrollToBottom = false;
+		}
+		isProgrammaticScroll = false;
+	}}
+>
+	{#if !viewCode}
+		{#each conversation.messages as _msg, idx}
+			<Message
+				bind:content={conversation.messages[idx]!.content}
+				role={conversation.messages[idx]!.role}
+				autofocus={idx === conversation.messages.length - 1}
+				{loading}
+				onDelete={() => deleteMessage(idx)}
+			/>
+		{/each}
+
+		<button
+			class="flex px-3.5 py-6 hover:bg-gray-50 md:px-6 dark:hover:bg-gray-800/50"
+			onclick={addMessage}
+			disabled={loading}
+		>
+			<div class="flex items-center gap-2 p-0! text-sm font-semibold">
+				<div class="text-lg">
+					<IconPlus />
+				</div>
+				Add message
+			</div>
+		</button>
+	{:else}
+		<CodeSnippets {conversation} on:closeCode />
+	{/if}
+</div>
diff --git a/src/lib/components/InferencePlayground/generationConfigSettings.ts b/src/lib/components/inference-playground/generation-config-settings.ts
similarity index 100%
rename from src/lib/components/InferencePlayground/generationConfigSettings.ts
rename to src/lib/components/inference-playground/generation-config-settings.ts
diff --git a/src/lib/components/InferencePlayground/InferencePlaygroundGenerationConfig.svelte b/src/lib/components/inference-playground/generation-config.svelte
similarity index 76%
rename from src/lib/components/InferencePlayground/InferencePlaygroundGenerationConfig.svelte
rename to src/lib/components/inference-playground/generation-config.svelte
index e66f11e4a984dcc4cf9e9e22bcfb6337146576dd..c23c1cd6624d3e8c9b13349314649562098c6228 100644
--- a/src/lib/components/InferencePlayground/InferencePlaygroundGenerationConfig.svelte
+++ b/src/lib/components/inference-playground/generation-config.svelte
@@ -1,14 +1,20 @@
 <script lang="ts">
-	import type { Conversation } from "$lib/types";
+	import type { Conversation } from "$lib/types.js";
 
-	import { GENERATION_CONFIG_KEYS, GENERATION_CONFIG_SETTINGS } from "./generationConfigSettings";
-	import { customMaxTokens } from "./inferencePlaygroundUtils";
+	import { GENERATION_CONFIG_KEYS, GENERATION_CONFIG_SETTINGS } from "./generation-config-settings.js";
+	import { customMaxTokens } from "./utils.js";
 
-	export let conversation: Conversation;
-	export let classNames = "";
+	interface Props {
+		conversation: Conversation;
+		classNames?: string;
+	}
 
-	$: modelMaxLength = customMaxTokens[conversation.model.id] ?? conversation.model.tokenizerConfig.model_max_length;
-	$: maxTokens = Math.min(modelMaxLength ?? GENERATION_CONFIG_SETTINGS["max_tokens"].max, 64_000);
+	let { conversation = $bindable(), classNames = "" }: Props = $props();
+
+	let modelMaxLength = $derived(
+		customMaxTokens[conversation.model.id] ?? conversation.model.tokenizerConfig.model_max_length
+	);
+	let maxTokens = $derived(Math.min(modelMaxLength ?? GENERATION_CONFIG_SETTINGS["max_tokens"].max, 64_000));
 </script>
 
 <div class="flex flex-col gap-y-7 {classNames}">
diff --git a/src/lib/components/InferencePlayground/InferencePlaygroundHFTokenModal.svelte b/src/lib/components/inference-playground/hf-token-modal.svelte
similarity index 86%
rename from src/lib/components/InferencePlayground/InferencePlaygroundHFTokenModal.svelte
rename to src/lib/components/inference-playground/hf-token-modal.svelte
index f1297c71c10eb1a44e4f05f1d965fb8fa26a41cd..0db529efc866331f05a9f465ae54674d736c2333 100644
--- a/src/lib/components/InferencePlayground/InferencePlaygroundHFTokenModal.svelte
+++ b/src/lib/components/inference-playground/hf-token-modal.svelte
@@ -1,13 +1,21 @@
 <script lang="ts">
-	import { clickOutside } from "$lib/actions/click-outside";
+	import { createBubbler, preventDefault } from "svelte/legacy";
+
+	const bubble = createBubbler();
+	import { clickOutside } from "$lib/actions/click-outside.js";
 	import { createEventDispatcher, onDestroy, onMount } from "svelte";
 
 	import IconCross from "~icons/carbon/close";
+	import { autofocus } from "$lib/actions/autofocus.js";
+
+	interface Props {
+		storeLocallyHfToken?: boolean;
+	}
 
-	export let storeLocallyHfToken = false;
+	let { storeLocallyHfToken = $bindable(false) }: Props = $props();
 
-	let backdropEl: HTMLDivElement;
-	let modalEl: HTMLDivElement;
+	let backdropEl = $state<HTMLDivElement>();
+	let modalEl = $state<HTMLDivElement>();
 
 	const dispatch = createEventDispatcher<{ close: void }>();
 
@@ -21,7 +29,6 @@
 
 	onMount(() => {
 		document.getElementById("app")?.setAttribute("inert", "true");
-		modalEl.focus();
 	});
 
 	onDestroy(() => {
@@ -32,7 +39,6 @@
 	});
 </script>
 
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <div
 	id="default-modal"
 	aria-hidden="true"
@@ -44,10 +50,10 @@
 		tabindex="-1"
 		class="relative max-h-full w-full max-w-xl p-4 outline-hidden"
 		bind:this={modalEl}
-		on:keydown={handleKeydown}
+		onkeydown={handleKeydown}
 		use:clickOutside={() => dispatch("close")}
 	>
-		<form on:submit|preventDefault class="relative rounded-lg bg-white shadow-sm dark:bg-gray-900">
+		<form onsubmit={preventDefault(bubble("submit"))} class="relative rounded-lg bg-white shadow-sm dark:bg-gray-900">
 			<div class="flex items-center justify-between rounded-t border-b p-4 md:px-5 md:py-4 dark:border-gray-800">
 				<h3 class="flex items-center gap-2.5 text-lg font-semibold text-gray-900 dark:text-white">
 					<img
@@ -58,7 +64,7 @@
 				</h3>
 				<button
 					type="button"
-					on:click={() => dispatch("close")}
+					onclick={() => dispatch("close")}
 					class="ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
 				>
 					<div class="text-xl">
@@ -79,6 +85,7 @@
 						>Hugging Face Token</label
 					>
 					<input
+						use:autofocus
 						required
 						placeholder="Enter HF Token"
 						type="text"
diff --git a/src/lib/components/inference-playground/message.svelte b/src/lib/components/inference-playground/message.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..64405038973856c4fb6dad96daf17eb92f84488b
--- /dev/null
+++ b/src/lib/components/inference-playground/message.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { TextareaAutosize } from "$lib/spells/textarea-autosize.svelte.js";
+	import type { ConversationMessage } from "$lib/types.js";
+
+	type Props = {
+		content: ConversationMessage["content"];
+		role: ConversationMessage["role"];
+		loading?: boolean;
+		autofocus?: boolean;
+		onDelete?: () => void;
+	};
+
+	let { content = $bindable(""), role, loading, autofocus, onDelete }: Props = $props();
+
+	let element = $state<HTMLTextAreaElement>();
+	new TextareaAutosize({
+		styleProp: "minHeight",
+		element: () => element,
+		input: () => content,
+	});
+</script>
+
+<div
+	class=" group/message group grid grid-cols-[1fr_2.5rem] items-start gap-2 border-b px-3.5 pt-4 pb-6 hover:bg-gray-100/70 @-2xl:grid-cols-[130px_1fr_2.5rem] @2xl:grid-rows-1 @2xl:gap-4 @2xl:px-6 dark:border-gray-800 dark:hover:bg-gray-800/30"
+	class:pointer-events-none={loading}
+>
+	<div class="col-span-2 pt-3 pb-1 text-sm font-semibold uppercase @2xl:col-span-1 @2xl:pb-2">
+		{role}
+	</div>
+	<!-- svelte-ignore a11y_autofocus -->
+	<!-- svelte-ignore a11y_positive_tabindex -->
+	<textarea
+		bind:this={element}
+		{autofocus}
+		bind:value={content}
+		placeholder="Enter {role} message"
+		class="resize-none overflow-hidden rounded-sm bg-transparent px-2 py-2.5 ring-gray-100 outline-none group-hover/message:ring-3 hover:resize-y hover:bg-white focus:resize-y focus:bg-white focus:ring-3 @2xl:px-3 dark:ring-gray-600 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
+		rows="1"
+		tabindex="2"
+	></textarea>
+	<button
+		tabindex="0"
+		onclick={onDelete}
+		type="button"
+		class="mt-1.5 size-8 rounded-lg border border-gray-200 bg-white text-xs font-medium text-gray-900 group-hover/message:block hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 focus:outline-hidden sm:hidden dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
+		>✕</button
+	>
+</div>
diff --git a/src/lib/components/inference-playground/model-selector-modal.svelte b/src/lib/components/inference-playground/model-selector-modal.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..1928bd8b904c644a33c9ae253cdf2dbeebf8e209
--- /dev/null
+++ b/src/lib/components/inference-playground/model-selector-modal.svelte
@@ -0,0 +1,165 @@
+<script lang="ts">
+	import type { Conversation, ModelWithTokenizer } from "$lib/types.js";
+
+	import { tick } from "svelte";
+
+	import { autofocus } from "$lib/actions/autofocus.js";
+	import { models } from "$lib/state/models.svelte.js";
+	import fuzzysearch from "$lib/utils/search.js";
+	import { watch } from "runed";
+	import IconSearch from "~icons/carbon/search";
+	import IconStar from "~icons/carbon/star";
+
+	interface Props {
+		onModelSelect?: (model: string) => void;
+		onClose?: () => void;
+		conversation: Conversation;
+	}
+
+	let { onModelSelect, onClose, conversation }: Props = $props();
+
+	let backdropEl = $state<HTMLDivElement>();
+	let highlightIdx = $state(-1);
+	let ignoreCursorHighlight = $state(false);
+	let containerEl = $state<HTMLDivElement>();
+	let query = $state("");
+
+	const trending = $derived(fuzzysearch({ needle: query, haystack: models.trending, property: "id" }));
+	const other = $derived(fuzzysearch({ needle: query, haystack: models.nonTrending, property: "id" }));
+	const queried = $derived(trending.concat(other));
+	function getModelIdx(model: ModelWithTokenizer) {
+		return queried.findIndex(m => m.id === model.id);
+	}
+	const highlighted = $derived(queried[highlightIdx]);
+
+	watch(
+		() => queried,
+		(curr, prev) => {
+			const prevModel = prev?.[highlightIdx];
+			if (prevModel) {
+				// maintain model selection
+				highlightIdx = Math.max(
+					0,
+					curr.findIndex(model => model.id === prevModel?.id)
+				);
+			} else {
+				highlightIdx = curr.findIndex(model => model.id === conversation.model.id);
+			}
+			scrollToResult();
+		}
+	);
+
+	function selectModel(model: ModelWithTokenizer) {
+		onModelSelect?.(model.id);
+		onClose?.();
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === "Escape") {
+			onClose?.();
+		} else if (e.key === "Enter") {
+			if (highlighted) selectModel(highlighted);
+		} else if (e.key === "ArrowUp") {
+			if (highlightIdx > 0) highlightIdx--;
+			ignoreCursorHighlight = true;
+		} else if (e.key === "ArrowDown") {
+			if (highlightIdx < queried.length - 1) highlightIdx++;
+			ignoreCursorHighlight = true;
+		} else {
+			return;
+		}
+		e.preventDefault();
+
+		scrollToResult();
+	}
+
+	async function scrollToResult() {
+		await tick();
+		const highlightedEl = document.querySelector("[data-model][data-highlighted]");
+		highlightedEl?.scrollIntoView({ block: "nearest" });
+	}
+
+	function highlightRow(idx: number) {
+		if (ignoreCursorHighlight) return;
+		highlightIdx = idx;
+	}
+
+	function handleBackdropClick(event: MouseEvent) {
+		event.stopPropagation();
+		if (window?.getSelection()?.toString()) {
+			return;
+		}
+		if (event.target === backdropEl) {
+			onClose?.();
+		}
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} onmousemove={() => (ignoreCursorHighlight = false)} />
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<div
+	class="fixed inset-0 z-10 flex h-screen items-start justify-center bg-black/85 pt-32"
+	bind:this={backdropEl}
+	onclick={handleBackdropClick}
+>
+	<div class="flex w-full max-w-[600px] items-start justify-center overflow-hidden p-10 text-left whitespace-nowrap">
+		<div
+			class="flex h-full w-full flex-col overflow-hidden rounded-lg border bg-white text-gray-900 shadow-md dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300"
+			bind:this={containerEl}
+		>
+			<div class="flex items-center border-b px-3 dark:border-gray-800">
+				<div class="mr-2 text-sm">
+					<IconSearch />
+				</div>
+				<input
+					use:autofocus
+					class="flex h-10 w-full rounded-md bg-transparent py-3 text-sm placeholder-gray-400 outline-hidden"
+					placeholder="Search models ..."
+					bind:value={query}
+				/>
+			</div>
+			<div class="max-h-[300px] overflow-x-hidden overflow-y-auto">
+				{#snippet modelEntry(model: ModelWithTokenizer, trending?: boolean)}
+					{@const idx = getModelIdx(model)}
+					{@const [nameSpace, modelName] = model.id.split("/")}
+					<button
+						class="flex w-full cursor-pointer items-center px-2 py-1.5 text-sm
+						data-[highlighted]:bg-gray-100 data-[highlighted]:dark:bg-gray-800"
+						data-highlighted={highlightIdx === idx ? true : undefined}
+						data-model
+						onmouseenter={() => highlightRow(idx)}
+						onclick={() => {
+							onModelSelect?.(model.id);
+							onClose?.();
+						}}
+					>
+						{#if trending}
+							<div class="lucide lucide-star mr-1.5 size-4 text-yellow-400">
+								<IconStar />
+							</div>
+						{/if}
+						<span class="inline-flex items-center"
+							><span class="text-gray-500 dark:text-gray-400">{nameSpace}</span><span
+								class="mx-1 text-gray-300 dark:text-gray-700">/</span
+							><span class="text-black dark:text-white">{modelName}</span></span
+						>
+					</button>
+				{/snippet}
+				{#if trending.length > 0}
+					<div class="px-2 py-1.5 text-xs font-medium text-gray-500">Trending</div>
+					{#each trending as model}
+						{@render modelEntry(model, true)}
+					{/each}
+				{/if}
+				{#if other.length > 0}
+					<div class="px-2 py-1.5 text-xs font-medium text-gray-500">Other models</div>
+					{#each other as model}
+						{@render modelEntry(model, false)}
+					{/each}
+				{/if}
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/src/lib/components/InferencePlayground/InferencePlaygroundModelSelector.svelte b/src/lib/components/inference-playground/model-selector.svelte
similarity index 60%
rename from src/lib/components/InferencePlayground/InferencePlaygroundModelSelector.svelte
rename to src/lib/components/inference-playground/model-selector.svelte
index 33bff358711226ef95e07a4bb408b2ee40c69408..cf35ddbfeb2b97e29a59c82e426ea10dc7fea8d7 100644
--- a/src/lib/components/InferencePlayground/InferencePlaygroundModelSelector.svelte
+++ b/src/lib/components/inference-playground/model-selector.svelte
@@ -1,20 +1,24 @@
 <script lang="ts">
-	import type { Conversation, ModelWithTokenizer } from "$lib/types";
+	import type { Conversation, ModelWithTokenizer } from "$lib/types.js";
 
-	import { models } from "$lib/stores/models";
+	import { models } from "$lib/state/models.svelte.js";
 	import IconCaret from "~icons/carbon/chevron-down";
-	import Avatar from "../Avatar.svelte";
-	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
-	import ProviderSelect from "./InferencePlaygroundProviderSelect.svelte";
-	import { defaultSystemMessage } from "./inferencePlaygroundUtils";
+	import Avatar from "../avatar.svelte";
+	import ModelSelectorModal from "./model-selector-modal.svelte";
+	import ProviderSelect from "./provider-select.svelte";
+	import { defaultSystemMessage } from "./utils.js";
 
-	export let conversation: Conversation;
+	interface Props {
+		conversation: Conversation;
+	}
+
+	let { conversation = $bindable() }: Props = $props();
 
-	let showModelPickerModal = false;
+	let showModelPickerModal = $state(false);
 
 	// Model
 	function changeModel(modelId: ModelWithTokenizer["id"]) {
-		const model = $models.find(m => m.id === modelId);
+		const model = models.all.find(m => m.id === modelId);
 		if (!model) {
 			return;
 		}
@@ -23,20 +27,20 @@
 		conversation.provider = undefined;
 	}
 
-	$: nameSpace = conversation.model.id.split("/")[0] ?? "";
-	$: modelName = conversation.model.id.split("/")[1] ?? "";
+	let nameSpace = $derived(conversation.model.id.split("/")[0] ?? "");
+	let modelName = $derived(conversation.model.id.split("/")[1] ?? "");
 	const id = crypto.randomUUID();
 </script>
 
 <div class="flex flex-col gap-2">
 	<label for={id} class="flex items-baseline gap-2 text-sm font-medium text-gray-900 dark:text-white">
-		Models<span class="text-xs font-normal text-gray-400">{$models.length}</span>
+		Models<span class="text-xs font-normal text-gray-400">{models.all.length}</span>
 	</label>
 
 	<button
 		{id}
 		class="relative flex items-center justify-between gap-6 overflow-hidden rounded-lg border bg-gray-100/80 px-3 py-1.5 leading-tight whitespace-nowrap shadow-sm hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110"
-		on:click={() => (showModelPickerModal = true)}
+		onclick={() => (showModelPickerModal = true)}
 	>
 		<div class="flex flex-col items-start">
 			<div class="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-300">
@@ -54,11 +58,7 @@
 </div>
 
 {#if showModelPickerModal}
-	<ModelSelectorModal
-		{conversation}
-		on:modelSelected={e => changeModel(e.detail)}
-		on:close={() => (showModelPickerModal = false)}
-	/>
+	<ModelSelectorModal {conversation} onModelSelect={changeModel} onClose={() => (showModelPickerModal = false)} />
 {/if}
 
 <ProviderSelect bind:conversation />
diff --git a/src/lib/components/InferencePlayground/InferencePlayground.svelte b/src/lib/components/inference-playground/playground.svelte
similarity index 61%
rename from src/lib/components/InferencePlayground/InferencePlayground.svelte
rename to src/lib/components/inference-playground/playground.svelte
index 7533ac0b37ee8bdd4a17ca1bbab2891b02a863fa..e10513bc2daf161fb4e616e7d42245191edf8ff7 100644
--- a/src/lib/components/InferencePlayground/InferencePlayground.svelte
+++ b/src/lib/components/inference-playground/playground.svelte
@@ -1,109 +1,99 @@
 <script lang="ts">
-	import type { Conversation, ConversationMessage, ModelWithTokenizer } from "$lib/types";
-
-	import {
-		handleNonStreamingResponse,
-		handleStreamingResponse,
-		isSystemPromptSupported,
-	} from "./inferencePlaygroundUtils";
-
-	import { models } from "$lib/stores/models";
-	import { project, session } from "$lib/stores/session";
-	import { token } from "$lib/stores/token";
-	import { isMac } from "$lib/utils/platform";
+	import type { ConversationMessage, ModelWithTokenizer } from "$lib/types.js";
+
+	import { handleNonStreamingResponse, handleStreamingResponse, isSystemPromptSupported } from "./utils.js";
+
+	import { AbortManager } from "$lib/spells/abort-manager.svelte.js";
+	import { models } from "$lib/state/models.svelte.js";
+	import { session } from "$lib/state/session.svelte.js";
+	import { token } from "$lib/state/token.svelte.js";
+	import { isMac } from "$lib/utils/platform.js";
 	import { HfInference } from "@huggingface/inference";
-	import { onDestroy } from "svelte";
 	import IconExternal from "~icons/carbon/arrow-up-right";
 	import IconCode from "~icons/carbon/code";
 	import IconCompare from "~icons/carbon/compare";
 	import IconInfo from "~icons/carbon/information";
 	import { default as IconDelete, default as IconThrashcan } from "~icons/carbon/trash-can";
-	import PlaygroundConversation from "./InferencePlaygroundConversation.svelte";
-	import PlaygroundConversationHeader from "./InferencePlaygroundConversationHeader.svelte";
-	import GenerationConfig from "./InferencePlaygroundGenerationConfig.svelte";
-	import HFTokenModal from "./InferencePlaygroundHFTokenModal.svelte";
-	import ModelSelector from "./InferencePlaygroundModelSelector.svelte";
-	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
-	import InferencePlaygroundProjectSelect from "./InferencePlaygroundProjectSelect.svelte";
+	import { addToast } from "../toaster.svelte.js";
+	import PlaygroundConversationHeader from "./conversation-header.svelte";
+	import PlaygroundConversation from "./conversation.svelte";
+	import GenerationConfig from "./generation-config.svelte";
+	import HFTokenModal from "./hf-token-modal.svelte";
+	import ModelSelectorModal from "./model-selector-modal.svelte";
+	import ModelSelector from "./model-selector.svelte";
+	import ProjectSelect from "./project-select.svelte";
+	import { showQuotaModal } from "../quota-modal.svelte";
+	import Toaster from "../toaster.svelte";
 
 	const startMessageUser: ConversationMessage = { role: "user", content: "" };
 
-	let viewCode = false;
-	let viewSettings = false;
-	let loading = false;
-	let abortControllers: AbortController[] = [];
-	let waitForNonStreaming = true;
-	let selectCompareModelOpen = false;
+	let viewCode = $state(false);
+	let viewSettings = $state(false);
+	let loading = $state(false);
+
+	const abortManager = new AbortManager();
+	let selectCompareModelOpen = $state(false);
 
 	interface GenerationStatistics {
 		latency: number;
 		generatedTokensCount: number;
 	}
-	let generationStats = $project.conversations.map(_ => ({ latency: 0, generatedTokensCount: 0 })) as
-		| [GenerationStatistics]
-		| [GenerationStatistics, GenerationStatistics];
+	let generationStats = $state(
+		session.project.conversations.map(_ => ({ latency: 0, generatedTokensCount: 0 })) as
+			| [GenerationStatistics]
+			| [GenerationStatistics, GenerationStatistics]
+	);
 
-	$: systemPromptSupported = $project.conversations.some(conversation => isSystemPromptSupported(conversation.model));
-	$: compareActive = $project.conversations.length === 2;
+	const systemPromptSupported = $derived(
+		session.project.conversations.some(conversation => isSystemPromptSupported(conversation.model))
+	);
+	const compareActive = $derived(session.project.conversations.length === 2);
 
 	function reset() {
-		$project.conversations.map(conversation => {
-			conversation.systemMessage.content = "";
-			conversation.messages = [{ ...startMessageUser }];
+		session.project.conversations = session.project.conversations.map(conversation => {
+			return {
+				...conversation,
+				systemMessage: { role: "system", content: "" },
+				messages: [{ ...startMessageUser }],
+			};
 		});
-		$session = $session;
 	}
 
-	function abort() {
-		if (abortControllers.length) {
-			for (const abortController of abortControllers) {
-				abortController.abort();
-			}
-			abortControllers = [];
-		}
-		loading = false;
-		waitForNonStreaming = false;
-	}
+	async function runInference(conversationIdx: number) {
+		const conversation = session.project.conversations[conversationIdx];
+		if (!conversation) return;
 
-	async function runInference(conversation: Conversation, conversationIdx: number) {
 		const startTime = performance.now();
-		const hf = new HfInference($token.value);
+		const hf = new HfInference(token.value);
 
 		if (conversation.streaming) {
-			let addStreamingMessage = true;
-			const streamingMessage = { role: "assistant", content: "" };
-			const abortController = new AbortController();
-			abortControllers.push(abortController);
+			let addedMessage = false;
+			let streamingMessage = $state({ role: "assistant", content: "" });
 
 			await handleStreamingResponse(
 				hf,
 				conversation,
 				content => {
-					if (streamingMessage) {
-						streamingMessage.content = content;
-						if (addStreamingMessage) {
-							conversation.messages = [...conversation.messages, streamingMessage];
-							addStreamingMessage = false;
-						}
-						$session = $session;
-						const c = generationStats[conversationIdx];
-						if (c) c.generatedTokensCount += 1;
+					if (!streamingMessage) return;
+					streamingMessage.content = content;
+					if (!addedMessage) {
+						conversation.messages = [...conversation.messages, streamingMessage];
+						addedMessage = true;
 					}
+					// session.project.conversations[conversationIdx] = conversation;
+					const c = generationStats[conversationIdx];
+					if (c) c.generatedTokensCount += 1;
 				},
-				abortController
+				abortManager.createController()
 			);
 		} else {
-			waitForNonStreaming = true;
 			const { message: newMessage, completion_tokens: newTokensCount } = await handleNonStreamingResponse(
 				hf,
 				conversation
 			);
-			// check if the user did not abort the request
-			if (waitForNonStreaming) {
-				conversation.messages = [...conversation.messages, newMessage];
-				const c = generationStats[conversationIdx];
-				if (c) c.generatedTokensCount += newTokensCount;
-			}
+			conversation.messages = [...conversation.messages, newMessage];
+			const c = generationStats[conversationIdx];
+			if (c) c.generatedTokensCount += newTokensCount;
 		}
 
 		const endTime = performance.now();
@@ -112,48 +102,58 @@
 	}
 
 	async function submit() {
-		if (!$token.value) {
-			$token.showModal = true;
+		if (!token.value) {
+			token.showModal = true;
 			return;
 		}
 
-		for (const [idx, conversation] of $project.conversations.entries()) {
-			if (conversation.messages.at(-1)?.role === "assistant") {
-				let prefix = "";
-				if ($project.conversations.length === 2) {
-					prefix = `Error on ${idx === 0 ? "left" : "right"} conversation. `;
-				}
-				return alert(`${prefix}Messages must alternate between user/assistant roles.`);
+		for (const [idx, conversation] of session.project.conversations.entries()) {
+			if (conversation.messages.at(-1)?.role !== "assistant") continue;
+			let prefix = "";
+			if (session.project.conversations.length === 2) {
+				prefix = `Error on ${idx === 0 ? "left" : "right"} conversation. `;
 			}
+			return addToast({
+				title: "Failed to run inference",
+				description: `${prefix}Messages must alternate between user/assistant roles.`,
+				variant: "error",
+			});
 		}
 
 		(document.activeElement as HTMLElement).blur();
 		loading = true;
 
 		try {
-			const promises = $project.conversations.map((conversation, idx) => runInference(conversation, idx));
+			const promises = session.project.conversations.map((_, idx) => runInference(idx));
 			await Promise.all(promises);
 		} catch (error) {
-			for (const conversation of $project.conversations) {
+			for (const conversation of session.project.conversations) {
 				if (conversation.messages.at(-1)?.role === "assistant" && !conversation.messages.at(-1)?.content?.trim()) {
 					conversation.messages.pop();
 					conversation.messages = [...conversation.messages];
 				}
-				$session = $session;
+				session.$ = session.$;
 			}
+
 			if (error instanceof Error) {
+				const msg = error.message;
+				if (msg.toLowerCase().includes("montly") || msg.toLowerCase().includes("pro")) {
+					showQuotaModal();
+				}
+
 				if (error.message.includes("token seems invalid")) {
 					token.reset();
 				}
+
 				if (error.name !== "AbortError") {
-					alert("error: " + error.message);
+					addToast({ title: "Error", description: error.message, variant: "error" });
 				}
 			} else {
-				alert("An unknown error occurred");
+				addToast({ title: "Error", description: "An unknown error occurred", variant: "error" });
 			}
 		} finally {
 			loading = false;
-			abortControllers = [];
+			abortManager.clear();
 		}
 	}
 
@@ -169,7 +169,7 @@
 		const submittedHfToken = (formData.get("hf-token") as string).trim() ?? "";
 		const RE_HF_TOKEN = /\bhf_[a-zA-Z0-9]{34}\b/;
 		if (RE_HF_TOKEN.test(submittedHfToken)) {
-			token.setValue(submittedHfToken);
+			token.value = submittedHfToken;
 			submit();
 		} else {
 			alert("Please provide a valid HF token.");
@@ -177,46 +177,41 @@
 	}
 
 	function addCompareModel(modelId: ModelWithTokenizer["id"]) {
-		const model = $models.find(m => m.id === modelId);
-		if (!model || $project.conversations.length === 2) {
+		const model = models.all.find(m => m.id === modelId);
+		if (!model || session.project.conversations.length === 2) {
 			return;
 		}
-		const newConversation = { ...JSON.parse(JSON.stringify($project.conversations[0])), model };
-		$project.conversations = [...$project.conversations, newConversation];
+		const newConversation = { ...JSON.parse(JSON.stringify(session.project.conversations[0])), model };
+		session.project.conversations = [...session.project.conversations, newConversation];
 		generationStats = [generationStats[0], { latency: 0, generatedTokensCount: 0 }];
 	}
 
 	function removeCompareModal(conversationIdx: number) {
-		$project.conversations.splice(conversationIdx, 1)[0];
-		$session = $session;
+		session.project.conversations.splice(conversationIdx, 1)[0];
+		session.$ = session.$;
 		generationStats.splice(conversationIdx, 1)[0];
 		generationStats = generationStats;
 	}
-
-	onDestroy(() => {
-		for (const abortController of abortControllers) {
-			abortController.abort();
-		}
-	});
 </script>
 
-{#if $token.showModal}
+{#if token.showModal}
 	<HFTokenModal
-		bind:storeLocallyHfToken={$token.writeToLocalStorage}
-		on:close={() => ($token.showModal = false)}
+		bind:storeLocallyHfToken={token.writeToLocalStorage}
+		on:close={() => (token.showModal = false)}
 		on:submit={handleTokenSubmit}
 	/>
 {/if}
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="motion-safe:animate-fade-in grid h-dvh divide-gray-200 overflow-hidden bg-gray-100/50 max-md:grid-rows-[120px_1fr] max-md:divide-y dark:divide-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:[color-scheme:dark] {compareActive
 		? 'md:grid-cols-[clamp(220px,20%,350px)_minmax(0,1fr)]'
 		: 'md:grid-cols-[clamp(220px,20%,350px)_minmax(0,1fr)_clamp(270px,25%,300px)]'}"
 >
+	<!-- First column -->
 	<div class="flex flex-col gap-2 overflow-y-auto py-3 pr-3 max-md:pl-3">
 		<div class="pl-2">
-			<InferencePlaygroundProjectSelect />
+			<ProjectSelect />
 		</div>
 		<div
 			class="relative flex flex-1 flex-col gap-6 overflow-y-hidden rounded-r-xl border-x border-y border-gray-200/80 bg-linear-to-b from-white via-white p-3 shadow-xs max-md:rounded-xl dark:border-white/5 dark:from-gray-800/40 dark:via-gray-800/40"
@@ -230,33 +225,39 @@
 				placeholder={systemPromptSupported
 					? "Enter a custom prompt"
 					: "System prompt is not supported with the chosen model."}
-				value={systemPromptSupported ? $project.conversations[0].systemMessage.content : ""}
-				on:input={e => {
-					for (const conversation of $project.conversations) {
+				value={systemPromptSupported ? session.project.conversations[0]?.systemMessage.content : ""}
+				oninput={e => {
+					for (const conversation of session.project.conversations) {
 						conversation.systemMessage.content = e.currentTarget.value;
 					}
-					$session = $session;
+					session.$ = session.$;
 				}}
 				class="absolute inset-x-0 bottom-0 h-full resize-none bg-transparent px-3 pt-10 text-sm outline-hidden"
 			></textarea>
 		</div>
 	</div>
-	<div class="relative divide-y divide-gray-200 dark:divide-gray-800" on:keydown={onKeydown}>
+
+	<!-- Center column -->
+	<div class="relative divide-y divide-gray-200 dark:divide-gray-800" onkeydown={onKeydown}>
+		<Toaster />
 		<div
 			class="flex h-[calc(100dvh-5rem-120px)] divide-x divide-gray-200 overflow-x-auto overflow-y-hidden *:w-full max-sm:w-dvw md:h-[calc(100dvh-5rem)] md:pt-3 dark:divide-gray-800"
 		>
-			{#each $project.conversations as conversation, conversationIdx}
+			{#each session.project.conversations as conversation, conversationIdx (conversation)}
 				<div class="max-sm:min-w-full">
 					{#if compareActive}
 						<PlaygroundConversationHeader
 							{conversationIdx}
-							bind:conversation
+							bind:conversation={session.project.conversations[conversationIdx]!}
 							on:close={() => removeCompareModal(conversationIdx)}
 						/>
 					{/if}
 					<PlaygroundConversation
 						{loading}
-						bind:conversation
+						bind:conversation={
+							() => session.project.conversations[conversationIdx]!,
+							v => (session.project.conversations[conversationIdx] = v)
+						}
 						{viewCode}
 						{compareActive}
 						on:closeCode={() => (viewCode = false)}
@@ -271,7 +272,7 @@
 				{#if !compareActive}
 					<button
 						type="button"
-						on:click={() => (viewSettings = !viewSettings)}
+						onclick={() => (viewSettings = !viewSettings)}
 						class="flex h-[39px] items-center gap-1 rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 focus:outline-hidden md:hidden dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
 					>
 						<div class="text-black dark:text-white">
@@ -280,7 +281,7 @@
 						{!viewSettings ? "Settings" : "Hide Settings"}
 					</button>
 				{/if}
-				<button type="button" on:click={reset} class="btn size-[39px]">
+				<button type="button" onclick={reset} class="btn size-[39px]">
 					<IconDelete />
 				</button>
 			</div>
@@ -290,14 +291,14 @@
 				{/each}
 			</div>
 			<div class="flex flex-1 justify-end gap-x-2">
-				<button type="button" on:click={() => (viewCode = !viewCode)} class="btn">
+				<button type="button" onclick={() => (viewCode = !viewCode)} class="btn">
 					<IconCode />
 					{!viewCode ? "View Code" : "Hide Code"}</button
 				>
 				<button
-					on:click={() => {
+					onclick={() => {
 						viewCode = false;
-						loading ? abort() : submit();
+						loading ? abortManager.abortAll() : submit();
 					}}
 					type="button"
 					class="flex h-[39px] w-24 items-center justify-center gap-2 rounded-lg px-5 py-2.5 text-sm font-medium text-white focus:ring-4 focus:ring-gray-300 focus:outline-hidden dark:border-gray-700 dark:focus:ring-gray-700 {loading
@@ -307,24 +308,18 @@
 					{#if loading}
 						<div class="flex flex-none items-center gap-[3px]">
 							<span class="mr-2">
-								{#if $project.conversations[0].streaming || $project.conversations[1]?.streaming}
+								{#if session.project.conversations[0]?.streaming || session.project.conversations[1]?.streaming}
 									Stop
 								{:else}
 									Cancel
 								{/if}
 							</span>
-							<div
-								class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-100"
-								style="animation-delay: 0.25s;"
-							/>
-							<div
-								class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-100"
-								style="animation-delay: 0.5s;"
-							/>
-							<div
-								class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-100"
-								style="animation-delay: 0.75s;"
-							/>
+							{#each { length: 3 } as _, i}
+								<div
+									class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-100"
+									style="animation-delay: {(i + 1) * 0.25}s;"
+								></div>
+							{/each}
 						</div>
 					{:else}
 						Run <span
@@ -336,24 +331,26 @@
 			</div>
 		</div>
 	</div>
+
+	<!-- Last column -->
 	{#if !compareActive}
 		<div class="flex flex-col p-3 {viewSettings ? 'max-md:fixed' : 'max-md:hidden'} max-md:inset-x-0 max-md:bottom-20">
 			<div
 				class="flex flex-1 flex-col gap-6 overflow-y-hidden rounded-xl border border-gray-200/80 bg-white bg-linear-to-b from-white via-white p-3 shadow-xs dark:border-white/5 dark:bg-gray-900 dark:from-gray-800/40 dark:via-gray-800/40"
 			>
 				<div class="flex flex-col gap-2">
-					<ModelSelector bind:conversation={$project.conversations[0]} />
+					<ModelSelector bind:conversation={session.project.conversations[0]!} />
 					<div class="flex items-center gap-2 self-end px-2 text-xs whitespace-nowrap">
 						<button
 							class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
-							on:click={() => (selectCompareModelOpen = true)}
+							onclick={() => (selectCompareModelOpen = true)}
 						>
 							<IconCompare />
 							Compare
 						</button>
 						<a
-							href="https://huggingface.co/{$project.conversations[0].model.id}?inference_provider={$project
-								.conversations[0].provider}"
+							href="https://huggingface.co/{session.project.conversations[0]?.model.id}?inference_provider={session
+								.project.conversations[0]?.provider}"
 							target="_blank"
 							class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
 						>
@@ -363,10 +360,10 @@
 					</div>
 				</div>
 
-				<GenerationConfig bind:conversation={$project.conversations[0]} />
-				{#if $token.value}
+				<GenerationConfig bind:conversation={session.project.conversations[0]!} />
+				{#if token.value}
 					<button
-						on:click={token.reset}
+						onclick={token.reset}
 						class="mt-auto flex items-center gap-1 self-end text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
 						><svg xmlns="http://www.w3.org/2000/svg" class="text-xs" width="1em" height="1em" viewBox="0 0 32 32"
 							><path
@@ -422,8 +419,8 @@
 
 {#if selectCompareModelOpen}
 	<ModelSelectorModal
-		conversation={$project.conversations[0]}
-		on:modelSelected={e => addCompareModel(e.detail)}
-		on:close={() => (selectCompareModelOpen = false)}
+		conversation={session.project.conversations[0]!}
+		onModelSelect={addCompareModel}
+		onClose={() => (selectCompareModelOpen = false)}
 	/>
 {/if}
diff --git a/src/lib/components/InferencePlayground/InferencePlaygroundProjectSelect.svelte b/src/lib/components/inference-playground/project-select.svelte
similarity index 62%
rename from src/lib/components/InferencePlayground/InferencePlaygroundProjectSelect.svelte
rename to src/lib/components/inference-playground/project-select.svelte
index b65aef021538aad16b5bb2a23c9d6c9057ce6411..a8dff01528115d68c090a3f476ce236629b13490 100644
--- a/src/lib/components/InferencePlayground/InferencePlaygroundProjectSelect.svelte
+++ b/src/lib/components/inference-playground/project-select.svelte
@@ -1,45 +1,45 @@
 <script lang="ts">
-	import { getActiveProject, session } from "$lib/stores/session";
-	import { cn } from "$lib/utils/cn";
-	import { createSelect, createSync } from "@melt-ui/svelte";
+	import { session } from "$lib/state/session.svelte.js";
+	import { cn } from "$lib/utils/cn.js";
+	import { Select } from "melt/builders";
 	import IconCaret from "~icons/carbon/chevron-down";
 	import IconCross from "~icons/carbon/close";
 	import IconEdit from "~icons/carbon/edit";
 	import IconSave from "~icons/carbon/save";
 	import IconDelete from "~icons/carbon/trash-can";
-	import { prompt } from "../Prompts.svelte";
+	import { prompt } from "../prompts.svelte";
 
-	let classNames: string = "";
-	export { classNames as class };
+	interface Props {
+		class?: string;
+	}
+
+	let { class: classNames = "" }: Props = $props();
 
-	$: isDefault = $session.activeProjectId === "default";
+	const isDefault = $derived(session.$.activeProjectId === "default");
 
-	const {
-		elements: { trigger, menu, option },
-		states: { selected },
-	} = createSelect<string, false>();
-	const sync = createSync({ selected });
-	$: sync.selected({ value: getActiveProject($session).id, label: getActiveProject($session).name }, p => {
-		if (!p) return;
-		$session.activeProjectId = p?.value;
+	const select = new Select({
+		value: () => session.$.activeProjectId,
+		onValueChange(v) {
+			if (v) session.$.activeProjectId = v;
+		},
+		sameWidth: true,
 	});
 
 	async function saveProject() {
-		session.saveProject((await prompt("Set project name")) || "Project #" + ($session.projects.length + 1));
+		session.saveProject((await prompt("Set project name")) || "Project #" + (session.$.projects.length + 1));
 	}
 </script>
 
 <div class={cn("flex w-full items-stretch gap-2 ", classNames)}>
 	<button
-		{...$trigger}
-		use:trigger
+		{...select.trigger}
 		class={cn(
 			"relative flex grow items-center justify-between gap-6 overflow-hidden rounded-lg border bg-gray-100/80 px-3 py-1.5 leading-tight whitespace-nowrap shadow-sm",
 			"hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110"
 		)}
 	>
 		<div class="flex items-center gap-1 text-sm">
-			{getActiveProject($session).name}
+			{session.project.name}
 		</div>
 		<div
 			class="absolute right-2 grid size-4 flex-none place-items-center rounded-sm bg-gray-100 text-xs dark:bg-gray-600"
@@ -48,19 +48,20 @@
 		</div>
 	</button>
 	{#if isDefault}
-		<button class="btn size-[32px] p-0" on:click={saveProject}>
+		<button class="btn size-[32px] p-0" onclick={saveProject}>
 			<IconSave />
 		</button>
 	{:else}
-		<button class="btn size-[32px] p-0" on:click={() => ($session.activeProjectId = "default")}>
+		<button class="btn size-[32px] p-0" onclick={() => (session.$.activeProjectId = "default")}>
 			<IconCross />
 		</button>
 	{/if}
 </div>
 
-<div {...$menu} use:menu class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
-	{#each $session.projects as { name, id } (id)}
-		<button {...$option({ value: id, label: name })} use:option class="group block w-full p-1 text-sm dark:text-white">
+<div {...select.content} class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
+	{#each session.$.projects as { name, id } (id)}
+		{@const option = select.getOption(id)}
+		<div {...option} class="group block w-full p-1 text-sm dark:text-white">
 			<div
 				class="flex items-center gap-2 rounded-md py-1.5 pr-1 pl-2 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700"
 			>
@@ -69,7 +70,7 @@
 					<div class="ml-auto flex items-center gap-1">
 						<button
 							class="grid place-items-center rounded-md p-1 text-xs hover:bg-gray-300 dark:hover:bg-gray-600"
-							on:click={async e => {
+							onclick={async e => {
 								e.stopPropagation();
 								session.updateProject(id, { name: (await prompt("Edit project name", name)) || name });
 							}}
@@ -78,7 +79,7 @@
 						</button>
 						<button
 							class="grid place-items-center rounded-md p-1 text-xs hover:bg-gray-300 dark:hover:bg-gray-600"
-							on:click={e => {
+							onclick={e => {
 								e.stopPropagation();
 								session.deleteProject(id);
 							}}
@@ -88,6 +89,6 @@
 					</div>
 				{/if}
 			</div>
-		</button>
+		</div>
 	{/each}
 </div>
diff --git a/src/lib/components/InferencePlayground/InferencePlaygroundProviderSelect.svelte b/src/lib/components/inference-playground/provider-select.svelte
similarity index 71%
rename from src/lib/components/InferencePlayground/InferencePlaygroundProviderSelect.svelte
rename to src/lib/components/inference-playground/provider-select.svelte
index f6e9624186f5519908fbf75fb53e98f1e3914cde..fb562b0b3fc01a10e88d77770181656db07dc740 100644
--- a/src/lib/components/InferencePlayground/InferencePlaygroundProviderSelect.svelte
+++ b/src/lib/components/inference-playground/provider-select.svelte
@@ -1,15 +1,20 @@
 <script lang="ts">
-	import type { Conversation } from "$lib/types";
+	import { run } from "svelte/legacy";
 
-	import { randomPick } from "$lib/utils/array";
-	import { cn } from "$lib/utils/cn";
-	import { createSelect, createSync } from "@melt-ui/svelte";
+	import type { Conversation } from "$lib/types.js";
+
+	import { randomPick } from "$lib/utils/array.js";
+	import { cn } from "$lib/utils/cn.js";
+	import { Select } from "melt/builders";
 	import IconCaret from "~icons/carbon/chevron-down";
-	import IconProvider from "../Icons/IconProvider.svelte";
+	import IconProvider from "../icon-provider.svelte";
+
+	interface Props {
+		conversation: Conversation;
+		class?: string | undefined;
+	}
 
-	export let conversation: Conversation;
-	let classes: string | undefined = undefined;
-	export { classes as class };
+	let { conversation = $bindable(), class: classes = undefined }: Props = $props();
 
 	function reset(providers: typeof conversation.model.inferenceProviderMapping) {
 		const validProvider = providers.find(p => p.provider === conversation.provider);
@@ -17,18 +22,17 @@
 		conversation.provider = randomPick(providers)?.provider;
 	}
 
-	$: providers = conversation.model.inferenceProviderMapping;
-	$: reset(providers);
+	let providers = $derived(conversation.model.inferenceProviderMapping);
+	run(() => {
+		reset(providers);
+	});
 
-	const {
-		elements: { trigger, menu, option },
-		states: { selected },
-	} = createSelect<string, false>();
-	const sync = createSync({ selected });
-	$: sync.selected(
-		conversation.provider ? { value: conversation.provider } : undefined,
-		p => (conversation.provider = p?.value)
-	);
+	const select = new Select<string, false>({
+		value: () => conversation.provider,
+		onValueChange(v) {
+			conversation.provider = v;
+		},
+	});
 
 	const nameMap: Record<string, string> = {
 		"sambanova": "SambaNova",
@@ -72,8 +76,7 @@
 	-->
 
 	<button
-		{...$trigger}
-		use:trigger
+		{...select.trigger}
 		class={cn(
 			"relative flex items-center justify-between gap-6 overflow-hidden rounded-lg border bg-gray-100/80 px-3 py-1.5 leading-tight whitespace-nowrap shadow-sm",
 			"hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110",
@@ -91,9 +94,9 @@
 		</div>
 	</button>
 
-	<div {...$menu} use:menu class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
+	<div {...select.content} class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
 		{#each conversation.model.inferenceProviderMapping as { provider, providerId } (provider + providerId)}
-			<button {...$option({ value: provider })} use:option class="group block w-full p-1 text-sm dark:text-white">
+			<button {...select.getOption(provider)} class="group block w-full p-1 text-sm dark:text-white">
 				<div
 					class="flex items-center gap-2 rounded-md px-2 py-1.5 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700"
 				>
diff --git a/src/lib/components/InferencePlayground/inferencePlaygroundUtils.ts b/src/lib/components/inference-playground/utils.ts
similarity index 98%
rename from src/lib/components/InferencePlayground/inferencePlaygroundUtils.ts
rename to src/lib/components/inference-playground/utils.ts
index 6516e55a32dd054f2c1df3ec60aecfc1c964b75b..9ffd05dcf29eef5ef49909b71e6628777be39b5d 100644
--- a/src/lib/components/InferencePlayground/inferencePlaygroundUtils.ts
+++ b/src/lib/components/inference-playground/utils.ts
@@ -1,4 +1,4 @@
-import type { Conversation, ModelWithTokenizer } from "$lib/types";
+import type { Conversation, ModelWithTokenizer } from "$lib/types.js";
 import type { InferenceSnippet } from "@huggingface/tasks";
 import { type ChatCompletionOutputMessage } from "@huggingface/tasks";
 
@@ -50,7 +50,6 @@ export async function handleNonStreamingResponse(
 	});
 
 	if (response.choices && response.choices.length > 0) {
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 		const { message } = response.choices[0]!;
 		const { completion_tokens } = response.usage;
 		return { message, completion_tokens };
diff --git a/src/lib/components/label-pro.svelte b/src/lib/components/label-pro.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..67fc49342ea81a4eb0c60c8779caeb25b09c31d6
--- /dev/null
+++ b/src/lib/components/label-pro.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	interface Props {
+		class?: string;
+		size?: "xs" | "sm" | "md";
+	}
+
+	let { class: classNames = "", size = "md" }: Props = $props();
+
+	const sizeClasses: Record<string, string> = {
+		xs: "rounded-md px-1 py-0",
+		sm: "rounded-md px-1.5 py-0",
+		md: "rounded-lg px-2.5 py-0.5",
+	};
+</script>
+
+<span
+	class="inline-block -skew-x-12 border border-gray-200 bg-linear-to-br from-pink-300 via-emerald-200 to-yellow-200
+	text-sm font-bold text-black shadow-lg shadow-emerald-500/10 dark:border-gray-800
+	dark:from-pink-500 dark:via-emerald-500 dark:to-yellow-500 dark:text-black dark:shadow-emerald-500/20
+	{sizeClasses[size]} {classNames}"
+>
+	PRO
+</span>
diff --git a/src/lib/components/Prompts.svelte b/src/lib/components/prompts.svelte
similarity index 74%
rename from src/lib/components/Prompts.svelte
rename to src/lib/components/prompts.svelte
index 20cf6c474a8c81368dc0b476c82294e49f9427c8..a374f4c07b67740396e42dfccd0d16d9efbab6df 100644
--- a/src/lib/components/Prompts.svelte
+++ b/src/lib/components/prompts.svelte
@@ -1,6 +1,6 @@
-<script lang="ts" context="module">
-	import { clickOutside } from "$lib/actions/click-outside";
-	import { writable } from "svelte/store";
+<script lang="ts" module>
+	import { autofocus } from "$lib/actions/autofocus.js";
+	import { clickOutside } from "$lib/actions/click-outside.js";
 	import IconCross from "~icons/carbon/close";
 
 	type Prompt = {
@@ -10,32 +10,32 @@
 		callback: (value: string) => void;
 	};
 
-	const prompts = writable<Prompt[]>([]);
+	let prompts = $state<Prompt[]>([]);
+	const current = $derived(prompts[0]);
 
 	export function resolvePrompt() {
-		prompts.update(p => {
-			p[0]?.callback(p[0]?.value ?? "");
-			return p.slice(1);
-		});
+		if (!current) return;
+		current.callback(current.value ?? "");
+		prompts.splice(0, 1);
 	}
 
-	export async function prompt(label: string, defaultVAlue?: string): Promise<string> {
+	export async function prompt(label: string, defaultValue?: string): Promise<string> {
 		return new Promise(res => {
-			prompts.update(p => [...p, { label, value: defaultVAlue, callback: res }]);
+			prompts.push({ label, value: defaultValue, callback: res });
 		});
 	}
 </script>
 
 <script lang="ts">
-	$: current = $prompts?.[0];
-
-	let dialog: HTMLDialogElement | undefined;
+	let dialog: HTMLDialogElement | undefined = $state();
 
-	$: if (current) {
-		dialog?.showModal();
-	} else {
-		dialog?.close();
-	}
+	$effect(() => {
+		if (current) {
+			dialog?.showModal();
+		} else {
+			dialog?.close();
+		}
+	});
 
 	function onSubmit(e: Event) {
 		e.preventDefault();
@@ -43,11 +43,11 @@
 	}
 </script>
 
-<dialog bind:this={dialog} on:close={resolvePrompt}>
+<dialog bind:this={dialog} onclose={resolvePrompt}>
 	{#if current}
 		<div class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/85">
 			<form
-				on:submit={onSubmit}
+				onsubmit={onSubmit}
 				class="relative w-xl rounded-lg bg-white shadow-sm dark:bg-gray-900"
 				use:clickOutside={resolvePrompt}
 			>
@@ -58,7 +58,7 @@
 					<button
 						type="button"
 						class="ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
-						on:click={resolvePrompt}
+						onclick={resolvePrompt}
 					>
 						<div class="text-xl">
 							<IconCross />
@@ -69,13 +69,11 @@
 				<!-- Modal body -->
 				<div class="p-4 md:p-5">
 					<label class="flex flex-col gap-2 font-medium text-gray-900 dark:text-white">
-						<!-- This is fine in dialogs -->
-						<!-- svelte-ignore a11y-autofocus -->
 						<input
 							bind:value={current.value}
 							placeholder={current.placeholder}
-							autofocus
 							required
+							use:autofocus
 							type="text"
 							class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
 						/>
diff --git a/src/lib/components/quota-modal.svelte b/src/lib/components/quota-modal.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..73bc53cdde6e70c8e564249ebee691730142797e
--- /dev/null
+++ b/src/lib/components/quota-modal.svelte
@@ -0,0 +1,106 @@
+<script lang="ts" module>
+	let open = $state(false);
+
+	export function showQuotaModal() {
+		open = true;
+	}
+</script>
+
+<script lang="ts">
+	import { clickOutside } from "$lib/actions/click-outside.js";
+	import IconCross from "~icons/carbon/close";
+	import IconCheck from "~icons/carbon/checkmark";
+	import IconExternal from "~icons/carbon/arrow-up-right";
+	import { fade, scale } from "svelte/transition";
+	import LabelPro from "./label-pro.svelte";
+	let dialog: HTMLDialogElement | undefined = $state();
+
+	$effect(() => {
+		if (open) {
+			dialog?.showModal();
+		} else {
+			setTimeout(() => dialog?.close(), 250);
+		}
+	});
+
+	const actions: string[] = [
+		"Exchange a million words with leading models",
+		"Use the fastest inference providers",
+		"Compare 80+ conversational models",
+		"Process hundreds of images",
+	];
+</script>
+
+<dialog class="backdrop:bg-transparent" bind:this={dialog} onclose={() => (open = false)}>
+	{#if open}
+		<!-- Backdrop -->
+		<div
+			class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/50 backdrop-blur-sm"
+			transition:fade={{ duration: 150 }}
+		>
+			<!-- Content -->
+			<div
+				class="relative w-lg rounded-xl bg-white shadow-sm dark:bg-gray-900"
+				use:clickOutside={() => (open = false)}
+				transition:scale={{ start: 0.975, duration: 250 }}
+			>
+				<h2 class="mt-8 text-center text-2xl font-semibold text-balance sm:text-3xl dark:text-white">
+					Upgrade Your AI Experience with a <LabelPro
+						class="mx-0.5 -translate-y-px align-middle leading-6 max-sm:py-0! sm:text-xl"
+					/> Account
+				</h2>
+				<button
+					type="button"
+					class="absolute top-3 right-3 inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
+					onclick={() => (open = false)}
+					aria-label="Close modal"
+				>
+					<div class="text-xl">
+						<IconCross />
+					</div>
+				</button>
+
+				<!-- Modal body -->
+				<div class="p-4 md:p-5 dark:text-white">
+					<p
+						class="rounded-xl border border-amber-900 bg-amber-700/25 p-4 font-medium text-amber-800 dark:bg-amber-800/25 dark:text-amber-200"
+					>
+						You have reached your usage limits. To continue using the playground, please consider creating a PRO
+						account!
+					</p>
+					<p class="mt-4 text-gray-600 dark:text-gray-400">
+						By subscribing to PRO, you get <span class="text-black dark:text-white"
+							>$2 worth of Inference credits every month.</span
+						> Meaning you could:
+					</p>
+					<ul class="mt-4 flex flex-col gap-2">
+						{#each actions as action}
+							<li class="flex items-center justify-start gap-2.5">
+								<div
+									class="flex size-5 items-center justify-center rounded-full border border-green-500/15 bg-green-500/10 dark:bg-green-500/20"
+								>
+									<IconCheck class="text-xs text-green-600 dark:text-green-300" />
+								</div>
+								{action}
+							</li>
+						{/each}
+					</ul>
+				</div>
+
+				<!-- Modal footer -->
+				<div class="flex rounded-b p-4 !pb-8 md:p-5 dark:border-gray-800">
+					<a
+						href="https://huggingface.co/settings/billing/subscription#subscribe"
+						class="mx-auto mt-1 flex w-fit items-center justify-between gap-6 rounded-full bg-black py-2.5 pr-4 pl-5 text-white hover:bg-gray-900 dark:bg-white/85 dark:text-black dark:hover:bg-white"
+					>
+						<p>
+							Subscribe to PRO
+							<span class="text-gray-400 dark:text-gray-500">($9/month)</span>
+						</p>
+						<IconExternal />
+					</a>
+				</div>
+			</div>
+		</div>
+	{/if}
+</dialog>
diff --git a/src/lib/components/toaster.svelte b/src/lib/components/toaster.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..d3f81e7feade38062891df16d4ce1da8eb044dde
--- /dev/null
+++ b/src/lib/components/toaster.svelte
@@ -0,0 +1,171 @@
+<script lang="ts">
+	import { fly } from "svelte/transition";
+	import { toaster } from "./toaster.svelte.js";
+	import { Progress } from "melt/components";
+	import Close from "~icons/carbon/close";
+	import { omit } from "$lib/utils/object.js";
+	import { session } from "$lib/state/session.svelte.js";
+	import { AnimationFrames } from "runed";
+
+	let toastHeights = $state<number[]>([]);
+	new AnimationFrames(() => {
+		const rootEl = document.getElementById(toaster.root.id);
+		if (!rootEl) return;
+
+		const toastEls = Array.from(rootEl.querySelectorAll("[data-melt-toaster-toast-content]"));
+		toastHeights = toastEls.map(el => el.clientHeight);
+		// console.log(toastHeights);
+	});
+
+	const isComparing = $derived(session.project.conversations.length > 1);
+
+	const GAP = 8;
+
+	function getToastStyle(i: number) {
+		// Remember, the order is reversed! Meaning i=0 was the first toast, so its the last
+		// we want to show.
+		const n = toaster.toasts.length - i - 1;
+		if (n === 0) return "";
+		const reversedHeights = toastHeights.toReversed();
+		const yHover = -1 * reversedHeights.slice(0, n).reduce((a, b) => a + b + GAP, 0);
+
+		const y = -n * 10;
+
+		return `
+			--y-hover: ${yHover}px;
+			--y: ${y}px;
+		`;
+	}
+
+	function getRootStyle() {
+		const heightHover = toastHeights.reduce((a, b) => a + b + GAP, 0);
+		return `
+			--h-hover: ${heightHover}px;
+		`;
+	}
+</script>
+
+<div
+	{...omit(toaster.root, "popover")}
+	class={["absolute right-2 bottom-23 flex w-[300px] flex-col ", !isComparing && "md:right-0"]}
+	style:--toasts={toaster.toasts.length}
+	style={getRootStyle()}
+>
+	{#each toaster.toasts as toast, i (toast.id)}
+		<div
+			class="flex w-full flex-col justify-center rounded-xl bg-white px-4 py-4 text-left transition dark:bg-gray-800"
+			{...toast.content}
+			style:--n={toaster.toasts.length - i}
+			in:fly={{ y: 20, opacity: 0 }}
+			out:fly={{ y: 20 }}
+			style={getToastStyle(i)}
+		>
+			<h3 {...toast.title} class="text-sm font-semibold whitespace-nowrap text-gray-700 dark:text-gray-300">
+				{toast.data.title}
+			</h3>
+
+			{#if toast.data.description}
+				<p {...toast.description} class="max-w-[200px] text-xs text-gray-700 dark:text-gray-300">
+					{toast.data.description}
+				</p>
+			{/if}
+
+			<button
+				{...toast.close}
+				aria-label="dismiss toast"
+				class="absolute top-2 right-2 bg-transparent text-gray-300 hover:text-gray-400 dark:hover:text-gray-100"
+			>
+				<Close class="size-4" />
+			</button>
+
+			{#if toast.closeDelay !== 0}
+				<div class="absolute right-4 bottom-4 h-[4px] w-[30px] overflow-hidden rounded-full">
+					<Progress value={toast.percentage}>
+						{#snippet children(progress)}
+							<div {...progress.root} class="relative h-full w-full overflow-hidden bg-gray-200 dark:bg-gray-950">
+								<div
+									{...progress.progress}
+									class="h-full w-full -translate-x-(--progress)"
+									class:bg-green-400={toast.data.variant === "success"}
+									class:bg-orange-400={toast.data.variant === "warning"}
+									class:bg-red-500={toast.data.variant === "error"}
+								></div>
+							</div>
+						{/snippet}
+					</Progress>
+				</div>
+			{/if}
+		</div>
+	{/each}
+</div>
+
+<style>
+	:global([popover]) {
+		inset: unset;
+	}
+
+	[data-melt-toaster-root] {
+		--gap: 0.75rem;
+		--hover-offset: 0rem;
+		/* --toast-height: 4.5rem; */
+		--hidden-offset: 0.75rem;
+
+		--hidden-toasts: calc(var(--toasts) - 1);
+
+		overflow: visible;
+		gap: 0;
+		background: unset;
+		padding: 0;
+
+		border: none;
+		height: var(--h);
+	}
+
+	[data-melt-toaster-root]:hover {
+		height: var(--h-hover);
+	}
+
+	[data-melt-toaster-toast-content] {
+		position: absolute;
+		pointer-events: auto;
+		bottom: 0;
+		left: 0;
+		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+
+		transform-origin: 50% 0%;
+		transition: all 350ms ease;
+
+		translate: 0 var(--y);
+	}
+
+	:global(.dark [data-melt-toaster-toast-content]) {
+		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25);
+	}
+
+	[data-melt-toaster-toast-content]:nth-last-child(n + 4) {
+		z-index: 1;
+		scale: 0.925;
+		opacity: 0;
+	}
+
+	[data-melt-toaster-toast-content]:nth-last-child(-n + 3) {
+		z-index: 2;
+		scale: 0.95;
+	}
+
+	[data-melt-toaster-toast-content]:nth-last-child(-n + 2) {
+		z-index: 3;
+		scale: 0.975;
+	}
+
+	[data-melt-toaster-toast-content]:nth-last-child(-n + 1) {
+		z-index: 4;
+		scale: 1;
+	}
+
+	[data-melt-toaster-root]:hover [data-melt-toaster-toast-content] {
+		scale: 1;
+		opacity: 1;
+		translate: 0 var(--y-hover);
+	}
+</style>
diff --git a/src/lib/components/toaster.svelte.ts b/src/lib/components/toaster.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ae29acaee6a6b99cb6361da266f309efbf95829e
--- /dev/null
+++ b/src/lib/components/toaster.svelte.ts
@@ -0,0 +1,39 @@
+import { Toaster } from "melt/builders";
+
+export type ToastData = {
+	title: string;
+	description: string;
+	variant: "success" | "warning" | "error";
+};
+
+export const toaster = new Toaster<ToastData>({
+	hover: "pause-all",
+	// closeDelay: 0,
+});
+
+export function addToast(data: ToastData) {
+	toaster.addToast({ data });
+}
+
+export function removeToast(id: string) {
+	toaster.removeToast(id);
+}
+
+// Debugging
+// addToast({
+// 	title: "Hello World 1",
+// 	description: "hey",
+// 	variant: "success",
+// });
+//
+// addToast({
+// 	title: "Hello World 2",
+// 	description: "hey",
+// 	variant: "success",
+// });
+//
+// addToast({
+// 	title: "Hello World 3",
+// 	description: "hi",
+// 	variant: "success",
+// });
diff --git a/src/lib/spells/README.md b/src/lib/spells/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..bc1095480228def8f0de53f4d3b7dba1de63672c
--- /dev/null
+++ b/src/lib/spells/README.md
@@ -0,0 +1,3 @@
+# Spells
+
+Spells are special functions that use Runes under the hood, akin to Vue's composables or React hooks. They are only meant to be used inside other Spells, or within Svelte components.
diff --git a/src/lib/spells/abort-manager.svelte.ts b/src/lib/spells/abort-manager.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f7ed765e2f2ef65ceec6a7531cacf381bc007d02
--- /dev/null
+++ b/src/lib/spells/abort-manager.svelte.ts
@@ -0,0 +1,34 @@
+import { onDestroy } from "svelte";
+
+/**
+ * Manages abort controllers, and aborts them when the component unmounts.
+ */
+export class AbortManager {
+	private controllers: AbortController[] = [];
+
+	constructor() {
+		onDestroy(() => this.abortAll());
+	}
+
+	/**
+	 * Creates a new abort controller and adds it to the manager.
+	 */
+	public createController(): AbortController {
+		const controller = new AbortController();
+		this.controllers.push(controller);
+		return controller;
+	}
+
+	/**
+	 * Aborts all controllers and clears the manager.
+	 */
+	public abortAll(): void {
+		this.controllers.forEach(controller => controller.abort());
+		this.controllers = [];
+	}
+
+	/** Clears the manager without aborting the controllers. */
+	public clear(): void {
+		this.controllers = [];
+	}
+}
diff --git a/src/lib/spells/create-init.svelte.ts b/src/lib/spells/create-init.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5b8d66a8b8678c305abbeb890fb4de5f212b79c7
--- /dev/null
+++ b/src/lib/spells/create-init.svelte.ts
@@ -0,0 +1,14 @@
+export function createInit(cb: () => void) {
+	let called = $state(false);
+
+	return {
+		fn: () => {
+			if (called) return;
+			called = true;
+			cb();
+		},
+		get called() {
+			return called;
+		},
+	};
+}
diff --git a/src/lib/spells/extract.svelte.ts b/src/lib/spells/extract.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9419bd03d0a152e414c8fcc6fd797e2a0451bebe
--- /dev/null
+++ b/src/lib/spells/extract.svelte.ts
@@ -0,0 +1,21 @@
+import { isFunction } from "$lib/utils/is.js";
+import type { MaybeGetter } from "$lib/types.js";
+
+/**
+ * Extracts the value from a getter or a value.
+ * Optionally, a default value can be provided.
+ */
+export function extract<T, D extends T>(
+	value: MaybeGetter<T>,
+	defaultValue?: D
+): D extends undefined | null ? T : Exclude<T, undefined | null> | D {
+	if (isFunction(value)) {
+		const getter = value;
+		const gotten = getter();
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		return (gotten ?? defaultValue ?? gotten) as any;
+	}
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	return (value ?? defaultValue ?? value) as any;
+}
diff --git a/src/lib/spells/textarea-autosize.svelte.ts b/src/lib/spells/textarea-autosize.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0349ed77a38c2203cf610148fe9b1d788bd3a95b
--- /dev/null
+++ b/src/lib/spells/textarea-autosize.svelte.ts
@@ -0,0 +1,67 @@
+import type { Getter } from "melt";
+import { extract } from "./extract.svelte.js";
+import { useResizeObserver, watch } from "runed";
+import { tick } from "svelte";
+
+export interface TextareaAutosizeOptions {
+	/** Textarea element to autosize. */
+	element: Getter<HTMLElement | undefined>;
+	/** Textarea content. */
+	input: Getter<string>;
+	/** Function called when the textarea size changes. */
+	onResize?: () => void;
+	/**
+	 * Specify the style property that will be used to manipulate height. Can be `height | minHeight`.
+	 * @default `height`
+	 **/
+	styleProp?: "height" | "minHeight";
+}
+
+export class TextareaAutosize {
+	#options: TextareaAutosizeOptions;
+	element = $derived.by(() => extract(this.#options.element));
+	input = $derived.by(() => extract(this.#options.input));
+	styleProp = $derived.by(() => extract(this.#options.styleProp, "height"));
+
+	textareaScrollHeight = $state(1);
+	textareaOldWidth = $state(0);
+
+	constructor(options: TextareaAutosizeOptions) {
+		this.#options = options;
+
+		watch([() => this.input, () => this.element], () => {
+			tick().then(() => this.triggerResize());
+		});
+
+		watch(
+			() => this.textareaScrollHeight,
+			() => options?.onResize?.()
+		);
+
+		useResizeObserver(
+			() => this.element,
+			([entry]) => {
+				if (!entry) return;
+				const { contentRect } = entry;
+				if (this.textareaOldWidth === contentRect.width) return;
+
+				requestAnimationFrame(() => {
+					this.textareaOldWidth = contentRect.width;
+					this.triggerResize();
+				});
+			}
+		);
+	}
+
+	triggerResize = () => {
+		if (!this.element) return;
+
+		let height = "";
+
+		this.element.style[this.styleProp] = "1px";
+		this.textareaScrollHeight = this.element?.scrollHeight;
+		height = `${this.textareaScrollHeight}px`;
+
+		this.element.style[this.styleProp] = height;
+	};
+}
diff --git a/src/lib/state/models.svelte.ts b/src/lib/state/models.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..871f5d77f48bf967f3751e02defab8877f6f18d4
--- /dev/null
+++ b/src/lib/state/models.svelte.ts
@@ -0,0 +1,10 @@
+import { page } from "$app/state";
+import type { ModelWithTokenizer } from "$lib/types.js";
+
+class Models {
+	all = $derived(page.data.models as ModelWithTokenizer[]);
+	trending = $derived(this.all.toSorted((a, b) => b.trendingScore - a.trendingScore).slice(0, 5));
+	nonTrending = $derived(this.all.filter(m => !this.trending.includes(m)));
+}
+
+export const models = new Models();
diff --git a/src/lib/state/session.svelte.ts b/src/lib/state/session.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..56b8e7ab29ad3634c539f27a56ea6a9254746557
--- /dev/null
+++ b/src/lib/state/session.svelte.ts
@@ -0,0 +1,181 @@
+import { defaultGenerationConfig } from "$lib/components/inference-playground/generation-config-settings.js";
+import { createInit } from "$lib/spells/create-init.svelte.js";
+import {
+	PipelineTag,
+	type Conversation,
+	type ConversationMessage,
+	type DefaultProject,
+	type ModelWithTokenizer,
+	type Project,
+	type Session,
+} from "$lib/types.js";
+import { safeParse } from "$lib/utils/json.js";
+import typia from "typia";
+import { models } from "./models.svelte";
+
+const LOCAL_STORAGE_KEY = "hf_inference_playground_session";
+
+const startMessageUser: ConversationMessage = { role: "user", content: "" };
+const systemMessage: ConversationMessage = {
+	role: "system",
+	content: "",
+};
+
+const emptyModel: ModelWithTokenizer = {
+	_id: "",
+	inferenceProviderMapping: [],
+	pipeline_tag: PipelineTag.TextGeneration,
+	trendingScore: 0,
+	tags: ["text-generation"],
+	id: "",
+	tokenizerConfig: {},
+	config: {
+		architectures: [] as string[],
+		model_type: "",
+		tokenizer_config: {},
+	},
+};
+
+function getDefaults() {
+	const defaultModel = models.trending[0] ?? models.all[0] ?? emptyModel;
+
+	const defaultConversation: Conversation = {
+		model: defaultModel,
+		config: { ...defaultGenerationConfig },
+		messages: [{ ...startMessageUser }],
+		systemMessage,
+		streaming: true,
+	};
+
+	const defaultProject: DefaultProject = {
+		name: "Default",
+		id: "default",
+		conversations: [defaultConversation],
+	};
+
+	return { defaultProject, defaultConversation };
+}
+
+class SessionState {
+	#value = $state<Session>({} as Session);
+	// Call this only when the value is read, otherwise some values may have not
+	// been loaded yet (page.data, for example)
+	#init = createInit(() => {
+		const { defaultConversation, defaultProject } = getDefaults();
+
+		// Get saved session from localStorage if available
+		let savedSession: Session = {
+			projects: [defaultProject],
+			activeProjectId: defaultProject.id,
+		};
+
+		const savedData = localStorage.getItem(LOCAL_STORAGE_KEY);
+		if (savedData) {
+			const parsed = safeParse(savedData);
+			const res = typia.validate<Session>(parsed);
+			if (res.success) {
+				savedSession = parsed;
+			} else {
+				localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(savedSession));
+			}
+		}
+
+		// Merge query params with savedSession's default project
+		// Query params models and providers take precedence over savedSession's.
+		// In any case, we try to merge the two, and the amount of conversations
+		// is the maximum between the two.
+		const dp = savedSession.projects.find(p => p.id === "default");
+		if (typia.is<DefaultProject>(dp)) {
+			// Parse URL query parameters
+			const searchParams = new URLSearchParams(window.location.search);
+			const searchProviders = searchParams.getAll("provider");
+			const searchModelIds = searchParams.getAll("modelId");
+			const modelsFromSearch = searchModelIds.map(id => models.all.find(model => model.id === id)).filter(Boolean);
+			if (modelsFromSearch.length > 0) savedSession.activeProjectId = "default";
+
+			const max = Math.max(dp.conversations.length, modelsFromSearch.length, searchProviders.length);
+			for (let i = 0; i < max; i++) {
+				const conversation = dp.conversations[i] ?? defaultConversation;
+				dp.conversations[i] = {
+					...conversation,
+					model: modelsFromSearch[i] ?? conversation.model,
+					provider: searchProviders[i] ?? conversation.provider,
+				};
+			}
+		}
+
+		this.$ = savedSession;
+	});
+
+	constructor() {
+		$effect.root(() => {
+			$effect(() => {
+				if (!this.#init.called) return;
+				const v = $state.snapshot(this.#value);
+				try {
+					localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(v));
+				} catch (e) {
+					console.error("Failed to save session to localStorage:", e);
+				}
+			});
+		});
+	}
+
+	get $() {
+		this.#init.fn();
+		return this.#value;
+	}
+
+	set $(v: Session) {
+		this.#value = v;
+	}
+
+	#setAnySession(s: unknown) {
+		if (typia.is<Session>(s)) this.$ = s;
+	}
+
+	saveProject = (name: string) => {
+		const defaultProject = this.$.projects.find(p => p.id === "default");
+		if (!defaultProject) return;
+
+		const project: Project = {
+			...defaultProject,
+			name,
+			id: crypto.randomUUID(),
+		};
+
+		defaultProject.conversations = [getDefaults().defaultConversation];
+
+		this.$ = { ...this.$, projects: [...this.$.projects, project], activeProjectId: project.id };
+	};
+
+	deleteProject = (id: string) => {
+		// Can't delete default project!
+		if (id === "default") return;
+
+		const projects = this.$.projects.filter(p => p.id !== id);
+		if (projects.length === 0) {
+			const { defaultProject } = getDefaults();
+			this.#setAnySession({ ...this.$, projects: [defaultProject], activeProjectId: defaultProject.id });
+		}
+
+		const currProject = projects.find(p => p.id === this.$.activeProjectId);
+		this.#setAnySession({ ...this.$, projects, activeProjectId: currProject?.id ?? projects[0]?.id });
+	};
+
+	updateProject = (id: string, data: Partial<Project>) => {
+		const projects = this.$.projects.map(p => (p.id === id ? { ...p, ...data } : p));
+		this.#setAnySession({ ...this.$, projects });
+	};
+
+	get project() {
+		return this.$.projects.find(p => p.id === this.$.activeProjectId) ?? this.$.projects[0];
+	}
+
+	set project(np: Project) {
+		const projects = this.$.projects.map(p => (p.id === np.id ? np : p));
+		this.#setAnySession({ ...this.$, projects });
+	}
+}
+
+export const session = new SessionState();
diff --git a/src/lib/state/token.svelte.ts b/src/lib/state/token.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2a65b404d5d822cef445bc534e7bf43e19f7d1bd
--- /dev/null
+++ b/src/lib/state/token.svelte.ts
@@ -0,0 +1,35 @@
+import { safeParse } from "$lib/utils/json.js";
+import typia from "typia";
+
+const key = "hf_token";
+
+class Token {
+	#value = $state("");
+	writeToLocalStorage = $state(true);
+	showModal = $state(false);
+
+	constructor() {
+		const storedHfToken = localStorage.getItem(key);
+		const parsed = safeParse(storedHfToken ?? "");
+		this.value = typia.is<string>(parsed) ? parsed : "";
+	}
+
+	get value() {
+		return this.#value;
+	}
+
+	set value(token: string) {
+		if (this.writeToLocalStorage) {
+			localStorage.setItem(key, JSON.stringify(token));
+		}
+		this.#value = token;
+		this.showModal = !token.length;
+	}
+
+	reset = () => {
+		this.value = "";
+		localStorage.removeItem(key);
+	};
+}
+
+export const token = new Token();
diff --git a/src/lib/stores/models.ts b/src/lib/stores/models.ts
deleted file mode 100644
index b54ba9dc3009a5a0334afda38d62d24eb51475ec..0000000000000000000000000000000000000000
--- a/src/lib/stores/models.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { page } from "$app/stores";
-import type { ModelWithTokenizer } from "$lib/types";
-import { readable } from "svelte/store";
-
-export const models = readable<ModelWithTokenizer[]>(undefined, set => {
-	const unsub = page.subscribe($p => set($p.data?.models));
-	return unsub;
-});
diff --git a/src/lib/stores/mounted.ts b/src/lib/stores/mounted.ts
deleted file mode 100644
index 1397ad15b1703f112096cc14f4aa2006fb1af632..0000000000000000000000000000000000000000
--- a/src/lib/stores/mounted.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { onMount } from "svelte";
-import { readonly, writable } from "svelte/store";
-
-export function isMounted() {
-	const store = writable(false);
-	onMount(() => store.set(true));
-
-	return readonly(store);
-}
diff --git a/src/lib/stores/session.ts b/src/lib/stores/session.ts
deleted file mode 100644
index 9e817e196b147c73b5fc09cd8f2f2d6afee95ad6..0000000000000000000000000000000000000000
--- a/src/lib/stores/session.ts
+++ /dev/null
@@ -1,214 +0,0 @@
-import { defaultGenerationConfig } from "$lib/components/InferencePlayground/generationConfigSettings";
-import { models } from "$lib/stores/models";
-import {
-	PipelineTag,
-	type Conversation,
-	type ConversationMessage,
-	type DefaultProject,
-	type ModelWithTokenizer,
-	type Project,
-	type Session,
-} from "$lib/types";
-import { safeParse } from "$lib/utils/json";
-import { getTrending } from "$lib/utils/model";
-import { get, writable } from "svelte/store";
-import typia from "typia";
-
-const LOCAL_STORAGE_KEY = "hf_inference_playground_session";
-
-const startMessageUser: ConversationMessage = { role: "user", content: "" };
-const systemMessage: ConversationMessage = {
-	role: "system",
-	content: "",
-};
-
-const emptyModel: ModelWithTokenizer = {
-	_id: "",
-	inferenceProviderMapping: [],
-	pipeline_tag: PipelineTag.TextGeneration,
-	trendingScore: 0,
-	tags: ["text-generation"],
-	id: "",
-	tokenizerConfig: {},
-	config: {
-		architectures: [] as string[],
-		model_type: "",
-		tokenizer_config: {},
-	},
-};
-
-function getDefaults() {
-	const $models = get(models);
-	const featured = getTrending($models);
-	const defaultModel = featured[0] ?? $models[0] ?? emptyModel;
-
-	const defaultConversation: Conversation = {
-		model: defaultModel,
-		config: { ...defaultGenerationConfig },
-		messages: [{ ...startMessageUser }],
-		systemMessage,
-		streaming: true,
-	};
-
-	const defaultProject: DefaultProject = {
-		name: "Default",
-		id: "default",
-		conversations: [defaultConversation],
-	};
-
-	return { defaultProject, defaultConversation };
-}
-
-function createSessionStore() {
-	const store = writable<Session>(undefined, set => {
-		const { defaultConversation, defaultProject } = getDefaults();
-
-		// Get saved session from localStorage if available
-		let savedSession: Session = {
-			projects: [defaultProject],
-			activeProjectId: defaultProject.id,
-		};
-
-		const savedData = localStorage.getItem(LOCAL_STORAGE_KEY);
-		if (savedData) {
-			const parsed = safeParse(savedData);
-			const res = typia.validate<Session>(parsed);
-			if (res.success) {
-				savedSession = parsed;
-			} else {
-				localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(savedSession));
-			}
-		}
-
-		// Merge query params with savedSession's default project
-		// Query params models and providers take precedence over savedSession's.
-		// In any case, we try to merge the two, and the amount of conversations
-		// is the maximum between the two.
-		const dp = savedSession.projects.find(p => p.id === "default");
-		if (typia.is<DefaultProject>(dp)) {
-			const $models = get(models);
-			// Parse URL query parameters
-			const searchParams = new URLSearchParams(window.location.search);
-			const searchProviders = searchParams.getAll("provider");
-			const searchModelIds = searchParams.getAll("modelId");
-			const modelsFromSearch = searchModelIds.map(id => $models.find(model => model.id === id)).filter(Boolean);
-			if (modelsFromSearch.length > 0) savedSession.activeProjectId = "default";
-
-			const max = Math.max(dp.conversations.length, modelsFromSearch.length, searchProviders.length);
-			for (let i = 0; i < max; i++) {
-				const conversation = dp.conversations[i] ?? defaultConversation;
-				dp.conversations[i] = {
-					...conversation,
-					model: modelsFromSearch[i] ?? conversation.model,
-					provider: searchProviders[i] ?? conversation.provider,
-				};
-			}
-		}
-
-		set(savedSession);
-	});
-
-	// Override update method to sync with localStorage and URL params
-	const update: typeof store.update = cb => {
-		store.update($s => {
-			const s = cb($s);
-
-			try {
-				localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(s));
-			} catch (e) {
-				console.error("Failed to save session to localStorage:", e);
-			}
-
-			return s;
-		});
-	};
-
-	const set: typeof store.set = (...args) => {
-		update(_ => args[0]);
-	};
-
-	// Add a method to clear localStorage
-	function clearSavedSession() {
-		localStorage.removeItem(LOCAL_STORAGE_KEY);
-	}
-
-	/**
-	 * Saves a new project with the data inside the default project
-	 */
-	function saveProject(name: string) {
-		update(s => {
-			const defaultProject = s.projects.find(p => p.id === "default");
-			if (!defaultProject) return s;
-
-			const project: Project = {
-				...defaultProject,
-				name,
-				id: crypto.randomUUID(),
-			};
-
-			defaultProject.conversations = [getDefaults().defaultConversation];
-
-			return { ...s, projects: [...s.projects, project], activeProjectId: project.id };
-		});
-	}
-
-	function deleteProject(id: string) {
-		// Can't delete default project!
-		if (id === "default") return;
-
-		update(s => {
-			const projects = s.projects.filter(p => p.id !== id);
-			if (projects.length === 0) {
-				const { defaultProject } = getDefaults();
-				const newSession = { ...s, projects: [defaultProject], activeProjectId: defaultProject.id };
-				return typia.is<Session>(newSession) ? newSession : s;
-			}
-
-			const currProject = projects.find(p => p.id === s.activeProjectId);
-			const newSession = { ...s, projects, activeProjectId: currProject?.id ?? projects[0]?.id };
-			return typia.is<Session>(newSession) ? newSession : s;
-		});
-	}
-
-	function updateProject(id: string, data: Partial<Project>) {
-		update(s => {
-			const projects = s.projects.map(p => (p.id === id ? { ...p, ...data } : p));
-			const newSession = { ...s, projects };
-			return typia.is<Session>(newSession) ? newSession : s;
-		});
-	}
-
-	return { ...store, set, update, clearSavedSession, deleteProject, saveProject, updateProject };
-}
-
-export const session = createSessionStore();
-
-export function getActiveProject(s: Session) {
-	return s.projects.find(p => p.id === s.activeProjectId) ?? s.projects[0];
-}
-
-function createProjectStore() {
-	const store = writable<Project>(undefined, set => {
-		return session.subscribe(s => {
-			set(getActiveProject(s));
-		});
-	});
-
-	const update: (typeof store)["update"] = cb => {
-		session.update(s => {
-			const project = getActiveProject(s);
-			const newProject = cb(project);
-			const projects = s.projects.map(p => (p.id === project.id ? newProject : p));
-			const newSession = { ...s, projects };
-			return typia.is<Session>(newSession) ? newSession : s;
-		});
-	};
-
-	const set: typeof store.set = (...args) => {
-		update(_ => args[0]);
-	};
-
-	return { ...store, update, set };
-}
-
-export const project = createProjectStore();
diff --git a/src/lib/stores/token.ts b/src/lib/stores/token.ts
deleted file mode 100644
index 3aa25294b72fa3e97635519e4e0baef0ba4a4aa4..0000000000000000000000000000000000000000
--- a/src/lib/stores/token.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { writable } from "svelte/store";
-
-const key = "hf_token";
-
-function createTokenStore() {
-	const store = writable({ value: "", writeToLocalStorage: true, showModal: false });
-
-	function setValue(token: string) {
-		store.update(s => {
-			if (s.writeToLocalStorage) localStorage.setItem(key, JSON.stringify(token));
-			return { ...s, value: token, showModal: !token.length };
-		});
-	}
-
-	const storedHfToken = localStorage.getItem(key);
-	if (storedHfToken !== null) {
-		setValue(JSON.parse(storedHfToken));
-	}
-
-	return {
-		...store,
-		setValue,
-		reset() {
-			setValue("");
-			localStorage.removeItem(key);
-			store.update(s => ({ ...s, showModal: true }));
-		},
-	};
-}
-
-export const token = createTokenStore();
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 7bafb7d27dcfb063f8a7cda9a46264135a2f548c..491ddc7d2fcb2b533a947e6046494292129a600e 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -1,7 +1,9 @@
-import type { GenerationConfig } from "$lib/components/InferencePlayground/generationConfigSettings";
+import type { GenerationConfig } from "$lib/components/inference-playground/generation-config-settings.js";
 import type { ChatCompletionInputMessage } from "@huggingface/tasks";
 
-export type ConversationMessage = Omit<ChatCompletionInputMessage, "content"> & { content?: string };
+export type ConversationMessage = Pick<ChatCompletionInputMessage, "name" | "role" | "tool_calls"> & {
+	content?: string;
+};
 
 export type Conversation = {
 	model: ModelWithTokenizer;
@@ -13,7 +15,7 @@ export type Conversation = {
 };
 
 export type Project = {
-	conversations: [Conversation] | [Conversation, Conversation];
+	conversations: Conversation[];
 	id: string;
 	name: string;
 };
@@ -168,3 +170,7 @@ export enum LibraryName {
 export enum PipelineTag {
 	TextGeneration = "text-generation",
 }
+
+export type MaybeGetter<T> = T | (() => T);
+
+export type ValueOf<T> = T[keyof T];
diff --git a/src/lib/utils/compare.ts b/src/lib/utils/compare.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dd63b6c5a4bc31d51c5002c3cef4d6aac1fe865c
--- /dev/null
+++ b/src/lib/utils/compare.ts
@@ -0,0 +1,3 @@
+export function compareStr(a: string, b: string) {
+	return a.toLowerCase().localeCompare(b.toLowerCase());
+}
diff --git a/src/lib/utils/effect.ts b/src/lib/utils/effect.ts
deleted file mode 100644
index 07f73783e41abf82f909401d40f1c8fe8f145af9..0000000000000000000000000000000000000000
--- a/src/lib/utils/effect.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import type { Stores, StoresValues } from "svelte/store";
-import { derived } from "svelte/store";
-import { safeOnDestroy } from "./lifecycle";
-import { noop } from "./noop";
-
-type EffectOptions = {
-	/**
-	 * Whether to skip the first run
-	 * @default undefined
-	 */
-	skipFirstRun?: boolean;
-};
-
-/**
- * A utility function that creates an effect from a set of stores and a function.
- * The effect is automatically cleaned up when the component is destroyed.
- *
- * @template S - The type of the stores object
- * @param stores - The stores object to derive from
- * @param fn - The function to run when the stores change
- * @param opts {@link EffectOptions}
- * @returns A function that can be used to unsubscribe the effect
- */
-export function effect<S extends Stores>(
-	stores: S,
-	fn: (values: StoresValues<S>) => (() => void) | void,
-	opts: EffectOptions = {}
-): () => void {
-	const { skipFirstRun } = opts;
-	let isFirstRun = true;
-	let cb: (() => void) | void = undefined;
-
-	// Create a derived store that contains the stores object and an onUnsubscribe function
-	const destroy = derived(stores, stores => {
-		cb?.();
-		if (isFirstRun && skipFirstRun) {
-			isFirstRun = false;
-		} else {
-			cb = fn(stores);
-		}
-	}).subscribe(noop);
-
-	const unsub = () => {
-		destroy();
-		cb?.();
-	};
-
-	// Automatically unsubscribe the effect when the component is destroyed
-	safeOnDestroy(unsub);
-	return unsub;
-}
diff --git a/src/lib/utils/is.ts b/src/lib/utils/is.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e87dcb181bcfea70cbaac8176360133a70b17282
--- /dev/null
+++ b/src/lib/utils/is.ts
@@ -0,0 +1,37 @@
+import { SvelteSet } from "svelte/reactivity";
+
+export function isHtmlElement(element: unknown): element is HTMLElement {
+	return element instanceof HTMLElement;
+}
+
+export function isFunction(value: unknown): value is (...args: unknown[]) => unknown {
+	return typeof value === "function";
+}
+
+export function isSvelteSet(value: unknown): value is SvelteSet<unknown> {
+	return value instanceof SvelteSet;
+}
+
+export function isIterable(value: unknown): value is Iterable<unknown> {
+	return value !== null && typeof value === "object" && Symbol.iterator in value;
+}
+
+export function isObject(value: unknown): value is Record<PropertyKey, unknown> {
+	return value !== null && typeof value === "object";
+}
+
+export function isHtmlInputElement(element: unknown): element is HTMLInputElement {
+	return element instanceof HTMLInputElement;
+}
+
+export function isString(value: unknown): value is string {
+	return typeof value === "string";
+}
+
+export function isTouch(event: PointerEvent): boolean {
+	return event.pointerType === "touch";
+}
+
+export function isPromise(value: unknown): value is Promise<unknown> {
+	return value instanceof Promise;
+}
diff --git a/src/lib/utils/model.ts b/src/lib/utils/model.ts
deleted file mode 100644
index cc5afb3c972a501d5573d004f18314418d16233e..0000000000000000000000000000000000000000
--- a/src/lib/utils/model.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type { ModelWithTokenizer } from "$lib/types";
-
-export function getTrending(models: ModelWithTokenizer[], limit = 5) {
-	return models.toSorted((a, b) => b.trendingScore - a.trendingScore).slice(0, limit);
-}
diff --git a/src/lib/utils/object.ts b/src/lib/utils/object.ts
index 473e9d304453a98fbccb315b7e7d8ff54fef419e..4b1b8bbb9f5d437d3e9b68c398c4ad7733aece2e 100644
--- a/src/lib/utils/object.ts
+++ b/src/lib/utils/object.ts
@@ -1,3 +1,5 @@
+import type { ValueOf } from "$lib/types.js";
+
 // typed Object.keys
 export function keys<T extends object>(o: T): (keyof T)[] {
 	return Object.keys(o) as (keyof T)[];
@@ -12,3 +14,21 @@ export function entries<T extends object>(o: T): [keyof T, T[keyof T]][] {
 export function fromEntries<T extends object>(entries: [keyof T, T[keyof T]][]): T {
 	return Object.fromEntries(entries) as T;
 }
+
+export function omit<T extends Record<string, unknown>, K extends keyof T>(obj: T, ...keys: K[]): Omit<T, K> {
+	const result = {} as Omit<T, K>;
+	for (const key of Object.keys(obj)) {
+		if (!keys.includes(key as unknown as K)) {
+			result[key as keyof Omit<T, K>] = obj[key] as ValueOf<Omit<T, K>>;
+		}
+	}
+	return result;
+}
+
+export function pick<T extends Record<string, unknown>, K extends keyof T>(obj: T, ...keys: K[]): Pick<T, K> {
+	const result = {} as Pick<T, K>;
+	for (const key of keys) {
+		result[key] = obj[key] as ValueOf<Pick<T, K>>;
+	}
+	return result;
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7f04046f835681ee711b915c3192c9f552fbd925..69bc84f136e8d3eb052bf3987574650fd25d1b41 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,9 +1,16 @@
 <script lang="ts">
+	import DebugMenu from "$lib/components/debug-menu.svelte";
+	import Prompts from "$lib/components/prompts.svelte";
+	import QuotaModal from "$lib/components/quota-modal.svelte";
 	import "../app.css";
-	import DebugMenu from "$lib/components/DebugMenu.svelte";
-	import Prompts from "$lib/components/Prompts.svelte";
+	interface Props {
+		children?: import("svelte").Snippet;
+	}
+
+	let { children }: Props = $props();
 </script>
 
-<slot />
+{@render children?.()}
 <DebugMenu />
 <Prompts />
+<QuotaModal />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1a161da1e4681f3883c5e27630ee72d713ddb5cc..12c196ae22a1747a82af8492dda16077fea8b2d4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import InferencePlayground from "$lib/components/InferencePlayground/InferencePlayground.svelte";
+	import Playground from "$lib/components/inference-playground/playground.svelte";
 </script>
 
-<InferencePlayground />
+<Playground />
diff --git a/src/routes/+page.ts b/src/routes/+page.ts
index e020aef06a32e13a27b98f6fe671c4aa5ee1d949..1a3699507bb6351ab24967acf7bf70d027a96d12 100644
--- a/src/routes/+page.ts
+++ b/src/routes/+page.ts
@@ -1,5 +1,5 @@
-import type { ModelWithTokenizer } from "$lib/types";
-import type { PageLoad } from "./$types";
+import type { ModelWithTokenizer } from "$lib/types.js";
+import type { PageLoad } from "./$types.js";
 
 export const load: PageLoad = async ({ fetch }) => {
 	const res = await fetch("/api/models");
diff --git a/src/routes/api/models/+server.ts b/src/routes/api/models/+server.ts
index 4f06f8b82822d63b21cf37e8bb8a277f5307a149..e59d6dc1955724c1284029b4757a4119ecc84152 100644
--- a/src/routes/api/models/+server.ts
+++ b/src/routes/api/models/+server.ts
@@ -1,6 +1,6 @@
-import type { Model, ModelWithTokenizer } from "$lib/types";
+import type { Model, ModelWithTokenizer } from "$lib/types.js";
 import { json } from "@sveltejs/kit";
-import type { RequestHandler } from "./$types";
+import type { RequestHandler } from "./$types.js";
 import { dev } from "$app/environment";
 
 let cache: ModelWithTokenizer[] | undefined;
diff --git a/tsconfig.json b/tsconfig.json
index 3139d5d688d18b6617efe39bc44cec7b11ac5679..1904e0d3b466e1993443c9a1f70e2411144eff39 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,7 +9,6 @@
 		"skipLibCheck": true,
 		"sourceMap": true,
 		"strict": true,
-		"target": "ES2018",
 		"noUncheckedIndexedAccess": true,
 		"plugins": [
 			{