windmill-components 1.60.3 → 1.70.0

package/components/apps/components/helpers/RunnableComponent.svelte

@@ -1,10 +1,11 @@
-<script>import Alert from '../../../common/alert/Alert.svelte';
+<script>import { goto } from '$app/navigation';
+import Alert from '../../../common/alert/Alert.svelte';
 import SchemaForm from '../../../SchemaForm.svelte';
 import TestJobLoader from '../../../TestJobLoader.svelte';
 import { AppService } from '../../../../gen';
 import { defaultIfEmptyString, emptySchema, sendUserToast } from '../../../../utils';
 import { getContext, onMount } from 'svelte';
-import { fieldTypeToTsType, schemaToInputsSpec } from '../../utils';
+import { computeFields } from '../../editor/inlineScriptsPanel/utils';
 import InputValue from './InputValue.svelte';
 import RefreshButton from './RefreshButton.svelte';
 // Component props
@@ -15,11 +16,12 @@ export let extraQueryParams = {};
 export let autoRefresh = true;
 export let result = undefined;
 export let forceSchemaDisplay = false;
-export let noMinH = false;
 export let defaultUserInput = false;
 export let flexWrap = false;
 export let wrapperClass = '';
-const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, noBackend } = getContext('AppEditorContext');
+export let initializing = undefined;
+export let gotoUrl = undefined;
+const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, noBackend, errorByComponent, mode } = getContext('AppEditorContext');
 onMount(() => {
     if (autoRefresh) {
         $runnableComponents[id] = async () => {
@@ -76,7 +78,7 @@ async function loadSchemaAndInputsByName() {
         // Inline scripts directly provide the schema
         if (inlineScript) {
             const newSchema = inlineScript.schema;
-            const newFields = reloadInputs(newSchema);
+            const newFields = computeFields(newSchema, defaultUserInput, fields);
             if (JSON.stringify(newFields) !== JSON.stringify(fields)) {
                 setTimeout(() => {
                     fields = newFields;
@@ -85,35 +87,6 @@ async function loadSchemaAndInputsByName() {
         }
     }
 }
-// When the schema is loaded, we need to update the inputs spec
-// in order to render the inputs the component panel
-function reloadInputs(schema) {
-    let schemaCopy = JSON.parse(JSON.stringify(schema));
-    const result = {};
-    const newInputs = schemaToInputsSpec(schemaCopy, defaultUserInput);
-    if (!fields) {
-        return newInputs;
-    }
-    Object.keys(newInputs).forEach((key) => {
-        const newInput = newInputs[key];
-        const oldInput = fields[key];
-        // If the input is not present in the old inputs, add it
-        if (oldInput === undefined) {
-            result[key] = newInput;
-        }
-        else {
-            if (fieldTypeToTsType(newInput.fieldType) !== fieldTypeToTsType(oldInput.fieldType) ||
-                newInput.format !== oldInput.format ||
-                newInput.subFieldType !== oldInput.subFieldType) {
-                result[key] = newInput;
-            }
-            else {
-                result[key] = oldInput;
-            }
-        }
-    });
-    return result;
-}
 $: schemaStripped = runnable && stripSchema(fields);
 function stripSchema(inputs) {
     let schema = runnable?.type == 'runnableByName' ? runnable.inlineScript?.schema : runnable?.schema;
@@ -200,16 +173,20 @@ export async function runComponent() {
     await executeComponent();
 }
 let lastStartedAt = Date.now();
+function recordError(error) {
+    if (testJob) {
+        $errorByComponent[testJob.id] = {
+            error: error,
+            componentId: id
+        };
+    }
+}
+$: result?.error && recordError(result.error);
 </script>
 
 {#each Object.entries(fields ?? {}) as [key, v]}
 	{#if v.type != 'static' && v.type != 'user'}
-		<InputValue
-			{id}
-			input={fields[key]}
-			bind:value={runnableInputValues[key]}
-			row={extraQueryParams['row'] ?? {}}
-		/>
+		<InputValue {id} input={fields[key]} bind:value={runnableInputValues[key]} />
 	{/if}
 {/each}
 
@@ -222,6 +199,16 @@ let lastStartedAt = Date.now();
 				lastStartedAt = startedAt
 				outputs.result?.set(testJob?.result)
 				result = testJob.result
+
+				const previousJobId = Object.keys($errorByComponent).find(
+					(key) => $errorByComponent[key].componentId === id
+				)
+
+				if (previousJobId && !result?.error) {
+					delete $errorByComponent[previousJobId]
+					$errorByComponent = $errorByComponent
+				}
+				gotoUrl && gotoUrl != '' && result?.error == undefined && goto(gotoUrl)
 			}
 		}
 	}}
@@ -231,7 +218,7 @@ let lastStartedAt = Date.now();
 />
 
 <div class="h-full flex relative flex-row flex-wrap {wrapperClass}">
-	{#if autoRefresh === true}
+	{#if !initializing && autoRefresh === true}
 		<div class="flex absolute top-1 right-1">
 			<RefreshButton componentId={id} />
 		</div>
@@ -253,19 +240,21 @@ let lastStartedAt = Date.now();
 		<Alert type="warning" size="xs" class="mt-2 px-1" title="Missing runnable">
 			Please select a runnable
 		</Alert>
-	{:else if result?.error}
+	{:else if result?.error && $mode === 'preview'}
 		<div class="p-2">
 			<Alert type="error" title="Error during execution">
-				See "Debug Runs" on the top right for more details
-				<pre
-					title={JSON.stringify(result.error, null, 4)}
-					class=" mt-2 text-2xs whitespace-pre-wrap">{JSON.stringify(result.error, null, 4)}</pre
-				>
+				<div class="flex flex-col gap-2">
+					An error occured, please contact the app author.
+					<span class="font-semibold">Job id: {testJob?.id}</span>
+					<pre class=" whitespace-pre-wrap text-gray-900 bg-white border w-full p-4 text-xs"
+						>{JSON.stringify(result.error, null, 4)}
+				</pre>
+				</div>
 			</Alert>
 			<slot />
 		</div>
 	{:else}
-		<div class="block w-full h-full">
+		<div class="block grow w-full max-h-full">
 			<slot />
 		</div>
 	{/if}

package/components/apps/components/helpers/RunnableComponent.svelte.d.ts

@@ -9,10 +9,11 @@ declare const __propDef: {
         autoRefresh?: boolean | undefined;
         result?: any;
         forceSchemaDisplay?: boolean | undefined;
-        noMinH?: boolean | undefined;
         defaultUserInput?: boolean | undefined;
         flexWrap?: boolean | undefined;
         wrapperClass?: string | undefined;
+        initializing?: boolean | undefined;
+        gotoUrl?: string | undefined;
         runComponent?: (() => Promise<void>) | undefined;
     };
     events: {

package/components/apps/components/helpers/RunnableWrapper.svelte

@@ -5,7 +5,7 @@ import RunnableComponent from './RunnableComponent.svelte';
 export let componentInput;
 export let id;
 export let result = undefined;
-export let noMinH = false;
+export let initializing = true;
 export let extraQueryParams = {};
 export let autoRefresh = true;
 export let runnableComponent = undefined;
@@ -13,7 +13,11 @@ export let forceSchemaDisplay = false;
 export let defaultUserInput = false;
 export let flexWrap = false;
 export let runnableClass = '';
+export let goto = undefined;
 const { staticExporter, noBackend } = getContext('AppEditorContext');
+$: if (initializing && result) {
+    initializing = false;
+}
 if (noBackend && componentInput?.type == 'runnable') {
     result = componentInput?.['value'];
 }
@@ -29,6 +33,7 @@ function isRunnableDefined() {
 	<slot />
 {:else if componentInput.type === 'runnable' && isRunnableDefined()}
 	<RunnableComponent
+		gotoUrl={goto}
 		{flexWrap}
 		{defaultUserInput}
 		bind:this={runnableComponent}
@@ -39,7 +44,7 @@ function isRunnableDefined() {
 		{id}
 		{extraQueryParams}
 		{forceSchemaDisplay}
-		{noMinH}
+		{initializing}
 		wrapperClass={runnableClass}
 	>
 		<slot />

package/components/apps/components/helpers/RunnableWrapper.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         componentInput: AppInput | undefined;
         id: string;
         result?: any;
-        noMinH?: boolean | undefined;
+        initializing?: boolean | undefined;
         extraQueryParams?: Record<string, any> | undefined;
         autoRefresh?: boolean | undefined;
         runnableComponent?: RunnableComponent | undefined;
@@ -14,6 +14,7 @@ declare const __propDef: {
         defaultUserInput?: boolean | undefined;
         flexWrap?: boolean | undefined;
         runnableClass?: string | undefined;
+        goto?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/helpers/index.d.ts

@@ -0,0 +1,10 @@
+export { default as AlignWrapper } from './AlignWrapper.svelte';
+export { default as DebouncedInput } from './DebouncedInput.svelte';
+export { default as HiddenComponent } from './HiddenComponent.svelte';
+export { default as InputDefaultValue } from './InputDefaultValue.svelte';
+export { default as InputValue } from './InputValue.svelte';
+export { default as MissingConnectionWarning } from './MissingConnectionWarning.svelte';
+export { default as NonRunnableComponent } from './NonRunnableComponent.svelte';
+export { default as RefreshButton } from './RefreshButton.svelte';
+export { default as RunnableComponent } from './RunnableComponent.svelte';
+export { default as RunnableWrapper } from './RunnableWrapper.svelte';

package/components/apps/components/helpers/index.js

@@ -0,0 +1,10 @@
+export { default as AlignWrapper } from './AlignWrapper.svelte';
+export { default as DebouncedInput } from './DebouncedInput.svelte';
+export { default as HiddenComponent } from './HiddenComponent.svelte';
+export { default as InputDefaultValue } from './InputDefaultValue.svelte';
+export { default as InputValue } from './InputValue.svelte';
+export { default as MissingConnectionWarning } from './MissingConnectionWarning.svelte';
+export { default as NonRunnableComponent } from './NonRunnableComponent.svelte';
+export { default as RefreshButton } from './RefreshButton.svelte';
+export { default as RunnableComponent } from './RunnableComponent.svelte';
+export { default as RunnableWrapper } from './RunnableWrapper.svelte';

package/components/apps/components/icon.d.ts

@@ -0,0 +1 @@
+export declare function loadIcon(name: string): Promise<any>;

package/components/apps/components/icon.js

@@ -0,0 +1,18 @@
+import { toKebabCase } from '../utils';
+export async function loadIcon(name) {
+    let iconComponent;
+    try {
+        if (name) {
+            name = toKebabCase(name).replace(/([a-z])(\d)/i, '$1-$2');
+            iconComponent = (await import(`../../../../../node_modules/lucide-svelte/dist/svelte/icons/${name}.svelte`)).default;
+            return iconComponent;
+        }
+        else {
+            iconComponent = undefined;
+        }
+    }
+    catch (error) {
+        console.error(error);
+        iconComponent = undefined;
+    }
+}

package/components/apps/components/index.d.ts

@@ -0,0 +1,5 @@
+export * from './buttons';
+export * from './display';
+export * from './inputs';
+export * from './layout';
+export * from './helpers';

package/components/apps/components/index.js

@@ -0,0 +1,5 @@
+export * from './buttons';
+export * from './display';
+export * from './inputs';
+export * from './layout';
+export * from './helpers';

package/components/apps/components/{selectInputs → inputs}/AppCheckbox.svelte

@@ -8,14 +8,16 @@ export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
 const { worldStore } = getContext('AppEditorContext');
 export const staticOutputs = ['result'];
+let defaultValue = undefined;
 let labelValue = 'Default label';
-let value = false;
 // As the checkbox is a special case and has no input
 // we need to manually set the output
 $: outputs = $worldStore?.outputsById[id];
+$: defaultValue != undefined && outputs?.result.set(defaultValue);
 </script>
 
 <InputValue {id} input={configuration.label} bind:value={labelValue} />
+<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
 
 <AlignWrapper {horizontalAlignment} {verticalAlignment}>
 	<Toggle
@@ -23,7 +25,7 @@ $: outputs = $worldStore?.outputsById[id];
 			e?.stopPropagation()
 			window.dispatchEvent(new Event('pointerup'))
 		}}
-		bind:value
+		checked={defaultValue}
 		options={{ right: labelValue }}
 		on:change={(e) => {
 			outputs.result.set(e.detail)

package/components/apps/components/{dateInputs → inputs}/AppDateInput.svelte

@@ -1,5 +1,6 @@
 <script>import { getContext } from 'svelte';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputDefaultValue from '../helpers/InputDefaultValue.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 export let id;
 export let configuration;
@@ -11,15 +12,20 @@ let input;
 let labelValue = 'Title';
 let minValue = '';
 let maxValue = '';
+let defaultValue = undefined;
 $: outputs = $worldStore?.outputsById[id];
 function handleInput() {
     outputs?.result.set(input.value);
 }
+$: input && handleInput();
 </script>
 
 <InputValue {id} input={configuration.label} bind:value={labelValue} />
 <InputValue {id} input={configuration.minDate} bind:value={minValue} />
 <InputValue {id} input={configuration.maxDate} bind:value={maxValue} />
+<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
+
+<InputDefaultValue bind:input {defaultValue} />
 
 <AlignWrapper {verticalAlignment}>
 	<input

package/components/apps/components/inputs/AppFileInput.svelte

@@ -0,0 +1,34 @@
+<script>import { getContext } from 'svelte';
+import { FileInput } from '../../../common';
+import InputValue from '../helpers/InputValue.svelte';
+export let id;
+export let configuration;
+export const staticOutputs = ['result'];
+const { worldStore } = getContext('AppEditorContext');
+let acceptedFileTypes = undefined;
+let allowMultiple = undefined;
+let text = undefined;
+$: outputs = $worldStore?.outputsById[id];
+// Receives Base64 encoded strings from the input component
+async function handleChange(files) {
+    outputs?.result.set(files);
+}
+</script>
+
+<InputValue {id} input={configuration.acceptedFileTypes} bind:value={acceptedFileTypes} />
+<InputValue {id} input={configuration.allowMultiple} bind:value={allowMultiple} />
+<InputValue {id} input={configuration.text} bind:value={text} />
+
+<div class="w-full h-full p-1">
+	<FileInput
+		accept={acceptedFileTypes?.length ? acceptedFileTypes?.join(', ') : undefined}
+		multiple={allowMultiple}
+		convertToBase64
+		on:change={({ detail }) => {
+			handleChange(detail)
+		}}
+		class="w-full h-full"
+	>
+		{text}
+	</FileInput>
+</div>

package/components/apps/components/inputs/AppFileInput.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: Record<string, AppInput>;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppFileInputProps = typeof __propDef.props;
+export type AppFileInputEvents = typeof __propDef.events;
+export type AppFileInputSlots = typeof __propDef.slots;
+export default class AppFileInput extends SvelteComponentTyped<AppFileInputProps, AppFileInputEvents, AppFileInputSlots> {
+    get staticOutputs(): string[];
+}
+export {};

package/components/apps/components/inputs/AppNumberInput.svelte

@@ -0,0 +1,48 @@
+<script>import { getContext } from 'svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputDefaultValue from '../helpers/InputDefaultValue.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+export let id;
+export let configuration;
+export let verticalAlignment = undefined;
+export const staticOutputs = ['result'];
+const { worldStore } = getContext('AppEditorContext');
+let input;
+let defaultValue = undefined;
+let placeholder = undefined;
+let min = undefined;
+let max = undefined;
+let step = 1;
+$: outputs = $worldStore?.outputsById[id];
+function handleInput() {
+    const value = input?.value;
+    const num = isNaN(+value) ? null : +value;
+    outputs?.result.set(num);
+}
+$: input && handleInput();
+</script>
+
+<InputValue {id} input={configuration.step} bind:value={step} />
+<InputValue {id} input={configuration.min} bind:value={min} />
+<InputValue {id} input={configuration.max} bind:value={max} />
+<InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
+<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
+<InputDefaultValue bind:input {defaultValue} />
+
+<AlignWrapper {verticalAlignment}>
+	<input
+		bind:this={input}
+		on:input={handleInput}
+		on:focus={(e) => {
+			e?.stopPropagation()
+			window.dispatchEvent(new Event('pointerup'))
+		}}
+		{min}
+		{max}
+		{step}
+		type="number"
+		inputmode="numeric"
+		pattern="\d*"
+		{placeholder}
+	/>
+</AlignWrapper>

package/components/apps/components/inputs/AppRangeInput.svelte

@@ -0,0 +1,44 @@
+<script>import RangeSlider from 'svelte-range-slider-pips';
+import { getContext } from 'svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+import { Badge } from '../../../common';
+export let id;
+export let configuration;
+export let verticalAlignment = undefined;
+export const staticOutputs = ['result'];
+const { worldStore } = getContext('AppEditorContext');
+let min = 0;
+let max = 42;
+let step = 1;
+let values = [0, 0];
+$: outputs = $worldStore?.outputsById[id];
+$: outputs?.result.set(values);
+</script>
+
+<InputValue {id} input={configuration.step} bind:value={step} />
+<InputValue {id} input={configuration.min} bind:value={min} />
+<InputValue {id} input={configuration.max} bind:value={max} />
+<InputValue {id} input={configuration.defaultLow} bind:value={values[0]} />
+<InputValue {id} input={configuration.defaultHigh} bind:value={values[1]} />
+
+<AlignWrapper {verticalAlignment}>
+	<div class="flex flex-col w-full">
+		<div class="flex items-center w-full gap-1 px-1">
+			<span>{min}</span>
+			<div class="grow" on:pointerdown|stopPropagation>
+				<RangeSlider {step} range min={min ?? 0} max={max ?? 1} bind:values />
+				<!-- <DoubleRange bind:start bind:end /> -->
+			</div>
+			<span>{max}</span>
+		</div>
+		<div class="flex justify-between px-1">
+			<div>
+				<Badge color="blue">{values[0]}</Badge>
+			</div>
+			<div>
+				<Badge color="blue">{values[1]}</Badge>
+			</div>
+		</div>
+	</div>
+</AlignWrapper>

package/components/apps/components/inputs/AppRangeInput.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: Record<string, AppInput>;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        pointerdown: PointerEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppRangeInputProps = typeof __propDef.props;
+export type AppRangeInputEvents = typeof __propDef.events;
+export type AppRangeInputSlots = typeof __propDef.slots;
+export default class AppRangeInput extends SvelteComponentTyped<AppRangeInputProps, AppRangeInputEvents, AppRangeInputSlots> {
+    get staticOutputs(): string[];
+}
+export {};

package/components/apps/components/inputs/AppSelect.svelte

@@ -0,0 +1,90 @@
+<script>import { getContext } from 'svelte';
+import Select from 'svelte-select';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+export const staticOutputs = ['result'];
+export let id;
+export let configuration;
+export let horizontalAlignment = undefined;
+export let verticalAlignment = undefined;
+const { worldStore, connectingInput, selectedComponent } = getContext('AppEditorContext');
+let items;
+let multiple = false;
+let placeholder = 'Select an item';
+$: outputs = $worldStore?.outputsById[id];
+// $: outputs && handleOutputs()
+// function handleOutputs() {
+// 	value = outputs.result.peak()
+// }
+let value = outputs?.result.peak();
+$: items && handleItems();
+let listItems = [];
+function handleItems() {
+    listItems = Array.isArray(items)
+        ? items.map((item) => {
+            return {
+                label: item.label,
+                value: JSON.stringify(item.value)
+            };
+        })
+        : [];
+    const valuePeak = outputs?.result.peak();
+    if (!valuePeak) {
+        const value0 = items?.[0]?.['value'];
+        if (value0 != value && !items.includes(value0)) {
+            value = JSON.stringify(value0);
+            outputs?.result.set(value0);
+        }
+    }
+    else {
+        value = valuePeak;
+    }
+}
+function onChange(e) {
+    e?.stopPropagation();
+    window.dispatchEvent(new Event('pointerup'));
+    let result = undefined;
+    try {
+        result = JSON.parse(e.detail?.['value']);
+    }
+    catch (_) { }
+    outputs?.result.set(result);
+}
+</script>
+
+<InputValue {id} input={configuration.items} bind:value={items} />
+<InputValue {id} input={configuration.multiple} bind:value={multiple} />
+<InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
+
+<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+	<div class="app-select w-full" style="height: 34px" on:pointerdown|stopPropagation>
+		<Select
+			--height="34px"
+			{multiple}
+			on:clear={onChange}
+			on:change={onChange}
+			items={listItems}
+			{value}
+			{placeholder}
+			on:click={() => {
+				if (!$connectingInput.opened) {
+					$selectedComponent = id
+				}
+			}}
+			on:focus={() => {
+				$selectedComponent = id
+			}}
+			floatingConfig={{
+				strategy: 'fixed'
+			}}
+		/>
+	</div>
+</AlignWrapper>
+
+<style global>
+	:global(.app-select) :global(.value-container) {
+		padding: 0 !important;
+	}
+	:global(.svelte-select-list) {
+		z-index: 1000 !important;
+	}</style>

package/components/apps/components/{selectInputs → inputs}/AppSelect.svelte.d.ts

@@ -9,6 +9,8 @@ declare const __propDef: {
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
     };
     events: {
+        pointerdown: PointerEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/apps/components/{numberInputs → inputs}/AppSliderInputs.svelte

@@ -1,5 +1,5 @@
 <script>import { Badge } from '../../../common';
-import Range from '../../../Range.svelte';
+import RangeSlider from 'svelte-range-slider-pips';
 import { getContext } from 'svelte';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
@@ -7,31 +7,35 @@ export let id;
 export let configuration;
 export let verticalAlignment = undefined;
 export const staticOutputs = ['result'];
-const { worldStore } = getContext('AppEditorContext');
-let value;
+const { worldStore, selectedComponent } = getContext('AppEditorContext');
 let min = 0;
 let max = 42;
+let step = 1;
 $: outputs = $worldStore?.outputsById[id];
-$: if (value || !value) {
+let values = [outputs?.result.peak() ?? 0];
+$: values && handleValues();
+function handleValues() {
     // Disallow 'e' character in numbers
     // if(value && value.toString().includes('e')) {
     // 	value = +value.toString().replaceAll('e', '')
     // }
-    const num = isNaN(+value) ? null : +value;
+    const num = isNaN(+values[0]) ? null : +values[0];
     outputs?.result.set(num);
 }
 </script>
 
+<InputValue {id} input={configuration.step} bind:value={step} />
 <InputValue {id} input={configuration.min} bind:value={min} />
 <InputValue {id} input={configuration.max} bind:value={max} />
+<InputValue {id} input={configuration.defaultValue} bind:value={values[0]} />
 
 <AlignWrapper {verticalAlignment}>
-	<div class="flex w-full gap-1 px-1">
+	<div class="flex items-center w-full gap-1 px-1">
 		<span>{min}</span>
-		<div class="grow ">
-			<Range bind:value {min} {max} />
+		<div class="grow" on:pointerdown|stopPropagation={() => ($selectedComponent = id)}>
+			<RangeSlider {step} min={min ?? 0} max={max ?? 1} bind:values />
 		</div>
 		<span>{max}</span>
-		<span class="mx-2"><Badge large color="blue">{value}</Badge></span>
+		<span class="mx-2"><Badge large color="blue">{values[0]}</Badge></span>
 	</div>
 </AlignWrapper>