fix prevent default, add test page

src/lib/KeyboardControls.svelte

@@ -40,8 +40,10 @@
 		}
 	}
 
-	function updateKeyboardControls(controlName: string, status: boolean) {
+	function updateKeyboardControls(controlName: string, status: boolean, event: any = null) {
 		if (controls[controlName]) {
+			if (status && event) event.preventDefault();
+
 			controls[controlName].set(status);
 		}
 	}
@@ -56,12 +58,24 @@
 		const value: string = evt[eventProperty];
 
 		if (integralKeys[value]) {
+			/**
+			 * TODO: This isn't great. It prevents default behavior if any part of a 
+			 * provided key combo is pressed. 
+			 * 
+			 * For example if "Control + a" has a default behavior,
+			 * and a configured combo is "Control + f" this will block the "Control + a"
+			 * behavior as soon as Control is pressed.
+			 * 
+			 * Perhaps need to get rid of these combo derived stores and let that be solved
+			 * in userland with if ($Control && $f) though that might not solve the problem either.
+			 * More testing required.
+			 * */ 
+			evt.preventDefault();
 			integralKeys[value].set(status);
 		}
 
 		if (!activeCombo) {
-			evt.preventDefault();
-			updateKeyboardControls(keycodeToControlName[value], status);
+			updateKeyboardControls(keycodeToControlName[value], status, evt);
 		}
 	}
 

src/lib/Testing.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { useKeyboardControls } from './hooks';
+	import type { KeyboardControl } from './models';
+
+	export let config: KeyboardControl[];
+
+	const { UP, f, F, Control_a } = useKeyboardControls();
+
+	let active: string = '';
+
+	$: if ($UP) {
+		active = 'UP';
+	} else if ($f) {
+		active = 'f';
+	} else if ($F) {
+		active = 'F';
+	} else if ($Control_a) {
+		active = 'Control_a';
+	} else {
+    active = '';
+  }
+</script>
+
+<ul>
+	{#each config as control (control.name)}
+		<li style:background={active === control.name ? '#3ebf77' : '#eeeeee'}>
+			<pre>{JSON.stringify(control, null, 2)}</pre>
+		</li>
+	{/each}
+</ul>
+
+<style>
+  ul {
+    list-style: none;
+    padding: 0;
+    /* for testing preventDefault on ArrowUp */
+    height: 125vh;
+  }
+</style>

src/routes/+page.svelte

@@ -1,3 +1,22 @@
-<h1>Welcome to your library project</h1>
-<p>Create your package using @sveltejs/package and preview/showcase your work with SvelteKit</p>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script lang="ts">
+	import type { KeyboardControl } from "$lib";
+	import KeyboardControls from "$lib/KeyboardControls.svelte";
+	import Testing from "$lib/Testing.svelte";
+
+  const config: KeyboardControl[] = [
+    { name: 'UP', keys: ['ArrowUp', 'W', 'w'] },
+    { name: 'f', keys: ['f']},
+    { name: 'F', keys: ['F']},
+    { name: 'Control_a', keys: [['Control', 'a']] },
+    // { name: 'MetaFCombo', keys: [['Meta', 'f']] },
+  ]
+  
+</script>
+
+<h1>Svelte Keyboard Controls</h1>
+<pre>
+  <code>npm i -D svelte-kbc</code>
+</pre>
+<KeyboardControls {config} debug>
+  <Testing {config} />
+</KeyboardControls>