From d8ada83db3b2be291fd5071a2d6cb0aa1de9a03d Mon Sep 17 00:00:00 2001
From: Max Richter <jim-x@web.de>
Date: Fri, 19 Apr 2024 01:27:11 +0200
Subject: [PATCH] feat: add theming support

---
 Cargo.lock                                    |  60 ++++-
 app/src/app.html                              |  12 +
 .../background/Background.frag                |   3 +-
 .../background/Background.svelte              |  93 ++++----
 app/src/lib/graph-interface/edges/Edge.svelte |  19 +-
 app/src/lib/graph-interface/graph-manager.ts  |   1 -
 .../lib/graph-interface/graph/Graph.svelte    |  14 +-
 app/src/lib/graph-interface/graph/stores.ts   |  33 ++-
 app/src/lib/graph-interface/node/Node.svelte  |  17 +-
 .../graph-interface/node/NodeHeader.svelte    | 222 +++++++++---------
 .../graph-interface/node/NodeParameter.svelte |   2 +-
 app/src/lib/grid/Cell.svelte                  |  15 +-
 app/src/lib/grid/Row.svelte                   |   2 +-
 app/src/lib/settings/Keymap.svelte            |   0
 app/src/lib/settings/NestedSettings.svelte    |  81 +++++++
 app/src/lib/settings/Panel.svelte             |  55 +++--
 app/src/lib/settings/Settings.svelte          |  38 ++-
 app/src/lib/settings/app-settings.ts          |  40 ++--
 app/src/routes/+page.svelte                   |   7 +-
 nodes/max/plantarium/output/Cargo.toml        |   3 +-
 packages/ui/package.json                      |   6 +-
 packages/ui/src/lib/Details.svelte            |  21 +-
 packages/ui/src/lib/Input.svelte              |   8 +-
 packages/ui/src/lib/app.css                   |  86 ++++++-
 packages/ui/src/lib/elements/Float.svelte     |   5 +-
 packages/ui/src/lib/elements/Integer.svelte   |   8 +-
 packages/ui/src/lib/elements/Select.svelte    |   3 +-
 27 files changed, 569 insertions(+), 285 deletions(-)
 create mode 100644 app/src/lib/settings/Keymap.svelte
 create mode 100644 app/src/lib/settings/NestedSettings.svelte

diff --git a/Cargo.lock b/Cargo.lock
index 170f91c..e018115 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -36,6 +36,12 @@ version = "3.16.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "79296716171880943b8470b5f8d03aa55eb2e645a4874bdbb28adb49162e012c"
 
+[[package]]
+name = "cfg-if"
+version = "0.1.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4785bdd1c96b2a846b2bd7cc02e86b6b3dbf14e7e53446c4f54c92a361040822"
+
 [[package]]
 name = "cfg-if"
 version = "1.0.0"
@@ -48,7 +54,7 @@ version = "0.1.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a06aeb73f470f66dcdbf7223caeebb85984942f22f1adb2a088cf9668146bbbc"
 dependencies = [
- "cfg-if",
+ "cfg-if 1.0.0",
  "wasm-bindgen",
 ]
 
@@ -86,6 +92,12 @@ dependencies = [
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "libc"
+version = "0.2.153"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9c198f91728a82281a64e1f4f9eeb25d82cb32a5de251c6bd1b5154d63a8e7bd"
+
 [[package]]
 name = "log"
 version = "0.4.21"
@@ -159,6 +171,12 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "memory_units"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8452105ba047068f40ff7093dd1d9da90898e63dd61736462e9cdda6a90ad3c3"
+
 [[package]]
 name = "once_cell"
 version = "1.19.0"
@@ -173,12 +191,12 @@ dependencies = [
  "glam",
  "macros",
  "serde",
- "serde-wasm-bindgen",
  "serde_json",
  "utils",
  "wasm-bindgen",
  "wasm-bindgen-test",
  "web-sys",
+ "wee_alloc",
 ]
 
 [[package]]
@@ -348,7 +366,7 @@ version = "0.2.92"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "4be2531df63900aeb2bca0daaaddec08491ee64ceecbee5076636a3b026795a8"
 dependencies = [
- "cfg-if",
+ "cfg-if 1.0.0",
  "wasm-bindgen-macro",
 ]
 
@@ -373,7 +391,7 @@ version = "0.4.42"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "76bc14366121efc8dbb487ab05bcc9d346b3b5ec0eaa76e46594cabbe51762c0"
 dependencies = [
- "cfg-if",
+ "cfg-if 1.0.0",
  "js-sys",
  "wasm-bindgen",
  "web-sys",
@@ -442,3 +460,37 @@ dependencies = [
  "js-sys",
  "wasm-bindgen",
 ]
+
+[[package]]
+name = "wee_alloc"
+version = "0.4.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dbb3b5a6b2bb17cb6ad44a2e68a43e8d2722c997da10e928665c72ec6c0a0b8e"
+dependencies = [
+ "cfg-if 0.1.10",
+ "libc",
+ "memory_units",
+ "winapi",
+]
+
+[[package]]
+name = "winapi"
+version = "0.3.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5c839a674fcd7a98952e593242ea400abe93992746761e38641405d28b00f419"
+dependencies = [
+ "winapi-i686-pc-windows-gnu",
+ "winapi-x86_64-pc-windows-gnu",
+]
+
+[[package]]
+name = "winapi-i686-pc-windows-gnu"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ac3b87c63620426dd9b991e5ce0329eff545bccbbb34f3be09ff6fb6ab51b7b6"
+
+[[package]]
+name = "winapi-x86_64-pc-windows-gnu"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"
diff --git a/app/src/app.html b/app/src/app.html
index e106581..b2cc029 100644
--- a/app/src/app.html
+++ b/app/src/app.html
@@ -6,6 +6,18 @@
   <link rel="icon" href="%sveltekit.assets%/svelte.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   %sveltekit.head%
+  <script>
+    var store = localStorage.getItem("node-settings");
+    if (store) {
+      try {
+        var value = JSON.parse(store);
+        var themes = ["dark", "light", "catppuccin"];
+        if (themes[value.theme]) {
+          document.body.classList.add("theme-" + themes[value.theme]);
+        }
+      } catch (e) { }
+    }
+  </script>
 </head>
 
 <body data-sveltekit-preload-data="hover">
diff --git a/app/src/lib/graph-interface/background/Background.frag b/app/src/lib/graph-interface/background/Background.frag
index c00ed9a..d7f621c 100644
--- a/app/src/lib/graph-interface/background/Background.frag
+++ b/app/src/lib/graph-interface/background/Background.frag
@@ -8,6 +8,7 @@ uniform vec2 dimensions;
 uniform vec3 camPos;
 uniform vec2 zoomLimits;
 uniform vec3 backgroundColor;
+uniform vec3 lineColor;
 
 float grid(float x, float y, float divisions, float thickness) {
     x = fract(x * divisions);
@@ -92,7 +93,7 @@ void main(void) {
     float c = mix(large, small, min(nz*2.0+0.05, 1.0));
     c = mix(c, xsmall, max(min((nz-0.3)/0.7, 1.0), 0.0));
 
-    vec3 color = mix(backgroundColor, vec3(1.0), c*0.5); 
+    vec3 color = mix(backgroundColor, lineColor, c); 
 
     gl_FragColor = vec4(color, 1.0);
 }
diff --git a/app/src/lib/graph-interface/background/Background.svelte b/app/src/lib/graph-interface/background/Background.svelte
index ddbe198..d7899d3 100644
--- a/app/src/lib/graph-interface/background/Background.svelte
+++ b/app/src/lib/graph-interface/background/Background.svelte
@@ -1,52 +1,61 @@
 <script lang="ts">
-	import { T } from '@threlte/core';
+  import { T } from "@threlte/core";
 
-	import BackgroundVert from './Background.vert';
-	import BackgroundFrag from './Background.frag';
-	import { colors } from '../graph/stores.js';
+  import BackgroundVert from "./Background.vert";
+  import BackgroundFrag from "./Background.frag";
+  import { colors } from "../graph/stores.js";
+  import { Color } from "three";
 
-	export let minZoom = 4;
-	export let maxZoom = 150;
+  export let minZoom = 4;
+  export let maxZoom = 150;
 
-	export let cameraPosition: [number, number, number] = [0, 1, 0];
+  export let cameraPosition: [number, number, number] = [0, 1, 0];
 
-	export let width = globalThis?.innerWidth || 100;
-	export let height = globalThis?.innerHeight || 100;
+  export let width = globalThis?.innerWidth || 100;
+  export let height = globalThis?.innerHeight || 100;
 
-	let bw = 2;
-	let bh = 2;
+  let bw = 2;
+  let bh = 2;
 
-	$: if (width && height) {
-		bw = width / cameraPosition[2];
-		bh = height / cameraPosition[2];
-	}
+  $: if (width && height) {
+    bw = width / cameraPosition[2];
+    bh = height / cameraPosition[2];
+  }
 </script>
 
-<T.Group position.x={cameraPosition[0]} position.z={cameraPosition[1]} position.y={-1.0}>
-	<T.Mesh rotation.x={-Math.PI / 2} position.y={0.2} scale.x={bw} scale.y={bh}>
-		<T.PlaneGeometry args={[1, 1]} />
-		<T.ShaderMaterial
-			transparent
-			vertexShader={BackgroundVert}
-			fragmentShader={BackgroundFrag}
-			uniforms={{
-				camPos: {
-					value: [0, 1, 0]
-				},
-				backgroundColor: {
-					value: [0, 0, 0]
-				},
-				zoomLimits: {
-					value: [2, 50]
-				},
-				dimensions: {
-					value: [100, 100]
-				}
-			}}
-			uniforms.camPos.value={cameraPosition}
-			uniforms.backgroundColor.value={$colors.backgroundColorDarker}
-			uniforms.zoomLimits.value={[minZoom, maxZoom]}
-			uniforms.dimensions.value={[width, height]}
-		/>
-	</T.Mesh>
+<T.Group
+  position.x={cameraPosition[0]}
+  position.z={cameraPosition[1]}
+  position.y={-1.0}
+>
+  <T.Mesh rotation.x={-Math.PI / 2} position.y={0.2} scale.x={bw} scale.y={bh}>
+    <T.PlaneGeometry args={[1, 1]} />
+    <T.ShaderMaterial
+      transparent
+      vertexShader={BackgroundVert}
+      fragmentShader={BackgroundFrag}
+      uniforms={{
+        camPos: {
+          value: [0, 1, 0],
+        },
+        backgroundColor: {
+          value: new Color(0x171717),
+        },
+        lineColor: {
+          value: new Color(0x111111),
+        },
+        zoomLimits: {
+          value: [2, 50],
+        },
+        dimensions: {
+          value: [100, 100],
+        },
+      }}
+      uniforms.camPos.value={cameraPosition}
+      uniforms.backgroundColor.value={$colors.layer0}
+      uniforms.lineColor.value={$colors.layer2}
+      uniforms.zoomLimits.value={[minZoom, maxZoom]}
+      uniforms.dimensions.value={[width, height]}
+    />
+  </T.Mesh>
 </T.Group>
diff --git a/app/src/lib/graph-interface/edges/Edge.svelte b/app/src/lib/graph-interface/edges/Edge.svelte
index 33f28f0..b804885 100644
--- a/app/src/lib/graph-interface/edges/Edge.svelte
+++ b/app/src/lib/graph-interface/edges/Edge.svelte
@@ -1,12 +1,9 @@
 <script context="module" lang="ts">
-  const color = new Color(0x202020);
-  color.convertLinearToSRGB();
-
-  const color2 = color.clone();
-  color2.convertSRGBToLinear();
+  import { colors } from "../graph/stores";
+  import { get } from "svelte/store";
 
   const circleMaterial = new MeshBasicMaterial({
-    color,
+    color: get(colors).outline,
     toneMapped: false,
   });
 
@@ -24,7 +21,6 @@
   import { T } from "@threlte/core";
   import { MeshLineMaterial } from "@threlte/extras";
   import { BufferGeometry, MeshBasicMaterial, Vector3 } from "three";
-  import { Color } from "three/src/math/Color.js";
   import { CubicBezierCurve } from "three/src/extras/curves/CubicBezierCurve.js";
   import { Vector2 } from "three/src/math/Vector2.js";
   import { createEdgeGeometry } from "./createEdgeGeometry.js";
@@ -59,7 +55,7 @@
     const length = Math.floor(
       Math.sqrt(Math.pow(new_x, 2) + Math.pow(new_y, 2)) / 4,
     );
-    samples = Math.min(Math.max(10, length), 60);
+    samples = Math.min(Math.max(10, length), 60) * 2;
 
     curve.v0.set(0, 0);
     curve.v1.set(mid.x, 0);
@@ -102,11 +98,6 @@
 
 {#if geometry}
   <T.Mesh position.x={from.x} position.z={from.y} position.y={0.1} {geometry}>
-    <MeshLineMaterial
-      width={4}
-      attenuate={false}
-      color={color2}
-      toneMapped={false}
-    />
+    <MeshLineMaterial width={3} attenuate={false} color={$colors.outline} />
   </T.Mesh>
 {/if}
diff --git a/app/src/lib/graph-interface/graph-manager.ts b/app/src/lib/graph-interface/graph-manager.ts
index 348d5a5..4c6636b 100644
--- a/app/src/lib/graph-interface/graph-manager.ts
+++ b/app/src/lib/graph-interface/graph-manager.ts
@@ -435,7 +435,6 @@ export class GraphManager extends EventEmitter<{ "save": Graph, "result": any, "
   save() {
     if (this.currentUndoGroup) return;
     const state = this.serialize();
-    console.log(state);
     this.history.save(state);
     this.emit("save", state);
     logger.log("saving graphs", state);
diff --git a/app/src/lib/graph-interface/graph/Graph.svelte b/app/src/lib/graph-interface/graph/Graph.svelte
index b885e9d..31127a0 100644
--- a/app/src/lib/graph-interface/graph/Graph.svelte
+++ b/app/src/lib/graph-interface/graph/Graph.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
   import { animate, lerp, snapToGrid } from "../helpers/index.js";
-  import { LinearSRGBColorSpace } from "three";
+  import {
+    LinearSRGBColorSpace,
+    LinearToneMapping,
+    NoToneMapping,
+    SRGBColorSpace,
+  } from "three";
   import { Canvas } from "@threlte/core";
   import type { OrthographicCamera } from "three";
   import Background from "../background/Background.svelte";
@@ -750,12 +755,7 @@
   on:keydown={handleKeyDown}
   on:mousedown={handleMouseDown}
 >
-  <Canvas
-    shadows={false}
-    renderMode="on-demand"
-    colorManagementEnabled={false}
-    colorSpace={LinearSRGBColorSpace}
-  >
+  <Canvas shadows={false} renderMode="on-demand" colorManagementEnabled={false}>
     <Camera bind:camera position={cameraPosition} />
 
     <Background {cameraPosition} {maxZoom} {minZoom} {width} {height} />
diff --git a/app/src/lib/graph-interface/graph/stores.ts b/app/src/lib/graph-interface/graph/stores.ts
index fe9d61d..27ec527 100644
--- a/app/src/lib/graph-interface/graph/stores.ts
+++ b/app/src/lib/graph-interface/graph/stores.ts
@@ -11,9 +11,11 @@ export const possibleSockets: Writable<Socket[]> = writable([]);
 export const possibleSocketIds: Writable<Set<string> | null> = writable(null);
 
 export const colors = writable({
-  backgroundColorDarker: new Color().setStyle("#101010"),
-  backgroundColor: new Color().setStyle("#151515"),
-  backgroundColorLighter: new Color().setStyle("#202020")
+  layer0: new Color().setStyle("#060606"),
+  layer1: new Color().setStyle("#171717"),
+  layer2: new Color().setStyle("#2D2D2D"),
+  layer3: new Color().setStyle("#A6A6A6"),
+  outline: new Color().setStyle("#000000"),
 });
 
 if ("getComputedStyle" in globalThis) {
@@ -23,19 +25,32 @@ if ("getComputedStyle" in globalThis) {
   function updateColors() {
 
     const style = getComputedStyle(body);
-    const backgroundColorDarker = style.getPropertyValue("--background-color-darker");
-    const backgroundColor = style.getPropertyValue("--background-color");
-    const backgroundColorLighter = style.getPropertyValue("--background-color-lighter");
+    const layer0 = style.getPropertyValue("--layer-0");
+    const layer1 = style.getPropertyValue("--layer-1");
+    const layer2 = style.getPropertyValue("--layer-2");
+    const layer3 = style.getPropertyValue("--layer-3");
+    const outline = style.getPropertyValue("--outline");
 
     colors.update(col => {
-      col.backgroundColorDarker.setStyle(backgroundColorDarker);
-      col.backgroundColor.setStyle(backgroundColor);
-      col.backgroundColorLighter.setStyle(backgroundColorLighter);
+      col.layer0.setStyle(layer0);
+      col.layer0.convertLinearToSRGB();
+      col.layer1.setStyle(layer1);
+      col.layer1.convertLinearToSRGB();
+      col.layer2.setStyle(layer2);
+      col.layer2.convertLinearToSRGB();
+      col.layer3.setStyle(layer3);
+      col.layer3.convertLinearToSRGB();
+      col.outline.setStyle(outline);
+      col.outline.convertLinearToSRGB();
       return col;
     });
 
   }
 
+  updateColors();
+
+  window.onload = updateColors;
+
   body.addEventListener("transitionstart", () => {
     updateColors();
   })
diff --git a/app/src/lib/graph-interface/node/Node.svelte b/app/src/lib/graph-interface/node/Node.svelte
index 999abd8..007b68b 100644
--- a/app/src/lib/graph-interface/node/Node.svelte
+++ b/app/src/lib/graph-interface/node/Node.svelte
@@ -4,6 +4,7 @@
   import NodeHeader from "./NodeHeader.svelte";
   import NodeParameter from "./NodeParameter.svelte";
   import { activeNodeId, selectedNodes } from "../graph/stores.js";
+  import { colors } from "../graph/stores";
   import { T } from "@threlte/core";
   import { Color, type Mesh } from "three";
   import NodeFrag from "./Node.frag";
@@ -25,7 +26,6 @@
 
   const zOffset = (node.tmp?.random || 0) * 0.5;
   const zLimit = 2 - zOffset;
-  $: visible = inView && z > zLimit;
 
   const parameters = Object.entries(type?.inputs || {})
     .filter((p) => p[1].type !== "seed")
@@ -49,13 +49,6 @@
     node.tmp.mesh = meshRef;
     updateNodePosition(node);
   });
-
-  const colorDark = new Color();
-  colorDark.setStyle("#151515");
-  //colorDark.();
-
-  const colorBright = new Color("#202020");
-  //colorBright.convertLinearToSRGB();
 </script>
 
 <T.Mesh
@@ -72,8 +65,8 @@
     fragmentShader={NodeFrag}
     transparent
     uniforms={{
-      uColorBright: { value: colorBright },
-      uColorDark: { value: colorDark },
+      uColorBright: { value: new Color("#171717") },
+      uColorDark: { value: new Color("#151515") },
       uSelectedColor: { value: new Color("#9d5f28") },
       uActiveColor: { value: new Color("white") },
       uSelected: { value: false },
@@ -84,6 +77,8 @@
     }}
     uniforms.uSelected.value={isSelected}
     uniforms.uActive.value={isActive}
+    uniforms.uColorBright.value={$colors.layer2}
+    uniforms.uColorDark.value={$colors.layer1}
     uniforms.uStrokeWidth.value={(7 - z) / 3}
   />
 </T.Mesh>
@@ -122,7 +117,7 @@
     z-index: 1;
     opacity: calc((var(--cz) - 2.5) / 3.5);
     font-weight: 300;
-    --stroke: var(--background-color-lighter);
+    --stroke: var(--outline);
     --stroke-width: 2px;
   }
 
diff --git a/app/src/lib/graph-interface/node/NodeHeader.svelte b/app/src/lib/graph-interface/node/NodeHeader.svelte
index 61eb031..4d33471 100644
--- a/app/src/lib/graph-interface/node/NodeHeader.svelte
+++ b/app/src/lib/graph-interface/node/NodeHeader.svelte
@@ -1,129 +1,137 @@
 <script lang="ts">
-	import { createNodePath } from '../helpers/index.js';
-	import type { Node, Socket } from '@nodes/types';
-	import { getContext } from 'svelte';
+  import { createNodePath } from "../helpers/index.js";
+  import type { Node, Socket } from "@nodes/types";
+  import { getContext } from "svelte";
 
-	export let node: Node;
+  export let node: Node;
 
-	const setDownSocket = getContext<(socket: Socket) => void>('setDownSocket');
-	const getSocketPosition =
-		getContext<(node: Node, index: number) => [number, number]>('getSocketPosition');
+  const setDownSocket = getContext<(socket: Socket) => void>("setDownSocket");
+  const getSocketPosition =
+    getContext<(node: Node, index: number) => [number, number]>(
+      "getSocketPosition",
+    );
 
-	function handleMouseDown(event: MouseEvent) {
-		event.stopPropagation();
-		event.preventDefault();
-		setDownSocket({
-			node,
-			index: 0,
-			position: getSocketPosition(node, 0)
-		});
-	}
+  function handleMouseDown(event: MouseEvent) {
+    event.stopPropagation();
+    event.preventDefault();
+    setDownSocket({
+      node,
+      index: 0,
+      position: getSocketPosition(node, 0),
+    });
+  }
 
-	const cornerTop = 10;
-	const rightBump = !!node?.tmp?.type?.outputs?.length;
-	const aspectRatio = 0.25;
+  const cornerTop = 10;
+  const rightBump = !!node?.tmp?.type?.outputs?.length;
+  const aspectRatio = 0.25;
 
-	const path = createNodePath({
-		depth: 4,
-		height: 24,
-		y: 50,
-		cornerTop,
-		rightBump,
-		aspectRatio
-	});
-	const pathDisabled = createNodePath({
-		depth: 0,
-		height: 15,
-		y: 50,
-		cornerTop,
-		rightBump,
-		aspectRatio
-	});
-	const pathHover = createNodePath({
-		depth: 5,
-		height: 30,
-		y: 50,
-		cornerTop,
-		rightBump,
-		aspectRatio
-	});
+  const path = createNodePath({
+    depth: 4,
+    height: 24,
+    y: 50,
+    cornerTop,
+    rightBump,
+    aspectRatio,
+  });
+  const pathDisabled = createNodePath({
+    depth: 0,
+    height: 15,
+    y: 50,
+    cornerTop,
+    rightBump,
+    aspectRatio,
+  });
+  const pathHover = createNodePath({
+    depth: 5,
+    height: 30,
+    y: 50,
+    cornerTop,
+    rightBump,
+    aspectRatio,
+  });
 </script>
 
 <div class="wrapper" data-node-id={node.id}>
-	<div class="content">
-		{node.type.split('/').pop()}
-	</div>
-	<div class="click-target" role="button" tabindex="0" on:mousedown={handleMouseDown} />
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 100 100"
-		width="100"
-		height="100"
-		preserveAspectRatio="none"
-		style={`
+  <div class="content">
+    {node.type.split("/").pop()}
+  </div>
+  <div
+    class="click-target"
+    role="button"
+    tabindex="0"
+    on:mousedown={handleMouseDown}
+  />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+    width="100"
+    height="100"
+    preserveAspectRatio="none"
+    style={`
       --path: path("${path}");
       --hover-path: path("${pathHover}");
     `}
-	>
-		<path vector-effect="non-scaling-stroke" stroke="white" stroke-width="0.1"></path>
-	</svg>
+  >
+    <path vector-effect="non-scaling-stroke" stroke="white" stroke-width="0.1"
+    ></path>
+  </svg>
 </div>
 
 <style>
-	.wrapper {
-		position: relative;
-		width: 100%;
-		height: 50px;
-	}
+  .wrapper {
+    position: relative;
+    width: 100%;
+    height: 50px;
+  }
 
-	.click-target {
-		position: absolute;
-		right: 0px;
-		top: 50%;
-		transform: translateX(50%) translateY(-50%);
-		height: 30px;
-		width: 30px;
-		z-index: 100;
-		border-radius: 50%;
-		/* background: red; */
-		/* opacity: 0.2; */
-	}
+  .click-target {
+    position: absolute;
+    right: 0px;
+    top: 50%;
+    transform: translateX(50%) translateY(-50%);
+    height: 30px;
+    width: 30px;
+    z-index: 100;
+    border-radius: 50%;
+    /* background: red; */
+    /* opacity: 0.2; */
+  }
 
-	.click-target:hover + svg path {
-		d: var(--hover-path);
-	}
+  .click-target:hover + svg path {
+    d: var(--hover-path);
+  }
 
-	svg {
-		position: absolute;
-		top: 0;
-		left: 0;
-		z-index: -1;
-		box-sizing: border-box;
-		width: 100%;
-		height: 100%;
-		overflow: visible;
-	}
+  svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
 
-	svg path {
-		stroke-width: 0.2px;
-		transition:
-			d 0.3s ease,
-			fill 0.3s ease;
-		fill: var(--background-color-lighter);
-		stroke: var(--stroke);
-		stroke-width: var(--stroke-width);
-		d: var(--path);
-	}
+  svg path {
+    stroke-width: 0.2px;
+    transition:
+      d 0.3s ease,
+      fill 0.3s ease;
+    fill: var(--layer-2);
+    stroke: var(--stroke);
+    stroke-width: var(--stroke-width);
+    d: var(--path);
+  }
 
-	.content {
-		font-size: 1em;
-		display: flex;
-		align-items: center;
-		padding-left: 20px;
-		height: 100%;
-	}
+  .content {
+    font-size: 1em;
+    display: flex;
+    align-items: center;
+    padding-left: 20px;
+    height: 100%;
+  }
 
-	svg:hover path {
-		d: var(--hover-path) !important;
-	}
+  svg:hover path {
+    d: var(--hover-path) !important;
+  }
 </style>
diff --git a/app/src/lib/graph-interface/node/NodeParameter.svelte b/app/src/lib/graph-interface/node/NodeParameter.svelte
index c92466a..95aea40 100644
--- a/app/src/lib/graph-interface/node/NodeParameter.svelte
+++ b/app/src/lib/graph-interface/node/NodeParameter.svelte
@@ -175,7 +175,7 @@
     transition:
       d 0.3s ease,
       fill 0.3s ease;
-    fill: var(--background-color);
+    fill: var(--layer-1);
     stroke: var(--stroke);
     stroke-width: var(--stroke-width);
     d: var(--path);
diff --git a/app/src/lib/grid/Cell.svelte b/app/src/lib/grid/Cell.svelte
index 2aa66ac..7d91919 100644
--- a/app/src/lib/grid/Cell.svelte
+++ b/app/src/lib/grid/Cell.svelte
@@ -57,9 +57,20 @@
     overflow: hidden;
   }
   .seperator {
-    background: white;
+    position: relative;
     cursor: ew-resize;
     height: 100%;
-    width: 5px;
+    width: 1px;
+    background: var(--outline);
+  }
+  .seperator::before {
+    content: "";
+    cursor: ew-resize;
+    position: absolute;
+    pointer-events: all;
+    height: 100%;
+    width: 14px;
+    z-index: 2;
+    left: -7px;
   }
 </style>
diff --git a/app/src/lib/grid/Row.svelte b/app/src/lib/grid/Row.svelte
index 07bc270..b4fbbbb 100644
--- a/app/src/lib/grid/Row.svelte
+++ b/app/src/lib/grid/Row.svelte
@@ -17,7 +17,7 @@
 
   setContext("sizes", sizes);
 
-  $: cols = $sizes.map((size, i) => `${i > 0 ? "5px " : ""}` + size).join(" ");
+  $: cols = $sizes.map((size, i) => `${i > 0 ? "1px " : ""}` + size).join(" ");
 </script>
 
 <div class="wrapper" style={`grid-template-columns: ${cols};`}>
diff --git a/app/src/lib/settings/Keymap.svelte b/app/src/lib/settings/Keymap.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/app/src/lib/settings/NestedSettings.svelte b/app/src/lib/settings/NestedSettings.svelte
new file mode 100644
index 0000000..d0b57f3
--- /dev/null
+++ b/app/src/lib/settings/NestedSettings.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+  import type { NodeInput } from "@nodes/types";
+  import Input, { Details } from "@nodes/ui";
+  import type { Writable } from "svelte/store";
+
+  interface Nested {
+    [key: string]: Nested | NodeInput;
+  }
+
+  export let settings: Nested;
+  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;
+  }
+</script>
+
+{#each keys as key}
+  {@const value = settings[key]}
+  <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]}
+        />
+      </div>
+    {:else}
+      <details>
+        <summary>{key}</summary>
+        <div class="content">
+          <svelte:self settings={settings[key]} {store} depth={depth + 1} />
+        </div>
+      </details>
+    {/if}
+  </div>
+{/each}
+
+<style>
+  summary {
+    cursor: pointer;
+    user-select: none;
+  }
+  details {
+    padding: 1rem;
+    border-bottom: solid thin var(--outline);
+  }
+
+  .input {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding-left: 14px;
+  }
+
+  .input-boolean {
+    display: flex;
+    flex-direction: row;
+  }
+  .input-boolean > label {
+    order: 2;
+  }
+
+  .first-level > .input {
+    padding-right: 1rem;
+  }
+
+  .first-level {
+    border-bottom: solid thin var(--outline);
+  }
+  .first-level > details {
+    border: none;
+  }
+</style>
diff --git a/app/src/lib/settings/Panel.svelte b/app/src/lib/settings/Panel.svelte
index 3935552..f295ec5 100644
--- a/app/src/lib/settings/Panel.svelte
+++ b/app/src/lib/settings/Panel.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { NodeInput } from "@nodes/types";
   import type { Writable } from "svelte/store";
-  import { Input } from "@nodes/ui";
+  import NestedSettings from "./NestedSettings.svelte";
 
   export let setting: {
     icon: string;
@@ -12,27 +12,38 @@
 
   const store = setting.settings;
 
-  const keys = setting?.definition
-    ? (Object.keys(
-        setting.definition,
-      ) as unknown as (keyof typeof setting.definition)[])
-    : [];
+  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 gap-4">
-  <h1 class="m-0">{setting.id}</h1>
-  {#each keys as key}
-    <div>
-      {#if setting.definition && key in setting.definition}
-        <Input
-          id="test"
-          input={setting.definition[key]}
-          bind:value={$store[key]}
-        ></Input>
-      {/if}
-      <label for="test">
-        {key}
-      </label>
-    </div>
-  {/each}
+<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>
diff --git a/app/src/lib/settings/Settings.svelte b/app/src/lib/settings/Settings.svelte
index 53e3732..a09d98f 100644
--- a/app/src/lib/settings/Settings.svelte
+++ b/app/src/lib/settings/Settings.svelte
@@ -3,12 +3,14 @@
   import type { Writable } from "svelte/store";
   import SettingsComponent from "./Panel.svelte";
   import localStore from "$lib/helpers/localStore";
+  import type { SvelteComponent } from "svelte";
 
   export let settings: Record<
     string,
     {
       icon: string;
       id: string;
+      component?: typeof SvelteComponent<{}, {}, {}>;
       definition: Record<string, NodeInput>;
       settings: Writable<Record<string, unknown>>;
     }
@@ -50,10 +52,17 @@
       </button>
     {/each}
   </div>
-  <div class="content p-2">
+  <div class="content">
     {#if $activePanel && settings[$activePanel]}
       {#key $activePanel}
-        <SettingsComponent setting={settings[$activePanel]} />
+        {#if settings[$activePanel].component}
+          <svelte:component
+            this={settings[$activePanel].component}
+            {...settings[$activePanel]}
+          />
+        {:else}
+          <SettingsComponent setting={settings[$activePanel]} />
+        {/if}
       {/key}
     {/if}
   </div>
@@ -66,7 +75,6 @@
     display: grid;
     grid-template-columns: 30px 1fr;
     height: 100%;
-    background: transparent;
     right: 0px;
     transform: translateX(calc(100% - 30px));
     transition:
@@ -76,27 +84,31 @@
     min-width: 300px;
   }
 
+  .content {
+    background: var(--layer-1);
+  }
+
   .tabs {
     display: flex;
     flex-direction: column;
-    border-right: solid thin white;
+    border-right: solid thin var(--outline);
   }
 
   .tabs > button {
     height: 30px;
+    padding: 5px;
     background: none;
-    background: blue;
-    color: white;
+    color: var(--outline);
     border: none;
     display: flex;
     align-items: center;
-    border-bottom: solid thin white;
-    border-left: solid thin white;
+    border-bottom: solid thin var(--outline);
+    border-left: solid thin var(--outline);
   }
 
   .tabs > button.active {
-    color: black;
-    background: white;
+    color: var(--layer-3);
+    background: var(--layer-1);
   }
 
   .visible .tabs > button {
@@ -105,7 +117,7 @@
 
   .visible .tabs {
     margin-left: -1px;
-    border-left: solid thin white;
+    border-left: solid thin var(--outline);
   }
 
   .visible > .tabs button:first-child {
@@ -114,7 +126,7 @@
 
   .visible {
     transform: translateX(0);
-    border-left: solid thin white;
-    background: black;
+    border-left: solid thin var(--outline);
+    background: var(--layer-0);
   }
 </style>
diff --git a/app/src/lib/settings/app-settings.ts b/app/src/lib/settings/app-settings.ts
index 8266cc5..081b7c8 100644
--- a/app/src/lib/settings/app-settings.ts
+++ b/app/src/lib/settings/app-settings.ts
@@ -1,4 +1,5 @@
 import localStore from "$lib/helpers/localStore";
+import { label } from "three/examples/jsm/nodes/Nodes.js";
 
 export const AppSettings = localStore("node-settings", {
   theme: 0,
@@ -7,31 +8,42 @@ export const AppSettings = localStore("node-settings", {
   showIndices: false,
 });
 
+const themes = ["dark", "light", "catppuccin", "solarized", "high-contrast", "nord", "dracula"];
+
 AppSettings.subscribe((value) => {
-  if (value.theme === 0) {
-    document.body.classList.remove("theme-catppuccin");
-  } else {
-    document.body.classList.add("theme-catppuccin");
+  const classes = document.body.classList;
+  const newClassName = `theme-${themes[value.theme]}`;
+  for (const className of classes) {
+    if (className.startsWith("theme-") && className !== newClassName) {
+      classes.remove(className);
+    }
   }
+  document.body.classList.add(newClassName);
 });
 
 export const AppSettingTypes = {
   theme: {
     type: "select",
-    options: ["dark", "cat"],
-    value: "dark",
+    options: themes,
+    label: "Theme",
+    value: themes[0],
   },
   showGrid: {
     type: "boolean",
+    label: "Show Grid",
     value: true,
   },
-  wireframe: {
-    type: "boolean",
-    value: false,
-  },
-  showIndices: {
-    type: "boolean",
-    value: false,
-  },
+  debug: {
+    wireframe: {
+      type: "boolean",
+      label: "Wireframe",
+      value: false,
+    },
+    showIndices: {
+      type: "boolean",
+      label: "Show Indices",
+      value: false,
+    },
+  }
 }
 
diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index b880e08..ed13347 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -14,17 +14,13 @@
   const runtimeExecutor = new MemoryRuntimeExecutor(nodeRegistry);
 
   let res: Int32Array;
-  let time = 0;
 
   let graph = localStorage.getItem("graph")
     ? JSON.parse(localStorage.getItem("graph")!)
     : templates.grid(3, 3);
 
   function handleResult(event: CustomEvent<Graph>) {
-    let a = performance.now();
     res = runtimeExecutor.execute(event.detail, get(settings?.graph?.settings));
-    time = performance.now() - a;
-    console.log({ res, time });
   }
 
   function handleSave(event: CustomEvent<Graph>) {
@@ -89,7 +85,8 @@
 
 <style>
   header {
-    border-bottom: solid thin white;
+    border-bottom: solid thin var(--outline);
+    background-color: var(--layer-1);
   }
 
   .wrapper {
diff --git a/nodes/max/plantarium/output/Cargo.toml b/nodes/max/plantarium/output/Cargo.toml
index 9c553e7..0436921 100644
--- a/nodes/max/plantarium/output/Cargo.toml
+++ b/nodes/max/plantarium/output/Cargo.toml
@@ -8,7 +8,7 @@ edition = "2018"
 crate-type = ["cdylib", "rlib"]
 
 [features]
-default = ["console_error_panic_hook"]
+default = ["console_error_panic_hook", "wee_alloc"]
 console_error_panic_hook = ["dep:console_error_panic_hook"]
 
 [dependencies]
@@ -22,7 +22,6 @@ utils = { version = "0.1.0", path = "../../../../packages/utils" }
 serde = { version = "1.0", features = ["derive"] }
 serde_json = { version = "1.0", default-features = false, features = ["alloc"] }
 macros = { version = "0.1.0", path = "../../../../packages/macros" }
-serde-wasm-bindgen = "0.4"
 console_error_panic_hook = { version = "0.1.7", optional = true }
 web-sys = { version = "0.3.69", features = ["console"] }
 glam = "0.27.0"
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 745f7c0..79abc2e 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -14,10 +14,10 @@
   },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
+      "types": "./src/lib/index.ts",
+      "svelte": "./src/lib/index.ts"
     },
-    "./app.css": "./dist/app.css"
+    "./app.css": "./src/lib/app.css"
   },
   "files": [
     "dist",
diff --git a/packages/ui/src/lib/Details.svelte b/packages/ui/src/lib/Details.svelte
index 3b2f5a2..6fd8602 100644
--- a/packages/ui/src/lib/Details.svelte
+++ b/packages/ui/src/lib/Details.svelte
@@ -1,21 +1,34 @@
 <script lang="ts">
   export let title = "Details";
+  export let transparent = false;
 </script>
 
-<details>
+<details class:transparent>
   <summary>{title}</summary>
-
-  <slot />
+  <div class="content">
+    <slot />
+  </div>
 </details>
 
 <style>
   details {
     padding: 1em;
-    color: white;
+    color: var(--text-color);
+    padding-left: 20px;
     background-color: #202020;
     outline: solid 0.1px white;
     border-radius: 2px;
     font-weight: 300;
     font-size: 0.9em;
   }
+
+  details.transparent {
+    background-color: transparent;
+    padding: 0;
+    outline: none;
+  }
+
+  .content {
+    padding-left: 12px;
+  }
 </style>
diff --git a/packages/ui/src/lib/Input.svelte b/packages/ui/src/lib/Input.svelte
index 572933d..4986c15 100644
--- a/packages/ui/src/lib/Input.svelte
+++ b/packages/ui/src/lib/Input.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import Checkbox from "$lib/elements/Checkbox.svelte";
-  import Float from "$lib/elements/Float.svelte";
-  import Integer from "$lib/elements/Integer.svelte";
-  import Select from "$lib/elements/Select.svelte";
+  import Checkbox from "./elements/Checkbox.svelte";
+  import Float from "./elements/Float.svelte";
+  import Integer from "./elements/Integer.svelte";
+  import Select from "./elements/Select.svelte";
 
   import type { NodeInput } from "@nodes/types";
 
diff --git a/packages/ui/src/lib/app.css b/packages/ui/src/lib/app.css
index a2798a2..3e961f2 100644
--- a/packages/ui/src/lib/app.css
+++ b/packages/ui/src/lib/app.css
@@ -41,24 +41,92 @@
 body {
   overflow: hidden;
 
+  --neutral-100: #E7E7E7;
+  --neutral-200: #A6A6A6;
+  --neutral-300: #7C7C7C;
+  --neutral-400: #2D2D2D;
+  --neutral-500: #171717;
+  --neutral-800: #111111;
+  --neutral-900: #060606;
+
   /* Secondary color */
   --secondary-color: #6c757d;
-  /* Background color */
-  --background-color-lighter: #202020;
-  --background-color: #151515;
-  --background-color-darker: #101010;
-  --text-color: #aeaeae;
+
+  --layer-0: var(--neutral-900);
+  --layer-1: var(--neutral-500);
+  --layer-2: var(--neutral-400);
+  --layer-3: var(--neutral-200);
+
+  --outline: var(--neutral-400);
+
+  --text-color: var(--neutral-200);
 
   color: var(--text-color);
+  background-color: var(--layer-0);
+}
 
-  background-color: var(--background-color-darker);
+body * {
+  color: var(--text-color);
+}
+
+body.theme-light {
+  --text-color: var(--neutral-800);
+  --outline: var(--neutral-300);
+  --layer-0: var(--neutral-100);
+  --layer-1: var(--neutral-100);
+  --layer-2: var(--neutral-100);
+  --layer-3: var(--neutral-500);
+}
+
+body.theme-solarized {
+  --text-color: #425055;
+  --outline: #93a1a1;
+  --layer-0: #fdf6e3;
+  --layer-1: #eee8d5;
+  --layer-2: #93a1a1;
+  --layer-3: #586e75;
 }
 
 body.theme-catppuccin {
   --text-color: #CDD6F4;
-  --background-color-lighter: #313244;
-  --background-color: #1E1E2E;
-  --background-color-darker: #11111b;
+  --outline: #3e3e4f;
+  --layer-3: #a8aac8;
+  --layer-2: #313244;
+  --layer-1: #1E1E2E;
+  --layer-0: #11111b;
+}
+
+body.theme-high-contrast {
+  --text-color: #FFFFFF;
+  --outline: white;
+  --layer-0: #000000;
+  --layer-1: black;
+  --layer-2: #222222;
+  --layer-3: #FFFFFF;
+}
+
+body.theme-nord {
+  --text-color: #D8DEE9;
+  /* Nord snow */
+  --outline: #4C566A;
+  /* Nord frost */
+  --layer-0: #2E3440;
+  /* Nord polar night */
+  --layer-1: #3B4252;
+  /* Nord polar night */
+  --layer-2: #434C5E;
+  /* Nord polar night */
+  --layer-3: #5E81AC;
+  /* Nord frost */
+}
+
+body.theme-dracula {
+  --text-color: #F8F8F2;
+  --outline: #6272A4;
+  --layer-0: #282A36;
+  --layer-1: #44475A;
+  --layer-2: #32374D;
+  --layer-3: #BD93F9;
 }
 
 body {
diff --git a/packages/ui/src/lib/elements/Float.svelte b/packages/ui/src/lib/elements/Float.svelte
index cd41459..78f3e24 100644
--- a/packages/ui/src/lib/elements/Float.svelte
+++ b/packages/ui/src/lib/elements/Float.svelte
@@ -120,12 +120,11 @@
 <style>
   .component-wrapper {
     position: relative;
-    background-color: var(--background-color-lighter, #4b4b4b);
+    background-color: var(--layer-2, #4b4b4b);
     border-radius: 2px;
     user-select: none;
     transition: box-shadow 0.3s ease;
-    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
-    outline: none !important;
+    outline: solid 1px var(--outline);
     overflow: hidden;
     border-radius: var(--border-radius, 2px);
   }
diff --git a/packages/ui/src/lib/elements/Integer.svelte b/packages/ui/src/lib/elements/Integer.svelte
index 4845630..d91087a 100644
--- a/packages/ui/src/lib/elements/Integer.svelte
+++ b/packages/ui/src/lib/elements/Integer.svelte
@@ -109,12 +109,11 @@
   .component-wrapper {
     position: relative;
     display: flex;
-    background-color: var(--background-color-lighter, #4b4b4b);
+    background-color: var(--layer-2, #4b4b4b);
     border-radius: 2px;
     user-select: none;
     transition: box-shadow 0.3s ease;
-    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
-    outline: none !important;
+    outline: solid 1px var(--outline);
     overflow: hidden;
     border-radius: var(--border-radius, 2px);
   }
@@ -141,7 +140,7 @@
     top: 0px;
     left: 0px;
     height: 100%;
-    background-color: var(--text-color);
+    background-color: var(--layer-3);
     opacity: 0.3;
     pointer-events: none;
   }
@@ -166,4 +165,3 @@
     border-style: none;
   }
 </style>
-
diff --git a/packages/ui/src/lib/elements/Select.svelte b/packages/ui/src/lib/elements/Select.svelte
index 5ac482c..f992599 100644
--- a/packages/ui/src/lib/elements/Select.svelte
+++ b/packages/ui/src/lib/elements/Select.svelte
@@ -12,9 +12,10 @@
 
 <style>
   select {
-    background: var(--background-color-lighter);
+    background: var(--layer-2);
     color: var(--text-color);
     font-family: var(--font-family);
+    outline: solid 1px var(--outline);
     padding: 0.8em 1em;
     border-radius: 5px;
     border: none;