register works

Cargo.toml

@@ -6,7 +6,10 @@ members = [
   "packages/types",
   "packages/utils",
 ]
-exclude = ["nodes/max/plantarium/.template"]
+exclude = [
+    "nodes/max/plantarium/.template",
+    "nodes/max/plantarium/zig"
+]
 
 [profile.release]
 lto = true

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

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

flake.nix

@@ -4,7 +4,7 @@
   };
 
   outputs = {nixpkgs, ...}: let
-    systems = ["aarch64-darwin" "x86_64-linux"];
+    systems = ["aarch64-darwin" "x86_64-darwin" "aarch64-linux" "x86_64-linux"];
     eachSystem = function:
       nixpkgs.lib.genAttrs systems (system:
         function {
@@ -19,14 +19,15 @@
           pkgs.nodejs_24
           pkgs.pnpm_10
 
-          # wasm/rust stuff
+          # wasm stuff
           pkgs.rustc
           pkgs.cargo
           pkgs.rust-analyzer
           pkgs.rustfmt
-          pkgs.wasm-bindgen-cli
+          pkgs.binaryen
-          pkgs.wasm-pack
           pkgs.lld
+          pkgs.zig
+          pkgs.zls
 
           # frontend
           pkgs.vscode-langservers-extracted
@@ -35,6 +36,10 @@
           pkgs.tailwindcss-language-server
           pkgs.svelte-language-server
         ];
+
+        shellHook = ''
+          unset ZIG_GLOBAL_CACHE_DIR
+        '';
       };
     });
   };

nodes/max/plantarium/zig/.gitignore

@@ -0,0 +1,2 @@
+.zig-cache/
+zig-out/

nodes/max/plantarium/zig/build.zig

@@ -0,0 +1,19 @@
+const std = @import("std");
+
+pub fn build(b: *std.Build) void {
+    const target = b.resolveTargetQuery(.{ .os_tag = .freestanding, .abi = .none, .cpu_arch = .wasm32 });
+    const release = b.option(bool, "release", "To build a wasm release") orelse false;
+
+    const exe = b.addExecutable(.{
+        .name = "zig",
+        .root_module = b.createModule(.{
+            .root_source_file = b.path("src/main.zig"),
+            .target = target,
+            .optimize = if (release) .ReleaseSmall else .Debug,
+        }),
+    });
+    exe.rdynamic = true;
+    exe.entry = .disabled;
+
+    b.installArtifact(exe);
+}

nodes/max/plantarium/zig/build.zig.zon

@@ -0,0 +1,81 @@
+.{
+    // This is the default name used by packages depending on this one. For
+    // example, when a user runs `zig fetch --save <url>`, this field is used
+    // as the key in the `dependencies` table. Although the user can choose a
+    // different name, most users will stick with this provided value.
+    //
+    // It is redundant to include "zig" in this name because it is already
+    // within the Zig package namespace.
+    .name = .math,
+    // This is a [Semantic Version](https://semver.org/).
+    // In a future version of Zig it will be used for package deduplication.
+    .version = "0.0.0",
+    // Together with name, this represents a globally unique package
+    // identifier. This field is generated by the Zig toolchain when the
+    // package is first created, and then *never changes*. This allows
+    // unambiguous detection of one package being an updated version of
+    // another.
+    //
+    // When forking a Zig project, this id should be regenerated (delete the
+    // field and run `zig build`) if the upstream project is still maintained.
+    // Otherwise, the fork is *hostile*, attempting to take control over the
+    // original project's identity. Thus it is recommended to leave the comment
+    // on the following line intact, so that it shows up in code reviews that
+    // modify the field.
+    .fingerprint = 0xa927044d8d610b01, // Changing this has security and trust implications.
+    // Tracks the earliest Zig version that the package considers to be a
+    // supported use case.
+    .minimum_zig_version = "0.15.2",
+    // This field is optional.
+    // Each dependency must either provide a `url` and `hash`, or a `path`.
+    // `zig build --fetch` can be used to fetch all dependencies of a package, recursively.
+    // Once all dependencies are fetched, `zig build` no longer requires
+    // internet connectivity.
+    .dependencies = .{
+        // See `zig fetch --save <url>` for a command-line interface for adding dependencies.
+        //.example = .{
+        //    // When updating this field to a new URL, be sure to delete the corresponding
+        //    // `hash`, otherwise you are communicating that you expect to find the old hash at
+        //    // the new URL. If the contents of a URL change this will result in a hash mismatch
+        //    // which will prevent zig from using it.
+        //    .url = "https://example.com/foo.tar.gz",
+        //
+        //    // This is computed from the file contents of the directory of files that is
+        //    // obtained after fetching `url` and applying the inclusion rules given by
+        //    // `paths`.
+        //    //
+        //    // This field is the source of truth; packages do not come from a `url`; they
+        //    // come from a `hash`. `url` is just one of many possible mirrors for how to
+        //    // obtain a package matching this `hash`.
+        //    //
+        //    // Uses the [multihash](https://multiformats.io/multihash/) format.
+        //    .hash = "...",
+        //
+        //    // When this is provided, the package is found in a directory relative to the
+        //    // build root. In this case the package's hash is irrelevant and therefore not
+        //    // computed. This field and `url` are mutually exclusive.
+        //    .path = "foo",
+        //
+        //    // When this is set to `true`, a package is declared to be lazily
+        //    // fetched. This makes the dependency only get fetched if it is
+        //    // actually used.
+        //    .lazy = false,
+        //},
+    },
+    // Specifies the set of files and directories that are included in this package.
+    // Only files and directories listed here are included in the `hash` that
+    // is computed for this package. Only files listed here will remain on disk
+    // when using the zig package manager. As a rule of thumb, one should list
+    // files required for compilation plus any license(s).
+    // Paths are relative to the build root. Use the empty string (`""`) to refer to
+    // the build root itself.
+    // A directory listed here means that all files within, recursively, are included.
+    .paths = .{
+        "build.zig",
+        "build.zig.zon",
+        "src",
+        // For example...
+        //"LICENSE",
+        //"README.md",
+    },
+}

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

