@heyramzi/tasks 0.0.0-stage → 0.3.0

package/src/demo.svelte

@@ -0,0 +1,299 @@
+<script lang="ts">
+	import KanbanBoard from "./kanban-board.svelte";
+	import TaskList from "./task-list.svelte";
+	import TaskGantt from "./task-gantt.svelte";
+	import TaskViewSwitch from "./task-view-switch.svelte";
+	import StatusBadge from "./status-badge.svelte";
+	import StatusDot from "./status-dot.svelte";
+	import BoardIcon from "./icons/board-icon.svelte";
+	import ListIcon from "./icons/list-icon.svelte";
+	import GanttIcon from "./icons/gantt-icon.svelte";
+	import { defineStatuses } from "./define-statuses.js";
+	import { addDays, dayNumber, todayIso } from "./dates.js";
+	import { salesStatuses } from "./presets/sales.js";
+	import type { KanbanMove } from "./kanban-types.js";
+	import type { GanttChange } from "./task-types.js";
+
+	type Priority = "low" | "medium" | "high";
+
+	type Task = {
+		id: string;
+		status: string;
+		title: string;
+		assignee: string;
+		priority: Priority;
+		boardOrder: string;
+		start: string;
+		end: string;
+		dependsOn?: string[];
+	};
+
+	const statuses = defineStatuses({
+		todo: { label: "To do", tone: "neutral", variant: "open" },
+		doing: { label: "In progress", tone: "info", variant: "progress", progress: 0.5 },
+		review: { label: "Review", tone: "warning", variant: "progress", progress: 0.75 },
+		done: { label: "Done", tone: "success", variant: "completed" },
+	});
+
+	const columns = [
+		{ id: "todo", label: "To do", hue: "var(--color-muted-foreground)" },
+		{ id: "doing", label: "In progress", hue: "var(--color-info)" },
+		{ id: "review", label: "Review", hue: "var(--color-warning)" },
+		{ id: "done", label: "Done", hue: "var(--color-success)" },
+	];
+
+	const progressByStatus: Record<string, number> = { todo: 0, doing: 0.45, review: 0.8, done: 1 };
+
+	// Dates hang off today, so the timeline always opens on live work.
+	const today = todayIso();
+	const on = (days: number) => addDays(today, days);
+
+	let tasks = $state<Task[]>([
+		{ id: "t1", status: "done", title: "Set up analytics", assignee: "Bo", priority: "low", boardOrder: "a0", start: on(-12), end: on(-8) },
+		{ id: "t2", status: "done", title: "Interview five customers", assignee: "Cleo", priority: "medium", boardOrder: "a1", start: on(-10), end: on(-4) },
+		{ id: "t3", status: "review", title: "Write the pricing page", assignee: "Ada", priority: "high", boardOrder: "a0", start: on(-5), end: on(1), dependsOn: ["t2"] },
+		{ id: "t4", status: "doing", title: "Build the onboarding flow", assignee: "Dana", priority: "high", boardOrder: "a0", start: on(-3), end: on(5), dependsOn: ["t1"] },
+		{ id: "t5", status: "doing", title: "Draft the launch email", assignee: "Bo", priority: "medium", boardOrder: "a1", start: on(0), end: on(3), dependsOn: ["t3"] },
+		{ id: "t6", status: "todo", title: "Record the demo video", assignee: "Cleo", priority: "medium", boardOrder: "a0", start: on(4), end: on(8), dependsOn: ["t4"] },
+		{ id: "t7", status: "todo", title: "Pick a shipping date", assignee: "Ada", priority: "low", boardOrder: "a1", start: on(6), end: on(6) },
+		{ id: "t8", status: "todo", title: "Launch on Product Hunt", assignee: "Dana", priority: "high", boardOrder: "a2", start: on(10), end: on(11), dependsOn: ["t5", "t6"] },
+	]);
+
+	const views = [
+		{ id: "board", label: "Board", icon: BoardIcon },
+		{ id: "list", label: "List", icon: ListIcon },
+		{ id: "gantt", label: "Gantt", icon: GanttIcon },
+	];
+
+	let view = $state("board");
+	let sortKey = $state("manual");
+	let scale = $state<"days" | "weeks">("days");
+
+	const sortKeys = [
+		{ id: "title", label: "Title", compare: (a: Task, b: Task) => a.title.localeCompare(b.title) },
+		{ id: "assignee", label: "Assignee", compare: (a: Task, b: Task) => a.assignee.localeCompare(b.assignee) },
+		{ id: "due", label: "Due date", compare: (a: Task, b: Task) => a.end.localeCompare(b.end) },
+	];
+
+	const priorityClass: Record<Priority, string> = {
+		low: "bg-muted text-muted-foreground",
+		medium: "bg-warning/15 text-warning-700 dark:text-warning-400",
+		high: "bg-destructive/15 text-destructive",
+	};
+
+	const people: Record<string, string> = {
+		Ada: "oklch(0.72 0.12 280)",
+		Bo: "oklch(0.74 0.12 160)",
+		Cleo: "oklch(0.76 0.12 60)",
+		Dana: "oklch(0.72 0.13 20)",
+	};
+
+	const dueFormat = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", timeZone: "UTC" });
+
+	function due(task: Task): { label: string; late: boolean } {
+		const late = task.status !== "done" && dayNumber(task.end) < dayNumber(today);
+		return { label: dueFormat.format(new Date(`${task.end}T00:00:00Z`)), late };
+	}
+
+	function onMove(id: string, move: KanbanMove) {
+		tasks = tasks.map((task) =>
+			task.id === id
+				? { ...task, status: move.columnId, boardOrder: move.boardOrder ?? task.boardOrder }
+				: task,
+		);
+	}
+
+	function onChange(id: string, change: GanttChange) {
+		tasks = tasks.map((task) => (task.id === id ? { ...task, ...change } : task));
+	}
+
+	const listGrid = "grid grid-cols-[minmax(0,1fr)_7rem_5.5rem_4.5rem] items-center gap-3 max-sm:grid-cols-[minmax(0,1fr)_4.5rem]";
+</script>
+
+{#snippet avatar(name: string)}
+	<span
+		class="grid size-5 shrink-0 place-items-center rounded-full text-[10px] font-semibold text-white"
+		style:background={people[name] ?? "var(--color-muted-foreground)"}
+		aria-hidden="true"
+	>
+		{name[0]}
+	</span>
+{/snippet}
+
+<div class="flex flex-col gap-6 rounded-xl border border-border bg-background p-4">
+	<div class="flex h-[600px] flex-col gap-3">
+		<div class="flex flex-wrap items-center gap-2">
+			<TaskViewSwitch {views} bind:value={view} label="Task view" />
+			<div class="ml-auto flex items-center gap-2">
+				{#if view === "gantt"}
+					<TaskViewSwitch
+						views={[
+							{ id: "days", label: "Days" },
+							{ id: "weeks", label: "Weeks" },
+						]}
+						bind:value={scale}
+						label="Timeline scale"
+					/>
+				{:else}
+					<label for="tasks-sort" class="text-xs font-medium text-muted-foreground">Sort</label>
+					<select
+						id="tasks-sort"
+						bind:value={sortKey}
+						class="h-8 rounded-md border border-border bg-background px-2 text-xs text-foreground"
+					>
+						<option value="manual">Manual</option>
+						{#each sortKeys as key (key.id)}
+							<option value={key.id}>{key.label}</option>
+						{/each}
+					</select>
+				{/if}
+			</div>
+		</div>
+
+		{#key view}
+			<div class="tasks-view flex min-h-0 flex-1 flex-col">
+				{#if view === "board"}
+					<KanbanBoard
+						{columns}
+						items={tasks}
+						getId={(task) => task.id}
+						getColumn={(task) => task.status}
+						{sortKey}
+						{sortKeys}
+						boardOrder={(task) => task.boardOrder}
+						{onMove}
+					>
+						{#snippet renderCard(task)}
+							{@const d = due(task)}
+							<article class="rounded-xl border border-border bg-card p-2.5 text-card-foreground shadow-sm">
+								<p class="text-sm leading-snug">{task.title}</p>
+								<div class="mt-2.5 flex items-center gap-2 text-xs">
+									{@render avatar(task.assignee)}
+									<span class={d.late ? "font-medium text-destructive" : "text-muted-foreground"}>{d.label}</span>
+									<span class="ml-auto rounded-full px-1.5 py-0.5 font-medium capitalize {priorityClass[task.priority]}">
+										{task.priority}
+									</span>
+								</div>
+							</article>
+						{/snippet}
+					</KanbanBoard>
+				{:else if view === "list"}
+					<TaskList
+						groups={columns}
+						items={tasks}
+						getId={(task) => task.id}
+						getGroup={(task) => task.status}
+						{sortKey}
+						{sortKeys}
+						boardOrder={(task) => task.boardOrder}
+						{onMove}
+					>
+						{#snippet head()}
+							<div class="{listGrid} w-full px-3.5">
+								<span class="pl-6">Task</span>
+								<span class="max-sm:hidden">Assignee</span>
+								<span class="max-sm:hidden">Priority</span>
+								<span class="text-right">Due</span>
+							</div>
+						{/snippet}
+						{#snippet renderRow(task)}
+							{@const d = due(task)}
+							<div class="{listGrid} h-10 px-2 text-sm">
+								<span class="flex min-w-0 items-center gap-2.5">
+									{#key task.status}
+										<StatusDot statuses={statuses} status={task.status} />
+									{/key}
+									<span class="truncate" class:text-muted-foreground={task.status === "done"} class:line-through={task.status === "done"}>
+										{task.title}
+									</span>
+								</span>
+								<span class="flex min-w-0 items-center gap-2 text-muted-foreground max-sm:hidden">
+									{@render avatar(task.assignee)}
+									<span class="truncate">{task.assignee}</span>
+								</span>
+								<span class="max-sm:hidden">
+									<span class="rounded-full px-1.5 py-0.5 text-xs font-medium capitalize {priorityClass[task.priority]}">
+										{task.priority}
+									</span>
+								</span>
+								<span class="text-right text-xs tabular-nums {d.late ? 'font-medium text-destructive' : 'text-muted-foreground'}">
+									{d.label}
+								</span>
+							</div>
+						{/snippet}
+					</TaskList>
+				{:else}
+					<TaskGantt
+						items={tasks}
+						getId={(task) => task.id}
+						getTitle={(task) => task.title}
+						getStart={(task) => task.start}
+						getEnd={(task) => task.end}
+						getProgress={(task) => progressByStatus[task.status]}
+						getDependsOn={(task) => task.dependsOn}
+						groups={columns}
+						getGroup={(task) => task.status}
+						{today}
+						dayWidth={scale === "days" ? 32 : 14}
+						labelWidth={220}
+						{onChange}
+					>
+						{#snippet renderLabel(task)}
+							<StatusDot statuses={statuses} status={task.status} />
+							<span class="min-w-0 flex-1 truncate">{task.title}</span>
+							{@render avatar(task.assignee)}
+						{/snippet}
+					</TaskGantt>
+				{/if}
+			</div>
+		{/key}
+
+		<p class="text-xs text-muted-foreground/70">
+			{#if view === "board"}
+				Drag a card between columns, or focus one and press Alt plus Left or Right.
+			{:else if view === "list"}
+				Drag a row between groups, or focus one and press Alt plus Up or Down.
+			{:else}
+				Drag a bar to move it, or its edges to resize. Arrow keys nudge a focused bar a day.
+			{/if}
+		</p>
+	</div>
+
+	<section class="flex flex-col gap-2 border-t border-border pt-4">
+		<h3 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Status badges</h3>
+		<div class="flex flex-wrap items-center gap-2">
+			{#each salesStatuses.ids as id (id)}
+				<StatusBadge statuses={salesStatuses} status={id} />
+			{/each}
+		</div>
+		<ul class="mt-1 flex flex-col gap-1.5">
+			{#each salesStatuses.ids.slice(0, 3) as id (id)}
+				<li class="flex items-center gap-3 text-sm">
+					<StatusDot statuses={salesStatuses} status={id} />
+					<span class="text-foreground">{salesStatuses.label(id)}</span>
+				</li>
+			{/each}
+		</ul>
+	</section>
+</div>
+
+<style>
+	/* Switching views: the new one rises in with a touch of blur, the old one is gone at once. */
+	.tasks-view {
+		animation: tasks-view-in var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
+	}
+
+	@keyframes tasks-view-in {
+		from {
+			opacity: 0;
+			transform: translateY(var(--distance-base, 8px));
+			filter: blur(var(--blur-small, 2px));
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.tasks-view {
+			animation: none;
+		}
+	}
+</style>

package/src/icons/board-icon.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	let { size = 16, class: className }: { size?: number; class?: string } = $props();
+</script>
+
+<svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" class={className}>
+	<rect x="2" y="2.5" width="3.5" height="11" rx="1.25" stroke="currentColor" stroke-width="1.5"></rect>
+	<rect x="7" y="2.5" width="3.5" height="7" rx="1.25" stroke="currentColor" stroke-width="1.5"></rect>
+	<rect x="12" y="2.5" width="2" height="9" rx="1" stroke="currentColor" stroke-width="1.5"></rect>
+</svg>

package/src/icons/chevron-right.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/icons/gantt-icon.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	let { size = 16, class: className }: { size?: number; class?: string } = $props();
+</script>
+
+<svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" class={className}>
+	<g stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+		<line x1="2" y1="4" x2="8" y2="4"></line>
+		<line x1="5" y1="8" x2="12" y2="8"></line>
+		<line x1="9" y1="12" x2="14" y2="12"></line>
+	</g>
+</svg>

package/src/icons/list-icon.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	let { size = 16, class: className }: { size?: number; class?: string } = $props();
+</script>
+
+<svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" class={className}>
+	<g stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+		<line x1="6" y1="4" x2="14" y2="4"></line>
+		<line x1="6" y1="8" x2="14" y2="8"></line>
+		<line x1="6" y1="12" x2="14" y2="12"></line>
+	</g>
+	<g fill="currentColor">
+		<circle cx="2.75" cy="4" r="1"></circle>
+		<circle cx="2.75" cy="8" r="1"></circle>
+		<circle cx="2.75" cy="12" r="1"></circle>
+	</g>
+</svg>

package/src/icons/spinner.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3" opacity="0.25"/><path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg>

package/src/index.ts

@@ -0,0 +1,41 @@
+export { default as KanbanBoard } from "./kanban-board.svelte";
+export { default as KanbanColumn } from "./kanban-column.svelte";
+export { liftDragImage } from "./kanban-drag.js";
+export { createKanbanDnd } from "./use-kanban-dnd.svelte.js";
+export { boardOrderAt, keyBetween } from "./board-order.js";
+export { reorderByIds } from "./reorder.js";
+export type { KanbanDndConfig, KanbanDragOver } from "./use-kanban-dnd.svelte.js";
+export type {
+	KanbanCardContext,
+	KanbanCardSnippet,
+	KanbanColumn as KanbanColumnDef,
+	KanbanColumnContext,
+	KanbanMove,
+	KanbanSortKey,
+} from "./kanban-types.js";
+export { default as StatusBadge } from "./status-badge.svelte";
+export { default as StatusDot } from "./status-dot.svelte";
+export { default as StatusIcon } from "./status-icon.svelte";
+export { defineStatuses } from "./define-statuses.js";
+export { TONE_CLASS, TONE_COLOR, TONE_ICON, TONE_TEXT, insetWellClass } from "./tone.js";
+export type {
+	StatusDef,
+	StatusDotVariant,
+	StatusId,
+	StatusMap,
+	Statuses,
+	Tone,
+} from "./status-types.js";
+export { default as TaskList } from "./task-list.svelte";
+export { default as TaskGantt } from "./task-gantt.svelte";
+export { default as TaskViewSwitch } from "./task-view-switch.svelte";
+export { default as BoardIcon } from "./icons/board-icon.svelte";
+export { default as ListIcon } from "./icons/list-icon.svelte";
+export { default as GanttIcon } from "./icons/gantt-icon.svelte";
+export { addDays, dayNumber, isoFromDay, todayIso } from "./dates.js";
+export type {
+	GanttChange,
+	TaskListGroupContext,
+	TaskListRowContext,
+	TaskView,
+} from "./task-types.js";

package/src/kanban-board.svelte

@@ -0,0 +1,243 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from "svelte";
+	import KanbanColumn from "./kanban-column.svelte";
+	import { liftDragImage } from "./kanban-drag.js";
+	import { boardOrderAt } from "./board-order.js";
+	import { cn } from "./lib/cn.js";
+	import { createKanbanDnd } from "./use-kanban-dnd.svelte.js";
+	import type {
+		KanbanCardContext,
+		KanbanColumn as KanbanColumnDef,
+		KanbanColumnContext,
+		KanbanMove,
+		KanbanSortKey,
+	} from "./kanban-types.js";
+
+	type Props<T> = {
+		columns: KanbanColumnDef[];
+		items: T[];
+		/** The stable id of a card. Used for keys, drag payloads and move events. */
+		getId: (item: T) => string;
+		/** The column id a card belongs to. */
+		getColumn: (item: T) => string;
+		/** Called on drop with what to persist. Awaited, so the caller can save. */
+		onMove: (id: string, move: KanbanMove) => void | Promise<void>;
+		renderCard: Snippet<[T, KanbanCardContext]>;
+		/** Reads a card's manual order key. Required for `sortKey="manual"` ordering. */
+		boardOrder?: (item: T) => string | null | undefined;
+		/** Extra named sorts, e.g. by title or owner. `manual` is always available. */
+		sortKeys?: KanbanSortKey<T>[];
+		/** The active sort. `"manual"` (default) orders by `boardOrder`. */
+		sortKey?: string;
+		/** Optional column header. Defaults to the label plus a count. */
+		columnHeader?: Snippet<[KanbanColumnDef, KanbanColumnContext]>;
+		emptyLabel?: string;
+		/** A capped column is one whose tail is hidden, so its empty space drops on top. */
+		dropAtTop?: (columnId: string) => boolean;
+		/**
+		 * Override per-column drop targets. Defaults to each column's `droppable`
+		 * flag (true when unset). A column it returns false for never calls
+		 * preventDefault, so it is not a drop target.
+		 */
+		isDroppable?: (columnId: string) => boolean;
+		class?: string;
+	};
+
+	let {
+		columns,
+		items,
+		getId,
+		getColumn,
+		onMove,
+		renderCard,
+		boardOrder,
+		sortKeys = [],
+		sortKey = "manual",
+		columnHeader,
+		emptyLabel = "Nothing here yet",
+		dropAtTop,
+		isDroppable,
+		class: className,
+	}: Props<T> = $props();
+
+	let slotHeight = $state(0);
+
+	function compare(a: T, b: T): number {
+		if (sortKey === "manual") {
+			if (!boardOrder) return 0;
+			const ao = boardOrder(a);
+			const bo = boardOrder(b);
+			if (ao == null && bo == null) return 0;
+			if (ao == null) return 1;
+			if (bo == null) return -1;
+			return ao < bo ? -1 : ao > bo ? 1 : 0;
+		}
+		const key = sortKeys.find((entry) => entry.id === sortKey);
+		return key ? key.compare(a, b) : 0;
+	}
+
+	function sortedByColumn(columnId: string): T[] {
+		return items
+			.filter((item) => getColumn(item) === columnId)
+			.slice()
+			.sort(compare);
+	}
+
+	function idAt(list: T[], index: number): string | null {
+		const item = list[index];
+		return item === undefined ? null : getId(item);
+	}
+
+	const dnd = createKanbanDnd<T>({
+		items: () => items,
+		getId: (item) => getId(item),
+		getColumn: (item) => getColumn(item),
+		getColumnItems: sortedByColumn,
+		getSortKey: () => sortKey,
+		boardOrder: (item) => boardOrder?.(item),
+		onMove: (id, move) => onMove(id, move),
+		dropAtTop: (columnId) => dropAtTop?.(columnId) ?? false,
+		isDroppable: (columnId) =>
+			isDroppable?.(columnId) ??
+			(columns.find((c) => c.id === columnId)?.droppable ?? true),
+	});
+
+	/**
+	 * Keyboard move: Alt + ArrowLeft/Right drops the focused card in the
+	 * adjacent droppable column. Native drag stays the primary path; this
+	 * covers keyboard and touch-reader users with the same onMove contract.
+	 */
+	function onCardKeyDown(e: KeyboardEvent, id: string): void {
+		if (!e.altKey || (e.key !== "ArrowLeft" && e.key !== "ArrowRight")) return;
+		const item = items.find((entry) => getId(entry) === id);
+		if (!item) return;
+		const current = getColumn(item);
+		const at = columns.findIndex((c) => c.id === current);
+		if (at === -1) return;
+		const dir = e.key === "ArrowRight" ? 1 : -1;
+		const canDrop = (columnId: string) =>
+			isDroppable?.(columnId) ??
+			(columns.find((c) => c.id === columnId)?.droppable ?? true);
+		for (let i = at + dir; i >= 0 && i < columns.length; i += dir) {
+			const target = columns[i];
+			if (!canDrop(target.id) || target.id === current) continue;
+			e.preventDefault();
+			if (sortKey === "manual" && boardOrder) {
+				const column = sortedByColumn(target.id).filter(
+					(entry) => getId(entry) !== id,
+				);
+				void onMove(id, {
+					columnId: target.id,
+					boardOrder: boardOrderAt(column, column.length, (entry) =>
+						boardOrder(entry),
+					),
+				});
+			} else {
+				void onMove(id, { columnId: target.id });
+			}
+			return;
+		}
+	}
+
+	let view = $derived(columns.map((column) => ({ column, cards: sortedByColumn(column.id) })));
+</script>
+
+<div
+	class={cn(
+		"kanban-board flex min-h-0 flex-1 items-stretch gap-4 overflow-x-auto pb-2",
+		"max-sm:-mx-4 max-sm:snap-x max-sm:snap-proximity max-sm:scroll-px-4 max-sm:px-4",
+		className,
+	)}
+>
+	{#each view as { column, cards } (column.id)}
+		{@const active = dnd.dragOver?.columnId === column.id}
+		<KanbanColumn
+			hue={column.hue}
+			{active}
+			ariaLabel={column.ariaLabel ?? column.label}
+			ondragover={(e) => dnd.onColumnDragOver(e, column.id)}
+			ondragleave={dnd.onDragLeave}
+			ondrop={(e) => dnd.onDrop(e, column.id)}
+		>
+			{#snippet header()}
+				{#if columnHeader}
+					{@render columnHeader(column, { count: cards.length, active })}
+				{:else}
+					<span class="truncate text-sm font-medium text-foreground">{column.label}</span>
+					<span
+						class="grid h-5 min-w-5 place-items-center rounded-sm bg-foreground/5 px-1 text-xs font-medium text-muted-foreground tabular-nums"
+					>
+						{cards.length}
+					</span>
+				{/if}
+			{/snippet}
+
+			{#each cards as item, index (getId(item))}
+				{@const id = getId(item)}
+				{#if dnd.showIndicatorBefore(column.id, id) && !dnd.isDragSource(id) && idAt(cards, index - 1) !== dnd.draggedId}
+					<div
+						class="kanban-drop-slot"
+						aria-hidden="true"
+						style:height="{slotHeight}px"
+						ondragover={(e) => {
+							e.preventDefault();
+							e.stopPropagation();
+						}}
+					></div>
+				{/if}
+				<div
+					role="listitem"
+					tabindex="0"
+					aria-label="Card. Press Alt plus Left or Right arrow to move between columns."
+					draggable="true"
+					ondragstart={(e) => {
+						slotHeight = e.currentTarget.getBoundingClientRect().height;
+						liftDragImage(e);
+						dnd.onDragStart(e, id);
+					}}
+					ondragend={() => dnd.resetDrag()}
+					ondragover={(e) => dnd.onItemDragOver(e, column.id, id, idAt(cards, index + 1))}
+					onkeydown={(e) => onCardKeyDown(e, id)}
+					class={cn(
+						"kanban-card cursor-grab active:cursor-grabbing",
+						dnd.isDragSource(id) && "opacity-40",
+					)}
+				>
+					{@render renderCard(item, { columnId: column.id, index })}
+				</div>
+			{/each}
+
+			{#if dnd.showIndicatorEnd(column.id) && idAt(cards, cards.length - 1) !== dnd.draggedId}
+				<div
+					class="kanban-drop-slot"
+					aria-hidden="true"
+					style:height="{slotHeight}px"
+					ondragover={(e) => {
+						e.preventDefault();
+						e.stopPropagation();
+					}}
+				></div>
+			{/if}
+
+			{#if cards.length === 0 && !active}
+				<div
+					class="rounded-xl border-2 border-dashed border-border py-6 text-center text-xs text-muted-foreground"
+				>
+					{emptyLabel}
+				</div>
+			{/if}
+		</KanbanColumn>
+	{/each}
+</div>
+
+<style>
+	.kanban-drop-slot {
+		flex-shrink: 0;
+		min-height: 2.5rem;
+		border-radius: var(--radius-lg, 0.5rem);
+		background: color-mix(in oklch, var(--color-muted, #e5e7eb) 70%, transparent);
+		outline: 1px dashed var(--color-border, #d1d5db);
+		outline-offset: -1px;
+		transition: height var(--duration-quick, 120ms) var(--ease-smooth-out, ease-out);
+	}
+</style>