Merge branch 'main' into feat/drop-node-on-connection

packages/ui/src/lib/Input.svelte

@@ -2,11 +2,9 @@
 	import type { NodeInput } from '@nodarium/types';
 
 	import Checkbox from './inputs/Checkbox.svelte';
-	import Float from './inputs/Float.svelte';
-	import Integer from './inputs/Integer.svelte';
+	import Number from './inputs/Number.svelte';
 	import Select from './inputs/Select.svelte';
 	import Vec3 from './inputs/Vec3.svelte';
-	// import Number from './inputs/Number.svelte';
 
 	interface Props {
 		input: NodeInput;
@@ -18,9 +16,9 @@
 </script>
 
 {#if input.type === 'float'}
-	<Float bind:value min={input?.min} max={input?.max} />
+	<Number bind:value min={input?.min} max={input?.max} step={0.01} />
 {:else if input.type === 'integer'}
-	<Integer bind:value min={input?.min} max={input?.max} />
+	<Number bind:value min={input?.min} max={input?.max} />
 {:else if input.type === 'boolean'}
 	<Checkbox bind:value {id} />
 {:else if input.type === 'select'}

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

@@ -112,23 +112,25 @@
 	onmousedown={handleMouseDown}
 	onmouseup={handleMouseUp}
 >
+	<div class="">
+		<button onclick={() => handleChange(-step)}>-</button>
+		<input
+			bind:value
+			bind:this={inputEl}
+			{id}
+			{step}
+			{max}
+			{min}
+			type="number"
+			style={`width:${width};`}
+		/>
+
+		<button onclick={() => handleChange(+step)}>+</button>
+	</div>
 	{#if typeof min !== 'undefined' && typeof max !== 'undefined'}
 		<span class="overlay" style={`width: ${Math.min((value - min) / (max - min), 1) * 100}%`}
 		></span>
 	{/if}
-	<button onclick={() => handleChange(-step)}>-</button>
-	<input
-		bind:value
-		bind:this={inputEl}
-		{id}
-		{step}
-		{max}
-		{min}
-		type="number"
-		style={`width:${width};`}
-	/>
-
-	<button onclick={() => handleChange(+step)}>+</button>
 </div>
 
 <style>

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

@@ -12,8 +12,10 @@
 		step = 1,
 		min = $bindable(0),
 		max = $bindable(1),
-		id
+		id: _id
 	}: Props = $props();
+	const uid = $props.id();
+	const id = $derived(_id || uid);
 
 	if (min > max) {
 		[min, max] = [max, min];
@@ -26,7 +28,7 @@
 		return +parseFloat(input + '').toPrecision(2);
 	}
 
-	let inputEl: HTMLInputElement | undefined = $state();
+	let inputEl = $state() as HTMLInputElement;
 
 	let prev = -1;
 	function update() {
@@ -82,6 +84,10 @@
 </div>
 
 <style>
+	:root {
+		--slider-height: 4px;
+	}
+
 	.component-wrapper {
 		display: flex;
 		background-color: var(--layer-2, #4b4b4b);
@@ -145,7 +151,7 @@
 		position: absolute;
 		appearance: none;
 		width: 100%;
-		height: 3px;
+		height: var(--slider-height);
 		background: var(--layer-2, #4b4b4b);
 		cursor: pointer;
 	}
@@ -154,16 +160,18 @@
 	input[type='range']::-webkit-slider-thumb {
 		-webkit-appearance: none;
 		appearance: none;
-		width: 0px;
-		height: 0px;
+		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: 0px;
-		height: 0px;
+		width: 12px;
+		height: var(--slider-height);
+		background: var(--text-color);
 		box-shadow: none;
 	}
 </style>