Merge pull request 'feat/shape-node' (#36) from feat/shape-node into main

Reviewed-on: #36
2026-02-09 22:32:14 +01:00
parent 9271d3a7e4 6bb301153a
commit 8d403ba803
51 changed files with 1080 additions and 208 deletions
--- a/.dprint.jsonc
+++ b/.dprint.jsonc
@@ -47,13 +47,13 @@
    "**/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/workflows/release.yaml
+++ b/.gitea/workflows/release.yaml
@@ -47,7 +47,12 @@ jobs:
        run: pnpm install --frozen-lockfile --store-dir ${{ env.PNPM_CACHE_FOLDER }}

      - name: 🧹 Quality Control
-        run: ./.gitea/scripts/ci-checks.sh
+        run: |
+          pnpm build
+          pnpm lint
+          pnpm format:check
+          pnpm check
+          xvfb-run --auto-servernum --server-args="-screen 0 1280x1024x24" pnpm test

      - name: 🛠️ Build
        run: ./.gitea/scripts/build.sh
--- 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",
--- 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
@@ -22,25 +22,10 @@
  ]);

  function detectCommitType(commit: string) {
-    if (commit.startsWith('fix:') || commit.startsWith('fix(')) {
-      return 'fix';
-    }
-
-    if (commit.startsWith('feat:') || commit.startsWith('feat(')) {
-      return 'feat';
-    }
-
-    if (commit.startsWith('chore:') || commit.startsWith('chore(')) {
-      return 'chore';
-    }
-    if (commit.startsWith('docs:') || commit.startsWith('docs(')) {
-      return 'docs';
-    }
-    if (commit.startsWith('refactor:') || commit.startsWith('refactor(')) {
-      return 'refactor';
-    }
-    if (commit.startsWith('ci:') || commit.startsWith('ci(')) {
-      return 'ci';
+    for (const key of typeMap.keys()) {
+      if (commit.startsWith(key)) {
+        return key;
+      }
    }
    return '';
  }
@@ -152,7 +137,7 @@
  {/if}
 </div>

-<style>
+<style lang="postcss">
  @reference "tailwindcss";

  #changelog :global(.commits) {
--- 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/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -171,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}
--- 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
@@ -7,14 +7,19 @@
    open?: boolean;
    class?: string;
  }
-  let { title = 'Details', transparent = false, children, open = $bindable(false), class: _class }:
-    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 {_class}"
+  class="text-text outline-1 outline-outline bg-layer-2 {_class}"
 >
  <summary>{title}</summary>
  <div>
--- 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>