sv 0.9.13 → 0.9.14

package/dist/bin.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import { B as We, F as Ge, H as ke, I as J, J as require_picocolors, K as up$1, L as Ke, N as De, O as isVersionUnsupportedBelow, P as Fe, R as T, U as ze, V as et, W as Vu, X as Option, Y as Command, Z as program, _ as parseScript, a as addPnpmBuildDependencies, c as installOption, et as __toESM, f as detect, g as parseJson, i as AGENT_NAMES, l as packageManagerPrompt, n as templates, o as getUserAgent, p as resolveCommand, q as from, r as dist, s as installDependencies, t as create$1, v as parseSvelte, z as Ue } from "./create-Bt2-1pFJ.js";
-import { a as formatFiles, c as getCommunityAddon, d as createDefault, f as addDefault, i as createWorkspace, l as getAddonDetails, m as overrideProperties, o as getHighlighter, p as create$2, r as setupAddons, s as communityAddonIds, t as applyAddons, u as officialAddons } from "./install-b9th3u8C.js";
+import { a as formatFiles, c as getCommunityAddon, d as createDefault, f as addDefault, i as createWorkspace, l as getAddonDetails, m as overrideProperties, o as getHighlighter, p as create$2, r as setupAddons, s as communityAddonIds, t as applyAddons, u as officialAddons } from "./install-CisPUEH8.js";
 import { exec, execSync } from "node:child_process";
 import path, { dirname, join } from "node:path";
 import fs, { existsSync } from "node:fs";
@@ -12,7 +12,7 @@ import { pipeline } from "node:stream/promises";
 
 //#region package.json
 var name = "sv";
-var version = "0.9.13";
+var version = "0.9.14";
 
 //#endregion
 //#region ../../node_modules/.pnpm/valibot@0.41.0_typescript@5.8.3/node_modules/valibot/dist/index.js

package/dist/{install-b9th3u8C.js → install-CisPUEH8.js}

@@ -773,11 +773,17 @@ function addEslintConfigPrettier(content) {
 	else elements.push(...nodesToInsert);
 	return generateCode();
 }
