feat: add outline to themes

app/src/routes/+page.svelte

@@ -8,7 +8,8 @@
   import Viewer from "$lib/viewer/Viewer.svelte";
   import Settings from "$lib/settings/Settings.svelte";
   import { AppSettings, AppSettingTypes } from "$lib/settings/app-settings";
-  import { get, writable } from "svelte/store";
+  import { get, writable, type Writable } from "svelte/store";
+  import Keymap from "$lib/settings/Keymap.svelte";
 
   const nodeRegistry = new RemoteNodeRegistry("http://localhost:3001");
   const runtimeExecutor = new MemoryRuntimeExecutor(nodeRegistry);
@@ -19,6 +20,8 @@
     ? JSON.parse(localStorage.getItem("graph")!)
     : templates.grid(3, 3);
 
+  let managerStatus: Writable<"loading" | "error" | "idle">;
+
   function handleResult(event: CustomEvent<Graph>) {
     res = runtimeExecutor.execute(event.detail, get(settings?.graph?.settings));
   }
@@ -34,6 +37,12 @@
       settings: AppSettings,
       definition: AppSettingTypes,
     },
+    graph: {},
+    shortcuts: {
+      id: "shortcuts",
+      icon: "i-tabler-keyboard",
+      component: Keymap,
+    },
   };
 
   function handleSettings(
@@ -42,27 +51,28 @@
       types: Record<string, unknown>;
     }>,
   ) {
-    settings = {
-      ...settings,
-      graph: {
-        icon: "i-tabler-chart-bar",
-        id: "graph",
-        settings: writable(ev.detail.values),
-        definition: ev.detail.types,
-      },
+    settings.general.definition.stressTest.loadGrid.callback = function () {
+      const store = get(settings.general.settings);
+      graph = templates.grid(store.amount, store.amount);
     };
+
+    settings.general.definition.stressTest.loadTree.callback = function () {
+      const store = get(settings.general.settings);
+      graph = templates.tree(store.amount);
+    };
+
+    settings.graph = {
+      icon: "i-tabler-chart-bar",
+      id: "graph",
+      settings: writable(ev.detail.values),
+      definition: ev.detail.types,
+    };
+    settings = settings;
   }
 </script>
 
-<div class="wrapper">
-  <header>
-    header
-    <button
-      on:click={() => {
-        graph = templates.grid(15, 15);
-      }}>grid stress-test</button
-    >
-  </header>
+<div class="wrapper manager-{$managerStatus}">
+  <header></header>
   <Grid.Row>
     <Grid.Cell>
       <Viewer result={res} />
@@ -72,12 +82,13 @@
         <GraphInterface
           registry={nodeRegistry}
           {graph}
+          bind:status={managerStatus}
           settings={settings?.graph?.settings}
           on:settings={handleSettings}
           on:result={handleResult}
           on:save={handleSave}
         />
-        <Settings {settings}></Settings>
+        <Settings panels={settings}></Settings>
       {/key}
     </Grid.Cell>
   </Grid.Row>
@@ -97,6 +108,17 @@
     grid-template-rows: 50px 1fr;
   }
 
+  .wrapper :global(canvas) {
+    transition: opacity 0.3s ease;
+    opacity: 1;
+  }
+
+  .manager-loading :global(.graph-wrapper),
+  .manager-loading :global(canvas) {
+    opacity: 0.2;
+    pointer-events: none;
+  }
+
   :global(html) {
     background: rgb(13, 19, 32);
     background: linear-gradient(