Spaces:

huggingface
/

inf-playground-canvas

Runtime error

App Files Files Community

Thomas G. Lopes commited on Mar 20

Commit

0862379

unverified ·

2 Parent(s): 2f8477e e24c536

Error handling (#64)

Browse files

This view is limited to 50 files because it contains too many changes. See raw diff

Files changed (50) hide show

.eslintignore +0 -13
.eslintrc.cjs +0 -41
eslint-rules/enforce-extensions.js +171 -0
eslint.config.mts +99 -0
package.json +25 -18
pnpm-lock.yaml +569 -718
src/lib/actions/autofocus.ts +7 -0
src/lib/components/DebugMenu.svelte +0 -81
src/lib/components/InferencePlayground/InferencePlaygroundModelSelectorModal.svelte +0 -175
src/lib/components/{Avatar.svelte → avatar.svelte} +7 -3
src/lib/components/debug-menu.svelte +123 -0
src/lib/components/{Icons/IconProvider.svelte → icon-provider.svelte} +8 -5
src/lib/components/{InferencePlayground/InferencePlaygroundCodeSnippets.svelte → inference-playground/code-snippets.svelte} +57 -55
src/lib/components/{InferencePlayground/InferencePlaygroundConversationHeader.svelte → inference-playground/conversation-header.svelte} +19 -19
src/lib/components/{InferencePlayground/InferencePlaygroundConversation.svelte → inference-playground/conversation.svelte} +32 -47
src/lib/components/{InferencePlayground/generationConfigSettings.ts → inference-playground/generation-config-settings.ts} +0 -0
src/lib/components/{InferencePlayground/InferencePlaygroundGenerationConfig.svelte → inference-playground/generation-config.svelte} +13 -7
src/lib/components/{InferencePlayground/InferencePlaygroundHFTokenModal.svelte → inference-playground/hf-token-modal.svelte} +16 -9
src/lib/components/{InferencePlayground/InferencePlaygroundMessage.svelte → inference-playground/message.svelte} +25 -18
src/lib/components/inference-playground/model-selector-modal.svelte +165 -0
src/lib/components/{InferencePlayground/InferencePlaygroundModelSelector.svelte → inference-playground/model-selector.svelte} +18 -18
src/lib/components/{InferencePlayground/InferencePlayground.svelte → inference-playground/playground.svelte} +134 -137
src/lib/components/{InferencePlayground/InferencePlaygroundProjectSelect.svelte → inference-playground/project-select.svelte} +28 -27
src/lib/components/{InferencePlayground/InferencePlaygroundProviderSelect.svelte → inference-playground/provider-select.svelte} +26 -23
src/lib/components/{InferencePlayground/inferencePlaygroundUtils.ts → inference-playground/utils.ts} +1 -2
src/lib/components/label-pro.svelte +23 -0
src/lib/components/{Prompts.svelte → prompts.svelte} +22 -24
src/lib/components/quota-modal.svelte +106 -0
src/lib/components/toaster.svelte +171 -0
src/lib/components/toaster.svelte.ts +39 -0
src/lib/spells/README.md +3 -0
src/lib/spells/abort-manager.svelte.ts +34 -0
src/lib/spells/create-init.svelte.ts +14 -0
src/lib/spells/extract.svelte.ts +21 -0
src/lib/spells/textarea-autosize.svelte.ts +67 -0
src/lib/state/models.svelte.ts +10 -0
src/lib/{stores/session.ts → state/session.svelte.ts} +66 -99
src/lib/state/token.svelte.ts +35 -0
src/lib/stores/models.ts +0 -8
src/lib/stores/mounted.ts +0 -9
src/lib/stores/token.ts +0 -31
src/lib/types.ts +9 -3
src/lib/utils/compare.ts +3 -0
src/lib/utils/effect.ts +0 -51
src/lib/utils/is.ts +37 -0
src/lib/utils/model.ts +0 -5
src/lib/utils/object.ts +20 -0
src/routes/+layout.svelte +10 -3
src/routes/+page.svelte +2 -2
src/routes/+page.ts +2 -2

.eslintignore DELETED Viewed

@@ -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

.eslintrc.cjs DELETED Viewed

@@ -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,
-	},
-};

eslint-rules/enforce-extensions.js ADDED Viewed

	@@ -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;
+						},
+					});
+				}
+			},
+		};
+	},
+};

eslint.config.mts ADDED Viewed

	@@ -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,
+			},
+		},
+	}
+);

package.json CHANGED Viewed

@@ -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 ."
 	},
 	"devDependencies": {
 		"@iconify-json/carbon": "^1.2.8",
 		"@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",
 		"@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",
 		"highlight.js": "^11.10.0",
 		"postcss": "^8.4.38",
 		"prettier": "^3.1.1",
-		"prettier-plugin-svelte": "^3.1.2",
 		"prettier-plugin-tailwindcss": "^0.6.11",
-		"svelte": "^4.2.7",
-		"svelte-check": "^3.6.0",
 		"tailwind-merge": "^3.0.2",
 		"tailwindcss": "^4.0.9",
 		"ts-patch": "^3.3.0",
 		"tslib": "^2.4.1",
 		"typescript": "^5.8.2",
 		"unplugin-icons": "^22.1.0",
-		"vite": "^5.0.3"
 	},
 	"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",
 		"typia": "^8.0.0"
 	}
 }

 		"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 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.5.27",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@tailwindcss/container-queries": "^0.1.1",
 		"@tailwindcss/postcss": "^4.0.9",
 		"clsx": "^2.1.1",
+		"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.2.6",
 		"prettier-plugin-tailwindcss": "^0.6.11",
+		"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.4.4"
 	},
 	"type": "module",
 	"dependencies": {
+		"eslint-plugin-svelte": "^3.3.1",
 		"typia": "^8.0.0"
 	}
 }

pnpm-lock.yaml CHANGED Viewed

@@ -8,6 +8,19 @@ importers:
   .:
     dependencies:
       '@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
       '@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)))
       '@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)))
       '@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))
       '@sveltejs/vite-plugin-svelte':
-        specifier: ^3.0.0
-        version: 3.1.2(svelte@4.2.19)(vite@5.4.14(lightningcss@1.29.1))
       '@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
       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)
       highlight.js:
         specifier: ^11.10.0
         version: 11.11.1
       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)
       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)
       svelte:
-        specifier: ^4.2.7
-        version: 4.2.19
       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)
       tailwind-merge:
         specifier: ^3.0.2
         version: 3.0.2
@@ -105,11 +120,14 @@ importers:
       typescript:
         specifier: ^5.8.2
         version: 5.8.2
       unplugin-icons:
         specifier: ^22.1.0
-        version: 22.1.0(svelte@4.2.19)
       vite:
-        specifier: ^5.0.3
         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/js@8.57.1':
-    resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.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
   '@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
   '@iconify-json/carbon@1.2.8':
     resolution: {integrity: sha512-6xh4YiFBz6qoSnB3XMe23WvjTJroDFXB17J1MbiT7nATFe+70+em1acRXr8hgP/gYpwFMHFc4IvjA/IPTPnTzg==}
   '@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==}
   '@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'}
   '@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==}
   '@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}
     peerDependencies:
-      '@sveltejs/vite-plugin-svelte': ^3.0.0
-      svelte: ^4.0.0 || ^5.0.0-next.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}
     peerDependencies:
-      svelte: ^4.0.0 || ^5.0.0-next.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}
     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@6.21.0':
-    resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-  '@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/type-utils@6.21.0':
-    resolution: {integrity: sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==}
-    engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-  '@typescript-eslint/types@6.21.0':
-    resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-  '@typescript-eslint/typescript-estree@6.21.0':
-    resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-  '@typescript-eslint/utils@6.21.0':
-    resolution: {integrity: sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==}
-    engines: {node: ^16.0.0 || >=18.0.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}
-  '@ungap/structured-clone@1.3.0':
-    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
   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'}
   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'}
   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'}
   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'}
   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==}
     engines: {node: '>=12'}
     peerDependencies:
       eslint: '>=6.0.0'
-  eslint-config-prettier@8.10.0:
-    resolution: {integrity: sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==}
     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}
     peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0-0 || ^9.0.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-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.
     hasBin: 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}
   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'}
   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-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}
   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}
   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@15.15.0:
     resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
     engines: {node: '>=18'}
-  globby@11.1.0:
-    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
-    engines: {node: '>=10'}
   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'}
   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==}
   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==}
     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'}
     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-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==}
     engines: {node: '>=4'}
   postcss@8.5.3:
@@ -1737,6 +1720,10 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.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
   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'}
   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'}
   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==}
   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==}
     hasBin: true
     peerDependencies:
-      svelte: ^3.55.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0
-  svelte-eslint-parser@0.43.0:
-    resolution: {integrity: sha512-GpU52uPKKcVnh8tKN5P4UZpJ/fUDndmq7wfsvoVXsyP+aY0anol7Yqo01fyrlaWGMFfm4av5DyrjlaXdLRJvGA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.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'}
-  tabbable@6.2.0:
-    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
   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'}
     peerDependencies:
-      typescript: '>=4.2.0'
   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@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==}
     peerDependencies:
