From f54cde734e1f8199b120d2466fe01debf0ec25a6 Mon Sep 17 00:00:00 2001
From: Felix Hungenberg <30648730+shiftgeist@users.noreply.github.com>
Date: Wed, 21 Jan 2026 16:35:13 +0100
Subject: [PATCH] fix: integer width

---
 packages/ui/src/lib/inputs/Integer.svelte | 354 +++++++++++-----------
 1 file changed, 177 insertions(+), 177 deletions(-)

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