windmill-components 1.70.0 → 1.75.0

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

@@ -1,11 +1,13 @@
 <script>import { goto } from '$app/navigation';
 import Alert from '../../../common/alert/Alert.svelte';
+import Popover from '../../../Popover.svelte';
 import SchemaForm from '../../../SchemaForm.svelte';
 import TestJobLoader from '../../../TestJobLoader.svelte';
 import { AppService } from '../../../../gen';
-import { defaultIfEmptyString, emptySchema, sendUserToast } from '../../../../utils';
+import { classNames, defaultIfEmptyString, emptySchema, sendUserToast } from '../../../../utils';
+import { Bug, Loader2 } from 'lucide-svelte';
 import { getContext, onMount } from 'svelte';
-import { computeFields } from '../../editor/inlineScriptsPanel/utils';
+import { fade } from 'svelte/transition';
 import InputValue from './InputValue.svelte';
 import RefreshButton from './RefreshButton.svelte';
 // Component props
@@ -16,12 +18,14 @@ export let extraQueryParams = {};
 export let autoRefresh = true;
 export let result = undefined;
 export let forceSchemaDisplay = false;
-export let defaultUserInput = false;
 export let flexWrap = false;
 export let wrapperClass = '';
+export let wrapperStyle = '';
 export let initializing = undefined;
 export let gotoUrl = undefined;
-const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, noBackend, errorByComponent, mode } = getContext('AppEditorContext');
+export let gotoNewTab = undefined;
+export let render;
+const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, noBackend, errorByComponent, mode, stateId } = getContext('AppViewerContext');
 onMount(() => {
     if (autoRefresh) {
         $runnableComponents[id] = async () => {
@@ -30,7 +34,7 @@ onMount(() => {
         executeComponent(true);
     }
 });
-let args = {};
+let args = undefined;
 let testIsLoading = false;
 let runnableInputValues = {};
 let executeTimeout = undefined;
@@ -57,9 +61,7 @@ $: if (JSON.stringify(currentStaticValues) != JSON.stringify(lazyStaticValues))
     }
 }
 $: fields && (lazyStaticValues = computeStaticValues());
-$: runnableInputValues &&
-    extraQueryParams &&
-    args &&
+$: (runnableInputValues || extraQueryParams || args) &&
     autoRefresh &&
     testJobLoader &&
     setDebouncedExecute();
@@ -71,24 +73,8 @@ $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
 }
 $: outputs?.loading?.set(testIsLoading);
-$: runnable?.type === 'runnableByName' && loadSchemaAndInputsByName();
-async function loadSchemaAndInputsByName() {
-    if (runnable?.type === 'runnableByName') {
-        const { inlineScript } = runnable;
-        // Inline scripts directly provide the schema
-        if (inlineScript) {
-            const newSchema = inlineScript.schema;
-            const newFields = computeFields(newSchema, defaultUserInput, fields);
-            if (JSON.stringify(newFields) !== JSON.stringify(fields)) {
-                setTimeout(() => {
-                    fields = newFields;
-                }, 0);
-            }
-        }
-    }
-}
-$: schemaStripped = runnable && stripSchema(fields);
-function stripSchema(inputs) {
+$: schemaStripped = stripSchema(fields, $stateId);
+function stripSchema(inputs, s) {
     let schema = runnable?.type == 'runnableByName' ? runnable.inlineScript?.schema : runnable?.schema;
     try {
         schemaStripped = JSON.parse(JSON.stringify(schema));
@@ -135,7 +121,7 @@ async function executeComponent(noToast = false) {
                 staticRunnableInputs[k] = field.value;
             }
             else if (field?.type == 'user') {
-                nonStaticRunnableInputs[k] = args[k];
+                nonStaticRunnableInputs[k] = args?.[k];
             }
             else {
                 nonStaticRunnableInputs[k] = runnableInputValues[k];
@@ -208,7 +194,13 @@ $: result?.error && recordError(result.error);
 					delete $errorByComponent[previousJobId]
 					$errorByComponent = $errorByComponent
 				}
-				gotoUrl && gotoUrl != '' && result?.error == undefined && goto(gotoUrl)
+				if (gotoUrl && gotoUrl != '' && result?.error == undefined) {
+					if (gotoNewTab) {
+						window.open(gotoUrl, '_blank')
+					} else {
+						goto(gotoUrl)
+					}
+				}
 			}
 		}
 	}}