-      vite: ^3.0.0 || ^4.0.0 || ^5.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'}
 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)':
     dependencies:
-      eslint: 8.57.1
       eslint-visitor-keys: 3.4.3
   '@eslint-community/regexpp@4.12.1': {}
-  '@eslint/eslintrc@2.1.4':
     dependencies:
       ajv: 6.12.6
       debug: 4.4.0
-      espree: 9.6.1
-      globals: 13.24.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': {}
   '@floating-ui/core@1.6.9':
     dependencies:
@@ -2468,22 +2428,27 @@ snapshots:
   '@huggingface/tasks@0.17.1': {}
-  '@humanwhocodes/config-array@0.13.0':
     dependencies:
-      '@humanwhocodes/object-schema': 2.0.3
-      debug: 4.4.0
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
   '@humanwhocodes/module-importer@1.0.1': {}
-  '@humanwhocodes/object-schema@2.0.3': {}
   '@iconify-json/carbon@1.2.8':
     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':
     dependencies:
-      '@swc/helpers': 0.5.15
   '@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
   '@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)))':
     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))
       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)))':
     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))
       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))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.19)(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
       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))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.19)(vite@5.4.14(lightningcss@1.29.1))
       debug: 4.4.0
-      svelte: 4.2.19
       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))':
     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))
       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)
       vite: 5.4.14(lightningcss@1.29.1)
-      vitefu: 0.2.5(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)':
     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
       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:
       typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
-  '@typescript-eslint/parser@6.21.0(eslint@8.57.1)(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
       debug: 4.4.0
-      eslint: 8.57.1
-    optionalDependencies:
       typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
-  '@typescript-eslint/scope-manager@6.21.0':
     dependencies:
-      '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/visitor-keys': 6.21.0
-  '@typescript-eslint/type-utils@6.21.0(eslint@8.57.1)(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)
       debug: 4.4.0
-      eslint: 8.57.1
-      ts-api-utils: 1.4.3(typescript@5.8.2)
-    optionalDependencies:
       typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
-  '@typescript-eslint/types@6.21.0': {}
-  '@typescript-eslint/typescript-estree@6.21.0(typescript@5.8.2)':
     dependencies:
-      '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/visitor-keys': 6.21.0
       debug: 4.4.0
-      globby: 11.1.0
       is-glob: 4.0.3
-      minimatch: 9.0.3
       semver: 7.7.1
-      ts-api-utils: 1.4.3(typescript@5.8.2)
-    optionalDependencies:
       typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
-  '@typescript-eslint/utils@6.21.0(eslint@8.57.1)(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
     transitivePeerDependencies:
       - supports-color
-      - typescript
-  '@typescript-eslint/visitor-keys@6.21.0':
     dependencies:
-      '@typescript-eslint/types': 6.21.0
-      eslint-visitor-keys: 3.4.3
-  '@ungap/structured-clone@1.3.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
   argparse@2.0.1: {}
@@ -2926,7 +2866,7 @@ snapshots:
   array-timsort@1.0.3: {}
-  array-union@2.1.0: {}
   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:
     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
   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
   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):
     dependencies:
-      eslint: 8.57.1
       semver: 7.7.1
-  eslint-config-prettier@8.10.0(eslint@8.57.1):
     dependencies:
-      eslint: 8.57.1
-  eslint-plugin-svelte@2.46.1(eslint@8.57.1)(svelte@4.2.19):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1)
       '@jridgewell/sourcemap-codec': 1.5.0
-      eslint: 8.57.1
-      eslint-compat-utils: 0.5.1(eslint@8.57.1)
       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
       semver: 7.7.1
-      svelte-eslint-parser: 0.43.0(svelte@4.2.19)
     optionalDependencies:
-      svelte: 4.2.19
     transitivePeerDependencies:
       - ts-node
-  eslint-scope@7.2.2:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 5.3.0
   eslint-visitor-keys@3.4.3: {}
-  eslint@8.57.1:
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1)
       '@eslint-community/regexpp': 4.12.1
-      '@eslint/eslintrc': 2.1.4
-      '@eslint/js': 8.57.1
-      '@humanwhocodes/config-array': 0.13.0
       '@humanwhocodes/module-importer': 1.0.1
-      '@nodelib/fs.walk': 1.2.8
-      '@ungap/structured-clone': 1.3.0
       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
       esquery: 1.6.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
-      file-entry-cache: 6.0.1
       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
     transitivePeerDependencies:
       - supports-color
   esm-env@1.2.2: {}
-  espree@9.6.1:
     dependencies:
       acorn: 8.14.0
       acorn-jsx: 5.3.2(acorn@8.14.0)
-      eslint-visitor-keys: 3.4.3
   esprima@4.0.1: {}
@@ -3241,6 +3153,10 @@ snapshots:
     dependencies:
       estraverse: 5.3.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-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:
     dependencies:
-      flat-cache: 3.2.0
   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:
     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@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
   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: {}
   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: {}
   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:
     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):
     dependencies:
       postcss: 8.5.3
@@ -3745,7 +3619,7 @@ snapshots:
     dependencies:
       postcss: 8.5.3
-  postcss-selector-parser@6.1.2:
     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):
     dependencies:
       prettier: 3.5.3
-      svelte: 4.2.19
-  prettier-plugin-tailwindcss@0.6.11(prettier-plugin-svelte@3.3.3(prettier@3.5.3)(svelte@4.2.19))(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@3.5.3: {}
   punycode@2.3.1: {}
   quansync@0.2.8: {}
@@ -3782,15 +3666,15 @@ snapshots:
       drange: 1.1.1
       ret: 0.2.2
   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
   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
   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):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
-      chokidar: 3.6.0
       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)
       typescript: 5.8.2
     transitivePeerDependencies:
-      - '@babel/core'
-      - coffeescript
-      - less
-      - postcss
-      - postcss-load-config
-      - pug
-      - sass
-      - stylus
-      - sugarss
-  svelte-eslint-parser@0.43.0(svelte@4.2.19):
     dependencies:
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
       postcss: 8.5.3
       postcss-scss: 4.0.9(postcss@8.5.3)
     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@4.2.19:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.5.0
-      '@jridgewell/trace-mapping': 0.3.25
       '@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
       is-reference: 3.0.3
       locate-character: 3.0.0
       magic-string: 0.30.17
-      periscopic: 3.1.0
-  tabbable@6.2.0: {}
   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):
     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@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):
     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
     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)):
     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: {}

   .:
     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
       '@huggingface/tasks':
         specifier: ^0.17.1
         version: 0.17.1
       '@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)
         version: 3.0.0
       '@sveltejs/adapter-auto':
         specifier: ^3.2.2
+        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@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.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: ^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
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
       eslint:
+        specifier: ^9.22.0
+        version: 9.22.0(jiti@2.4.2)
       eslint-config-prettier:
+        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
         specifier: ^3.1.1
         version: 3.5.3
       prettier-plugin-svelte:
+        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@5.23.0))(prettier@3.5.3)
+      runed:
+        specifier: ^0.24.0
+        version: 0.24.0(svelte@5.23.0)
       svelte:
+        specifier: ^5.20.4
+        version: 5.23.0
       svelte-check:
+        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
       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@5.23.0)
       vite:
+        specifier: ^5.4.4
         version: 5.4.14(lightningcss@1.29.1)
 packages:
     resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
     engines: {node: ^12.0.0 || ^14.0.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/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==}
   '@huggingface/tasks@0.17.1':
     resolution: {integrity: sha512-kN5F/pzwxtmdZ0jORumNyegNKOX/ciU5G/DMZcqK3SJShod4C6yfvBRCMn5sEDzanxtU8VjX+7TaInQFmmU8Nw==}
+  '@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/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==}
+  '@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==}
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
     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==}
   '@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:
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: ^5.0.3 || ^6.0.0
+  '@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': ^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@4.0.4':
+    resolution: {integrity: sha512-0ba1RQ/PHen5FGpdSrW7Y3fAMQjrXantECALeOiOdBdzR5+5vPP6HVZRLmZaQL+W8m++o+haIAKq5qT+MiZ7VA==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22}
     peerDependencies:
+      svelte: ^5.0.0-next.96 || ^5.0.0
       vite: ^5.0.0
   '@tailwindcss/container-queries@0.1.1':
     resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==}
     peerDependencies:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
+  '@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': ^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@8.26.1':
+    resolution: {integrity: sha512-w6HZUV4NWxqd8BdeFf81t07d7/YV9s7TCWrQQbG5uhuvGUAW+fq1usZ1Hmz9UPNLniFnD8GLSsDpjP0hm1S4lQ==}
+    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-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@8.26.1':
+    resolution: {integrity: sha512-Kcj/TagJLwoY/5w9JGEFV0dclQdyqw9+VMndxOJKtoFSjfZhLXhYjzsQEeyza03rwHx2vFEGvrJWJBXKleRvZg==}
+    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-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@8.26.1':
+    resolution: {integrity: sha512-yUwPpUHDgdrv1QJ7YQal3cMVBGWfnuCdKbXw1yyjArax3353rEJP1ZA+4F8nOlQ3RfS2hUN/wze3nlY+ZOhvoA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
+      typescript: '>=4.8.4 <5.9.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: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
+  '@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==}
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     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==}
   array-timsort@1.0.3:
     resolution: {integrity: sha512-/+3GRL7dDAGEfM6TseQk/U+mi18TU2Ms9I3UlLdUMhz2hbvGNTKdj9xniwXfUqgYhHxRx0+8UnKkvlNwVU+cWQ==}
