windmill-components 1.558.4 → 1.596.0

package/package/components/triggers/TriggersEditor.svelte

@@ -6,9 +6,8 @@ import TriggersTable from './TriggersTable.svelte';
 import CaptureWrapper from './CaptureWrapper.svelte';
 import { fade } from 'svelte/transition';
 import TriggersBadge from '../graph/renderers/triggers/TriggersBadge.svelte';
-import { twMerge } from 'tailwind-merge';
 import AddTriggersButton from './AddTriggersButton.svelte';
-import { Plus } from 'lucide-svelte';
+import { Plus, BookOpen, ExternalLink } from 'lucide-svelte';
 import Button from '../common/button/Button.svelte';
 import TriggersWrapperV2 from './TriggersWrapper.svelte';
 import { triggerTypeToCaptureKind, CLOUD_DISABLED_TRIGGER_TYPES } from './utils';
@@ -16,7 +15,7 @@ import { isCloudHosted } from '../../cloud';
 import { ScheduleService, WebsocketTriggerService, PostgresTriggerService, KafkaTriggerService, NatsTriggerService, MqttTriggerService, HttpTriggerService, GcpTriggerService, SqsTriggerService, EmailTriggerService } from '../../gen';
 import { sendUserToast } from '../../toast';
 import Alert from '../common/alert/Alert.svelte';
-let { noEditor, newItem = false, currentPath, fakeInitialPath = '', hash = undefined, args = {}, initialPath, isFlow, canHavePreprocessor = false, hasPreprocessor = false, isDeployed = false, schema = undefined, noCapture = false, isEditor = true, onDeployTrigger } = $props();
+let { noEditor, newItem = false, currentPath, fakeInitialPath = '', runnableVersion = undefined, args = {}, initialPath, isFlow, canHavePreprocessor = false, hasPreprocessor = false, isDeployed = false, schema = undefined, noCapture = false, isEditor = true, onDeployTrigger } = $props();
 let config = $state({});
 let width = $state(0);
 let emailDomain = $state(undefined);
@@ -143,23 +142,31 @@ function handleAddTrigger(type) {
 }
 const cloudDisabled = $derived(CLOUD_DISABLED_TRIGGER_TYPES.includes(triggersState.selectedTrigger?.type ?? '') &&
     isCloudHosted());
