windmill-components 1.60.4 → 1.70.0

package/components/common/tabs/Tabs.svelte

@@ -22,12 +22,14 @@ function updateSelected() {
 }
 </script>
 
-<div
-	class={classNames(
-		'border-b border-gray-200 flex flex-row whitespace-nowrap  scrollbar-hidden',
-		$$props.class
-	)}
->
-	<slot />
+<div class="overflow-x-auto">
+	<div
+		class={classNames(
+			'border-b border-gray-200 flex flex-row whitespace-nowrap  scrollbar-hidden',
+			$$props.class
+		)}
+	>
+		<slot {selected} />
+	</div>
 </div>
 <slot name="content" />

package/components/common/tabs/Tabs.svelte.d.ts

@@ -15,7 +15,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            selected: string;
+        };
         content: {};
     };
 };

package/components/flows/CreateActionsFlow.svelte

@@ -4,14 +4,13 @@ import { Button, ButtonPopup, ButtonPopupItem } from '../common';
 import Drawer from '../common/drawer/Drawer.svelte';
 import DrawerContent from '../common/drawer/DrawerContent.svelte';
 import SimpleEditor from '../SimpleEditor.svelte';
-import { flowStore, initFlow } from './flowStore';
+import { importFlowStore } from './flowStore';
 import { Icon } from 'svelte-awesome';
 let drawer = undefined;
 let pendingJson;
 async function importJson() {
+    $importFlowStore = JSON.parse(pendingJson);
     await goto('/flows/add');
-    Object.assign($flowStore, JSON.parse(pendingJson));
-    initFlow($flowStore);
     drawer?.closeDrawer?.();
 }
 </script>

package/components/flows/content/BranchPredicateEditor.svelte

@@ -19,12 +19,14 @@ $: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousMod
 		editor?.insertAtCursor(detail)
 	}}
 >
-	<SimpleEditor
-		bind:this={editor}
-		lang="javascript"
-		bind:code={branch.expr}
-		class="small-editor"
-		shouldBindKey={false}
-		extraLib={stepPropPicker.extraLib}
-	/>
+	<div class="border border-gray-400">
+		<SimpleEditor
+			bind:this={editor}
+			lang="javascript"
+			bind:code={branch.expr}
+			class="small-editor border "
+			shouldBindKey={false}
+			extraLib={stepPropPicker.extraLib}
+		/>
+	</div>
 </PropPickerWrapper>

package/components/flows/content/FlowInputs.svelte

@@ -23,133 +23,143 @@ let filter = '';
 </script>
 
 <div class="p-4 h-full flex flex-col">
