windmill-components 1.623.2 → 1.655.0

package/package/components/IconedResourceType.svelte.d.ts

@@ -12,6 +12,7 @@ declare const IconedResourceType: import("svelte").Component<{
     center?: boolean | undefined;
     isSelected?: boolean | undefined;
     formatExtension?: any;
+    isFileset?: boolean | undefined;
 }, {}, "">;
 type Props = {
     name: any;
@@ -22,4 +23,5 @@ type Props = {
     center?: boolean | undefined;
     isSelected?: boolean | undefined;
     formatExtension?: any;
+    isFileset?: boolean | undefined;
 };

package/package/components/IdEditorInput.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { stopPropagation, createBubbler } from 'svelte/legacy';
+<script lang="ts">import { untrack } from 'svelte';
+import { stopPropagation, createBubbler } from 'svelte/legacy';
 const bubble = createBubbler();
 import { ArrowRight } from 'lucide-svelte';
 import { Button } from './common';
@@ -6,7 +7,7 @@ import { forbiddenIds } from './flows/idUtils';
 import { slide } from 'svelte/transition';
 let { initialId, reservedIds = [], reservedPrefixes = [], label = 'Component ID', value = $bindable(initialId), buttonText = '', btnClasses = '!p-1 !w-[34px] !ml-1', acceptUnderScores = false, onSave, onClose } = $props();
 let error = $state('');
-const regex = acceptUnderScores ? /^[a-zA-Z][a-zA-Z0-9_]*$/ : /^[a-zA-Z][a-zA-Z0-9]*$/;
+const regex = untrack(() => acceptUnderScores) ? /^[a-zA-Z][a-zA-Z0-9_]*$/ : /^[a-zA-Z][a-zA-Z0-9]*$/;
 function validateId(id, reservedIds, reservedPrefixes) {
     if (id == initialId) {
         error = '';

package/package/components/InputError.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">import { slide } from 'svelte/transition';
+let { error } = $props();
+</script>
+
+{#if error}
+	<div transition:slide={{ duration: 150 }} class="text-red-600 dark:text-red-400 text-xs mt-1">
+		{error}
+	</div>
+{/if}

package/package/components/InputError.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    error: string;
+}
+declare const InputError: import("svelte").Component<Props, {}, "">;
+type InputError = ReturnType<typeof InputError>;
+export default InputError;

package/package/components/InputTransformForm.svelte

@@ -8,7 +8,7 @@
 	])
 </script>
 
-<script lang="ts">import { createEventDispatcher, getContext, untrack } from 'svelte';
+<script lang="ts">import { createEventDispatcher, getContext, onDestroy, untrack } from 'svelte';
 import { computeShow } from '../utils';
 import ArgInput from './ArgInput.svelte';
 import FieldHeader from './FieldHeader.svelte';
@@ -31,10 +31,9 @@ import { deepEqual } from 'fast-equals';
 import S3ArrayHelperButton from './S3ArrayHelperButton.svelte';
 import { inputBorderClass } from './text_input/TextInput.svelte';
 import FakeMonacoPlaceHolder from './FakeMonacoPlaceHolder.svelte';
-let { schema = $bindable(), arg = $bindable(), argName = $bindable(), headerTooltip = undefined, headerTooltipIconClass = '', HeaderTooltipIcon = InfoIcon, extraLib = $bindable('missing extraLib'), inputCheck = $bindable(true), previousModuleId, pickForField = $bindable(undefined), variableEditor = undefined, itemPicker = undefined, noDynamicToggle = false, argExtra = {}, pickableProperties = undefined, enableAi = false, hideHelpButton = false, class: className = '', editor = $bindable(undefined), otherArgs = {}, helperScript = undefined, isAgentTool = false, s3StorageConfigured = true, chatInputEnabled = false } = $props();
+let { schema = $bindable(), arg = $bindable(), argName = $bindable(), headerTooltip = undefined, headerTooltipIconClass = '', HeaderTooltipIcon = InfoIcon, extraLib = $bindable('missing extraLib'), inputCheck = $bindable(true), previousModuleId, pickForField = $bindable(undefined), variableEditor = undefined, itemPicker = undefined, noDynamicToggle = false, argExtra = {}, pickableProperties = undefined, enableAi = false, hideHelpButton = false, class: className = '', editor = $bindable(undefined), otherArgs = {}, helperScript = undefined, isAgentTool = false, allowedAiTransforms = isAgentTool ? undefined : [], s3StorageConfigured = true, chatInputEnabled = false } = $props();
 let monaco = $state(undefined);
 let monacoTemplate = $state(undefined);
-let focusedPrev = false;
 let hidden = $state(false);
 const variableMatch = (value) => value.match(/^variable\('([^']+)'\)$/);
 const resourceMatch = (value) => value.match(/^resource\('([^']+)'\)$/);
@@ -44,8 +43,10 @@ $effect(() => {
 });
 const { shouldUpdatePropertyType, exprsToSet } = getContext('FlowCopilotContext') || {};
 const propPickerWrapperContext = getContext('PropPickerWrapper');
-const { inputMatches, focusProp, propPickerConfig, clearFocus } = propPickerWrapperContext ?? {};
+const { inputMatches, connectProp: focusProp, propPickerConfig, clearConnect: clearFocus, exprBeingEdited } = propPickerWrapperContext ?? {};
 let inputCat = $derived(computeInputCat(schema?.properties?.[argName]?.type, schema?.properties?.[argName]?.format, schema?.properties?.[argName]?.items?.type, schema?.properties?.[argName]?.enum, schema?.properties?.[argName]?.contentEncoding));
+// Whether this specific field is allowed to use AI transforms
+let fieldAllowsAi = $derived(allowedAiTransforms === undefined || allowedAiTransforms.includes(argName));
 let propertyType = $state(getPropertyType(arg));
 function setExpr() {
     const newArg = $exprsToSet?.[argName];
@@ -74,7 +75,7 @@ function updatePropertyType() {
 }
 function getPropertyType(arg) {
     // For agent tools, if static with undefined/empty value, treat as 'ai', meaning the field will be filled by the AI agent dynamically.
-    if (isAgentTool &&
+    if (fieldAllowsAi &&
         ((arg?.type === 'static' && arg?.value === undefined) || arg?.type === 'ai')) {
         if (arg?.type === 'static') {
             arg.type = 'ai';
@@ -191,7 +192,7 @@ async function switchToJsAndConnect(onPath) {
     // Wait for the component to re-render and Monaco to be available
     await tick();
     // Activate connect mode
-    focusProp?.(argName, 'connect', (path) => {
+    focusProp?.(argName, (path) => {
         onPath(path);
         return true;
     });
@@ -273,6 +274,23 @@ function handleFieldVisibility(schema, arg, otherArgs) {
 function onFocus() {
     focused = true;
 }
+function updatePropsBeingEdited(focused) {
+    if (!exprBeingEdited)
+        return;
+    let newPropsBeingEdited = [...$exprBeingEdited];
+    if (focused) {
+        newPropsBeingEdited.push(argName);
+    }
+    else {
+        newPropsBeingEdited = newPropsBeingEdited.filter((p) => p !== argName);
+    }
+    if (!deepEqual(newPropsBeingEdited, $exprBeingEdited)) {
+        exprBeingEdited.set(newPropsBeingEdited);
+    }
+}
+onDestroy(() => {
+    updatePropsBeingEdited(false);
+});
 let prevArg = undefined;
 function onArgChange() {
     const newArg = { arg, propertyType, inputCat };
@@ -299,12 +317,6 @@ function setDefaultCode() {
         monacoTemplate?.setCode(schema.properties?.[argName]?.default);
     }
 }
-function updateFocused(newFocused) {
-    if (focusedPrev && !newFocused && inputMatches) {
-        $inputMatches = undefined;
-    }
-    focusedPrev = focused;
-}
 let resourceTypes = $state(undefined);
 async function loadResourceTypes() {
     resourceTypes = await getResourceTypes();
@@ -325,11 +337,6 @@ $effect(() => {
     arg?.expr;
     inputCat && propertyType && arg && untrack(() => onArgChange());
 });
-$effect(() => {
-    ;
-    [focused];
-    untrack(() => updateFocused(focused));
-});
 $effect(() => {
     schema?.properties?.[argName]?.default && untrack(() => setDefaultCode());
 });
@@ -340,7 +347,7 @@ $effect.pre(() => {
     JSON.stringify(otherArgs);
     untrack(() => handleFieldVisibility(schema, arg, otherArgs));
 });
-let connecting = $derived($propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'connect');
+let connecting = $derived($propPickerConfig?.propName == argName);
 let shouldShowS3ArrayHelper = $derived(inputCat === 'list' &&
     ['s3object', 's3_object'].includes(schema?.properties?.[argName]?.items?.resourceType));
 let suggestion = $state();
@@ -419,13 +426,10 @@ $effect(() => {
 							id="flow-editor-plug"
 							{connecting}
 							on:click={() => {
-								if (
-									$propPickerConfig?.propName == argName &&
-									$propPickerConfig?.insertionMode == 'connect'
-								) {
+								if ($propPickerConfig?.propName == argName) {
 									clearFocus()
 								} else {
-									focusProp?.(argName, 'connect', (path) => {
+									focusProp?.(argName, (path) => {
 										connectProperty(path)
 										dispatch('change', { argName })
 										return true
@@ -501,7 +505,7 @@ $effect(() => {
 							}}
 						>
 							{#snippet children({ item })}
-								{#if isAgentTool}
+								{#if fieldAllowsAi}
 									<ToggleButton
 										small
 										label="AI"
@@ -562,13 +566,6 @@ $effect(() => {
 
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div class="relative w-full" onkeyup={handleKeyUp}>
-			<!-- {#if $propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'connect'}
-				<span
-					class={'text-white  z-50 px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit absolute top-0 right-0 bg-blue-500'}
-				>
-					Connect input &rightarrow;
-				</span>
-			{/if} -->
 			<!-- {inputCat}
 			{propertyType} -->
 			<div class="relative flex flex-row items-top gap-1 justify-between">
@@ -596,8 +593,8 @@ $effect(() => {
 							<div
 								class="text-sm text-tertiary italic p-3 bg-surface-secondary rounded-md border border-gray-200"
 							>
-								<span class="flex items-center gap-2">
-									<InfoIcon size={16} />
+								<span class="flex items-center gap-2 text-xs">
+									<InfoIcon size={13} />
 									This field will be filled by the AI agent dynamically
 								</span>
 							</div>
@@ -680,7 +677,11 @@ $effect(() => {
 								otherArgs={Object.fromEntries(
 									Object.entries(otherArgs).map(([key, transform]) => [
 										key,
-										transform?.type === 'static' ? transform.value : transform?.expr
+										transform?.type === 'static'
+											? transform.value
+											: transform?.type === 'javascript'
+												? transform.expr
+												: undefined
 									])
 								)}
 							>
@@ -689,12 +690,14 @@ $effect(() => {
 										<S3ArrayHelperButton
 											{connecting}
 											onClick={() =>
-												switchToJsAndConnect((path) => appendPathToArrayExpr(arg.expr, path))}
+												switchToJsAndConnect((path) =>
+													appendPathToArrayExpr(arg?.type === 'javascript' ? arg.expr : '', path)
+												)}
 										/>
 									{/if}
 								{/snippet}
 							</ArgInput>
-						{:else if arg.expr != undefined}
+						{:else if arg?.type === 'javascript' && arg.expr != undefined}
 							<div
 								class={`bg-surface-input rounded-md flex flex-col pl-2 overflow-auto ${inputBorderClass({ forceFocus: focused })}`}
 							>
@@ -707,8 +710,14 @@ $effect(() => {
 									shouldBindKey={false}
 									renderLineHighlight="none"
 									hideLineNumbers
-									on:focus={() => (focused = true)}
-									on:blur={() => (focused = false)}
+									on:focus={() => {
+										focused = true
+										updatePropsBeingEdited(true)
+									}}
+									on:blur={() => {
+										focused = false
+										updatePropsBeingEdited(false)
+									}}
 									on:change={() => {
 										dispatch('change', { argName, arg })
 									}}
@@ -723,7 +732,7 @@ $effect(() => {
 									class="mt-2"
 									{connecting}
 									onClick={() =>
-										focusProp?.(argName, 'connect', (path) => {
+										focusProp?.(argName, (path) => {
 											appendPathToArrayExpr(arg.expr, path)
 											return true
 										})}

package/package/components/InputTransformForm.svelte.d.ts

@@ -31,6 +31,7 @@ interface Props {
     otherArgs?: Record<string, InputTransform>;
     helperScript?: DynamicInputTypes.HelperScript | undefined;
     isAgentTool?: boolean;
+    allowedAiTransforms?: string[] | undefined;
     s3StorageConfigured?: boolean;
     chatInputEnabled?: boolean;
 }

package/package/components/InputTransformSchemaForm.svelte

@@ -9,7 +9,7 @@ import ItemPicker from './ItemPicker.svelte';
 import VariableEditor from './VariableEditor.svelte';
 import { Plus } from 'lucide-svelte';
 import ResizeTransitionWrapper from './common/ResizeTransitionWrapper.svelte';
-let { schema = $bindable(), args = $bindable({}), isValid = $bindable(true), extraLib = $bindable('missing extraLib'), previousModuleId = undefined, filter = undefined, noDynamicToggle = false, pickableProperties = undefined, enableAi = false, class: clazz = '', helperScript = undefined, isAgentTool = false, chatInputEnabled = false } = $props();
+let { schema = $bindable(), args = $bindable({}), isValid = $bindable(true), extraLib = $bindable('missing extraLib'), previousModuleId = undefined, filter = undefined, noDynamicToggle = false, pickableProperties = undefined, enableAi = false, class: clazz = '', helperScript = undefined, isAgentTool = false, allowedAiTransforms = isAgentTool ? undefined : [], chatInputEnabled = false } = $props();
 let inputCheck = $state({});
 $effect(() => {
     isValid = allTrue(inputCheck) ?? false;
@@ -98,6 +98,7 @@ $effect(() => {
 						{enableAi}
 						{helperScript}
 						{isAgentTool}
+						{allowedAiTransforms}
 						{s3StorageConfigured}
 						{chatInputEnabled}
 						otherArgs={Object.fromEntries(

package/package/components/InputTransformSchemaForm.svelte.d.ts

@@ -17,10 +17,11 @@ interface Props {
     class?: string;
     helperScript?: DynamicInputTypes.HelperScript;
     isAgentTool?: boolean;
+    allowedAiTransforms?: string[] | undefined;
     chatInputEnabled?: boolean;
 }
 declare const InputTransformSchemaForm: import("svelte").Component<Props, {
     setArgs: (nargs: Record<string, InputTransform | any>) => void;
-}, "args" | "schema" | "isValid" | "extraLib">;
+}, "args" | "schema" | "extraLib" | "isValid">;
 type InputTransformSchemaForm = ReturnType<typeof InputTransformSchemaForm>;
 export default InputTransformSchemaForm;

package/package/components/InputTransformsViewer.svelte

@@ -1,30 +1,47 @@
 <script lang="ts">import { cleanExpr } from '../utils';
 import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
-export let inputTransforms;
-$: entries = Object.entries(inputTransforms);
+import DataTable from './table/DataTable.svelte';
+import Head from './table/Head.svelte';
+import Cell from './table/Cell.svelte';
+import Row from './table/Row.svelte';
+let { inputTransforms } = $props();
+let entries = $derived(Object.entries(inputTransforms));
 </script>
 
 {#if entries.length}
-	<ul class="mb-1">
-		{#each entries as [key, val]}
-			<li class="flex pb-2 last:pb-0">
-				<span class="font-black text-secondary text-xs">{key}:</span>
-				{#if val.type == 'static'}
-					{#if typeof val.value == 'object'}
-						<ObjectViewer json={val.value} />
-					{:else}
-						<span class="text-xs text-primary whitespace-pre-wrap ml-2">
-							{val.value}
-						</span>
-					{/if}
-				{:else}
-					<span class="text-xs text-primary whitespace-pre-wrap ml-2">
-						{cleanExpr(val.expr)}
-					</span>
-				{/if}
-			</li>
-		{/each}
-	</ul>
+	<DataTable size="xs" containerClass="bg-surface-tertiary">
+		<Head>
+			<tr class="w-full">
+				<Cell head first>Input</Cell>
+				<Cell head last>Value</Cell>
+			</tr>
+		</Head>
+
+		<tbody class="divide-y w-full">
+			{#each entries as [key, val]}
+				<Row>
+					<Cell first>{key}</Cell>
+					<Cell last>
+						{#if val.type == 'static'}
+							{#if typeof val.value == 'object'}
+								<ObjectViewer json={val.value} />
+							{:else}
+								<span class="text-xs text-primary whitespace-pre-wrap font-mono">
+									{val.value}
+								</span>
+							{/if}
+						{:else if val.type == 'javascript'}
+							<span class="text-xs text-primary whitespace-pre-wrap font-mono">
+								{cleanExpr(val.expr)}
+							</span>
+						{:else if val.type == 'ai'}
+							<span class="text-xs text-primary whitespace-pre-wrap font-mono">Filled by AI</span>
+						{/if}
+					</Cell>
+				</Row>
+			{/each}
+		</tbody>
+	</DataTable>
 {:else}
 	<div class="text-primary text-xs"> No inputs </div>
 {/if}

package/package/components/InputTransformsViewer.svelte.d.ts

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

package/package/components/InstanceGroupEditor.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { GroupService } from '../gen';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { GroupService } from '../gen';
 import { createEventDispatcher } from 'svelte';
 import autosize from '../autosize';
 import { Button } from './common';
@@ -6,14 +7,11 @@ import Skeleton from './common/skeleton/Skeleton.svelte';
 import TableCustom from './TableCustom.svelte';
 import { sendUserToast } from '../toast';
 import { Loader2 } from 'lucide-svelte';
-export let name;
-let email = '';
-let instance_group;
-let members = undefined;
+let { name } = $props();
+let email = $state('');
+let instance_group = $state();
+let members = $state(undefined);
 const dispatch = createEventDispatcher();
-$: {
-    load();
-}
 async function load() {
     return Promise.all([loadInstanceGroup()]);
 }
@@ -25,6 +23,9 @@ async function loadInstanceGroup() {
         })
         : [];
 }
+run(() => {
+    load();
+});
 </script>
 
 <div class="flex flex-col gap-6">
@@ -78,17 +79,20 @@ async function loadInstanceGroup() {
 		</div>
 		{#if members}
 			<TableCustom>
-				<tr slot="header-row">
-					<th>user</th>
-					<th></th>
-				</tr>
-				<tbody slot="body">
-					{#each members as { member_email }}<tr>
-							<td>{member_email}</td>
-							<td>
-								<button
-									class="ml-2 text-red-500"
-									on:click={async () => {
+				{#snippet headerRow()}
+								<tr >
+						<th>user</th>
+						<th></th>
+					</tr>
+							{/snippet}
+				{#snippet body()}
+								<tbody >
+						{#each members as { member_email }}<tr>
+								<td>{member_email}</td>
+								<td>
+									<button
+										class="ml-2 text-red-500"
+										onclick={async () => {
 										await GroupService.removeUserFromInstanceGroup({
 											name,
 											requestBody: { email: member_email }
@@ -97,10 +101,11 @@ async function loadInstanceGroup() {
 										sendUserToast('User removed')
 										loadInstanceGroup()
 									}}>remove</button
-								>
-							</td>
-						</tr>{/each}
-				</tbody>
+									>
+								</td>
+							</tr>{/each}
+					</tbody>
+							{/snippet}
 			</TableCustom>
 		{:else}
 			<div class="flex flex-col">

package/package/components/InstanceGroupEditor.svelte.d.ts

@@ -1,3 +1,6 @@
+interface Props {
+    name: 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;
@@ -11,12 +14,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const InstanceGroupEditor: $$__sveltets_2_IsomorphicComponent<{
-    name: string;
-}, {
+declare const InstanceGroupEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     update: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type InstanceGroupEditor = InstanceType<typeof InstanceGroupEditor>;
 export default InstanceGroupEditor;

package/package/components/InstanceNameEditor.svelte

@@ -1,4 +1,6 @@
-<script lang="ts">import { Pencil } from 'lucide-svelte';
+<script lang="ts">import { stopPropagation, createBubbler } from 'svelte/legacy';
+const bubble = createBubbler();
+import { Pencil } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import Button from './common/button/Button.svelte';
 import Popover from './meltComponents/Popover.svelte';
@@ -7,12 +9,8 @@ import ChangeInstanceUsernameInner from './ChangeInstanceUsernameInner.svelte';
 import { UserService } from '../gen';
 import { sendUserToast } from '../toast';
 import TextInput from './text_input/TextInput.svelte';
-export let value;
-export let email;
-export let username = undefined;
-export let automateUsernameCreation = false;
-export let login_type;
-let password = '';
+let { value = $bindable(), email, username = undefined, automateUsernameCreation = false, login_type = $bindable() } = $props();
+let password = $state('');
 const dispatch = createEventDispatcher();
 function saveName() {
     dispatch('save', value);
@@ -40,10 +38,12 @@ async function saveLoginType() {
 	}}
 	closeButton
 >
-	<svelte:fragment slot="trigger">
-		<Button nonCaptureEvent={true} size="xs" color="light" endIcon={{ icon: Pencil }}>Edit</Button>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
+	{#snippet trigger()}
+		<Button unifiedSize="sm" nonCaptureEvent={true} variant="subtle" startIcon={{ icon: Pencil }}
+			>Edit</Button
+		>
+	{/snippet}
+	{#snippet content()}
 		<div class="flex flex-col gap-8 max-w-sm p-4">
 			{#if automateUsernameCreation && username}
 				<ChangeInstanceUsernameInner {email} {username} on:renamed noPadding />
@@ -88,10 +88,11 @@ async function saveLoginType() {
 						type="password"
 						bind:value={password}
 						class="!w-auto grow"
-						on:click|stopPropagation={() => {}}
-						on:keydown|stopPropagation
-						on:keypress|stopPropagation={({ key }) => {
-							if (key === 'Enter') {
+						onclick={stopPropagation(() => {})}
+						onkeydown={stopPropagation(bubble('keydown'))}
+						onkeypress={(e) => {
+							e.stopPropagation()
+							if (e.key === 'Enter') {
 								savePassword()
 							}
 						}}
@@ -118,10 +119,11 @@ async function saveLoginType() {
 						type="text"
 						bind:value={login_type}
 						class="!w-auto grow"
-						on:click|stopPropagation={() => {}}
-						on:keydown|stopPropagation
-						on:keypress|stopPropagation={({ key }) => {
-							if (key === 'Enter') {
+						onclick={stopPropagation(() => {})}
+						onkeydown={stopPropagation(bubble('keydown'))}
+						onkeypress={(e) => {
+							e.stopPropagation()
+							if (e.key === 'Enter') {
 								saveLoginType()
 							}
 						}}
@@ -145,5 +147,5 @@ async function saveLoginType() {
 				</Button>
 			</label>
 		</div>
-	</svelte:fragment>
+	{/snippet}
 </Popover>

package/package/components/InstanceNameEditor.svelte.d.ts

@@ -1,3 +1,10 @@
+interface Props {
+    value: string | undefined;
+    email: string;
+    username?: string | undefined;
+    automateUsernameCreation?: boolean;
+    login_type: 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;
@@ -11,19 +18,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const InstanceNameEditor: $$__sveltets_2_IsomorphicComponent<{
-    value: string | undefined;
-    email: string;
-    username?: string | undefined;
-    automateUsernameCreation?: boolean;
-    login_type: string;
-}, {
+declare const InstanceNameEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     renamed: CustomEvent<any>;
-    keydown: KeyboardEvent;
     save: CustomEvent<any>;
     refresh: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "value" | "login_type">;
 type InstanceNameEditor = InstanceType<typeof InstanceNameEditor>;
 export default InstanceNameEditor;