+let leftPaneWidth = $state(0);
 </script>
 
 <div bind:clientWidth={width} class="h-full w-full">
 	{#if chatInputEnabled}
 		<div class="p-2 pb-0">
 			<Alert type="warning" title="Chat Input Mode Enabled" size="xs">
-				This flow will only accept <span class="font-mono text-xs bg-surface-secondary px-1 rounded">user_message</span> as input parameter.
+				This flow will only accept
+				<span class="font-mono text-xs bg-surface-secondary px-1 rounded"> user_message</span>
+				as input parameter.
 			</Alert>
 		</div>
 	{/if}
 	<FlowCard {noEditor} noHeader>
 		<Splitpanes horizontal>
 			<Pane>
-				<div class="flex flex-row h-full">
+				<div class="flex flex-row h-full" bind:clientWidth={leftPaneWidth}>
 					<!-- Left Pane - Triggers List -->
-					{#if !useVerticalTriggerBar}
-						<div class="w-[350px] flex-shrink-0 overflow-auto pr-2 pl-4 pt-2 pb-2">
+					{#if !useVerticalTriggerBar || !triggersState.selectedTrigger}
+						<div
+							class="overflow-auto p-2"
+							style={triggersState.selectedTrigger
+								? 'width: 350px; flex: 0 0 350px;'
+								: 'flex: 1 1 350px; min-width: 350px;'}
+						>
 							<TriggersTable
 								selectedTrigger={triggersState.selectedTriggerIndex}
 								{onSelect}
@@ -171,17 +178,25 @@ const cloudDisabled = $derived(CLOUD_DISABLED_TRIGGER_TYPES.includes(triggersSta
 								webhookToken={$triggersCount?.webhook_count}
 								emailToken={$triggersCount?.default_email_count}
 							/>
+							{#if leftPaneWidth <= 800 && !triggersState.selectedTrigger}
+								<div class="mt-6">
+									{@render TriggerInfo()}
+								</div>
+							{/if}
 						</div>
 					{:else}
-						<div class="p-2 flex flex-col gap-2 border-r">
+						<div class="p-2 flex flex-col gap-2 border-r justify-start">
 							<AddTriggersButton
 								onAddDraftTrigger={handleAddTrigger}
 								class="w-fit h-fit"
 								placement="right-start"
 							>
-								<Button size="xs" nonCaptureEvent btnClasses="p-2 w-fit" wrapperClasses="p-0">
-									<Plus size="14" />
-								</Button>
+								<Button
+									variant="accent"
+									btnClasses="h-8 w-8 p-0"
+									nonCaptureEvent
+									startIcon={{ icon: Plus }}
+								/>
 							</AddTriggersButton>
 							<TriggersBadge
 								showOnlyWithCount={false}
@@ -198,63 +213,60 @@ const cloudDisabled = $derived(CLOUD_DISABLED_TRIGGER_TYPES.includes(triggersSta
 						</div>
 					{/if}
 
-					<div
-						class={twMerge(
-							'flex-grow overflow-auto pl-2 pr-4 pb-4 pt-2',
-							useVerticalTriggerBar ? 'pl-4 pt-2' : ''
-						)}
-						style="scrollbar-gutter: stable"
-					>
-						{#if loading}
-							<div
-								class="animate-skeleton dark:bg-frost-900/50 [animation-delay:1000ms] h-full w-full"
-							></div>
-						{:else if triggersState.selectedTrigger}
-							{#key [renderCount, triggersState.selectedTriggerIndex].join('-')}
-								<div in:fade={{ duration: 100, delay: 100 }} out:fade={{ duration: 100 }}>
-									<TriggersWrapperV2
-										selectedTrigger={triggersState.selectedTrigger}
-										{isFlow}
-										{initialPath}
-										{fakeInitialPath}
-										{currentPath}
-										{hash}
-										{isDeployed}
-										small={useVerticalTriggerBar}
-										{args}
-										{newItem}
-										{schema}
-										{isEditor}
-										onDelete={() => {
-											deleteTrigger(triggersState.selectedTriggerIndex)
-										}}
-										onUpdate={(path) => {
-											handleUpdate(triggersState.selectedTriggerIndex, path)
-										}}
-										onConfigChange={(cfg, canSave, updated) => {
-											if (updated) {
-												handleUpdateDraftConfig(triggersState.selectedTriggerIndex, cfg, canSave)
-											}
-										}}
-										onCaptureConfigChange={(cfg, isValidConfig) => {
-											config = cfg
-											isValid = isValidConfig
-										}}
-										onReset={() => {
-											handleResetDraft(triggersState.selectedTriggerIndex)
-										}}
-										onEmailDomain={(domain) => {
-											emailDomain = domain
-										}}
-									/>
-								</div>
-							{/key}
-						{:else}
-							<span class="text-sm text-tertiary text-center mx-auto mt-2"
-								>{`Select a trigger from the ${useVerticalTriggerBar ? 'left toolbar' : 'table'} or create a new one`}</span
-							>
-						{/if}
-					</div>
+					{#if triggersState.selectedTrigger}
+						<div
+							class="flex-grow overflow-auto py-2 px-4 transition-all duration-200 ease-in-out"
+							style="scrollbar-gutter: stable"
+						>
+							{#if loading}
+								<div
+									class="animate-skeleton dark:bg-frost-900/50 [animation-delay:1000ms] h-full w-full"
+								></div>
+							{:else}
+								{#key [renderCount, triggersState.selectedTriggerIndex].join('-')}
+									<div in:fade={{ duration: 100, delay: 100 }} out:fade={{ duration: 100 }}>
+										<TriggersWrapperV2
+											selectedTrigger={triggersState.selectedTrigger}
+											{isFlow}
+											{initialPath}
+											{fakeInitialPath}
+											{currentPath}
+											{runnableVersion}
+											{isDeployed}
+											small={useVerticalTriggerBar}
+											{args}
+											{newItem}
+											{schema}
+											{isEditor}
+											onDelete={() => {
+												deleteTrigger(triggersState.selectedTriggerIndex)
+											}}
+											onUpdate={(path) => {
+												handleUpdate(triggersState.selectedTriggerIndex, path)
+											}}
+											onConfigChange={(cfg, canSave, updated) => {
+												if (updated) {
+													handleUpdateDraftConfig(triggersState.selectedTriggerIndex, cfg, canSave)
+												}
+											}}
+											onCaptureConfigChange={(cfg, isValidConfig) => {
+												config = cfg
+												isValid = isValidConfig
+											}}
+											onReset={() => {
+												handleResetDraft(triggersState.selectedTriggerIndex)
+											}}
+											onEmailDomain={(domain) => {
+												emailDomain = domain
+											}}
+										/>
+									</div>
+								{/key}
+							{/if}
+						</div>
+					{:else if leftPaneWidth > 800}
+						{@render TriggerInfo(true)}
+					{/if}
 				</div>
 			</Pane>
 			{#if !cloudDisabled && triggersState.selectedTrigger && triggersState.selectedTrigger.type !== 'schedule' && triggersState.selectedTrigger.type != 'poll' && !noCapture}
@@ -271,7 +283,7 @@ const cloudDisabled = $derived(CLOUD_DISABLED_TRIGGER_TYPES.includes(triggersSta
 								{hasPreprocessor}
 								{canHavePreprocessor}
 								args={config}
-								data={{ args, hash, emailDomain }}
+								data={{ args, hash: !isFlow ? runnableVersion : undefined, emailDomain }}
 								{isValid}
 								triggerDeployed={!triggersState.selectedTrigger.isDraft}
 								on:applyArgs
@@ -286,3 +298,35 @@ const cloudDisabled = $derived(CLOUD_DISABLED_TRIGGER_TYPES.includes(triggersSta
 		</Splitpanes>
 	</FlowCard>
 </div>
+
+{#snippet TriggerInfo(margin: boolean = false)}
+	<div class="p-4 rounded bg-surface-tertiary grow min-w-[450px] h-fit {margin ? 'm-2' : ''}">
+		<div class="flex gap-3">
+			<BookOpen size={16} class="text-secondary mt-0.5 flex-shrink-0" />
+			<div class="flex-1">
+				<div class="text-2xs font-normal text-secondary mb-2">
+					<strong class="font-semibold">Triggers</strong> automatically run your flow when events
+					happen. Select one to configure it or create a new one.
+					<a
+						href="https://www.windmill.dev/docs/getting_started/triggers"
+						target="_blank"
+						class="whitespace-nowrap">Learn more <ExternalLink size={14} class="inline-block" /></a
+					>
+				</div>
+				<ul class="text-2xs text-hint space-y-1 ml-2">
+					<li class="flex">
+						<span class="mr-2">•</span>
+						<span>Default triggers: Webhooks, email, CLI - always exist, can't be disabled</span>
+					</li>
+					<li class="flex">
+						<span class="mr-2">•</span>
+						<span
+							>Additional triggers: Setup advanced triggers, like HTTP routes, database changes,
+							message queues, cloud events, and more</span
+						>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+{/snippet}

package/package/components/triggers/TriggersEditor.svelte.d.ts

@@ -4,7 +4,7 @@ interface Props {
     newItem?: boolean;
     currentPath: string;
     fakeInitialPath?: string;
-    hash?: string | undefined;
+    runnableVersion?: string | undefined;
     args?: Record<string, any>;
     initialPath: string;
     isFlow: boolean;

package/package/components/triggers/TriggersTable.svelte

@@ -13,18 +13,17 @@ let loading = false;
 </script>
 
 <div class="flex flex-col space-y-2 w-full">
-	<div class="w-full">
+	<div class="w-full flex justify-start">
 		<AddTriggersButton {onAddDraftTrigger} setDropdownWidthToButtonWidth class="w-full" {isEditor}>
 			<Button
 				aiId="add-trigger"
 				aiDescription="Add a new trigger"
-				size="xs"
-				color="blue"
-				startIcon={{ icon: Plus }}
+				unifiedSize="md"
 				nonCaptureEvent
-				btnClasses="w-full justify-center"
+				variant="accent"
+				startIcon={{ icon: Plus }}
 			>
-				<span>Add trigger</span>
+				Add trigger
 			</Button>
 		</AddTriggersButton>
 	</div>
@@ -34,8 +33,11 @@ let loading = false;
 				{@const SvelteComponent = triggerIconMap[trigger.type]}
 				<tr
 					class={twMerge(
-						'hover:bg-surface-hover cursor-pointer h-10 group',
-						selectedTrigger === index ? 'bg-surface-hover ' : ''
+						'cursor-pointer h-8 group',
+						trigger.isDraft ? 'text-hint' : '',
+						selectedTrigger === index
+							? 'bg-surface-accent-selected text-accent '
+							: 'hover:bg-surface-hover'
 					)}
 					onclick={() => onSelect?.(index)}
 					use:triggerableByAI={{
@@ -44,12 +46,9 @@ let loading = false;
 						callback: () => onSelect?.(index)
 					}}
 				>
-					<td class="w-12 text-center py-2 px-2">
+					<td class="w-8 text-center py-2 px-2">
 						<div class="relative flex justify-center items-center">
-							<SvelteComponent
-								size={16}
-								class={trigger.isDraft ? 'text-frost-400' : 'text-tertiary'}
-							/>
+							<SvelteComponent size={14} />
 
 							{#if trigger.isPrimary}
 								<Star size={10} class="absolute -mt-3 ml-3 text-blue-400" />
@@ -97,12 +96,12 @@ let loading = false;
 
 			{#if !loading && triggers.length === 0}
 				<tr>
-					<td colspan="2" class="text-center py-4 text-tertiary text-sm"> No triggers found </td>
+					<td colspan="2" class="text-center py-4 text-primary text-sm"> No triggers found </td>
 				</tr>
 			{/if}
 			{#if loading && triggers.length === 0}
 				<tr>
-					<td colspan="2" class="text-center py-4 text-tertiary text-sm">
+					<td colspan="2" class="text-center py-4 text-primary text-sm">
 						<div class="flex justify-center items-center gap-2">
 							<Loader2 class="animate-spin" size={16} />
 							<span>Loading triggers...</span>

package/package/components/triggers/TriggersWrapper.svelte

@@ -15,8 +15,7 @@ import { triggerIconMap } from './utils';
 import ClipboardPanel from '../details/ClipboardPanel.svelte';
 import CliHelpBox from '../CliHelpBox.svelte';
 import TriggerLabel from './TriggerLabel.svelte';
-import { twMerge } from 'tailwind-merge';
-let { selectedTrigger, isFlow = false, initialPath, fakeInitialPath, currentPath, hash, small, args, newItem, schema, onEmailDomain, ...props } = $props();
+let { selectedTrigger, isFlow = false, initialPath, fakeInitialPath, currentPath, runnableVersion, small, args, newItem, schema, onEmailDomain, ...props } = $props();
 </script>
 
 {#if selectedTrigger.type === 'http'}
@@ -32,7 +31,7 @@ let { selectedTrigger, isFlow = false, initialPath, fakeInitialPath, currentPath
 	<WebhooksPanel
 		{isFlow}
 		path={initialPath || fakeInitialPath}
-		{hash}
+		{runnableVersion}
 		token=""
 		{args}
 		scopes={isFlow ? [`jobs:run:flows:${currentPath}`] : [`jobs:run:scripts:${currentPath}`]}
@@ -44,7 +43,7 @@ let { selectedTrigger, isFlow = false, initialPath, fakeInitialPath, currentPath
 		scopes={isFlow ? [`jobs:run:flows:${currentPath}`] : [`jobs:run:scripts:${currentPath}`]}
 		path={initialPath || fakeInitialPath}
 		{isFlow}
-		{hash}
+		runnableVersion={!isFlow ? runnableVersion : undefined}
 		{onEmailDomain}
 	/>
 {:else if selectedTrigger.type === 'schedule'}
@@ -133,7 +132,7 @@ let { selectedTrigger, isFlow = false, initialPath, fakeInitialPath, currentPath
 {:else if selectedTrigger.type === 'poll'}
 	<ScheduledPollPanel />
 {:else if selectedTrigger.type === 'cli'}
-	<div class="py-1 flex flex-col gap-4">
+	<div class="py-1 flex flex-col gap-6">
 		<ClipboardPanel content={selectedTrigger.extra?.cliCommand ?? ''} />
 		<CliHelpBox />
 	</div>
@@ -142,10 +141,7 @@ let { selectedTrigger, isFlow = false, initialPath, fakeInitialPath, currentPath
 {#snippet customLabel()}
 	{@const IconComponent = triggerIconMap[selectedTrigger.type]}
 	<div class="flex flex-row gap-2 items-center grow min-w-0 pr-2">
-		<IconComponent
-			size={16}
-			class={twMerge(selectedTrigger.isDraft ? 'text-frost-400' : '', 'shrink-0')}
-		/>
+		<IconComponent size={16} class={'shrink-0'} />
 		<TriggerLabel trigger={selectedTrigger} />
 	</div>
 {/snippet}

package/package/components/triggers/TriggersWrapper.svelte.d.ts

@@ -5,7 +5,7 @@ interface Props {
     initialPath: string;
     fakeInitialPath: string;
     currentPath: string;
-    hash?: string;
+    runnableVersion?: string;
     isDeployed: boolean;
     small: boolean;
     args: Record<string, any>;

package/package/components/triggers/email/DefaultEmailCapture.svelte.d.ts

@@ -33,7 +33,9 @@ declare const DefaultEmailCapture: $$__sveltets_2_IsomorphicComponent<Props, {
         redirect: boolean;
         args?: boolean;
     }>;
-    addPreprocessor: CustomEvent<null>;
+    addPreprocessor: CustomEvent<{
+        args: Record<string, any>;
+    } | null>;
     testWithArgs: CustomEvent<Record<string, any>>;
 } & {
     [evt: string]: CustomEvent<any>;

package/package/components/triggers/email/DefaultEmailConfigSection.svelte

@@ -11,10 +11,11 @@ import Alert from '../../common/alert/Alert.svelte';
 import { base32 } from 'rfc4648';
 import { emptyString } from '../../../utils';
 import UserSettings from '../../UserSettings.svelte';
+import TextInput from '../../text_input/TextInput.svelte';
 let requestType = $state('path');
 function emailAddress() {
-    const pathOrHash = requestType === 'hash' ? hash : path.replaceAll('/', '.');
-    const plainPrefix = `${$workspaceStore}+${(requestType === 'hash' ? 'hash.' : isFlow ? 'flow.' : '') + pathOrHash}+${token}`;
+    const pathOrHash = requestType === 'runnableVersion' ? runnableVersion : path.replaceAll('/', '.');
+    const plainPrefix = `${$workspaceStore}+${(requestType === 'runnableVersion' ? 'hash.' : isFlow ? 'flow.' : '') + pathOrHash}+${token}`;
     const encodedPrefix = base32
         .stringify(new TextEncoder().encode(plainPrefix), {
         pad: false
@@ -22,28 +23,25 @@ function emailAddress() {
         .toLowerCase();
     return `${pathOrHash}+${encodedPrefix}@${emailDomain}`;
 }
-let { token = $bindable(''), isFlow = false, hash = undefined, path, userSettings, emailDomain = null, email = $bindable('') } = $props();
+let { token = $bindable(''), isFlow = false, runnableVersion = undefined, path, userSettings, emailDomain = null, email = $bindable('') } = $props();
 $effect(() => {
     email = emailAddress();
 });
 </script>
 
 <div>
-	<div class="flex flex-col gap-4">
+	<div class="flex flex-col gap-6">
 		{#if SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON}
 			<Label label="Token">
-				<div class="flex flex-row justify-between gap-2">
-					<input
+				<div class="flex flex-row justify-between gap-2 whitespace-nowrap">
+					<TextInput
 						bind:value={token}
-						placeholder="paste your token here once created to alter examples below"
+						inputProps={{
+							placeholder: 'Paste your token here once created to alter examples below'
+						}}
 						class="!text-xs"
 					/>
-					<Button
-						size="xs"
-						color="light"
-						variant="border"
-						on:click={() => userSettings.openDrawer()}
-					>
+					<Button size="xs" variant="default" on:click={() => userSettings.openDrawer()}>
 						Create an Email-specific Token
 						<Tooltip light>
 							The token will have a scope such that it can only be used to trigger this script. It
@@ -64,10 +62,10 @@ $effect(() => {
 			<div class="flex flex-col gap-2">
 				<div class="flex flex-row justify-between">
 					<div class="text-xs font-semibold flex flex-row items-center">Call method</div>
-					<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={requestType}>
+					<ToggleButtonGroup class="w-auto" bind:selected={requestType}>
 						{#snippet children({ item })}
 							<ToggleButton label="By path" value="path" {item} />
-							<ToggleButton label="By hash" value="hash" {item} />
+							<ToggleButton label="By hash" value="runnableVersion" {item} />
 						{/snippet}
 					</ToggleButtonGroup>
 				</div>
@@ -80,21 +78,15 @@ $effect(() => {
 					{#if !emptyString(token)}
 						<ClipboardPanel content={email} />
 					{:else}
-						<input
-							type="text"
-							disabled
-							value="Create a token first"
-							class="!text-xs !text-red-400"
-						/>
+						<TextInput inputProps={{ placeholder: 'Create a token first', disabled: true }} />
 					{/if}
+					<Alert title="Email trigger" size="xs" class="mt-1">
+						To trigger the job by email, send an email to the address above. The job will receive
+						two arguments: `raw_email` containing the raw email as string, and `parsed_email`
+						containing the parsed email as an object.
+					</Alert>
 				</Label>
 			{/key}
 		{/key}
-
-		<Alert title="Email trigger" size="xs">
-			To trigger the job by email, send an email to the address above. The job will receive two
-			arguments: `raw_email` containing the raw email as string, and `parsed_email` containing the
-			parsed email as an object.
-		</Alert>
 	</div>
 </div>

package/package/components/triggers/email/DefaultEmailConfigSection.svelte.d.ts

@@ -2,7 +2,7 @@ import UserSettings from '../../UserSettings.svelte';
 interface Props {
     token?: string;
     isFlow?: boolean;
-    hash?: string | undefined;
+    runnableVersion?: string | undefined;
     path: string;
     userSettings: UserSettings;
     emailDomain?: string | null;

package/package/components/triggers/email/DefaultEmailPanel.svelte

@@ -10,7 +10,7 @@ import Section from '../../Section.svelte';
 import DefaultEmailConfigSection from './DefaultEmailConfigSection.svelte';
 import { getEmailDomain } from './utils';
 let userSettings = $state(undefined);
-let { token = $bindable(), scopes = [], isFlow = false, hash = undefined, path, onEmailDomain } = $props();
+let { token = $bindable(), scopes = [], isFlow = false, runnableVersion = undefined, path, onEmailDomain } = $props();
 let emailDomain = $state(null);
 let triggerTokens = $state(undefined);
 let loading = $state(true);
@@ -38,7 +38,7 @@ $effect(() => {
 	{scopes}
 />
 
-<Section label="Default email trigger" class="flex flex-col gap-4">
+<Section label="Default email trigger" class="flex flex-col gap-6">
 	<Description link="https://www.windmill.dev/docs/advanced/email_triggers">
 		Default email trigger is a partially fixed email address that can be used to trigger a script or
 		flow. The email address is composed of the encoded workspace and script or flow path as well as
@@ -48,7 +48,7 @@ $effect(() => {
 		<Skeleton layout={[[18]]} />
 	{:else}
 		{#if emailDomain}
-			<DefaultEmailConfigSection {hash} {token} {path} {isFlow} {userSettings} {emailDomain} />
+			<DefaultEmailConfigSection {runnableVersion} {token} {path} {isFlow} {userSettings} {emailDomain} />
 		{:else}
 			<div>
 				<Alert title="Email triggers are disabled" size="xs" type="warning">

package/package/components/triggers/email/DefaultEmailPanel.svelte.d.ts

@@ -2,7 +2,7 @@ interface Props {
     token: string;
     scopes?: string[];
     isFlow?: boolean;
-    hash?: string | undefined;
+    runnableVersion?: string | undefined;
     path: string;
     onEmailDomain: (domain: string) => void;
 }

package/package/components/triggers/email/EmailCapture.svelte.d.ts

@@ -34,7 +34,9 @@ declare const EmailCapture: $$__sveltets_2_IsomorphicComponent<Props, {
         redirect: boolean;
         args?: boolean;
     }>;
-    addPreprocessor: CustomEvent<null>;
+    addPreprocessor: CustomEvent<{
+        args: Record<string, any>;
+    } | null>;
     testWithArgs: CustomEvent<Record<string, any>>;
 } & {
     [evt: string]: CustomEvent<any>;