create-svelte - npm Package Compare versions

Comparing version 2.0.0-next.68 to 2.0.0-next.69

bin.js

@@ -139,5 +139,5 @@ #!/usr/bin/env node
 
+	console.log(`  ${i++}: ${bold(cyan('npm install'))} (or pnpm install, etc)`);
 	// prettier-ignore
 	console.log(`  ${i++}: ${bold(cyan('git init && git add -A && git commit -m "Initial commit"'))} (optional step)`);
-	console.log(`  ${i++}: ${bold(cyan('npm install'))} (or pnpm install, etc)`);
 	console.log(`  ${i++}: ${bold(cyan('npm run dev -- --open'))}`);
@@ -144,0 +144,0 @@

CHANGELOG.md

 # create-svelte
 
+## 2.0.0-next.69
+
+### Patch Changes
+
+- 9cc2508: Ensure template files match Prettier settings
+- f5e626d: Reference Vite/Svelte types inside Kit types
+- 8a402a9: Exclude deploy artifacts from create-svelte package
+- e8bed05: Prompt to npm install before prompting to git init
+- 507e2c3: fix: Prettier not formatting .svelte files
+
 ## 2.0.0-next.68
@@ -4,0 +14,0 @@

dist/shared.json

@@ -88,3 +88,3 @@ {
 			"exclude": [],
-			"contents": "{\n\t\"devDependencies\": {\n\t\t\"eslint-config-prettier\": \"^8.1.0\"\n\t},\n\t\"scripts\": {\n\t\t\"lint\": \"prettier --check . && eslint --ignore-path .gitignore .\",\n\t\t\"format\": \"prettier --write .\"\n\t}\n}\n"
+			"contents": "{\n\t\"devDependencies\": {\n\t\t\"eslint-config-prettier\": \"^8.1.0\"\n\t},\n\t\"scripts\": {\n\t\t\"lint\": \"prettier --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .\",\n\t\t\"format\": \"prettier --write --plugin-search-dir=. .\"\n\t}\n}\n"
 		},
@@ -137,3 +137,3 @@ {
 			],
-			"contents": "{\n\t\"scripts\": {\n\t\t\"lint\": \"prettier --check .\",\n\t\t\"format\": \"prettier --write .\"\n\t}\n}\n"
+			"contents": "{\n\t\"scripts\": {\n\t\t\"lint\": \"prettier --check --plugin-search-dir=. .\",\n\t\t\"format\": \"prettier --write --plugin-search-dir=. .\"\n\t}\n}\n"
 		},