@@ -217,45 +209,61 @@ $: result?.error && recordError(result.error);
 	bind:this={testJobLoader}
 />
 
-<div class="h-full flex relative flex-row flex-wrap {wrapperClass}">
-	{#if !initializing && autoRefresh === true}
-		<div class="flex absolute top-1 right-1">
-			<RefreshButton componentId={id} />
-		</div>
-	{/if}
-	{#if schemaStripped && Object.keys(schemaStripped?.properties ?? {}).length > 0 && (autoRefresh || forceSchemaDisplay)}
-		<div class="px-2 h-fit min-h-0">
-			<SchemaForm
-				{flexWrap}
-				schema={schemaStripped}
-				bind:args
-				{disabledArgs}
-				shouldHideNoInputs
-				noVariablePicker
-			/>
-		</div>
-	{/if}
+{#if render}
+	<div class="h-full flex relative flex-row flex-wrap {wrapperClass}" style={wrapperStyle}>
+		{#if schemaStripped && Object.keys(schemaStripped?.properties ?? {}).length > 0 && (autoRefresh || forceSchemaDisplay)}
+			<div class="px-2 h-fit min-h-0">
+				<SchemaForm
+					{flexWrap}
+					schema={schemaStripped}
+					bind:args
+					{disabledArgs}
+					shouldHideNoInputs
+					noVariablePicker
+				/>
+			</div>
+		{/if}
 
-	{#if !runnable && autoRefresh}
-		<Alert type="warning" size="xs" class="mt-2 px-1" title="Missing runnable">
-			Please select a runnable
-		</Alert>
-	{:else if result?.error && $mode === 'preview'}
-		<div class="p-2">
-			<Alert type="error" title="Error during execution">
-				<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>
+		{#if !runnable && autoRefresh}
+			<Alert type="warning" size="xs" class="mt-2 px-1" title="Missing runnable">
+				Please select a runnable
 			</Alert>
-			<slot />
-		</div>
-	{:else}
-		<div class="block grow w-full max-h-full">
-			<slot />
-		</div>
-	{/if}
-</div>
+		{:else if result?.error && $mode === 'preview'}
+			<div
+				title="Error"
+				class={classNames(
+					'text-red-500 px-1 text-2xs py-0.5 font-bold w-fit absolute border border-red-500 -bottom-2  shadow left-1/2 transform -translate-x-1/2 z-50 cursor-pointer',
+					'bg-red-100/80'
+				)}
+			>
+				<Popover notClickable placement="bottom" popupClass="!bg-white border w-96">
+					<Bug size={14} />
+					<span slot="text">
+						<div class="bg-white">
+							<Alert type="error" title="Error during execution">
+								<div class="flex flex-col gap-2">
+									An error occured, please contact the app author.
+									<span class="font-semibold">Job id: {testJob?.id}</span>
+								</div>
+							</Alert>
+						</div>
+					</span>
+				</Popover>
+			</div>
+			<div class="block grow w-full max-h-full border border-red-300 bg-red-50 relative">
+				<slot />
+			</div>
+		{:else}
+			<div class="block grow w-full max-h-full">
+				<slot />
+			</div>
+		{/if}
+		{#if !initializing && autoRefresh === true}
+			<div class="flex absolute top-1 right-1 z-50">
+				<RefreshButton componentId={id} />
+			</div>
+		{/if}
+	</div>
+{:else}
+	<div class="w-full h-full" />
+{/if}

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

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

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

@@ -10,11 +10,13 @@ export let extraQueryParams = {};
 export let autoRefresh = true;
 export let runnableComponent = undefined;
 export let forceSchemaDisplay = false;
-export let defaultUserInput = false;
 export let flexWrap = false;
 export let runnableClass = '';
+export let runnableStyle = '';
 export let goto = undefined;
-const { staticExporter, noBackend } = getContext('AppEditorContext');
+export let gotoNewTab = undefined;
+export let render;
+const { staticExporter, noBackend } = getContext('AppViewerContext');
 $: if (initializing && result) {
     initializing = false;
 }
@@ -34,10 +36,10 @@ function isRunnableDefined() {
 {:else if componentInput.type === 'runnable' && isRunnableDefined()}
 	<RunnableComponent
 		gotoUrl={goto}
+		{gotoNewTab}
 		{flexWrap}
-		{defaultUserInput}
 		bind:this={runnableComponent}
-		bind:fields={componentInput.fields}
+		fields={componentInput.fields}
 		bind:result
 		runnable={componentInput.runnable}
 		{autoRefresh}
@@ -46,11 +48,13 @@ function isRunnableDefined() {
 		{forceSchemaDisplay}
 		{initializing}
 		wrapperClass={runnableClass}
+		wrapperStyle={runnableStyle}
+		{render}
 	>
 		<slot />
 	</RunnableComponent>
 {:else}
-	<NonRunnableComponent bind:result {id} {componentInput}>
+	<NonRunnableComponent {render} bind:result {id} {componentInput}>
 		<slot />
 	</NonRunnableComponent>
 {/if}

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

@@ -11,10 +11,12 @@ declare const __propDef: {
         autoRefresh?: boolean | undefined;
         runnableComponent?: RunnableComponent | undefined;
         forceSchemaDisplay?: boolean | undefined;
-        defaultUserInput?: boolean | undefined;
         flexWrap?: boolean | undefined;
         runnableClass?: string | undefined;
+        runnableStyle?: string | undefined;
         goto?: string | undefined;
+        gotoNewTab?: boolean | undefined;
+        render: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/inputs/AppCheckbox.svelte

@@ -1,12 +1,15 @@
 <script>import Toggle from '../../../Toggle.svelte';
 import { getContext } from 'svelte';
+import { concatCustomCss } from '../../utils';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 export let id;
 export let configuration;
 export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
-const { worldStore } = getContext('AppEditorContext');
+export let customCss = undefined;
+export let render;
+const { app, worldStore } = getContext('AppViewerContext');
 export const staticOutputs = ['result'];
 let defaultValue = undefined;
 let labelValue = 'Default label';
@@ -14,12 +17,13 @@ let labelValue = 'Default label';
 // we need to manually set the output
 $: outputs = $worldStore?.outputsById[id];
 $: defaultValue != undefined && outputs?.result.set(defaultValue);
+$: css = concatCustomCss($app.css?.checkboxcomponent, customCss);
 </script>
 
 <InputValue {id} input={configuration.label} bind:value={labelValue} />
 <InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
 
-<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+<AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
 	<Toggle
 		on:pointerdown={(e) => {
 			e?.stopPropagation()
@@ -27,6 +31,8 @@ $: defaultValue != undefined && outputs?.result.set(defaultValue);
 		}}
 		checked={defaultValue}
 		options={{ right: labelValue }}
+		textClass={css?.text?.class ?? ''}
+		textStyle={css?.text?.style ?? ''}
 		on:change={(e) => {
 			outputs.result.set(e.detail)
 		}}

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

@@ -1,11 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         configuration: Record<string, AppInput>;
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        customCss?: ComponentCustomCSS<'text'> | undefined;
+        render: boolean;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/inputs/AppDateInput.svelte

@@ -1,23 +1,28 @@
 <script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { concatCustomCss } from '../../utils';
 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 inputType;
 export let verticalAlignment = undefined;
 export const staticOutputs = ['result'];
-const { worldStore } = getContext('AppEditorContext');
-let input;
+export let customCss = undefined;
+export let render;
+const { app, worldStore, selectedComponent } = getContext('AppViewerContext');
 let labelValue = 'Title';
 let minValue = '';
 let maxValue = '';
 let defaultValue = undefined;
+let value = undefined;
 $: outputs = $worldStore?.outputsById[id];
-function handleInput() {
-    outputs?.result.set(input.value);
+$: handleDefault(defaultValue);
+$: outputs?.result.set(value);
+function handleDefault(defaultValue) {
+    value = defaultValue;
 }
-$: input && handleInput();
+$: css = concatCustomCss($app.css?.dateinputcomponent, customCss);
 </script>
 
 <InputValue {id} input={configuration.label} bind:value={labelValue} />
@@ -25,16 +30,18 @@ $: input && handleInput();
 <InputValue {id} input={configuration.maxDate} bind:value={maxValue} />
 <InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
 
-<InputDefaultValue bind:input {defaultValue} />
-
-<AlignWrapper {verticalAlignment}>
-	<input
-		type={inputType}
-		bind:this={input}
-		on:input={handleInput}
-		min={minValue}
-		max={maxValue}
-		placeholder="Type..."
-		class="h-full"
-	/>
+<AlignWrapper {render} {verticalAlignment}>
+	{#if inputType === 'date'}
+		<input
+			on:focus={() => ($selectedComponent = id)}
+			on:pointerdown|stopPropagation
+			type="date"
+			bind:value
+			min={minValue}
+			max={maxValue}
+			placeholder="Type..."
+			class={twMerge('mx-0.5', css?.input?.class ?? '')}
+			style={css?.input?.style ?? ''}
+		/>
+	{/if}
 </AlignWrapper>

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

@@ -1,14 +1,19 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         configuration: Record<string, AppInput>;
-        inputType: 'date' | 'time' | 'datetime-local';
+        inputType: 'date';
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         staticOutputs?: string[] | undefined;
+        customCss?: ComponentCustomCSS<'input'> | undefined;
+        render: boolean;
     };
     events: {
+        pointerdown: PointerEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

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

@@ -1,10 +1,14 @@
 <script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
 import { FileInput } from '../../../common';
+import { concatCustomCss } from '../../utils';
 import InputValue from '../helpers/InputValue.svelte';
 export let id;
 export let configuration;
 export const staticOutputs = ['result'];
-const { worldStore } = getContext('AppEditorContext');
+export let customCss = undefined;
+export let render;
+const { app, worldStore } = getContext('AppViewerContext');
 let acceptedFileTypes = undefined;
 let allowMultiple = undefined;
 let text = undefined;
@@ -13,22 +17,26 @@ $: outputs = $worldStore?.outputsById[id];
 async function handleChange(files) {
     outputs?.result.set(files);
 }
+$: css = concatCustomCss($app.css?.fileinputcomponent, customCss);
 </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>
+{#if render}
+	<div class="w-full h-full p-1">
+		<FileInput
+			accept={acceptedFileTypes?.length ? acceptedFileTypes?.join(', ') : undefined}
+			multiple={allowMultiple}
+			convertTo="base64"
+			on:change={({ detail }) => {
+				handleChange(detail)
+			}}
+			class={twMerge('w-full h-full', css?.container?.class)}
+			style={css?.container?.style}
+		>
+			{text}
+		</FileInput>
+	</div>
+{/if}

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

@@ -1,10 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         configuration: Record<string, AppInput>;
         staticOutputs?: string[] | undefined;
+        customCss?: ComponentCustomCSS<'container'> | undefined;
+        render: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/inputs/AppMultiSelect.svelte

@@ -0,0 +1,82 @@
+<script>import { getContext } from 'svelte';
+import Select from 'svelte-select';
+import { concatCustomCss } from '../../utils';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+import { SELECT_INPUT_DEFAULT_STYLE } from '../../../../defaults';
+export const staticOutputs = ['result'];
+export let id;
+export let configuration;
+export let horizontalAlignment = undefined;
+export let verticalAlignment = undefined;
+export let customCss = undefined;
+export let render;
+const { app, worldStore, connectingInput, selectedComponent } = getContext('AppViewerContext');
+let items;
+let placeholder = 'Select an item';
+$: outputs = $worldStore?.outputsById[id];
+// $: outputs && handleOutputs()
+// function handleOutputs() {
+// 	value = outputs.result.peak()
+// }
+let value = outputs?.result.peak();
+$: labels && handleItems();
+let labels = [];
+function handleItems() {
+    if (labels) {
+        items = labels?.map((label) => {
+            return {
+                label,
+                value: label
+            };
+        });
+    }
+}
+$: value && outputs?.result.set(value.map((v) => v.value));
+$: css = concatCustomCss($app.css?.selectcomponent, customCss);
+</script>
+
+<InputValue {id} input={configuration.items} bind:value={labels} />
+<InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
+
+<AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
+	<div class="app-select w-full mx-0.5" style="height: 34px" on:pointerdown|stopPropagation>
+		{#if !value || Array.isArray(value)}
+			<Select
+				--border-radius="0"
+				--border-color="#999"
+				multiple
+				on:change={(e) => e.stopPropagation()}
+				{items}
+				class={css?.input?.class ?? ''}
+				inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
+				containerStyles={'border-color: #999;' +
+					SELECT_INPUT_DEFAULT_STYLE.containerStyles +
+					css?.input?.style}
+				bind:value
+				{placeholder}
+				on:click={() => {
+					if (!$connectingInput.opened) {
+						$selectedComponent = id
+					}
+				}}
+				on:focus={() => {
+					$selectedComponent = id
+				}}
+				floatingConfig={{
+					strategy: 'fixed'
+				}}
+			/>
+		{:else}
+			Value {value} is not an array
+		{/if}
+	</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/inputs/AppMultiSelect.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
+declare const __propDef: {
+    props: {
+        staticOutputs?: string[] | undefined;
+        id: string;
+        configuration: Record<string, AppInput>;
+        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        customCss?: ComponentCustomCSS<'input'> | undefined;
+        render: boolean;
+    };
+    events: {
+        pointerdown: PointerEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppMultiSelectProps = typeof __propDef.props;
+export type AppMultiSelectEvents = typeof __propDef.events;
+export type AppMultiSelectSlots = typeof __propDef.slots;
+export default class AppMultiSelect extends SvelteComponentTyped<AppMultiSelectProps, AppMultiSelectEvents, AppMultiSelectSlots> {
+    get staticOutputs(): string[];
+}
+export {};

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

@@ -1,25 +1,28 @@
 <script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { concatCustomCss } from '../../utils';
 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;
+export let customCss = undefined;
+export let render;
+const { app, worldStore, selectedComponent } = getContext('AppViewerContext');
 let defaultValue = undefined;
 let placeholder = undefined;
+let value = 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);
+$: handleDefault(defaultValue);
+$: outputs?.result.set(value);
+function handleDefault(defaultValue) {
+    value = defaultValue;
 }
-$: input && handleInput();
+$: css = concatCustomCss($app.css?.numberinputcomponent, customCss);
 </script>
 
 <InputValue {id} input={configuration.step} bind:value={step} />
@@ -27,16 +30,17 @@ $: input && handleInput();
 <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}>
+<AlignWrapper {render} {verticalAlignment}>
 	<input
-		bind:this={input}
-		on:input={handleInput}
-		on:focus={(e) => {
-			e?.stopPropagation()
-			window.dispatchEvent(new Event('pointerup'))
-		}}
+		on:pointerdown|stopPropagation
+		on:focus={() => ($selectedComponent = id)}
+		class={twMerge(
+			'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
+			css?.input?.class ?? ''
+		)}
+		style={css?.input?.style ?? ''}
+		bind:value
 		{min}
 		{max}
 		{step}