+  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==}
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
   bl@4.1.0:
     resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
   buffer@5.7.1:
     resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
   chardet@0.7.0:
     resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
+  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==}
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
   cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
   defu@6.1.4:
     resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
   detect-libc@1.0.3:
     resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
     engines: {node: '>=0.10'}
   diff-match-patch@1.0.5:
     resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==}
+  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==}
     resolution: {integrity: sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==}
     engines: {node: '>=10.13.0'}
   esbuild@0.21.5:
     resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
     engines: {node: '>=12'}
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
+  eslint-compat-utils@0.6.4:
+    resolution: {integrity: sha512-/u+GQt8NMfXO8w17QendT4gvO5acfxQsAKirAt0LVxDnr2N8YLCVbregaNc/Yhp7NM128DwCaRvr8PLDfeNkQw==}
     engines: {node: '>=12'}
     peerDependencies:
       eslint: '>=6.0.0'
+  eslint-config-prettier@10.1.1:
+    resolution: {integrity: sha512-4EQQr6wXwS+ZJSzaR5ZCrYgLxqvUjdXctaEtBqHcbkW944B1NQyO4qpdHQbXBONfwxXdkAY81HH4+LUfrg+zPw==}
     hasBin: true
     peerDependencies:
       eslint: '>=7.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: ^8.57.1 || ^9.0.0
       svelte: ^3.37.0 || ^4.0.0 || ^5.0.0
     peerDependenciesMeta:
       svelte:
         optional: true
+  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-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@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==}
     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'}
   estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
   esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
   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'}
     resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
     engines: {node: '>=8'}
+  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==}
     resolution: {integrity: sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.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==}
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
   global-prefix@4.0.0:
     resolution: {integrity: sha512-w0Uf9Y9/nyHinEk5vMJKRie+wa4kR5hmDbEhGGds/kG1PwGLLHKRoNMeJOyCQjjBkANlnScqgzcFwGHgmgLkVA==}
     engines: {node: '>=16'}
+  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'}
+  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==}
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
     resolution: {integrity: sha512-M1WuAmb7pn9zdFRtQYk26ZBoY043Sse0wVDdk4Bppr+JOXyQYybdtvK+l9wUibhtjdjvtoiNy8tk+EgsYIUqKg==}
     engines: {node: '>=12.0.0'}
   is-core-module@2.16.1:
     resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
     engines: {node: '>= 0.4'}
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
   is-reference@1.2.1:
     resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
     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
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
   local-pkg@1.1.1:
     resolution: {integrity: sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==}
     engines: {node: '>=14'}
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
+  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==}
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+  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==}
   mlly@1.7.4:
     resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
   onetime@5.1.2:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
     engines: {node: '>=6'}
     resolution: {integrity: sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
   path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
   pathe@1.1.2:
     resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
       ts-node:
         optional: true
+  postcss-safe-parser@7.0.1:
+    resolution: {integrity: sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==}
+    engines: {node: '>=18.0'}
     peerDependencies:
+      postcss: ^8.4.31
   postcss-scss@4.0.9:
     resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
     peerDependencies:
       postcss: ^8.4.29
+  postcss-selector-parser@7.1.0:
+    resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
     engines: {node: '>=4'}
   postcss@8.5.3:
     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:
     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'}
     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@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==}
     resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
   rollup@4.34.9:
     resolution: {integrity: sha512-nF5XYqWWp9hx/LrpC8sZvvvmq0TeTjQgaZHYmAgwysT9nh8sWnZhBnM8ZyVbbJFIQBLwHDNoMqsBZBbUo4U8sQ==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
   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==}
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
   semver@7.7.1:
     resolution: {integrity: sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==}
     engines: {node: '>=10'}
     resolution: {integrity: sha512-FoqMu0NCGBLCcAkS1qA+XJIQTR6/JHfQXl+uGteNCQ76T91DMUjPa9xfmeqMY3z80nLSg9yQmNjK0Px6RWsH/A==}
     engines: {node: '>=18'}
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
   strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
+  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: ^4.0.0 || ^5.0.0-next.0
+      typescript: '>=5.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@5.23.0:
+    resolution: {integrity: sha512-v0lL3NuKontiCxholEiAXCB+BYbndlKbwlDMK0DS86WgGELMJSpyqCSbJeMEMBDwOglnS7Ar2Rq0wwa/z2L8Vg==}
+    engines: {node: '>=18'}
+  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==}
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
   through@2.3.8:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
+  ts-api-utils@2.0.1:
+    resolution: {integrity: sha512-dnlgjFSVetynI8nzgJ+qF62efpglpWRk8isUEWZGWlJYySCTD6aKvbUDu+zbPeDakk3bg5H4XpitHukgfL1m9w==}
+    engines: {node: '>=18.12'}
     peerDependencies:
+      typescript: '>=4.8.4'
   ts-patch@3.3.0:
     resolution: {integrity: sha512-zAOzDnd5qsfEnjd9IGy1IRuvA7ygyyxxdxesbhMdutt8AHFjD8Vw8hU2rMF89HX1BKRWFYqKHrO8Q6lw0NeUZg==}
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
   type-fest@0.21.3:
     resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
     engines: {node: '>=10'}
     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'}
       yaml:
         optional: true
+  vitefu@1.0.6:
+    resolution: {integrity: sha512-+Rex1GlappUyNN6UfwbVZne/9cYC4+R2XDk9xkNXBKMw6HQagdX9PgZ8V2v1WUSK1wfBLp7qbI1+XSNIlB1xmA==}
     peerDependencies:
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0
     peerDependenciesMeta:
       vite:
         optional: true
     resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
     engines: {node: '>=8'}
   yaml@1.10.2:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
     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': {}
   '@esbuild/win32-x64@0.25.1':
     optional: true
+  '@eslint-community/eslint-utils@4.4.1(eslint@9.22.0(jiti@2.4.2))':
     dependencies:
+      eslint: 9.22.0(jiti@2.4.2)
       eslint-visitor-keys: 3.4.3
   '@eslint-community/regexpp@4.12.1': {}
+  '@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: 10.3.0
+      globals: 14.0.0
       ignore: 5.3.2
       import-fresh: 3.3.1
       js-yaml: 4.1.0
     transitivePeerDependencies:
       - supports-color
+  '@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:
   '@huggingface/tasks@0.17.1': {}
+  '@humanfs/core@0.19.1': {}
+  '@humanfs/node@0.16.6':
     dependencies:
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.3.1
   '@humanwhocodes/module-importer@1.0.1': {}
+  '@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':
     transitivePeerDependencies:
       - supports-color
+  '@jest/schemas@29.6.3':
     dependencies:
+      '@sinclair/typebox': 0.27.8
   '@jridgewell/gen-mapping@0.3.8':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
       '@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)':
   '@samchon/openapi@3.0.0': {}
+  '@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@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@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@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@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': 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
       sade: 1.8.1
       set-cookie-parser: 2.7.1
       sirv: 3.0.1
+      svelte: 5.23.0
       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': 4.0.4(svelte@5.23.0)(vite@5.4.14(lightningcss@1.29.1))
       debug: 4.4.0
+      svelte: 5.23.0
       vite: 5.4.14(lightningcss@1.29.1)
     transitivePeerDependencies:
       - supports-color
+  '@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': 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: 5.23.0
       vite: 5.4.14(lightningcss@1.29.1)
+      vitefu: 1.0.6(vite@5.4.14(lightningcss@1.29.1))
     transitivePeerDependencies:
       - supports-color
   '@tailwindcss/container-queries@0.1.1(tailwindcss@4.0.9)':
     dependencies:
       tailwindcss: 4.0.9
   '@types/json-schema@7.0.15': {}
   '@types/resolve@1.20.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': 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
+      ts-api-utils: 2.0.1(typescript@5.8.2)
       typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
+  '@typescript-eslint/parser@8.26.1(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.2)':
     dependencies:
+      '@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: 9.22.0(jiti@2.4.2)
       typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
+  '@typescript-eslint/scope-manager@8.26.1':
     dependencies:
+      '@typescript-eslint/types': 8.26.1
+      '@typescript-eslint/visitor-keys': 8.26.1
+  '@typescript-eslint/type-utils@8.26.1(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.2)':
     dependencies:
+      '@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: 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@8.26.1': {}
+  '@typescript-eslint/typescript-estree@8.26.1(typescript@5.8.2)':
     dependencies:
+      '@typescript-eslint/types': 8.26.1
+      '@typescript-eslint/visitor-keys': 8.26.1
       debug: 4.4.0
