fix types

src/content-modules/Examples.svelte

@@ -41,6 +41,11 @@
   }
 
   $: detectedColors = [] as string[];
+  $: sections = $exampleStore.sections as any;
+  function onToggle(group: string) {
+    exampleStore.toggleSection(group as keyof typeof $exampleStore.sections);
+  }
+  $: console.log(sections);
 </script>
 
 <div class="flex items-center bg-slate-200 px-4">
@@ -50,7 +55,8 @@
       <input
         id={`${group}-checkbox`}
         type="checkbox"
-        bind:checked={$exampleStore.sections[group]}
+        checked={sections[group]}
+        on:change={(e) => onToggle(group)}
       />
     </div>
   {/each}
@@ -113,7 +119,7 @@
     <TextBlock />
   {/if}
   {#each charts as { chart, group }}
-    {#if $exampleStore.sections[group]}
+    {#if sections[group]}
       <div class="flex flex-col border-2 border-dashed rounded w-min mr-4">
         <Vega spec={chart($colorStore.currentPal)} />
       </div>

src/stores/example-store.ts

@@ -44,6 +44,11 @@ function createStore() {
     subscribe,
     set: (newStore: StoreData) => persistUpdate(() => newStore),
     reset: () => persistUpdate(() => ({ ...InitialStore })),
+    toggleSection: (section: keyof typeof InitialSections) =>
+      persistUpdate((old) => ({
+        ...old,
+        sections: { ...old.sections, [section]: !old.sections[section] },
+      })),
     updateExample: (example: Example, idx: number) =>
       persistUpdate((old) => {
         const newExamples = [...old.examples];