windmill-components 1.623.2 → 1.655.0

package/package/components/S3FilePicker.svelte

@@ -8,7 +8,7 @@ import { FileUp } from 'lucide-svelte';
 import { SettingService } from '../gen';
 import { workspaceStore } from '../stores';
 import { resource } from 'runed';
-let { fromWorkspaceSettings = false, readOnlyMode, initialFileKey = $bindable(undefined), selectedFileKey = $bindable(undefined), folderOnly = false, regexFilter = undefined, onClose, onSelectAndClose } = $props();
+let { fromWorkspaceSettings = false, readOnlyMode, allowDelete = false, initialFileKey = $bindable(undefined), selectedFileKey = $bindable(undefined), folderOnly = false, regexFilter = undefined, onClose, onSelectAndClose } = $props();
 let drawer = $state();
 let s3FilePickerInner = $state();
 let workspaceSettingsInitialized = $state(true);
@@ -51,6 +51,7 @@ export async function open(_preSelectedFileKey = undefined) {
 			}}
 			{fromWorkspaceSettings}
 			{readOnlyMode}
+			{allowDelete}
 			bind:initialFileKey
 			bind:selectedFileKey
 			bind:workspaceSettingsInitialized

package/package/components/S3FilePicker.svelte.d.ts

@@ -2,6 +2,7 @@ import { type S3Object } from '../utils';
 interface Props {
     fromWorkspaceSettings?: boolean;
     readOnlyMode: boolean;
+    allowDelete?: boolean;
     initialFileKey?: {
         s3: string;
         storage?: string;

package/package/components/S3FilePickerInner.svelte

@@ -20,7 +20,8 @@ let moveModalOpen = $state(false);
 let moveDestKey = $state(undefined);
 let fileMoveInProgress = $state(false);
 let initialFileKeyInternalCopy;
-let { fromWorkspaceSettings = false, readOnlyMode, initialFileKey = $bindable(undefined), selectedFileKey = $bindable(undefined), folderOnly = false, regexFilter = undefined, hideS3SpecificDetails = false, rootPath = '', workspaceSettingsInitialized = $bindable(true), storage = $bindable(undefined), uploadModalOpen = $bindable(false), allFilesByKey = $bindable({}), replaceUnauthorizedWarning, listStoredFilesRequest = HelpersService.listStoredFiles, loadFilePreviewRequest = HelpersService.loadFilePreview, loadFileMetadataRequest = HelpersService.loadFileMetadata, deleteS3FileRequest = HelpersService.deleteS3File, moveS3FileRequest = HelpersService.moveS3File, testConnectionRequest = HelpersService.datasetStorageTestConnection } = $props();
+let { fromWorkspaceSettings = false, readOnlyMode, initialFileKey = $bindable(undefined), selectedFileKey = $bindable(undefined), folderOnly = false, regexFilter = undefined, hideS3SpecificDetails = false, rootPath: initialRootPath = '', workspaceSettingsInitialized = $bindable(true), storage = $bindable(undefined), uploadModalOpen = $bindable(false), allFilesByKey = $bindable({}), allowDelete = false, replaceUnauthorizedWarning, listStoredFilesRequest = HelpersService.listStoredFiles, loadFilePreviewRequest = HelpersService.loadFilePreview, loadFileMetadataRequest = HelpersService.loadFileMetadata, deleteS3FileRequest = HelpersService.deleteS3File, moveS3FileRequest = HelpersService.moveS3File, testConnectionRequest = HelpersService.datasetStorageTestConnection } = $props();
+let rootPath = $state(initialRootPath);
 let rootPathNestingLevel = $derived(1 * (rootPath.split('/').length - 1));
 let csvSeparatorChar = $state(',');
 let csvHasHeader = $state(true);
@@ -133,7 +134,7 @@ async function loadFiles() {
             }
         }
     }
-    displayedFileKeys = displayedFileKeys.sort();
+    displayedFileKeys = [...new Set(displayedFileKeys)].sort();
     fileListLoading = false;
     fileInfoLoading = false;
 }
@@ -244,7 +245,7 @@ async function deleteFileFromS3(fileKey) {
             }
         }
     }
