windmill-components 1.550.0 → 1.555.1

package/package/components/common/fileUpload/S3ArgInput.svelte

@@ -4,7 +4,7 @@ import { Loader2, Pipette } from 'lucide-svelte';
 import FileUpload from './FileUpload.svelte';
 import Button from '../button/Button.svelte';
 import { userStore } from '../../../stores';
-let { multiple, value = $bindable(), defaultValue, setNewValueFromCode, onFocus, onBlur, computeS3ForceViewerPolicies, workspace, editor = $bindable(), appPath } = $props();
+let { multiple, value = $bindable(), defaultValue, setNewValueFromCode, onFocus, onBlur, computeS3ForceViewerPolicies, workspace, editor = $bindable(), appPath, bottom } = $props();
 let s3FileUploadRawMode = $state(false);
 let s3FilePicker = $state(undefined);
 let fileUpload = $state(undefined);
@@ -31,13 +31,7 @@ let fileUpload = $state(undefined);
 	/>
 {/if}
 
-<div class="flex flex-col w-full gap-1">
-	<Toggle
-		class="flex justify-end"
-		bind:checked={s3FileUploadRawMode}
-		size="xs"
-		options={{ left: `Raw S3 object${multiple ? 's' : ''} input` }}
-	/>
+<div class="flex flex-col w-full gap-1 relative">
 	{#if s3FileUploadRawMode}
 		{#await import('../../JsonEditor.svelte')}
 			<Loader2 class="animate-spin" />
@@ -99,7 +93,7 @@ let fileUpload = $state(undefined);
 			variant="border"
 			color="light"
 			size="xs"
-			btnClasses="mt-1"
+			btnClasses="mt-1 font-normal text-tertiary"
 			on:click={() => {
 				s3FilePicker?.open?.(value)
 			}}
@@ -108,4 +102,12 @@ let fileUpload = $state(undefined);
 			{multiple ? 'Add' : 'Choose'} an object from the catalog
 		</Button>
 	{/if}
+	{@render bottom?.()}
+	<Toggle
+		class="mt-1"
+		textClass="font-normal text-hint"
+		bind:checked={s3FileUploadRawMode}
+		size="xs"
+		options={{ right: `Raw S3 object${multiple ? 's' : ''} input` }}
+	/>
 </div>

package/package/components/common/fileUpload/S3ArgInput.svelte.d.ts

@@ -15,6 +15,7 @@ type $$ComponentProps = {
     workspace: string | undefined;
     editor: SimpleEditor | undefined;
     appPath: string | undefined;
+    bottom?: import('svelte').Snippet;
 };
 declare const S3ArgInput: import("svelte").Component<$$ComponentProps, {}, "value" | "editor">;
 type S3ArgInput = ReturnType<typeof S3ArgInput>;

package/package/components/common/popup/PopupV2.svelte

@@ -30,6 +30,12 @@ function close() {
 			<div
 				use:clickOutside={{
 					eventToListenName: 'pointerdown',
+					stopPropagation: true,
+					exclude: async () => {
+						const tutorial = document.querySelector('#driver-popover-content') as HTMLElement | null
+						if (tutorial) return [tutorial]
+						return []
+					},
 					onClickOutside: () => (open = false)
 				}}
 			>

package/package/components/common/toggleButton-v2/ToggleButton.svelte

@@ -2,20 +2,7 @@
 import Tooltip from '../../meltComponents/Tooltip.svelte';
 import { melt } from '@melt-ui/svelte';
 import { Info } from 'lucide-svelte';
-export let label = undefined;
-export let iconOnly = false;
-export let tooltip = undefined;
-export let icon = undefined;
-export let disabled = false;
-export let selectedColor = '#3b82f6';
-export let small = false;
-export let light = false;
-export let iconProps = {};
-export let showTooltipIcon = false;
-export let documentationLink = undefined;
-export let id = undefined;
-export let item;
-export let value;
+let { label = undefined, iconOnly = false, tooltip = undefined, icon = undefined, disabled = false, selectedColor = undefined, small = false, light = false, iconProps = {}, showTooltipIcon = false, documentationLink = undefined, id = undefined, item, value, class: className = '' } = $props();
 </script>
 
 <Tooltip
@@ -29,25 +16,29 @@ export let value;
 		{id}
 		{disabled}
 		class={twMerge(
-			'group rounded-md transition-all text-xs flex gap-1 flex-row items-center',
-			small ? 'px-1.5 py-0.5 text-2xs' : 'px-2 py-1',
-			light ? 'font-medium' : '',
-			'data-[state=on]:bg-surface data-[state=on]:shadow-md',
+			'group rounded-md transition-all font-normal flex gap-1 flex-row items-center border',
+			small ? 'px-1.5 py-0.5 text-2xs' : 'px-2 py-1 text-sm',
+			light
+				? 'hover:text-secondary data-[state=on]:text-secondary text-tertiary'
+				: 'hover:text-primary data-[state=on]:text-primary text-secondary',
+			'data-[state=on]:bg-surface data-[state=off]:border-transparent data-[state=on]:border-gray-300 dark:data-[state=on]:border-gray-500',
 			'bg-surface-secondary hover:bg-surface-hover',
 			disabled ? '!shadow-none' : '',
-			$$props.class
+			className
 		)}
 		{...__MELTUI_BUILDER_0__} use:__MELTUI_BUILDER_0__.action
-		style={`--selected-color: ${selectedColor}`}
+		style={selectedColor ? `--selected-color: ${selectedColor}` : ''}
 	>
 		{#if icon}
-			<svelte:component
-				this={icon}
+			{@const SvelteComponent = icon}
+			<SvelteComponent
 				size={small ? 12 : 14}
 				{...iconProps}
 				class={twMerge(
-					'text-gray-400',
-					'group-data-[state=on]:text-[var(--selected-color)]',
+					light ? 'text-tertiary' : 'text-secondary',
+					selectedColor
+						? 'group-data-[state=on]:text-[var(--selected-color)]'
+						: 'group-data-[state=on]:text-blue-500 dark:group-data-[state=on]:text-nord-800',
 					iconProps.class
 				)}
 			/>
@@ -60,7 +51,7 @@ export let value;
 		{/if}
 	</button>
 
-	<svelte:fragment slot="text">
+	{#snippet text()}
 		{tooltip}
-	</svelte:fragment>
+	{/snippet}
 </Tooltip>

package/package/components/common/toggleButton-v2/ToggleButton.svelte.d.ts

@@ -1,35 +1,21 @@
 import { type ToggleGroupElements, type ToggleGroupItemProps } from '@melt-ui/svelte';
-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 ToggleButton: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    label?: string | undefined | undefined;
-    iconOnly?: boolean | undefined;
-    tooltip?: string | undefined | undefined;
+interface Props {
+    label?: string | undefined;
+    iconOnly?: boolean;
+    tooltip?: string | undefined;
     icon?: any | undefined;
-    disabled?: boolean | undefined;
+    disabled?: boolean;
     selectedColor?: string | undefined;
-    small?: boolean | undefined;
-    light?: boolean | undefined;
-    iconProps?: Record<string, any> | undefined;
-    showTooltipIcon?: boolean | undefined;
-    documentationLink?: string | undefined | undefined;
-    id?: string | undefined | undefined;
-    item: ToggleGroupElements["item"];
+    small?: boolean;
+    light?: boolean;
+    iconProps?: Record<string, any>;
+    showTooltipIcon?: boolean;
+    documentationLink?: string | undefined;
+    id?: string | undefined;
+    item: ToggleGroupElements['item'];
     value: ToggleGroupItemProps;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ToggleButton = InstanceType<typeof ToggleButton>;
+    class?: string;
+}
+declare const ToggleButton: import("svelte").Component<Props, {}, "">;
+type ToggleButton = ReturnType<typeof ToggleButton>;
 export default ToggleButton;

package/package/components/common/toggleButton-v2/ToggleButtonGroup.svelte

@@ -38,7 +38,7 @@ $effect(() => {
 >
 	<div
 		class={twMerge(
-			'flex bg-surface-secondary rounded-md p-0.5 gap-1 h-full',
+			'flex bg-surface-secondary rounded-md h-full',
 			wrap ? 'flex-wrap' : '',
 			tabListClass
 		)}

package/package/components/common/toggleButton-v2/ToggleButtonMore.svelte

@@ -2,7 +2,7 @@
 import Popover from '../../Popover.svelte';
 import DropdownV2 from '../../DropdownV2.svelte';
 import ToggleButton from './ToggleButton.svelte';
-let { disabled = false, small = false, light = false, id = undefined, item = undefined, selected = $bindable(undefined), togglableItems } = $props();
+let { disabled = false, small = false, light = false, id = undefined, item = undefined, selected = $bindable(undefined), togglableItems, class: className = '' } = $props();
 let items = togglableItems.map((i) => ({
     displayName: i.label,
     action: () => (selected = i.value),
@@ -16,7 +16,7 @@ function isAnOptionSelected(selected) {
 <Popover
 	disablePopup={true}
 	notClickable
-	class={twMerge('flex', disabled ? 'cursor-not-allowed' : 'cursor-pointer')}
+	class={twMerge('flex', disabled ? 'cursor-not-allowed' : 'cursor-pointer', className)}
 	disappearTimeout={0}
 >
 	<div {id} class="flex">
@@ -35,7 +35,7 @@ function isAnOptionSelected(selected) {
 			/>
 		{/if}
 		<div class="flex items-center">
-			<DropdownV2 {items} />
+			<DropdownV2 enableFlyTransition {items} />
 		</div>
 	</div>
 </Popover>

package/package/components/common/toggleButton-v2/ToggleButtonMore.svelte.d.ts

@@ -11,6 +11,7 @@ interface Props {
     item?: any | undefined;
     selected?: string | undefined;
     togglableItems: TogglableItem[];
+    class?: string;
 }
 declare const ToggleButtonMore: import("svelte").Component<Props, {}, "selected">;
 type ToggleButtonMore = ReturnType<typeof ToggleButtonMore>;

package/package/components/copilot/CodeCompletionStatus.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { codeCompletionSessionEnabled, copilotInfo, CODE_COMPLETION_SETTING_NAME } from '../../stores';
+<script lang="ts">import { copilotInfo } from '../../aiStore';
+import { codeCompletionSessionEnabled, CODE_COMPLETION_SETTING_NAME } from '../../stores';
 import { storeLocalSetting } from '../../utils';
 import Toggle from '../Toggle.svelte';
 function storeSetting() {

package/package/components/copilot/CronGen.svelte

@@ -3,8 +3,8 @@ import Button from '../common/button/Button.svelte';
 import { getNonStreamingCompletion } from './lib';
 import Popover from '../meltComponents/Popover.svelte';
 import { sendUserToast } from '../../toast';
-import { copilotInfo } from '../../stores';
 import { base } from '../../base';
+import { copilotInfo } from '../../aiStore';
 export let schedule;
 export let cronVersion;
 let instructions = '';

package/package/components/copilot/FlowInlineScriptAIButton.svelte

@@ -1,11 +1,11 @@
-<script lang="ts">import { copilotInfo } from '../../stores';
-import { autoPlacement } from '@floating-ui/core';
+<script lang="ts">import { autoPlacement } from '@floating-ui/core';
 import Popover from '../meltComponents/Popover.svelte';
 import Button from '../common/button/Button.svelte';
 import { ExternalLink, WandSparkles } from 'lucide-svelte';
 import { base } from '../../base';
 import { twMerge } from 'tailwind-merge';
 import { aiChatManager, AIMode } from './chat/AIChatManager.svelte';
+import { copilotInfo } from '../../aiStore';
 const { moduleId } = $props();
 const aiChatScriptModeClasses = $derived(aiChatManager.mode === AIMode.SCRIPT && aiChatManager.isOpen
     ? 'dark:bg-violet-900 bg-violet-100'

package/package/components/copilot/IteratorGen.svelte

@@ -3,25 +3,21 @@ import Button from '../common/button/Button.svelte';
 import { getNonStreamingCompletion } from './lib';
 import { sendUserToast } from '../../toast';
 import ManualPopover from '../ManualPopover.svelte';
-import { createEventDispatcher, getContext } from 'svelte';
+import { createEventDispatcher, getContext, untrack } from 'svelte';
 import YAML from 'yaml';
 import { sliceModules } from '../flows/flowStateUtils.svelte';
 import { dfs } from '../flows/dfs';
 import { yamlStringifyExceptKeys } from './utils';
-import { copilotInfo, stepInputCompletionEnabled } from '../../stores';
+import { stepInputCompletionEnabled } from '../../stores';
+import { copilotInfo } from '../../aiStore';
 import { twMerge } from 'tailwind-merge';
-import { createDispatcherIfMounted } from '../../createDispatcherIfMounted';
-let generatedContent = '';
-let loading = false;
-export let focused = false;
-export let arg;
-export let pickableProperties = undefined;
-let btnFocused = false;
-let empty = false;
-$: empty =
-    Object.keys(arg ?? {}).length === 0 ||
-        (arg.type === 'static' && !arg.value) ||
-        (arg.type === 'javascript' && !arg.expr);
+let generatedContent = $state('');
+let loading = $state(false);
+let { focused = false, arg, pickableProperties = undefined } = $props();
+let btnFocused = $state(false);
+let empty = $derived(Object.keys(arg ?? {}).length === 0 ||
+    (arg.type === 'static' && !arg.value) ||
+    (arg.type === 'javascript' && !arg.expr));
 let abortController = new AbortController();
 const { flowStore, selectedId } = getContext('FlowEditorContext');
 async function generateIteratorExpr() {
@@ -85,7 +81,6 @@ export function onKeyUp(event) {
     }
 }
 const dispatch = createEventDispatcher();
-const dispatchIfMounted = createDispatcherIfMounted(dispatch);
 function automaticGeneration() {
     if (empty) {
         generateIteratorExpr();
@@ -99,18 +94,28 @@ function cancelOnOutOfFocus() {
         }
     }, 150);
 }
-$: if (!focused) {
-    cancelOnOutOfFocus();
-}
-$: if ($copilotInfo.enabled && $stepInputCompletionEnabled && focused) {
-    automaticGeneration();
-}
+$effect(() => {
+    if (!focused) {
+        untrack(() => {
+            cancelOnOutOfFocus();
+        });
+    }
+});
+$effect(() => {
+    if ($copilotInfo.enabled && $stepInputCompletionEnabled && focused) {
+        untrack(() => {
+            automaticGeneration();
+        });
+    }
+});
 function cancel() {
     abortController.abort();
     generatedContent = '';
 }
-$: dispatchIfMounted('showExpr', generatedContent);
-let out = true; // hack to prevent regenerating answer when accepting the answer due to mouseenter on new icon
+$effect(() => {
+    dispatch('showExpr', generatedContent);
+});
+let out = $state(true); // hack to prevent regenerating answer when accepting the answer due to mouseenter on new icon
 </script>
 
 {#if $copilotInfo.enabled && $stepInputCompletionEnabled}
@@ -159,10 +164,10 @@ let out = true; // hack to prevent regenerating answer when accepting the answer
 				{/if}
 			{/if}
 		</Button>
-		<svelte:fragment slot="content">
+		{#snippet content()}
 			<div class="text-sm text-tertiary">
 				{generatedContent}
 			</div>
-		</svelte:fragment>
+		{/snippet}
 	</ManualPopover>
 {/if}

package/package/components/copilot/IteratorGen.svelte.d.ts

@@ -1,5 +1,10 @@
 import type { InputTransform } from '../../gen';
 import type { PickableProperties } from '../flows/previousResults';
+interface Props {
+    focused?: boolean;
+    arg: InputTransform | any;
+    pickableProperties?: PickableProperties | undefined;
+}
 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;
@@ -13,17 +18,13 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const IteratorGen: $$__sveltets_2_IsomorphicComponent<{
-    focused?: boolean;
-    arg: InputTransform | any;
-    pickableProperties?: PickableProperties | undefined;
-    onKeyUp?: (event: KeyboardEvent) => void;
-}, {
+declare const IteratorGen: $$__sveltets_2_IsomorphicComponent<Props, {
     setExpr: CustomEvent<any>;
+    showExpr: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     onKeyUp: (event: KeyboardEvent) => void;
-}, string>;
+}, "">;
 type IteratorGen = InstanceType<typeof IteratorGen>;
 export default IteratorGen;

package/package/components/copilot/MetadataGen.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">import { getCompletion, getResponseFromEvent } from './lib';
 import { isInitialCode } from '../../script_helpers';
 import { Check, Loader2, Wand2 } from 'lucide-svelte';
-import { copilotInfo, metadataCompletionEnabled } from '../../stores';
+import { metadataCompletionEnabled } from '../../stores';
+import { copilotInfo } from '../../aiStore';
 import { createEventDispatcher, onDestroy } from 'svelte';
 import { sendUserToast } from '../../toast';
 import { twMerge } from 'tailwind-merge';
@@ -297,9 +298,9 @@ onDestroy(() => {
 			on:blur={() => (focused = false)}
 		/>
 		{#if promptConfigName === 'agentToolFunctionName' && !validateToolName(content ?? '')}
-			<div class="text-3xs text-red-400 -mt-0.5">
+			<p class="text-3xs text-red-400 leading-tight mt-0.5">
 				Invalid tool name, should only contain letters, numbers and underscores
-			</div>
+			</p>
 		{/if}
 	{/if}
 	<!-- <slot {updateFocus} {active} {generatedContent} classNames={active ? '!indent-[8.8rem]' : ''} /> -->

package/package/components/copilot/PredicateGen.svelte

@@ -7,14 +7,17 @@ import YAML from 'yaml';
 import { sliceModules } from '../flows/flowStateUtils.svelte';
 import { dfs } from '../flows/dfs';
 import { yamlStringifyExceptKeys } from './utils';
-import { copilotInfo, stepInputCompletionEnabled } from '../../stores';
+import { stepInputCompletionEnabled } from '../../stores';
 import Popover from '../meltComponents/Popover.svelte';
-let loading = false;
-export let pickableProperties = undefined;
-let instructions = '';
-let instructionsField = undefined;
-$: instructionsField && setTimeout(() => instructionsField?.focus(), 100);
-let abortController = new AbortController();
+import { copilotInfo } from '../../aiStore';
+let loading = $state(false);
+let { pickableProperties = undefined } = $props();
+let instructions = $state('');
+let instructionsField = $state(undefined);
+$effect(() => {
+    instructionsField && setTimeout(() => instructionsField?.focus(), 100);
+});
+let abortController = $state(new AbortController());
 const { flowStore, selectedId } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
 async function generatePredicate() {
@@ -73,7 +76,7 @@ Only return the expression without any wrapper. Do not explain or discuss.`;
 		floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
 		contentClasses="p-4 flex w-96"
 	>
-		<svelte:fragment slot="trigger">
+		{#snippet trigger()}
 			<Button
 				color={loading ? 'red' : 'light'}
 				size="xs"
@@ -86,14 +89,14 @@ Only return the expression without any wrapper. Do not explain or discuss.`;
 				clickableWhileLoading
 				on:click={loading ? () => abortController?.abort() : () => {}}
 			/>
-		</svelte:fragment>
-		<svelte:fragment slot="content" let:close>
+		{/snippet}
+		{#snippet content({ close })}
 			<input
 				bind:this={instructionsField}
 				type="text"
 				placeholder="Predicate description"
 				bind:value={instructions}
-				on:keypress={({ key }) => {
+				onkeypress={({ key }) => {
 					if (key === 'Enter' && instructions.length > 0) {
 						close()
 						generatePredicate()
@@ -116,6 +119,6 @@ Only return the expression without any wrapper. Do not explain or discuss.`;
 				disabled={instructions.length == 0}
 				startIcon={{ icon: Wand2 }}
 			/>
-		</svelte:fragment>
+		{/snippet}
 	</Popover>
 {/if}

package/package/components/copilot/PredicateGen.svelte.d.ts

@@ -1,4 +1,7 @@
 import type { PickableProperties } from '../flows/previousResults';
+interface Props {
+    pickableProperties?: PickableProperties | undefined;
+}
 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;
@@ -12,13 +15,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const PredicateGen: $$__sveltets_2_IsomorphicComponent<{
-    pickableProperties?: PickableProperties | undefined;
-}, {
+declare const PredicateGen: $$__sveltets_2_IsomorphicComponent<Props, {
     setExpr: CustomEvent<any>;
     updateSummary: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type PredicateGen = InstanceType<typeof PredicateGen>;
 export default PredicateGen;

package/package/components/copilot/RegexGen.svelte

@@ -3,10 +3,10 @@ import { Button } from '../common';
 import { getNonStreamingCompletion } from './lib';
 import { sendUserToast } from '../../toast';
 import Popover from '../meltComponents/Popover.svelte';
-import { copilotInfo } from '../../stores';
 import { autoPlacement } from '@floating-ui/core';
 import { ExternalLink, HistoryIcon, Wand2 } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
+import { copilotInfo } from '../../aiStore';
 // state
 let funcDesc = '';
 let genLoading = false;

package/package/components/copilot/ScriptFix.svelte

@@ -5,7 +5,7 @@ import Popover from '../meltComponents/Popover.svelte';
 import { autoPlacement } from '@floating-ui/core';
 import { WandSparkles } from 'lucide-svelte';
 import { aiChatManager } from './chat/AIChatManager.svelte';
-import { copilotInfo } from '../../stores';
+import { copilotInfo } from '../../aiStore';
 let { lang } = $props();
 </script>
 

package/package/components/copilot/ScriptGen.svelte

@@ -4,7 +4,7 @@ import { MAX_SCHEMA_LENGTH, SUPPORTED_LANGUAGES, addThousandsSeparator, copilot
 import { sendUserToast } from '../../toast';
 import Popover from '../meltComponents/Popover.svelte';
 import TooltipV2 from '../meltComponents/Tooltip.svelte';
-import { dbSchemas, copilotInfo, workspaceStore } from '../../stores';
+import { dbSchemas, workspaceStore } from '../../stores';
 import { scriptLangToEditorLang } from '../../scripts';
 import Tooltip from '../Tooltip.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
@@ -20,6 +20,7 @@ import { isInitialCode } from '../../script_helpers';
 import { twMerge } from 'tailwind-merge';
 import { onDestroy } from 'svelte';
 import ProviderModelSelector from './chat/ProviderModelSelector.svelte';
+import { copilotInfo } from '../../aiStore';
 let { iconOnly = false, lang = $bindable(), editor, diffEditor, inlineScript = false, args, transformer = false } = $props();
 $effect.pre(() => {
     if (lang == 'bunnative') {

package/package/components/copilot/StepGenQuick.svelte

@@ -3,15 +3,10 @@ import { ScriptService } from '../../gen';
 import { Wand2, Loader2 } from 'lucide-svelte';
 import SearchItems from '../SearchItems.svelte';
 import { emptyString } from '../../utils';
-import { createEventDispatcher, onMount } from 'svelte';
-export let funcDesc;
-export let trigger = false;
-export let loading = false;
-export let preFilter;
-export let disableAi = false;
-let scripts = undefined;
-export let filteredItems = [];
-$: prefilteredItems = scripts ?? [];
+import { createEventDispatcher, onMount, untrack } from 'svelte';
+let scripts = $state(undefined);
+let { funcDesc = $bindable(), trigger = false, loading = false, preFilter, disableAi = false, filteredItems = $bindable([]) } = $props();
+let prefilteredItems = $derived(scripts ?? []);
 const dispatch = createEventDispatcher();
 async function loadScripts() {
     const loadedScripts = await ScriptService.listScripts({
@@ -21,12 +16,16 @@ async function loadScripts() {
     });
     scripts = loadedScripts;
 }
-$: scripts == undefined && funcDesc?.length > 1 && loadScripts();
-let input;
-$: preFilter &&
-    setTimeout(() => {
-        input?.focus();
-    }, 50);
+$effect(() => {
+    scripts == undefined && funcDesc?.length > 1 && untrack(() => loadScripts());
+});
+let input = $state();
+$effect(() => {
+    preFilter &&
+        setTimeout(() => {
+            input?.focus();
+        }, 50);
+});
 onMount(() => {
     input?.focus();
 });
@@ -44,7 +43,7 @@ onMount(() => {
 		<input
 			bind:this={input}
 			type="text"
-			on:keydown={(e) => {
+			onkeydown={(e) => {
 				if (e.key === 'Escape') {
 					dispatch('escape')
 				}

package/package/components/copilot/StepGenQuick.svelte.d.ts

@@ -1,4 +1,16 @@
 import { type Script } from '../../gen';
+interface Props {
+    funcDesc: string;
+    trigger?: boolean;
+    loading?: boolean;
+    preFilter: string;
+    disableAi?: boolean;
+    filteredItems?: (Script & {
+        marked?: string;
+    })[] | (Item & {
+        marked?: string;
+    })[];
+}
 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;
@@ -12,21 +24,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const StepGenQuick: $$__sveltets_2_IsomorphicComponent<{
-    funcDesc: string;
-    trigger?: boolean;
-    loading?: boolean;
-    preFilter: string;
-    disableAi?: boolean;
-    filteredItems?: (Script & {
-        marked?: string;
-    })[] | (Item & {
-        marked?: string;
-    })[];
-}, {
+declare const StepGenQuick: $$__sveltets_2_IsomorphicComponent<Props, {
     escape: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "filteredItems" | "funcDesc">;
 type StepGenQuick = InstanceType<typeof StepGenQuick>;
 export default StepGenQuick;