+      fast-glob: 3.3.3
       is-glob: 4.0.3
+      minimatch: 9.0.5
       semver: 7.7.1
+      ts-api-utils: 2.0.1(typescript@5.8.2)
       typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
+  '@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@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-eslint/visitor-keys@8.26.1':
     dependencies:
+      '@typescript-eslint/types': 8.26.1
+      eslint-visitor-keys: 4.2.0
   acorn-jsx@5.3.2(acorn@8.14.0):
     dependencies:
     dependencies:
       color-convert: 2.0.1
+  ansi-styles@5.2.0: {}
   argparse@2.0.1: {}
   array-timsort@1.0.3: {}
+  axe-core@4.9.1: {}
   axobject-query@4.1.0: {}
   base64-js@1.5.1: {}
   bl@4.1.0:
     dependencies:
       buffer: 5.7.1
     dependencies:
       fill-range: 7.1.1
   buffer@5.7.1:
     dependencies:
       base64-js: 1.5.1
   chardet@0.7.0: {}
+  chokidar@4.0.3:
     dependencies:
+      readdirp: 4.1.2
   cli-cursor@3.1.0:
     dependencies:
   clsx@2.1.1: {}
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
       shebang-command: 2.0.0
       which: 2.0.2
   cssesc@3.0.0: {}
   debug@4.4.0:
   defu@6.1.4: {}
   detect-libc@1.0.3: {}
   devalue@5.1.1: {}
   diff-match-patch@1.0.5: {}
+  diff-sequences@29.6.3: {}
   drange@1.1.1: {}
       graceful-fs: 4.2.11
       tapable: 2.2.1
   esbuild@0.21.5:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.21.5
   escape-string-regexp@4.0.0: {}
+  eslint-compat-utils@0.6.4(eslint@9.22.0(jiti@2.4.2)):
     dependencies:
+      eslint: 9.22.0(jiti@2.4.2)
       semver: 7.7.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: 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@3.3.1(eslint@9.22.0(jiti@2.4.2))(svelte@5.23.0):
     dependencies:
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.22.0(jiti@2.4.2))
       '@jridgewell/sourcemap-codec': 1.5.0
+      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: 7.0.1(postcss@8.5.3)
       semver: 7.7.1
+      svelte-eslint-parser: 1.1.0(svelte@5.23.0)
     optionalDependencies:
+      svelte: 5.23.0
     transitivePeerDependencies:
       - ts-node
+  eslint-scope@8.3.0:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 5.3.0
   eslint-visitor-keys@3.4.3: {}
+  eslint-visitor-keys@4.2.0: {}
+  eslint@9.22.0(jiti@2.4.2):
     dependencies:
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.22.0(jiti@2.4.2))
       '@eslint-community/regexpp': 4.12.1
+      '@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
+      '@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
       escape-string-regexp: 4.0.0
+      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: 8.0.0
       find-up: 5.0.0
       glob-parent: 6.0.2
       ignore: 5.3.2
       imurmurhash: 0.1.4
       is-glob: 4.0.3
       json-stable-stringify-without-jsonify: 1.0.1
       lodash.merge: 4.6.2
       minimatch: 3.1.2
       natural-compare: 1.4.0
       optionator: 0.9.4
+    optionalDependencies:
+      jiti: 2.4.2
     transitivePeerDependencies:
       - supports-color
   esm-env@1.2.2: {}
+  espree@10.3.0:
     dependencies:
       acorn: 8.14.0
       acorn-jsx: 5.3.2(acorn@8.14.0)
+      eslint-visitor-keys: 4.2.0
   esprima@4.0.1: {}
     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
   estree-walker@2.0.2: {}
   esutils@2.0.3: {}
   exsolve@1.0.4: {}
   fast-deep-equal@3.1.3: {}
+  fast-diff@1.3.0: {}
   fast-glob@3.3.3:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
     dependencies:
       escape-string-regexp: 1.0.5
+  file-entry-cache@8.0.0:
     dependencies:
+      flat-cache: 4.0.1
   fill-range@7.1.1:
     dependencies:
       locate-path: 7.2.0
       path-exists: 5.0.0
+  flat-cache@4.0.1:
     dependencies:
       flatted: 3.3.3
       keyv: 4.5.4
   flatted@3.3.3: {}
   fsevents@2.3.3:
     optional: true
     dependencies:
       is-glob: 4.0.3
   global-prefix@4.0.0:
     dependencies:
       ini: 4.1.3
       kind-of: 6.0.3
       which: 4.0.0
+  globals@14.0.0: {}
   globals@15.15.0: {}
+  globals@16.0.0: {}
   graceful-fs@4.2.11: {}
   imurmurhash@0.1.4: {}
   inherits@2.0.4: {}
   ini@4.1.3: {}
       through: 2.3.8
       wrap-ansi: 6.2.0
   is-core-module@2.16.1:
     dependencies:
       hasown: 2.0.2
   is-number@7.0.0: {}
   is-reference@1.2.1:
     dependencies:
       '@types/estree': 1.0.6
   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:
   lilconfig@2.1.0: {}
   local-pkg@1.1.1:
     dependencies:
       mlly: 1.7.4
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
+  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: {}
   mimic-fn@2.1.0: {}
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.11
+  minimatch@9.0.5:
     dependencies:
       brace-expansion: 2.0.1
   minimist@1.2.8: {}
   mlly@1.7.4:
     dependencies:
       acorn: 8.14.0
   natural-compare@1.4.0: {}
   onetime@5.1.2:
     dependencies:
       mimic-fn: 2.1.0
   path-exists@5.0.0: {}
   path-key@3.1.1: {}
   path-parse@1.0.7: {}
   pathe@1.1.2: {}
   pathe@2.0.3: {}
   picocolors@1.1.1: {}
   picomatch@2.3.1: {}
     optionalDependencies:
       postcss: 8.5.3
+  postcss-safe-parser@7.0.1(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
     dependencies:
       postcss: 8.5.3
+  postcss-selector-parser@7.1.0:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
   prelude-ls@1.2.1: {}
+  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: 5.23.0
+  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@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: {}
       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@4.1.2: {}
   repeat-string@1.6.1: {}
   reusify@1.1.0: {}
   rollup@4.34.9:
     dependencies:
       '@types/estree': 1.0.6
     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
   safer-buffer@2.1.2: {}
   semver@7.7.1: {}
   set-cookie-parser@2.7.1: {}
       mrmime: 2.0.1
       totalist: 3.0.1
   source-map-js@1.2.1: {}
   string-width@4.2.3:
     dependencies:
       ansi-regex: 5.0.1
   strip-json-comments@3.1.1: {}
   supports-color@7.2.0:
   supports-preserve-symlinks-flag@1.0.0: {}
+  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: 4.0.3
+      fdir: 6.4.3(picomatch@4.0.2)
       picocolors: 1.1.1
       sade: 1.8.1
+      svelte: 5.23.0
       typescript: 5.8.2
     transitivePeerDependencies:
+      - picomatch
+  svelte-eslint-parser@1.1.0(svelte@5.23.0):
     dependencies:
+      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: 5.23.0
+  svelte@5.23.0:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.5.0
+      '@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
+      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
+      zimmerframe: 1.1.2
+  synckit@0.9.2:
+    dependencies:
+      '@pkgr/core': 0.1.1
+      tslib: 2.8.1
   tailwind-merge@3.0.2: {}
   tapable@2.2.1: {}
   through@2.3.8: {}
   tinyexec@0.3.2: {}
   totalist@3.0.1: {}
+  ts-api-utils@2.0.1(typescript@5.8.2):
     dependencies:
       typescript: 5.8.2
     dependencies:
       prelude-ls: 1.2.1
   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: {}
   ufo@1.5.4: {}
+  unplugin-icons@22.1.0(svelte@5.23.0):
     dependencies:
       '@antfu/install-pkg': 1.0.0
       '@iconify/utils': 2.3.0
       local-pkg: 1.1.1
       unplugin: 2.2.0
     optionalDependencies:
+      svelte: 5.23.0
     transitivePeerDependencies:
       - supports-color
       lightningcss: 1.29.1
       yaml: 2.7.0
+  vitefu@1.0.6(vite@5.4.14(lightningcss@1.29.1)):
     optionalDependencies:
       vite: 5.4.14(lightningcss@1.29.1)
       string-width: 4.2.3
       strip-ansi: 6.0.1
   yaml@1.10.2: {}
   yaml@2.7.0:
   yocto-queue@0.1.0: {}
   yocto-queue@1.2.0: {}
+  zimmerframe@1.1.2: {}

src/lib/actions/autofocus.ts ADDED Viewed

	@@ -0,0 +1,7 @@

+import { tick } from "svelte";
+export function autofocus(node: HTMLElement) {
+	tick().then(() => {
+		node.focus();
+	});
+}

src/lib/components/DebugMenu.svelte DELETED Viewed

@@ -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>

src/lib/components/InferencePlayground/InferencePlaygroundModelSelectorModal.svelte DELETED Viewed

@@ -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>

src/lib/components/{Avatar.svelte → avatar.svelte} RENAMED Viewed

@@ -1,8 +1,12 @@
 <script lang="ts">
-	export let orgName: string | undefined;
-	export let size: "sm" | "md" = "md";
-	$: sizeClass = size === "sm" ? "size-3" : "size-4";
 	async function getAvatarUrl(orgName?: string) {
 		if (!orgName) return;

 <script lang="ts">
+	interface Props {
+		orgName: string | undefined;
+		size?: "sm" | "md";
+	}
+	let { orgName, size = "md" }: Props = $props();
+	let sizeClass = $derived(size === "sm" ? "size-3" : "size-4");
 	async function getAvatarUrl(orgName?: string) {
 		if (!orgName) return;

src/lib/components/debug-menu.svelte ADDED Viewed

	@@ -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>

src/lib/components/{Icons/IconProvider.svelte → icon-provider.svelte} RENAMED Viewed

@@ -1,5 +1,10 @@
 <script lang="ts">
-	export let provider: string | undefined;
 </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>
 {/if}

 <script lang="ts">
+	interface Props {
+		provider: string | undefined;
+		children?: import("svelte").Snippet;
+	}
+	let { provider, children }: Props = $props();
 </script>
 {#if provider === "sambanova"}
 			fill="#814D00"
 		></path></svg
 	>
+{:else if children}{@render children()}{:else}
+	<div class="size-4 flex-none rounded-sm bg-gray-200"></div>
 {/if}

src/lib/components/{InferencePlayground/InferencePlaygroundCodeSnippets.svelte → inference-playground/code-snippets.svelte} RENAMED Viewed

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Conversation } from "$lib/types";
 	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 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";
 	hljs.registerLanguage("javascript", javascript);
 	hljs.registerLanguage("python", python);
 	hljs.registerLanguage("http", http);
-	export let conversation: Conversation;
 	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);
 	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];
-		})
 	);
