fix(ci): update changelog before building

Merge pull request 'feat/shape-node' (#36 ) from feat/shape-node into main
Reviewed-on: #36
2026-02-10 14:59:17 +01:00 · 2026-02-09 22:32:14 +01:00 · 2026-02-09 22:27:43 +01:00 · 2026-02-09 22:21:28 +01:00 · 2026-02-09 22:16:20 +01:00 · 2026-02-09 22:16:02 +01:00
57 changed files with 1576 additions and 288 deletions
--- a/.dprint.jsonc
+++ b/.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",
  ],
 }
--- a/.gitea/scripts/build.sh
+++ b/.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}"
--- a/.gitea/scripts/ci-checks.sh
+++ b/.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
--- a/.gitea/scripts/create-release.sh
+++ b/.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,15 @@ 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 "$COMMITS"
    echo ""
  fi
-  echo "---"
  echo ""
  if [ -f CHANGELOG.md ]; then
    cat CHANGELOG.md
@@ -87,5 +86,4 @@ else
  git push origin main
 fi

-cp CHANGELOG.md app/static/CHANGELOG.md
 echo "✅ Release process for $TAG complete"
--- a/.gitea/workflows/build-ci-image.yaml
+++ b/.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 }}
--- a/.gitea/workflows/release.yaml
+++ b/.gitea/workflows/release.yaml
@@ -8,8 +8,8 @@ on:
    branches: ["*"]

 env:
-  PNPM_CACHE_FOLDER: /.pnpm-store
-  CARGO_HOME: /.cargo
+  PNPM_CACHE_FOLDER: .pnpm-store
+  CARGO_HOME: .cargo
  CARGO_TARGET_DIR: target

 jobs:
@@ -47,15 +47,20 @@ 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 build
+          pnpm lint
+          pnpm format:check
+          pnpm check
+          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

+      - name: 🛠️ Build
+        run: ./.gitea/scripts/build.sh
+
      - name: 🏷️ Create Gitea Release
        if: gitea.ref_type == 'tag'
        uses: akkuman/gitea-release-action@v1
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,13 +1,70 @@
-## v0.0.2 (2026-02-04)
+# v0.0.3 (2026-02-07)

-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
+
+- 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.

 ---

-## v0.0.1 (2026-02-03)
+- [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
-
---
--- a/Cargo.lock
+++ b/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"
--- a/app/package.json
+++ b/app/package.json
@@ -5,6 +5,7 @@
  "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"
  },
--- a/app/src/lib/graph-interface/background/Background.frag
+++ b/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);
 }

--- a/app/src/lib/graph-interface/background/Background.svelte
+++ b/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>
--- a/app/src/lib/graph-interface/edges/Edge.svelte
+++ b/app/src/lib/graph-interface/edges/Edge.svelte
@@ -2,19 +2,19 @@
  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());
+  let lineColor = $state(colors.outline.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();
+      lineColor = colors.outline.clone().convertSRGBToLinear();
    });
  });

--- a/app/src/lib/graph-interface/graph-state.svelte.ts
+++ b/app/src/lib/graph-interface/graph-state.svelte.ts
@@ -83,7 +83,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];
@@ -186,15 +186,25 @@ export class GraphState {
    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;
+    let height = 5;
+
+    for (const key of Object.keys(node.inputs)) {
+      if (key === 'seed') continue;
+      if (!node.inputs) continue;
+      if (node?.inputs?.[key] === undefined) continue;
+      if ('setting' in node.inputs[key]) continue;
+      if (node.inputs[key].hidden) continue;
+      if (
+        node.inputs[key].type === 'shape'
+        && node.inputs[key].external !== true
+        && node.inputs[key].internal !== false
+      ) {
+        height += 20;
+        continue;
+      }
+      height += 10;
+    }
+
    this.nodeHeightCache[nodeTypeId] = height;
    return height;
  }
--- a/app/src/lib/graph-interface/graph/Graph.svelte
+++ b/app/src/lib/graph-interface/graph/Graph.svelte
@@ -132,8 +132,9 @@
      position={graphState.cameraPosition}
    />

