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

@@ -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;
 

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') {
+  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');
+    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);
-        if (type) {
-          typeMap.set(node.type, {
-            definition: type,
+
+      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) {
+      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;
-  }
-
-  private writeToMemory(v: number | number[] | Int32Array, title?: string) {
-    let length = 1;
-
-    if (typeof v === 'number') {
-      this.memoryView[this.offset] = v;
-      console.log('MEM: writing number', v, ' to', this.offset);
-      length = 1;
-    } else {
-      this.memoryView.set(v, this.offset);
-      length = v.length;
+    log.info(`Output node: ${outputNode.id}, total nodes ordered: ${ordered.length}`);
+    return [outputNode, ordered] as const;
   }
 
+  private writeToMemory(value: number | number[] | Int32Array, title?: string): Pointer {
     const start = this.offset;
-    const end = this.offset + length;
 
-    this.offset += length;
+    if (typeof value === 'number') {
+      this.memoryView[this.offset++] = value;
+    } else {
+      this.memoryView.set(value, this.offset);
+      this.offset += value.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>): Promise<Int32Array> {
+    if (this.isRunning) {
+      log.info('Executor is already running, skipping execution');
+      return undefined as unknown as Int32Array;
     }
 
-  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;
+    log.info('Execution started');
 
-    // Then we add some metadata to the graph
-    const [_outputNode, nodes] = await this.addMetaData(graph);
+    try {
+      this.offset = 0;
+      this.results = {};
+      this.inputPtrs = {};
+      this.allPtrs = [];
+      this.seed += 2;
 
-    /*
-     * Here we sort the nodes into buckets, which we then execute one by one
-     * +-b2-+-b1-+---b0---+
-     * |    |    |        |
-     * | n3 | n2 | Output |
-     * | n6 | n4 | Level  |
-     * |    | n5 |        |
-     * |    |    |        |
-     * +----+----+--------+
-     */
+      this.refreshView();
 
-    // we execute the nodes from the bottom up
-    const sortedNodes = nodes.sort(
-      (a, b) => (b.state?.depth || 0) - (a.state?.depth || 0)
+      const [outputNode, nodes] = await this.addMetaData(graph);
+
+      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}`)])
-    );
+      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 node_type = this.nodes.get(node.type)!;
+        const nodeType = this.nodes.get(node.type);
+        if (!nodeType) continue;
 
-      console.log('---------------');
-      console.log('STARTING NODE EXECUTION', node_type.definition.id + '/' + node.id);
-      this.printMemory();
+        log.info(`Executing node: ${node.id} (type: ${node.type})`);
 
-      // console.log(node_type.definition.inputs);
-      const inputs = Object.entries(node_type.definition.inputs || {}).map(
+        const inputs = Object.entries(nodeType.definition.inputs || {}).map(
           ([key, input]) => {
-          // We should probably initially write this to memory
-          if (input.type === 'seed') {
-            return seedPtr;
-          }
+            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)!;
+              const ptr = settingPtrs.get(input.setting);
+              if (!ptr) throw new Error(`Missing setting: ${input.setting}`);
+              return ptr;
             }
 
-          // 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}`
-              );
+            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 this.results[inputNode.id];
+              return res;
             }
 
-          // 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, node.props[key]),
+                `${node.id}.${key}`
+              );
             }
 
-          return this.writeToMemory(getValue(input), title);
+            return this.writeToMemory(getValue(input), `${node.id}.${key}`);
           }
         );
 
-      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);
+        const args = inputs.flatMap(p => [p.start * 4, p.end * 4]);
 
-      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);
+        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 input = view.slice(args[0], args[1]);
-        const output = view.slice(this.offset, this.offset + bytesWritten / 4);
-        console.log('RESULT', { args, input, output });
+        const outLen = bytesWritten >> 2;
+        const outputStart = this.offset;
 
-        // 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)
+          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)
+          )
         ) {
-          console.log('INPUT === OUTPUT');
-          this.results[node.id] = {
-            start: args[0],
-            end: args[1],
-            _title: `${node.id} ->`
-          };
-          this.allPtrs.push(this.results[node.id]);
+          this.results[node.id] = inputs[0];
+          log.info(`Node ${node.id} result reused input memory`);
         } else {
           this.results[node.id] = {
-            start: this.offset,
-            end: this.offset + bytesWritten / 4,
+            start: outputStart,
+            end: outputStart + outLen,
             _title: `${node.id} ->`
           };
-          this.offset += bytesWritten / 4;
-          this.allPtrs.push(this.results[node.id]);
+          this.offset += outLen;
+          lastNodePtr = this.results[node.id];
+          log.info(
+            `Node ${node.id} wrote result to memory: start=${outputStart}, end=${outputStart + outLen
+            }`
+          );
         }
-        console.log('FINISHED EXECUTION', {
-          bytesWritten,
-          offset: this.offset
-        });
+      }
+
+      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) {
-        console.error(`Failed to execute node ${node.type}/${node.id}`, e);
+      log.info('Execution error:', e);
+      console.error(e);
+    } finally {
       this.isRunning = false;
-      }
-    }
-
-    // const mem = new Int32Array(this.memory.buffer);
-    // console.log('OUT', mem.slice(0, 10));
-
-    // return the result of the parent of the output node
-    // const res = this.results[outputNode.id];
-
       this.perf?.endPoint('runtime');
-
-    this.isRunning = false;
-    return undefined as unknown as Int32Array;
+      log.info('Executor state reset');
+    }
   }
 
   getPerformanceData() {

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

@@ -5,17 +5,17 @@
 </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,
+			array.map((x) => Math.pow(x - mean, 2)).reduce((a, b) => a + b) / n
 		);
 	}
 	type Props = {
@@ -25,21 +25,21 @@
 	const { run }: Props = $props();
 
 	let isRunning = $state(false);
-  let amount = localState<number>("nodes.benchmark.samples", 500);
+	let amount = localState<number>('nodes.benchmark.samples', 500);
 	let samples = $state(0);
 	let warmUp = writable(0);
 	let warmUpAmount = 10;
-  let status = "";
+	let status = '';
 
 	const copyContent = async (text?: string | number) => {
 		if (!text) return;
-    if (typeof text !== "string") {
+		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);
+			console.error('Failed to copy: ', err);
 		}
 	};
 
@@ -74,7 +74,7 @@
 			stdev: calculateStandardDeviation(results),
 			samples: results,
 			duration: performance.now() - a,
-      avg: results.reduce((a, b) => a + b) / results.length,
+			avg: results.reduce((a, b) => a + b) / results.length
 		};
 	}
 </script>
@@ -90,42 +90,43 @@
 		<label for="bench-avg">Average </label>
 		<button
 			id="bench-avg"
-      onkeydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
+			onkeydown={(ev) => ev.key === 'Enter' && copyContent(result?.avg)}
 			onclick={() => copyContent(result?.avg)}
-      >{Math.floor(result.avg * 100) / 100}</button
 		>
+			{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
-    >
+			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
-    >
+		<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
-    >
+			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
-    >
+		<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
-    >
+		<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>
+		<button onclick={benchmark} disabled={isRunning}>start</button>
 	{/if}
 </div>
 

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,3 +1,8 @@
+<!--
+  @component
+  @deprecated use Float.svelte
+-->
+
 <script lang="ts">
 	interface Props {
 		value?: number;

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 {
+    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: