feat: add theming support

2024-04-19 01:27:11 +02:00 · 2024-04-19 01:27:11 +02:00 · d8ada83db3
commit d8ada83db3
parent a15a54c61e
27 changed files with 569 additions and 285 deletions
--- 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"
--- 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">
--- 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);
 }
--- a/app/src/lib/graph-interface/background/Background.svelte
+++ b/app/src/lib/graph-interface/background/Background.svelte
@ -1,9 +1,10 @@
 <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;
@ -22,7 +23,11 @@
  }
 </script>

-<T.Group position.x={cameraPosition[0]} position.z={cameraPosition[1]} position.y={-1.0}>
+<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
@ -31,20 +36,24 @@
      fragmentShader={BackgroundFrag}
      uniforms={{
        camPos: {
-					value: [0, 1, 0]
+          value: [0, 1, 0],
        },
        backgroundColor: {
-					value: [0, 0, 0]
+          value: new Color(0x171717),
+        },
+        lineColor: {
+          value: new Color(0x111111),
        },
        zoomLimits: {
-					value: [2, 50]
+          value: [2, 50],
        },
        dimensions: {
-					value: [100, 100]
-				}
+          value: [100, 100],
+        },
      }}
      uniforms.camPos.value={cameraPosition}
-			uniforms.backgroundColor.value={$colors.backgroundColorDarker}
+      uniforms.backgroundColor.value={$colors.layer0}
+      uniforms.lineColor.value={$colors.layer2}
      uniforms.zoomLimits.value={[minZoom, maxZoom]}
      uniforms.dimensions.value={[width, height]}
    />
--- 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}
--- 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);
--- 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} />
--- 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();
  })
--- 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;
  }

--- a/app/src/lib/graph-interface/node/NodeHeader.svelte
+++ b/app/src/lib/graph-interface/node/NodeHeader.svelte
@ -1,13 +1,15 @@
 <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;

-	const setDownSocket = getContext<(socket: Socket) => void>('setDownSocket');
+  const setDownSocket = getContext<(socket: Socket) => void>("setDownSocket");
  const getSocketPosition =
-		getContext<(node: Node, index: number) => [number, number]>('getSocketPosition');
+    getContext<(node: Node, index: number) => [number, number]>(
+      "getSocketPosition",
+    );

  function handleMouseDown(event: MouseEvent) {
    event.stopPropagation();
@ -15,7 +17,7 @@
    setDownSocket({
      node,
      index: 0,
-			position: getSocketPosition(node, 0)
+      position: getSocketPosition(node, 0),
    });
  }

@ -29,7 +31,7 @@
    y: 50,
    cornerTop,
    rightBump,
-		aspectRatio
+    aspectRatio,
  });
  const pathDisabled = createNodePath({
    depth: 0,
@ -37,7 +39,7 @@
    y: 50,
    cornerTop,
    rightBump,
-		aspectRatio
+    aspectRatio,
  });
  const pathHover = createNodePath({
    depth: 5,
@ -45,15 +47,20 @@
    y: 50,
    cornerTop,
    rightBump,
-		aspectRatio
+    aspectRatio,
  });
 </script>

 <div class="wrapper" data-node-id={node.id}>
  <div class="content">
-		{node.type.split('/').pop()}
+    {node.type.split("/").pop()}
  </div>
-	<div class="click-target" role="button" tabindex="0" on:mousedown={handleMouseDown} />
+  <div
+    class="click-target"
+    role="button"
+    tabindex="0"
+    on:mousedown={handleMouseDown}
+  />
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
@ -65,7 +72,8 @@
      --hover-path: path("${pathHover}");
    `}
  >
-		<path vector-effect="non-scaling-stroke" stroke="white" stroke-width="0.1"></path>
+    <path vector-effect="non-scaling-stroke" stroke="white" stroke-width="0.1"
+    ></path>
  </svg>
 </div>

@ -109,7 +117,7 @@
    transition:
      d 0.3s ease,
      fill 0.3s ease;
-		fill: var(--background-color-lighter);
+    fill: var(--layer-2);
    stroke: var(--stroke);
    stroke-width: var(--stroke-width);
    d: var(--path);
--- 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);
--- 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>
--- 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};`}>
--- a/app/src/lib/settings/Keymap.svelte
+++ b/app/src/lib/settings/Keymap.svelte
--- a/app/src/lib/settings/NestedSettings.svelte
+++ 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>
--- 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>
--- 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}
+        {#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>
--- 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,
  },
+  debug: {
    wireframe: {
      type: "boolean",
+      label: "Wireframe",
      value: false,
    },
    showIndices: {
      type: "boolean",
+      label: "Show Indices",
      value: false,
    },
  }
+}

--- 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 {
--- 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"
--- 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",
--- 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>
-
+  <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>
--- 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";

--- 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 {
--- 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);
  }
--- 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>
-
--- 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;