windmill-components 1.542.5 → 1.555.0

package/package/components/apps/editor/settingsPanel/GridTab.svelte

@@ -9,7 +9,8 @@ import { dragHandle, dragHandleZone } from '@windmill-labs/svelte-dnd-action';
 import { generateRandomString } from '../../../../utils';
 import { GripVertical, Plus } from 'lucide-svelte';
 import GridTabDisabled from './GridTabDisabled.svelte';
-let { tabs = $bindable(undefined), disabledTabs = $bindable(undefined), canDisableTabs = false, word = 'Tab', component = $bindable() } = $props();
+import GridTabHidden from './GridTabHidden.svelte';
+let { tabs = $bindable(undefined), disabledTabs = $bindable(undefined), hiddenTabs = $bindable(undefined), canDisableTabs = false, canHideTabs = false, word = 'Tab', component = $bindable() } = $props();
 $effect.pre(() => {
     if (tabs == undefined) {
         tabs = [];
@@ -20,6 +21,12 @@ $effect.pre(() => {
             { type: 'static', value: false, fieldType: 'boolean' }
         ];
     }
+    if (hiddenTabs == undefined) {
+        hiddenTabs = [
+            { type: 'static', value: false, fieldType: 'boolean' },
+            { type: 'static', value: false, fieldType: 'boolean' }
+        ];
+    }
 });
 let items = $state.raw((tabs ?? []).map((tab, index) => {
     return { value: tab, id: generateRandomString(), originalIndex: index };
@@ -47,6 +54,7 @@ function addTab() {
     ];
     component.numberOfSubgrids = items.length;
     disabledTabs = [...(disabledTabs ?? []), { type: 'static', value: false, fieldType: 'boolean' }];
+    hiddenTabs = [...(hiddenTabs ?? []), { type: 'static', value: false, fieldType: 'boolean' }];
 }
 function deleteSubgrid(index) {
     let subgrid = `${component.id}-${index}`;
@@ -64,6 +72,8 @@ function deleteSubgrid(index) {
     items = items.filter((item) => item.originalIndex !== index);
     // Delete the item in the disabledTabs array
     disabledTabs = (disabledTabs ?? []).filter((_, i) => i !== index);
+    // Delete the item in the hiddenTabs array
+    hiddenTabs = (hiddenTabs ?? []).filter((_, i) => i !== index);
     component.numberOfSubgrids = items.length;
     // Update the originalIndex of the remaining items
     items.forEach((item, i) => {
@@ -93,10 +103,13 @@ function handleFinalize(e) {
                 $app.subgrids[`${component.id}-${items[i].originalIndex}`] ?? [];
         }
         const newDisabledTabs = [];
+        const newHiddenTabs = [];
         for (let i = 0; i < items.length; i++) {
             disabledTabs && newDisabledTabs.push(disabledTabs[items[i].originalIndex]);
+            hiddenTabs && newHiddenTabs.push(hiddenTabs[items[i].originalIndex]);
         }
         disabledTabs = newDisabledTabs;
+        hiddenTabs = newHiddenTabs;
         // update originalIndex
         items.forEach((item, i) => {
             item.originalIndex = i;
@@ -156,6 +169,11 @@ const rnd = generateRandomString();
 					{#if canDisableTabs && disabledTabs}
 						<GridTabDisabled {index} bind:field={disabledTabs[index]} id={component.id} />
 					{/if}
+					{#if canHideTabs && hiddenTabs}
+						<div class="mt-2">
+							<GridTabHidden {index} bind:field={hiddenTabs[index]} id={component.id} />
+						</div>
+					{/if}
 				</div>
 			{/each}
 		</section>

package/package/components/apps/editor/settingsPanel/GridTab.svelte.d.ts

@@ -3,10 +3,12 @@ import type { AppComponent } from '../component';
 interface Props {
     tabs?: string[];
     disabledTabs?: RichConfiguration[];
+    hiddenTabs?: RichConfiguration[];
     canDisableTabs?: boolean;
+    canHideTabs?: boolean;
     word?: string;
     component: AppComponent;
 }
-declare const GridTab: import("svelte").Component<Props, {}, "component" | "tabs" | "disabledTabs">;
+declare const GridTab: import("svelte").Component<Props, {}, "component" | "tabs" | "disabledTabs" | "hiddenTabs">;
 type GridTab = ReturnType<typeof GridTab>;
 export default GridTab;

package/package/components/apps/editor/settingsPanel/GridTabHidden.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">import Toggle from '../../../Toggle.svelte';
+import InputsSpecEditor from './InputsSpecEditor.svelte';
+import { slide } from 'svelte/transition';
+let { id, field = $bindable(), index } = $props();
+let hideable = $state(field && !(field?.type === 'static' && field?.value === false));
+</script>
+
+<Toggle
+	bind:checked={hideable}
+	size="xs"
+	options={{
+		right: 'Can be hidden'
+	}}
+	on:change={() => {
+		if (hideable) {
+			field = {
+				type: 'evalv2',
+				expr: 'false',
+				fieldType: 'boolean',
+				connections: []
+			}
+		} else {
+			field = {
+				type: 'static',
+				value: false,
+				fieldType: 'boolean'
+			}
+		}
+	}}
+/>
+
+{#if hideable}
+	<div transition:slide|local>
+		<InputsSpecEditor
+			key="tabHidden {index}"
+			bind:componentInput={field}
+			{id}
+			userInputEnabled={false}
+			shouldCapitalize={true}
+			resourceOnly={false}
+			fieldType={field?.['fieldType']}
+			subFieldType={field?.['subFieldType']}
+			format={field?.['format']}
+			selectOptions={field?.['selectOptions']}
+			tooltip={field?.['tooltip']}
+			fileUpload={field?.['fileUpload']}
+			placeholder={field?.['placeholder']}
+			customTitle={field?.['customTitle']}
+			displayType={false}
+		/>
+	</div>
+{/if}

package/package/components/apps/editor/settingsPanel/GridTabHidden.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { RichConfiguration } from '../../types';
+interface Props {
+    id: string;
+    field: RichConfiguration;
+    index: number;
+}
+declare const GridTabHidden: import("svelte").Component<Props, {}, "field">;
+type GridTabHidden = ReturnType<typeof GridTabHidden>;
+export default GridTabHidden;

package/package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte

@@ -77,7 +77,7 @@ function openConnection() {
 </script>
 
 {#if !(resourceOnly && (fieldType !== 'object' || !format?.startsWith('resource-')))}
-	<div class={classNames('flex gap-1', 'flex-col')}>
+	<div class={classNames('flex gap-1 flex-col group')}>
 		<div class="flex justify-between items-end">
 			<div class="flex flex-row gap-4 items-center">
 				<div class="flex items-center">
@@ -108,8 +108,15 @@ function openConnection() {
 
 			<div class={classNames('flex gap-x-2 gap-y-1 justify-end items-center')}>
 				{#if componentInput?.type && allowTypeChange !== false}
+					<ConnectionButton
+						{closeConnection}
+						{openConnection}
+						isOpen={!!$connectingInput.opened}
+						btnWrapperClasses={'h-6 w-8 opacity-0 group-hover:opacity-100 transition-opacity'}
+						id="schema-plug-{key}"
+					/>
 					<ToggleButtonGroup
-						class="h-7"
+						class="h-6"
 						bind:selected={componentInput.type}
 						on:selected={(e) => {
 							if (
@@ -131,38 +138,81 @@ function openConnection() {
 						}}
 					>
 						{#snippet children({ item })}
-							<ToggleButton value="static" icon={Pen} iconOnly tooltip="Static" {item} />
+							<ToggleButton
+								small
+								light
+								value="static"
+								icon={Pen}
+								iconOnly
+								tooltip="Static"
+								{item}
+							/>
 							{#if userInputEnabled}
-								<ToggleButton value="user" icon={User} iconOnly tooltip="User Input" {item} />
+								<ToggleButton
+									small
+									light
+									value="user"
+									icon={User}
+									iconOnly
+									tooltip="User Input"
+									{item}
+								/>
 							{/if}
 							{#if fileUpload}
-								<ToggleButton value="upload" icon={Upload} iconOnly tooltip="Upload" {item} />
+								<ToggleButton
+									small
+									light
+									value="upload"
+									icon={Upload}
+									iconOnly
+									tooltip="Upload"
+									{item}
+								/>
 							{/if}
 							{#if fileUploadS3}
 								<ToggleButton
 									value="uploadS3"
 									icon={UploadCloud}
 									iconOnly
+									light
+									small
 									tooltip="Upload S3"
 									{item}
 								/>
 							{/if}
 							{#if componentInput?.type === 'connected'}
-								<ToggleButton value="connected" icon={Plug2} iconOnly tooltip="Connect" {item} />
+								<ToggleButton
+									light
+									value="connected"
+									icon={Plug2}
+									iconOnly
+									small
+									tooltip="Connect"
+									{item}
+								/>
 							{/if}
 							{#if componentInput?.type === 'eval'}
 								<ToggleButton
 									value="eval"
 									icon={FunctionSquare}
 									iconOnly
+									light
+									small
 									tooltip="Eval Legacy"
 									{item}
 								/>
 							{/if}
-							<ToggleButton value="evalv2" icon={FunctionSquare} iconOnly tooltip="Eval" {item} />
+							<ToggleButton
+								value="evalv2"
+								light
+								icon={FunctionSquare}
+								iconOnly
+								small
+								tooltip="Eval"
+								{item}
+							/>
 						{/snippet}
 					</ToggleButtonGroup>
-					<ConnectionButton {closeConnection} {openConnection} isOpen={!!$connectingInput.opened} />
 				{/if}
 			</div>
 		</div>

package/package/components/auditLogs/AuditLogsFilters.svelte

@@ -190,6 +190,9 @@ const operations = {
     USERS_ADD_GLOBAL: 'users.add_global',
     USERS_IMPERSONATE: 'users.impersonate',
     USERS_LEAVE_WORKSPACE: 'users.leave_workspace',
+    USERS_SCIM_CREATE: 'users.scim_create',
+    USERS_SCIM_DELETE: 'users.scim_delete',
+    USERS_SCIM_UPDATE: 'users.scim_update',
     OAUTH_LOGIN: 'oauth.login',
     OAUTH_LOGIN_FAILURE: 'oauth.login_failure',
     OAUTH_SIGNUP: 'oauth.signup',
@@ -217,6 +220,9 @@ const operations = {
     IGROUP_DELETE: 'igroup.delete',
     IGROUP_ADDUSER: 'igroup.adduser',
     IGROUP_REMOVEUSER: 'igroup.removeuser',
+    INSTANCE_GROUPS_SCIM_CREATE: 'instance_groups.scim_create',
+    INSTANCE_GROUPS_SCIM_DELETE: 'instance_groups.scim_delete',
+    INSTANCE_GROUPS_SCIM_UPDATE: 'instance_groups.scim_update',
     VARIABLES_DECRYPT_SECRET: 'variables.decrypt_secret',
     WORKSPACES_EDIT_COMMAND_SCRIPT: 'workspaces.edit_command_script',
     WORKSPACES_EDIT_DEPLOY_TO: 'workspaces.edit_deploy_to',
@@ -347,7 +353,7 @@ $effect(() => {
 
 		<Select
 			bind:value={operation}
-			items={['all', ...Object.keys(operations)].map((r) => ({ value: r, label: r }))}
+			items={['all', ...Object.values(operations)].map((r) => ({ value: r, label: r }))}
 			inputClass="dark:!bg-gray-700"
 			RightIcon={ChevronDown}
 		/>

package/package/components/auditLogs/AuditLogsTable.svelte

@@ -5,7 +5,7 @@ import Button from '../common/button/Button.svelte';
 import { ListFilter, ChevronLeft, ChevronRight } from 'lucide-svelte';
 import VirtualList from '@tutorlatin/svelte-tiny-virtual-list';
 import { twMerge } from 'tailwind-merge';
-let { logs = [], pageIndex = $bindable(1), perPage = $bindable(100), hasMore = $bindable(true), actionKind = $bindable(), operation = $bindable(), selectedId = undefined, usernameFilter = $bindable(), resourceFilter = $bindable(), onselect } = $props();
+let { logs = [], pageIndex = $bindable(1), perPage = $bindable(100), hasMore = $bindable(true), actionKind = $bindable(), operation = $bindable(), selectedId = undefined, usernameFilter = $bindable(), resourceFilter = $bindable(), showWorkspace = false, onselect } = $props();
 function groupLogsByDay(logs) {
     const groupedLogs = {};
     if (!logs)
@@ -82,9 +82,12 @@ function kindToBadgeColor(kind) {
 			class="flex flex-row bg-surface-secondary sticky top-0 w-full p-2 pr-4 text-xs font-semibold"
 		>
 			<div class="w-1/12">ID</div>
-			<div class="w-3/12">Timestamp</div>
-			<div class="w-3/12">Username</div>
-			<div class="w-3/12">Operation</div>
+			<div class={showWorkspace ? "w-2/12" : "w-3/12"}>Timestamp</div>
+			<div class={showWorkspace ? "w-2/12" : "w-3/12"}>Username</div>
+			{#if showWorkspace}
+				<div class="w-2/12">Workspace</div>
+			{/if}
+			<div class={showWorkspace ? "w-2/12" : "w-3/12"}>Operation</div>
 			<div class="w-2/12">Resource</div>
 		</div>
 	</div>
@@ -128,10 +131,10 @@ function kindToBadgeColor(kind) {
 									<div class="w-1/12 text-xs truncate">
 										{logOrDate.log.id}
 									</div>
-									<div class="w-3/12 text-xs">
+									<div class={showWorkspace ? "w-2/12 text-xs" : "w-3/12 text-xs"}>
 										{displayDate(logOrDate.log.timestamp)}
 									</div>
-									<div class="w-3/12 text-xs">
+									<div class={showWorkspace ? "w-2/12 text-xs" : "w-3/12 text-xs"}>
 										<div class="flex flex-row gap-2 items-center">
 											<div class="whitespace-nowrap overflow-x-auto no-scrollbar max-w-60">
 												{logOrDate.log.username}
@@ -150,7 +153,14 @@ function kindToBadgeColor(kind) {
 											/>
 										</div>
 									</div>
-									<div class="w-3/12 text-xs">
+									{#if showWorkspace}
+										<div class="w-2/12 text-xs">
+											<div class="whitespace-nowrap overflow-x-auto no-scrollbar max-w-60">
+												{logOrDate.log.workspace_id}
+											</div>
+										</div>
+									{/if}
+									<div class={showWorkspace ? "w-2/12 text-xs" : "w-3/12 text-xs"}>
 										<div class="flex flex-row gap-1">
 											<Badge
 												on:click={() => {

package/package/components/auditLogs/AuditLogsTable.svelte.d.ts

@@ -9,6 +9,7 @@ interface Props {
     selectedId?: number | undefined;
     usernameFilter?: string | undefined;
     resourceFilter?: string | undefined;
+    showWorkspace?: boolean;
     onselect?: (id: number) => void;
 }
 declare const AuditLogsTable: import("svelte").Component<Props, {}, "operation" | "perPage" | "hasMore" | "pageIndex" | "actionKind" | "usernameFilter" | "resourceFilter">;

package/package/components/common/CloseButton.svelte

@@ -2,12 +2,12 @@
 import Button from './button/Button.svelte';
 import { X } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
-let { noBg = false, small = false, Icon, class: className } = $props();
+let { noBg = false, small = false, Icon, class: className, onClick } = $props();
 const dispatch = createEventDispatcher();
 </script>
 
 <Button
-	on:click={() => dispatch('close')}
+	on:click={() => (dispatch('close'), onClick?.())}
 	on:pointerdown={(e) => e.stopPropagation()}
 	startIcon={{ icon: Icon ?? X }}
 	iconOnly

package/package/components/common/CloseButton.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     small?: boolean;
     Icon?: any | undefined;
     class?: string;
+    onClick?: () => void | undefined | any;
 }
 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> & {

package/package/components/common/ResizeTransitionWrapper.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">import { twMerge } from 'tailwind-merge';
+let { children, innerClass, class: className = '', horizontal, vertical, outerDivProps } = $props();
+let innerContainer = $state(null);
+let outerContainer = $state(null);
+let width = $state(null);
+let height = $state(null);
+let style = $derived.by(() => {
+    let s = 'transition: width 0.2s, height 0.2s; overflow: clip;';
+    if (width !== null)
+        s += `width: ${width}px;`;
+    if (height !== null)
+        s += `height: ${height}px;`;
+    return s;
+});
+$effect(() => {
+    if (!innerContainer || !outerContainer)
+        return;
+    let observer = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+            if (horizontal)
+                width = entry.contentRect.width;
+            if (vertical)
+                height = entry.contentRect.height;
+        }
+    });
+    observer.observe(innerContainer);
+    return () => {
+        if (innerContainer)
+            observer.unobserve(innerContainer);
+        observer.disconnect();
+    };
+});
+</script>
+
+<div bind:this={outerContainer} {...outerDivProps} class={className} {style}>
+	<div class={twMerge('absolute', innerClass)} bind:this={innerContainer}>
+		{@render children()}
+	</div>
+</div>

package/package/components/common/ResizeTransitionWrapper.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    children: import('svelte').Snippet;
+    innerClass?: string;
+    class?: string;
+    horizontal?: boolean;
+    vertical?: boolean;
+    outerDivProps?: HTMLAttributes<HTMLDivElement>;
+};
+declare const ResizeTransitionWrapper: import("svelte").Component<Props, {}, "">;
+type ResizeTransitionWrapper = ReturnType<typeof ResizeTransitionWrapper>;
+export default ResizeTransitionWrapper;

package/package/components/common/badge/CountBadge.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">import { Loader2 } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
+let { count, small = true, alwaysVisible = false } = $props();
+</script>
+
+{#if count === undefined || count > 0 || alwaysVisible}
+	<div
+		class={twMerge(
+			// Base styles that apply in all cases
+			'absolute z-10 rounded-full overflow-hidden',
+			'flex center-center text-primary-inverse font-mono',
+			'bg-tertiary/50 group-hover:bg-primary transition-all duration-[100ms]',
+			alwaysVisible || count === undefined ? 'bg-primary' : '',
+
+			// Size variants based on small prop
+			small ? '-right-[3px] -top-[3px] h-3 w-3 text-[8px]' : '-right-1.5 -top-1.5 h-4 w-4 text-xs',
+
+			// Special case for always visible
+			alwaysVisible && small ? 'h-3 w-3 text-[8px] -right-0.5 -top-0.5' : '',
+			alwaysVisible && !small ? 'h-4 w-4 text-xs -right-1 -top-1' : ''
+		)}
+	>
+		{#if count === undefined}
+			<Loader2 class="animate-spin text-2xs" />
+		{:else}
+			<p>{count}</p>
+		{/if}
+	</div>
+{/if}

package/package/components/common/badge/CountBadge.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    count: number | undefined;
+    small?: boolean;
+    alwaysVisible?: boolean;
+}
+declare const CountBadge: import("svelte").Component<Props, {}, "">;
+type CountBadge = ReturnType<typeof CountBadge>;
+export default CountBadge;

package/package/components/common/button/Button.svelte

@@ -227,6 +227,7 @@ $effect(() => {
 			on:open={() => dispatch('dropdownOpen', true)}
 			on:close={() => dispatch('dropdownOpen', false)}
 			bind:open={dropdownOpen}
+			enableFlyTransition
 		>
 			{#snippet buttonReplacement()}
 				<div

package/package/components/common/button/ConnectionButton.svelte

@@ -3,9 +3,12 @@ import { pointerDownOutside } from '../../../utils';
 import AnimatedButton from './AnimatedButton.svelte';
 import Button from './Button.svelte';
 import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
 export let isOpen = false;
 export let openConnection;
 export let closeConnection;
+export let btnWrapperClasses = '';
+export let id = undefined;
 let selected = false;
 const { panzoomActive } = getContext('AppViewerContext');
 async function getConnectionButtonElements() {
@@ -67,7 +70,9 @@ $: !isOpen && (selected = false);
 			color="light"
 			title="Connect"
 			on:click={() => handleConnect(true)}
-			id="schema-plug"
+			{id}
+			wrapperClasses={twMerge(btnWrapperClasses, selected ? 'opacity-100' : '')}
+			btnClasses="p-0"
 		>
 			<Plug size={14} />
 		</Button>

package/package/components/common/button/ConnectionButton.svelte.d.ts

@@ -15,6 +15,8 @@ declare const ConnectionButton: $$__sveltets_2_IsomorphicComponent<{
     isOpen?: boolean;
     openConnection: () => void;
     closeConnection: () => void;
+    btnWrapperClasses?: string;
+    id?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/package/components/common/button/RefreshButton.svelte

@@ -1,7 +1,8 @@
-<script lang="ts">import { Button } from '..';
+<script lang="ts">import { Button, ButtonType } from '..';
 import { RefreshCw } from 'lucide-svelte';
 import Popover from '../../Popover.svelte';
-let { loading } = $props();
+import { twMerge } from 'tailwind-merge';
+let { loading, size = 'xs2', light = false } = $props();
 let buttonHover = $state(false);
 </script>
 
@@ -10,11 +11,14 @@ let buttonHover = $state(false);
 		on:mouseenter={() => (buttonHover = true)}
 		on:mouseleave={() => (buttonHover = false)}
 		color="light"
-		size="xs2"
+		{size}
 		variant="border"
 		on:click
 	>
-		<RefreshCw class={loading ? 'animate-spin ' : ''} size="14" />
+		<RefreshCw
+			class={twMerge(loading ? 'animate-spin ' : '', light ? 'text-secondary' : '')}
+			size="14"
+		/>
 	</Button>
 	{#snippet text()}
 		{#if loading}

package/package/components/common/button/RefreshButton.svelte.d.ts

@@ -1,5 +1,8 @@
+import { ButtonType } from '..';
 interface Props {
     loading: boolean;
+    size?: ButtonType.Size;
+    light?: 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> & {

package/package/components/common/calendarPicker/CalendarPicker.svelte

@@ -22,7 +22,7 @@ export let placement = 'top-end';
 		<button
 			title="Open calendar picker"
 			class={twMerge(
-				'absolute bottom-1 right-2 top-1 py-1 min-w-min !px-2 items-center text-primary bg-surface border rounded center-center hover:bg-surface-hover transition-all cursor-pointer',
+				'absolute bottom-1 right-2 top-1 py-1 min-w-min !px-2.5 items-center text-primary bg-surface-secondary rounded center-center hover:bg-surface-hover transition-all cursor-pointer',
 				$$props.class
 			)}
 			aria-label="Open calendar picker"

package/package/components/common/fileInput/FileInput.svelte

@@ -10,7 +10,7 @@ export let accept = '*';
 export let multiple = false;
 export let convertTo = undefined;
 export let hideIcon = false;
-export let iconSize = 36;
+export let iconSize = 24;
 export let returnFileNames = false;
 export let submittedText = undefined;
 export let defaultFile = undefined;
@@ -164,10 +164,11 @@ export function clearFiles() {
 
 <button
 	class={twMerge(
-		`relative center-center flex-col text-center font-medium text-tertiary
-		border border-dashed border-gray-400 hover:border-blue-500
+		`relative center-center flex flex-col gap-x-2 gap-y-1 justify-center items-center flex-wrap text-center font-normal text-hint text-xs rounded-md
+		bg-surface-secondary
+		border border-dashed border-nord-400 dark:border-nord-300 hover:border-nord-900 dark:hover:border-nord-900
 		focus-within:border-blue-300 hover:bg-blue-50 dark:hover:bg-frost-900
-		duration-200 rounded-component p-1`,
+		duration-200 px-1 py-8`,
 		c
 	)}
 	on:dragover={handleDragOver}
@@ -186,7 +187,7 @@ export function clearFiles() {
 	{disabled}
 >
 	{#if !hideIcon && !files}
-		<FileUp size={iconSize} class="mb-2" />
+		<FileUp size={iconSize} />
 	{/if}
 	{#if files}
 		<div class="w-full max-h-full overflow-auto px-6">
@@ -235,7 +236,7 @@ export function clearFiles() {
 	/>
 	{#if defaultFile && (!Array.isArray(defaultFile) || defaultFile.length > 0)}
 		<div class="w-full border-dashed border-t-2 text-2xs pt-1 text-tertiary mt-2">
-			Default file: <span class="text-blue-500">{defaultFile}</span>
+			Default file: <span class="text-nord-900">{defaultFile}</span>
 		</div>
 	{/if}
 </button>

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>;