windmill-components 1.558.4 → 1.596.0

package/package/components/DisplayResult.svelte

@@ -27,9 +27,10 @@ import { toJsonStr } from '../utils';
 import { userStore } from '../stores';
 import ResultStreamDisplay from './ResultStreamDisplay.svelte';
 import { twMerge } from 'tailwind-merge';
-const IMG_MAX_SIZE = 10000000;
 const TABLE_MAX_SIZE = 5000000;
 const DISPLAY_MAX_SIZE = 100000;
+const IMG_KINDS = ['png', 'svg', 'jpeg', 'gif'];
+const NO_SIZE_LIMIT_KINDS = [...IMG_KINDS, 'pdf', 'file', 'filename', 'html'];
 const dispatch = createEventDispatcher();
 let resultKind = $state();
 let hasBigInt = $state(false);
@@ -97,12 +98,6 @@ function inferResultKind(result) {
             let keys = result && typeof result === 'object' ? Object.keys(result) : [];
             is_render_all =
                 keys.length == 1 && keys.includes('render_all') && Array.isArray(result['render_all']);
-            // Check if the result is an image
-            if (['png', 'svg', 'jpeg', 'html', 'gif'].includes(keys[0]) && keys.length == 1) {
-                // Check if the image is too large (10mb)
-                largeObject = roughSizeOfObject(result) > IMG_MAX_SIZE;
-                return keys[0];
-            }
             let size = roughSizeOfObject(result);
             console.debug('size of object', size);
             // Otherwise, check if the result is too large (10kb) for json
@@ -147,29 +142,18 @@ function inferResultKind(result) {
                 ['table-row', 'table-row-object', 'table-col'].includes(keys[0])) {
                 return keys[0];
             }
-            if (largeObject) {
-                return 'json';
-            }
             if (keys.length != 0) {
-                if (keys.length == 1 && keys[0] === 'html') {
-                    return 'html';
-                }
-                else if (keys.length == 1 && keys[0] === 'map') {
-                    return 'map';
-                }
-                else if (keys.length == 1 && keys[0] === 'pdf') {
-                    return 'pdf';
-                }
-                else if (keys.length == 1 && keys[0] === 'file') {
-                    return 'file';
+                if (keys.length == 1 &&
+                    [...IMG_KINDS, 'html', 'map', 'pdf', 'file', 'error'].includes(keys[0])) {
+                    return !largeObject || NO_SIZE_LIMIT_KINDS.includes(keys[0])
+                        ? keys[0]
+                        : 'json';
                 }
-                else if (keys.includes('windmill_content_type') &&
+                else if (!largeObject &&
+                    keys.includes('windmill_content_type') &&
                     result['windmill_content_type'].startsWith('text/')) {
                     return 'plain';
                 }
-                else if (keys.length == 1 && keys[0] === 'error') {
-                    return 'error';
-                }
                 else if (keys.length === 2 && keys.includes('file') && keys.includes('filename')) {
                     return 'file';
                 }
@@ -185,24 +169,28 @@ function inferResultKind(result) {
                     }
                     return 'file';
                 }
-                else if (keys.includes('resume') &&
+                else if (!largeObject &&
+                    keys.includes('resume') &&
                     keys.includes('cancel') &&
                     keys.includes('approvalPage')) {
                     return 'approval';
                 }
-                else if (checkIfS3(result, keys)) {
+                else if (!largeObject && checkIfS3(result, keys)) {
                     return 's3object';
                 }
-                else if (keys.length === 1 && (keys.includes('md') || keys.includes('markdown'))) {
+                else if (!largeObject &&
+                    keys.length === 1 &&
+                    (keys[0] === 'md' || keys[0] === 'markdown')) {
                     return 'markdown';
                 }
-                else if (isTableCol(result, keys)) {
+                else if (!largeObject && isTableCol(result, keys)) {
                     return 'table-col';
                 }
                 else if (keys.length < 1000 && keys.includes('wm_renderer')) {
                     const renderer = result['wm_renderer'];
-                    if (typeof renderer === 'string') {
-                        if ([
+                    if (typeof renderer === 'string' &&
+                        (!largeObject || NO_SIZE_LIMIT_KINDS.includes(renderer)) &&
+                        [
                             'json',
                             'html',
                             'png',
@@ -217,8 +205,7 @@ function inferResultKind(result) {
                             'map',
                             'pdf'
                         ].includes(renderer)) {
-                            return renderer;
-                        }
+                        return renderer;
                     }
                 }
             }
@@ -370,7 +357,7 @@ $effect(() => {
 
 {#if result_stream && result == undefined}
 	<div class="flex flex-col w-full gap-2">
-		<div class="flex items-center gap-2 text-tertiary">
+		<div class="flex items-center gap-2 text-primary">
 			<Loader2 class="animate-spin" size={16} /> Streaming result
 		</div>
 		<ResultStreamDisplay {result_stream} />
@@ -378,18 +365,16 @@ $effect(() => {
 {:else if is_render_all}
 	<div class="flex flex-col w-full gap-2">
 		{#if !noControls}
-			<div class="text-tertiary text-sm">
+			<div class="text-primary text-sm">
 				<ToggleButtonGroup
-					class="h-6"
 					selected={globalForceJson ? 'json' : 'pretty'}
 					on:selected={(ev) => {
 						globalForceJson = ev.detail === 'json'
 					}}
 				>
 					{#snippet children({ item })}
-						<ToggleButton class="px-1.5" value="pretty" label="Pretty" icon={Highlighter} {item} />
-
-						<ToggleButton class="px-1.5" value="json" label="JSON" icon={Braces} {item} />
+						<ToggleButton value="pretty" label="Pretty" icon={Highlighter} {item} />
+						<ToggleButton value="json" label="JSON" icon={Braces} {item} />
 					{/snippet}
 				</ToggleButtonGroup>
 			</div>
@@ -424,11 +409,10 @@ $effect(() => {
 		{#if result != undefined && length != undefined && largeObject != undefined}
 			<div class="flex justify-between items-center w-full">
 				<div
-					class="text-tertiary text-sm flex flex-row gap-2 items-center"
+					class="text-primary text-sm flex flex-row gap-2 items-center"
 					bind:clientHeight={resultHeaderHeight}
 				>
 					{#if !hideAsJson && !['json', 's3object'].includes(resultKind ?? '') && typeof result === 'object'}<ToggleButtonGroup
-							class="h-6"
 							selected={forceJson ? 'json' : resultKind?.startsWith('table-') ? 'table' : 'pretty'}
 							on:selected={(ev) => {
 								forceJson = ev.detail === 'json'
@@ -436,17 +420,11 @@ $effect(() => {
 						>
 							{#snippet children({ item })}
 								{#if ['table-col', 'table-row', 'table-row-object'].includes(resultKind ?? '')}
-									<ToggleButton class="px-1.5" value="table" label="Table" icon={Table2} {item} />
+									<ToggleButton size="sm" value="table" label="Table" icon={Table2} {item} />
 								{:else}
-									<ToggleButton
-										class="px-1.5"
-										value="pretty"
-										label="Pretty"
-										icon={Highlighter}
-										{item}
-									/>
+									<ToggleButton size="sm" value="pretty" label="Pretty" icon={Highlighter} {item} />
 								{/if}
-								<ToggleButton class="px-1.5" value="json" label="JSON" icon={Braces} {item} />
+								<ToggleButton size="sm" value="json" label="JSON" icon={Braces} {item} />
 							{/snippet}
 						</ToggleButtonGroup>
 					{/if}
@@ -513,7 +491,7 @@ $effect(() => {
 										Warning
 									</div>
 									<p
-										class="text-tertiary mb-2 text-left border-2 !border-t-0 rounded-b border-red-400 overflow-auto p-1"
+										class="text-primary mb-2 text-left border-2 !border-t-0 rounded-b border-red-400 overflow-auto p-1"
 										>Rendering HTML can expose you to <a
 											href="https://owasp.org/www-community/attacks/xss/"
 											target="_blank"
@@ -523,7 +501,7 @@ $effect(() => {
 									</p>
 								</div>
 								<div class="center-center">
-									<Button size="sm" color="dark" on:click={() => (enableHtml = true)}>
+									<Button unifiedSize="md" variant="default" on:click={() => (enableHtml = true)}>
 										Enable HTML rendering
 									</Button>
 								</div>
@@ -588,10 +566,11 @@ $effect(() => {
 								<Button
 									on:click={() =>
 										copyToClipboard(typeof result === 'string' ? result : result?.['result'])}
-									color="light"
-									size="xs"
+									variant="subtle"
+									unifiedSize="sm"
+									endIcon={{ icon: ClipboardCopy }}
 								>
-									<div class="flex gap-2 items-center">Copy <ClipboardCopy size={12} /> </div>
+									Copy
 								</Button>
 							</div>
 						{/if}
@@ -653,8 +632,7 @@ $effect(() => {
 						class="flex flex-col gap-3 mt-2 mx-4"
 					>
 						<Button
-							color="green"
-							variant="border"
+							variant="accent"
 							on:click={() =>
 								fetch(result['resume'], {
 									method: 'POST',
@@ -664,7 +642,7 @@ $effect(() => {
 						>
 							Resume</Button
 						>
-						<Button color="red" variant="border" on:click={() => fetch(result['cancel'])}
+						<Button variant="default" destructive on:click={() => fetch(result['cancel'])}
 							>Cancel</Button
 						>
 						<div class="center-center"
@@ -791,7 +769,7 @@ $effect(() => {
 										code={toJsonStr(s3object).replace(/\\n/g, '\n')}
 									/>
 									<button
-										class="text-secondary text-2xs whitespace-nowrap"
+										class="text-primary text-2xs whitespace-nowrap"
 										onclick={() => {
 											s3FileViewer?.open?.(s3object)
 										}}
@@ -802,7 +780,7 @@ $effect(() => {
 								{:else if !s3object?.disable_download}
 									<FileDownload {workspaceId} {s3object} {appPath} />
 								{:else}
-									<div class="flex text-secondary pt-2">{s3object?.s3} (download disabled)</div>
+									<div class="flex text-primary pt-2">{s3object?.s3} (download disabled)</div>
 								{/if}
 								{#if s3object?.s3?.endsWith('.parquet') || s3object?.s3?.endsWith('.csv')}
 									{#if seeS3PreviewFileFromList == s3object?.s3}
@@ -813,7 +791,7 @@ $effect(() => {
 											storage={s3object?.storage}
 										/>{:else}
 										<button
-											class="text-secondary whitespace-nowrap flex gap-2 items-center"
+											class="text-primary whitespace-nowrap flex gap-2 items-center"
 											onclick={() => {
 												seeS3PreviewFileFromList = s3object?.s3
 											}}
@@ -833,7 +811,7 @@ $effect(() => {
 										</div>
 									{:else}
 										<button
-											class="text-secondary whitespace-nowrap flex gap-2 items-center"
+											class="text-primary whitespace-nowrap flex gap-2 items-center"
 											onclick={() => {
 												seeS3PreviewFileFromList = s3object?.s3
 											}}
@@ -872,7 +850,7 @@ $effect(() => {
 						</div>
 					{:else}
 						{#if largeObject}
-							<div class="text-sm text-tertiary"
+							<div class="text-xs text-emphasis"
 								><a
 									download="{filename ?? 'result'}.json"
 									href={workspaceId && jobId
@@ -907,14 +885,17 @@ $effect(() => {
 					{/if}
 				{:else if typeof result === 'string' && result.length > 0}
 					<pre class="text-sm">{result}</pre>{#if !noControls}<div class="flex">
-							<Button on:click={() => copyToClipboard(result)} color="light" size="xs">
-								<div class="flex gap-2 items-center">Copy <ClipboardCopy size={12} /> </div>
-							</Button>
+							<Button
+								on:click={() => copyToClipboard(result)}
+								variant="subtle"
+								unifiedSize="sm"
+								endIcon={{ icon: ClipboardCopy }}
+							></Button>
 						</div>
 					{/if}
 				{:else}
 					<Highlight
-						class={forceJson ? 'pt-1' : 'h-full w-full'}
+						class={twMerge(forceJson ? 'pt-1' : 'h-full w-full', '!bg-surface-primary')}
 						language={json}
 						code={toJsonStr(result).replace(/\\n/g, '\n')}
 					/>
@@ -925,14 +906,17 @@ $effect(() => {
 				<pre>{result}</pre>
 				{#if !noControls}
 					<div class="flex">
-						<Button on:click={() => copyToClipboard(result)} color="light" size="xs">
-							<div class="flex gap-2 items-center">Copy <ClipboardCopy size={12} /> </div>
-						</Button>
+						<Button
+							on:click={() => copyToClipboard(result)}
+							variant="subtle"
+							unifiedSize="md"
+							endIcon={{ icon: ClipboardCopy }}
+						></Button>
 					</div>
 				{/if}
 			</div>
 		{:else}
-			<div class="text-tertiary text-sm">No result: {toJsonStr(result)}</div>
+			<div class="text-primary text-xs">No result: {toJsonStr(result)}</div>
 		{/if}
 	</div>
 
@@ -949,16 +933,16 @@ $effect(() => {
 									: `${base}/api/w/${workspaceId}/jobs_u/completed/get_result/${jobId}`
 								: `data:text/json;charset=utf-8,${encodeURIComponent(toJsonStr(result))}`}
 							startIcon={{ icon: Download }}
-							color="light"
-							size="xs"
+							variant="subtle"
+							unifiedSize="md"
 						>
 							Download
 						</Button>
 					{/if}
 					<Button
 						on:click={() => copyToClipboard(toJsonStr(result))}
-						color="light"
-						size="xs"
+						variant="subtle"
+						unifiedSize="md"
 						startIcon={{
 							icon: ClipboardCopy
 						}}

package/package/components/DisplayResultControlBar.svelte

@@ -15,7 +15,7 @@ function toJsonStr(result) {
 }
 </script>
 
-<div class={twMerge('flex flex-row gap-2.5 z-10 text-tertiary -mt-1 items-center')}>
+<div class={twMerge('flex flex-row gap-2.5 z-10 text-primary -mt-1 items-center')}>
 	{#if customUi?.disableDownload !== true}
 		<a
 			download="{filename ?? 'result'}.json"

package/package/components/DraftBadge.svelte

@@ -9,14 +9,14 @@ let { has_draft = false, draft_only = false } = $props();
 			{#snippet text()}
 				Never deployed and is only a draft
 			{/snippet}
-			<Badge small color="indigo" baseClass="border border-indigo-200">Draft only</Badge>
+			<Badge small color="indigo">Draft only</Badge>
 		</Popover>
 	{:else}
 		<Popover notClickable>
 			{#snippet text()}
 				Is deployed and has a draft
 			{/snippet}
-			<Badge small color="indigo" baseClass="border border-indigo-200">+Draft</Badge>
+			<Badge small color="indigo">+Draft</Badge>
 		</Popover>
 	{/if}
 {/if}

package/package/components/DropdownV2.svelte

@@ -5,7 +5,7 @@ const activeDropdown = writable({
 });
 </script>
 
-<script lang="ts">import { MoreVertical } from 'lucide-svelte';
+<script lang="ts">import { EllipsisVertical } from 'lucide-svelte';
 import DropdownV2Inner from './DropdownV2Inner.svelte';
 import { pointerDownOutside } from '../utils';
 import { createDropdownMenu, melt, createSync } from '@melt-ui/svelte';
@@ -15,7 +15,8 @@ import { twMerge } from 'tailwind-merge';
 import { triggerableByAI } from '../actions/triggerableByAI.svelte';
 import { untrack } from 'svelte';
 import { fly } from 'svelte/transition';
-let { aiId = undefined, aiDescription = undefined, items = [], disabled = false, placement = 'bottom-end', usePointerDownOutside = false, closeOnOtherDropdownOpen = true, fixedHeight = true, hidePopup = false, open = $bindable(false), customWidth = undefined, customMenu = false, class: classNames = undefined, enableFlyTransition = false, buttonReplacement, menu } = $props();
+import { ButtonType } from './common/button/model';
+let { aiId = undefined, aiDescription = undefined, items = [], disabled = false, placement = 'bottom-end', usePointerDownOutside = false, closeOnOtherDropdownOpen = true, fixedHeight = true, hidePopup = false, open = $bindable(false), customWidth = undefined, customMenu = false, class: classNames = undefined, enableFlyTransition = false, size = 'md', btnText = '', buttonReplacement, menu, maxHeight = undefined } = $props();
 let buttonEl = $state(undefined);
 const { elements: { menu: menuEl, item, trigger }, states, ids: { menu: dropdownId } } = createDropdownMenu({
     positioning: {
@@ -72,7 +73,7 @@ async function getMenuElements() {
 		description: aiDescription,
 		callback: () => buttonEl?.click()
 	}}
-	class={twMerge('w-full flex items-center justify-end', fixedHeight && 'h-8', classNames)}
+	class={twMerge('flex items-center justify-end', fixedHeight && 'h-8', classNames)}
 	{...$trigger} use:$trigger.action
 	{disabled}
 	onclick={(e) => e.stopPropagation()}
@@ -94,11 +95,14 @@ async function getMenuElements() {
 	{:else}
 		<Button
 			nonCaptureEvent
-			size="xs"
-			color="light"
-			startIcon={{ icon: MoreVertical }}
+			unifiedSize={size}
+			variant="subtle"
+			startIcon={{ icon: EllipsisVertical }}
 			btnClasses="bg-transparent"
-		/>
+			iconOnly
+		>
+			{btnText}
+		</Button>
 	{/if}
 </button>
 
@@ -113,8 +117,8 @@ async function getMenuElements() {
 			{@render menu?.()}
 		{:else}
 			<div
-				class="bg-surface border w-56 origin-top-right rounded-md shadow-md focus:outline-none overflow-y-auto py-1 max-h-[50vh]"
-				style={customWidth ? `width: ${customWidth}px` : ''}
+				class="bg-surface-tertiary dark:border w-56 origin-top-right rounded-lg shadow-lg focus:outline-none overflow-y-auto py-1"
+				style={`${customWidth ? `width: ${customWidth}px;` : ''} max-height: ${maxHeight || '50vh'};`}
 			>
 				<DropdownV2Inner {aiId} items={computeItems} meltItem={item} />
 			</div>

package/package/components/DropdownV2.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Placement } from '@floating-ui/core';
 import type { Item } from '../utils';
+import { ButtonType } from './common/button/model';
 interface Props {
     aiId?: string | undefined;
     aiDescription?: string | undefined;
@@ -15,8 +16,11 @@ interface Props {
     customMenu?: boolean;
     class?: string | undefined;
     enableFlyTransition?: boolean;
+    size?: ButtonType.UnifiedSize;
+    btnText?: string;
     buttonReplacement?: import('svelte').Snippet;
     menu?: import('svelte').Snippet;
+    maxHeight?: string | 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> & {

package/package/components/DropdownV2Inner.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import MenuItem from './meltComponents/MenuItem.svelte';
 import { Loader2 } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
+import { Tooltip } from './meltComponents';
 let { aiId, items = [], meltItem } = $props();
 let computedItems = $state(undefined);
 async function computeItems() {
@@ -23,13 +24,13 @@ computeItems();
 				target={item?.hrefTarget}
 				disabled={item?.disabled}
 				class={twMerge(
-					'px-4 py-2 text-primary font-semibold hover:bg-surface-hover cursor-pointer text-xs transition-all w-full',
+					'px-4 py-2 text-primary font-normal hover:bg-surface-hover cursor-pointer text-xs transition-colors w-full',
 					'data-[highlighted]:bg-surface-hover',
-					'flex flex-row gap-2 items-center',
-					item?.disabled && 'text-gray-400 cursor-not-allowed',
+					'flex flex-row gap-2 items-center rounded-sm',
+					item?.disabled && 'text-disabled cursor-not-allowed',
 					item?.type === 'delete' &&
 						!item?.disabled &&
-						'text-red-500 hover:bg-red-100 hover:text-red-500 data-[highlighted]:text-red-500 data-[highlighted]:bg-red-100'
+						'text-red-600 dark:text-red-400 data-[highlighted]:bg-red-500/10 dark:data-[highlighted]:bg-red-900/80 dark:data-[highlighted]:text-red-300 '
 				)}
 				item={meltItem}
 				aiId={`${aiId ? `${aiId}-${item.displayName}` : undefined}`}
@@ -42,6 +43,13 @@ computeItems();
 					{item.displayName}
 				</p>
 				{@render item.extra?.()}
+				{#if item.tooltip}
+					<Tooltip>
+						{#snippet text()}
+							{item.tooltip}
+						{/snippet}
+					</Tooltip>
+				{/if}
 			</MenuItem>
 		{/each}
 	</div>

package/package/components/DynamicInput.svelte

@@ -147,7 +147,7 @@ $effect(() => {
 	</div>
 {:else}
 	<div class="flex flex-col gap-1 w-full">
-		<div class="text-xs text-tertiary"
+		<div class="text-xs text-primary"
 			>Dynamic input ({inputType}) is not available in this mode, write value directly</div
 		>
 		{#await import('./JsonEditor.svelte')}

package/package/components/EEOnly.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">import { Building } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
+import { Tooltip } from './meltComponents';
+let { class: className = '', children = undefined } = $props();
+</script>
+
+<Tooltip>
+	<div
+		class={twMerge(
+			'flex text-xs items-center gap-1 text-yellow-500 whitespace-nowrap px-1',
+			className
+		)}
+		aria-label="Enterprise Edition only feature"
+		role="tooltip"
+	>
+		EE only <Building size={16} />
+	</div>
+	{#snippet text()}
+		{#if children}
+			{@render children()}
+		{:else}
+			Enterprise Edition only feature
+		{/if}
+	{/snippet}
+</Tooltip>

package/package/components/EEOnly.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const EEOnly: import("svelte").Component<Props, {}, "">;
+type EEOnly = ReturnType<typeof EEOnly>;
+export default EEOnly;

package/package/components/EditableSchemaForm.svelte

@@ -346,7 +346,7 @@ let dndType = $state(generateRandomString());
 								<div class="flex flex-col gap-2 h-full">
 									{#if dynamicFunctions.length > 0}
 										<div class="bg-blue-50 dark:bg-blue-900/20 p-3 rounded-md">
-											<div class="text-sm font-medium text-blue-800 dark:text-blue-200 mb-2">
+											<div class="text-sm font-semibold text-blue-800 dark:text-blue-200 mb-2">
 												Expected Functions for Dynamic Input Fields:
 											</div>
 											<ul class="text-xs text-blue-700 dark:text-blue-300 space-y-1">
@@ -400,7 +400,7 @@ let dndType = $state(generateRandomString());
 				{:else}
 					<!-- WIP -->
 					{#if jsonEnabled && customUi?.jsonOnly != true}
-						<div class="w-full px-3 flex gap-4 justify-end items-center">
+						<div class="w-full px-4 py-2 flex gap-4 justify-end items-center">
 							{#if addPropertyInEditorTab}
 								<AddPropertyV2
 									bind:schema
@@ -409,14 +409,13 @@ let dndType = $state(generateRandomString());
 									}}
 								>
 									{#snippet trigger()}
-										<Button color="light" size="xs" iconOnly startIcon={{ icon: Plus }} />
+										<Button variant="subtle" size="xs" iconOnly startIcon={{ icon: Plus }} />
 									{/snippet}
 								</AddPropertyV2>
 							{/if}
 							<div class="shrink-0">
 								<Toggle
 									bind:checked={jsonView}
-									label="JSON View"
 									size="xs"
 									options={{
 										left: 'JSON editor',
@@ -459,15 +458,15 @@ let dndType = $state(generateRandomString());
 												}
 											}}
 										>
-											<div class="flex flex-row gap-2">
+											<div class="flex flex-row gap-2 text-sm">
 												{argName}
 												{#if !uiOnly}
 													<div onclick={stopPropagation(preventDefault(bubble('click')))}>
 														<Popover placement="bottom-end" containerClasses="p-4" closeButton>
 															{#snippet trigger()}
 																<Button
-																	color="light"
-																	size="xs2"
+																	variant="subtle"
+																	size="xs3"
 																	nonCaptureEvent
 																	startIcon={{ icon: Pen }}
 																	iconOnly
@@ -489,8 +488,7 @@ let dndType = $state(generateRandomString());
 																			}}
 																		/>
 																		<Button
-																			variant="border"
-																			color="light"
+																			variant="default"
 																			size="xs"
 																			on:click={() => {
 																				renameProperty(argName, argName + i)
@@ -540,6 +538,7 @@ let dndType = $state(generateRandomString());
 															bind:customErrorMessage={
 																schema.properties[argName].customErrorMessage
 															}
+															bind:nonEmpty={schema.properties[argName].nonEmpty}
 															bind:itemsType={schema.properties[argName].items}
 															bind:extra={schema.properties[argName]}
 															bind:title={schema.properties[argName].title}
@@ -719,7 +718,7 @@ let dndType = $state(generateRandomString());
 									</div>
 								{/each}
 							{:else if !shouldHideNoInputs}
-								<div class="text-secondary text-sm p-2">No inputs</div>
+								<div class="text-secondary text-xs p-2">No inputs</div>
 							{/if}
 						</div>
 					{:else}
@@ -779,8 +778,7 @@ let dndType = $state(generateRandomString());
 		{#snippet submission()}
 			<div>
 				<Button
-					variant="border"
-					color="blue"
+					variant="default"
 					size="sm"
 					startIcon={{ icon: Plus }}
 					on:click={() => variableEditor?.initNew?.()}