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/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>
 

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/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",

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: