diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 3fc6d86..d8a7c6c 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -38,8 +38,7 @@ repos:
     hooks:
       - id: eslint
         types: [file]
-        files: \.(svelte|js)$
-        args: [--plugin, eslint-plugin-svelte3]
+        files: \.(svelte|js|ts)$
         additional_dependencies:
           - eslint
           - svelte
diff --git a/readme.md b/readme.md
index 3950a84..9c8a245 100644
--- a/readme.md
+++ b/readme.md
@@ -1,6 +1,6 @@
 <h1 align="center">
-  <img src="https://raw.githubusercontent.com/janosh/svelte-toc/main/static/favicon.svg" alt="Svelte MultiSelect" height=60>
-  <br>&ensp;Svelte MultiSelect
+  <img src="https://raw.githubusercontent.com/janosh/svelte-multiselect/main/static/favicon.svg" alt="Svelte MultiSelect" height="60" width="60">
+  <br class="hide-in-docs">&ensp;Svelte MultiSelect
 </h1>
 
 <h4 align="center">
diff --git a/static/global.css b/src/app.css
similarity index 90%
rename from static/global.css
rename to src/app.css
index 67fb7c2..f333466 100644
--- a/static/global.css
+++ b/src/app.css
@@ -34,10 +34,12 @@ main {
   margin: auto;
   margin-bottom: 3em;
   width: 100%;
+  max-width: 50em;
 }
 a {
   color: var(--blue);
   text-decoration: none;
+  transition: 0.2s;
 }
 a:hover {
   color: orange;
@@ -60,6 +62,9 @@ pre {
 a code {
   color: white;
 }
+ul li {
+  margin: 1ex 0;
+}
 
 div.table {
   overflow: scroll;
@@ -76,6 +81,14 @@ tbody tr:nth-child(odd) {
   background: black;
 }
 
+h1 {
+  display: flex;
+  font-size: clamp(2rem, 2rem + 2vw, 3rem);
+  place-items: center;
+  place-content: center;
+  margin: 1.2em 0;
+}
+
 :where(h2, h3, h4, h5, h6) {
   scroll-margin-top: 50px;
   transition: 0.3s;
diff --git a/src/app.html b/src/app.html
index 266ce82..6289a3c 100644
--- a/src/app.html
+++ b/src/app.html
@@ -17,7 +17,6 @@
     <meta property="og:site_name" content="Svelte MultiSelect" />
 
     <link rel="icon" href="/favicon.svg" />
-    <link rel="stylesheet" href="/global.css" />
     <link rel="stylesheet" href="/prism-vsc-dark-plus.css" />
 
     <!-- see netlify.toml for this script's origin -->
diff --git a/src/routes/__error.svelte b/src/routes/__error.svelte
index 8f5a6ea..5357dbc 100644
--- a/src/routes/__error.svelte
+++ b/src/routes/__error.svelte
@@ -1,6 +1,61 @@
-<script lang="ts">
-  import { goto } from '$app/navigation'
-  import { onMount } from 'svelte'
+<script lang="ts" context="module">
+  import { dev } from '$app/env'
+  import type { ErrorLoad } from '@sveltejs/kit'
+
+  export const load: ErrorLoad = ({ error, status }) => ({
+    props: { error, status },
+  })
+</script>
 
-  onMount(() => goto(`/`)) // go back to index page on missing routes
+<script lang="ts">
+  export let status: number
+  export let error: Error
 </script>
+
+<svelte:head>
+  <title>{status} error</title>
+</svelte:head>
+
+<div>
+  {#if status === 404}
+    <h1>{error.name} {status}: Page not found 😅</h1>
+  {:else if status >= 500}
+    <h1>{error.name} {status}</h1>
+    <p>
+      This may be our fault. If page reloading doesn't help, please raise an issue on
+      <a href="https://github.com/janosh/svelte-multiselect/issues">GitHub</a>. Thanks! 🙏
+    </p>
+  {:else}
+    <h1>⚠️ {error.name} {status}</h1>
+  {/if}
+  <p>
+    Return to <a sveltekit:prefetch href="/">index page</a>.
+  </p>
+
+  {#if dev && error?.stack}
+    <h2>Stack Trace</h2>
+    <pre>{error.stack}</pre>
+  {/if}
+</div>
+
+<style>
+  div {
+    font-size: 1.2em;
+    max-width: 45em;
+    padding: 5em 3em 1em;
+    margin: auto;
+  }
+  p {
+    text-align: center;
+    max-width: 35em;
+    margin: auto;
+  }
+  pre {
+    overflow: scroll;
+    font-size: 0.9em;
+    white-space: pre-wrap;
+    background: var(--accentBg);
+    padding: 5pt 1em;
+    border-radius: 3pt;
+  }
+</style>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
new file mode 100644
index 0000000..955d601
--- /dev/null
+++ b/src/routes/__layout.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import GitHubCorner from 'svelte-github-corner'
+  import '../app.css'
+</script>
+
+<GitHubCorner href="https://github.com/janosh/svelte-multiselect" />
+
+<slot />
diff --git a/src/routes/demos/__layout.svelte b/src/routes/demos/__layout.svelte
new file mode 100644
index 0000000..642bb83
--- /dev/null
+++ b/src/routes/demos/__layout.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { page } from '$app/stores'
+
+  const routes = Object.keys(import.meta.glob(`./*.svx`)).map((filename) =>
+    filename.split(`.`)[1].split(`/`).at(-1)
+  ) as string[]
+
+  $: isCurrent = (path: string) => {
+    if (path === $page.url.pathname) return `page`
+    if (path !== `/` && $page.url.pathname.includes(path)) return `page`
+    return undefined
+  }
+</script>
+
+<a href="/" sveltekit:prefetch aria-label="Back to index page">&laquo; back</a>
+<h1>
+  <img src="/favicon.svg" alt="Svelte MultiSelect" height="50" width="50" />&ensp;Svelte
+  MultiSelect
+</h1>
+
+<p>Other examples</p>
+<nav>
+  {#each routes as route, idx}
+    {#if idx > 0}<strong>&bull;</strong>{/if}
+    <a href={route} sveltekit:prefetch aria-current={isCurrent(route)}>/{route}</a>
+  {/each}
+</nav>
+
+<main>
+  <slot />
+</main>
+
+<style>
+  h1,
+  p {
+    text-align: center;
+    display: flex;
+    place-content: center;
+    place-items: center;
+  }
+  a[href='/'] {
+    font-size: 16pt;
+    position: absolute;
+    top: 2em;
+    left: 2em;
+    background-color: rgba(255, 255, 255, 0.1);
+    padding: 1pt 5pt;
+    border-radius: 3pt;
+    transition: 0.2s;
+  }
+  nav > a {
+    padding-bottom: 2pt;
+  }
+  nav > a[aria-current='page'] {
+    border-bottom: 1px solid lightgray;
+  }
+  a:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+  nav {
+    display: flex;
+    gap: 1ex;
+    place-content: center;
+    margin: 1em 0 3em;
+  }
+</style>
diff --git a/src/routes/css-classes.svx b/src/routes/demos/css-classes.svx
similarity index 75%
rename from src/routes/css-classes.svx
rename to src/routes/demos/css-classes.svx
index 58a6fee..b528889 100644
--- a/src/routes/css-classes.svx
+++ b/src/routes/demos/css-classes.svx
@@ -1,13 +1,9 @@
 <script>
-  import MultiSelect from '../lib'
-  import { fruits } from '../options'
+  import MultiSelect from '$lib'
+  import { fruits } from '$src/options'
 </script>
 
-<main>
-
-# External CSS Classes
-
-When using CSS frameworks like Tailwind, you can customize the appearance of `<MultiSelect />` through the following classes:
+## External CSS Classes
 
 ```svelte
 <MultiSelect
@@ -22,7 +18,11 @@ When using CSS frameworks like Tailwind, you can customize the appearance of `<M
 />
 ```
 
+<br />
+
+<label for="fruits"><strong>Fruit Picker</strong></label>
 <MultiSelect
+  id="fruits"
   options={fruits}
   outerDivClass="foo"
   ulSelectedClass="bar"
@@ -33,4 +33,6 @@ When using CSS frameworks like Tailwind, you can customize the appearance of `<M
   liActiveOptionClass="mom"
 />
 
-</main>
+<br />
+
+When using CSS frameworks like Tailwind, you can customize the appearance of `<MultiSelect />` through the following classes:
diff --git a/src/routes/disabled.svx b/src/routes/demos/disabled.svx
similarity index 76%
rename from src/routes/disabled.svx
rename to src/routes/demos/disabled.svx
index 980dc36..1e69eae 100644
--- a/src/routes/disabled.svx
+++ b/src/routes/demos/disabled.svx
@@ -1,10 +1,9 @@
 <script>
-  import MultiSelect from '../lib'
+  import MultiSelect from '$lib'
+  import { fruits } from '$src/options'
 </script>
 
-<main>
-
-# Disabled
+## Disabled
 
 ```svelte
 <MultiSelect
@@ -17,7 +16,11 @@
 </MultiSelect>
 ```
 
+<br />
+
+<label for="disabled"><strong>Disabled MultiSelect</strong></label>
 <MultiSelect
+  id="disabled"
   options={[{ label: `Svelte`, value: `Svelte`, preselected: true }]}
   disabled
   disabledTitle="Super special disabled message"
@@ -25,5 +28,3 @@
 >
   <span slot="disabled-icon">This component is disabled. Get outta here!</span>
 </MultiSelect>
-
-</main>
diff --git a/src/routes/max-select.svx b/src/routes/demos/max-select.svx
similarity index 61%
rename from src/routes/max-select.svx
rename to src/routes/demos/max-select.svx
index feff1c1..b8d4e15 100644
--- a/src/routes/max-select.svx
+++ b/src/routes/demos/max-select.svx
@@ -1,19 +1,10 @@
 <script>
-  import MultiSelect from '../lib'
-  import { languages } from '../options'
+  import MultiSelect from '$lib'
+  import { languages } from '$src/options'
+  import LanguageSlot from '$src/components/LanguageSlot.svelte'
 </script>
 
-<main>
-
-# Disabled MultiSelect
-
-Test that component in disabled state:
-
-- has attribute aria-disabled
-- has disabled title
-- has `<input disabled="true">`
-- renders no buttons
-- renders disabled slot
+## Disabled MultiSelect
 
 ```svelte
 <MultiSelect
@@ -23,10 +14,22 @@ Test that component in disabled state:
 />
 ```
 
+<br />
+
 <MultiSelect
   options={languages}
   maxSelect={10}
   placeholder="What languages do you know?"
-/>
+>
+  <LanguageSlot let:option {option} slot="selected" />
+</MultiSelect>
+
+<br />
 
-</main>
+Test that component in disabled state:
+
+- has attribute aria-disabled
+- has disabled title
+- has `<input disabled="true">`
+- renders no buttons
+- renders disabled slot
diff --git a/src/routes/ui.svx b/src/routes/demos/ui.svx
similarity index 71%
rename from src/routes/ui.svx
rename to src/routes/demos/ui.svx
index 7a0a571..eca5c7e 100644
--- a/src/routes/ui.svx
+++ b/src/routes/demos/ui.svx
@@ -1,11 +1,31 @@
 <script>
-  import MultiSelect from '../lib'
-  import { fruits } from '../options'
+  import MultiSelect from '$lib'
+  import { fruits } from '$src/options'
 </script>
 
-<main>
+## User interface
 
-# User interface
+```svelte
+<MultiSelect
+  options={fruits}
+  placeholder="Pick your favorite fruits"
+  removeAllTitle="Delete all fruits"
+  invalid
+/>
+```
+
+<br />
+
+<label for="fruits"><strong>Fruit Picker</strong></label>
+<MultiSelect
+  id="fruits"
+  options={fruits}
+  placeholder="Pick your favorite fruits!"
+  removeAllTitle="Delete all fruits"
+  invalid
+/>
+
+<br />
 
 This page is mostly used for testing. It checks that:
 
@@ -15,7 +35,8 @@ This page is mostly used for testing. It checks that:
   - has custom title (if supplied with `removeAllTitle`)
 - component can be focused
   - which opens dropdown
-  - and closes dropdown when input looses focus
+  - and closes dropdown when user tabs out of input or clicks outside component
+  - importantly, we don't close dropdown when input looses focus
 - filters options to only list matches when entering text
 - accessibility
   - input is `aria-invalid` when component has `invalid=true`
@@ -23,21 +44,3 @@ This page is mostly used for testing. It checks that:
   - has `aria-expanded='true'` when open
   - options have `aria-selected='false'` and selected items have `aria-selected='true`
   - invisible `input.form-control` is `aria-hidden`
-
-```svelte
-<MultiSelect
-  options={fruits}
-  placeholder="Pick your favorite fruits"
-  removeAllTitle="Delete all fruits"
-  invalid
-/>
-```
-
-<MultiSelect
-  options={fruits}
-  placeholder="Pick your favorite fruits"
-  removeAllTitle="Delete all fruits"
-  invalid
-/>
-
-</main>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 6ca6b01..f9a5723 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,14 +1,13 @@
 <script lang="ts">
-  import GitHubCorner from 'svelte-github-corner'
   import Toc from 'svelte-toc'
   import Readme from '../../readme.md'
   import Examples from '../components/Examples.svelte'
 
-  export let routes: string[]
+  const routes = Object.keys(import.meta.glob(`./demos/*.svx`)).map(
+    (filename) => filename.split(`.`)[1]
+  )
 </script>
 
-<GitHubCorner href="https://github.com/janosh/svelte-multiselect" />
-
 <main>
   <Readme>
     <Examples slot="examples" />
@@ -17,42 +16,21 @@
       <nav>
         {#each routes as route, idx}
           {#if idx > 0}<strong>&bull;</strong>{/if}
-          <a href={route}>{route}</a>
+          <a href={route}>/{route.split(`/`).at(-1)}</a>
         {/each}
       </nav>
     </svelte:fragment>
   </Readme>
 </main>
+
 <Toc headingSelector="main > :where(h2, h3)" />
 
 <style>
-  :global(h1) {
-    display: flex;
-    font-size: clamp(2rem, 2rem + 2vw, 3rem);
-    place-items: center;
-    place-content: center;
-    margin: 1.2em 0;
-  }
-  /* outer div = hydration target */
-  :global(body > div) {
+  nav {
     display: flex;
-    margin: auto;
-    max-width: 1100px;
-  }
-  :global(h1 br) {
-    display: none;
-  }
-  @media (max-width: 600px) {
-    :global(h1) {
-      flex-direction: column;
-      gap: 1ex;
-    }
+    gap: 1ex;
   }
   :global(.hide-in-docs) {
     display: none;
   }
-  nav {
-    display: flex;
-    gap: 1ex;
-  }
 </style>
diff --git a/src/routes/index.ts b/src/routes/index.ts
deleted file mode 100644
index 771b477..0000000
--- a/src/routes/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { RequestHandler } from '@sveltejs/kit'
-
-export const get: RequestHandler = async () => {
-  const routes = Object.keys(import.meta.glob(`./*.svx`)).map(
-    (filename) => filename.split(`.`)[1]
-  )
-
-  return { body: { routes } }
-}
diff --git a/svelte.config.js b/svelte.config.js
index 06710df..77b66a5 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,6 +1,7 @@
 import adapter from '@sveltejs/adapter-static'
 import { s } from 'hastscript'
 import { mdsvex } from 'mdsvex'
+import path from 'path'
 import linkHeadings from 'rehype-autolink-headings'
 import headingSlugs from 'rehype-slug'
 import preprocess from 'svelte-preprocess'
@@ -42,6 +43,11 @@ export default {
     },
 
     vite: {
+      resolve: {
+        alias: {
+          $src: path.resolve(`./src`),
+        },
+      },
       server: {
         fs: { allow: [`..`] }, // needed to import readme.md
       },
diff --git a/tests/multiselect.test.ts b/tests/multiselect.test.ts
index 4052b35..d4df23e 100644
--- a/tests/multiselect.test.ts
+++ b/tests/multiselect.test.ts
@@ -21,13 +21,13 @@ const context = await browser.newContext({
 
 describe(`input`, async () => {
   const page = await context.newPage()
-  await page.goto(`/ui`)
+  await page.goto(`/demos/ui`)
 
   test(`opens dropdown on focus`, async () => {
     expect(await page.$(`.multiselect > ul.options.hidden`)).toBeTruthy()
     expect(await page.$(`.multiselect.open`)).toBeNull()
 
-    await page.click(`input[placeholder='Pick your favorite fruits']`)
+    await page.click(`input[placeholder='Pick your favorite fruits!']`)
 
     expect(await page.$(`.multiselect.open`)).toBeTruthy()
     await page.waitForTimeout(500) // give DOM time to update
@@ -42,9 +42,9 @@ describe(`input`, async () => {
   test(`closes dropdown on tab out`, async () => {
     // note we only test for close on tab out, not on blur since blur should not close in case user
     // clicked anywhere else inside component
-    await page.click(`input[placeholder='Pick your favorite fruits']`)
+    await page.click(`input[placeholder='Pick your favorite fruits!']`)
 
-    await page.focus(`input[placeholder='Pick your favorite fruits']`)
+    await page.focus(`input[placeholder='Pick your favorite fruits!']`)
     await page.keyboard.press(`Tab`)
     await page.waitForTimeout(500) // give DOM time to update
 
@@ -57,7 +57,7 @@ describe(`input`, async () => {
 
   test(`filters dropdown to show only matching options when entering text`, async () => {
     await page.fill(
-      `input[placeholder='Pick your favorite fruits']`,
+      `input[placeholder='Pick your favorite fruits!']`,
       `Pineapple`
     )
 
@@ -71,7 +71,7 @@ describe(`input`, async () => {
 
 describe(`remove all button`, async () => {
   const page = await context.newPage()
-  await page.goto(`/ui`)
+  await page.goto(`/demos/ui`)
 
   await page.click(`.multiselect`) // open the dropdown
   await page.click(`.multiselect > ul.options > li`) // select 1st option
@@ -101,7 +101,7 @@ describe(`remove all button`, async () => {
 
 describe(`external CSS classes`, async () => {
   const page = await context.newPage()
-  await page.goto(`/css-classes`)
+  await page.goto(`/demos/css-classes`)
 
   await page.click(`.multiselect`) // open the dropdown
   await page.click(`.multiselect > ul.options > li`) // select 1st option
@@ -126,7 +126,7 @@ describe(`external CSS classes`, async () => {
 
 describe(`disabled multiselect`, async () => {
   const page = await context.newPage()
-  await page.goto(`/disabled`)
+  await page.goto(`/demos/disabled`)
   const div = await page.$(`.multiselect.disabled`)
 
   test(`has attribute aria-disabled`, async () => {
@@ -156,12 +156,12 @@ describe(`disabled multiselect`, async () => {
 
 describe(`accessibility`, async () => {
   const page = await context.newPage()
-  await page.goto(`/ui`)
+  await page.goto(`/demos/ui`)
 
   test(`input is aria-invalid when component has invalid=true`, async () => {
     // don't interact with component before this test as it will set invalid=false
     const invalid = await page.getAttribute(
-      `input[placeholder='Pick your favorite fruits']`,
+      `input[placeholder='Pick your favorite fruits!']`,
       `aria-invalid`,
       { strict: true }
     )
@@ -213,9 +213,9 @@ describe(`accessibility`, async () => {
 describe(`multiselect`, async () => {
   test(`can select and remove many options`, async () => {
     const page = await context.newPage()
-    await page.goto(`/ui`)
+    await page.goto(`/demos/ui`)
 
-    await page.locator(`[placeholder="Pick your favorite fruits"]`).click()
+    await page.locator(`[placeholder="Pick your favorite fruits!"]`).click()
 
     for (const option of [`Avocado`, `Cherries`, `Peach`, `Lychee`, `Kiwi`]) {
       await page.locator(`text=${option} >> nth=0`).click()
diff --git a/tsconfig.json b/tsconfig.json
index 9ca761d..e03e36e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,6 +10,10 @@
     // enable source maps by default.
     "sourceMap": true,
 
-    "forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true,
+
+    "paths": {
+      "$src/*": ["./src/*"]
+    }
   }
 }