-	$: 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;
 		}
 		return "YOUR_HF_TOKEN";
 	}
@@ -136,6 +104,40 @@
 			},
 		};
 	}
 </script>
 <div class="px-2 pt-2">
@@ -146,7 +148,7 @@
 			{#each entries(labelsByLanguage) as [language, label]}
 				<li>
 					<button
-						on:click={() => (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={() => {
 						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
 				>
 			{/each}
 		</div>

 <script lang="ts">
+	import type { Conversation } from "$lib/types.js";
 	import hljs from "highlight.js/lib/core";
 	import http from "highlight.js/lib/languages/http";
 	import python from "highlight.js/lib/languages/python";
 	import { createEventDispatcher } from "svelte";
+	import { token } from "$lib/state/token.svelte.js";
+	import { entries, fromEntries, keys } from "$lib/utils/object.js";
 	import type { InferenceProvider } from "@huggingface/inference";
 	import IconExternal from "~icons/carbon/arrow-up-right";
+	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);
+	interface Props {
+		conversation: Conversation;
+	}
+	let { conversation }: Props = $props();
 	const dispatch = createEventDispatcher<{ closeCode: void }>();
 	} as const satisfies Record<string, string>;
 	type Language = keyof typeof labelsByLanguage;
+	let lang: Language = $state("javascript");
+	let showToken = $state(false);
 	type GetSnippetArgs = {
 		tokenStr: string;
 		});
 	}
 	// { javascript: 0, python: 0, http: 0 } at first
+	const selectedSnippetIdxByLang: Record<Language, number> = $state(
+		fromEntries(
+			keys(labelsByLanguage).map(lang => {
+				return [lang, 0];
+			})
+		)
 	);
 	type InstallInstructions = {
 		title: string;
 		content: string;
 		docs: string;
 	};
 	function getTokenStr(showToken: boolean) {
+		if (token.value && showToken) {
+			return token.value;
 		}
 		return "YOUR_HF_TOKEN";
 	}
 			},
 		};
 	}
+	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">
 			{#each entries(labelsByLanguage) as [language, label]}
 				<li>
 					<button
+						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'}"
 			{/each}
 			<li class="ml-auto self-center max-sm:hidden">
 				<button
+					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"
 					{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'}"
+					onclick={() => (selectedSnippetIdxByLang[lang] = idx)}>{client}</button
 				>
 			{/each}
 		</div>

src/lib/components/{InferencePlayground/InferencePlaygroundConversationHeader.svelte → inference-playground/conversation-header.svelte} RENAMED Viewed

@@ -1,24 +1,28 @@
 <script lang="ts">
-	import type { Conversation, ModelWithTokenizer } from "$lib/types";
 	import { createEventDispatcher } from "svelte";
-	import { models } from "$lib/stores/models";
-	import Avatar from "../Avatar.svelte";
 	import IconCog from "~icons/carbon/settings";
-	import GenerationConfig from "./InferencePlaygroundGenerationConfig.svelte";
-	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
-	import InferencePlaygroundProviderSelect from "./InferencePlaygroundProviderSelect.svelte";
-	export let conversation: Conversation;
-	export let conversationIdx: number;
 	const dispatch = createEventDispatcher<{ close: string }>();
-	let modelSelectorOpen = false;
 	function changeModel(newModelId: ModelWithTokenizer["id"]) {
-		const model = $models.find(m => m.id === newModelId);
 		if (!model) {
 			return;
 		}
@@ -26,15 +30,11 @@
 		conversation.provider = undefined;
 	}
-	$: nameSpace = conversation.model.id.split("/")[0] ?? "";
 </script>
 {#if modelSelectorOpen}
-	<ModelSelectorModal
-		{conversation}
-		on:modelSelected={e => changeModel(e.detail)}
-		on:close={() => (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)}
 		>{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)}
 	>
 		✕
 	</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
 		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"
 	/>

 <script lang="ts">
+	import type { Conversation, ModelWithTokenizer } from "$lib/types.js";
 	import { createEventDispatcher } from "svelte";
+	import { models } from "$lib/state/models.svelte.js";
 	import IconCog from "~icons/carbon/settings";
+	import Avatar from "../avatar.svelte";
+	import GenerationConfig from "./generation-config.svelte";
+	import ModelSelectorModal from "./model-selector-modal.svelte";
+	import ProviderSelect from "./provider-select.svelte";
+	interface Props {
+		conversation: Conversation;
+		conversationIdx: number;
+	}
+	let { conversation = $bindable(), conversationIdx }: Props = $props();
 	const dispatch = createEventDispatcher<{ close: string }>();
+	let modelSelectorOpen = $state(false);
 	function changeModel(newModelId: ModelWithTokenizer["id"]) {
+		const model = models.all.find(m => m.id === newModelId);
 		if (!model) {
 			return;
 		}
 		conversation.provider = undefined;
 	}
+	let nameSpace = $derived(conversation.model.id.split("/")[0] ?? "");
 </script>
 {#if modelSelectorOpen}
+	<ModelSelectorModal {conversation} onModelSelect={changeModel} onClose={() => (modelSelectorOpen = false)} />
 {/if}
 <div
 		: '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" 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"
+		onclick={() => dispatch("close", conversation.model.id)}
 	>
 		✕
 	</button>
 		? 'mr-4 max-sm:ml-4'
 		: 'mx-4'}  mt-2 h-11 text-sm leading-none whitespace-nowrap max-sm:mt-4"
 >
+	<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"
 	/>

src/lib/components/{InferencePlayground/InferencePlaygroundConversation.svelte → inference-playground/conversation.svelte} RENAMED Viewed

@@ -1,36 +1,26 @@
 <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) {
@@ -39,22 +29,21 @@
 		}
 	}
-	$: {
 		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();
@@ -69,20 +58,17 @@
 	}
 	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;
@@ -91,20 +77,19 @@
 	}}
 >
 	{#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">

 <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) {
 		}
 	}
+	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();
 	}
 	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;
 	}}
 >
 	{#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">

src/lib/components/{InferencePlayground/generationConfigSettings.ts → inference-playground/generation-config-settings.ts} RENAMED Viewed

File without changes

src/lib/components/{InferencePlayground/InferencePlaygroundGenerationConfig.svelte → inference-playground/generation-config.svelte} RENAMED Viewed

@@ -1,14 +1,20 @@
 <script lang="ts">
-	import type { Conversation } from "$lib/types";
-	import { GENERATION_CONFIG_KEYS, GENERATION_CONFIG_SETTINGS } from "./generationConfigSettings";
-	import { customMaxTokens } from "./inferencePlaygroundUtils";
-	export let conversation: Conversation;
-	export let classNames = "";
-	$: modelMaxLength = customMaxTokens[conversation.model.id] ?? conversation.model.tokenizerConfig.model_max_length;
-	$: maxTokens = Math.min(modelMaxLength ?? GENERATION_CONFIG_SETTINGS["max_tokens"].max, 64_000);
 </script>
 <div class="flex flex-col gap-y-7 {classNames}">

 <script lang="ts">
+	import type { Conversation } from "$lib/types.js";
+	import { GENERATION_CONFIG_KEYS, GENERATION_CONFIG_SETTINGS } from "./generation-config-settings.js";
+	import { customMaxTokens } from "./utils.js";
+	interface Props {
+		conversation: Conversation;
+		classNames?: string;
+	}
+	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}">

