windmill-components 1.122.0 → 1.138.2

package/package/components/flows/map/FlowModuleSchemaItem.svelte

@@ -1,7 +1,7 @@
 <script>import Badge from '../../common/badge/Badge.svelte';
 import Popover from '../../Popover.svelte';
 import { classNames } from '../../../utils';
-import { Bed, Database, Move, PhoneIncoming, Repeat, Square, Voicemail, X } from 'lucide-svelte';
+import { Bed, Database, Gauge, Move, PhoneIncoming, Repeat, Square, Voicemail, X } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import { fade } from 'svelte/transition';
 export let selected = false;
@@ -17,6 +17,7 @@ export let id = undefined;
 export let label;
 export let modType = undefined;
 export let bgColor = '';
+export let concurrency = false;
 const dispatch = createEventDispatcher();
 </script>
 
@@ -35,18 +36,29 @@ const dispatch = createEventDispatcher();
 			<Popover notClickable>
 				<div
 					transition:fade|local={{ duration: 200 }}
-					class="center-center rounded border bg-white border-gray-400 text-gray-700 px-1 py-0.5"
+					class="center-center rounded border bg-surface border-gray-400 text-secondary px-1 py-0.5"
 				>
 					<Repeat size={14} />
 				</div>
 				<svelte:fragment slot="text">Retries</svelte:fragment>
 			</Popover>
 		{/if}
