register works

setup zig node
Add zig to flake packages
2026-01-23 11:23:07 +01:00 · 2026-01-23 10:24:21 +01:00 · 2026-01-23 09:07:05 +01:00 · 2026-01-22 23:57:56 +01:00 · 2026-01-22 23:26:56 +01:00 · 2026-01-22 23:26:26 +01:00
157 changed files with 2410 additions and 4838 deletions
--- a/.dprint.jsonc
+++ b/.dprint.jsonc
@@ -1,12 +1,14 @@
 {
  "$schema": "https://dprint.dev/schemas/v0.json",
  "indentWidth": 2,
+  "lineWidth": 100,
  "typescript": {
    // https://dprint.dev/plugins/typescript/config/
    "quoteStyle": "preferSingle",
-    "trailingCommas": "never"
+    "trailingCommas": "never",
  },
  "json": {
+    // https://dprint.dev/plugins/json/config/
  },
  "markdown": {
  },
@@ -21,6 +23,9 @@
  "malva": {
  },
  "markup": {
+    // https://dprint.dev/plugins/markup_fmt/config/
+    "scriptIndent": true,
+    "styleIndent": true,
  },
  "yaml": {
  },
@@ -28,19 +33,24 @@
  },
  "exec": {
    "cwd": "${configDir}",
+
    "commands": [{
-      "command": "rustfmt --edition 2024",
+      "command": "rustfmt",
      "exts": ["rs"],
-      // add the config files for automatic cache invalidation when the rust version or rustfmt config changes
      "cacheKeyFiles": [
        "rustfmt.toml",
-        "rust-toolchain.toml"
-      ]
-    }]
+        "rust-toolchain.toml",
+      ],
+    }],
  },
  "excludes": [
    "**/node_modules",
-    "**/*-lock.json"
+    "**/build",
+    "**/.svelte-kit",
+    "**/package",
+    "**/*-lock.yaml",
+    "**/yaml.lock",
+    "**/.DS_Store",
  ],
  "plugins": [
    "https://plugins.dprint.dev/typescript-0.95.13.wasm",
@@ -54,6 +64,7 @@
    "https://plugins.dprint.dev/g-plane/markup_fmt-v0.25.3.wasm",
    "https://plugins.dprint.dev/g-plane/pretty_yaml-v0.5.1.wasm",
    "https://plugins.dprint.dev/g-plane/pretty_graphql-v0.2.3.wasm",
-    "https://plugins.dprint.dev/exec-0.6.0.json@a054130d458f124f9b5c91484833828950723a5af3f8ff2bd1523bd47b83b364"
-  ]
+    "https://plugins.dprint.dev/exec-0.6.0.json@a054130d458f124f9b5c91484833828950723a5af3f8ff2bd1523bd47b83b364",
+    "https://plugins.dprint.dev/biome-0.11.10.wasm",
+  ],
 }
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1,176 +1,80 @@
 # This file is automatically @generated by Cargo.
 # It is not intended for manual editing.
-version = 3
+version = 4

 [[package]]
 name = "autocfg"
-version = "1.2.0"
+version = "1.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f1fdabc7756949593fe60f30ec81974b613357de856987752631dea1e3394c80"
+checksum = "c08606f8c3cbf4ce6ec8e28fb0014a2c086708fe954eaa885384a6165172e7e8"

 [[package]]
 name = "box"
 version = "0.1.0"
 dependencies = [
- "console_error_panic_hook",
 "nodarium_macros",
 "nodarium_utils",
- "serde",
- "serde-wasm-bindgen",
- "wasm-bindgen",
- "wasm-bindgen-test",
- "web-sys",
 ]

 [[package]]
 name = "branch"
 version = "0.1.0"
 dependencies = [
- "console_error_panic_hook",
- "glam",
 "nodarium_macros",
 "nodarium_utils",
- "serde",
- "serde-wasm-bindgen",
- "wasm-bindgen",
- "wasm-bindgen-test",
- "web-sys",
-]
-
-[[package]]
-name = "bumpalo"
-version = "3.16.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "79296716171880943b8470b5f8d03aa55eb2e645a4874bdbb28adb49162e012c"
-
-[[package]]
-name = "cfg-if"
-version = "1.0.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
-
-[[package]]
-name = "console_error_panic_hook"
-version = "0.1.7"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a06aeb73f470f66dcdbf7223caeebb85984942f22f1adb2a088cf9668146bbbc"
-dependencies = [
- "cfg-if",
- "wasm-bindgen",
 ]

 [[package]]
 name = "float"
 version = "0.1.0"
 dependencies = [
- "console_error_panic_hook",
 "nodarium_macros",
 "nodarium_utils",
- "serde",
- "serde-wasm-bindgen",
- "wasm-bindgen",
- "wasm-bindgen-test",
 ]

 [[package]]
 name = "glam"
-version = "0.27.0"
+version = "0.30.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9e05e7e6723e3455f4818c7b26e855439f7546cf617ef669d1adedb8669e5cb9"
+checksum = "19fc433e8437a212d1b6f1e68c7824af3aed907da60afa994e7f542d18d12aa9"

 [[package]]
 name = "gravity"
 version = "0.1.0"
 dependencies = [
- "console_error_panic_hook",
 "glam",
 "nodarium_macros",
 "nodarium_utils",
- "noise",
- "serde",
- "serde-wasm-bindgen",
- "wasm-bindgen",
- "wasm-bindgen-test",
- "web-sys",
+]
+
+[[package]]
+name = "instance"
+version = "0.1.0"
+dependencies = [
+ "glam",
+ "nodarium_macros",
+ "nodarium_utils",
 ]

 [[package]]
 name = "itoa"
-version = "1.0.11"
+version = "1.0.17"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "49f1f14873335454500d59611f1cf4a4b0f786f9ac11f4312a78e4cf2566695b"
-
-[[package]]
-name = "js-sys"
-version = "0.3.69"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "29c15563dc2726973df627357ce0c9ddddbea194836909d655df6a75d2cf296d"
-dependencies = [
- "wasm-bindgen",
-]
-
-[[package]]
-name = "log"
-version = "0.4.21"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "90ed8c1e510134f979dbc4f070f87d4313098b704861a105fe34231c70a3901c"
+checksum = "92ecc6618181def0457392ccd0ee51198e065e016d1d527a7ac1b6dc7c1f09d2"

 [[package]]
 name = "math"
 version = "0.1.0"
 dependencies = [
- "console_error_panic_hook",
 "nodarium_macros",
 "nodarium_utils",
- "serde",
- "serde-wasm-bindgen",
- "wasm-bindgen",
- "wasm-bindgen-test",
- "web-sys",
 ]

 [[package]]
-name = "max-plantarium-triangle"
-version = "0.1.0"
-dependencies = [
- "console_error_panic_hook",
- "nodarium_macros",
- "nodarium_utils",
- "serde",
- "serde-wasm-bindgen",
- "wasm-bindgen",
- "wasm-bindgen-test",
- "web-sys",
-]
-
-[[package]]
-name = "max-plantarium-vec3"
-version = "0.1.0"
-dependencies = [
- "console_error_panic_hook",
- "nodarium_macros",
- "nodarium_utils",
- "serde",
- "serde-wasm-bindgen",
- "wasm-bindgen",
- "wasm-bindgen-test",
- "web-sys",
-]
-
-[[package]]
-name = "nodarium_instance"
-version = "0.1.0"
-dependencies = [
- "console_error_panic_hook",
- "glam",
- "nodarium_macros",
- "nodarium_utils",
- "serde",
- "serde-wasm-bindgen",
- "wasm-bindgen",
- "wasm-bindgen-test",
- "web-sys",
-]
+name = "memchr"
+version = "2.7.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f52b00d39961fc5b2736ea853c9cc86238e165017a493d1d5c8eac6bdc4cc273"

 [[package]]
 name = "nodarium_macros"
@@ -180,7 +84,7 @@ dependencies = [
 "quote",
 "serde",
 "serde_json",
- "syn 1.0.109",
+ "syn",
 ]

 [[package]]
