diff --git a/src/lib/components/actions.svelte b/src/lib/components/Actions.svelte
similarity index 99%
rename from src/lib/components/actions.svelte
rename to src/lib/components/Actions.svelte
index ed2acfd3..13fefaa7 100644
--- a/src/lib/components/actions.svelte
+++ b/src/lib/components/Actions.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { browser } from '$app/environment';
-  import Card from '$lib/components/card/card.svelte';
+  import Card from '$lib/components/Card/Card.svelte';
   import { env } from '$lib/util/env';
   import { pakoSerde } from '$lib/util/serde';
   import { stateStore } from '$lib/util/state';
diff --git a/src/lib/components/editor.svelte b/src/lib/components/Editor.svelte
similarity index 98%
rename from src/lib/components/editor.svelte
rename to src/lib/components/Editor.svelte
index b84683c8..0f14c2b7 100644
--- a/src/lib/components/editor.svelte
+++ b/src/lib/components/Editor.svelte
@@ -22,7 +22,9 @@
 
   stateStore.subscribe(({ errorMarkers, editorMode, code, mermaid }) => {
     console.log('editor store subscription', { code, mermaid });
-    if (!editor) return;
+    if (!editor) {
+      return;
+    }
 
     // Update editor text if it's different
     const newText = editorMode === 'code' ? code : mermaid;
diff --git a/src/lib/components/navbar.svelte b/src/lib/components/Navbar.svelte
similarity index 98%
rename from src/lib/components/navbar.svelte
rename to src/lib/components/Navbar.svelte
index 9a179bb9..c434b7e4 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <script lang="ts">
-  import Theme from './theme.svelte';
+  import Theme from './Theme.svelte';
 
   interface Link {
     title: string;
diff --git a/src/lib/components/preset.svelte b/src/lib/components/Preset.svelte
similarity index 98%
rename from src/lib/components/preset.svelte
rename to src/lib/components/Preset.svelte
index c1d466b5..059b0134 100644
--- a/src/lib/components/preset.svelte
+++ b/src/lib/components/Preset.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { updateCode } from '$lib/util/state';
-  import Card from '$lib/components/card/card.svelte';
+  import Card from '$lib/components/Card/Card.svelte';
   import { logEvent } from '$lib/util/stats';
 
   const samples = {
diff --git a/src/lib/components/theme.svelte b/src/lib/components/Theme.svelte
similarity index 100%
rename from src/lib/components/theme.svelte
rename to src/lib/components/Theme.svelte
diff --git a/src/lib/components/view.svelte b/src/lib/components/View.svelte
similarity index 99%
rename from src/lib/components/view.svelte
rename to src/lib/components/View.svelte
index dc5cfc6d..1fd36cf9 100644
--- a/src/lib/components/view.svelte
+++ b/src/lib/components/View.svelte
@@ -16,7 +16,7 @@
   let hide = false;
   let manualUpdate = true;
   let panZoomEnabled = $stateStore.panZoom;
-  let pzoom: SvgPanZoom.Instance;
+  let pzoom: typeof panzoom;
 
   const handlePanZoomChange = () => {
     const pan = pzoom.getPan();
diff --git a/src/lib/components/card/card.svelte b/src/lib/components/card/Card.svelte
similarity index 92%
rename from src/lib/components/card/card.svelte
rename to src/lib/components/card/Card.svelte
index ce1c0ad7..38098eb6 100644
--- a/src/lib/components/card/card.svelte
+++ b/src/lib/components/card/Card.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import type { Tab } from '$lib/types';
   import { slide } from 'svelte/transition';
-  import Tabs from './tabs.svelte';
+  import Tabs from './Tabs.svelte';
   export let isCloseable = true;
   export let isOpen = true;
   export let tabs: Tab[] = [];
-  export let activeTabID: string = '';
+  export let activeTabID = '';
   export let title: string;
   $: isOpen = isCloseable ? isOpen : true;
   $: isTabsShown = isOpen && tabs.length > 0;
diff --git a/src/lib/components/card/tabs.svelte b/src/lib/components/card/Tabs.svelte
similarity index 100%
rename from src/lib/components/card/tabs.svelte
rename to src/lib/components/card/Tabs.svelte
diff --git a/src/lib/components/card/card.test.ts b/src/lib/components/card/card.test.ts
index 764cad64..4624ab48 100644
--- a/src/lib/components/card/card.test.ts
+++ b/src/lib/components/card/card.test.ts
@@ -1,6 +1,6 @@
 import { cleanup, render } from '@testing-library/svelte';
 import { describe, expect, it, afterEach } from 'vitest';
-import Card from './card.svelte';
+import Card from './Card.svelte';
 
 describe('card.svelte', () => {
   // TODO: @testing-library/svelte claims to add this automatically but it doesn't work without explicit afterEach
diff --git a/src/lib/components/history/history.svelte b/src/lib/components/history/History.svelte
similarity index 99%
rename from src/lib/components/history/history.svelte
rename to src/lib/components/history/History.svelte
index 37527bcc..87500041 100644
--- a/src/lib/components/history/history.svelte
+++ b/src/lib/components/history/History.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Card from '$lib/components/card/card.svelte';
+  import Card from '$lib/components/Card/Card.svelte';
   import { inputStateStore, getStateString } from '$lib/util/state';
   import {
     addHistoryEntry,
diff --git a/src/lib/components/history/history.test.ts b/src/lib/components/history/history.test.ts
index d5a0242b..cdb50830 100644
--- a/src/lib/components/history/history.test.ts
+++ b/src/lib/components/history/history.test.ts
@@ -7,7 +7,7 @@ import {
   historyModeStore,
   historyStore
 } from './history';
-import { defaultState } from '../../util/state';
+import { defaultState } from '$lib/util/state';
 import { get } from 'svelte/store';
 
 describe('history', () => {
diff --git a/src/lib/util/fileLoaders/gist.ts b/src/lib/util/fileLoaders/gist.ts
index f2cb7ed9..c1d352a8 100644
--- a/src/lib/util/fileLoaders/gist.ts
+++ b/src/lib/util/fileLoaders/gist.ts
@@ -3,8 +3,8 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { State } from '$lib/types';
-import { defaultState } from '../state';
-import { addHistoryEntry } from '../../components/history/history';
+import { defaultState } from '$lib/util/state';
+import { addHistoryEntry } from '$lib/components/History/History';
 
 const codeFileName = 'code.mmd';
 const configFileName = 'config.json';
diff --git a/src/lib/util/migrations.ts b/src/lib/util/migrations.ts
index f739bda6..1645f224 100644
--- a/src/lib/util/migrations.ts
+++ b/src/lib/util/migrations.ts
@@ -1,6 +1,6 @@
 import { writable, get, type Writable } from 'svelte/store';
 import { persist, localStorage } from '$lib/util/persist';
-import { injectHistoryIDs } from '$lib/components/history/history';
+import { injectHistoryIDs } from '$lib/components/History/History';
 import { logEvent } from './stats';
 
 interface MigrationState {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4c14fe93..bb36f019 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -10,7 +10,7 @@
   // This can be removed once https://github.com/sveltejs/kit/issues/1612 is fixed.
   // Then move it into src and vite will bundle it automatically.
   onMount(() => {
-    window.addEventListener('hashchange', async (ev) => {
+    window.addEventListener('hashchange', async () => {
       await initHandler();
     });
     if ('serviceWorker' in navigator) {
diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte
index e3977afa..fd061dd0 100644
--- a/src/routes/edit/+page.svelte
+++ b/src/routes/edit/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import Editor from '$lib/components/editor.svelte';
-  import Navbar from '$lib/components/navbar.svelte';
-  import Preset from '$lib/components/preset.svelte';
-  import Actions from '$lib/components/actions.svelte';
-  import View from '$lib/components/view.svelte';
-  import Card from '$lib/components/card/card.svelte';
-  import History from '$lib/components/history/history.svelte';
+  import Editor from '$lib/components/Editor.svelte';
+  import Navbar from '$lib/components/Navbar.svelte';
+  import Preset from '$lib/components/Preset.svelte';
+  import Actions from '$lib/components/Actions.svelte';
+  import View from '$lib/components/View.svelte';
+  import Card from '$lib/components/Card/Card.svelte';
+  import History from '$lib/components/History/History.svelte';
   import { inputStateStore, stateStore, updateCodeStore } from '$lib/util/state';
   import { cmdKey, initHandler, syncDiagram } from '$lib/util/util';
   import { onMount } from 'svelte';
diff --git a/src/routes/view/+page.svelte b/src/routes/view/+page.svelte
index 8de80023..936fc0d1 100644
--- a/src/routes/view/+page.svelte
+++ b/src/routes/view/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import View from '$lib/components/view.svelte';
+  import View from '$lib/components/View.svelte';
   import { initHandler } from '$lib/util/util';
   import { onMount } from 'svelte';
   onMount(initHandler);