feat: add debug node

Cargo.lock

@@ -24,6 +24,14 @@ dependencies = [
  "nodarium_utils",
 ]
 
+[[package]]
+name = "debug"
+version = "0.1.0"
+dependencies = [
+ "nodarium_macros",
+ "nodarium_utils",
+]
+
 [[package]]
 name = "float"
 version = "0.1.0"

app/package.json

@@ -28,7 +28,7 @@
   "devDependencies": {
     "@iconify-json/tabler": "^1.2.26",
     "@iconify/tailwind4": "^1.2.1",
-    "@nodarium/types": "link:../packages/types",
+    "@nodarium/types": "workspace:",
     "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@tsconfig/svelte": "^5.0.6",

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { HTML } from "@threlte/extras";
-  import { onMount } from "svelte";
-  import type { NodeInstance, NodeId } from "@nodarium/types";
-  import { getGraphManager, getGraphState } from "../graph-state.svelte";
+  import type { NodeId, NodeInstance } from '@nodarium/types';
+  import { HTML } from '@threlte/extras';
+  import { onMount } from 'svelte';
+  import { getGraphManager, getGraphState } from '../graph-state.svelte';
 
   type Props = {
     onnode: (n: NodeInstance) => void;
@@ -14,6 +14,7 @@
   const graphState = getGraphState();
 
   let input: HTMLInputElement;
+  let wrapper: HTMLDivElement;
   let value = $state<string>();
   let activeNodeId = $state<NodeId>();
 
@@ -22,10 +23,10 @@
     : graph.getNodeDefinitions();
 
   function filterNodes() {
-    return allNodes.filter((node) => node.id.includes(value ?? ""));
+    return allNodes.filter((node) => node.id.includes(value ?? ''));
   }
 
-  const nodes = $derived(value === "" ? allNodes : filterNodes());
+  const nodes = $derived(value === '' ? allNodes : filterNodes());
   $effect(() => {
     if (nodes) {
       if (activeNodeId === undefined) {
@@ -39,38 +40,38 @@
     }
   });
 
-  function handleNodeCreation(nodeType: NodeInstance["type"]) {
+  function handleNodeCreation(nodeType: NodeInstance['type']) {
     if (!graphState.addMenuPosition) return;
     onnode?.({
       id: -1,
       type: nodeType,
       position: [...graphState.addMenuPosition],
       props: {},
-      state: {},
+      state: {}
     });
   }
 
   function handleKeyDown(event: KeyboardEvent) {
     event.stopImmediatePropagation();
 
-    if (event.key === "Escape") {
+    if (event.key === 'Escape') {
       graphState.addMenuPosition = null;
       return;
     }
 
-    if (event.key === "ArrowDown") {
+    if (event.key === 'ArrowDown') {
       const index = nodes.findIndex((node) => node.id === activeNodeId);
       activeNodeId = nodes[(index + 1) % nodes.length].id;
       return;
     }
 
-    if (event.key === "ArrowUp") {
+    if (event.key === 'ArrowUp') {
       const index = nodes.findIndex((node) => node.id === activeNodeId);
       activeNodeId = nodes[(index - 1 + nodes.length) % nodes.length].id;
       return;
     }
 
-    if (event.key === "Enter") {
+    if (event.key === 'Enter') {
       if (activeNodeId && graphState.addMenuPosition) {
         handleNodeCreation(activeNodeId);
       }
@@ -81,6 +82,16 @@
   onMount(() => {
     input.disabled = false;
     setTimeout(() => input.focus(), 50);
+
+    const rect = wrapper.getBoundingClientRect();
+    const deltaY = rect.bottom - window.innerHeight;
+    const deltaX = rect.right - window.innerWidth;
+    if (deltaY > 0) {
+      wrapper.style.marginTop = `-${deltaY + 30}px`;
+    }
+    if (deltaX > 0) {
+      wrapper.style.marginLeft = `-${deltaX + 30}px`;
+    }
   });
 </script>
 
@@ -89,7 +100,7 @@
   position.z={graphState.addMenuPosition?.[1]}
   transform={false}
 >
-  <div class="add-menu-wrapper">
+  <div class="add-menu-wrapper" bind:this={wrapper}>
     <div class="header">
       <input
         id="add-menu"
@@ -112,7 +123,7 @@
           tabindex="0"
           aria-selected={node.id === activeNodeId}
           onkeydown={(event) => {
-            if (event.key === "Enter") {
+            if (event.key === 'Enter') {
               handleNodeCreation(node.id);
             }
           }}
@@ -125,7 +136,7 @@
             activeNodeId = node.id;
           }}
         >
-          {node.id.split("/").at(-1)}
+          {node.id.split('/').at(-1)}
         </div>
       {/each}
     </div>
@@ -167,6 +178,8 @@
     min-height: none;
     width: 100%;
     color: var(--text-color);
+    max-height: 300px;
+    overflow-y: auto;
   }
 
   .result {

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

@@ -192,13 +192,13 @@ export class GraphState {
     }
     const height = 5
       + 10
-      * Object.keys(node.inputs).filter(
-        (p) =>
-          p !== 'seed'
-          && node?.inputs
-          && !('setting' in node?.inputs?.[p])
-          && node.inputs[p].hidden !== true
-      ).length;
+        * Object.keys(node.inputs).filter(
+          (p) =>
+            p !== 'seed'
+            && node?.inputs
+            && !('setting' in node?.inputs?.[p])
+            && node.inputs[p].hidden !== true
+        ).length;
     this.nodeHeightCache[nodeTypeId] = height;
     return height;
   }
@@ -338,4 +338,8 @@ export class GraphState {
       && node.position[1] < this.cameraBounds[3]
     );
   }
+
+  openNodePalette() {
+    this.addMenuPosition = [this.mousePosition[0], this.mousePosition[1]];
+  }
 }

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

@@ -1,18 +1,18 @@
 <script lang="ts">
   import type { Edge, NodeInstance } from "@nodarium/types";
-  import { createKeyMap } from "../../helpers/createKeyMap";
-  import AddMenu from "../components/AddMenu.svelte";
-  import Background from "../background/Background.svelte";
-  import BoxSelection from "../components/BoxSelection.svelte";
-  import EdgeEl from "../edges/Edge.svelte";
-  import NodeEl from "../node/Node.svelte";
-  import Camera from "../components/Camera.svelte";
   import { Canvas } from "@threlte/core";
-  import HelpView from "../components/HelpView.svelte";
-  import { getGraphManager, getGraphState } from "../graph-state.svelte";
   import { HTML } from "@threlte/extras";
-  import { maxZoom, minZoom } from "./constants";
+  import { createKeyMap } from "../../helpers/createKeyMap";
+  import Background from "../background/Background.svelte";
+  import AddMenu from "../components/AddMenu.svelte";
+  import BoxSelection from "../components/BoxSelection.svelte";
+  import Camera from "../components/Camera.svelte";
+  import HelpView from "../components/HelpView.svelte";
   import Debug from "../debug/Debug.svelte";
+  import EdgeEl from "../edges/Edge.svelte";
+  import { getGraphManager, getGraphState } from "../graph-state.svelte";
+  import NodeEl from "../node/Node.svelte";
+  import { maxZoom, minZoom } from "./constants";
   import { FileDropEventManager } from "./drop.events";
   import { MouseEventManager } from "./mouse.events";
 
@@ -97,15 +97,15 @@
 </script>
 
 <svelte:window
-  onmousemove={(ev) => mouseEvents.handleMouseMove(ev)}
-  onmouseup={(ev) => mouseEvents.handleMouseUp(ev)}
+  onmousemove={(ev) => mouseEvents.handleWindowMouseMove(ev)}
+  onmouseup={(ev) => mouseEvents.handleWindowMouseUp(ev)}
 />
 
 <div
   onwheel={(ev) => mouseEvents.handleMouseScroll(ev)}
   bind:this={graphState.wrapper}
   class="graph-wrapper"
-  style="height: 100%;"
+  style="height: 100%"
   class:is-panning={graphState.isPanning}
   class:is-hovering={graphState.hoveredNodeId !== -1}
   aria-label="Graph"
@@ -115,6 +115,7 @@
   bind:clientHeight={graphState.height}
   onkeydown={(ev) => keymap.handleKeyboardEvent(ev)}
   onmousedown={(ev) => mouseEvents.handleMouseDown(ev)}
+  oncontextmenu={(ev) => mouseEvents.handleContextMenu(ev)}
   {...fileDropEvents.getEventListenerProps()}
 >
   <input

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

@@ -1,7 +1,7 @@
 import { animate, lerp } from '$lib/helpers';
 import { type NodeInstance } from '@nodarium/types';
 import type { GraphManager } from '../graph-manager.svelte';
-import type { GraphState } from '../graph-state.svelte';
+import { type GraphState } from '../graph-state.svelte';
 import { snapToGrid as snapPointToGrid } from '../helpers';
 import { maxZoom, minZoom, zoomSpeed } from './constants';
 import { EdgeInteractionManager } from './edge.events';
@@ -16,7 +16,7 @@ export class MouseEventManager {
     this.edgeInteractionManager = new EdgeInteractionManager(graph, state);
   }
 
-  handleMouseUp(event: MouseEvent) {
+  handleWindowMouseUp(event: MouseEvent) {
     this.edgeInteractionManager.handleMouseUp();
     this.state.isPanning = false;
     if (!this.state.mouseDown) return;
@@ -151,7 +151,19 @@ export class MouseEventManager {
     this.state.addMenuPosition = null;
   }
 
+  handleContextMenu(event: MouseEvent) {
+    if (!this.state.addMenuPosition) {
+      event.preventDefault();
+      this.state.openNodePalette();
+    }
+  }
+
   handleMouseDown(event: MouseEvent) {
+    // Right click
+    if (event.button === 2) {
+      return;
+    }
+
     if (this.state.mouseDown) return;
     this.state.edgeEndPosition = null;
 
@@ -229,7 +241,7 @@ export class MouseEventManager {
     this.state.edgeEndPosition = null;
   }
 
-  handleMouseMove(event: MouseEvent) {
+  handleWindowMouseMove(event: MouseEvent) {
     let mx = event.clientX - this.state.rect.x;
     let my = event.clientY - this.state.rect.y;
 
@@ -245,7 +257,7 @@ export class MouseEventManager {
       for (const socket of this.state.possibleSockets) {
         const dist = Math.sqrt(
           (socket.position[0] - this.state.mousePosition[0]) ** 2
-          + (socket.position[1] - this.state.mousePosition[1]) ** 2
+            + (socket.position[1] - this.state.mousePosition[1]) ** 2
         );
         if (dist < smallestDist) {
           smallestDist = dist;
@@ -377,9 +389,9 @@ export class MouseEventManager {
     // Update camera position and zoom level
     this.state.cameraPosition[0] = this.state.mousePosition[0]
       - (this.state.mousePosition[0] - this.state.cameraPosition[0])
-      / zoomRatio;
+        / zoomRatio;
     this.state.cameraPosition[1] = this.state.mousePosition[1]
       - (this.state.mousePosition[1] - this.state.cameraPosition[1])
-      / zoomRatio, this.state.cameraPosition[2] = newZoom;
+        / zoomRatio, this.state.cameraPosition[2] = newZoom;
   }
 }

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

@@ -59,9 +59,7 @@ export function setupKeymaps(keymap: Keymap, graph: GraphManager, graphState: Gr
     key: 'A',
     shift: true,
     description: 'Add new Node',
-    callback: () => {
-      graphState.addMenuPosition = [graphState.mousePosition[0], graphState.mousePosition[1]];
-    }
+    callback: () => graphState.openNodePalette()
   });
 
   keymap.addShortcut({

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

@@ -64,6 +64,7 @@
   }
 
   export const update = function update(result: Int32Array) {
+    console.log({ result });
     perf.addPoint("split-result");
     const inputs = splitNestedArray(result);
     perf.endPoint();

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

@@ -16,48 +16,42 @@ import {
 import type { RuntimeNode } from './types';
 
 const log = createLogger('runtime-executor');
-log.mute();
+// log.mute(); // Keep logging enabled for debug info
 
 const remoteRegistry = new RemoteNodeRegistry('');
 
-function getValue(input: NodeInput, value?: unknown) {
+type WasmExecute = (outputPos: number, args: number[]) => number;
+
+function getValue(input: NodeInput, value?: unknown): number | number[] | Int32Array {
   if (value === undefined && 'value' in input) {
     value = input.value;
   }
 
-  if (input.type === 'float') {
-    return encodeFloat(value as number);
+  switch (input.type) {
+    case 'float':
+      return encodeFloat(value as number);
+
+    case 'select':
+      return (value as number) ?? 0;
+
+    case 'vec3': {
+      const arr = Array.isArray(value) ? value : [];
+      return [0, arr.length + 1, ...arr.map(v => encodeFloat(v)), 1, 1];
+    }
   }
 
   if (Array.isArray(value)) {
-    if (input.type === 'vec3') {
-      return [
-        0,
-        value.length + 1,
-        ...value.map((v) => encodeFloat(v)),
-        1,
-        1
-      ] as number[];
-    }
-    return [0, value.length + 1, ...value, 1, 1] as number[];
+    return [0, value.length + 1, ...value, 1, 1];
   }
 
-  if (typeof value === 'boolean') {
-    return value ? 1 : 0;
-  }
+  if (typeof value === 'boolean') return value ? 1 : 0;
+  if (typeof value === 'number') return value;
+  if (value instanceof Int32Array) return value;
 
-  if (typeof value === 'number') {
-    return value;
-  }
-
-  if (value instanceof Int32Array) {
-    return value;
-  }
-
-  throw new Error(`Unknown input type ${input.type}`);
+  throw new Error(`Unsupported input type: ${input.type}`);
 }
 
-function compareInt32(a: Int32Array, b: Int32Array) {
+function compareInt32(a: Int32Array, b: Int32Array): boolean {
   if (a.length !== b.length) return false;
   for (let i = 0; i < a.length; i++) {
     if (a[i] !== b[i]) return false;
@@ -72,68 +66,75 @@ export type Pointer = {
 };
 
 export class MemoryRuntimeExecutor implements RuntimeExecutor {
-  private nodes: Map<
-    string,
-    { definition: NodeDefinition; execute: (outputPos: number, args: number[]) => number }
-  > = new Map();
+  private nodes = new Map<string, { definition: NodeDefinition; execute: WasmExecute }>();
 
   private offset = 0;
   private isRunning = false;
-  private memory = new WebAssembly.Memory({
-    initial: 1024,
+
+  private readonly memory = new WebAssembly.Memory({
+    initial: 4096,
     maximum: 8192
   });
-  private memoryView = new Int32Array();
+
+  private memoryView!: Int32Array;
 
   results: Record<number, Pointer> = {};
   inputPtrs: Record<number, Pointer[]> = {};
   allPtrs: Pointer[] = [];
 
   seed = 42424242;
-
   perf?: PerformanceStore;
 
-  public getMemory() {
-    return new Int32Array(this.memory.buffer);
-  }
-
   constructor(
-    private registry: NodeRegistry,
+    private readonly registry: NodeRegistry,
     public cache?: SyncCache<Int32Array>
   ) {
     this.cache = undefined;
+    this.refreshView();
+    log.info('MemoryRuntimeExecutor initialized');
   }
 
+  private refreshView(): void {
+    this.memoryView = new Int32Array(this.memory.buffer);
+    log.info(`Memory view refreshed, length: ${this.memoryView.length}`);
+  }
+
+  public getMemory(): Int32Array {
+    return new Int32Array(this.memory.buffer);
+  }
+
+  private map = new Map<string, { definition: NodeDefinition; execute: WasmExecute }>();
   private async getNodeDefinitions(graph: Graph) {
     if (this.registry.status !== 'ready') {
       throw new Error('Node registry is not ready');
     }
 
-    await this.registry.load(graph.nodes.map((node) => node.type));
+    await this.registry.load(graph.nodes.map(n => n.type));
+    log.info(`Loaded ${graph.nodes.length} node types from registry`);
 
-    const typeMap = new Map<string, {
-      definition: NodeDefinition;
-      execute: (outputPos: number, args: number[]) => number;
-    }>();
-    for (const node of graph.nodes) {
-      if (!typeMap.has(node.type)) {
-        const type = this.registry.getNode(node.type);
-        const buffer = await remoteRegistry.fetchArrayBuffer('nodes/' + node.type + '.wasm');
-        const wrapper = createWasmWrapper(buffer, this.memory);
-        if (type) {
-          typeMap.set(node.type, {
-            definition: type,
-            execute: wrapper.execute
-          });
-        }
-      }
+    for (const { type } of graph.nodes) {
+      if (this.map.has(type)) continue;
+
+      const def = this.registry.getNode(type);
+      if (!def) continue;
+
+      log.info(`Fetching WASM for node type: ${type}`);
+      const buffer = await remoteRegistry.fetchArrayBuffer(`nodes/${type}.wasm`);
+      const wrapper = createWasmWrapper(buffer, this.memory);
+
+      this.map.set(type, {
+        definition: def,
+        execute: wrapper.execute
+      });
+      log.info(`Node type ${type} loaded and wrapped`);
     }
-    return typeMap;
+
+    return this.map;
   }
 
   private async addMetaData(graph: Graph) {
-    // First, lets check if all nodes have a definition
     this.nodes = await this.getNodeDefinitions(graph);
+    log.info(`Metadata added for ${this.nodes.size} nodes`);
 
     const graphNodes = graph.nodes.map(node => {
       const n = node as RuntimeNode;
@@ -146,225 +147,175 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
       return n;
     });
 
-    const outputNode = graphNodes.find((node) => node.type.endsWith('/output'));
-    if (!outputNode) {
-      // throw new Error('No output node found');
-      console.log('No output node found');
-    }
+    const outputNode = graphNodes.find(n => n.type.endsWith('/output') || n.type.endsWith('/debug'))
+      ?? graphNodes[0];
 
-    const nodeMap = new Map(
-      graphNodes.map((node) => [node.id, node])
-    );
+    const nodeMap = new Map(graphNodes.map(n => [n.id, n]));
 
-    // loop through all edges and assign the parent and child nodes to each node
-    for (const edge of graph.edges) {
-      const [parentId, _parentOutput, childId, childInput] = edge;
+    for (const [parentId, , childId, childInput] of graph.edges) {
       const parent = nodeMap.get(parentId);
       const child = nodeMap.get(childId);
-      if (parent && child) {
-        parent.state.children.push(child);
-        child.state.parents.push(parent);
-        child.state.inputNodes[childInput] = parent;
-      }
+      if (!parent || !child) continue;
+
+      parent.state.children.push(child);
+      child.state.parents.push(parent);
+      child.state.inputNodes[childInput] = parent;
     }
 
-    const nodes = [];
+    const ordered: RuntimeNode[] = [];
+    const stack = [outputNode];
 
-    // loop through all the nodes and assign each nodes its depth
-    const stack = [outputNode || graphNodes[0]];
     while (stack.length) {
-      const node = stack.pop();
-      if (!node) continue;
+      const node = stack.pop()!;
       for (const parent of node.state.parents) {
-        parent.state = parent.state || {};
         parent.state.depth = node.state.depth + 1;
         stack.push(parent);
       }
-      nodes.push(node);
+      ordered.push(node);
     }
 
-    return [outputNode, nodes] as const;
+    log.info(`Output node: ${outputNode.id}, total nodes ordered: ${ordered.length}`);
+    return [outputNode, ordered] as const;
   }
 
-  private writeToMemory(v: number | number[] | Int32Array, title?: string) {
-    let length = 1;
+  private writeToMemory(value: number | number[] | Int32Array, title?: string): Pointer {
+    const start = this.offset;
 
-    if (typeof v === 'number') {
-      this.memoryView[this.offset] = v;
-      console.log('MEM: writing number', v, ' to', this.offset);
-      length = 1;
+    if (typeof value === 'number') {
+      this.memoryView[this.offset++] = value;
     } else {
-      this.memoryView.set(v, this.offset);
-      length = v.length;
+      this.memoryView.set(value, this.offset);
+      this.offset += value.length;
     }
 
-    const start = this.offset;
-    const end = this.offset + length;
-
-    this.offset += length;
-
-    const ptr = {
-      start,
-      end,
-      _title: title
-    };
+    const ptr = { start, end: this.offset, _title: title };
     this.allPtrs.push(ptr);
+    log.info(`Memory written for ${title}: start=${ptr.start}, end=${ptr.end}`);
     return ptr;
   }
 
-  private printMemory() {
-    this.memoryView = new Int32Array(this.memory.buffer);
-    console.log('MEMORY', this.memoryView.slice(0, 10));
-  }
-
-  async execute(graph: Graph, settings: Record<string, unknown>) {
-    this.offset = 0;
-    this.inputPtrs = {};
-    this.seed = this.seed += 2;
-    this.results = {};
-    this.allPtrs = [];
-
-    if (this.isRunning) return undefined as unknown as Int32Array;
-    this.isRunning = true;
-
-    // Then we add some metadata to the graph
-    const [_outputNode, nodes] = await this.addMetaData(graph);
-
-    /*
-     * Here we sort the nodes into buckets, which we then execute one by one
-     * +-b2-+-b1-+---b0---+
-     * |    |    |        |
-     * | n3 | n2 | Output |
-     * | n6 | n4 | Level  |
-     * |    | n5 |        |
-     * |    |    |        |
-     * +----+----+--------+
-     */
-
-    // we execute the nodes from the bottom up
-    const sortedNodes = nodes.sort(
-      (a, b) => (b.state?.depth || 0) - (a.state?.depth || 0)
-    );
-
-    console.log({ settings });
-
-    this.printMemory();
-    const seedPtr = this.writeToMemory(this.seed, 'seed');
-
-    const settingPtrs = new Map<string, Pointer>(
-      Object.entries(settings).map((
-        [key, value]
-      ) => [key as string, this.writeToMemory(value as number, `setting.${key}`)])
-    );
-
-    for (const node of sortedNodes) {
-      const node_type = this.nodes.get(node.type)!;
-
-      console.log('---------------');
-      console.log('STARTING NODE EXECUTION', node_type.definition.id + '/' + node.id);
-      this.printMemory();
-
-      // console.log(node_type.definition.inputs);
-      const inputs = Object.entries(node_type.definition.inputs || {}).map(
-        ([key, input]) => {
-          // We should probably initially write this to memory
-          if (input.type === 'seed') {
-            return seedPtr;
-          }
-
-          const title = `${node.id}.${key}`;
-
-          // We should probably initially write this to memory
-          // If the input is linked to a setting, we use that value
-          // TODO: handle nodes which reference undefined settings
-          if (input.setting) {
-            return settingPtrs.get(input.setting)!;
-          }
-
-          // check if the input is connected to another node
-          const inputNode = node.state.inputNodes[key];
-          if (inputNode) {
-            if (this.results[inputNode.id] === undefined) {
-              throw new Error(
-                `Node ${node.type}/${node.id} is missing input from node ${inputNode.type}/${inputNode.id}`
-              );
-            }
-            return this.results[inputNode.id];
-          }
-
-          // If the value is stored in the node itself, we use that value
-          if (node.props?.[key] !== undefined) {
-            const value = getValue(input, node.props[key]);
-            console.log(`Writing prop for ${node.id} -> ${key} to memory`, node.props[key], value);
-            return this.writeToMemory(value, title);
-          }
-
-          return this.writeToMemory(getValue(input), title);
-        }
-      );
-
-      this.printMemory();
-
-      if (!node_type || !node.state || !node_type.execute) {
-        log.warn(`Node ${node.id} has no definition`);
-        continue;
-      }
-
-      this.inputPtrs[node.id] = inputs;
-      const args = inputs.map(s => [s.start, s.end]).flat();
-      console.log('ARGS', inputs);
-
-      this.printMemory();
-      try {
-        console.log('EXECUTING NODE, writing output of node to ->', this.offset);
-        const bytesWritten = node_type.execute(this.offset * 4, args.map(a => a * 4));
-        const view = new Int32Array(this.memory.buffer);
-
-        const input = view.slice(args[0], args[1]);
-        const output = view.slice(this.offset, this.offset + bytesWritten / 4);
-        console.log('RESULT', { args, input, output });
-
-        // Optimization
-        // If the input arg is the same length as the output arg
-        if (
-          args.length === 2 && args[1] - args[0] == bytesWritten / 4 && compareInt32(input, output)
-        ) {
-          console.log('INPUT === OUTPUT');
-          this.results[node.id] = {
-            start: args[0],
-            end: args[1],
-            _title: `${node.id} ->`
-          };
-          this.allPtrs.push(this.results[node.id]);
-        } else {
-          this.results[node.id] = {
-            start: this.offset,
-            end: this.offset + bytesWritten / 4,
-            _title: `${node.id} ->`
-          };
-          this.offset += bytesWritten / 4;
-          this.allPtrs.push(this.results[node.id]);
-        }
-        console.log('FINISHED EXECUTION', {
-          bytesWritten,
-          offset: this.offset
-        });
-      } catch (e) {
-        console.error(`Failed to execute node ${node.type}/${node.id}`, e);
-        this.isRunning = false;
-      }
+  async execute(graph: Graph, settings: Record<string, unknown>): Promise<Int32Array> {
+    if (this.isRunning) {
+      log.info('Executor is already running, skipping execution');
+      return undefined as unknown as Int32Array;
     }
 
-    // const mem = new Int32Array(this.memory.buffer);
-    // console.log('OUT', mem.slice(0, 10));
+    this.isRunning = true;
+    log.info('Execution started');
 
-    // return the result of the parent of the output node
-    // const res = this.results[outputNode.id];
+    try {
+      this.offset = 0;
+      this.results = {};
+      this.inputPtrs = {};
+      this.allPtrs = [];
+      this.seed += 2;
 
-    this.perf?.endPoint('runtime');
+      this.refreshView();
 
-    this.isRunning = false;
-    return undefined as unknown as Int32Array;
+      const [outputNode, nodes] = await this.addMetaData(graph);
+
+      const sortedNodes = [...nodes].sort(
+        (a, b) => (b.state.depth ?? 0) - (a.state.depth ?? 0)
+      );
+
+      const seedPtr = this.writeToMemory(this.seed, 'seed');
+
+      const settingPtrs = new Map<string, Pointer>();
+      for (const [key, value] of Object.entries(settings)) {
+        const ptr = this.writeToMemory(value as number, `setting.${key}`);
+        settingPtrs.set(key, ptr);
+      }
+
+      let lastNodePtr: Pointer | undefined = undefined;
+
+      for (const node of sortedNodes) {
+        const nodeType = this.nodes.get(node.type);
+        if (!nodeType) continue;
+
+        log.info(`Executing node: ${node.id} (type: ${node.type})`);
+
+        const inputs = Object.entries(nodeType.definition.inputs || {}).map(
+          ([key, input]) => {
+            if (input.type === 'seed') return seedPtr;
+
+            if (input.setting) {
+              const ptr = settingPtrs.get(input.setting);
+              if (!ptr) throw new Error(`Missing setting: ${input.setting}`);
+              return ptr;
+            }
+
+            const src = node.state.inputNodes[key];
+            if (src) {
+              const res = this.results[src.id];
+              if (!res) {
+                throw new Error(`Missing input from ${src.type}/${src.id}`);
+              }
+              return res;
+            }
+
+            if (node.props?.[key] !== undefined) {
+              return this.writeToMemory(
+                getValue(input, node.props[key]),
+                `${node.id}.${key}`
+              );
+            }
+
+            return this.writeToMemory(getValue(input), `${node.id}.${key}`);
+          }
+        );
+
+        this.inputPtrs[node.id] = inputs;
+        const args = inputs.flatMap(p => [p.start * 4, p.end * 4]);
+
+        log.info(`Executing node ${node.type}/${node.id}`);
+        const bytesWritten = nodeType.execute(this.offset * 4, args);
+        if (bytesWritten === -1) {
+          throw new Error(`Failed to execute node`);
+        }
+        this.refreshView();
+
+        const outLen = bytesWritten >> 2;
+        const outputStart = this.offset;
+
+        if (
+          args.length === 2
+          && inputs[0].end - inputs[0].start === outLen
+          && compareInt32(
+            this.memoryView.slice(inputs[0].start, inputs[0].end),
+            this.memoryView.slice(outputStart, outputStart + outLen)
+          )
+        ) {
+          this.results[node.id] = inputs[0];
+          log.info(`Node ${node.id} result reused input memory`);
+        } else {
+          this.results[node.id] = {
+            start: outputStart,
+            end: outputStart + outLen,
+            _title: `${node.id} ->`
+          };
+          this.offset += outLen;
+          lastNodePtr = this.results[node.id];
+          log.info(
+            `Node ${node.id} wrote result to memory: start=${outputStart}, end=${outputStart + outLen
+            }`
+          );
+        }
+      }
+
+      const res = this.results[outputNode.id] ?? lastNodePtr;
+      if (!res) throw new Error('Output node produced no result');
+
+      log.info(`Execution finished, output pointer: start=${res.start}, end=${res.end}`);
+      this.refreshView();
+      return this.memoryView.slice(res.start, res.end);
+    } catch (e) {
+      log.info('Execution error:', e);
+      console.error(e);
+    } finally {
+      this.isRunning = false;
+      this.perf?.endPoint('runtime');
+      log.info('Executor state reset');
+    }
   }
 
   getPerformanceData() {

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

@@ -1,147 +1,148 @@
 <script lang="ts" module>
-  let result:
-    | { stdev: number; avg: number; duration: number; samples: number[] }
-    | undefined = $state();
+	let result:
+		| { stdev: number; avg: number; duration: number; samples: number[] }
+		| undefined = $state();
 </script>
 
 <script lang="ts">
-  import { humanizeDuration } from "$lib/helpers";
-  import { localState } from "$lib/helpers/localState.svelte";
-  import Monitor from "$lib/performance/Monitor.svelte";
-  import { Number } from "@nodarium/ui";
-  import { writable } from "svelte/store";
+	import { humanizeDuration } from '$lib/helpers';
+	import { localState } from '$lib/helpers/localState.svelte';
+	import Monitor from '$lib/performance/Monitor.svelte';
+	import { Number } from '@nodarium/ui';
+	import { writable } from 'svelte/store';
 
-  function calculateStandardDeviation(array: number[]) {
-    const n = array.length;
-    const mean = array.reduce((a, b) => a + b) / n;
-    return Math.sqrt(
-      array.map((x) => Math.pow(x - mean, 2)).reduce((a, b) => a + b) / n,
-    );
-  }
-  type Props = {
-    run: () => Promise<any>;
-  };
+	function calculateStandardDeviation(array: number[]) {
+		const n = array.length;
+		const mean = array.reduce((a, b) => a + b) / n;
+		return Math.sqrt(
+			array.map((x) => Math.pow(x - mean, 2)).reduce((a, b) => a + b) / n
+		);
+	}
+	type Props = {
+		run: () => Promise<any>;
+	};
 
-  const { run }: Props = $props();
+	const { run }: Props = $props();
 
-  let isRunning = $state(false);
-  let amount = localState<number>("nodes.benchmark.samples", 500);
-  let samples = $state(0);
-  let warmUp = writable(0);
-  let warmUpAmount = 10;
-  let status = "";
+	let isRunning = $state(false);
+	let amount = localState<number>('nodes.benchmark.samples', 500);
+	let samples = $state(0);
+	let warmUp = writable(0);
+	let warmUpAmount = 10;
+	let status = '';
 
-  const copyContent = async (text?: string | number) => {
-    if (!text) return;
-    if (typeof text !== "string") {
-      text = (Math.floor(text * 100) / 100).toString();
-    }
-    try {
-      await navigator.clipboard.writeText(text);
-    } catch (err) {
-      console.error("Failed to copy: ", err);
-    }
-  };
+	const copyContent = async (text?: string | number) => {
+		if (!text) return;
+		if (typeof text !== 'string') {
+			text = (Math.floor(text * 100) / 100).toString();
+		}
+		try {
+			await navigator.clipboard.writeText(text);
+		} catch (err) {
+			console.error('Failed to copy: ', err);
+		}
+	};
 
-  async function benchmark() {
-    if (isRunning) return;
-    isRunning = true;
-    result = undefined;
-    samples = 0;
-    $warmUp = 0;
+	async function benchmark() {
+		if (isRunning) return;
+		isRunning = true;
+		result = undefined;
+		samples = 0;
+		$warmUp = 0;
 
-    await new Promise((r) => setTimeout(r, 50));
+		await new Promise((r) => setTimeout(r, 50));
 
-    // warm up
-    for (let i = 0; i < warmUpAmount; i++) {
-      await run();
-      $warmUp = i + 1;
-    }
+		// warm up
+		for (let i = 0; i < warmUpAmount; i++) {
+			await run();
+			$warmUp = i + 1;
+		}
 
-    let a = performance.now();
-    let results = [];
+		let a = performance.now();
+		let results = [];
 
-    // perform run
-    for (let i = 0; i < amount.value; i++) {
-      const a = performance.now();
-      await run();
-      samples = i;
-      const b = performance.now();
-      await new Promise((r) => setTimeout(r, 20));
-      results.push(b - a);
-    }
-    result = {
-      stdev: calculateStandardDeviation(results),
-      samples: results,
-      duration: performance.now() - a,
-      avg: results.reduce((a, b) => a + b) / results.length,
-    };
-  }
+		// perform run
+		for (let i = 0; i < amount.value; i++) {
+			const a = performance.now();
+			await run();
+			samples = i;
+			const b = performance.now();
+			await new Promise((r) => setTimeout(r, 20));
+			results.push(b - a);
+		}
+		result = {
+			stdev: calculateStandardDeviation(results),
+			samples: results,
+			duration: performance.now() - a,
+			avg: results.reduce((a, b) => a + b) / results.length
+		};
+	}
 </script>
 
 {status}
 
 <div class="wrapper" class:running={isRunning}>
-  {#if result}
-    <h3>Finished ({humanizeDuration(result.duration)})</h3>
-    <div class="monitor-wrapper">
-      <Monitor points={result.samples} />
-    </div>
-    <label for="bench-avg">Average </label>
-    <button
-      id="bench-avg"
-      onkeydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
-      onclick={() => copyContent(result?.avg)}
-      >{Math.floor(result.avg * 100) / 100}</button
-    >
-    <i
-      role="button"
-      tabindex="0"
-      onkeydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
-      onclick={() => copyContent(result?.avg)}>(click to copy)</i
-    >
-    <label for="bench-stdev">Standard Deviation σ</label>
-    <button id="bench-stdev" onclick={() => copyContent(result?.stdev)}
-      >{Math.floor(result.stdev * 100) / 100}</button
-    >
-    <i
-      role="button"
-      tabindex="0"
-      onkeydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
-      onclick={() => copyContent(result?.stdev + "")}>(click to copy)</i
-    >
-    <div>
-      <button onclick={() => (isRunning = false)}>reset</button>
-    </div>
-  {:else if isRunning}
-    <p>WarmUp ({$warmUp}/{warmUpAmount})</p>
-    <progress value={$warmUp} max={warmUpAmount}
-      >{Math.floor(($warmUp / warmUpAmount) * 100)}%</progress
-    >
-    <p>Progress ({samples}/{amount.value})</p>
-    <progress value={samples} max={amount.value}
-      >{Math.floor((samples / amount.value) * 100)}%</progress
-    >
-  {:else}
-    <label for="bench-samples">Samples</label>
-    <Number id="bench-sample" bind:value={amount.value} max={1000} />
-    <button onclick={benchmark} disabled={isRunning}> start </button>
-  {/if}
+	{#if result}
+		<h3>Finished ({humanizeDuration(result.duration)})</h3>
+		<div class="monitor-wrapper">
+			<Monitor points={result.samples} />
+		</div>
+		<label for="bench-avg">Average </label>
+		<button
+			id="bench-avg"
+			onkeydown={(ev) => ev.key === 'Enter' && copyContent(result?.avg)}
+			onclick={() => copyContent(result?.avg)}
+		>
+			{Math.floor(result.avg * 100) / 100}
+		</button>
+		<i
+			role="button"
+			tabindex="0"
+			onkeydown={(ev) => ev.key === 'Enter' && copyContent(result?.avg)}
+			onclick={() => copyContent(result?.avg)}
+		>(click to copy)</i>
+		<label for="bench-stdev">Standard Deviation σ</label>
+		<button id="bench-stdev" onclick={() => copyContent(result?.stdev)}>
+			{Math.floor(result.stdev * 100) / 100}
+		</button>
+		<i
+			role="button"
+			tabindex="0"
+			onkeydown={(ev) => ev.key === 'Enter' && copyContent(result?.avg)}
+			onclick={() => copyContent(result?.stdev + '')}
+		>(click to copy)</i>
+		<div>
+			<button onclick={() => (isRunning = false)}>reset</button>
+		</div>
+	{:else if isRunning}
+		<p>WarmUp ({$warmUp}/{warmUpAmount})</p>
+		<progress value={$warmUp} max={warmUpAmount}>
+			{Math.floor(($warmUp / warmUpAmount) * 100)}%
+		</progress>
+		<p>Progress ({samples}/{amount.value})</p>
+		<progress value={samples} max={amount.value}>
+			{Math.floor((samples / amount.value) * 100)}%
+		</progress>
+	{:else}
+		<label for="bench-samples">Samples</label>
+		<Number id="bench-sample" bind:value={amount.value} max={1000} />
+		<button onclick={benchmark} disabled={isRunning}>start</button>
+	{/if}
 </div>
 
 <style>
-  .wrapper {
-    padding: 1em;
-    display: flex;
-    flex-direction: column;
-    gap: 1em;
-  }
-  .monitor-wrapper {
-    border: solid thin var(--outline);
-    border-bottom: none;
-  }
-  i {
-    opacity: 0.5;
-    font-size: 0.8em;
-  }
+	.wrapper {
+		padding: 1em;
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+	}
+	.monitor-wrapper {
+		border: solid thin var(--outline);
+		border-bottom: none;
+	}
+	i {
+		opacity: 0.5;
+		font-size: 0.8em;
+	}
 </style>

app/src/routes/dev/+page.svelte

@@ -16,22 +16,6 @@
   } from "$lib/settings/app-settings.svelte";
 
   const nodeRegistry = new RemoteNodeRegistry("");
-  nodeRegistry.overwriteNode("max/plantarium/output", {
-    id: "max/plantarium/output",
-    meta: {
-      title: "Debug View",
-      description: "",
-    },
-    inputs: {
-      out: {
-        type: "*",
-      },
-    },
-    execute(outputPos: number, args: number[]) {
-      console.log({ outputPos, args });
-      return 0;
-    },
-  });
 
   const runtimeExecutor = new MemoryRuntimeExecutor(nodeRegistry);
 
@@ -162,12 +146,13 @@
             <tr class="h-[40px] odd:bg-[var(--layer-1)]">
               <td class="px-4 border-b border-[var(--outline)] w-8">{index}</td>
               <td
-                class="w-[50px] border-b border-[var(--outline)]
+                class="border-b border-[var(--outline)] overflow-hidden text-ellipsis pl-2
                         {ptr?._title?.includes('->')
                   ? 'bg-red-500'
                   : 'bg-blue-500'}"
+                style="width: 100px; min-width: 100px; max-width: 100px;"
               >
-                <span>{ptr?._title}</span>
+                {ptr?._title}
               </td>
               <td
                 class="px-4 border-b border-[var(--outline)] cursor-pointer text-blue-600 hover:text-blue-800"

nodes/max/plantarium/debug/.gitignore

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

nodes/max/plantarium/debug/Cargo.toml

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

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

@@ -0,0 +1,22 @@
+{
+  "id": "max/plantarium/debug",
+  "outputs": [],
+  "inputs": {
+    "input": {
+      "type": "float",
+      "accepts": [
+        "*"
+      ],
+      "external": true
+    },
+    "type": {
+      "type": "select",
+      "options": [
+        "float",
+        "vec3",
+        "geometry"
+      ],
+      "internal": true
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+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_vec3;
+use nodarium_utils::read_i32;
+use nodarium_utils::read_i32_slice;
+
+nodarium_definition_file!("src/input.json");
+
+#[nodarium_execute]
+pub fn execute(input: (i32, i32), input_type: (i32, i32)) -> Vec<i32> {
+    let inp = read_i32_slice(input);
+    let t = read_i32(input_type.0);
+    if t == 0 {
+        let f = evaluate_float(inp.as_slice());
+        return vec![encode_float(f)];
+    }
+    if t == 1 {
+        let f = evaluate_vec3(inp.as_slice());
+        return vec![encode_float(f[0]), encode_float(f[1]), encode_float(f[2])];
+    }
+
+    return inp;
+}

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

@@ -1,11 +1,13 @@
 use nodarium_macros::nodarium_definition_file;
 use nodarium_macros::nodarium_execute;
+use nodarium_utils::log;
 use nodarium_utils::{concat_arg_vecs, read_i32_slice};
 
 nodarium_definition_file!("src/input.json");
 
 #[nodarium_execute]
 pub fn execute(op_type: (i32, i32), a: (i32, i32), b: (i32, i32)) -> Vec<i32> {
+    log!("math.op {:?}", op_type);
     let op = read_i32_slice(op_type);
     let a_val = read_i32_slice(a);
     let b_val = read_i32_slice(b);

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

@@ -5,7 +5,7 @@
     "input": {
       "type": "path",
       "accepts": [
-        "geometry"
+        "*"
       ],
       "external": true
     },

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

@@ -1,9 +1,5 @@
 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_vec3;
-use nodarium_utils::log;
 use nodarium_utils::read_i32_slice;
 
 nodarium_definition_file!("src/input.json");
@@ -11,17 +7,5 @@ nodarium_definition_file!("src/input.json");
 #[nodarium_execute]
 pub fn execute(input: (i32, i32), _res: (i32, i32)) -> Vec<i32> {
     let inp = read_i32_slice(input);
-    let length = inp.len();
-    if length == 1 {
-        let f = evaluate_float(inp.as_slice());
-        log!("out.float f={:?}", f);
-        return vec![encode_float(f)];
-    }
-    if length == 3 {
-        let f = evaluate_vec3(inp.as_slice());
-        log!("out.vec3 x={:?} y={:?} z={:?}", f[0], f[1], f[2]);
-        return vec![encode_float(f[0]), encode_float(f[1]), encode_float(f[2])];
-    }
-
     return inp;
 }

packages/macros/src/lib.rs

@@ -99,22 +99,20 @@ pub fn nodarium_execute(_attr: TokenStream, item: TokenStream) -> TokenStream {
         #[no_mangle]
         #fn_vis extern "C" fn execute(output_pos: i32, #( #arg_names: i32 ),*) -> i32 {
 
-            // log!("before_fn");
+            nodarium_utils::log!("before_fn");
             let result = #inner_fn_name(
                 #( #tuple_args ),*
             );
-            // log!("after_fn");
+            nodarium_utils::log!("after_fn");
 
             let len_bytes = result.len() * 4;
             unsafe {
                 let src = result.as_ptr() as *const u8;
                 let dst = output_pos as *mut u8;
-                // log!("writing output_pos={:?} src={:?} len_bytes={:?}", output_pos, src, len_bytes);
+                // nodarium_utils::log!("writing output_pos={:?} src={:?} len_bytes={:?}", output_pos, src, len_bytes);
                 dst.copy_from_nonoverlapping(src, len_bytes);
             }
 
-            core::mem::forget(result);
-
             len_bytes as i32
         }
     };

packages/registry/package.json

@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@nodarium/types": "link:../types",
-    "@nodarium/utils": "link:../utils",
+    "@nodarium/types": "workspace:",
+    "@nodarium/utils": "workspace:",
     "idb": "^8.0.3"
   }
 }

packages/types/src/inputs.ts

@@ -9,6 +9,7 @@ const DefaultOptionsSchema = z.object({
   accepts: z
     .array(
       z.union([
+        z.literal('*'),
         z.literal('float'),
         z.literal('integer'),
         z.literal('boolean'),

packages/ui/package.json

@@ -30,7 +30,7 @@
     "svelte": "^4.0.0"
   },
   "devDependencies": {
-    "@nodarium/types": "link:../types",
+    "@nodarium/types": "workspace:",
     "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/kit": "^2.50.0",
     "@sveltejs/package": "^2.5.7",

packages/ui/src/lib/Input.svelte

@@ -1,10 +1,7 @@
 <script lang="ts">
 	import type { NodeInput } from '@nodarium/types';
 
-	import Checkbox from './inputs/Checkbox.svelte';
-	import Number from './inputs/Number.svelte';
-	import Select from './inputs/Select.svelte';
-	import Vec3 from './inputs/Vec3.svelte';
+	import { Checkbox, Number, Select, Vec3 } from './index.js';
 
 	interface Props {
 		input: NodeInput;
@@ -16,7 +13,7 @@
 </script>
 
 {#if input.type === 'float'}
-	<Number bind:value min={input?.min} max={input?.max} step={0.01} />
+	<Number bind:value min={input?.min} max={input?.max} step={input?.step} />
 {:else if input.type === 'integer'}
 	<Number bind:value min={input?.min} max={input?.max} />
 {:else if input.type === 'boolean'}

packages/ui/src/lib/index.ts

@@ -1,8 +1,7 @@
 export { default as Input } from './Input.svelte';
 export { default as Checkbox } from './inputs/Checkbox.svelte';
-export { default as Float } from './inputs/Float.svelte';
+export { default as Float, default as Number } from './inputs/Float.svelte';
 export { default as Integer } from './inputs/Integer.svelte';
-export { default as Number } from './inputs/Number.svelte';
 export { default as Select } from './inputs/Select.svelte';
 export { default as Vec3 } from './inputs/Vec3.svelte';
 

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

@@ -9,7 +9,7 @@
 
 	let {
 		value = $bindable(0.5),
-		step = 0.01,
+		step,
 		min = $bindable(0),
 		max = $bindable(1),
 		id
@@ -22,8 +22,11 @@
 		max = value;
 	}
 
+	// svelte-ignore state_referenced_locally only use initial values
+	const precision = ((step || value).toString().split('.')[1] || '').length;
+
 	function strip(input: number) {
-		return +parseFloat(input + '').toPrecision(2);
+		return +parseFloat(input + '').toFixed(precision);
 	}
 
 	let inputEl: HTMLInputElement | undefined = $state();
@@ -94,14 +97,22 @@
 		} else {
 			value = Math.max(Math.min(min + (max - min) * vx, max), min);
 		}
-		(ev.target as HTMLElement)?.blur();
+
+		value = strip(value);
+
+		// With ctrl + outside of input ev.target becomes HTMLDocument
+		if (ev.target instanceof HTMLElement) {
+			ev.target?.blur();
+		}
 	}
+
 	$effect(() => {
-		if ((value || 0).toString().length > 5) {
-			value = strip(value || 0);
+		if (value.toString().length > 5) {
+			value = strip(value);
 		}
 		value !== undefined && handleChange();
 	});
+
 	let width = $derived(
 		Number.isFinite(value) ? Math.max((value?.toString().length ?? 1) * 8, 50) + 'px' : '20px'
 	);
@@ -137,12 +148,12 @@
 		border-radius: var(--border-radius, 2px);
 	}
 
-	input[type='number']::-webkit-inner-spin-button,
-	input[type='number']::-webkit-outer-spin-button {
+	input[type="number"]::-webkit-inner-spin-button,
+	input[type="number"]::-webkit-outer-spin-button {
 		-webkit-appearance: none;
 	}
 
-	input[type='number'] {
+	input[type="number"] {
 		box-sizing: border-box;
 		-webkit-appearance: textfield;
 		-moz-appearance: textfield;

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

@@ -1,210 +1,215 @@
+<!--
+  @component
+  @deprecated use Float.svelte
+-->
+
 <script lang="ts">
-  interface Props {
-    value?: number;
-    step?: number;
-    min?: number | undefined;
-    max?: number | undefined;
-    id?: string;
-    change?: (arg: number) => void;
-  }
+	interface Props {
+		value?: number;
+		step?: number;
+		min?: number | undefined;
+		max?: number | undefined;
+		id?: string;
+		change?: (arg: number) => void;
+	}
 
-  let {
-    value = $bindable(0),
-    step = 1,
-    min = $bindable(0),
-    max = $bindable(1),
-    id,
-    change
-  }: Props = $props();
+	let {
+		value = $bindable(0),
+		step = 1,
+		min = $bindable(0),
+		max = $bindable(1),
+		id,
+		change
+	}: Props = $props();
 
-  if (min > max) {
-    [min, max] = [max, min];
-  }
-  if (value > max) {
-    max = value;
-  }
+	if (min > max) {
+		[min, max] = [max, min];
+	}
+	if (value > max) {
+		max = value;
+	}
 
-  function strip(input: number) {
-    return +parseFloat(input + '').toPrecision(2);
-  }
+	function strip(input: number) {
+		return +parseFloat(input + '').toPrecision(2);
+	}
 
-  let inputEl = $state() as HTMLInputElement;
-  let wrapper = $state() as HTMLDivElement;
+	let inputEl = $state() as HTMLInputElement;
+	let wrapper = $state() as HTMLDivElement;
 
-  let prev = -1;
-  function update() {
-    if (prev === value) return;
-    prev = value;
-    change?.(value);
-  }
+	let prev = -1;
+	function update() {
+		if (prev === value) return;
+		prev = value;
+		change?.(value);
+	}
 
-  function handleChange(change: number) {
-    value = Math.max(min ?? -Infinity, Math.min(+value + change, max ?? Infinity));
-  }
+	function handleChange(change: number) {
+		value = Math.max(min ?? -Infinity, Math.min(+value + change, max ?? Infinity));
+	}
 
-  let isMouseDown = $state(false);
-  let downX = 0;
-  let downV = 0;
-  let rect: DOMRect;
+	let isMouseDown = $state(false);
+	let downX = 0;
+	let downV = 0;
+	let rect: DOMRect;
 
-  function handleMouseDown(ev: MouseEvent) {
-    ev.preventDefault();
+	function handleMouseDown(ev: MouseEvent) {
+		ev.preventDefault();
 
-    downV = value;
-    downX = ev.clientX;
-    rect = wrapper.getBoundingClientRect();
+		downV = value;
+		downX = ev.clientX;
+		rect = wrapper.getBoundingClientRect();
 
-    window.removeEventListener('mousemove', handleMouseMove);
-    window.addEventListener('mousemove', handleMouseMove);
-    window.addEventListener('mouseup', handleMouseUp);
-    document.body.style.cursor = 'ew-resize';
-  }
+		window.removeEventListener('mousemove', handleMouseMove);
+		window.addEventListener('mousemove', handleMouseMove);
+		window.addEventListener('mouseup', handleMouseUp);
+		document.body.style.cursor = 'ew-resize';
+	}
 
-  function handleMouseUp() {
-    if (downV === value) {
-      inputEl.focus();
-    } else {
-      inputEl.blur();
-    }
+	function handleMouseUp() {
+		if (downV === value) {
+			inputEl.focus();
+		} else {
+			inputEl.blur();
+		}
 
-    document.body.style.cursor = 'unset';
-    window.removeEventListener('mouseup', handleMouseUp);
-    window.removeEventListener('mousemove', handleMouseMove);
-  }
+		document.body.style.cursor = 'unset';
+		window.removeEventListener('mouseup', handleMouseUp);
+		window.removeEventListener('mousemove', handleMouseMove);
+	}
 
-  function handleKeyDown(ev: KeyboardEvent) {
-    if (ev.key === 'Escape' || ev.key === 'Enter') {
-      handleMouseUp();
-      inputEl?.blur();
-    }
-  }
+	function handleKeyDown(ev: KeyboardEvent) {
+		if (ev.key === 'Escape' || ev.key === 'Enter') {
+			handleMouseUp();
+			inputEl?.blur();
+		}
+	}
 
-  function handleMouseMove(ev: MouseEvent) {
-    if (!ev.ctrlKey && typeof min === 'number' && typeof max === 'number') {
-      const vx = (ev.clientX - rect.left) / rect.width;
-      value = Math.max(Math.min(Math.round(min + (max - min) * vx), max), min);
-    } else {
-      const vx = ev.clientX - downX;
-      value = downV + Math.round(vx / 10);
-    }
-  }
+	function handleMouseMove(ev: MouseEvent) {
+		if (!ev.ctrlKey && typeof min === 'number' && typeof max === 'number') {
+			const vx = (ev.clientX - rect.left) / rect.width;
+			value = Math.max(Math.min(Math.round(min + (max - min) * vx), max), min);
+		} else {
+			const vx = ev.clientX - downX;
+			value = downV + Math.round(vx / 10);
+		}
+	}
 
-  $effect(() => {
-    if ((value || 0).toString().length > 5) {
-      value = strip(value || 0);
-    }
-    value !== undefined && update();
-  });
+	$effect(() => {
+		if ((value || 0).toString().length > 5) {
+			value = strip(value || 0);
+		}
+		value !== undefined && update();
+	});
 
-  let width = $derived(
-    Number.isFinite(value) ? Math.max((value?.toString().length ?? 1) * 8, 30) + 'px' : '20px'
-  );
+	let width = $derived(
+		Number.isFinite(value) ? Math.max((value?.toString().length ?? 1) * 8, 30) + 'px' : '20px'
+	);
 </script>
 
 <div
-  class="component-wrapper"
-  bind:this={wrapper}
-  class:is-down={isMouseDown}
-  role="slider"
-  tabindex="0"
-  aria-valuenow={value}
-  onkeydown={handleKeyDown}
-  onmousedown={handleMouseDown}
-  onmouseup={handleMouseUp}
+	class="component-wrapper"
+	bind:this={wrapper}
+	class:is-down={isMouseDown}
+	role="slider"
+	tabindex="0"
+	aria-valuenow={value}
+	onkeydown={handleKeyDown}
+	onmousedown={handleMouseDown}
+	onmouseup={handleMouseUp}
 >
-  <button onclick={() => handleChange(-step)}>-</button>
-  <input
-    bind:value
-    bind:this={inputEl}
-    {id}
-    {step}
-    {max}
-    {min}
-    type="number"
-    style={`width:${width};`}
-  />
+	<button onclick={() => handleChange(-step)}>-</button>
+	<input
+		bind:value
+		bind:this={inputEl}
+		{id}
+		{step}
+		{max}
+		{min}
+		type="number"
+		style={`width:${width};`}
+	/>
 
-  <button onclick={() => handleChange(+step)}>+</button>
-  {#if typeof min !== 'undefined' && typeof max !== 'undefined'}
-    <span
-      class="overlay"
-      style={`width: ${Math.min((value - min) / (max - min), 1) * 100}%`}
-    ></span>
-  {/if}
+	<button onclick={() => handleChange(+step)}>+</button>
+	{#if typeof min !== 'undefined' && typeof max !== 'undefined'}
+		<span
+			class="overlay"
+			style={`width: ${Math.min((value - min) / (max - min), 1) * 100}%`}
+		></span>
+	{/if}
 </div>
 
 <style>
-  .component-wrapper {
-    position: relative;
-    display: flex;
-    background-color: var(--layer-2, #4b4b4b);
-    border-radius: 2px;
-    user-select: none;
-    transition: box-shadow 0.3s ease;
-    outline: solid 1px var(--outline);
-    overflow: hidden;
-    border-radius: var(--border-radius, 2px);
-  }
+	.component-wrapper {
+		position: relative;
+		display: flex;
+		background-color: var(--layer-2, #4b4b4b);
+		border-radius: 2px;
+		user-select: none;
+		transition: box-shadow 0.3s ease;
+		outline: solid 1px var(--outline);
+		overflow: hidden;
+		border-radius: var(--border-radius, 2px);
+	}
 
-  input[type="number"]::-webkit-inner-spin-button,
-  input[type="number"]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-  }
+	input[type="number"]::-webkit-inner-spin-button,
+	input[type="number"]::-webkit-outer-spin-button {
+		-webkit-appearance: none;
+	}
 
-  input[type="number"] {
-    -webkit-appearance: textfield;
-    -moz-appearance: textfield;
-    appearance: textfield;
-    cursor: pointer;
-    font-family: var(--font-family);
-    font-variant-numeric: tabular-nums;
-    color: var(--text-color);
-    background-color: transparent;
-    padding: var(--padding, 6px);
-    font-size: 1em;
-    padding-inline: 10px;
-    text-align: center;
-    border: none;
-    border-style: none;
-    flex: 1;
-    width: 72%;
-  }
+	input[type="number"] {
+		-webkit-appearance: textfield;
+		-moz-appearance: textfield;
+		appearance: textfield;
+		cursor: pointer;
+		font-family: var(--font-family);
+		font-variant-numeric: tabular-nums;
+		color: var(--text-color);
+		background-color: transparent;
+		padding: var(--padding, 6px);
+		font-size: 1em;
+		padding-inline: 10px;
+		text-align: center;
+		border: none;
+		border-style: none;
+		flex: 1;
+		width: 72%;
+	}
 
-  .is-down > input {
-    cursor: ew-resize !important;
-  }
+	.is-down > input {
+		cursor: ew-resize !important;
+	}
 
-  .overlay {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    height: 100%;
-    background-color: var(--layer-3);
-    opacity: 0.3;
-    pointer-events: none;
-  }
+	.overlay {
+		position: absolute;
+		top: 0px;
+		left: 0px;
+		height: 100%;
+		background-color: var(--layer-3);
+		opacity: 0.3;
+		pointer-events: none;
+	}
 
-  .is-down > .overlay {
-    transition: none !important;
-  }
+	.is-down > .overlay {
+		transition: none !important;
+	}
 
-  button {
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-    line-height: 0px;
-    margin: 0;
-    color: var(--text-color);
-    margin-inline: 6px;
-  }
+	button {
+		background-color: transparent;
+		border: none;
+		cursor: pointer;
+		line-height: 0px;
+		margin: 0;
+		color: var(--text-color);
+		margin-inline: 6px;
+	}
 
-  div input[type="number"] {
-    color: var(--text-color);
-    background-color: transparent;
-    padding: var(--padding, 6px);
-    padding-inline: 0px;
-    text-align: center;
-    border: none;
-    border-style: none;
-  }
+	div input[type="number"] {
+		color: var(--text-color);
+		background-color: transparent;
+		padding: var(--padding, 6px);
+		padding-inline: 0px;
+		text-align: center;
+		border: none;
+		border-style: none;
+	}
 </style>

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

@@ -1,177 +0,0 @@
-<script lang="ts">
-	interface Props {
-		value?: number;
-		step?: number;
-		min?: number;
-		max?: number;
-		id?: string;
-	}
-
-	let {
-		value = $bindable(1),
-		step = 1,
-		min = $bindable(0),
-		max = $bindable(1),
-		id: _id
-	}: Props = $props();
-	const uid = $props.id();
-	const id = $derived(_id || uid);
-
-	if (min > max) {
-		[min, max] = [max, min];
-	}
-	if (value > max) {
-		max = value;
-	}
-
-	function strip(input: number) {
-		return +parseFloat(input + '').toPrecision(2);
-	}
-
-	let inputEl = $state() as HTMLInputElement;
-
-	let prev = -1;
-	function update() {
-		if (prev === value) return;
-		if (value.toString().length > 5) {
-			value = strip(value);
-		}
-		prev = value;
-	}
-
-	function handleChange(change: number) {
-		value = Math.max(min ?? -Infinity, Math.min(+value + change, max ?? Infinity));
-	}
-
-	function handleKeyDown(ev: KeyboardEvent) {
-		if (ev.key === 'Escape' || ev.key === 'Enter') {
-			inputEl?.blur();
-		}
-	}
-
-	$effect(() => {
-		update();
-	});
-
-	let ratio = $derived(((value - min) / (max - min)) * 100);
-</script>
-
-<div>
-	<div class="component-wrapper">
-		<button onclick={() => handleChange(-step)}>-</button>
-		<input
-			bind:value
-			bind:this={inputEl}
-			{id}
-			{step}
-			{max}
-			{min}
-			type="number"
-			onkeydown={handleKeyDown}
-		/>
-		<button onclick={() => handleChange(+step)}>+</button>
-	</div>
-	<div class="slider">
-		<input
-			type="range"
-			bind:value
-			{min}
-			{max}
-			{step}
-			style={`background: linear-gradient(90deg, var(--text-color) ${ratio}%, var(--layer-2, #4b4b4b) ${ratio}%)`}
-		/>
-	</div>
-</div>
-
-<style>
-	:root {
-		--slider-height: 4px;
-	}
-
-	.component-wrapper {
-		display: flex;
-		background-color: var(--layer-2, #4b4b4b);
-		user-select: none;
-		transition: box-shadow 0.3s ease;
-		border: solid 1px var(--outline);
-		overflow: hidden;
-		border-radius: 0 var(--border-radius, 2px); /* only top */
-	}
-
-	input[type='number']::-webkit-inner-spin-button,
-	input[type='number']::-webkit-outer-spin-button {
-		-webkit-appearance: none;
-	}
-
-	input[type='number'] {
-		-webkit-appearance: textfield;
-		-moz-appearance: textfield;
-		appearance: textfield;
-		cursor: pointer;
-		font-family: var(--font-family);
-		font-variant-numeric: tabular-nums;
-		color: var(--text-color);
-		background-color: transparent;
-		padding: var(--padding, 6px);
-		font-size: 1em;
-		padding-inline: 10px;
-		text-align: center;
-		border: none;
-		border-style: none;
-		flex: 1;
-		width: 72%;
-	}
-
-	button {
-		background-color: transparent;
-		border: none;
-		cursor: pointer;
-		line-height: 0px;
-		margin: 0;
-		color: var(--text-color);
-		margin-inline: 6px;
-	}
-
-	div input[type='number'] {
-		color: var(--text-color);
-		background-color: transparent;
-		padding: var(--padding, 6px);
-		padding-inline: 0px;
-		text-align: center;
-		border: none;
-		border-style: none;
-	}
-
-	.slider {
-		position: relative;
-		margin-top: -1px; /* hide edge */
-	}
-
-	input[type='range'] {
-		position: absolute;
-		appearance: none;
-		width: 100%;
-		height: var(--slider-height);
-		background: var(--layer-2, #4b4b4b);
-		cursor: pointer;
-	}
-
-	/* Thumb: for Chrome, Safari, Edge */
-	input[type='range']::-webkit-slider-thumb {
-		-webkit-appearance: none;
-		appearance: none;
-		width: 12px;
-		height: var(--slider-height);
-		background: var(--text-color);
-		box-shadow: none;
-	}
-
-	/* Thumb: for Firefox */
-	input[type='range']::-moz-range-thumb {
-		border: none;
-		width: 12px;
-		height: var(--slider-height);
-		background: var(--text-color);
-		box-shadow: none;
-	}
-</style>

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Number from './Number.svelte';
+	import { Number } from '$lib/index.js';
 
 	interface Props {
 		value?: any;

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

@@ -1,10 +1,12 @@
 <script lang="ts">
 	import '$lib/app.css';
-	import { Checkbox, Details, Float, Integer, Number, Select, ShortCut, Vec3 } from '$lib/index.js';
+	import { Checkbox, Details, Number, Select, ShortCut, Vec3 } from '$lib/index.js';
 	import Section from './Section.svelte';
 
 	let intValue = $state(0);
 	let floatValue = $state(0.2);
+	let float2Value = $state(0.02);
+	let float3Value = $state(1);
 	let vecValue = $state([0.2, 0.3, 0.4]);
 	const options = ['strawberry', 'raspberry', 'chickpeas'];
 	let selectValue = $state(0);
@@ -30,22 +32,22 @@
 		<Select bind:value={themeIndex} options={themes}></Select>
 	</div>
 
-	<Section title="Integer" value={intValue}>
-		<Integer bind:value={intValue} />
+	<Section title="Integer (step inherit)" value={intValue}>
+		<Number bind:value={intValue} max={2} />
 	</Section>
 
-	<Section title="Float" value={floatValue}>
-		<Float bind:value={floatValue} />
-	</Section>
-
-	<Section title="Number" value={intValue}>
-		<Number bind:value={intValue} />
-	</Section>
-
-	<Section title="Number (float)" value={floatValue}>
+	<Section title="Float (step inherit)" value={floatValue}>
 		<Number bind:value={floatValue} />
 	</Section>
 
+	<Section title="Float 2 (step inherit)" value={intValue}>
+		<Number bind:value={float2Value} />
+	</Section>
+
+	<Section title="Float (0.01 step)" value={floatValue}>
+		<Number bind:value={float3Value} step={0.01} max={3} />
+	</Section>
+
 	<Section title="Vec3" value={JSON.stringify(vecValue)}>
 		<Vec3 bind:value={vecValue} />
 	</Section>

packages/utils/package.json

@@ -10,7 +10,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@nodarium/types": "link:../types"
+    "@nodarium/types": "workspace:"
   },
   "devDependencies": {
     "vite": "^7.3.1",

packages/utils/src/encoding.rs

@@ -27,22 +27,30 @@ pub fn read_f32(ptr: i32) -> f32 {
 }
 
 #[inline]
-pub fn read_i32_slice(tuple: (i32, i32)) -> Vec<i32> {
+pub fn read_i32_slice(range: (i32, i32)) -> Vec<i32> {
+    let (start, end) = range;
+    assert!(end >= start);
+    let byte_len = (end - start) as usize;
+    assert!(byte_len % 4 == 0);
+
     unsafe {
-        let start = tuple.0 as *const i32;
-        let end = tuple.1 as *const i32;
-        let len = (end as usize - start as usize) / 4;
-        std::slice::from_raw_parts(start, len).to_vec()
+        let ptr = start as *const i32;
+        let len = byte_len / 4;
+        std::slice::from_raw_parts(ptr, len).to_vec()
     }
 }
 
 #[inline]
-pub fn read_f32_slice(tuple: (i32, i32)) -> Vec<f32> {
+pub fn read_f32_slice(range: (i32, i32)) -> Vec<f32> {
+    let (start, end) = range;
+    assert!(end >= start);
+    let byte_len = (end - start) as usize;
+    assert!(byte_len % 4 == 0);
+
     unsafe {
-        let start = tuple.0 as *const f32;
-        let end = tuple.1 as *const f32;
-        let len = (end as usize - start as usize) / 4;
-        std::slice::from_raw_parts(start, len).to_vec()
+        let ptr = start as *const f32;
+        let len = byte_len / 4;
+        std::slice::from_raw_parts(ptr, len).to_vec()
     }
 }
 

packages/utils/src/wasm-wrapper.ts

@@ -27,7 +27,12 @@ export function createWasmWrapper(buffer: ArrayBuffer, memory: WebAssembly.Memor
   exports = instance.exports as NodariumExports;
 
   function execute(outputPos: number, args: number[]): number {
-    return exports.execute(outputPos, ...args);
+    try {
+      return exports.execute(outputPos, ...args);
+    } catch (e) {
+      console.log(e);
+      return -1;
+    }
   }
 
   function get_definition() {

pnpm-lock.yaml

@@ -70,7 +70,7 @@ importers:
         specifier: ^1.2.1
         version: 1.2.1(tailwindcss@4.1.18)
       '@nodarium/types':
-        specifier: link:../packages/types
+        specifier: 'workspace:'
         version: link:../packages/types
       '@sveltejs/adapter-static':
         specifier: ^3.0.10
@@ -118,10 +118,10 @@ importers:
   packages/registry:
     dependencies:
       '@nodarium/types':
-        specifier: link:../types
+        specifier: 'workspace:'
         version: link:../types
       '@nodarium/utils':
-        specifier: link:../utils
+        specifier: 'workspace:'
         version: link:../utils
       idb:
         specifier: ^8.0.3
@@ -155,7 +155,7 @@ importers:
         version: 4.1.18
     devDependencies:
       '@nodarium/types':
-        specifier: link:../types
+        specifier: 'workspace:'
         version: link:../types
       '@sveltejs/adapter-static':
         specifier: ^3.0.10
@@ -215,7 +215,7 @@ importers:
   packages/utils:
     dependencies:
       '@nodarium/types':
-        specifier: link:../types
+        specifier: 'workspace:'
         version: link:../types
     devDependencies:
       vite: