windmill-components 1.558.4 → 1.596.0

package/package/components/common/confirmationModal/ConfirmationModal.svelte

@@ -39,7 +39,7 @@ const theme = {
         Icon: RefreshCcw,
         color: 'dark',
         classes: {
-            icon: 'text-blue-500 dark:text-blue-400',
+            icon: 'text-blue-700 dark:text-blue-300',
             iconWrapper: 'bg-blue-100 dark:bg-blue-800/50'
         }
     }
@@ -52,7 +52,7 @@ const Icon = $derived(theme[type].Icon ?? AlertTriangle);
 {#if open}
 	<div
 		transition:fadeFast|local
-		class={'absolute top-0 bottom-0 left-0 right-0 z-[5000]'}
+		class={'fixed top-0 bottom-0 left-0 right-0 z-[5000]'}
 		role="dialog"
 	>
 		<div
@@ -96,6 +96,8 @@ const Icon = $derived(theme[type].Icon ?? AlertTriangle);
 							color={theme[type].color}
 							size="sm"
 							shortCut={{ Icon: CornerDownLeft, hide: !keyListen, withoutModifier: true }}
+							variant="accent"
+							destructive={type === 'danger'}
 						>
 							{#if loading}
 								<Loader2 class="animate-spin" />
@@ -105,7 +107,7 @@ const Icon = $derived(theme[type].Icon ?? AlertTriangle);
 						<Button
 							disabled={loading}
 							on:click={() => (dispatch('canceled'), onCanceled?.())}
-							color="light"
+							variant="default"
 							size="sm"
 							shortCut={{ key: 'Esc', hide: !keyListen, withoutModifier: true }}
 						>

package/package/components/common/confirmationModal/DeployOverrideConfirmationModal.svelte

@@ -6,7 +6,7 @@ let { deployedValue = $bindable(), currentValue = undefined, diffDrawer = undefi
 
 <ConfirmationModal
 	{open}
-	title={"New version deployed by " + deployedBy}
+	title={'New version deployed by ' + deployedBy}
 	confirmationText="Override"
 	on:canceled={() => {
 		open = false
@@ -18,8 +18,7 @@ let { deployedValue = $bindable(), currentValue = undefined, diffDrawer = undefi
 		{#if diffDrawer}
 			<Button
 				wrapperClasses="self-start"
-				color="light"
-				variant="border"
+				variant="default"
 				size="xs"
 				on:click={() => {
 					if (!deployedValue || !currentValue) {

package/package/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte

@@ -8,6 +8,7 @@ import { Star } from 'lucide-svelte';
 import ToggleButtonGroup from '../toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../toggleButton-v2/ToggleButton.svelte';
 import { userStore } from '../../../stores';
+import Badge from '../badge/Badge.svelte';
 let { open = $bindable(false), draftTriggers = [], isFlow = false } = $props();
 let selectedTriggers = $state(draftTriggers);
 const dispatch = createEventDispatcher();
@@ -86,12 +87,10 @@ $effect(() => {
 									<div class="relative flex justify-center items-center">
 										<SvelteComponent
 											size={14}
-											class={isSelectedTrigger
-												? 'text-blue-500'
-												: 'text-gray-500 dark:text-gray-400'}
+											class={isSelectedTrigger ? 'text-accent' : 'text-hint'}
 										/>
 										{#if trigger.isPrimary}
-											<Star size={8} class="absolute -mt-3 ml-3 text-blue-400" />
+											<Star size={8} class="absolute -mt-3 ml-3 text-accent" />
 										{/if}
 									</div>
 									<div class="flex grow min-w-0 items-center text-left">
@@ -114,32 +113,22 @@ $effect(() => {
 													value={'discard'}
 													{item}
 													small
-													class="data-[state=on]:text-white data-[state=on]:bg-red-400 w-[54px] justify-center"
+													class="data-[state=on]:text-white data-[state=on]:bg-red-400 justify-center"
 												/>
 												<ToggleButton
 													label={!trigger.isDraft && trigger.draftConfig ? 'Update' : 'Deploy'}
 													value={'deploy'}
 													{item}
 													small
-													class="data-[state=on]:bg-marine-400 data-[state=on]:text-white data-[state=on]:dark:bg-marine-50 data-[state=on]:dark:text-primary-inverse w-[54px] justify-center"
+													class="data-[state=on]:bg-surface-accent-primary data-[state=on]:text-white justify-center"
 												/>
 											{/snippet}
 										</ToggleButtonGroup>
 									</div>
 								{:else if permission === 'admin-only'}
-									<div
-										class="text-xs font-semibold px-1.5 py-1.5 bg-red-400 text-white rounded whitespace-nowrap w-[114px] text-center"
-										title="Only admins can deploy http triggers"
-									>
-										Admin only
-									</div>
+									<Badge color="red">Admin only</Badge>
 								{:else if permission === 'invalid-config'}
-									<div
-										class="text-xs font-semibold px-1.5 py-1.5 bg-red-400 text-white rounded whitespace-nowrap w-[114px] text-center"
-										title="Invalid config"
-									>
-										Invalid config
-									</div>
+									<Badge color="red">Invalid config</Badge>
 								{/if}
 							</td>
 						</tr>

package/package/components/common/confirmationModal/UnsavedConfirmationModal.svelte

@@ -5,21 +5,19 @@ import Button from '../button/Button.svelte';
 import { cleanValueProperties, orderedJsonStringify, replaceFalseWithUndefined } from '../../../utils';
 import { page } from '$app/stores';
 import { triggerableByAI } from '../../../actions/triggerableByAI.svelte';
-export let getInitialAndModifiedValues = undefined;
-export let diffDrawer = undefined;
-export let additionalExitAction = () => { };
-let savedValue = undefined;
-let modifiedValue = undefined;
-let bypassBeforeNavigate = false;
-let open = false;
-let goingTo = undefined;
+let { getInitialAndModifiedValues = undefined, diffDrawer = undefined, additionalExitAction = () => { }, triggerOnSearchParamsChange = false, onDiscardChanges = undefined, tabMode = false } = $props();
+let savedValue = $state(undefined);
+let modifiedValue = $state(undefined);
+let bypassBeforeNavigate = $state(false);
+let open = $state(false);
+let goingTo = $state(undefined);
 beforeNavigate(async (newNavigationState) => {
     if (!bypassBeforeNavigate &&
         getInitialAndModifiedValues &&
         newNavigationState.to &&
-        newNavigationState.to.url != $page.url &&
-        newNavigationState.to.url.pathname !== newNavigationState.from?.url.pathname) {
-        // console.log('going to', newNavigationState.to.url)
+        ((newNavigationState.to.url != $page.url &&
+            newNavigationState.to.url.pathname !== newNavigationState.from?.url.pathname) ||
+            (triggerOnSearchParamsChange && newNavigationState.to.url.search != $page.url.search))) {
         goingTo = newNavigationState.to.url;
         const state = getInitialAndModifiedValues?.();
         savedValue = state?.savedValue;
@@ -36,7 +34,9 @@ beforeNavigate(async (newNavigationState) => {
             const current = cleanValueProperties({ ...(modifiedValue ?? {}), path: undefined });
             if (orderedJsonStringify(replaceFalseWithUndefined(draftOrDeployed)) ===
                 orderedJsonStringify(replaceFalseWithUndefined(current))) {
-                bypassBeforeNavigate = true;
+                if (!tabMode) {
+                    bypassBeforeNavigate = true;
+                }
                 additionalExitAction?.();
             }
             else {
@@ -71,6 +71,9 @@ beforeNavigate(async (newNavigationState) => {
 		open = false
 	}}
 	on:confirmed={() => {
+		open = false
+		// Discard changes before navigating
+		onDiscardChanges?.()
 		if (goingTo) {
 			bypassBeforeNavigate = true
 			additionalExitAction?.()
@@ -83,8 +86,7 @@ beforeNavigate(async (newNavigationState) => {
 		{#if savedValue && modifiedValue && diffDrawer}
 			<Button
 				wrapperClasses="self-start"
-				color="light"
-				variant="border"
+				variant="default"
 				size="xs"
 				on:click={() => {
 					if (!savedValue || !modifiedValue) {

package/package/components/common/confirmationModal/UnsavedConfirmationModal.svelte.d.ts

@@ -1,24 +1,13 @@
 import type DiffDrawer from '../../DiffDrawer.svelte';
 import type { GetInitialAndModifiedValues } from './unsavedTypes';
-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 UnsavedConfirmationModal: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     getInitialAndModifiedValues?: GetInitialAndModifiedValues;
     diffDrawer?: DiffDrawer | undefined;
     additionalExitAction?: () => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type UnsavedConfirmationModal = InstanceType<typeof UnsavedConfirmationModal>;
+    triggerOnSearchParamsChange?: boolean;
+    onDiscardChanges?: () => void;
+    tabMode?: boolean;
+}
+declare const UnsavedConfirmationModal: import("svelte").Component<Props, {}, "">;
+type UnsavedConfirmationModal = ReturnType<typeof UnsavedConfirmationModal>;
 export default UnsavedConfirmationModal;

package/package/components/common/confirmationModal/asyncConfirmationModal.svelte.d.ts

@@ -1,5 +1,9 @@
 import { type ComponentProps } from 'svelte';
 import type ConfirmationModal from './ConfirmationModal.svelte';
+export type ConfirmationModalHandle = {
+    props: ComponentProps<ConfirmationModal>;
+    ask: (props: Params) => Promise<boolean>;
+};
 /**
  * This allows asking for confirmation while maintaining a linear imperative flow,
  * and avoiding unnecessary states and callback hopping
@@ -16,10 +20,7 @@ import type ConfirmationModal from './ConfirmationModal.svelte';
  *  // ...
  *  <ConfirmationModal {...confirmationModal.props} />
  */
-export declare function createAsyncConfirmationModal(): {
-    props: ComponentProps<ConfirmationModal>;
-    ask: (props: Params) => Promise<boolean>;
-};
+export declare function createAsyncConfirmationModal(): ConfirmationModalHandle;
 type Params = Omit<ComponentProps<ConfirmationModal>, 'children'> & {
     children: string;
 };

package/package/components/common/contextmenu/ContextMenu.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">import { createContextMenu, melt } from '@melt-ui/svelte';
+import { fly } from 'svelte/transition';
+import { twMerge } from 'tailwind-merge';
+import { pointerDownOutside } from '../../../utils';
+import { getContextMenuContainerClass, CONTEXT_MENU_ITEM_BASE_CLASS, CONTEXT_MENU_ITEM_HOVER_MELT_CLASS, CONTEXT_MENU_ITEM_DISABLED_CLASS, CONTEXT_MENU_DIVIDER_CLASS, CONTEXT_MENU_ANIMATION_CLASSES } from './contextMenuStyles';
+let { items = [], children, menu, class: className = '', onItemClick, closeOnOutsideClick = true } = $props();
+const { elements: { menu: menuElement, item, trigger }, states: { open } } = createContextMenu({
+    positioning: {
+        placement: 'right-start'
+    },
+    preventScroll: true,
+    closeOnOutsideClick: false
+});
+function handleItemClick(menuItem) {
+    if (!menuItem.disabled) {
+        menuItem.onClick?.();
+        onItemClick?.(menuItem);
+    }
+}
+function close() {
+    open.set(false);
+}
+async function getMenuElements() {
+    return Array.from(document.querySelectorAll('[data-context-menu]'));
+}
+function handlePointerDownOutside() {
+    if (closeOnOutsideClick && open.get()) {
+        close();
+    }
+}
+</script>
+
+<div
+	{...$trigger} use:$trigger.action
+	class={twMerge('block w-full h-full', className)}
+	role="button"
+	tabindex="0"
+	aria-label="Right click for context menu"
+	use:pointerDownOutside={{
+		capture: true,
+		stopPropagation: false,
+		exclude: getMenuElements,
+		onClickOutside: handlePointerDownOutside
+	}}
+	data-context-menu-trigger
+>
+	{@render children?.()}
+</div>
+
+{#if $open}
+	<div
+		class="{getContextMenuContainerClass()} {CONTEXT_MENU_ANIMATION_CLASSES}"
+		{...$menuElement} use:$menuElement.action
+		transition:fly={{ duration: 150, y: -10 }}
+		data-context-menu
+	>
+		{#each items as menuItem (menuItem.id)}
+			{#if menuItem.divider}
+				<div class={CONTEXT_MENU_DIVIDER_CLASS}></div>
+			{:else}
+				<div
+					class={twMerge(
+						CONTEXT_MENU_ITEM_BASE_CLASS,
+						menuItem.disabled
+							? CONTEXT_MENU_ITEM_DISABLED_CLASS
+							: CONTEXT_MENU_ITEM_HOVER_MELT_CLASS
+					)}
+					{...$item} use:$item.action
+					onclick={() => handleItemClick(menuItem)}
+				>
+					{#if menuItem.icon}
+						<menuItem.icon size={14} class="mr-2" />
+					{/if}
+					{#if menu}
+						{@render menu({ item: menuItem })}
+					{:else}
+						<span>{menuItem.label}</span>
+					{/if}
+				</div>
+			{/if}
+		{/each}
+	</div>
+{/if}

package/package/components/common/contextmenu/ContextMenu.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+export interface ContextMenuItem {
+    id: string;
+    label: string;
+    icon?: any;
+    disabled?: boolean;
+    onClick?: () => void;
+    divider?: boolean;
+}
+interface Props {
+    items?: ContextMenuItem[];
+    children?: Snippet;
+    menu?: Snippet<[{
+        item: ContextMenuItem;
+    }]>;
+    class?: string;
+    onItemClick?: (item: ContextMenuItem) => void;
+    closeOnOutsideClick?: boolean;
+}
+declare const ContextMenu: import("svelte").Component<Props, {}, "">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

package/package/components/common/contextmenu/contextMenuStyles.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Shared styles for context menu components
+ * Ensures visual consistency across all context menu implementations
+ */
+/**
+ * Base container styles for context menu
+ * @param zIndex - Optional z-index override (default: 'z-50')
+ */
+export declare function getContextMenuContainerClass(zIndex?: string): string;
+/**
+ * Base styles for context menu items
+ */
+export declare const CONTEXT_MENU_ITEM_BASE_CLASS = "relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-xs outline-none transition-colors";
+/**
+ * Hover state styles for context menu items (standard CSS hover)
+ */
+export declare const CONTEXT_MENU_ITEM_HOVER_CLASS = "hover:bg-surface-hover";
+/**
+ * Hover state styles for context menu items (Melt UI data attribute)
+ */
+export declare const CONTEXT_MENU_ITEM_HOVER_MELT_CLASS = "data-[highlighted]:bg-surface-hover";
+/**
+ * Disabled state styles for context menu items
+ */
+export declare const CONTEXT_MENU_ITEM_DISABLED_CLASS = "pointer-events-none opacity-50";
+/**
+ * Divider styles for context menu
+ */
+export declare const CONTEXT_MENU_DIVIDER_CLASS = "my-1 h-px bg-border-light";
+/**
+ * Melt UI animation classes for context menu
+ */
+export declare const CONTEXT_MENU_ANIMATION_CLASSES = "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";

package/package/components/common/contextmenu/contextMenuStyles.js

@@ -0,0 +1,35 @@
+/**
+ * Shared styles for context menu components
+ * Ensures visual consistency across all context menu implementations
+ */
+/**
+ * Base container styles for context menu
+ * @param zIndex - Optional z-index override (default: 'z-50')
+ */
+export function getContextMenuContainerClass(zIndex = 'z-50') {
+    return `${zIndex} flex flex-col gap-1 min-w-[12rem] overflow-hidden rounded-md border bg-surface p-1 shadow-md`;
+}
+/**
+ * Base styles for context menu items
+ */
+export const CONTEXT_MENU_ITEM_BASE_CLASS = 'relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-xs outline-none transition-colors';
+/**
+ * Hover state styles for context menu items (standard CSS hover)
+ */
+export const CONTEXT_MENU_ITEM_HOVER_CLASS = 'hover:bg-surface-hover';
+/**
+ * Hover state styles for context menu items (Melt UI data attribute)
+ */
+export const CONTEXT_MENU_ITEM_HOVER_MELT_CLASS = 'data-[highlighted]:bg-surface-hover';
+/**
+ * Disabled state styles for context menu items
+ */
+export const CONTEXT_MENU_ITEM_DISABLED_CLASS = 'pointer-events-none opacity-50';
+/**
+ * Divider styles for context menu
+ */
+export const CONTEXT_MENU_DIVIDER_CLASS = 'my-1 h-px bg-border-light';
+/**
+ * Melt UI animation classes for context menu
+ */
+export const CONTEXT_MENU_ANIMATION_CLASSES = 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2';

package/package/components/common/drawer/Drawer.svelte

@@ -140,7 +140,7 @@ const aiChatOpen = $derived(chatState.size > 0);
 		position: fixed;
 		width: 100%;
 		--tw-bg-opacity: 1;
-		background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
+		background-color: rgb(var(--color-surface-primary) / var(--tw-bg-opacity, 1));
 		z-index: 3;
 		transition:
 			transform var(--duration) ease,

package/package/components/common/drawer/DrawerContent.svelte

@@ -3,12 +3,14 @@ import { classNames } from '../../../utils';
 import CloseButton from '../CloseButton.svelte';
 import { triggerableByAI } from '../../../actions/triggerableByAI.svelte';
 import { createEventDispatcher } from 'svelte';
-let { aiId, aiDescription, title = undefined, overflow_y = true, noPadding = false, forceOverflowVisible = false, tooltip = '', documentationLink = undefined, CloseIcon = undefined, fullScreen = true, actions, children } = $props();
+import EEOnly from '../../EEOnly.svelte';
+import { enterpriseLicense } from '../../../stores';
+let { aiId, aiDescription, title = undefined, overflow_y = true, noPadding = false, forceOverflowVisible = false, tooltip = '', documentationLink = undefined, CloseIcon = undefined, fullScreen = true, eeOnly = false, actions, children } = $props();
 const dispatch = createEventDispatcher();
 </script>
 
 <div class={classNames('flex flex-col divide-y', fullScreen ? 'h-screen max-h-screen' : 'h-full')}>
-	<div class="flex justify-between w-full items-center px-4 py-2 gap-2">
+	<div class="flex justify-between w-full items-center pl-2 pr-4 py-2 gap-2">
 		<div class="flex items-center gap-2 w-full truncate">
 			<div
 				use:triggerableByAI={{
@@ -21,15 +23,18 @@ const dispatch = createEventDispatcher();
 			>
 				<CloseButton on:close Icon={CloseIcon} />
 			</div>
-			<span class="font-semibold truncate text-primary !text-lg max-w-sm"
+			<span class="font-semibold text-emphasis truncate text-lg max-w-sm"
 				>{title ?? ''}
 				{#if tooltip != '' || documentationLink}
 					<Tooltip {documentationLink}>{tooltip}</Tooltip>
 				{/if}</span
 			>
+			{#if eeOnly && !$enterpriseLicense}
+				<EEOnly />
+			{/if}
 		</div>
 		{#if actions}
-			<div class="flex gap-2 items-center justify-end">
+			<div class="flex gap-2 items-center justify-end shrink-0">
 				{@render actions?.()}
 			</div>
 		{/if}
@@ -42,6 +47,7 @@ const dispatch = createEventDispatcher();
 			forceOverflowVisible ? '!overflow-visible' : ''
 		)}
 		class:overflow-y-auto={overflow_y}
+		style={overflow_y ? 'scrollbar-gutter: stable;' : ''}
 	>
 		{@render children?.()}
 	</div>

package/package/components/common/drawer/DrawerContent.svelte.d.ts

@@ -9,6 +9,7 @@ interface Props {
     documentationLink?: string | undefined;
     CloseIcon?: any | undefined;
     fullScreen?: boolean;
+    eeOnly?: boolean;
     actions?: import('svelte').Snippet;
     children?: import('svelte').Snippet;
 }

package/package/components/common/fileDownload/FileDownload.svelte

@@ -4,20 +4,22 @@ import { base } from '../../../base';
 let { s3object, workspaceId = undefined, appPath = undefined } = $props();
 </script>
 
-<a
-	class="relative center-center flex w-full text-center font-normal text-tertiary text-sm
+{#if s3object && s3object?.s3}
+	<a
+		class="relative center-center flex w-full text-center font-normal text-primary text-sm
 border border-dashed border-gray-400 hover:border-blue-500
 focus-within:border-blue-500 hover:bg-blue-50 dark:hover:bg-frost-900 focus-within:bg-blue-50
 duration-200 rounded-lg p-1 gap-2"
-	href={`${base}/api/w/${workspaceId ?? $workspaceStore}${
-		appPath ? `/apps_u/download_s3_file/${appPath}` : '/job_helpers/download_s3_file'
-	}?${appPath ? 's3' : 'file_key'}=${encodeURIComponent(s3object?.s3 ?? '')}${
-		s3object?.storage ? `&storage=${s3object.storage}` : ''
-	}${appPath && s3object?.presigned ? `&${s3object.presigned}` : ''}`}
-	download={s3object?.s3.split('/').pop() ?? 'unnamed_download.file'}
->
-	<Download />
-	<span>
-		{s3object.storage ? `s3://${s3object.storage}/${s3object.s3}` : `s3:///${s3object.s3}`}
-	</span>
-</a>
+		href={`${base}/api/w/${workspaceId ?? $workspaceStore}${
+			appPath ? `/apps_u/download_s3_file/${appPath}` : '/job_helpers/download_s3_file'
+		}?${appPath ? 's3' : 'file_key'}=${encodeURIComponent(s3object?.s3 ?? '')}${
+			s3object?.storage ? `&storage=${s3object.storage}` : ''
+		}${appPath && s3object?.presigned ? `&${s3object?.presigned}` : ''}`}
+		download={s3object?.s3?.split?.('/')?.pop() ?? 'unnamed_download.file'}
+	>
+		<Download />
+		<span>
+			{s3object?.storage ? `s3://${s3object.storage}/${s3object.s3}` : `s3:///${s3object.s3}`}
+		</span>
+	</a>
+{/if}

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

@@ -205,12 +205,12 @@ export function clearFiles() {
 						<span class="pr-2 ellipsize">{name}</span>
 						<Button
 							size="xs"
-							color="red"
-							variant="border"
+							variant="default"
 							iconOnly
 							btnClasses="bg-transparent"
 							startIcon={{ icon: Trash }}
 							on:click={() => removeFile(i)}
+							destructive
 						/>
 					</li>
 				{/each}
@@ -235,7 +235,7 @@ export function clearFiles() {
 		{...$$restProps}
 	/>
 	{#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">
+		<div class="w-full border-dashed border-t-2 text-2xs pt-1 text-primary mt-2">
 			Default file: <span class="text-nord-900">{defaultFile}</span>
 		</div>
 	{/if}

package/package/components/common/fileUpload/FileUpload.svelte

@@ -332,8 +332,7 @@ onDestroy(() => {
 								{#if fileUpload.cancelled || fileUpload.errorMessage !== undefined}
 									<Button
 										size="xs2"
-										color="light"
-										variant="border"
+										variant="default"
 										on:click={() => {
 											const file = fileUpload.file
 
@@ -357,8 +356,7 @@ onDestroy(() => {
 									</Button>
 									<Button
 										size="xs2"
-										color="light"
-										variant="border"
+										variant="default"
 										on:click={() => {
 											const file = fileUpload.file
 
@@ -382,8 +380,7 @@ onDestroy(() => {
 								{#if fileUpload.progress !== undefined && fileUpload.progress < 100 && !fileUpload.cancelled && !fileUpload.errorMessage}
 									<Button
 										size="xs2"
-										color="light"
-										variant="border"
+										variant="default"
 										on:click={() => {
 											fileUpload.cancelled = true
 											fileUpload.progress = 0
@@ -399,8 +396,7 @@ onDestroy(() => {
 								{#if fileUpload.progress === 100 && !fileUpload.cancelled && allowDelete && (!appPath || fileUpload.deleteToken != undefined)}
 									<Button
 										size="xs2"
-										color="red"
-										variant="border"
+										variant="default"
 										on:click={() => {
 											$fileUploads = $fileUploads.filter(
 												(_fileUpload) => _fileUpload.name !== fileUpload.name
@@ -414,14 +410,14 @@ onDestroy(() => {
 										startIcon={{
 											icon: Trash
 										}}
+										destructive
 									>
 										Delete
 									</Button>
 								{:else if fileUpload.fromBucket}
 									<Button
 										size="xs2"
-										color="red"
-										variant="border"
+										variant="default"
 										on:click={() => {
 											$fileUploads = $fileUploads.filter(
 												(_fileUpload) => _fileUpload.name !== fileUpload.name
@@ -434,6 +430,7 @@ onDestroy(() => {
 										startIcon={{
 											icon: XIcon
 										}}
+										destructive
 									>
 										Remove
 									</Button>

package/package/components/common/fileUpload/FileUploadModal.svelte

@@ -26,7 +26,7 @@ function cleanFilePath(rawFolder, fileName) {
 {#if open}
 	<div
 		transition:fadeFast|local
-		class={'absolute top-0 bottom-0 left-0 right-0 z-[5000]'}
+		class={'fixed top-0 bottom-0 left-0 right-0 z-[5000]'}
 		role="dialog"
 	>
 		<div
@@ -48,7 +48,7 @@ function cleanFilePath(rawFolder, fileName) {
 				>
 					<div class="flex flex-col gap-2">
 						<div class="flex justify-between">
-							<h3 class="text-lg font-medium text-primary">
+							<h3 class="text-lg font-semibold text-primary">
 								{title}
 							</h3>
 							<Button

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

@@ -13,16 +13,16 @@ let fileUpload = $state(undefined);
 {#if $userStore}
 	<S3FilePicker
 		bind:this={s3FilePicker}
-		on:selectAndClose={(ev) => {
+		onSelectAndClose={(selected) => {
 			if (multiple) {
 				if (Array.isArray(value)) {
-					value.push(ev.detail)
+					value.push(selected)
 				} else {
-					value = [ev.detail]
+					value = [selected]
 				}
-				fileUpload?.addUpload(ev.detail)
+				fileUpload?.addUpload(selected)
 			} else {
-				value = ev.detail
+				value = selected
 				fileUpload?.setUpload(value)
 			}
 			editor?.setCode(JSON.stringify(value))
@@ -90,10 +90,9 @@ let fileUpload = $state(undefined);
 	{/if}
 	{#if $userStore}
 		<Button
-			variant="border"
-			color="light"
+			variant="default"
 			size="xs"
-			btnClasses="mt-1 font-normal text-tertiary"
+			btnClasses="mt-1 font-normal text-primary"
 			on:click={() => {
 				s3FilePicker?.open?.(value)
 			}}