@@ -0,0 +1,27 @@
+{
+    "id": "max/nodarium/zig",
+    "outputs": [
+        "float"
+    ],
+    "inputs": {
+        "op_type": {
+            "label": "type",
+            "type": "select",
+            "options": [
+                "add",
+                "subtract",
+                "multiply",
+                "divide"
+            ],
+            "internal": true
+        },
+        "a": {
+            "type": "float",
+            "value": 2
+        },
+        "b": {
+            "type": "float",
+            "value": 2
+        }
+    }
+}

nodes/max/plantarium/zig/src/main.zig

@@ -0,0 +1,29 @@
+const std = @import("std");
+
+const def = @embedFile("input.json");
+
+export fn execute(ptr: *anyopaque, len: c_int) c_int {
+    _ = ptr; // autofix
+    _ = len; // autofix
+    return 0;
+}
+
+export fn __alloc(len: c_int) ?*anyopaque {
+    if (len < 0) return null;
+    const mem = std.heap.wasm_allocator.alloc(u8, @intCast(len)) catch return null;
+    return mem.ptr;
+}
+
+export fn __free(ptr: *anyopaque, len: c_int) void {
+    if (len < 1) return;
+    const mem: [*]u8 = @ptrCast(@alignCast(ptr));
+    std.heap.wasm_allocator.free(mem[0..@intCast(len)]);
+}
+
+export fn getDefinitionPtr() *const anyopaque {
+    return def.ptr;
+}
+
+export fn getDefinitionLen() usize {
+    return def.len;
+}

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

@@ -3,6 +3,8 @@ interface NodariumExports extends WebAssembly.Exports {
   execute: (ptr: number, len: number) => number;
   __free: (ptr: number, len: number) => void;
   __alloc: (len: number) => number;
+  getDefinitionPtr: () => number;
+  getDefinitionLen: () => number;
 }
 
 export function createWasmWrapper(buffer: ArrayBuffer) {
@@ -19,8 +21,8 @@ export function createWasmWrapper(buffer: ArrayBuffer) {
         if (!exports) return;
         const view = new Uint8Array(exports.memory.buffer, ptr, len);
         console.log("RUST:", new TextDecoder().decode(view));
-      }
+      },
-    }
+    },
   };
 
   const module = new WebAssembly.Module(buffer);
@@ -43,12 +45,22 @@ export function createWasmWrapper(buffer: ArrayBuffer) {
   }
 
   function get_definition() {
-    const sections = WebAssembly.Module.customSections(module, "nodarium_definition");
+    const decoder = new TextDecoder();
+    const sections = WebAssembly.Module.customSections(
+      module,
+      "nodarium_definition",
+    );
     if (sections.length > 0) {
-      const decoder = new TextDecoder();
       const jsonString = decoder.decode(sections[0]);
       return JSON.parse(jsonString);
     }
+
+    const ptr = exports.getDefinitionPtr();
+    const len = exports.getDefinitionLen();
+
+    const view = new Uint8Array(exports.memory.buffer, ptr, len);
+    const jsonString = decoder.decode(view);
+    return JSON.parse(jsonString);
   }
 
   return { execute, get_definition };