+		{#if concurrency}
+			<Popover notClickable>
+				<div
+					transition:fade|local={{ duration: 200 }}
+					class="center-center rounded border bg-surface border-gray-400 text-secondary px-1 py-0.5"
+				>
+					<Gauge size={14} />
+				</div>
+				<svelte:fragment slot="text">Concurrency Limits</svelte:fragment>
+			</Popover>
+		{/if}
 		{#if cache}
 			<Popover notClickable>
 				<div
 					transition:fade|local={{ duration: 200 }}
-					class="center-center rounded border bg-white border-gray-400 text-gray-700 px-1 py-0.5"
+					class="center-center rounded border bg-surface border-gray-400 text-secondary px-1 py-0.5"
 				>
 					<Database size={14} />
 				</div>
@@ -57,7 +69,7 @@ const dispatch = createEventDispatcher();
 			<Popover notClickable>
 				<div
 					transition:fade|local={{ duration: 200 }}
-					class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+					class="center-center bg-surface rounded border border-gray-400 text-secondary px-1 py-0.5"
 				>
 					<Square size={14} />
 				</div>
@@ -68,7 +80,7 @@ const dispatch = createEventDispatcher();
 			<Popover notClickable>
 				<div
 					transition:fade|local={{ duration: 200 }}
-					class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+					class="center-center bg-surface rounded border border-gray-400 text-secondary px-1 py-0.5"
 				>
 					<PhoneIncoming size={14} />
 				</div>
@@ -79,7 +91,7 @@ const dispatch = createEventDispatcher();
 			<Popover notClickable>
 				<div
 					transition:fade|local={{ duration: 200 }}
-					class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+					class="center-center bg-surface rounded border border-gray-400 text-secondary px-1 py-0.5"
 				>
 					<Bed size={14} />
 				</div>
@@ -90,7 +102,7 @@ const dispatch = createEventDispatcher();
 			<Popover notClickable>
 				<div
 					transition:fade|local={{ duration: 200 }}
-					class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+					class="center-center bg-surface rounded border border-gray-400 text-secondary px-1 py-0.5"
 				>
 					<Voicemail size={14} />
 				</div>
@@ -100,7 +112,7 @@ const dispatch = createEventDispatcher();
 	</div>
 	<div
 		class="flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm
-			border border-gray-400 p-2 text-2xs module"
+			border border-gray-400 p-2 text-2xs module text-primary"
 	>
 		{#if $$slots.icon}
 			<slot name="icon" />
@@ -115,8 +127,8 @@ const dispatch = createEventDispatcher();
 	</div>
 	{#if deletable}
 		<button
-			class="absolute -top-2 -right-2 rounded-full h-4 w-4 trash center-center
-	border-[1.5px] border-gray-700 bg-white duration-150 hover:bg-red-400 hover:text-white
+			class="absolute -top-2 -right-2 rounded-full h-4 w-4 trash center-center text-primary
+	border-[1.5px] border-gray-700 bg-surface duration-150 hover:bg-red-400 hover:text-white
 	hover:border-red-700 {selected ? '' : '!hidden'}"
 			on:click|preventDefault|stopPropagation={(event) =>
 				dispatch('delete', { event, id, type: modType })}
@@ -125,8 +137,8 @@ const dispatch = createEventDispatcher();
 		</button>
 
 		<button
-			class="absolute -top-2 right-10 rounded-full h-4 w-4 trash center-center
-border-[1.5px] border-gray-700 bg-white duration-150 hover:bg-blue-400 hover:text-white
+			class="absolute -top-2 right-10 rounded-full h-4 w-4 trash center-center text-primary
+border-[1.5px] border-gray-700 bg-surface duration-150 hover:bg-blue-400 hover:text-white
 hover:border-blue-700 {selected ? '' : '!hidden'}"
 			on:click|preventDefault|stopPropagation={(event) => dispatch('move')}
 		>

package/package/components/flows/map/FlowModuleSchemaItem.svelte.d.ts

@@ -14,6 +14,7 @@ declare const __propDef: {
         label: string;
         modType?: string | undefined;
         bgColor?: string | undefined;
+        concurrency?: boolean | undefined;
     };
     events: {
         click: MouseEvent;

package/package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -133,7 +133,7 @@ let dependents = {};
 		>
 		{#each Object.entries(dependents) as [k, v]}
 			<div class="pb-3">
-				<h3 class="text-gray-700 font-semibold">{k}</h3>
+				<h3 class="text-secondary font-semibold">{k}</h3>
 				<ul class="text-sm">
 					{#each v as dep}
 						<li>{dep}</li>
@@ -145,7 +145,7 @@ let dependents = {};
 </Portal>
 <div class="flex flex-col h-full relative -pt-1">
 	<div
-		class="z-10 sticky inline-flex flex-col gap-2 top-0 bg-gray-50 flex-initial p-2 items-center border-b border-gray-300"
+		class="z-10 sticky inline-flex flex-col gap-2 top-0 bg-surface-secondary flex-initial p-2 items-center border-b"
 	>
 		<FlowSettingsItem />
 		<FlowConstantsItem />

package/package/components/flows/map/FlowSettingsItem.svelte

@@ -3,7 +3,7 @@ import { classNames } from '../../../utils';
 import { Badge } from '../../common';
 import { SlidersHorizontal } from 'lucide-svelte';
 const { selectedId, flowStore } = getContext('FlowEditorContext');
-$: settingsClass = classNames('border w-full rounded-sm p-2 bg-white border-gray-400 text-sm cursor-pointer flex items-center', $selectedId?.startsWith('settings')
+$: settingsClass = classNames('border w-full rounded-sm p-2 bg-surface text-sm cursor-pointer flex items-center', $selectedId?.startsWith('settings')
     ? 'outline outline-offset-1 outline-2  outline-slate-900'
     : '');
 </script>

package/package/components/flows/map/InsertModuleButton.svelte

@@ -14,13 +14,13 @@ export let open = undefined;
 		title="Add step"
 		slot="trigger"
 		type="button"
-		class=" text-gray-900 bg-white border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+		class="text-primary bg-surface border mx-0.5 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-surface-selected font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
 	>
 		<Cross size={12} />
 	</button>
-	<div class="font-mono divide-y divide-gray-100 text-xs w-40">
+	<div class="font-mono divide-y text-xs w-40 text-secondary">
 		<button
-			class="w-full text-left p-2 hover:bg-gray-100"
+			class="w-full text-left p-2 hover:bg-surface-hover"
 			on:click={() => {
 				close()
 				dispatch('new', 'script')
@@ -33,7 +33,7 @@ export let open = undefined;
 		</button>
 		{#if trigger}
 			<button
-				class="w-full text-left p-2 hover:bg-gray-100"
+				class="w-full text-left p-2 hover:bg-surface-hover"
 				on:click={() => {
 					close()
 					dispatch('new', 'trigger')
@@ -46,7 +46,7 @@ export let open = undefined;
 			</button>
 		{/if}
 		<button
-			class="w-full text-left gap-1 p-2 hover:bg-gray-100"
+			class="w-full text-left gap-1 p-2 hover:bg-surface-hover"
 			on:click={() => {
 				close()
 				dispatch('new', 'approval')
@@ -58,7 +58,7 @@ export let open = undefined;
 			Approval
 		</button>
 		<button
-			class="w-full inline-flex text-left p-2 hover:bg-gray-100"
+			class="w-full inline-flex text-left p-2 hover:bg-surface-hover"
 			on:click={() => {
 				close()
 				dispatch('new', 'forloop')
@@ -73,7 +73,7 @@ export let open = undefined;
 		</button>
 
 		<button
-			class="w-full text-left p-2 hover:bg-gray-100"
+			class="w-full text-left p-2 hover:bg-surface-hover"
 			on:click={() => {
 				close()
 				dispatch('new', 'branchone')
@@ -85,7 +85,7 @@ export let open = undefined;
 		</button>
 
 		<button
-			class="w-full text-left p-2 hover:bg-gray-100"
+			class="w-full text-left p-2 hover:bg-surface-hover"
 			on:click={() => {
 				close()
 				dispatch('new', 'branchall')
@@ -97,7 +97,7 @@ export let open = undefined;
 		</button>
 
 		<button
-			class="w-full text-left p-2 hover:bg-gray-100"
+			class="w-full text-left p-2 hover:bg-surface-hover"
 			on:click={() => {
 				close()
 				dispatch('new', 'flow')
@@ -109,7 +109,7 @@ export let open = undefined;
 		</button>
 		{#if stop}
 			<button
-				class="w-full text-left p-2 hover:bg-gray-100 inline-flex gap-2.5"
+				class="w-full text-left p-2 hover:bg-surface-hover inline-flex gap-2.5"
 				on:click={() => {
 					close()
 					dispatch('new', 'end')

package/package/components/flows/map/MapItem.svelte

@@ -7,6 +7,7 @@ import { createEventDispatcher, getContext } from 'svelte';
 import Icon from 'svelte-awesome';
 import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte';
 import InsertModuleButton from './InsertModuleButton.svelte';
+import { prettyLanguage } from '../../../common';
 export let mod;
 export let trigger;
 export let insertable;
@@ -26,7 +27,8 @@ $: itemProps = {
     suspend: Boolean(mod.suspend),
     sleep: Boolean(mod.sleep),
     cache: Boolean(mod.cache_ttl),
-    mock: Boolean(mod.mock?.enabled)
+    mock: Boolean(mod.mock?.enabled),
+    concurrency: Boolean(mod?.value?.['concurrent_limit'])
 };
 function onDelete(event) {
     dispatch('delete', event);
@@ -47,7 +49,7 @@ let openMenu2 = undefined;
 						dispatch('insert', { modules, index: idx, detail: 'move' })
 					}}
 					type="button"
-					class=" text-gray-900 bg-white border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+					class=" text-primary bg-surface border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
 				>
 					<ClipboardCopy size={12} />
 				</button>
@@ -72,7 +74,7 @@ let openMenu2 = undefined;
 		{/if}
 
 		{#if annotation && annotation != ''}
-			<div class="absolute z-10 left-0 -top-5 center-center text-gray-600">
+			<div class="absolute z-10 left-0 -top-5 center-center text-tertiary">
 				{annotation}
 			</div>
 		{/if}
@@ -135,7 +137,9 @@ let openMenu2 = undefined;
 					{bgColor}
 					label={mod.summary ||
 						(`path` in mod.value ? mod.value.path : undefined) ||
-						(mod.value.type === 'rawscript' ? `Inline ${mod.value.language}` : 'To be defined')}
+						(mod.value.type === 'rawscript'
+							? `Inline ${prettyLanguage(mod.value.language)}`
+							: 'To be defined')}
 				>
 					<div slot="icon">
 						{#if mod.value.type === 'rawscript'}
@@ -176,7 +180,7 @@ let openMenu2 = undefined;
 						dispatch('insert', { modules, index: idx + 1, detail: 'move' })
 					}}
 					type="button"
-					class=" text-gray-900 bg-white border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+					class=" text-primary bg-surface border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
 				>
 					<ClipboardCopy size={12} />
 				</button>
@@ -200,7 +204,7 @@ let openMenu2 = undefined;
 					dispatch('newBranch', { module: mod })
 				}}
 				type="button"
-				class=" text-gray-900 bg-white border mx-0.5 rotate-180 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+				class=" text-primary bg-surface border mx-0.5 rotate-180 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
 			>
 				<GitBranchPlus size={12} />
 			</button>

package/package/components/flows/map/VirtualItem.svelte

@@ -16,6 +16,7 @@ export let whereInsert = 'after';
 export let deleteBranch = undefined;
 export let id = undefined;
 export let moving = undefined;
+export let center = true;
 const dispatch = createEventDispatcher();
 let openMenu = false;
 </script>
@@ -28,7 +29,7 @@ let openMenu = false;
 				dispatch('deleteBranch', deleteBranch)
 			}}
 			type="button"
-			class=" text-gray-900 bg-white border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+			class="text-primary bg-surface border mx-0.5 border-gray-300 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
 		>
 			<X size={14} />
 		</button>
@@ -37,11 +38,11 @@ let openMenu = false;
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
 	class={classNames(
-		'w-full flex relative overflow-hidden rounded-sm ',
+		'w-full flex relative overflow-hidden rounded-sm',
 		selectable ? 'cursor-pointer' : '',
 		selected ? 'outline outline-offset-1 outline-2  outline-gray-600' : ''
 	)}
-	style="min-width: 275px; height: 34px; background-color: {bgColor};"
+	style="min-width: 275px; max-height: 80px; background-color: {bgColor};"
 	on:click={() => {
 		if (selectable) {
 			if (id) {
@@ -53,15 +54,16 @@ let openMenu = false;
 	}}
 >
 	<div
-		class="flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm
-			border border-gray-400 p-2 text-2xs module"
+		class="flex gap-1 justify-between {center
+			? 'items-center'
+			: 'items-baseline'} w-full overflow-hidden rounded-sm border p-2 text-2xs module text-primary border-gray-400"
 	>
 		{#if $$slots.icon}
 			<slot name="icon" />
 			<span class="mr-2" />
 		{/if}
 		<div />
-		<div class="flex-1 truncate">{label}</div>
+		<div class="flex-1 truncate"><pre>{label}</pre></div>
 		<div class="flex items-center space-x-2">
 			{#if id}
 				<Badge color="indigo">{id}</Badge>
@@ -89,7 +91,7 @@ let openMenu = false;
 					}
 				}}
 				type="button"
-				class=" text-gray-900 bg-white border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+				class="text-primary bg-surface border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
 			>
 				<ClipboardCopy size={12} />
 			</button>
@@ -121,7 +123,7 @@ let openMenu = false;
 				}
 			}}
 			type="button"
-			class=" text-gray-900 bg-white border mx-0.5 rotate-180 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+			class="text-primary bg-surface border mx-0.5 rotate-180 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
 		>
 			<Icon data={faBolt} scale={0.8} />
 		</button>

package/package/components/flows/map/VirtualItem.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import { SvelteComponentTyped } from "svelte";
 import type { FlowModule } from '../../../gen';
 declare const __propDef: {
@@ -17,6 +16,7 @@ declare const __propDef: {
         } | undefined;
         id?: string | undefined;
         moving?: string | undefined;
+        center?: boolean | undefined;
     };
     events: {
         insert: CustomEvent<{

package/package/components/flows/pickers/FlowScriptPicker.svelte

@@ -1,29 +1,36 @@
-<script>import Button from '../../common/button/Button.svelte';
+<script>import Popover from '../../Popover.svelte';
+import Button from '../../common/button/Button.svelte';
 import LanguageIcon from '../../common/languageIcons/LanguageIcon.svelte';
+import { enterpriseLicense } from '../../../stores';
 export let disabled = false;
 export let label;
 export let lang = undefined;
 export let icon = undefined;
 export let iconColor = undefined;
+const enterpriseLangs = ['bigquery'];
 </script>
 
-<Button
-	{disabled}
-	btnClasses="w-24 truncate"
-	on:click
-	size="sm"
-	spacingSize="md"
-	variant="border"
-	color="light"
-	startIcon={{
-		icon,
-		classes: iconColor
-	}}
->
-	<div class="flex justify-center flex-col items-center gap-2">
-		{#if lang}
-			<LanguageIcon {lang} />
-		{/if}
-		<span class="text-xs">{label}</span>
-	</div>
-</Button>
+<Popover disablePopup={!enterpriseLangs.includes(lang || '') || !!$enterpriseLicense}>
+	<Button
+		btnClasses="w-32 truncate"
+		on:click
+		size="sm"
+		spacingSize="md"
+		variant="border"
+		color="light"
+		startIcon={{
+			icon,
+			classes: iconColor
+		}}
+		disabled={disabled || (enterpriseLangs.includes(lang || '') && !$enterpriseLicense)}
+	>
+		<div class="flex justify-center flex-col items-center gap-2">
+			{#if lang}
+				<LanguageIcon {lang} />
+			{/if}
+			<span class="text-xs">{label}</span>
+		</div>
+	</Button>
+	<svelte:fragment slot="text">{label} is only available with an enterprise license</svelte:fragment
+	>
+</Popover>

package/package/components/flows/pickers/FlowScriptPicker.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
     props: {
         disabled?: boolean | undefined;
         label: string;
-        lang?: SupportedLanguage | 'pgsql' | 'mysql' | 'javascript' | 'fetch' | 'docker' | undefined;
+        lang?: SupportedLanguage | 'pgsql' | 'mysql' | 'javascript' | 'fetch' | 'docker' | 'powershell' | undefined;
         icon?: IconDefinition | undefined;
         iconColor?: string | undefined;
     };

package/package/components/flows/pickers/PickHubApp.svelte

@@ -36,18 +36,18 @@ onMount(async () => {
 	{#if filteredItems.length == 0}
 		<NoItemFound />
 	{:else}
-		<ul class="divide-y divide-gray-200 border rounded-md">
+		<ul class="divide-y border rounded-md">
 			{#each filteredItems as item (item)}
 				<li class="flex flex-row w-full">
 					<button
-						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-gray-50 bg-white transition-all items-center rounded-md"
+						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-surface-hover bg-surface transition-all items-center rounded-md"
 						on:click={() => dispatch('pick', item)}
 					>
 						<div class="flex items-center gap-4">
 							<RowIcon kind="app" />
 
 							<div class="w-full text-left font-normal">
-								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
+								<div class="text-primary flex-wrap text-md font-semibold">
 									{#if item.marked}
 										{@html item.marked ?? ''}
 									{:else}

package/package/components/flows/pickers/PickHubFlow.svelte

@@ -36,18 +36,18 @@ onMount(async () => {
 	{#if filteredItems.length == 0}
 		<NoItemFound />
 	{:else}
-		<ul class="divide-y divide-gray-200 border rounded-md">
+		<ul class="divide-y border rounded-md overflow-hidden">
 			{#each filteredItems as item (item)}
 				<li class="flex flex-row w-full">
 					<button
-						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-gray-50 bg-white transition-all items-center rounded-md"
+						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-surface-hover bg-surfacehite transition-all items-center"
 						on:click={() => dispatch('pick', item)}
 					>
 						<div class="flex items-center gap-4">
 							<RowIcon kind="flow" />
 
 							<div class="w-full text-left font-normal">
-								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
+								<div class="text-primary flex-wrap text-md font-semibold">
 									{#if item.marked}
 										{@html item.marked ?? ''}
 									{:else}

package/package/components/flows/pickers/PickHubScript.svelte

@@ -35,18 +35,18 @@ const maxItems = 40;
 	{#if filteredItems.length == 0}
 		<NoItemFound />
 	{:else}
-		<ul class="divide-y divide-gray-200 border rounded-md">
+		<ul class="divide-y border rounded-md">
 			{#each filteredItems.slice(0, maxItems) as item (item.path)}
 				<li class="flex flex-row w-full">
 					<button
-						class="p-4 gap-4 flex flex-row grow hover:bg-gray-50 bg-white transition-all items-center rounded-md"
+						class="p-4 gap-4 flex flex-row grow hover:bg-surface-hover bg-surface transition-all items-center rounded-md"
 						on:click={() => dispatch('pick', item)}
 					>
 						<div class="flex items-center gap-4">
 							<div
 								class={classNames(
 									'rounded-md p-1 flex justify-center items-center border',
-									'bg-gray-50 border-gray-200'
+									'bg-surface border'
 								)}
 							>
 								<svelte:component
@@ -57,14 +57,14 @@ const maxItems = 40;
 							</div>
 
 							<div class="w-full text-left font-normal">
-								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
+								<div class="text-primary flex-wrap text-md font-semibold mb-1">
 									{#if item.marked}
 										{@html item.marked ?? ''}
 									{:else}
 										{item.summary ?? ''}
 									{/if}
 								</div>
-								<div class="text-gray-600 text-xs">
+								<div class="text-secondary text-xs">
 									{item.path}
 								</div>
 							</div>
@@ -78,7 +78,7 @@ const maxItems = 40;
 		</ul>
 	{/if}
 	{#if filteredItems.length > maxItems}
-		<div class="text-gray-500 text-sm py-4">
+		<div class="text-tertiary text-sm py-4">
 			There are more items ({filteredItems.length}) than being displayed. Refine your search.
 		</div>
 	{/if}

package/package/components/flows/pickers/WorkspaceScriptPicker.svelte

@@ -77,11 +77,11 @@ let lockHash = false;
 		{#if filter.length > 0 && filteredItems.length == 0}
 			<NoItemFound />
 		{/if}
-		<ul class="divide-y divide-gray-200 overflow-auto">
+		<ul class="divide-y border rounded-md overflow-hidden">
 			{#each filteredItems as { path, hash, summary, description, marked }}
 				<li class="flex flex-row w-full">
 					<button
-						class="py-4 px-1 gap-1 flex flex-row grow hover:bg-blue-50 bg-white transition-all text-black"
+						class="p-4 gap-1 flex flex-row grow hover:bg-surface-hover bg-surface transition-all text-primary"
 						on:click={() => {
 							dispatch('pick', { path, hash: lockHash ? hash : undefined })
 						}}

package/package/components/flows/utils.js

@@ -148,7 +148,8 @@ export async function runFlowPreview(args, flow) {
         requestBody: {
             args,
             value: newFlow.value,
-            path: newFlow.path
+            path: newFlow.path,
+            tag: newFlow.tag
         }
     });
 }