@@ -195,29 +99,19 @@ dependencies = [
 name = "nodarium_utils"
 version = "0.1.0"
 dependencies = [
- "console_error_panic_hook",
 "glam",
- "noise",
+ "noise 0.9.0",
 "serde",
 "serde_json",
- "wasm-bindgen",
- "web-sys",
 ]

 [[package]]
-name = "nodes-noise"
+name = "noise"
 version = "0.1.0"
 dependencies = [
- "console_error_panic_hook",
- "glam",
 "nodarium_macros",
 "nodarium_utils",
- "noise",
- "serde",
- "serde-wasm-bindgen",
- "wasm-bindgen",
- "wasm-bindgen-test",
- "web-sys",
+ "noise 0.9.0",
 ]

 [[package]]
@@ -233,48 +127,35 @@ dependencies = [

 [[package]]
 name = "num-traits"
-version = "0.2.18"
+version = "0.2.19"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "da0df0e5185db44f69b44f26786fe401b6c293d1907744beaa7fa62b2e5a517a"
+checksum = "071dfc062690e90b734c0b2273ce72ad0ffa95f0c74596bc250dcfd960262841"
 dependencies = [
 "autocfg",
 ]

-[[package]]
-name = "once_cell"
-version = "1.19.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3fdb12b2476b595f9358c5161aa467c2438859caa136dec86c26fdd2efe17b92"
-
 [[package]]
 name = "output"
 version = "0.1.0"
 dependencies = [
- "console_error_panic_hook",
- "glam",
 "nodarium_macros",
 "nodarium_utils",
- "serde",
- "serde_json",
- "wasm-bindgen",
- "wasm-bindgen-test",
- "web-sys",
 ]

 [[package]]
 name = "proc-macro2"
-version = "1.0.81"
+version = "1.0.105"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3d1597b0c024618f09a9c3b8655b7e430397a36d23fdafec26d6965e9eec3eba"
+checksum = "535d180e0ecab6268a3e718bb9fd44db66bbbc256257165fc699dadf70d16fe7"
 dependencies = [
 "unicode-ident",
 ]

 [[package]]
 name = "quote"
-version = "1.0.36"
+version = "1.0.43"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0fa76aaf39101c457836aec0ce2316dbdc3ab723cdda1c6bd4e6ad4208acaca7"
+checksum = "dc74d9a594b72ae6656596548f56f667211f8a97b3d4c3d467150794690dc40a"
 dependencies = [
 "proc-macro2",
 ]
@@ -307,103 +188,76 @@ dependencies = [
 name = "random"
 version = "0.1.0"
 dependencies = [
- "console_error_panic_hook",
 "nodarium_macros",
 "nodarium_utils",
- "serde",
- "serde-wasm-bindgen",
- "wasm-bindgen",
- "wasm-bindgen-test",
 ]

 [[package]]
 name = "rotate"
 version = "0.1.0"
 dependencies = [
- "console_error_panic_hook",
 "glam",
 "nodarium_macros",
 "nodarium_utils",
 "serde",
- "serde-wasm-bindgen",
- "wasm-bindgen",
- "wasm-bindgen-test",
- "web-sys",
 ]

-[[package]]
-name = "ryu"
-version = "1.0.17"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e86697c916019a8588c99b5fac3cead74ec0b4b819707a682fd4d23fa0ce1ba1"
-
-[[package]]
-name = "scoped-tls"
-version = "1.0.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e1cf6437eb19a8f4a6cc0f7dca544973b0b78843adbfeb3683d1a94a0024a294"
-
 [[package]]
 name = "serde"
-version = "1.0.198"
+version = "1.0.228"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9846a40c979031340571da2545a4e5b7c4163bdae79b301d5f86d03979451fcc"
+checksum = "9a8e94ea7f378bd32cbbd37198a4a91436180c5bb472411e48b5ec2e2124ae9e"
+dependencies = [
+ "serde_core",
+ "serde_derive",
+]
+
+[[package]]
+name = "serde_core"
+version = "1.0.228"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "41d385c7d4ca58e59fc732af25c3983b67ac852c1a25000afe1175de458b67ad"
 dependencies = [
 "serde_derive",
 ]

-[[package]]
-name = "serde-wasm-bindgen"
-version = "0.4.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e3b4c031cd0d9014307d82b8abf653c0290fbdaeb4c02d00c63cf52f728628bf"
-dependencies = [
- "js-sys",
- "serde",
- "wasm-bindgen",
-]
-
 [[package]]
 name = "serde_derive"
-version = "1.0.198"
+version = "1.0.228"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e88edab869b01783ba905e7d0153f9fc1a6505a96e4ad3018011eedb838566d9"
+checksum = "d540f220d3187173da220f885ab66608367b6574e925011a9353e4badda91d79"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.60",
+ "syn",
 ]

 [[package]]
 name = "serde_json"
-version = "1.0.116"
+version = "1.0.149"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3e17db7126d17feb94eb3fad46bf1a96b034e8aacbc2e775fe81505f8b0b2813"
+checksum = "83fc039473c5595ace860d8c4fafa220ff474b3fc6bfdb4293327f1a37e94d86"
 dependencies = [
 "itoa",
- "ryu",
+ "memchr",
 "serde",
+ "serde_core",
+ "zmij",
 ]

 [[package]]
 name = "stem"
 version = "0.1.0"
 dependencies = [
- "console_error_panic_hook",
 "nodarium_macros",
 "nodarium_utils",
- "serde",
- "serde-wasm-bindgen",
- "wasm-bindgen",
- "wasm-bindgen-test",
- "web-sys",
 ]

 [[package]]
 name = "syn"
-version = "1.0.109"
+version = "2.0.114"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "72b64191b275b66ffe2469e8af2c1cfe3bafa67b529ead792a6d0160888b4237"
+checksum = "d4d107df263a3013ef9b1879b0df87d706ff80f65a86ea879bd9c31f9b307c2a"
 dependencies = [
 "proc-macro2",
 "quote",
@@ -411,119 +265,30 @@ dependencies = [
 ]

 [[package]]
-name = "syn"
-version = "2.0.60"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "909518bc7b1c9b779f1bbf07f2929d35af9f0f37e47c6e9ef7f9dddc1e1821f3"
+name = "triangle"
+version = "0.1.0"
 dependencies = [
- "proc-macro2",
- "quote",
- "unicode-ident",
+ "nodarium_macros",
+ "nodarium_utils",
 ]

 [[package]]
 name = "unicode-ident"
-version = "1.0.12"
+version = "1.0.22"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3354b9ac3fae1ff6755cb6db53683adb661634f67557942dea4facebec0fee4b"
+checksum = "9312f7c4f6ff9069b165498234ce8be658059c6728633667c526e27dc2cf1df5"

 [[package]]
-name = "wasm-bindgen"
-version = "0.2.92"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4be2531df63900aeb2bca0daaaddec08491ee64ceecbee5076636a3b026795a8"
+name = "vec3"
+version = "0.1.0"
 dependencies = [
- "cfg-if",
- "wasm-bindgen-macro",
+ "nodarium_macros",
+ "nodarium_utils",
+ "serde",
 ]

 [[package]]
-name = "wasm-bindgen-backend"
-version = "0.2.92"
+name = "zmij"
+version = "1.0.15"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "614d787b966d3989fa7bb98a654e369c762374fd3213d212cfc0251257e747da"
-dependencies = [
- "bumpalo",
- "log",
- "once_cell",
- "proc-macro2",
- "quote",
- "syn 2.0.60",
- "wasm-bindgen-shared",
-]
-
-[[package]]
-name = "wasm-bindgen-futures"
-version = "0.4.42"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "76bc14366121efc8dbb487ab05bcc9d346b3b5ec0eaa76e46594cabbe51762c0"
-dependencies = [
- "cfg-if",
- "js-sys",
- "wasm-bindgen",
- "web-sys",
-]
-
-[[package]]
-name = "wasm-bindgen-macro"
-version = "0.2.92"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a1f8823de937b71b9460c0c34e25f3da88250760bec0ebac694b49997550d726"
-dependencies = [
- "quote",
- "wasm-bindgen-macro-support",
-]
-
-[[package]]
-name = "wasm-bindgen-macro-support"
-version = "0.2.92"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e94f17b526d0a461a191c78ea52bbce64071ed5c04c9ffe424dcb38f74171bb7"
-dependencies = [
- "proc-macro2",
- "quote",
- "syn 2.0.60",
- "wasm-bindgen-backend",
- "wasm-bindgen-shared",
-]
-
-[[package]]
-name = "wasm-bindgen-shared"
-version = "0.2.92"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "af190c94f2773fdb3729c55b007a722abb5384da03bc0986df4c289bf5567e96"
-
-[[package]]
-name = "wasm-bindgen-test"
-version = "0.3.42"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d9bf62a58e0780af3e852044583deee40983e5886da43a271dd772379987667b"
-dependencies = [
- "console_error_panic_hook",
- "js-sys",
- "scoped-tls",
- "wasm-bindgen",
- "wasm-bindgen-futures",
- "wasm-bindgen-test-macro",
-]
-
-[[package]]
-name = "wasm-bindgen-test-macro"
-version = "0.3.42"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b7f89739351a2e03cb94beb799d47fb2cac01759b40ec441f7de39b00cbf7ef0"
-dependencies = [
- "proc-macro2",
- "quote",
- "syn 2.0.60",
-]
-
-[[package]]
-name = "web-sys"
-version = "0.3.69"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "77afa9a11836342370f4817622a2f0f418b134426d91a82dfb48f532d2ec13ef"
-dependencies = [
- "js-sys",
- "wasm-bindgen",
-]
+checksum = "94f63c051f4fe3c1509da62131a678643c5b6fbdc9273b2b79d4378ebda003d2"
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -6,7 +6,10 @@ members = [
  "packages/types",
  "packages/utils",
 ]
-exclude = ["nodes/max/plantarium/.template"]
+exclude = [
+    "nodes/max/plantarium/.template",
+    "nodes/max/plantarium/zig"
+]

 [profile.release]
 lto = true
--- a/6
+++ b/6
@@ -2,10 +2,6 @@ FROM node:24-alpine

 RUN apk add --no-cache --update curl rclone g++

-RUN RUSTUP_URL="https://sh.rustup.rs" \
-  && curl --silent --show-error --location --fail --retry 3 --proto '=https' --tlsv1.2 --output /tmp/rustup-linux-install.sh $RUSTUP_URL \
-  && sh /tmp/rustup-linux-install.sh -y
-
 ENV RUSTUP_HOME=/usr/local/rustup \
  CARGO_HOME=/usr/local/cargo \
  PATH=/usr/local/cargo/bin:$PATH
@@ -15,7 +11,5 @@ RUN curl --silent --show-error --location --fail --retry 3 \
  --output /tmp/rustup-init.sh https://sh.rustup.rs \
  && sh /tmp/rustup-init.sh -y --no-modify-path --profile minimal \
  && rm /tmp/rustup-init.sh \
-  && rustup default stable \
  && rustup target add wasm32-unknown-unknown \
-  && cargo install wasm-pack \
  && npm i -g pnpm
--- a/app/Dockerfile
+++ b/app/Dockerfile
@@ -0,0 +1,43 @@
+FROM jimfx/nodes:latest AS builder
+
+WORKDIR /app
+
+COPY pnpm-lock.yaml pnpm-workspace.yaml package.json Cargo.lock Cargo.toml ./
+
+COPY packages/ ./packages/
+COPY nodes/ ./nodes/
+COPY app/package.json ./app/
+
+RUN --mount=type=cache,id=pnpm-store,target=/root/.local/share/pnpm/store \
+  --mount=type=cache,target=/usr/local/cargo/registry \
+  --mount=type=cache,target=/app/target \
+  pnpm install --frozen-lockfile
+
+COPY . .
+
+RUN --mount=type=cache,id=pnpm-store,target=/root/.local/share/pnpm/store \
+  --mount=type=cache,target=/usr/local/cargo/registry \
+  --mount=type=cache,target=/app/target \
+  pnpm build:nodes && \
+  pnpm --filter @nodarium/app... build
+
+FROM nginx:alpine AS runner
+
+RUN rm /etc/nginx/conf.d/default.conf
+
+COPY <<EOF /etc/nginx/conf.d/app.conf
+server {
+    listen 80;
+    server_name _;
+    root /app;
+    index index.html;
+
+    location / {
+        try_files \$uri \$uri/ /index.html;
+    }
+}
+EOF
+
+COPY --from=builder /app/app/build /app
+
+EXPOSE 80
--- a/app/package.json
+++ b/app/package.json
@@ -10,9 +10,9 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@nodarium/registry": "link:../packages/registry",
-    "@nodarium/ui": "link:../packages/ui",
-    "@nodarium/utils": "link:../packages/utils",
+    "@nodarium/registry": "workspace:*",
+    "@nodarium/ui": "workspace:*",
+    "@nodarium/utils": "workspace:*",
    "@sveltejs/kit": "^2.50.0",
    "@tailwindcss/vite": "^4.1.18",
    "@threlte/core": "8.3.1",
@@ -22,12 +22,13 @@
    "idb": "^8.0.3",
    "jsondiffpatch": "^0.7.3",
    "tailwindcss": "^4.1.18",
-    "three": "^0.182.0"
+    "three": "^0.182.0",
+    "wabt": "^1.0.39"
  },
  "devDependencies": {
    "@iconify-json/tabler": "^1.2.26",
    "@iconify/tailwind4": "^1.2.1",
-    "@nodarium/types": "link:../packages/types",
+    "@nodarium/types": "workspace:",
    "@sveltejs/adapter-static": "^3.0.10",
    "@sveltejs/vite-plugin-svelte": "^6.2.4",
    "@tsconfig/svelte": "^5.0.6",
--- a/app/src/lib/graph-interface/components/AddMenu.svelte
+++ b/app/src/lib/graph-interface/components/AddMenu.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { HTML } from "@threlte/extras";
-  import { onMount } from "svelte";
-  import type { NodeInstance, NodeId } from "@nodarium/types";
-  import { getGraphManager, getGraphState } from "../graph-state.svelte";
+  import type { NodeId, NodeInstance } from '@nodarium/types';
+  import { HTML } from '@threlte/extras';
+  import { onMount } from 'svelte';
+  import { getGraphManager, getGraphState } from '../graph-state.svelte';

  type Props = {
    onnode: (n: NodeInstance) => void;
@@ -14,6 +14,7 @@
  const graphState = getGraphState();

  let input: HTMLInputElement;
+  let wrapper: HTMLDivElement;
  let value = $state<string>();
  let activeNodeId = $state<NodeId>();

@@ -22,10 +23,10 @@
    : graph.getNodeDefinitions();

  function filterNodes() {
-    return allNodes.filter((node) => node.id.includes(value ?? ""));
+    return allNodes.filter((node) => node.id.includes(value ?? ''));
  }

-  const nodes = $derived(value === "" ? allNodes : filterNodes());
+  const nodes = $derived(value === '' ? allNodes : filterNodes());
  $effect(() => {
    if (nodes) {
      if (activeNodeId === undefined) {
@@ -39,38 +40,38 @@
    }
  });

-  function handleNodeCreation(nodeType: NodeInstance["type"]) {
+  function handleNodeCreation(nodeType: NodeInstance['type']) {
    if (!graphState.addMenuPosition) return;
    onnode?.({
      id: -1,
      type: nodeType,
      position: [...graphState.addMenuPosition],
      props: {},
-      state: {},
+      state: {}
    });
  }

  function handleKeyDown(event: KeyboardEvent) {
    event.stopImmediatePropagation();

-    if (event.key === "Escape") {
+    if (event.key === 'Escape') {
      graphState.addMenuPosition = null;
      return;
    }

-    if (event.key === "ArrowDown") {
+    if (event.key === 'ArrowDown') {
      const index = nodes.findIndex((node) => node.id === activeNodeId);
      activeNodeId = nodes[(index + 1) % nodes.length].id;
      return;
    }

-    if (event.key === "ArrowUp") {
+    if (event.key === 'ArrowUp') {
      const index = nodes.findIndex((node) => node.id === activeNodeId);
      activeNodeId = nodes[(index - 1 + nodes.length) % nodes.length].id;
      return;
    }

-    if (event.key === "Enter") {
+    if (event.key === 'Enter') {
      if (activeNodeId && graphState.addMenuPosition) {
        handleNodeCreation(activeNodeId);
      }
@@ -81,6 +82,16 @@
  onMount(() => {
    input.disabled = false;
    setTimeout(() => input.focus(), 50);
+
+    const rect = wrapper.getBoundingClientRect();
+    const deltaY = rect.bottom - window.innerHeight;
+    const deltaX = rect.right - window.innerWidth;
+    if (deltaY > 0) {
+      wrapper.style.marginTop = `-${deltaY + 30}px`;
+    }
+    if (deltaX > 0) {
+      wrapper.style.marginLeft = `-${deltaX + 30}px`;
+    }
  });
 </script>

@@ -89,7 +100,7 @@
  position.z={graphState.addMenuPosition?.[1]}
  transform={false}
 >
-  <div class="add-menu-wrapper">
+  <div class="add-menu-wrapper" bind:this={wrapper}>
    <div class="header">
      <input
        id="add-menu"
@@ -112,7 +123,7 @@
          tabindex="0"
          aria-selected={node.id === activeNodeId}
          onkeydown={(event) => {
-            if (event.key === "Enter") {
+            if (event.key === 'Enter') {
              handleNodeCreation(node.id);
            }
          }}
@@ -125,7 +136,7 @@
            activeNodeId = node.id;
          }}
        >
-          {node.id.split("/").at(-1)}
+          {node.id.split('/').at(-1)}
        </div>
      {/each}
    </div>
@@ -167,6 +178,8 @@
    min-height: none;
    width: 100%;
    color: var(--text-color);
+    max-height: 300px;
+    overflow-y: auto;
  }

  .result {
--- a/app/src/lib/graph-interface/debug/Debug.svelte
+++ b/app/src/lib/graph-interface/debug/Debug.svelte
@@ -1,19 +1,44 @@
 <script lang="ts">
-	import { MeshLineGeometry, MeshLineMaterial } from '@threlte/extras';
-	import { points, lines } from './store.js';
-	import { T } from '@threlte/core';
+  import { MeshLineGeometry, MeshLineMaterial } from "@threlte/extras";
+  import { points, lines, rects } from "./store.js";
+  import { T } from "@threlte/core";
+  import { Color } from "three";
 </script>

 {#each $points as point}
-	<T.Mesh position.x={point.x} position.y={point.y} position.z={point.z} rotation.x={-Math.PI / 2}>
-		<T.CircleGeometry args={[0.2, 32]} />
-		<T.MeshBasicMaterial color="red" />
-	</T.Mesh>
+  <T.Mesh
+    position.x={point.x}
+    position.y={point.y}
+    position.z={point.z}
+    rotation.x={-Math.PI / 2}
+  >
+    <T.CircleGeometry args={[0.2, 32]} />
+    <T.MeshBasicMaterial color="red" />
+  </T.Mesh>
+{/each}
+
+{#each $rects as rect, i}
+  <T.Mesh
+    position.x={(rect.minX + rect.maxX) / 2}
+    position.y={0}
+    position.z={(rect.minY + rect.maxY) / 2}
+    rotation.x={-Math.PI / 2}
+  >
+    <T.PlaneGeometry args={[rect.maxX - rect.minX, rect.maxY - rect.minY]} />
+    <T.MeshBasicMaterial
+      color={new Color().setHSL((i * 1.77) % 1, 1, 0.5)}
+      opacity={0.9}
+    />
+  </T.Mesh>
 {/each}

 {#each $lines as line}
-	<T.Mesh>
-		<MeshLineGeometry points={line} />
-		<MeshLineMaterial color="red" linewidth={1} attenuate={false} />
-	</T.Mesh>
+  <T.Mesh position.y={1}>
+    <MeshLineGeometry points={line.points} />
+    <MeshLineMaterial
+      color={line.color || "red"}
+      linewidth={1}
+      attenuate={false}
+    />
+  </T.Mesh>
 {/each}
--- a/app/src/lib/graph-interface/debug/index.ts
+++ b/app/src/lib/graph-interface/debug/index.ts
@@ -1,5 +1,8 @@
-import { Vector3 } from "three/src/math/Vector3.js";
-import { lines, points } from "./store";
+import type { Box } from '@nodarium/types';
+import type { Color } from 'three';
+import { Vector3 } from 'three/src/math/Vector3.js';
+import Component from './Debug.svelte';
+import { lines, points, rects } from './store';

 export function debugPosition(x: number, y: number) {
  points.update((p) => {
@@ -8,18 +11,27 @@ export function debugPosition(x: number, y: number) {
  });
 }

+export function debugRect(rect: Box) {
+  rects.update((r) => {
+    r.push(rect);
+    return r;
+  });
+}
+
 export function clear() {
  points.set([]);
  lines.set([]);
+  rects.set([]);
 }

-export function debugLine(line: Vector3[]) {
+export function debugLine(points: Vector3[], color?: Color) {
  lines.update((l) => {
-    l.push(line);
+    l.push({ points, color });
    return l;
  });
 }

-import Component from "./Debug.svelte";
-
-export default Component
+export default Component;
+export function clearLines() {
+  lines.set([]);
+}
--- a/app/src/lib/graph-interface/debug/store.ts
+++ b/app/src/lib/graph-interface/debug/store.ts
@@ -1,6 +1,8 @@
-import { writable } from "svelte/store";
-import { Vector3 } from "three/src/math/Vector3.js";
+import type { Box } from '@nodarium/types';
+import { writable } from 'svelte/store';
+import type { Color } from 'three';
+import { Vector3 } from 'three/src/math/Vector3.js';

 export const points = writable<Vector3[]>([]);
-
-export const lines = writable<Vector3[][]>([]);
+export const rects = writable<Box[]>([]);
+export const lines = writable<{ points: Vector3[]; color?: Color }[]>([]);
--- a/app/src/lib/graph-interface/edges/Edge.svelte
+++ b/app/src/lib/graph-interface/edges/Edge.svelte
@@ -31,6 +31,10 @@
  import { CubicBezierCurve } from "three/src/extras/curves/CubicBezierCurve.js";
  import { Vector2 } from "three/src/math/Vector2.js";
  import { appSettings } from "$lib/settings/app-settings.svelte";
+  import { getGraphState } from "../graph-state.svelte";
+  import { onDestroy } from "svelte";
+
+  const graphState = getGraphState();

  type Props = {
    x1: number;
@@ -38,20 +42,21 @@
    x2: number;
    y2: number;
    z: number;
+    id?: string;
  };

-  const { x1, y1, x2, y2, z }: Props = $props();
+  const { x1, y1, x2, y2, z, id }: Props = $props();

  const thickness = $derived(Math.max(0.001, 0.00082 * Math.exp(0.055 * z)));

  let points = $state<Vector3[]>([]);

  let lastId: string | null = null;
+  const curveId = $derived(`${x1}-${y1}-${x2}-${y2}`);

  function update() {
    const new_x = x2 - x1;
    const new_y = y2 - y1;
-    const curveId = `${x1}-${y1}-${x2}-${y2}`;
    if (lastId === curveId) {
      return;
    }
@@ -72,6 +77,15 @@
      .getPoints(samples)
      .map((p) => new Vector3(p.x, 0, p.y))
      .flat();
+
+    if (id) {
+      graphState.setEdgeGeometry(
+        id,
+        x1,
+        y1,
+        $state.snapshot(points) as unknown as Vector3[],
+      );
+    }
  }

  $effect(() => {
@@ -79,6 +93,10 @@
      update();
    }
  });
+
+  onDestroy(() => {
+    if (id) graphState.removeEdgeGeometry(id);
+  });
 </script>

 <T.Mesh
@@ -101,6 +119,18 @@
  <T.CircleGeometry args={[0.5, 16]} />
 </T.Mesh>

+{#if graphState.hoveredEdgeId === id}
+  <T.Mesh position.x={x1} position.z={y1} position.y={0.1}>
+    <MeshLineGeometry {points} />
+    <MeshLineMaterial
+      width={thickness * 5}
+      color={lineColor}
+      opacity={0.5}
+      transparent
+    />
+  </T.Mesh>
+{/if}
+
 <T.Mesh position.x={x1} position.z={y1} position.y={0.1}>
  <MeshLineGeometry {points} />
  <MeshLineMaterial width={thickness} color={lineColor} />
--- a/app/src/lib/graph-interface/graph-manager.svelte.ts
+++ b/app/src/lib/graph-interface/graph-manager.svelte.ts
@@ -1,31 +1,33 @@
+import throttle from '$lib/helpers/throttle';
+import { RemoteNodeRegistry } from '@nodarium/registry';
 import type {
  Edge,
  Graph,
-  NodeInstance,
  NodeDefinition,
-  NodeInput,
-  NodeRegistry,
  NodeId,
-  Socket,
-} from "@nodarium/types";
-import { fastHashString } from "@nodarium/utils";
-import { SvelteMap } from "svelte/reactivity";
-import EventEmitter from "./helpers/EventEmitter";
-import { createLogger } from "@nodarium/utils";
-import throttle from "$lib/helpers/throttle";
-import { HistoryManager } from "./history-manager";
+  NodeInput,
+  NodeInstance,
+  NodeRegistry,
+  Socket
+} from '@nodarium/types';
+import { fastHashString } from '@nodarium/utils';
+import { createLogger } from '@nodarium/utils';
+import { SvelteMap } from 'svelte/reactivity';
+import EventEmitter from './helpers/EventEmitter';
+import { HistoryManager } from './history-manager';

-const logger = createLogger("graph-manager");
+const logger = createLogger('graph-manager');
 logger.mute();

-const clone =
-  "structuredClone" in self
-    ? self.structuredClone
-    : (args: any) => JSON.parse(JSON.stringify(args));
+const remoteRegistry = new RemoteNodeRegistry('');
+
+const clone = 'structuredClone' in self
+  ? self.structuredClone
+  : (args: any) => JSON.parse(JSON.stringify(args));

 function areSocketsCompatible(
  output: string | undefined,
-  inputs: string | (string | undefined)[] | undefined,
+  inputs: string | (string | undefined)[] | undefined
 ) {
  if (Array.isArray(inputs) && output) {
    return inputs.includes(output);
@@ -34,24 +36,23 @@ function areSocketsCompatible(
 }

 function areEdgesEqual(firstEdge: Edge, secondEdge: Edge) {
-
  if (firstEdge[0].id !== secondEdge[0].id) {
    return false;
  }

  if (firstEdge[1] !== secondEdge[1]) {
-    return false
+    return false;
  }

  if (firstEdge[2].id !== secondEdge[2].id) {
-    return false
+    return false;
  }

  if (firstEdge[3] !== secondEdge[3]) {
-    return false
+    return false;
  }

-  return true
+  return true;
 }

 export class GraphManager extends EventEmitter<{
@@ -62,7 +63,7 @@ export class GraphManager extends EventEmitter<{
    values: Record<string, unknown>;
  };
 }> {
-  status = $state<"loading" | "idle" | "error">();
+  status = $state<'loading' | 'idle' | 'error'>();
  loaded = false;

  graph: Graph = { id: 0, nodes: [], edges: [] };
@@ -88,7 +89,7 @@ export class GraphManager extends EventEmitter<{
  history: HistoryManager = new HistoryManager();
  execute = throttle(() => {
    if (this.loaded === false) return;
-    this.emit("result", this.serialize());
+    this.emit('result', this.serialize());
  }, 10);

  constructor(public registry: NodeRegistry) {
@@ -100,21 +101,22 @@ export class GraphManager extends EventEmitter<{
      id: node.id,
      position: [...node.position],
      type: node.type,
-      props: node.props,
+      props: node.props
    })) as NodeInstance[];
    const edges = this.edges.map((edge) => [
      edge[0].id,
      edge[1],
      edge[2].id,
-      edge[3],
-    ]) as Graph["edges"];
+      edge[3]
+    ]) as Graph['edges'];
    const serialized = {
      id: this.graph.id,
      settings: $state.snapshot(this.settings),
+      meta: $state.snapshot(this.graph.meta),
      nodes,
-      edges,
+      edges
    };
-    logger.log("serializing graph", serialized);
+    logger.log('serializing graph', serialized);
    return clone($state.snapshot(serialized));
  }

@@ -148,6 +150,97 @@ export class GraphManager extends EventEmitter<{
    return [...nodes.values()];
  }

+  getEdgeId(e: Edge) {
+    return `${e[0].id}-${e[1]}-${e[2].id}-${e[3]}`;
+  }
+
+  getEdgeById(id: string): Edge | undefined {
+    return this.edges.find((e) => this.getEdgeId(e) === id);
+  }
+
+  dropNodeOnEdge(nodeId: number, edge: Edge) {
+    const draggedNode = this.getNode(nodeId);
+    if (!draggedNode || !draggedNode.state?.type) return;
+
+    const [fromNode, fromSocketIdx, toNode, toSocketKey] = edge;
+
+    const draggedInputs = Object.entries(draggedNode.state.type.inputs ?? {});
+    const draggedOutputs = draggedNode.state.type.outputs ?? [];
+
+    const edgeOutputSocketType = fromNode.state?.type?.outputs?.[fromSocketIdx];
+    const targetInput = toNode.state?.type?.inputs?.[toSocketKey];
+    const targetAcceptedTypes = [targetInput?.type, ...(targetInput?.accepts || [])];
+
+    const bestInputEntry = draggedInputs.find(([_, input]) => {
+      const accepted = [input.type, ...(input.accepts || [])];
+      return areSocketsCompatible(edgeOutputSocketType, accepted);
+    });
+
+    const bestOutputIdx = draggedOutputs.findIndex(outputType =>
+      areSocketsCompatible(outputType, targetAcceptedTypes)
+    );
+
+    if (!bestInputEntry || bestOutputIdx === -1) {
+      logger.error('Could not find compatible sockets for drop');
+      return;
+    }
+
+    this.startUndoGroup();
+
+    this.removeEdge(edge, { applyDeletion: false });
+
+    this.createEdge(fromNode, fromSocketIdx, draggedNode, bestInputEntry[0], {
+      applyUpdate: false
+    });
+
+    this.createEdge(draggedNode, bestOutputIdx, toNode, toSocketKey, {
+      applyUpdate: false
+    });
+
+    this.saveUndoGroup();
+    this.execute();
+  }
+
+  getPossibleDropOnEdges(nodeId: number): Edge[] {
+    const draggedNode = this.getNode(nodeId);
+    if (!draggedNode || !draggedNode.state?.type) return [];
+
+    const draggedInputs = Object.values(draggedNode.state.type.inputs ?? {});
+    const draggedOutputs = draggedNode.state.type.outputs ?? [];
+
+    // Optimization: Pre-calculate parents to avoid cycles
+    const parentIds = new Set(this.getParentsOfNode(draggedNode).map(n => n.id));
+
+    return this.edges.filter((edge) => {
+      const [fromNode, fromSocketIdx, toNode, toSocketKey] = edge;
+
+      // 1. Prevent cycles: If the target node is already a parent, we can't drop here
+      if (parentIds.has(toNode.id)) return false;
+
+      // 2. Prevent self-dropping: Don't drop on edges already connected to this node
+      if (fromNode.id === nodeId || toNode.id === nodeId) return false;
+
+      // 3. Check if edge.source can plug into ANY draggedNode.input
+      const edgeOutputSocketType = fromNode.state?.type?.outputs?.[fromSocketIdx];
+      const canPlugIntoDragged = draggedInputs.some(input => {
+        const acceptedTypes = [input.type, ...(input.accepts || [])];
+        return areSocketsCompatible(edgeOutputSocketType, acceptedTypes);
+      });
+
+      if (!canPlugIntoDragged) return false;
+
+      // 4. Check if ANY draggedNode.output can plug into edge.target
+      const targetInput = toNode.state?.type?.inputs?.[toSocketKey];
+      const targetAcceptedTypes = [targetInput?.type, ...(targetInput?.accepts || [])];
+
+      const draggedCanPlugIntoTarget = draggedOutputs.some(outputType =>
+        areSocketsCompatible(outputType, targetAcceptedTypes)
+      );
+
+      return draggedCanPlugIntoTarget;
+    });
+  }
+
  getEdgesBetweenNodes(nodes: NodeInstance[]): [number, number, number, string][] {
    const edges = [];
    for (const node of nodes) {
@@ -155,14 +248,14 @@ export class GraphManager extends EventEmitter<{
      for (const child of children) {
        if (nodes.includes(child)) {
          const edge = this.edges.find(
-            (e) => e[0].id === node.id && e[2].id === child.id,
+            (e) => e[0].id === node.id && e[2].id === child.id
          );
          if (edge) {
            edges.push([edge[0].id, edge[1], edge[2].id, edge[3]] as [
              number,
              number,
              number,
-              string,
+              string
            ]);
          }
        }
@@ -179,18 +272,18 @@ export class GraphManager extends EventEmitter<{
        const n = node as NodeInstance;
        if (nodeType) {
          n.state = {
-            type: nodeType,
+            type: nodeType
          };
        }
        return [node.id, n];
-      }),
+      })
    );

-    const edges = graph.edges.map((edge) => {
+    this.edges = graph.edges.map((edge) => {
      const from = nodes.get(edge[0]);
      const to = nodes.get(edge[2]);
      if (!from || !to) {
-        throw new Error("Edge references non-existing node");
+        throw new Error('Edge references non-existing node');
      }
      from.state.children = from.state.children || [];
      from.state.children.push(to);
@@ -199,8 +292,6 @@ export class GraphManager extends EventEmitter<{
      return [from, edge[1], to, edge[3]] as Edge;
    });

-    this.edges = [...edges];
-
    this.nodes.clear();
    for (const [id, node] of nodes) {
      this.nodes.set(id, node);
@@ -214,21 +305,36 @@ export class GraphManager extends EventEmitter<{

    this.loaded = false;
    this.graph = graph;
-    this.status = "loading";
+    this.status = 'loading';
    this.id = graph.id;

-    logger.info("loading graph", $state.snapshot(graph));
+    logger.info('loading graph', { nodes: graph.nodes, edges: graph.edges, id: graph.id });

    const nodeIds = Array.from(new Set([...graph.nodes.map((n) => n.type)]));
    await this.registry.load(nodeIds);

-    logger.info("loaded node types", this.registry.getAllNodes());
+    // Fetch all nodes from all collections of the loaded nodes
+    const allCollections = new Set<`${string}/${string}`>();
+    for (const id of nodeIds) {
+      const [user, collection] = id.split('/');
+      allCollections.add(`${user}/${collection}`);
+    }
+    for (const collection of allCollections) {
+      remoteRegistry
+        .fetchCollection(collection)
+        .then((collection: { nodes: { id: NodeId }[] }) => {
+          const ids = collection.nodes.map((n) => n.id);
+          return this.registry.load(ids);
+        });
+    }
+
+    logger.info('loaded node types', this.registry.getAllNodes());

    for (const node of this.graph.nodes) {
      const nodeType = this.registry.getNode(node.type);
      if (!nodeType) {
        logger.error(`Node type not found: ${node.type}`);
-        this.status = "error";
+        this.status = 'error';
        return;
      }
      // Turn into runtime node
@@ -253,11 +359,11 @@ export class GraphManager extends EventEmitter<{
            settingTypes[settingId] = {
              __node_type: type.id,
              __node_input: key,
-              ...type.inputs[key],
+              ...type.inputs[key]
            };
            if (
-              settingValues[settingId] === undefined &&
-              "value" in type.inputs[key]
+              settingValues[settingId] === undefined
+              && 'value' in type.inputs[key]
            ) {
              settingValues[settingId] = type.inputs[key].value;
            }
@@ -267,14 +373,14 @@ export class GraphManager extends EventEmitter<{
    }

    this.settings = settingValues;
-    this.emit("settings", { types: settingTypes, values: settingValues });
+    this.emit('settings', { types: settingTypes, values: settingValues });

    this.history.reset();
    this._init(this.graph);

    this.save();

-    this.status = "idle";
+    this.status = 'idle';

    this.loaded = true;
    logger.log(`Graph loaded in ${performance.now() - a}ms`);
@@ -307,9 +413,9 @@ export class GraphManager extends EventEmitter<{
        if (settingId) {
          settingTypes[settingId] = nodeType.inputs[key];
          if (
-            settingValues &&
-            settingValues?.[settingId] === undefined &&
-            "value" in nodeType.inputs[key]
+            settingValues
+            && settingValues?.[settingId] === undefined
+            && 'value' in nodeType.inputs[key]
          ) {
            settingValues[settingId] = nodeType.inputs[key].value;
          }
@@ -319,7 +425,7 @@ export class GraphManager extends EventEmitter<{

    this.settings = settingValues;
    this.settingTypes = settingTypes;
-    this.emit("settings", { types: settingTypes, values: settingValues });
+    this.emit('settings', { types: settingTypes, values: settingValues });
  }

  getChildren(node: NodeInstance) {
@@ -368,7 +474,7 @@ export class GraphManager extends EventEmitter<{
          const inputType = to?.state?.type?.inputs?.[toSocket]?.type;
          if (outputType === inputType) {
            this.createEdge(from, fromSocket, to, toSocket, {
-              applyUpdate: false,
+              applyUpdate: false
            });
            continue;
          }
@@ -403,7 +509,7 @@ export class GraphManager extends EventEmitter<{
    // map old ids to new ids
    const idMap = new Map<number, number>();

-    let startId = this.createNodeId()
+    let startId = this.createNodeId();

    nodes = nodes.map((node) => {
      const id = startId++;
@@ -420,7 +526,7 @@ export class GraphManager extends EventEmitter<{
      const to = nodes.find((n) => n.id === idMap.get(edge[2]));

      if (!from || !to) {
-        throw new Error("Edge references non-existing node");
+        throw new Error('Edge references non-existing node');
      }

      to.state.parents = to.state.parents || [];
@@ -445,11 +551,11 @@ export class GraphManager extends EventEmitter<{
  createNode({
    type,
    position,
-    props = {},
+    props = {}
  }: {
-    type: NodeInstance["type"];
-    position: NodeInstance["position"];
-    props: NodeInstance["props"];
+    type: NodeInstance['type'];
+    position: NodeInstance['position'];
+    props: NodeInstance['props'];
  }) {
    const nodeType = this.registry.getNode(type);
    if (!nodeType) {
@@ -462,14 +568,14 @@ export class GraphManager extends EventEmitter<{
      type,
      position,
      state: { type: nodeType },
-      props,
+      props
    });

    this.nodes.set(node.id, node);

    this.save();

-    return node
+    return node;
  }

  createEdge(
@@ -477,17 +583,16 @@ export class GraphManager extends EventEmitter<{
    fromSocket: number,
    to: NodeInstance,
    toSocket: string,
-    { applyUpdate = true } = {},
+    { applyUpdate = true } = {}
  ): Edge | undefined {
-
    const existingEdges = this.getEdgesToNode(to);

    // check if this exact edge already exists
    const existingEdge = existingEdges.find(
-      (e) => e[0].id === from.id && e[1] === fromSocket && e[3] === toSocket,
+      (e) => e[0].id === from.id && e[1] === fromSocket && e[3] === toSocket
    );
    if (existingEdge) {
-      logger.error("Edge already exists", existingEdge);
+      logger.error('Edge already exists', existingEdge);
      return;
    }

@@ -500,13 +605,13 @@ export class GraphManager extends EventEmitter<{

    if (!areSocketsCompatible(fromSocketType, toSocketType)) {
      logger.error(
-        `Socket types do not match: ${fromSocketType} !== ${toSocketType}`,
+        `Socket types do not match: ${fromSocketType} !== ${toSocketType}`
      );
      return;
    }

    const edgeToBeReplaced = this.edges.find(
-      (e) => e[2].id === to.id && e[3] === toSocket,
+      (e) => e[2].id === to.id && e[3] === toSocket
    );
    if (edgeToBeReplaced) {
      this.removeEdge(edgeToBeReplaced, { applyDeletion: false });
@@ -533,7 +638,7 @@ export class GraphManager extends EventEmitter<{
    const nextState = this.history.undo();
    if (nextState) {
      this._init(nextState);
-      this.emit("save", this.serialize());
+      this.emit('save', this.serialize());
    }
  }

@@ -541,7 +646,7 @@ export class GraphManager extends EventEmitter<{
    const nextState = this.history.redo();
    if (nextState) {
      this._init(nextState);
-      this.emit("save", this.serialize());
+      this.emit('save', this.serialize());
    }
  }

@@ -558,8 +663,15 @@ export class GraphManager extends EventEmitter<{
    if (this.currentUndoGroup) return;
    const state = this.serialize();
    this.history.save(state);
-    this.emit("save", state);
-    logger.log("saving graphs", state);
+
+    // This is some stupid race condition where the graph-manager emits a save event
+    // when the graph is not fully loaded
+    if (this.nodes.size === 0 && this.edges.length === 0) {
+      return;
+    }
+
+    this.emit('save', state);
+    logger.log('saving graphs', state);
  }

  getParentsOfNode(node: NodeInstance) {
@@ -567,7 +679,7 @@ export class GraphManager extends EventEmitter<{
    const stack = node.state?.parents?.slice(0);
    while (stack?.length) {
      if (parents.length > 1000000) {
-        logger.warn("Infinite loop detected");
+        logger.warn('Infinite loop detected');
        break;
      }
      const parent = stack.pop();
@@ -586,26 +698,28 @@ export class GraphManager extends EventEmitter<{
      return [];
    }

-    const definitions = typeof socket.index === "string"
+    const definitions = typeof socket.index === 'string'
      ? allDefinitions.filter(s => {
-        return s.outputs?.find(_s => Object
-          .values(nodeType?.inputs || {})
-          .map(s => s.type)
-          .includes(_s as NodeInput["type"])
-        )
+        return s.outputs?.find(_s =>
+          Object
+            .values(nodeType?.inputs || {})
+            .map(s => s.type)
+            .includes(_s as NodeInput['type'])
+        );
      })
-      : allDefinitions.filter(s => Object
-        .values(s.inputs ?? {})
-        .find(s => {
-          if (s.hidden) return false;
-          if (nodeType.outputs?.includes(s.type)) {
-            return true
-          }
-          return s.accepts?.find(a => nodeType.outputs?.includes(a))
-        }))
-
-    return definitions
+      : allDefinitions.filter(s =>
+        Object
+          .values(s.inputs ?? {})
+          .find(s => {
+            if (s.hidden) return false;
+            if (nodeType.outputs?.includes(s.type)) {
+              return true;
+            }
+            return s.accepts?.find(a => nodeType.outputs?.includes(a));
+          })
+      );

+    return definitions;
  }

  getPossibleSockets({ node, index }: Socket): [NodeInstance, string | number][] {
@@ -615,11 +729,11 @@ export class GraphManager extends EventEmitter<{
    const sockets: [NodeInstance, string | number][] = [];

    // if index is a string, we are an input looking for outputs
-    if (typeof index === "string") {
+    if (typeof index === 'string') {
      // filter out self and child nodes
      const children = new Set(this.getChildren(node).map((n) => n.id));
      const nodes = this.getAllNodes().filter(
-        (n) => n.id !== node.id && !children.has(n.id),
+        (n) => n.id !== node.id && !children.has(n.id)
      );

      const ownType = nodeType?.inputs?.[index].type;
@@ -634,20 +748,20 @@ export class GraphManager extends EventEmitter<{
          }
        }
      }
-    } else if (typeof index === "number") {
+    } else if (typeof index === 'number') {
      // if index is a number, we are an output looking for inputs

      // filter out self and parent nodes
      const parents = new Set(this.getParentsOfNode(node).map((n) => n.id));
      const nodes = this.getAllNodes().filter(
-        (n) => n.id !== node.id && !parents.has(n.id),
+        (n) => n.id !== node.id && !parents.has(n.id)
      );

      // get edges from this socket
      const edges = new Map(
        this.getEdgesFromNode(node)
          .filter((e) => e[1] === index)
-          .map((e) => [e[2].id, e[3]]),
+          .map((e) => [e[2].id, e[3]])
      );

      const ownType = nodeType.outputs?.[index];
@@ -660,8 +774,8 @@ export class GraphManager extends EventEmitter<{
          otherType.push(...(inputs[key].accepts || []));

          if (
-            areSocketsCompatible(ownType, otherType) &&
-            edges.get(node.id) !== key
+            areSocketsCompatible(ownType, otherType)
+            && edges.get(node.id) !== key
          ) {
            sockets.push([node, key]);
          }
@@ -674,7 +788,7 @@ export class GraphManager extends EventEmitter<{

  removeEdge(
    edge: Edge,
-    { applyDeletion = true }: { applyDeletion?: boolean } = {},
+    { applyDeletion = true }: { applyDeletion?: boolean } = {}
  ) {
    const id0 = edge[0].id;
    const sid0 = edge[1];
@@ -682,21 +796,20 @@ export class GraphManager extends EventEmitter<{
    const sid2 = edge[3];

    const _edge = this.edges.find(
-      (e) =>
-        e[0].id === id0 && e[1] === sid0 && e[2].id === id2 && e[3] === sid2,
+      (e) => e[0].id === id0 && e[1] === sid0 && e[2].id === id2 && e[3] === sid2
    );

    if (!_edge) return;

    if (edge[0].state.children) {
      edge[0].state.children = edge[0].state.children.filter(
-        (n: NodeInstance) => n.id !== id2,
+        (n: NodeInstance) => n.id !== id2
      );
    }

    if (edge[2].state.parents) {
      edge[2].state.parents = edge[2].state.parents.filter(
-        (n: NodeInstance) => n.id !== id0,
+        (n: NodeInstance) => n.id !== id0
      );
    }

@@ -705,7 +818,6 @@ export class GraphManager extends EventEmitter<{
      this.execute();
      this.save();
    }
-
  }

  getEdgesToNode(node: NodeInstance) {
--- a/app/src/lib/graph-interface/graph-state.svelte.ts
+++ b/app/src/lib/graph-interface/graph-state.svelte.ts
@@ -1,36 +1,43 @@
-import type { NodeInstance, Socket } from "@nodarium/types";
-import { getContext, setContext } from "svelte";
-import { SvelteSet } from "svelte/reactivity";
-import type { GraphManager } from "./graph-manager.svelte";
-import type { OrthographicCamera } from "three";
+import type { NodeInstance, Socket } from '@nodarium/types';
+import { getContext, setContext } from 'svelte';
+import { SvelteSet } from 'svelte/reactivity';
+import type { OrthographicCamera, Vector3 } from 'three';
+import type { GraphManager } from './graph-manager.svelte';

-
-const graphStateKey = Symbol("graph-state");
+const graphStateKey = Symbol('graph-state');
 export function getGraphState() {
  return getContext<GraphState>(graphStateKey);
 }
 export function setGraphState(graphState: GraphState) {
-  return setContext(graphStateKey, graphState)
+  return setContext(graphStateKey, graphState);
 }

-const graphManagerKey = Symbol("graph-manager");
+const graphManagerKey = Symbol('graph-manager');
 export function getGraphManager() {
-  return getContext<GraphManager>(graphManagerKey)
+  return getContext<GraphManager>(graphManagerKey);
 }

 export function setGraphManager(manager: GraphManager) {
  return setContext(graphManagerKey, manager);
 }

-export class GraphState {
+type EdgeData = {
+  x1: number;
+  y1: number;
+  points: Vector3[];
+};

+export class GraphState {
  constructor(private graph: GraphManager) {
    $effect.root(() => {
      $effect(() => {
-        localStorage.setItem("cameraPosition", `[${this.cameraPosition[0]},${this.cameraPosition[1]},${this.cameraPosition[2]}]`)
-      })
-    })
-    const storedPosition = localStorage.getItem("cameraPosition")
+        localStorage.setItem(
+          'cameraPosition',
+          `[${this.cameraPosition[0]},${this.cameraPosition[1]},${this.cameraPosition[2]}]`
+        );
+      });
+    });
+    const storedPosition = localStorage.getItem('cameraPosition');
    if (storedPosition) {
      try {
        const d = JSON.parse(storedPosition);
@@ -38,7 +45,7 @@ export class GraphState {
        this.cameraPosition[1] = d[1];
        this.cameraPosition[2] = d[2];
      } catch (e) {
-        console.log("Failed to parsed stored camera position", e);
+        console.log('Failed to parsed stored camera position', e);
      }
    }
  }
@@ -46,13 +53,18 @@ export class GraphState {
  width = $state(100);
  height = $state(100);

+  hoveredEdgeId = $state<string | null>(null);
+  edges = new Map<string, EdgeData>();
+
  wrapper = $state<HTMLDivElement>(null!);
  rect: DOMRect = $derived(
-    (this.wrapper && this.width && this.height) ? this.wrapper.getBoundingClientRect() : new DOMRect(0, 0, 0, 0),
+    (this.wrapper && this.width && this.height)
+      ? this.wrapper.getBoundingClientRect()
+      : new DOMRect(0, 0, 0, 0)
  );

  camera = $state<OrthographicCamera>(null!);
-  cameraPosition: [number, number, number] = $state([0, 0, 4]);
+  cameraPosition: [number, number, number] = $state([140, 100, 3.5]);

  clipboard: null | {
    nodes: NodeInstance[];
@@ -63,7 +75,7 @@ export class GraphState {
    this.cameraPosition[0] - this.width / this.cameraPosition[2] / 2,
    this.cameraPosition[0] + this.width / this.cameraPosition[2] / 2,
    this.cameraPosition[1] - this.height / this.cameraPosition[2] / 2,
-    this.cameraPosition[1] + this.height / this.cameraPosition[2] / 2,
+    this.cameraPosition[1] + this.height / this.cameraPosition[2] / 2
  ]);

  boxSelection = $state(false);
@@ -71,8 +83,8 @@ export class GraphState {
  addMenuPosition = $state<[number, number] | null>(null);

  snapToGrid = $state(false);
-  showGrid = $state(true)
-  showHelp = $state(false)
+  showGrid = $state(true);
+  showHelp = $state(false);

  cameraDown = [0, 0];
  mouseDownNodeId = -1;
@@ -88,33 +100,49 @@ export class GraphState {
  hoveredSocket = $state<Socket | null>(null);
  possibleSockets = $state<Socket[]>([]);
  possibleSocketIds = $derived(
-    new Set(this.possibleSockets.map((s) => `${s.node.id}-${s.index}`)),
+    new Set(this.possibleSockets.map((s) => `${s.node.id}-${s.index}`))
  );

+  getEdges() {
+    return $state.snapshot(this.edges);
+  }
+
  clearSelection() {
    this.selectedNodes.clear();
  }

-  isBodyFocused = () => document?.activeElement?.nodeName !== "INPUT";
+  isBodyFocused = () => document?.activeElement?.nodeName !== 'INPUT';
+
+  setEdgeGeometry(edgeId: string, x1: number, y1: number, points: Vector3[]) {
+    this.edges.set(edgeId, { x1, y1, points });
+  }
+
+  removeEdgeGeometry(edgeId: string) {
+    this.edges.delete(edgeId);
+  }
+
+  getEdgeData() {
+    return this.edges;
+  }

  updateNodePosition(node: NodeInstance) {
    if (
-      node.state.x === node.position[0] &&
-      node.state.y === node.position[1]
+      node.state.x === node.position[0]
+      && node.state.y === node.position[1]
    ) {
      delete node.state.x;
      delete node.state.y;
    }

-    if (node.state["x"] !== undefined && node.state["y"] !== undefined) {
+    if (node.state['x'] !== undefined && node.state['y'] !== undefined) {
      if (node.state.ref) {
-        node.state.ref.style.setProperty("--nx", `${node.state.x * 10}px`);
-        node.state.ref.style.setProperty("--ny", `${node.state.y * 10}px`);
+        node.state.ref.style.setProperty('--nx', `${node.state.x * 10}px`);
+        node.state.ref.style.setProperty('--ny', `${node.state.y * 10}px`);
      }
    } else {
      if (node.state.ref) {
-        node.state.ref.style.setProperty("--nx", `${node.position[0] * 10}px`);
-        node.state.ref.style.setProperty("--ny", `${node.position[1] * 10}px`);
+        node.state.ref.style.setProperty('--nx', `${node.position[0] * 10}px`);
+        node.state.ref.style.setProperty('--ny', `${node.position[1] * 10}px`);
      }
    }
  }
@@ -134,18 +162,18 @@ export class GraphState {

  getSocketPosition(
    node: NodeInstance,
-    index: string | number,
+    index: string | number
  ): [number, number] {
-    if (typeof index === "number") {
+    if (typeof index === 'number') {
      return [
        (node?.state?.x ?? node.position[0]) + 20,
-        (node?.state?.y ?? node.position[1]) + 2.5 + 10 * index,
+        (node?.state?.y ?? node.position[1]) + 2.5 + 10 * index
      ];
    } else {
      const _index = Object.keys(node.state?.type?.inputs || {}).indexOf(index);
      return [
        node?.state?.x ?? node.position[0],
-        (node?.state?.y ?? node.position[1]) + 10 + 10 * _index,
+        (node?.state?.y ?? node.position[1]) + 10 + 10 * _index
      ];
    }
  }
@@ -159,26 +187,26 @@ export class GraphState {
    if (!node?.inputs) {
      return 5;
    }
-    const height =
-      5 +
-      10 *
-      Object.keys(node.inputs).filter(
-        (p) =>
-          p !== "seed" &&
-          node?.inputs &&
-          !("setting" in node?.inputs?.[p]) &&
-          node.inputs[p].hidden !== true,
-      ).length;
+    const height = 5
+      + 10
+        * Object.keys(node.inputs).filter(
+          (p) =>
+            p !== 'seed'
+            && node?.inputs
+            && !('setting' in node?.inputs?.[p])
+            && node.inputs[p].hidden !== true
+        ).length;
    this.nodeHeightCache[nodeTypeId] = height;
    return height;
  }

  copyNodes() {
-    if (this.activeNodeId === -1 && !this.selectedNodes?.size)
+    if (this.activeNodeId === -1 && !this.selectedNodes?.size) {
      return;
+    }
    let nodes = [
      this.activeNodeId,
-      ...(this.selectedNodes?.values() || []),
+      ...(this.selectedNodes?.values() || [])
    ]
      .map((id) => this.graph.getNode(id))
      .filter(b => !!b);
@@ -188,14 +216,14 @@ export class GraphState {
      ...node,
      position: [
        this.mousePosition[0] - node.position[0],
-        this.mousePosition[1] - node.position[1],
+        this.mousePosition[1] - node.position[1]
      ],
-      tmp: undefined,
+      tmp: undefined
    }));

    this.clipboard = {
      nodes: nodes,
-      edges: edges,
+      edges: edges
    };
  }

@@ -217,14 +245,13 @@ export class GraphState {
    }
  }

-
  setDownSocket(socket: Socket) {
    this.activeSocket = socket;

    let { node, index, position } = socket;

    // remove existing edge
-    if (typeof index === "string") {
+    if (typeof index === 'string') {
      const edges = this.graph.getEdgesToNode(node);
      for (const edge of edges) {
        if (edge[3] === index) {
@@ -241,7 +268,7 @@ export class GraphState {
    this.activeSocket = {
      node,
      index,
-      position,
+      position
    };

    this.possibleSockets = this.graph
@@ -250,18 +277,17 @@ export class GraphState {
        return {
          node,
          index,
-          position: this.getSocketPosition(node, index),
+          position: this.getSocketPosition(node, index)
        };
      });
-  };
-
+  }

  projectScreenToWorld(x: number, y: number): [number, number] {
    return [
-      this.cameraPosition[0] +
-      (x - this.width / 2) / this.cameraPosition[2],
-      this.cameraPosition[1] +
-      (y - this.height / 2) / this.cameraPosition[2],
+      this.cameraPosition[0]
+      + (x - this.width / 2) / this.cameraPosition[2],
+      this.cameraPosition[1]
+      + (y - this.height / 2) / this.cameraPosition[2]
    ];
  }

@@ -274,8 +300,8 @@ export class GraphState {
    if (event.button === 0) {
      // check if the clicked element is a node
      if (event.target instanceof HTMLElement) {
-        const nodeElement = event.target.closest(".node");
-        const nodeId = nodeElement?.getAttribute?.("data-node-id");
+        const nodeElement = event.target.closest('.node');
+        const nodeId = nodeElement?.getAttribute?.('data-node-id');
        if (nodeId) {
          clickedNodeId = parseInt(nodeId, 10);
        }
@@ -303,10 +329,14 @@ export class GraphState {
    const height = this.getNodeHeight(node.type);
    const width = 20;
    return (
-      node.position[0] > this.cameraBounds[0] - width &&
-      node.position[0] < this.cameraBounds[1] &&
-      node.position[1] > this.cameraBounds[2] - height &&
-      node.position[1] < this.cameraBounds[3]
+      node.position[0] > this.cameraBounds[0] - width
+      && node.position[0] < this.cameraBounds[1]
+      && node.position[1] > this.cameraBounds[2] - height
+      && node.position[1] < this.cameraBounds[3]
    );
-  };
+  }
+
+  openNodePalette() {
+    this.addMenuPosition = [this.mousePosition[0], this.mousePosition[1]];
+  }
 }
--- a/app/src/lib/graph-interface/graph/Graph.svelte
+++ b/app/src/lib/graph-interface/graph/Graph.svelte
@@ -1,21 +1,23 @@
 <script lang="ts">
-  import type { Edge, NodeInstance } from "@nodarium/types";
-  import { createKeyMap } from "../../helpers/createKeyMap";
-  import AddMenu from "../components/AddMenu.svelte";
-  import Background from "../background/Background.svelte";
-  import BoxSelection from "../components/BoxSelection.svelte";
-  import EdgeEl from "../edges/Edge.svelte";
-  import NodeEl from "../node/Node.svelte";
-  import Camera from "../components/Camera.svelte";
-  import { Canvas } from "@threlte/core";
-  import HelpView from "../components/HelpView.svelte";
-  import { getGraphManager, getGraphState } from "../graph-state.svelte";
-  import { HTML } from "@threlte/extras";
-  import { FileDropEventManager, MouseEventManager } from "./events";
-  import { maxZoom, minZoom } from "./constants";
+  import type { Edge, NodeInstance } from '@nodarium/types';
+  import { Canvas } from '@threlte/core';
+  import { HTML } from '@threlte/extras';
+  import { createKeyMap } from '../../helpers/createKeyMap';
+  import Background from '../background/Background.svelte';
+  import AddMenu from '../components/AddMenu.svelte';
+  import BoxSelection from '../components/BoxSelection.svelte';
+  import Camera from '../components/Camera.svelte';
+  import HelpView from '../components/HelpView.svelte';
+  import Debug from '../debug/Debug.svelte';
+  import EdgeEl from '../edges/Edge.svelte';
+  import { getGraphManager, getGraphState } from '../graph-state.svelte';
+  import NodeEl from '../node/Node.svelte';
+  import { maxZoom, minZoom } from './constants';
+  import { FileDropEventManager } from './drop.events';
+  import { MouseEventManager } from './mouse.events';

  const {
-    keymap,
+    keymap
  }: {
    keymap: ReturnType<typeof createKeyMap>;
  } = $props();
@@ -43,19 +45,18 @@
    const newNode = graph.createNode({
      type: node.type,
      position: node.position,
-      props: node.props,
+      props: node.props
    });
    if (!newNode) return;

    if (graphState.activeSocket) {
-      if (typeof graphState.activeSocket.index === "number") {
-        const socketType =
-          graphState.activeSocket.node.state?.type?.outputs?.[
-            graphState.activeSocket.index
-          ];
+      if (typeof graphState.activeSocket.index === 'number') {
+        const socketType = graphState.activeSocket.node.state?.type?.outputs?.[
+          graphState.activeSocket.index
+        ];

        const input = Object.entries(newNode?.state?.type?.inputs || {}).find(
-          (inp) => inp[1].type === socketType,
+          (inp) => inp[1].type === socketType
        );

        if (input) {
@@ -63,14 +64,13 @@
            graphState.activeSocket.node,
            graphState.activeSocket.index,
            newNode,
-            input[0],
+            input[0]
          );
        }
      } else {
-        const socketType =
-          graphState.activeSocket.node.state?.type?.inputs?.[
-            graphState.activeSocket.index
-          ];
+        const socketType = graphState.activeSocket.node.state?.type?.inputs?.[
+          graphState.activeSocket.index
+        ];

        const output = newNode.state?.type?.outputs?.find((out) => {
          if (socketType?.type === out) return true;
@@ -83,7 +83,7 @@
            newNode,
            output.indexOf(output),
            graphState.activeSocket.node,
-            graphState.activeSocket.index,
+            graphState.activeSocket.index
          );
        }
      }
@@ -95,14 +95,15 @@
 </script>

 <svelte:window
-  onmousemove={(ev) => mouseEvents.handleMouseMove(ev)}
-  onmouseup={(ev) => mouseEvents.handleMouseUp(ev)}
+  onmousemove={(ev) => mouseEvents.handleWindowMouseMove(ev)}
+  onmouseup={(ev) => mouseEvents.handleWindowMouseUp(ev)}
 />

 <div
  onwheel={(ev) => mouseEvents.handleMouseScroll(ev)}
  bind:this={graphState.wrapper}
  class="graph-wrapper"
+  style="height: 100%"
  class:is-panning={graphState.isPanning}
  class:is-hovering={graphState.hoveredNodeId !== -1}
  aria-label="Graph"
@@ -112,6 +113,7 @@
  bind:clientHeight={graphState.height}
  onkeydown={(ev) => keymap.handleKeyboardEvent(ev)}
  onmousedown={(ev) => mouseEvents.handleMouseDown(ev)}
+  oncontextmenu={(ev) => mouseEvents.handleContextMenu(ev)}
  {...fileDropEvents.getEventListenerProps()}
 >
  <input
@@ -144,20 +146,18 @@
      <BoxSelection
        cameraPosition={graphState.cameraPosition}
        p1={{
-          x:
-            graphState.cameraPosition[0] +
-            (graphState.mouseDown[0] - graphState.width / 2) /
-              graphState.cameraPosition[2],
-          y:
-            graphState.cameraPosition[1] +
-            (graphState.mouseDown[1] - graphState.height / 2) /
-              graphState.cameraPosition[2],
+          x: graphState.cameraPosition[0]
+            + (graphState.mouseDown[0] - graphState.width / 2)
+              / graphState.cameraPosition[2],
+          y: graphState.cameraPosition[1]
+            + (graphState.mouseDown[1] - graphState.height / 2)
+              / graphState.cameraPosition[2]
        }}
        p2={{ x: graphState.mousePosition[0], y: graphState.mousePosition[1] }}
      />
    {/if}

-    {#if graph.status === "idle"}
+    {#if graph.status === 'idle'}
      {#if graphState.addMenuPosition}
        <AddMenu onnode={handleNodeCreation} />
      {/if}
@@ -174,9 +174,18 @@

      {#each graph.edges as edge}
        {@const [x1, y1, x2, y2] = getEdgePosition(edge)}
-        <EdgeEl z={graphState.cameraPosition[2]} {x1} {y1} {x2} {y2} />
+        <EdgeEl
+          id={graph.getEdgeId(edge)}
+          z={graphState.cameraPosition[2]}
+          {x1}
+          {y1}
+          {x2}
+          {y2}
+        />
      {/each}

+      <Debug />
+
      <HTML transform={false}>
        <div
          role="tree"
@@ -195,9 +204,9 @@
          {/each}
        </div>
      </HTML>
-    {:else if graph.status === "loading"}
+    {:else if graph.status === 'loading'}
      <span>Loading</span>
-    {:else if graph.status === "error"}
+    {:else if graph.status === 'error'}
      <span>Error</span>
    {/if}
  </Canvas>
--- a/app/src/lib/graph-interface/graph/Wrapper.svelte
+++ b/app/src/lib/graph-interface/graph/Wrapper.svelte
@@ -11,7 +11,7 @@
  import { setupKeymaps } from "../keymaps";

  type Props = {
-    graph: Graph;
+    graph?: Graph;
    registry: NodeRegistry;

    settings?: Record<string, any>;
@@ -70,12 +70,6 @@
    }
  });

-  $effect(() => {
-    if (settingTypes && settings) {
-      manager.setSettings(settings);
-    }
-  });
-
  manager.on("settings", (_settings) => {
    settingTypes = { ...settingTypes, ..._settings.types };
    settings = _settings.values;
@@ -85,7 +79,11 @@

  manager.on("save", (save) => onsave?.(save));

-  manager.load(graph);
+  $effect(() => {
+    if (graph) {
+      manager.load(graph);
+    }
+  });
 </script>

 <GraphEl {keymap} />
--- a/app/src/lib/graph-interface/graph/drop.events.ts
+++ b/app/src/lib/graph-interface/graph/drop.events.ts
@@ -0,0 +1,107 @@
+import { GraphSchema, type NodeId } from '@nodarium/types';
+import type { GraphManager } from '../graph-manager.svelte';
+import type { GraphState } from '../graph-state.svelte';
+
+export class FileDropEventManager {
+  constructor(
+    private graph: GraphManager,
+    private state: GraphState
+  ) { }
+
+  handleFileDrop(event: DragEvent) {
+    event.preventDefault();
+    this.state.isDragging = false;
+    if (!event.dataTransfer) return;
+    const nodeId = event.dataTransfer.getData('data/node-id') as NodeId;
+    let mx = event.clientX - this.state.rect.x;
+    let my = event.clientY - this.state.rect.y;
+
+    if (nodeId) {
+      let nodeOffsetX = event.dataTransfer.getData('data/node-offset-x');
+      let nodeOffsetY = event.dataTransfer.getData('data/node-offset-y');
+      if (nodeOffsetX && nodeOffsetY) {
+        mx += parseInt(nodeOffsetX);
+        my += parseInt(nodeOffsetY);
+      }
+
+      let props = {};
+      let rawNodeProps = event.dataTransfer.getData('data/node-props');
+      if (rawNodeProps) {
+        try {
+          props = JSON.parse(rawNodeProps);
+        } catch (e) { }
+      }
+
+      const pos = this.state.projectScreenToWorld(mx, my);
+      this.graph.registry.load([nodeId]).then(() => {
+        this.graph.createNode({
+          type: nodeId,
+          props,
+          position: pos
+        });
+      });
+    } else if (event.dataTransfer.files.length) {
+      const file = event.dataTransfer.files[0];
+
+      if (file.type === 'application/wasm') {
+        const reader = new FileReader();
+        reader.onload = async (e) => {
+          const buffer = e.target?.result;
+          if (buffer?.constructor === ArrayBuffer) {
+            const nodeType = await this.graph.registry.register(buffer);
+
+            this.graph.createNode({
+              type: nodeType.id,
+              props: {},
+              position: this.state.projectScreenToWorld(mx, my)
+            });
+          }
+        };
+        reader.readAsArrayBuffer(file);
+      } else if (file.type === 'application/json') {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          const buffer = e.target?.result as ArrayBuffer;
+          if (buffer) {
+            const state = GraphSchema.parse(JSON.parse(buffer.toString()));
+            this.graph.load(state);
+          }
+        };
+        reader.readAsText(file);
+      }
+    }
+  }
+
+  handleMouseLeave() {
+    this.state.isDragging = false;
+    this.state.isPanning = false;
+  }
+
+  handleDragEnter(e: DragEvent) {
+    e.preventDefault();
+    this.state.isDragging = true;
+    this.state.isPanning = false;
+  }
+
+  handleDragOver(e: DragEvent) {
+    e.preventDefault();
+    this.state.isDragging = true;
+    this.state.isPanning = false;
+  }
+
+  handleDragEnd(e: DragEvent) {
+    e.preventDefault();
+    this.state.isDragging = true;
+    this.state.isPanning = false;
+  }
+
+  getEventListenerProps() {
+    return {
+      ondragenter: (ev: DragEvent) => this.handleDragEnter(ev),
+      ondragover: (ev: DragEvent) => this.handleDragOver(ev),
+      ondragexit: (ev: DragEvent) => this.handleDragEnd(ev),
+      ondrop: (ev: DragEvent) => this.handleFileDrop(ev),
+      onmouseleave: () => this.handleMouseLeave()
+    };
+  }
+}
--- a/app/src/lib/graph-interface/graph/edge.events.ts
+++ b/app/src/lib/graph-interface/graph/edge.events.ts
@@ -0,0 +1,110 @@
+import type { Box } from '@nodarium/types';
+import type { GraphManager } from '../graph-manager.svelte';
+import type { GraphState } from '../graph-state.svelte';
+import { distanceFromPointToSegment } from '../helpers';
+
+export class EdgeInteractionManager {
+  constructor(
+    private graph: GraphManager,
+    private state: GraphState
+  ) { }
+
+  private MIN_DISTANCE = 3;
+
+  private _boundingBoxes = new Map<string, Box>();
+
+  handleMouseDown() {
+    this._boundingBoxes.clear();
+
+    const possibleEdges = this.graph
+      .getPossibleDropOnEdges(this.state.activeNodeId)
+      .map(e => this.graph.getEdgeId(e));
+
+    const edges = this.state.getEdges();
+    for (const edge of edges) {
+      const edgeId = edge[0];
+      if (!possibleEdges.includes(edgeId)) {
+        edges.delete(edgeId);
+      }
+    }
+
+    for (const [edgeId, data] of edges) {
+      const points = data.points;
+      let minX = points[0].x + data.x1;
+      let maxX = points[0].x + data.x1;
+      let minY = points[0].z + data.y1;
+      let maxY = points[0].z + data.y1;
+
+      // Iterate through all points to find the true bounds
+      for (let i = 0; i < points.length; i++) {
+        const x = data.x1 + points[i].x;
+        const y = data.y1 + points[i].z;
+        if (x < minX) minX = x;
+        if (x > maxX) maxX = x;
+        if (y < minY) minY = y;
+        if (y > maxY) maxY = y;
+      }
+
+      const boundingBox = {
+        minX: minX - this.MIN_DISTANCE,
+        maxX: maxX + this.MIN_DISTANCE,
+        minY: minY - this.MIN_DISTANCE,
+        maxY: maxY + this.MIN_DISTANCE
+      };
+
+      this._boundingBoxes.set(edgeId, boundingBox);
+    }
+  }
+
+  handleMouseMove() {
+    const [mouseX, mouseY] = this.state.mousePosition;
+    const hoveredEdgeIds: string[] = [];
+
+    const edges = this.state.getEdges();
+
+    // Check if mouse is inside any bounding box
+    for (const [edgeId, box] of this._boundingBoxes) {
+      const isInside = mouseX >= box.minX
+        && mouseX <= box.maxX
+        && mouseY >= box.minY
+        && mouseY <= box.maxY;
+
+      if (isInside) {
+        hoveredEdgeIds.push(edgeId);
+      }
+    }
+
+    let hoveredEdgeId: string | null = null;
+    let hoveredEdgeDistance = Infinity;
+
+    const DENSITY = 10; // higher DENSITY = less points checked (yes density might not be the best name :-)
+    for (const edgeId of hoveredEdgeIds) {
+      const edge = edges.get(edgeId)!;
+      for (let i = 0; i < edge.points.length - DENSITY; i += DENSITY) {
+        const pointAx = edge.points[i].x + edge.x1;
+        const pointAy = edge.points[i].z + edge.y1;
+        const pointBx = edge.points[i + DENSITY].x + edge.x1;
+        const pointBy = edge.points[i + DENSITY].z + edge.y1;
+        const distance = distanceFromPointToSegment(pointAx, pointAy, pointBx, pointBy, mouseX, mouseY);
+        if (distance < this.MIN_DISTANCE) {
+          if (distance < hoveredEdgeDistance) {
+            hoveredEdgeDistance = distance;
+            hoveredEdgeId = edgeId;
+          }
+        }
+      }
+    }
+
+    this.state.hoveredEdgeId = hoveredEdgeId;
+  }
+
+  handleMouseUp() {
+    if (this.state.hoveredEdgeId) {
+      const edge = this.graph.getEdgeById(this.state.hoveredEdgeId);
+      if (edge) {
+        this.graph.dropNodeOnEdge(this.state.activeNodeId, edge);
+      }
+      this.state.hoveredEdgeId = null;
+    }
+  }
+}
--- a/app/src/lib/graph-interface/graph/mouse.events.ts
+++ b/app/src/lib/graph-interface/graph/mouse.events.ts
@@ -1,127 +1,23 @@
-import { GraphSchema, type NodeId, type NodeInstance } from "@nodarium/types";
-import type { GraphManager } from "../graph-manager.svelte";
-import type { GraphState } from "../graph-state.svelte";
-import { animate, lerp } from "$lib/helpers";
-import { snapToGrid as snapPointToGrid } from "../helpers";
-import { maxZoom, minZoom, zoomSpeed } from "./constants";
-
-
-export class FileDropEventManager {
-
-  constructor(
-    private graph: GraphManager,
-    private state: GraphState
-  ) { }
-
-  handleFileDrop(event: DragEvent) {
-    event.preventDefault();
-    this.state.isDragging = false;
-    if (!event.dataTransfer) return;
-    const nodeId = event.dataTransfer.getData("data/node-id") as NodeId;
-    let mx = event.clientX - this.state.rect.x;
-    let my = event.clientY - this.state.rect.y;
-
-    if (nodeId) {
-      let nodeOffsetX = event.dataTransfer.getData("data/node-offset-x");
-      let nodeOffsetY = event.dataTransfer.getData("data/node-offset-y");
-      if (nodeOffsetX && nodeOffsetY) {
-        mx += parseInt(nodeOffsetX);
-        my += parseInt(nodeOffsetY);
-      }
-
-      let props = {};
-      let rawNodeProps = event.dataTransfer.getData("data/node-props");
-      if (rawNodeProps) {
-        try {
-          props = JSON.parse(rawNodeProps);
-        } catch (e) { }
-      }
-
-      const pos = this.state.projectScreenToWorld(mx, my);
-      this.graph.registry.load([nodeId]).then(() => {
-        this.graph.createNode({
-          type: nodeId,
-          props,
-          position: pos,
-        });
-      });
-    } else if (event.dataTransfer.files.length) {
-      const file = event.dataTransfer.files[0];
-
-      if (file.type === "application/wasm") {
-        const reader = new FileReader();
-        reader.onload = async (e) => {
-          const buffer = e.target?.result;
-          if (buffer?.constructor === ArrayBuffer) {
-            const nodeType = await this.graph.registry.register(buffer);
-
-            this.graph.createNode({
-              type: nodeType.id,
-              props: {},
-              position: this.state.projectScreenToWorld(mx, my),
-            });
-          }
-        };
-        reader.readAsArrayBuffer(file);
-      } else if (file.type === "application/json") {
-        const reader = new FileReader();
-        reader.onload = (e) => {
-          const buffer = e.target?.result as ArrayBuffer;
-          if (buffer) {
-            const state = GraphSchema.parse(JSON.parse(buffer.toString()));
-            this.graph.load(state);
-          }
-        };
-        reader.readAsText(file);
-      }
-    }
-  }
-
-  handleMouseLeave() {
-    this.state.isDragging = false;
-    this.state.isPanning = false;
-  }
-
-  handleDragEnter(e: DragEvent) {
-    e.preventDefault();
-    this.state.isDragging = true;
-    this.state.isPanning = false;
-  }
-
-  handleDragOver(e: DragEvent) {
-    e.preventDefault();
-    this.state.isDragging = true;
-    this.state.isPanning = false;
-  }
-
-  handleDragEnd(e: DragEvent) {
-    e.preventDefault();
-    this.state.isDragging = true;
-    this.state.isPanning = false;
-  }
-
-  getEventListenerProps() {
-    return {
-      ondragenter: (ev: DragEvent) => this.handleDragEnter(ev),
-      ondragover: (ev: DragEvent) => this.handleDragOver(ev),
-      ondragexit: (ev: DragEvent) => this.handleDragEnd(ev),
-      ondrop: (ev: DragEvent) => this.handleFileDrop(ev),
-      onmouseleave: () => this.handleMouseLeave(),
-    }
-  }
-}
-
+import { animate, lerp } from '$lib/helpers';
+import { type NodeInstance } from '@nodarium/types';
+import type { GraphManager } from '../graph-manager.svelte';
+import { type GraphState } from '../graph-state.svelte';
+import { snapToGrid as snapPointToGrid } from '../helpers';
+import { maxZoom, minZoom, zoomSpeed } from './constants';
+import { EdgeInteractionManager } from './edge.events';

 export class MouseEventManager {
-
+  edgeInteractionManager: EdgeInteractionManager;

  constructor(
    private graph: GraphManager,
    private state: GraphState
-  ) { }
+  ) {
+    this.edgeInteractionManager = new EdgeInteractionManager(graph, state);
+  }

-
-  handleMouseUp(event: MouseEvent) {
+  handleWindowMouseUp(event: MouseEvent) {
+    this.edgeInteractionManager.handleMouseUp();
    this.state.isPanning = false;
    if (!this.state.mouseDown) return;

@@ -145,25 +41,23 @@ export class MouseEventManager {
        const snapLevel = this.state.getSnapLevel();
        activeNode.position[0] = snapPointToGrid(
          activeNode?.state?.x ?? activeNode.position[0],
-          5 / snapLevel,
+          5 / snapLevel
        );
        activeNode.position[1] = snapPointToGrid(
          activeNode?.state?.y ?? activeNode.position[1],
-          5 / snapLevel,
+          5 / snapLevel
        );
      } else {
        activeNode.position[0] = activeNode?.state?.x ?? activeNode.position[0];
        activeNode.position[1] = activeNode?.state?.y ?? activeNode.position[1];
      }
      const nodes = [
-        ...[...(this.state.selectedNodes?.values() || [])].map((id) =>
-          this.graph.getNode(id),
-        ),
+        ...[...(this.state.selectedNodes?.values() || [])].map((id) => this.graph.getNode(id))
      ] as NodeInstance[];

      const vec = [
        activeNode.position[0] - (activeNode?.state.x || 0),
-        activeNode.position[1] - (activeNode?.state.y || 0),
+        activeNode.position[1] - (activeNode?.state.y || 0)
      ];

      for (const node of nodes) {
@@ -179,9 +73,9 @@ export class MouseEventManager {
      animate(500, (a: number) => {
        for (const node of nodes) {
          if (
-            node?.state &&
-            node.state["x"] !== undefined &&
-            node.state["y"] !== undefined
+            node?.state
+            && node.state['x'] !== undefined
+            && node.state['y'] !== undefined
          ) {
            node.state.x = lerp(node.state.x, node.position[0], a);
            node.state.y = lerp(node.state.y, node.position[1], a);
@@ -195,24 +89,24 @@ export class MouseEventManager {
      this.graph.save();
    } else if (this.state.hoveredSocket && this.state.activeSocket) {
      if (
-        typeof this.state.hoveredSocket.index === "number" &&
-        typeof this.state.activeSocket.index === "string"
+        typeof this.state.hoveredSocket.index === 'number'
+        && typeof this.state.activeSocket.index === 'string'
      ) {
        this.graph.createEdge(
          this.state.hoveredSocket.node,
          this.state.hoveredSocket.index || 0,
          this.state.activeSocket.node,
-          this.state.activeSocket.index,
+          this.state.activeSocket.index
        );
      } else if (
-        typeof this.state.activeSocket.index == "number" &&
-        typeof this.state.hoveredSocket.index === "string"
+        typeof this.state.activeSocket.index == 'number'
+        && typeof this.state.hoveredSocket.index === 'string'
      ) {
        this.graph.createEdge(
          this.state.activeSocket.node,
          this.state.activeSocket.index || 0,
          this.state.hoveredSocket.node,
-          this.state.hoveredSocket.index,
+          this.state.hoveredSocket.index
        );
      }
      this.graph.save();
@@ -220,18 +114,18 @@ export class MouseEventManager {
      // Handle automatic adding of nodes on ctrl+mouseUp
      this.state.edgeEndPosition = [
        this.state.mousePosition[0],
-        this.state.mousePosition[1],
+        this.state.mousePosition[1]
      ];

-      if (typeof this.state.activeSocket.index === "number") {
+      if (typeof this.state.activeSocket.index === 'number') {
        this.state.addMenuPosition = [
          this.state.mousePosition[0],
-          this.state.mousePosition[1] - 25 / this.state.cameraPosition[2],
+          this.state.mousePosition[1] - 25 / this.state.cameraPosition[2]
        ];
      } else {
        this.state.addMenuPosition = [
          this.state.mousePosition[0] - 155 / this.state.cameraPosition[2],
-          this.state.mousePosition[1] - 25 / this.state.cameraPosition[2],
+          this.state.mousePosition[1] - 25 / this.state.cameraPosition[2]
        ];
      }
      return;
@@ -239,11 +133,11 @@ export class MouseEventManager {

    // check if camera moved
    if (
-      clickedNodeId === -1 &&
-      !this.state.boxSelection &&
-      this.state.cameraDown[0] === this.state.cameraPosition[0] &&
-      this.state.cameraDown[1] === this.state.cameraPosition[1] &&
-      this.state.isBodyFocused()
+      clickedNodeId === -1
+      && !this.state.boxSelection
+      && this.state.cameraDown[0] === this.state.cameraPosition[0]
+      && this.state.cameraDown[1] === this.state.cameraPosition[1]
+      && this.state.isBodyFocused()
    ) {
      this.state.activeNodeId = -1;
      this.state.clearSelection();
@@ -257,16 +151,27 @@ export class MouseEventManager {
    this.state.addMenuPosition = null;
  }

+  handleContextMenu(event: MouseEvent) {
+    if (!this.state.addMenuPosition) {
+      event.preventDefault();
+      this.state.openNodePalette();
+    }
+  }

  handleMouseDown(event: MouseEvent) {
+    // Right click
+    if (event.button === 2) {
+      return;
+    }
+
    if (this.state.mouseDown) return;
    this.state.edgeEndPosition = null;

    if (event.target instanceof HTMLElement) {
      if (
-        event.target.nodeName !== "CANVAS" &&
-        !event.target.classList.contains("node") &&
-        !event.target.classList.contains("content")
+        event.target.nodeName !== 'CANVAS'
+        && !event.target.classList.contains('node')
+        && !event.target.classList.contains('content')
      ) {
        return;
      }
@@ -288,7 +193,7 @@ export class MouseEventManager {
        this.state.activeNodeId = clickedNodeId;
        // if the selected node is the same as the clicked node
      } else if (this.state.activeNodeId === clickedNodeId) {
-        //$activeNodeId = -1;
+        // $activeNodeId = -1;
        // if the clicked node is different from the selected node and secondary
      } else if (event.ctrlKey) {
        this.state.selectedNodes.add(this.state.activeNodeId);
@@ -312,6 +217,7 @@ export class MouseEventManager {
        this.state.activeNodeId = clickedNodeId;
        this.state.clearSelection();
      }
+      this.edgeInteractionManager.handleMouseDown();
    } else if (event.ctrlKey) {
      this.state.boxSelection = true;
    }
@@ -335,8 +241,7 @@ export class MouseEventManager {
    this.state.edgeEndPosition = null;
  }

-
-  handleMouseMove(event: MouseEvent) {
+  handleWindowMouseMove(event: MouseEvent) {
    let mx = event.clientX - this.state.rect.x;
    let my = event.clientY - this.state.rect.y;

@@ -351,8 +256,8 @@ export class MouseEventManager {
      let _socket;
      for (const socket of this.state.possibleSockets) {
        const dist = Math.sqrt(
-          (socket.position[0] - this.state.mousePosition[0]) ** 2 +
-          (socket.position[1] - this.state.mousePosition[1]) ** 2,
+          (socket.position[0] - this.state.mousePosition[0]) ** 2
+            + (socket.position[1] - this.state.mousePosition[1]) ** 2
        );
        if (dist < smallestDist) {
          smallestDist = dist;
@@ -375,7 +280,7 @@ export class MouseEventManager {
      event.stopPropagation();
      const mouseD = this.state.projectScreenToWorld(
        this.state.mouseDown[0],
-        this.state.mouseDown[1],
+        this.state.mouseDown[1]
      );
      const x1 = Math.min(mouseD[0], this.state.mousePosition[0]);
      const x2 = Math.max(mouseD[0], this.state.mousePosition[0]);
@@ -397,6 +302,7 @@ export class MouseEventManager {

    // here we are handling dragging of nodes
    if (this.state.activeNodeId !== -1 && this.state.mouseDownNodeId !== -1) {
+      this.edgeInteractionManager.handleMouseMove();
      const node = this.graph.getNode(this.state.activeNodeId);
      if (!node || event.buttons !== 1) return;

@@ -405,10 +311,8 @@ export class MouseEventManager {
      const oldX = node.state.downX || 0;
      const oldY = node.state.downY || 0;

-      let newX =
-        oldX + (mx - this.state.mouseDown[0]) / this.state.cameraPosition[2];
-      let newY =
-        oldY + (my - this.state.mouseDown[1]) / this.state.cameraPosition[2];
+      let newX = oldX + (mx - this.state.mouseDown[0]) / this.state.cameraPosition[2];
+      let newY = oldY + (my - this.state.mouseDown[1]) / this.state.cameraPosition[2];

      if (event.ctrlKey) {
        const snapLevel = this.state.getSnapLevel();
@@ -448,23 +352,19 @@ export class MouseEventManager {

    // here we are handling panning of camera
    this.state.isPanning = true;
-    let newX =
-      this.state.cameraDown[0] -
-      (mx - this.state.mouseDown[0]) / this.state.cameraPosition[2];
-    let newY =
-      this.state.cameraDown[1] -
-      (my - this.state.mouseDown[1]) / this.state.cameraPosition[2];
+    let newX = this.state.cameraDown[0]
+      - (mx - this.state.mouseDown[0]) / this.state.cameraPosition[2];
+    let newY = this.state.cameraDown[1]
+      - (my - this.state.mouseDown[1]) / this.state.cameraPosition[2];

    this.state.cameraPosition[0] = newX;
    this.state.cameraPosition[1] = newY;
  }

-
  handleMouseScroll(event: WheelEvent) {
-    const bodyIsFocused =
-      document.activeElement === document.body ||
-      document.activeElement === this.state.wrapper ||
-      document?.activeElement?.id === "graph";
+    const bodyIsFocused = document.activeElement === document.body
+      || document.activeElement === this.state.wrapper
+      || document?.activeElement?.id === 'graph';
    if (!bodyIsFocused) return;

    // Define zoom speed and clamp it between -1 and 1
@@ -479,21 +379,19 @@ export class MouseEventManager {
        maxZoom,
        isNegative
          ? this.state.cameraPosition[2] / delta
-          : this.state.cameraPosition[2] * delta,
-      ),
+          : this.state.cameraPosition[2] * delta
+      )
    );

    // Calculate the ratio of the new zoom to the original zoom
    const zoomRatio = newZoom / this.state.cameraPosition[2];

    // Update camera position and zoom level
-    this.state.cameraPosition[0] = this.state.mousePosition[0] -
-      (this.state.mousePosition[0] - this.state.cameraPosition[0]) /
-      zoomRatio;
-    this.state.cameraPosition[1] = this.state.mousePosition[1] -
-      (this.state.mousePosition[1] - this.state.cameraPosition[1]) /
-      zoomRatio,
-      this.state.cameraPosition[2] = newZoom;
+    this.state.cameraPosition[0] = this.state.mousePosition[0]
+      - (this.state.mousePosition[0] - this.state.cameraPosition[0])
+        / zoomRatio;
+    this.state.cameraPosition[1] = this.state.mousePosition[1]
+      - (this.state.mousePosition[1] - this.state.cameraPosition[1])
+        / zoomRatio, this.state.cameraPosition[2] = newZoom;
  }
-
 }
--- a/app/src/lib/graph-interface/helpers/index.ts
+++ b/app/src/lib/graph-interface/helpers/index.ts
@@ -8,7 +8,7 @@ export function lerp(a: number, b: number, t: number) {

 export function animate(
  duration: number,
-  callback: (progress: number) => void | false,
+  callback: (progress: number) => void | false
 ) {
  const start = performance.now();
  const loop = (time: number) => {
@@ -33,41 +33,37 @@ export function createNodePath({
  cornerBottom = 0,
  leftBump = false,
  rightBump = false,
-  aspectRatio = 1,
+  aspectRatio = 1
 } = {}) {
  return `M0,${cornerTop}
-      ${
-        cornerTop
-          ? ` V${cornerTop}
+      ${cornerTop
+      ? ` V${cornerTop}
              Q0,0 ${cornerTop * aspectRatio},0
              H${100 - cornerTop * aspectRatio}
              Q100,0  100,${cornerTop}
            `
-          : ` V0
+      : ` V0
              H100
            `
-      }
+    }
      V${y - height / 2}
-      ${
-        rightBump
-          ? ` C${100 - depth},${y - height / 2} ${100 - depth},${y + height / 2} 100,${y + height / 2}`
-          : ` H100`
-      }
-      ${
-        cornerBottom
-          ? ` V${100 - cornerBottom}
+      ${rightBump
+      ? ` C${100 - depth},${y - height / 2} ${100 - depth},${y + height / 2} 100,${y + height / 2}`
+      : ` H100`
+    }
+      ${cornerBottom
+      ? ` V${100 - cornerBottom}
              Q100,100 ${100 - cornerBottom * aspectRatio},100
              H${cornerBottom * aspectRatio}
              Q0,100  0,${100 - cornerBottom}
            `
-          : `${leftBump ? `V100 H0` : `V100`}`
-      }
-      ${
-        leftBump
-          ? ` V${y + height / 2} C${depth},${y + height / 2} ${depth},${y - height / 2} 0,${y - height / 2}`
-          : ` H0`
-      }
-      Z`.replace(/\s+/g, " ");
+      : `${leftBump ? `V100 H0` : `V100`}`
+    }
+      ${leftBump
+      ? ` V${y + height / 2} C${depth},${y + height / 2} ${depth},${y - height / 2} 0,${y - height / 2}`
+      : ` H0`
+    }
+      Z`.replace(/\s+/g, ' ');
 }

 export const debounce = (fn: Function, ms = 300) => {
@@ -78,14 +74,13 @@ export const debounce = (fn: Function, ms = 300) => {
  };
 };

-export const clone: <T>(v: T) => T =
-  "structedClone" in globalThis
-    ? globalThis.structuredClone
-    : (obj) => JSON.parse(JSON.stringify(obj));
+export const clone: <T>(v: T) => T = 'structedClone' in globalThis
+  ? globalThis.structuredClone
+  : (obj) => JSON.parse(JSON.stringify(obj));

 export function withSubComponents<A, B extends Record<string, any>>(
  component: A,
-  subcomponents: B,
+  subcomponents: B
 ): A & B {
  Object.keys(subcomponents).forEach((key) => {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -93,3 +88,27 @@ export function withSubComponents<A, B extends Record<string, any>>(
  });
  return component as A & B;
 }
+
+export function distanceFromPointToSegment(
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+  x0: number,
+  y0: number
+): number {
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+
+  if (dx === 0 && dy === 0) {
+    return Math.hypot(x0 - x1, y0 - y1);
+  }
+
+  const t = ((x0 - x1) * dx + (y0 - y1) * dy) / (dx * dx + dy * dy);
+  const clampedT = Math.max(0, Math.min(1, t));
+
+  const px = x1 + clampedT * dx;
+  const py = y1 + clampedT * dy;
+
+  return Math.hypot(x0 - px, y0 - py);
+}
--- a/app/src/lib/graph-interface/keymaps.ts
+++ b/app/src/lib/graph-interface/keymaps.ts
@@ -1,16 +1,15 @@
-import { animate, lerp } from "$lib/helpers";
-import type { createKeyMap } from "$lib/helpers/createKeyMap";
-import FileSaver from "file-saver";
-import type { GraphManager } from "./graph-manager.svelte";
-import type { GraphState } from "./graph-state.svelte";
+import { animate, lerp } from '$lib/helpers';
+import type { createKeyMap } from '$lib/helpers/createKeyMap';
+import { panelState } from '$lib/sidebar/PanelState.svelte';
+import FileSaver from 'file-saver';
+import type { GraphManager } from './graph-manager.svelte';
+import type { GraphState } from './graph-state.svelte';

 type Keymap = ReturnType<typeof createKeyMap>;
 export function setupKeymaps(keymap: Keymap, graph: GraphManager, graphState: GraphState) {
-
-
  keymap.addShortcut({
-    key: "l",
-    description: "Select linked nodes",
+    key: 'l',
+    description: 'Select linked nodes',
    callback: () => {
      const activeNode = graph.getNode(graphState.activeNodeId);
      if (activeNode) {
@@ -20,56 +19,52 @@ export function setupKeymaps(keymap: Keymap, graph: GraphManager, graphState: Gr
          graphState.selectedNodes.add(node.id);
        }
      }
-    },
+    }
  });

-
  keymap.addShortcut({
-    key: "?",
-    description: "Toggle Help",
+    key: '?',
+    description: 'Toggle Help',
    callback: () => {
-      // TODO: fix this
-      // showHelp = !showHelp;
-    },
+      panelState.setActivePanel('shortcuts');
+    }
  });

  keymap.addShortcut({
-    key: "c",
+    key: 'c',
    ctrl: true,
-    description: "Copy active nodes",
-    callback: () => graphState.copyNodes(),
+    description: 'Copy active nodes',
+    callback: () => graphState.copyNodes()
  });

  keymap.addShortcut({
-    key: "v",
+    key: 'v',
    ctrl: true,
-    description: "Paste nodes",
-    callback: () => graphState.pasteNodes(),
+    description: 'Paste nodes',
+    callback: () => graphState.pasteNodes()
  });

  keymap.addShortcut({
-    key: "Escape",
-    description: "Deselect nodes",
+    key: 'Escape',
+    description: 'Deselect nodes',
    callback: () => {
      graphState.activeNodeId = -1;
      graphState.clearSelection();
      graphState.edgeEndPosition = null;
      (document.activeElement as HTMLElement)?.blur();
-    },
+    }
  });

  keymap.addShortcut({
-    key: "A",
+    key: 'A',
    shift: true,
-    description: "Add new Node",
-    callback: () => {
-      graphState.addMenuPosition = [graphState.mousePosition[0], graphState.mousePosition[1]];
-    },
+    description: 'Add new Node',
+    callback: () => graphState.openNodePalette()
  });

  keymap.addShortcut({
-    key: ".",
-    description: "Center camera",
+    key: '.',
+    description: 'Center camera',
    callback: () => {
      if (!graphState.isBodyFocused()) return;

@@ -90,67 +85,67 @@ export function setupKeymaps(keymap: Keymap, graph: GraphManager, graphState: Gr
      animate(500, (a: number) => {
        graphState.cameraPosition[0] = lerp(camX, average[0], ease(a));
        graphState.cameraPosition[1] = lerp(camY, average[1], ease(a));
-        graphState.cameraPosition[2] = lerp(camZ, 2, ease(a))
+        graphState.cameraPosition[2] = lerp(camZ, 2, ease(a));
        if (graphState.mouseDown) return false;
      });
-    },
+    }
  });

  keymap.addShortcut({
-    key: "a",
+    key: 'a',
    ctrl: true,
    preventDefault: true,
-    description: "Select all nodes",
+    description: 'Select all nodes',
    callback: () => {
      if (!graphState.isBodyFocused()) return;
      for (const node of graph.nodes.keys()) {
        graphState.selectedNodes.add(node);
      }
-    },
+    }
  });

  keymap.addShortcut({
-    key: "z",
+    key: 'z',
    ctrl: true,
-    description: "Undo",
+    description: 'Undo',
    callback: () => {
      if (!graphState.isBodyFocused()) return;
      graph.undo();
      for (const node of graph.nodes.values()) {
        graphState.updateNodePosition(node);
      }
-    },
+    }
  });

  keymap.addShortcut({
-    key: "y",
+    key: 'y',
    ctrl: true,
-    description: "Redo",
+    description: 'Redo',
    callback: () => {
      graph.redo();
      for (const node of graph.nodes.values()) {
        graphState.updateNodePosition(node);
      }
-    },
+    }
  });

  keymap.addShortcut({
-    key: "s",
+    key: 's',
    ctrl: true,
-    description: "Save",
+    description: 'Save',
    preventDefault: true,
    callback: () => {
      const state = graph.serialize();
      const blob = new Blob([JSON.stringify(state)], {
-        type: "application/json;charset=utf-8",
+        type: 'application/json;charset=utf-8'
      });
-      FileSaver.saveAs(blob, "nodarium-graph.json");
-    },
+      FileSaver.saveAs(blob, 'nodarium-graph.json');
+    }
  });

  keymap.addShortcut({
-    key: ["Delete", "Backspace", "x"],
-    description: "Delete selected nodes",
+    key: ['Delete', 'Backspace', 'x'],
+    description: 'Delete selected nodes',
    callback: (event) => {
      if (!graphState.isBodyFocused()) return;
      graph.startUndoGroup();
@@ -171,20 +166,18 @@ export function setupKeymaps(keymap: Keymap, graph: GraphManager, graphState: Gr
        graphState.clearSelection();
      }
      graph.saveUndoGroup();
-    },
+    }
  });

  keymap.addShortcut({
-    key: "f",
-    description: "Smart Connect Nodes",
+    key: 'f',
+    description: 'Smart Connect Nodes',
    callback: () => {
      const nodes = [...graphState.selectedNodes.values()]
        .map((g) => graph.getNode(g))
        .filter((n) => !!n);
      const edge = graph.smartConnect(nodes[0], nodes[1]);
      if (!edge) graph.smartConnect(nodes[1], nodes[0]);
-    },
+    }
  });
-
-
 }
--- a/app/src/lib/node-registry.ts
+++ b/app/src/lib/node-registry.ts
@@ -1,9 +1,9 @@
-import { createWasmWrapper } from "@nodarium/utils";
-import fs from "fs/promises";
-import path from "path";
+import { createWasmWrapper } from '@nodarium/utils';
+import fs from 'fs/promises';
+import path from 'path';

 export async function getWasm(id: `${string}/${string}/${string}`) {
-  const filePath = path.resolve(`../nodes/${id}/pkg/index_bg.wasm`);
+  const filePath = path.resolve(`./static/nodes/${id}`);

  try {
    await fs.access(filePath);
@@ -36,12 +36,12 @@ export async function getNode(id: `${string}/${string}/${string}`) {
 }

 export async function getCollectionNodes(userId: `${string}/${string}`) {
-  const nodes = await fs.readdir(path.resolve(`../nodes/${userId}`));
+  const nodes = await fs.readdir(path.resolve(`./static/nodes/${userId}`));
  return nodes
-    .filter((n) => n !== "pkg" && n !== ".template")
+    .filter((n) => n !== 'pkg' && n !== '.template')
    .map((n) => {
      return {
-        id: `${userId}/${n}`,
+        id: `${userId}/${n}`
      };
    });
 }
@@ -50,20 +50,20 @@ export async function getCollection(userId: `${string}/${string}`) {
  const nodes = await getCollectionNodes(userId);
  return {
    id: userId,
-    nodes,
+    nodes
  };
 }

 export async function getUserCollections(userId: string) {
-  const collections = await fs.readdir(path.resolve(`../nodes/${userId}`));
+  const collections = await fs.readdir(path.resolve(`./static/nodes/${userId}`));
  return Promise.all(
    collections.map(async (n) => {
      const nodes = await getCollectionNodes(`${userId}/${n}`);
      return {
        id: `${userId}/${n}`,
-        nodes,
+        nodes
      };
-    }),
+    })
  );
 }

@@ -71,20 +71,20 @@ export async function getUser(userId: string) {
  const collections = await getUserCollections(userId);
  return {
    id: userId,
-    collections,
+    collections
  };
 }

 export async function getUsers() {
-  const nodes = await fs.readdir(path.resolve("../nodes"));
+  const nodes = await fs.readdir(path.resolve('./static/nodes'));
  const users = await Promise.all(
    nodes.map(async (n) => {
      const collections = await getUserCollections(n);
      return {
        id: n,
-        collections,
+        collections
      };
-    }),
+    })
  );
  return users;
 }
--- a/app/src/lib/project-manager/ProjectManager.svelte
+++ b/app/src/lib/project-manager/ProjectManager.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+  import type { Graph } from "$lib/types";
+  import { defaultPlant, plant, lottaFaces } from "$lib/graph-templates";
+  import type { ProjectManager } from "./project-manager.svelte";
+
+  const { projectManager } = $props<{ projectManager: ProjectManager }>();
+
+  let showNewProject = $state(false);
+  let newProjectName = $state("");
+  let selectedTemplate = $state("defaultPlant");
+
+  const templates = [
+    {
+      name: "Default Plant",
+      value: "defaultPlant",
+      graph: defaultPlant as unknown as Graph,
+    },
+    { name: "Plant", value: "plant", graph: plant as unknown as Graph },
+    {
+      name: "Lotta Faces",
+      value: "lottaFaces",
+      graph: lottaFaces as unknown as Graph,
+    },
+  ];
+
+  function handleCreate() {
+    const template =
+      templates.find((t) => t.value === selectedTemplate) || templates[0];
+    projectManager.handleCreateProject(template.graph, newProjectName);
+    newProjectName = "";
+    showNewProject = false;
+  }
+</script>
+
+<header
+  class="flex justify-between px-4 h-[70px] border-b-1 border-[var(--outline)] items-center"
+>
+  <h3>Project</h3>
+  <button
+    class="px-3 py-1 bg-[var(--layer-0)] rounded"
+    onclick={() => (showNewProject = !showNewProject)}
+  >
+    New
+  </button>
+</header>
+
+{#if showNewProject}
+  <div class="flex flex-col px-4 py-3 border-b-1 border-[var(--outline)] gap-2">
+    <input
+      type="text"
+      bind:value={newProjectName}
+      placeholder="Project name"
+      class="w-full px-2 py-2 bg-gray-800 border border-gray-700 rounded"
+      onkeydown={(e) => e.key === "Enter" && handleCreate()}
+    />
+    <select
+      bind:value={selectedTemplate}
+      class="w-full px-2 py-2 bg-gray-800 border border-gray-700 rounded"
+    >
+      {#each templates as template}
+        <option value={template.value}>{template.name}</option>
+      {/each}
+    </select>
+    <button
+      class="cursor-pointer self-end px-3 py-1 bg-blue-600 rounded"
+      onclick={() => handleCreate()}
+    >
+      Create
+    </button>
+  </div>
+{/if}
+
+<div class="p-4 text-white min-h-screen">
+  {#if projectManager.loading}
+    <p>Loading...</p>
+  {/if}
+
+  <ul class="space-y-2">
+    {#each projectManager.projects as project (project.id)}
+      <li>
+        <div
+          class="w-full text-left px-3 py-2 rounded cursor-pointer {projectManager
+            .activeProjectId.value === project.id
+            ? 'bg-blue-600'
+            : 'bg-gray-800 hover:bg-gray-700'}"
+          onclick={() => projectManager.handleSelectProject(project.id!)}
+          role="button"
+          tabindex="0"
+          onkeydown={(e) =>
+            e.key === "Enter" &&
+            projectManager.handleSelectProject(project.id!)}
+        >
+          <div class="flex justify-between items-center">
+            <span>{project.meta?.title || "Untitled"}</span>
+            <button
+              class="text-red-400 hover:text-red-300"
+              onclick={() => {
+                projectManager.handleDeleteProject(project.id!);
+              }}
+            >
+              ×
+            </button>
+          </div>
+        </div>
+      </li>
+    {/each}
+  </ul>
+</div>
--- a/app/src/lib/project-manager/project-database.svelte.ts
+++ b/app/src/lib/project-manager/project-database.svelte.ts
@@ -0,0 +1,52 @@
+import type { Graph } from '@nodarium/types';
+import { type IDBPDatabase, openDB } from 'idb';
+
+export interface GraphDatabase {
+  projects: Graph;
+}
+
+const DB_NAME = 'nodarium-graphs';
+const DB_VERSION = 1;
+const STORE_NAME = 'graphs';
+
+let dbPromise: Promise<IDBPDatabase<GraphDatabase>> | null = null;
+
+export function getDB() {
+  if (!dbPromise) {
+    dbPromise = openDB<GraphDatabase>(DB_NAME, DB_VERSION, {
+      upgrade(db) {
+        if (!db.objectStoreNames.contains(STORE_NAME)) {
+          db.createObjectStore(STORE_NAME, { keyPath: 'id' });
+        }
+      }
+    });
+  }
+  return dbPromise;
+}
+
+export async function getGraph(id: number): Promise<Graph | undefined> {
+  const db = await getDB();
+  return db.get(STORE_NAME, id);
+}
+
+export async function saveGraph(graph: Graph): Promise<Graph> {
+  const db = await getDB();
+  graph.meta = { ...graph.meta, lastModified: new Date().toISOString() };
+  await db.put(STORE_NAME, graph);
+  return graph;
+}
+
+export async function deleteGraph(id: number): Promise<void> {
+  const db = await getDB();
+  await db.delete(STORE_NAME, id);
+}
+
+export async function getGraphs(): Promise<Graph[]> {
+  const db = await getDB();
+  return db.getAll(STORE_NAME);
+}
+
+export async function clear(): Promise<void> {
+  const db = await getDB();
+  return db.clear(STORE_NAME);
+}
--- a/app/src/lib/project-manager/project-manager.svelte.ts
+++ b/app/src/lib/project-manager/project-manager.svelte.ts
@@ -0,0 +1,85 @@
+import * as templates from '$lib/graph-templates';
+import { localState } from '$lib/helpers/localState.svelte';
+import type { Graph } from '@nodarium/types';
+import * as db from './project-database.svelte';
+
+export class ProjectManager {
+  public graph = $state<Graph>();
+  private projects = $state<Graph[]>([]);
+  private activeProjectId = localState<number | undefined>(
+    'node.activeProjectId',
+    undefined
+  );
+  public readonly loading = $derived(this.graph?.id !== this.activeProjectId.value);
+
+  constructor() {
+    this.init();
+  }
+
+  async saveGraph(g: Graph) {
+    db.saveGraph(g);
+  }
+
+  private async init() {
+    await db.getDB();
+    this.projects = await db.getGraphs();
+
+    if (this.activeProjectId.value !== undefined) {
+      let loadedGraph = await db.getGraph(this.activeProjectId.value);
+      if (loadedGraph) {
+        this.graph = loadedGraph;
+      }
+    }
+
+    if (!this.graph) {
+      if (this.projects?.length && this.projects[0]?.id !== undefined) {
+        this.graph = this.projects[0];
+        this.activeProjectId.value = this.graph.id;
+      }
+    }
+
+    if (!this.graph) {
+      this.handleCreateProject();
+    }
+  }
+
+  public handleCreateProject(
+    g: Graph = templates.defaultPlant as unknown as Graph,
+    title: string = 'New Project'
+  ) {
+    let id = g?.id || 0;
+    while (this.projects.find((p) => p.id === id)) {
+      id++;
+    }
+
+    g.id = id;
+    if (!g.meta) g.meta = {};
+    if (!g.meta.title) g.meta.title = title;
+
+    db.saveGraph(g);
+    this.projects = [...this.projects, g];
+    this.handleSelectProject(id);
+  }
+
+  public async handleDeleteProject(projectId: number) {
+    await db.deleteGraph(projectId);
+    if (this.projects.length === 1) {
+      this.graph = undefined;
+      this.projects = [];
+    } else {
+      this.projects = this.projects.filter((p) => p.id !== projectId);
+      const id = this.projects[0].id;
+      if (id !== undefined) {
+        this.handleSelectProject(id);
+      }
+    }
+  }
+
+  public async handleSelectProject(id: number) {
+    if (this.activeProjectId.value !== id) {
+      const project = await db.getGraph(id);
+      this.graph = project;
+      this.activeProjectId.value = id;
+    }
+  }
+}
--- a/app/src/lib/result-viewer/Scene.svelte
+++ b/app/src/lib/result-viewer/Scene.svelte
@@ -92,13 +92,6 @@
      geo.attributes.position.array[i + 2],
    ] as Vector3Tuple;
  }
-
-  // $effect(() => {
-  //   console.log({
-  //     geometries: $state.snapshot(geometries),
-  //     indices: appSettings.value.debug.showIndices,
-  //   });
-  // });
 </script>

 <Camera {center} {centerCamera} />
--- a/app/src/lib/result-viewer/Viewer.svelte
+++ b/app/src/lib/result-viewer/Viewer.svelte
@@ -95,12 +95,14 @@
  <SmallPerformanceViewer {fps} store={perf} />
 {/if}

-<Canvas>
-  <Scene
-    bind:this={sceneComponent}
-    {lines}
-    {centerCamera}
-    bind:scene
-    bind:fps
-  />
-</Canvas>
+<div style="height: 100%">
+  <Canvas>
+    <Scene
+      bind:this={sceneComponent}
+      {lines}
+      {centerCamera}
+      bind:scene
+      bind:fps
+    />
+  </Canvas>
+</div>
--- a/app/src/lib/runtime/runtime-executor.ts
+++ b/app/src/lib/runtime/runtime-executor.ts
@@ -244,13 +244,14 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
        }
        this.perf?.addPoint("cache-hit", 0);

-        log.group(`executing ${node_type.id || node.id}`);
+        log.group(`executing ${node_type.id}-${node.id}`);
        log.log(`Inputs:`, inputs);
        a = performance.now();
        results[node.id] = node_type.execute(encoded_inputs);
+        log.log("Executed", node.type, node.id)
        b = performance.now();

-        if (this.cache) {
+        if (this.cache && node.id !== outputNode.id) {
          this.cache.set(inputHash, results[node.id]);
        }

--- a/app/src/lib/sidebar/Panel.svelte
+++ b/app/src/lib/sidebar/Panel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { getContext, type Snippet } from "svelte";
-  import type { PanelState } from "./PanelState.svelte";
+  import { type Snippet } from "svelte";
+  import { panelState } from "./PanelState.svelte";

  const {
    id,
@@ -18,8 +18,6 @@
    children?: Snippet;
  }>();

-  const panelState = getContext<PanelState>("panel-state");
-
  const panel = panelState.registerPanel(id, icon, classes, hidden);
  $effect(() => {
    panel.hidden = hidden;
@@ -45,7 +43,4 @@
    align-items: center;
    padding-left: 1em;
  }
-  h3 {
-    margin: 0px;
-  }
 </style>
--- a/app/src/lib/sidebar/PanelState.svelte.ts
+++ b/app/src/lib/sidebar/PanelState.svelte.ts
@@ -1,15 +1,14 @@
-import { localState } from "$lib/helpers/localState.svelte";
+import { localState } from '$lib/helpers/localState.svelte';

 type Panel = {
  icon: string;
  classes: string;
  hidden?: boolean;
-}
-
-export class PanelState {
+};

+class PanelState {
  panels = $state<Record<string, Panel>>({});
-  activePanel = localState<string | boolean>("node.activePanel", "")
+  activePanel = localState<string | boolean>('node.activePanel', '');

  get keys() {
    return Object.keys(this.panels);
@@ -19,7 +18,7 @@ export class PanelState {
    const state = $state({
      icon: icon,
      classes: classes,
-      hidden: hidden,
+      hidden: hidden
    });
    this.panels[id] = state;
    return state;
@@ -29,7 +28,13 @@ export class PanelState {
    if (this.activePanel.value) {
      this.activePanel.value = false;
    } else {
-      this.activePanel.value = this.keys[0]
+      this.activePanel.value = this.keys[0];
    }
  }
+
+  public setActivePanel(panelId: string) {
+    this.activePanel.value = panelId;
+  }
 }
+
+export const panelState = new PanelState();
--- a/app/src/lib/sidebar/Sidebar.svelte
+++ b/app/src/lib/sidebar/Sidebar.svelte
@@ -1,9 +1,6 @@
 <script lang="ts">
-  import { setContext, type Snippet } from "svelte";
-  import { PanelState } from "./PanelState.svelte";
-
-  const state = new PanelState();
-  setContext("panel-state", state);
+  import { type Snippet } from "svelte";
+  import { panelState as state } from "./PanelState.svelte";

  const { children } = $props<{ children?: Snippet }>();
 </script>
--- a/app/src/lib/sidebar/panels/BenchmarkPanel.svelte
+++ b/app/src/lib/sidebar/panels/BenchmarkPanel.svelte
@@ -1,147 +1,148 @@
 <script lang="ts" module>
-  let result:
-    | { stdev: number; avg: number; duration: number; samples: number[] }
-    | undefined = $state();
+	let result:
+		| { stdev: number; avg: number; duration: number; samples: number[] }
+		| undefined = $state();
 </script>

 <script lang="ts">
-  import { Integer } from "@nodarium/ui";
-  import { writable } from "svelte/store";
-  import { humanizeDuration } from "$lib/helpers";
-  import Monitor from "$lib/performance/Monitor.svelte";
-  import { localState } from "$lib/helpers/localState.svelte";
+	import { humanizeDuration } from '$lib/helpers';
+	import { localState } from '$lib/helpers/localState.svelte';
+	import Monitor from '$lib/performance/Monitor.svelte';
+	import { Number } from '@nodarium/ui';
+	import { writable } from 'svelte/store';

-  function calculateStandardDeviation(array: number[]) {
-    const n = array.length;
-    const mean = array.reduce((a, b) => a + b) / n;
-    return Math.sqrt(
-      array.map((x) => Math.pow(x - mean, 2)).reduce((a, b) => a + b) / n,
-    );
-  }
-  type Props = {
-    run: () => Promise<any>;
-  };
+	function calculateStandardDeviation(array: number[]) {
+		const n = array.length;
+		const mean = array.reduce((a, b) => a + b) / n;
+		return Math.sqrt(
+			array.map((x) => Math.pow(x - mean, 2)).reduce((a, b) => a + b) / n
+		);
+	}
+	type Props = {
+		run: () => Promise<any>;
+	};

-  const { run }: Props = $props();
+	const { run }: Props = $props();

-  let isRunning = $state(false);
-  let amount = localState<number>("nodes.benchmark.samples", 500);
-  let samples = $state(0);
-  let warmUp = writable(0);
-  let warmUpAmount = 10;
-  let status = "";
+	let isRunning = $state(false);
+	let amount = localState<number>('nodes.benchmark.samples', 500);
+	let samples = $state(0);
+	let warmUp = writable(0);
+	let warmUpAmount = 10;
+	let status = '';

-  const copyContent = async (text?: string | number) => {
-    if (!text) return;
-    if (typeof text !== "string") {
-      text = (Math.floor(text * 100) / 100).toString();
-    }
-    try {
-      await navigator.clipboard.writeText(text);
-    } catch (err) {
-      console.error("Failed to copy: ", err);
-    }
-  };
+	const copyContent = async (text?: string | number) => {
+		if (!text) return;
+		if (typeof text !== 'string') {
+			text = (Math.floor(text * 100) / 100).toString();
+		}
+		try {
+			await navigator.clipboard.writeText(text);
+		} catch (err) {
+			console.error('Failed to copy: ', err);
+		}
+	};

-  async function benchmark() {
-    if (isRunning) return;
-    isRunning = true;
-    result = undefined;
-    samples = 0;
-    $warmUp = 0;
+	async function benchmark() {
+		if (isRunning) return;
+		isRunning = true;
+		result = undefined;
+		samples = 0;
+		$warmUp = 0;

-    await new Promise((r) => setTimeout(r, 50));
+		await new Promise((r) => setTimeout(r, 50));

-    // warm up
-    for (let i = 0; i < warmUpAmount; i++) {
-      await run();
-      $warmUp = i + 1;
-    }
+		// warm up
+		for (let i = 0; i < warmUpAmount; i++) {
+			await run();
+			$warmUp = i + 1;
+		}

-    let a = performance.now();
-    let results = [];
+		let a = performance.now();
+		let results = [];

-    // perform run
-    for (let i = 0; i < amount.value; i++) {
-      const a = performance.now();
-      await run();
-      samples = i;
-      const b = performance.now();
-      await new Promise((r) => setTimeout(r, 20));
-      results.push(b - a);
-    }
-    result = {
-      stdev: calculateStandardDeviation(results),
-      samples: results,
-      duration: performance.now() - a,
-      avg: results.reduce((a, b) => a + b) / results.length,
-    };
-  }
+		// perform run
+		for (let i = 0; i < amount.value; i++) {
+			const a = performance.now();
+			await run();
+			samples = i;
+			const b = performance.now();
+			await new Promise((r) => setTimeout(r, 20));
+			results.push(b - a);
+		}
+		result = {
+			stdev: calculateStandardDeviation(results),
+			samples: results,
+			duration: performance.now() - a,
+			avg: results.reduce((a, b) => a + b) / results.length
+		};
+	}
 </script>

 {status}

 <div class="wrapper" class:running={isRunning}>
-  {#if result}
-    <h3>Finished ({humanizeDuration(result.duration)})</h3>
-    <div class="monitor-wrapper">
-      <Monitor points={result.samples} />
-    </div>
-    <label for="bench-avg">Average </label>
-    <button
-      id="bench-avg"
-      onkeydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
-      onclick={() => copyContent(result?.avg)}
-      >{Math.floor(result.avg * 100) / 100}</button
-    >
-    <i
-      role="button"
-      tabindex="0"
-      onkeydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
-      onclick={() => copyContent(result?.avg)}>(click to copy)</i
-    >
-    <label for="bench-stdev">Standard Deviation σ</label>
-    <button id="bench-stdev" onclick={() => copyContent(result?.stdev)}
-      >{Math.floor(result.stdev * 100) / 100}</button
-    >
-    <i
-      role="button"
-      tabindex="0"
-      onkeydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
-      onclick={() => copyContent(result?.stdev + "")}>(click to copy)</i
-    >
-    <div>
-      <button onclick={() => (isRunning = false)}>reset</button>
-    </div>
-  {:else if isRunning}
-    <p>WarmUp ({$warmUp}/{warmUpAmount})</p>
-    <progress value={$warmUp} max={warmUpAmount}
-      >{Math.floor(($warmUp / warmUpAmount) * 100)}%</progress
-    >
-    <p>Progress ({samples}/{amount.value})</p>
-    <progress value={samples} max={amount.value}
-      >{Math.floor((samples / amount.value) * 100)}%</progress
-    >
-  {:else}
-    <label for="bench-samples">Samples</label>
-    <Integer id="bench-sample" bind:value={amount.value} max={1000} />
-    <button onclick={benchmark} disabled={isRunning}> start </button>
-  {/if}
+	{#if result}
+		<h3>Finished ({humanizeDuration(result.duration)})</h3>
+		<div class="monitor-wrapper">
+			<Monitor points={result.samples} />
+		</div>
+		<label for="bench-avg">Average </label>
+		<button
+			id="bench-avg"
+			onkeydown={(ev) => ev.key === 'Enter' && copyContent(result?.avg)}
+			onclick={() => copyContent(result?.avg)}
+		>
+			{Math.floor(result.avg * 100) / 100}
+		</button>
+		<i
+			role="button"
+			tabindex="0"
+			onkeydown={(ev) => ev.key === 'Enter' && copyContent(result?.avg)}
+			onclick={() => copyContent(result?.avg)}
+		>(click to copy)</i>
+		<label for="bench-stdev">Standard Deviation σ</label>
+		<button id="bench-stdev" onclick={() => copyContent(result?.stdev)}>
+			{Math.floor(result.stdev * 100) / 100}
+		</button>
+		<i
+			role="button"
+			tabindex="0"
+			onkeydown={(ev) => ev.key === 'Enter' && copyContent(result?.avg)}
+			onclick={() => copyContent(result?.stdev + '')}
+		>(click to copy)</i>
+		<div>
+			<button onclick={() => (isRunning = false)}>reset</button>
+		</div>
+	{:else if isRunning}
+		<p>WarmUp ({$warmUp}/{warmUpAmount})</p>
+		<progress value={$warmUp} max={warmUpAmount}>
+			{Math.floor(($warmUp / warmUpAmount) * 100)}%
+		</progress>
+		<p>Progress ({samples}/{amount.value})</p>
+		<progress value={samples} max={amount.value}>
+			{Math.floor((samples / amount.value) * 100)}%
+		</progress>
+	{:else}
+		<label for="bench-samples">Samples</label>
+		<Number id="bench-sample" bind:value={amount.value} max={1000} />
+		<button onclick={benchmark} disabled={isRunning}>start</button>
+	{/if}
 </div>

 <style>
-  .wrapper {
-    padding: 1em;
-    display: flex;
-    flex-direction: column;
-    gap: 1em;
-  }
-  .monitor-wrapper {
-    border: solid thin var(--outline);
-    border-bottom: none;
-  }
-  i {
-    opacity: 0.5;
-    font-size: 0.8em;
-  }
+	.wrapper {
+		padding: 1em;
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+	}
+	.monitor-wrapper {
+		border: solid thin var(--outline);
+		border-bottom: none;
+	}
+	i {
+		opacity: 0.5;
+		font-size: 0.8em;
+	}
 </style>
--- a/app/src/lib/sidebar/panels/GraphSource.svelte
+++ b/app/src/lib/sidebar/panels/GraphSource.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
  import type { Graph } from "$lib/types";

-  const { graph }: { graph: Graph } = $props();
+  const { graph }: { graph?: Graph } = $props();

  function convert(g: Graph): string {
    return JSON.stringify(
@@ -16,5 +16,5 @@
 </script>

 <pre>
-  {convert(graph)}
+  {graph ? convert(graph) : 'No graph loaded'}
 </pre>
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -28,6 +28,8 @@
  import BenchmarkPanel from "$lib/sidebar/panels/BenchmarkPanel.svelte";
  import { debounceAsyncFunction } from "$lib/helpers";
  import GraphSource from "$lib/sidebar/panels/GraphSource.svelte";
+  import { ProjectManager } from "$lib/project-manager/project-manager.svelte";
+  import ProjectManagerEl from "$lib/project-manager/ProjectManager.svelte";

  let performanceStore = createPerformanceStore();

@@ -37,6 +39,7 @@
  const runtimeCache = new MemoryRuntimeCache();
  const memoryRuntime = new MemoryRuntimeExecutor(nodeRegistry, runtimeCache);
  memoryRuntime.perf = performanceStore;
+  const pm = new ProjectManager();

  const runtime = $derived(
    appSettings.value.debug.useWorker ? workerRuntime : memoryRuntime,
@@ -64,15 +67,6 @@
  let activeNode = $state<NodeInstance | undefined>(undefined);
  let scene = $state<Group>(null!);

-  let graph = $state(
-    localStorage.getItem("graph")
-      ? JSON.parse(localStorage.getItem("graph")!)
-      : templates.defaultPlant,
-  );
-  function handleSave(graph: Graph) {
-    localStorage.setItem("graph", JSON.stringify(graph));
-  }
-
  let graphInterface = $state<ReturnType<typeof GraphInterface>>(null!);
  let viewerComponent = $state<ReturnType<typeof Viewer>>();
  const manager = $derived(graphInterface?.manager);
@@ -91,21 +85,16 @@
      callback: () => randomGenerate(),
    },
  ]);
+
  let graphSettings = $state<Record<string, any>>({});
+  let graphSettingTypes = $state({
+    randomSeed: { type: "boolean", value: false },
+  });
  $effect(() => {
-    if (graphSettings) {
+    if (graphSettings && graphSettingTypes) {
      manager?.setSettings($state.snapshot(graphSettings));
    }
  });
-  type BooleanSchema = {
-    [key: string]: {
-      type: "boolean";
-      value: false;
-    };
-  };
-  let graphSettingTypes = $state<BooleanSchema>({
-    randomSeed: { type: "boolean", value: false },
-  });

  async function update(
    g: Graph,
@@ -183,19 +172,21 @@
      />
    </Grid.Cell>
    <Grid.Cell>
-      <GraphInterface
-        {graph}
-        bind:this={graphInterface}
-        registry={nodeRegistry}
-        showGrid={appSettings.value.nodeInterface.showNodeGrid}
-        snapToGrid={appSettings.value.nodeInterface.snapToGrid}
-        bind:activeNode
-        bind:showHelp={appSettings.value.nodeInterface.showHelp}
-        bind:settings={graphSettings}
-        bind:settingTypes={graphSettingTypes}
-        onresult={(result) => handleUpdate(result)}
-        onsave={(graph) => handleSave(graph)}
-      />
+      {#if pm.graph}
+        <GraphInterface
+          graph={pm.graph}
+          bind:this={graphInterface}
+          registry={nodeRegistry}
+          showGrid={appSettings.value.nodeInterface.showNodeGrid}
+          snapToGrid={appSettings.value.nodeInterface.snapToGrid}
+          bind:activeNode
+          bind:showHelp={appSettings.value.nodeInterface.showHelp}
+          bind:settings={graphSettings}
+          bind:settingTypes={graphSettingTypes}
+          onsave={(g) => pm.saveGraph(g)}
+          onresult={(result) => handleUpdate(result)}
+        />
+      {/if}
      <Sidebar>
        <Panel id="general" title="General" icon="i-[tabler--settings]">
          <NestedSettings
@@ -236,13 +227,16 @@
            <PerformanceViewer data={$performanceStore} />
          {/if}
        </Panel>
+        <Panel id="projects" icon="i-[tabler--folder-open]">
+          <ProjectManagerEl projectManager={pm} />
+        </Panel>
        <Panel
          id="graph-source"
          title="Graph Source"
          hidden={!appSettings.value.debug.showGraphJson}
          icon="i-[tabler--code]"
        >
-          <GraphSource graph={graph && manager.serialize()} />
+          <GraphSource graph={pm.graph ?? manager?.serialize()} />
        </Panel>
        <Panel
          id="benchmark"
--- a/app/src/routes/dev/+layout.svelte
+++ b/app/src/routes/dev/+layout.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  const { children } = $props<{ children?: Snippet }>();
+</script>
+
+<main class="w-screen overflow-x-hidden">
+  {@render children()}
+</main>
--- a/app/src/routes/dev/+page.svelte
+++ b/app/src/routes/dev/+page.svelte
@@ -1,29 +1,119 @@
 <script lang="ts">
-  import Grid from "$lib/grid";
+  import NodeHTML from "$lib/graph-interface/node/NodeHTML.svelte";
+  import { localState } from "$lib/helpers/localState.svelte";
  import Panel from "$lib/sidebar/Panel.svelte";
  import Sidebar from "$lib/sidebar/Sidebar.svelte";
+  import { IndexDBCache, RemoteNodeRegistry } from "@nodarium/registry";
+  import { type NodeId, type NodeInstance } from "@nodarium/types";
+  import Code from "./Code.svelte";
+  import Grid from "$lib/grid";
+  import {
+    concatEncodedArrays,
+    createWasmWrapper,
+    encodeNestedArray,
+  } from "@nodarium/utils";
+
+  const registryCache = new IndexDBCache("node-registry");
+  const nodeRegistry = new RemoteNodeRegistry("", registryCache);
+
+  let activeNode = localState<NodeId | undefined>(
+    "node.dev.activeNode",
+    undefined,
+  );
+
+  let nodeWasm = $state<ArrayBuffer>();
+  let nodeInstance = $state<NodeInstance>();
+  let nodeWasmWrapper = $state<ReturnType<typeof createWasmWrapper>>();
+
+  async function fetchNodeData(nodeId?: NodeId) {
+    nodeWasm = undefined;
+    nodeInstance = undefined;
+
+    if (!nodeId) return;
+
+    const data = await nodeRegistry.fetchNodeDefinition(nodeId);
+    nodeWasm = await nodeRegistry.fetchArrayBuffer("nodes/" + nodeId + ".wasm");
+    nodeInstance = {
+      id: 0,
+      type: nodeId,
+      position: [0, 0] as [number, number],
+      props: {},
+      state: {
+        type: data,
+      },
+    };
+    nodeWasmWrapper = createWasmWrapper(nodeWasm);
+  }
+
+  $effect(() => {
+    fetchNodeData(activeNode.value);
+  });
+
+  $effect(() => {
+    if (nodeInstance?.props && nodeWasmWrapper) {
+      const keys = Object.keys(nodeInstance.state.type?.inputs || {});
+      let ins = Object.values(nodeInstance.props) as number[];
+      if (keys[0] === "plant") {
+        ins = [[0, 0, 0, 0, 0, 0, 0, 0], ...ins];
+      }
+      const inputs = concatEncodedArrays(encodeNestedArray(ins));
+      nodeWasmWrapper?.execute(inputs);
+    }
+  });
 </script>

+<div class="node-wrapper absolute bottom-8 left-8">
+  {#if nodeInstance}
+    <NodeHTML inView position="relative" z={5} bind:node={nodeInstance} />
+  {/if}
+</div>
+
 <Grid.Row>
-  <Grid.Cell></Grid.Cell>
  <Grid.Cell>
-    <Sidebar>
-      <Panel
-        id="node-store"
-        classes="text-green-400"
-        title="Node Store"
-        icon="i-[tabler--database]"
-      >
-        <div class="p-4">
-          <input type="text" class="bg-red rounded-sm p-2" />
-        </div>
-      </Panel>
-    </Sidebar>
+    <pre>
+      <code>
+        {JSON.stringify(nodeInstance?.props)}
+      </code>
+    </pre>
+  </Grid.Cell>
+
+  <Grid.Cell>
+    <div class="h-screen w-[80vw] overflow-y-auto">
+      {#if nodeWasm}
+        <Code wasm={nodeWasm} />
+      {/if}
+    </div>
  </Grid.Cell>
 </Grid.Row>

+<Sidebar>
+  <Panel
+    id="node-store"
+    classes="text-green-400"
+    title="Node Store"
+    icon="i-[tabler--database]"
+  >
+    <div class="p-4 flex flex-col gap-2">
+      {#await nodeRegistry.fetchCollection("max/plantarium")}
+        <p>Loading Nodes...</p>
+      {:then result}
+        {#each result.nodes as n}
+          <button
+            class="cursor-pointer p-2 bg-layer-1 {activeNode.value === n.id
+              ? 'outline outline-offset-1'
+              : ''}"
+            onclick={() => (activeNode.value = n.id)}>{n.id}</button
+          >
+        {/each}
+      {/await}
+    </div>
+  </Panel>
+</Sidebar>
+
 <style>
  :global body {
    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
  }
 </style>
--- a/app/src/routes/dev/Code.svelte
+++ b/app/src/routes/dev/Code.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import wabtInit from "wabt";
+
+  const { wasm } = $props<{ wasm: ArrayBuffer }>();
+
+  async function toWat(arrayBuffer: ArrayBuffer) {
+    const wabt = await wabtInit();
+
+    const module = wabt.readWasm(new Uint8Array(arrayBuffer), {
+      readDebugNames: true,
+    });
+
+    module.generateNames();
+    module.applyNames();
+
+    return module.toText({ foldExprs: false, inlineExport: false });
+  }
+</script>
+
+{#await toWat(wasm)}
+  <p>Converting to WAT</p>
+{:then c}
+  <pre>
+    <code class="text-gray-50">{c}</code>
+  </pre>
+{/await}
--- a/app/static/.gitignore
+++ b/app/static/.gitignore
@@ -0,0 +1 @@
+nodes/
--- a/flake.nix
+++ b/flake.nix
@@ -4,7 +4,7 @@
  };

  outputs = {nixpkgs, ...}: let
-    systems = ["aarch64-darwin" "x86_64-linux"];
+    systems = ["aarch64-darwin" "x86_64-darwin" "aarch64-linux" "x86_64-linux"];
    eachSystem = function:
      nixpkgs.lib.genAttrs systems (system:
        function {
@@ -19,14 +19,15 @@
          pkgs.nodejs_24
          pkgs.pnpm_10

-          # wasm/rust stuff
+          # wasm stuff
          pkgs.rustc
          pkgs.cargo
          pkgs.rust-analyzer
          pkgs.rustfmt
-          pkgs.wasm-bindgen-cli
-          pkgs.wasm-pack
+          pkgs.binaryen
          pkgs.lld
+          pkgs.zig
+          pkgs.zls

          # frontend
          pkgs.vscode-langservers-extracted
@@ -35,6 +36,10 @@
          pkgs.tailwindcss-language-server
          pkgs.svelte-language-server
        ];
+
+        shellHook = ''
+          unset ZIG_GLOBAL_CACHE_DIR
+        '';
      };
    });
  };
--- a/nodes/max/plantarium/.template/Cargo.toml
+++ b/nodes/max/plantarium/.template/Cargo.toml
@@ -11,18 +11,8 @@ crate-type = ["cdylib", "rlib"]
 default = ["console_error_panic_hook"]

 [dependencies]
-wasm-bindgen = "0.2.84"
-
-# The `console_error_panic_hook` crate provides better debugging of panics by
-# logging them with `console.error`. This is great for development, but requires
-# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
-# code size when deploying.
 utils = { version = "0.1.0", path = "../../../../packages/utils" }
 macros = { version = "0.1.0", path = "../../../../packages/macros" }
 serde = { version = "1.0", features = ["derive"] }
-serde-wasm-bindgen = "0.4"
 console_error_panic_hook = { version = "0.1.7", optional = true }
 web-sys = { version = "0.3.69", features = ["console"] }
-
-[dev-dependencies]
-wasm-bindgen-test = "0.3.34"
--- a/nodes/max/plantarium/.template/package.json
+++ b/nodes/max/plantarium/.template/package.json
@@ -1,6 +0,0 @@
-{
-  "scripts": {
-    "build": "wasm-pack build --release --out-name index --no-default-features",
-    "dev": "cargo watch -s 'wasm-pack build --dev --out-name index --no-default-features'"
-  }
-}
--- a/nodes/max/plantarium/.template/tests/web.rs
+++ b/nodes/max/plantarium/.template/tests/web.rs
@@ -1,13 +0,0 @@
-//! Test suite for the Web and headless browsers.
-
-#![cfg(target_arch = "wasm32")]
-
-extern crate wasm_bindgen_test;
-use wasm_bindgen_test::*;
-
-wasm_bindgen_test_configure!(run_in_browser);
-
-#[wasm_bindgen_test]
-fn pass() {
-    assert_eq!(1 + 1, 2);
-}
--- a/nodes/max/plantarium/box/Cargo.toml
+++ b/nodes/max/plantarium/box/Cargo.toml
@@ -7,22 +7,6 @@ edition = "2018"
 [lib]
 crate-type = ["cdylib", "rlib"]

-[features]
-default = ["console_error_panic_hook"]
-
 [dependencies]
-wasm-bindgen = "0.2.84"
-
-# The `console_error_panic_hook` crate provides better debugging of panics by
-# logging them with `console.error`. This is great for development, but requires
-# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
-# code size when deploying.
-nodarium_utils = { version = "0.1.0", path = "../../../../packages/utils" }
 nodarium_macros = { version = "0.1.0", path = "../../../../packages/macros" }
-serde = { version = "1.0", features = ["derive"] }
-serde-wasm-bindgen = "0.4"
-console_error_panic_hook = { version = "0.1.7", optional = true }
-web-sys = { version = "0.3.69", features = ["console"] }
-
-[dev-dependencies]
-wasm-bindgen-test = "0.3.34"
+nodarium_utils = { version = "0.1.0", path = "../../../../packages/utils" }
--- a/nodes/max/plantarium/box/package.json
+++ b/nodes/max/plantarium/box/package.json
@@ -1,6 +0,0 @@
-{
-  "scripts": {
-    "build": "wasm-pack build --release --out-name index --no-default-features",
-    "dev": "cargo watch -s 'wasm-pack build --dev --out-name index --no-default-features'"
-  }
-}
--- a/nodes/max/plantarium/box/src/lib.rs
+++ b/nodes/max/plantarium/box/src/lib.rs
@@ -1,18 +1,15 @@
-use nodarium_macros::include_definition_file;
+use nodarium_macros::nodarium_definition_file;
+use nodarium_macros::nodarium_execute;
 use nodarium_utils::{
-    concat_args, encode_float, evaluate_float, geometry::calculate_normals, log, set_panic_hook,
+    encode_float, evaluate_float, geometry::calculate_normals,log,
    split_args, wrap_arg,
 };
-use wasm_bindgen::prelude::*;

-include_definition_file!("src/input.json");
+nodarium_definition_file!("src/input.json");

-#[rustfmt::skip]
-#[wasm_bindgen]
+#[nodarium_execute]
 pub fn execute(input: &[i32]) -> Vec<i32> {

-    set_panic_hook();
-
    let args = split_args(input);

    log!("WASM(cube): input: {:?} -> {:?}", input, args);
@@ -22,7 +19,6 @@ pub fn execute(input: &[i32]) -> Vec<i32> {
    let p = encode_float(size);
    let n = encode_float(-size);

-
    // [[1,3, x, y, z, x, y,z,x,y,z]];
    let mut cube_geometry = [

--- a/nodes/max/plantarium/box/tests/web.rs
+++ b/nodes/max/plantarium/box/tests/web.rs
@@ -1,13 +0,0 @@
-//! Test suite for the Web and headless browsers.
-
-#![cfg(target_arch = "wasm32")]
-
-extern crate wasm_bindgen_test;
-use wasm_bindgen_test::*;
-
-wasm_bindgen_test_configure!(run_in_browser);
-
-#[wasm_bindgen_test]
-fn pass() {
-    assert_eq!(1 + 1, 2);
-}
--- a/nodes/max/plantarium/branch/Cargo.toml
+++ b/nodes/max/plantarium/branch/Cargo.toml
@@ -7,23 +7,6 @@ edition = "2018"
 [lib]
 crate-type = ["cdylib", "rlib"]

-[features]
-default = ["console_error_panic_hook"]
-
 [dependencies]
-wasm-bindgen = "0.2.84"
-
-# The `console_error_panic_hook` crate provides better debugging of panics by
-# logging them with `console.error`. This is great for development, but requires
-# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
-# code size when deploying.
 nodarium_utils = { version = "0.1.0", path = "../../../../packages/utils" }
 nodarium_macros = { version = "0.1.0", path = "../../../../packages/macros" }
-serde = { version = "1.0", features = ["derive"] }
-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"
-
-[dev-dependencies]
-wasm-bindgen-test = "0.3.34"
--- a/nodes/max/plantarium/branch/package.json
+++ b/nodes/max/plantarium/branch/package.json
@@ -1,6 +0,0 @@
-{
-  "scripts": {
-    "build": "wasm-pack build --release --out-name index --no-default-features",
-    "dev": "cargo watch -s 'wasm-pack build --dev --out-name index --no-default-features'"
-  }
-}
--- a/nodes/max/plantarium/branch/src/lib.rs
+++ b/nodes/max/plantarium/branch/src/lib.rs
@@ -1,20 +1,19 @@
-use nodarium_macros::include_definition_file;
+use nodarium_macros::nodarium_definition_file;
+use nodarium_macros::nodarium_execute;
 use nodarium_utils::{
    concat_arg_vecs, evaluate_float, evaluate_int,
    geometry::{
        create_path, interpolate_along_path, rotate_vector_by_angle, wrap_path, wrap_path_mut,
    },
-    log, set_panic_hook, split_args,
+    log, split_args,
 };
+
 use std::f32::consts::PI;
-use wasm_bindgen::prelude::*;

-include_definition_file!("src/input.json");
+nodarium_definition_file!("src/input.json");

-#[wasm_bindgen]
+#[nodarium_execute]
 pub fn execute(input: &[i32]) -> Vec<i32> {
-    set_panic_hook();
-
    let args = split_args(input);

    let paths = split_args(args[0]);
--- a/nodes/max/plantarium/branch/tests/web.rs
+++ b/nodes/max/plantarium/branch/tests/web.rs
@@ -1,13 +0,0 @@
-//! Test suite for the Web and headless browsers.
-
-#![cfg(target_arch = "wasm32")]
-
-extern crate wasm_bindgen_test;
-use wasm_bindgen_test::*;
-
-wasm_bindgen_test_configure!(run_in_browser);
-
-#[wasm_bindgen_test]
-fn pass() {
-    assert_eq!(1 + 1, 2);
-}
--- a/nodes/max/plantarium/float/Cargo.toml
+++ b/nodes/max/plantarium/float/Cargo.toml
@@ -7,21 +7,6 @@ edition = "2018"
 [lib]
 crate-type = ["cdylib", "rlib"]

-[features]
-default = ["console_error_panic_hook"]
-
 [dependencies]
-wasm-bindgen = "0.2.84"
-
-# The `console_error_panic_hook` crate provides better debugging of panics by
-# logging them with `console.error`. This is great for development, but requires
-# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
-# code size when deploying.
 nodarium_utils = { version = "0.1.0", path = "../../../../packages/utils" }
 nodarium_macros = { version = "0.1.0", path = "../../../../packages/macros" }
-serde = { version = "1.0", features = ["derive"] }
-serde-wasm-bindgen = "0.4"
-console_error_panic_hook = { version = "0.1.7", optional = true }
-
-[dev-dependencies]
-wasm-bindgen-test = "0.3.34"
--- a/nodes/max/plantarium/float/package.json
+++ b/nodes/max/plantarium/float/package.json
@@ -1,6 +0,0 @@
-{
-  "scripts": {
-    "build": "wasm-pack build --release --out-name index --no-default-features",
-    "dev": "cargo watch -s 'wasm-pack build --dev --out-name index --no-default-features'"
-  }
-}
--- a/nodes/max/plantarium/float/src/lib.rs
+++ b/nodes/max/plantarium/float/src/lib.rs
@@ -1,9 +1,9 @@
-use nodarium_macros::include_definition_file;
-use wasm_bindgen::prelude::*;
+use nodarium_macros::nodarium_definition_file;
+use nodarium_macros::nodarium_execute;

-include_definition_file!("src/input.json");
+nodarium_definition_file!("src/input.json");

-#[wasm_bindgen]
+#[nodarium_execute]
 pub fn execute(args: &[i32]) -> Vec<i32> {
    args.into()
 }
--- a/nodes/max/plantarium/float/tests/web.rs
+++ b/nodes/max/plantarium/float/tests/web.rs
@@ -1,13 +0,0 @@
-//! Test suite for the Web and headless browsers.
-
-#![cfg(target_arch = "wasm32")]
-
-extern crate wasm_bindgen_test;
-use wasm_bindgen_test::*;
-
-wasm_bindgen_test_configure!(run_in_browser);
-
-#[wasm_bindgen_test]
-fn pass() {
-    assert_eq!(1 + 1, 2);
-}
--- a/nodes/max/plantarium/gravity/Cargo.toml
+++ b/nodes/max/plantarium/gravity/Cargo.toml
@@ -7,24 +7,7 @@ edition = "2018"
 [lib]
 crate-type = ["cdylib", "rlib"]

-[features]
-default = ["console_error_panic_hook"]
-
 [dependencies]
-wasm-bindgen = "0.2.84"
-
-# The `console_error_panic_hook` crate provides better debugging of panics by
-# logging them with `console.error`. This is great for development, but requires
-# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
-# code size when deploying.
 nodarium_utils = { version = "0.1.0", path = "../../../../packages/utils" }
 nodarium_macros = { version = "0.1.0", path = "../../../../packages/macros" }
-serde = { version = "1.0", features = ["derive"] }
-serde-wasm-bindgen = "0.4"
-console_error_panic_hook = { version = "0.1.7", optional = true }
-web-sys = { version = "0.3.69", features = ["console"] }
-noise = "0.9.0"
-glam = "0.27.0"
-
-[dev-dependencies]
-wasm-bindgen-test = "0.3.34"
+glam = "0.30.10"
--- a/nodes/max/plantarium/gravity/package.json
+++ b/nodes/max/plantarium/gravity/package.json
@@ -1,6 +0,0 @@
-{
-  "scripts": {
-    "build": "wasm-pack build --release --out-name index --no-default-features",
-    "dev": "cargo watch -s 'wasm-pack build --dev --out-name index --no-default-features'"
-  }
-}
--- a/nodes/max/plantarium/gravity/src/lib.rs
+++ b/nodes/max/plantarium/gravity/src/lib.rs
@@ -1,22 +1,20 @@
 use glam::Vec3;
-use nodarium_macros::include_definition_file;
+use nodarium_macros::nodarium_definition_file;
+use nodarium_macros::nodarium_execute;
 use nodarium_utils::{
    concat_args, evaluate_float, evaluate_int,
    geometry::{wrap_path, wrap_path_mut},
-    log, reset_call_count, set_panic_hook, split_args,
+    log, reset_call_count, split_args,
 };
-use wasm_bindgen::prelude::*;

-include_definition_file!("src/input.json");
+nodarium_definition_file!("src/input.json");

 fn lerp_vec3(a: Vec3, b: Vec3, t: f32) -> Vec3 {
    a + (b - a) * t
 }

-#[wasm_bindgen]
+#[nodarium_execute]
 pub fn execute(input: &[i32]) -> Vec<i32> {
-    set_panic_hook();
-
    reset_call_count();

    let args = split_args(input);
--- a/nodes/max/plantarium/gravity/tests/web.rs
+++ b/nodes/max/plantarium/gravity/tests/web.rs
@@ -1,13 +0,0 @@
-//! Test suite for the Web and headless browsers.
-
-#![cfg(target_arch = "wasm32")]
-
-extern crate wasm_bindgen_test;
-use wasm_bindgen_test::*;
-
-wasm_bindgen_test_configure!(run_in_browser);
-
-#[wasm_bindgen_test]
-fn pass() {
-    assert_eq!(1 + 1, 2);
-}
--- a/nodes/max/plantarium/instance/Cargo.toml
+++ b/nodes/max/plantarium/instance/Cargo.toml
@@ -1,5 +1,5 @@
 [package]
-name = "nodarium_instance"
+name = "instance"
 version = "0.1.0"
 authors = ["Max Richter <jim-x@web.de>"]
 edition = "2018"
@@ -7,23 +7,7 @@ edition = "2018"
 [lib]
 crate-type = ["cdylib", "rlib"]

-[features]
-default = ["console_error_panic_hook"]
-
 [dependencies]
-wasm-bindgen = "0.2.84"
-
-# The `console_error_panic_hook` crate provides better debugging of panics by
-# logging them with `console.error`. This is great for development, but requires
-# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
-# code size when deploying.
 nodarium_utils = { version = "0.1.0", path = "../../../../packages/utils" }
 nodarium_macros = { version = "0.1.0", path = "../../../../packages/macros" }
-serde = { version = "1.0", features = ["derive"] }
-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"
-
-[dev-dependencies]
-wasm-bindgen-test = "0.3.34"
+glam = "0.30.10"
--- a/nodes/max/plantarium/instance/package.json
+++ b/nodes/max/plantarium/instance/package.json
@@ -1,6 +0,0 @@
-{
-  "scripts": {
-    "build": "wasm-pack build --release --out-name index --no-default-features",
-    "dev": "cargo watch -s 'wasm-pack build --dev --out-name index --no-default-features'"
-  }
-}
--- a/nodes/max/plantarium/instance/src/lib.rs
+++ b/nodes/max/plantarium/instance/src/lib.rs
@@ -1,20 +1,18 @@
 use glam::{Mat4, Quat, Vec3};
-use nodarium_macros::include_definition_file;
+use nodarium_macros::nodarium_execute;
+use nodarium_macros::nodarium_definition_file;
 use nodarium_utils::{
-    concat_args, encode_float, evaluate_float, evaluate_int,
+    concat_args, evaluate_float, evaluate_int,
    geometry::{
-        calculate_normals, create_instance_data, wrap_geometry_data, wrap_instance_data, wrap_path,
+        create_instance_data, wrap_geometry_data, wrap_instance_data, wrap_path,
    },
-    log, set_panic_hook, split_args, wrap_arg,
+    log, split_args,
 };
-use wasm_bindgen::prelude::*;

-include_definition_file!("src/input.json");
+nodarium_definition_file!("src/input.json");

-#[wasm_bindgen]
+#[nodarium_execute]
 pub fn execute(input: &[i32]) -> Vec<i32> {
-    set_panic_hook();
-
    let args = split_args(input);
    let mut inputs = split_args(args[0]);
    log!("WASM(instance): inputs: {:?}", inputs);
--- a/nodes/max/plantarium/instance/tests/web.rs
+++ b/nodes/max/plantarium/instance/tests/web.rs
@@ -1,13 +0,0 @@
-//! Test suite for the Web and headless browsers.
-
-#![cfg(target_arch = "wasm32")]
-
-extern crate wasm_bindgen_test;
-use wasm_bindgen_test::*;
-
-wasm_bindgen_test_configure!(run_in_browser);
-
-#[wasm_bindgen_test]
-fn pass() {
-    assert_eq!(1 + 1, 2);
-}
--- a/nodes/max/plantarium/math/Cargo.toml
+++ b/nodes/max/plantarium/math/Cargo.toml
@@ -7,17 +7,6 @@ edition = "2018"
 [lib]
 crate-type = ["cdylib", "rlib"]

-[features]
-default = ["console_error_panic_hook"]
-
 [dependencies]
-wasm-bindgen = "0.2.84"
-serde = { version = "1.0", features = ["derive"] }
-serde-wasm-bindgen = "0.4"
-console_error_panic_hook = { version = "0.1.7", optional = true }
 nodarium_utils = { version = "0.1.0", path = "../../../../packages/utils" }
 nodarium_macros = { version = "0.1.0", path = "../../../../packages/macros" }
-web-sys = { version = "0.3.69", features = ["console"] }
-
-[dev-dependencies]
-wasm-bindgen-test = "0.3.34"
--- a/nodes/max/plantarium/math/package.json
+++ b/nodes/max/plantarium/math/package.json
@@ -1,6 +0,0 @@
-{
-  "scripts": {
-    "build": "wasm-pack build --release --out-name index --no-default-features",
-    "dev": "cargo watch -s 'wasm-pack build --dev --out-name index --no-default-features'"
-  }
-}
--- a/nodes/max/plantarium/math/src/lib.rs
+++ b/nodes/max/plantarium/math/src/lib.rs
@@ -1,12 +1,13 @@
-use nodarium_macros::include_definition_file;
-use nodarium_utils::{concat_args, set_panic_hook, split_args};
-use wasm_bindgen::prelude::*;
+use nodarium_macros::nodarium_definition_file;
+use nodarium_macros::nodarium_execute;
+use nodarium_utils::{
+    concat_args, split_args
+};

-include_definition_file!("src/input.json");
-
-#[wasm_bindgen]
+#[nodarium_execute]
 pub fn execute(args: &[i32]) -> Vec<i32> {
-    set_panic_hook();
    let args = split_args(args);
    concat_args(vec![&[0], args[0], args[1], args[2]])
 }
+
+nodarium_definition_file!("src/input.json");
--- a/nodes/max/plantarium/math/tests/web.rs
+++ b/nodes/max/plantarium/math/tests/web.rs
@@ -1,13 +0,0 @@
-//! Test suite for the Web and headless browsers.
-
-#![cfg(target_arch = "wasm32")]
-
-extern crate wasm_bindgen_test;
-use wasm_bindgen_test::*;
-
-wasm_bindgen_test_configure!(run_in_browser);
-
-#[wasm_bindgen_test]
-fn pass() {
-    assert_eq!(1 + 1, 2);
-}
--- a/nodes/max/plantarium/noise/Cargo.toml
+++ b/nodes/max/plantarium/noise/Cargo.toml
@@ -1,5 +1,5 @@
 [package]
-name = "nodes-noise"
+name = "noise"
 version = "0.1.0"
 authors = ["Max Richter <jim-x@web.de>"]
 edition = "2018"
@@ -7,24 +7,8 @@ edition = "2018"
 [lib]
 crate-type = ["cdylib", "rlib"]

-[features]
-default = ["console_error_panic_hook"]
-
 [dependencies]
-wasm-bindgen = "0.2.84"
-
-# The `console_error_panic_hook` crate provides better debugging of panics by
-# logging them with `console.error`. This is great for development, but requires
-# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
-# code size when deploying.
 nodarium_utils = { version = "0.1.0", path = "../../../../packages/utils" }
 nodarium_macros = { version = "0.1.0", path = "../../../../packages/macros" }
-serde = { version = "1.0", features = ["derive"] }
-serde-wasm-bindgen = "0.4"
-console_error_panic_hook = { version = "0.1.7", optional = true }
-web-sys = { version = "0.3.69", features = ["console"] }
 noise = "0.9.0"
-glam = "0.27.0"

-[dev-dependencies]
-wasm-bindgen-test = "0.3.34"
--- a/nodes/max/plantarium/noise/package.json
+++ b/nodes/max/plantarium/noise/package.json
@@ -1,6 +0,0 @@
-{
-  "scripts": {
-    "build": "wasm-pack build --release --out-name index --no-default-features",
-    "dev": "cargo watch -s 'wasm-pack build --dev --out-name index --no-default-features'"
-  }
-}
--- a/nodes/max/plantarium/noise/src/lib.rs
+++ b/nodes/max/plantarium/noise/src/lib.rs
@@ -1,21 +1,19 @@
-use nodarium_macros::include_definition_file;
+use nodarium_macros::nodarium_definition_file;
+use nodarium_macros::nodarium_execute;
 use nodarium_utils::{
-    concat_args, evaluate_float, evaluate_int, evaluate_vec3, geometry::wrap_path_mut, log,
-    reset_call_count, set_panic_hook, split_args,
+    concat_args, evaluate_float, evaluate_int, evaluate_vec3, geometry::wrap_path_mut,
+    reset_call_count, split_args,
 };
 use noise::{HybridMulti, MultiFractal, NoiseFn, OpenSimplex};
-use wasm_bindgen::prelude::*;

-include_definition_file!("src/input.json");
+nodarium_definition_file!("src/input.json");

 fn lerp(a: f32, b: f32, t: f32) -> f32 {
    a + t * (b - a)
 }

-#[wasm_bindgen]
+#[nodarium_execute]
 pub fn execute(input: &[i32]) -> Vec<i32> {
-    set_panic_hook();
-
    reset_call_count();

    let args = split_args(input);
--- a/nodes/max/plantarium/noise/tests/web.rs
+++ b/nodes/max/plantarium/noise/tests/web.rs
@@ -1,13 +0,0 @@
-//! Test suite for the Web and headless browsers.
-
-#![cfg(target_arch = "wasm32")]
-
-extern crate wasm_bindgen_test;
-use wasm_bindgen_test::*;
-
-wasm_bindgen_test_configure!(run_in_browser);
-
-#[wasm_bindgen_test]
-fn pass() {
-    assert_eq!(1 + 1, 2);
-}
--- a/nodes/max/plantarium/output/Cargo.toml
+++ b/nodes/max/plantarium/output/Cargo.toml
@@ -7,24 +7,6 @@ edition = "2018"
 [lib]
 crate-type = ["cdylib", "rlib"]

-[features]
-default = ["console_error_panic_hook"]
-console_error_panic_hook = ["dep:console_error_panic_hook"]
-
 [dependencies]
-wasm-bindgen = "0.2.84"
-
-# The `console_error_panic_hook` crate provides better debugging of panics by
-# logging them with `console.error`. This is great for development, but requires
-# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
-# code size when deploying.
-serde = { version = "1.0", features = ["derive"] }
-serde_json = { version = "1.0", default-features = false, features = ["alloc"] }
 nodarium_utils = { version = "0.1.0", path = "../../../../packages/utils" }
 nodarium_macros = { version = "0.1.0", path = "../../../../packages/macros" }
-console_error_panic_hook = { version = "0.1.7", optional = true }
-web-sys = { version = "0.3.69", features = ["console"] }
-glam = "0.27.0"
-
-[dev-dependencies]
-wasm-bindgen-test = "0.3.34"
--- a/nodes/max/plantarium/output/package.json
+++ b/nodes/max/plantarium/output/package.json
@@ -1,6 +0,0 @@
-{
-  "scripts": {
-    "build": "wasm-pack build --release --out-name index --no-default-features",
-    "dev": "cargo watch -s 'wasm-pack build --dev --out-name index --no-default-features'"
-  }
-}
--- a/nodes/max/plantarium/output/src/lib.rs
+++ b/nodes/max/plantarium/output/src/lib.rs
@@ -1,17 +1,15 @@
-use nodarium_macros::include_definition_file;
+use nodarium_macros::nodarium_definition_file;
+use nodarium_macros::nodarium_execute;
 use nodarium_utils::{
    concat_args, evaluate_int,
    geometry::{extrude_path, wrap_path},
-    log, set_panic_hook, split_args,
+    log, split_args,
 };
-use wasm_bindgen::prelude::*;

-include_definition_file!("src/inputs.json");
+nodarium_definition_file!("src/inputs.json");

-#[wasm_bindgen]
+#[nodarium_execute]
 pub fn execute(input: &[i32]) -> Vec<i32> {
-    set_panic_hook();
-
    log!("WASM(output): input: {:?}", input);

    let args = split_args(input);
--- a/nodes/max/plantarium/output/tests/web.rs
+++ b/nodes/max/plantarium/output/tests/web.rs
@@ -1,13 +0,0 @@
-//! Test suite for the Web and headless browsers.
-
-#![cfg(target_arch = "wasm32")]
-
-extern crate wasm_bindgen_test;
-use wasm_bindgen_test::*;
-
-wasm_bindgen_test_configure!(run_in_browser);
-
-#[wasm_bindgen_test]
-fn pass() {
-    assert_eq!(1 + 1, 2);
-}
--- a/nodes/max/plantarium/random/Cargo.toml
+++ b/nodes/max/plantarium/random/Cargo.toml
@@ -7,21 +7,7 @@ edition = "2018"
 [lib]
 crate-type = ["cdylib", "rlib"]

-[features]
-default = ["console_error_panic_hook"]

 [dependencies]
-wasm-bindgen = "0.2.84"
-
-# The `console_error_panic_hook` crate provides better debugging of panics by
-# logging them with `console.error`. This is great for development, but requires
-# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
-# code size when deploying.
 nodarium_utils = { version = "0.1.0", path = "../../../../packages/utils" }
 nodarium_macros = { version = "0.1.0", path = "../../../../packages/macros" }
-serde = { version = "1.0", features = ["derive"] }
-serde-wasm-bindgen = "0.4"
-console_error_panic_hook = { version = "0.1.7", optional = true }
-
-[dev-dependencies]
-wasm-bindgen-test = "0.3.34"
--- a/nodes/max/plantarium/random/package.json
+++ b/nodes/max/plantarium/random/package.json
@@ -1,6 +0,0 @@
-{
-  "scripts": {
-    "build": "wasm-pack build --release --out-name index --no-default-features",
-    "dev": "cargo watch -s 'wasm-pack build --dev --out-name index --no-default-features'"
-  }
-}
--- a/nodes/max/plantarium/random/src/lib.rs
+++ b/nodes/max/plantarium/random/src/lib.rs
@@ -1,12 +1,11 @@
-use nodarium_macros::include_definition_file;
-use nodarium_utils::{concat_args, set_panic_hook, split_args};
-use wasm_bindgen::prelude::*;
+use nodarium_macros::nodarium_definition_file;
+use nodarium_macros::nodarium_execute;
+use nodarium_utils::{concat_args, split_args};

-include_definition_file!("src/definition.json");
+nodarium_definition_file!("src/definition.json");

-#[wasm_bindgen]
+#[nodarium_execute]
 pub fn execute(args: &[i32]) -> Vec<i32> {
-    set_panic_hook();
    let args = split_args(args);
    concat_args(vec![&[1], args[0], args[1], args[2]])
 }
--- a/nodes/max/plantarium/random/tests/web.rs
+++ b/nodes/max/plantarium/random/tests/web.rs
@@ -1,13 +0,0 @@
-//! Test suite for the Web and headless browsers.
-
-#![cfg(target_arch = "wasm32")]
-
-extern crate wasm_bindgen_test;
-use wasm_bindgen_test::*;
-
-wasm_bindgen_test_configure!(run_in_browser);
-
-#[wasm_bindgen_test]
-fn pass() {
-    assert_eq!(1 + 1, 2);
-}
--- a/nodes/max/plantarium/rotate/Cargo.toml
+++ b/nodes/max/plantarium/rotate/Cargo.toml
@@ -7,23 +7,8 @@ edition = "2018"
 [lib]
 crate-type = ["cdylib", "rlib"]

-[features]
-default = ["console_error_panic_hook"]
-
 [dependencies]
-wasm-bindgen = "0.2.84"
-
-# The `console_error_panic_hook` crate provides better debugging of panics by
-# logging them with `console.error`. This is great for development, but requires
-# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
-# code size when deploying.
 nodarium_utils = { version = "0.1.0", path = "../../../../packages/utils" }
 nodarium_macros = { version = "0.1.0", path = "../../../../packages/macros" }
 serde = { version = "1.0", features = ["derive"] }
-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"
-
-[dev-dependencies]
-wasm-bindgen-test = "0.3.34"
+glam = "0.30.10"
--- a/nodes/max/plantarium/rotate/package.json
+++ b/nodes/max/plantarium/rotate/package.json
@@ -1,6 +0,0 @@
-{
-  "scripts": {
-    "build": "wasm-pack build --release --out-name index --no-default-features",
-    "dev": "cargo watch -s 'wasm-pack build --dev --out-name index --no-default-features'"
-  }
-}
--- a/nodes/max/plantarium/rotate/src/lib.rs
+++ b/nodes/max/plantarium/rotate/src/lib.rs
@@ -1,16 +1,15 @@
 use glam::{Mat4, Vec3};
-use nodarium_macros::include_definition_file;
+use nodarium_macros::nodarium_definition_file;
+use nodarium_macros::nodarium_execute;
 use nodarium_utils::{
-    concat_args, evaluate_float, evaluate_int, geometry::wrap_path_mut, log, set_panic_hook,
+    concat_args, evaluate_float, evaluate_int, geometry::wrap_path_mut, log,
    split_args,
 };
-use wasm_bindgen::prelude::*;

-include_definition_file!("src/input.json");
+nodarium_definition_file!("src/input.json");

-#[wasm_bindgen]
+#[nodarium_execute]
 pub fn execute(input: &[i32]) -> Vec<i32> {
-    set_panic_hook();

    log!("DEBUG args: {:?}", input);

--- a/nodes/max/plantarium/rotate/tests/web.rs
+++ b/nodes/max/plantarium/rotate/tests/web.rs
@@ -1,13 +0,0 @@
-//! Test suite for the Web and headless browsers.
-
-#![cfg(target_arch = "wasm32")]
-
-extern crate wasm_bindgen_test;
-use wasm_bindgen_test::*;
-
-wasm_bindgen_test_configure!(run_in_browser);
-
-#[wasm_bindgen_test]
-fn pass() {
-    assert_eq!(1 + 1, 2);
-}
--- a/nodes/max/plantarium/stem/Cargo.toml
+++ b/nodes/max/plantarium/stem/Cargo.toml
@@ -7,23 +7,6 @@ edition = "2018"
 [lib]
 crate-type = ["cdylib", "rlib"]

-[features]
-default = ["console_error_panic_hook"]
-
 [dependencies]
-wasm-bindgen = "0.2.84"
-serde = { version = "1.0", features = ["derive"] }
-serde-wasm-bindgen = "0.4"
-console_error_panic_hook = { version = "0.1.7", optional = true }
 nodarium_utils = { version = "0.1.0", path = "../../../../packages/utils" }
 nodarium_macros = { version = "0.1.0", path = "../../../../packages/macros" }
-web-sys = { version = "0.3.69", features = ["console"] }
-
-[dev-dependencies]
-wasm-bindgen-test = "0.3.34"
-
-[package.metadata.wasm-pack.profile.release.wasm-bindgen]
-debug-js-glue = true
-demangle-name-section = true
-dwarf-debug-info = false
-omit-default-module-path = true
--- a/nodes/max/plantarium/stem/package.json
+++ b/nodes/max/plantarium/stem/package.json
@@ -1,6 +0,0 @@
-{
-  "scripts": {
-    "build": "wasm-pack build --release --out-name index --no-default-features",
-    "dev": "cargo watch -s 'wasm-pack build --dev --out-name index --no-default-features'"
-  }
-}
--- a/nodes/max/plantarium/stem/src/lib.rs
+++ b/nodes/max/plantarium/stem/src/lib.rs
@@ -1,17 +1,15 @@
-use nodarium_macros::include_definition_file;
+use nodarium_macros::nodarium_definition_file;
+use nodarium_macros::nodarium_execute;
 use nodarium_utils::{
    evaluate_float, evaluate_int, evaluate_vec3,
    geometry::{create_multiple_paths, wrap_multiple_paths},
-    log, reset_call_count, set_panic_hook, split_args,
+    log, reset_call_count, split_args,
 };
-use wasm_bindgen::prelude::*;

-include_definition_file!("src/input.json");
+nodarium_definition_file!("src/input.json");

-#[wasm_bindgen]
+#[nodarium_execute]
 pub fn execute(input: &[i32]) -> Vec<i32> {
-    set_panic_hook();
-
    reset_call_count();

    let args = split_args(input);
--- a/nodes/max/plantarium/stem/tests/web.rs
+++ b/nodes/max/plantarium/stem/tests/web.rs
@@ -1,13 +0,0 @@
-//! Test suite for the Web and headless browsers.
-
-#![cfg(target_arch = "wasm32")]
-
-extern crate wasm_bindgen_test;
-use wasm_bindgen_test::*;
-
-wasm_bindgen_test_configure!(run_in_browser);
-
-#[wasm_bindgen_test]
-fn pass() {
-    assert_eq!(1 + 1, 2);
-}
--- a/nodes/max/plantarium/triangle/Cargo.toml
+++ b/nodes/max/plantarium/triangle/Cargo.toml
@@ -1,5 +1,5 @@
 [package]
-name = "max-plantarium-triangle"
+name = "triangle"
 version = "0.1.0"
 authors = ["Max Richter <jim-x@web.de>"]
 edition = "2018"
@@ -7,22 +7,6 @@ edition = "2018"
 [lib]
 crate-type = ["cdylib", "rlib"]

-[features]
-default = ["console_error_panic_hook"]
-
 [dependencies]
-wasm-bindgen = "0.2.84"
-
-# The `console_error_panic_hook` crate provides better debugging of panics by
-# logging them with `console.error`. This is great for development, but requires
-# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
-# code size when deploying.
 nodarium_utils = { version = "0.1.0", path = "../../../../packages/utils" }
 nodarium_macros = { version = "0.1.0", path = "../../../../packages/macros" }
-serde = { version = "1.0", features = ["derive"] }
-serde-wasm-bindgen = "0.4"
-console_error_panic_hook = { version = "0.1.7", optional = true }
-web-sys = { version = "0.3.69", features = ["console"] }
-
-[dev-dependencies]
-wasm-bindgen-test = "0.3.34"
--- a/nodes/max/plantarium/triangle/package.json
+++ b/nodes/max/plantarium/triangle/package.json
@@ -1,6 +0,0 @@
-{
-  "scripts": {
-    "build": "wasm-pack build --release --out-name index --no-default-features",
-    "dev": "cargo watch -s 'wasm-pack build --dev --out-name index --no-default-features'"
-  }
-}
--- a/nodes/max/plantarium/triangle/src/lib.rs
+++ b/nodes/max/plantarium/triangle/src/lib.rs
@@ -1,25 +1,21 @@
-use nodarium_macros::include_definition_file;
+use nodarium_macros::nodarium_definition_file;
+use nodarium_macros::nodarium_execute;
 use nodarium_utils::{
-    decode_float, encode_float, evaluate_int, set_panic_hook, split_args, wrap_arg,
+    decode_float, encode_float, evaluate_int, split_args, wrap_arg, log
 };
-use wasm_bindgen::prelude::*;
-use web_sys::console;

-include_definition_file!("src/input.json");
+nodarium_definition_file!("src/input.json");

-#[rustfmt::skip]
-#[wasm_bindgen]
+#[nodarium_execute]
 pub fn execute(input: &[i32]) -> Vec<i32> {

-    set_panic_hook();
-
    let args = split_args(input);

    let size = evaluate_int(args[0]);
    let decoded = decode_float(size);
    let negative_size = encode_float(-decoded);

-    console::log_1(&format!("WASM(triangle): input: {:?} -> {}", args[0],decoded).into());
+    log!("WASM(triangle): input: {:?} -> {}", args[0],decoded);

    // [[1,3, x, y, z, x, y,z,x,y,z]];
    wrap_arg(&[
--- a/nodes/max/plantarium/triangle/tests/web.rs
+++ b/nodes/max/plantarium/triangle/tests/web.rs
@@ -1,13 +0,0 @@
-//! Test suite for the Web and headless browsers.
-
-#![cfg(target_arch = "wasm32")]
-
-extern crate wasm_bindgen_test;
-use wasm_bindgen_test::*;
-
-wasm_bindgen_test_configure!(run_in_browser);
-
-#[wasm_bindgen_test]
-fn pass() {
-    assert_eq!(1 + 1, 2);
-}
--- a/nodes/max/plantarium/vec3/Cargo.toml
+++ b/nodes/max/plantarium/vec3/Cargo.toml
@@ -1,5 +1,5 @@
 [package]
-name = "max-plantarium-vec3"
+name = "vec3"
 version = "0.1.0"
 authors = ["Max Richter <jim-x@web.de>"]
 edition = "2018"
@@ -7,22 +7,8 @@ edition = "2018"
 [lib]
 crate-type = ["cdylib", "rlib"]

-[features]
-default = ["console_error_panic_hook"]
-
 [dependencies]
-wasm-bindgen = "0.2.84"
-
-# The `console_error_panic_hook` crate provides better debugging of panics by
-# logging them with `console.error`. This is great for development, but requires
-# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
-# code size when deploying.
 nodarium_utils = { version = "0.1.0", path = "../../../../packages/utils" }
 nodarium_macros = { version = "0.1.0", path = "../../../../packages/macros" }
 serde = { version = "1.0", features = ["derive"] }
-serde-wasm-bindgen = "0.4"
-console_error_panic_hook = { version = "0.1.7", optional = true }
-web-sys = { version = "0.3.69", features = ["console"] }

-[dev-dependencies]
-wasm-bindgen-test = "0.3.34"
--- a/nodes/max/plantarium/vec3/package.json
+++ b/nodes/max/plantarium/vec3/package.json
@@ -1,6 +0,0 @@
-{
-  "scripts": {
-    "build": "wasm-pack build --release --out-name index --no-default-features",
-    "dev": "cargo watch -s 'wasm-pack build --dev --out-name index --no-default-features'"
-  }
-}
--- a/nodes/max/plantarium/vec3/src/lib.rs
+++ b/nodes/max/plantarium/vec3/src/lib.rs
@@ -1,10 +1,10 @@
-use nodarium_macros::include_definition_file;
+use nodarium_macros::nodarium_definition_file;
+use nodarium_macros::nodarium_execute;
 use nodarium_utils::{concat_args, log, split_args};
-use wasm_bindgen::prelude::*;

-include_definition_file!("src/input.json");
+nodarium_definition_file!("src/input.json");

-#[wasm_bindgen]
+#[nodarium_execute]
 pub fn execute(input: &[i32]) -> Vec<i32> {
    let args = split_args(input);
    log!("vec3 input: {:?}", input);
--- a/nodes/max/plantarium/vec3/tests/web.rs
+++ b/nodes/max/plantarium/vec3/tests/web.rs
@@ -1,13 +0,0 @@
-//! Test suite for the Web and headless browsers.
-
-#![cfg(target_arch = "wasm32")]
-
-extern crate wasm_bindgen_test;
-use wasm_bindgen_test::*;
-
-wasm_bindgen_test_configure!(run_in_browser);
-
-#[wasm_bindgen_test]
-fn pass() {
-    assert_eq!(1 + 1, 2);
-}
--- a/nodes/max/plantarium/zig/.gitignore
+++ b/nodes/max/plantarium/zig/.gitignore
@@ -0,0 +1,2 @@
+.zig-cache/
+zig-out/
--- a/nodes/max/plantarium/zig/build.zig
+++ b/nodes/max/plantarium/zig/build.zig
@@ -0,0 +1,19 @@
+const std = @import("std");
+
+pub fn build(b: *std.Build) void {
+    const target = b.resolveTargetQuery(.{ .os_tag = .freestanding, .abi = .none, .cpu_arch = .wasm32 });
+    const release = b.option(bool, "release", "To build a wasm release") orelse false;
+
+    const exe = b.addExecutable(.{
+        .name = "zig",
+        .root_module = b.createModule(.{
+            .root_source_file = b.path("src/main.zig"),
+            .target = target,
+            .optimize = if (release) .ReleaseSmall else .Debug,
+        }),
+    });
+    exe.rdynamic = true;
+    exe.entry = .disabled;
+
+    b.installArtifact(exe);
+}
--- a/nodes/max/plantarium/zig/build.zig.zon
+++ b/nodes/max/plantarium/zig/build.zig.zon
@@ -0,0 +1,81 @@
+.{
+    // This is the default name used by packages depending on this one. For
+    // example, when a user runs `zig fetch --save <url>`, this field is used
+    // as the key in the `dependencies` table. Although the user can choose a
+    // different name, most users will stick with this provided value.
+    //
+    // It is redundant to include "zig" in this name because it is already
+    // within the Zig package namespace.
+    .name = .math,
+    // This is a [Semantic Version](https://semver.org/).
+    // In a future version of Zig it will be used for package deduplication.
+    .version = "0.0.0",
+    // Together with name, this represents a globally unique package
+    // identifier. This field is generated by the Zig toolchain when the
+    // package is first created, and then *never changes*. This allows
+    // unambiguous detection of one package being an updated version of
+    // another.
+    //
+    // When forking a Zig project, this id should be regenerated (delete the
+    // field and run `zig build`) if the upstream project is still maintained.
+    // Otherwise, the fork is *hostile*, attempting to take control over the
+    // original project's identity. Thus it is recommended to leave the comment
+    // on the following line intact, so that it shows up in code reviews that
+    // modify the field.
+    .fingerprint = 0xa927044d8d610b01, // Changing this has security and trust implications.
+    // Tracks the earliest Zig version that the package considers to be a
+    // supported use case.
+    .minimum_zig_version = "0.15.2",
+    // This field is optional.
+    // Each dependency must either provide a `url` and `hash`, or a `path`.
+    // `zig build --fetch` can be used to fetch all dependencies of a package, recursively.
+    // Once all dependencies are fetched, `zig build` no longer requires
+    // internet connectivity.
+    .dependencies = .{
+        // See `zig fetch --save <url>` for a command-line interface for adding dependencies.
+        //.example = .{
+        //    // When updating this field to a new URL, be sure to delete the corresponding
+        //    // `hash`, otherwise you are communicating that you expect to find the old hash at
+        //    // the new URL. If the contents of a URL change this will result in a hash mismatch
+        //    // which will prevent zig from using it.
+        //    .url = "https://example.com/foo.tar.gz",
+        //
+        //    // This is computed from the file contents of the directory of files that is
+        //    // obtained after fetching `url` and applying the inclusion rules given by
+        //    // `paths`.
+        //    //
+        //    // This field is the source of truth; packages do not come from a `url`; they
+        //    // come from a `hash`. `url` is just one of many possible mirrors for how to
+        //    // obtain a package matching this `hash`.
+        //    //
+        //    // Uses the [multihash](https://multiformats.io/multihash/) format.
+        //    .hash = "...",
+        //
+        //    // When this is provided, the package is found in a directory relative to the
+        //    // build root. In this case the package's hash is irrelevant and therefore not
+        //    // computed. This field and `url` are mutually exclusive.
+        //    .path = "foo",
+        //
+        //    // When this is set to `true`, a package is declared to be lazily
+        //    // fetched. This makes the dependency only get fetched if it is
+        //    // actually used.
+        //    .lazy = false,
+        //},
+    },
+    // Specifies the set of files and directories that are included in this package.
+    // Only files and directories listed here are included in the `hash` that
+    // is computed for this package. Only files listed here will remain on disk
+    // when using the zig package manager. As a rule of thumb, one should list
+    // files required for compilation plus any license(s).
+    // Paths are relative to the build root. Use the empty string (`""`) to refer to
+    // the build root itself.
+    // A directory listed here means that all files within, recursively, are included.
+    .paths = .{
+        "build.zig",
+        "build.zig.zon",
+        "src",
+        // For example...
+        //"LICENSE",
+        //"README.md",
+    },
+}
--- a/nodes/max/plantarium/zig/src/input.json
+++ b/nodes/max/plantarium/zig/src/input.json
@@ -0,0 +1,27 @@
+{
+    "id": "max/nodarium/zig",
+    "outputs": [
+        "float"
+    ],
+    "inputs": {
+        "op_type": {
+            "label": "type",
+            "type": "select",
+            "options": [
+                "add",
+                "subtract",
+                "multiply",
+                "divide"
+            ],
+            "internal": true
+        },
+        "a": {
+            "type": "float",
+            "value": 2
+        },
+        "b": {
+            "type": "float",
+            "value": 2
+        }
+    }
+}
--- a/nodes/max/plantarium/zig/src/main.zig
+++ b/nodes/max/plantarium/zig/src/main.zig
@@ -0,0 +1,29 @@
+const std = @import("std");
+
+const def = @embedFile("input.json");
+
+export fn execute(ptr: *anyopaque, len: c_int) c_int {
+    _ = ptr; // autofix
+    _ = len; // autofix
+    return 0;
+}
+
+export fn __alloc(len: c_int) ?*anyopaque {
+    if (len < 0) return null;
+    const mem = std.heap.wasm_allocator.alloc(u8, @intCast(len)) catch return null;
+    return mem.ptr;
+}
+
+export fn __free(ptr: *anyopaque, len: c_int) void {
+    if (len < 1) return;
+    const mem: [*]u8 = @ptrCast(@alignCast(ptr));
+    std.heap.wasm_allocator.free(mem[0..@intCast(len)]);
+}
+
+export fn getDefinitionPtr() *const anyopaque {
+    return def.ptr;
+}
+
+export fn getDefinitionLen() usize {
+    return def.len;
+}
--- a/package.json
+++ b/package.json
@@ -1,13 +1,18 @@
 {
  "scripts": {
+    "postinstall": "pnpm run -r --filter 'ui' build",
    "build": "pnpm build:nodes && pnpm build:app",
    "build:story": "pnpm -r --filter 'ui' story:build",
    "build:app": "BASE_PATH=/ui pnpm -r --filter 'ui' build && pnpm -r --filter 'app' build",
-    "build:nodes": "pnpm -r --filter './nodes/**' build",
+    "build:nodes": "cargo build --workspace --target wasm32-unknown-unknown --release && rm -rf ./app/static/nodes/max/plantarium/ && mkdir -p ./app/static/nodes/max/plantarium/ && cp -R ./target/wasm32-unknown-unknown/release/*.wasm ./app/static/nodes/max/plantarium/",
    "build:deploy": "pnpm build",
-    "dev:all": "pnpm -r dev",
-    "dev:nodes": "pnpm -r --parallel  --filter './nodes/**' dev",
-    "dev": "pnpm -r --filter 'app' --filter './packages/ui' dev"
+    "dev:nodes": "chokidar './nodes/**' --initial -i '/pkg/' -c 'pnpm build:nodes'",
+    "dev:app_ui": "pnpm -r --parallel --filter 'app' --filter './packages/ui' dev",
+    "dev_ui": "pnpm -r --filter 'ui' dev:ui",
+    "dev": "pnpm run \"/^dev:.*/\""
  },
-  "packageManager": "pnpm@10.24.0"
+  "packageManager": "pnpm@10.28.1+sha512.7d7dbbca9e99447b7c3bf7a73286afaaf6be99251eb9498baefa7d406892f67b879adb3a1d7e687fc4ccc1a388c7175fbaae567a26ab44d1067b54fcb0d6a316",
+  "devDependencies": {
+    "chokidar-cli": "catalog:"
+  }
 }
--- a/packages/macros/Cargo.toml
+++ b/packages/macros/Cargo.toml
@@ -11,7 +11,7 @@ repository = "https://github.com/jim-fx/nodes"
 proc-macro = true

 [dependencies]
-syn = { version = "1.0", features = ["full"] }
+syn = { version = "2.0", features = ["full"] }
 serde = { version = "1.0", features = ["derive"] }
 serde_json = { version = "1.0", default-features = false, features = ["alloc"] }
 quote = "1.0"
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Niklas Koll	9b94159f8e	register works	2026-01-23 11:23:07 +01:00
Niklas Koll	aa4d7f73a8	setup zig node	2026-01-23 10:24:21 +01:00
Niklas Koll	1efb94b09c	Add zig to flake packages	2026-01-23 09:07:05 +01:00
Felix Hungenberg	5570d975f5	feat: unmigrate number into universal float, inherit step if unset All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 2m1s Details	2026-01-22 23:57:56 +01:00
Felix Hungenberg	8c1ba2ee65	feat: move add context menu within view if outside All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 1m59s Details	2026-01-22 23:26:56 +01:00
Felix Hungenberg	3e019e4e21	feat: don't move graph on right click drag	2026-01-22 23:26:26 +01:00
Felix Hungenberg	a58b19e935	Merge branch 'main' of github.com:jim-fx/nodarium All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 1m57s Details	2026-01-22 14:06:44 +01:00
Max Richter	6f5c5bb46e	feat: change initial camera position so that nodes are visible All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 2m3s Details	2026-01-22 12:07:37 +01:00
Max Richter	7f2214f15c	fix(utils): make sure we do not build a .wasm file for utils All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 1m54s Details	2026-01-21 17:24:54 +01:00
Max Richter	43ef563ae7	feat: show all nodes in add menu All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 1m57s Details	2026-01-21 17:08:47 +01:00
Felix Hungenberg	714d01da94	chore: move pnpm links to workspace (auto link)	2026-01-21 16:39:54 +01:00
Felix Hungenberg	92308fc43a	chore: run ui debug server from root All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 1m57s Details	2026-01-21 16:36:20 +01:00
Felix Hungenberg	5adf67ed52	Merge branch 'main' of git.max-richter.dev:max/nodarium Some checks failed Deploy to GitHub Pages / build_site (push) Has been cancelled Details	2026-01-21 16:35:34 +01:00
Felix Hungenberg	f54cde734e	fix: integer width	2026-01-21 16:35:13 +01:00
max_richter	70d8095869	Merge pull request 'feat: project manager' (#21 ) from feat/project-manager into main Some checks failed Deploy to GitHub Pages / build_site (push) Has been cancelled Details Reviewed-on: #21	2026-01-21 16:35:03 +01:00
Felix Hungenberg	2a90d5de3f	chore: dev scripts & linting	2026-01-21 16:31:26 +01:00
Max Richter	d7e9e8b8de	chore: remove some old console.logs	2026-01-21 16:01:11 +01:00
Max Richter	bdbaab25a4	feat: initial working version of project manager	2026-01-21 15:02:34 +01:00
Felix Hungenberg	c7bfb0f05b	fix(ui): integrate number input to exports, ui page, benchmark All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 1m46s Details	2026-01-21 11:55:10 +01:00
Felix Hungenberg	d3a46af4c2	chore: update pnpm `corepack up` All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 1m47s Details	2026-01-21 11:24:53 +01:00
Max Richter	4c76c62a3e	feat: add header element	2026-01-21 11:09:51 +01:00
Max Richter	36cf9211d2	fix: run pnpm i :) All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 1m46s Details	2026-01-20 19:28:35 +01:00
Max Richter	97a2ffb683	feat: use workspace instead of link for app/package.json Some checks failed Deploy to GitHub Pages / build_site (push) Failing after 6s Details	2026-01-20 19:18:17 +01:00
Max Richter	fffa8c7cdf	feat: cleanup Dockerfiles and use prepared image for deployments All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 1m46s Details	2026-01-20 19:12:56 +01:00
max_richter	de799c2d55	Merge pull request 'feat/remove-wasm-bindgen' (#19 ) from feat/remove-wasm-bindgen into main All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 1m45s Details Reviewed-on: #19	2026-01-20 18:57:42 +01:00
max_richter	24bef0460c	Merge branch 'main' into feat/remove-wasm-bindgen	2026-01-20 18:57:34 +01:00
Max Richter	93b64fc7dd	feat: add app/Dockerfile All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 2m4s Details	2026-01-20 18:50:54 +01:00
Max Richter	64ac28f60c	chore: cleanup node buildscripts	2026-01-20 18:26:48 +01:00
Max Richter	bd0c2eaacd	Merge remote-tracking branch 'origin/main' into feat/remove-wasm-bindgen	2026-01-20 18:04:56 +01:00
Max Richter	8693c63d16	feat: resize canvases to fit window height All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 2m3s Details Closes #16 The canvases fit their parents size, so adding a wrapper with 100vh solved it. https://threlte.xyz/docs/reference/core/canvas#size	2026-01-20 17:55:58 +01:00
max_richter	fbd82bbdfa	Merge pull request 'feat/drop-node-on-connection' (#18 ) from feat/drop-node-on-connection into main All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 2m2s Details Reviewed-on: #18	2026-01-20 17:47:04 +01:00
max_richter	63997ec262	Merge branch 'main' into feat/drop-node-on-connection	2026-01-20 17:46:55 +01:00
Max Richter	a3d10d6094	feat: drop node on edge Closes #13	2026-01-20 17:46:09 +01:00
Felix Hungenberg	6b6038e546	feat: use new number input All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 2m2s Details fix missing id in html	2026-01-20 16:49:56 +01:00
Felix Hungenberg	3e3d41ae98	feat: open keyboard shortcuts with ? All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 2m4s Details	2026-01-20 16:23:21 +01:00
Felix Hungenberg	a8c76a846e	fmt: ignore pnpm-lock.YAML All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 9m27s Details	2026-01-20 15:19:39 +01:00
Max Richter	f98b90dcd3	Merge remote-tracking branch 'origin/main' into feat/drop-node-on-connection	2026-01-20 15:17:17 +01:00
Max Richter	1ea7d6629f	chore: remove ai comments from dockerfile	2026-01-20 14:44:20 +01:00
Max Richter	617dfb0c9d	feat: add Dockerfile for app to deploy preview	2026-01-20 14:08:45 +01:00
Felix Hungenberg	c46bf9e64f	ci: fix lockfile All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 2m1s Details	2026-01-19 16:57:54 +01:00
Felix Hungenberg	0cfd1e5c96	feat(ui): add id prop for inputs Some checks failed Deploy to GitHub Pages / build_site (push) Failing after 5s Details	2026-01-19 16:43:41 +01:00
Felix Hungenberg	ecfd4d5f2f	feat(ui): cleanup integer input remove warnings, migrate deprecated (dispatch to prop), include min max switch from float input, include esc/enter from float input, include precision, include partial styling from float input	2026-01-19 16:43:07 +01:00
Max Richter	8e5412c25c	Merge remote-tracking branch 'origin/main' into feat/remove-wasm-bindgen	2026-01-19 16:26:06 +01:00
Max Richter	2904c13c41	feat: init	2026-01-19 16:25:29 +01:00
Niklas Koll	e84c715f4c	chore: Add flake and direnv stuff	2026-01-19 12:51:33 +01:00
Max Richter	ecbcc814ed	chore: remove store code	2026-01-19 01:29:28 +01:00
Max Richter	be97387252	feat: trying to remove wasm-bindgen	2026-01-19 01:29:12 +01:00