-function addToDemoPage(content, path$1) {
-	const { template, generateCode } = parseSvelte(content);
-	for (const node of template.ast.childNodes) if (node.type === "tag" && node.attribs["href"] === `/demo/${path$1}`) return content;
-	const newLine = template.source ? "\n" : "";
-	return generateCode({ template: template.source + `${newLine}<a href="/demo/${path$1}">${path$1}</a>` });
+function addToDemoPage(existingContent, path$1, typescript) {
+	const { script, template, generateCode } = parseSvelte(existingContent, { typescript });
+	for (const node of template.ast.childNodes) if (node.type === "tag" && node.attribs["href"].includes(`/demo/${path$1}`)) return existingContent;
+	addNamed(script.ast, {
+		imports: ["resolve"],
+		from: "$app/paths"
+	});
+	return generateCode({
+		script: script.generateCode(),
+		template: `<a href={resolve('/demo/${path$1}')}>${path$1}</a>\n${template.source}`
+	});
 }
 /**
 * Returns the corresponding `@types/node` version for the version of Node.js running in the current process.
@@ -1656,7 +1662,7 @@ var lucia_default = defineAddon({
 		});
 		if (options$7.demo) {
 			sv.file(`${kit?.routesDirectory}/demo/+page.svelte`, (content) => {
-				return addToDemoPage(content, "lucia");
+				return addToDemoPage(content, "lucia", typescript);
 			});
 			sv.file(`${kit.routesDirectory}/demo/lucia/login/+page.server.${ext}`, (content) => {
 				if (content) {
@@ -2143,7 +2149,7 @@ var paraglide_default = defineAddon({
 		});
 		if (options$7.demo) {
 			sv.file(`${kit.routesDirectory}/demo/+page.svelte`, (content) => {
-				return addToDemoPage(content, "paraglide");
+				return addToDemoPage(content, "paraglide", typescript);
 			});
 			sv.file(`${kit.routesDirectory}/demo/paraglide/+page.svelte`, (content) => {
 				const { script, template, generateCode } = parseSvelte(content, { typescript });
@@ -2279,7 +2285,10 @@ var mcp_default = defineAddon({
 				env: true
 			},
 			cursor: { filePath: ".cursor/mcp.json" },
-			gemini: { filePath: ".gemini/settings.json" },
+			gemini: {
+				schema: "https://raw.githubusercontent.com/google-gemini/gemini-cli/main/schemas/settings.schema.json",
+				filePath: ".gemini/settings.json"
+			},
 			opencode: {
 				schema: "https://opencode.ai/config.json",
 				mcpServersKey: "mcp",
@@ -2393,7 +2402,7 @@ var prettier_default = defineAddon({
 	shortDescription: "formatter",
 	homepage: "https://prettier.io",
 	options: {},
-	run: ({ sv, dependencyVersion }) => {
+	run: ({ sv, dependencyVersion, kit }) => {
 		const tailwindcssInstalled = Boolean(dependencyVersion("tailwindcss"));
 		if (tailwindcssInstalled) sv.devDependency("prettier-plugin-tailwindcss", "^0.7.1");
 		sv.devDependency("prettier", "^3.6.2");
@@ -2430,7 +2439,7 @@ var prettier_default = defineAddon({
 			const plugins$1 = data.plugins;
 			if (tailwindcssInstalled) {
 				if (!plugins$1.includes("prettier-plugin-tailwindcss")) data.plugins.unshift("prettier-plugin-tailwindcss");
-				data.tailwindStylesheet ??= "./src/app.css";
+				data.tailwindStylesheet ??= kit ? `${kit?.routesDirectory}/layout.css` : "./src/app.css";
 			}
 			if (!plugins$1.includes("prettier-plugin-svelte")) data.plugins.unshift("prettier-plugin-svelte");
 			data.overrides ??= [];
@@ -2617,6 +2626,13 @@ var tailwindcss_default = defineAddon({
 	options: options$1,
 	run: ({ sv, options: options$7, files, typescript, kit, dependencyVersion }) => {
 		const prettierInstalled = Boolean(dependencyVersion("prettier"));
+		const stylesheet = kit ? {
+			rootPath: `${kit.routesDirectory}/layout.css`,
+			relativePath: "./layout.css"
+		} : {
+			rootPath: "src/app.css",
+			relativePath: "./app.css"
+		};
 		sv.devDependency("tailwindcss", "^4.1.14");
 		sv.devDependency("@tailwindcss/vite", "^4.1.14");
 		sv.pnpmBuildDependency("@tailwindcss/oxide");
@@ -2638,7 +2654,7 @@ var tailwindcss_default = defineAddon({
 			});
 			return generateCode();
 		});
-		sv.file("src/app.css", (content) => {
+		sv.file(stylesheet.rootPath, (content) => {
 			let atRules = parseCss(content).ast.nodes.filter((node) => node.type === "atrule");
 			const findAtRule = (name, params) => atRules.find((rule) => rule.name === name && rule.params.replace(/['"]/g, "") === params);
 			let code = content;
@@ -2658,12 +2674,12 @@ var tailwindcss_default = defineAddon({
 		});
 		if (!kit) sv.file("src/App.svelte", (content) => {
 			const { script, generateCode } = parseSvelte(content, { typescript });
-			addEmpty(script.ast, { from: "./app.css" });
+			addEmpty(script.ast, { from: stylesheet.relativePath });
 			return generateCode({ script: script.generateCode() });
 		});
 		else sv.file(`${kit?.routesDirectory}/+layout.svelte`, (content) => {
 			const { script, template, generateCode } = parseSvelte(content, { typescript });
-			addEmpty(script.ast, { from: "../app.css" });
+			addEmpty(script.ast, { from: stylesheet.relativePath });
 			if (content.length === 0) {
 				const svelteVersion = dependencyVersion("svelte");
 				if (!svelteVersion) throw new Error("Failed to determine svelte version");
@@ -2677,13 +2693,19 @@ var tailwindcss_default = defineAddon({
 				template: content.length === 0 ? template.generateCode() : void 0
 			});
 		});
+		sv.file(".vscode/settings.json", (content) => {
+			const { data, generateCode } = parseJson(content);
+			data["files.associations"] ??= {};
+			data["files.associations"]["*.css"] = "tailwind";
+			return generateCode();
+		});
 		if (prettierInstalled) sv.file(".prettierrc", (content) => {
 			const { data, generateCode } = parseJson(content);
 			const PLUGIN_NAME = "prettier-plugin-tailwindcss";
 			data.plugins ??= [];
 			const plugins$1 = data.plugins;
 			if (!plugins$1.includes(PLUGIN_NAME)) plugins$1.push(PLUGIN_NAME);
-			data.tailwindStylesheet ??= "./src/app.css";
+			data.tailwindStylesheet ??= stylesheet.rootPath;
 			return generateCode();
 		});
 	}

package/dist/lib/index.js

@@ -1,4 +1,4 @@
 import { t as create } from "../create-Bt2-1pFJ.js";
-import { n as installAddon, u as officialAddons } from "../install-b9th3u8C.js";
+import { n as installAddon, u as officialAddons } from "../install-CisPUEH8.js";
 
 export { create, installAddon, officialAddons };

package/dist/templates/demo/files.types=checkjs.json

@@ -5,7 +5,7 @@
 	},
 	{
 		"name": "src/routes/+layout.svelte",
-		"contents": "<script>\n\timport Header from './Header.svelte';\n\timport '../app.css';\n\n\t/** @type {{children: import('svelte').Snippet}} */\n\tlet { children } = $props();\n</script>\n\n<div class=\"app\">\n\t<Header />\n\n\t<main>\n\t\t{@render children()}\n\t</main>\n\n\t<footer>\n\t\t<p>\n\t\t\tvisit <a href=\"https://svelte.dev/docs/kit\">svelte.dev/docs/kit</a> to learn about SvelteKit\n\t\t</p>\n\t</footer>\n</div>\n\n<style>\n\t.app {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tmin-height: 100vh;\n\t}\n\n\tmain {\n\t\tflex: 1;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 1rem;\n\t\twidth: 100%;\n\t\tmax-width: 64rem;\n\t\tmargin: 0 auto;\n\t\tbox-sizing: border-box;\n\t}\n\n\tfooter {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tpadding: 12px;\n\t}\n\n\tfooter a {\n\t\tfont-weight: bold;\n\t}\n\n\t@media (min-width: 480px) {\n\t\tfooter {\n\t\t\tpadding: 12px 0;\n\t\t}\n\t}\n</style>\n"
+		"contents": "<script>\n\timport Header from './Header.svelte';\n\timport './layout.css';\n\n\t/** @type {{children: import('svelte').Snippet}} */\n\tlet { children } = $props();\n</script>\n\n<div class=\"app\">\n\t<Header />\n\n\t<main>\n\t\t{@render children()}\n\t</main>\n\n\t<footer>\n\t\t<p>\n\t\t\tvisit <a href=\"https://svelte.dev/docs/kit\">svelte.dev/docs/kit</a> to learn about SvelteKit\n\t\t</p>\n\t</footer>\n</div>\n\n<style>\n\t.app {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tmin-height: 100vh;\n\t}\n\n\tmain {\n\t\tflex: 1;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 1rem;\n\t\twidth: 100%;\n\t\tmax-width: 64rem;\n\t\tmargin: 0 auto;\n\t\tbox-sizing: border-box;\n\t}\n\n\tfooter {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tpadding: 12px;\n\t}\n\n\tfooter a {\n\t\tfont-weight: bold;\n\t}\n\n\t@media (min-width: 480px) {\n\t\tfooter {\n\t\t\tpadding: 12px 0;\n\t\t}\n\t}\n</style>\n"
 	},
 	{
 		"name": "src/routes/+page.svelte",
@@ -21,11 +21,11 @@
 	},
 	{
 		"name": "src/routes/Header.svelte",
-		"contents": "<script>\n\timport { page } from '$app/state';\n\timport logo from '$lib/images/svelte-logo.svg';\n\timport github from '$lib/images/github.svg';\n</script>\n\n<header>\n\t<div class=\"corner\">\n\t\t<a href=\"https://svelte.dev/docs/kit\">\n\t\t\t<img src={logo} alt=\"SvelteKit\" />\n\t\t</a>\n\t</div>\n\n\t<nav>\n\t\t<svg viewBox=\"0 0 2 3\" aria-hidden=\"true\">\n\t\t\t<path d=\"M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z\" />\n\t\t</svg>\n\t\t<ul>\n\t\t\t<li aria-current={page.url.pathname === '/' ? 'page' : undefined}>\n\t\t\t\t<a href=\"/\">Home</a>\n\t\t\t</li>\n\t\t\t<li aria-current={page.url.pathname === '/about' ? 'page' : undefined}>\n\t\t\t\t<a href=\"/about\">About</a>\n\t\t\t</li>\n\t\t\t<li aria-current={page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>\n\t\t\t\t<a href=\"/sverdle\">Sverdle</a>\n\t\t\t</li>\n\t\t</ul>\n\t\t<svg viewBox=\"0 0 2 3\" aria-hidden=\"true\">\n\t\t\t<path d=\"M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z\" />\n\t\t</svg>\n\t</nav>\n\n\t<div class=\"corner\">\n\t\t<a href=\"https://github.com/sveltejs/kit\">\n\t\t\t<img src={github} alt=\"GitHub\" />\n\t\t</a>\n\t</div>\n</header>\n\n<style>\n\theader {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t}\n\n\t.corner {\n\t\twidth: 3em;\n\t\theight: 3em;\n\t}\n\n\t.corner a {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.corner img {\n\t\twidth: 2em;\n\t\theight: 2em;\n\t\tobject-fit: contain;\n\t}\n\n\tnav {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\t--background: rgba(255, 255, 255, 0.7);\n\t}\n\n\tsvg {\n\t\twidth: 2em;\n\t\theight: 3em;\n\t\tdisplay: block;\n\t}\n\n\tpath {\n\t\tfill: var(--background);\n\t}\n\n\tul {\n\t\tposition: relative;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\theight: 3em;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tlist-style: none;\n\t\tbackground: var(--background);\n\t\tbackground-size: contain;\n\t}\n\n\tli {\n\t\tposition: relative;\n\t\theight: 100%;\n\t}\n\n\tli[aria-current='page']::before {\n\t\t--size: 6px;\n\t\tcontent: '';\n\t\twidth: 0;\n\t\theight: 0;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: calc(50% - var(--size));\n\t\tborder: var(--size) solid transparent;\n\t\tborder-top: var(--size) solid var(--color-theme-1);\n\t}\n\n\tnav a {\n\t\tdisplay: flex;\n\t\theight: 100%;\n\t\talign-items: center;\n\t\tpadding: 0 0.5rem;\n\t\tcolor: var(--color-text);\n\t\tfont-weight: 700;\n\t\tfont-size: 0.8rem;\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.1em;\n\t\ttext-decoration: none;\n\t\ttransition: color 0.2s linear;\n\t}\n\n\ta:hover {\n\t\tcolor: var(--color-theme-1);\n\t}\n</style>\n"
+		"contents": "<script>\n\timport { resolve } from '$app/paths';\n\timport { page } from '$app/state';\n\timport logo from '$lib/images/svelte-logo.svg';\n\timport github from '$lib/images/github.svg';\n</script>\n\n<header>\n\t<div class=\"corner\">\n\t\t<a href=\"https://svelte.dev/docs/kit\">\n\t\t\t<img src={logo} alt=\"SvelteKit\" />\n\t\t</a>\n\t</div>\n\n\t<nav>\n\t\t<svg viewBox=\"0 0 2 3\" aria-hidden=\"true\">\n\t\t\t<path d=\"M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z\" />\n\t\t</svg>\n\t\t<ul>\n\t\t\t<li aria-current={page.url.pathname === '/' ? 'page' : undefined}>\n\t\t\t\t<a href={resolve('/')}>Home</a>\n\t\t\t</li>\n\t\t\t<li aria-current={page.url.pathname === '/about' ? 'page' : undefined}>\n\t\t\t\t<a href={resolve('/about')}>About</a>\n\t\t\t</li>\n\t\t\t<li aria-current={page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>\n\t\t\t\t<a href={resolve('/sverdle')}>Sverdle</a>\n\t\t\t</li>\n\t\t</ul>\n\t\t<svg viewBox=\"0 0 2 3\" aria-hidden=\"true\">\n\t\t\t<path d=\"M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z\" />\n\t\t</svg>\n\t</nav>\n\n\t<div class=\"corner\">\n\t\t<a href=\"https://github.com/sveltejs/kit\">\n\t\t\t<img src={github} alt=\"GitHub\" />\n\t\t</a>\n\t</div>\n</header>\n\n<style>\n\theader {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t}\n\n\t.corner {\n\t\twidth: 3em;\n\t\theight: 3em;\n\t}\n\n\t.corner a {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.corner img {\n\t\twidth: 2em;\n\t\theight: 2em;\n\t\tobject-fit: contain;\n\t}\n\n\tnav {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\t--background: rgba(255, 255, 255, 0.7);\n\t}\n\n\tsvg {\n\t\twidth: 2em;\n\t\theight: 3em;\n\t\tdisplay: block;\n\t}\n\n\tpath {\n\t\tfill: var(--background);\n\t}\n\n\tul {\n\t\tposition: relative;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\theight: 3em;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tlist-style: none;\n\t\tbackground: var(--background);\n\t\tbackground-size: contain;\n\t}\n\n\tli {\n\t\tposition: relative;\n\t\theight: 100%;\n\t}\n\n\tli[aria-current='page']::before {\n\t\t--size: 6px;\n\t\tcontent: '';\n\t\twidth: 0;\n\t\theight: 0;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: calc(50% - var(--size));\n\t\tborder: var(--size) solid transparent;\n\t\tborder-top: var(--size) solid var(--color-theme-1);\n\t}\n\n\tnav a {\n\t\tdisplay: flex;\n\t\theight: 100%;\n\t\talign-items: center;\n\t\tpadding: 0 0.5rem;\n\t\tcolor: var(--color-text);\n\t\tfont-weight: 700;\n\t\tfont-size: 0.8rem;\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.1em;\n\t\ttext-decoration: none;\n\t\ttransition: color 0.2s linear;\n\t}\n\n\ta:hover {\n\t\tcolor: var(--color-theme-1);\n\t}\n</style>\n"
 	},
 	{
 		"name": "src/routes/about/+page.svelte",
-		"contents": "<svelte:head>\n\t<title>About</title>\n\t<meta name=\"description\" content=\"About this app\" />\n</svelte:head>\n\n<div class=\"text-column\">\n\t<h1>About this app</h1>\n\n\t<p>\n\t\tThis is a <a href=\"https://svelte.dev/docs/kit\">SvelteKit</a> app. You can make your own by typing\n\t\tthe following into your command line and following the prompts:\n\t</p>\n\n\t<pre>npx sv create</pre>\n\n\t<p>\n\t\tThe page you're looking at is purely static HTML, with no client-side interactivity needed.\n\t\tBecause of that, we don't need to load any JavaScript. Try viewing the page's source, or opening\n\t\tthe devtools network panel and reloading.\n\t</p>\n\n\t<p>\n\t\tThe <a href=\"/sverdle\">Sverdle</a> page illustrates SvelteKit's data loading and form handling. Try\n\t\tusing it with JavaScript disabled!\n\t</p>\n</div>\n"
+		"contents": "<script>\n\timport { resolve } from '$app/paths';\n</script>\n\n<svelte:head>\n\t<title>About</title>\n\t<meta name=\"description\" content=\"About this app\" />\n</svelte:head>\n\n<div class=\"text-column\">\n\t<h1>About this app</h1>\n\n\t<p>\n\t\tThis is a <a href=\"https://svelte.dev/docs/kit\">SvelteKit</a> app. You can make your own by typing\n\t\tthe following into your command line and following the prompts:\n\t</p>\n\n\t<pre>npx sv create</pre>\n\n\t<p>\n\t\tThe page you're looking at is purely static HTML, with no client-side interactivity needed.\n\t\tBecause of that, we don't need to load any JavaScript. Try viewing the page's source, or opening\n\t\tthe devtools network panel and reloading.\n\t</p>\n\n\t<p>\n\t\tThe <a href={resolve('/sverdle')}>Sverdle</a> page illustrates SvelteKit's data loading and form\n\t\thandling. Try using it with JavaScript disabled!\n\t</p>\n</div>\n"
 	},
 	{
 		"name": "src/routes/about/+page.js",
@@ -37,7 +37,7 @@
 	},
 	{
 		"name": "src/routes/sverdle/+page.svelte",
-		"contents": "<script>\n\timport { enhance } from '$app/forms';\n\timport { confetti } from '@neoconfetti/svelte';\n\n\timport { MediaQuery } from 'svelte/reactivity';\n\n\t/**\n\t * @typedef {Object} Props\n\t * @property {import('./$types').PageData} data\n\t * @property {import('./$types').ActionData} form\n\t */\n\n\t/**\n\t * @type {Props}\n\t */\n\tlet { data, form = $bindable() } = $props();\n\n\t/** Whether the user prefers reduced motion */\n\tconst reducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)');\n\n\t/** Whether or not the user has won */\n\tlet won = $derived(data.answers.at(-1) === 'xxxxx');\n\n\t/** The index of the current guess */\n\tlet i = $derived(won ? -1 : data.answers.length);\n\n\t/** The current guess */\n\tlet currentGuess = $derived(data.guesses[i] || '');\n\n\t/** Whether the current guess can be submitted */\n\tlet submittable = $derived(currentGuess.length === 5);\n\n\tconst { classnames, description } = $derived.by(() => {\n\t\t/**\n\t\t * A map of classnames for all letters that have been guessed,\n\t\t * used for styling the keyboard\n\t\t * @type {Record<string, 'exact' | 'close' | 'missing'>}\n\t\t */\n\t\tlet classnames = {};\n\t\t/**\n\t\t * A map of descriptions for all letters that have been guessed,\n\t\t * used for adding text for assistive technology (e.g. screen readers)\n\t\t * @type {Record<string, string>}\n\t\t */\n\t\tlet description = {};\n\t\tdata.answers.forEach((answer, i) => {\n\t\t\tconst guess = data.guesses[i];\n\t\t\tfor (let i = 0; i < 5; i += 1) {\n\t\t\t\tconst letter = guess[i];\n\t\t\t\tif (answer[i] === 'x') {\n\t\t\t\t\tclassnames[letter] = 'exact';\n\t\t\t\t\tdescription[letter] = 'correct';\n\t\t\t\t} else if (!classnames[letter]) {\n\t\t\t\t\tclassnames[letter] = answer[i] === 'c' ? 'close' : 'missing';\n\t\t\t\t\tdescription[letter] = answer[i] === 'c' ? 'present' : 'absent';\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\treturn { classnames, description };\n\t});\n\n\t/**\n\t * Modify the game state without making a trip to the server,\n\t * if client-side JavaScript is enabled\n\t * @param {MouseEvent} event\n\t */\n\tfunction update(event) {\n\t\tevent.preventDefault();\n\t\tconst key = /** @type {HTMLButtonElement} */ (event.target).getAttribute('data-key');\n\n\t\tif (key === 'backspace') {\n\t\t\tcurrentGuess = currentGuess.slice(0, -1);\n\t\t\tif (form?.badGuess) form.badGuess = false;\n\t\t} else if (currentGuess.length < 5) {\n\t\t\tcurrentGuess += key;\n\t\t}\n\t}\n\n\t/**\n\t * Trigger form logic in response to a keydown event, so that\n\t * desktop users can use the keyboard to play the game\n\t * @param {KeyboardEvent} event\n\t */\n\tfunction keydown(event) {\n\t\tif (event.metaKey) return;\n\n\t\tif (event.key === 'Enter' && !submittable) return;\n\n\t\tdocument\n\t\t\t.querySelector(`[data-key=\"${event.key}\" i]`)\n\t\t\t?.dispatchEvent(new MouseEvent('click', { cancelable: true, bubbles: true }));\n\t}\n</script>\n\n<svelte:window onkeydown={keydown} />\n\n<svelte:head>\n\t<title>Sverdle</title>\n\t<meta name=\"description\" content=\"A Wordle clone written in SvelteKit\" />\n</svelte:head>\n\n<h1 class=\"visually-hidden\">Sverdle</h1>\n\n<form\n\tmethod=\"post\"\n\taction=\"?/enter\"\n\tuse:enhance={() => {\n\t\t// prevent default callback from resetting the form\n\t\treturn ({ update }) => {\n\t\t\tupdate({ reset: false });\n\t\t};\n\t}}\n>\n\t<a class=\"how-to-play\" href=\"/sverdle/how-to-play\">How to play</a>\n\n\t<div class=\"grid\" class:playing={!won} class:bad-guess={form?.badGuess}>\n\t\t{#each Array.from(Array(6).keys()) as row (row)}\n\t\t\t{@const current = row === i}\n\t\t\t<h2 class=\"visually-hidden\">Row {row + 1}</h2>\n\t\t\t<div class=\"row\" class:current>\n\t\t\t\t{#each Array.from(Array(5).keys()) as column (column)}\n\t\t\t\t\t{@const guess = current ? currentGuess : data.guesses[row]}\n\t\t\t\t\t{@const answer = data.answers[row]?.[column]}\n\t\t\t\t\t{@const value = guess?.[column] ?? ''}\n\t\t\t\t\t{@const selected = current && column === guess.length}\n\t\t\t\t\t{@const exact = answer === 'x'}\n\t\t\t\t\t{@const close = answer === 'c'}\n\t\t\t\t\t{@const missing = answer === '_'}\n\t\t\t\t\t<div class=\"letter\" class:exact class:close class:missing class:selected>\n\t\t\t\t\t\t{value}\n\t\t\t\t\t\t<span class=\"visually-hidden\">\n\t\t\t\t\t\t\t{#if exact}\n\t\t\t\t\t\t\t\t(correct)\n\t\t\t\t\t\t\t{:else if close}\n\t\t\t\t\t\t\t\t(present)\n\t\t\t\t\t\t\t{:else if missing}\n\t\t\t\t\t\t\t\t(absent)\n\t\t\t\t\t\t\t{:else}\n\t\t\t\t\t\t\t\tempty\n\t\t\t\t\t\t\t{/if}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<input name=\"guess\" disabled={!current} type=\"hidden\" {value} />\n\t\t\t\t\t</div>\n\t\t\t\t{/each}\n\t\t\t</div>\n\t\t{/each}\n\t</div>\n\n\t<div class=\"controls\">\n\t\t{#if won || data.answers.length >= 6}\n\t\t\t{#if !won && data.answer}\n\t\t\t\t<p>the answer was \"{data.answer}\"</p>\n\t\t\t{/if}\n\t\t\t<button data-key=\"enter\" class=\"restart selected\" formaction=\"?/restart\">\n\t\t\t\t{won ? 'you won :)' : `game over :(`} play again?\n\t\t\t</button>\n\t\t{:else}\n\t\t\t<div class=\"keyboard\">\n\t\t\t\t<button data-key=\"enter\" class:selected={submittable} disabled={!submittable}>enter</button>\n\n\t\t\t\t<button\n\t\t\t\t\tonclick={update}\n\t\t\t\t\tdata-key=\"backspace\"\n\t\t\t\t\tformaction=\"?/update\"\n\t\t\t\t\tname=\"key\"\n\t\t\t\t\tvalue=\"backspace\"\n\t\t\t\t>\n\t\t\t\t\tback\n\t\t\t\t</button>\n\n\t\t\t\t{#each ['qwertyuiop', 'asdfghjkl', 'zxcvbnm'] as row (row)}\n\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t{#each row as letter, index (index)}\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tonclick={update}\n\t\t\t\t\t\t\t\tdata-key={letter}\n\t\t\t\t\t\t\t\tclass={classnames[letter]}\n\t\t\t\t\t\t\t\tdisabled={submittable}\n\t\t\t\t\t\t\t\tformaction=\"?/update\"\n\t\t\t\t\t\t\t\tname=\"key\"\n\t\t\t\t\t\t\t\tvalue={letter}\n\t\t\t\t\t\t\t\taria-label=\"{letter} {description[letter] || ''}\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{letter}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t{/each}\n\t\t\t\t\t</div>\n\t\t\t\t{/each}\n\t\t\t</div>\n\t\t{/if}\n\t</div>\n</form>\n\n{#if won}\n\t<div\n\t\tstyle=\"position: absolute; left: 50%; top: 30%\"\n\t\tuse:confetti={{\n\t\t\tparticleCount: reducedMotion.current ? 0 : undefined,\n\t\t\tforce: 0.7,\n\t\t\tstageWidth: window.innerWidth,\n\t\t\tstageHeight: window.innerHeight,\n\t\t\tcolors: ['#ff3e00', '#40b3ff', '#676778']\n\t\t}}\n\t></div>\n{/if}\n\n<style>\n\tform {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: 1rem;\n\t\tflex: 1;\n\t}\n\n\t.how-to-play {\n\t\tcolor: var(--color-text);\n\t}\n\n\t.how-to-play::before {\n\t\tcontent: 'i';\n\t\tdisplay: inline-block;\n\t\tfont-size: 0.8em;\n\t\tfont-weight: 900;\n\t\twidth: 1em;\n\t\theight: 1em;\n\t\tpadding: 0.2em;\n\t\tline-height: 1;\n\t\tborder: 1.5px solid var(--color-text);\n\t\tborder-radius: 50%;\n\t\ttext-align: center;\n\t\tmargin: 0 0.5em 0 0;\n\t\tposition: relative;\n\t\ttop: -0.05em;\n\t}\n\n\t.grid {\n\t\t--width: min(100vw, 40vh, 380px);\n\t\tmax-width: var(--width);\n\t\talign-self: center;\n\t\tjustify-self: center;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: flex-start;\n\t}\n\n\t.grid .row {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(5, 1fr);\n\t\tgrid-gap: 0.2rem;\n\t\tmargin: 0 0 0.2rem 0;\n\t}\n\n\t@media (prefers-reduced-motion: no-preference) {\n\t\t.grid.bad-guess .row.current {\n\t\t\tanimation: wiggle 0.5s;\n\t\t}\n\t}\n\n\t.grid.playing .row.current {\n\t\tfilter: drop-shadow(3px 3px 10px var(--color-bg-0));\n\t}\n\n\t.letter {\n\t\taspect-ratio: 1;\n\t\twidth: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\ttext-align: center;\n\t\tbox-sizing: border-box;\n\t\ttext-transform: lowercase;\n\t\tborder: none;\n\t\tfont-size: calc(0.08 * var(--width));\n\t\tborder-radius: 2px;\n\t\tbackground: white;\n\t\tmargin: 0;\n\t\tcolor: rgba(0, 0, 0, 0.7);\n\t}\n\n\t.letter.missing {\n\t\tbackground: rgba(255, 255, 255, 0.5);\n\t\tcolor: rgba(0, 0, 0, 0.5);\n\t}\n\n\t.letter.exact {\n\t\tbackground: var(--color-theme-2);\n\t\tcolor: white;\n\t}\n\n\t.letter.close {\n\t\tborder: 2px solid var(--color-theme-2);\n\t}\n\n\t.selected {\n\t\toutline: 2px solid var(--color-theme-1);\n\t}\n\n\t.controls {\n\t\ttext-align: center;\n\t\tjustify-content: center;\n\t\theight: min(18vh, 10rem);\n\t}\n\n\t.keyboard {\n\t\t--gap: 0.2rem;\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--gap);\n\t\theight: 100%;\n\t}\n\n\t.keyboard .row {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tgap: 0.2rem;\n\t\tflex: 1;\n\t}\n\n\t.keyboard button,\n\t.keyboard button:disabled {\n\t\t--size: min(8vw, 4vh, 40px);\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\twidth: var(--size);\n\t\tborder: none;\n\t\tborder-radius: 2px;\n\t\tfont-size: calc(var(--size) * 0.5);\n\t\tmargin: 0;\n\t}\n\n\t.keyboard button.exact {\n\t\tbackground: var(--color-theme-2);\n\t\tcolor: white;\n\t}\n\n\t.keyboard button.missing {\n\t\topacity: 0.5;\n\t}\n\n\t.keyboard button.close {\n\t\tborder: 2px solid var(--color-theme-2);\n\t}\n\n\t.keyboard button:focus {\n\t\tbackground: var(--color-theme-1);\n\t\tcolor: white;\n\t\toutline: none;\n\t}\n\n\t.keyboard button[data-key='enter'],\n\t.keyboard button[data-key='backspace'] {\n\t\tposition: absolute;\n\t\tbottom: 0;\n\t\twidth: calc(1.5 * var(--size));\n\t\theight: calc(1 / 3 * (100% - 2 * var(--gap)));\n\t\ttext-transform: uppercase;\n\t\tfont-size: calc(0.3 * var(--size));\n\t\tpadding-top: calc(0.15 * var(--size));\n\t}\n\n\t.keyboard button[data-key='enter'] {\n\t\tright: calc(50% + 3.5 * var(--size) + 0.8rem);\n\t}\n\n\t.keyboard button[data-key='backspace'] {\n\t\tleft: calc(50% + 3.5 * var(--size) + 0.8rem);\n\t}\n\n\t.keyboard button[data-key='enter']:disabled {\n\t\topacity: 0.5;\n\t}\n\n\t.restart {\n\t\twidth: 100%;\n\t\tpadding: 1rem;\n\t\tbackground: rgba(255, 255, 255, 0.5);\n\t\tborder-radius: 2px;\n\t\tborder: none;\n\t}\n\n\t.restart:focus,\n\t.restart:hover {\n\t\tbackground: var(--color-theme-1);\n\t\tcolor: white;\n\t\toutline: none;\n\t}\n\n\t@keyframes wiggle {\n\t\t0% {\n\t\t\ttransform: translateX(0);\n\t\t}\n\t\t10% {\n\t\t\ttransform: translateX(-2px);\n\t\t}\n\t\t30% {\n\t\t\ttransform: translateX(4px);\n\t\t}\n\t\t50% {\n\t\t\ttransform: translateX(-6px);\n\t\t}\n\t\t70% {\n\t\t\ttransform: translateX(+4px);\n\t\t}\n\t\t90% {\n\t\t\ttransform: translateX(-2px);\n\t\t}\n\t\t100% {\n\t\t\ttransform: translateX(0);\n\t\t}\n\t}\n</style>\n"
+		"contents": "<script>\n\timport { enhance } from '$app/forms';\n\timport { resolve } from '$app/paths';\n\timport { confetti } from '@neoconfetti/svelte';\n\n\timport { MediaQuery } from 'svelte/reactivity';\n\n\t/**\n\t * @typedef {Object} Props\n\t * @property {import('./$types').PageData} data\n\t * @property {import('./$types').ActionData} form\n\t */\n\n\t/**\n\t * @type {Props}\n\t */\n\tlet { data, form = $bindable() } = $props();\n\n\t/** Whether the user prefers reduced motion */\n\tconst reducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)');\n\n\t/** Whether or not the user has won */\n\tlet won = $derived(data.answers.at(-1) === 'xxxxx');\n\n\t/** The index of the current guess */\n\tlet i = $derived(won ? -1 : data.answers.length);\n\n\t/** The current guess */\n\tlet currentGuess = $derived(data.guesses[i] || '');\n\n\t/** Whether the current guess can be submitted */\n\tlet submittable = $derived(currentGuess.length === 5);\n\n\tconst { classnames, description } = $derived.by(() => {\n\t\t/**\n\t\t * A map of classnames for all letters that have been guessed,\n\t\t * used for styling the keyboard\n\t\t * @type {Record<string, 'exact' | 'close' | 'missing'>}\n\t\t */\n\t\tlet classnames = {};\n\t\t/**\n\t\t * A map of descriptions for all letters that have been guessed,\n\t\t * used for adding text for assistive technology (e.g. screen readers)\n\t\t * @type {Record<string, string>}\n\t\t */\n\t\tlet description = {};\n\t\tdata.answers.forEach((answer, i) => {\n\t\t\tconst guess = data.guesses[i];\n\t\t\tfor (let i = 0; i < 5; i += 1) {\n\t\t\t\tconst letter = guess[i];\n\t\t\t\tif (answer[i] === 'x') {\n\t\t\t\t\tclassnames[letter] = 'exact';\n\t\t\t\t\tdescription[letter] = 'correct';\n\t\t\t\t} else if (!classnames[letter]) {\n\t\t\t\t\tclassnames[letter] = answer[i] === 'c' ? 'close' : 'missing';\n\t\t\t\t\tdescription[letter] = answer[i] === 'c' ? 'present' : 'absent';\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\treturn { classnames, description };\n\t});\n\n\t/**\n\t * Modify the game state without making a trip to the server,\n\t * if client-side JavaScript is enabled\n\t * @param {MouseEvent} event\n\t */\n\tfunction update(event) {\n\t\tevent.preventDefault();\n\t\tconst key = /** @type {HTMLButtonElement} */ (event.target).getAttribute('data-key');\n\n\t\tif (key === 'backspace') {\n\t\t\tcurrentGuess = currentGuess.slice(0, -1);\n\t\t\tif (form?.badGuess) form.badGuess = false;\n\t\t} else if (currentGuess.length < 5) {\n\t\t\tcurrentGuess += key;\n\t\t}\n\t}\n\n\t/**\n\t * Trigger form logic in response to a keydown event, so that\n\t * desktop users can use the keyboard to play the game\n\t * @param {KeyboardEvent} event\n\t */\n\tfunction keydown(event) {\n\t\tif (event.metaKey) return;\n\n\t\tif (event.key === 'Enter' && !submittable) return;\n\n\t\tdocument\n\t\t\t.querySelector(`[data-key=\"${event.key}\" i]`)\n\t\t\t?.dispatchEvent(new MouseEvent('click', { cancelable: true, bubbles: true }));\n\t}\n</script>\n\n<svelte:window onkeydown={keydown} />\n\n<svelte:head>\n\t<title>Sverdle</title>\n\t<meta name=\"description\" content=\"A Wordle clone written in SvelteKit\" />\n</svelte:head>\n\n<h1 class=\"visually-hidden\">Sverdle</h1>\n\n<form\n\tmethod=\"post\"\n\taction=\"?/enter\"\n\tuse:enhance={() => {\n\t\t// prevent default callback from resetting the form\n\t\treturn ({ update }) => {\n\t\t\tupdate({ reset: false });\n\t\t};\n\t}}\n>\n\t<a class=\"how-to-play\" href={resolve('/sverdle/how-to-play')}>How to play</a>\n\n\t<div class=\"grid\" class:playing={!won} class:bad-guess={form?.badGuess}>\n\t\t{#each Array.from(Array(6).keys()) as row (row)}\n\t\t\t{@const current = row === i}\n\t\t\t<h2 class=\"visually-hidden\">Row {row + 1}</h2>\n\t\t\t<div class=\"row\" class:current>\n\t\t\t\t{#each Array.from(Array(5).keys()) as column (column)}\n\t\t\t\t\t{@const guess = current ? currentGuess : data.guesses[row]}\n\t\t\t\t\t{@const answer = data.answers[row]?.[column]}\n\t\t\t\t\t{@const value = guess?.[column] ?? ''}\n\t\t\t\t\t{@const selected = current && column === guess.length}\n\t\t\t\t\t{@const exact = answer === 'x'}\n\t\t\t\t\t{@const close = answer === 'c'}\n\t\t\t\t\t{@const missing = answer === '_'}\n\t\t\t\t\t<div class=\"letter\" class:exact class:close class:missing class:selected>\n\t\t\t\t\t\t{value}\n\t\t\t\t\t\t<span class=\"visually-hidden\">\n\t\t\t\t\t\t\t{#if exact}\n\t\t\t\t\t\t\t\t(correct)\n\t\t\t\t\t\t\t{:else if close}\n\t\t\t\t\t\t\t\t(present)\n\t\t\t\t\t\t\t{:else if missing}\n\t\t\t\t\t\t\t\t(absent)\n\t\t\t\t\t\t\t{:else}\n\t\t\t\t\t\t\t\tempty\n\t\t\t\t\t\t\t{/if}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<input name=\"guess\" disabled={!current} type=\"hidden\" {value} />\n\t\t\t\t\t</div>\n\t\t\t\t{/each}\n\t\t\t</div>\n\t\t{/each}\n\t</div>\n\n\t<div class=\"controls\">\n\t\t{#if won || data.answers.length >= 6}\n\t\t\t{#if !won && data.answer}\n\t\t\t\t<p>the answer was \"{data.answer}\"</p>\n\t\t\t{/if}\n\t\t\t<button data-key=\"enter\" class=\"restart selected\" formaction=\"?/restart\">\n\t\t\t\t{won ? 'you won :)' : `game over :(`} play again?\n\t\t\t</button>\n\t\t{:else}\n\t\t\t<div class=\"keyboard\">\n\t\t\t\t<button data-key=\"enter\" class:selected={submittable} disabled={!submittable}>enter</button>\n\n\t\t\t\t<button\n\t\t\t\t\tonclick={update}\n\t\t\t\t\tdata-key=\"backspace\"\n\t\t\t\t\tformaction=\"?/update\"\n\t\t\t\t\tname=\"key\"\n\t\t\t\t\tvalue=\"backspace\"\n\t\t\t\t>\n\t\t\t\t\tback\n\t\t\t\t</button>\n\n\t\t\t\t{#each ['qwertyuiop', 'asdfghjkl', 'zxcvbnm'] as row (row)}\n\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t{#each row as letter, index (index)}\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tonclick={update}\n\t\t\t\t\t\t\t\tdata-key={letter}\n\t\t\t\t\t\t\t\tclass={classnames[letter]}\n\t\t\t\t\t\t\t\tdisabled={submittable}\n\t\t\t\t\t\t\t\tformaction=\"?/update\"\n\t\t\t\t\t\t\t\tname=\"key\"\n\t\t\t\t\t\t\t\tvalue={letter}\n\t\t\t\t\t\t\t\taria-label=\"{letter} {description[letter] || ''}\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{letter}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t{/each}\n\t\t\t\t\t</div>\n\t\t\t\t{/each}\n\t\t\t</div>\n\t\t{/if}\n\t</div>\n</form>\n\n{#if won}\n\t<div\n\t\tstyle=\"position: absolute; left: 50%; top: 30%\"\n\t\tuse:confetti={{\n\t\t\tparticleCount: reducedMotion.current ? 0 : undefined,\n\t\t\tforce: 0.7,\n\t\t\tstageWidth: window.innerWidth,\n\t\t\tstageHeight: window.innerHeight,\n\t\t\tcolors: ['#ff3e00', '#40b3ff', '#676778']\n\t\t}}\n\t></div>\n{/if}\n\n<style>\n\tform {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: 1rem;\n\t\tflex: 1;\n\t}\n\n\t.how-to-play {\n\t\tcolor: var(--color-text);\n\t}\n\n\t.how-to-play::before {\n\t\tcontent: 'i';\n\t\tdisplay: inline-block;\n\t\tfont-size: 0.8em;\n\t\tfont-weight: 900;\n\t\twidth: 1em;\n\t\theight: 1em;\n\t\tpadding: 0.2em;\n\t\tline-height: 1;\n\t\tborder: 1.5px solid var(--color-text);\n\t\tborder-radius: 50%;\n\t\ttext-align: center;\n\t\tmargin: 0 0.5em 0 0;\n\t\tposition: relative;\n\t\ttop: -0.05em;\n\t}\n\n\t.grid {\n\t\t--width: min(100vw, 40vh, 380px);\n\t\tmax-width: var(--width);\n\t\talign-self: center;\n\t\tjustify-self: center;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: flex-start;\n\t}\n\n\t.grid .row {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(5, 1fr);\n\t\tgrid-gap: 0.2rem;\n\t\tmargin: 0 0 0.2rem 0;\n\t}\n\n\t@media (prefers-reduced-motion: no-preference) {\n\t\t.grid.bad-guess .row.current {\n\t\t\tanimation: wiggle 0.5s;\n\t\t}\n\t}\n\n\t.grid.playing .row.current {\n\t\tfilter: drop-shadow(3px 3px 10px var(--color-bg-0));\n\t}\n\n\t.letter {\n\t\taspect-ratio: 1;\n\t\twidth: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\ttext-align: center;\n\t\tbox-sizing: border-box;\n\t\ttext-transform: lowercase;\n\t\tborder: none;\n\t\tfont-size: calc(0.08 * var(--width));\n\t\tborder-radius: 2px;\n\t\tbackground: white;\n\t\tmargin: 0;\n\t\tcolor: rgba(0, 0, 0, 0.7);\n\t}\n\n\t.letter.missing {\n\t\tbackground: rgba(255, 255, 255, 0.5);\n\t\tcolor: rgba(0, 0, 0, 0.5);\n\t}\n\n\t.letter.exact {\n\t\tbackground: var(--color-theme-2);\n\t\tcolor: white;\n\t}\n\n\t.letter.close {\n\t\tborder: 2px solid var(--color-theme-2);\n\t}\n\n\t.selected {\n\t\toutline: 2px solid var(--color-theme-1);\n\t}\n\n\t.controls {\n\t\ttext-align: center;\n\t\tjustify-content: center;\n\t\theight: min(18vh, 10rem);\n\t}\n\n\t.keyboard {\n\t\t--gap: 0.2rem;\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--gap);\n\t\theight: 100%;\n\t}\n\n\t.keyboard .row {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tgap: 0.2rem;\n\t\tflex: 1;\n\t}\n\n\t.keyboard button,\n\t.keyboard button:disabled {\n\t\t--size: min(8vw, 4vh, 40px);\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\twidth: var(--size);\n\t\tborder: none;\n\t\tborder-radius: 2px;\n\t\tfont-size: calc(var(--size) * 0.5);\n\t\tmargin: 0;\n\t}\n\n\t.keyboard button.exact {\n\t\tbackground: var(--color-theme-2);\n\t\tcolor: white;\n\t}\n\n\t.keyboard button.missing {\n\t\topacity: 0.5;\n\t}\n\n\t.keyboard button.close {\n\t\tborder: 2px solid var(--color-theme-2);\n\t}\n\n\t.keyboard button:focus {\n\t\tbackground: var(--color-theme-1);\n\t\tcolor: white;\n\t\toutline: none;\n\t}\n\n\t.keyboard button[data-key='enter'],\n\t.keyboard button[data-key='backspace'] {\n\t\tposition: absolute;\n\t\tbottom: 0;\n\t\twidth: calc(1.5 * var(--size));\n\t\theight: calc(1 / 3 * (100% - 2 * var(--gap)));\n\t\ttext-transform: uppercase;\n\t\tfont-size: calc(0.3 * var(--size));\n\t\tpadding-top: calc(0.15 * var(--size));\n\t}\n\n\t.keyboard button[data-key='enter'] {\n\t\tright: calc(50% + 3.5 * var(--size) + 0.8rem);\n\t}\n\n\t.keyboard button[data-key='backspace'] {\n\t\tleft: calc(50% + 3.5 * var(--size) + 0.8rem);\n\t}\n\n\t.keyboard button[data-key='enter']:disabled {\n\t\topacity: 0.5;\n\t}\n\n\t.restart {\n\t\twidth: 100%;\n\t\tpadding: 1rem;\n\t\tbackground: rgba(255, 255, 255, 0.5);\n\t\tborder-radius: 2px;\n\t\tborder: none;\n\t}\n\n\t.restart:focus,\n\t.restart:hover {\n\t\tbackground: var(--color-theme-1);\n\t\tcolor: white;\n\t\toutline: none;\n\t}\n\n\t@keyframes wiggle {\n\t\t0% {\n\t\t\ttransform: translateX(0);\n\t\t}\n\t\t10% {\n\t\t\ttransform: translateX(-2px);\n\t\t}\n\t\t30% {\n\t\t\ttransform: translateX(4px);\n\t\t}\n\t\t50% {\n\t\t\ttransform: translateX(-6px);\n\t\t}\n\t\t70% {\n\t\t\ttransform: translateX(+4px);\n\t\t}\n\t\t90% {\n\t\t\ttransform: translateX(-2px);\n\t\t}\n\t\t100% {\n\t\t\ttransform: translateX(0);\n\t\t}\n\t}\n</style>\n"
 	},
 	{
 		"name": "src/routes/sverdle/game.js",

package/dist/templates/demo/files.types=none.json

@@ -1,7 +1,7 @@
 [
 	{
 		"name": "src/routes/+layout.svelte",
-		"contents": "<script>\n\timport Header from './Header.svelte';\n\timport '../app.css';\n\n\tlet { children } = $props();\n</script>\n\n<div class=\"app\">\n\t<Header />\n\n\t<main>\n\t\t{@render children()}\n\t</main>\n\n\t<footer>\n\t\t<p>\n\t\t\tvisit <a href=\"https://svelte.dev/docs/kit\">svelte.dev/docs/kit</a> to learn about SvelteKit\n\t\t</p>\n\t</footer>\n</div>\n\n<style>\n\t.app {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tmin-height: 100vh;\n\t}\n\n\tmain {\n\t\tflex: 1;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 1rem;\n\t\twidth: 100%;\n\t\tmax-width: 64rem;\n\t\tmargin: 0 auto;\n\t\tbox-sizing: border-box;\n\t}\n\n\tfooter {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tpadding: 12px;\n\t}\n\n\tfooter a {\n\t\tfont-weight: bold;\n\t}\n\n\t@media (min-width: 480px) {\n\t\tfooter {\n\t\t\tpadding: 12px 0;\n\t\t}\n\t}\n</style>\n"
+		"contents": "<script>\n\timport Header from './Header.svelte';\n\timport './layout.css';\n\n\tlet { children } = $props();\n</script>\n\n<div class=\"app\">\n\t<Header />\n\n\t<main>\n\t\t{@render children()}\n\t</main>\n\n\t<footer>\n\t\t<p>\n\t\t\tvisit <a href=\"https://svelte.dev/docs/kit\">svelte.dev/docs/kit</a> to learn about SvelteKit\n\t\t</p>\n\t</footer>\n</div>\n\n<style>\n\t.app {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tmin-height: 100vh;\n\t}\n\n\tmain {\n\t\tflex: 1;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 1rem;\n\t\twidth: 100%;\n\t\tmax-width: 64rem;\n\t\tmargin: 0 auto;\n\t\tbox-sizing: border-box;\n\t}\n\n\tfooter {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tpadding: 12px;\n\t}\n\n\tfooter a {\n\t\tfont-weight: bold;\n\t}\n\n\t@media (min-width: 480px) {\n\t\tfooter {\n\t\t\tpadding: 12px 0;\n\t\t}\n\t}\n</style>\n"
 	},
 	{
 		"name": "src/routes/+page.svelte",
@@ -17,11 +17,11 @@
 	},
 	{
 		"name": "src/routes/Header.svelte",
-		"contents": "<script>\n\timport { page } from '$app/state';\n\timport logo from '$lib/images/svelte-logo.svg';\n\timport github from '$lib/images/github.svg';\n</script>\n\n<header>\n\t<div class=\"corner\">\n\t\t<a href=\"https://svelte.dev/docs/kit\">\n\t\t\t<img src={logo} alt=\"SvelteKit\" />\n\t\t</a>\n\t</div>\n\n\t<nav>\n\t\t<svg viewBox=\"0 0 2 3\" aria-hidden=\"true\">\n\t\t\t<path d=\"M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z\" />\n\t\t</svg>\n\t\t<ul>\n\t\t\t<li aria-current={page.url.pathname === '/' ? 'page' : undefined}>\n\t\t\t\t<a href=\"/\">Home</a>\n\t\t\t</li>\n\t\t\t<li aria-current={page.url.pathname === '/about' ? 'page' : undefined}>\n\t\t\t\t<a href=\"/about\">About</a>\n\t\t\t</li>\n\t\t\t<li aria-current={page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>\n\t\t\t\t<a href=\"/sverdle\">Sverdle</a>\n\t\t\t</li>\n\t\t</ul>\n\t\t<svg viewBox=\"0 0 2 3\" aria-hidden=\"true\">\n\t\t\t<path d=\"M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z\" />\n\t\t</svg>\n\t</nav>\n\n\t<div class=\"corner\">\n\t\t<a href=\"https://github.com/sveltejs/kit\">\n\t\t\t<img src={github} alt=\"GitHub\" />\n\t\t</a>\n\t</div>\n</header>\n\n<style>\n\theader {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t}\n\n\t.corner {\n\t\twidth: 3em;\n\t\theight: 3em;\n\t}\n\n\t.corner a {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.corner img {\n\t\twidth: 2em;\n\t\theight: 2em;\n\t\tobject-fit: contain;\n\t}\n\n\tnav {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\t--background: rgba(255, 255, 255, 0.7);\n\t}\n\n\tsvg {\n\t\twidth: 2em;\n\t\theight: 3em;\n\t\tdisplay: block;\n\t}\n\n\tpath {\n\t\tfill: var(--background);\n\t}\n\n\tul {\n\t\tposition: relative;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\theight: 3em;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tlist-style: none;\n\t\tbackground: var(--background);\n\t\tbackground-size: contain;\n\t}\n\n\tli {\n\t\tposition: relative;\n\t\theight: 100%;\n\t}\n\n\tli[aria-current='page']::before {\n\t\t--size: 6px;\n\t\tcontent: '';\n\t\twidth: 0;\n\t\theight: 0;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: calc(50% - var(--size));\n\t\tborder: var(--size) solid transparent;\n\t\tborder-top: var(--size) solid var(--color-theme-1);\n\t}\n\n\tnav a {\n\t\tdisplay: flex;\n\t\theight: 100%;\n\t\talign-items: center;\n\t\tpadding: 0 0.5rem;\n\t\tcolor: var(--color-text);\n\t\tfont-weight: 700;\n\t\tfont-size: 0.8rem;\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.1em;\n\t\ttext-decoration: none;\n\t\ttransition: color 0.2s linear;\n\t}\n\n\ta:hover {\n\t\tcolor: var(--color-theme-1);\n\t}\n</style>\n"
+		"contents": "<script>\n\timport { resolve } from '$app/paths';\n\timport { page } from '$app/state';\n\timport logo from '$lib/images/svelte-logo.svg';\n\timport github from '$lib/images/github.svg';\n</script>\n\n<header>\n\t<div class=\"corner\">\n\t\t<a href=\"https://svelte.dev/docs/kit\">\n\t\t\t<img src={logo} alt=\"SvelteKit\" />\n\t\t</a>\n\t</div>\n\n\t<nav>\n\t\t<svg viewBox=\"0 0 2 3\" aria-hidden=\"true\">\n\t\t\t<path d=\"M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z\" />\n\t\t</svg>\n\t\t<ul>\n\t\t\t<li aria-current={page.url.pathname === '/' ? 'page' : undefined}>\n\t\t\t\t<a href={resolve('/')}>Home</a>\n\t\t\t</li>\n\t\t\t<li aria-current={page.url.pathname === '/about' ? 'page' : undefined}>\n\t\t\t\t<a href={resolve('/about')}>About</a>\n\t\t\t</li>\n\t\t\t<li aria-current={page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>\n\t\t\t\t<a href={resolve('/sverdle')}>Sverdle</a>\n\t\t\t</li>\n\t\t</ul>\n\t\t<svg viewBox=\"0 0 2 3\" aria-hidden=\"true\">\n\t\t\t<path d=\"M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z\" />\n\t\t</svg>\n\t</nav>\n\n\t<div class=\"corner\">\n\t\t<a href=\"https://github.com/sveltejs/kit\">\n\t\t\t<img src={github} alt=\"GitHub\" />\n\t\t</a>\n\t</div>\n</header>\n\n<style>\n\theader {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t}\n\n\t.corner {\n\t\twidth: 3em;\n\t\theight: 3em;\n\t}\n\n\t.corner a {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.corner img {\n\t\twidth: 2em;\n\t\theight: 2em;\n\t\tobject-fit: contain;\n\t}\n\n\tnav {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\t--background: rgba(255, 255, 255, 0.7);\n\t}\n\n\tsvg {\n\t\twidth: 2em;\n\t\theight: 3em;\n\t\tdisplay: block;\n\t}\n\n\tpath {\n\t\tfill: var(--background);\n\t}\n\n\tul {\n\t\tposition: relative;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\theight: 3em;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tlist-style: none;\n\t\tbackground: var(--background);\n\t\tbackground-size: contain;\n\t}\n\n\tli {\n\t\tposition: relative;\n\t\theight: 100%;\n\t}\n\n\tli[aria-current='page']::before {\n\t\t--size: 6px;\n\t\tcontent: '';\n\t\twidth: 0;\n\t\theight: 0;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: calc(50% - var(--size));\n\t\tborder: var(--size) solid transparent;\n\t\tborder-top: var(--size) solid var(--color-theme-1);\n\t}\n\n\tnav a {\n\t\tdisplay: flex;\n\t\theight: 100%;\n\t\talign-items: center;\n\t\tpadding: 0 0.5rem;\n\t\tcolor: var(--color-text);\n\t\tfont-weight: 700;\n\t\tfont-size: 0.8rem;\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.1em;\n\t\ttext-decoration: none;\n\t\ttransition: color 0.2s linear;\n\t}\n\n\ta:hover {\n\t\tcolor: var(--color-theme-1);\n\t}\n</style>\n"
 	},
 	{
 		"name": "src/routes/about/+page.svelte",
-		"contents": "<svelte:head>\n\t<title>About</title>\n\t<meta name=\"description\" content=\"About this app\" />\n</svelte:head>\n\n<div class=\"text-column\">\n\t<h1>About this app</h1>\n\n\t<p>\n\t\tThis is a <a href=\"https://svelte.dev/docs/kit\">SvelteKit</a> app. You can make your own by typing\n\t\tthe following into your command line and following the prompts:\n\t</p>\n\n\t<pre>npx sv create</pre>\n\n\t<p>\n\t\tThe page you're looking at is purely static HTML, with no client-side interactivity needed.\n\t\tBecause of that, we don't need to load any JavaScript. Try viewing the page's source, or opening\n\t\tthe devtools network panel and reloading.\n\t</p>\n\n\t<p>\n\t\tThe <a href=\"/sverdle\">Sverdle</a> page illustrates SvelteKit's data loading and form handling. Try\n\t\tusing it with JavaScript disabled!\n\t</p>\n</div>\n"
+		"contents": "<script>\n\timport { resolve } from '$app/paths';\n</script>\n\n<svelte:head>\n\t<title>About</title>\n\t<meta name=\"description\" content=\"About this app\" />\n</svelte:head>\n\n<div class=\"text-column\">\n\t<h1>About this app</h1>\n\n\t<p>\n\t\tThis is a <a href=\"https://svelte.dev/docs/kit\">SvelteKit</a> app. You can make your own by typing\n\t\tthe following into your command line and following the prompts:\n\t</p>\n\n\t<pre>npx sv create</pre>\n\n\t<p>\n\t\tThe page you're looking at is purely static HTML, with no client-side interactivity needed.\n\t\tBecause of that, we don't need to load any JavaScript. Try viewing the page's source, or opening\n\t\tthe devtools network panel and reloading.\n\t</p>\n\n\t<p>\n\t\tThe <a href={resolve('/sverdle')}>Sverdle</a> page illustrates SvelteKit's data loading and form\n\t\thandling. Try using it with JavaScript disabled!\n\t</p>\n</div>\n"
 	},
 	{
 		"name": "src/routes/about/+page.js",
@@ -33,7 +33,7 @@
 	},
 	{
 		"name": "src/routes/sverdle/+page.svelte",
-		"contents": "<script>\n\timport { enhance } from '$app/forms';\n\timport { confetti } from '@neoconfetti/svelte';\n\n\timport { MediaQuery } from 'svelte/reactivity';\n\n\tlet { data, form = $bindable() } = $props();\n\n\t/** Whether the user prefers reduced motion */\n\tconst reducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)');\n\n\t/** Whether or not the user has won */\n\tlet won = $derived(data.answers.at(-1) === 'xxxxx');\n\n\t/** The index of the current guess */\n\tlet i = $derived(won ? -1 : data.answers.length);\n\n\t/** The current guess */\n\tlet currentGuess = $derived(data.guesses[i] || '');\n\n\t/** Whether the current guess can be submitted */\n\tlet submittable = $derived(currentGuess.length === 5);\n\n\tconst { classnames, description } = $derived.by(() => {\n\t\t/**\n\t\t * A map of classnames for all letters that have been guessed,\n\t\t * used for styling the keyboard\n\t\t */\n\t\tlet classnames = {};\n\t\t/**\n\t\t * A map of descriptions for all letters that have been guessed,\n\t\t * used for adding text for assistive technology (e.g. screen readers)\n\t\t */\n\t\tlet description = {};\n\t\tdata.answers.forEach((answer, i) => {\n\t\t\tconst guess = data.guesses[i];\n\t\t\tfor (let i = 0; i < 5; i += 1) {\n\t\t\t\tconst letter = guess[i];\n\t\t\t\tif (answer[i] === 'x') {\n\t\t\t\t\tclassnames[letter] = 'exact';\n\t\t\t\t\tdescription[letter] = 'correct';\n\t\t\t\t} else if (!classnames[letter]) {\n\t\t\t\t\tclassnames[letter] = answer[i] === 'c' ? 'close' : 'missing';\n\t\t\t\t\tdescription[letter] = answer[i] === 'c' ? 'present' : 'absent';\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\treturn { classnames, description };\n\t});\n\n\t/**\n\t * Modify the game state without making a trip to the server,\n\t * if client-side JavaScript is enabled\n\t */\n\tfunction update(event) {\n\t\tevent.preventDefault();\n\t\tconst key = (event.target).getAttribute('data-key');\n\n\t\tif (key === 'backspace') {\n\t\t\tcurrentGuess = currentGuess.slice(0, -1);\n\t\t\tif (form?.badGuess) form.badGuess = false;\n\t\t} else if (currentGuess.length < 5) {\n\t\t\tcurrentGuess += key;\n\t\t}\n\t}\n\n\t/**\n\t * Trigger form logic in response to a keydown event, so that\n\t * desktop users can use the keyboard to play the game\n\t */\n\tfunction keydown(event) {\n\t\tif (event.metaKey) return;\n\n\t\tif (event.key === 'Enter' && !submittable) return;\n\n\t\tdocument\n\t\t\t.querySelector(`[data-key=\"${event.key}\" i]`)\n\t\t\t?.dispatchEvent(new MouseEvent('click', { cancelable: true, bubbles: true }));\n\t}\n</script>\n\n<svelte:window onkeydown={keydown} />\n\n<svelte:head>\n\t<title>Sverdle</title>\n\t<meta name=\"description\" content=\"A Wordle clone written in SvelteKit\" />\n</svelte:head>\n\n<h1 class=\"visually-hidden\">Sverdle</h1>\n\n<form\n\tmethod=\"post\"\n\taction=\"?/enter\"\n\tuse:enhance={() => {\n\t\t// prevent default callback from resetting the form\n\t\treturn ({ update }) => {\n\t\t\tupdate({ reset: false });\n\t\t};\n\t}}\n>\n\t<a class=\"how-to-play\" href=\"/sverdle/how-to-play\">How to play</a>\n\n\t<div class=\"grid\" class:playing={!won} class:bad-guess={form?.badGuess}>\n\t\t{#each Array.from(Array(6).keys()) as row (row)}\n\t\t\t{@const current = row === i}\n\t\t\t<h2 class=\"visually-hidden\">Row {row + 1}</h2>\n\t\t\t<div class=\"row\" class:current>\n\t\t\t\t{#each Array.from(Array(5).keys()) as column (column)}\n\t\t\t\t\t{@const guess = current ? currentGuess : data.guesses[row]}\n\t\t\t\t\t{@const answer = data.answers[row]?.[column]}\n\t\t\t\t\t{@const value = guess?.[column] ?? ''}\n\t\t\t\t\t{@const selected = current && column === guess.length}\n\t\t\t\t\t{@const exact = answer === 'x'}\n\t\t\t\t\t{@const close = answer === 'c'}\n\t\t\t\t\t{@const missing = answer === '_'}\n\t\t\t\t\t<div class=\"letter\" class:exact class:close class:missing class:selected>\n\t\t\t\t\t\t{value}\n\t\t\t\t\t\t<span class=\"visually-hidden\">\n\t\t\t\t\t\t\t{#if exact}\n\t\t\t\t\t\t\t\t(correct)\n\t\t\t\t\t\t\t{:else if close}\n\t\t\t\t\t\t\t\t(present)\n\t\t\t\t\t\t\t{:else if missing}\n\t\t\t\t\t\t\t\t(absent)\n\t\t\t\t\t\t\t{:else}\n\t\t\t\t\t\t\t\tempty\n\t\t\t\t\t\t\t{/if}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<input name=\"guess\" disabled={!current} type=\"hidden\" {value} />\n\t\t\t\t\t</div>\n\t\t\t\t{/each}\n\t\t\t</div>\n\t\t{/each}\n\t</div>\n\n\t<div class=\"controls\">\n\t\t{#if won || data.answers.length >= 6}\n\t\t\t{#if !won && data.answer}\n\t\t\t\t<p>the answer was \"{data.answer}\"</p>\n\t\t\t{/if}\n\t\t\t<button data-key=\"enter\" class=\"restart selected\" formaction=\"?/restart\">\n\t\t\t\t{won ? 'you won :)' : `game over :(`} play again?\n\t\t\t</button>\n\t\t{:else}\n\t\t\t<div class=\"keyboard\">\n\t\t\t\t<button data-key=\"enter\" class:selected={submittable} disabled={!submittable}>enter</button>\n\n\t\t\t\t<button\n\t\t\t\t\tonclick={update}\n\t\t\t\t\tdata-key=\"backspace\"\n\t\t\t\t\tformaction=\"?/update\"\n\t\t\t\t\tname=\"key\"\n\t\t\t\t\tvalue=\"backspace\"\n\t\t\t\t>\n\t\t\t\t\tback\n\t\t\t\t</button>\n\n\t\t\t\t{#each ['qwertyuiop', 'asdfghjkl', 'zxcvbnm'] as row (row)}\n\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t{#each row as letter, index (index)}\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tonclick={update}\n\t\t\t\t\t\t\t\tdata-key={letter}\n\t\t\t\t\t\t\t\tclass={classnames[letter]}\n\t\t\t\t\t\t\t\tdisabled={submittable}\n\t\t\t\t\t\t\t\tformaction=\"?/update\"\n\t\t\t\t\t\t\t\tname=\"key\"\n\t\t\t\t\t\t\t\tvalue={letter}\n\t\t\t\t\t\t\t\taria-label=\"{letter} {description[letter] || ''}\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{letter}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t{/each}\n\t\t\t\t\t</div>\n\t\t\t\t{/each}\n\t\t\t</div>\n\t\t{/if}\n\t</div>\n</form>\n\n{#if won}\n\t<div\n\t\tstyle=\"position: absolute; left: 50%; top: 30%\"\n\t\tuse:confetti={{\n\t\t\tparticleCount: reducedMotion.current ? 0 : undefined,\n\t\t\tforce: 0.7,\n\t\t\tstageWidth: window.innerWidth,\n\t\t\tstageHeight: window.innerHeight,\n\t\t\tcolors: ['#ff3e00', '#40b3ff', '#676778']\n\t\t}}\n\t></div>\n{/if}\n\n<style>\n\tform {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: 1rem;\n\t\tflex: 1;\n\t}\n\n\t.how-to-play {\n\t\tcolor: var(--color-text);\n\t}\n\n\t.how-to-play::before {\n\t\tcontent: 'i';\n\t\tdisplay: inline-block;\n\t\tfont-size: 0.8em;\n\t\tfont-weight: 900;\n\t\twidth: 1em;\n\t\theight: 1em;\n\t\tpadding: 0.2em;\n\t\tline-height: 1;\n\t\tborder: 1.5px solid var(--color-text);\n\t\tborder-radius: 50%;\n\t\ttext-align: center;\n\t\tmargin: 0 0.5em 0 0;\n\t\tposition: relative;\n\t\ttop: -0.05em;\n\t}\n\n\t.grid {\n\t\t--width: min(100vw, 40vh, 380px);\n\t\tmax-width: var(--width);\n\t\talign-self: center;\n\t\tjustify-self: center;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: flex-start;\n\t}\n\n\t.grid .row {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(5, 1fr);\n\t\tgrid-gap: 0.2rem;\n\t\tmargin: 0 0 0.2rem 0;\n\t}\n\n\t@media (prefers-reduced-motion: no-preference) {\n\t\t.grid.bad-guess .row.current {\n\t\t\tanimation: wiggle 0.5s;\n\t\t}\n\t}\n\n\t.grid.playing .row.current {\n\t\tfilter: drop-shadow(3px 3px 10px var(--color-bg-0));\n\t}\n\n\t.letter {\n\t\taspect-ratio: 1;\n\t\twidth: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\ttext-align: center;\n\t\tbox-sizing: border-box;\n\t\ttext-transform: lowercase;\n\t\tborder: none;\n\t\tfont-size: calc(0.08 * var(--width));\n\t\tborder-radius: 2px;\n\t\tbackground: white;\n\t\tmargin: 0;\n\t\tcolor: rgba(0, 0, 0, 0.7);\n\t}\n\n\t.letter.missing {\n\t\tbackground: rgba(255, 255, 255, 0.5);\n\t\tcolor: rgba(0, 0, 0, 0.5);\n\t}\n\n\t.letter.exact {\n\t\tbackground: var(--color-theme-2);\n\t\tcolor: white;\n\t}\n\n\t.letter.close {\n\t\tborder: 2px solid var(--color-theme-2);\n\t}\n\n\t.selected {\n\t\toutline: 2px solid var(--color-theme-1);\n\t}\n\n\t.controls {\n\t\ttext-align: center;\n\t\tjustify-content: center;\n\t\theight: min(18vh, 10rem);\n\t}\n\n\t.keyboard {\n\t\t--gap: 0.2rem;\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--gap);\n\t\theight: 100%;\n\t}\n\n\t.keyboard .row {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tgap: 0.2rem;\n\t\tflex: 1;\n\t}\n\n\t.keyboard button,\n\t.keyboard button:disabled {\n\t\t--size: min(8vw, 4vh, 40px);\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\twidth: var(--size);\n\t\tborder: none;\n\t\tborder-radius: 2px;\n\t\tfont-size: calc(var(--size) * 0.5);\n\t\tmargin: 0;\n\t}\n\n\t.keyboard button.exact {\n\t\tbackground: var(--color-theme-2);\n\t\tcolor: white;\n\t}\n\n\t.keyboard button.missing {\n\t\topacity: 0.5;\n\t}\n\n\t.keyboard button.close {\n\t\tborder: 2px solid var(--color-theme-2);\n\t}\n\n\t.keyboard button:focus {\n\t\tbackground: var(--color-theme-1);\n\t\tcolor: white;\n\t\toutline: none;\n\t}\n\n\t.keyboard button[data-key='enter'],\n\t.keyboard button[data-key='backspace'] {\n\t\tposition: absolute;\n\t\tbottom: 0;\n\t\twidth: calc(1.5 * var(--size));\n\t\theight: calc(1 / 3 * (100% - 2 * var(--gap)));\n\t\ttext-transform: uppercase;\n\t\tfont-size: calc(0.3 * var(--size));\n\t\tpadding-top: calc(0.15 * var(--size));\n\t}\n\n\t.keyboard button[data-key='enter'] {\n\t\tright: calc(50% + 3.5 * var(--size) + 0.8rem);\n\t}\n\n\t.keyboard button[data-key='backspace'] {\n\t\tleft: calc(50% + 3.5 * var(--size) + 0.8rem);\n\t}\n\n\t.keyboard button[data-key='enter']:disabled {\n\t\topacity: 0.5;\n\t}\n\n\t.restart {\n\t\twidth: 100%;\n\t\tpadding: 1rem;\n\t\tbackground: rgba(255, 255, 255, 0.5);\n\t\tborder-radius: 2px;\n\t\tborder: none;\n\t}\n\n\t.restart:focus,\n\t.restart:hover {\n\t\tbackground: var(--color-theme-1);\n\t\tcolor: white;\n\t\toutline: none;\n\t}\n\n\t@keyframes wiggle {\n\t\t0% {\n\t\t\ttransform: translateX(0);\n\t\t}\n\t\t10% {\n\t\t\ttransform: translateX(-2px);\n\t\t}\n\t\t30% {\n\t\t\ttransform: translateX(4px);\n\t\t}\n\t\t50% {\n\t\t\ttransform: translateX(-6px);\n\t\t}\n\t\t70% {\n\t\t\ttransform: translateX(+4px);\n\t\t}\n\t\t90% {\n\t\t\ttransform: translateX(-2px);\n\t\t}\n\t\t100% {\n\t\t\ttransform: translateX(0);\n\t\t}\n\t}\n</style>\n"
+		"contents": "<script>\n\timport { enhance } from '$app/forms';\n\timport { resolve } from '$app/paths';\n\timport { confetti } from '@neoconfetti/svelte';\n\n\timport { MediaQuery } from 'svelte/reactivity';\n\n\tlet { data, form = $bindable() } = $props();\n\n\t/** Whether the user prefers reduced motion */\n\tconst reducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)');\n\n\t/** Whether or not the user has won */\n\tlet won = $derived(data.answers.at(-1) === 'xxxxx');\n\n\t/** The index of the current guess */\n\tlet i = $derived(won ? -1 : data.answers.length);\n\n\t/** The current guess */\n\tlet currentGuess = $derived(data.guesses[i] || '');\n\n\t/** Whether the current guess can be submitted */\n\tlet submittable = $derived(currentGuess.length === 5);\n\n\tconst { classnames, description } = $derived.by(() => {\n\t\t/**\n\t\t * A map of classnames for all letters that have been guessed,\n\t\t * used for styling the keyboard\n\t\t */\n\t\tlet classnames = {};\n\t\t/**\n\t\t * A map of descriptions for all letters that have been guessed,\n\t\t * used for adding text for assistive technology (e.g. screen readers)\n\t\t */\n\t\tlet description = {};\n\t\tdata.answers.forEach((answer, i) => {\n\t\t\tconst guess = data.guesses[i];\n\t\t\tfor (let i = 0; i < 5; i += 1) {\n\t\t\t\tconst letter = guess[i];\n\t\t\t\tif (answer[i] === 'x') {\n\t\t\t\t\tclassnames[letter] = 'exact';\n\t\t\t\t\tdescription[letter] = 'correct';\n\t\t\t\t} else if (!classnames[letter]) {\n\t\t\t\t\tclassnames[letter] = answer[i] === 'c' ? 'close' : 'missing';\n\t\t\t\t\tdescription[letter] = answer[i] === 'c' ? 'present' : 'absent';\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\treturn { classnames, description };\n\t});\n\n\t/**\n\t * Modify the game state without making a trip to the server,\n\t * if client-side JavaScript is enabled\n\t */\n\tfunction update(event) {\n\t\tevent.preventDefault();\n\t\tconst key = (event.target).getAttribute('data-key');\n\n\t\tif (key === 'backspace') {\n\t\t\tcurrentGuess = currentGuess.slice(0, -1);\n\t\t\tif (form?.badGuess) form.badGuess = false;\n\t\t} else if (currentGuess.length < 5) {\n\t\t\tcurrentGuess += key;\n\t\t}\n\t}\n\n\t/**\n\t * Trigger form logic in response to a keydown event, so that\n\t * desktop users can use the keyboard to play the game\n\t */\n\tfunction keydown(event) {\n\t\tif (event.metaKey) return;\n\n\t\tif (event.key === 'Enter' && !submittable) return;\n\n\t\tdocument\n\t\t\t.querySelector(`[data-key=\"${event.key}\" i]`)\n\t\t\t?.dispatchEvent(new MouseEvent('click', { cancelable: true, bubbles: true }));\n\t}\n</script>\n\n<svelte:window onkeydown={keydown} />\n\n<svelte:head>\n\t<title>Sverdle</title>\n\t<meta name=\"description\" content=\"A Wordle clone written in SvelteKit\" />\n</svelte:head>\n\n<h1 class=\"visually-hidden\">Sverdle</h1>\n\n<form\n\tmethod=\"post\"\n\taction=\"?/enter\"\n\tuse:enhance={() => {\n\t\t// prevent default callback from resetting the form\n\t\treturn ({ update }) => {\n\t\t\tupdate({ reset: false });\n\t\t};\n\t}}\n>\n\t<a class=\"how-to-play\" href={resolve('/sverdle/how-to-play')}>How to play</a>\n\n\t<div class=\"grid\" class:playing={!won} class:bad-guess={form?.badGuess}>\n\t\t{#each Array.from(Array(6).keys()) as row (row)}\n\t\t\t{@const current = row === i}\n\t\t\t<h2 class=\"visually-hidden\">Row {row + 1}</h2>\n\t\t\t<div class=\"row\" class:current>\n\t\t\t\t{#each Array.from(Array(5).keys()) as column (column)}\n\t\t\t\t\t{@const guess = current ? currentGuess : data.guesses[row]}\n\t\t\t\t\t{@const answer = data.answers[row]?.[column]}\n\t\t\t\t\t{@const value = guess?.[column] ?? ''}\n\t\t\t\t\t{@const selected = current && column === guess.length}\n\t\t\t\t\t{@const exact = answer === 'x'}\n\t\t\t\t\t{@const close = answer === 'c'}\n\t\t\t\t\t{@const missing = answer === '_'}\n\t\t\t\t\t<div class=\"letter\" class:exact class:close class:missing class:selected>\n\t\t\t\t\t\t{value}\n\t\t\t\t\t\t<span class=\"visually-hidden\">\n\t\t\t\t\t\t\t{#if exact}\n\t\t\t\t\t\t\t\t(correct)\n\t\t\t\t\t\t\t{:else if close}\n\t\t\t\t\t\t\t\t(present)\n\t\t\t\t\t\t\t{:else if missing}\n\t\t\t\t\t\t\t\t(absent)\n\t\t\t\t\t\t\t{:else}\n\t\t\t\t\t\t\t\tempty\n\t\t\t\t\t\t\t{/if}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<input name=\"guess\" disabled={!current} type=\"hidden\" {value} />\n\t\t\t\t\t</div>\n\t\t\t\t{/each}\n\t\t\t</div>\n\t\t{/each}\n\t</div>\n\n\t<div class=\"controls\">\n\t\t{#if won || data.answers.length >= 6}\n\t\t\t{#if !won && data.answer}\n\t\t\t\t<p>the answer was \"{data.answer}\"</p>\n\t\t\t{/if}\n\t\t\t<button data-key=\"enter\" class=\"restart selected\" formaction=\"?/restart\">\n\t\t\t\t{won ? 'you won :)' : `game over :(`} play again?\n\t\t\t</button>\n\t\t{:else}\n\t\t\t<div class=\"keyboard\">\n\t\t\t\t<button data-key=\"enter\" class:selected={submittable} disabled={!submittable}>enter</button>\n\n\t\t\t\t<button\n\t\t\t\t\tonclick={update}\n\t\t\t\t\tdata-key=\"backspace\"\n\t\t\t\t\tformaction=\"?/update\"\n\t\t\t\t\tname=\"key\"\n\t\t\t\t\tvalue=\"backspace\"\n\t\t\t\t>\n\t\t\t\t\tback\n\t\t\t\t</button>\n\n\t\t\t\t{#each ['qwertyuiop', 'asdfghjkl', 'zxcvbnm'] as row (row)}\n\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t{#each row as letter, index (index)}\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tonclick={update}\n\t\t\t\t\t\t\t\tdata-key={letter}\n\t\t\t\t\t\t\t\tclass={classnames[letter]}\n\t\t\t\t\t\t\t\tdisabled={submittable}\n\t\t\t\t\t\t\t\tformaction=\"?/update\"\n\t\t\t\t\t\t\t\tname=\"key\"\n\t\t\t\t\t\t\t\tvalue={letter}\n\t\t\t\t\t\t\t\taria-label=\"{letter} {description[letter] || ''}\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{letter}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t{/each}\n\t\t\t\t\t</div>\n\t\t\t\t{/each}\n\t\t\t</div>\n\t\t{/if}\n\t</div>\n</form>\n\n{#if won}\n\t<div\n\t\tstyle=\"position: absolute; left: 50%; top: 30%\"\n\t\tuse:confetti={{\n\t\t\tparticleCount: reducedMotion.current ? 0 : undefined,\n\t\t\tforce: 0.7,\n\t\t\tstageWidth: window.innerWidth,\n\t\t\tstageHeight: window.innerHeight,\n\t\t\tcolors: ['#ff3e00', '#40b3ff', '#676778']\n\t\t}}\n\t></div>\n{/if}\n\n<style>\n\tform {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: 1rem;\n\t\tflex: 1;\n\t}\n\n\t.how-to-play {\n\t\tcolor: var(--color-text);\n\t}\n\n\t.how-to-play::before {\n\t\tcontent: 'i';\n\t\tdisplay: inline-block;\n\t\tfont-size: 0.8em;\n\t\tfont-weight: 900;\n\t\twidth: 1em;\n\t\theight: 1em;\n\t\tpadding: 0.2em;\n\t\tline-height: 1;\n\t\tborder: 1.5px solid var(--color-text);\n\t\tborder-radius: 50%;\n\t\ttext-align: center;\n\t\tmargin: 0 0.5em 0 0;\n\t\tposition: relative;\n\t\ttop: -0.05em;\n\t}\n\n\t.grid {\n\t\t--width: min(100vw, 40vh, 380px);\n\t\tmax-width: var(--width);\n\t\talign-self: center;\n\t\tjustify-self: center;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: flex-start;\n\t}\n\n\t.grid .row {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(5, 1fr);\n\t\tgrid-gap: 0.2rem;\n\t\tmargin: 0 0 0.2rem 0;\n\t}\n\n\t@media (prefers-reduced-motion: no-preference) {\n\t\t.grid.bad-guess .row.current {\n\t\t\tanimation: wiggle 0.5s;\n\t\t}\n\t}\n\n\t.grid.playing .row.current {\n\t\tfilter: drop-shadow(3px 3px 10px var(--color-bg-0));\n\t}\n\n\t.letter {\n\t\taspect-ratio: 1;\n\t\twidth: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\ttext-align: center;\n\t\tbox-sizing: border-box;\n\t\ttext-transform: lowercase;\n\t\tborder: none;\n\t\tfont-size: calc(0.08 * var(--width));\n\t\tborder-radius: 2px;\n\t\tbackground: white;\n\t\tmargin: 0;\n\t\tcolor: rgba(0, 0, 0, 0.7);\n\t}\n\n\t.letter.missing {\n\t\tbackground: rgba(255, 255, 255, 0.5);\n\t\tcolor: rgba(0, 0, 0, 0.5);\n\t}\n\n\t.letter.exact {\n\t\tbackground: var(--color-theme-2);\n\t\tcolor: white;\n\t}\n\n\t.letter.close {\n\t\tborder: 2px solid var(--color-theme-2);\n\t}\n\n\t.selected {\n\t\toutline: 2px solid var(--color-theme-1);\n\t}\n\n\t.controls {\n\t\ttext-align: center;\n\t\tjustify-content: center;\n\t\theight: min(18vh, 10rem);\n\t}\n\n\t.keyboard {\n\t\t--gap: 0.2rem;\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--gap);\n\t\theight: 100%;\n\t}\n\n\t.keyboard .row {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tgap: 0.2rem;\n\t\tflex: 1;\n\t}\n\n\t.keyboard button,\n\t.keyboard button:disabled {\n\t\t--size: min(8vw, 4vh, 40px);\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\twidth: var(--size);\n\t\tborder: none;\n\t\tborder-radius: 2px;\n\t\tfont-size: calc(var(--size) * 0.5);\n\t\tmargin: 0;\n\t}\n\n\t.keyboard button.exact {\n\t\tbackground: var(--color-theme-2);\n\t\tcolor: white;\n\t}\n\n\t.keyboard button.missing {\n\t\topacity: 0.5;\n\t}\n\n\t.keyboard button.close {\n\t\tborder: 2px solid var(--color-theme-2);\n\t}\n\n\t.keyboard button:focus {\n\t\tbackground: var(--color-theme-1);\n\t\tcolor: white;\n\t\toutline: none;\n\t}\n\n\t.keyboard button[data-key='enter'],\n\t.keyboard button[data-key='backspace'] {\n\t\tposition: absolute;\n\t\tbottom: 0;\n\t\twidth: calc(1.5 * var(--size));\n\t\theight: calc(1 / 3 * (100% - 2 * var(--gap)));\n\t\ttext-transform: uppercase;\n\t\tfont-size: calc(0.3 * var(--size));\n\t\tpadding-top: calc(0.15 * var(--size));\n\t}\n\n\t.keyboard button[data-key='enter'] {\n\t\tright: calc(50% + 3.5 * var(--size) + 0.8rem);\n\t}\n\n\t.keyboard button[data-key='backspace'] {\n\t\tleft: calc(50% + 3.5 * var(--size) + 0.8rem);\n\t}\n\n\t.keyboard button[data-key='enter']:disabled {\n\t\topacity: 0.5;\n\t}\n\n\t.restart {\n\t\twidth: 100%;\n\t\tpadding: 1rem;\n\t\tbackground: rgba(255, 255, 255, 0.5);\n\t\tborder-radius: 2px;\n\t\tborder: none;\n\t}\n\n\t.restart:focus,\n\t.restart:hover {\n\t\tbackground: var(--color-theme-1);\n\t\tcolor: white;\n\t\toutline: none;\n\t}\n\n\t@keyframes wiggle {\n\t\t0% {\n\t\t\ttransform: translateX(0);\n\t\t}\n\t\t10% {\n\t\t\ttransform: translateX(-2px);\n\t\t}\n\t\t30% {\n\t\t\ttransform: translateX(4px);\n\t\t}\n\t\t50% {\n\t\t\ttransform: translateX(-6px);\n\t\t}\n\t\t70% {\n\t\t\ttransform: translateX(+4px);\n\t\t}\n\t\t90% {\n\t\t\ttransform: translateX(-2px);\n\t\t}\n\t\t100% {\n\t\t\ttransform: translateX(0);\n\t\t}\n\t}\n</style>\n"
 	},
 	{
 		"name": "src/routes/sverdle/game.js",

package/dist/templates/demo/files.types=typescript.json

@@ -5,7 +5,7 @@
 	},
 	{
 		"name": "src/routes/+layout.svelte",
-		"contents": "<script lang=\"ts\">\n\timport Header from './Header.svelte';\n\timport '../app.css';\n\n\tlet { children } = $props();\n</script>\n\n<div class=\"app\">\n\t<Header />\n\n\t<main>\n\t\t{@render children()}\n\t</main>\n\n\t<footer>\n\t\t<p>\n\t\t\tvisit <a href=\"https://svelte.dev/docs/kit\">svelte.dev/docs/kit</a> to learn about SvelteKit\n\t\t</p>\n\t</footer>\n</div>\n\n<style>\n\t.app {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tmin-height: 100vh;\n\t}\n\n\tmain {\n\t\tflex: 1;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 1rem;\n\t\twidth: 100%;\n\t\tmax-width: 64rem;\n\t\tmargin: 0 auto;\n\t\tbox-sizing: border-box;\n\t}\n\n\tfooter {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tpadding: 12px;\n\t}\n\n\tfooter a {\n\t\tfont-weight: bold;\n\t}\n\n\t@media (min-width: 480px) {\n\t\tfooter {\n\t\t\tpadding: 12px 0;\n\t\t}\n\t}\n</style>\n"
+		"contents": "<script lang=\"ts\">\n\timport Header from './Header.svelte';\n\timport './layout.css';\n\n\tlet { children } = $props();\n</script>\n\n<div class=\"app\">\n\t<Header />\n\n\t<main>\n\t\t{@render children()}\n\t</main>\n\n\t<footer>\n\t\t<p>\n\t\t\tvisit <a href=\"https://svelte.dev/docs/kit\">svelte.dev/docs/kit</a> to learn about SvelteKit\n\t\t</p>\n\t</footer>\n</div>\n\n<style>\n\t.app {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tmin-height: 100vh;\n\t}\n\n\tmain {\n\t\tflex: 1;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 1rem;\n\t\twidth: 100%;\n\t\tmax-width: 64rem;\n\t\tmargin: 0 auto;\n\t\tbox-sizing: border-box;\n\t}\n\n\tfooter {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tpadding: 12px;\n\t}\n\n\tfooter a {\n\t\tfont-weight: bold;\n\t}\n\n\t@media (min-width: 480px) {\n\t\tfooter {\n\t\t\tpadding: 12px 0;\n\t\t}\n\t}\n</style>\n"
 	},
 	{
 		"name": "src/routes/+page.svelte",
@@ -21,11 +21,11 @@
 	},
 	{
 		"name": "src/routes/Header.svelte",
-		"contents": "<script lang=\"ts\">\n\timport { page } from '$app/state';\n\timport logo from '$lib/images/svelte-logo.svg';\n\timport github from '$lib/images/github.svg';\n</script>\n\n<header>\n\t<div class=\"corner\">\n\t\t<a href=\"https://svelte.dev/docs/kit\">\n\t\t\t<img src={logo} alt=\"SvelteKit\" />\n\t\t</a>\n\t</div>\n\n\t<nav>\n\t\t<svg viewBox=\"0 0 2 3\" aria-hidden=\"true\">\n\t\t\t<path d=\"M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z\" />\n\t\t</svg>\n\t\t<ul>\n\t\t\t<li aria-current={page.url.pathname === '/' ? 'page' : undefined}>\n\t\t\t\t<a href=\"/\">Home</a>\n\t\t\t</li>\n\t\t\t<li aria-current={page.url.pathname === '/about' ? 'page' : undefined}>\n\t\t\t\t<a href=\"/about\">About</a>\n\t\t\t</li>\n\t\t\t<li aria-current={page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>\n\t\t\t\t<a href=\"/sverdle\">Sverdle</a>\n\t\t\t</li>\n\t\t</ul>\n\t\t<svg viewBox=\"0 0 2 3\" aria-hidden=\"true\">\n\t\t\t<path d=\"M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z\" />\n\t\t</svg>\n\t</nav>\n\n\t<div class=\"corner\">\n\t\t<a href=\"https://github.com/sveltejs/kit\">\n\t\t\t<img src={github} alt=\"GitHub\" />\n\t\t</a>\n\t</div>\n</header>\n\n<style>\n\theader {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t}\n\n\t.corner {\n\t\twidth: 3em;\n\t\theight: 3em;\n\t}\n\n\t.corner a {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.corner img {\n\t\twidth: 2em;\n\t\theight: 2em;\n\t\tobject-fit: contain;\n\t}\n\n\tnav {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\t--background: rgba(255, 255, 255, 0.7);\n\t}\n\n\tsvg {\n\t\twidth: 2em;\n\t\theight: 3em;\n\t\tdisplay: block;\n\t}\n\n\tpath {\n\t\tfill: var(--background);\n\t}\n\n\tul {\n\t\tposition: relative;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\theight: 3em;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tlist-style: none;\n\t\tbackground: var(--background);\n\t\tbackground-size: contain;\n\t}\n\n\tli {\n\t\tposition: relative;\n\t\theight: 100%;\n\t}\n\n\tli[aria-current='page']::before {\n\t\t--size: 6px;\n\t\tcontent: '';\n\t\twidth: 0;\n\t\theight: 0;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: calc(50% - var(--size));\n\t\tborder: var(--size) solid transparent;\n\t\tborder-top: var(--size) solid var(--color-theme-1);\n\t}\n\n\tnav a {\n\t\tdisplay: flex;\n\t\theight: 100%;\n\t\talign-items: center;\n\t\tpadding: 0 0.5rem;\n\t\tcolor: var(--color-text);\n\t\tfont-weight: 700;\n\t\tfont-size: 0.8rem;\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.1em;\n\t\ttext-decoration: none;\n\t\ttransition: color 0.2s linear;\n\t}\n\n\ta:hover {\n\t\tcolor: var(--color-theme-1);\n\t}\n</style>\n"
+		"contents": "<script lang=\"ts\">\n\timport { resolve } from '$app/paths';\n\timport { page } from '$app/state';\n\timport logo from '$lib/images/svelte-logo.svg';\n\timport github from '$lib/images/github.svg';\n</script>\n\n<header>\n\t<div class=\"corner\">\n\t\t<a href=\"https://svelte.dev/docs/kit\">\n\t\t\t<img src={logo} alt=\"SvelteKit\" />\n\t\t</a>\n\t</div>\n\n\t<nav>\n\t\t<svg viewBox=\"0 0 2 3\" aria-hidden=\"true\">\n\t\t\t<path d=\"M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z\" />\n\t\t</svg>\n\t\t<ul>\n\t\t\t<li aria-current={page.url.pathname === '/' ? 'page' : undefined}>\n\t\t\t\t<a href={resolve('/')}>Home</a>\n\t\t\t</li>\n\t\t\t<li aria-current={page.url.pathname === '/about' ? 'page' : undefined}>\n\t\t\t\t<a href={resolve('/about')}>About</a>\n\t\t\t</li>\n\t\t\t<li aria-current={page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>\n\t\t\t\t<a href={resolve('/sverdle')}>Sverdle</a>\n\t\t\t</li>\n\t\t</ul>\n\t\t<svg viewBox=\"0 0 2 3\" aria-hidden=\"true\">\n\t\t\t<path d=\"M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z\" />\n\t\t</svg>\n\t</nav>\n\n\t<div class=\"corner\">\n\t\t<a href=\"https://github.com/sveltejs/kit\">\n\t\t\t<img src={github} alt=\"GitHub\" />\n\t\t</a>\n\t</div>\n</header>\n\n<style>\n\theader {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t}\n\n\t.corner {\n\t\twidth: 3em;\n\t\theight: 3em;\n\t}\n\n\t.corner a {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.corner img {\n\t\twidth: 2em;\n\t\theight: 2em;\n\t\tobject-fit: contain;\n\t}\n\n\tnav {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\t--background: rgba(255, 255, 255, 0.7);\n\t}\n\n\tsvg {\n\t\twidth: 2em;\n\t\theight: 3em;\n\t\tdisplay: block;\n\t}\n\n\tpath {\n\t\tfill: var(--background);\n\t}\n\n\tul {\n\t\tposition: relative;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\theight: 3em;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tlist-style: none;\n\t\tbackground: var(--background);\n\t\tbackground-size: contain;\n\t}\n\n\tli {\n\t\tposition: relative;\n\t\theight: 100%;\n\t}\n\n\tli[aria-current='page']::before {\n\t\t--size: 6px;\n\t\tcontent: '';\n\t\twidth: 0;\n\t\theight: 0;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: calc(50% - var(--size));\n\t\tborder: var(--size) solid transparent;\n\t\tborder-top: var(--size) solid var(--color-theme-1);\n\t}\n\n\tnav a {\n\t\tdisplay: flex;\n\t\theight: 100%;\n\t\talign-items: center;\n\t\tpadding: 0 0.5rem;\n\t\tcolor: var(--color-text);\n\t\tfont-weight: 700;\n\t\tfont-size: 0.8rem;\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.1em;\n\t\ttext-decoration: none;\n\t\ttransition: color 0.2s linear;\n\t}\n\n\ta:hover {\n\t\tcolor: var(--color-theme-1);\n\t}\n</style>\n"
 	},
 	{
 		"name": "src/routes/about/+page.svelte",
-		"contents": "<svelte:head>\n\t<title>About</title>\n\t<meta name=\"description\" content=\"About this app\" />\n</svelte:head>\n\n<div class=\"text-column\">\n\t<h1>About this app</h1>\n\n\t<p>\n\t\tThis is a <a href=\"https://svelte.dev/docs/kit\">SvelteKit</a> app. You can make your own by typing\n\t\tthe following into your command line and following the prompts:\n\t</p>\n\n\t<pre>npx sv create</pre>\n\n\t<p>\n\t\tThe page you're looking at is purely static HTML, with no client-side interactivity needed.\n\t\tBecause of that, we don't need to load any JavaScript. Try viewing the page's source, or opening\n\t\tthe devtools network panel and reloading.\n\t</p>\n\n\t<p>\n\t\tThe <a href=\"/sverdle\">Sverdle</a> page illustrates SvelteKit's data loading and form handling. Try\n\t\tusing it with JavaScript disabled!\n\t</p>\n</div>\n"
+		"contents": "<script lang=\"ts\">\n\timport { resolve } from '$app/paths';\n</script>\n\n<svelte:head>\n\t<title>About</title>\n\t<meta name=\"description\" content=\"About this app\" />\n</svelte:head>\n\n<div class=\"text-column\">\n\t<h1>About this app</h1>\n\n\t<p>\n\t\tThis is a <a href=\"https://svelte.dev/docs/kit\">SvelteKit</a> app. You can make your own by typing\n\t\tthe following into your command line and following the prompts:\n\t</p>\n\n\t<pre>npx sv create</pre>\n\n\t<p>\n\t\tThe page you're looking at is purely static HTML, with no client-side interactivity needed.\n\t\tBecause of that, we don't need to load any JavaScript. Try viewing the page's source, or opening\n\t\tthe devtools network panel and reloading.\n\t</p>\n\n\t<p>\n\t\tThe <a href={resolve('/sverdle')}>Sverdle</a> page illustrates SvelteKit's data loading and form\n\t\thandling. Try using it with JavaScript disabled!\n\t</p>\n</div>\n"
 	},
 	{
 		"name": "src/routes/about/+page.ts",
@@ -37,7 +37,7 @@
 	},
 	{
 		"name": "src/routes/sverdle/+page.svelte",
-		"contents": "<script lang=\"ts\">\n\timport { enhance } from '$app/forms';\n\timport { confetti } from '@neoconfetti/svelte';\n\timport type { ActionData, PageData } from './$types';\n\timport { MediaQuery } from 'svelte/reactivity';\n\n\tinterface Props {\n\t\tdata: PageData;\n\t\tform: ActionData;\n\t}\n\tlet { data, form = $bindable() }: Props = $props();\n\n\t/** Whether the user prefers reduced motion */\n\tconst reducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)');\n\n\t/** Whether or not the user has won */\n\tlet won = $derived(data.answers.at(-1) === 'xxxxx');\n\n\t/** The index of the current guess */\n\tlet i = $derived(won ? -1 : data.answers.length);\n\n\t/** The current guess */\n\tlet currentGuess = $derived(data.guesses[i] || '');\n\n\t/** Whether the current guess can be submitted */\n\tlet submittable = $derived(currentGuess.length === 5);\n\n\tconst { classnames, description } = $derived.by(() => {\n\t\t/**\n\t\t * A map of classnames for all letters that have been guessed,\n\t\t * used for styling the keyboard\n\t\t */\n\t\tlet classnames: Record<string, 'exact' | 'close' | 'missing'> = {};\n\t\t/**\n\t\t * A map of descriptions for all letters that have been guessed,\n\t\t * used for adding text for assistive technology (e.g. screen readers)\n\t\t */\n\t\tlet description: Record<string, string> = {};\n\t\tdata.answers.forEach((answer, i) => {\n\t\t\tconst guess = data.guesses[i];\n\t\t\tfor (let i = 0; i < 5; i += 1) {\n\t\t\t\tconst letter = guess[i];\n\t\t\t\tif (answer[i] === 'x') {\n\t\t\t\t\tclassnames[letter] = 'exact';\n\t\t\t\t\tdescription[letter] = 'correct';\n\t\t\t\t} else if (!classnames[letter]) {\n\t\t\t\t\tclassnames[letter] = answer[i] === 'c' ? 'close' : 'missing';\n\t\t\t\t\tdescription[letter] = answer[i] === 'c' ? 'present' : 'absent';\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\treturn { classnames, description };\n\t});\n\n\t/**\n\t * Modify the game state without making a trip to the server,\n\t * if client-side JavaScript is enabled\n\t */\n\tfunction update(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tconst key = (event.target as HTMLButtonElement).getAttribute(\n\t\t\t'data-key'\n\t\t);\n\n\t\tif (key === 'backspace') {\n\t\t\tcurrentGuess = currentGuess.slice(0, -1);\n\t\t\tif (form?.badGuess) form.badGuess = false;\n\t\t} else if (currentGuess.length < 5) {\n\t\t\tcurrentGuess += key;\n\t\t}\n\t}\n\n\t/**\n\t * Trigger form logic in response to a keydown event, so that\n\t * desktop users can use the keyboard to play the game\n\t */\n\tfunction keydown(event: KeyboardEvent) {\n\t\tif (event.metaKey) return;\n\n\t\tif (event.key === 'Enter' && !submittable) return;\n\n\t\tdocument\n\t\t\t.querySelector(`[data-key=\"${event.key}\" i]`)\n\t\t\t?.dispatchEvent(new MouseEvent('click', { cancelable: true, bubbles: true }));\n\t}\n</script>\n\n<svelte:window onkeydown={keydown} />\n\n<svelte:head>\n\t<title>Sverdle</title>\n\t<meta name=\"description\" content=\"A Wordle clone written in SvelteKit\" />\n</svelte:head>\n\n<h1 class=\"visually-hidden\">Sverdle</h1>\n\n<form\n\tmethod=\"post\"\n\taction=\"?/enter\"\n\tuse:enhance={() => {\n\t\t// prevent default callback from resetting the form\n\t\treturn ({ update }) => {\n\t\t\tupdate({ reset: false });\n\t\t};\n\t}}\n>\n\t<a class=\"how-to-play\" href=\"/sverdle/how-to-play\">How to play</a>\n\n\t<div class=\"grid\" class:playing={!won} class:bad-guess={form?.badGuess}>\n\t\t{#each Array.from(Array(6).keys()) as row (row)}\n\t\t\t{@const current = row === i}\n\t\t\t<h2 class=\"visually-hidden\">Row {row + 1}</h2>\n\t\t\t<div class=\"row\" class:current>\n\t\t\t\t{#each Array.from(Array(5).keys()) as column (column)}\n\t\t\t\t\t{@const guess = current ? currentGuess : data.guesses[row]}\n\t\t\t\t\t{@const answer = data.answers[row]?.[column]}\n\t\t\t\t\t{@const value = guess?.[column] ?? ''}\n\t\t\t\t\t{@const selected = current && column === guess.length}\n\t\t\t\t\t{@const exact = answer === 'x'}\n\t\t\t\t\t{@const close = answer === 'c'}\n\t\t\t\t\t{@const missing = answer === '_'}\n\t\t\t\t\t<div class=\"letter\" class:exact class:close class:missing class:selected>\n\t\t\t\t\t\t{value}\n\t\t\t\t\t\t<span class=\"visually-hidden\">\n\t\t\t\t\t\t\t{#if exact}\n\t\t\t\t\t\t\t\t(correct)\n\t\t\t\t\t\t\t{:else if close}\n\t\t\t\t\t\t\t\t(present)\n\t\t\t\t\t\t\t{:else if missing}\n\t\t\t\t\t\t\t\t(absent)\n\t\t\t\t\t\t\t{:else}\n\t\t\t\t\t\t\t\tempty\n\t\t\t\t\t\t\t{/if}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<input name=\"guess\" disabled={!current} type=\"hidden\" {value} />\n\t\t\t\t\t</div>\n\t\t\t\t{/each}\n\t\t\t</div>\n\t\t{/each}\n\t</div>\n\n\t<div class=\"controls\">\n\t\t{#if won || data.answers.length >= 6}\n\t\t\t{#if !won && data.answer}\n\t\t\t\t<p>the answer was \"{data.answer}\"</p>\n\t\t\t{/if}\n\t\t\t<button data-key=\"enter\" class=\"restart selected\" formaction=\"?/restart\">\n\t\t\t\t{won ? 'you won :)' : `game over :(`} play again?\n\t\t\t</button>\n\t\t{:else}\n\t\t\t<div class=\"keyboard\">\n\t\t\t\t<button data-key=\"enter\" class:selected={submittable} disabled={!submittable}>enter</button>\n\n\t\t\t\t<button\n\t\t\t\t\tonclick={update}\n\t\t\t\t\tdata-key=\"backspace\"\n\t\t\t\t\tformaction=\"?/update\"\n\t\t\t\t\tname=\"key\"\n\t\t\t\t\tvalue=\"backspace\"\n\t\t\t\t>\n\t\t\t\t\tback\n\t\t\t\t</button>\n\n\t\t\t\t{#each ['qwertyuiop', 'asdfghjkl', 'zxcvbnm'] as row (row)}\n\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t{#each row as letter, index (index)}\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tonclick={update}\n\t\t\t\t\t\t\t\tdata-key={letter}\n\t\t\t\t\t\t\t\tclass={classnames[letter]}\n\t\t\t\t\t\t\t\tdisabled={submittable}\n\t\t\t\t\t\t\t\tformaction=\"?/update\"\n\t\t\t\t\t\t\t\tname=\"key\"\n\t\t\t\t\t\t\t\tvalue={letter}\n\t\t\t\t\t\t\t\taria-label=\"{letter} {description[letter] || ''}\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{letter}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t{/each}\n\t\t\t\t\t</div>\n\t\t\t\t{/each}\n\t\t\t</div>\n\t\t{/if}\n\t</div>\n</form>\n\n{#if won}\n\t<div\n\t\tstyle=\"position: absolute; left: 50%; top: 30%\"\n\t\tuse:confetti={{\n\t\t\tparticleCount: reducedMotion.current ? 0 : undefined,\n\t\t\tforce: 0.7,\n\t\t\tstageWidth: window.innerWidth,\n\t\t\tstageHeight: window.innerHeight,\n\t\t\tcolors: ['#ff3e00', '#40b3ff', '#676778']\n\t\t}}\n\t></div>\n{/if}\n\n<style>\n\tform {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: 1rem;\n\t\tflex: 1;\n\t}\n\n\t.how-to-play {\n\t\tcolor: var(--color-text);\n\t}\n\n\t.how-to-play::before {\n\t\tcontent: 'i';\n\t\tdisplay: inline-block;\n\t\tfont-size: 0.8em;\n\t\tfont-weight: 900;\n\t\twidth: 1em;\n\t\theight: 1em;\n\t\tpadding: 0.2em;\n\t\tline-height: 1;\n\t\tborder: 1.5px solid var(--color-text);\n\t\tborder-radius: 50%;\n\t\ttext-align: center;\n\t\tmargin: 0 0.5em 0 0;\n\t\tposition: relative;\n\t\ttop: -0.05em;\n\t}\n\n\t.grid {\n\t\t--width: min(100vw, 40vh, 380px);\n\t\tmax-width: var(--width);\n\t\talign-self: center;\n\t\tjustify-self: center;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: flex-start;\n\t}\n\n\t.grid .row {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(5, 1fr);\n\t\tgrid-gap: 0.2rem;\n\t\tmargin: 0 0 0.2rem 0;\n\t}\n\n\t@media (prefers-reduced-motion: no-preference) {\n\t\t.grid.bad-guess .row.current {\n\t\t\tanimation: wiggle 0.5s;\n\t\t}\n\t}\n\n\t.grid.playing .row.current {\n\t\tfilter: drop-shadow(3px 3px 10px var(--color-bg-0));\n\t}\n\n\t.letter {\n\t\taspect-ratio: 1;\n\t\twidth: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\ttext-align: center;\n\t\tbox-sizing: border-box;\n\t\ttext-transform: lowercase;\n\t\tborder: none;\n\t\tfont-size: calc(0.08 * var(--width));\n\t\tborder-radius: 2px;\n\t\tbackground: white;\n\t\tmargin: 0;\n\t\tcolor: rgba(0, 0, 0, 0.7);\n\t}\n\n\t.letter.missing {\n\t\tbackground: rgba(255, 255, 255, 0.5);\n\t\tcolor: rgba(0, 0, 0, 0.5);\n\t}\n\n\t.letter.exact {\n\t\tbackground: var(--color-theme-2);\n\t\tcolor: white;\n\t}\n\n\t.letter.close {\n\t\tborder: 2px solid var(--color-theme-2);\n\t}\n\n\t.selected {\n\t\toutline: 2px solid var(--color-theme-1);\n\t}\n\n\t.controls {\n\t\ttext-align: center;\n\t\tjustify-content: center;\n\t\theight: min(18vh, 10rem);\n\t}\n\n\t.keyboard {\n\t\t--gap: 0.2rem;\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--gap);\n\t\theight: 100%;\n\t}\n\n\t.keyboard .row {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tgap: 0.2rem;\n\t\tflex: 1;\n\t}\n\n\t.keyboard button,\n\t.keyboard button:disabled {\n\t\t--size: min(8vw, 4vh, 40px);\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\twidth: var(--size);\n\t\tborder: none;\n\t\tborder-radius: 2px;\n\t\tfont-size: calc(var(--size) * 0.5);\n\t\tmargin: 0;\n\t}\n\n\t.keyboard button.exact {\n\t\tbackground: var(--color-theme-2);\n\t\tcolor: white;\n\t}\n\n\t.keyboard button.missing {\n\t\topacity: 0.5;\n\t}\n\n\t.keyboard button.close {\n\t\tborder: 2px solid var(--color-theme-2);\n\t}\n\n\t.keyboard button:focus {\n\t\tbackground: var(--color-theme-1);\n\t\tcolor: white;\n\t\toutline: none;\n\t}\n\n\t.keyboard button[data-key='enter'],\n\t.keyboard button[data-key='backspace'] {\n\t\tposition: absolute;\n\t\tbottom: 0;\n\t\twidth: calc(1.5 * var(--size));\n\t\theight: calc(1 / 3 * (100% - 2 * var(--gap)));\n\t\ttext-transform: uppercase;\n\t\tfont-size: calc(0.3 * var(--size));\n\t\tpadding-top: calc(0.15 * var(--size));\n\t}\n\n\t.keyboard button[data-key='enter'] {\n\t\tright: calc(50% + 3.5 * var(--size) + 0.8rem);\n\t}\n\n\t.keyboard button[data-key='backspace'] {\n\t\tleft: calc(50% + 3.5 * var(--size) + 0.8rem);\n\t}\n\n\t.keyboard button[data-key='enter']:disabled {\n\t\topacity: 0.5;\n\t}\n\n\t.restart {\n\t\twidth: 100%;\n\t\tpadding: 1rem;\n\t\tbackground: rgba(255, 255, 255, 0.5);\n\t\tborder-radius: 2px;\n\t\tborder: none;\n\t}\n\n\t.restart:focus,\n\t.restart:hover {\n\t\tbackground: var(--color-theme-1);\n\t\tcolor: white;\n\t\toutline: none;\n\t}\n\n\t@keyframes wiggle {\n\t\t0% {\n\t\t\ttransform: translateX(0);\n\t\t}\n\t\t10% {\n\t\t\ttransform: translateX(-2px);\n\t\t}\n\t\t30% {\n\t\t\ttransform: translateX(4px);\n\t\t}\n\t\t50% {\n\t\t\ttransform: translateX(-6px);\n\t\t}\n\t\t70% {\n\t\t\ttransform: translateX(+4px);\n\t\t}\n\t\t90% {\n\t\t\ttransform: translateX(-2px);\n\t\t}\n\t\t100% {\n\t\t\ttransform: translateX(0);\n\t\t}\n\t}\n</style>\n"
+		"contents": "<script lang=\"ts\">\n\timport { enhance } from '$app/forms';\n\timport { resolve } from '$app/paths';\n\timport { confetti } from '@neoconfetti/svelte';\n\timport type { ActionData, PageData } from './$types';\n\timport { MediaQuery } from 'svelte/reactivity';\n\n\tinterface Props {\n\t\tdata: PageData;\n\t\tform: ActionData;\n\t}\n\tlet { data, form = $bindable() }: Props = $props();\n\n\t/** Whether the user prefers reduced motion */\n\tconst reducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)');\n\n\t/** Whether or not the user has won */\n\tlet won = $derived(data.answers.at(-1) === 'xxxxx');\n\n\t/** The index of the current guess */\n\tlet i = $derived(won ? -1 : data.answers.length);\n\n\t/** The current guess */\n\tlet currentGuess = $derived(data.guesses[i] || '');\n\n\t/** Whether the current guess can be submitted */\n\tlet submittable = $derived(currentGuess.length === 5);\n\n\tconst { classnames, description } = $derived.by(() => {\n\t\t/**\n\t\t * A map of classnames for all letters that have been guessed,\n\t\t * used for styling the keyboard\n\t\t */\n\t\tlet classnames: Record<string, 'exact' | 'close' | 'missing'> = {};\n\t\t/**\n\t\t * A map of descriptions for all letters that have been guessed,\n\t\t * used for adding text for assistive technology (e.g. screen readers)\n\t\t */\n\t\tlet description: Record<string, string> = {};\n\t\tdata.answers.forEach((answer, i) => {\n\t\t\tconst guess = data.guesses[i];\n\t\t\tfor (let i = 0; i < 5; i += 1) {\n\t\t\t\tconst letter = guess[i];\n\t\t\t\tif (answer[i] === 'x') {\n\t\t\t\t\tclassnames[letter] = 'exact';\n\t\t\t\t\tdescription[letter] = 'correct';\n\t\t\t\t} else if (!classnames[letter]) {\n\t\t\t\t\tclassnames[letter] = answer[i] === 'c' ? 'close' : 'missing';\n\t\t\t\t\tdescription[letter] = answer[i] === 'c' ? 'present' : 'absent';\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\treturn { classnames, description };\n\t});\n\n\t/**\n\t * Modify the game state without making a trip to the server,\n\t * if client-side JavaScript is enabled\n\t */\n\tfunction update(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tconst key = (event.target as HTMLButtonElement).getAttribute(\n\t\t\t'data-key'\n\t\t);\n\n\t\tif (key === 'backspace') {\n\t\t\tcurrentGuess = currentGuess.slice(0, -1);\n\t\t\tif (form?.badGuess) form.badGuess = false;\n\t\t} else if (currentGuess.length < 5) {\n\t\t\tcurrentGuess += key;\n\t\t}\n\t}\n\n\t/**\n\t * Trigger form logic in response to a keydown event, so that\n\t * desktop users can use the keyboard to play the game\n\t */\n\tfunction keydown(event: KeyboardEvent) {\n\t\tif (event.metaKey) return;\n\n\t\tif (event.key === 'Enter' && !submittable) return;\n\n\t\tdocument\n\t\t\t.querySelector(`[data-key=\"${event.key}\" i]`)\n\t\t\t?.dispatchEvent(new MouseEvent('click', { cancelable: true, bubbles: true }));\n\t}\n</script>\n\n<svelte:window onkeydown={keydown} />\n\n<svelte:head>\n\t<title>Sverdle</title>\n\t<meta name=\"description\" content=\"A Wordle clone written in SvelteKit\" />\n</svelte:head>\n\n<h1 class=\"visually-hidden\">Sverdle</h1>\n\n<form\n\tmethod=\"post\"\n\taction=\"?/enter\"\n\tuse:enhance={() => {\n\t\t// prevent default callback from resetting the form\n\t\treturn ({ update }) => {\n\t\t\tupdate({ reset: false });\n\t\t};\n\t}}\n>\n\t<a class=\"how-to-play\" href={resolve('/sverdle/how-to-play')}>How to play</a>\n\n\t<div class=\"grid\" class:playing={!won} class:bad-guess={form?.badGuess}>\n\t\t{#each Array.from(Array(6).keys()) as row (row)}\n\t\t\t{@const current = row === i}\n\t\t\t<h2 class=\"visually-hidden\">Row {row + 1}</h2>\n\t\t\t<div class=\"row\" class:current>\n\t\t\t\t{#each Array.from(Array(5).keys()) as column (column)}\n\t\t\t\t\t{@const guess = current ? currentGuess : data.guesses[row]}\n\t\t\t\t\t{@const answer = data.answers[row]?.[column]}\n\t\t\t\t\t{@const value = guess?.[column] ?? ''}\n\t\t\t\t\t{@const selected = current && column === guess.length}\n\t\t\t\t\t{@const exact = answer === 'x'}\n\t\t\t\t\t{@const close = answer === 'c'}\n\t\t\t\t\t{@const missing = answer === '_'}\n\t\t\t\t\t<div class=\"letter\" class:exact class:close class:missing class:selected>\n\t\t\t\t\t\t{value}\n\t\t\t\t\t\t<span class=\"visually-hidden\">\n\t\t\t\t\t\t\t{#if exact}\n\t\t\t\t\t\t\t\t(correct)\n\t\t\t\t\t\t\t{:else if close}\n\t\t\t\t\t\t\t\t(present)\n\t\t\t\t\t\t\t{:else if missing}\n\t\t\t\t\t\t\t\t(absent)\n\t\t\t\t\t\t\t{:else}\n\t\t\t\t\t\t\t\tempty\n\t\t\t\t\t\t\t{/if}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<input name=\"guess\" disabled={!current} type=\"hidden\" {value} />\n\t\t\t\t\t</div>\n\t\t\t\t{/each}\n\t\t\t</div>\n\t\t{/each}\n\t</div>\n\n\t<div class=\"controls\">\n\t\t{#if won || data.answers.length >= 6}\n\t\t\t{#if !won && data.answer}\n\t\t\t\t<p>the answer was \"{data.answer}\"</p>\n\t\t\t{/if}\n\t\t\t<button data-key=\"enter\" class=\"restart selected\" formaction=\"?/restart\">\n\t\t\t\t{won ? 'you won :)' : `game over :(`} play again?\n\t\t\t</button>\n\t\t{:else}\n\t\t\t<div class=\"keyboard\">\n\t\t\t\t<button data-key=\"enter\" class:selected={submittable} disabled={!submittable}>enter</button>\n\n\t\t\t\t<button\n\t\t\t\t\tonclick={update}\n\t\t\t\t\tdata-key=\"backspace\"\n\t\t\t\t\tformaction=\"?/update\"\n\t\t\t\t\tname=\"key\"\n\t\t\t\t\tvalue=\"backspace\"\n\t\t\t\t>\n\t\t\t\t\tback\n\t\t\t\t</button>\n\n\t\t\t\t{#each ['qwertyuiop', 'asdfghjkl', 'zxcvbnm'] as row (row)}\n\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t{#each row as letter, index (index)}\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tonclick={update}\n\t\t\t\t\t\t\t\tdata-key={letter}\n\t\t\t\t\t\t\t\tclass={classnames[letter]}\n\t\t\t\t\t\t\t\tdisabled={submittable}\n\t\t\t\t\t\t\t\tformaction=\"?/update\"\n\t\t\t\t\t\t\t\tname=\"key\"\n\t\t\t\t\t\t\t\tvalue={letter}\n\t\t\t\t\t\t\t\taria-label=\"{letter} {description[letter] || ''}\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{letter}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t{/each}\n\t\t\t\t\t</div>\n\t\t\t\t{/each}\n\t\t\t</div>\n\t\t{/if}\n\t</div>\n</form>\n\n{#if won}\n\t<div\n\t\tstyle=\"position: absolute; left: 50%; top: 30%\"\n\t\tuse:confetti={{\n\t\t\tparticleCount: reducedMotion.current ? 0 : undefined,\n\t\t\tforce: 0.7,\n\t\t\tstageWidth: window.innerWidth,\n\t\t\tstageHeight: window.innerHeight,\n\t\t\tcolors: ['#ff3e00', '#40b3ff', '#676778']\n\t\t}}\n\t></div>\n{/if}\n\n<style>\n\tform {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: 1rem;\n\t\tflex: 1;\n\t}\n\n\t.how-to-play {\n\t\tcolor: var(--color-text);\n\t}\n\n\t.how-to-play::before {\n\t\tcontent: 'i';\n\t\tdisplay: inline-block;\n\t\tfont-size: 0.8em;\n\t\tfont-weight: 900;\n\t\twidth: 1em;\n\t\theight: 1em;\n\t\tpadding: 0.2em;\n\t\tline-height: 1;\n\t\tborder: 1.5px solid var(--color-text);\n\t\tborder-radius: 50%;\n\t\ttext-align: center;\n\t\tmargin: 0 0.5em 0 0;\n\t\tposition: relative;\n\t\ttop: -0.05em;\n\t}\n\n\t.grid {\n\t\t--width: min(100vw, 40vh, 380px);\n\t\tmax-width: var(--width);\n\t\talign-self: center;\n\t\tjustify-self: center;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: flex-start;\n\t}\n\n\t.grid .row {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(5, 1fr);\n\t\tgrid-gap: 0.2rem;\n\t\tmargin: 0 0 0.2rem 0;\n\t}\n\n\t@media (prefers-reduced-motion: no-preference) {\n\t\t.grid.bad-guess .row.current {\n\t\t\tanimation: wiggle 0.5s;\n\t\t}\n\t}\n\n\t.grid.playing .row.current {\n\t\tfilter: drop-shadow(3px 3px 10px var(--color-bg-0));\n\t}\n\n\t.letter {\n\t\taspect-ratio: 1;\n\t\twidth: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\ttext-align: center;\n\t\tbox-sizing: border-box;\n\t\ttext-transform: lowercase;\n\t\tborder: none;\n\t\tfont-size: calc(0.08 * var(--width));\n\t\tborder-radius: 2px;\n\t\tbackground: white;\n\t\tmargin: 0;\n\t\tcolor: rgba(0, 0, 0, 0.7);\n\t}\n\n\t.letter.missing {\n\t\tbackground: rgba(255, 255, 255, 0.5);\n\t\tcolor: rgba(0, 0, 0, 0.5);\n\t}\n\n\t.letter.exact {\n\t\tbackground: var(--color-theme-2);\n\t\tcolor: white;\n\t}\n\n\t.letter.close {\n\t\tborder: 2px solid var(--color-theme-2);\n\t}\n\n\t.selected {\n\t\toutline: 2px solid var(--color-theme-1);\n\t}\n\n\t.controls {\n\t\ttext-align: center;\n\t\tjustify-content: center;\n\t\theight: min(18vh, 10rem);\n\t}\n\n\t.keyboard {\n\t\t--gap: 0.2rem;\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--gap);\n\t\theight: 100%;\n\t}\n\n\t.keyboard .row {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tgap: 0.2rem;\n\t\tflex: 1;\n\t}\n\n\t.keyboard button,\n\t.keyboard button:disabled {\n\t\t--size: min(8vw, 4vh, 40px);\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\twidth: var(--size);\n\t\tborder: none;\n\t\tborder-radius: 2px;\n\t\tfont-size: calc(var(--size) * 0.5);\n\t\tmargin: 0;\n\t}\n\n\t.keyboard button.exact {\n\t\tbackground: var(--color-theme-2);\n\t\tcolor: white;\n\t}\n\n\t.keyboard button.missing {\n\t\topacity: 0.5;\n\t}\n\n\t.keyboard button.close {\n\t\tborder: 2px solid var(--color-theme-2);\n\t}\n\n\t.keyboard button:focus {\n\t\tbackground: var(--color-theme-1);\n\t\tcolor: white;\n\t\toutline: none;\n\t}\n\n\t.keyboard button[data-key='enter'],\n\t.keyboard button[data-key='backspace'] {\n\t\tposition: absolute;\n\t\tbottom: 0;\n\t\twidth: calc(1.5 * var(--size));\n\t\theight: calc(1 / 3 * (100% - 2 * var(--gap)));\n\t\ttext-transform: uppercase;\n\t\tfont-size: calc(0.3 * var(--size));\n\t\tpadding-top: calc(0.15 * var(--size));\n\t}\n\n\t.keyboard button[data-key='enter'] {\n\t\tright: calc(50% + 3.5 * var(--size) + 0.8rem);\n\t}\n\n\t.keyboard button[data-key='backspace'] {\n\t\tleft: calc(50% + 3.5 * var(--size) + 0.8rem);\n\t}\n\n\t.keyboard button[data-key='enter']:disabled {\n\t\topacity: 0.5;\n\t}\n\n\t.restart {\n\t\twidth: 100%;\n\t\tpadding: 1rem;\n\t\tbackground: rgba(255, 255, 255, 0.5);\n\t\tborder-radius: 2px;\n\t\tborder: none;\n\t}\n\n\t.restart:focus,\n\t.restart:hover {\n\t\tbackground: var(--color-theme-1);\n\t\tcolor: white;\n\t\toutline: none;\n\t}\n\n\t@keyframes wiggle {\n\t\t0% {\n\t\t\ttransform: translateX(0);\n\t\t}\n\t\t10% {\n\t\t\ttransform: translateX(-2px);\n\t\t}\n\t\t30% {\n\t\t\ttransform: translateX(4px);\n\t\t}\n\t\t50% {\n\t\t\ttransform: translateX(-6px);\n\t\t}\n\t\t70% {\n\t\t\ttransform: translateX(+4px);\n\t\t}\n\t\t90% {\n\t\t\ttransform: translateX(-2px);\n\t\t}\n\t\t100% {\n\t\t\ttransform: translateX(0);\n\t\t}\n\t}\n</style>\n"
 	},
 	{
 		"name": "src/routes/sverdle/game.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sv",
-  "version": "0.9.13",
+  "version": "0.9.14",
   "type": "module",
   "description": "A CLI for creating and updating SvelteKit projects",
   "license": "MIT",