fix(ci): still trying to get gpg to work

Closes #34

.dprint.jsonc

@@ -42,15 +42,18 @@
     "**/*-lock.yaml",
     "**/yaml.lock",
     "**/.DS_Store",
+    "**/.pnpm-store",
+    "**/.cargo",
+    "**/target",
   ],
   "plugins": [
-    "https://plugins.dprint.dev/typescript-0.95.13.wasm",
+    "https://plugins.dprint.dev/typescript-0.95.15.wasm",
     "https://plugins.dprint.dev/json-0.21.1.wasm",
-    "https://plugins.dprint.dev/markdown-0.20.0.wasm",
+    "https://plugins.dprint.dev/markdown-0.21.1.wasm",
     "https://plugins.dprint.dev/toml-0.7.0.wasm",
     "https://plugins.dprint.dev/dockerfile-0.3.3.wasm",
     "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_yaml-v0.6.0.wasm",
     "https://plugins.dprint.dev/exec-0.6.0.json@a054130d458f124f9b5c91484833828950723a5af3f8ff2bd1523bd47b83b364",
   ],
 }

.gitea/scripts/build.sh

@@ -21,6 +21,8 @@ else
   COMMITS_SINCE_LAST_RELEASE="0"
 fi
 
+commit_message=$(git log -1 --pretty=%B | tr -d '\n' | sed 's/"/\\"/g')
+
 cat >app/static/git.json <<EOF
 {
   "ref": "${GITHUB_REF:-}",
@@ -31,7 +33,7 @@ cat >app/static/git.json <<EOF
   "event_name": "${GITHUB_EVENT_NAME:-}",
   "workflow": "${GITHUB_WORKFLOW:-}",
   "job": "${GITHUB_JOB:-}",
-  "commit_message": "$(git log -1 --pretty=%B)",
+  "commit_message": "${commit_message}",
   "commit_timestamp": "$(git log -1 --pretty=%cI)",
   "branch": "${BRANCH}",
   "commits_since_last_release": "${COMMITS_SINCE_LAST_RELEASE}"

.gitea/scripts/ci-checks.sh

@@ -1,18 +0,0 @@
-#!/usr/bin/env bash
-set -euo pipefail
-
-pnpm build
-
-pnpm lint &
-LINT_PID=$!
-pnpm format:check &
-FORMAT_PID=$!
-pnpm check &
-TYPE_PID=$!
-xvfb-run --auto-servernum --server-args="-screen 0 1280x1024x24" pnpm test &
-TEST_PID=$!
-
-wait $LINT_PID
-wait $FORMAT_PID
-wait $TYPE_PID
-wait $TEST_PID

.gitea/scripts/create-release.sh

@@ -16,7 +16,7 @@ git fetch origin "refs/tags/$TAG:refs/tags/$TAG" --force
 
 # %(contents) gets the whole message.
 # If you want ONLY what you typed after the first line, use %(contents:body)
-NOTES=$(git tag -l "$TAG" --format='%(contents)')
+NOTES=$(git tag -l "$TAG" --format='%(contents)' | sed '/-----BEGIN PGP SIGNATURE-----/,/-----END PGP SIGNATURE-----/d')
 
 if [ -z "$(echo "$NOTES" | tr -d '[:space:]')" ]; then
   echo "❌ Tag message is empty or tag is not annotated"
@@ -52,16 +52,16 @@ fi
 # -------------------------------------------------------------------
 tmp_changelog="CHANGELOG.tmp"
 {
-  echo "## $TAG ($DATE)"
+  echo "# $TAG ($DATE)"
   echo ""
   echo "$NOTES"
   echo ""
   if [ -n "$COMMITS" ]; then
-    echo "### All Commits in this version:"
+    echo "---"
+    echo ""
     echo "$COMMITS"
     echo ""
   fi
-  echo "---"
   echo ""
   if [ -f CHANGELOG.md ]; then
     cat CHANGELOG.md
@@ -73,12 +73,24 @@ mv "$tmp_changelog" CHANGELOG.md
 pnpm exec dprint fmt CHANGELOG.md
 
 # -------------------------------------------------------------------
-# 5. Create release commit
+# 5. Setup GPG signing
 # -------------------------------------------------------------------
-git config user.name "release-bot"
-git config user.email "release-bot@ci"
+echo "$BOT_PGP_PRIVATE_KEY" | base64 -d | gpg --batch --import
+GPG_KEY_ID=$(gpg --list-secret-keys --keyid-format LONG | grep sec | awk '{print $2}' | cut -d'/' -f2)
 
-git add CHANGELOG.md $(find . -name package.json ! -path "*/node_modules/*")
+export GPG_TTY=$(tty)
+echo "allow-loopback-pinentry" >>~/.gnupg/gpg-agent.conf
+gpg-connect-agent reloadagent /bye
+
+git config user.name "nodarium-bot"
+git config user.email "nodarium-bot@max-richter.dev"
+git config --global user.signingkey "$GPG_KEY_ID"
+git config --global commit.gpgsign true
+
+# -------------------------------------------------------------------
+# 6. Create release commit
+# -------------------------------------------------------------------
+git add CHANGELOG.md $(git ls-files '**/package.json')
 
 if git diff --cached --quiet; then
   echo "No changes to commit for release $TAG"
@@ -87,5 +99,4 @@ else
   git push origin main
 fi
 
-cp CHANGELOG.md app/static/CHANGELOG.md
 echo "✅ Release process for $TAG complete"

.gitea/workflows/build-ci-image.yaml

@@ -2,6 +2,8 @@ name: Build & Push CI Image
 
 on:
   push:
+    branches:
+      - main
     paths:
       - "Dockerfile.ci"
       - ".gitea/workflows/build-ci-image.yaml"
@@ -36,4 +38,4 @@ jobs:
           push: true
           tags: |
             git.max-richter.dev/${{ gitea.repository }}-ci:latest
-            git.max-richter.dev/${{ gitea.repository }}-ci:${{ github.sha }}
+            git.max-richter.dev/${{ gitea.repository }}-ci:${{ gitea.sha }}

.gitea/workflows/release.yaml

@@ -8,14 +8,14 @@ on:
     branches: ["*"]
 
 env:
-  PNPM_CACHE_FOLDER: /.pnpm-store
-  CARGO_HOME: /.cargo
+  PNPM_CACHE_FOLDER: .pnpm-store
+  CARGO_HOME: .cargo
   CARGO_TARGET_DIR: target
 
 jobs:
   release:
     runs-on: ubuntu-latest
-    container: git.max-richter.dev/max/nodarium-ci:fd7268d6208aede435e1685817ae6b271c68bd83
+    container: git.max-richter.dev/max/nodarium-ci:bce06da456e3c008851ac006033cfff256015a47
 
     steps:
       - name: 📑 Checkout Code
@@ -47,14 +47,21 @@ jobs:
         run: pnpm install --frozen-lockfile --store-dir ${{ env.PNPM_CACHE_FOLDER }}
 
       - name: 🧹 Quality Control
-        run: ./.gitea/scripts/ci-checks.sh
-
-      - name: 🛠️ Build
-        run: ./.gitea/scripts/build.sh
+        run: |
+          pnpm lint
+          pnpm format:check
+          pnpm check
+          pnpm build
+          xvfb-run --auto-servernum --server-args="-screen 0 1280x1024x24" pnpm test
 
       - name: 🚀 Create Release Commit
         if: gitea.ref_type == 'tag'
         run: ./.gitea/scripts/create-release.sh
+        env:
+          BOT_PGP_PRIVATE_KEY: ${{ secrets.BOT_PGP_PRIVATE_KEY }}
+
+      - name: 🛠️ Build
+        run: ./.gitea/scripts/build.sh
 
       - name: 🏷️ Create Gitea Release
         if: gitea.ref_type == 'tag'

.gitignore

@@ -5,3 +5,5 @@ node_modules/
 
 /target
 .direnv/
+
+.pnpm-store/

CHANGELOG.md

@@ -1,13 +1,133 @@
-## v0.0.2 (2026-02-04)
+# v0.0.4 (2026-02-10)
 
-fix(ci): actually deploy on tags
-fix(app): correctly handle false value in settings
--> This caused a bug where random seed could not be false.
+## Features
+
+- Added shape and leaf nodes, including rotation support.
+- Added high-contrast light theme and improved overall node readability.
+- Enhanced UI with dots background, clearer details, and consistent node coloring.
+- Improved changelog display and parsing robustness.
+
+## Fixes
+
+- Fixed UI issues (backside rendering, missing types, linter errors).
+- Improved CI handling of commit messages and changelog placement.
+
+## Chores
+
+- Simplified CI quality checks.
+- Updated dprint linters.
+- Refactored changelog code.
 
 ---
 
-## v0.0.1 (2026-02-03)
+- [51de3ce](https://git.max-richter.dev/max/nodarium/commit/51de3ced133af07b9432e1137068ef43ddfecbc9) fix(ci): update changelog before building
+- [8d403ba](https://git.max-richter.dev/max/nodarium/commit/8d403ba8039a05b687f050993a6afca7fb743e12) Merge pull request 'feat/shape-node' (#36) from feat/shape-node into main
+- [6bb3011](https://git.max-richter.dev/max/nodarium/commit/6bb301153ac13c31511b6b28ae95c6e0d4c03e9e) Merge remote-tracking branch 'origin/main' into feat/shape-node
+- [02eee5f](https://git.max-richter.dev/max/nodarium/commit/02eee5f9bf4b1bc813d5d28673c4d5d77b392a92) fix: disable macro logs in wasm
+- [4f48a51](https://git.max-richter.dev/max/nodarium/commit/4f48a519a950123390530f1b6040e2430a767745) feat(nodes): add rotation to instance node
+- [97199ac](https://git.max-richter.dev/max/nodarium/commit/97199ac20fb079d6c157962d1a998d63670d8797) feat(nodes): implement leaf node
+- [f36f0cb](https://git.max-richter.dev/max/nodarium/commit/f36f0cb2305692c7be60889bcde7f91179e18b81) feat(ui): show circles only when hovering InputShape
+- [ed3d48e](https://git.max-richter.dev/max/nodarium/commit/ed3d48e07fa6db84bbb24db6dbe044cbc36f049f) fix(runtime): correctly encode 2d shape for wasm nodes
+- [c610d6c](https://git.max-richter.dev/max/nodarium/commit/c610d6c99152d8233235064b81503c2b0dc4ada8) fix(app): show backside in three instances
+- [8865b9b](https://git.max-richter.dev/max/nodarium/commit/8865b9b032bdf5a1385b4e9db0b1923f0e224fdd) feat(node): initial leaf / shape nodes
+- [235ee5d](https://git.max-richter.dev/max/nodarium/commit/235ee5d979fbd70b3e0fb6f09a352218c3ff1e6d) fix(app): wrong linter errors in changelog
+- [23a4857](https://git.max-richter.dev/max/nodarium/commit/23a48572f3913d91d839873cc155a16139c286a6) feat(app): dots background for node interface
+- [e89a46e](https://git.max-richter.dev/max/nodarium/commit/e89a46e146e9e95de57ffdf55b05d16d6fe975f4) feat(app): add error page
+- [cefda41](https://git.max-richter.dev/max/nodarium/commit/cefda41fcf3d5d011c9f7598a4f3f37136602dbd) feat(theme): optimize node readability
+- [21d0f0d](https://git.max-richter.dev/max/nodarium/commit/21d0f0da5a26492fa68ad4897a9b1d9e88857030) feat: add high-contrast-light theme
+- [4620245](https://git.max-richter.dev/max/nodarium/commit/46202451ba3eea73bd1bc6ef5129b3e26ee9315c) ci: simplify ci quality checks
+- [0f4239d](https://git.max-richter.dev/max/nodarium/commit/0f4239d179ddedd3d012ca98b5bc3312afbc8f10) ci: simplify ci quality checks
+- [d9c9bb5](https://git.max-richter.dev/max/nodarium/commit/d9c9bb5234bc8776daf26be99ba77a2145c70649) fix(theme): allow raw html in head style
+- [18802fd](https://git.max-richter.dev/max/nodarium/commit/18802fdc10294a58425f052a4fde4bcf4be58caf) fix(ui): add missing types
+- [b1cbd23](https://git.max-richter.dev/max/nodarium/commit/b1cbd235420c99a11154ef6a899cc7e14faf1c37) feat(app): use same color for node outline and header
+- [33f10da](https://git.max-richter.dev/max/nodarium/commit/33f10da396fdc13edcb8faaee212280102b24f3a) feat(ui): make details stand out
+- [af5b3b2](https://git.max-richter.dev/max/nodarium/commit/af5b3b23ba18d73d6abec60949fb0c9edfc25ff8) fix: make sure that CHANGELOG.md is in correct place
+- [64d75b9](https://git.max-richter.dev/max/nodarium/commit/64d75b9686c494075223a0a318297fe59ec99e81) feat(ui): add InputColor and custom theme
+- [2e6466c](https://git.max-richter.dev/max/nodarium/commit/2e6466ceca1d2131581d1862e93c756affdf6cd6) chore: update dprint linters
+- [20d8e2a](https://git.max-richter.dev/max/nodarium/commit/20d8e2abedf0de30299d947575afef9c8ffd61d9) feat(theme): improve light theme a bit
+- [715e1d0](https://git.max-richter.dev/max/nodarium/commit/715e1d095b8a77feb0cf66bbb444baf0f163adcb) feat(theme): merge edge and connection color
+- [07e2826](https://git.max-richter.dev/max/nodarium/commit/07e2826f16dafa6a07377c9fb591168fa5c2abcf) feat(ui): improve colors of input shape
+- [e0ad97b](https://git.max-richter.dev/max/nodarium/commit/e0ad97b003fd8cb4d950c03e5488a5accf6a37d0) feat(ui): highlight circle on hover on InputShape
+- [93df4a1](https://git.max-richter.dev/max/nodarium/commit/93df4a19ff816e2bdfa093594721f0829f84c9e6) fix(ci): handle newline in commit messages for git.json
+- [d661a4e](https://git.max-richter.dev/max/nodarium/commit/d661a4e4a9dfa6c9c73b5e24a3edcf56e1bbf48c) feat(ui): improve InputShape ux
+- [c7f808c](https://git.max-richter.dev/max/nodarium/commit/c7f808ce2d52925425b49f92edf49d9557f8901d) wip
+- [72d6cd6](https://git.max-richter.dev/max/nodarium/commit/72d6cd6ea2886626823e6e86856f19338c7af3c1) feat(ui): add initial InputShape element
+- [615f2d3](https://git.max-richter.dev/max/nodarium/commit/615f2d3c4866a9e85f3eca398f3f02100c4df355) feat(ui): allow custom snippets in ui section header
+- [2fadb68](https://git.max-richter.dev/max/nodarium/commit/2fadb6802de640d692fdab7d654311df0d7b4836) refactor: make changelog code simpler
+- [9271d3a](https://git.max-richter.dev/max/nodarium/commit/9271d3a7e4cb0cc751b635c2adb518de7b4100c7) fix(app): handle error while parsing commit
+- [13c83ef](https://git.max-richter.dev/max/nodarium/commit/13c83efdb962a6578ade59f10cc574fef0e17534) fix(app): handle error while parsing changelog
+- [e44b73b](https://git.max-richter.dev/max/nodarium/commit/e44b73bebfb1cc8e872cd2fa7d8b6ff3565df374) feat: optimize changelog display
+- [979e9fd](https://git.max-richter.dev/max/nodarium/commit/979e9fd92289eba9f77221c563337c00028e4cf5) feat: improve changelog readbility
+- [544500e](https://git.max-richter.dev/max/nodarium/commit/544500e7fe9ee14412cef76f3c7a32ba6f291656) chore: remove pgp from changelog
+- [aaebbc4](https://git.max-richter.dev/max/nodarium/commit/aaebbc4bc082ee93c2317ce45071c9bc61b0b77e) fix: some stuff with ci
+
+# v0.0.3 (2026-02-07)
+
+## Features
+
+- Edge dragging now highlights valid connection sockets, improving graph editing clarity.
+- InputNumber supports snapping to predefined values while holding Alt.
+- Changelog is accessible directly from the sidebar and now includes git metadata and a list of commits.
+
+## Fixes
+
+- Fixed incorrect socket highlighting when an edge already existed.
+- Corrected initialization of `InputNumber` values outside min/max bounds.
+- Fixed initialization of nested vec3 inputs.
+- Multiple CI fixes to ensure reliable builds, correct environment variables, and proper image handling.
+
+## Maintenance / CI
+
+- Significant CI and Dockerfile cleanup and optimization.
+- Improved git metadata generation during builds.
+- Dependency updates, formatting, and test snapshot updates.
+
+---
+
+- [f8a2a95](https://git.max-richter.dev/max/nodarium/commit/f8a2a95bc18fa3c8c1db67dc0c2b66db1ff0d866) chore: clean CHANGELOG.md
+- [c9dd143](https://git.max-richter.dev/max/nodarium/commit/c9dd143916d758991f3ba30723a32c18b6f98bb5) fix(ci): correctly add release notes from tag to changelog
+- [898dd49](https://git.max-richter.dev/max/nodarium/commit/898dd49aee930350af8645382ef5042765a1fac7) fix(ci): correctly copy changelog to build output
+- [9fb69d7](https://git.max-richter.dev/max/nodarium/commit/9fb69d760fdf92ecc2448e468242970ec48443b0) feat: show commits since last release in changelog
+- [bafbcca](https://git.max-richter.dev/max/nodarium/commit/bafbcca2b8a7cd9f76e961349f11ec84d1e4da63) fix: wrong socket was highlighted when dragging node
+- [8ad9e55](https://git.max-richter.dev/max/nodarium/commit/8ad9e5535cd752ef111504226b4dac57b5adcf3d) feat: highlight possible sockets when dragging edge
+- [11eaeb7](https://git.max-richter.dev/max/nodarium/commit/11eaeb719be7f34af8db8b7908008a15308c0cac) feat(app): display some git metadata in changelog
+- [74c2978](https://git.max-richter.dev/max/nodarium/commit/74c2978cd16d2dd95ce1ae8019dfb9098e52b4b6) chore: cleanup git.json a bit
+- [4fdc247](https://git.max-richter.dev/max/nodarium/commit/4fdc24790490d3f13ee94a557159617f4077a2f9) ci: update build.sh to correct git.json
+- [c3f8b4b](https://git.max-richter.dev/max/nodarium/commit/c3f8b4b5aad7a525fb11ab14c9236374cb60442d) ci: debug available env vars
+- [67591c0](https://git.max-richter.dev/max/nodarium/commit/67591c0572b873d8c7cd00db8efb7dac2d6d4de2) chore: pnpm format
+- [de1f9d6](https://git.max-richter.dev/max/nodarium/commit/de1f9d6ab669b8e699d98b8855e125e21030b5b3) feat(ui): change inputnumber to snap to values when alt is pressed
+- [6acce72](https://git.max-richter.dev/max/nodarium/commit/6acce72fb8c416cc7f6eec99c2ae94d6529e960c) fix(ui): correctly initialize InputNumber
+- [cf8943b](https://git.max-richter.dev/max/nodarium/commit/cf8943b2059aa286e41865caf75058d35498daf7) chore: pnpm update
+- [9e03d36](https://git.max-richter.dev/max/nodarium/commit/9e03d36482bb4f972c384b66b2dcf258f0cd18be) chore: use newest ci image
+- [fd7268d](https://git.max-richter.dev/max/nodarium/commit/fd7268d6208aede435e1685817ae6b271c68bd83) ci: make dockerfile work
+- [6358c22](https://git.max-richter.dev/max/nodarium/commit/6358c22a853ec340be5223fabb8289092e4f4afe) ci: use tagged own image for ci
+- [655b6a1](https://git.max-richter.dev/max/nodarium/commit/655b6a18b282f0cddcc750892e575ee6c311036b) ci: make dockerfile work
+- [37b2bdc](https://git.max-richter.dev/max/nodarium/commit/37b2bdc8bdbd8ded6b22b89214b49de46f788351) ci: update ci Dockerfile to work
+- [94e01d4](https://git.max-richter.dev/max/nodarium/commit/94e01d4ea865f15ce06b52827a1ae6906de5be5e) ci: correctly build and push ci image
+- [35f5177](https://git.max-richter.dev/max/nodarium/commit/35f5177884b62bbf119af1bbf4df61dd0291effb) feat: try to optimize the Dockerfile
+- [ac2c61f](https://git.max-richter.dev/max/nodarium/commit/ac2c61f2211ba96bbdbb542179905ca776537cec) ci: use actual git url in ci
+- [ef3d462](https://git.max-richter.dev/max/nodarium/commit/ef3d46279f4ff9c04d80bb2d9a9e7cfec63b224e) fix(ci): build before testing
+- [703da32](https://git.max-richter.dev/max/nodarium/commit/703da324fabbef0e2c017f0f7a925209fa26bd03) ci: automatically build ci image and store locally
+- [1dae472](https://git.max-richter.dev/max/nodarium/commit/1dae472253ccb5e3766f2270adc053b922f46738) ci: add a git.json metadata file during build
+- [09fdfb8](https://git.max-richter.dev/max/nodarium/commit/09fdfb88cd203ace0e36663ebdb2c8c7ba53f190) chore: update test screenshots
+- [04b63cc](https://git.max-richter.dev/max/nodarium/commit/04b63cc7e2fc4fcfa0973cf40592d11457179db3) feat: add changelog to sidebar
+- [cb6a356](https://git.max-richter.dev/max/nodarium/commit/cb6a35606dfda50b0c81b04902d7a6c8e59458d2) feat(ci): also cache cargo stuff
+- [9c9f3ba](https://git.max-richter.dev/max/nodarium/commit/9c9f3ba3b7c94215a86b0a338a5cecdd87b96b28) fix(ci): use GITHUB_instead of GITEA_ for env vars
+- [08dda2b](https://git.max-richter.dev/max/nodarium/commit/08dda2b2cb4d276846abe30bc260127626bb508a) chore: pnpm format
+- [059129a](https://git.max-richter.dev/max/nodarium/commit/059129a738d02b8b313bb301a515697c7c4315ac) fix(ci): deploy prs and main
+- [437c9f4](https://git.max-richter.dev/max/nodarium/commit/437c9f4a252125e1724686edace0f5f006f58439) feat(ci): add list of all commits to changelog entry
+- [48bf447](https://git.max-richter.dev/max/nodarium/commit/48bf447ce12949d7c29a230806d160840b7847e1) docs: straighten up changelog a bit
+- [548fa4f](https://git.max-richter.dev/max/nodarium/commit/548fa4f0a1a14adc40a74da1182fa6da81eab3df) fix(app): correctly initialize vec3 inputs in nestedsettings
+
+# v0.0.2 (2026-02-04)
+
+## Fixes
+
+---
+
+- []() fix(ci): actually deploy on tags
+- []() fix(app): correctly handle false value in settings
+
+# v0.0.1 (2026-02-03)
 
 chore: format
-
----

Cargo.lock

@@ -62,6 +62,14 @@ version = "1.0.17"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "92ecc6618181def0457392ccd0ee51198e065e016d1d527a7ac1b6dc7c1f09d2"
 
+[[package]]
+name = "leaf"
+version = "0.1.0"
+dependencies = [
+ "nodarium_macros",
+ "nodarium_utils",
+]
+
 [[package]]
 name = "math"
 version = "0.1.0"
@@ -245,6 +253,14 @@ dependencies = [
  "zmij",
 ]
 
+[[package]]
+name = "shape"
+version = "0.1.0"
+dependencies = [
+ "nodarium_macros",
+ "nodarium_utils",
+]
+
 [[package]]
 name = "stem"
 version = "0.1.0"

Dockerfile.ci

@@ -6,6 +6,8 @@ ENV RUSTUP_HOME=/usr/local/rustup \
 
 RUN apt-get update && apt-get install -y \
   ca-certificates=20230311+deb12u1 \
+  gpg=2.2.40-1.1+deb12u2 \
+  gpg-agent=2.2.40-1.1+deb12u2 \
   curl=7.88.1-10+deb12u14 \
   git=1:2.39.5-0+deb12u3 \
   jq=1.6-2.1+deb12u1 \

app/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@nodarium/app",
   "private": true,
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "scripts": {
     "dev": "vite dev",
+    "predev": "rm static/CHANGELOG.md && ln -s ../../CHANGELOG.md static/CHANGELOG.md",
     "build": "svelte-kit sync && vite build",
     "test:unit": "vitest",
     "test": "npm run test:unit -- --run && npm run test:e2e",
@@ -26,6 +27,7 @@
     "file-saver": "^2.0.5",
     "idb": "^8.0.3",
     "jsondiffpatch": "^0.7.3",
+    "micromark": "^4.0.2",
     "tailwindcss": "^4.1.18",
     "three": "^0.182.0"
   },

app/src/app.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/svelte.svg" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     %sveltekit.head%
     <title>Nodes</title>

app/src/lib/graph-interface/background/Background.frag

@@ -11,6 +11,7 @@ uniform vec3 camPos;
 uniform vec2 zoomLimits;
 uniform vec3 backgroundColor;
 uniform vec3 lineColor;
+uniform int gridType; // 0 = grid lines, 1 = dots
 
 // Anti-aliased step: threshold in the same units as `value`
 float aaStep(float threshold, float value, float deriv) {
@@ -78,35 +79,51 @@ void main(void) {
     float ux = (vUv.x - 0.5) * width + cx * cz;
     float uy = (vUv.y - 0.5) * height - cy * cz;
 
-    // extra small grid
-    float m1 = grid(ux, uy, divisions * 4.0,  thickness * 4.0)  * 0.9;
-    float m2 = grid(ux, uy, divisions * 16.0, thickness * 16.0) * 0.5;
-    float xsmall = max(m1, m2);
-    
-    float s3 = circle_grid(ux, uy, cz / 1.6, 1.0) * 0.5;
-    xsmall = max(xsmall, s3);
+    if(gridType == 0) {
+      // extra small grid
+      float m1 = grid(ux, uy, divisions * 4.0,  thickness * 4.0)  * 0.9;
+      float m2 = grid(ux, uy, divisions * 16.0, thickness * 16.0) * 0.5;
+      float xsmall = max(m1, m2);
+      
+      float s3 = circle_grid(ux, uy, cz / 1.6, 1.0) * 0.5;
+      xsmall = max(xsmall, s3);
 
-    // small grid
-    float c1 = grid(ux, uy, divisions,        thickness)        * 0.6;
-    float c2 = grid(ux, uy, divisions * 2.0,  thickness * 2.0)  * 0.5;
-    float small = max(c1, c2);
+      // small grid
+      float c1 = grid(ux, uy, divisions,        thickness)        * 0.6;
+      float c2 = grid(ux, uy, divisions * 2.0,  thickness * 2.0)  * 0.5;
+      float small = max(c1, c2);
 
-    float s1 = circle_grid(ux, uy, cz * 10.0, 2.0) * 0.5;
-    small = max(small, s1);
+      float s1 = circle_grid(ux, uy, cz * 10.0, 2.0) * 0.5;
+      small = max(small, s1);
 
-    // large grid
-    float c3 = grid(ux, uy, divisions / 8.0,  thickness / 8.0)  * 0.5;
-    float c4 = grid(ux, uy, divisions / 2.0,  thickness / 4.0)  * 0.4;
-    float large = max(c3, c4);
+      // large grid
+      float c3 = grid(ux, uy, divisions / 8.0,  thickness / 8.0)  * 0.5;
+      float c4 = grid(ux, uy, divisions / 2.0,  thickness / 4.0)  * 0.4;
+      float large = max(c3, c4);
 
-    float s2 = circle_grid(ux, uy, cz * 20.0, 1.0) * 0.4;
-    large = max(large, s2);
+      float s2 = circle_grid(ux, uy, cz * 20.0, 1.0) * 0.4;
+      large = max(large, s2);
 
-    float c = mix(large, small, min(nz * 2.0 + 0.05, 1.0));
-    c = mix(c, xsmall, clamp((nz - 0.3) / 0.7, 0.0, 1.0));
+      float c = mix(large, small, min(nz * 2.0 + 0.05, 1.0));
+      c = mix(c, xsmall, clamp((nz - 0.3) / 0.7, 0.0, 1.0));
 
-    vec3 color = mix(backgroundColor, lineColor, c); 
+      vec3 color = mix(backgroundColor, lineColor, c); 
+
+      gl_FragColor = vec4(color, 1.0);
+    } else {
+      float large = circle_grid(ux, uy, cz * 20.0, 1.0) * 0.4;
+
+      float medium = circle_grid(ux, uy, cz * 10.0, 1.0) * 0.6;
+
+      float small = circle_grid(ux, uy, cz * 2.5, 1.0) * 0.8;
+
+      float c = mix(large, medium, min(nz * 2.0 + 0.05, 1.0));
+      c = mix(c, small, clamp((nz - 0.3) / 0.7, 0.0, 1.0));
+
+      vec3 color = mix(backgroundColor, lineColor, c); 
+
+      gl_FragColor = vec4(color, 1.0);
+    }
 
-    gl_FragColor = vec4(color, 1.0);
 }
 

app/src/lib/graph-interface/background/Background.svelte

@@ -6,11 +6,12 @@
   import BackgroundVert from './Background.vert';
 
   type Props = {
-    minZoom: number;
-    maxZoom: number;
-    cameraPosition: [number, number, number];
-    width: number;
-    height: number;
+    minZoom?: number;
+    maxZoom?: number;
+    cameraPosition?: [number, number, number];
+    width?: number;
+    height?: number;
+    type?: 'grid' | 'dots' | 'none';
   };
 
   let {
@@ -18,9 +19,18 @@
     maxZoom = 150,
     cameraPosition = [0, 1, 0],
     width = globalThis?.innerWidth || 100,
-    height = globalThis?.innerHeight || 100
+    height = globalThis?.innerHeight || 100,
+    type = 'grid'
   }: Props = $props();
 
+  const typeMap = new Map([
+    ['grid', 0],
+    ['dots', 1],
+    ['none', 2]
+  ]);
+
+  const gridType = $derived(typeMap.get(type) || 0);
+
   let bw = $derived(width / cameraPosition[2]);
   let bh = $derived(height / cameraPosition[2]);
 </script>
@@ -51,6 +61,9 @@
         },
         dimensions: {
           value: [100, 100]
+        },
+        gridType: {
+          value: 0
         }
       }}
       uniforms.camPos.value={cameraPosition}
@@ -59,6 +72,7 @@
       uniforms.lineColor.value={appSettings.value.theme && colors['outline']}
       uniforms.zoomLimits.value={[minZoom, maxZoom]}
       uniforms.dimensions.value={[width, height]}
+      uniforms.gridType.value={gridType}
     />
   </T.Mesh>
 </T.Group>

app/src/lib/graph-interface/components/AddMenu.svelte

@@ -5,19 +5,33 @@
   import { getGraphManager, getGraphState } from '../graph-state.svelte';
 
   type Props = {
+    paddingLeft?: number;
+    paddingRight?: number;
+    paddingTop?: number;
+    paddingBottom?: number;
     onnode: (n: NodeInstance) => void;
   };
 
-  const { onnode }: Props = $props();
+  const padding = 10;
+
+  const {
+    paddingLeft = padding,
+    paddingRight = padding,
+    paddingTop = padding,
+    paddingBottom = padding,
+    onnode
+  }: Props = $props();
 
   const graph = getGraphManager();
   const graphState = getGraphState();
 
   let input: HTMLInputElement;
-  let wrapper: HTMLDivElement;
   let value = $state<string>();
   let activeNodeId = $state<NodeId>();
 
+  const MENU_WIDTH = 150;
+  const MENU_HEIGHT = 350;
+
   const allNodes = graphState.activeSocket
     ? graph.getPossibleNodes(graphState.activeSocket)
     : graph.getNodeDefinitions();
@@ -79,19 +93,52 @@
     }
   }
 
+  function clampAddMenuPosition() {
+    if (!graphState.addMenuPosition) return;
+
+    const camX = graphState.cameraPosition[0];
+    const camY = graphState.cameraPosition[1];
+    const zoom = graphState.cameraPosition[2];
+
+    const halfViewportWidth = (graphState.width / 2) / zoom;
+    const halfViewportHeight = (graphState.height / 2) / zoom;
+
+    const halfMenuWidth = (MENU_WIDTH / 2) / zoom;
+    const halfMenuHeight = (MENU_HEIGHT / 2) / zoom;
+
+    const minX = camX - halfViewportWidth - halfMenuWidth + paddingLeft / zoom;
+    const maxX = camX + halfViewportWidth - halfMenuWidth - paddingRight / zoom;
+    const minY = camY - halfViewportHeight - halfMenuHeight + paddingTop / zoom;
+    const maxY = camY + halfViewportHeight - halfMenuHeight - paddingBottom / zoom;
+
+    const clampedX = Math.max(
+      minX + halfMenuWidth,
+      Math.min(graphState.addMenuPosition[0], maxX - halfMenuWidth)
+    );
+    const clampedY = Math.max(
+      minY + halfMenuHeight,
+      Math.min(graphState.addMenuPosition[1], maxY - halfMenuHeight)
+    );
+
+    if (clampedX !== graphState.addMenuPosition[0] || clampedY !== graphState.addMenuPosition[1]) {
+      graphState.addMenuPosition = [clampedX, clampedY];
+    }
+  }
+
+  $effect(() => {
+    const pos = graphState.addMenuPosition;
+    const zoom = graphState.cameraPosition[2];
+    const width = graphState.width;
+    const height = graphState.height;
+
+    if (pos && zoom && width && height) {
+      clampAddMenuPosition();
+    }
+  });
+
   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>
 
@@ -100,7 +147,7 @@
   position.z={graphState.addMenuPosition?.[1]}
   transform={false}
 >
-  <div class="add-menu-wrapper" bind:this={wrapper}>
+  <div class="add-menu-wrapper">
     <div class="header">
       <input
         id="add-menu"

app/src/lib/graph-interface/edges/Edge.svelte

@@ -2,19 +2,16 @@
   import { colors } from '../graph/colors.svelte';
 
   const circleMaterial = new MeshBasicMaterial({
-    color: colors.edge.clone(),
+    color: colors.outline.clone(),
     toneMapped: false
   });
 
-  let lineColor = $state(colors.edge.clone().convertSRGBToLinear());
-
   $effect.root(() => {
     $effect(() => {
       if (appSettings.value.theme === undefined) {
         return;
       }
-      circleMaterial.color = colors.edge.clone().convertSRGBToLinear();
-      lineColor = colors.edge.clone().convertSRGBToLinear();
+      circleMaterial.color = colors.outline.clone().convertSRGBToLinear();
     });
   });
 
@@ -35,6 +32,7 @@
   import { CubicBezierCurve } from 'three/src/extras/curves/CubicBezierCurve.js';
   import { Vector2 } from 'three/src/math/Vector2.js';
   import { getGraphState } from '../graph-state.svelte';
+  import MeshGradientLineMaterial from './MeshGradientLine/MeshGradientLineMaterial.svelte';
 
   const graphState = getGraphState();
 
@@ -45,12 +43,17 @@
     y2: number;
     z: number;
     id?: string;
+    inputType?: string;
+    outputType?: string;
   };
 
-  const { x1, y1, x2, y2, z, id }: Props = $props();
+  const { x1, y1, x2, y2, z, inputType = 'unknown', outputType = 'unknown', id }: Props = $props();
 
   const thickness = $derived(Math.max(0.001, 0.00082 * Math.exp(0.055 * z)));
 
+  const inputColor = $derived(graphState.colors.getColor(inputType));
+  const outputColor = $derived(graphState.colors.getColor(outputType));
+
   let points = $state<Vector3[]>([]);
 
   let lastId: string | null = null;
@@ -106,9 +109,9 @@
   position.z={y1}
   position.y={0.8}
   rotation.x={-Math.PI / 2}
-  material={circleMaterial}
 >
   <T.CircleGeometry args={[0.5, 16]} />
+  <T.MeshBasicMaterial color={inputColor} toneMapped={false} />
 </T.Mesh>
 
 <T.Mesh
@@ -119,6 +122,7 @@
   material={circleMaterial}
 >
   <T.CircleGeometry args={[0.5, 16]} />
+  <T.MeshBasicMaterial color={outputColor} toneMapped={false} />
 </T.Mesh>
 
 {#if graphState.hoveredEdgeId === id}
@@ -126,7 +130,8 @@
     <MeshLineGeometry {points} />
     <MeshLineMaterial
       width={thickness * 5}
-      color={lineColor}
+      color={inputColor}
+      tonemapped={false}
       opacity={0.5}
       transparent
     />
@@ -135,5 +140,10 @@
 
 <T.Mesh position.x={x1} position.z={y1} position.y={0.1}>
   <MeshLineGeometry {points} />
-  <MeshLineMaterial width={thickness} color={lineColor} />
+  <MeshGradientLineMaterial
+    width={thickness}
+    colorStart={inputColor}
+    colorEnd={outputColor}
+    tonemapped={false}
+  />
 </T.Mesh>

app/src/lib/graph-interface/edges/MeshGradientLine/MeshGradientLineMaterial.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  import { T, useThrelte } from '@threlte/core';
+  import { Color, ShaderMaterial, Vector2 } from 'three';
+  import fragmentShader from './fragment.frag';
+  import type { MeshLineMaterialProps } from './types';
+  import vertexShader from './vertex.vert';
+
+  let {
+    opacity = 1,
+    colorStart = '#ffffff',
+    colorEnd = '#ffffff',
+    dashOffset = 0,
+    dashArray = 0,
+    dashRatio = 0,
+    attenuate = true,
+    width = 1,
+    scaleDown = 0,
+    alphaMap,
+    ref = $bindable(),
+    children,
+    ...props
+  }: MeshLineMaterialProps = $props();
+
+  let { invalidate, size } = useThrelte();
+
+  // svelte-ignore state_referenced_locally
+  const uniforms = {
+    lineWidth: { value: width },
+    colorStart: { value: new Color(colorStart) },
+    colorEnd: { value: new Color(colorEnd) },
+    opacity: { value: opacity },
+    resolution: { value: new Vector2(1, 1) },
+    sizeAttenuation: { value: attenuate ? 1 : 0 },
+    dashArray: { value: dashArray },
+    useDash: { value: dashArray > 0 ? 1 : 0 },
+    dashOffset: { value: dashOffset },
+    dashRatio: { value: dashRatio },
+    scaleDown: { value: scaleDown / 10 },
+    alphaTest: { value: 0 },
+    alphaMap: { value: alphaMap },
+    useAlphaMap: { value: alphaMap ? 1 : 0 }
+  };
+
+  const material = new ShaderMaterial({ uniforms });
+
+  $effect.pre(() => {
+    uniforms.lineWidth.value = width;
+    invalidate();
+  });
+
+  $effect.pre(() => {
+    uniforms.opacity.value = opacity;
+    invalidate();
+  });
+
+  $effect.pre(() => {
+    uniforms.resolution.value.set($size.width, $size.height);
+    invalidate();
+  });
+
+  $effect.pre(() => {
+    uniforms.sizeAttenuation.value = attenuate ? 1 : 0;
+    invalidate();
+  });
+
+  $effect.pre(() => {
+    uniforms.dashArray.value = dashArray;
+    uniforms.useDash.value = dashArray > 0 ? 1 : 0;
+    invalidate();
+  });
+
+  $effect.pre(() => {
+    uniforms.dashOffset.value = dashOffset;
+    invalidate();
+  });
+
+  $effect.pre(() => {
+    uniforms.dashRatio.value = dashRatio;
+    invalidate();
+  });
+
+  $effect.pre(() => {
+    uniforms.scaleDown.value = scaleDown / 10;
+    invalidate();
+  });
+
+  $effect.pre(() => {
+    uniforms.alphaMap.value = alphaMap;
+    uniforms.useAlphaMap.value = alphaMap ? 1 : 0;
+    invalidate();
+  });
+
+  $effect.pre(() => {
+    uniforms.colorStart.value.set(colorStart);
+    invalidate();
+  });
+
+  $effect.pre(() => {
+    uniforms.colorEnd.value.set(colorEnd);
+    invalidate();
+  });
+</script>
+
+<T
+  is={material}
+  bind:ref
+  {fragmentShader}
+  {vertexShader}
+  {...props}
+>
+  {@render children?.({ ref: material })}
+</T>

app/src/lib/graph-interface/edges/MeshGradientLine/fragment.frag

@@ -0,0 +1,30 @@
+uniform vec3 colorStart;
+uniform vec3 colorEnd;
+
+uniform float useDash;
+uniform float dashArray;
+uniform float dashOffset;
+uniform float dashRatio;
+uniform sampler2D alphaMap;
+uniform float useAlphaMap;
+
+varying vec2 vUV;
+varying vec4 vColor;
+varying float vCounters;
+
+vec4 CustomLinearTosRGB( in vec4 value ) {
+	return vec4( mix( pow( value.rgb, vec3( 0.41666 ) ) * 1.055 - vec3( 0.055 ), value.rgb * 12.92, vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) ) ), value.a );
+}
+
+void main()	{
+
+  vec4 c = mix(vec4(colorStart,1.0),vec4(colorEnd, 1.0), vCounters);
+
+	if( useAlphaMap == 1. ) c.a *= texture2D( alphaMap, vUV ).r;
+
+	if( useDash == 1. ){
+		c.a *= ceil(mod(vCounters + dashOffset, dashArray) - (dashArray * dashRatio));
+	}
+
+	gl_FragColor = CustomLinearTosRGB(c);
+}

app/src/lib/graph-interface/edges/MeshGradientLine/types.ts

@@ -0,0 +1,68 @@
+import type { Props } from '@threlte/core';
+import type { BufferGeometry, Vector3 } from 'three';
+import type { ColorRepresentation, ShaderMaterial, Texture } from 'three';
+
+export type MeshLineGeometryProps = Props<BufferGeometry> & {
+  /**
+   * @default []
+   */
+  points: Vector3[];
+
+  /**
+   * @default 'none'
+   */
+  shape?: 'none' | 'taper' | 'custom';
+
+  /**
+   * @default () => 1
+   */
+  shapeFunction?: (p: number) => number;
+};
+
+export type MeshLineMaterialProps =
+  & Omit<
+    Props<ShaderMaterial>,
+    'uniforms' | 'fragmentShader' | 'vertexShader'
+  >
+  & {
+    /**
+     * @default 1
+     */
+    opacity?: number;
+
+    /**
+     * @default '#ffffff'
+     */
+    color?: ColorRepresentation;
+
+    /**
+     * @default 0
+     */
+    dashOffset?: number;
+
+    /**
+     * @default 0
+     */
+    dashArray?: number;
+
+    /**
+     * @default 0
+     */
+    dashRatio?: number;
+
+    /**
+     * @default true
+     */
+    attenuate?: boolean;
+
+    /**
+     * @default 1
+     */
+    width?: number;
+
+    /**
+     * @default 0
+     */
+    scaleDown?: number;
+    alphaMap?: Texture | undefined;
+  };

app/src/lib/graph-interface/edges/MeshGradientLine/vertex.vert

@@ -0,0 +1,83 @@
+attribute vec3 previous;
+attribute vec3 next;
+attribute float side;
+attribute float width;
+attribute float counters;
+
+uniform vec2 resolution;
+uniform float lineWidth;
+uniform vec3 color;
+uniform float opacity;
+uniform float sizeAttenuation;
+uniform float scaleDown;
+
+varying vec2 vUV;
+varying vec4 vColor;
+varying float vCounters;
+
+vec2 intoScreen(vec4 i) {
+    return resolution * (0.5 * i.xy / i.w + 0.5);
+}
+
+void main() {
+    float aspect = resolution.y / resolution.x;
+
+    mat4 m = projectionMatrix * modelViewMatrix;
+
+    vec4 currentClip = m * vec4( position, 1.0 );
+    vec4 prevClip = m * vec4( previous, 1.0 );
+    vec4 nextClip = m * vec4( next, 1.0 );
+
+    vec4 currentNormed = currentClip / currentClip.w;
+    vec4 prevNormed = prevClip / prevClip.w;
+    vec4 nextNormed = nextClip / nextClip.w;
+
+    vec2 currentScreen = intoScreen(currentNormed);
+    vec2 prevScreen = intoScreen(prevNormed);
+    vec2 nextScreen = intoScreen(nextNormed);
+
+    float actualWidth = lineWidth * width;
+
+    vec2 dir;
+    if(nextScreen == currentScreen) {
+        dir = normalize( currentScreen - prevScreen );
+    } else if(prevScreen == currentScreen) {
+        dir = normalize( nextScreen - currentScreen );
+    } else {
+        vec2 inDir = currentScreen - prevScreen;
+        vec2 outDir = nextScreen - currentScreen;
+        vec2 fullDir = nextScreen - prevScreen;
+
+        if(length(fullDir) > 0.0) {
+            dir = normalize(fullDir);
+        } else if(length(inDir) > 0.0){
+            dir = normalize(inDir);
+        } else {
+            dir = normalize(outDir);
+        }
+    }
+
+    vec2 normal = vec2(-dir.y, dir.x);
+
+    if(sizeAttenuation != 0.0) {
+        normal /= currentClip.w;
+        normal *= min(resolution.x, resolution.y);
+    }
+
+    if (scaleDown > 0.0) {
+        float dist = length(nextNormed - prevNormed);
+        normal *= smoothstep(0.0, scaleDown, dist);
+    }
+
+    vec2 offsetInScreen = actualWidth * normal * side * 0.5;
+
+    vec2 withOffsetScreen = currentScreen + offsetInScreen;
+    vec3 withOffsetNormed = vec3((2.0 * withOffsetScreen/resolution - 1.0), currentNormed.z);
+
+    vCounters = counters;
+    vColor = vec4( color, opacity );
+    vUV = uv;
+
+    gl_Position = currentClip.w * vec4(withOffsetNormed, 1.0);
+
+}

app/src/lib/graph-interface/graph-manager.svelte.ts

@@ -29,8 +29,9 @@ function areSocketsCompatible(
   output: string | undefined,
   inputs: string | (string | undefined)[] | undefined
 ) {
+  if (output === '*') return true;
   if (Array.isArray(inputs) && output) {
-    return inputs.includes(output);
+    return inputs.includes('*') || inputs.includes(output);
   }
   return inputs === output;
 }

app/src/lib/graph-interface/graph-state.svelte.ts

@@ -3,6 +3,8 @@ import { getContext, setContext } from 'svelte';
 import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 import type { OrthographicCamera, Vector3 } from 'three';
 import type { GraphManager } from './graph-manager.svelte';
+import { ColorGenerator } from './graph/colors';
+import { getNodeHeight, getSocketPosition } from './helpers/nodeHelpers';
 
 const graphStateKey = Symbol('graph-state');
 export function getGraphState() {
@@ -27,7 +29,32 @@ type EdgeData = {
   points: Vector3[];
 };
 
+const predefinedColors = {
+  path: {
+    hue: 80,
+    lightness: 20,
+    saturation: 80
+  },
+  float: {
+    hue: 70,
+    lightness: 10,
+    saturation: 0
+  },
+  geometry: {
+    hue: 0,
+    lightness: 50,
+    saturation: 70
+  },
+  '*': {
+    hue: 200,
+    lightness: 20,
+    saturation: 100
+  }
+} as const;
+
 export class GraphState {
+  colors = new ColorGenerator(predefinedColors);
+
   constructor(private graph: GraphManager) {
     $effect.root(() => {
       $effect(() => {
@@ -83,7 +110,7 @@ export class GraphState {
   addMenuPosition = $state<[number, number] | null>(null);
 
   snapToGrid = $state(false);
-  showGrid = $state(true);
+  backgroundType = $state<'grid' | 'dots' | 'none'>('grid');
   showHelp = $state(false);
 
   cameraDown = [0, 0];
@@ -159,44 +186,27 @@ export class GraphState {
     return 1;
   }
 
-  getSocketPosition(
-    node: NodeInstance,
-    index: string | number
-  ): [number, number] {
-    if (typeof index === 'number') {
-      return [
-        (node?.state?.x ?? node.position[0]) + 20,
-        (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
-      ];
+  tryConnectToDebugNode(nodeId: number) {
+    const node = this.graph.nodes.get(nodeId);
+    if (!node) return;
+    if (node.type.endsWith('/debug')) return;
+    if (!node.state.type?.outputs?.length) return;
+    for (const _node of this.graph.nodes.values()) {
+      if (_node.type.endsWith('/debug')) {
+        this.graph.createEdge(node, 0, _node, 'input');
+        return;
+      }
     }
-  }
 
-  private nodeHeightCache: Record<string, number> = {};
-  getNodeHeight(nodeTypeId: string) {
-    if (nodeTypeId in this.nodeHeightCache) {
-      return this.nodeHeightCache[nodeTypeId];
+    const debugNode = this.graph.createNode({
+      type: 'max/plantarium/debug',
+      position: [node.position[0] + 30, node.position[1]],
+      props: {}
+    });
+
+    if (debugNode) {
+      this.graph.createEdge(node, 0, debugNode, 'input');
     }
-    const node = this.graph.getNodeType(nodeTypeId);
-    if (!node?.inputs) {
-      return 5;
-    }
-    const height = 5
-      + 10
-        * Object.keys(node.inputs).filter(
-          (p) =>
-            p !== 'seed'
-            && node?.inputs
-            && !(node?.inputs?.[p] !== undefined && 'setting' in node.inputs[p])
-            && node.inputs[p].hidden !== true
-        ).length;
-    this.nodeHeightCache[nodeTypeId] = height;
-    return height;
   }
 
   copyNodes() {
@@ -256,7 +266,7 @@ export class GraphState {
         if (edge[3] === index) {
           node = edge[0];
           index = edge[1];
-          position = this.getSocketPosition(node, index);
+          position = getSocketPosition(node, index);
           this.graph.removeEdge(edge);
           break;
         }
@@ -276,7 +286,7 @@ export class GraphState {
         return {
           node,
           index,
-          position: this.getSocketPosition(node, index)
+          position: getSocketPosition(node, index)
         };
       });
   }
@@ -313,7 +323,7 @@ export class GraphState {
         for (const node of this.graph.nodes.values()) {
           const x = node.position[0];
           const y = node.position[1];
-          const height = this.getNodeHeight(node.type);
+          const height = getNodeHeight(node.state.type!);
           if (downX > x && downX < x + 20 && downY > y && downY < y + height) {
             clickedNodeId = node.id;
             break;
@@ -325,14 +335,12 @@ export class GraphState {
   }
 
   isNodeInView(node: NodeInstance) {
-    const height = this.getNodeHeight(node.type);
+    const height = getNodeHeight(node.state.type!);
     const width = 20;
-    return (
-      node.position[0] > this.cameraBounds[0] - width
+    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[1] < this.cameraBounds[3];
   }
 
   openNodePalette() {

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

@@ -11,15 +11,18 @@
   import Debug from '../debug/Debug.svelte';
   import EdgeEl from '../edges/Edge.svelte';
   import { getGraphManager, getGraphState } from '../graph-state.svelte';
+  import { getSocketPosition } from '../helpers/nodeHelpers';
   import NodeEl from '../node/Node.svelte';
   import { maxZoom, minZoom } from './constants';
   import { FileDropEventManager } from './drop.events';
   import { MouseEventManager } from './mouse.events';
 
   const {
-    keymap
+    keymap,
+    addMenuPadding
   }: {
     keymap: ReturnType<typeof createKeyMap>;
+    addMenuPadding?: { left?: number; right?: number; bottom?: number; top?: number };
   } = $props();
 
   const graph = getGraphManager();
@@ -36,8 +39,8 @@
       return [0, 0, 0, 0];
     }
 
-    const pos1 = graphState.getSocketPosition(fromNode, edge[1]);
-    const pos2 = graphState.getSocketPosition(toNode, edge[3]);
+    const pos1 = getSocketPosition(fromNode, edge[1]);
+    const pos2 = getSocketPosition(toNode, edge[3]);
     return [pos1[0], pos1[1], pos2[0], pos2[1]];
   }
 
@@ -92,6 +95,13 @@
     graphState.activeSocket = null;
     graphState.addMenuPosition = null;
   }
+
+  function getSocketType(node: NodeInstance, index: number | string): string {
+    if (typeof index === 'string') {
+      return node.state.type?.inputs?.[index].type || 'unknown';
+    }
+    return node.state.type?.outputs?.[index] || 'unknown';
+  }
 </script>
 
 <svelte:window
@@ -132,8 +142,9 @@
       position={graphState.cameraPosition}
     />
 
-    {#if graphState.showGrid !== false}
+    {#if graphState.backgroundType !== 'none'}
       <Background
+        type={graphState.backgroundType}
         cameraPosition={graphState.cameraPosition}
         {maxZoom}
         {minZoom}
@@ -159,12 +170,20 @@
 
     {#if graph.status === 'idle'}
       {#if graphState.addMenuPosition}
-        <AddMenu onnode={handleNodeCreation} />
+        <AddMenu
+          onnode={handleNodeCreation}
+          paddingTop={addMenuPadding?.top}
+          paddingRight={addMenuPadding?.right}
+          paddingBottom={addMenuPadding?.bottom}
+          paddingLeft={addMenuPadding?.left}
+        />
       {/if}
 
       {#if graphState.activeSocket}
         <EdgeEl
           z={graphState.cameraPosition[2]}
+          inputType={getSocketType(graphState.activeSocket.node, graphState.activeSocket.index)}
+          outputType={getSocketType(graphState.activeSocket.node, graphState.activeSocket.index)}
           x1={graphState.activeSocket.position[0]}
           y1={graphState.activeSocket.position[1]}
           x2={graphState.edgeEndPosition?.[0] ?? graphState.mousePosition[0]}
@@ -177,6 +196,8 @@
         <EdgeEl
           id={graph.getEdgeId(edge)}
           z={graphState.cameraPosition[2]}
+          inputType={getSocketType(edge[0], edge[1])}
+          outputType={getSocketType(edge[2], edge[3])}
           {x1}
           {y1}
           {x2}
@@ -199,7 +220,6 @@
             <NodeEl
               {node}
               inView={graphState.isNodeInView(node)}
-              z={graphState.cameraPosition[2]}
             />
           {/each}
         </div>

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

@@ -13,11 +13,13 @@
     settings?: Record<string, unknown>;
 
     activeNode?: NodeInstance;
-    showGrid?: boolean;
+    backgroundType?: 'grid' | 'dots' | 'none';
     snapToGrid?: boolean;
     showHelp?: boolean;
     settingTypes?: Record<string, unknown>;
 
+    addMenuPadding?: { left?: number; right?: number; bottom?: number; top?: number };
+
     onsave?: (save: Graph) => void;
     onresult?: (result: unknown) => void;
   };
@@ -25,9 +27,10 @@
   let {
     graph,
     registry,
+    addMenuPadding,
     settings = $bindable(),
     activeNode = $bindable(),
-    showGrid = $bindable(true),
+    backgroundType = $bindable('grid'),
     snapToGrid = $bindable(true),
     showHelp = $bindable(false),
     settingTypes = $bindable(),
@@ -43,7 +46,7 @@
 
   const graphState = new GraphState(manager);
   $effect(() => {
-    graphState.showGrid = showGrid;
+    graphState.backgroundType = backgroundType;
     graphState.snapToGrid = snapToGrid;
     graphState.showHelp = showHelp;
   });
@@ -83,4 +86,4 @@
   });
 </script>
 
-<GraphEl {keymap} />
+<GraphEl {keymap} {addMenuPadding} />

app/src/lib/graph-interface/graph/colors.svelte.ts

@@ -9,7 +9,7 @@ const variables = [
   'outline',
   'active',
   'selected',
-  'edge'
+  'connection'
 ] as const;
 
 function getColor(variable: (typeof variables)[number]) {

app/src/lib/graph-interface/graph/colors.ts

@@ -0,0 +1,44 @@
+type Color = { hue: number; saturation: number; lightness: number };
+
+export class ColorGenerator {
+  private colors: Map<string, Color> = new Map();
+  private lightnessLevels = [10, 60];
+
+  constructor(predefined: Record<string, Color>) {
+    for (const [id, colorStr] of Object.entries(predefined)) {
+      this.colors.set(id, colorStr);
+    }
+  }
+
+  public getColor(id: string): string {
+    if (this.colors.has(id)) {
+      return this.colorToHsl(this.colors.get(id)!);
+    }
+
+    const newColor = this.generateNewColor();
+    this.colors.set(id, newColor);
+    return this.colorToHsl(newColor);
+  }
+
+  private generateNewColor(): Color {
+    const existingHues = Array.from(this.colors.values()).map(c => c.hue).sort();
+    let hue = existingHues[0];
+    let attempts = 0;
+
+    while (
+      existingHues.some(h => Math.abs(h - hue) < 30 || Math.abs(h - hue) > 330)
+      && attempts < 360
+    ) {
+      hue = (hue + 30) % 360;
+      attempts++;
+    }
+
+    const lightness = 60;
+
+    return { hue, lightness, saturation: 100 };
+  }
+
+  private colorToHsl(c: Color): string {
+    return `hsl(${c.hue}, ${c.saturation}%, ${c.lightness}%)`;
+  }
+}

app/src/lib/graph-interface/graph/mouse.events.ts

@@ -3,6 +3,7 @@ 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 { getNodeHeight } from '../helpers/nodeHelpers';
 import { maxZoom, minZoom, zoomSpeed } from './constants';
 import { EdgeInteractionManager } from './edge.events';
 
@@ -166,15 +167,14 @@ export class MouseEventManager {
 
     if (this.state.mouseDown) return;
     this.state.edgeEndPosition = null;
+    const target = event.target as HTMLElement;
 
-    if (event.target instanceof HTMLElement) {
-      if (
-        event.target.nodeName !== 'CANVAS'
-        && !event.target.classList.contains('node')
-        && !event.target.classList.contains('content')
-      ) {
-        return;
-      }
+    if (
+      target.nodeName !== 'CANVAS'
+      && !target.classList.contains('node')
+      && !target.classList.contains('content')
+    ) {
+      return;
     }
 
     const mx = event.clientX - this.state.rect.x;
@@ -189,6 +189,10 @@ export class MouseEventManager {
 
     // if we clicked on a node
     if (clickedNodeId !== -1) {
+      if (event.ctrlKey && event.shiftKey) {
+        this.state.tryConnectToDebugNode(clickedNodeId);
+        return;
+      }
       if (this.state.activeNodeId === -1) {
         this.state.activeNodeId = clickedNodeId;
         // if the selected node is the same as the clicked node
@@ -290,7 +294,7 @@ export class MouseEventManager {
         if (!node?.state) continue;
         const x = node.position[0];
         const y = node.position[1];
-        const height = this.state.getNodeHeight(node.type);
+        const height = getNodeHeight(node.state.type!);
         if (x > x1 - 20 && x < x2 && y > y1 - height && y < y2) {
           this.state.selectedNodes?.add(node.id);
         } else {

app/src/lib/graph-interface/helpers/index.ts

@@ -35,6 +35,9 @@ export function createNodePath({
   rightBump = false,
   aspectRatio = 1
 } = {}) {
+  const leftBumpTopY = y + height / 2;
+  const leftBumpBottomY = y - height / 2;
+
   return `M0,${cornerTop}
       ${
     cornerTop
@@ -64,9 +67,7 @@ export function createNodePath({
   }
       ${
     leftBump
-      ? ` V${y + height / 2} C${depth},${y + height / 2} ${depth},${y - height / 2} 0,${
-        y - height / 2
-      }`
+      ? ` V${leftBumpTopY} C${depth},${leftBumpTopY} ${depth},${leftBumpBottomY} 0,${leftBumpBottomY}`
       : ` H0`
   }
       Z`.replace(/\s+/g, ' ');

app/src/lib/graph-interface/helpers/nodeHelpers.ts

@@ -0,0 +1,71 @@
+import type { NodeDefinition, NodeInstance } from '@nodarium/types';
+
+export function getParameterHeight(node: NodeDefinition, inputKey: string) {
+  const input = node.inputs?.[inputKey];
+  if (!input) {
+    return 0;
+  }
+
+  if (inputKey === 'seed') return 0;
+  if (!node.inputs) return 0;
+  if ('setting' in input) return 0;
+  if (input.hidden) return 0;
+
+  if (input.type === 'shape' && input.external !== true) {
+    return 200;
+  }
+  if (
+    input?.label !== '' && !input.external && input.type !== 'path'
+    && input.type !== 'geometry'
+  ) {
+    return 100;
+  }
+  return 50;
+}
+
+export function getSocketPosition(
+  node: NodeInstance,
+  index: string | number
+): [number, number] {
+  if (typeof index === 'number') {
+    return [
+      (node?.state?.x ?? node.position[0]) + 20,
+      (node?.state?.y ?? node.position[1]) + 2.5 + 10 * index
+    ];
+  } else {
+    let height = 5;
+    const nodeType = node.state.type!;
+    const inputs = nodeType.inputs || {};
+    for (const inputKey in inputs) {
+      const h = getParameterHeight(nodeType, inputKey) / 10;
+      if (inputKey === index) {
+        height += h / 2;
+        break;
+      }
+      height += h;
+    }
+    return [
+      node?.state?.x ?? node.position[0],
+      (node?.state?.y ?? node.position[1]) + height
+    ];
+  }
+}
+
+const nodeHeightCache: Record<string, number> = {};
+export function getNodeHeight(node: NodeDefinition) {
+  if (node.id in nodeHeightCache) {
+    return nodeHeightCache[node.id];
+  }
+  if (!node?.inputs) {
+    return 5;
+  }
+  let height = 5;
+
+  for (const key in node.inputs) {
+    const h = getParameterHeight(node, key) / 10;
+    height += h;
+  }
+
+  nodeHeightCache[node.id] = height;
+  return height;
+}

app/src/lib/graph-interface/node/Node.frag

@@ -1,56 +1,88 @@
-
 varying vec2 vUv;
 
 uniform float uWidth;
 uniform float uHeight;
+uniform float uZoom; 
 
 uniform vec3 uColorDark;
 uniform vec3 uColorBright;
-
 uniform vec3 uStrokeColor;
-uniform float uStrokeWidth;
+
+const float uHeaderHeight = 5.0; 
+uniform float uSectionHeights[16]; 
+uniform int uNumSections;
 
 float msign(in float x) { return (x < 0.0) ? -1.0 : 1.0; }
+float sdCircle(vec2 p, float r) { return length(p) - r; }
 
 vec4 roundedBoxSDF( in vec2 p, in vec2 b, in float r, in float s) {
   vec2 q = abs(p) - b + r;
   float l = b.x + b.y + 1.570796 * r;
-
   float k1 = min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
   float k2 = ((q.x > 0.0) ? atan(q.y, q.x) : 1.570796);
   float k3 = 3.0 + 2.0 * msign(min(p.x, -p.y)) - msign(p.x);
   float k4 = msign(p.x * p.y);
   float k5 = r * k2 + max(-q.x, 0.0);
-
   float ra = s * round(k1 / s);
   float l2 = l + 1.570796 * ra;
-
   return vec4(k1 - ra, k3 * l2 + k4 * (b.y + ((q.y > 0.0) ? k5 + k2 * ra : q.y)), 4.0 * l2, k1);
 }
 
 void main(){
+  float strokeWidth = mix(2.0, 0.5, uZoom);
+  
+  float borderRadius = 0.5;
+  float dentRadius = 0.8;
 
-  float y = (1.0-vUv.y) * uHeight;
+  float y = (1.0 - vUv.y) * uHeight;
   float x = vUv.x * uWidth;
-
   vec2 size = vec2(uWidth, uHeight);
-  vec2 uv = (vUv - 0.5) * 2.0;
+  vec2 uvCenter = (vUv - 0.5) * 2.0;
 
-  float u_border_radius = 0.4;
-  vec4 distance = roundedBoxSDF(uv * size, size, u_border_radius*2.0, 0.0);
+  vec4 boxData = roundedBoxSDF(uvCenter * size, size, borderRadius * 2.0, 0.0);
+  float sceneSDF = boxData.w;
 
-  if (distance.w > 0.0 ) {
-    // outside
-    gl_FragColor = vec4(0.0,0.0,0.0, 0.0);
-  }else{
-    if (distance.w > -uStrokeWidth || mod(y+5.0, 10.0) < uStrokeWidth/2.0) {
-      // draw the outer stroke
-      gl_FragColor = vec4(uStrokeColor, 1.0);
-    }else if (y<5.0){
-      // draw the header
-      gl_FragColor = vec4(uColorBright, 1.0);
-    }else{
-      gl_FragColor = vec4(uColorDark, 1.0);
-    }
+  vec2 headerDentPos = vec2(uWidth, uHeaderHeight * 0.5);
+  float headerDentDist = sdCircle(vec2(x, y) - headerDentPos, dentRadius);
+  sceneSDF = max(sceneSDF, -headerDentDist*2.0);
+
+  float currentYBoundary = uHeaderHeight;
+  float previousYBoundary = uHeaderHeight;
+
+  for (int i = 0; i < 16; i++) {
+    if (i >= uNumSections) break;
+    
+    float sectionHeight = uSectionHeights[i];
+    currentYBoundary += sectionHeight;
+    
+    float centerY = previousYBoundary + (sectionHeight * 0.5);
+    vec2 circlePos = vec2(0.0, centerY);
+    float circleDist = sdCircle(vec2(x, y) - circlePos, dentRadius);
+    
+    sceneSDF = max(sceneSDF, -circleDist*2.0);
+    previousYBoundary = currentYBoundary;
+  }
+
+  if (sceneSDF > 0.05) { 
+    gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
+    return;
+  }
+
+  vec3 finalColor = (y < uHeaderHeight) ? uColorBright : uColorDark;
+  bool isDivider = false;
+
+  float dividerY = uHeaderHeight;
+  if (abs(y - dividerY) < strokeWidth * 0.25) isDivider = true;
+  
+  for (int i = 0; i < 16; i++) {
+    if (i >= uNumSections - 1) break;
+    dividerY += uSectionHeights[i];
+    if (abs(y - dividerY) < strokeWidth * 0.25) isDivider = true;
+  }
+
+  if (sceneSDF > -strokeWidth || isDivider) {
+    gl_FragColor = vec4(uStrokeColor, 1.0);
+  } else {
+    gl_FragColor = vec4(finalColor, 1.0);
   }
 }

app/src/lib/graph-interface/node/Node.svelte

@@ -5,6 +5,7 @@
   import { type Mesh } from 'three';
   import { getGraphState } from '../graph-state.svelte';
   import { colors } from '../graph/colors.svelte';
+  import { getNodeHeight, getParameterHeight } from '../helpers/nodeHelpers';
   import NodeFrag from './Node.frag';
   import NodeVert from './Node.vert';
   import NodeHtml from './NodeHTML.svelte';
@@ -14,9 +15,10 @@
   type Props = {
     node: NodeInstance;
     inView: boolean;
-    z: number;
   };
-  let { node = $bindable(), inView, z }: Props = $props();
+  let { node = $bindable(), inView }: Props = $props();
+
+  const nodeType = $derived(node.state.type!);
 
   const isActive = $derived(graphState.activeNodeId === node.id);
   const isSelected = $derived(graphState.selectedNodes.has(node.id));
@@ -29,9 +31,18 @@
         : colors.outline)
   );
 
+  const sectionHeights = $derived(
+    Object
+      .keys(nodeType.inputs || {})
+      .map(key => getParameterHeight(nodeType, key) / 10)
+      .filter(b => !!b)
+  );
+
   let meshRef: Mesh | undefined = $state();
 
-  const height = graphState.getNodeHeight(node.type);
+  const height = getNodeHeight(node.state.type!);
+
+  const zoom = $derived(graphState.cameraPosition[2]);
 
   $effect(() => {
     if (meshRef && !node.state?.mesh) {
@@ -39,6 +50,10 @@
       graphState.updateNodePosition(node);
     }
   });
+  const zoomValue = $derived(
+    (Math.log(graphState.cameraPosition[2]) - Math.log(1)) / (Math.log(40) - Math.log(1))
+  );
+  // const zoomValue = (graphState.cameraPosition[2] - 1) / 39;
 </script>
 
 <T.Mesh
@@ -47,7 +62,7 @@
   position.y={0.8}
   rotation.x={-Math.PI / 2}
   bind:ref={meshRef}
-  visible={inView && z < 7}
+  visible={inView && zoom < 7}
 >
   <T.PlaneGeometry args={[20, height]} radius={1} />
   <T.ShaderMaterial
@@ -58,13 +73,18 @@
       uColorBright: { value: colors['layer-2'] },
       uColorDark: { value: colors['layer-1'] },
       uStrokeColor: { value: colors.outline.clone() },
-      uStrokeWidth: { value: 1.0 },
+      uSectionHeights: { value: [5, 10] },
+      uNumSections: { value: 2 },
       uWidth: { value: 20 },
-      uHeight: { value: height }
+      uHeight: { value: 200 },
+      uZoom: { value: 1.0 }
     }}
-    uniforms.uStrokeColor.value={strokeColor.clone()}
-    uniforms.uStrokeWidth.value={(7 - z) / 3}
+    uniforms.uZoom.value={zoomValue}
+    uniforms.uHeight.value={height}
+    uniforms.uSectionHeights.value={sectionHeights}
+    uniforms.uNumSections.value={sectionHeights.length}
+    uniforms.uStrokeColor.value={strokeColor}
   />
 </T.Mesh>
 
-<NodeHtml bind:node {inView} {isActive} {isSelected} {z} />
+<NodeHtml bind:node {inView} {isActive} {isSelected} z={zoom} />

app/src/lib/graph-interface/node/NodeHeader.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
-  import type { NodeInstance } from '@nodarium/types';
+  import { appSettings } from '$lib/settings/app-settings.svelte';
+  import type { NodeInstance, Socket } from '@nodarium/types';
   import { getGraphState } from '../graph-state.svelte';
   import { createNodePath } from '../helpers/index.js';
+  import { getSocketPosition } from '../helpers/nodeHelpers';
 
   const graphState = getGraphState();
 
@@ -14,7 +16,7 @@
       graphState.setDownSocket?.({
         node,
         index: 0,
-        position: graphState.getSocketPosition?.(node, 0)
+        position: getSocketPosition?.(node, 0)
       });
     }
   }
@@ -43,14 +45,35 @@
       aspectRatio
     })
   );
+
+  const socketId = $derived(`${node.id}-${0}`);
+
+  function getSocketType(s: Socket | null) {
+    if (!s) return 'unknown';
+    if (typeof s.index === 'string') {
+      return s.node.state.type?.inputs?.[s.index].type || 'unknown';
+    }
+    return s.node.state.type?.outputs?.[s.index] || 'unknown';
+  }
+  const socketType = $derived(getSocketType(graphState.activeSocket));
+  const hoverColor = $derived(graphState.colors.getColor(socketType));
 </script>
 
-<div class="wrapper" data-node-id={node.id} data-node-type={node.type}>
+<div
+  class="wrapper"
+  data-node-id={node.id}
+  data-node-type={node.type}
+  style:--socket-color={hoverColor}
+  class:possible-socket={graphState?.possibleSocketIds.has(socketId)}
+>
   <div class="content">
+    {#if appSettings.value.debug.advancedMode}
+      <span class="bg-white text-black! mr-2 px-1 rounded-sm opacity-30">{node.id}</span>
+    {/if}
     {node.type.split('/').pop()}
   </div>
   <div
-    class="click-target"
+    class="target"
     role="button"
     tabindex="0"
     onmousedown={handleMouseDown}
@@ -78,7 +101,20 @@
     height: 50px;
   }
 
-  .click-target {
+  .possible-socket .target::before {
+    content: "";
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    border-radius: 100%;
+    box-shadow: 0px 0px 10px var(--socket-color);
+    background-color: var(--socket-color);
+    outline: solid thin var(--socket-color);
+    opacity: 0.7;
+    z-index: -10;
+  }
+
+  .target {
     position: absolute;
     right: 0px;
     top: 50%;
@@ -87,11 +123,9 @@
     width: 30px;
     z-index: 100;
     border-radius: 50%;
-    /* background: red; */
-    /* opacity: 0.2; */
   }
 
-  .click-target:hover + svg path {
+  .target:hover + svg path {
     d: var(--hover-path);
   }
 
@@ -108,7 +142,9 @@
 
   svg path {
     stroke-width: 0.2px;
-    transition: d 0.3s ease, fill 0.3s ease;
+    transition:
+      d 0.3s ease,
+      fill 0.3s ease;
     fill: var(--color-layer-2);
     stroke: var(--stroke);
     stroke-width: var(--stroke-width);

app/src/lib/graph-interface/node/NodeInput.svelte

@@ -31,11 +31,24 @@
     return 0;
   }
 
-  let value = $state(getDefaultValue());
+  let value = $state(structuredClone($state.snapshot(getDefaultValue())));
+
+  function diffArray(a: number[], b?: number[] | number) {
+    if (!Array.isArray(b)) return true;
+    if (Array.isArray(a) !== Array.isArray(b)) return true;
+    if (a.length !== b.length) return true;
+    for (let i = 0; i < a.length; i++) {
+      if (a[i] !== b[i]) return true;
+    }
+    return false;
+  }
 
   $effect(() => {
-    if (value !== undefined && node?.props?.[id] !== value) {
-      node.props = { ...node.props, [id]: value };
+    const a = $state.snapshot(value);
+    const b = $state.snapshot(node?.props?.[id]);
+    const isDiff = Array.isArray(a) ? diffArray(a, b) : a !== b;
+    if (value !== undefined && isDiff) {
+      node.props = { ...node.props, [id]: a };
       if (graph) {
         graph.save();
         graph.execute();

app/src/lib/graph-interface/node/NodeParameter.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-  import type { NodeInput, NodeInstance } from '@nodarium/types';
+  import type { NodeInput, NodeInstance, Socket } from '@nodarium/types';
   import { getGraphManager, getGraphState } from '../graph-state.svelte';
   import { createNodePath } from '../helpers';
+  import { getParameterHeight, getSocketPosition } from '../helpers/nodeHelpers';
   import NodeInputEl from './NodeInput.svelte';
 
   type Props = {
@@ -12,17 +13,18 @@
   };
 
   const graph = getGraphManager();
+  const graphState = getGraphState();
+  const graphId = graph?.id;
+  const elementId = `input-${Math.random().toString(36).substring(7)}`;
 
   let { node = $bindable(), input, id, isLast }: Props = $props();
 
-  const inputType = $derived(node?.state?.type?.inputs?.[id]);
+  const nodeType = $derived(node.state.type!);
+
+  const inputType = $derived(nodeType.inputs?.[id]);
 
   const socketId = $derived(`${node.id}-${id}`);
-
-  const graphState = getGraphState();
-  const graphId = graph?.id;
-
-  const elementId = `input-${Math.random().toString(36).substring(7)}`;
+  const height = $derived(getParameterHeight(nodeType, id));
 
   function handleMouseDown(ev: MouseEvent) {
     ev.preventDefault();
@@ -30,18 +32,18 @@
     graphState.setDownSocket({
       node,
       index: id,
-      position: graphState.getSocketPosition?.(node, id)
+      position: getSocketPosition(node, id)
     });
   }
 
-  const leftBump = $derived(node.state?.type?.inputs?.[id].internal !== true);
+  const leftBump = $derived(nodeType.inputs?.[id].internal !== true);
   const cornerBottom = $derived(isLast ? 5 : 0);
   const aspectRatio = 0.5;
 
   const path = $derived(
     createNodePath({
       depth: 6,
-      height: 18,
+      height: 2000 / height,
       y: 50.5,
       cornerBottom,
       leftBump,
@@ -51,19 +53,32 @@
   const pathHover = $derived(
     createNodePath({
       depth: 7,
-      height: 20,
+      height: 2200 / height,
       y: 50.5,
       cornerBottom,
       leftBump,
       aspectRatio
     })
   );
+
+  function getSocketType(s: Socket | null) {
+    if (!s) return 'unknown';
+    if (typeof s.index === 'string') {
+      return s.node.state.type?.inputs?.[s.index].type || 'unknown';
+    }
+    return s.node.state.type?.outputs?.[s.index] || 'unknown';
+  }
+
+  const socketType = $derived(getSocketType(graphState.activeSocket));
+  const hoverColor = $derived(graphState.colors.getColor(socketType));
 </script>
 
 <div
   class="wrapper"
   data-node-type={node.type}
   data-node-input={id}
+  style:height="{height}px"
+  style:--socket-color={hoverColor}
   class:possible-socket={graphState?.possibleSocketIds.has(socketId)}
 >
   {#key id && graphId}
@@ -71,10 +86,6 @@
       {#if inputType?.label !== ''}
         <label for={elementId} title={input.description}>{input.label || id}</label>
       {/if}
-      <span
-        class="absolute i-[tabler--help-circle] size-4 block top-2 right-2 opacity-30"
-        title={JSON.stringify(input, null, 2)}
-      ></span>
       {#if inputType?.external !== true}
         <NodeInputEl {graph} {elementId} bind:node {input} {id} />
       {/if}
@@ -95,13 +106,9 @@
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 100 100"
-    width="100"
-    height="100"
     preserveAspectRatio="none"
-    style={`
-      --path: path("${path}");
-      --hover-path: path("${pathHover}");
-    `}
+    style:--path={`path("${path}")`}
+    style:--hover-path={`path("${pathHover}")`}
   >
     <path vector-effect="non-scaling-stroke"></path>
   </svg>
@@ -111,7 +118,6 @@
   .wrapper {
     position: relative;
     width: 100%;
-    height: 100px;
     transform: translateY(-0.5px);
   }
 
@@ -124,9 +130,16 @@
     transform: translateY(-50%) translateX(-50%);
   }
 
-  .possible-socket .target {
-    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
-    background-color: rgba(255, 255, 255, 0.2);
+  .possible-socket .target::before {
+    content: "";
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    border-radius: 100%;
+    box-shadow: 0px 0px 10px var(--socket-color);
+    background-color: var(--socket-color);
+    outline: solid thin var(--socket-color);
+    opacity: 0.5;
     z-index: -10;
   }
 
@@ -136,11 +149,12 @@
 
   .content {
     position: relative;
-    padding: 10px 20px;
     display: flex;
     flex-direction: column;
+    padding-inline: 20px;
     height: 100%;
-    justify-content: space-around;
+    justify-content: center;
+    gap: 10px;
     box-sizing: border-box;
   }
 

app/src/lib/helpers/localState.svelte.ts

@@ -1,5 +1,37 @@
 import { browser } from '$app/environment';
 
+function mergeRecursive<T>(current: T, initial: T): T {
+  if (typeof initial === 'number') {
+    if (typeof current === 'number') return current;
+    return initial;
+  }
+
+  if (typeof initial === 'boolean') {
+    if (typeof current === 'boolean') return current;
+    return initial;
+  }
+
+  if (Array.isArray(initial)) {
+    if (Array.isArray(current)) return current;
+    return initial;
+  }
+
+  if (typeof initial === 'object' && initial) {
+    const merged = initial;
+    if (typeof current === 'object' && current) {
+      for (const key of Object.keys(initial)) {
+        if (key in current) {
+          // @ts-expect-error It's safe dont worry about it
+          merged[key] = mergeRecursive(current[key], initial[key]);
+        }
+      }
+    }
+    return merged;
+  }
+
+  return current;
+}
+
 export class LocalStore<T> {
   value = $state<T>() as T;
   key = '';
@@ -10,7 +42,10 @@ export class LocalStore<T> {
 
     if (browser) {
       const item = localStorage.getItem(key);
-      if (item) this.value = this.deserialize(item);
+      if (item) {
+        const storedValue = this.deserialize(item);
+        this.value = mergeRecursive(storedValue, value);
+      }
     }
 
     $effect.root(() => {

app/src/lib/node-registry/debugNode.ts

@@ -0,0 +1,11 @@
+export const debugNode = {
+  id: 'max/plantarium/debug',
+  inputs: {
+    input: {
+      type: '*'
+    }
+  },
+  execute(_data: Int32Array): Int32Array {
+    return _data;
+  }
+} as const;

app/src/lib/node-registry/node-registry-client.ts

@@ -15,8 +15,15 @@ export class RemoteNodeRegistry implements NodeRegistry {
 
   constructor(
     private url: string,
-    public cache?: AsyncCache<ArrayBuffer | string>
-  ) {}
+    public cache?: AsyncCache<ArrayBuffer | string>,
+    nodes?: NodeDefinition[]
+  ) {
+    if (nodes?.length) {
+      for (const node of nodes) {
+        this.nodes.set(node.id, node);
+      }
+    }
+  }
 
   async fetchJson(url: string, skipCache = false) {
     const finalUrl = `${this.url}/${url}`;

app/src/lib/performance/Monitor.svelte

@@ -86,7 +86,7 @@
     position: absolute;
   }
   svg {
-    height: 124px;
+    height: 126px;
     margin: 24px 0px;
     border-top: solid thin var(--color-outline);
     border-bottom: solid thin var(--color-outline);

app/src/lib/result-viewer/Debug.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { T } from '@threlte/core';
+  import type { Group } from 'three';
+  import { updateDebugScene } from './debug';
+
+  type Props = {
+    debugData?: Record<number, { type: string; data: Int32Array }>;
+  };
+
+  let group = $state<Group>(null!);
+  const { debugData }: Props = $props();
+
+  $effect(() => {
+    if (!group || !debugData) return;
+    updateDebugScene(group, $state.snapshot(debugData));
+  });
+</script>
+
+<T.Group bind:ref={group} />

app/src/lib/result-viewer/Scene.svelte

@@ -1,33 +1,26 @@
 <script lang="ts">
   import { colors } from '$lib/graph-interface/graph/colors.svelte';
   import { T, useTask, useThrelte } from '@threlte/core';
-  import { Grid, MeshLineGeometry, MeshLineMaterial, Text } from '@threlte/extras';
-  import {
-    Box3,
-    type BufferGeometry,
-    type Group,
-    Mesh,
-    MeshBasicMaterial,
-    Vector3,
-    type Vector3Tuple
-  } from 'three';
+  import { Grid } from '@threlte/extras';
+  import { Box3, type BufferGeometry, type Group, Mesh, MeshBasicMaterial, Vector3 } from 'three';
   import { appSettings } from '../settings/app-settings.svelte';
   import Camera from './Camera.svelte';
+  import Debug from './Debug.svelte';
 
   const { renderStage, invalidate: _invalidate } = useThrelte();
 
   type Props = {
     fps: number[];
-    lines: Vector3[][];
+    debugData?: Record<number, { type: string; data: Int32Array }>;
     scene: Group;
     centerCamera: boolean;
   };
 
   let {
-    lines,
     centerCamera,
     fps = $bindable(),
-    scene = $bindable()
+    scene = $bindable(),
+    debugData
   }: Props = $props();
 
   let geometries = $state.raw<BufferGeometry[]>([]);
@@ -91,18 +84,12 @@
     });
     _invalidate();
   });
-
-  function getPosition(geo: BufferGeometry, i: number) {
-    return [
-      geo.attributes.position.array[i],
-      geo.attributes.position.array[i + 1],
-      geo.attributes.position.array[i + 2]
-    ] as Vector3Tuple;
-  }
 </script>
 
 <Camera {center} {centerCamera} />
 
+<Debug {debugData} />
+
 {#if appSettings.value.showGrid}
   <Grid
     cellColor={colors['outline']}
@@ -116,35 +103,4 @@
     fadeOrigin={new Vector3(0, 0, 0)}
   />
 {/if}
-
-<T.Group>
-  {#if geometries}
-    {#each geometries as geo (geo.id)}
-      {#if appSettings.value.debug.showIndices}
-        {#each geo.attributes.position.array, i (i)}
-          {#if i % 3 === 0}
-            <Text fontSize={0.25} position={getPosition(geo, i)} />
-          {/if}
-        {/each}
-      {/if}
-
-      {#if appSettings.value.debug.showVertices}
-        <T.Points visible={true}>
-          <T is={geo} />
-          <T.PointsMaterial size={0.25} />
-        </T.Points>
-      {/if}
-    {/each}
-  {/if}
-
-  <T.Group bind:ref={scene}></T.Group>
-</T.Group>
-
-{#if appSettings.value.debug.showStemLines && lines}
-  {#each lines as line (line[0].x + '-' + line[0].y + '-' + '' + line[0].z)}
-    <T.Mesh>
-      <MeshLineGeometry points={line} />
-      <MeshLineMaterial width={0.1} color="red" depthTest={false} />
-    </T.Mesh>
-  {/each}
-{/if}
+<T.Group bind:ref={scene}></T.Group>

app/src/lib/result-viewer/Viewer.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import SmallPerformanceViewer from '$lib/performance/SmallPerformanceViewer.svelte';
   import { appSettings } from '$lib/settings/app-settings.svelte';
-  import { decodeFloat, splitNestedArray } from '@nodarium/utils';
+  import { splitNestedArray } from '@nodarium/utils';
   import type { PerformanceStore } from '@nodarium/utils';
   import { Canvas } from '@threlte/core';
-  import { Vector3 } from 'three';
+  import { DoubleSide } from 'three';
   import { type Group, MeshMatcapMaterial, TextureLoader } from 'three';
   import { createGeometryPool, createInstancedGeometryPool } from './geometryPool';
   import Scene from './Scene.svelte';
@@ -14,7 +14,8 @@
   matcap.colorSpace = 'srgb';
   const material = new MeshMatcapMaterial({
     color: 0xffffff,
-    matcap
+    matcap,
+    side: DoubleSide
   });
 
   let sceneComponent = $state<ReturnType<typeof Scene>>();
@@ -22,6 +23,7 @@
 
   let geometryPool: ReturnType<typeof createGeometryPool>;
   let instancePool: ReturnType<typeof createInstancedGeometryPool>;
+
   export function updateGeometries(inputs: Int32Array[], group: Group) {
     geometryPool = geometryPool || createGeometryPool(group, material);
     instancePool = instancePool || createInstancedGeometryPool(group, material);
@@ -39,44 +41,16 @@
     scene: Group;
     centerCamera: boolean;
     perf: PerformanceStore;
+    debugData?: Record<number, { type: string; data: Int32Array }>;
   };
 
-  let { scene = $bindable(), centerCamera, perf }: Props = $props();
-
-  let lines = $state<Vector3[][]>([]);
-
-  function createLineGeometryFromEncodedData(encodedData: Int32Array) {
-    const positions: Vector3[] = [];
-
-    const amount = (encodedData.length - 1) / 4;
-
-    for (let i = 0; i < amount; i++) {
-      const x = decodeFloat(encodedData[2 + i * 4 + 0]);
-      const y = decodeFloat(encodedData[2 + i * 4 + 1]);
-      const z = decodeFloat(encodedData[2 + i * 4 + 2]);
-      positions.push(new Vector3(x, y, z));
-    }
-
-    return positions;
-  }
+  let { scene = $bindable(), centerCamera, debugData, perf }: Props = $props();
 
   export const update = function update(result: Int32Array) {
     perf.addPoint('split-result');
     const inputs = splitNestedArray(result);
     perf.endPoint();
 
-    if (appSettings.value.debug.showStemLines) {
-      perf.addPoint('create-lines');
-      lines = inputs
-        .map((input) => {
-          if (input[0] === 0) {
-            return createLineGeometryFromEncodedData(input);
-          }
-        })
-        .filter(Boolean) as Vector3[][];
-      perf.endPoint();
-    }
-
     perf.addPoint('update-geometries');
 
     const { totalVertices, totalFaces } = updateGeometries(inputs, scene);
@@ -88,7 +62,7 @@
   };
 </script>
 
-{#if appSettings.value.debug.showPerformancePanel}
+{#if appSettings.value.debug.advancedMode}
   <SmallPerformanceViewer {fps} store={perf} />
 {/if}
 
@@ -96,8 +70,8 @@
   <Canvas>
     <Scene
       bind:this={sceneComponent}
-      {lines}
       {centerCamera}
+      {debugData}
       bind:scene
       bind:fps
     />

app/src/lib/result-viewer/debug.ts

@@ -0,0 +1,90 @@
+import { splitNestedArray } from '@nodarium/utils';
+import {
+  BufferGeometry,
+  type Group,
+  InstancedMesh,
+  Line,
+  LineBasicMaterial,
+  Matrix4,
+  MeshBasicMaterial,
+  SphereGeometry,
+  Vector3
+} from 'three';
+
+function writePath(scene: Group, data: Int32Array): Vector3[] {
+  const positions: Vector3[] = [];
+  const f32 = new Float32Array(data.buffer);
+
+  for (let i = 2; i + 2 < f32.length; i += 4) {
+    const vec = new Vector3(f32[i], f32[i + 1], f32[i + 2]);
+    positions.push(vec);
+  }
+
+  // Path line
+  if (positions.length >= 2) {
+    const geometry = new BufferGeometry().setFromPoints(positions);
+    const line = new Line(
+      geometry,
+      new LineBasicMaterial({ color: 0xff0000, depthTest: false })
+    );
+    scene.add(line);
+  }
+
+  // Instanced spheres at points
+  if (positions.length > 0) {
+    const sphereGeometry = new SphereGeometry(0.05, 8, 8); // keep low-poly
+    const sphereMaterial = new MeshBasicMaterial({
+      color: 0xff0000,
+      depthTest: false
+    });
+
+    const spheres = new InstancedMesh(
+      sphereGeometry,
+      sphereMaterial,
+      positions.length
+    );
+
+    const matrix = new Matrix4();
+    for (let i = 0; i < positions.length; i++) {
+      matrix.makeTranslation(
+        positions[i].x,
+        positions[i].y,
+        positions[i].z
+      );
+      spheres.setMatrixAt(i, matrix);
+    }
+
+    spheres.instanceMatrix.needsUpdate = true;
+    scene.add(spheres);
+  }
+
+  return positions;
+}
+
+function clearGroup(group: Group) {
+  for (let i = group.children.length - 1; i >= 0; i--) {
+    const child = group.children[i];
+    group.remove(child);
+    // optional but correct: free GPU memory
+    // @ts-expect-error three.js runtime fields
+    child.geometry?.dispose?.();
+    // @ts-expect-error three.js runtime fields
+    child.material?.dispose?.();
+  }
+}
+
+export function updateDebugScene(
+  group: Group,
+  data: Record<number, { type: string; data: Int32Array }>
+) {
+  clearGroup(group);
+  return Object.entries(data || {}).map(([, d]) => {
+    switch (d.type) {
+      case 'path':
+        splitNestedArray(d.data)
+          .forEach(p => writePath(group, p));
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    return (_g: Group) => {};
+  }).flat();
+}

app/src/lib/runtime/runtime-executor.ts

@@ -28,7 +28,7 @@ function getValue(input: NodeInput, value?: unknown) {
   }
 
   if (Array.isArray(value)) {
-    if (input.type === 'vec3') {
+    if (input.type === 'vec3' || input.type === 'shape') {
       return [
         0,
         value.length + 1,
@@ -59,6 +59,7 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
   private definitionMap: Map<string, NodeDefinition> = new Map();
 
   private seed = Math.floor(Math.random() * 100000000);
+  private debugData: Record<number, { type: string; data: Int32Array }> = {};
 
   perf?: PerformanceStore;
 
@@ -124,10 +125,10 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
       }
     }
 
-    const nodes = [];
+    const nodes = new Map<number, RuntimeNode>();
 
     // loop through all the nodes and assign each nodes its depth
-    const stack = [outputNode];
+    const stack = [outputNode, ...graphNodes.filter(n => n.type.endsWith('/debug'))];
     while (stack.length) {
       const node = stack.pop();
       if (!node) continue;
@@ -136,16 +137,31 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
         parent.state.depth = node.state.depth + 1;
         stack.push(parent);
       }
-      nodes.push(node);
+      nodes.set(node.id, node);
     }
 
-    return [outputNode, nodes] as const;
+    for (const node of graphNodes) {
+      if (node.type.endsWith('/debug')) {
+        node.state = node.state || {};
+        const parent = node.state.parents[0];
+        if (parent) {
+          node.state.depth = parent.state.depth - 1;
+          parent.state.debugNode = true;
+        }
+        nodes.set(node.id, node);
+      }
+    }
+
+    const _nodes = [...nodes.values()];
+
+    return [outputNode, _nodes] as const;
   }
 
   async execute(graph: Graph, settings: Record<string, unknown>) {
     this.perf?.addPoint('runtime');
 
     let a = performance.now();
+    this.debugData = {};
 
     // Then we add some metadata to the graph
     const [outputNode, nodes] = await this.addMetaData(graph);
@@ -237,6 +253,12 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
           log.log(`Using cached value for ${node_type.id || node.id}`);
           this.perf?.addPoint('cache-hit', 1);
           results[node.id] = cachedValue as Int32Array;
+          if (node.state.debugNode && node_type.outputs) {
+            this.debugData[node.id] = {
+              type: node_type.outputs[0],
+              data: cachedValue
+            };
+          }
           continue;
         }
         this.perf?.addPoint('cache-hit', 0);
@@ -245,6 +267,12 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
         log.log(`Inputs:`, inputs);
         a = performance.now();
         results[node.id] = node_type.execute(encoded_inputs);
+        if (node.state.debugNode && node_type.outputs) {
+          this.debugData[node.id] = {
+            type: node_type.outputs[0],
+            data: results[node.id]
+          };
+        }
         log.log('Executed', node.type, node.id);
         b = performance.now();
 
@@ -273,6 +301,10 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
     return res as unknown as Int32Array;
   }
 
+  getDebugData() {
+    return this.debugData;
+  }
+
   getPerformanceData() {
     return this.perf?.get();
   }

app/src/lib/runtime/types.ts

@@ -5,6 +5,7 @@ type RuntimeState = {
   parents: RuntimeNode[];
   children: RuntimeNode[];
   inputNodes: Record<string, RuntimeNode>;
+  debugNode?: boolean;
 };
 
 export type RuntimeNode = SerializedNode & { state: RuntimeState };

app/src/lib/runtime/worker-runtime-executor-backend.ts

@@ -1,3 +1,4 @@
+import { debugNode } from '$lib/node-registry/debugNode';
 import { IndexDBCache, RemoteNodeRegistry } from '$lib/node-registry/index';
 import type { Graph } from '@nodarium/types';
 import { createPerformanceStore } from '@nodarium/utils';
@@ -5,7 +6,7 @@ import { MemoryRuntimeExecutor } from './runtime-executor';
 import { MemoryRuntimeCache } from './runtime-executor-cache';
 
 const indexDbCache = new IndexDBCache('node-registry');
-const nodeRegistry = new RemoteNodeRegistry('', indexDbCache);
+const nodeRegistry = new RemoteNodeRegistry('', indexDbCache, [debugNode]);
 
 const cache = new MemoryRuntimeCache();
 const executor = new MemoryRuntimeExecutor(nodeRegistry, cache);
@@ -43,3 +44,7 @@ export async function executeGraph(
 export function getPerformanceData() {
   return performanceStore.get();
 }
+
+export function getDebugData() {
+  return executor.getDebugData();
+}

app/src/lib/runtime/worker-runtime-executor.ts

@@ -6,12 +6,15 @@ export class WorkerRuntimeExecutor implements RuntimeExecutor {
     new URL(`./worker-runtime-executor-backend.ts`, import.meta.url)
   );
 
-  async execute(graph: Graph, settings: Record<string, unknown>) {
+  execute(graph: Graph, settings: Record<string, unknown>) {
     return this.worker.executeGraph(graph, settings);
   }
-  async getPerformanceData() {
+  getPerformanceData() {
     return this.worker.getPerformanceData();
   }
+  getDebugData() {
+    return this.worker.getDebugData();
+  }
   set useRuntimeCache(useCache: boolean) {
     this.worker.setUseRuntimeCache(useCache);
   }

app/src/lib/settings/NestedSettings.svelte

@@ -211,7 +211,7 @@
   .first-level.input {
     padding-left: 1em;
     padding-right: 1em;
-    padding-bottom: 1px;
+    padding-bottom: 0.5px;
     gap: 3px;
   }
 

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

@@ -6,6 +6,7 @@ const themes = [
   'catppuccin',
   'solarized',
   'high-contrast',
+  'high-contrast-light',
   'nord',
   'dracula'
 ] as const;
@@ -29,10 +30,11 @@ export const AppSettingTypes = {
   },
   nodeInterface: {
     title: 'Node Interface',
-    showNodeGrid: {
-      type: 'boolean',
-      label: 'Show Grid',
-      value: true
+    backgroundType: {
+      type: 'select',
+      label: 'Background',
+      options: ['grid', 'dots', 'none'],
+      value: 'grid'
     },
     snapToGrid: {
       type: 'boolean',
@@ -57,34 +59,9 @@ export const AppSettingTypes = {
       label: 'Execute in WebWorker',
       value: true
     },
-    showIndices: {
+    advancedMode: {
       type: 'boolean',
-      label: 'Show Indices',
-      value: false
-    },
-    showPerformancePanel: {
-      type: 'boolean',
-      label: 'Show Performance Panel',
-      value: false
-    },
-    showBenchmarkPanel: {
-      type: 'boolean',
-      label: 'Show Benchmark Panel',
-      value: false
-    },
-    showVertices: {
-      type: 'boolean',
-      label: 'Show Vertices',
-      value: false
-    },
-    showStemLines: {
-      type: 'boolean',
-      label: 'Show Stem Lines',
-      value: false
-    },
-    showGraphJson: {
-      type: 'boolean',
-      label: 'Show Graph Source',
+      label: 'Advanced Mode',
       value: false
     },
     cache: {

app/src/lib/sidebar/Sidebar.svelte

@@ -2,7 +2,11 @@
   import { type Snippet } from 'svelte';
   import { panelState as state } from './PanelState.svelte';
 
-  const { children } = $props<{ children?: Snippet }>();
+  let { children, open = $bindable(false) } = $props<{ children?: Snippet; open?: boolean }>();
+
+  $effect(() => {
+    open = !!state.activePanel.value;
+  });
 </script>
 
 <div class="wrapper" class:visible={state.activePanel.value}>

app/src/lib/sidebar/panels/ActiveNodeSelected.svelte

@@ -42,11 +42,13 @@
     const store: Store = {};
     Object.keys(inputs).forEach((key) => {
       if (props) {
-        const value = props[key] || inputs[key].value;
+        const value = props[key] !== undefined ? props[key] : inputs[key].value;
         if (Array.isArray(value) || typeof value === 'number') {
           store[key] = value;
+        } else if (typeof value === 'boolean') {
+          store[key] = value ? 1 : 0;
         } else {
-          console.error('Wrong error');
+          console.error('Wrong error', { value });
         }
       }
     });

app/src/lib/sidebar/panels/Changelog.svelte

@@ -1,78 +1,105 @@
 <script lang="ts">
-  type Change = { type: string; content: string };
+  import { Details } from '@nodarium/ui';
+  import { micromark } from 'micromark';
 
-  const typeMap: Record<string, string> = {
-    fix: 'bg-layer-2 bg-red-800',
-    feat: 'bg-layer-2 bg-green-800',
-    chore: 'bg-layer-2 bg-gray-800',
-    docs: 'bg-layer-2 bg-blue-800',
-    refactor: 'bg-layer-2 bg-purple-800',
-    default: 'bg-layer-2 text-text'
+  type Props = {
+    git?: Record<string, string>;
+    changelog?: string;
   };
 
-  async function fetchChangelog() {
-    const res = await fetch('/CHANGELOG.md');
-    return await res.text();
+  const {
+    git,
+    changelog
+  }: Props = $props();
+
+  const typeMap = new Map([
+    ['fix', 'border-l-red-800'],
+    ['feat', 'border-l-green-800'],
+    ['chore', 'border-l-gray-800'],
+    ['docs', 'border-l-blue-800'],
+    ['refactor', 'border-l-purple-800'],
+    ['ci', 'border-l-red-400']
+  ]);
+
+  function detectCommitType(commit: string) {
+    for (const key of typeMap.keys()) {
+      if (commit.startsWith(key)) {
+        return key;
+      }
+    }
+    return '';
   }
 
-  async function fetchGitInfo() {
-    const res = await fetch('/git.json');
-    return await res.json();
+  function parseCommit(line?: string) {
+    if (!line) return;
+
+    const regex = /^\s*-\s*\[([a-f0-9]+)\]\((https?:\/\/[^\s)]+)\)\s+(.+)$/;
+
+    const match = line.match(regex);
+    if (!match) {
+      return;
+    }
+
+    const [, sha, link, description] = match;
+
+    return {
+      sha,
+      link,
+      description,
+      type: detectCommitType(description)
+    };
   }
 
   function parseChangelog(md: string) {
-    const lines = md.split('\n');
-    const parsed: (string | Change)[] = [];
+    return md.split(/^# v/gm)
+      .filter(l => !!l.length)
+      .map(release => {
+        const [firstLine, ...rest] = release.split('\n');
+        const title = firstLine.trim();
 
-    for (let line of lines) {
-      line = line.trim();
-      if (!line) continue;
+        const blocks = rest
+          .join('\n')
+          .split('---');
 
-      if (line === '---') {
-        parsed.push({ type: 'hr', content: '' });
-        continue;
-      }
+        const commits = blocks.length > 1
+          ? blocks
+            .at(-1)
+            ?.split('\n')
+            ?.map(line => parseCommit(line))
+            ?.filter(c => !!c)
+          : [];
 
-      // Headers
-      if (line.startsWith('## ')) {
-        parsed.push(line.replace('## ', ''));
-        continue;
-      }
+        const description = (
+          blocks.length > 1
+            ? blocks
+              .slice(0, -1)
+              .join('\n')
+            : blocks[0]
+        ).trim();
 
-      // Commit type
-      const match = line.match(/^(fix|feat|chore|docs|refactor)(\(|:)/i);
-      if (match) {
-        parsed.push({ type: match[1].toLowerCase(), content: line });
-        continue;
-      }
-
-      // Other lines
-      parsed.push({ type: 'default', content: line });
-    }
-
-    // Remove trailing horizontal rule
-    let lastLine = parsed.at(-1);
-    if (
-      lastLine !== undefined
-      && typeof lastLine !== 'string'
-      && lastLine.type === 'hr'
-    ) {
-      parsed.pop();
-    }
-
-    return parsed;
+        return {
+          description: micromark(description),
+          title,
+          commits
+        };
+      });
   }
 </script>
 
-<div class="p-4 font-mono text-text">
-  {#await Promise.all([fetchChangelog(), fetchGitInfo()])}
-    <p>Loading...</p>
-  {:then [md, git]}
-    <div class="mb-4 p-3 bg-layer-2 text-xs">
+<div id="changelog" class="p-4 font-mono text-text overflow-y-auto max-h-full space-y-5">
+  {#if git}
+    <div class="mb-4 p-3 bg-layer-2 text-xs rounded">
       <p><strong>Branch:</strong> {git.branch}</p>
       <p>
         <strong>Commit:</strong>
-        {git.sha.slice(0, 7)} – {git.commit_message}
+        <a
+          href="https://git.max-richter.dev/max/nodarium/commit/{git.sha}"
+          class="link"
+          target="_blank"
+        >
+          {git.sha.slice(0, 7)}
+        </a>
+        – {git.commit_message}
       </p>
       <p>
         <strong>Commits since last release:</strong>
@@ -83,28 +110,76 @@
         {new Date(git.commit_timestamp).toLocaleString()}
       </p>
     </div>
+  {/if}
 
-    {#each parseChangelog(md) as item (item)}
-      {#if typeof item === 'string'}
-        <h2 class="text-xl font-semibold mt-4 mb-4 text-layer-1">{item}</h2>
-      {:else if item.type === 'hr'}{:else}
-        <p class="py-1 mb-1 leading-8 border-b border-b-outline last:border-b-0">
-          {#if item.type !== 'default'}
-            <span
-              class="
-                p-1 rounded-sm opacity-80 font-semibold {typeMap[
-                item.type
-                ]}
-              "
-            >
-              {item.content.split(':')[0]}
-            </span>
-            {item.content.split(':').slice(1).join(':').trim()}
-          {:else}
-            {item.content}
-          {/if}
-        </p>
-      {/if}
+  {#if changelog}
+    {#each parseChangelog(changelog) as release (release)}
+      <Details title={release.title}>
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        <div id="description" class="pb-5">{@html release.description}</div>
+
+        {#if release?.commits?.length}
+          <Details
+            title="All Commits"
+            class="commits"
+          >
+            {#each release.commits as commit (commit)}
+              <p class="py-1 leading-7 text-xs border-b-1 border-l-1 border-b-outline last:border-b-0 -ml-2 pl-2 {typeMap.get(commit.type)}">
+                <!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+                <a href={commit.link} class="link" target="_blank">{commit.sha}</a>
+                {commit.description}
+              </p>
+            {/each}
+          </Details>
+        {/if}
+      </Details>
     {/each}
-  {/await}
+  {/if}
 </div>
+
+<style lang="postcss">
+  @reference "tailwindcss";
+
+  #changelog :global(.commits) {
+    margin-left: -16px;
+    margin-right: -16px;
+    border-radius: 0px 0px 2px 2px !important;
+  }
+
+  #changelog :global(details > div){
+    padding-bottom: 0px;
+  }
+
+  #changelog :global(.commits > div) {
+    padding-bottom: 0px;
+    padding-top: 0px;
+  }
+
+  #description :global(h2) {
+    @apply font-bold mt-4 mb-1;
+  }
+  #description :global(h2:first-child) {
+    margin-top: 0px !important;
+  }
+
+  #description :global(ul) {
+    padding-left: 1em;
+  }
+  #description :global(li),
+  #description :global(p) {
+    @apply text-xs!;
+    list-style-type: disc;
+  }
+
+  #changelog :global(details > details[open] > summary){
+    margin-bottom: 20px !important;
+  }
+
+  .link {
+    color: #60a5fa;
+    text-decoration: none;
+  }
+  .link:hover {
+    text-decoration: underline;
+  }
+</style>

app/src/routes/+error.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { page } from '$app/state';
+</script>
+
+<main class="w-screen h-screen flex flex-col items-center justify-center">
+  <div class="outline-1 outline-outline bg-layer-2">
+    <h1 class="p-8 text-3xl">@nodarium/error</h1>
+    <hr>
+    <pre class="p-8">{JSON.stringify(page.error, null, 2)}</pre>
+    <hr>
+    <div class="flex p-4">
+      <button
+        class="bg-layer-2 outline-1 outline-outline p-3 px-6 rounded-sm cursor-pointer"
+        on:click={() => window.location.reload()}
+      >
+        reload
+      </button>
+    </div>
+  </div>
+</main>

app/src/routes/+layout.server.ts

@@ -1 +1,28 @@
 export const prerender = true;
+
+export async function load({ fetch }) {
+  async function fetchChangelog() {
+    try {
+      const res = await fetch('/CHANGELOG.md');
+      return await res.text();
+    } catch (error) {
+      console.log('Failed to fetch CHANGELOG.md', error);
+      return;
+    }
+  }
+
+  async function fetchGitInfo() {
+    try {
+      const res = await fetch('/git.json');
+      return await res.json();
+    } catch (error) {
+      console.log('Failed to fetch git.json', error);
+      return;
+    }
+  }
+
+  return {
+    git: await fetchGitInfo(),
+    changelog: await fetchChangelog()
+  };
+}

app/src/routes/+page.svelte

@@ -4,6 +4,7 @@
   import Grid from '$lib/grid';
   import { debounceAsyncFunction } from '$lib/helpers';
   import { createKeyMap } from '$lib/helpers/createKeyMap';
+  import { debugNode } from '$lib/node-registry/debugNode.js';
   import { IndexDBCache, RemoteNodeRegistry } from '$lib/node-registry/index';
   import NodeStore from '$lib/node-store/NodeStore.svelte';
   import PerformanceViewer from '$lib/performance/PerformanceViewer.svelte';
@@ -29,8 +30,11 @@
 
   let performanceStore = createPerformanceStore();
 
+  const { data } = $props();
+
   const registryCache = new IndexDBCache('node-registry');
-  const nodeRegistry = new RemoteNodeRegistry('', registryCache);
+
+  const nodeRegistry = new RemoteNodeRegistry('', registryCache, [debugNode]);
   const workerRuntime = new WorkerRuntimeExecutor();
   const runtimeCache = new MemoryRuntimeCache();
   const memoryRuntime = new MemoryRuntimeExecutor(nodeRegistry, runtimeCache);
@@ -61,8 +65,10 @@
   let activeNode = $state<NodeInstance | undefined>(undefined);
   let scene = $state<Group>(null!);
 
+  let sidebarOpen = $state(false);
   let graphInterface = $state<ReturnType<typeof GraphInterface>>(null!);
   let viewerComponent = $state<ReturnType<typeof Viewer>>();
+  let debugData = $state<Record<number, { type: string; data: Int32Array }>>();
   const manager = $derived(graphInterface?.manager);
 
   async function randomGenerate() {
@@ -102,6 +108,7 @@
 
       if (appSettings.value.debug.useWorker) {
         let perfData = await runtime.getPerformanceData();
+        debugData = await runtime.getDebugData();
         let lastRun = perfData?.at(-1);
         if (lastRun?.total) {
           lastRun.runtime = lastRun.total;
@@ -160,6 +167,7 @@
         bind:scene
         bind:this={viewerComponent}
         perf={performanceStore}
+        debugData={debugData}
         centerCamera={appSettings.value.centerCamera}
       />
     </Grid.Cell>
@@ -169,7 +177,8 @@
           graph={pm.graph}
           bind:this={graphInterface}
           registry={nodeRegistry}
-          showGrid={appSettings.value.nodeInterface.showNodeGrid}
+          addMenuPadding={{ right: sidebarOpen ? 330 : undefined }}
+          backgroundType={appSettings.value.nodeInterface.backgroundType}
           snapToGrid={appSettings.value.nodeInterface.snapToGrid}
           bind:activeNode
           bind:showHelp={appSettings.value.nodeInterface.showHelp}
@@ -179,7 +188,7 @@
           onresult={(result) => handleUpdate(result as Graph)}
         />
       {/if}
-      <Sidebar>
+      <Sidebar bind:open={sidebarOpen}>
         <Panel id="general" title="General" icon="i-[tabler--settings]">
           <NestedSettings
             id="general"
@@ -212,7 +221,7 @@
         <Panel
           id="performance"
           title="Performance"
-          hidden={!appSettings.value.debug.showPerformancePanel}
+          hidden={!appSettings.value.debug.advancedMode}
           icon="i-[tabler--brand-speedtest] bg-red-400"
         >
           {#if $performanceStore}
@@ -225,7 +234,7 @@
         <Panel
           id="graph-source"
           title="Graph Source"
-          hidden={!appSettings.value.debug.showGraphJson}
+          hidden={!appSettings.value.debug.advancedMode}
           icon="i-[tabler--code]"
         >
           <GraphSource graph={pm.graph ?? manager?.serialize()} />
@@ -233,7 +242,7 @@
         <Panel
           id="benchmark"
           title="Benchmark"
-          hidden={!appSettings.value.debug.showBenchmarkPanel}
+          hidden={!appSettings.value.debug.advancedMode}
           icon="i-[tabler--graph] bg-red-400"
         >
           <BenchmarkPanel run={randomGenerate} />
@@ -255,7 +264,7 @@
           title="Changelog"
           icon="i-[tabler--file-text-spark] bg-green-400"
         >
-          <Changelog />
+          <Changelog git={data.git} changelog={data.changelog} />
         </Panel>
       </Sidebar>
     </Grid.Cell>

app/static/.gitignore

@@ -1,2 +1,3 @@
 nodes/
 CHANGELOG.md
+git.json

app/static/favicon.svg

@@ -0,0 +1,19 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M55.2154 77.6602L52.2788 78.3944L49.2607 60.6933L52.2788 33.0404L47.6293 18.0312L45.9162 18.6838L41.6745 28.7987L31.6412 33.4483H20.2211L21.6894 24.0675L31.6412 15.9919L45.9162 15.1762L49.7501 15.9919L55.2154 32.6326L54.5628 38.5873L64.8409 33.0404L69.5721 37.69L80.1764 43.1553L84.1734 52.8624L83.113 64.1193L73.8954 61.8353L66.3092 52.4545V38.5873L64.1068 36.7112L54.155 42.4212L52.2788 60.6933L55.2154 77.6602Z"
+    fill="url(#paint0_linear)"
+  />
+  <defs>
+    <linearGradient
+      id="paint0_linear"
+      x1="34.3903"
+      y1="15.1762"
+      x2="52.1972"
+      y2="78.3944"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#4CAF7B" />
+      <stop offset="1" stop-color="#347452" />
+    </linearGradient>
+  </defs>
+</svg>

app/static/svelte.svg

@@ -1,19 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
-  aria-hidden="true"
-  role="img"
-  class="iconify iconify--logos"
-  width="26.6"
-  height="32"
-  preserveAspectRatio="xMidYMid meet"
-  viewBox="0 0 256 308"
->
-  <path
-    fill="#FF3E00"
-    d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"
-  ></path><path
-    fill="#FFF"
-    d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"
-  ></path>
-</svg>

app/static/tauri.svg

@@ -1,26 +0,0 @@
-<svg width="206" height="231" viewBox="0 0 206 231" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M143.143 84C143.143 96.1503 133.293 106 121.143 106C108.992 106 99.1426 96.1503 99.1426 84C99.1426 71.8497 108.992 62 121.143 62C133.293 62 143.143 71.8497 143.143 84Z"
-    fill="#FFC131"
-  />
-  <ellipse
-    cx="84.1426"
-    cy="147"
-    rx="22"
-    ry="22"
-    transform="rotate(180 84.1426 147)"
-    fill="#24C8DB"
-  />
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M166.738 154.548C157.86 160.286 148.023 164.269 137.757 166.341C139.858 160.282 141 153.774 141 147C141 144.543 140.85 142.121 140.558 139.743C144.975 138.204 149.215 136.139 153.183 133.575C162.73 127.404 170.292 118.608 174.961 108.244C179.63 97.8797 181.207 86.3876 179.502 75.1487C177.798 63.9098 172.884 53.4021 165.352 44.8883C157.82 36.3744 147.99 30.2165 137.042 27.1546C126.095 24.0926 114.496 24.2568 103.64 27.6274C92.7839 30.998 83.1319 37.4317 75.8437 46.1553C74.9102 47.2727 74.0206 48.4216 73.176 49.5993C61.9292 50.8488 51.0363 54.0318 40.9629 58.9556C44.2417 48.4586 49.5653 38.6591 56.679 30.1442C67.0505 17.7298 80.7861 8.57426 96.2354 3.77762C111.685 -1.01901 128.19 -1.25267 143.769 3.10474C159.348 7.46215 173.337 16.2252 184.056 28.3411C194.775 40.457 201.767 55.4101 204.193 71.404C206.619 87.3978 204.374 103.752 197.73 118.501C191.086 133.25 180.324 145.767 166.738 154.548ZM41.9631 74.275L62.5557 76.8042C63.0459 72.813 63.9401 68.9018 65.2138 65.1274C57.0465 67.0016 49.2088 70.087 41.9631 74.275Z"
-    fill="#FFC131"
-  />
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M38.4045 76.4519C47.3493 70.6709 57.2677 66.6712 67.6171 64.6132C65.2774 70.9669 64 77.8343 64 85.0001C64 87.1434 64.1143 89.26 64.3371 91.3442C60.0093 92.8732 55.8533 94.9092 51.9599 97.4256C42.4128 103.596 34.8505 112.392 30.1816 122.756C25.5126 133.12 23.9357 144.612 25.6403 155.851C27.3449 167.09 32.2584 177.598 39.7906 186.112C47.3227 194.626 57.153 200.784 68.1003 203.846C79.0476 206.907 90.6462 206.743 101.502 203.373C112.359 200.002 122.011 193.568 129.299 184.845C130.237 183.722 131.131 182.567 131.979 181.383C143.235 180.114 154.132 176.91 164.205 171.962C160.929 182.49 155.596 192.319 148.464 200.856C138.092 213.27 124.357 222.426 108.907 227.222C93.458 232.019 76.9524 232.253 61.3736 227.895C45.7948 223.538 31.8055 214.775 21.0867 202.659C10.3679 190.543 3.37557 175.59 0.949823 159.596C-1.47592 143.602 0.768139 127.248 7.41237 112.499C14.0566 97.7497 24.8183 85.2327 38.4045 76.4519ZM163.062 156.711L163.062 156.711C162.954 156.773 162.846 156.835 162.738 156.897C162.846 156.835 162.954 156.773 163.062 156.711Z"
-    fill="#24C8DB"
-  />
-</svg>

app/static/vite.svg

@@ -1,37 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
-  aria-hidden="true"
-  role="img"
-  class="iconify iconify--logos"
-  width="31.88"
-  height="32"
-  preserveAspectRatio="xMidYMid meet"
-  viewBox="0 0 256 257"
->
-  <defs><linearGradient
-      id="IconifyId1813088fe1fbc01fb466"
-      x1="-.828%"
-      x2="57.636%"
-      y1="7.652%"
-      y2="78.411%"
-    ><stop offset="0%" stop-color="#41D1FF"></stop><stop
-        offset="100%"
-        stop-color="#BD34FE"
-      ></stop></linearGradient><linearGradient
-      id="IconifyId1813088fe1fbc01fb467"
-      x1="43.376%"
-      x2="50.316%"
-      y1="2.242%"
-      y2="89.03%"
-    ><stop offset="0%" stop-color="#FFEA83"></stop><stop
-        offset="8.333%"
-        stop-color="#FFDD35"
-      ></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path
-    fill="url(#IconifyId1813088fe1fbc01fb466)"
-    d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"
-  ></path><path
-    fill="url(#IconifyId1813088fe1fbc01fb467)"
-    d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"
-  ></path>
-</svg>

nodes/max/plantarium/instance/src/input.json

@@ -28,6 +28,13 @@
       "value": 1,
       "hidden": true
     },
+    "rotation": {
+      "type": "float",
+      "min": 0,
+      "max": 1,
+      "value": 0.5,
+      "hidden": true
+    },
     "depth": {
       "type": "integer",
       "min": 1,

nodes/max/plantarium/instance/src/lib.rs

@@ -1,12 +1,9 @@
 use glam::{Mat4, Quat, Vec3};
-use nodarium_macros::nodarium_execute;
-use nodarium_macros::nodarium_definition_file;
+use nodarium_macros::{nodarium_execute, nodarium_definition_file};
 use nodarium_utils::{
     concat_args, evaluate_float, evaluate_int,
-    geometry::{
-        create_instance_data, wrap_geometry_data, wrap_instance_data, wrap_path,
-    },
-    log, split_args,
+    geometry::{create_instance_data, wrap_geometry_data, wrap_instance_data, wrap_path},
+    split_args,
 };
 
 nodarium_definition_file!("src/input.json");
@@ -15,13 +12,13 @@ nodarium_definition_file!("src/input.json");
 pub fn execute(input: &[i32]) -> Vec<i32> {
     let args = split_args(input);
     let mut inputs = split_args(args[0]);
-    log!("WASM(instance): inputs: {:?}", inputs);
 
     let mut geo_data = args[1].to_vec();
     let geo = wrap_geometry_data(&mut geo_data);
 
     let mut transforms: Vec<Mat4> = Vec::new();
 
+    // Find max depth
     let mut max_depth = 0;
     for path_data in inputs.iter() {
         if path_data[2] != 0 {
@@ -30,7 +27,8 @@ pub fn execute(input: &[i32]) -> Vec<i32> {
         max_depth = max_depth.max(path_data[3]);
     }
 
-    let depth = evaluate_int(args[5]);
+    let rotation = evaluate_float(args[5]);
+    let depth = evaluate_int(args[6]);
 
     for path_data in inputs.iter() {
         if path_data[3] < (max_depth - depth + 1) {
@@ -38,24 +36,34 @@ pub fn execute(input: &[i32]) -> Vec<i32> {
         }
 
         let amount = evaluate_int(args[2]);
-
         let lowest_instance = evaluate_float(args[3]);
         let highest_instance = evaluate_float(args[4]);
 
         let path = wrap_path(path_data);
 
         for i in 0..amount {
-            let alpha =
-                lowest_instance + (i as f32 / amount as f32) * (highest_instance - lowest_instance);
+            let alpha = lowest_instance
+                + (i as f32 / (amount - 1) as f32) * (highest_instance - lowest_instance);
 
             let point = path.get_point_at(alpha);
-            let direction = path.get_direction_at(alpha);
+            let tangent = path.get_direction_at(alpha);
+            let size = point[3] + 0.01;
+
+            let axis_rotation = Quat::from_axis_angle(
+                Vec3::from_slice(&tangent).normalize(),
+                i as f32 * rotation,
+            );
+
+            let path_rotation = Quat::from_rotation_arc(Vec3::Y, Vec3::from_slice(&tangent).normalize());
+
+            let rotation = path_rotation * axis_rotation;
 
             let transform = Mat4::from_scale_rotation_translation(
-                Vec3::new(point[3], point[3], point[3]),
-                Quat::from_xyzw(direction[0], direction[1], direction[2], 1.0).normalize(),
+                Vec3::new(size, size, size),
+                rotation,
                 Vec3::from_slice(&point),
             );
+
             transforms.push(transform);
         }
     }
@@ -67,11 +75,11 @@ pub fn execute(input: &[i32]) -> Vec<i32> {
     );
     let mut instances = wrap_instance_data(&mut instance_data);
     instances.set_geometry(geo);
-    (0..transforms.len()).for_each(|i| {
-        instances.set_transformation_matrix(i, &transforms[i].to_cols_array());
-    });
 
-    log!("WASM(instance): geo: {:?}", instance_data);
+    for (i, transform) in transforms.iter().enumerate() {
+        instances.set_transformation_matrix(i, &transform.to_cols_array());
+    }
+
     inputs.push(&instance_data);
 
     concat_args(inputs)

nodes/max/plantarium/leaf/.gitignore

@@ -0,0 +1,6 @@
+/target
+**/*.rs.bk
+Cargo.lock
+bin/
+pkg/
+wasm-pack.log

nodes/max/plantarium/leaf/Cargo.toml

@@ -0,0 +1,12 @@
+[package]
+name = "leaf"
+version = "0.1.0"
+authors = ["Max Richter <jim-x@web.de>"]
+edition = "2018"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+nodarium_macros = { version = "0.1.0", path = "../../../../packages/macros" }
+nodarium_utils = { version = "0.1.0", path = "../../../../packages/utils" }

nodes/max/plantarium/leaf/src/input.json

@@ -0,0 +1,24 @@
+{
+  "id": "max/plantarium/leaf",
+  "outputs": [
+    "geometry"
+  ],
+  "inputs": {
+    "shape": {
+      "type": "shape",
+      "external": true
+    },
+    "size": {
+      "type": "float",
+      "value": 1
+    },
+    "xResolution": {
+      "type": "integer",
+      "description": "The amount of stems to produce",
+      "min": 1,
+      "max": 64,
+      "value": 1,
+      "hidden": true
+    }
+  }
+}

nodes/max/plantarium/leaf/src/lib.rs

@@ -0,0 +1,166 @@
+use std::convert::TryInto;
+use std::f32::consts::PI;
+
+use nodarium_macros::nodarium_definition_file;
+use nodarium_macros::nodarium_execute;
+use nodarium_utils::encode_float;
+use nodarium_utils::evaluate_float;
+use nodarium_utils::evaluate_int;
+use nodarium_utils::log;
+use nodarium_utils::wrap_arg;
+use nodarium_utils::{split_args, decode_float};
+
+nodarium_definition_file!("src/input.json");
+
+fn calculate_y(x: f32) -> f32 {
+    let term1 = (x * PI * 2.0).sin().abs();
+    let term2 = (x * 2.0 * PI + (PI / 2.0)).sin() / 2.0;
+    term1 + term2
+}
+
+// Helper vector math functions
+fn vec_sub(a: &[f32; 3], b: &[f32; 3]) -> [f32; 3] {
+    [a[0] - b[0], a[1] - b[1], a[2] - b[2]]
+}
+
+fn vec_cross(a: &[f32; 3], b: &[f32; 3]) -> [f32; 3] {
+    [
+        a[1] * b[2] - a[2] * b[1],
+        a[2] * b[0] - a[0] * b[2],
+        a[0] * b[1] - a[1] * b[0],
+    ]
+}
+
+fn vec_normalize(v: &[f32; 3]) -> [f32; 3] {
+    let len = (v[0] * v[0] + v[1] * v[1] + v[2] * v[2]).sqrt();
+    if len == 0.0 { [0.0, 0.0, 0.0] } else { [v[0]/len, v[1]/len, v[2]/len] }
+}
+
+#[nodarium_execute]
+pub fn execute(input: &[i32]) -> Vec<i32> {
+    let args = split_args(input);
+    let input_path = split_args(args[0])[0];
+    let size = evaluate_float(args[1]);
+    let width_resolution = evaluate_int(args[2]).max(3) as usize;
+    let path_length = (input_path.len() - 4) / 2;
+
+    let slice_count = path_length;
+    let face_amount = (slice_count - 1) * (width_resolution - 1) * 2;
+    let position_amount = slice_count * width_resolution;
+
+    let out_length = 
+        3  // metadata
+        + face_amount * 3 // indices
+        + position_amount * 3  // positions
+        + position_amount * 3; // normals
+
+    let mut out = vec![0 as i32; out_length];
+
+    log!("face_amount={:?} position_amount={:?}", face_amount, position_amount);
+
+    out[0] = 1;
+    out[1] = position_amount.try_into().unwrap();
+    out[2] = face_amount.try_into().unwrap();
+    let mut offset = 3;
+
+    // Writing Indices
+    let mut idx = 0;
+    for i in 0..(slice_count - 1) {
+        let base0 = (i * width_resolution) as i32;
+        let base1 = ((i + 1) * width_resolution) as i32;
+
+        for j in 0..(width_resolution - 1) {
+            let a = base0 + j as i32;
+            let b = base0 + j as i32 + 1;
+            let c = base1 + j as i32;
+            let d = base1 + j as i32 + 1;
+
+            // triangle 1
+            out[offset + idx + 0] = a;
+            out[offset + idx + 1] = b;
+            out[offset + idx + 2] = c;
+
+            // triangle 2
+            out[offset + idx + 3] = b;
+            out[offset + idx + 4] = d;
+            out[offset + idx + 5] = c;
+
+            idx += 6;
+        }
+    }
+
+    offset += face_amount * 3;
+
+    // Writing Positions
+    let width = 50.0;
+    let mut positions = vec![[0.0f32; 3]; position_amount];
+    for i in 0..slice_count {
+        let ax = i as f32 / (slice_count -1) as f32;
+
+        let px = decode_float(input_path[2 + i * 2 + 0]);
+        let pz = decode_float(input_path[2 + i * 2 + 1]);
+
+
+        for j in 0..width_resolution {
+            let alpha = j as f32 / (width_resolution - 1) as f32;
+            let x = 2.0 * (-px * (alpha - 0.5) + alpha * width);
+            let py = calculate_y(alpha-0.5)*5.0*(ax*PI).sin();
+            let pz_val = pz - 100.0;
+
+            let pos_idx = i * width_resolution + j;
+            positions[pos_idx] = [x - width, py, pz_val];
+
+            let flat_idx = offset + pos_idx * 3;
+            out[flat_idx + 0] = encode_float((x - width) * size);
+            out[flat_idx + 1] = encode_float(py * size);
+            out[flat_idx + 2] = encode_float(pz_val * size);
+        }
+    }
+
+    // Writing Normals
+    offset += position_amount * 3;
+    let mut normals = vec![[0.0f32; 3]; position_amount];
+
+    for i in 0..(slice_count - 1) {
+        for j in 0..(width_resolution - 1) {
+            let a = i * width_resolution + j;
+            let b = i * width_resolution + j + 1;
+            let c = (i + 1) * width_resolution + j;
+            let d = (i + 1) * width_resolution + j + 1;
+
+            // triangle 1: a,b,c
+            let u = vec_sub(&positions[b], &positions[a]);
+            let v = vec_sub(&positions[c], &positions[a]);
+            let n1 = vec_cross(&u, &v);
+
+            // triangle 2: b,d,c
+            let u2 = vec_sub(&positions[d], &positions[b]);
+            let v2 = vec_sub(&positions[c], &positions[b]);
+            let n2 = vec_cross(&u2, &v2);
+
+            for &idx in &[a, b, c] {
+                normals[idx][0] += n1[0];
+                normals[idx][1] += n1[1];
+                normals[idx][2] += n1[2];
+            }
+
+            for &idx in &[b, d, c] {
+                normals[idx][0] += n2[0];
+                normals[idx][1] += n2[1];
+                normals[idx][2] += n2[2];
+            }
+        }
+    }
+
+    // normalize and write to output
+    for i in 0..position_amount {
+        let n = vec_normalize(&normals[i]);
+        let flat_idx = offset + i * 3;
+        out[flat_idx + 0] = encode_float(n[0]);
+        out[flat_idx + 1] = encode_float(n[1]);
+        out[flat_idx + 2] = encode_float(n[2]);
+    }
+
+    wrap_arg(&out)
+}
+

nodes/max/plantarium/shape/.gitignore

@@ -0,0 +1,6 @@
+/target
+**/*.rs.bk
+Cargo.lock
+bin/
+pkg/
+wasm-pack.log

nodes/max/plantarium/shape/Cargo.toml

@@ -0,0 +1,12 @@
+[package]
+name = "shape"
+version = "0.1.0"
+authors = ["Max Richter <jim-x@web.de>"]
+edition = "2018"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+nodarium_macros = { version = "0.1.0", path = "../../../../packages/macros" }
+nodarium_utils = { version = "0.1.0", path = "../../../../packages/utils" }

nodes/max/plantarium/shape/src/input.json

@@ -0,0 +1,27 @@
+{
+  "id": "max/plantarium/shape",
+  "outputs": [
+    "shape"
+  ],
+  "inputs": {
+    "shape": {
+      "type": "shape",
+      "internal": true,
+      "value": [
+        47.8,
+        100,
+        47.8,
+        82.8,
+        30.9,
+        69.1,
+        23.2,
+        40.7,
+        27.1,
+        14.5,
+        42.5,
+        0
+      ],
+      "label": ""
+    }
+  }
+}

nodes/max/plantarium/shape/src/lib.rs

@@ -0,0 +1,10 @@
+use nodarium_macros::nodarium_definition_file;
+use nodarium_macros::nodarium_execute;
+use nodarium_utils::{concat_args, split_args};
+
+nodarium_definition_file!("src/input.json");
+
+#[nodarium_execute]
+pub fn execute(input: &[i32]) -> Vec<i32> {
+    concat_args(split_args(input))
+}

package.json

@@ -1,12 +1,13 @@
 {
-  "version": "0.0.3",
+  "version": "0.0.4",
   "scripts": {
     "postinstall": "pnpm run -r --filter 'ui' build",
     "lint": "pnpm run -r --parallel lint",
+    "qa": "pnpm lint && pnpm check && pnpm test",
     "format": "pnpm dprint fmt",
     "format:check": "pnpm dprint check",
-    "test": "pnpm run -r test",
-    "check": "pnpm run -r check",
+    "test": "pnpm run -r --parallel test",
+    "check": "pnpm run -r --parallel check",
     "build": "pnpm build:nodes && pnpm build:app",
     "build:app": "BASE_PATH=/ui pnpm -r --filter 'ui' build && pnpm -r --filter 'app' 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/",

packages/types/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nodarium/types",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "",
   "main": "src/index.ts",
   "scripts": {

packages/types/src/inputs.ts

@@ -26,22 +26,32 @@ const DefaultOptionsSchema = z.object({
 export const NodeInputFloatSchema = z.object({
   ...DefaultOptionsSchema.shape,
   type: z.literal('float'),
-  element: z.literal('slider').optional(),
   value: z.number().optional(),
   min: z.number().optional(),
   max: z.number().optional(),
   step: z.number().optional()
 });
 
+export const NodeInputColorSchema = z.object({
+  ...DefaultOptionsSchema.shape,
+  type: z.literal('color'),
+  value: z.array(z.number()).optional()
+});
+
 export const NodeInputIntegerSchema = z.object({
   ...DefaultOptionsSchema.shape,
   type: z.literal('integer'),
-  element: z.literal('slider').optional(),
   value: z.number().optional(),
   min: z.number().optional(),
   max: z.number().optional()
 });
 
+export const NodeInputShapeSchema = z.object({
+  ...DefaultOptionsSchema.shape,
+  type: z.literal('shape'),
+  value: z.array(z.number()).optional()
+});
+
 export const NodeInputBooleanSchema = z.object({
   ...DefaultOptionsSchema.shape,
   type: z.literal('boolean'),
@@ -79,16 +89,25 @@ export const NodeInputPathSchema = z.object({
   value: z.array(z.number()).optional()
 });
 
+export const NodeInputAnySchema = z.object({
+  ...DefaultOptionsSchema.shape,
+  type: z.literal('*'),
+  value: z.any().optional()
+});
+
 export const NodeInputSchema = z.union([
   NodeInputSeedSchema,
   NodeInputBooleanSchema,
   NodeInputFloatSchema,
+  NodeInputColorSchema,
   NodeInputIntegerSchema,
+  NodeInputShapeSchema,
   NodeInputSelectSchema,
   NodeInputSeedSchema,
   NodeInputVec3Schema,
   NodeInputGeometrySchema,
-  NodeInputPathSchema
+  NodeInputPathSchema,
+  NodeInputAnySchema
 ]);
 
 export type NodeInput = z.infer<typeof NodeInputSchema>;

packages/types/src/lib.rs

@@ -103,6 +103,15 @@ pub struct NodeInputVec3 {
     pub value: Option<Vec<f64>>,
 }
 
+#[derive(Serialize, Deserialize)]
+pub struct NodeInputShape {
+    #[serde(flatten)]
+    pub default_options: DefaultOptions,
+
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub value: Option<Vec<f64>>,
+}
+
 #[derive(Serialize, Deserialize)]
 pub struct NodeInputGeometry {
     #[serde(flatten)]
@@ -125,6 +134,7 @@ pub enum NodeInput {
     select(NodeInputSelect),
     seed(NodeInputSeed),
     vec3(NodeInputVec3),
+    shape(NodeInputShape),
     geometry(NodeInputGeometry),
     path(NodeInputPath),
 }

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nodarium/ui",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "scripts": {
     "dev": "vite",
     "build": "vite build && npm run package",

packages/ui/src/lib/Details.svelte

@@ -1,31 +1,51 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte';
+  import { type Snippet } from 'svelte';
   interface Props {
     title?: string;
     transparent?: boolean;
     children?: Snippet;
     open?: boolean;
+    class?: string;
   }
-  let { title = 'Details', transparent = false, children, open = $bindable(false) }: Props =
-    $props();
+  let {
+    title = 'Details',
+    transparent = false,
+    children,
+    open = $bindable(false),
+    class: _class
+  }: Props = $props();
 </script>
 
-<details class:transparent bind:open class="text-text outline-1 outline-outline bg-layer-1">
+<details
+  class:transparent
+  bind:open
+  class="text-text outline-1 outline-outline bg-layer-2 {_class}"
+>
   <summary>{title}</summary>
-  <div class="content">
+  <div>
     {@render children?.()}
   </div>
 </details>
 
 <style>
   details {
+    border-radius: 2px;
+  }
+  summary {
     padding: 1em;
     padding-left: 20px;
-    border-radius: 2px;
     font-weight: 300;
     font-size: 0.9em;
   }
 
+  details[open] > summary {
+    border-bottom: solid thin var(--color-outline);
+  }
+
+  details > div {
+    padding: 1em;
+  }
+
   details.transparent {
     background-color: transparent;
     padding: 0;

packages/ui/src/lib/Input.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
   import type { NodeInput } from '@nodarium/types';
 
-  import { InputCheckbox, InputNumber, InputSelect, InputVec3 } from './index';
+  import {
+    InputCheckbox,
+    InputColor,
+    InputNumber,
+    InputSelect,
+    InputShape,
+    InputVec3
+  } from './index';
 
   interface Props {
     input: NodeInput;
@@ -19,8 +26,17 @@
     max={input?.max}
     step={input?.step}
   />
+{:else if input.type === 'shape'}
+  <InputShape bind:value={value as number[]} />
+{:else if input.type === 'color'}
+  <InputColor bind:value={value as [number, number, number]} />
 {:else if input.type === 'integer'}
-  <InputNumber bind:value={value as number} min={input?.min} max={input?.max} step={1} />
+  <InputNumber
+    bind:value={value as number}
+    min={input?.min}
+    max={input?.max}
+    step={1}
+  />
 {:else if input.type === 'boolean'}
   <InputCheckbox bind:value={value as boolean} {id} />
 {:else if input.type === 'select'}

packages/ui/src/lib/app.css

@@ -3,15 +3,14 @@
   prefix: "i";
 }
 
-@source inline("{hover:,}{bg-,outline-,text-,}layer-0");
-@source inline("{hover:,}{bg-,outline-,text-,}layer-1");
-@source inline("{hover:,}{bg-,outline-,text-,}layer-2");
-@source inline("{hover:,}{bg-,outline-,text-,}layer-3");
+@source inline("{hover:,}{bg-,outline-,text-,}layer-0{/30,/50,}");
+@source inline("{hover:,}{bg-,outline-,text-,}layer-1{/30,/50,}");
+@source inline("{hover:,}{bg-,outline-,text-,}layer-2{/30,/50,}");
+@source inline("{hover:,}{bg-,outline-,text-,}layer-3{/30,/50,}");
 @source inline("{hover:,}{bg-,outline-,text-,}active");
 @source inline("{hover:,}{bg-,outline-,text-,}selected");
 @source inline("{hover:,}{bg-,outline-,text-,}outline{!,}");
 @source inline("{hover:,}{bg-,outline-,text-,}connection");
-@source inline("{hover:,}{bg-,outline-,text-,}edge");
 @source inline("{hover:,}{bg-,outline-,text-,}text");
 
 /* fira-code-300 - latin */
@@ -72,15 +71,16 @@
 
   --color-outline: var(--neutral-400);
   --color-connection: #333333;
-  --color-edge: var(--connection, var(--color-outline));
 
   --color-text: var(--neutral-200);
 }
 
 html {
+  --neutral-050: #f0f0f0;
   --neutral-100: #e7e7e7;
   --neutral-200: #cecece;
   --neutral-300: #7c7c7c;
+  --neutral-350: #808080;
   --neutral-400: #2d2d2d;
   --neutral-500: #171717;
   --neutral-800: #111111;
@@ -89,14 +89,13 @@ html {
   --color-layer-0: var(--neutral-900);
   --color-layer-1: var(--neutral-500);
   --color-layer-2: var(--neutral-400);
-  --color-layer-3: var(--neutral-200);
+  --color-layer-3: var(--neutral-300);
 
   --color-active: #ffffff;
   --color-selected: #c65a19;
 
-  --color-outline: var(--neutral-400);
+  --color-outline: #3e3e3e;
   --color-connection: #333333;
-  --color-edge: var(--connection, var(--color-outline));
 
   --color-text-color: var(--neutral-200);
 }
@@ -109,11 +108,11 @@ body {
 
 html.theme-light {
   --color-text: var(--neutral-800);
-  --color-outline: var(--neutral-300);
-  --color-layer-0: var(--neutral-100);
+  --color-outline: var(--neutral-350);
+  --color-layer-0: var(--neutral-050);
   --color-layer-1: var(--neutral-100);
   --color-layer-2: var(--neutral-200);
-  --color-layer-3: var(--neutral-500);
+  --color-layer-3: var(--neutral-300);
   --color-active: #000000;
   --color-selected: #c65a19;
   --color-connection: #888;
@@ -142,15 +141,29 @@ html.theme-catppuccin {
 }
 
 html.theme-high-contrast {
-  --color-text: #ffffff;
+  --color-text: white;
   --color-outline: white;
-  --color-layer-0: #000000;
+  --color-layer-0: black;
   --color-layer-1: black;
-  --color-layer-2: #222222;
-  --color-layer-3: #ffffff;
+  --color-layer-2: black;
+  --color-layer-3: white;
+  --color-active: #00ff00;
+  --color-selected: #ff0000;
   --color-connection: #fff;
 }
 
+html.theme-high-contrast-light {
+  --color-text: black;
+  --color-outline: black;
+  --color-layer-0: white;
+  --color-layer-1: white;
+  --color-layer-2: white;
+  --color-layer-3: black;
+  --color-active: #00ffff;
+  --color-selected: #ff0000;
+  --color-connection: black;
+}
+
 html.theme-nord {
   --color-text: #d8dee9;
   --color-outline: #4c566a;

packages/ui/src/lib/index.ts

@@ -1,7 +1,9 @@
 export { default as Input } from './Input.svelte';
 export { default as InputCheckbox } from './inputs/InputCheckbox.svelte';
+export { default as InputColor } from './inputs/InputColor.svelte';
 export { default as InputNumber } from './inputs/InputNumber.svelte';
 export { default as InputSelect } from './inputs/InputSelect.svelte';
+export { default as InputShape } from './inputs/InputShape.svelte';
 export { default as InputVec3 } from './inputs/InputVec3.svelte';
 
 export { default as Details } from './Details.svelte';

packages/ui/src/lib/inputs/InputCheckbox.svelte

@@ -18,7 +18,7 @@
 </script>
 
 <label
-  class="relative inline-flex h-5.5 w-5.5 cursor-pointer items-center justify-center bg-layer-2 rounded-[5px]"
+  class="relative inline-flex h-5.5 w-5.5 cursor-pointer items-center justify-center bg-layer-2 outline-1 outline-outline rounded-[5px]"
 >
   <input
     type="checkbox"
@@ -27,7 +27,7 @@
     {id}
   />
   <span
-    class="absolute opacity-0 peer-checked:opacity-100 transition-opacity duration-100 flex w-full h-full items-center justify-center"
+    class="absolute opacity-0 peer-checked:opacity-100 transition-opacity duration-50 flex w-full h-full items-center justify-center"
   >
     <svg
       viewBox="0 0 19 14"

packages/ui/src/lib/inputs/InputColor.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  interface Props {
+    value?: [number, number, number];
+    id?: string;
+  }
+
+  let {
+    value = $bindable([255, 255, 255] as [number, number, number]),
+    id
+  }: Props = $props();
+
+  let hexValue = $derived(
+    `#${value.map((c) => c.toString(16).padStart(2, '0')).join('')}`
+  );
+
+  function handleHexInput(e: Event) {
+    const target = e.target as HTMLInputElement;
+    let val = target.value.replace(/[^0-9a-fA-F]/g, '');
+    if (val.length > 6) val = val.slice(0, 6);
+    if (val.length === 3) {
+      val = val
+        .split('')
+        .map((c) => c + c)
+        .join('');
+    }
+    if (val.length === 6) {
+      value = [
+        parseInt(val.slice(0, 2), 16),
+        parseInt(val.slice(2, 4), 16),
+        parseInt(val.slice(4, 6), 16)
+      ] as [number, number, number];
+    }
+  }
+</script>
+
+<div class="flex overflow-hidden rounded-sm border border-outline bg-layer-2 w-min">
+  <label
+    class="-ml-px w-8 shrink-0 overflow-hidden"
+    style={`background-color: ${hexValue}`}
+  >
+    <input
+      type="color"
+      bind:value={hexValue}
+      {id}
+      oninput={handleHexInput}
+      class="h-full w-8 cursor-pointer appearance-none p-0"
+    />
+  </label>
+  <div class="flex items-center gap-1 px-2 py-1">
+    <span class="pointer-events-none text-text opacity-30">#</span>
+    <input
+      type="text"
+      value={hexValue.slice(1)}
+      {id}
+      oninput={handleHexInput}
+      maxlength={6}
+      class="w-15 bg-transparent text-text outline-none"
+    />
+  </div>
+</div>
+
+<style>
+  input[type="color"] {
+    margin-top: -1px;
+    margin-right: -1px;
+    height: calc(100% + 2px);
+  }
+</style>

packages/ui/src/lib/inputs/InputNumber.svelte

@@ -126,7 +126,7 @@
     <button
       aria-label="step down"
       onmousedown={stepDown}
-      class="cursor-pointer w-4 bg-layer-3 opacity-30 hover:opacity-50"
+      class="cursor-pointer w-4 bg-layer-3/30 hover:bg-layer-3/50"
     >
       <span class="i-[tabler--chevron-compact-left] block h-full w-full text-outline!"></span>
     </button>
@@ -161,7 +161,7 @@
     <button
       aria-label="step up"
       onmousedown={stepUp}
-      class="cursor-pointer w-4 bg-layer-3 opacity-30 hover:opacity-50"
+      class="cursor-pointer w-4 bg-layer-3/30 hover:bg-layer-3/50"
     >
       <span class="i-[tabler--chevron-compact-right] block h-full w-full text-outline!"></span>
     </button>

packages/ui/src/lib/inputs/InputSelect.svelte

@@ -18,7 +18,7 @@
   select {
     font-family: var(--font-family);
     outline: solid 1px var(--color-outline);
-    padding: 0.8em 1em;
+    padding: 0.5em 0.8em;
     border-radius: 5px;
     border: none;
   }

packages/ui/src/lib/inputs/InputShape.svelte

@@ -0,0 +1,287 @@
+<script lang="ts">
+  type Props = {
+    value: number[];
+    mirror?: boolean;
+  };
+
+  let { value: points = $bindable(), mirror = true }: Props = $props();
+
+  let mouseDown = $state<number[]>();
+  let draggingIndex = $state<number>();
+  let downCirclePosition = $state<number[]>();
+  let svgElement = $state<SVGElement>(null!);
+  let svgRect = $state<DOMRect>(null!);
+  let isMirroredEvent = $state(false);
+
+  const pathD = $derived(calculatePath(points, mirror));
+  const groupedPoints = $derived(group(points));
+
+  function group<T>(arr: T[], size = 2): T[][] {
+    const result = [];
+    for (let i = 0; i < arr.length; i += size) {
+      result.push(arr.slice(i, i + size));
+    }
+    return result;
+  }
+  const dist = (a: [number, number], b: [number, number]) => Math.hypot(a[0] - b[0], a[1] - b[1]);
+  const clamp = (v: number, min: number, max: number) => Math.min(Math.max(v, min), max);
+  const round = (v: number) => Math.floor(v * 10) / 10;
+  const getPt = (i: number) => [points[i * 2], points[i * 2 + 1]] as [number, number];
+
+  $effect(() => {
+    if (!points.length) {
+      points = [
+        47.8,
+        100,
+        47.8,
+        82.8,
+        30.9,
+        69.1,
+        23.2,
+        40.7,
+        27.1,
+        14.5,
+        42.5,
+        0
+      ];
+    }
+  });
+
+  $effect(() => {
+    if (mirror) {
+      const _points: [number, number, number][] = [];
+      for (let i = 0; i < points.length / 2; i++) {
+        const pt = [...getPt(i), i] as [number, number, number];
+        if (pt[0] > 50) {
+          pt[0] = 100 - pt[0];
+        }
+        _points.push(pt);
+      }
+
+      const sortedPoints = _points.sort((a, b) => {
+        if (a[1] !== b[1]) return b[1] - a[1];
+        return a[0] - b[0];
+      });
+
+      const newIndices = new Map(sortedPoints.map((p, i) => [p[2], i]));
+
+      const sorted = sortedPoints.map((p) => [p[0], p[1]]).flat();
+
+      let sortChanged = false;
+
+      for (let i = 0; i < sorted.length; i++) {
+        if (sorted[i] !== points[i]) {
+          sortChanged = true;
+          break;
+        }
+      }
+
+      if (sortChanged) {
+        points = sorted;
+        draggingIndex = newIndices.get(draggingIndex || 0) || 0;
+      }
+    }
+  });
+
+  function insertBetween(newPt: [number, number]): number {
+    const count = points.length / 2;
+
+    if (count < 2) {
+      points = [...points, ...newPt];
+      return count;
+    }
+
+    let minDist = Infinity;
+    let insertIdx = 0;
+
+    for (let i = 0; i < count - 1; i++) {
+      const a = getPt(i);
+      const b = getPt(i + 1);
+      const d = dist(newPt, a) + dist(newPt, b) - dist(a, b);
+      if (d < minDist) {
+        minDist = d;
+        insertIdx = i + 1;
+      }
+    }
+
+    points.splice(insertIdx * 2, 0, newPt[0], newPt[1]);
+    return insertIdx;
+  }
+
+  function calculatePath(pts: number[], mirror = false): string {
+    if (pts.length === 0) return '';
+
+    const arr = [...pts];
+
+    let d = `M ${arr[0]} ${arr[1]}`;
+    for (let i = 2; i < arr.length; i += 2) {
+      d += ` L ${arr[i]} ${arr[i + 1]}`;
+    }
+
+    if (mirror) {
+      for (let i = arr.length - 2; i >= 0; i -= 2) {
+        const x = 100 - arr[i];
+        d += ` L ${x} ${arr[i + 1]}`;
+      }
+    }
+    d += ' Z';
+
+    return d;
+  }
+
+  function handleMouseMove(ev: MouseEvent) {
+    if (
+      mouseDown === undefined
+      || draggingIndex === undefined
+      || !downCirclePosition
+    ) {
+      return;
+    }
+
+    let vx = (mouseDown[0] - ev.clientX) * (100 / svgRect.width);
+    let vy = (mouseDown[1] - ev.clientY) * (100 / svgRect.height);
+
+    if (ev.shiftKey) {
+      vx /= 10;
+      vy /= 10;
+    }
+
+    let x = downCirclePosition[0] + (isMirroredEvent ? 1 : -1) * vx;
+    let y = downCirclePosition[1] - vy;
+
+    x = clamp(x, 0, mirror ? 50 : 100);
+    y = clamp(y, 0, 100);
+
+    points[draggingIndex * 2] = round(x);
+    points[draggingIndex * 2 + 1] = round(y);
+  }
+
+  function handleMouseDown(ev: MouseEvent) {
+    ev.preventDefault();
+    isMirroredEvent = false;
+
+    svgRect = svgElement.getBoundingClientRect();
+    mouseDown = [ev.clientX, ev.clientY];
+
+    const indexText = (ev.target as SVGCircleElement).dataset.index;
+
+    const x = ((ev.clientX - svgRect.left) / svgRect.width) * 100;
+    const y = ((ev.clientY - svgRect.top) / svgRect.height) * 100;
+    isMirroredEvent = mirror && x > 50;
+
+    if (indexText !== undefined) {
+      draggingIndex = parseInt(indexText);
+      downCirclePosition = getPt(draggingIndex);
+    } else {
+      draggingIndex = undefined;
+
+      const pt = [round(clamp(x, 0, 100)), round(clamp(y, 0, 100))] as [
+        number,
+        number
+      ];
+      if (isMirroredEvent) {
+        pt[0] = 100 - pt[0];
+      }
+
+      draggingIndex = insertBetween(pt);
+      downCirclePosition = pt;
+    }
+  }
+
+  function handleMouseUp() {
+    mouseDown = undefined;
+    draggingIndex = undefined;
+  }
+
+  function handleContextMenu(ev: MouseEvent) {
+    const indexText = (ev.target as HTMLElement).dataset?.index;
+    if (indexText !== undefined) {
+      ev.preventDefault();
+      ev.stopImmediatePropagation();
+      const index = parseInt(indexText);
+      draggingIndex = undefined;
+      points.splice(index * 2, 2);
+    }
+  }
+</script>
+
+<svelte:window
+  onmousemove={handleMouseMove}
+  onmouseup={handleMouseUp}
+  oncontextmenu={handleContextMenu}
+/>
+
+<div class="wrapper" class:mirrored={mirror}>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <svg
+    width="100"
+    height="100"
+    viewBox="0 0 100 100"
+    bind:this={svgElement}
+    aria-label="Interactive 2D Shape Editor"
+    onmousedown={handleMouseDown}
+  >
+    <path d={pathD} style:fill="var(--color-layer-3)" style:opacity={0.3} />
+    <path d={pathD} fill="none" stroke="var(--color-layer-3)" />
+    {#if mirror}
+      {#each groupedPoints as p, i (i)}
+        {@const x = 100 - p[0]}
+        {@const y = p[1]}
+        <circle
+          class:active={isMirroredEvent && draggingIndex === i}
+          data-index={i}
+          cx={x}
+          cy={y}
+          r={3}
+        >
+        </circle>
+      {/each}
+    {/if}
+
+    {#each groupedPoints as p, i (i)}
+      <circle
+        class:active={!isMirroredEvent && draggingIndex === i}
+        data-index={i}
+        cx={p[0]}
+        cy={p[1]}
+        r={3}
+      >
+      </circle>
+    {/each}
+  </svg>
+</div>
+
+<style>
+  .wrapper {
+    width: 100%;
+    aspect-ratio: 1;
+    background-color: var(--color-layer-2);
+    padding: 7px;
+    border-radius: 5px;
+    outline: solid thin var(--color-outline);
+  }
+
+  svg {
+    height: 100%;
+    width: 100%;
+    overflow: visible;
+  }
+
+  circle {
+    cursor: pointer;
+    stroke: transparent;
+    transition: fill 0.2s ease;
+    stroke-width: 1px;
+    stroke: var(--color-layer-3);
+    fill: var(--color-layer-2);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+  svg:hover circle {
+    opacity: 1;
+  }
+  circle.active,
+  circle:hover {
+    fill: var(--color-layer-3);
+  }
+</style>

packages/ui/src/routes/+page.svelte

@@ -1,7 +1,18 @@
 <script lang="ts">
   import '$lib/app.css';
-  import { Details, InputCheckbox, InputNumber, InputSelect, InputVec3, ShortCut } from '$lib';
+  import {
+    Details,
+    InputCheckbox,
+    InputColor,
+    InputNumber,
+    InputSelect,
+    InputShape,
+    InputVec3,
+    ShortCut
+  } from '$lib';
   import Section from './Section.svelte';
+  import Theme from './Theme.svelte';
+  import ThemeSelector from './ThemeSelector.svelte';
 
   let intValue = $state(0);
   let floatValue = $state(0.2);
@@ -10,61 +21,23 @@
   const options = ['strawberry', 'raspberry', 'chickpeas'];
   let selectValue = $state(0);
   const d = $derived(options[selectValue]);
-
   let checked = $state(false);
+  let colorValue = $state<[number, number, number]>([59, 130, 246]);
+  let mirrorShape = $state(true);
   let detailsOpen = $state(false);
 
-  const themes = [
-    'dark',
-    'light',
-    'solarized',
-    'catppuccin',
-    'high-contrast',
-    'nord',
-    'dracula'
-  ];
-  let themeIndex = $state(0);
-  $effect(() => {
-    const classList = document.documentElement.classList;
-    for (const c of classList) {
-      if (c.startsWith('theme-')) document.documentElement.classList.remove(c);
-    }
-    document.documentElement.classList.add(`theme-${themes[themeIndex]}`);
-  });
-
-  const colors = [
-    'layer-0',
-    'layer-1',
-    'layer-2',
-    'layer-3',
-    'active',
-    'selected',
-    'outline',
-    'connection',
-    'edge',
-    'text'
-  ];
+  let points = $state([]);
+  let theme = $state('dark');
 </script>
 
 <main class="flex flex-col gap-8 py-8">
   <div class="flex gap-4">
     <h1 class="text-4xl">@nodarium/ui</h1>
-    <InputSelect bind:value={themeIndex} options={themes}></InputSelect>
+    <ThemeSelector bind:theme />
   </div>
 
-  <Section title="Colors">
-    <table>
-      <tbody>
-        {#each colors as color (color)}
-          <tr>
-            <td>
-              <div class="w-6 h-6 mr-2 my-1 rounded-sm outline-1 bg-{color}"></div>
-            </td>
-            <td>{color}</td>
-          </tr>
-        {/each}
-      </tbody>
-    </table>
+  <Section title="InputNumber">
+    <Theme />
   </Section>
 
   <Section title="InputNumber">
@@ -90,6 +63,23 @@
     <InputCheckbox bind:value={checked} />
   </Section>
 
+  <Section title="Color" value={colorValue}>
+    <InputColor bind:value={colorValue} />
+  </Section>
+
+  <Section title="Shape">
+    {#snippet header()}
+      <label class="flex gap-2">
+        <InputCheckbox bind:value={mirrorShape} />
+        <p>mirror</p>
+      </label>
+      <p class="max-w-full overflow-hidden">{JSON.stringify(points)}</p>
+    {/snippet}
+    <div style:width="300px">
+      <InputShape bind:value={points} mirror={mirrorShape} />
+    </div>
+  </Section>
+
   <Section title="Details" value={detailsOpen}>
     <Details title="More Information" bind:open={detailsOpen}>
       <p>Here is some more information that was previously hidden.</p>

packages/ui/src/routes/Section.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import { type Snippet } from 'svelte';
-  let { title, value, children, class: _class } = $props<{
+  let { title, value, header, children, class: _class } = $props<{
     title?: string;
     value?: unknown;
+    header?: Snippet;
     children?: Snippet;
     class?: string;
   }>();
@@ -11,7 +12,13 @@
 <section class="border-outline border-1/2 bg-layer-1 rounded border mb-4 p-4 flex flex-col gap-4 {_class}">
   <h3 class="flex gap-2 font-bold">
     {title}
-    <p class="font-normal! opacity-50!">{value}</p>
+    <div class="flex gap-4 w-full font-normal opacity-50 max-w-[75%]">
+      {#if header}
+        {@render header()}
+      {:else}
+        {value}
+      {/if}
+    </div>
   </h3>
   <div>
     {@render children()}

packages/ui/src/routes/Theme.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import { InputColor } from '$lib';
+
+  const colors = [
+    'layer-0',
+    'layer-1',
+    'layer-2',
+    'layer-3',
+    'active',
+    'selected',
+    'outline',
+    'connection',
+    'text'
+  ];
+
+  type CustomColors = {
+    text: [number, number, number];
+    outline: [number, number, number];
+    'layer-0': [number, number, number];
+    'layer-1': [number, number, number];
+    'layer-2': [number, number, number];
+    'layer-3': [number, number, number];
+    active: [number, number, number];
+    selected: [number, number, number];
+    connection: [number, number, number];
+  };
+
+  type CustomColorKey = keyof CustomColors;
+
+  let customColors = $state<CustomColors>({
+    text: [205, 214, 244],
+    outline: [62, 62, 79],
+    'layer-0': [6, 6, 27],
+    'layer-1': [23, 23, 46],
+    'layer-2': [49, 50, 68],
+    'layer-3': [168, 170, 200],
+    active: [0, 0, 0],
+    selected: [38, 139, 210],
+    connection: [131, 148, 150]
+  });
+
+  const themeCss = $derived.by(() => {
+    return `<style>html.theme-custom{
+  ${
+      Object.keys(customColors)
+        .map((v) => {
+          return `--color-${v}: rgb(${customColors[v as CustomColorKey].join(',')});`;
+        })
+        .join('\n')
+    }
+</style>`;
+  });
+</script>
+
+<svelte:head>
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+  {@html themeCss}
+</svelte:head>
+
+<table>
+  <thead>
+    <tr>
+      <th>Color</th>
+      <th>Name</th>
+      <th>Custom</th>
+    </tr>
+  </thead>
+  <tbody>
+    {#each colors as color (color)}
+      <tr>
+        <td>
+          <div class="w-6 h-6 mr-2 my-1 rounded-sm outline-1 bg-{color}"></div>
+        </td>
+        <td>{color}</td>
+        <td>
+          <InputColor bind:value={customColors[color as CustomColorKey]} />
+        </td>
+      </tr>
+    {/each}
+  </tbody>
+</table>
+
+<style>
+  table {
+    border-spacing: 5px;
+    border-collapse: separate;
+    text-align: left;
+    margin-left: 5px;
+  }

packages/ui/src/routes/ThemeSelector.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { InputSelect } from '$lib';
+  const themes = [
+    'dark',
+    'light',
+    'solarized',
+    'catppuccin',
+    'high-contrast',
+    'high-contrast-light',
+    'nord',
+    'dracula',
+    'custom'
+  ];
+
+  let { theme = $bindable() } = $props();
+
+  let themeIndex = $state(0);
+  $effect(() => {
+    theme = themes[themeIndex];
+    const classList = document.documentElement.classList;
+    for (const c of classList) {
+      if (c.startsWith('theme-')) document.documentElement.classList.remove(c);
+    }
+    document.documentElement.classList.add(`theme-${themes[themeIndex]}`);
+  });
+</script>
+
+<InputSelect bind:value={themeIndex} options={themes}></InputSelect>

packages/utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nodarium/utils",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "",
   "main": "src/index.ts",
   "scripts": {

packages/utils/src/flatTree.test.ts

@@ -1,5 +1,10 @@
 import { expect, test } from 'vitest';
-import { concatEncodedArrays, decodeNestedArray, encodeNestedArray } from './flatTree';
+import {
+  concatEncodedArrays,
+  decodeNestedArray,
+  encodeNestedArray,
+  splitNestedArray
+} from './flatTree';
 
 test('it correctly concats nested arrays', () => {
   const input_a = encodeNestedArray([1, 2, 3]);
@@ -82,3 +87,80 @@ test('it correctly handles arrays with mixed data types', () => {
   const decoded = decodeNestedArray(encodeNestedArray(input));
   expect(decoded).toEqual(input);
 });
+
+// Test splitNestedArray function
+test('it splits nested array into segments based on structure', () => {
+  const input = [[1, 2], [3, 4]];
+  const encoded = new Int32Array(encodeNestedArray(input));
+  const split = splitNestedArray(encoded);
+
+  // Based on the actual behavior, splitNestedArray returns segments
+  // but the specific behavior needs to match the implementation
+  expect(Array.isArray(split)).toBe(true);
+  expect(split.length).toBe(2);
+  expect(split[0][0]).toBe(1);
+  expect(split[0][1]).toBe(2);
+  expect(split[1][0]).toBe(3);
+  expect(split[1][1]).toBe(4);
+});
+
+// Test splitNestedArray function
+test('it splits nested array into segments based on structure 2', () => {
+  // dprint-ignore
+  const encoded = new Int32Array([
+    0, 1,
+      0, 19,
+        0, 1,
+        0,          0,           0,          1060487823,
+        1067592955, 1079491492, -1086248132, 1056069822,
+       -1078247113, 1086620820,  1073133800, 1047681214,
+       -1068353940, 1094067306,  1078792112, 0,
+      1, 1,
+      0, 19,
+        0, 1,
+        0,          0,           0,          1060487823,
+       -1089446963, 1080524584,  1041006274, 1056069822,
+       -1092176382, 1087031528, -1088851934, 1047681214,
+        1081482392, 1094426140, -1107842261, 0,
+      1, 1,
+    1, 1
+  ]);
+
+  // Should be split into two seperate arrays
+  const split = splitNestedArray(encoded);
+
+  // Based on the actual behavior, splitNestedArray returns segments
+  // but the specific behavior needs to match the implementation
+  expect(Array.isArray(split)).toBe(true);
+  expect(split.length).toBe(2);
+  expect(split[0][0]).toBe(0);
+  expect(split[0][1]).toBe(1);
+  expect(split[1][0]).toBe(0);
+  expect(split[1][1]).toBe(1);
+});
+
+// Test splitNestedArray function
+test('it splits nested array into segments based on structure 2', () => {
+  // dprint-ignore
+  const encoded = new Int32Array( [
+    0, 1,
+      0, 27,
+        0, 1,
+        0, 0,          0, 1065353216,
+        0, 1067757391, 0, 1061997773,
+        0, 1076145999, 0, 1058642330,
+        0, 1081542391, 0, 1053609164,
+        0, 1084534607, 0, 1045220556,
+        0, 1087232803, 0, 0,
+      1, 1,
+    1, 1
+  ]);
+
+  // Should be split into two seperate arrays
+  const split = splitNestedArray(encoded);
+
+  // Based on the actual behavior, splitNestedArray returns segments
+  // but the specific behavior needs to match the implementation
+  expect(Array.isArray(split)).toBe(true);
+  expect(split.length).toBe(1);
+});

pnpm-lock.yaml

@@ -53,6 +53,9 @@ importers:
       jsondiffpatch:
         specifier: ^0.7.3
         version: 0.7.3
+      micromark:
+        specifier: ^4.0.2
+        version: 4.0.2
       tailwindcss:
         specifier: ^4.1.18
         version: 4.1.18
@@ -1235,6 +1238,9 @@ packages:
   '@types/cookie@0.6.0':
     resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
 
+  '@types/debug@4.1.12':
+    resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
+
   '@types/deep-eql@4.0.2':
     resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
 
@@ -1250,6 +1256,9 @@ packages:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
+  '@types/ms@2.1.0':
+    resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
+
   '@types/node@22.8.6':
     resolution: {integrity: sha512-tosuJYKrIqjQIlVCM4PEGxOmyg3FCPa/fViuJChnGeEIhjA46oy8FMVoF9su1/v8PNs2a8Q0iFNyOx0uOF91nw==}
 
@@ -1481,6 +1490,9 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
+  character-entities@2.0.2:
+    resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
+
   chokidar-cli@https://codeload.github.com/open-cli-tools/chokidar-cli/tar.gz/8dd8a1e8631d377de600f628d819a0cda46c102f:
     resolution: {tarball: https://codeload.github.com/open-cli-tools/chokidar-cli/tar.gz/8dd8a1e8631d377de600f628d819a0cda46c102f}
     version: 4.0.0
@@ -1592,6 +1604,9 @@ packages:
   decimal.js@10.6.0:
     resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
 
+  decode-named-character-reference@1.3.0:
+    resolution: {integrity: sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==}
+
   dedent-js@1.0.1:
     resolution: {integrity: sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==}
 
@@ -1617,6 +1632,9 @@ packages:
   devalue@5.6.2:
     resolution: {integrity: sha512-nPRkjWzzDQlsejL1WVifk5rvcFi/y1onBRxjaFMjZeR9mFpqu2gmAZ9xUB9/IEanEP/vBtGeGganC/GO1fmufg==}
 
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+
   diet-sprite@0.0.1:
     resolution: {integrity: sha512-zSHI2WDAn1wJqJYxcmjWfJv3Iw8oL9reQIbEyx2x2/EZ4/qmUTIo8/5qOCurnAcq61EwtJJaZ0XTy2NRYqpB5A==}
 
@@ -2155,6 +2173,66 @@ packages:
   meshoptimizer@0.22.0:
     resolution: {integrity: sha512-IebiK79sqIy+E4EgOr+CAw+Ke8hAspXKzBd0JdgEmPHiAwmvEj2S4h1rfvo+o/BnfEYd/jAOg5IeeIjzlzSnDg==}
 
+  micromark-core-commonmark@2.0.3:
+    resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
+
+  micromark-factory-destination@2.0.1:
+    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
+
+  micromark-factory-label@2.0.1:
+    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
+
+  micromark-factory-space@2.0.1:
+    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
+
+  micromark-factory-title@2.0.1:
+    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
+
+  micromark-factory-whitespace@2.0.1:
+    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
+
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+
+  micromark-util-chunked@2.0.1:
+    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
+
+  micromark-util-classify-character@2.0.1:
+    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
+
+  micromark-util-combine-extensions@2.0.1:
+    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
+
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+
+  micromark-util-html-tag-name@2.0.1:
+    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
+
+  micromark-util-normalize-identifier@2.0.1:
+    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
+
+  micromark-util-resolve-all@2.0.1:
+    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
+
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+
+  micromark-util-subtokenize@2.1.0:
+    resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
+
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+
+  micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
+
+  micromark@4.0.2:
+    resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
+
   mime-db@1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
@@ -3593,6 +3671,10 @@ snapshots:
 
   '@types/cookie@0.6.0': {}
 
+  '@types/debug@4.1.12':
+    dependencies:
+      '@types/ms': 2.1.0
+
   '@types/deep-eql@4.0.2': {}
 
   '@types/eslint@9.6.1':
@@ -3606,6 +3688,8 @@ snapshots:
 
   '@types/json-schema@7.0.15': {}
 
+  '@types/ms@2.1.0': {}
+
   '@types/node@22.8.6':
     dependencies:
       undici-types: 6.19.8
@@ -3920,6 +4004,8 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  character-entities@2.0.2: {}
+
   chokidar-cli@https://codeload.github.com/open-cli-tools/chokidar-cli/tar.gz/8dd8a1e8631d377de600f628d819a0cda46c102f:
     dependencies:
       chokidar: 3.6.0
@@ -4038,6 +4124,10 @@ snapshots:
   decimal.js@10.6.0:
     optional: true
 
+  decode-named-character-reference@1.3.0:
+    dependencies:
+      character-entities: 2.0.2
+
   dedent-js@1.0.1: {}
 
   deep-is@0.1.4: {}
@@ -4053,6 +4143,10 @@ snapshots:
 
   devalue@5.6.2: {}
 
+  devlop@1.1.0:
+    dependencies:
+      dequal: 2.0.3
+
   diet-sprite@0.0.1: {}
 
   diff@4.0.4:
@@ -4661,6 +4755,132 @@ snapshots:
 
   meshoptimizer@0.22.0: {}
 
+  micromark-core-commonmark@2.0.3:
+    dependencies:
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      micromark-factory-destination: 2.0.1
+      micromark-factory-label: 2.0.1
+      micromark-factory-space: 2.0.1
+      micromark-factory-title: 2.0.1
+      micromark-factory-whitespace: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-html-tag-name: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-destination@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-label@2.0.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-space@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-title@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-whitespace@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-character@2.1.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-chunked@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-classify-character@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-combine-extensions@2.0.1:
+    dependencies:
+      micromark-util-chunked: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-encode@2.0.1: {}
+
+  micromark-util-html-tag-name@2.0.1: {}
+
+  micromark-util-normalize-identifier@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-resolve-all@2.0.1:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-util-sanitize-uri@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-subtokenize@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-symbol@2.0.1: {}
+
+  micromark-util-types@2.0.2: {}
+
+  micromark@4.0.2:
+    dependencies:
+      '@types/debug': 4.1.12
+      debug: 4.4.3
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-encode: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
   mime-db@1.52.0:
     optional: true