src/lib/components/{InferencePlayground/InferencePlaygroundHFTokenModal.svelte → inference-playground/hf-token-modal.svelte} RENAMED Viewed

@@ -1,13 +1,21 @@
 <script lang="ts">
-	import { clickOutside } from "$lib/actions/click-outside";
 	import { createEventDispatcher, onDestroy, onMount } from "svelte";
 	import IconCross from "~icons/carbon/close";
-	export let storeLocallyHfToken = false;
-	let backdropEl: HTMLDivElement;
-	let modalEl: 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}
 		use:clickOutside={() => dispatch("close")}
 	>
-		<form on:submit|preventDefault 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")}
 					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
 						required
 						placeholder="Enter HF Token"
 						type="text"

 <script lang="ts">
+	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;
+	}
+	let { storeLocallyHfToken = $bindable(false) }: Props = $props();
+	let backdropEl = $state<HTMLDivElement>();
+	let modalEl = $state<HTMLDivElement>();
 	const dispatch = createEventDispatcher<{ close: void }>();
 	onMount(() => {
 		document.getElementById("app")?.setAttribute("inert", "true");
 	});
 	onDestroy(() => {
 	});
 </script>
 <div
 	id="default-modal"
 	aria-hidden="true"
 		tabindex="-1"
 		class="relative max-h-full w-full max-w-xl p-4 outline-hidden"
 		bind:this={modalEl}
+		onkeydown={handleKeydown}
 		use:clickOutside={() => dispatch("close")}
 	>
+		<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
 				</h3>
 				<button
 					type="button"
+					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">
 						>Hugging Face Token</label
 					>
 					<input
+						use:autofocus
 						required
 						placeholder="Enter HF Token"
 						type="text"

src/lib/components/{InferencePlayground/InferencePlaygroundMessage.svelte → inference-playground/message.svelte} RENAMED Viewed

@@ -1,39 +1,46 @@
 <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

 <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

src/lib/components/inference-playground/model-selector-modal.svelte ADDED Viewed

	@@ -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>

src/lib/components/{InferencePlayground/InferencePlaygroundModelSelector.svelte → inference-playground/model-selector.svelte} RENAMED Viewed

@@ -1,20 +1,24 @@
 <script lang="ts">
-	import type { Conversation, ModelWithTokenizer } from "$lib/types";
-	import { models } from "$lib/stores/models";
 	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";
-	export let conversation: Conversation;
-	let showModelPickerModal = false;
 	// Model
 	function changeModel(modelId: ModelWithTokenizer["id"]) {
-		const model = $models.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] ?? "";
 	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>
 	</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)}
 	>
 		<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)}
-	/>
 {/if}
 <ProviderSelect bind:conversation />

 <script lang="ts">
+	import type { Conversation, ModelWithTokenizer } from "$lib/types.js";
+	import { models } from "$lib/state/models.svelte.js";
 	import IconCaret from "~icons/carbon/chevron-down";
+	import Avatar from "../avatar.svelte";
+	import ModelSelectorModal from "./model-selector-modal.svelte";
+	import ProviderSelect from "./provider-select.svelte";
+	import { defaultSystemMessage } from "./utils.js";
+	interface Props {
+		conversation: Conversation;
+	}
+	let { conversation = $bindable() }: Props = $props();
+	let showModelPickerModal = $state(false);
 	// Model
 	function changeModel(modelId: ModelWithTokenizer["id"]) {
+		const model = models.all.find(m => m.id === modelId);
 		if (!model) {
 			return;
 		}
 		conversation.provider = undefined;
 	}
+	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.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"
+		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">
 </div>
 {#if showModelPickerModal}
+	<ModelSelectorModal {conversation} onModelSelect={changeModel} onClose={() => (showModelPickerModal = false)} />
 {/if}
 <ProviderSelect bind:conversation />

src/lib/components/{InferencePlayground/InferencePlayground.svelte → inference-playground/playground.svelte} RENAMED Viewed

@@ -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 { 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";
 	const startMessageUser: ConversationMessage = { role: "user", content: "" };
-	let viewCode = false;
-	let viewSettings = false;
-	let loading = false;
-	let abortControllers: AbortController[] = [];
-	let waitForNonStreaming = true;
-	let selectCompareModelOpen = false;
 	interface GenerationStatistics {
 		latency: number;
 		generatedTokensCount: number;
 	}
-	let generationStats = $project.conversations.map(_ => ({ latency: 0, generatedTokensCount: 0 })) as
-		| [GenerationStatistics]
-		| [GenerationStatistics, GenerationStatistics];
-	$: systemPromptSupported = $project.conversations.some(conversation => isSystemPromptSupported(conversation.model));
-	$: compareActive = $project.conversations.length === 2;
 	function reset() {
-		$project.conversations.map(conversation => {
-			conversation.systemMessage.content = "";
-			conversation.messages = [{ ...startMessageUser }];
 		});
-		$session = $session;
 	}
-	function abort() {
-		if (abortControllers.length) {
-			for (const abortController of abortControllers) {
-				abortController.abort();
-			}
-			abortControllers = [];
-		}
-		loading = false;
-		waitForNonStreaming = false;
-	}
-	async function runInference(conversation: Conversation, conversationIdx: number) {
 		const startTime = performance.now();
-		const hf = new HfInference($token.value);
 		if (conversation.streaming) {
-			let addStreamingMessage = true;
-			const streamingMessage = { role: "assistant", content: "" };
-			const abortController = new AbortController();
-			abortControllers.push(abortController);
 			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;
 					}
 				},
-				abortController
 			);
 		} 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;
-			}
 		}
 		const endTime = performance.now();