@@ -140,0 +140,0 @@ {

dist/templates/default/files.js.json

 [
 	{
 		"name": "src/global.d.ts",
-		"contents": "/// <reference types=\"@sveltejs/kit\" />\n/// <reference types=\"svelte\" />\n/// <reference types=\"vite/client\" />\n"
+		"contents": "/// <reference types=\"@sveltejs/kit\" />\n"
 	},
 	{
 		"name": "src/hooks.js",
-		"contents": "import cookie from 'cookie';\nimport { v4 as uuid } from '@lukeed/uuid';\n\nexport const handle = async ({ request, render }) => {\n\tconst cookies = cookie.parse(request.headers.cookie || '');\n\trequest.locals.userid = cookies.userid || uuid();\n\n\t// TODO https://github.com/sveltejs/kit/issues/1046\n\tif (request.query.has('_method')) {\n\t\trequest.method = request.query.get('_method').toUpperCase();\n\t}\n\n\tconst response = await render(request);\n\n\tif (!cookies.userid) {\n\t\t// if this is the first time the user has visited this app,\n\t\t// set a cookie so that we recognise them when they return\n\t\tresponse.headers[\n\t\t\t'set-cookie'\n\t\t] = `userid=${request.locals.userid}; Path=/; HttpOnly`;\n\t}\n\n\treturn response;\n};\n"
+		"contents": "import cookie from 'cookie';\nimport { v4 as uuid } from '@lukeed/uuid';\n\nexport const handle = async ({ request, render }) => {\n\tconst cookies = cookie.parse(request.headers.cookie || '');\n\trequest.locals.userid = cookies.userid || uuid();\n\n\t// TODO https://github.com/sveltejs/kit/issues/1046\n\tif (request.query.has('_method')) {\n\t\trequest.method = request.query.get('_method').toUpperCase();\n\t}\n\n\tconst response = await render(request);\n\n\tif (!cookies.userid) {\n\t\t// if this is the first time the user has visited this app,\n\t\t// set a cookie so that we recognise them when they return\n\t\tresponse.headers['set-cookie'] = `userid=${request.locals.userid}; Path=/; HttpOnly`;\n\t}\n\n\treturn response;\n};\n"
 	},
 	{
 		"name": "src/lib/Counter/index.svelte",
-		"contents": "<script>\n\timport { spring } from 'svelte/motion';\n\t\n\tlet count = 0;\n\t\n\tconst displayed_count = spring();\n\t$: displayed_count.set(count);\n\t$: offset = modulo($displayed_count, 1);\n\t\n\tfunction modulo(n, m) {\n\t\t// handle negative numbers\n\t\treturn ((n % m) + m) % m;\n\t}\n</script>\n\n<div class=\"counter\">\n\t<button on:click={() => (count -= 1)} aria-label=\"Decrease the counter by one\">\n\t\t<svg aria-hidden=\"true\" viewBox=\"0 0 1 1\">\n\t\t\t<path d=\"M0,0.5 L1,0.5\"></path>\n\t\t</svg>\n\t</button>\n\n\t<div class=\"counter-viewport\">\n\t\t<div class=\"counter-digits\" style=\"transform: translate(0, {100 * offset}%)\">\n\t\t\t<strong style=\"top: -100%\" aria-hidden=\"true\">{Math.floor($displayed_count + 1)}</strong>\n\t\t\t<strong>{Math.floor($displayed_count)}</strong>\n\t\t</div>\n\t</div>\n\n\t<button on:click={() => (count += 1)} aria-label=\"Increase the counter by one\">\n\t\t<svg aria-hidden=\"true\" viewBox=\"0 0 1 1\">\n\t\t\t<path d=\"M0,0.5 L1,0.5 M0.5,0 L0.5,1\"></path>\n\t\t</svg>\n\t</button>\n</div>\n\n<style>\n\t.counter {\n\t\tdisplay: flex;\n\t\tborder-top: 1px solid rgba(0,0,0,0.1);\n\t\tborder-bottom: 1px solid rgba(0,0,0,0.1);\n\t\tmargin: 1rem 0;\n\t}\n\n\t.counter button.disabled {\n\t\topacity: 0.3;\n\t}\n\n\t.counter button {\n\t\twidth: 2em;\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder: 0;\n\t\tbackground-color: transparent;\n\t\tcolor: var(--text-color);\n\t\tfont-size: 2rem;\n\t}\n\n\t.counter button:hover {\n\t\tbackground-color: var(--secondary-color);\n\t}\n\n\tsvg {\n\t\twidth: 25%;\n\t\theight: 25%;\n\t}\n\n\tpath {\n\t\tvector-effect: non-scaling-stroke;\n\t\tstroke-width: 2px;\n\t\tstroke: var(--text-color);\n\t}\n\n\t.counter-viewport {\n\t\twidth: 8em;\n\t\theight: 4em;\n\t\toverflow: hidden;\n\t\ttext-align: center;\n\t\tposition: relative;\n\t}\n\n\t.counter-viewport strong {\n\t\tposition: absolute;\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tfont-weight: 400;\n\t\tcolor: var(--accent-color);\n\t\tfont-size: 4rem;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t}\n\n\t.counter-digits {\n\t\tposition: absolute;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n</style>\n"
+		"contents": "<script>\n\timport { spring } from 'svelte/motion';\n\n\tlet count = 0;\n\n\tconst displayed_count = spring();\n\t$: displayed_count.set(count);\n\t$: offset = modulo($displayed_count, 1);\n\n\tfunction modulo(n, m) {\n\t\t// handle negative numbers\n\t\treturn ((n % m) + m) % m;\n\t}\n</script>\n\n<div class=\"counter\">\n\t<button on:click={() => (count -= 1)} aria-label=\"Decrease the counter by one\">\n\t\t<svg aria-hidden=\"true\" viewBox=\"0 0 1 1\">\n\t\t\t<path d=\"M0,0.5 L1,0.5\" />\n\t\t</svg>\n\t</button>\n\n\t<div class=\"counter-viewport\">\n\t\t<div class=\"counter-digits\" style=\"transform: translate(0, {100 * offset}%)\">\n\t\t\t<strong style=\"top: -100%\" aria-hidden=\"true\">{Math.floor($displayed_count + 1)}</strong>\n\t\t\t<strong>{Math.floor($displayed_count)}</strong>\n\t\t</div>\n\t</div>\n\n\t<button on:click={() => (count += 1)} aria-label=\"Increase the counter by one\">\n\t\t<svg aria-hidden=\"true\" viewBox=\"0 0 1 1\">\n\t\t\t<path d=\"M0,0.5 L1,0.5 M0.5,0 L0.5,1\" />\n\t\t</svg>\n\t</button>\n</div>\n\n<style>\n\t.counter {\n\t\tdisplay: flex;\n\t\tborder-top: 1px solid rgba(0, 0, 0, 0.1);\n\t\tborder-bottom: 1px solid rgba(0, 0, 0, 0.1);\n\t\tmargin: 1rem 0;\n\t}\n\n\t.counter button {\n\t\twidth: 2em;\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder: 0;\n\t\tbackground-color: transparent;\n\t\tcolor: var(--text-color);\n\t\tfont-size: 2rem;\n\t}\n\n\t.counter button:hover {\n\t\tbackground-color: var(--secondary-color);\n\t}\n\n\tsvg {\n\t\twidth: 25%;\n\t\theight: 25%;\n\t}\n\n\tpath {\n\t\tvector-effect: non-scaling-stroke;\n\t\tstroke-width: 2px;\n\t\tstroke: var(--text-color);\n\t}\n\n\t.counter-viewport {\n\t\twidth: 8em;\n\t\theight: 4em;\n\t\toverflow: hidden;\n\t\ttext-align: center;\n\t\tposition: relative;\n\t}\n\n\t.counter-viewport strong {\n\t\tposition: absolute;\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tfont-weight: 400;\n\t\tcolor: var(--accent-color);\n\t\tfont-size: 4rem;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t}\n\n\t.counter-digits {\n\t\tposition: absolute;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n</style>\n"
 	},
 	{
 		"name": "src/lib/Header/index.svelte",
-		"contents": "<script>\n\timport { page } from '$app/stores';\n\timport logo from './svelte-logo.svg';\n</script>\n\n<header>\n\t<div class=\"corner\">\n\t\t<a href=\"https://kit.svelte.dev\">\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 class:active={$page.path === '/'}><a sveltekit:prefetch href=\"/\">Home</a></li>\n\t\t\t<li class:active={$page.path === '/about'}><a sveltekit:prefetch href=\"/about\">About</a></li>\n\t\t\t<li class:active={$page.path === '/todos'}><a sveltekit:prefetch href=\"/todos\">Todos</a></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<!-- TODO put something else here? github link? -->\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.active::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(--accent-color);\n\t}\n\n\tnav a {\n\t\tdisplay: flex;\n\t\theight: 100%;\n\t\talign-items: center;\n\t\tpadding: 0 1em;\n\t\tcolor: var(--heading-color);\n\t\tfont-weight: 700;\n\t\tfont-size: 0.8rem;\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 10%;\n\t\ttext-decoration: none;\n\t\ttransition: color 0.2s linear;\n\t}\n\n\ta:hover {\n\t\tcolor: var(--accent-color);\n\t}\n</style>\n"
+		"contents": "<script>\n\timport { page } from '$app/stores';\n\timport logo from './svelte-logo.svg';\n</script>\n\n<header>\n\t<div class=\"corner\">\n\t\t<a href=\"https://kit.svelte.dev\">\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 class:active={$page.path === '/'}><a sveltekit:prefetch href=\"/\">Home</a></li>\n\t\t\t<li class:active={$page.path === '/about'}><a sveltekit:prefetch href=\"/about\">About</a></li>\n\t\t\t<li class:active={$page.path === '/todos'}><a sveltekit:prefetch href=\"/todos\">Todos</a></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<!-- TODO put something else here? github link? -->\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.active::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(--accent-color);\n\t}\n\n\tnav a {\n\t\tdisplay: flex;\n\t\theight: 100%;\n\t\talign-items: center;\n\t\tpadding: 0 1em;\n\t\tcolor: var(--heading-color);\n\t\tfont-weight: 700;\n\t\tfont-size: 0.8rem;\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 10%;\n\t\ttext-decoration: none;\n\t\ttransition: color 0.2s linear;\n\t}\n\n\ta:hover {\n\t\tcolor: var(--accent-color);\n\t}\n</style>\n"
 	},
@@ -28,7 +28,7 @@ {
 		"name": "src/routes/about.svelte",
-		"contents": "<script context=\"module\">\n\timport { browser, dev } from '$app/env';\n\t\n\t// we don't need any JS on this page, though we'll load\n\t// it in dev so that we get hot module replacement...\n\texport const hydrate = dev;\n\t\n\t// ...but if the client-side router is already loaded\n\t// (i.e. we came here from elsewhere in the app), use it\n\texport const router = browser;\n\t\n\t// since there's no dynamic data here, we can prerender\n\t// it so that it gets served as a static asset in prod\n\texport const prerender = true;\n</script>\n\n<svelte:head>\n\t<title>About</title>\n</svelte:head>\n\n<div class=\"content\">\n\t<h1>About this app</h1>\n\n\t<p>\n\t\tThis is a <a href=\"https://kit.svelte.dev\">SvelteKit</a> app. You can make your own by typing the\n\t\tfollowing into your command line and following the prompts:\n\t</p>\n\n\t<!-- TODO lose the @next! -->\n\t<pre>npm init svelte@next</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=\"/todos\">TODOs</a> page illustrates SvelteKit's data loading and form handling. Try using\n\t\tit with JavaScript disabled!\n\t</p>\n</div>\n\n<style>\n\t.content {\n\t\twidth: 100%;\n\t\tmax-width: var(--column-width);\n\t\tmargin: var(--column-margin-top) auto 0 auto;\n\t}\n</style>\n"
+		"contents": "<script context=\"module\">\n\timport { browser, dev } from '$app/env';\n\n\t// we don't need any JS on this page, though we'll load\n\t// it in dev so that we get hot module replacement...\n\texport const hydrate = dev;\n\n\t// ...but if the client-side router is already loaded\n\t// (i.e. we came here from elsewhere in the app), use it\n\texport const router = browser;\n\n\t// since there's no dynamic data here, we can prerender\n\t// it so that it gets served as a static asset in prod\n\texport const prerender = true;\n</script>\n\n<svelte:head>\n\t<title>About</title>\n</svelte:head>\n\n<div class=\"content\">\n\t<h1>About this app</h1>\n\n\t<p>\n\t\tThis is a <a href=\"https://kit.svelte.dev\">SvelteKit</a> app. You can make your own by typing the\n\t\tfollowing into your command line and following the prompts:\n\t</p>\n\n\t<!-- TODO lose the @next! -->\n\t<pre>npm init svelte@next</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=\"/todos\">TODOs</a> page illustrates SvelteKit's data loading and form handling. Try using\n\t\tit with JavaScript disabled!\n\t</p>\n</div>\n\n<style>\n\t.content {\n\t\twidth: 100%;\n\t\tmax-width: var(--column-width);\n\t\tmargin: var(--column-margin-top) auto 0 auto;\n\t}\n</style>\n"
 	},
 	{
 		"name": "src/routes/index.svelte",
-		"contents": "<script context=\"module\">\n\texport const prerender = true;\n</script>\n\n<script>\n\timport Counter from '$lib/Counter/index.svelte';\n</script>\n\n<svelte:head>\n\t<title>Home</title>\n</svelte:head>\n\n<section>\n\t<h1>\n\t\t<div class=\"welcome\">\n\t\t\t<picture>\n\t\t\t\t<source srcset=\"svelte-welcome.webp\" type=\"image/webp\">\n\t\t\t\t<img src=\"svelte-welcome.png\" alt=\"Welcome\"/>\n\t\t\t</picture>\n\t\t</div>\n\n\t\tto your new<br />SvelteKit app\n\t</h1>\n\n\t<h2>\n\t\ttry editing <strong>src/routes/index.svelte</strong>\n\t</h2>\n\n\t<Counter />\n</section>\n\n<style>\n\tsection {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tflex: 1;\n\t}\n\n\th1 {\n\t\twidth: 100%;\n\t}\n\n\t.welcome {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\theight: 0;\n\t\tpadding: 0 0 calc(100% * 495 / 2048) 0;\n\t}\n\n\t.welcome img {\n\t\tposition: absolute;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\ttop: 0;\n\t\tdisplay: block;\n\t}\n</style>\n"
+		"contents": "<script context=\"module\">\n\texport const prerender = true;\n</script>\n\n<script>\n\timport Counter from '$lib/Counter/index.svelte';\n</script>\n\n<svelte:head>\n\t<title>Home</title>\n</svelte:head>\n\n<section>\n\t<h1>\n\t\t<div class=\"welcome\">\n\t\t\t<picture>\n\t\t\t\t<source srcset=\"svelte-welcome.webp\" type=\"image/webp\" />\n\t\t\t\t<img src=\"svelte-welcome.png\" alt=\"Welcome\" />\n\t\t\t</picture>\n\t\t</div>\n\n\t\tto your new<br />SvelteKit app\n\t</h1>\n\n\t<h2>\n\t\ttry editing <strong>src/routes/index.svelte</strong>\n\t</h2>\n\n\t<Counter />\n</section>\n\n<style>\n\tsection {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tflex: 1;\n\t}\n\n\th1 {\n\t\twidth: 100%;\n\t}\n\n\t.welcome {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\theight: 0;\n\t\tpadding: 0 0 calc(100% * 495 / 2048) 0;\n\t}\n\n\t.welcome img {\n\t\tposition: absolute;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\ttop: 0;\n\t\tdisplay: block;\n\t}\n</style>\n"
 	},
@@ -41,3 +41,3 @@ {
 		"name": "src/routes/todos/_api.js",
-		"contents": "/*\n\tThis module is used by the /todos.json and /todos/[uid].json\n\tendpoints to make calls to api.svelte.dev, which stores todos\n\tfor each user. The leading underscore indicates that this is\n\ta private module, _not_ an endpoint — visiting /todos/_api\n\twill net you a 404 response.\n\n\t(The data on the todo app will expire periodically; no\n\tguarantees are made. Don't use it to organise your life.)\n*/\n\nconst base = 'https://api.svelte.dev';\n\nexport async function api(request, resource, data) {\n\t// user must have a cookie set\n\tif (!request.locals.userid) {\n\t\treturn { status: 401 };\n\t}\n\n\tconst res = await fetch(`${base}/${resource}`, {\n\t\tmethod: request.method,\n\t\theaders: {\n\t\t\t'content-type': 'application/json'\n\t\t},\n\t\tbody: data && JSON.stringify(data)\n\t});\n\n\t// if the request came from a <form> submission, the browser's default\n\t// behaviour is to show the URL corresponding to the form's \"action\"\n\t// attribute. in those cases, we want to redirect them back to the\n\t// /todos page, rather than showing the response\n\tif (\n\t\tres.ok &&\n\t\trequest.method !== 'GET' &&\n\t\trequest.headers.accept !== 'application/json'\n\t) {\n\t\treturn {\n\t\t\tstatus: 303,\n\t\t\theaders: {\n\t\t\t\tlocation: '/todos'\n\t\t\t}\n\t\t};\n\t}\n\n\treturn {\n\t\tstatus: res.status,\n\t\tbody: await res.json()\n\t};\n}\n"
+		"contents": "/*\n\tThis module is used by the /todos.json and /todos/[uid].json\n\tendpoints to make calls to api.svelte.dev, which stores todos\n\tfor each user. The leading underscore indicates that this is\n\ta private module, _not_ an endpoint — visiting /todos/_api\n\twill net you a 404 response.\n\n\t(The data on the todo app will expire periodically; no\n\tguarantees are made. Don't use it to organise your life.)\n*/\n\nconst base = 'https://api.svelte.dev';\n\nexport async function api(request, resource, data) {\n\t// user must have a cookie set\n\tif (!request.locals.userid) {\n\t\treturn { status: 401 };\n\t}\n\n\tconst res = await fetch(`${base}/${resource}`, {\n\t\tmethod: request.method,\n\t\theaders: {\n\t\t\t'content-type': 'application/json'\n\t\t},\n\t\tbody: data && JSON.stringify(data)\n\t});\n\n\t// if the request came from a <form> submission, the browser's default\n\t// behaviour is to show the URL corresponding to the form's \"action\"\n\t// attribute. in those cases, we want to redirect them back to the\n\t// /todos page, rather than showing the response\n\tif (res.ok && request.method !== 'GET' && request.headers.accept !== 'application/json') {\n\t\treturn {\n\t\t\tstatus: 303,\n\t\t\theaders: {\n\t\t\t\tlocation: '/todos'\n\t\t\t}\n\t\t};\n\t}\n\n\treturn {\n\t\tstatus: res.status,\n\t\tbody: await res.json()\n\t};\n}\n"
 	},
@@ -50,4 +50,4 @@ {
 		"name": "src/routes/todos/index.svelte",
-		"contents": "<script context=\"module\">\n\timport { enhance } from '$lib/form';\n\t\n\t// see https://kit.svelte.dev/docs#loading\n\texport const load = async ({ fetch }) => {\n\t\tconst res = await fetch('/todos.json');\n\t\n\t\tif (res.ok) {\n\t\t\tconst todos = await res.json();\n\t\n\t\t\treturn {\n\t\t\t\tprops: { todos }\n\t\t\t};\n\t\t}\n\t\n\t\tconst { message } = await res.json();\n\t\n\t\treturn {\n\t\t\terror: new Error(message)\n\t\t};\n\t};\n</script>\n\n<script>\n\timport { scale } from 'svelte/transition';\n\timport { flip } from 'svelte/animate';\n\t\n\texport let todos;\n\t\n\tasync function patch(res) {\n\t\tconst todo = await res.json();\n\t\n\t\ttodos = todos.map((t) => {\n\t\t\tif (t.uid === todo.uid) return todo;\n\t\t\treturn t;\n\t\t});\n\t}\n</script>\n\n<svelte:head>\n\t<title>Todos</title>\n</svelte:head>\n\n<div class=\"todos\">\n\t<h1>Todos</h1>\n\n\t<form class=\"new\" action=\"/todos.json\" method=\"post\" use:enhance={{\n\t\tresult: async (res, form) => {\n\t\t\tconst created = await res.json();\n\t\t\ttodos = [...todos, created]\n\n\t\t\tform.reset();\n\t\t}\n\t}}>\n\t\t<input name=\"text\" aria-label=\"Add todo\" placeholder=\"+ tap to add a todo\">\n\t</form>\n\n\t{#each todos as todo (todo.uid)}\n\t\t<div class=\"todo\" class:done={todo.done} transition:scale|local={{start:0.7}} animate:flip={{duration:200}}>\n\t\t\t<form action=\"/todos/{todo.uid}.json?_method=patch\" method=\"post\" use:enhance={{\n\t\t\t\tpending: (data) => {\n\t\t\t\t\ttodo.done = !!data.get('done');\n\t\t\t\t},\n\t\t\t\tresult: patch\n\t\t\t}}>\n\t\t\t\t<input type=\"hidden\" name=\"done\" value={todo.done ? '' : 'true'}>\n\t\t\t\t<button class=\"toggle\" aria-label=\"Mark todo as {todo.done ? 'not done' : 'done'}\"/>\n\t\t\t</form>\n\n\t\t\t<form class=\"text\" action=\"/todos/{todo.uid}.json?_method=patch\" method=\"post\" use:enhance={{\n\t\t\t\tresult: patch\n\t\t\t}}>\n\t\t\t\t<input aria-label=\"Edit todo\" type=\"text\" name=\"text\" value={todo.text}>\n\t\t\t\t<button class=\"save\" aria-label=\"Save todo\"/>\n\t\t\t</form>\n\n\t\t\t<form action=\"/todos/{todo.uid}.json?_method=delete\" method=\"post\" use:enhance={{\n\t\t\t\tresult: () => {\n\t\t\t\t\ttodos = todos.filter(t => t.uid !== todo.uid);\n\t\t\t\t}\n\t\t\t}}>\n\t\t\t\t<button class=\"delete\" aria-label=\"Delete todo\"/>\n\t\t\t</form>\n\t\t</div>\n\t{/each}\n</div>\n\n<style>\n\t.todos {\n\t\twidth: 100%;\n\t\tmax-width: var(--column-width);\n\t\tmargin: var(--column-margin-top) auto 0 auto;\n\t\tline-height: 1;\n\t}\n\n\t.new {\n\t\tmargin: 0 0 0.5rem 0;\n\t}\n\n\tinput {\n\t\tborder: 1px solid transparent;\n\t}\n\n\tinput:focus-visible {\n\t\tbox-shadow: inset 1px 1px 6px rgba(0,0,0,0.1);\n\t\tborder: 1px solid #ff3e00 !important;\n\t\toutline: none;\n\t}\n\n\t.new input {\n\t\tfont-size: 28px;\n\t\twidth: 100%;\n\t\tpadding: 0.5em 1em 0.3em 1em;\n\t\tbox-sizing: border-box;\n\t\tbackground: rgba(255,255,255,0.05);\n\t\tborder-radius: 8px;\n\t\ttext-align: center;\n\t}\n\n\t.todo {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 2rem 1fr 2rem;\n\t\tgrid-gap: 0.5rem;\n\t\talign-items: center;\n\t\tmargin: 0 0 0.5rem 0;\n\t\tpadding: 0.5rem;\n\t\tbackground-color: white;\n\t\tborder-radius: 8px;\n\t\tfilter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1));\n\t\ttransform: translate(-1px, -1px);\n\t\ttransition: filter 0.2s, transform 0.2s;\n\t}\n\n\n\t.done {\n\t\ttransform: none;\n\t\topacity: 0.4;\n\t\tfilter: drop-shadow(0px 0px 1px rgba(0,0,0,0.1));\n\t}\n\n\tform.text {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex: 1;\n\t}\n\n\t.todo input {\n\t\tflex: 1;\n\t\tpadding: 0.5em 2em 0.5em 0.8em;\n\t\tborder-radius: 3px;\n\t}\n\n\t.todo button {\n\t\twidth: 2em;\n\t\theight: 2em;\n\t\tborder: none;\n\t\tbackground-color: transparent;\n\t\tbackground-position: 50% 50%;\n\t\tbackground-repeat: no-repeat;\n\t}\n\n\tbutton.toggle {\n\t\tborder: 1px solid rgba(0,0,0,0.2);\n\t\tborder-radius: 50%;\n\t\tbox-sizing: border-box;\n\t\tbackground-size: 1em auto;\n\t}\n\n\t.done .toggle {\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='22' height='16' viewBox='0 0 22 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 1.5L7.4375 14.5L1.5 8.5909' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n\t}\n\n\t.delete {\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 5V22H19.5V5H4.5Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M10 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 5H22' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 5L9.6445 2H14.3885L16 5H8Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n\t\topacity: 0.2;\n\t}\n\n\t.delete:hover,\n\t.delete:focus {\n\t\ttransition: opacity 0.2s;\n\t\topacity: 1;\n\t}\n\n\t.save {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\topacity: 0;\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 2H3.5C2.67158 2 2 2.67157 2 3.5V20.5C2 21.3284 2.67158 22 3.5 22H20.5C21.3284 22 22 21.3284 22 20.5V3.5C22 2.67157 21.3284 2 20.5 2Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M17 2V11H7.5V2H17Z' fill='white' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M13.5 5.5V7.5' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.99844 2H18.4992' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A\");\n\t}\n\n\t.todo input:focus + .save,\n\t.save:focus {\n\t\ttransition: opacity 0.2s;\n\t\topacity: 1;\n\t}\n</style>\n"
+		"contents": "<script context=\"module\">\n\timport { enhance } from '$lib/form';\n\n\t// see https://kit.svelte.dev/docs#loading\n\texport const load = async ({ fetch }) => {\n\t\tconst res = await fetch('/todos.json');\n\n\t\tif (res.ok) {\n\t\t\tconst todos = await res.json();\n\n\t\t\treturn {\n\t\t\t\tprops: { todos }\n\t\t\t};\n\t\t}\n\n\t\tconst { message } = await res.json();\n\n\t\treturn {\n\t\t\terror: new Error(message)\n\t\t};\n\t};\n</script>\n\n<script>\n\timport { scale } from 'svelte/transition';\n\timport { flip } from 'svelte/animate';\n\n\texport let todos;\n\n\tasync function patch(res) {\n\t\tconst todo = await res.json();\n\n\t\ttodos = todos.map((t) => {\n\t\t\tif (t.uid === todo.uid) return todo;\n\t\t\treturn t;\n\t\t});\n\t}\n</script>\n\n<svelte:head>\n\t<title>Todos</title>\n</svelte:head>\n\n<div class=\"todos\">\n\t<h1>Todos</h1>\n\n\t<form\n\t\tclass=\"new\"\n\t\taction=\"/todos.json\"\n\t\tmethod=\"post\"\n\t\tuse:enhance={{\n\t\t\tresult: async (res, form) => {\n\t\t\t\tconst created = await res.json();\n\t\t\t\ttodos = [...todos, created];\n\n\t\t\t\tform.reset();\n\t\t\t}\n\t\t}}\n\t>\n\t\t<input name=\"text\" aria-label=\"Add todo\" placeholder=\"+ tap to add a todo\" />\n\t</form>\n\n\t{#each todos as todo (todo.uid)}\n\t\t<div\n\t\t\tclass=\"todo\"\n\t\t\tclass:done={todo.done}\n\t\t\ttransition:scale|local={{ start: 0.7 }}\n\t\t\tanimate:flip={{ duration: 200 }}\n\t\t>\n\t\t\t<form\n\t\t\t\taction=\"/todos/{todo.uid}.json?_method=patch\"\n\t\t\t\tmethod=\"post\"\n\t\t\t\tuse:enhance={{\n\t\t\t\t\tpending: (data) => {\n\t\t\t\t\t\ttodo.done = !!data.get('done');\n\t\t\t\t\t},\n\t\t\t\t\tresult: patch\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<input type=\"hidden\" name=\"done\" value={todo.done ? '' : 'true'} />\n\t\t\t\t<button class=\"toggle\" aria-label=\"Mark todo as {todo.done ? 'not done' : 'done'}\" />\n\t\t\t</form>\n\n\t\t\t<form\n\t\t\t\tclass=\"text\"\n\t\t\t\taction=\"/todos/{todo.uid}.json?_method=patch\"\n\t\t\t\tmethod=\"post\"\n\t\t\t\tuse:enhance={{\n\t\t\t\t\tresult: patch\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<input aria-label=\"Edit todo\" type=\"text\" name=\"text\" value={todo.text} />\n\t\t\t\t<button class=\"save\" aria-label=\"Save todo\" />\n\t\t\t</form>\n\n\t\t\t<form\n\t\t\t\taction=\"/todos/{todo.uid}.json?_method=delete\"\n\t\t\t\tmethod=\"post\"\n\t\t\t\tuse:enhance={{\n\t\t\t\t\tresult: () => {\n\t\t\t\t\t\ttodos = todos.filter((t) => t.uid !== todo.uid);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<button class=\"delete\" aria-label=\"Delete todo\" />\n\t\t\t</form>\n\t\t</div>\n\t{/each}\n</div>\n\n<style>\n\t.todos {\n\t\twidth: 100%;\n\t\tmax-width: var(--column-width);\n\t\tmargin: var(--column-margin-top) auto 0 auto;\n\t\tline-height: 1;\n\t}\n\n\t.new {\n\t\tmargin: 0 0 0.5rem 0;\n\t}\n\n\tinput {\n\t\tborder: 1px solid transparent;\n\t}\n\n\tinput:focus-visible {\n\t\tbox-shadow: inset 1px 1px 6px rgba(0, 0, 0, 0.1);\n\t\tborder: 1px solid #ff3e00 !important;\n\t\toutline: none;\n\t}\n\n\t.new input {\n\t\tfont-size: 28px;\n\t\twidth: 100%;\n\t\tpadding: 0.5em 1em 0.3em 1em;\n\t\tbox-sizing: border-box;\n\t\tbackground: rgba(255, 255, 255, 0.05);\n\t\tborder-radius: 8px;\n\t\ttext-align: center;\n\t}\n\n\t.todo {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 2rem 1fr 2rem;\n\t\tgrid-gap: 0.5rem;\n\t\talign-items: center;\n\t\tmargin: 0 0 0.5rem 0;\n\t\tpadding: 0.5rem;\n\t\tbackground-color: white;\n\t\tborder-radius: 8px;\n\t\tfilter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));\n\t\ttransform: translate(-1px, -1px);\n\t\ttransition: filter 0.2s, transform 0.2s;\n\t}\n\n\t.done {\n\t\ttransform: none;\n\t\topacity: 0.4;\n\t\tfilter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.1));\n\t}\n\n\tform.text {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex: 1;\n\t}\n\n\t.todo input {\n\t\tflex: 1;\n\t\tpadding: 0.5em 2em 0.5em 0.8em;\n\t\tborder-radius: 3px;\n\t}\n\n\t.todo button {\n\t\twidth: 2em;\n\t\theight: 2em;\n\t\tborder: none;\n\t\tbackground-color: transparent;\n\t\tbackground-position: 50% 50%;\n\t\tbackground-repeat: no-repeat;\n\t}\n\n\tbutton.toggle {\n\t\tborder: 1px solid rgba(0, 0, 0, 0.2);\n\t\tborder-radius: 50%;\n\t\tbox-sizing: border-box;\n\t\tbackground-size: 1em auto;\n\t}\n\n\t.done .toggle {\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='22' height='16' viewBox='0 0 22 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 1.5L7.4375 14.5L1.5 8.5909' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n\t}\n\n\t.delete {\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 5V22H19.5V5H4.5Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M10 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 5H22' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 5L9.6445 2H14.3885L16 5H8Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n\t\topacity: 0.2;\n\t}\n\n\t.delete:hover,\n\t.delete:focus {\n\t\ttransition: opacity 0.2s;\n\t\topacity: 1;\n\t}\n\n\t.save {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\topacity: 0;\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 2H3.5C2.67158 2 2 2.67157 2 3.5V20.5C2 21.3284 2.67158 22 3.5 22H20.5C21.3284 22 22 21.3284 22 20.5V3.5C22 2.67157 21.3284 2 20.5 2Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M17 2V11H7.5V2H17Z' fill='white' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M13.5 5.5V7.5' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.99844 2H18.4992' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A\");\n\t}\n\n\t.todo input:focus + .save,\n\t.save:focus {\n\t\ttransition: opacity 0.2s;\n\t\topacity: 1;\n\t}\n</style>\n"
 	}
 ]

dist/templates/default/files.ts.json

 [
 	{
 		"name": "src/global.d.ts",
-		"contents": "/// <reference types=\"@sveltejs/kit\" />\n/// <reference types=\"svelte\" />\n/// <reference types=\"vite/client\" />\n"
+		"contents": "/// <reference types=\"@sveltejs/kit\" />\n"
 	},
@@ -12,7 +12,7 @@ {
 		"name": "src/lib/Counter/index.svelte",
-		"contents": "<script lang=\"ts\">\n\timport { spring } from 'svelte/motion';\n\n\tlet count = 0;\n\n\tconst displayed_count = spring();\n\t$: displayed_count.set(count);\n\t$: offset = modulo($displayed_count, 1);\n\n\tfunction modulo(n: number, m: number) {\n\t\t// handle negative numbers\n\t\treturn ((n % m) + m) % m;\n\t}\n</script>\n\n<div class=\"counter\">\n\t<button on:click={() => (count -= 1)} aria-label=\"Decrease the counter by one\">\n\t\t<svg aria-hidden=\"true\" viewBox=\"0 0 1 1\">\n\t\t\t<path d=\"M0,0.5 L1,0.5\"></path>\n\t\t</svg>\n\t</button>\n\n\t<div class=\"counter-viewport\">\n\t\t<div class=\"counter-digits\" style=\"transform: translate(0, {100 * offset}%)\">\n\t\t\t<strong style=\"top: -100%\" aria-hidden=\"true\">{Math.floor($displayed_count + 1)}</strong>\n\t\t\t<strong>{Math.floor($displayed_count)}</strong>\n\t\t</div>\n\t</div>\n\n\t<button on:click={() => (count += 1)} aria-label=\"Increase the counter by one\">\n\t\t<svg aria-hidden=\"true\" viewBox=\"0 0 1 1\">\n\t\t\t<path d=\"M0,0.5 L1,0.5 M0.5,0 L0.5,1\"></path>\n\t\t</svg>\n\t</button>\n</div>\n\n<style>\n\t.counter {\n\t\tdisplay: flex;\n\t\tborder-top: 1px solid rgba(0,0,0,0.1);\n\t\tborder-bottom: 1px solid rgba(0,0,0,0.1);\n\t\tmargin: 1rem 0;\n\t}\n\n\t.counter button.disabled {\n\t\topacity: 0.3;\n\t}\n\n\t.counter button {\n\t\twidth: 2em;\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder: 0;\n\t\tbackground-color: transparent;\n\t\tcolor: var(--text-color);\n\t\tfont-size: 2rem;\n\t}\n\n\t.counter button:hover {\n\t\tbackground-color: var(--secondary-color);\n\t}\n\n\tsvg {\n\t\twidth: 25%;\n\t\theight: 25%;\n\t}\n\n\tpath {\n\t\tvector-effect: non-scaling-stroke;\n\t\tstroke-width: 2px;\n\t\tstroke: var(--text-color);\n\t}\n\n\t.counter-viewport {\n\t\twidth: 8em;\n\t\theight: 4em;\n\t\toverflow: hidden;\n\t\ttext-align: center;\n\t\tposition: relative;\n\t}\n\n\t.counter-viewport strong {\n\t\tposition: absolute;\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tfont-weight: 400;\n\t\tcolor: var(--accent-color);\n\t\tfont-size: 4rem;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t}\n\n\t.counter-digits {\n\t\tposition: absolute;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n</style>\n"
+		"contents": "<script lang=\"ts\">\n\timport { spring } from 'svelte/motion';\n\n\tlet count = 0;\n\n\tconst displayed_count = spring();\n\t$: displayed_count.set(count);\n\t$: offset = modulo($displayed_count, 1);\n\n\tfunction modulo(n: number, m: number) {\n\t\t// handle negative numbers\n\t\treturn ((n % m) + m) % m;\n\t}\n</script>\n\n<div class=\"counter\">\n\t<button on:click={() => (count -= 1)} aria-label=\"Decrease the counter by one\">\n\t\t<svg aria-hidden=\"true\" viewBox=\"0 0 1 1\">\n\t\t\t<path d=\"M0,0.5 L1,0.5\" />\n\t\t</svg>\n\t</button>\n\n\t<div class=\"counter-viewport\">\n\t\t<div class=\"counter-digits\" style=\"transform: translate(0, {100 * offset}%)\">\n\t\t\t<strong style=\"top: -100%\" aria-hidden=\"true\">{Math.floor($displayed_count + 1)}</strong>\n\t\t\t<strong>{Math.floor($displayed_count)}</strong>\n\t\t</div>\n\t</div>\n\n\t<button on:click={() => (count += 1)} aria-label=\"Increase the counter by one\">\n\t\t<svg aria-hidden=\"true\" viewBox=\"0 0 1 1\">\n\t\t\t<path d=\"M0,0.5 L1,0.5 M0.5,0 L0.5,1\" />\n\t\t</svg>\n\t</button>\n</div>\n\n<style>\n\t.counter {\n\t\tdisplay: flex;\n\t\tborder-top: 1px solid rgba(0, 0, 0, 0.1);\n\t\tborder-bottom: 1px solid rgba(0, 0, 0, 0.1);\n\t\tmargin: 1rem 0;\n\t}\n\n\t.counter button {\n\t\twidth: 2em;\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder: 0;\n\t\tbackground-color: transparent;\n\t\tcolor: var(--text-color);\n\t\tfont-size: 2rem;\n\t}\n\n\t.counter button:hover {\n\t\tbackground-color: var(--secondary-color);\n\t}\n\n\tsvg {\n\t\twidth: 25%;\n\t\theight: 25%;\n\t}\n\n\tpath {\n\t\tvector-effect: non-scaling-stroke;\n\t\tstroke-width: 2px;\n\t\tstroke: var(--text-color);\n\t}\n\n\t.counter-viewport {\n\t\twidth: 8em;\n\t\theight: 4em;\n\t\toverflow: hidden;\n\t\ttext-align: center;\n\t\tposition: relative;\n\t}\n\n\t.counter-viewport strong {\n\t\tposition: absolute;\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tfont-weight: 400;\n\t\tcolor: var(--accent-color);\n\t\tfont-size: 4rem;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t}\n\n\t.counter-digits {\n\t\tposition: absolute;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n</style>\n"
 	},
 	{
 		"name": "src/lib/Header/index.svelte",
-		"contents": "<script lang=\"ts\">\n\timport { page } from '$app/stores';\n\timport logo from './svelte-logo.svg';\n</script>\n\n<header>\n\t<div class=\"corner\">\n\t\t<a href=\"https://kit.svelte.dev\">\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 class:active={$page.path === '/'}><a sveltekit:prefetch href=\"/\">Home</a></li>\n\t\t\t<li class:active={$page.path === '/about'}><a sveltekit:prefetch href=\"/about\">About</a></li>\n\t\t\t<li class:active={$page.path === '/todos'}><a sveltekit:prefetch href=\"/todos\">Todos</a></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<!-- TODO put something else here? github link? -->\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.active::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(--accent-color);\n\t}\n\n\tnav a {\n\t\tdisplay: flex;\n\t\theight: 100%;\n\t\talign-items: center;\n\t\tpadding: 0 1em;\n\t\tcolor: var(--heading-color);\n\t\tfont-weight: 700;\n\t\tfont-size: 0.8rem;\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 10%;\n\t\ttext-decoration: none;\n\t\ttransition: color 0.2s linear;\n\t}\n\n\ta:hover {\n\t\tcolor: var(--accent-color);\n\t}\n</style>\n"
+		"contents": "<script lang=\"ts\">\n\timport { page } from '$app/stores';\n\timport logo from './svelte-logo.svg';\n</script>\n\n<header>\n\t<div class=\"corner\">\n\t\t<a href=\"https://kit.svelte.dev\">\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 class:active={$page.path === '/'}><a sveltekit:prefetch href=\"/\">Home</a></li>\n\t\t\t<li class:active={$page.path === '/about'}><a sveltekit:prefetch href=\"/about\">About</a></li>\n\t\t\t<li class:active={$page.path === '/todos'}><a sveltekit:prefetch href=\"/todos\">Todos</a></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<!-- TODO put something else here? github link? -->\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.active::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(--accent-color);\n\t}\n\n\tnav a {\n\t\tdisplay: flex;\n\t\theight: 100%;\n\t\talign-items: center;\n\t\tpadding: 0 1em;\n\t\tcolor: var(--heading-color);\n\t\tfont-weight: 700;\n\t\tfont-size: 0.8rem;\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 10%;\n\t\ttext-decoration: none;\n\t\ttransition: color 0.2s linear;\n\t}\n\n\ta:hover {\n\t\tcolor: var(--accent-color);\n\t}\n</style>\n"
 	},
@@ -37,3 +37,3 @@ {
 		"name": "src/routes/index.svelte",
-		"contents": "<script context=\"module\" lang=\"ts\">\n\texport const prerender = true;\n</script>\n\n<script lang=\"ts\">\n\timport Counter from '$lib/Counter/index.svelte';\n</script>\n\n<svelte:head>\n\t<title>Home</title>\n</svelte:head>\n\n<section>\n\t<h1>\n\t\t<div class=\"welcome\">\n\t\t\t<picture>\n\t\t\t\t<source srcset=\"svelte-welcome.webp\" type=\"image/webp\">\n\t\t\t\t<img src=\"svelte-welcome.png\" alt=\"Welcome\"/>\n\t\t\t</picture>\n\t\t</div>\n\n\t\tto your new<br />SvelteKit app\n\t</h1>\n\n\t<h2>\n\t\ttry editing <strong>src/routes/index.svelte</strong>\n\t</h2>\n\n\t<Counter />\n</section>\n\n<style>\n\tsection {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tflex: 1;\n\t}\n\n\th1 {\n\t\twidth: 100%;\n\t}\n\n\t.welcome {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\theight: 0;\n\t\tpadding: 0 0 calc(100% * 495 / 2048) 0;\n\t}\n\n\t.welcome img {\n\t\tposition: absolute;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\ttop: 0;\n\t\tdisplay: block;\n\t}\n</style>\n"
+		"contents": "<script context=\"module\" lang=\"ts\">\n\texport const prerender = true;\n</script>\n\n<script lang=\"ts\">\n\timport Counter from '$lib/Counter/index.svelte';\n</script>\n\n<svelte:head>\n\t<title>Home</title>\n</svelte:head>\n\n<section>\n\t<h1>\n\t\t<div class=\"welcome\">\n\t\t\t<picture>\n\t\t\t\t<source srcset=\"svelte-welcome.webp\" type=\"image/webp\" />\n\t\t\t\t<img src=\"svelte-welcome.png\" alt=\"Welcome\" />\n\t\t\t</picture>\n\t\t</div>\n\n\t\tto your new<br />SvelteKit app\n\t</h1>\n\n\t<h2>\n\t\ttry editing <strong>src/routes/index.svelte</strong>\n\t</h2>\n\n\t<Counter />\n</section>\n\n<style>\n\tsection {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tflex: 1;\n\t}\n\n\th1 {\n\t\twidth: 100%;\n\t}\n\n\t.welcome {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\theight: 0;\n\t\tpadding: 0 0 calc(100% * 495 / 2048) 0;\n\t}\n\n\t.welcome img {\n\t\tposition: absolute;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\ttop: 0;\n\t\tdisplay: block;\n\t}\n</style>\n"
 	},
@@ -54,4 +54,4 @@ {
 		"name": "src/routes/todos/index.svelte",
-		"contents": "<script context=\"module\" lang=\"ts\">\n\timport { enhance } from '$lib/form';\n\timport type { Load } from '@sveltejs/kit';\n\n\t// see https://kit.svelte.dev/docs#loading\n\texport const load: Load = async ({ fetch }) => {\n\t\tconst res = await fetch('/todos.json');\n\n\t\tif (res.ok) {\n\t\t\tconst todos = await res.json();\n\n\t\t\treturn {\n\t\t\t\tprops: { todos }\n\t\t\t};\n\t\t}\n\n\t\tconst { message } = await res.json();\n\n\t\treturn {\n\t\t\terror: new Error(message)\n\t\t};\n\t}\n</script>\n\n<script lang=\"ts\">\n\timport { scale } from 'svelte/transition';\n\timport { flip } from 'svelte/animate';\n\n\ttype Todo = {\n\t\tuid: string;\n\t\tcreated_at: Date;\n\t\ttext: string;\n\t\tdone: boolean;\n\t};\n\n\texport let todos: Todo[];\n\n\tasync function patch(res: Response) {\n\t\tconst todo = await res.json();\n\n\t\ttodos = todos.map(t => {\n\t\t\tif (t.uid === todo.uid) return todo;\n\t\t\treturn t;\n\t\t});\n\t}\n</script>\n\n<svelte:head>\n\t<title>Todos</title>\n</svelte:head>\n\n<div class=\"todos\">\n\t<h1>Todos</h1>\n\n\t<form class=\"new\" action=\"/todos.json\" method=\"post\" use:enhance={{\n\t\tresult: async (res, form) => {\n\t\t\tconst created = await res.json();\n\t\t\ttodos = [...todos, created]\n\n\t\t\tform.reset();\n\t\t}\n\t}}>\n\t\t<input name=\"text\" aria-label=\"Add todo\" placeholder=\"+ tap to add a todo\">\n\t</form>\n\n\t{#each todos as todo (todo.uid)}\n\t\t<div class=\"todo\" class:done={todo.done} transition:scale|local={{start:0.7}} animate:flip={{duration:200}}>\n\t\t\t<form action=\"/todos/{todo.uid}.json?_method=patch\" method=\"post\" use:enhance={{\n\t\t\t\tpending: (data) => {\n\t\t\t\t\ttodo.done = !!data.get('done');\n\t\t\t\t},\n\t\t\t\tresult: patch\n\t\t\t}}>\n\t\t\t\t<input type=\"hidden\" name=\"done\" value={todo.done ? '' : 'true'}>\n\t\t\t\t<button class=\"toggle\" aria-label=\"Mark todo as {todo.done ? 'not done' : 'done'}\"/>\n\t\t\t</form>\n\n\t\t\t<form class=\"text\" action=\"/todos/{todo.uid}.json?_method=patch\" method=\"post\" use:enhance={{\n\t\t\t\tresult: patch\n\t\t\t}}>\n\t\t\t\t<input aria-label=\"Edit todo\" type=\"text\" name=\"text\" value={todo.text}>\n\t\t\t\t<button class=\"save\" aria-label=\"Save todo\"/>\n\t\t\t</form>\n\n\t\t\t<form action=\"/todos/{todo.uid}.json?_method=delete\" method=\"post\" use:enhance={{\n\t\t\t\tresult: () => {\n\t\t\t\t\ttodos = todos.filter(t => t.uid !== todo.uid);\n\t\t\t\t}\n\t\t\t}}>\n\t\t\t\t<button class=\"delete\" aria-label=\"Delete todo\"/>\n\t\t\t</form>\n\t\t</div>\n\t{/each}\n</div>\n\n<style>\n\t.todos {\n\t\twidth: 100%;\n\t\tmax-width: var(--column-width);\n\t\tmargin: var(--column-margin-top) auto 0 auto;\n\t\tline-height: 1;\n\t}\n\n\t.new {\n\t\tmargin: 0 0 0.5rem 0;\n\t}\n\n\tinput {\n\t\tborder: 1px solid transparent;\n\t}\n\n\tinput:focus-visible {\n\t\tbox-shadow: inset 1px 1px 6px rgba(0,0,0,0.1);\n\t\tborder: 1px solid #ff3e00 !important;\n\t\toutline: none;\n\t}\n\n\t.new input {\n\t\tfont-size: 28px;\n\t\twidth: 100%;\n\t\tpadding: 0.5em 1em 0.3em 1em;\n\t\tbox-sizing: border-box;\n\t\tbackground: rgba(255,255,255,0.05);\n\t\tborder-radius: 8px;\n\t\ttext-align: center;\n\t}\n\n\t.todo {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 2rem 1fr 2rem;\n\t\tgrid-gap: 0.5rem;\n\t\talign-items: center;\n\t\tmargin: 0 0 0.5rem 0;\n\t\tpadding: 0.5rem;\n\t\tbackground-color: white;\n\t\tborder-radius: 8px;\n\t\tfilter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1));\n\t\ttransform: translate(-1px, -1px);\n\t\ttransition: filter 0.2s, transform 0.2s;\n\t}\n\n\n\t.done {\n\t\ttransform: none;\n\t\topacity: 0.4;\n\t\tfilter: drop-shadow(0px 0px 1px rgba(0,0,0,0.1));\n\t}\n\n\tform.text {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex: 1;\n\t}\n\n\t.todo input {\n\t\tflex: 1;\n\t\tpadding: 0.5em 2em 0.5em 0.8em;\n\t\tborder-radius: 3px;\n\t}\n\n\t.todo button {\n\t\twidth: 2em;\n\t\theight: 2em;\n\t\tborder: none;\n\t\tbackground-color: transparent;\n\t\tbackground-position: 50% 50%;\n\t\tbackground-repeat: no-repeat;\n\t}\n\n\tbutton.toggle {\n\t\tborder: 1px solid rgba(0,0,0,0.2);\n\t\tborder-radius: 50%;\n\t\tbox-sizing: border-box;\n\t\tbackground-size: 1em auto;\n\t}\n\n\t.done .toggle {\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='22' height='16' viewBox='0 0 22 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 1.5L7.4375 14.5L1.5 8.5909' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n\t}\n\n\t.delete {\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 5V22H19.5V5H4.5Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M10 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 5H22' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 5L9.6445 2H14.3885L16 5H8Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n\t\topacity: 0.2;\n\t}\n\n\t.delete:hover,\n\t.delete:focus {\n\t\ttransition: opacity 0.2s;\n\t\topacity: 1;\n\t}\n\n\t.save {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\topacity: 0;\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 2H3.5C2.67158 2 2 2.67157 2 3.5V20.5C2 21.3284 2.67158 22 3.5 22H20.5C21.3284 22 22 21.3284 22 20.5V3.5C22 2.67157 21.3284 2 20.5 2Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M17 2V11H7.5V2H17Z' fill='white' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M13.5 5.5V7.5' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.99844 2H18.4992' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A\");\n\t}\n\n\t.todo input:focus + .save,\n\t.save:focus {\n\t\ttransition: opacity 0.2s;\n\t\topacity: 1;\n\t}\n</style>\n"
+		"contents": "<script context=\"module\" lang=\"ts\">\n\timport { enhance } from '$lib/form';\n\timport type { Load } from '@sveltejs/kit';\n\n\t// see https://kit.svelte.dev/docs#loading\n\texport const load: Load = async ({ fetch }) => {\n\t\tconst res = await fetch('/todos.json');\n\n\t\tif (res.ok) {\n\t\t\tconst todos = await res.json();\n\n\t\t\treturn {\n\t\t\t\tprops: { todos }\n\t\t\t};\n\t\t}\n\n\t\tconst { message } = await res.json();\n\n\t\treturn {\n\t\t\terror: new Error(message)\n\t\t};\n\t};\n</script>\n\n<script lang=\"ts\">\n\timport { scale } from 'svelte/transition';\n\timport { flip } from 'svelte/animate';\n\n\ttype Todo = {\n\t\tuid: string;\n\t\tcreated_at: Date;\n\t\ttext: string;\n\t\tdone: boolean;\n\t};\n\n\texport let todos: Todo[];\n\n\tasync function patch(res: Response) {\n\t\tconst todo = await res.json();\n\n\t\ttodos = todos.map((t) => {\n\t\t\tif (t.uid === todo.uid) return todo;\n\t\t\treturn t;\n\t\t});\n\t}\n</script>\n\n<svelte:head>\n\t<title>Todos</title>\n</svelte:head>\n\n<div class=\"todos\">\n\t<h1>Todos</h1>\n\n\t<form\n\t\tclass=\"new\"\n\t\taction=\"/todos.json\"\n\t\tmethod=\"post\"\n\t\tuse:enhance={{\n\t\t\tresult: async (res, form) => {\n\t\t\t\tconst created = await res.json();\n\t\t\t\ttodos = [...todos, created];\n\n\t\t\t\tform.reset();\n\t\t\t}\n\t\t}}\n\t>\n\t\t<input name=\"text\" aria-label=\"Add todo\" placeholder=\"+ tap to add a todo\" />\n\t</form>\n\n\t{#each todos as todo (todo.uid)}\n\t\t<div\n\t\t\tclass=\"todo\"\n\t\t\tclass:done={todo.done}\n\t\t\ttransition:scale|local={{ start: 0.7 }}\n\t\t\tanimate:flip={{ duration: 200 }}\n\t\t>\n\t\t\t<form\n\t\t\t\taction=\"/todos/{todo.uid}.json?_method=patch\"\n\t\t\t\tmethod=\"post\"\n\t\t\t\tuse:enhance={{\n\t\t\t\t\tpending: (data) => {\n\t\t\t\t\t\ttodo.done = !!data.get('done');\n\t\t\t\t\t},\n\t\t\t\t\tresult: patch\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<input type=\"hidden\" name=\"done\" value={todo.done ? '' : 'true'} />\n\t\t\t\t<button class=\"toggle\" aria-label=\"Mark todo as {todo.done ? 'not done' : 'done'}\" />\n\t\t\t</form>\n\n\t\t\t<form\n\t\t\t\tclass=\"text\"\n\t\t\t\taction=\"/todos/{todo.uid}.json?_method=patch\"\n\t\t\t\tmethod=\"post\"\n\t\t\t\tuse:enhance={{\n\t\t\t\t\tresult: patch\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<input aria-label=\"Edit todo\" type=\"text\" name=\"text\" value={todo.text} />\n\t\t\t\t<button class=\"save\" aria-label=\"Save todo\" />\n\t\t\t</form>\n\n\t\t\t<form\n\t\t\t\taction=\"/todos/{todo.uid}.json?_method=delete\"\n\t\t\t\tmethod=\"post\"\n\t\t\t\tuse:enhance={{\n\t\t\t\t\tresult: () => {\n\t\t\t\t\t\ttodos = todos.filter((t) => t.uid !== todo.uid);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<button class=\"delete\" aria-label=\"Delete todo\" />\n\t\t\t</form>\n\t\t</div>\n\t{/each}\n</div>\n\n<style>\n\t.todos {\n\t\twidth: 100%;\n\t\tmax-width: var(--column-width);\n\t\tmargin: var(--column-margin-top) auto 0 auto;\n\t\tline-height: 1;\n\t}\n\n\t.new {\n\t\tmargin: 0 0 0.5rem 0;\n\t}\n\n\tinput {\n\t\tborder: 1px solid transparent;\n\t}\n\n\tinput:focus-visible {\n\t\tbox-shadow: inset 1px 1px 6px rgba(0, 0, 0, 0.1);\n\t\tborder: 1px solid #ff3e00 !important;\n\t\toutline: none;\n\t}\n\n\t.new input {\n\t\tfont-size: 28px;\n\t\twidth: 100%;\n\t\tpadding: 0.5em 1em 0.3em 1em;\n\t\tbox-sizing: border-box;\n\t\tbackground: rgba(255, 255, 255, 0.05);\n\t\tborder-radius: 8px;\n\t\ttext-align: center;\n\t}\n\n\t.todo {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 2rem 1fr 2rem;\n\t\tgrid-gap: 0.5rem;\n\t\talign-items: center;\n\t\tmargin: 0 0 0.5rem 0;\n\t\tpadding: 0.5rem;\n\t\tbackground-color: white;\n\t\tborder-radius: 8px;\n\t\tfilter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));\n\t\ttransform: translate(-1px, -1px);\n\t\ttransition: filter 0.2s, transform 0.2s;\n\t}\n\n\t.done {\n\t\ttransform: none;\n\t\topacity: 0.4;\n\t\tfilter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.1));\n\t}\n\n\tform.text {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex: 1;\n\t}\n\n\t.todo input {\n\t\tflex: 1;\n\t\tpadding: 0.5em 2em 0.5em 0.8em;\n\t\tborder-radius: 3px;\n\t}\n\n\t.todo button {\n\t\twidth: 2em;\n\t\theight: 2em;\n\t\tborder: none;\n\t\tbackground-color: transparent;\n\t\tbackground-position: 50% 50%;\n\t\tbackground-repeat: no-repeat;\n\t}\n\n\tbutton.toggle {\n\t\tborder: 1px solid rgba(0, 0, 0, 0.2);\n\t\tborder-radius: 50%;\n\t\tbox-sizing: border-box;\n\t\tbackground-size: 1em auto;\n\t}\n\n\t.done .toggle {\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='22' height='16' viewBox='0 0 22 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 1.5L7.4375 14.5L1.5 8.5909' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n\t}\n\n\t.delete {\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 5V22H19.5V5H4.5Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M10 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 5H22' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 5L9.6445 2H14.3885L16 5H8Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n\t\topacity: 0.2;\n\t}\n\n\t.delete:hover,\n\t.delete:focus {\n\t\ttransition: opacity 0.2s;\n\t\topacity: 1;\n\t}\n\n\t.save {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\topacity: 0;\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 2H3.5C2.67158 2 2 2.67157 2 3.5V20.5C2 21.3284 2.67158 22 3.5 22H20.5C21.3284 22 22 21.3284 22 20.5V3.5C22 2.67157 21.3284 2 20.5 2Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M17 2V11H7.5V2H17Z' fill='white' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M13.5 5.5V7.5' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.99844 2H18.4992' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A\");\n\t}\n\n\t.todo input:focus + .save,\n\t.save:focus {\n\t\ttransition: opacity 0.2s;\n\t\topacity: 1;\n\t}\n</style>\n"
 	}
 ]

dist/templates/skeleton/files.js.json

 [
 	{
 		"name": "src/global.d.ts",
-		"contents": "/// <reference types=\"@sveltejs/kit\" />\n/// <reference types=\"svelte\" />\n/// <reference types=\"vite/client\" />\n"
+		"contents": "/// <reference types=\"@sveltejs/kit\" />\n"
 	},
 	{
 		"name": "src/routes/index.svelte",
-		"contents": "<h1>Welcome to SvelteKit</h1>\n<p>Visit <a href=\"https://kit.svelte.dev\">kit.svelte.dev</a> to read the documentation</p>"
+		"contents": "<h1>Welcome to SvelteKit</h1>\n<p>Visit <a href=\"https://kit.svelte.dev\">kit.svelte.dev</a> to read the documentation</p>\n"
 	}
 ]

dist/templates/skeleton/files.ts.json

 [
 	{
 		"name": "src/global.d.ts",
-		"contents": "/// <reference types=\"@sveltejs/kit\" />\n/// <reference types=\"svelte\" />\n/// <reference types=\"vite/client\" />\n"
+		"contents": "/// <reference types=\"@sveltejs/kit\" />\n"
 	},
 	{
 		"name": "src/routes/index.svelte",
-		"contents": "<h1>Welcome to SvelteKit</h1>\n<p>Visit <a href=\"https://kit.svelte.dev\">kit.svelte.dev</a> to read the documentation</p>"
+		"contents": "<h1>Welcome to SvelteKit</h1>\n<p>Visit <a href=\"https://kit.svelte.dev\">kit.svelte.dev</a> to read the documentation</p>\n"
 	}
 ]

package.json

 {
 	"name": "create-svelte",
-	"version": "2.0.0-next.68",
+	"version": "2.0.0-next.69",
 	"bin": "./bin.js",
@@ -10,3 +10,3 @@ "dependencies": {
 	"devDependencies": {
-		"@sveltejs/kit": "1.0.0-next.99",
+		"@sveltejs/kit": "1.0.0-next.101",
 		"@types/gitignore-parser": "^0.0.0",
@@ -30,8 +30,8 @@ "@types/prettier": "^2.2.3",
 	"scripts": {
-		"build": "node scripts/build-templates",
+		"build": "npm run format && node scripts/build-templates",
 		"check": "tsc",
 		"lint": "eslint --ignore-path .gitignore --ignore-path ../../.gitignore \"./*.js\" && npm run check-format",
-		"format": "prettier --write . --config ../../.prettierrc --ignore-path .gitignore --ignore-path ../../.gitignore",
-		"check-format": "prettier --check . --config ../../.prettierrc --ignore-path ../../.gitignore --ignore-path .gitignore"
+		"format": "prettier --write . --config ../../.prettierrc --ignore-path .gitignore --ignore-path ../../.gitignore --plugin prettier-plugin-svelte",
+		"check-format": "prettier --check . --config ../../.prettierrc --ignore-path ../../.gitignore --ignore-path .gitignore --plugin prettier-plugin-svelte"
 	}
 }

No alert changes

Improved metrics

Total package byte prevSize

546812

increased by0.09%

Lines of code

773

increased by0.39%

No dependency changes