refactor: how the keymap gets to the viewer

app/src/lib/graph-interface/edges/Edge.svelte

@@ -79,7 +79,6 @@
 
   $: if ($colors.outline) {
     lineColor.copyLinearToSRGB($colors.outline);
-    console.log("lineColor", lineColor);
   }
 </script>
 

app/src/lib/graph-interface/graph/Wrapper.svelte

@@ -2,9 +2,10 @@
   import type { Graph, NodeRegistry } from "@nodes/types";
   import GraphEl from "./Graph.svelte";
   import { GraphManager } from "../graph-manager.js";
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, setContext } from "svelte";
   import type { Writable } from "svelte/store";
   import { debounce } from "$lib/helpers";
+  import { createKeyMap } from "$lib/helpers/createKeyMap";
 
   export let registry: NodeRegistry;
   export let graph: Graph;
@@ -14,6 +15,9 @@
 
   export const status = manager.status;
 
+  export const keymap = createKeyMap([]);
+  setContext("keymap", keymap);
+
   const updateSettings = debounce((s) => {
     manager.setSettings(s);
   }, 200);

app/src/lib/settings/Keymap.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import type { createKeyMap } from "$lib/helpers/createKeyMap";
-  import { getContext } from "svelte";
 
-  const { keys } = getContext<ReturnType<typeof createKeyMap>>("keymap");
+  export let keymap: ReturnType<typeof createKeyMap>;
+  const keys = keymap.keys;
 </script>
 
 <div class="wrapper">

app/src/lib/settings/Settings.svelte

@@ -21,7 +21,9 @@
     false,
   );
   $: keys = panels
-    ? (Object.keys(panels) as unknown as (keyof typeof panels)[])
+    ? (Object.keys(panels) as unknown as (keyof typeof panels)[]).filter(
+        (key) => !!panels[key]?.id,
+      )
     : [];
 
   function setActivePanel(panel: keyof typeof panels | false) {
@@ -83,7 +85,7 @@
         {#if panels[$activePanel]?.component}
           <svelte:component
             this={panels[$activePanel].component}
-            {...panels[$activePanel]}
+            {...panels[$activePanel]?.props}
           />
         {:else}
           <div class="flex flex-col">

app/src/routes/+page.svelte

@@ -10,8 +10,7 @@
   import { AppSettings, AppSettingTypes } from "$lib/settings/app-settings";
   import { get, writable, type Writable } from "svelte/store";
   import Keymap from "$lib/settings/Keymap.svelte";
-  import { createKeyMap } from "$lib/helpers/createKeyMap";
+  import type { createKeyMap } from "$lib/helpers/createKeyMap";
-  import { setContext } from "svelte";
 
   const nodeRegistry = new RemoteNodeRegistry("http://localhost:3001");
   const runtimeExecutor = new MemoryRuntimeExecutor(nodeRegistry);
@@ -24,6 +23,8 @@
 
   let managerStatus: Writable<"loading" | "error" | "idle">;
 
+  let keymap: ReturnType<typeof createKeyMap>;
+
   function handleResult(event: CustomEvent<Graph>) {
     res = runtimeExecutor.execute(event.detail, get(settings?.graph?.settings));
   }
@@ -32,10 +33,6 @@
     localStorage.setItem("graph", JSON.stringify(event.detail));
   }
 
-  const keyMap = createKeyMap([]);
-
-  setContext("keymap", keyMap);
-
   let settings: Record<string, any> = {
     general: {
       id: "general",
@@ -43,13 +40,21 @@
       settings: AppSettings,
       definition: AppSettingTypes,
     },
+    shortcuts: {},
     graph: {},
-    shortcuts: {
+  };
+
+  $: if (keymap) {
+    settings.shortcuts = {
       id: "shortcuts",
       icon: "i-tabler-keyboard",
+      props: { keymap },
       component: Keymap,
-    },
+    };
-  };
+
+    settings = settings;
+    console.log({ settings });
+  }
 
   function handleSettings(
     ev: CustomEvent<{
@@ -88,6 +93,7 @@
         <GraphInterface
           registry={nodeRegistry}
           {graph}
+          bind:keymap
           bind:status={managerStatus}
           settings={settings?.graph?.settings}
           on:settings={handleSettings}