-    displayedFileKeys = displayedFileKeys.sort();
+    displayedFileKeys = [...new Set(displayedFileKeys)].sort();
 }
 async function clearAndLoadFiles({ keepFilter } = {}) {
     displayedFileKeys = [];
@@ -285,10 +286,19 @@ async function moveS3File(srcFileKey, destFileKey) {
 export async function open(_preSelectedFileKey = undefined) {
     const preSelectedFileKey = _preSelectedFileKey && parseS3Object(_preSelectedFileKey);
     storage = preSelectedFileKey?.storage;
-    if (preSelectedFileKey !== undefined) {
+    if (preSelectedFileKey !== undefined && preSelectedFileKey.s3.endsWith('/')) {
+        rootPath = preSelectedFileKey.s3;
+        filter = '';
+        selectedFileKey = undefined;
+    }
+    else if (preSelectedFileKey !== undefined) {
+        rootPath = '';
         initialFileKey = { ...preSelectedFileKey };
         selectedFileKey = { ...preSelectedFileKey };
     }
+    else {
+        rootPath = '';
+    }
     reloadContent();
 }
 export async function close() {
@@ -322,7 +332,7 @@ export async function reloadContent() {
         if (allFilesByKey[selectedFileKey.s3] === undefined) {
             selectedFileKey = { s3: '', storage };
         }
-        else {
+        else if (allFilesByKey[selectedFileKey.s3].type !== 'folder') {
             loadFileMetadataPlusPreviewAsync(selectedFileKey.s3);
         }
     }
@@ -378,7 +388,7 @@ function selectItem(index, toggleCollapsed = true) {
                 }
             }
         }
-        displayedFileKeys = displayedFileKeys.sort();
+        displayedFileKeys = [...new Set(displayedFileKeys)].sort();
     }
     else {
         selectedFileKey = {
@@ -580,8 +590,10 @@ $effect.pre(() => {
 											startIcon={{ icon: MoveRight }}
 											iconOnly={true}
 										/>
+									{/if}
+									{#if !readOnlyMode || allowDelete}
 										<Button
-											title="Delete file from S3"
+											title="Delete file"
 											variant="default"
 											on:click={() => {
 												deletionModalOpen = true

package/package/components/S3FilePickerInner.svelte.d.ts

@@ -28,6 +28,7 @@ interface Props {
         nestingLevel: number;
         count: number;
     }>;
+    allowDelete?: boolean;
     replaceUnauthorizedWarning?: Snippet;
     listStoredFilesRequest?: (d: ListStoredFilesData) => CancelablePromise<ListStoredFilesResponse>;
     loadFilePreviewRequest?: (d: LoadFilePreviewData) => CancelablePromise<LoadFilePreviewResponse>;

package/package/components/S3ObjectPicker.svelte

@@ -4,13 +4,12 @@ import { Button } from './common';
 import Toggle from './Toggle.svelte';
 import S3FilePicker from './S3FilePicker.svelte';
 import FileUpload from './common/fileUpload/FileUpload.svelte';
-export let value;
-export let editor = undefined;
+let { value = $bindable(), editor = $bindable(undefined) } = $props();
 const dispatch = createEventDispatcher();
-let s3FilePicker;
-let s3FileUploadRawMode;
+let s3FilePicker = $state();
+let s3FileUploadRawMode = $state();
 let el = undefined;
-let rawValue = undefined;
+let rawValue = $state(undefined);
 function evalValueToRaw() {
     rawValue = JSON.stringify(value, null, 2);
 }

package/package/components/S3ObjectPicker.svelte.d.ts

@@ -1,4 +1,8 @@
 import type SimpleEditor from './SimpleEditor.svelte';
+interface Props {
+    value: any;
+    editor?: SimpleEditor | 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,16 +16,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const S3ObjectPicker: $$__sveltets_2_IsomorphicComponent<{
-    value: any;
-    editor?: SimpleEditor | undefined;
-    focus?: () => void;
-}, {
+declare const S3ObjectPicker: $$__sveltets_2_IsomorphicComponent<Props, {
     focus: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;
-}, string>;
+}, "value" | "editor">;
 type S3ObjectPicker = InstanceType<typeof S3ObjectPicker>;
 export default S3ObjectPicker;

package/package/components/SaveButton.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">import { Button } from './common';
+import {} from './common/button/model';
+import { Save, CheckCircle2, AlertCircle, Loader2 } from 'lucide-svelte';
+import { fly } from 'svelte/transition';
+import { sendUserToast } from '../toast';
+let { onSave, disabled = false, label = 'Save settings', size = undefined, unifiedSize = undefined, variant = 'accent' } = $props();
+let isSaving = $state(false);
+let saveStatus = $state(null);
+let statusTimeout = null;
+function clearStatusTimeout() {
+    if (statusTimeout !== null) {
+        clearTimeout(statusTimeout);
+        statusTimeout = null;
+    }
+}
+function handleClick() {
+    if (isSaving)
+        return;
+    isSaving = true;
+    saveStatus = null;
+    clearStatusTimeout();
+    Promise.resolve(onSave())
+        .then(() => {
+        saveStatus = 'success';
+        statusTimeout = setTimeout(() => {
+            saveStatus = null;
+            statusTimeout = null;
+        }, 1500);
+    })
+        .catch((error) => {
+        console.error('Save failed:', error);
+        sendUserToast(error?.message ?? 'Save failed', true);
+        saveStatus = 'error';
+        statusTimeout = setTimeout(() => {
+            saveStatus = null;
+            statusTimeout = null;
+        }, 3000);
+    })
+        .finally(() => {
+        isSaving = false;
+    });
+}
+$effect(() => {
+    return () => {
+        clearStatusTimeout();
+    };
+});
+</script>
+
+<div class="relative overflow-hidden rounded-md">
+	<Button
+		{variant}
+		{size}
+		{unifiedSize}
+		startIcon={{
+			icon: isSaving ? Loader2 : Save,
+			classes: isSaving ? 'animate-spin' : ''
+		}}
+		disabled={disabled || isSaving}
+		onClick={handleClick}
+	>
+		{isSaving ? 'Saving...' : label}
+	</Button>
+
+	{#if saveStatus === 'success'}
+		<div
+			class="absolute inset-0 flex items-center justify-center bg-green-200 dark:bg-green-800 rounded-md"
+			transition:fly={{ y: -10, duration: 300 }}
+		>
+			<CheckCircle2 class="w-5 h-5 text-green-700 dark:text-green-300" />
+		</div>
+	{:else if saveStatus === 'error'}
+		<div
+			class="absolute inset-0 flex items-center justify-center bg-red-500 dark:bg-red-700 rounded-md"
+			transition:fly={{ y: -10, duration: 300 }}
+		>
+			<AlertCircle class="w-5 h-5 text-white" />
+		</div>
+	{/if}
+</div>

package/package/components/SaveButton.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type ButtonType } from './common/button/model';
+type $$ComponentProps = {
+    onSave: () => void | Promise<void>;
+    disabled?: boolean;
+    label?: string;
+    size?: ButtonType.Size | undefined;
+    unifiedSize?: ButtonType.UnifiedSize | undefined;
+    variant?: ButtonType.Variant;
+};
+declare const SaveButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type SaveButton = ReturnType<typeof SaveButton>;
+export default SaveButton;

package/package/components/SaveInputsButton.svelte

@@ -7,13 +7,8 @@ import { sendUserToast } from '../utils.js';
 import { createEventDispatcher } from 'svelte';
 import Tooltip from './Tooltip.svelte';
 const dispatch = createEventDispatcher();
-export let runnableId;
-export let runnableType;
-export let args;
-export let disabled = false;
-export let small = undefined;
-export let showTooltip = undefined;
-let savingInputs = false;
+let { runnableId, runnableType, args, disabled = false, small = undefined, showTooltip = undefined } = $props();
+let savingInputs = $state(false);
 async function saveInput(args) {
     savingInputs = true;
     const requestBody = {
@@ -43,7 +38,7 @@ async function saveInput(args) {
 	loading={savingInputs}
 	startIcon={{ icon: Save }}
 	variant={small ? 'subtle' : 'default'}
-	unifiedSize="md"
+	unifiedSize="sm"
 >
 	<span>{small ? 'Save inputs' : 'Save current input'}</span>
 	{#if showTooltip}

package/package/components/SaveInputsButton.svelte.d.ts

@@ -1,4 +1,12 @@
 import { type RunnableType } from '../gen/index.js';
+interface Props {
+    runnableId: string | undefined;
+    runnableType: RunnableType | undefined;
+    args: object;
+    disabled?: boolean;
+    small?: boolean | undefined;
+    showTooltip?: boolean | 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,17 +20,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const SaveInputsButton: $$__sveltets_2_IsomorphicComponent<{
-    runnableId: string | undefined;
-    runnableType: RunnableType | undefined;
-    args: object;
-    disabled?: boolean;
-    small?: boolean | undefined;
-    showTooltip?: boolean | undefined;
-}, {
+declare const SaveInputsButton: $$__sveltets_2_IsomorphicComponent<Props, {
     update: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type SaveInputsButton = InstanceType<typeof SaveInputsButton>;
 export default SaveInputsButton;

package/package/components/SavedInputsPickerViewer.svelte

@@ -1,17 +1,14 @@
-<script lang="ts">import { Button } from './common';
+<script lang="ts">import { run, createBubbler } from 'svelte/legacy';
+const bubble = createBubbler();
+import { Button } from './common';
 import Popover from './meltComponents/Popover.svelte';
 import ObjectViewerWrapper from './propertyPicker/ObjectViewerWrapper.svelte';
 import { copyToClipboard, isObjectTooBig } from '../utils';
 import { Eye, CopyIcon, Loader2 } from 'lucide-svelte';
-import { createEventDispatcher } from 'svelte';
-export let payloadData;
-export let limitPayloadSize = false;
-export let hover = false;
-export let viewerOpen = false;
-export let maxWidth = undefined;
-export let editOptions = true;
+import { createEventDispatcher, untrack } from 'svelte';
+let { payloadData, limitPayloadSize = false, hover = false, viewerOpen = false, maxWidth = undefined, editOptions = true } = $props();
 const dispatch = createEventDispatcher();
-const payloadTooBigForPreview = payloadData != 'WINDMILL_TOO_BIG' && isObjectTooBig(payloadData);
+const payloadTooBigForPreview = untrack(() => payloadData) != 'WINDMILL_TOO_BIG' && isObjectTooBig(untrack(() => payloadData));
 const buttonWidth = 34;
 const floatingConfig = {
     placement: 'bottom-end',
@@ -27,12 +24,12 @@ const floatingConfig = {
         }
     ]
 };
-const xOffset = editOptions ? 218 : 168; // width of the optional buttons on the right
-let popover;
+const xOffset = untrack(() => editOptions) ? 218 : 168; // width of the optional buttons on the right
+let popover = $state();
 let popoverOpen = false;
 let hoverTimeout;
-let objectViewerLoaded = false;
-let popoverFullyOpened = false;
+let objectViewerLoaded = $state(false);
+let popoverFullyOpened = $state(false);
 function handlePopoverChange(event) {
     const isOpen = event.detail;
     popoverOpen = isOpen;
@@ -66,8 +63,10 @@ function handleHoverChange(isHovering) {
         }
     }
 }
-$: handleHoverChange(hover);
-$: ajustedWidth = maxWidth ? Math.abs(maxWidth - xOffset) : undefined;
+run(() => {
+    handleHoverChange(hover);
+});
+let ajustedWidth = $derived(maxWidth ? Math.abs(maxWidth - xOffset) : undefined);
 </script>
 
 <Popover
@@ -78,10 +77,10 @@ $: ajustedWidth = maxWidth ? Math.abs(maxWidth - xOffset) : undefined;
 		e.stopPropagation()
 	}}
 	closeOnOtherPopoverOpen
-	closeOnClickOutside={false}
+	closeOnOutsideClick={false}
 	usePointerDownOutside
 >
-	<svelte:fragment slot="trigger" let:isOpen>
+	{#snippet trigger({ isOpen })}
 		<Button
 			variant="subtle"
 			unifiedSize="sm"
@@ -91,8 +90,8 @@ $: ajustedWidth = maxWidth ? Math.abs(maxWidth - xOffset) : undefined;
 			nonCaptureEvent
 			startIcon={{ icon: Eye }}
 		/>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
+	{/snippet}
+	{#snippet content()}
 		<div
 			class="p-2 overflow-auto"
 			style="width: {ajustedWidth ? ajustedWidth + 'px' : '50vh'}; max-height: 50vh"
@@ -111,10 +110,10 @@ $: ajustedWidth = maxWidth ? Math.abs(maxWidth - xOffset) : undefined;
 					role="button"
 					tabindex="0"
 					aria-label="Copy JSON payload to clipboard"
-					on:click={() => {
+					onclick={() => {
 						copyToClipboard(JSON.stringify(payloadData))
 					}}
-					on:keydown
+					onkeydown={bubble('keydown')}
 				>
 					{#if !objectViewerLoaded && payloadTooBigForPreview}
 						<div class="flex justify-center items-center py-4">
@@ -151,5 +150,5 @@ $: ajustedWidth = maxWidth ? Math.abs(maxWidth - xOffset) : undefined;
 				</div>
 			{/if}
 		</div>
-	</svelte:fragment>
+	{/snippet}
 </Popover>

package/package/components/SavedInputsPickerViewer.svelte.d.ts

@@ -1,3 +1,11 @@
+interface Props {
+    payloadData: any;
+    limitPayloadSize?: boolean;
+    hover?: boolean;
+    viewerOpen?: boolean;
+    maxWidth?: number | undefined;
+    editOptions?: 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,18 +19,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const SavedInputsPickerViewer: $$__sveltets_2_IsomorphicComponent<{
-    payloadData: any;
-    limitPayloadSize?: boolean;
-    hover?: boolean;
-    viewerOpen?: boolean;
-    maxWidth?: number | undefined;
-    editOptions?: boolean;
-}, {
-    keydown: KeyboardEvent;
+declare const SavedInputsPickerViewer: $$__sveltets_2_IsomorphicComponent<Props, {
     openChange: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type SavedInputsPickerViewer = InstanceType<typeof SavedInputsPickerViewer>;
 export default SavedInputsPickerViewer;

package/package/components/SavedInputsV2.svelte

@@ -121,9 +121,7 @@ let filteredSchema = $derived({
 							{/snippet}
 						</Popover>
 						<Button
-							size="xs2"
-							color="light"
-							btnClasses="!text-primary"
+							unifiedSize="sm"
 							endIcon={{ icon: ExternalLink }}
 							on:click={() => {
 								window.open(`/runs/${runnableId}`, '_blank')

package/package/components/SchemaEditorProperty.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import Badge from './common/badge/Badge.svelte';
-export let property;
+let { property } = $props();
 </script>
 
 <div class="flex flex-row flex-wrap gap-1">

package/package/components/SchemaEditorProperty.svelte.d.ts

@@ -1,21 +1,7 @@
 import type { SchemaProperty } from '../common';
-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 SchemaEditorProperty: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     property: SchemaProperty;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type SchemaEditorProperty = InstanceType<typeof SchemaEditorProperty>;
+}
+declare const SchemaEditorProperty: import("svelte").Component<Props, {}, "">;
+type SchemaEditorProperty = ReturnType<typeof SchemaEditorProperty>;
 export default SchemaEditorProperty;

package/package/components/SchemaForm.svelte.d.ts

@@ -85,6 +85,6 @@ declare const SchemaForm: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     setDefaults: () => void;
-}, "args" | "schema" | "isValid" | "linkedSecret">;
+}, "args" | "schema" | "linkedSecret" | "isValid">;
 type SchemaForm = InstanceType<typeof SchemaForm>;
 export default SchemaForm;

package/package/components/SchemaFormWithArgPicker.svelte

@@ -6,15 +6,10 @@ import { History, Save } from 'lucide-svelte';
 import CaptureIcon from './triggers/CaptureIcon.svelte';
 import CaptureButton from './triggers/CaptureButton.svelte';
 import SavedInputsPicker from './SavedInputsPicker.svelte';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 import CaptureTable from './triggers/CaptureTable.svelte';
 import RefreshButton from './common/button/RefreshButton.svelte';
-export let runnableId = '';
-export let stablePathForCaptures = '';
-export let runnableType;
-export let previewArgs;
-export let isValid = true;
-export let jsonView = false;
+let { runnableId = '', stablePathForCaptures = '', runnableType, previewArgs, isValid = true, jsonView = false, children } = $props();
 const dispatch = createEventDispatcher();
 export function refreshHistory() {
     historicInputs?.refresh();
@@ -73,15 +68,20 @@ const getDropdownItems = () => {
         }
     ];
 };
-let rightHeight = 0;
-let selectedTab = undefined;
-let dropdownItems;
-let rightPanelOpen = false;
-let savedInputsPicker = undefined;
-let captureTable = undefined;
-let historicInputs = undefined;
-$: (selectedTab, (dropdownItems = getDropdownItems()));
-let inputPanelSize = 70;
+let rightHeight = $state(0);
+let selectedTab = $state(undefined);
+let dropdownItems = $state();
+let rightPanelOpen = $state(false);
+let savedInputsPicker = $state(undefined);
+let captureTable = $state(undefined);
+let historicInputs = $state(undefined);
+$effect(() => {
+    selectedTab;
+    untrack(() => {
+        dropdownItems = getDropdownItems();
+    });
+});
+let inputPanelSize = $state(70);
 </script>
 
 <div class="h-fit">
@@ -93,7 +93,7 @@ let inputPanelSize = 70;
 	<Splitpanes class={!rightPanelOpen ? 'splitter-hidden' : ''}>
 		<Pane bind:size={inputPanelSize} class="!overflow-visible" minSize={30}>
 			<div class="relative w-full h-fit pr-12 pb-4" bind:clientHeight={rightHeight}>
-				<slot />
+				{@render children?.()}
 			</div>
 		</Pane>
 
@@ -102,14 +102,16 @@ let inputPanelSize = 70;
 				<div style="height: {rightHeight}px" class="border-t border-r pb-2">
 					{#if selectedTab === 'history'}
 						<FlowInputEditor title="History">
-							<svelete:fragment slot="action">
-								<div class="center-center">
-									<RefreshButton
-										loading={historicInputs?.loading() ?? false}
-										onClick={() => historicInputs?.refresh()}
-									/>
-								</div>
-							</svelete:fragment>
+							{#snippet action()}
+								<svelete:fragment>
+									<div class="center-center">
+										<RefreshButton
+											loading={historicInputs?.loading() ?? false}
+											onClick={() => historicInputs?.refresh()}
+										/>
+									</div>
+								</svelete:fragment>
+							{/snippet}
 							<HistoricInputs
 								bind:this={historicInputs}
 								{runnableId}
@@ -135,11 +137,13 @@ let inputPanelSize = 70;
 						</FlowInputEditor>
 					{:else if selectedTab === 'captures'}
 						<FlowInputEditor title="Trigger captures">
-							<svelete:fragment slot="action">
-								<div class="center-center">
-									<CaptureButton on:openTriggers small={true} />
-								</div>
-							</svelete:fragment>
+							{#snippet action()}
+								<svelete:fragment>
+									<div class="center-center">
+										<CaptureButton on:openTriggers small={true} />
+									</div>
+								</svelete:fragment>
+							{/snippet}
 							<div class="h-full">
 								<CaptureTable
 									path={stablePathForCaptures}

package/package/components/SchemaFormWithArgPicker.svelte.d.ts

@@ -1,3 +1,12 @@
+interface Props {
+    runnableId?: string;
+    stablePathForCaptures?: string;
+    runnableType: any;
+    previewArgs: any;
+    isValid?: boolean;
+    jsonView?: boolean;
+    children?: import('svelte').Snippet;
+}
 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,32 +20,14 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const SchemaFormWithArgPicker: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    runnableId?: string;
-    stablePathForCaptures?: string;
-    runnableType: any;
-    previewArgs: any;
-    isValid?: boolean;
-    jsonView?: boolean;
-    refreshHistory?: () => void;
-    resetSelected?: () => void;
-}, {
-    default: {};
-}>, {
+declare const SchemaFormWithArgPicker: $$__sveltets_2_IsomorphicComponent<Props, {
     openTriggers: CustomEvent<any>;
     select: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {
+}, {}, {
     refreshHistory: () => void;
     resetSelected: () => void;
-}, string>;
+}, "">;
 type SchemaFormWithArgPicker = InstanceType<typeof SchemaFormWithArgPicker>;
 export default SchemaFormWithArgPicker;