windmill-components 1.542.5 → 1.555.0

package/package/components/InstanceSettings.svelte

@@ -62,24 +62,6 @@ async function loadSettings() {
     if (nvalues['critical_error_channels'] == undefined) {
         nvalues['critical_error_channels'] = [];
     }
-    else {
-        let teams = (await SettingService.getGlobal({ key: 'teams' })) ?? [];
-        nvalues['teams'] = teams;
-        nvalues['critical_error_channels'] = nvalues['critical_error_channels'].map((el) => {
-            if (el.teams_channel) {
-                const team = teams.find((team) => team.team_name === el.teams_channel.team_name) || null;
-                return {
-                    teams_channel: {
-                        team_id: team?.team_id,
-                        team_name: team?.team_name,
-                        channel_id: team?.channels.find((channel) => channel.channel_id === el.teams_channel.channel_id)?.channel_id,
-                        channel_name: team?.channels.find((channel) => channel.channel_id === el.teams_channel.channel_id)?.channel_name
-                    }
-                };
-            }
-            return el;
-        });
-    }
     $values = nvalues;
     loading = false;
     // populate snowflake account identifier from db
@@ -94,12 +76,21 @@ export async function saveSettings() {
             snowflakeAccountIdentifier) {
         setupSnowflakeUrls();
     }
-    // Remove empty or invalid teams_channel entries
+    // Remove empty or invalid entries for critical error channels
     $values.critical_error_channels = $values.critical_error_channels.filter((entry) => {
-        if (entry && typeof entry == 'object' && 'teams_channel' in entry) {
+        if (!entry || typeof entry !== 'object')
+            return false;
+        if ('teams_channel' in entry) {
             return isValidTeamsChannel(entry.teams_channel);
         }
-        return true;
+        if ('slack_channel' in entry) {
+            return (typeof entry.slack_channel === 'string' && entry.slack_channel.trim() !== '');
+        }
+        if ('email' in entry) {
+            return typeof entry.email === 'string' && entry.email.trim() !== '';
+        }
+        // Unknown shape
+        return false;
     });
     let shouldReloadPage = false;
     if ($values) {

package/package/components/JobArgs.svelte

@@ -11,13 +11,10 @@ import Row from './table/Row.svelte';
 import HighlightTheme from './HighlightTheme.svelte';
 import { deepEqual } from 'fast-equals';
 import { isWindmillTooBigObject } from './job_args';
-export let id = undefined;
-export let args;
-export let argLabel = undefined;
-export let workspace = undefined;
-let jsonViewer;
-let runLocally;
-let jsonStr = '';
+let { id = undefined, args, argLabel = undefined, workspace = undefined } = $props();
+let jsonViewer = $state();
+let runLocally = $state();
+let jsonStr = $state('');
 function pythonCode() {
     return `
 if __name__ == "__main__":
@@ -47,9 +44,9 @@ ${Object.entries(args)
 }
 </script>
 
-{#if args && typeof args === 'object' && deepEqual( Object.keys(args), ['reason'] ) && args['reason'] == 'PREPROCESSOR_ARGS_ARE_DISCARDED'}
+{#if args && typeof args === 'object' && deepEqual( Object.keys(args ?? {}), ['reason'] ) && args['reason'] == 'PREPROCESSOR_ARGS_ARE_DISCARDED'}
 	Preprocessor args are discarded
-{:else if id && workspace && args && typeof args === 'object' && deepEqual( Object.keys(args), ['reason'] ) && args['reason'] == 'WINDMILL_TOO_BIG'}
+{:else if id && workspace && args && typeof args === 'object' && deepEqual( Object.keys(args ?? {}), ['reason'] ) && args['reason'] == 'WINDMILL_TOO_BIG'}
 	The args are too big in size to be able to fetch alongside job. Please <a
 		href="/api/w/{workspace}/jobs_u/get_args/{id}"
 		target="_blank">download the JSON file to view them</a
@@ -62,26 +59,28 @@ ${Object.entries(args)
 					<Cell head first>{argLabel ?? 'Arg'}</Cell>
 					<Cell head last>Value</Cell>
 				</tr>
-				<svelte:fragment slot="headerAction">
+				{#snippet headerAction()}
 					<button
-						on:click={() => {
+						onclick={() => {
 							jsonStr = JSON.stringify(args, null, 4)
-							jsonViewer.openDrawer()
+							jsonViewer?.openDrawer()
 						}}
 					>
 						<Expand size={18} />
 					</button>
-				</svelte:fragment>
+				{/snippet}
 			</Head>
 
 			<tbody class="divide-y w-full">
-				{#if args && Object.keys(args).length > 0}
-					{#each Object.entries(args).sort((a, b) => a[0].localeCompare(b[0])) as [arg, value]}
+				{#if args && typeof args === 'object' && Object.keys(args ?? {}).length > 0}
+					{#each Object.entries(args ?? {}).sort( (a, b) => a?.[0]?.localeCompare(b?.[0]) ) as [arg, value]}
 						<Row>
 							<Cell first>{arg}</Cell>
 							<Cell><ArgInfo {value} /></Cell>
 						</Row>
 					{/each}
+				{:else if args && typeof args !== 'object'}
+					<Row><Cell>Argument is not an object (type: {typeof args})</Cell></Row>
 				{:else if args}
 					<Row><Cell>No arguments</Cell></Row>
 				{:else}
@@ -116,7 +115,7 @@ ${Object.entries(args)
 				Download
 			</Button>
 			<Button
-				on:click={runLocally.openDrawer}
+				on:click={() => runLocally?.openDrawer()}
 				color="light"
 				size="xs"
 				startIcon={{ icon: ChevronRightSquare }}

package/package/components/JobArgs.svelte.d.ts

@@ -1,23 +1,9 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const JobArgs: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     id?: string | undefined;
     args: any;
     argLabel?: string | undefined;
     workspace?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type JobArgs = InstanceType<typeof JobArgs>;
+}
+declare const JobArgs: import("svelte").Component<Props, {}, "">;
+type JobArgs = ReturnType<typeof JobArgs>;
 export default JobArgs;

package/package/components/JobLoader.svelte

@@ -4,17 +4,10 @@ const plimit = pLimit(5);
 
 <script lang="ts">import { JobService } from '../gen';
 import { workspaceStore } from '../stores';
-import { onDestroy, tick, untrack } from 'svelte';
+import { getContext, onDestroy, tick, untrack } from 'svelte';
 import { sendUserToast } from '../toast';
-import { isScriptPreview } from '../utils';
+import { DynamicInput, isScriptPreview } from '../utils';
 let { isLoading = $bindable(false), job = $bindable(undefined), noCode = false, allowConcurentRequests = false, workspaceOverride = undefined, notfound = $bindable(false), jobUpdateLastFetch = $bindable(undefined), toastError = false, onlyResult = false, loadPlaceholderJobOnStart = undefined, scriptProgress = $bindable(undefined), noLogs = false, children } = $props();
-/// Last time asked for job progress
-let lastTimeCheckedProgress = undefined;
-/// Will try to poll progress every 5s and if once progress returned was not undefined, will be ignored
-/// and getProgressRate will be used instead
-const getProgressRetryRate = 5000;
-/// How often loader poll progress
-const getProgressRate = 1000;
 let workspace = $derived(workspaceOverride ?? $workspaceStore);
 let syncIteration = 0;
 let errorIteration = 0;
@@ -29,6 +22,7 @@ let currentId = $state(undefined);
 let noPingTimeout = undefined;
 let lastNoLogs = $state(noLogs);
 let lastCompletedJobId = $state(undefined);
+let token = getContext('AuthToken');
 $effect(() => {
     let newIsLoading = currentId !== undefined;
     untrack(() => {
@@ -73,6 +67,7 @@ function clearCurrentId() {
 export async function abstractRun(fn, callbacks) {
     try {
         isLoading = true;
+        scriptProgress = undefined;
         lastCompletedJobId = undefined;
         clearCurrentJob();
         lastCallbacks = callbacks;
@@ -145,9 +140,6 @@ function refreshLogOffset() {
     if (logOffset == 0) {
         logOffset = job?.logs?.length ? job.logs?.length + 1 : 0;
     }
-    if (resultStreamOffset == 0) {
-        resultStreamOffset = job?.result_stream?.length ? job.result_stream?.length + 1 : 0;
-    }
 }
 export async function getLogs() {
     if (job) {
@@ -164,10 +156,13 @@ export async function getLogs() {
         }
     }
 }
+export async function runDynamicInputScript(entrypoint_function, runnable_ref, args, callbacks) {
+    return abstractRun(() => JobService.runDynamicSelect({
+        workspace: $workspaceStore,
+        requestBody: { entrypoint_function, args, runnable_ref }
+    }), callbacks);
+}
 export async function runPreview(path, code, lang, args, tag, lock, hash, callbacks) {
-    // Reset in case we rerun job without reloading
-    scriptProgress = undefined;
-    lastTimeCheckedProgress = undefined;
     return abstractRun(() => JobService.runScriptPreview({
         workspace: $workspaceStore,
         requestBody: {
@@ -222,6 +217,7 @@ export async function watchJob(testId, callbacks) {
     syncIteration = 0;
     errorIteration = 0;
     currentId = testId;
+    scriptProgress = undefined;
     if (loadPlaceholderJobOnStart) {
         job = structuredClone(loadPlaceholderJobOnStart);
     }
@@ -241,30 +237,6 @@ export async function watchJob(testId, callbacks) {
         syncer(testId, callbacks);
     }
 }
-function setJobProgress(job) {
-    let getProgress = undefined;
-    // We only pull individual job progress this way
-    // Flow's progress we are getting from FlowStatusModule of flow job
-    if (job.job_kind == 'script' || isScriptPreview(job.job_kind)) {
-        // First time, before running job, lastTimeCheckedProgress is always undefined
-        if (lastTimeCheckedProgress) {
-            const lastTimeCheckedMs = Date.now() - lastTimeCheckedProgress;
-            // Ask for progress if the last time we asked is >5s OR the progress was once not undefined
-            if (lastTimeCheckedMs > getProgressRetryRate ||
-                (scriptProgress != undefined && lastTimeCheckedMs > getProgressRate)) {
-                lastTimeCheckedProgress = Date.now();
-                getProgress = true;
-            }
-        }
-        else {
-            // Make it think we asked for progress, but in reality we didnt. First 5s we want to wait without putting extra work on db
-            // 99.99% of the jobs won't have progress be set so we have to do a balance between having low-latency for jobs that use it and job that don't
-            // we would usually not care to have progress the first 5s and jobs that are less than 5s
-            lastTimeCheckedProgress = Date.now();
-        }
-    }
-    return getProgress;
-}
 const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
 function updateJobFromProgress(previewJobUpdates, job, callbacks) {
     // Clamp number between two values with the following line:
@@ -275,6 +247,7 @@ function updateJobFromProgress(previewJobUpdates, job, callbacks) {
         }
     }
     if (previewJobUpdates.progress) {
+        console.log('progress', previewJobUpdates.progress);
         // Progress cannot go back and cannot be set to 100
         scriptProgress = clamp(previewJobUpdates.progress, scriptProgress ?? 0, 99);
     }
@@ -329,14 +302,14 @@ async function loadTestJob(id, callbacks) {
         try {
             if (job && `running` in job) {
                 callbacks?.running?.({ id });
-                let getProgress = setJobProgress(job);
                 refreshLogOffset();
                 let previewJobUpdates = await JobService.getJobUpdates({
                     workspace: workspace,
                     id,
                     running: job.running,
                     logOffset: logOffset,
-                    getProgress: getProgress
+                    streamOffset: resultStreamOffset,
+                    getProgress: false
                 });
                 if ((previewJobUpdates.running ?? false) || (previewJobUpdates.completed ?? false)) {
                     job = await JobService.getJob({
@@ -464,7 +437,9 @@ async function loadTestJobWithSSE(id, attempt, callbacks) {
                         job.running = true;
                     }
                 }
-                let getProgress = onlyResult || !job ? undefined : setJobProgress(job);
+                let getProgress = onlyResult || !job
+                    ? undefined
+                    : job.job_kind == 'script' || isScriptPreview(job.job_kind);
                 refreshLogOffset();
                 // Build SSE URL with query parameters
                 const params = new URLSearchParams({
@@ -491,6 +466,12 @@ async function loadTestJobWithSSE(id, attempt, callbacks) {
                 if (resultStreamOffset) {
                     params.set('stream_offset', resultStreamOffset.toString());
                 }
+                if (job) {
+                    params.set('is_flow', (job.job_kind === 'flow' || job.job_kind === 'flowpreview').toString());
+                }
+                if (token?.token && token.token != '') {
+                    params.set('token', token.token);
+                }
                 const sseUrl = `/api/w/${workspace}/jobs_u/getupdate_sse/${id}?${params.toString()}`;
                 currentEventSource = new EventSource(sseUrl);
                 setNoPingTimeout(id, attempt, callbacks);

package/package/components/JobLoader.svelte.d.ts

@@ -1,5 +1,6 @@
 import { type Job, type OpenFlow } from '../gen';
 import type { SupportedLanguage } from '../common';
+import { DynamicInput } from '../utils';
 export type Callbacks = {
     done?: (x: Job & {
         result?: any;
@@ -57,6 +58,7 @@ declare const JobLoader: import("svelte").Component<Props, {
         tag?: string;
     }, callbacks?: Callbacks) => Promise<string>;
     getLogs: () => Promise<void>;
+    runDynamicInputScript: (entrypoint_function: string, runnable_ref: DynamicInput.HelperScript, args: Record<string, any>, callbacks?: Callbacks) => Promise<string>;
     runPreview: (path: string | undefined, code: string, lang: SupportedLanguage | undefined, args: Record<string, any>, tag: string | undefined, lock?: string, hash?: string, callbacks?: Callbacks) => Promise<string>;
     cancelJob: () => Promise<void>;
     clearCurrentJob: () => Promise<void>;

package/package/components/JobStatus.svelte

@@ -6,7 +6,7 @@ import { Calendar, CheckCircle2, Circle, Clock, Hourglass, Play, XCircle } from
 import NoWorkerWithTagWarning from './runs/NoWorkerWithTagWarning.svelte';
 import QueuePosition from './QueuePosition.svelte';
 const SMALL_ICON_SIZE = 12;
-export let job;
+let { job } = $props();
 </script>
 
 {#if job && 'success' in job && job.success}

package/package/components/JobStatus.svelte.d.ts

@@ -1,21 +1,7 @@
 import type { CompletedJob, QueuedJob } from '../gen';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const JobStatus: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     job: QueuedJob | CompletedJob | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type JobStatus = InstanceType<typeof JobStatus>;
+}
+declare const JobStatus: import("svelte").Component<Props, {}, "">;
+type JobStatus = ReturnType<typeof JobStatus>;
 export default JobStatus;

package/package/components/JsonEditor.svelte

@@ -1,12 +1,14 @@
-<script lang="ts">import { run } from 'svelte/legacy';
-import '@codingame/monaco-vscode-standalone-json-language-features';
+<script lang="ts">import '@codingame/monaco-vscode-standalone-json-language-features';
 import SimpleEditor from './SimpleEditor.svelte';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 import { createDispatcherIfMounted } from '../createDispatcherIfMounted';
 import Button from './common/button/Button.svelte';
+import { twMerge } from 'tailwind-merge';
+import { inputBorderClass } from './text_input/TextInput.svelte';
 let { code = $bindable(), value = $bindable(undefined), error = $bindable(), editor = $bindable(undefined), small = false, loadAsync = false, class: clazz = undefined, disabled = false, fixedOverflowWidgets = true } = $props();
 let tooBig = $derived(code && code?.length > 1000000);
 let loadTooBigAnyway = $state(false);
+let focused = $state(false);
 const dispatch = createEventDispatcher();
 const dispatchIfMounted = createDispatcherIfMounted(dispatch);
 function parseJson() {
@@ -24,8 +26,8 @@ function parseJson() {
         error = e.message;
     }
 }
-run(() => {
-    code != undefined && parseJson();
+$effect(() => {
+    code != undefined && untrack(() => parseJson());
 });
 </script>
 
@@ -38,12 +40,17 @@ run(() => {
 	</div>
 {:else}
 	<div class="flex flex-col w-full">
-		<div class="border w-full">
+		<div
+			class={twMerge(
+				'w-full rounded-md bg-surface-secondary',
+				inputBorderClass({ error: !!error, forceFocus: focused })
+			)}
+		>
 			<SimpleEditor
 				{loadAsync}
 				{small}
-				on:focus
-				on:blur
+				on:focus={() => (dispatch('focus'), (focused = true))}
+				on:blur={() => (dispatch('blur'), (focused = false))}
 				bind:this={editor}
 				on:change
 				autoHeight
@@ -52,10 +59,12 @@ run(() => {
 				class={clazz}
 				{disabled}
 				{fixedOverflowWidgets}
+				renderLineHighlight="none"
+				yPadding={8}
 			/>
 		</div>
 		{#if error != ''}
-			<span class="text-red-600 text-xs">{error}</span>
+			<span class="text-red-600 text-xs mt-1">{error}</span>
 		{/if}
 	</div>
 {/if}

package/package/components/JsonEditor.svelte.d.ts

@@ -25,9 +25,9 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const JsonEditor: $$__sveltets_2_IsomorphicComponent<Props, {
+    change: CustomEvent<any>;
     focus: CustomEvent<any>;
     blur: CustomEvent<any>;
-    change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "value" | "error" | "code" | "editor">;

package/package/components/JsonInputs.svelte

@@ -41,7 +41,7 @@ function handleKeydown(event) {
 <!-- Add a hidden button that can receive focus -->
 <button bind:this={focusTrap} class="sr-only" tabindex="-1" aria-hidden="true">Focus trap</button>
 
-<div class="h-full">
+<div class="h-full py-3 rounded-md border">
 	<SimpleEditor
 		bind:this={simpleEditor}
 		on:focus={() => {

package/package/components/ModulePreviewForm.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { allTrue } from '../utils';
+<script lang="ts">import ResizeTransitionWrapper from './common/ResizeTransitionWrapper.svelte';
+import { allTrue } from '../utils';
 import { RefreshCw } from 'lucide-svelte';
 import ArgInput from './ArgInput.svelte';
 import { Button } from './common';
@@ -69,12 +70,14 @@ $effect.pre(() => {
 		{#if keys.length > 0}
 			{#each keys as argName, i (argName)}
 				{#if Object.keys(schema.properties ?? {}).includes(argName)}
-					<div
+					<ResizeTransitionWrapper
+						vertical
 						class={twMerge(
-							'flex gap-2',
+							'flex gap-2 relative',
 							animateArg === argName && 'animate-pulse ring-2 ring-offset-2 ring-blue-500 rounded'
 						)}
-						data-arg={argName}
+						innerClass="w-full"
+						outerDivProps={{ 'data-arg': argName }}
 					>
 						{#if schema?.properties?.[argName]}
 							<ArgInput
@@ -104,22 +107,23 @@ $effect.pre(() => {
 								nullable={schema.properties[argName].nullable}
 								title={schema.properties[argName].title}
 								placeholder={schema.properties[argName].placeholder}
-							/>
+							>
+								{#snippet fieldHeaderActions()}
+									{#if stepsInputArgs?.isArgManuallySet(mod.id, argName)}
+										<Button
+											on:click={() => {
+												plugIt(argName)
+											}}
+											size="xs2"
+											variant="contained"
+											color="light"
+											title="Re-evaluate input step"><RefreshCw size={12} /></Button
+										>
+									{/if}
+								{/snippet}
+							</ArgInput>
 						{/if}
-						{#if stepsInputArgs?.isArgManuallySet(mod.id, argName)}
-							<div class="pt-6 mt-0.5">
-								<Button
-									on:click={() => {
-										plugIt(argName)
-									}}
-									size="sm"
-									variant="border"
-									color="light"
-									title="Re-evaluate input step"><RefreshCw size={14} /></Button
-								>
-							</div>
-						{/if}
-					</div>
+					</ResizeTransitionWrapper>
 				{/if}
 			{/each}
 		{/if}

package/package/components/ModulePreviewResultViewer.svelte

@@ -9,7 +9,6 @@ import { getStringError } from './copilot/chat/utils';
 import AiAgentLogViewer from './AIAgentLogViewer.svelte';
 let { lang, editor, diffEditor, loopStatus = undefined, scriptProgress = $bindable(undefined), testJob = undefined, mod, testIsLoading = false, disableMock = false, disableHistory = false, onUpdateMock, loadingJob = false, tagLabel = undefined } = $props();
 const { stepsInputArgs } = getContext('FlowEditorContext');
-let jobProgressReset = $state(() => { });
 let outputPickerInner = $state(undefined);
 export function getOutputPickerInner() {
     return outputPickerInner;
@@ -22,12 +21,7 @@ const preview = $derived.by(() => outputPickerInner?.getPreview?.());
 <Splitpanes horizontal>
 	<Pane size={65} minSize={10} class="text-sm text-tertiary">
 		{#if scriptProgress}
-			<JobProgressBar
-				job={testJob}
-				bind:scriptProgress
-				bind:reset={jobProgressReset}
-				compact={true}
-			/>
+			<JobProgressBar job={testJob} {scriptProgress} compact={true} />
 		{/if}
 
 		<OutputPickerInner

package/package/components/NextcloudSetting.svelte

@@ -25,8 +25,13 @@ function changeDomain(domain) {
     }
 }
 let enabled = $derived(value != undefined);
+let lastDomain = $state(value?.['domain']);
 $effect(() => {
-    changeDomain(value?.['domain']);
+    const currentDomain = value?.['domain'];
+    if (currentDomain && currentDomain !== lastDomain) {
+        lastDomain = currentDomain;
+        changeDomain(currentDomain);
+    }
 });
 </script>
 

package/package/components/NumberTypeNarrowing.svelte

@@ -2,6 +2,8 @@
 import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
 import { selectOptions } from './apps/editor/component';
+import Select from './select/Select.svelte';
+import TextInput from './text_input/TextInput.svelte';
 let { min = $bindable(), max = $bindable(), currency = $bindable(), currencyLocale = $bindable() } = $props();
 let minChecked = $state(min != undefined);
 let maxChecked = $state(max != undefined);
@@ -29,7 +31,11 @@ let maxChecked = $state(max != undefined);
 					options={{ right: 'Enabled' }}
 					size="xs"
 				/>
-			{/snippet} <input type="number" bind:value={min} disabled={!minChecked} />
+			{/snippet}
+			<TextInput
+				inputProps={{ type: 'number', disabled: !minChecked }}
+				bind:value={() => min?.toString(), (v) => (min = v ? parseInt(v) : undefined)}
+			/>
 		</Label>
 
 		<Label label="Max" class="w-full col-span-1 ">
@@ -53,31 +59,41 @@ let maxChecked = $state(max != undefined);
 					size="xs"
 				/>
 			{/snippet}
-			<input type="number" bind:value={max} disabled={!maxChecked} />
+			<TextInput
+				inputProps={{ type: 'number', disabled: !maxChecked }}
+				bind:value={() => max?.toString(), (v) => (max = v ? parseInt(v) : undefined)}
+			/>
 		</Label>
 	</div>
-	<div class="grid grid-cols-3 gap-4">
-		<Label label="Currency" class="w-full col-span-2">
+	<div class="flex gap-2">
+		<Label label="Currency" class=" col-span-2">
 			{#snippet header()}
 				<Tooltip light small>
 					Select a currency to display the number in. If a currency is selected, you can also select
 					a locale to format the number according to that locale.
 				</Tooltip>
 			{/snippet}
-			<select bind:value={currency}>
-				<option value={undefined}> No currency </option>
-				{#each selectOptions.currencyOptions as c}
-					<option value={c}>{c}</option>
-				{/each}
-			</select>
+			<Select
+				bind:value={
+					() => currency,
+					(v) => {
+						currency = v
+						if (!v) currencyLocale = undefined
+					}
+				}
+				items={selectOptions.currencyOptions.map((c) => ({ label: c, value: c }))}
+				placeholder="No currency"
+				clearable
+			/>
 		</Label>
 		<Label label="Currency locale" class="w-full">
-			<select bind:value={currencyLocale} disabled={!currency}>
-				<option value={undefined}> No locale </option>
-				{#each selectOptions.localeOptions as c}
-					<option value={c}>{c}</option>
-				{/each}
-			</select>
+			<Select
+				bind:value={currencyLocale}
+				items={selectOptions.localeOptions.map((c) => ({ label: c, value: c }))}
+				placeholder="No locale"
+				disabled={!currency}
+				clearable
+			/>
 		</Label>
 	</div>
 </div>