feat: add outline to themes

app/src/lib/settings/Keymap.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+duuude

app/src/lib/settings/NestedSettings.svelte

@@ -11,7 +11,6 @@
   export let store: Writable<Record<string, any>>;
   export let depth = 0;
 
-  console.log(settings);
   const keys = Object.keys(settings);
   function isNodeInput(v: NodeInput | Nested): v is NodeInput {
     return "type" in v;
@@ -23,12 +22,18 @@
   <div class="wrapper" class:first-level={depth === 0}>
     {#if isNodeInput(value)}
       <div class="input input-{settings[key].type}">
-        <label for={key}>{settings[key].label || key}</label>
-        <Input
-          id={key}
-          input={value}
-          bind:value={$store[value?.setting || key]}
-        />
+        {#if settings[key].type === "button"}
+          <button on:click={() => settings[key]?.callback?.()}
+            >{key || settings[key].label}</button
+          >
+        {:else}
+          <label for={key}>{settings[key].label || key}</label>
+          <Input
+            id={key}
+            input={value}
+            bind:value={$store[value?.setting || key]}
+          />
+        {/if}
       </div>
     {:else}
       <details>

app/src/lib/settings/Panel.svelte

@@ -1,49 +0,0 @@
-<script lang="ts">
-  import type { NodeInput } from "@nodes/types";
-  import type { Writable } from "svelte/store";
-  import NestedSettings from "./NestedSettings.svelte";
-
-  export let setting: {
-    icon: string;
-    id: string;
-    definition: Record<string, NodeInput>;
-    settings: Writable<Record<string, unknown>>;
-  };
-
-  const store = setting.settings;
-
-  interface Nested {
-    [key: string]: NodeInput | Nested;
-  }
-
-  $: nestedSettings = constructNested();
-
-  function constructNested() {
-    const nested: Nested = {};
-
-    for (const key in setting.definition) {
-      const parts = key.split(".");
-      let current = nested;
-      for (let i = 0; i < parts.length; i++) {
-        if (i === parts.length - 1) {
-          current[parts[i]] = setting.definition[key];
-        } else {
-          current[parts[i]] = current[parts[i]] || {};
-          current = current[parts[i]] as Nested;
-        }
-      }
-    }
-    return nested;
-  }
-</script>
-
-<div class="flex flex-col">
-  <h1 class="m-0 p-4">{setting.id}</h1>
-  <NestedSettings settings={nestedSettings} {store} />
-</div>
-
-<style>
-  h1 {
-    border-bottom: solid thin var(--outline);
-  }
-</style>

app/src/lib/settings/Settings.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import type { NodeInput } from "@nodes/types";
   import type { Writable } from "svelte/store";
-  import SettingsComponent from "./Panel.svelte";
   import localStore from "$lib/helpers/localStore";
   import type { SvelteComponent } from "svelte";
+  import NestedSettings from "./NestedSettings.svelte";
 
-  export let settings: Record<
+  export let panels: Record<
     string,
     {
       icon: string;
@@ -16,13 +16,15 @@
     }
   >;
 
-  const activePanel = localStore<keyof typeof settings | false>(
+  const activePanel = localStore<keyof typeof panels | false>(
     "nodes.settings.activePanel",
     false,
   );
-  $: keys = Object.keys(settings) as unknown as (keyof typeof settings)[];
+  $: keys = panels
+    ? (Object.keys(panels) as unknown as (keyof typeof panels)[])
+    : [];
 
-  function setActivePanel(panel: keyof typeof settings | false) {
+  function setActivePanel(panel: keyof typeof panels | false) {
     if (panel === $activePanel) {
       $activePanel = false;
     } else if (panel) {
@@ -31,6 +33,28 @@
       $activePanel = false;
     }
   }
+
+  interface Nested {
+    [key: string]: NodeInput | Nested;
+  }
+
+  function constructNested(panel: (typeof panels)[keyof typeof panels]) {
+    const nested: Nested = {};
+
+    for (const key in panel.definition) {
+      const parts = key.split(".");
+      let current = nested;
+      for (let i = 0; i < parts.length; i++) {
+        if (i === parts.length - 1) {
+          current[parts[i]] = panel.definition[key];
+        } else {
+          current[parts[i]] = current[parts[i]] || {};
+          current = current[parts[i]] as Nested;
+        }
+      }
+    }
+    return nested;
+  }
 </script>
 
 <div class="wrapper" class:visible={$activePanel}>
@@ -42,26 +66,32 @@
     >
       <span class="absolute i-tabler-chevron-left w-6 h-6 block"></span>
     </button>
-    {#each keys as panel (settings[panel].id)}
+    {#each keys as panel (panels[panel].id)}
       <button
         class="tab"
         class:active={panel === $activePanel}
         on:click={() => setActivePanel(panel)}
       >
-        <i class={`block w-6 h-6 ${settings[panel].icon}`} />
+        <i class={`block w-6 h-6 ${panels[panel].icon}`} />
       </button>
     {/each}
   </div>
   <div class="content">
-    {#if $activePanel && settings[$activePanel]}
+    {#if $activePanel && panels[$activePanel]}
+      <h1 class="m-0 p-4">{panels[$activePanel].id}</h1>
       {#key $activePanel}
-        {#if settings[$activePanel].component}
+        {#if panels[$activePanel]?.component}
           <svelte:component
-            this={settings[$activePanel].component}
-            {...settings[$activePanel]}
+            this={panels[$activePanel].component}
+            {...panels[$activePanel]}
           />
         {:else}
-          <SettingsComponent setting={settings[$activePanel]} />
+          <div class="flex flex-col">
+            <NestedSettings
+              settings={constructNested(panels[$activePanel])}
+              store={panels[$activePanel].settings}
+            />
+          </div>
         {/if}
       {/key}
     {/if}
@@ -84,6 +114,10 @@
     min-width: 300px;
   }
 
+  h1 {
+    border-bottom: solid thin var(--outline);
+  }
+
   .content {
     background: var(--layer-1);
   }
@@ -97,6 +131,7 @@
   .tabs > button {
     height: 30px;
     padding: 5px;
+    border-radius: 0px;
     background: none;
     color: var(--outline);
     border: none;

app/src/lib/settings/app-settings.ts

@@ -33,6 +33,19 @@ export const AppSettingTypes = {
     label: "Show Grid",
     value: true,
   },
+  stressTest: {
+    amount: {
+      type: "integer",
+      min: 2,
+      max: 15
+    },
+    loadGrid: {
+      type: "button"
+    },
+    loadTree: {
+      type: "button"
+    },
+  },
   debug: {
     wireframe: {
       type: "boolean",