@@ -112,48 +102,58 @@
 	}
 	async function submit() {
-		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.`);
 			}
 		}
 		(document.activeElement as HTMLElement).blur();
 		loading = true;
 		try {
-			const promises = $project.conversations.map((conversation, idx) => runInference(conversation, idx));
 			await Promise.all(promises);
 		} catch (error) {
-			for (const conversation of $project.conversations) {
 				if (conversation.messages.at(-1)?.role === "assistant" && !conversation.messages.at(-1)?.content?.trim()) {
 					conversation.messages.pop();
 					conversation.messages = [...conversation.messages];
 				}
-				$session = $session;
 			}
 			if (error instanceof Error) {
 				if (error.message.includes("token seems invalid")) {
 					token.reset();
 				}
 				if (error.name !== "AbortError") {
-					alert("error: " + error.message);
 				}
 			} else {
-				alert("An unknown error occurred");
 			}
 		} finally {
 			loading = false;
-			abortControllers = [];
 		}
 	}
@@ -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);
 			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) {
 			return;
 		}
-		const newConversation = { ...JSON.parse(JSON.stringify($project.conversations[0])), model };
-		$project.conversations = [...$project.conversations, newConversation];
 		generationStats = [generationStats[0], { latency: 0, generatedTokensCount: 0 }];
 	}
 	function removeCompareModal(conversationIdx: number) {
-		$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}
 	<HFTokenModal
-		bind:storeLocallyHfToken={$token.writeToLocalStorage}
-		on:close={() => ($token.showModal = false)}
 		on:submit={handleTokenSubmit}
 	/>
 {/if}
-<!-- 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)]'}"
 >
 	<div class="flex flex-col gap-2 overflow-y-auto py-3 pr-3 max-md:pl-3">
 		<div class="pl-2">
-			<InferencePlaygroundProjectSelect />
 		</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) {
 						conversation.systemMessage.content = e.currentTarget.value;
 					}
-					$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}>
 		<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}
 				<div class="max-sm:min-w-full">
 					{#if compareActive}
 						<PlaygroundConversationHeader
 							{conversationIdx}
-							bind:conversation
 							on:close={() => removeCompareModal(conversationIdx)}
 						/>
 					{/if}
 					<PlaygroundConversation
 						{loading}
-						bind:conversation
 						{viewCode}
 						{compareActive}
 						on:closeCode={() => (viewCode = false)}
@@ -271,7 +272,7 @@
 				{#if !compareActive}
 					<button
 						type="button"
-						on:click={() => (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]">
 					<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">
 					<IconCode />
 					{!viewCode ? "View Code" : "Hide Code"}</button
 				>
 				<button
-					on:click={() => {
 						viewCode = false;
-						loading ? abort() : 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}
 									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;"
-							/>
 						</div>
 					{:else}
 						Run <span
@@ -336,24 +331,26 @@
 			</div>
 		</div>
 	</div>
 	{#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]} />
 					<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)}
 						>
 							<IconCompare />
 							Compare
 						</button>
 						<a
-							href="https://huggingface.co/{$project.conversations[0].model.id}?inference_provider={$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}
 					<button
-						on:click={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)}
 	/>
 {/if}

 <script lang="ts">
+	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 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 { 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 = $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 = $state(
+		session.project.conversations.map(_ => ({ latency: 0, generatedTokensCount: 0 })) as
+			| [GenerationStatistics]
+			| [GenerationStatistics, GenerationStatistics]
+	);
+	const systemPromptSupported = $derived(
+		session.project.conversations.some(conversation => isSystemPromptSupported(conversation.model))
+	);
+	const compareActive = $derived(session.project.conversations.length === 2);
 	function reset() {
+		session.project.conversations = session.project.conversations.map(conversation => {
+			return {
+				...conversation,
+				systemMessage: { role: "system", content: "" },
+				messages: [{ ...startMessageUser }],
+			};
 		});
 	}
+	async function runInference(conversationIdx: number) {
+		const conversation = session.project.conversations[conversationIdx];
+		if (!conversation) return;
 		const startTime = performance.now();
+		const hf = new HfInference(token.value);
 		if (conversation.streaming) {
+			let addedMessage = false;
+			let streamingMessage = $state({ role: "assistant", content: "" });
 			await handleStreamingResponse(
 				hf,
 				conversation,
 				content => {
+					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;
 				},
+				abortManager.createController()
 			);
 		} else {
 			const { message: newMessage, completion_tokens: newTokensCount } = await handleNonStreamingResponse(
 				hf,
 				conversation
 			);
+			conversation.messages = [...conversation.messages, newMessage];
+			const c = generationStats[conversationIdx];
+			if (c) c.generatedTokensCount += newTokensCount;
 		}
 		const endTime = performance.now();
 	}
 	async function submit() {
+		if (!token.value) {
+			token.showModal = true;
 			return;
 		}
+		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 = session.project.conversations.map((_, idx) => runInference(idx));
 			await Promise.all(promises);
 		} catch (error) {
+			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.$;
 			}
 			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") {
+					addToast({ title: "Error", description: error.message, variant: "error" });
 				}
 			} else {
+				addToast({ title: "Error", description: "An unknown error occurred", variant: "error" });
 			}
 		} finally {
 			loading = false;
+			abortManager.clear();
 		}
 	}
 		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.value = submittedHfToken;
 			submit();
 		} else {
 			alert("Please provide a valid HF token.");
 	}
 	function addCompareModel(modelId: ModelWithTokenizer["id"]) {
+		const model = models.all.find(m => m.id === modelId);
+		if (!model || session.project.conversations.length === 2) {
 			return;
 		}
+		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) {
+		session.project.conversations.splice(conversationIdx, 1)[0];
+		session.$ = session.$;
 		generationStats.splice(conversationIdx, 1)[0];
 		generationStats = generationStats;
 	}
 </script>
+{#if token.showModal}
 	<HFTokenModal
+		bind:storeLocallyHfToken={token.writeToLocalStorage}
+		on:close={() => (token.showModal = false)}
 		on:submit={handleTokenSubmit}
 	/>
 {/if}
+<!-- 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">
+			<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"
 				placeholder={systemPromptSupported
 					? "Enter a custom prompt"
 					: "System prompt is not supported with the chosen model."}
+				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.$;
 				}}
 				class="absolute inset-x-0 bottom-0 h-full resize-none bg-transparent px-3 pt-10 text-sm outline-hidden"
 			></textarea>
 		</div>
 	</div>
+	<!-- 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 session.project.conversations as conversation, conversationIdx (conversation)}
 				<div class="max-sm:min-w-full">
 					{#if compareActive}
 						<PlaygroundConversationHeader
 							{conversationIdx}
+							bind:conversation={session.project.conversations[conversationIdx]!}
 							on:close={() => removeCompareModal(conversationIdx)}
 						/>
 					{/if}
 					<PlaygroundConversation
 						{loading}
+						bind:conversation={
+							() => session.project.conversations[conversationIdx]!,
+							v => (session.project.conversations[conversationIdx] = v)
+						}
 						{viewCode}
 						{compareActive}
 						on:closeCode={() => (viewCode = false)}
 				{#if !compareActive}
 					<button
 						type="button"
+						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">
 						{!viewSettings ? "Settings" : "Hide Settings"}
 					</button>
 				{/if}
+				<button type="button" onclick={reset} class="btn size-[39px]">
 					<IconDelete />
 				</button>
 			</div>
 				{/each}
 			</div>
 			<div class="flex flex-1 justify-end gap-x-2">
+				<button type="button" onclick={() => (viewCode = !viewCode)} class="btn">
 					<IconCode />
 					{!viewCode ? "View Code" : "Hide Code"}</button
 				>
 				<button
+					onclick={() => {
 						viewCode = false;
+						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
 					{#if loading}
 						<div class="flex flex-none items-center gap-[3px]">
 							<span class="mr-2">
+								{#if session.project.conversations[0]?.streaming || session.project.conversations[1]?.streaming}
 									Stop
 								{:else}
 									Cancel
 								{/if}
 							</span>
+							{#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
 			</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={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"
+							onclick={() => (selectCompareModelOpen = true)}
 						>
 							<IconCompare />
 							Compare
 						</button>
 						<a
+							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"
 						>
 					</div>
 				</div>
+				<GenerationConfig bind:conversation={session.project.conversations[0]!} />
+				{#if token.value}
 					<button
+						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
 {#if selectCompareModelOpen}
 	<ModelSelectorModal
+		conversation={session.project.conversations[0]!}
+		onModelSelect={addCompareModel}
+		onClose={() => (selectCompareModelOpen = false)}
 	/>
 {/if}

src/lib/components/{InferencePlayground/InferencePlaygroundProjectSelect.svelte → inference-playground/project-select.svelte} RENAMED Viewed

@@ -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 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";
-	let classNames: string = "";
-	export { classNames as class };
-	$: isDefault = $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;
 	});
 	async function saveProject() {
-		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
 		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}
 		</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}>
 			<IconSave />
 		</button>
 	{:else}
-		<button class="btn size-[32px] p-0" on:click={() => ($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
 				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 => {
 								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 => {
 								e.stopPropagation();
 								session.deleteProject(id);
 							}}
@@ -88,6 +89,6 @@
 					</div>
 				{/if}
 			</div>
-		</button>
 	{/each}
 </div>

 <script lang="ts">
+	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";
+	interface Props {
+		class?: string;
+	}
+	let { class: classNames = "" }: Props = $props();
+	const isDefault = $derived(session.$.activeProjectId === "default");
+	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));
 	}
 </script>
 <div class={cn("flex w-full items-stretch gap-2 ", classNames)}>
 	<button
+		{...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">
+			{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"
 		</div>
 	</button>
 	{#if isDefault}
+		<button class="btn size-[32px] p-0" onclick={saveProject}>
 			<IconSave />
 		</button>
 	{:else}
+		<button class="btn size-[32px] p-0" onclick={() => (session.$.activeProjectId = "default")}>
 			<IconCross />
 		</button>
 	{/if}
 </div>
+<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"
 			>
 					<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"
+							onclick={async e => {
 								e.stopPropagation();
 								session.updateProject(id, { name: (await prompt("Edit project name", name)) || name });
 							}}
 						</button>
 						<button
 							class="grid place-items-center rounded-md p-1 text-xs hover:bg-gray-300 dark:hover:bg-gray-600"
+							onclick={e => {
 								e.stopPropagation();
 								session.deleteProject(id);
 							}}
 					</div>
 				{/if}
 			</div>
+		</div>
 	{/each}
 </div>

src/lib/components/{InferencePlayground/InferencePlaygroundProviderSelect.svelte → inference-playground/provider-select.svelte} RENAMED Viewed

@@ -1,15 +1,20 @@
 <script lang="ts">
-	import type { Conversation } from "$lib/types";
-	import { randomPick } from "$lib/utils/array";
-	import { cn } from "$lib/utils/cn";
-	import { createSelect, createSync } from "@melt-ui/svelte";
 	import IconCaret from "~icons/carbon/chevron-down";
-	import IconProvider from "../Icons/IconProvider.svelte";
-	export let conversation: Conversation;
-	let classes: string | undefined = undefined;
-	export { classes as class };
 	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);
-	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 nameMap: Record<string, string> = {
 		"sambanova": "SambaNova",
@@ -72,8 +76,7 @@
 	-->
 	<button
-		{...$trigger}
-		use: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">
 		{#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">
 				<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"
 				>

 <script lang="ts">
+	import { run } from "svelte/legacy";
+	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 "../icon-provider.svelte";
+	interface Props {
+		conversation: Conversation;
+		class?: string | undefined;
+	}
+	let { conversation = $bindable(), class: classes = undefined }: Props = $props();
 	function reset(providers: typeof conversation.model.inferenceProviderMapping) {
 		const validProvider = providers.find(p => p.provider === conversation.provider);
 		conversation.provider = randomPick(providers)?.provider;
 	}
+	let providers = $derived(conversation.model.inferenceProviderMapping);
+	run(() => {
+		reset(providers);
+	});
+	const select = new Select<string, false>({
+		value: () => conversation.provider,
+		onValueChange(v) {
+			conversation.provider = v;
+		},
+	});
 	const nameMap: Record<string, string> = {
 		"sambanova": "SambaNova",
 	-->
 	<button
+		{...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",
 		</div>
 	</button>
+	<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 {...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"
 				>

src/lib/components/{InferencePlayground/inferencePlaygroundUtils.ts → inference-playground/utils.ts} RENAMED Viewed

@@ -1,4 +1,4 @@
-import type { Conversation, ModelWithTokenizer } from "$lib/types";
 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 };

+import type { Conversation, ModelWithTokenizer } from "$lib/types.js";
 import type { InferenceSnippet } from "@huggingface/tasks";
 import { type ChatCompletionOutputMessage } from "@huggingface/tasks";
 	});
 	if (response.choices && response.choices.length > 0) {
 		const { message } = response.choices[0]!;
 		const { completion_tokens } = response.usage;
 		return { message, completion_tokens };

src/lib/components/label-pro.svelte ADDED Viewed

	@@ -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>

src/lib/components/{Prompts.svelte → prompts.svelte} RENAMED Viewed

@@ -1,6 +1,6 @@
-<script lang="ts" context="module">
-	import { clickOutside } from "$lib/actions/click-outside";
-	import { writable } from "svelte/store";
 	import IconCross from "~icons/carbon/close";
 	type Prompt = {
@@ -10,32 +10,32 @@
 		callback: (value: string) => void;
 	};
-	const prompts = writable<Prompt[]>([]);
 	export function resolvePrompt() {
-		prompts.update(p => {
-			p[0]?.callback(p[0]?.value ?? "");
-			return p.slice(1);
-		});
 	}
-	export async function prompt(label: string, defaultVAlue?: string): Promise<string> {
 		return new Promise(res => {
-			prompts.update(p => [...p, { label, value: defaultVAlue, callback: res }]);
 		});
 	}
 </script>
 <script lang="ts">
-	$: current = $prompts?.[0];
-	let dialog: HTMLDialogElement | undefined;
-	$: 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}>
 	{#if current}
 		<div class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/85">
 			<form
-				on:submit={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}
 					>
 						<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
 							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"
 						/>

+<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 = {
 		callback: (value: string) => void;
 	};
+	let prompts = $state<Prompt[]>([]);
+	const current = $derived(prompts[0]);
 	export function resolvePrompt() {
+		if (!current) return;
+		current.callback(current.value ?? "");
+		prompts.splice(0, 1);
 	}
+	export async function prompt(label: string, defaultValue?: string): Promise<string> {
 		return new Promise(res => {
+			prompts.push({ label, value: defaultValue, callback: res });
 		});
 	}
 </script>
 <script lang="ts">
+	let dialog: HTMLDialogElement | undefined = $state();
+	$effect(() => {
+		if (current) {
+			dialog?.showModal();
+		} else {
+			dialog?.close();
+		}
+	});
 	function onSubmit(e: Event) {
 		e.preventDefault();
 	}
 </script>
+<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
+				onsubmit={onSubmit}
 				class="relative w-xl rounded-lg bg-white shadow-sm dark:bg-gray-900"
 				use:clickOutside={resolvePrompt}
 			>
 					<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"
+						onclick={resolvePrompt}
 					>
 						<div class="text-xl">
 							<IconCross />
 				<!-- Modal body -->
 				<div class="p-4 md:p-5">
 					<label class="flex flex-col gap-2 font-medium text-gray-900 dark:text-white">
 						<input
 							bind:value={current.value}
 							placeholder={current.placeholder}
 							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"
 						/>

src/lib/components/quota-modal.svelte ADDED Viewed

	@@ -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>

src/lib/components/toaster.svelte ADDED Viewed

	@@ -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>

src/lib/components/toaster.svelte.ts ADDED Viewed

	@@ -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",
+// });

src/lib/spells/README.md ADDED Viewed

	@@ -0,0 +1,3 @@


1	+ # Spells
2	+
3	+ 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.

src/lib/spells/abort-manager.svelte.ts ADDED Viewed

	@@ -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 = [];
+	}
+}

src/lib/spells/create-init.svelte.ts ADDED Viewed

	@@ -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;
+		},
+	};
+}

src/lib/spells/extract.svelte.ts ADDED Viewed

	@@ -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;
+}

src/lib/spells/textarea-autosize.svelte.ts ADDED Viewed

	@@ -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;
+	};
+}

src/lib/state/models.svelte.ts ADDED Viewed

	@@ -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();

src/lib/{stores/session.ts → state/session.svelte.ts} RENAMED Viewed

@@ -1,5 +1,5 @@
-import { defaultGenerationConfig } from "$lib/components/InferencePlayground/generationConfigSettings";
-import { models } from "$lib/stores/models";
 import {
 	PipelineTag,
 	type Conversation,
@@ -8,11 +8,10 @@ import {
 	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";
@@ -38,9 +37,7 @@ const emptyModel: ModelWithTokenizer = {
 };
 function getDefaults() {
-	const $models = get(models);
-	const featured = getTrending($models);
-	const defaultModel = featured[0] ?? $models[0] ?? emptyModel;
 	const defaultConversation: Conversation = {
 		model: defaultModel,
@@ -59,8 +56,11 @@ function getDefaults() {
 	return { defaultProject, defaultConversation };
 }
-function createSessionStore() {
-	const store = writable<Session>(undefined, set => {
 		const { defaultConversation, defaultProject } = getDefaults();
 		// Get saved session from localStorage if available
@@ -86,12 +86,11 @@ function createSessionStore() {
 		// 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);
@@ -105,110 +104,78 @@ function createSessionStore() {
 			}
 		}
-		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();

+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 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";
 };
 function getDefaults() {
+	const defaultModel = models.trending[0] ?? models.all[0] ?? emptyModel;
 	const defaultConversation: Conversation = {
 		model: defaultModel,
 	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
 		// 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);
 			}
 		}
+		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();

src/lib/state/token.svelte.ts ADDED Viewed

	@@ -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();

src/lib/stores/models.ts DELETED Viewed

@@ -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;
-});

src/lib/stores/mounted.ts DELETED Viewed

@@ -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);
-}

src/lib/stores/token.ts DELETED Viewed

@@ -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();

src/lib/types.ts CHANGED Viewed

@@ -1,7 +1,9 @@
-import type { GenerationConfig } from "$lib/components/InferencePlayground/generationConfigSettings";
 import type { ChatCompletionInputMessage } from "@huggingface/tasks";
-export type ConversationMessage = Omit<ChatCompletionInputMessage, "content"> & { content?: string };
 export type Conversation = {
 	model: ModelWithTokenizer;
@@ -13,7 +15,7 @@ export type Conversation = {
 };
 export type Project = {
-	conversations: [Conversation] | [Conversation, Conversation];
 	id: string;
 	name: string;
 };
@@ -168,3 +170,7 @@ export enum LibraryName {
 export enum PipelineTag {
 	TextGeneration = "text-generation",
 }

+import type { GenerationConfig } from "$lib/components/inference-playground/generation-config-settings.js";
 import type { ChatCompletionInputMessage } from "@huggingface/tasks";
+export type ConversationMessage = Pick<ChatCompletionInputMessage, "name" | "role" | "tool_calls"> & {
+	content?: string;
+};
 export type Conversation = {
 	model: ModelWithTokenizer;
 };
 export type Project = {
+	conversations: Conversation[];
 	id: string;
 	name: string;
 };
 export enum PipelineTag {
 	TextGeneration = "text-generation",
 }
+export type MaybeGetter<T> = T | (() => T);
+export type ValueOf<T> = T[keyof T];

src/lib/utils/compare.ts ADDED Viewed

	@@ -0,0 +1,3 @@

+export function compareStr(a: string, b: string) {
+	return a.toLowerCase().localeCompare(b.toLowerCase());
+}

src/lib/utils/effect.ts DELETED Viewed

@@ -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;
-}

src/lib/utils/is.ts ADDED Viewed

	@@ -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;
+}

src/lib/utils/model.ts DELETED Viewed

@@ -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);
-}

src/lib/utils/object.ts CHANGED Viewed

@@ -1,3 +1,5 @@
 // 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;
 }

+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)[];
 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;
+}

src/routes/+layout.svelte CHANGED Viewed

@@ -1,9 +1,16 @@
 <script lang="ts">
 	import "../app.css";
-	import DebugMenu from "$lib/components/DebugMenu.svelte";
-	import Prompts from "$lib/components/Prompts.svelte";
 </script>
-<slot />
 <DebugMenu />
 <Prompts />

 <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";
+	interface Props {
+		children?: import("svelte").Snippet;
+	}
+	let { children }: Props = $props();
 </script>
+{@render children?.()}
 <DebugMenu />
 <Prompts />
+<QuotaModal />

src/routes/+page.svelte CHANGED Viewed

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import InferencePlayground from "$lib/components/InferencePlayground/InferencePlayground.svelte";
 </script>
-<InferencePlayground />

 <script lang="ts">
+	import Playground from "$lib/components/inference-playground/playground.svelte";
 </script>
+<Playground />

src/routes/+page.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import type { ModelWithTokenizer } from "$lib/types";
-import type { PageLoad } from "./$types";
 export const load: PageLoad = async ({ fetch }) => {
 	const res = await fetch("/api/models");

+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");