windmill-components 1.623.2 → 1.655.0

package/package/components/schema/EditableSchemaWrapper.svelte

@@ -1,31 +1,40 @@
 <script lang="ts">import { twMerge } from 'tailwind-merge';
 import EditableSchemaForm from '../EditableSchemaForm.svelte';
-import Toggle from '../Toggle.svelte';
 import { emptySchema, validateFileExtension } from '../../utils';
 import { Alert } from '../common';
 import AddPropertyV2 from './AddPropertyV2.svelte';
 import { Plus } from 'lucide-svelte';
 import Select from '../select/Select.svelte';
 import { safeSelectItems } from '../select/utils.svelte';
-let { schema = $bindable(), uiOnly = false, noPreview = false, fullHeight = true, formatExtension = $bindable(undefined), customUi } = $props();
-let resourceIsTextFile = $state(false);
+import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
+let { schema = $bindable(), uiOnly = false, noPreview = false, fullHeight = true, formatExtension = $bindable(undefined), isFileset = $bindable(undefined), customUi } = $props();
+let resourceMode = $state('schema');
 let addPropertyComponent = $state(undefined);
 let editableSchemaForm = $state(undefined);
 $effect(() => {
-    if (!resourceIsTextFile && formatExtension !== undefined) {
-        formatExtension = undefined;
+    if (resourceMode === 'schema') {
+        if (formatExtension !== undefined) {
+            formatExtension = undefined;
+        }
+        if (isFileset) {
+            isFileset = undefined;
+        }
     }
 });
 let invalidExtension = $derived(formatExtension && formatExtension != ''
     ? !validateFileExtension(formatExtension ?? 'txt')
     : false);
-function switchResourceIsFile() {
-    if (!resourceIsTextFile) {
+function switchResourceMode(mode) {
+    resourceMode = mode;
+    if (mode === 'schema') {
         schema = emptySchema();
         formatExtension = undefined;
+        isFileset = undefined;
     }
-    else {
+    else if (mode === 'file') {
         formatExtension = '';
+        isFileset = undefined;
         schema = emptySchema();
         schema.order = ['content'];
         schema.properties = {
@@ -35,6 +44,11 @@ function switchResourceIsFile() {
             }
         };
     }
+    else if (mode === 'fileset') {
+        formatExtension = undefined;
+        isFileset = true;
+        schema = emptySchema();
+    }
 }
 let suggestedFileExtensions = $state([
     'json',
@@ -50,7 +64,7 @@ let suggestedFileExtensions = $state([
 ]);
 </script>
 
-{#if !resourceIsTextFile}
+{#if resourceMode === 'schema'}
 	<div
 		class={twMerge(
 			fullHeight ? 'h-full' : 'h-80',
@@ -108,7 +122,7 @@ let suggestedFileExtensions = $state([
 		</EditableSchemaForm>
 	</div>
 {/if}
-{#if resourceIsTextFile}
+{#if resourceMode === 'file'}
 	<label
 		for="format-extension"
 		class="text-xs font-semibold text-emphasis whitespace-nowrap flex items-center gap-4"
@@ -130,19 +144,26 @@ let suggestedFileExtensions = $state([
 		</Alert>
 	{:else if formatExtension && formatExtension !== ''}
 		<Alert title={`Example: my_file.${formatExtension}`} type="info">
-			The <span class="font-bold font-mono"> .{formatExtension} </span> extension will be used to infer
-			the format when displaying the content and this is also how the resource will appear when pulling
-			via the CLI.
+			The <span class="font-bold font-mono"> .{formatExtension} </span> extension will be used to
+			infer the format when displaying the content and this is also how the resource will appear
+			when pulling via the CLI.
 		</Alert>
 		<div></div>
 	{/if}
 {/if}
-<Toggle
-	bind:checked={resourceIsTextFile}
-	options={{
-		right: 'This resource type represents a plain text file (clears current schema)',
-		rightTooltip:
-			'A text file such as a config file, template, or any other file format that contains plain text'
-	}}
-	on:change={() => switchResourceIsFile()}
-/>
+{#if resourceMode === 'fileset'}
+	<Alert title="Fileset resource type" type="info">
+		This resource type represents a collection of files. Each file is identified by its relative
+		path and contains text content. In the CLI, filesets are stored as directories.
+	</Alert>
+{/if}
+<ToggleButtonGroup
+	selected={resourceMode}
+	onSelected={(mode) => switchResourceMode(mode)}
+>
+	{#snippet children({ item })}
+		<ToggleButton value="schema" label="JSON" {item} size="sm" />
+		<ToggleButton value="file" label="File" {item} size="sm" />
+		<ToggleButton value="fileset" label="Fileset" {item} size="sm" />
+	{/snippet}
+</ToggleButtonGroup>

package/package/components/schema/EditableSchemaWrapper.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { EditableSchemaWrapperProps } from './editable_schema_wrapper';
-declare const EditableSchemaWrapper: import("svelte").Component<EditableSchemaWrapperProps, {}, "schema" | "formatExtension">;
+declare const EditableSchemaWrapper: import("svelte").Component<EditableSchemaWrapperProps, {}, "schema" | "formatExtension" | "isFileset">;
 type EditableSchemaWrapper = ReturnType<typeof EditableSchemaWrapper>;
 export default EditableSchemaWrapper;

package/package/components/schema/FlowPropertyEditor.svelte

@@ -123,11 +123,7 @@ let customObjectSelected = $state(format?.startsWith('jsonschema-') ? 'json-sche
 			<div class="flex flex-row gap-2 items-center ml-1 mt-4 mb-2">
 				<span class="font-semibold text-sm">{oneOfSelected}</span>
 
-				<Popover
-					floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
-					containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
-					closeButton
-				>
+				<Popover floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }} closeButton>
 					{#snippet trigger()}
 						<Button
 							size="xs2"

package/package/components/schema/FlowPropertyEditor.svelte.d.ts

@@ -47,6 +47,6 @@ declare const FlowPropertyEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     requiredChange: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "disabled" | "format" | "order" | "properties" | "oneOf" | "defaultValue" | "nullable" | "showExpr" | "requiredProperty">;
+}, {}, {}, "disabled" | "format" | "order" | "defaultValue" | "properties" | "oneOf" | "nullable" | "showExpr" | "requiredProperty">;
 type FlowPropertyEditor = InstanceType<typeof FlowPropertyEditor>;
 export default FlowPropertyEditor;

package/package/components/schema/PropertyEditor.svelte

@@ -180,6 +180,7 @@ $effect(() => {
 								bind:max={extra['max']}
 								bind:currency={extra['currency']}
 								bind:currencyLocale={extra['currencyLocale']}
+								bind:seconds={extra['seconds']}
 							/>
 						{/if}
 					</div>

package/package/components/schema/RunningJobSchemaPicker.svelte

@@ -2,18 +2,15 @@
 import Skeleton from '../common/skeleton/Skeleton.svelte';
 import { JobService } from '../../gen/index.js';
 import { workspaceStore } from '../../stores';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 import { ExternalLink } from 'lucide-svelte';
 import { base } from '../../base';
 import { Cell, Row } from '../table';
 import { twMerge } from 'tailwind-merge';
-export let job;
-export let selected = false;
-export let payloadData = undefined;
 const dispatch = createEventDispatcher();
-export let hovering = false;
-let loadingArgs = true;
-loadArgsFromRunningJob(job.id);
+let { job, selected = false, payloadData = $bindable(undefined), hovering = $bindable(false) } = $props();
+let loadingArgs = $state(true);
+loadArgsFromRunningJob(untrack(() => job).id);
 async function loadArgsFromRunningJob(id) {
     if (!id)
         return;
@@ -44,30 +41,34 @@ async function loadArgsFromRunningJob(id) {
 		)}
 		on:hover={(e) => (hovering = e.detail ? true : false)}
 	>
-		<SchemaPickerRow {payloadData} date={job.created_at} {hovering}>
-			<svelte:fragment slot="start">
-				<div class="center-center">
-					<div
-						class={twMerge(
-							'rounded-full w-2 h-2 animate-pulse',
-							job.suspend ? 'bg-violet-400' : 'bg-orange-400'
-						)}
-						title="Running"
-					></div>
-				</div>
-			</svelte:fragment>
-			<svelte:fragment slot="extra">
-				<div class="center-center {hovering ? '' : '!hidden'}">
-					<a
-						target="_blank"
-						href="{base}/run/{job.id}?workspace={$workspaceStore}"
-						class="text-right float-right text-secondary"
-						title="See run detail in a new tab"
-					>
-						<ExternalLink size={16} />
-					</a>
-				</div>
-			</svelte:fragment>
+		<SchemaPickerRow {payloadData} date={job.started_at} {hovering}>
+			{#snippet start()}
+					
+					<div class="center-center">
+						<div
+							class={twMerge(
+								'rounded-full w-2 h-2 animate-pulse',
+								job.suspend ? 'bg-violet-400' : 'bg-orange-400'
+							)}
+							title="Running"
+						></div>
+					</div>
+				
+					{/snippet}
+			{#snippet extra()}
+					
+					<div class="center-center {hovering ? '' : '!hidden'}">
+						<a
+							target="_blank"
+							href="{base}/run/{job.id}?workspace={$workspaceStore}"
+							class="text-right float-right text-secondary"
+							title="See run detail in a new tab"
+						>
+							<ExternalLink size={16} />
+						</a>
+					</div>
+				
+					{/snippet}
 		</SchemaPickerRow>
 	</Row>
 {/if}

package/package/components/schema/RunningJobSchemaPicker.svelte.d.ts

@@ -1,3 +1,9 @@
+interface Props {
+    job: any;
+    selected?: boolean;
+    payloadData?: any | undefined;
+    hovering?: boolean;
+}
 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;
@@ -11,15 +17,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const RunningJobSchemaPicker: $$__sveltets_2_IsomorphicComponent<{
-    job: any;
-    selected?: boolean;
-    payloadData?: any | undefined;
-    hovering?: boolean;
-}, {
+declare const RunningJobSchemaPicker: $$__sveltets_2_IsomorphicComponent<Props, {
     select: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "hovering" | "payloadData">;
 type RunningJobSchemaPicker = InstanceType<typeof RunningJobSchemaPicker>;
 export default RunningJobSchemaPicker;

package/package/components/schema/SchemaPickerRow.svelte

@@ -16,10 +16,10 @@ let objectViewerLoaded = $state(false);
 let popoverFullyOpened = $state(false);
 let popoverOpenTimeout = null;
 const dispatch = createEventDispatcher();
-const payloadTooBigForPreview = payloadData != 'WINDMILL_TOO_BIG' && isObjectTooBig(payloadData);
-const isTooBig = payloadData === 'WINDMILL_TOO_BIG' || payloadTooBigForPreview;
+const payloadTooBigForPreview = untrack(() => payloadData) != 'WINDMILL_TOO_BIG' && isObjectTooBig(untrack(() => payloadData));
+const isTooBig = untrack(() => payloadData) === 'WINDMILL_TOO_BIG' || payloadTooBigForPreview;
 const floatingConfig = {
-    placement,
+    placement: untrack(() => placement),
     strategy: 'fixed',
     offset: { mainAxis: 4 },
     gutter: 0,

package/package/components/schema/editable_schema_wrapper.d.ts

@@ -5,6 +5,7 @@ export type EditableSchemaWrapperProps = {
     noPreview?: boolean;
     fullHeight?: boolean;
     formatExtension?: string | undefined;
+    isFileset?: boolean | undefined;
     customUi?: {
         noAddPopover?: boolean;
     };

package/package/components/scriptEditor/LogPanel.svelte

@@ -36,7 +36,14 @@ function closeDrawer() {
     drawerOpen = false;
 }
 function asWorkflowStatus(x) {
-    return x;
+    if (!x || typeof x !== 'object')
+        return {};
+    const result = {};
+    for (const [k, v] of Object.entries(x)) {
+        if (!k.startsWith('_'))
+            result[k] = v;
+    }
+    return result;
 }
 let forceJson = $state(false);
 </script>
@@ -71,7 +78,9 @@ let forceJson = $state(false);
 		{#if showCaptures && customUi?.disableTriggerCaptures !== true}
 			<Tab value="captures" label="Trigger captures" />
 		{/if}
-		<Tab value="tracing" label="Tracing" />
+		{#if customUi?.disableTracing !== true}
+			<Tab value="tracing" label="Tracing" />
+		{/if}
 
 		{#snippet content()}
 			<div class="grow min-h-0">

package/package/components/script_builder.d.ts

@@ -13,7 +13,7 @@ export interface ScriptBuilderProps {
     disableAi?: boolean;
     fullyLoaded?: boolean;
     initialPath?: string;
-    template?: 'docker' | 'bunnative' | 'script';
+    template?: 'docker' | 'bunnative' | 'claudesandbox' | 'script';
     initialArgs?: Record<string, any>;
     lockedLanguage?: boolean;
     showMeta?: boolean;

package/package/components/scripts/CreateActionsScript.svelte

@@ -4,7 +4,6 @@ import { base } from '../../base';
 let { aiId, aiDescription } = $props();
 </script>
 
-<!-- Buttons -->
 <div class="flex flex-row gap-2">
 	<Button
 		id="create-script-button"

package/package/components/search/GlobalSearchModal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { onDestroy, onMount, tick, untrack } from 'svelte';
-import { AppService, FlowService, RawAppService, ScriptService } from '../../gen';
+import { AppService, FlowService, ScriptService } from '../../gen';
 import { clickOutside, isMac, scroll_into_view_if_needed_polyfill } from '../../utils';
 import { AlertTriangle, BoxesIcon, CalendarIcon, Code2Icon, Database, DollarSignIcon, HomeIcon, LayoutDashboardIcon, MailIcon, PlayIcon, Route, Search, SearchCode, Unplug, WandSparkles } from 'lucide-svelte';
 import Portal from '../Portal.svelte';
@@ -389,7 +389,6 @@ async function fetchCombinedItems() {
         withoutDescription: true
     });
     const apps = await AppService.listApps({ workspace: $workspaceStore });
-    const raw_apps = await RawAppService.listRawApps({ workspace: $workspaceStore });
     let combinedItems = [
         ...flows.map((x) => ({
             ...x,
@@ -408,12 +407,6 @@ async function fetchCombinedItems() {
             type: 'app',
             time: new Date(x.edited_at).getTime(),
             search_id: x.path
-        })),
-        ...raw_apps.map((x) => ({
-            ...x,
-            type: 'raw_app',
-            time: new Date(x.edited_at).getTime(),
-            search_id: x.path
         }))
     ].sort((a, b) => (a.starred != b.starred ? (a.starred ? -1 : 1) : a.time - b.time > 0 ? -1 : 1));
     return combinedItems;

package/package/components/search/QuickMenuItem.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { isMac } from '../../utils';
-import { onDestroy, onMount } from 'svelte';
+import { onDestroy, onMount, untrack } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 // const dispatch = createEventDispatcher()
 onMount(() => {
@@ -20,7 +20,7 @@ async function handleKeydown(event) {
     }
 }
 let { hovered = false, id, label = '', icon = undefined, shortcutKey = undefined, containerClass = undefined, mouseMoved = $bindable(false), kbdClass = $bindable(''), small = true, itemReplacement, onselect = () => { }, onhover = () => { }, onkeyboardSpecificSelect } = $props();
-if (small) {
+if (untrack(() => small)) {
     kbdClass = twMerge(kbdClass, '!text-[10px]  px-1', false && isMac() ? '!text-lg ' : 'text-xs', 'leading-none');
 }
 else {

package/package/components/search/RunsSearch.svelte

@@ -211,7 +211,11 @@ async function loadMoreJobs(s, paginationOffset) {
 					<div class="text-sm">There were no completed runs that match your query</div>
 				{/if}
 				<div class="text-sm">
-					Note that new runs might take a while to become searchable (by default ~5min)
+					Note that new runs might take a while to become searchable (by default ~5min).
+					{#if indexMetadata?.max_index_time_window_secs}
+						Search only covers the last {Math.round(indexMetadata.max_index_time_window_secs / 86400)} day(s),
+						configurable in instance settings under Indexer.
+					{/if}
 				</div>
 				{#if !$enterpriseLicense}
 					<div class="py-6"></div>

package/package/components/select/GenericDropdown.svelte

@@ -0,0 +1,116 @@
+<script lang="ts" generics="T">import { deepEqual } from 'fast-equals';
+import ConditionalPortal from '../common/drawer/ConditionalPortal.svelte';
+import { untrack } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { useReducedMotion } from '../../svelte5Utils.svelte';
+import { watch } from 'runed';
+let { listAutoWidth = true, strictWidth = false, disablePortal = false, open, disabled = false, class: className = '', innerClass = '', maxHeight = 256, getInputRect, children } = $props();
+let listEl = $state();
+let dropdownPos = $state(computeDropdownPos());
+let reducedMotion = useReducedMotion();
+function computeDropdownPos() {
+    if (!getInputRect || !listEl)
+        return { width: 0, height: 0, x: 0, y: 0, isBelow: true };
+    let inputR = getInputRect();
+    const listR = listEl.getBoundingClientRect();
+    const fitsBelow = inputR.y + inputR.height + listR.height <= window.innerHeight;
+    const spaceBelow = window.innerHeight - (inputR.y + inputR.height);
+    const spaceAbove = inputR.y;
+    const isBelow = fitsBelow || spaceBelow >= spaceAbove;
+    let [x, y] = disablePortal ? [0, 0] : [inputR.x, inputR.y];
+    if (isBelow)
+        return { width: inputR.width, height: listR.height, x: x, y: y + inputR.height, isBelow };
+    else {
+        return { width: inputR.width, height: listR.height, x: x, y: y - listR.height, isBelow };
+    }
+}
+$effect(() => {
+    function updateDropdownPos() {
+        let nPos = computeDropdownPos();
+        if (!deepEqual(nPos, dropdownPos))
+            dropdownPos = nPos;
+        if (open)
+            requestAnimationFrame(updateDropdownPos);
+    }
+    if (open)
+        untrack(() => updateDropdownPos());
+});
+// We do not want to render the dropdown when it is closed for performance reasons
+// but we want to keep it in the DOM for a short time to allow for transitions to finish
+//
+// We do not use Svelte transitions because they can not animate in the opposite direction
+// when the dropdown is opens above the input
+// Also CSS transitions are smoother because they do not rely on JS / animation frames
+let uiState = $state({ domExists: untrack(() => open), visible: untrack(() => open), timeout: null });
+let initial = true;
+watch(() => open && !disabled, (isOpen) => {
+    untrack(() => {
+        if (initial) {
+            initial = false;
+            return;
+        }
+        if (reducedMotion.val) {
+            uiState = {
+                domExists: open && !disabled,
+                visible: open && !disabled,
+                timeout: null
+            };
+            return;
+        }
+        if (uiState.timeout)
+            clearTimeout(uiState.timeout);
+        uiState = {
+            domExists: true,
+            visible: !isOpen,
+            timeout: setTimeout(() => {
+                if (isOpen) {
+                    uiState.visible = true;
+                    uiState.timeout = null;
+                }
+                else if (!isOpen) {
+                    uiState.visible = false;
+                    uiState.timeout = setTimeout(() => {
+                        uiState.domExists = false;
+                        uiState.timeout = null;
+                    }, 500); // leave time for transition to finish
+                }
+            }, 0) // We need the height to be 0 then change immediately for the transition to play
+        };
+    });
+});
+</script>
+
+<ConditionalPortal condition={!disablePortal} name="dropdown-portal">
+	{#if uiState.domExists}
+		<div
+			class={twMerge(
+				open ? 'dropdown-open' : 'dropdown-closed',
+				disablePortal ? 'absolute z-[5002]' : 'fixed z-[10000]',
+				'text-primary text-sm select-none',
+				dropdownPos.isBelow ? '' : 'flex flex-col justify-end',
+				uiState.visible ? '' : 'pointer-events-none',
+				className
+			)}
+			style="{`top: ${dropdownPos.y}px; left: ${dropdownPos.x}px;`} {listAutoWidth
+				? `${strictWidth ? 'width' : 'min-width'}: ${dropdownPos.width}px; height: ${dropdownPos.height}px;`
+				: ''}"
+		>
+			<div
+				class={twMerge(
+					'overflow-clip rounded-md drop-shadow-base',
+					!reducedMotion.val ? 'transition-height' : '',
+					dropdownPos.isBelow ? '' : 'flex flex-col justify-end'
+				)}
+				style="height: {uiState.visible ? dropdownPos.height : 0}px;"
+			>
+				<div
+					bind:this={listEl}
+					class="flex flex-col rounded-md bg-surface-input {innerClass}"
+					style="max-height: {maxHeight}px;"
+				>
+					{@render children?.()}
+				</div>
+			</div>
+		</div>
+	{/if}
+</ConditionalPortal>

package/package/components/select/GenericDropdown.svelte.d.ts

@@ -0,0 +1,37 @@
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    listAutoWidth?: boolean;
+    strictWidth?: boolean;
+    disablePortal?: boolean;
+    open: boolean;
+    disabled?: boolean;
+    class?: string;
+    innerClass?: string;
+    maxHeight?: number;
+    getInputRect?: () => DOMRect;
+    children?: Snippet;
+};
+declare function $$render<T>(): {
+    props: $$ComponentProps;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const GenericDropdown: $$IsomorphicComponent;
+type GenericDropdown<T> = InstanceType<typeof GenericDropdown<T>>;
+export default GenericDropdown;

package/package/components/select/MultiSelect.svelte

@@ -45,6 +45,7 @@ export function getFilteredInputText() {
 }
 </script>
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	bind:this={wrapperEl}
 	class={twMerge(

package/package/components/select/Select.svelte

@@ -11,7 +11,8 @@ import SelectDropdown from './SelectDropdown.svelte';
 import { deepEqual } from 'fast-equals';
 import { inputBaseClass, inputBorderClass, inputSizeClasses } from '../text_input/TextInput.svelte';
 import { ButtonType } from '../common/button/model';
-let { items, placeholder = 'Please select', value = $bindable(), filterText = $bindable(''), class: className = '', clearable = false, listAutoWidth = true, disabled: _disabled = false, containerStyle = '', inputClass = '', disablePortal = false, loading = false, error = false, autofocus, RightIcon, createText, noItemsMsg, open = $bindable(false), id, itemLabelWrapperClasses, itemButtonWrapperClasses, size = 'md', showPlaceholderOnOpen = false, transformInputSelectedText, groupBy, sortBy, onFocus, onBlur, onClear, onCreateItem, startSnippet, endSnippet, bottomSnippet } = $props();
+import Tooltip from '../Tooltip.svelte';
+let { items, placeholder = 'Please select', value = $bindable(), filterText = $bindable(''), class: className = '', clearable = false, listAutoWidth = true, disabled: _disabled = false, containerStyle = '', inputClass = '', disablePortal = false, loading = false, error = false, autofocus, RightIcon, createText, noItemsMsg, tooltip, open = $bindable(false), id, itemLabelWrapperClasses, itemButtonWrapperClasses, size = 'md', showPlaceholderOnOpen = false, transformInputSelectedText, groupBy, sortBy, onFocus, onBlur, onClear, onCreateItem, startSnippet, endSnippet, bottomSnippet } = $props();
 let disabled = $derived(_disabled || (loading && !value));
 let iconSize = $derived(ButtonType.UnifiedIconSizes[size]);
 let inputEl = $state();
@@ -27,7 +28,7 @@ $effect(() => {
     if (!open)
         filterText = '';
 });
-let valueEntry = $derived(value && processedItems?.find((item) => deepEqual(item.value, value)));
+let valueEntry = $derived(value != null ? processedItems?.find((item) => deepEqual(item.value, value)) : undefined);
 function setValue(item) {
     if (item.__is_create && onCreateItem) {
         onCreateItem(item.value);
@@ -47,12 +48,13 @@ function clearValue() {
 }
 let inputText = $derived.by(() => {
     let text = valueEntry?.label ?? getLabel({ value }) ?? '';
-    return transformInputSelectedText?.(text) ?? text;
+    return transformInputSelectedText?.(text, value) ?? text;
 });
 </script>
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	class={`relative ${className}`}
+	class={`relative h-fit ${className}`}
 	use:clickOutside={{ onClickOutside: () => (open = false) }}
 	onpointerdown={() => onFocus?.()}
 	onfocus={() => onFocus?.()}
@@ -76,6 +78,13 @@ let inputText = $derived.by(() => {
 			<RightIcon size={iconSize} class="text-secondary" />
 		</div>
 	{/if}
+
+	{#if tooltip}
+		<div class="absolute z-10 right-2 h-full flex items-center">
+			<Tooltip>{tooltip}</Tooltip>
+		</div>
+	{/if}
+
 	<!-- svelte-ignore a11y_autofocus -->
 	<input
 		{autofocus}
@@ -101,6 +110,11 @@ let inputText = $derived.by(() => {
 			inputClass ?? ''
 		)}
 		autocomplete="off"
+		oninput={(e) => {
+			// Explicitly open dropdown if closed and update filterText
+			if (!open) open = true
+			filterText = e.currentTarget.value
+		}}
 		onpointerdown={() => (open = true)}
 		bind:this={inputEl}
 		{id}

package/package/components/select/Select.svelte.d.ts

@@ -25,12 +25,13 @@ declare function $$render<Item extends {
         createText?: string;
         noItemsMsg?: string;
         open?: boolean;
+        tooltip?: string;
         id?: string;
         itemLabelWrapperClasses?: string;
         itemButtonWrapperClasses?: string;
         size?: "sm" | "md" | "lg";
         showPlaceholderOnOpen?: boolean;
-        transformInputSelectedText?: (text: string) => string;
+        transformInputSelectedText?: (text: string, value: Item["value"]) => string;
         groupBy?: (item: Item) => string;
         sortBy?: (a: Item, b: Item) => number;
         onFocus?: () => void;