feat: style checkboxes better

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

@@ -60,8 +60,8 @@
     edges: [number, number, number, string][];
   } = null;
 
-  let width = globalThis?.innerWidth ?? 100;
-  let height = globalThis?.innerHeight ?? 100;
+  let width = rect?.width ?? 100;
+  let height = rect?.height ?? 100;
 
   let cameraBounds = [-1000, 1000, -1000, 1000];
   $: cameraBounds = [

app/src/lib/node-store/BreadCrumbs.svelte

@@ -44,7 +44,8 @@
     align-items: center;
     padding: 0.4em;
     gap: 0.8em;
-    height: 1em;
+    height: 35px;
+    box-sizing: border-box;
     border-bottom: solid thin var(--outline);
   }
   .breadcrumbs > button {

app/src/lib/runtime-executor.ts

@@ -204,7 +204,7 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
 
           // console.log(`${a2 - a1}ms TRANSFORMED_INPUTS`);
 
-          const encoded_inputs = concatEncodedArrays(transformed_inputs);
+          const encoded_inputs = encodeNestedArray(transformed_inputs);
           const a3 = performance.now();
           console.groupCollapsed(`executing ${node_type.id || node.id}`);
           console.log(`Inputs:`, transformed_inputs);

app/src/lib/settings/NestedSettings.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { NodeInput } from "@nodes/types";
-  import Input, { Details } from "@nodes/ui";
+  import Input from "@nodes/ui";
   import type { Writable } from "svelte/store";
 
   interface Nested {
@@ -11,7 +11,7 @@
   export let store: Writable<Record<string, any>>;
   export let depth = 0;
 
-  const keys = Object.keys(settings);
+  const keys = Object.keys(settings).filter((key) => key !== "__title");
   function isNodeInput(v: NodeInput | Nested): v is NodeInput {
     return "type" in v;
   }
@@ -24,7 +24,7 @@
       <div class="input input-{settings[key].type}">
         {#if settings[key].type === "button"}
           <button on:click={() => settings[key]?.callback?.()}
-            >{key || settings[key].label}</button
+            >{settings[key].label || key}</button
           >
         {:else}
           <label for={key}>{settings[key].label || key}</label>
@@ -37,7 +37,7 @@
       </div>
     {:else}
       <details>
-        <summary>{key}</summary>
+        <summary>{settings[key]?.__title || key}</summary>
         <div class="content">
           <svelte:self settings={settings[key]} {store} depth={depth + 1} />
         </div>

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

@@ -35,26 +35,32 @@ export const AppSettingTypes = {
     value: true,
   },
   nodeInterface: {
+    __title: "Node Interface",
     showNodeGrid: {
       type: "boolean",
+      label: "Show Grid",
       value: true
     },
     snapToGrid: {
       type: "boolean",
+      label: "Snap to Grid",
       value: true
     }
   },
   stressTest: {
+    __title: "Stress Test",
     amount: {
       type: "integer",
       min: 2,
       max: 15
     },
     loadGrid: {
-      type: "button"
+      type: "button",
+      label: "Load Grid"
     },
     loadTree: {
-      type: "button"
+      type: "button",
+      label: "Load Tree"
     },
   },
   debug: {

app/src/routes/+page.svelte

@@ -138,7 +138,7 @@
 
 <style>
   header {
-    border-bottom: solid thin var(--outline);
+    /* border-bottom: solid thin var(--outline); */
     background-color: var(--layer-1);
   }
 
@@ -147,7 +147,7 @@
     width: 100vw;
     color: white;
     display: grid;
-    grid-template-rows: 50px 1fr;
+    grid-template-rows: 0px 1fr;
   }
 
   .wrapper :global(canvas) {