-	{#if !failureModule}
-		<div class="center-center">
-			<div class="max-w-min">
-				<ToggleButtonGroup bind:selected={kind}>
-					<ToggleButton position="left" value="script" size="sm" startIcon={{ icon: faCode }}>
-						Action &nbsp;<Tooltip>
-							An action script is simply a script that is neither a trigger nor an approval script.
-							Those are the majority of the scripts.
-						</Tooltip>
-					</ToggleButton>
-					{#if !shouldDisableTriggerScripts}
-						<ToggleButton position="center" value="trigger" size="sm" startIcon={{ icon: faBolt }}>
-							Trigger &nbsp;<Tooltip>
-								Used as a first step most commonly with a state and a schedule to watch for changes
-								on an external system, compute the diff since last time, set the new state. The
-								diffs are then treated one by one with a for-loop.
+	{#if summary == 'Terminate flow'}
+		<Alert role="info" title="The flow stops here"
+			>This is an identity step with an early stop that has 'true' for expression</Alert
+		>
+	{:else}{#if !failureModule}
+			<div class="center-center">
+				<div class="max-w-min">
+					<ToggleButtonGroup bind:selected={kind}>
+						<ToggleButton position="left" value="script" size="sm" startIcon={{ icon: faCode }}>
+							Action &nbsp;<Tooltip>
+								An action script is simply a script that is neither a trigger nor an approval
+								script. Those are the majority of the scripts.
 							</Tooltip>
 						</ToggleButton>
-					{/if}
-					<ToggleButton position="right" value="approval" size="sm" startIcon={{ icon: faCheck }}>
-						Approval &nbsp;<Tooltip>
-							An approval step will suspend the execution of a flow until it has been approved
-							through the resume endpoints or the approval page by and solely by the recipients of
-							those secret urls. Use `wmill.getResumeUrls()` in Typescript or
-							`wmill.get_resume_urls()` in Python from the wmill client to generate those URLs.
-						</Tooltip>
-					</ToggleButton>
-				</ToggleButtonGroup>
+						{#if !shouldDisableTriggerScripts}
+							<ToggleButton
+								position="center"
+								value="trigger"
+								size="sm"
+								startIcon={{ icon: faBolt }}
+							>
+								Trigger &nbsp;<Tooltip>
+									Used as a first step most commonly with a state and a schedule to watch for
+									changes on an external system, compute the diff since last time, set the new
+									state. The diffs are then treated one by one with a for-loop.
+								</Tooltip>
+							</ToggleButton>
+						{/if}
+						<ToggleButton position="right" value="approval" size="sm" startIcon={{ icon: faCheck }}>
+							Approval &nbsp;<Tooltip>
+								An approval step will suspend the execution of a flow until it has been approved
+								through the resume endpoints or the approval page by and solely by the recipients of
+								those secret urls. Use `wmill.getResumeUrls()` in Typescript or
+								`wmill.get_resume_urls()` in Python from the wmill client to generate those URLs.
+							</Tooltip>
+						</ToggleButton>
+					</ToggleButtonGroup>
+				</div>
 			</div>
-		</div>
-	{/if}
-	{#if kind == 'trigger'}
-		<div class="mt-2" />
-		<Alert title="Trigger script automatic schedule" role="info">
-			A schedule will be automatically attached to this flow to run every 15 minutes. Adjust
-			frequency in 'Settings -> Schedule'</Alert
-		>
-	{/if}
-	<h3 class="pb-2 pt-4">
-		Inline new <span class="text-blue-500">{kind == 'script' ? 'action' : kind}</span> script
-		<Tooltip>
-			Embed a script directly inside a flow instead of saving the script into your workspace for
-			reuse. You can always save an inline script to your workspace later.
-		</Tooltip>
-	</h3>
-	<div class="flex flex-row">
-		<div class="flex flex-row flex-wrap gap-2">
-			<FlowScriptPicker
-				label="Typescript"
-				lang={Script.language.DENO}
-				on:click={() => {
-					dispatch('new', {
-						language: RawScript.language.DENO,
-						kind,
-						subkind: 'flow'
-					})
-				}}
-			/>
-
-			<FlowScriptPicker
-				label="Python"
-				lang={Script.language.PYTHON3}
-				on:click={() => {
-					dispatch('new', {
-						language: RawScript.language.PYTHON3,
-						kind,
-						subkind: 'flow'
-					})
-				}}
-			/>
-
-			{#if kind != 'approval'}
+		{/if}
+		{#if kind == 'trigger'}
+			<div class="mt-2" />
+			<Alert title="Trigger script automatic schedule" role="info">
+				A schedule will be automatically attached to this flow to run every 15 minutes. Adjust
+				frequency in 'Settings -> Schedule'</Alert
+			>
+		{/if}
+		<h3 class="pb-2 pt-4">
+			Inline new <span class="text-blue-500">{kind == 'script' ? 'action' : kind}</span> script
+			<Tooltip>
+				Embed a script directly inside a flow instead of saving the script into your workspace for
+				reuse. You can always save an inline script to your workspace later.
+			</Tooltip>
+		</h3>
+		<div class="flex flex-row">
+			<div class="flex flex-row flex-wrap gap-2">
 				<FlowScriptPicker
-					label="Go"
-					lang={Script.language.GO}
+					label="Typescript"
+					lang={Script.language.DENO}
 					on:click={() => {
 						dispatch('new', {
-							language: RawScript.language.GO,
+							language: RawScript.language.DENO,
 							kind,
 							subkind: 'flow'
 						})
 					}}
 				/>
-			{/if}
 
-			{#if kind == 'script'}
 				<FlowScriptPicker
-					label="Bash"
-					lang={Script.language.BASH}
+					label="Python"
+					lang={Script.language.PYTHON3}
 					on:click={() => {
 						dispatch('new', {
-							language: RawScript.language.BASH,
+							language: RawScript.language.PYTHON3,
 							kind,
 							subkind: 'flow'
 						})
 					}}
 				/>
 
-				{#if !failureModule}
+				{#if kind != 'approval'}
 					<FlowScriptPicker
-						label={`PostgreSQL`}
-						lang="pgsql"
-						on:click={() =>
-							dispatch('new', { language: RawScript.language.DENO, kind, subkind: 'pgsql' })}
+						label="Go"
+						lang={Script.language.GO}
+						on:click={() => {
+							dispatch('new', {
+								language: RawScript.language.GO,
+								kind,
+								subkind: 'flow'
+							})
+						}}
 					/>
+				{/if}
 
+				{#if kind == 'script'}
 					<FlowScriptPicker
-						label={`MySQL`}
-						lang="mysql"
-						on:click={() =>
-							dispatch('new', { language: RawScript.language.DENO, kind, subkind: 'mysql' })}
+						label="Bash"
+						lang={Script.language.BASH}
+						on:click={() => {
+							dispatch('new', {
+								language: RawScript.language.BASH,
+								kind,
+								subkind: 'flow'
+							})
+						}}
 					/>
+
+					{#if !failureModule}
+						<FlowScriptPicker
+							label={`PostgreSQL`}
+							lang="pgsql"
+							on:click={() =>
+								dispatch('new', { language: RawScript.language.DENO, kind, subkind: 'pgsql' })}
+						/>
+
+						<!-- <FlowScriptPicker
+							label={`MySQL`}
+							lang="mysql"
+							on:click={() =>
+								dispatch('new', { language: RawScript.language.DENO, kind, subkind: 'mysql' })}
+						/> -->
+					{/if}
 				{/if}
-			{/if}
+			</div>
 		</div>
-	</div>
 
-	<h3 class="mb-2 mt-6"
-		>Use pre-made <span class="text-blue-500">{kind == 'script' ? 'action' : kind}</span> script</h3
-	>
-	{#if pick_existing == 'hub'}
-		<PickHubScript bind:filter {kind} on:pick>
-			<ToggleHubWorkspace bind:selected={pick_existing} />
-		</PickHubScript>
-	{:else}
-		<WorkspaceScriptPicker displayLock bind:filter {kind} on:pick>
-			<ToggleHubWorkspace bind:selected={pick_existing} />
-		</WorkspaceScriptPicker>
+		<h3 class="mb-2 mt-6"
+			>Use pre-made <span class="text-blue-500">{kind == 'script' ? 'action' : kind}</span> script</h3
+		>
+		{#if pick_existing == 'hub'}
+			<PickHubScript bind:filter {kind} on:pick>
+				<ToggleHubWorkspace bind:selected={pick_existing} />
+			</PickHubScript>
+		{:else}
+			<WorkspaceScriptPicker displayLock bind:filter {kind} on:pick>
+				<ToggleHubWorkspace bind:selected={pick_existing} />
+			</WorkspaceScriptPicker>
+		{/if}
 	{/if}
 </div>

package/components/flows/content/FlowLoop.svelte

@@ -34,7 +34,7 @@ $: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousMod
 						Iterator expression
 						<Tooltip>
 							List to iterate over. For more information see the
-							<a href="https://docs.windmill.dev/docs/getting_started/flows#for-loops">docs.</a>
+							<a href="https://docs.windmill.dev/docs/getting_started/flows_quickstart">docs.</a>
 						</Tooltip>
 					</div>
 					{#if mod.value.iterator.type == 'javascript'}

package/components/flows/content/FlowModuleComponent.svelte

@@ -20,6 +20,7 @@ import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte';
 import FlowModuleSuspend from './FlowModuleSuspend.svelte';
 import FlowRetries from './FlowRetries.svelte';
 import { getStepPropPicker } from '../previousResults';
+import { deepEqual } from 'fast-equals';
 import Button from '../../common/button/Button.svelte';
 import Alert from '../../common/alert/Alert.svelte';
 import FlowModuleSleep from './FlowModuleSleep.svelte';
@@ -65,11 +66,11 @@ async function reload(flowModule) {
         const { input_transforms, schema } = await loadSchemaFromModule(flowModule);
         validCode = true;
         setTimeout(() => {
-            if (JSON.stringify(value.input_transforms) !== JSON.stringify(input_transforms)) {
+            if (!deepEqual(value.input_transforms, input_transforms)) {
                 inputTransforms = input_transforms;
             }
         });
-        if (JSON.stringify(schema) !== JSON.stringify($flowStateStore[flowModule.id]?.schema)) {
+        if (!deepEqual(schema, $flowStateStore[flowModule.id]?.schema)) {
             if (!$flowStateStore[flowModule.id]) {
                 $flowStateStore[flowModule.id] = { schema };
             }

package/components/flows/content/FlowRetries.svelte

@@ -29,9 +29,8 @@ $: isExponentialRetryEnabled = Boolean(flowModule.retry?.exponential);
 	<h2 class="mt-2"
 		>Retries <Tooltip>
 			If defined, upon error this step will be retried with a delay and a maximum number of attempts
-			as defined below. If none of the retries succeed, the step job is a failure and the error will
-			propagate up in the case of a branch, and the error handler will be called ultimately if not
-			handled prior.</Tooltip
+			as defined below. If both static and exponential delay is defined, the static delay attempts
+			are tried before the exponential ones.</Tooltip
 		></h2
 	>
 
@@ -70,22 +69,25 @@ $: isExponentialRetryEnabled = Boolean(flowModule.retry?.exponential);
 			}
 		}}
 		options={{
-			right: 'Exponential retry enabled'
+			right: 'Exponential backoff enabled'
 		}}
 	/>
 	{#if flowModule.retry?.exponential}
 		<span class="text-xs font-bold">Attempts</span>
 		<input bind:value={flowModule.retry.exponential.attempts} type="number" />
 		<span class="text-xs font-bold">Mulitplier</span>
+		<span class="text-xs text-gray-500">additional delay = multiplier * base ^ (# attempts)</span>
 		<input bind:value={flowModule.retry.exponential.multiplier} type="number" />
-		<span class="text-xs font-bold">Initial delay (seconds)</span>
+		<span class="text-xs font-bold">Base</span>
 		<input bind:value={flowModule.retry.exponential.seconds} type="number" />
 	{:else}
 		<span class="text-xs font-bold">Attempts</span>
 		<input type="number" disabled />
 		<span class="text-xs font-bold">Mulitplier</span>
+		<span class="text-xs text-gray-500">additional delay = multiplier * seconds ^ (# attempts)</span
+		>
 		<input type="number" disabled />
-		<span class="text-xs font-bold">Initial delay (seconds)</span>
+		<span class="text-xs font-bold">Base</span>
 		<input type="number" disabled />
 	{/if}
 </div>

package/components/flows/content/FlowSettings.svelte

@@ -11,9 +11,16 @@ import { Alert } from '../../common';
 import { FlowGraph } from '../../graph';
 import { getContext } from 'svelte';
 import autosize from 'svelte-autosize';
+import Slider from '../../Slider.svelte';
+import { page } from '$app/stores';
+import { workspaceStore } from '../../../stores';
+import { copyToClipboard } from '../../../utils';
+import { Icon } from 'svelte-awesome';
+import { faClipboard } from '@fortawesome/free-solid-svg-icons';
 const { selectedId } = getContext('FlowEditorContext');
 export let initialPath;
 let topHeight = 0;
+$: url = `${$page.url.hostname}/api/w/${$workspaceStore}/jobs/run/f/${$flowStore?.path}`;
 </script>
 
 <div class="h-full overflow-hidden">
@@ -26,34 +33,73 @@ let topHeight = 0;
 				<Tab value="settings-graph">Graph</Tab>
 
 				<svelte:fragment slot="content">
-					<TabContent value="settings-metadata" class="p-4">
-						<Path bind:path={$flowStore.path} {initialPath} namePlaceholder="my_flow" kind="flow" />
+					<TabContent value="settings-metadata" class="p-4 h-full">
+						<div class="overflow-auto h-full">
+							<Path bind:path={$flowStore.path} {initialPath} namePlaceholder="flow" kind="flow" />
 
-						<label class="block my-4">
-							<span class="text-gray-700 text-sm">Summary <Required required={false} /></span>
-							<input
-								type="text"
-								bind:value={$flowStore.summary}
-								placeholder="A short summary of the flow displayed when the flow is listed"
-								id="flow-summary"
-							/>
-						</label>
-
-						<label class="block my-4" for="inp">
-							<span class="text-gray-700 text-sm">
-								Description
-								<Required required={false} />
-								<textarea
-									use:autosize
+							<label class="block my-4">
+								<span class="text-gray-700 text-sm">Summary <Required required={false} /></span>
+								<input
 									type="text"
-									class="text-sm"
-									id="inp"
-									bind:value={$flowStore.description}
-									placeholder="A description to help users understand what this flow does and how to use it."
-									rows="3"
+									bind:value={$flowStore.summary}
+									placeholder="Short summary to be displayed when listed"
+									id="flow-summary"
 								/>
-							</span>
-						</label>
+							</label>
+
+							<label class="block my-4" for="inp">
+								<span class="text-gray-700 text-sm">
+									Description
+									<Required required={false} />
+									<textarea
+										use:autosize
+										type="text"
+										class="text-sm"
+										id="inp"
+										bind:value={$flowStore.description}
+										placeholder="What this flow does and how to use it."
+										rows="3"
+									/>
+								</span>
+							</label>
+							<Slider text="How to trigger from external events?">
+								<div class="text-sm text-gray-600 border p-4">
+									There are 2 ways to trigger a flow based on external events:
+									<ul class="pt-4">
+										<li
+											>1. Send a webhook after each event: <a
+												on:click={(e) => {
+													e.preventDefault()
+													copyToClipboard(url)
+												}}
+												href={$page.url.protocol + '//' + url}
+												class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
+											>
+												{url}
+												<span class="text-gray-700 ml-2">
+													<Icon data={faClipboard} />
+												</span>
+											</a>
+										</li>
+										<li class="mt-2">
+											<div class="flex flex-row gap-2">
+												2. Use a trigger script and schedule this flow to run as frequently as
+												needed and compare a state persisted in Windmill to the state of the
+												external system. If a difference is detected, then the rest of the flow is
+												triggered. Oftentimes, the second step of a flow is a for-loop that will
+												iterate over every elements. When using a trigger, a default schedule will
+												be created.
+												<img
+													class="shadow-lg border rounded"
+													alt="static button"
+													src="/trigger_button.png"
+												/>
+											</div>
+										</li></ul
+									>
+								</div>
+							</Slider>
+						</div>
 					</TabContent>
 					<TabContent value="settings-schedule" class="p-4">
 						<Alert type="info" title="Primary Schedule">
@@ -71,7 +117,7 @@ let topHeight = 0;
 							them to the next step. <br /><br />Beware that the `./shared` folder is not preserved
 							across suspends and sleeps.
 						</Alert>
-						<span class="my-2 text-sm font-bold">Shared Directoryr</span>
+						<span class="my-2 text-sm font-bold">Shared Directory</span>
 						<Toggle
 							bind:checked={$flowStore.value.same_worker}
 							options={{

package/components/flows/flowState.d.ts

@@ -12,4 +12,5 @@ export type FlowState = Record<string, FlowModuleState>;
  * We also hold the data of the results of a test job, ran by the user.
  */
 export declare const flowStateStore: import("svelte/store").Writable<FlowState>;
+export declare const testStepStore: import("svelte/store").Writable<Record<string, any>>;
 export declare function initFlowState(flow: Flow): Promise<void>;

package/components/flows/flowState.js

@@ -7,6 +7,7 @@ import { emptyFlowModuleState } from './utils';
  * We also hold the data of the results of a test job, ran by the user.
  */
 export const flowStateStore = writable({});
+export const testStepStore = writable({});
 export async function initFlowState(flow) {
     const modulesState = {};
     await mapFlowModules(flow.value.modules, modulesState);

package/components/flows/flowStateUtils.js

@@ -10,7 +10,9 @@ import { Mutex } from 'async-mutex';
 export async function loadFlowModuleState(flowModule) {
     try {
         const { input_transforms, schema } = await loadSchemaFromModule(flowModule);
-        if (flowModule.value.type == 'script' || flowModule.value.type == 'rawscript' || flowModule.value.type == 'flow') {
+        if (flowModule.value.type == 'script' ||
+            flowModule.value.type == 'rawscript' ||
+            flowModule.value.type == 'flow') {
             flowModule.value.input_transforms = input_transforms;
         }
         return { schema, previewResult: NEVER_TESTED_THIS_FAR };
@@ -115,7 +117,7 @@ export async function createFlow(id) {
         value: {
             type: 'flow',
             path: '',
-            input_transforms: {},
+            input_transforms: {}
         },
         summary: ''
     };

package/components/flows/flowStore.d.ts

@@ -1,5 +1,6 @@
 import type { Flow, FlowModule } from '../../gen';
 export type FlowMode = 'push' | 'pull';
+export declare const importFlowStore: import("svelte/store").Writable<Flow | undefined>;
 export declare const flowStore: import("svelte/store").Writable<Flow>;
 export declare function dfs<T>(modules: FlowModule[], f: (x: FlowModule) => T): T[];
 export declare function initFlow(flow: Flow): Promise<void>;

package/components/flows/flowStore.js

@@ -2,6 +2,7 @@ import { sendUserToast } from '../../utils';
 import { get, writable, derived } from 'svelte/store';
 import { flowStateStore, initFlowState } from './flowState';
 import { numberToChars } from './utils';
+export const importFlowStore = writable(undefined);
 export const flowStore = writable({
     summary: '',
     value: { modules: [] },

package/components/flows/map/FlowBranchAllMap.svelte

@@ -76,7 +76,7 @@ function removeBranch(index) {
 					</div>
 
 					<div>
-						<FlowModuleSchemaMap bind:modules={branch.modules} />
+						<FlowModuleSchemaMap parentType="branchall" bind:modules={branch.modules} />
 					</div>
 				</div>
 			{/each}

package/components/flows/map/FlowBranchOneMap.svelte

@@ -60,7 +60,7 @@ function removeBranch(index) {
 				</span>
 			</div>
 			<div>
-				<FlowModuleSchemaMap bind:modules={module.value.default} />
+				<FlowModuleSchemaMap parentType="branchone" bind:modules={module.value.default} />
 			</div>
 
 			{#each module.value.branches ?? [] as branch, branchIndex (branchIndex)}
@@ -99,7 +99,7 @@ function removeBranch(index) {
 					</div>
 
 					<div>
-						<FlowModuleSchemaMap bind:modules={branch.modules} />
+						<FlowModuleSchemaMap parentType="branchone" bind:modules={branch.modules} />
 					</div>
 				</div>
 			{/each}

package/components/flows/map/FlowModuleSchemaItem.svelte

@@ -40,7 +40,7 @@ const dispatch = createEventDispatcher();
 			{#if retry}
 				<Popover notClickable>
 					<div
-						transition:fade={{duration: 200}}
+						transition:fade={{ duration: 200 }}
 						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
 					>
 						<Repeat size={14} />
@@ -51,7 +51,7 @@ const dispatch = createEventDispatcher();
 			{#if earlyStop}
 				<Popover notClickable>
 					<div
-						transition:fade={{duration: 200}}
+						transition:fade={{ duration: 200 }}
 						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
 					>
 						<Square size={14} />
@@ -62,7 +62,7 @@ const dispatch = createEventDispatcher();
 			{#if suspend}
 				<Popover notClickable>
 					<div
-						transition:fade={{duration: 200}}
+						transition:fade={{ duration: 200 }}
 						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
 					>
 						<PhoneIncoming size={14} />
@@ -73,7 +73,7 @@ const dispatch = createEventDispatcher();
 			{#if sleep}
 				<Popover notClickable>
 					<div
-						transition:fade={{duration: 200}}
+						transition:fade={{ duration: 200 }}
 						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
 					>
 						<Bed size={14} />
@@ -100,7 +100,7 @@ const dispatch = createEventDispatcher();
 						class="absolute -top-2 right-0 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 
 						hover:border-red-700 {selected ? '' : '!hidden'}"
-						on:click={(event) => dispatch('delete', event)}
+						on:click|preventDefault|stopPropagation={(event) => dispatch('delete', event)}
 					>
 						<X size={12} strokeWidth={2} />
 					</button>