feat(ui): Connect inputs to stores

source/ui/src/lib/DensityOptions.svelte

@@ -1,29 +1,30 @@
 <script lang="ts">
+import { density } from './stores';
 import Radio from './Radio.svelte';
+
 const options = ['Low', 'Medium', 'High'];
-const type: string = 'density';
+const type = 'density';
 </script>
 
 <div>
-	<fieldset>
-		<legend>Note density</legend>
-		<Radio {options} {type} />
-	</fieldset>
+  <fieldset>
+    <legend>Note density</legend>
+    <Radio bind:selection={$density} {options} {type} />
+  </fieldset>
 </div>
 
 <style>
 fieldset {
-	padding: 0;
-	border: none;
-	margin-top: 1rem;
+  padding: 0;
+  border: none;
+  margin-top: 1rem;
 }
 
 legend {
-	text-align: center;
-	font-size: 1.25rem;
-	font-weight: 700;
-	padding: 0;
-	margin-bottom: 1rem;
-
+  text-align: center;
+  font-size: 1.25rem;
+  font-weight: 700;
+  padding: 0;
+  margin-bottom: 1rem;
 }
 </style>

source/ui/src/lib/Radio.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 export let options: string[];
 export let type: string;
-let selection: string = options[1];
+export let selection: string = options[1];
 </script>
 
 <div class="options">

source/ui/src/lib/StyleOptions.svelte

@@ -1,21 +1,19 @@
 <script lang="ts">
+import { style } from './stores';
 import stylesConfig from '../config/styles.json';
-import StyleOptionsButton from './StyleOptionsButton.svelte';
 
 const keys: string[] = Object.keys(stylesConfig);
-
-let selection: string = 'synth';
 </script>
 
 <fieldset>
-  <legend>{stylesConfig[selection] || 'Synthesizer'}</legend>
+  <legend>{stylesConfig[$style] || 'Synthesizer'}</legend>
   <div class="grid">
     {#each keys as key, i}
-      <label data-selected={selection === key}>
+      <label data-selected={$style === key}>
         <div>
           <img src={`${key}.svg`} alt={stylesConfig[key]} />
         </div>
-        <input type="radio" bind:group={selection} value={key} />
+        <input type="radio" bind:group={$style} value={key} />
       </label>
     {/each}
   </div>

source/ui/src/lib/TemperatureOptions.svelte

@@ -1,28 +1,30 @@
 <script lang="ts">
+import { temperature } from './stores';
 import Radio from './Radio.svelte';
-const options: string[] = ['Low', 'Medium', 'High', 'Very High'];
-const type: string = 'temperature';
+
+const options = ['Low', 'Medium', 'High', 'Very High'];
+const type = 'temperature';
 </script>
 
 <div>
-	<fieldset>
-		<legend>Temperature</legend>
-		<Radio {options} {type} />
-	</fieldset>
+  <fieldset>
+    <legend>Temperature</legend>
+    <Radio bind:selection={$temperature} {options} {type} />
+  </fieldset>
 </div>
 
 <style>
 fieldset {
-	padding: 0;
-	border: none;
-	margin-top: 1rem;
+  padding: 0;
+  border: none;
+  margin-top: 1rem;
 }
 
 legend {
-	text-align: center;
-	font-size: 1.25rem;
-	font-weight: 700;
-	padding: 0;
-	margin-bottom: 1rem;
+  text-align: center;
+  font-size: 1.25rem;
+  font-weight: 700;
+  padding: 0;
+  margin-bottom: 1rem;
 }
 </style>

source/ui/src/lib/stores.ts

@@ -4,3 +4,6 @@ import type { Writable } from 'svelte/store';
 
 export const loading: Writable<boolean> = writable(false);
 export const playing: Writable<boolean> = writable(true);
+export const style: Writable<string> = writable('synth');
+export const density: Writable<string> = writable('Medium');
+export const temperature: Writable<string> = writable('Medium');