-    {#if graphState.showGrid !== false}
+    {#if graphState.backgroundType !== 'none'}
      <Background
+        type={graphState.backgroundType}
        cameraPosition={graphState.cameraPosition}
        {maxZoom}
        {minZoom}
--- a/app/src/lib/graph-interface/graph/Wrapper.svelte
+++ b/app/src/lib/graph-interface/graph/Wrapper.svelte
@@ -13,7 +13,7 @@
    settings?: Record<string, unknown>;

    activeNode?: NodeInstance;
-    showGrid?: boolean;
+    backgroundType?: 'grid' | 'dots' | 'none';
    snapToGrid?: boolean;
    showHelp?: boolean;
    settingTypes?: Record<string, unknown>;
@@ -27,7 +27,7 @@
    registry,
    settings = $bindable(),
    activeNode = $bindable(),
-    showGrid = $bindable(true),
+    backgroundType = $bindable('grid'),
    snapToGrid = $bindable(true),
    showHelp = $bindable(false),
    settingTypes = $bindable(),
@@ -43,7 +43,7 @@

  const graphState = new GraphState(manager);
  $effect(() => {
-    graphState.showGrid = showGrid;
+    graphState.backgroundType = backgroundType;
    graphState.snapToGrid = snapToGrid;
    graphState.showHelp = showHelp;
  });
--- a/app/src/lib/graph-interface/graph/colors.svelte.ts
+++ b/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]) {
--- a/app/src/lib/graph-interface/graph/mouse.events.ts
+++ b/app/src/lib/graph-interface/graph/mouse.events.ts
@@ -166,15 +166,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;
--- a/app/src/lib/graph-interface/node/Node.svelte
+++ b/app/src/lib/graph-interface/node/Node.svelte
@@ -57,7 +57,7 @@
    uniforms={{
      uColorBright: { value: colors['layer-2'] },
      uColorDark: { value: colors['layer-1'] },
-      uStrokeColor: { value: colors.outline.clone() },
+      uStrokeColor: { value: colors['layer-2'].clone() },
      uStrokeWidth: { value: 1.0 },
      uWidth: { value: 20 },
      uHeight: { value: height }
--- a/app/src/lib/graph-interface/node/NodeHeader.svelte
+++ b/app/src/lib/graph-interface/node/NodeHeader.svelte
@@ -87,8 +87,6 @@
    width: 30px;
    z-index: 100;
    border-radius: 50%;
-    /* background: red; */
-    /* opacity: 0.2; */
  }

  .click-target:hover + svg path {
@@ -108,7 +106,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);
--- a/app/src/lib/graph-interface/node/NodeInput.svelte
+++ b/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();
--- a/app/src/lib/graph-interface/node/NodeParameter.svelte
+++ b/app/src/lib/graph-interface/node/NodeParameter.svelte
@@ -18,6 +18,8 @@
  const inputType = $derived(node?.state?.type?.inputs?.[id]);

  const socketId = $derived(`${node.id}-${id}`);
+  const isShape = $derived(input.type === 'shape' && input.external !== true);
+  const height = $derived(isShape ? 200 : 100);

  const graphState = getGraphState();
  const graphId = graph?.id;
@@ -64,6 +66,7 @@
  class="wrapper"
  data-node-type={node.type}
  data-node-input={id}
+  style:height="{height}px"
  class:possible-socket={graphState?.possibleSocketIds.has(socketId)}
 >
  {#key id && graphId}
@@ -95,8 +98,6 @@
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
-    width="100"
-    height="100"
    preserveAspectRatio="none"
    style={`
      --path: path("${path}");
@@ -111,7 +112,6 @@
  .wrapper {
    position: relative;
    width: 100%;
-    height: 100px;
    transform: translateY(-0.5px);
  }

--- a/app/src/lib/performance/Monitor.svelte
+++ b/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);
--- a/app/src/lib/result-viewer/Viewer.svelte
+++ b/app/src/lib/result-viewer/Viewer.svelte
@@ -4,7 +4,7 @@
  import { decodeFloat, splitNestedArray } from '@nodarium/utils';
  import type { PerformanceStore } from '@nodarium/utils';
  import { Canvas } from '@threlte/core';
-  import { Vector3 } from 'three';
+  import { DoubleSide, Vector3 } 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>>();
--- a/app/src/lib/runtime/runtime-executor.ts
+++ b/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,
--- a/app/src/lib/settings/NestedSettings.svelte
+++ b/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;
  }

--- a/app/src/lib/settings/app-settings.svelte.ts
+++ b/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',
--- a/app/src/lib/sidebar/panels/Changelog.svelte
+++ b/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>
--- a/app/src/routes/+error.svelte
+++ b/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>
--- a/app/src/routes/+layout.server.ts
+++ b/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()
+  };
+}
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -29,6 +29,8 @@

  let performanceStore = createPerformanceStore();

+  const { data } = $props();
+
  const registryCache = new IndexDBCache('node-registry');
  const nodeRegistry = new RemoteNodeRegistry('', registryCache);
  const workerRuntime = new WorkerRuntimeExecutor();
@@ -169,7 +171,7 @@
          graph={pm.graph}
          bind:this={graphInterface}
          registry={nodeRegistry}
-          showGrid={appSettings.value.nodeInterface.showNodeGrid}
+          backgroundType={appSettings.value.nodeInterface.backgroundType}
          snapToGrid={appSettings.value.nodeInterface.snapToGrid}
          bind:activeNode
          bind:showHelp={appSettings.value.nodeInterface.showHelp}
@@ -255,7 +257,7 @@
          title="Changelog"
          icon="i-[tabler--file-text-spark] bg-green-400"
        >
-          <Changelog />
+          <Changelog git={data.git} changelog={data.changelog} />
        </Panel>
      </Sidebar>
    </Grid.Cell>
--- a/app/static/.gitignore
+++ b/app/static/.gitignore
@@ -1,2 +1,3 @@
 nodes/
 CHANGELOG.md
+git.json
--- a/nodes/max/plantarium/instance/src/input.json
+++ b/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,
--- a/nodes/max/plantarium/instance/src/lib.rs
+++ b/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)
--- a/nodes/max/plantarium/leaf/.gitignore
+++ b/nodes/max/plantarium/leaf/.gitignore
@@ -0,0 +1,6 @@
+/target
+**/*.rs.bk
+Cargo.lock
+bin/
+pkg/
+wasm-pack.log
--- a/nodes/max/plantarium/leaf/Cargo.toml
+++ b/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" }
--- a/nodes/max/plantarium/leaf/src/input.json
+++ b/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
+    }
+  }
+}
--- a/nodes/max/plantarium/leaf/src/lib.rs
+++ b/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)
+}
+
--- a/nodes/max/plantarium/shape/.gitignore
+++ b/nodes/max/plantarium/shape/.gitignore
@@ -0,0 +1,6 @@
+/target
+**/*.rs.bk
+Cargo.lock
+bin/
+pkg/
+wasm-pack.log
--- a/nodes/max/plantarium/shape/Cargo.toml
+++ b/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" }
--- a/nodes/max/plantarium/shape/src/input.json
+++ b/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": ""
+    }
+  }
+}
--- a/nodes/max/plantarium/shape/src/lib.rs
+++ b/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))
+}
--- a/package.json
+++ b/package.json
@@ -5,8 +5,8 @@
    "lint": "pnpm run -r --parallel lint",
    "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/",
--- a/packages/types/src/inputs.ts
+++ b/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'),
@@ -83,7 +93,9 @@ export const NodeInputSchema = z.union([
  NodeInputSeedSchema,
  NodeInputBooleanSchema,
  NodeInputFloatSchema,
+  NodeInputColorSchema,
  NodeInputIntegerSchema,
+  NodeInputShapeSchema,
  NodeInputSelectSchema,
  NodeInputSeedSchema,
  NodeInputVec3Schema,
--- a/packages/types/src/lib.rs
+++ b/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),
 }
--- a/packages/ui/src/lib/Details.svelte
+++ b/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;
--- a/packages/ui/src/lib/Input.svelte
+++ b/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'}
--- a/packages/ui/src/lib/app.css
+++ b/packages/ui/src/lib/app.css
@@ -11,7 +11,6 @@
@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,12 +71,12 @@

  --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;
@@ -89,14 +88,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);
 }
@@ -110,10 +108,10 @@ body {
 html.theme-light {
  --color-text: var(--neutral-800);
  --color-outline: var(--neutral-300);
-  --color-layer-0: var(--neutral-100);
+  --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 +140,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;
--- a/packages/ui/src/lib/index.ts
+++ b/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';
--- a/packages/ui/src/lib/inputs/InputCheckbox.svelte
+++ b/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"
--- a/packages/ui/src/lib/inputs/InputColor.svelte
+++ b/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>
--- a/packages/ui/src/lib/inputs/InputSelect.svelte
+++ b/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;
  }
--- a/packages/ui/src/lib/inputs/InputShape.svelte
+++ b/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>
--- a/packages/ui/src/routes/+page.svelte
+++ b/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>{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>
--- a/packages/ui/src/routes/Section.svelte
+++ b/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%] whitespace-pre overflow-hidden text-clip">
+      {#if header}
+        {@render header()}
+      {:else}
+        {value}
+      {/if}
+    </div>
  </h3>
  <div>
    {@render children()}
--- a/packages/ui/src/routes/Theme.svelte
+++ b/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;
+  }
--- a/packages/ui/src/routes/ThemeSelector.svelte
+++ b/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>
--- a/pnpm-lock.yaml
+++ b/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
Author	SHA1	Message	Date
release-bot	51de3ced13	fix(ci): update changelog before building All checks were successful 🚀 Lint & Test & Deploy / release (push) Successful in 3m47s Details	2026-02-10 14:59:17 +01:00
max_richter	8d403ba803	Merge pull request 'feat/shape-node' (#36 ) from feat/shape-node into main All checks were successful 🚀 Lint & Test & Deploy / release (push) Successful in 4m0s Details Reviewed-on: #36	2026-02-09 22:32:14 +01:00
release-bot	6bb301153a	Merge remote-tracking branch 'origin/main' into feat/shape-node All checks were successful 🚀 Lint & Test & Deploy / release (pull_request) Successful in 3m47s Details	2026-02-09 22:27:43 +01:00
release-bot	02eee5f9bf	fix: disable macro logs in wasm All checks were successful 🚀 Lint & Test & Deploy / release (pull_request) Successful in 3m47s Details	2026-02-09 22:21:28 +01:00
release-bot	4f48a519a9	feat(nodes): add rotation to instance node All checks were successful 🚀 Lint & Test & Deploy / release (pull_request) Successful in 4m9s Details	2026-02-09 22:16:20 +01:00
release-bot	97199ac20f	feat(nodes): implement leaf node	2026-02-09 22:16:02 +01:00
release-bot	f36f0cb230	feat(ui): show circles only when hovering InputShape	2026-02-09 22:15:39 +01:00
release-bot	ed3d48e07f	fix(runtime): correctly encode 2d shape for wasm nodes	2026-02-09 22:15:11 +01:00
release-bot	c610d6c991	fix(app): show backside in three instances	2026-02-09 22:14:45 +01:00
Max Richter	8865b9b032	feat(node): initial leaf / shape nodes All checks were successful 🚀 Lint & Test & Deploy / release (pull_request) Successful in 4m1s Details	2026-02-09 18:32:52 +01:00
Max Richter	235ee5d979	fix(app): wrong linter errors in changelog All checks were successful 🚀 Lint & Test & Deploy / release (pull_request) Successful in 3m37s Details	2026-02-09 16:54:45 +01:00
Max Richter	23a48572f3	feat(app): dots background for node interface	2026-02-09 16:53:57 +01:00
Max Richter	e89a46e146	feat(app): add error page All checks were successful 🚀 Lint & Test & Deploy / release (pull_request) Successful in 4m20s Details	2026-02-09 16:18:27 +01:00
Max Richter	cefda41fcf	feat(theme): optimize node readability	2026-02-09 16:18:19 +01:00
Max Richter	21d0f0da5a	feat: add high-contrast-light theme	2026-02-09 16:04:17 +01:00
Max Richter	46202451ba	ci: simplify ci quality checks All checks were successful 🚀 Lint & Test & Deploy / release (pull_request) Successful in 3m43s Details	2026-02-09 15:51:55 +01:00
Max Richter	0f4239d179	ci: simplify ci quality checks Some checks failed 🚀 Lint & Test & Deploy / release (pull_request) Failing after 38s Details	2026-02-09 15:50:05 +01:00
Max Richter	d9c9bb5234	fix(theme): allow raw html in head style	2026-02-09 15:49:50 +01:00
Max Richter	18802fdc10	fix(ui): add missing types Some checks failed 🚀 Lint & Test & Deploy / release (pull_request) Failing after 2m45s Details	2026-02-09 15:37:37 +01:00
Max Richter	b1cbd23542	feat(app): use same color for node outline and header Some checks failed 🚀 Lint & Test & Deploy / release (pull_request) Failing after 2m3s Details	2026-02-09 15:30:40 +01:00
Max Richter	33f10da396	feat(ui): make details stand out Some checks failed 🚀 Lint & Test & Deploy / release (pull_request) Failing after 2m6s Details	2026-02-09 15:26:48 +01:00
Max Richter	af5b3b23ba	fix: make sure that CHANGELOG.md is in correct place	2026-02-09 15:26:40 +01:00
Max Richter	64d75b9686	feat(ui): add InputColor and custom theme	2026-02-09 15:26:18 +01:00
release-bot	2e6466ceca	chore: update dprint linters All checks were successful 🚀 Lint & Test & Deploy / release (pull_request) Successful in 4m17s Details	2026-02-09 01:58:05 +01:00
release-bot	20d8e2abed	feat(theme): improve light theme a bit	2026-02-09 01:57:32 +01:00
release-bot	715e1d095b	feat(theme): merge edge and connection color All checks were successful 🚀 Lint & Test & Deploy / release (pull_request) Successful in 3m35s Details	2026-02-09 01:35:41 +01:00
release-bot	07e2826f16	feat(ui): improve colors of input shape	2026-02-09 00:52:35 +01:00
release-bot	e0ad97b003	feat(ui): highlight circle on hover on InputShape All checks were successful 🚀 Lint & Test & Deploy / release (pull_request) Successful in 3m53s Details	2026-02-09 00:21:58 +01:00
release-bot	93df4a19ff	fix(ci): handle newline in commit messages for git.json All checks were successful 🚀 Lint & Test & Deploy / release (pull_request) Successful in 3m41s Details	2026-02-09 00:09:28 +01:00
release-bot	d661a4e4a9	feat(ui): improve InputShape ux All checks were successful 🚀 Lint & Test & Deploy / release (pull_request) Successful in 4m17s Details Allow interactions in mirrored side aswell. Use rightclick to delete circles.	2026-02-08 23:59:39 +01:00
release-bot	c7f808ce2d	wip	2026-02-08 22:56:41 +01:00
release-bot	72d6cd6ea2	feat(ui): add initial InputShape element	2026-02-08 21:59:43 +01:00
release-bot	615f2d3c48	feat(ui): allow custom snippets in ui section header	2026-02-08 21:59:00 +01:00
release-bot	2fadb6802d	refactor: make changelog code simpler	2026-02-08 21:58:01 +01:00
release-bot	9271d3a7e4	fix(app): handle error while parsing commit All checks were successful 🚀 Lint & Test & Deploy / release (push) Successful in 3m53s Details	2026-02-08 21:01:34 +01:00
release-bot	13c83efdb9	fix(app): handle error while parsing changelog	2026-02-08 21:00:30 +01:00
release-bot	e44b73bebf	feat: optimize changelog display All checks were successful 🚀 Lint & Test & Deploy / release (push) Successful in 4m5s Details - Hide releases under a Detail - Hide all commits under a Detail	2026-02-08 19:04:56 +01:00
Max Richter	979e9fd922	feat: improve changelog readbility Some checks failed 🚀 Lint & Test & Deploy / release (push) Failing after 2m41s Details	2026-02-07 17:40:49 +01:00
Max Richter	544500e7fe	chore: remove pgp from changelog All checks were successful Build & Push CI Image / build-and-push (push) Successful in 8m48s Details 🚀 Lint & Test & Deploy / release (push) Successful in 4m13s Details	2026-02-07 16:58:06 +01:00
Max Richter	aaebbc4bc0	fix: some stuff with ci	2026-02-07 16:57:50 +01:00
release-bot	894ab70b79	chore(release): v0.0.3	2026-02-07 15:56:02 +00:00