feat: make it work

fix(ci): correct subsitute stuff
feat: count total-vertices and faces in benchmark
2026-04-24 21:45:56 +02:00 · 2026-04-24 21:39:42 +02:00 · 2026-04-24 21:35:33 +02:00 · 2026-04-24 17:34:10 +02:00 · 2026-04-24 17:32:37 +02:00 · 2026-04-24 14:55:29 +02:00
33 changed files with 1766 additions and 437 deletions
@@ -14,7 +14,7 @@ env:
 jobs:
  release:
    runs-on: ubuntu-latest
-    container: git.max-richter.dev/max/nodarium-ci:bce06da456e3c008851ac006033cfff256015a47
+    container: git.max-richter.dev/max/nodarium-ci:a56e8f445edb6064ae7a7b3b783fb7445f1b4e69

    steps:
      - name: 📑 Checkout Code
@@ -51,9 +51,36 @@ jobs:
      - name: 🏃 Execute Runtime
        run: pnpm run --filter @nodarium/app bench

-      - name: 📤 Upload Benchmark Results
-        uses: actions/upload-artifact@v3
-        with:
-          name: benchmark-data
-          path: app/benchmark/out/
-          compression: 9
+      - name: 🔑 Setup SSH key
+        run: |
+          mkdir -p ~/.ssh
+          echo "${{ secrets.GIT_SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
+          chmod 600 ~/.ssh/id_ed25519
+          ssh-keyscan -p 2222 -H git.max-richter.dev >> ~/.ssh/known_hosts
+
+      - name: 📤 Push Results
+        env:
+          BENCH_REPO: "git@git.max-richter.dev:max/nodarium-benchmarks.git"
+        run: |
+          git config --global user.name "nodarium-bot"
+          git config --global user.email "nodarium-bot@max-richter.dev"
+
+          # 2. Clone the benchmarks repo into a temp folder
+          git config --global core.sshCommand "ssh -p 2222 -i ~/.ssh/id_ed25519 -o IdentitiesOnly=yes"
+          git clone git@git.max-richter.dev:max/nodarium-benchmarks.git target_bench_repo
+          
+          # 3. Create a directory structure based on the branch
+          # This allows the UI to "switch between branches"
+          SAFE_PR_NAME=$(printf "%s" "$GITHUB_HEAD_REF" | tr '/' '-')
+          DEST_DIR="target_bench_repo/data/$SAFE_PR_NAME/$(date +%s)"
+          mkdir -p "$DEST_DIR"
+
+          # 4. Copy the new results
+          # Assuming your bench tool outputs a file named 'results.json'
+          cp app/benchmark/out/*.json "$DEST_DIR/"
+
+          # 5. Commit and Push
+          cd target_bench_repo
+          git add .
+          git commit -m "Update benchmarks for $SAFE_PR_NAME: ${{ github.sha }}"
+          git push origin main
@@ -15,7 +15,7 @@ env:
 jobs:
  release:
    runs-on: ubuntu-latest
-    container: git.max-richter.dev/max/nodarium-ci:bce06da456e3c008851ac006033cfff256015a47
+    container: git.max-richter.dev/max/nodarium-ci:a56e8f445edb6064ae7a7b3b783fb7445f1b4e69

    steps:
      - name: 📑 Checkout Code
@@ -5,7 +5,6 @@ ENV RUSTUP_HOME=/usr/local/rustup \
  PATH=/usr/local/cargo/bin:$PATH

 RUN apt-get update && apt-get install -y \
-  openssh-client \
  ca-certificates=20230311+deb12u1 \
  gpg=2.2.40-1.1+deb12u2 \
  gpg-agent=2.2.40-1.1+deb12u2 \
@@ -1,5 +1,5 @@
 import type { Graph, Graph as GraphType, NodeId } from '@nodarium/types';
-import { createLogger, createPerformanceStore } from '@nodarium/utils';
+import { createLogger, createPerformanceStore, splitNestedArray } from '@nodarium/utils';
 import { mkdir, writeFile } from 'node:fs/promises';
 import { resolve } from 'node:path';
 import { MemoryRuntimeExecutor } from '../src/lib/runtime/runtime-executor.ts';
@@ -20,6 +20,26 @@ const templates: Record<string, Graph> = {
  'default': defaultPlantTemplate as unknown as GraphType
 };

+function countGeometry(result: Int32Array): { totalVertices: number; totalFaces: number } {
+  const parts = splitNestedArray(result);
+  let totalVertices = 0;
+  let totalFaces = 0;
+  for (const part of parts) {
+    const type = part[0];
+    const vertexCount = part[1];
+    const faceCount = part[2];
+    if (type === 2) {
+      const instanceCount = part[3];
+      totalVertices += vertexCount * instanceCount;
+      totalFaces += faceCount * instanceCount;
+    } else {
+      totalVertices += vertexCount;
+      totalFaces += faceCount;
+    }
+  }
+  return { totalVertices, totalFaces };
+}
+
 async function run(g: GraphType, amount: number) {
  await registry.load(plantTemplate.nodes.map(n => n.type) as NodeId[]);
  log.log('loaded ' + g.nodes.length + ' nodes');
@@ -33,10 +53,14 @@ async function run(g: GraphType, amount: number) {

  log.log('executing');
  r.perf = perfStore;
+  let res;
  for (let i = 0; i < amount; i++) {
    r.perf?.startRun();
-    await r.execute(g, { randomSeed: true });
+    res = await r.execute(g, { randomSeed: true });
    r.perf?.stopRun();
+    const { totalVertices, totalFaces } = countGeometry(res!);
+    r.perf?.addToLastRun('total-vertices', totalVertices);
+    r.perf?.addToLastRun('total-faces', totalFaces);
  }
  log.log('finished');
  return r.perf.get();
@@ -1,11 +1,11 @@
 import { animate, lerp } from '$lib/helpers';
-import type { Box, Edge, GroupDefinition, NodeInput, NodeInstance, Socket } from '@nodarium/types';
+import type { NodeInstance, Socket } from '@nodarium/types';
 import { getContext, setContext } from 'svelte';
 import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 import type { OrthographicCamera, Vector3 } from 'three';
 import type { GraphManager } from './graph-manager.svelte';
 import { ColorGenerator } from './graph/colors';
-import { getNodeHeight, getParameterHeight } from './helpers/nodeHelpers';
+import { getNodeHeight, getSocketPosition } from './helpers/nodeHelpers';

 const graphStateKey = Symbol('graph-state');
 export function getGraphState() {
@@ -99,6 +99,9 @@ export class GraphState {
    edges: [number, number, number, string][];
  } = null;

+  // Saved camera position per group so re-entering restores where you left off
+  groupCameras = new Map<string, [number, number, number]>();
+
  cameraBounds = $derived([
    this.cameraPosition[0] - this.width / this.cameraPosition[2] / 2,
    this.cameraPosition[0] + this.width / this.cameraPosition[2] / 2,
@@ -203,7 +206,7 @@ export class GraphState {
    }

    const debugNode = this.graph.createNode({
-      type: '__internal/node/debug',
+      type: 'max/plantarium/debug',
      position: [node.position[0] + 30, node.position[1]],
      props: {}
    });
@@ -240,119 +243,6 @@ export class GraphState {
    };
  }

-  groupSelectedNodes(nodeIds = [...this.selectedNodes.keys(), this.activeNodeId]) {
-    const ids = new Set(nodeIds);
-    const nodes = [
-      ...ids.values().map(id => this.graph.getNode(id)).filter(Boolean)
-    ] as NodeInstance[];
-
-    const incomingEdges = this.graph.edges.filter((edge) =>
-      ids.has(edge[2].id) && !ids.has(edge[0].id)
-    );
-    const groupInputs = new Map<string, Edge>();
-    for (const edge of incomingEdges) {
-      groupInputs.set(`${edge[0].id}-${edge[1]}`, edge);
-    }
-
-    const outgoingEdges = this.graph.edges.filter((edge) =>
-      ids.has(edge[0].id) && !ids.has(edge[2].id)
-    );
-    const groupOutputs = new Map<string, Edge>();
-    for (const edge of outgoingEdges) {
-      groupOutputs.set(`${edge[2].id}-${edge[3]}`, edge);
-    }
-
-    const inputs: Record<string, NodeInput> = {};
-    [...groupInputs.values()].forEach((edge, i) => {
-      const input = {
-        label: `Input ${i}`,
-        type: edge[0].state.type?.outputs?.[edge[1]] || '*'
-      };
-      inputs[`input_${i}`] = input as NodeInput;
-    });
-
-    const outputs = [...groupOutputs.values()].map((edge, i) => ({
-      label: `Output ${i}`,
-      type: edge[2].state.type?.inputs?.[edge[3]].type
-    }));
-
-    const groupPosition = [0, 0] as [number, number];
-    const bounds: Box = { minX: Infinity, maxX: -Infinity, minY: Infinity, maxY: -Infinity };
-    for (const node of nodes) {
-      groupPosition[0] += node.position[0];
-      groupPosition[1] += node.position[1];
-      bounds.minX = Math.min(bounds.minX, node.position[0]);
-      bounds.maxX = Math.max(bounds.maxX, node.position[0]);
-      bounds.minY = Math.min(bounds.minY, node.position[1]);
-      bounds.maxY = Math.max(bounds.maxY, node.position[1]);
-    }
-    groupPosition[0] /= nodes.length;
-    groupPosition[1] /= nodes.length;
-
-    const groupInputNode: NodeInstance = {
-      id: this.graph.createNodeId(),
-      type: '__internal/group/input',
-      position: [bounds.minX - 50, (bounds.minY + bounds.maxY) / 2],
-      state: {}
-    };
-
-    const groupOutputNode: NodeInstance = {
-      id: this.graph.createNodeId(),
-      type: '__internal/group/output',
-      position: [bounds.maxX + 25, (bounds.minY + bounds.maxY) / 2],
-      state: {}
-    };
-
-    // Edges that are inside the group
-    const internalEdges = this.graph.edges.filter((edge) => {
-      return ids.has(edge[0].id) || ids.has(edge[2].id);
-    }).map((edge) => {
-      // Going in from the group
-      if (!ids.has(edge[0].id)) {
-        return [groupInputNode, 0, edge[2], edge[3]];
-        // Going out to the group
-      } else if (!ids.has(edge[2].id)) {
-        return [edge[0], edge[1], groupOutputNode, 'Out'];
-      }
-      return edge;
-    });
-
-    const groupId = this.graph.createGroupId();
-    const groupDefinition: GroupDefinition = {
-      id: groupId,
-      inputs: inputs,
-      outputs: outputs,
-      edges: internalEdges,
-      nodes: [groupInputNode, ...nodes, groupOutputNode]
-    };
-    const groupNode = this.graph.createGroupNode(groupPosition, groupDefinition);
-
-    // Update the edges that are now inside
-    // the group to be connected to that group node
-    const externalEdges = this.graph.edges.map((edge) => {
-      if (ids.has(edge[2].id)) {
-        // Edge going into the group
-        return [edge[0], edge[1], groupNode, 'input_0'] as Edge;
-      } else if (ids.has(edge[0].id)) {
-        // Edge going out of the group
-        return [groupNode, 0, edge[2], edge[3]] as Edge;
-      }
-      return edge;
-    });
-
-    for (const node of nodes) {
-      this.graph.nodes.delete(node.id);
-    }
-    this.graph.edges = externalEdges;
-    this.graph.saveUndoGroup();
-    console.log(
-      $state.snapshot({
-        groupNode,
-        groupDefinition
-      })
-    );
-  }
-
  centerNode(node?: NodeInstance) {
    const average = [0, 0, 4];
    if (node) {
@@ -414,7 +304,7 @@ export class GraphState {
        if (edge[3] === index) {
          node = edge[0];
          index = edge[1];
-          position = this.getSocketPosition(node, index);
+          position = getSocketPosition(node, index);
          this.graph.removeEdge(edge);
          break;
        }
@@ -434,7 +324,7 @@ export class GraphState {
        return {
          node,
          index,
-          position: this.getSocketPosition(node, index)
+          position: getSocketPosition(node, index)
        };
      });
  }
@@ -471,7 +361,7 @@ export class GraphState {
        for (const node of this.graph.nodes.values()) {
          const x = node.position[0];
          const y = node.position[1];
-          const height = getNodeHeight(this.graph.getNodeType(node)!);
+          const height = getNodeHeight(node.state.type!);
          if (downX > x && downX < x + 20 && downY > y && downY < y + height) {
            clickedNodeId = node.id;
            break;
@@ -483,7 +373,7 @@ export class GraphState {
  }

  isNodeInView(node: NodeInstance) {
-    const height = getNodeHeight(this.graph.getNodeType(node)!);
+    const height = getNodeHeight(node.state.type!);
    const width = 20;
    return node.position[0] > this.cameraBounds[0] - width
      && node.position[0] < this.cameraBounds[1]
@@ -494,38 +384,4 @@ export class GraphState {
  openNodePalette() {
    this.addMenuPosition = [this.mousePosition[0], this.mousePosition[1]];
  }
-
-  enterGroupNode() {
-    if (this.activeNodeId === -1) return;
-    const selectedNode = this.graph.getNode(this.activeNodeId);
-    if (!selectedNode || selectedNode.type.startsWith('__internal/group/instance')) return;
-  }
-
-  getSocketPosition(
-    node: NodeInstance,
-    index: string | number
-  ): [number, number] {
-    if (typeof index === 'number') {
-      return [
-        (node?.state?.x ?? node.position[0]) + 20,
-        (node?.state?.y ?? node.position[1]) + 2.5 + 10 * index
-      ];
-    } else {
-      let height = 5;
-      const nodeType = this.graph.getNodeType(node)!;
-      const inputs = nodeType.inputs || {};
-      for (const inputKey in inputs) {
-        const h = getParameterHeight(nodeType, inputKey) / 10;
-        if (inputKey === index) {
-          height += h / 2;
-          break;
-        }
-        height += h;
-      }
-      return [
-        node?.state?.x ?? node.position[0],
-        (node?.state?.y ?? node.position[1]) + height
-      ];
-    }
-  }
 }
@@ -11,6 +11,7 @@
  import Debug from '../debug/Debug.svelte';
  import EdgeEl from '../edges/Edge.svelte';
  import { getGraphManager, getGraphState } from '../graph-state.svelte';
+  import { getSocketPosition } from '../helpers/nodeHelpers';
  import NodeEl from '../node/Node.svelte';
  import { maxZoom, minZoom } from './constants';
  import { FileDropEventManager } from './drop.events';
@@ -38,8 +39,8 @@
      return [0, 0, 0, 0];
    }

-    const pos1 = graphState.getSocketPosition(fromNode, edge[1]);
-    const pos2 = graphState.getSocketPosition(toNode, edge[3]);
+    const pos1 = getSocketPosition(fromNode, edge[1]);
+    const pos2 = getSocketPosition(toNode, edge[3]);
    return [pos1[0], pos1[1], pos2[0], pos2[1]];
  }

@@ -95,13 +96,14 @@
    graphState.addMenuPosition = null;
  }

-  function getSocketType(node: NodeInstance, index: number | string, e: unknown): string {
-    const nodeType = graph.getNodeType(node);
-    console.log($state.snapshot({ nodeType, index, e }));
+  function getSocketType(node: NodeInstance, index: number | string): string {
    if (typeof index === 'string') {
-      return nodeType?.inputs?.[index].type || 'unknown';
+      return node.state.type?.inputs?.[index].type || 'unknown';
    }
-    return nodeType?.outputs?.[index] || 'unknown';
+    if (node.type === '__virtual/group/instance') {
+      index += 1;
+    }
+    return node.state.type?.outputs?.[index] || 'unknown';
  }
 </script>

@@ -183,8 +185,8 @@
      {#if graphState.activeSocket}
        <EdgeEl
          z={graphState.cameraPosition[2]}
-          inputType={getSocketType(graphState.activeSocket.node, graphState.activeSocket.index, 'c')}
-          outputType={getSocketType(graphState.activeSocket.node, graphState.activeSocket.index, 'd')}
+          inputType={getSocketType(graphState.activeSocket.node, graphState.activeSocket.index)}
+          outputType={getSocketType(graphState.activeSocket.node, graphState.activeSocket.index)}
          x1={graphState.activeSocket.position[0]}
          y1={graphState.activeSocket.position[1]}
          x2={graphState.edgeEndPosition?.[0] ?? graphState.mousePosition[0]}
@@ -197,8 +199,8 @@
        <EdgeEl
          id={graph.getEdgeId(edge)}
          z={graphState.cameraPosition[2]}
-          inputType={getSocketType(edge[0], edge[1], 'a')}
-          outputType={getSocketType(edge[2], edge[3], 'b')}
+          inputType={getSocketType(edge[0], edge[1])}
+          outputType={getSocketType(edge[2], edge[3])}
          {x1}
          {y1}
          {x2}
@@ -217,7 +219,7 @@
          style:transform={`scale(${graphState.cameraPosition[2] * 0.1})`}
          class:hovering-sockets={graphState.activeSocket}
        >
-          {#each graph.getAllNodes() as node (node.id)}
+          {#each graph.nodes.values() as node (node.id)}
            <NodeEl
              {node}
              inView={graphState.isNodeInView(node)}
@@ -87,6 +87,97 @@
      manager.load(graph);
    }
  });
+
+  function navigateToBreadcrumb(index: number) {
+    const crumbs = manager.breadcrumbs;
+    const depth = crumbs.length - 1 - index;
+    let result: { camera: [number, number, number]; nodeId: number } | false = false;
+    for (let i = 0; i < depth; i++) {
+      const groupId = manager.currentGroupContext;
+      if (groupId) {
+        state.groupCameras.set(groupId, [...state.cameraPosition] as [number, number, number]);
+      }
+      result = manager.exitGroup();
+    }
+    if (result !== false) {
+      state.activeNodeId = result.nodeId;
+      state.clearSelection();
+      state.cameraPosition[0] = result.camera[0];
+      state.cameraPosition[1] = result.camera[1];
+      state.cameraPosition[2] = result.camera[2];
+    } else {
+      state.activeNodeId = -1;
+      state.clearSelection();
+      state.centerNode();
+    }
+  }
 </script>

+{#if manager.isInsideGroup}
+  <div class="breadcrumb-bar">
+    {#each manager.breadcrumbs as crumb, i}
+      {#if i > 0}
+        <span class="sep">›</span>
+      {/if}
+      <button
+        class="crumb"
+        class:active={i === manager.breadcrumbs.length - 1}
+        onclick={() => navigateToBreadcrumb(i)}
+      >
+        {crumb.name}
+      </button>
+    {/each}
+  </div>
+{/if}
+
 <GraphEl {keymap} {safePadding} />
+
+<style>
+  .breadcrumb-bar {
+    position: absolute;
+    top: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    background: rgba(10, 15, 28, 0.85);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 6px;
+    padding: 4px 10px;
+    font-size: 12px;
+    pointer-events: all;
+    backdrop-filter: blur(8px);
+  }
+
+  .sep {
+    opacity: 0.4;
+    font-size: 14px;
+  }
+
+  .crumb {
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.6);
+    cursor: pointer;
+    padding: 2px 4px;
+    border-radius: 4px;
+    font-size: 12px;
+    transition: color 0.15s, background 0.15s;
+  }
+
+  .crumb:hover {
+    color: white;
+    background: rgba(255, 255, 255, 0.08);
+  }
+
+  .crumb.active {
+    color: white;
+    cursor: default;
+  }
+
+  .crumb.active:hover {
+    background: none;
+  }
+</style>
@@ -3,6 +3,9 @@ import type { NodeDefinition, NodeInstance } from '@nodarium/types';
 export function getParameterHeight(node: NodeDefinition, inputKey: string) {
  const input = node.inputs?.[inputKey];
  if (!input) {
+    if (inputKey.startsWith('__virtual')) {
+      return 50;
+    }
    return 0;
  }

@@ -23,12 +26,53 @@ export function getParameterHeight(node: NodeDefinition, inputKey: string) {
  return 50;
 }

+export function getSocketPosition(
+  node: NodeInstance,
+  index: string | number
+): [number, number] {
+  if (typeof index === 'number') {
+    if (node.type === '__virtual/group/input') {
+      const nodeType = node.state.type;
+      const keys = Object.keys(nodeType?.inputs || {});
+      let height = 5;
+      for (let i = 0; i < keys.length; i++) {
+        const h = getParameterHeight(nodeType!, keys[i]) / 10;
+        if (i === index) { height += h / 2; break; }
+        height += h;
+      }
+      return [
+        (node?.state?.x ?? node.position[0]) + 20,
+        (node?.state?.y ?? node.position[1]) + height
+      ];
+    }
+    return [
+      (node?.state?.x ?? node.position[0]) + 20,
+      (node?.state?.y ?? node.position[1]) + 2.5 + 10 * index
+    ];
+  } else {
+    let height = 5;
+    const nodeType = node.state.type!;
+    const inputs = nodeType.inputs || {};
+    for (const inputKey in inputs) {
+      const h = getParameterHeight(nodeType, inputKey) / 10;
+      if (inputKey === index) {
+        height += h / 2;
+        break;
+      }
+      height += h;
+    }
+    return [
+      node?.state?.x ?? node.position[0],
+      (node?.state?.y ?? node.position[1]) + height
+    ];
+  }
+}
+
 const nodeHeightCache: Record<string, number> = {};
 export function getNodeHeight(node: NodeDefinition) {
-  if (!node) {
-    console.trace('Node is undefined', node);
-  }
-  if (node.id in nodeHeightCache) {
+  // Don't cache virtual nodes — their inputs can change dynamically
+  const isVirtual = (node.id as string).startsWith('__virtual/');
+  if (!isVirtual && node.id in nodeHeightCache) {
    return nodeHeightCache[node.id];
  }
  if (!node?.inputs) {
@@ -41,6 +85,8 @@ export function getNodeHeight(node: NodeDefinition) {
    height += h;
  }

+  if (!isVirtual) {
    nodeHeightCache[node.id] = height;
+  }
  return height;
 }
@@ -45,8 +45,26 @@ export function setupKeymaps(keymap: Keymap, graph: GraphManager, graphState: Gr

  keymap.addShortcut({
    key: 'Escape',
-    description: 'Deselect nodes',
+    description: 'Deselect nodes / Exit group',
    callback: () => {
+      if (graph.isInsideGroup) {
+        const groupId = graph.currentGroupContext;
+        if (groupId) {
+          graphState.groupCameras.set(
+            groupId,
+            [...graphState.cameraPosition] as [number, number, number]
+          );
+        }
+        const result = graph.exitGroup();
+        if (result !== false) {
+          graphState.activeNodeId = result.nodeId;
+          graphState.clearSelection();
+          graphState.cameraPosition[0] = result.camera[0];
+          graphState.cameraPosition[1] = result.camera[1];
+          graphState.cameraPosition[2] = result.camera[2];
+          return;
+        }
+      }
      graphState.activeNodeId = -1;
      graphState.clearSelection();
      graphState.edgeEndPosition = null;
@@ -54,19 +72,6 @@ export function setupKeymaps(keymap: Keymap, graph: GraphManager, graphState: Gr
    }
  });

-  keymap.addShortcut({
-    key: 'g',
-    ctrl: true,
-    description: 'Group selected nodes',
-    callback: () => graphState.groupSelectedNodes()
-  });
-
-  keymap.addShortcut({
-    key: 'Tab',
-    description: 'Enter selected node group',
-    callback: () => graphState.enterGroupNode()
-  });
-
  keymap.addShortcut({
    key: 'A',
    shift: true,
@@ -172,4 +177,80 @@ export function setupKeymaps(keymap: Keymap, graph: GraphManager, graphState: Gr
      if (!edge) graph.smartConnect(nodes[1], nodes[0]);
    }
  });
+
+  keymap.addShortcut({
+    key: 'g',
+    ctrl: true,
+    preventDefault: true,
+    description: 'Group selected nodes',
+    callback: () => {
+      if (!graphState.isBodyFocused()) return;
+      const nodeIds = Array.from(
+        new Set([
+          ...(graphState.selectedNodes.size > 0 ? graphState.selectedNodes.values() : []),
+          ...(graphState.activeNodeId !== -1 ? [graphState.activeNodeId] : [])
+        ])
+      );
+      if (nodeIds.length === 0) return;
+      const groupNode = graph.createGroup(nodeIds);
+      if (groupNode) {
+        graphState.selectedNodes.clear();
+        graphState.activeNodeId = groupNode.id;
+      }
+    }
+  });
+
+  keymap.addShortcut({
+    key: 'g',
+    alt: true,
+    shift: true,
+    preventDefault: true,
+    description: 'Ungroup selected node',
+    callback: () => {
+      if (!graphState.isBodyFocused()) return;
+      const nodeId = graphState.activeNodeId !== -1
+        ? graphState.activeNodeId
+        : graphState.selectedNodes.size === 1
+        ? [...graphState.selectedNodes.values()][0]
+        : -1;
+      if (nodeId === -1) return;
+      graph.ungroup(nodeId);
+      graphState.activeNodeId = -1;
+      graphState.clearSelection();
+    }
+  });
+
+  keymap.addShortcut({
+    key: 'Tab',
+    preventDefault: true,
+    description: 'Enter focused group node',
+    callback: () => {
+      if (!graphState.isBodyFocused()) return;
+      const entered = graph.enterGroup(
+        graphState.activeNodeId,
+        [...graphState.cameraPosition] as [number, number, number]
+      );
+      if (entered) {
+        graphState.activeNodeId = -1;
+        graphState.clearSelection();
+        // Restore group-specific camera if we've been here before, else snap to center
+        const groupId = graph.currentGroupContext;
+        const saved = groupId ? graphState.groupCameras.get(groupId) : undefined;
+        if (saved) {
+          graphState.cameraPosition[0] = saved[0];
+          graphState.cameraPosition[1] = saved[1];
+          graphState.cameraPosition[2] = saved[2];
+        } else {
+          const nodes = [...graph.nodes.values()];
+          if (nodes.length) {
+            const avgX = nodes.reduce((s, n) => s + n.position[0], 0) / nodes.length;
+            const avgY = nodes.reduce((s, n) => s + n.position[1], 0) / nodes.length;
+            graphState.cameraPosition[0] = avgX;
+            graphState.cameraPosition[1] = avgY;
+            graphState.cameraPosition[2] = 10;
+          }
+        }
+      }
+    }
+  });
 }
@@ -3,14 +3,13 @@
  import type { NodeInstance } from '@nodarium/types';
  import { T } from '@threlte/core';
  import { type Mesh } from 'three';
-  import { getGraphManager, getGraphState } from '../graph-state.svelte';
+  import { getGraphState } from '../graph-state.svelte';
  import { colors } from '../graph/colors.svelte';
  import { getNodeHeight, getParameterHeight } from '../helpers/nodeHelpers';
  import NodeFrag from './Node.frag';
  import NodeVert from './Node.vert';
  import NodeHtml from './NodeHTML.svelte';

-  const graph = getGraphManager();
  const graphState = getGraphState();

  type Props = {
@@ -19,7 +18,7 @@
  };
  let { node = $bindable(), inView }: Props = $props();

-  const nodeType = $derived(graph.getNodeType(node)!);
+  const nodeType = $derived(node.state.type!);

  const isActive = $derived(graphState.activeNodeId === node.id);
  const isSelected = $derived(graphState.selectedNodes.has(node.id));
@@ -41,11 +40,7 @@

  let meshRef: Mesh | undefined = $state();

-  const height = $derived(getNodeHeight(nodeType));
-
-  if (node.type.startsWith('__internal/')) {
-    $inspect({ node, nodeType, height, sectionHeights });
-  }
+  const height = $derived(getNodeHeight(node.state.type!));

  const zoom = $derived(graphState.cameraPosition[2]);

@@ -1,13 +1,13 @@
 <script lang="ts">
-  import type { NodeInstance } from '@nodarium/types';
+  import type { NodeDefinition, NodeInstance } from '@nodarium/types';
  import { getGraphManager, getGraphState } from '../graph-state.svelte';
  import NodeHeader from './NodeHeader.svelte';
  import NodeParameter from './NodeParameter.svelte';

  let ref: HTMLDivElement;

-  const graph = getGraphManager();
  const graphState = getGraphState();
+  const manager = getGraphManager();

  type Props = {
    node: NodeInstance;
@@ -31,14 +31,60 @@
  const zOffset = Math.random() - 0.5;
  const zLimit = 2 - zOffset;

-  const nodeType = $derived(graph.getNodeType(node));
-
-  const parameters = $derived(
-    Object.entries(nodeType?.inputs || {}).filter(
+  function buildParameters(node: NodeInstance, inputs: NodeDefinition['inputs']) {
+    let parameters = Object.entries(inputs || {}).filter(
      (p) => p[1].type !== 'seed' && !('setting' in p[1]) && p[1]?.hidden !== true
-    ) || {}
    );

+    if (node.type === '__virtual/group/instance') {
+      const groupOptions = [...(manager?.groups?.entries() ?? [])].map(([id, g]) => ({
+        label: g.name,
+        value: id
+      }));
+      // Remove the static placeholder from the definition (height-only) and replace
+      // with a fully dynamic version that carries current names + value.
+      parameters = parameters.filter(([key]) => key !== '__virtual/groupId');
+      parameters = [['__virtual/groupId', {
+        type: 'select',
+        value: node.props?.groupId as string,
+        options: groupOptions
+      }], ...parameters];
+    }
+
+    return parameters;
+  }
+
+  $effect(() => {
+    const props = node.props as Record<string, unknown> | undefined;
+    const virtualGroupId = props?.['__virtual/groupId'] as string | undefined;
+    if (!virtualGroupId) return;
+    const activeGroupId = props?.groupId as string | undefined;
+    if (virtualGroupId === activeGroupId) return;
+    const newGroupDef = manager?.groupNodeDefinitions.get(`__virtual/group/${virtualGroupId}`);
+    if (!newGroupDef) return;
+    const { children, parents, ref } = node.state;
+    node.props = { ...props, groupId: virtualGroupId, '__virtual/groupId': virtualGroupId };
+    node.state = { type: newGroupDef, children, parents, ref };
+    manager?.execute();
+    manager?.save();
+  });
+
+  const parameters = $derived(buildParameters(node, node?.state?.type?.inputs || {}));
+
+  const currentGroupId = $derived((node.props?.groupId as string) ?? '');
+
+  function onGroupSelect(event: Event) {
+    const select = event.target as HTMLSelectElement;
+    const newGroupId = select.value;
+    if (!manager || newGroupId === currentGroupId) return;
+    const newGroupDef = manager.groupNodeDefinitions.get(`__virtual/group/${newGroupId}`);
+    if (!newGroupDef) return;
+    node.props = { ...(node.props ?? {}), groupId: newGroupId };
+    node.state = { type: newGroupDef };
+    manager.execute();
+    manager.save();
+  }
+
  $effect(() => {
    if ('state' in node && !node.state.ref) {
      node.state.ref = ref;
@@ -60,17 +106,52 @@
 >
  <NodeHeader {node} />

+  {#if false && node.type === '__virtual/group/instance'}
+    <div class="group-param">
+      <select
+        value={currentGroupId}
+        onchange={onGroupSelect}
+        onmousedown={(e) => e.stopPropagation()}
+        onclick={(e) => e.stopPropagation()}
+        onkeydown={(e) => e.stopPropagation()}
+      >
+        {#each manager?.groups?.entries() ?? [] as [gid, gdef]}
+          <option value={gid}>{gdef.name}</option>
+        {/each}
+      </select>
+    </div>
+  {/if}
+
  {#each parameters as [key, value], i (key)}
    <NodeParameter
      bind:node
      id={key}
      input={value}
      isLast={i == parameters.length - 1}
+      outputIndex={node.type === '__virtual/group/input' ? i : undefined}
    />
  {/each}
 </div>

 <style>
+  .group-param {
+    padding: 5px 8px;
+    border-bottom: solid 1px var(--color-layer-2);
+    background: var(--color-layer-1);
+  }
+
+  .group-param select {
+    width: 100%;
+    background: var(--color-layer-2);
+    color: var(--color-text);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+    padding: 4px 6px;
+    font-size: 0.8em;
+    cursor: pointer;
+    box-sizing: border-box;
+  }
+
  .node {
    box-sizing: border-box;
    user-select: none !important;
@@ -3,6 +3,7 @@
  import type { NodeInstance, Socket } from '@nodarium/types';
  import { getGraphState } from '../graph-state.svelte';
  import { createNodePath } from '../helpers/index.js';
+  import { getSocketPosition } from '../helpers/nodeHelpers';

  const graphState = getGraphState();

@@ -15,13 +16,13 @@
      graphState.setDownSocket?.({
        node,
        index: 0,
-        position: graphState.getSocketPosition?.(node, 0)
+        position: getSocketPosition?.(node, 0)
      });
    }
  }

  const cornerTop = 10;
-  const rightBump = $derived(!!node?.state?.type?.outputs?.length);
+  const rightBump = $derived(!!node?.state?.type?.outputs?.length && node.type !== '__virtual/group/input');
  const aspectRatio = 0.25;

  const path = $derived(
@@ -69,8 +70,9 @@
    {#if appSettings.value.debug.advancedMode}
      <span class="bg-white text-black! mr-2 px-1 rounded-sm opacity-30">{node.id}</span>
    {/if}
-    {node.type.split('/').pop()}
+    {node.state?.type?.meta?.title ?? node.type.split('/').pop()}
  </div>
+  {#if node.type !== '__virtual/group/input'}
    <div
      class="target"
      role="button"
@@ -78,6 +80,7 @@
      onmousedown={handleMouseDown}
    >
    </div>
+  {/if}
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
@@ -45,7 +45,7 @@

  $effect(() => {
    const a = $state.snapshot(value);
-    const b = $state.snapshot(node?.props?.[id]);
+    const b = $state.snapshot(node?.props?.[id]) as number | number[] | undefined;
    const isDiff = Array.isArray(a) ? diffArray(a, b) : a !== b;
    if (value !== undefined && isDiff) {
      node.props = { ...node.props, [id]: a };
@@ -2,7 +2,7 @@
  import type { NodeInput, NodeInstance, Socket } from '@nodarium/types';
  import { getGraphManager, getGraphState } from '../graph-state.svelte';
  import { createNodePath } from '../helpers';
-  import { getParameterHeight } from '../helpers/nodeHelpers';
+  import { getParameterHeight, getSocketPosition } from '../helpers/nodeHelpers';
  import NodeInputEl from './NodeInput.svelte';

  type Props = {
@@ -10,6 +10,7 @@
    input: NodeInput;
    id: string;
    isLast?: boolean;
+    outputIndex?: number;
  };

  const graph = getGraphManager();
@@ -17,13 +18,14 @@
  const graphId = graph?.id;
  const elementId = `input-${Math.random().toString(36).substring(7)}`;

-  let { node = $bindable(), input, id, isLast }: Props = $props();
+  let { node = $bindable(), input, id, isLast, outputIndex = undefined }: Props = $props();

-  const nodeType = $derived(graph.getNodeType(node)!);
+  const nodeType = $derived(node.state.type!);

  const inputType = $derived(nodeType.inputs?.[id]);

  const socketId = $derived(`${node.id}-${id}`);
+  const outputSocketId = $derived(outputIndex !== undefined ? `${node.id}-${outputIndex}` : '');
  const height = $derived(getParameterHeight(nodeType, id));

  function handleMouseDown(ev: MouseEvent) {
@@ -32,11 +34,23 @@
    graphState.setDownSocket({
      node,
      index: id,
-      position: graphState.getSocketPosition(node, id)
+      position: getSocketPosition(node, id)
    });
  }

-  const leftBump = $derived(nodeType.inputs?.[id].internal !== true);
+  function handleOutputMouseDown(ev: MouseEvent) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    if (outputIndex === undefined) return;
+    graphState.setDownSocket({
+      node,
+      index: outputIndex,
+      position: getSocketPosition(node, outputIndex)
+    });
+  }
+
+  const leftBump = $derived(!id.startsWith('__virtual') && nodeType.inputs?.[id].internal !== true && outputIndex === undefined);
+  const rightBump = $derived(outputIndex !== undefined);
  const cornerBottom = $derived(isLast ? 5 : 0);
  const aspectRatio = 0.5;

@@ -47,6 +61,7 @@
      y: 50.5,
      cornerBottom,
      leftBump,
+      rightBump,
      aspectRatio
    })
  );
@@ -57,6 +72,7 @@
      y: 50.5,
      cornerBottom,
      leftBump,
+      rightBump,
      aspectRatio
    })
  );
@@ -79,11 +95,13 @@
  data-node-input={id}
  style:height="{height}px"
  style:--socket-color={hoverColor}
-  class:possible-socket={graphState?.possibleSocketIds.has(socketId)}
+  class:possible-socket={outputIndex !== undefined
+    ? graphState?.possibleSocketIds.has(outputSocketId)
+    : graphState?.possibleSocketIds.has(socketId)}
 >
  {#key id && graphId}
    <div class="content" class:disabled={graph?.inputSockets?.has(socketId)}>
-      {#if inputType?.label !== ''}
+      {#if inputType?.label !== '' && !id.startsWith('__virtual')}
        <label for={elementId} title={input.description}>{input.label || id}</label>
      {/if}
      {#if inputType?.external !== true}
@@ -91,7 +109,7 @@
      {/if}
    </div>

-    {#if node?.state?.type?.inputs?.[id]?.internal !== true}
+    {#if outputIndex === undefined && node?.state?.type?.inputs?.[id]?.internal !== true}
      <div
        data-node-socket
        class="target"
@@ -103,6 +121,17 @@
    {/if}
  {/key}

+  {#if outputIndex !== undefined}
+    <div
+      data-node-socket
+      class="target target-right"
+      onmousedown={handleOutputMouseDown}
+      role="button"
+      tabindex="0"
+    >
+    </div>
+  {/if}
+
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
@@ -130,6 +159,16 @@
    transform: translateY(-50%) translateX(-50%);
  }

+  .target-right {
+    right: 0;
+    left: auto;
+    transform: translateY(-50%) translateX(50%);
+  }
+
+  .target-right:hover ~ svg path {
+    d: var(--hover-path);
+  }
+
  .possible-socket .target::before {
    content: "";
    position: absolute;
@@ -1,5 +1,5 @@
 export const debugNode = {
-  id: '__internal/debug/instance',
+  id: 'max/plantarium/debug',
  inputs: {
    input: {
      type: '*'
@@ -1,13 +0,0 @@
-export const groupNode = {
-  id: '__internal/group/instance',
-  meta: { title: 'Group' },
-  inputs: {
-    input: {
-      type: 'select',
-      values: []
-    }
-  },
-  execute(_data: Int32Array): Int32Array {
-    return _data;
-  }
-} as const;
@@ -0,0 +1,25 @@
+import type { NodeDefinition } from '@nodarium/types';
+
+export const groupInputNode: NodeDefinition = {
+  id: '__virtual/group/input',
+  inputs: {},
+  outputs: [],
+  execute(_data: Int32Array): Int32Array { return _data; }
+} as unknown as NodeDefinition;
+
+export const groupOutputNode: NodeDefinition = {
+  id: '__virtual/group/output',
+  inputs: {},
+  outputs: [],
+  execute(_data: Int32Array): Int32Array { return _data; }
+} as unknown as NodeDefinition;
+
+// Stub registered in the registry so it appears in AddMenu.
+// Actual inputs/outputs are resolved from props.groupId at runtime.
+export const groupNode: NodeDefinition = {
+  id: '__virtual/group/instance',
+  meta: { title: 'Group' },
+  inputs: {},
+  outputs: [],
+  execute(_data: Int32Array): Int32Array { return _data; }
+} as unknown as NodeDefinition;
@@ -88,7 +88,6 @@ export class RemoteNodeRegistry implements NodeRegistry {
  }

  async fetchNodeDefinition(nodeId: `${string}/${string}/${string}`) {
-    if (nodeId.startsWith('__internal/')) return;
    return this.fetchJson(`nodes/${nodeId}.json`);
  }

@@ -110,8 +109,6 @@ export class RemoteNodeRegistry implements NodeRegistry {
          return this.nodes.get(id)!;
        }

-        if (id.startsWith('__internal/')) return;
-
        const wasmBuffer = await this.fetchNodeWasm(id);

        try {
@@ -28,9 +28,7 @@ export function expandGroups(graph: Graph): Graph {
      const node = nodes[i];
      if (!isGroupInstanceType(node.type)) continue;

-      const groupId = (node.props as Record<string, unknown> | undefined)?.groupId as
-        | string
-        | undefined;
+      const groupId = (node.props as Record<string, unknown> | undefined)?.groupId as string | undefined;
      if (!groupId) continue;
      const group = groups[groupId];
      if (!group) continue;
@@ -106,8 +104,7 @@ export function expandGroups(graph: Graph): Graph {

      // Remap internal-to-internal edges
      const internalEdges = expandedInternal.edges.filter(
-        e =>
-          e[0] !== inputVirtualNode?.id
+        e => e[0] !== inputVirtualNode?.id
          && e[0] !== outputVirtualNode?.id
          && e[2] !== inputVirtualNode?.id
          && e[2] !== outputVirtualNode?.id
@@ -1,12 +1,18 @@
 import { debugNode } from '$lib/node-registry/debugNode';
+import { groupInputNode, groupNode, groupOutputNode } from '$lib/node-registry/groupNodes';
 import { IndexDBCache, RemoteNodeRegistry } from '$lib/node-registry/index';
 import type { Graph } from '@nodarium/types';
 import { createPerformanceStore } from '@nodarium/utils';
-import { MemoryRuntimeExecutor } from './runtime-executor';
+import { expandGroups, MemoryRuntimeExecutor } from './runtime-executor';
 import { MemoryRuntimeCache } from './runtime-executor-cache';

 const indexDbCache = new IndexDBCache('node-registry');
-const nodeRegistry = new RemoteNodeRegistry('', indexDbCache, [debugNode]);
+const nodeRegistry = new RemoteNodeRegistry('', indexDbCache, [
+  debugNode,
+  groupInputNode,
+  groupOutputNode,
+  groupNode
+]);

 const cache = new MemoryRuntimeCache();
 const executor = new MemoryRuntimeExecutor(nodeRegistry, cache);
@@ -34,7 +40,13 @@ export async function executeGraph(
  graph: Graph,
  settings: Record<string, unknown>
 ): Promise<Int32Array> {
-  await nodeRegistry.load(graph.nodes.map((n) => n.type));
+  // Expand groups before loading types so we only load real (non-virtual) node types
+  const expandedGraph = expandGroups(graph);
+  await nodeRegistry.load(
+    expandedGraph.nodes
+      .map(n => n.type)
+      .filter(t => !t.startsWith('__virtual/')) as any
+  );
  performanceStore.startRun();
  const res = await executor.execute(graph, settings);
  performanceStore.stopRun();
@@ -52,7 +52,7 @@
    // select input: use index into options
    if ('options' in node && Array.isArray(node.options)) {
      if (typeof inputValue === 'string') {
-        return node.options.indexOf(inputValue);
+        return (node.options as string[]).indexOf(inputValue);
      }
      return 0;
    }
@@ -96,6 +96,4 @@
    bind:value={store}
    type={nodeDefinition}
  />
-{:else}
-  <p class="mx-4 mt-4">Node has no settings</p>
 {/if}
@@ -5,22 +5,27 @@

  type Props = {
    manager: GraphManager;
-    node: NodeInstance | undefined;
+    node: NodeInstance;
  };

  let { manager, node = $bindable() }: Props = $props();
+
+  const inputs = $derived(node?.state?.type?.inputs || {});
+
+  const hasSettings = $derived(
+    Object.values(inputs).find(entry => {
+      return entry.hidden === true;
+    }) !== undefined
+  );
+
+  $inspect({ inputs, hasSettings });
 </script>

-<div class='{node?"border-l-2 pl-3.5!":""} bg-layer-2 flex items-center h-[70px] border-b-1 border-l-selected border-b-outline pl-4'>
+{#key node.id}
+  {#if node && hasSettings}
+    <div class="border-l-2 pl-3.5! bg-layer-2 flex items-center h-[70px] border-b-1 border-l-selected border-b-outline pl-4">
      <h3>Node Settings</h3>
-</div>
-
-{#if node}
-  {#key node.id}
-    {#if node}
+    </div>
    <ActiveNodeSelected {manager} bind:node />
  {/if}
-  {/key}
-{:else}
-  <p class="mx-4 mt-4">No node selected</p>
-{/if}
+{/key}
@@ -0,0 +1,175 @@
+<script lang="ts">
+  import type { GraphManager } from '$lib/graph-interface/graph-manager.svelte';
+  import { InputSelect } from '@nodarium/ui';
+
+  type Props = { manager: GraphManager; groupId: string };
+  const { manager, groupId }: Props = $props();
+
+  const group = $derived(manager.groups.get(groupId));
+
+  const COMMON_TYPES = ['plant', 'float', 'int', 'vec3', 'bool'];
+  let selectedTypeIdx = $state(0);
+  let customType = $state('');
+
+  function rename(e: Event) {
+    if (!group) return;
+    const name = (e.target as HTMLInputElement).value.trim();
+    if (!name) return;
+    group.name = name;
+    if (manager.graph.groups?.[groupId]) manager.graph.groups[groupId].name = name;
+    const def = manager.groupNodeDefinitions.get(`__virtual/group/${groupId}`);
+    if (def?.meta) def.meta.title = name;
+    manager.save();
+  }
+
+  function addSocket() {
+    const type = customType.trim() || COMMON_TYPES[selectedTypeIdx];
+    if (!type) return;
+    manager.addGroupSocket('input', type);
+    customType = '';
+  }
+
+  function removeSocket(index: number) {
+    manager.removeGroupSocket('input', index);
+  }
+
+  function prune() {
+    manager.pruneUnusedGroups();
+  }
+</script>
+
+<div class="bg-layer-2 flex items-center h-[70px] border-b-1 border-outline pl-4">
+  <h3>Group Settings</h3>
+</div>
+
+<div class="px-4 py-3 flex flex-col gap-4">
+  <div class="flex flex-col gap-1.5">
+    <span class="section-label">Group name</span>
+    <input
+      type="text"
+      value={group?.name ?? ''}
+      onchange={rename}
+      onkeydown={(e) => e.stopPropagation()}
+      placeholder="Group name"
+      class="bg-layer-2 text-text rounded-[5px] px-2 py-1.5 text-sm w-full box-border outline outline-1 outline-outline"
+    />
+  </div>
+
+  <div class="flex flex-col gap-1.5">
+    <span class="section-label">Inputs</span>
+
+    {#if (group?.inputs?.length ?? 0) === 0}
+      <p class="text-sm opacity-40 italic m-0">No inputs yet</p>
+    {:else}
+      <ul class="socket-list">
+        {#each group?.inputs ?? [] as socket, i}
+          <li class="socket-item">
+            <span class="flex-1 opacity-80 text-sm">{socket.name}</span>
+            <span class="text-xs opacity-45 italic">{socket.type}</span>
+            <button class="remove-btn" onclick={() => removeSocket(i)} title="Remove">×</button>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+
+    <div class="flex gap-1.5 items-center">
+      <InputSelect options={COMMON_TYPES} bind:value={selectedTypeIdx} />
+      <input
+        type="text"
+        placeholder="custom type…"
+        bind:value={customType}
+        onkeydown={(e) => {
+          e.stopPropagation();
+          if (e.key === 'Enter') addSocket();
+        }}
+        class="bg-layer-2 text-text rounded-[5px] px-2 py-1 text-sm flex-1 min-w-0 outline outline-1 outline-outline"
+      />
+      <button class="add-btn" onclick={addSocket}>+ Add</button>
+    </div>
+  </div>
+
+  <div class="flex flex-col gap-1.5">
+    <span class="section-label">Maintenance</span>
+    <button class="danger-btn" onclick={prune}>Prune unused groups</button>
+  </div>
+</div>
+
+<style>
+  .section-label {
+    font-size: 0.72em;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    opacity: 0.5;
+  }
+
+  .socket-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+  }
+
+  .socket-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    background: var(--color-layer-2);
+    border-radius: 5px;
+    padding: 4px 8px;
+    outline: 1px solid var(--color-outline);
+  }
+
+  .remove-btn {
+    background: none;
+    border: none;
+    color: var(--color-text);
+    cursor: pointer;
+    opacity: 0.4;
+    padding: 0 2px;
+    font-size: 1.1em;
+    line-height: 1;
+  }
+
+  .remove-btn:hover {
+    opacity: 1;
+  }
+
+  .add-btn {
+    background: var(--color-layer-2);
+    color: var(--color-text);
+    border: none;
+    outline: 1px solid var(--color-outline);
+    border-radius: 5px;
+    padding: 0.4em 0.7em;
+    font-size: 0.8em;
+    cursor: pointer;
+    white-space: nowrap;
+    font-family: var(--font-family);
+  }
+
+  .add-btn:hover {
+    outline-color: var(--color-selected);
+  }
+
+  .danger-btn {
+    background: var(--color-layer-2);
+    color: var(--color-text);
+    border: none;
+    outline: 1px solid var(--color-outline);
+    border-radius: 5px;
+    padding: 0.4em 0.7em;
+    font-size: 0.8em;
+    cursor: pointer;
+    font-family: var(--font-family);
+    opacity: 0.7;
+    width: 100%;
+    text-align: left;
+  }
+
+  .danger-btn:hover {
+    outline-color: #e05050;
+    opacity: 1;
+  }
+</style>
@@ -4,7 +4,8 @@
  import Grid from '$lib/grid';
  import { debounceAsyncFunction } from '$lib/helpers';
  import { createKeyMap } from '$lib/helpers/createKeyMap';
-  import { debugNode } from '$lib/node-registry/debugNode';
+  import { debugNode } from '$lib/node-registry/debugNode.js';
+  import { groupInputNode, groupNode, groupOutputNode } from '$lib/node-registry/groupNodes.js';
  import { IndexDBCache, RemoteNodeRegistry } from '$lib/node-registry/index';
  import NodeStore from '$lib/node-store/NodeStore.svelte';
  import PerformanceViewer from '$lib/performance/PerformanceViewer.svelte';
@@ -21,6 +22,7 @@
  import Changelog from '$lib/sidebar/panels/Changelog.svelte';
  import ExportSettings from '$lib/sidebar/panels/ExportSettings.svelte';
  import GraphSource from '$lib/sidebar/panels/GraphSource.svelte';
+  import GroupContextPanel from '$lib/sidebar/panels/GroupContextPanel.svelte';
  import Keymap from '$lib/sidebar/panels/Keymap.svelte';
  import { panelState } from '$lib/sidebar/PanelState.svelte';
  import Sidebar from '$lib/sidebar/Sidebar.svelte';
@@ -37,7 +39,12 @@

  const registryCache = new IndexDBCache('node-registry');

-  const nodeRegistry = new RemoteNodeRegistry('', registryCache, [debugNode]);
+  const nodeRegistry = new RemoteNodeRegistry('', registryCache, [
+    debugNode,
+    groupInputNode,
+    groupOutputNode,
+    groupNode
+  ]);
  const workerRuntime = new WorkerRuntimeExecutor();
  const runtimeCache = new MemoryRuntimeCache();
  const memoryRuntime = new MemoryRuntimeExecutor(nodeRegistry, runtimeCache);
@@ -341,7 +348,20 @@
            type={graphSettingTypes}
            bind:value={graphSettings}
          />
+          {#if activeNode?.id}
            <ActiveNodeSettings {manager} bind:node={activeNode} />
+          {/if}
+          {#if manager?.isInsideGroup}
+            <GroupContextPanel
+              {manager}
+              groupId={manager.currentGroupContext!}
+            />
+          {:else if activeNode?.type === '__virtual/group/instance'}
+            <GroupContextPanel
+              {manager}
+              groupId={activeNode?.props?.groupId as string}
+            />
+          {/if}
        </Panel>
        <Panel
          id="changelog"
@@ -0,0 +1,312 @@
+# Nodarium - LLM Documentation
+
+## Overview
+
+Nodarium is a **WebAssembly-based visual programming language** for creating procedural 3D plants. The app features a node-based interface where users connect WASM modules to generate plant models in real-time. Currently used to develop https://nodes.max-richter.dev, a procedural modelling tool for 3D plants.
+
+## Architecture
+
+### Core Components
+
+#### 1. Node System (`app/static/nodes/`)
+
+WASM-based nodes that perform computations. All nodes must implement the NodeDefinition interface.
+
+- **Node Storage**: `app/static/nodes/max/plantarium/`
+  - `box.wasm` - Box geometry node
+  - `branch.wasm` - Branch generation
+  - `float.wasm` - Float value node
+  - `gravity.wasm` - Gravity/physics node
+  - `instance.wasm` - Instance rendering
+  - `leaf.wasm` - Leaf geometry
+  - `math.wasm` - Math operations
+  - `noise.wasm` - Noise generation
+  - `output.wasm` - Output node
+  - `random.wasm` - Random value generation
+  - `rotate.wasm` - Rotation node
+  - `shape.wasm` - Shape geometry
+  - `stem.wasm` - Stem generation
+  - `triangle.wasm` - Triangle geometry
+  - `vec3.wasm` - Vector3 node
+
+- **Node Registry**: `app/src/lib/node-registry.ts`
+  - Loads and manages WASM nodes
+  - `getNodeWasm()` - Creates WASM wrapper from bytes
+  - `getNode()` - Retrieves node definition
+
+- **Debug Node**: `app/src/lib/node-registry/debugNode.js`
+  - Special debug node with wildcard inputs
+  - Variable-height nodes and parameters
+  - Quick-connect shortcut
+
+#### 2. Graph Interface
+
+Visual node editor built with Svelte 5.
+
+- **Main Wrapper**: `app/src/lib/graph-interface/graph/Wrapper.svelte`
+  - Entry point for graph interface
+  - Manages GraphManager and GraphState
+
+- **GraphManager**: `app/src/lib/graph-interface/graph-manager.svelte.ts`
+  - Core entity managing the node graph
+  - Handles node connections and execution flow
+
+- **GraphState**: `app/src/lib/graph-interface/graph-state.svelte.ts`
+  - Tracks UI state (selection, snapping, help, active nodes)
+
+- **Graph Components**:
+  - `app/src/lib/graph-interface/graph/` - Graph rendering
+  - `app/src/lib/graph-interface/node/` - Node rendering
+  - `app/src/lib/graph-interface/edges/` - Edge rendering
+  - `app/src/lib/graph-interface/components/` - UI components (AddMenu, Socket, etc.)
+  - `app/src/lib/graph-interface/debug/` - Debug overlays
+  - `app/src/lib/graph-interface/background/` - Grid/dots backgrounds
+
+- **Helpers**:
+  - `app/src/lib/helpers/` - Utility functions
+  - `app/src/lib/helpers/createKeyMap.ts` - Keyboard shortcuts
+
+#### 3. Runtime Execution
+
+Performs graph execution via WASM nodes.
+
+- **Runtime Executors** (`app/src/lib/runtime/`):
+  - **MemoryRuntime**: Direct WASM execution in main thread
+  - **WorkerRuntime**: WebWorker-based execution for performance
+  - Both implement the RuntimeExecutor interface
+
+- **Runtime Cache**: `app/src/lib/runtime/cache.ts`
+  - Memory-based caching for graph execution
+
+- **Execution Flow**:
+  1. Graph serialized from graph interface
+  2. Runtime executes nodes in topological order
+  3. Results passed through connected edges
+  4. Final mesh output rendered
+
+#### 4. 3D Viewer (`app/src/lib/result-viewer/`)
+
+Three.js-based rendering for 3D output.
+
+- **Viewer**: `app/src/lib/result-viewer/Viewer.svelte`
+  - Renders generated 3D meshes
+  - Uses @threlte/core (Svelte-Three.js wrapper)
+
+#### 5. Application Structure (`app/src/routes/`)
+
+SvelteKit application routing.
+
+- **Main Page**: `app/src/routes/+page.svelte`
+  - Combines GraphInterface + 3D Viewer
+  - Manages runtime selection (memory vs worker)
+  - Handles settings and performance tracking
+
+- **Layout**: `app/src/routes/+layout.svelte`
+  - Application shell
+
+- **Server**: `app/src/routes/+layout.server.ts`
+  - Loads git metadata and changelog
+
+#### 6. Settings System (`app/src/lib/settings/`)
+
+Application and graph settings.
+
+- **App Settings**: `app/src/lib/settings/app-settings.svelte.ts`
+  - Debug mode, themes, node interface options
+
+- **NestedSettings**: `app/src/lib/settings/NestedSettings.svelte`
+  - Recursive settings UI component
+
+#### 7. Sidebar Panels (`app/src/lib/sidebar/`)
+
+- `app/src/lib/sidebar/Sidebar.svelte` - Main sidebar
+- `app/src/lib/sidebar/panels/` - Individual panels:
+  - `ActiveNodeSettings.svelte` - Selected node properties
+  - `BenchmarkPanel.svelte` - Performance benchmarking
+  - `Changelog.svelte` - Version history
+  - `ExportSettings.svelte` - Export options
+  - `GraphSource.svelte` - Graph JSON view
+  - `Keymap.svelte` - Keyboard shortcuts
+
+#### 8. Project Management (`app/src/lib/project-manager/`)
+
+- `app/src/lib/project-manager/project-manager.svelte` - Project save/load
+- Uses IndexedDB for persistence
+
+#### 9. Node Store (`app/src/lib/node-store/`)
+
+- `app/src/lib/node-store/NodeStore.svelte`
+- Remote node registry management
+- IndexDBCache for offline storage
+
+#### 10. Graph Templates (`app/src/lib/graph-templates/`)
+
+Pre-built graph templates for testing:
+
+- Grid, Tree, LottaFaces, LottaNodes, LottaNodesAndFaces
+
+## Key Types (`app/src/lib/types.ts`)
+
+```typescript
+interface NodeDefinition {
+  id: string;
+  name: string;
+  inputs: Socket[];
+  outputs: Socket[];
+  parameters: Parameter[];
+  execute: (inputs: any[], parameters: any[]) => any[];
+}
+
+interface Socket {
+  id: string;
+  name: string;
+  type: string; // datatype (e.g., "number", "vec3", "*")
+  defaultValue?: any;
+  optional?: boolean;
+}
+
+interface Parameter {
+  id: string;
+  name: string;
+  type: string;
+  defaultValue: any;
+  min?: number;
+  max?: number;
+  options?: string[];
+}
+
+interface Graph {
+  nodes: NodeInstance[];
+  edges: Edge[];
+}
+
+interface NodeInstance {
+  id: number;
+  nodeId: string;
+  position: { x: number; y: number };
+  parameters: Record<string, any>;
+}
+
+interface Edge {
+  id: number;
+  fromNode: number;
+  fromSocket: string;
+  toNode: number;
+  toSocket: string;
+}
+```
+
+## Development Workflow
+
+### Prerequisites
+
+- Node.js
+- pnpm
+- Rust
+- wasm-pack
+
+### Build Commands
+
+```bash
+# Install dependencies
+pnpm i
+
+# Build WASM nodes
+pnpm build:nodes
+
+# Start development server
+cd app && pnpm dev
+
+# Run tests
+cd app && pnpm test
+
+# Lint and typecheck
+cd app && pnpm lint
+cd app && pnpm check
+
+# Format code
+cd app && pnpm format
+```
+
+### Creating New Nodes
+
+See `docs/DEVELOPING_NODES.md` for detailed instructions on creating custom WASM nodes.
+
+## Features
+
+### Current Features
+
+- Visual node-based programming with real-time 3D preview
+- WebAssembly nodes for high-performance computation
+- Debug node with wildcard inputs and runtime integration
+- Color-coded node sockets and edges (indicating data types)
+- Variable-height nodes and parameters
+- Edge dragging with valid socket highlighting
+- InputNumber snapping to predefined values (Alt+click)
+- Project save/load with IndexedDB
+- Performance monitoring and benchmarking
+- Changelog viewer
+- Advanced mode settings
+
+### UI Components
+
+- **InputNumber**: Numeric input with arrow controls
+- **InputColor**: Color picker
+- **InputShape**: Shape selector with preview
+- **InputSelect**: Dropdown with options
+
+## File Structure
+
+```
+nodarium/
+├── app/
+│   ├── src/
+│   │   ├── lib/
+│   │   │   ├── config.ts
+│   │   │   ├── graph-interface/    # Node editor
+│   │   │   ├── graph-manager.svelte.ts
+│   │   │   ├── graph-state.svelte.ts
+│   │   │   ├── graph-templates/   # Test templates
+│   │   │   ├── grid/
+│   │   │   ├── helpers/
+│   │   │   ├── node-registry.ts
+│   │   │   ├── node-registry/     # Node loading
+│   │   │   ├── node-store/
+│   │   │   ├── performance/
+│   │   │   ├── project-manager/
+│   │   │   ├── result-viewer/       # 3D viewer
+│   │   │   ├── runtime/           # Execution
+│   │   │   ├── settings/         # App settings
+│   │   │   ├── sidebar/
+│   │   │   └── types.ts
+│   │   └── routes/
+│   │       ├── +page.svelte
+│   │       └── +layout.svelte
+│   ├── static/
+│   │   └── nodes/
+│   │       └── max/
+│   │           └── plantarium/    # WASM nodes
+│   └── package.json
+├── docs/
+│   ├── ARCHITECTURE.md
+│   ├── DEVELOPING_NODES.md
+│   ├── NODE_DEFINITION.md
+│   └── PLANTARIUM.md
+├── nodes/                        # WASM node source (Rust)
+└── package.json
+```
+
+## Release Process
+
+1. Create annotated tag:
+   ```bash
+   git tag -a v1.0.0 -m "Release notes"
+   git push origin v1.0.0
+   ```
+
+2. CI workflow:
+   - Runs lint, format check, type check
+   - Builds project
+   - Updates package.json versions
+   - Generates CHANGELOG.md
+   - Creates Gitea release
@@ -4,12 +4,13 @@ export type {
  Box,
  Edge,
  Graph,
-  GroupDefinition,
+  GroupSocket,
  NodeDefinition,
+  NodeGroupDefinition,
  NodeId,
  NodeInstance,
  SerializedNode,
  Socket
 } from './types';
-export { GraphSchema, GroupSchema, NodeSchema } from './types';
+export { GraphSchema, NodeSchema } from './types';
 export { NodeDefinitionSchema } from './types';
@@ -61,7 +61,10 @@ export const NodeInputBooleanSchema = z.object({
 export const NodeInputSelectSchema = z.object({
  ...DefaultOptionsSchema.shape,
  type: z.literal('select'),
-  options: z.array(z.string()).optional(),
+  options: z.union([
+    z.array(z.string()),
+    z.array(z.object({ label: z.string(), value: z.string() }))
+  ]).optional(),
  value: z.string().optional()
 });

@@ -51,7 +51,7 @@ export const NodeSchema = z.object({
  id: z.number(),
  type: NodeIdSchema,
  props: z
-    .record(z.string(), z.union([z.number(), z.array(z.number())]))
+    .record(z.string(), z.union([z.number(), z.array(z.number()), z.string()]))
    .optional(),
  meta: z
    .object({
@@ -76,15 +76,32 @@ export type Socket = {

 export type Edge = [NodeInstance, number, NodeInstance, string];

-export const GroupSchema = z.object({
-  id: z.number(),
-  nodes: z.array(NodeSchema),
-  edges: z.array(z.tuple([z.number(), z.number(), z.number(), z.string()])),
-  inputs: z.record(z.string(), NodeInputSchema).optional(),
-  outputs: z.array(z.string()).optional()
-});
+export type GroupSocket = {
+  name: string;
+  type: string;
+};

-export type GroupDefinition = z.infer<typeof GroupSchema>;
+export type NodeGroupDefinition = {
+  id: string;
+  name: string;
+  inputs: GroupSocket[];
+  outputs: GroupSocket[];
+  graph: {
+    nodes: SerializedNode[];
+    edges: [number, number, number, string][];
+  };
+};
+
+const NodeGroupDefinitionSchema: z.ZodType<NodeGroupDefinition> = z.object({
+  id: z.string(),
+  name: z.string(),
+  inputs: z.array(z.object({ name: z.string(), type: z.string() })),
+  outputs: z.array(z.object({ name: z.string(), type: z.string() })),
+  graph: z.object({
+    nodes: z.array(NodeSchema),
+    edges: z.array(z.tuple([z.number(), z.number(), z.number(), z.string()]))
+  })
+});

 export const GraphSchema = z.object({
  id: z.number(),
@@ -97,7 +114,7 @@ export const GraphSchema = z.object({
  settings: z.record(z.string(), z.any()).optional(),
  nodes: z.array(NodeSchema),
  edges: z.array(z.tuple([z.number(), z.number(), z.number(), z.string()])),
-  groups: z.array(GroupSchema)
+  groups: z.record(z.string(), NodeGroupDefinitionSchema).optional()
 });

 export type Graph = z.infer<typeof GraphSchema>;
@@ -40,7 +40,7 @@
 {:else if input.type === 'boolean'}
  <InputCheckbox bind:value={value as boolean} {id} />
 {:else if input.type === 'select'}
-  <InputSelect bind:value={value as number} options={input.options} {id} />
+  <InputSelect bind:value={value as number | string} options={input.options} {id} />
 {:else if input.type === 'vec3'}
  <InputVec3 bind:value={value as [number, number, number]} {id} />
 {/if}
@@ -1,17 +1,28 @@
 <script lang="ts">
+  type StringOption = string;
+  type LabeledOption = { label: string; value: string };
+
  interface Props {
-    options?: string[];
-    value?: number;
+    options?: StringOption[] | LabeledOption[];
+    value?: number | string;
    id?: string;
  }

-  let { options = [], value = $bindable(0), id = '' }: Props = $props();
+  let { options = [], value = $bindable<number | string>(0), id = '' }: Props = $props();
+
+  const isLabeled = $derived(options.length > 0 && typeof options[0] === 'object');
 </script>

 <select {id} bind:value class="bg-layer-2 text-text">
-  {#each options as label, i (label)}
-    <option value={i}>{label}</option>
+  {#if isLabeled}
+    {#each options as opt ((opt as LabeledOption).value)}
+      <option value={(opt as LabeledOption).value}>{(opt as LabeledOption).label}</option>
    {/each}
+  {:else}
+    {#each options as label, i (label)}
+      <option value={i}>{label as string}</option>
+    {/each}
+  {/if}
 </select>

 <style>
@@ -4,6 +4,7 @@ export interface PerformanceStore {
  startRun(): void;
  stopRun(): void;
  addPoint(name: string, value?: number): void;
+  addToLastRun(name: string, value: number): void;
  endPoint(name?: string): void;
  mergeData(data: PerformanceData[number]): void;
  get: () => PerformanceData;
@@ -63,6 +64,13 @@ export function createPerformanceStore(): PerformanceStore {
    }
  }

+  function addToLastRun(name: string, value: number) {
+    const last = data[data.length - 1];
+    if (!last) return;
+    last[name] = last[name] || [];
+    last[name].push(value);
+  }
+
  function get() {
    return data;
  }
@@ -94,6 +102,7 @@ export function createPerformanceStore(): PerformanceStore {
    startRun,
    stopRun,
    addPoint,
+    addToLastRun,
    endPoint,
    mergeData,
    get
Author	SHA1	Message	Date
max	c42bc93174	feat: make it work 📊 Benchmark the Runtime / release (pull_request) Successful in 1m5s Details 🚀 Lint & Test & Deploy / release (pull_request) Failing after 59s Details	2026-04-24 21:45:56 +02:00
max	6457c9db0b	fix(ci): correct subsitute stuff 📊 Benchmark the Runtime / release (pull_request) Successful in 1m29s Details 🚀 Lint & Test & Deploy / release (pull_request) Failing after 1m1s Details	2026-04-24 21:39:42 +02:00
max	3dba3c2b39	feat: count total-vertices and faces in benchmark 📊 Benchmark the Runtime / release (pull_request) Failing after 1m21s Details 🚀 Lint & Test & Deploy / release (pull_request) Failing after 56s Details	2026-04-24 21:35:33 +02:00
max	09a9f8ce2c	feat: initial app code	2026-04-24 17:34:10 +02:00
max	0b48740a85	feat: correctly create benchmark folder	2026-04-24 17:32:37 +02:00
max	985b5179af	chore: remove debug logs from ci	2026-04-24 14:55:29 +02:00
max	dab03753a2	chore: debug ci ssh 🚀 Lint & Test & Deploy / release (pull_request) Failing after 1m19s Details 📊 Benchmark the Runtime / release (pull_request) Successful in 1m5s Details	2026-04-24 14:53:16 +02:00
max	26c7e915ef	chore: debug ci ssh 📊 Benchmark the Runtime / release (pull_request) Failing after 1m3s Details 🚀 Lint & Test & Deploy / release (pull_request) Failing after 56s Details	2026-04-24 14:51:22 +02:00
max	a3a1f6af35	chore: debug ci ssh 📊 Benchmark the Runtime / release (pull_request) Failing after 1m16s Details 🚀 Lint & Test & Deploy / release (pull_request) Failing after 1m5s Details	2026-04-24 14:42:17 +02:00
max	4615489128	chore: debug ci ssh 📊 Benchmark the Runtime / release (pull_request) Failing after 1m10s Details 🚀 Lint & Test & Deploy / release (pull_request) Failing after 1m12s Details	2026-04-24 14:40:38 +02:00
max	b23ad01c74	chore: debug ci ssh 📊 Benchmark the Runtime / release (pull_request) Failing after 1m16s Details 🚀 Lint & Test & Deploy / release (pull_request) Failing after 1m11s Details	2026-04-24 14:36:35 +02:00
max	237d04b4f1	chore: use ssh private key in ci 📊 Benchmark the Runtime / release (pull_request) Failing after 1m1s Details 🚀 Lint & Test & Deploy / release (pull_request) Failing after 1m7s Details	2026-04-24 14:35:10 +02:00
max	5b8eabc32d	chore: use ssh private key in ci 📊 Benchmark the Runtime / release (pull_request) Failing after 1m0s Details 🚀 Lint & Test & Deploy / release (pull_request) Failing after 57s Details	2026-04-24 14:30:27 +02:00
max	7011c3653d	chore: use ssh private key in ci 📊 Benchmark the Runtime / release (pull_request) Failing after 1m5s Details 🚀 Lint & Test & Deploy / release (pull_request) Failing after 55s Details	2026-04-24 14:25:55 +02:00
max	059022e8a8	chore: upgrade ci container image 📊 Benchmark the Runtime / release (pull_request) Failing after 2m26s Details 🚀 Lint & Test & Deploy / release (pull_request) Failing after 1m15s Details	2026-04-24 14:12:27 +02:00
max	e9dce2e79c	feat(ci): push benchmarks to different repo 🚀 Lint & Test & Deploy / release (pull_request) Failing after 54s Details 📊 Benchmark the Runtime / release (pull_request) Failing after 1m11s Details	2026-04-24 13:52:23 +02:00
max	fd1da58cd9	feat(ci): push benchmarks to different repo 📊 Benchmark the Runtime / release (pull_request) Failing after 47s Details 🚀 Lint & Test & Deploy / release (pull_request) Failing after 55s Details	2026-04-24 13:48:55 +02:00
max	b1418f6778	feat: initial group nodes /w some bugs 🚀 Lint & Test & Deploy / release (pull_request) Failing after 1m12s Details 📊 Benchmark the Runtime / release (pull_request) Successful in 50s Details	2026-04-24 13:38:32 +02:00