refactor(♻️ Add defaults everywhere (+ settings page)):

apps/builder/components/shared/SmartNumberInput.tsx

@@ -0,0 +1,39 @@
+import {
+  NumberInputProps,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+  NumberIncrementStepper,
+  NumberDecrementStepper,
+} from '@chakra-ui/react'
+import { useState } from 'react'
+
+export const SmartNumberInput = ({
+  value,
+  onValueChange,
+  ...props
+}: {
+  value?: number
+  onValueChange: (value?: number) => void
+} & NumberInputProps) => {
+  const [currentValue, setCurrentValue] = useState(value?.toString() ?? '')
+
+  const handleValueChange = (value: string) => {
+    setCurrentValue(value)
+    if (value.endsWith('.') || value.endsWith(',')) return
+    if (value === '') return onValueChange(undefined)
+    const newValue = parseFloat(value)
+    if (isNaN(newValue)) return
+    onValueChange(newValue)
+  }
+
+  return (
+    <NumberInput onChange={handleValueChange} value={currentValue} {...props}>
+      <NumberInputField />
+      <NumberInputStepper>
+        <NumberIncrementStepper />
+        <NumberDecrementStepper />
+      </NumberInputStepper>
+    </NumberInput>
+  )
+}