feat: add pipeline flow

web/src/lib/components/display/StepCard.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Ellipsis, GripVertical, X } from "@lucide/svelte";
+	import { GripVertical, X } from "@lucide/svelte";
 	import IconButton from "$lib/components/ui/IconButton.svelte";
 	import { t } from "$lib/i18n/t";
 	import type { Snippet } from "svelte";
@@ -8,63 +8,87 @@
 		index: number;
 		title?: string;
 		type?: string;
+		draggable?: boolean;
 		tools?: Snippet;
 		children?: Snippet;
 		onremove?: () => void;
+		ondragstart?: (e: DragEvent) => void;
+		ondragover?: (e: DragEvent) => void;
+		ondrop?: (e: DragEvent) => void;
+		ondragend?: () => void;
 	}
 
-	let { index, title, type, tools, children, onremove }: Props = $props();
+	let {
+		index,
+		title,
+		type,
+		draggable = false,
+		tools,
+		children,
+		onremove,
+		ondragstart,
+		ondragover,
+		ondrop,
+		ondragend,
+	}: Props = $props();
 </script>
 
-<article class="step-card">
-	<div class="step-index">{index.toString().padStart(2, "0")}</div>
-	<GripVertical size={16} class="drag" aria-hidden="true" />
-	<div class="step-body">
-		<div class="step-heading">
-			<div class="step-heading-text">
-				{#if type}<span class="step-type">{type}</span>{/if}
-				{#if title}<h2 class="step-title">{title}</h2>{/if}
-			</div>
-			<div class="step-tools">
-				{#if tools}{@render tools()}{/if}
+<article
+	class="step-card"
+	{draggable}
+	ondragstart={(e) => ondragstart?.(e)}
+	ondragover={(e) => ondragover?.(e)}
+	ondrop={(e) => ondrop?.(e)}
+	ondragend={() => ondragend?.()}
+>
+	<header class="step-head">
+		<span class="step-index">{index.toString().padStart(2, "0")}</span>
+		<GripVertical size={16} class="drag" aria-hidden="true" />
+		<div class="step-heading-text">
+			{#if type}<span class="step-type">{type}</span>{/if}
+			{#if title}<h2 class="step-title">{title}</h2>{/if}
+		</div>
+		<div class="step-tools">
+			{#if tools}{@render tools()}{/if}
+			{#if onremove}
 				<IconButton
 					icon={X}
 					label={t("chain.removeStepAria")}
 					variant="clear"
 					size="s"
-					onclick={() => onremove?.()}
+					onclick={() => onremove()}
 				/>
-				<Ellipsis size={17} />
-			</div>
+			{/if}
 		</div>
-		{#if children}
+	</header>
+	{#if children}
+		<div class="step-body">
 			{@render children()}
-		{/if}
-	</div>
+		</div>
+	{/if}
 </article>
 
 <style>
 	.step-card {
-		display: grid;
-		grid-template-columns: var(--size-step-index) var(--size-step-grip) 1fr;
-		min-height: var(--size-step-min-height);
 		border: var(--size-border) solid var(--color-border);
 		background: var(--color-panel);
 	}
+	.step-head {
+		display: flex;
+		align-items: center;
+		gap: var(--space-m);
+		padding: var(--space-m) var(--space-xl);
+		border-bottom: var(--size-border) solid var(--color-border);
+	}
 	.step-index {
 		font: var(--font-size-s) var(--font-mono);
 		color: var(--color-main);
-		padding: var(--space-xl) 0 0px var(--space-xl);
 	}
-	.step-body {
-		padding: var(--space-xl) var(--space-xl) var(--space-xl);
-	}
-	.step-heading {
+	.step-heading-text {
+		flex: 1;
 		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: var(--space-xl);
-		border-color: var(--color-border);
+		align-items: baseline;
+		gap: var(--space-m);
 	}
 	.step-type {
 		color: var(--color-text-muted);
@@ -72,7 +96,7 @@
 		letter-spacing: var(--space-text-xl);
 	}
 	.step-title {
-		margin: var(--space-s) 0 var(--space-xl);
+		margin: 0;
 		font: 600 var(--font-size-m) var(--font-mono);
 		color: var(--color-text);
 	}
@@ -81,11 +105,11 @@
 		align-items: center;
 		gap: var(--space-l);
 	}
-	.step-card :global(.drag) {
-		margin-top: var(--space-xl);
-		color: var(--color-border);
+	.step-body {
+		padding: var(--space-l) var(--space-xl) var(--space-xl);
 	}
-	.step-body > :not(.step-heading) {
-		padding: var(--space-l);
+	.step-card :global(.drag) {
+		color: var(--color-border);
+		cursor: grab;
 	}
 </style>